/* VORTEX — طبقة عرض الأعمال (الأنمي والمانغا). تُحمَّل آخر شيء في الصفحتين فقط. */
:root {
  --vx-glow: 0 0 0 1px rgba(118,229,253,.18), 0 18px 50px -18px rgba(19,171,210,.45);
  --vx-card: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  --vx-line: rgba(255,255,255,.09);
  --vx-mute: #8E99A4;
}

/* ===== الهيرو ===== */
.mhero, .ax-hero { isolation: isolate; }
.mhero-bg, .ax-hero-bg { filter: saturate(1.15); }
.mhero-swirl { opacity: .55; mix-blend-mode: screen; }
.mhero h1, .ax-hero h1 {
  background: linear-gradient(180deg, #ffffff 35%, #76e5fd 140%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 6px 24px rgba(19,171,210,.25));
}
.ax-poster, .mhero-poster, .mhero img.cover {
  border-radius: 18px; box-shadow: var(--vx-glow), 0 30px 60px -20px rgba(0,0,0,.8);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.ax-poster:hover { transform: translateY(-4px) rotate(-.4deg); }
.ax-badge, .mhero .ch-badge {
  background: rgba(19,171,210,.12); border: 1px solid rgba(118,229,253,.28);
  color: #76e5fd; border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: 13px;
}
.ax-tagline { color: #D3DAE0; font-style: normal; opacity: .95; border-inline-start: 3px solid #13ABD2; padding-inline-start: 12px; }

/* أزرار الهيرو */
.hero-actions .btn.primary, .ax-hero .btn.primary {
  background: linear-gradient(135deg, #13abd2, #76e5fd); color: #04151c; border: 0;
  box-shadow: 0 10px 30px -10px rgba(19,171,210,.8); font-weight: 800;
}
.hero-actions .btn.secondary, .ax-hero .btn.secondary {
  backdrop-filter: blur(8px); background: rgba(255,255,255,.06); border: 1px solid var(--vx-line);
}
.hero-actions .btn { transition: transform .2s, box-shadow .2s; }
.hero-actions .btn:hover { transform: translateY(-2px); }

/* ===== قائمة الفصول (المانغا) ===== */
.ch-wrap, .ch-list { display: grid; gap: 8px; }
.ch-tools { position: sticky; top: var(--ds-header-h, 68px); z-index: 5; backdrop-filter: blur(12px);
  background: rgba(5,8,12,.78); padding: 10px 0; border-bottom: 1px solid var(--vx-line); }
.ch-search input { border-radius: 12px; border: 1px solid var(--vx-line); background: rgba(255,255,255,.04); }
.ch-search input:focus { outline: none; border-color: #13abd2; box-shadow: 0 0 0 3px rgba(19,171,210,.18); }
.ch-total { color: var(--vx-mute); font-size: 13px; }

.ch-row {
  position: relative; display: grid; grid-template-columns: 56px minmax(0,1fr) auto;
  align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px;
  background: var(--vx-card); border: 1px solid var(--vx-line);
  transition: transform .25s, border-color .25s, box-shadow .25s, background .25s;
  overflow: hidden;
}
.ch-row::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px;
  background: linear-gradient(180deg, #13abd2, #76e5fd); opacity: 0; transition: opacity .25s;
}
.ch-row:hover { transform: translateY(-2px); border-color: rgba(118,229,253,.35); box-shadow: var(--vx-glow); }
.ch-row:hover::before { opacity: 1; }
.ch-row.is-new { border-color: rgba(118,229,253,.4); }
.ch-row.is-done { opacity: .62; }
.ch-row.is-done .ch-title { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.3); }

.ch-num {
  width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center;
  font-family: var(--ds-font-mono); font-weight: 800; font-size: 18px; color: #76e5fd;
  background: radial-gradient(circle at 30% 20%, rgba(19,171,210,.35), rgba(19,171,210,.06));
  border: 1px solid rgba(118,229,253,.25);
}
.ch-main { min-width: 0; }
.ch-title { font-weight: 800; font-size: 16px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 4px; font-size: 13px; color: var(--vx-mute); align-items: center; }
.ch-date, .ch-views { display: inline-flex; align-items: center; gap: 4px; }
.ch-go { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid var(--vx-line); color: #76e5fd; transition: background .2s; }
.ch-row:hover .ch-go { background: #13abd2; color: #04151c; }
.ch-dl { color: var(--vx-mute); }
.ch-dl:hover { color: #76e5fd; }

/* تقييم الفصل (من social.js/manga.js) */
.ch-rate { font-weight: 800; color: #F6D58E; font-size: 13px; white-space: nowrap; }
.mg-rate-wrap { margin-top: 16px; }
.mg-rate { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px;
  background: rgba(246,213,142,.08); border: 1px solid rgba(246,213,142,.25); color: #F6D58E; font-weight: 700; }
.mg-rate b { font-size: 18px; color: #fff; }
.mg-rate small { color: var(--vx-mute); font-weight: 600; }

/* ===== بطاقات وألواح الأنمي ===== */
.ax-panel, .ax-card {
  background: var(--vx-card); border: 1px solid var(--vx-line); border-radius: 18px;
  box-shadow: 0 10px 40px -24px rgba(0,0,0,.8);
}
.ax-stat { border-radius: 16px; background: var(--vx-card); border: 1px solid var(--vx-line); padding: 14px; text-align: center; }
.ax-stat b { display: block; font-size: 22px; font-weight: 900; background: linear-gradient(135deg,#fff,#76e5fd); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ax-chip { border-radius: 999px; border: 1px solid var(--vx-line); background: rgba(255,255,255,.04); padding: 6px 14px; transition: all .2s; }
.ax-chip:hover, .ax-chip.is-active { border-color: #76e5fd; color: #76e5fd; background: rgba(19,171,210,.1); }
.ax-tabs { border-bottom: 1px solid var(--vx-line); gap: 6px; }
.ax-tabs button, .ax-tabs a { border-radius: 12px 12px 0 0; transition: color .2s, background .2s; }
.ax-tabs [aria-selected="true"], .ax-tabs .is-active { color: #76e5fd; background: linear-gradient(180deg, rgba(19,171,210,.14), transparent); }

/* حلقات الأنمي */
.ax-arc { border-radius: 14px; border: 1px solid var(--vx-line); background: rgba(255,255,255,.02); }
.ax-canon { border-inline-start: 3px solid #13abd2; padding-inline-start: 12px; }
.ax-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 10px; }
.ax-gallery img { border-radius: 14px; transition: transform .3s; }
.ax-gallery img:hover { transform: scale(1.03); }

/* ===== الجوال ===== */
@media (max-width: 640px) {
  .ch-row { grid-template-columns: 46px minmax(0,1fr) 36px; gap: 10px; padding: 12px; }
  .ch-num { width: 46px; height: 46px; font-size: 15px; border-radius: 12px; }
  .ch-go { width: 36px; height: 36px; }
  .ch-title { font-size: 15px; }
  .ax-poster { max-width: 180px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-row, .ax-poster, .ax-gallery img, .hero-actions .btn { transition: none; }
  .ch-row:hover, .ax-poster:hover, .hero-actions .btn:hover { transform: none; }
}

/* ===== خلفية الهيرو: هوية VORTEX بدل صورة الغلاف الخام ===== */
/* صورة الغلاف تبقى كطبقة خافتة بتدرج أزرق أحادي اللون وتتلاشى نحو الحواف */
.mhero { background: #05080c; overflow: hidden; }
.mhero-bg {
  inset: 0; opacity: .28; transform: none; filter: grayscale(1) contrast(1.25) brightness(.7);
  mix-blend-mode: luminosity;
  -webkit-mask-image: radial-gradient(ellipse 75% 90% at 75% 20%, #000 10%, transparent 75%);
          mask-image: radial-gradient(ellipse 75% 90% at 75% 20%, #000 10%, transparent 75%);
}
/* طبقة لونية: توهج سماوي وبنفسجي خافت من هوية العلامة */
.mhero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 70% at 85% 10%, rgba(19,171,210,.38), transparent 65%),
    radial-gradient(50% 60% at 5% 100%, rgba(118,229,253,.14), transparent 70%),
    linear-gradient(115deg, transparent 40%, rgba(118,229,253,.06) 50%, transparent 60%);
}
/* شبكة هندسية خفيفة تعطي إحساساً تقنياً مودرن */
.mhero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(118,229,253,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118,229,253,.07) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 70% 30%, #000, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 80% at 70% 30%, #000, transparent 80%);
}
/* علامة VORTEX الدوّارة كعنصر تصميم كبير بلون سماوي */
.mhero-swirl {
  opacity: .16; width: min(640px, 90vw); left: auto; right: -180px; bottom: -220px;
  filter: brightness(0) saturate(100%) invert(72%) sepia(60%) saturate(1800%) hue-rotate(160deg) brightness(1.05);
  -webkit-mask-image: radial-gradient(circle, #000 45%, transparent 72%);
          mask-image: radial-gradient(circle, #000 45%, transparent 72%);
}
/* خط ضوء أفقي يربط الهيرو بالمحتوى */
.mhero-inner { position: relative; z-index: 2; }
.mhero-inner::after {
  content: ""; display: block; height: 1px; margin-top: 28px;
  background: linear-gradient(90deg, transparent, rgba(118,229,253,.55), transparent);
}
/* تدرج سفلي ينمج الهيرو مع الصفحة */
.mhero::before { box-shadow: inset 0 -120px 120px -60px #05080c; }

@media (max-width: 640px) {
  .mhero-bg { opacity: .22; }
  .mhero-swirl { width: 360px; right: -140px; bottom: -150px; opacity: .12; }
  .mhero::after { background-size: 30px 30px; }
}
@media (prefers-reduced-motion: reduce) { .mhero-swirl { animation: none; } }

/* ===== أبعاد بطاقات الأعمال: 2:3 لكل المانغا والأنمي ===== */
.manga-cover, .ac-poster, .mposter-wrap, .mposter, .ax-poster, .manga-poster {
  aspect-ratio: 2 / 3 !important; height: auto !important; position: relative !important;
  overflow: hidden !important; width: 100%;
}
.manga-cover > img, .ac-poster > img, .mposter-wrap img, .mposter img, .ax-poster > img, .manga-poster > img {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  max-width: none !important; object-fit: cover !important; object-position: center top;
}
.ac-poster > span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 42px; font-weight: 900; color: #76e5fd; }

/* ===== أبعاد بطاقات الأعمال 2:3 (مانغا وأنمي) ===== */
.manga-cover,
.ac-poster,
.ac-card .ac-poster {
  position: relative; display: block; width: 100%;
  aspect-ratio: 2 / 3; height: auto; overflow: hidden;
}
.manga-cover img,
.ac-poster img,
.ac-card .ac-poster img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top; display: block;
}

/* ===== صور الشخصيات 1:1 ===== */
.ax-id-img { aspect-ratio: 1 / 1; }
.ax-id-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }