/* AsuraComix — app.css
   Palette: ink #0d0c10 / panel #16151c / paper #ece6dc / seal #e02440 / gold #e0ab3f
   Display: Zen Old Mincho. Body: system UI stack. */

:root {
  --ink:        #0d0c10;
  --ink-2:      #121116;
  --panel:      #16151c;
  --panel-2:    #1c1a23;
  --line:       #272531;
  --line-soft:  #1f1d27;
  --paper:      #ece6dc;
  --muted:      #9a94a4;
  --muted-2:    #6f6a7a;
  --seal:       #e02440;
  --seal-deep:  #9e1226;
  --seal-glow:  rgba(224, 36, 64, .38);
  --gold:       #e0ab3f;
  --green:      #4ec98a;

  --r-sm: 4px;
  --r:    8px;
  --r-lg: 14px;

  --shell: 1280px;
  --gap:   clamp(14px, 2.2vw, 26px);

  --display: "Zen Old Mincho", "Noto Serif JP", Georgia, serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --header-h: 60px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
  overflow-wrap: break-word;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; background: var(--panel-2); }

a { color: inherit; text-decoration: none; }
a:hover { color: #fff; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h2 { font-size: clamp(1.25rem, 2.1vw, 1.6rem); }
h3 { font-size: 1.05rem; }

p { margin: 0 0 1em; }

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: clamp(14px, 3vw, 28px); }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--seal); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------------ header */

.masthead {
  position: sticky; top: 0; z-index: 50;
  background: rgba(13, 12, 16, .92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.masthead__bar {
  display: flex; align-items: center; gap: 18px;
  height: var(--header-h);
  max-width: var(--shell); margin-inline: auto;
  padding-inline: clamp(14px, 3vw, 28px);
}

.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand__seal {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 6px;
  background: linear-gradient(155deg, var(--seal) 0%, var(--seal-deep) 100%);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: 19px; line-height: 1;
  box-shadow: 0 2px 10px -2px var(--seal-glow);
}
.brand__name {
  font-family: var(--display);
  font-size: 1.28rem; font-weight: 700; letter-spacing: .01em;
}
.brand__name span { color: var(--seal); }

.mainnav { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; }
.mainnav a {
  padding: 7px 11px; border-radius: var(--r-sm);
  color: var(--muted); font-size: .92rem; font-weight: 500;
  white-space: nowrap;
}
.mainnav a:hover { color: var(--paper); background: var(--panel); }
.mainnav a[aria-current="page"] { color: var(--paper); box-shadow: inset 0 -2px 0 var(--seal); }

.masthead__tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.searchbox { position: relative; }
.searchbox input {
  width: 210px; max-width: 40vw;
  padding: 8px 12px 8px 34px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; color: var(--paper); font-size: .88rem;
}
.searchbox input::placeholder { color: var(--muted-2); }
.searchbox input:focus { border-color: var(--seal); outline: none; }
.searchbox svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted-2); }

.suggest {
  position: absolute; top: calc(100% + 8px); right: 0; width: min(380px, 84vw);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 20px 50px -18px #000; overflow: hidden; z-index: 60;
}
.suggest:empty { display: none; }
.suggest a { display: flex; gap: 10px; padding: 9px 12px; align-items: center; }
.suggest a:hover, .suggest a:focus-visible { background: var(--panel-2); }
.suggest img { width: 34px; height: 48px; object-fit: cover; border-radius: 3px; flex: 0 0 34px; }
.suggest strong { display: block; font-size: .9rem; font-weight: 600; }
.suggest small { color: var(--muted); font-size: .76rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--panel);
  color: var(--paper); font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--panel-2); border-color: #3a3746; color: var(--paper); }
.btn--seal { background: var(--seal); border-color: var(--seal); color: #fff; }
.btn--seal:hover { background: #ef3450; border-color: #ef3450; color: #fff; }
.btn--ghost { background: transparent; }
.btn--sm { padding: 6px 12px; font-size: .82rem; }
.btn--wide { width: 100%; }
.btn[aria-pressed="true"] { background: var(--seal-deep); border-color: var(--seal); color: #fff; }

.icon-btn {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); cursor: pointer;
}
.icon-btn:hover { background: var(--panel-2); }

.nav-toggle { display: none; }

@media (max-width: 900px) {
  .mainnav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink-2); border-bottom: 1px solid var(--line);
    padding: 8px clamp(14px, 3vw, 28px) 16px;
    transform: translateY(-130%); transition: transform .22s ease;
    max-height: calc(100dvh - var(--header-h)); overflow: auto;
  }
  .mainnav[data-open="true"] { transform: translateY(0); }
  .mainnav a { padding: 12px 6px; border-bottom: 1px solid var(--line-soft); font-size: 1rem; }
  .nav-toggle { display: grid; order: -1; }
  .searchbox input { width: 150px; }
}
@media (max-width: 560px) {
  .brand__name { display: none; }
  .searchbox input { width: 120px; }
}

/* ------------------------------------------------------------ hero slider */

.hero {
  position: relative; isolation: isolate;
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
  background: var(--ink-2);
}
.hero__track { display: grid; }

/* All slides stack in the same grid cell; only the active one is visible. */
.hero__slide {
  grid-area: 1 / 1;
  position: relative; isolation: isolate;
  min-height: 420px;
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease;
}
.hero__slide[data-active="true"] { opacity: 1; visibility: visible; z-index: 1; }

/* Without JS the first slide is simply the hero. */
.no-js .hero__slide:not([data-active="true"]) { display: none; }

.hero__backdrop {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center 28%;
  opacity: .55;
  transform: scale(1.03);
}
/* When a series has no banner we reuse the cover, so it needs heavy treatment
   to work as a wide backdrop rather than looking like a stretched thumbnail. */
.hero__slide--nobanner .hero__backdrop {
  filter: blur(30px) saturate(1.7) brightness(1.15);
  opacity: .85;
  transform: scale(1.35);
  object-position: 72% 40%;
  /* Fade the art out towards the text so the copy always stays readable. */
  mask-image: linear-gradient(90deg, transparent 6%, #000 62%);
  -webkit-mask-image: linear-gradient(90deg, transparent 6%, #000 62%);
}
.hero__slide::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, var(--ink) 6%, rgba(13, 12, 16, .84) 38%, rgba(13, 12, 16, .12) 76%),
    linear-gradient(0deg, var(--ink) 0%, rgba(13, 12, 16, .05) 52%);
}

.hero__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(24px, 4vw, 56px); align-items: center;
  max-width: var(--shell); margin-inline: auto;
  min-height: 420px;
  padding: clamp(30px, 4vw, 50px) clamp(14px, 3vw, 28px);
}
.hero__text { max-width: 62ch; }

.hero__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 12px; font-size: .84rem; color: var(--muted);
}
.hero__dot { color: var(--muted-2); }
.hero__score { color: var(--gold); font-weight: 700; }
.hero__pick {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 3px;
  background: var(--seal); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .01em;
}
.hero__pick--rank { background: rgba(224, 171, 63, .16); color: var(--gold); }

.hero__title { font-size: clamp(1.9rem, 4vw, 3rem); margin: 0 0 .12em; }
.hero__title a { color: inherit; }
.hero__title a:hover { color: #fff; }
.hero__orig { color: var(--muted); font-size: .95rem; margin: 0 0 12px; }

.hero__genres { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip--sm { padding: 3px 9px; font-size: .74rem; }

.hero__blurb {
  color: #cfc8c0; margin-bottom: 22px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hero__reads { color: var(--muted-2); font-size: .82rem; }
.btn--glass {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px);
}
.btn--glass:hover { background: rgba(255, 255, 255, .13); }

.hero__cover { display: block; position: relative; }
.hero__cover::before {
  content: ""; position: absolute; inset: -12% -8%; z-index: -1;
  background: radial-gradient(ellipse at center, var(--seal-glow) 0%, transparent 68%);
  opacity: .5; filter: blur(28px);
}
.hero__cover img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 30px 70px -26px #000, 0 0 0 1px rgba(0, 0, 0, .5);
  transition: transform .35s ease;
}
.hero__cover:hover img { transform: translateY(-4px); }

/* --- controls --- */

.hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; cursor: pointer;
  background: rgba(13, 12, 16, .6);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--paper);
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s ease, background .2s ease;
}
.hero:hover .hero__arrow, .hero__arrow:focus-visible { opacity: 1; }
.hero__arrow:hover { background: var(--seal); border-color: var(--seal); }
.hero__arrow--prev { left: 14px; }
.hero__arrow--next { right: 14px; }

.hero__dots {
  position: absolute; left: 0; right: 0; bottom: 16px; z-index: 3;
  display: flex; justify-content: center; gap: 8px;
}
.hero__dot-btn {
  width: 26px; height: 16px; padding: 0;
  background: none; border: 0; cursor: pointer;
  display: grid; place-items: center;
}
.hero__dot-btn span {
  display: block; width: 22px; height: 3px; border-radius: 3px;
  background: rgba(255, 255, 255, .3);
  transition: background .2s ease, width .2s ease;
}
.hero__dot-btn[aria-selected="true"] span { background: var(--seal); width: 30px; }
.hero__dot-btn:hover span { background: rgba(255, 255, 255, .6); }

@media (max-width: 880px) {
  .hero__slide, .hero__inner { min-height: 0; }
  .hero__inner {
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 18px; align-items: start;
    padding-block: 26px 46px;
  }
  .hero__cover { order: -1; }
  .hero__blurb { -webkit-line-clamp: 3; margin-bottom: 14px; font-size: .92rem; }
  .hero__meta { font-size: .78rem; gap: 6px; margin-bottom: 8px; }
  .hero__dots { bottom: 12px; }
  .hero__title { font-size: clamp(1.35rem, 5.4vw, 1.9rem); }
  .hero__arrow { display: none; }
  .hero__slide::after {
    background: linear-gradient(180deg, rgba(13, 12, 16, .74) 0%, rgba(13, 12, 16, .92) 65%, var(--ink) 100%);
  }
}
@media (max-width: 520px) {
  .hero__inner { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; padding-block: 20px 40px; }
  .hero__genres, .hero__reads, .hero__orig, .hero__dot { display: none; }
  .hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero__actions .btn { width: 100%; padding-inline: 8px; font-size: .84rem; }
}

/* --------------------------------------------------------------- sections */

.layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(22px, 3vw, 40px);
  padding-block: clamp(26px, 4vw, 44px);
  align-items: start;
}
@media (max-width: 1040px) { .layout { grid-template-columns: 1fr; } }

.section + .section { margin-top: clamp(30px, 4vw, 48px); }
.section__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 18px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.section__head h2, .section__head .section__h1 { margin: 0; }
.section__h1 { font-size: clamp(1.25rem, 2.1vw, 1.6rem); }
.section__head a { color: var(--muted); font-size: .86rem; font-weight: 600; }
.section__head a:hover { color: var(--seal); }
.section__note { color: var(--muted); font-size: .88rem; margin: -8px 0 18px; }

/* ------------------------------------------------------------ update rows */

.updates { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .updates { grid-template-columns: 1fr; } }

.update {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px;
  padding: 12px; border-radius: var(--r);
  background: var(--panel); border: 1px solid var(--line-soft);
}
.update:hover { border-color: var(--line); background: var(--panel-2); }
.update__cover img {
  width: 96px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px;
  transition: transform .25s ease;
}
.update:hover .update__cover img { transform: scale(1.03); }
@media (max-width: 400px) {
  .update { grid-template-columns: 78px minmax(0, 1fr); gap: 12px; }
  .update__cover img { width: 78px; }
}
.update__title {
  font-weight: 600; font-size: 1rem; margin: 0 0 2px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.update__sub { color: var(--muted-2); font-size: .76rem; margin-bottom: 8px; }
.update__chapters { display: grid; gap: 5px; }
.chapter-pill {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 10px; border-radius: var(--r-sm);
  background: var(--ink-2); border: 1px solid transparent;
  font-size: .84rem; color: #c6c0cd;
}
.chapter-pill:hover { border-color: var(--line); color: #fff; background: #1a1922; }
.chapter-pill time { color: var(--muted-2); font-size: .74rem; white-space: nowrap; }
.chapter-pill .fresh { color: var(--seal); font-weight: 700; }

/* ---------------------------------------------------------- series cards */

.grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
@media (max-width: 420px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.card { position: relative; }
.card__art {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r); border: 1px solid var(--line-soft);
  background: var(--panel-2);
}
.card__art img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
  transition: transform .3s ease;
}
.card:hover .card__art img { transform: scale(1.04); }
.card__badge {
  position: absolute; top: 7px; left: 7px;
  padding: 2px 7px; border-radius: 3px;
  background: rgba(13, 12, 16, .82); backdrop-filter: blur(3px);
  font-size: .68rem; font-weight: 700; letter-spacing: .02em; color: var(--paper);
}
.card__badge--seal { background: var(--seal); color: #fff; }
.card__score {
  position: absolute; right: 7px; bottom: 7px;
  display: flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 3px;
  background: rgba(13, 12, 16, .84);
  font-size: .72rem; font-weight: 700; color: var(--gold);
}
.card__title {
  margin: 9px 0 3px; font-size: .9rem; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card__meta { color: var(--muted-2); font-size: .76rem; }
.card__latest { color: var(--muted); font-size: .78rem; }

/* --------------------------------------------------------------- rank rail */

.aside { display: grid; gap: 26px; align-content: start; }
@media (min-width: 1041px) { .aside { position: sticky; top: calc(var(--header-h) + 20px); } }

.panel {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); padding: 16px;
}
.panel > h2 { font-size: 1.1rem; margin-bottom: 12px; }

.rank { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.rank > li { list-style: none; }
.rank__item {
  display: grid; grid-template-columns: 26px 40px minmax(0, 1fr); gap: 11px;
  align-items: center; padding: 7px 6px; border-radius: var(--r-sm);
}
.rank__item:hover { background: var(--panel-2); }
.rank__n {
  font-family: var(--display); font-size: 1.15rem; font-weight: 700;
  color: var(--muted-2); text-align: center;
}
.rank > li:nth-child(-n+3) .rank__n { color: var(--gold); }
.rank__item img { width: 40px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px; }
.rank__title {
  font-size: .87rem; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rank__meta { color: var(--muted-2); font-size: .74rem; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel-2);
  font-size: .8rem; color: var(--muted); white-space: nowrap;
}
.chip:hover, .chip[aria-current="page"] { border-color: var(--seal); color: var(--paper); }
.chip--on { border-color: var(--seal); background: rgba(224, 36, 64, .12); color: var(--paper); }

/* ------------------------------------------------------------ series page */

.hero-series { position: relative; isolation: isolate; border-bottom: 1px solid var(--line-soft); }
.hero-series__bg {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; opacity: .22; filter: blur(2px) saturate(.8);
}
.hero-series::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(13, 12, 16, .72) 0%, var(--ink) 92%);
}
.series-head {
  display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(18px, 3vw, 36px);
  padding-block: clamp(24px, 4vw, 44px);
}
.series-head__cover img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
  border-radius: var(--r); border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 24px 50px -22px #000;
}
.series-head h1 { margin-bottom: .2em; }
.series-head__alt { color: var(--muted); font-size: .92rem; margin-bottom: 14px; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 16px; padding: 0; list-style: none; }
.facts li { font-size: .85rem; color: var(--muted); }
.facts b { color: var(--paper); font-weight: 600; }
.series-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
@media (max-width: 680px) {
  .series-head { grid-template-columns: 116px minmax(0, 1fr); gap: 16px; }
  .series-head h1 { font-size: 1.4rem; }
}

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.tabs button {
  padding: 10px 14px; background: none; border: 0; cursor: pointer;
  color: var(--muted); font-weight: 600; font-size: .92rem;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button[aria-selected="true"] { color: var(--paper); border-bottom-color: var(--seal); }

.prose { max-width: 100%; color: #cdc7c0; }
.prose h2, .prose h3 { color: var(--paper); margin-top: 1.4em; }
.prose a { color: var(--seal); text-decoration: underline; text-underline-offset: 2px; }
.prose ul, .prose ol { padding-left: 1.2em; }

.chapter-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.chapter-toolbar input, .chapter-toolbar select {
  padding: 8px 12px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); font-size: .88rem;
}
.chapter-toolbar input { flex: 1 1 200px; }

.chapter-list {
  display: grid; gap: 6px; max-height: 620px; overflow: auto;
  padding-right: 4px; padding-bottom: 8px;
  mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent 100%);
}
.chapter-list:not([data-scrolls]) { mask-image: none; -webkit-mask-image: none; }
.chapter-list::-webkit-scrollbar { width: 8px; }
.chapter-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.chapter-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 14px; border-radius: var(--r);
  background: var(--panel); border: 1px solid var(--line-soft);
}
.chapter-row:hover { border-color: var(--seal); background: var(--panel-2); }
.chapter-row--read { opacity: .55; }
.chapter-row__n { font-weight: 600; font-size: .93rem; }
.chapter-row__t { color: var(--muted); font-size: .82rem; font-weight: 400; }
.chapter-row time { color: var(--muted-2); font-size: .76rem; white-space: nowrap; }

.stat-row { display: flex; flex-wrap: wrap; gap: 18px; margin: 16px 0; }
.stat { display: grid; gap: 2px; }
.stat b { font-family: var(--display); font-size: 1.25rem; }
.stat span { color: var(--muted-2); font-size: .76rem; }

.stars { display: inline-flex; gap: 2px; }
.stars button {
  background: none; border: 0; cursor: pointer; padding: 0 1px;
  color: var(--muted-2); font-size: 1.05rem; line-height: 1;
}
.stars button[data-on="1"] { color: var(--gold); }

/* -------------------------------------------------------------- the reader */

.reading .masthead { position: static; }

.reader-bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  padding: 8px clamp(10px, 2vw, 20px);
  background: rgba(13, 12, 16, .95); border-bottom: 1px solid var(--line-soft);
  backdrop-filter: blur(8px);
  transition: transform .25s ease;
}
.reader-bar[data-hidden="true"] { transform: translateY(-100%); }
.reader-bar__title {
  min-width: 0; flex: 1 1 auto;
  font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reader-bar select {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 7px 10px; font-size: .85rem; max-width: 44vw;
}

.pages { margin-inline: auto; background: #000; }
.pages img {
  width: 100%; height: auto; margin-inline: auto; display: block;
  content-visibility: auto;
}
.pages--fit  { max-width: 900px; }
.pages--wide { max-width: 1200px; }
.pages--full { max-width: 100%; }

.reader-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 22px clamp(14px, 3vw, 28px); max-width: 900px; margin-inline: auto;
}
.reader-end { text-align: center; padding: 30px 16px; }

.progress-bar {
  position: fixed; left: 0; bottom: 0; height: 3px; z-index: 45;
  background: var(--seal); width: 0; transition: width .1s linear;
}

/* ------------------------------------------------------------- pagination */

.pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 32px 0 8px; }
.pager a, .pager span {
  min-width: 38px; padding: 8px 12px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); font-size: .88rem;
}
.pager a:hover { border-color: var(--seal); }
.pager [aria-current="page"] { background: var(--seal); border-color: var(--seal); color: #fff; font-weight: 700; }
.pager span[aria-disabled] { opacity: .35; }

/* --------------------------------------------------------------- comments */

.comment { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.comment__avatar {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
  background: var(--panel-2); display: grid; place-items: center;
  font-family: var(--display); color: var(--seal);
}
.comment__head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 3px; }
.comment__head b { font-size: .89rem; }
.comment__head time { color: var(--muted-2); font-size: .75rem; }
.comment__body { color: #cdc7c0; font-size: .92rem; }
.comment__replies { margin-left: 12px; padding-left: 14px; border-left: 1px solid var(--line-soft); }
.spoiler { cursor: pointer; filter: blur(5px); transition: filter .15s; }
.spoiler[data-open="1"] { filter: none; }

.formbox { display: grid; gap: 12px; max-width: 460px; }
.formbox label { font-size: .85rem; color: var(--muted); display: grid; gap: 5px; }
.formbox input, .formbox textarea, .formbox select {
  padding: 10px 12px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); font-size: .95rem; width: 100%;
}
.formbox input:focus, .formbox textarea:focus { border-color: var(--seal); outline: none; }
.notice {
  padding: 11px 14px; border-radius: var(--r); font-size: .88rem;
  border: 1px solid var(--line); background: var(--panel);
}
.notice--bad { border-color: var(--seal-deep); background: rgba(224, 36, 64, .1); }
.notice--good { border-color: #2c6b4c; background: rgba(78, 201, 138, .09); }

/* ---------------------------------------------------------------- filters */

.filters {
  display: grid; gap: 14px; padding: 16px;
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  margin-bottom: 24px;
}
.filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filters__row > b { font-size: .8rem; color: var(--muted-2); font-weight: 600; min-width: 58px; }

/* ------------------------------------------------------------------ footer */

.footer { border-top: 1px solid var(--line-soft); background: var(--ink-2); margin-top: 50px; }
.footer__grid {
  display: grid; gap: 30px; padding-block: 40px;
  grid-template-columns: 1.6fr repeat(3, 1fr);
}
@media (max-width: 780px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
.footer h3 { font-size: .95rem; margin-bottom: 12px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer a, .footer p { color: var(--muted); font-size: .87rem; }
.footer a:hover { color: var(--paper); }
.footer__bottom {
  border-top: 1px solid var(--line-soft); padding-block: 18px;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  color: var(--muted-2); font-size: .8rem;
}

/* ------------------------------------------------------------------- misc */

.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty h2 { color: var(--paper); }
.center { text-align: center; }
.muted { color: var(--muted); }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tag-seal {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--seal); font-size: .74rem; font-weight: 700;
}
.divider { height: 1px; background: var(--line-soft); margin: 26px 0; border: 0; }

/* ========================================================================== */
/* AsuraComix 2026 visual system                                               */
/* ========================================================================== */

:root {
  --ink: #07070c;
  --ink-2: #0a0a12;
  --panel: #10101a;
  --panel-2: #151522;
  --line: #2a2940;
  --line-soft: #1d1c2d;
  --paper: #f7f5ff;
  --muted: #aaa6bd;
  --muted-2: #77738d;
  --seal: #8b5cf6;
  --seal-deep: #6d28d9;
  --seal-glow: rgba(139, 92, 246, .35);
  --gold: #c4b5fd;
  --green: #55d6a2;
  --r-sm: 7px;
  --r: 12px;
  --r-lg: 18px;
  --shell: 1320px;
  --header-h: 68px;
  --display: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(900px 520px at 82% -120px, rgba(109, 40, 217, .16), transparent 65%),
    radial-gradient(700px 440px at -10% 24%, rgba(79, 70, 229, .08), transparent 62%),
    var(--ink);
  letter-spacing: -.005em;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .25;
  background-image: linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(to bottom, #000 0, transparent 70%);
}

h1, h2, h3, h4 { letter-spacing: -.035em; }
a, button, input, select, textarea { transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
:focus-visible { outline-color: #a78bfa; }

/* Header */
.masthead {
  background: rgba(7, 7, 12, .78);
  border-bottom-color: rgba(139, 92, 246, .12);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .16);
  backdrop-filter: saturate(1.35) blur(18px);
}
.masthead__bar { gap: clamp(12px, 2vw, 26px); }
.brand--image { min-width: 0; }
.brand__logo {
  display: block;
  width: clamp(154px, 15vw, 205px);
  height: 48px;
  object-fit: contain;
  object-position: left center;
  background: transparent;
  filter: drop-shadow(0 8px 22px rgba(109, 40, 217, .20));
}
.mainnav { gap: 1px; }
.mainnav a {
  padding: 8px 11px;
  border-radius: 10px;
  color: #9692a8;
  font-size: .89rem;
  font-weight: 650;
}
.mainnav a:hover { background: rgba(139, 92, 246, .08); color: #fff; }
.mainnav a[aria-current="page"] {
  color: #fff;
  background: rgba(139, 92, 246, .10);
  box-shadow: inset 0 -2px 0 #8b5cf6;
}
.searchbox input {
  width: 230px;
  padding-block: 9px;
  background: rgba(19, 19, 31, .86);
  border-color: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
.searchbox input:focus { border-color: rgba(139,92,246,.72); box-shadow: 0 0 0 3px rgba(139,92,246,.11); }
.suggest { border-color: rgba(139,92,246,.18); box-shadow: 0 28px 70px rgba(0,0,0,.48); }
.icon-btn, .btn {
  border-color: rgba(255,255,255,.09);
  background: rgba(19,19,31,.82);
}
.btn { border-radius: 10px; }
.btn:hover, .icon-btn:hover { border-color: rgba(167,139,250,.32); background: #191829; }
.btn--seal {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  box-shadow: 0 10px 28px rgba(109,40,217,.18), inset 0 1px 0 rgba(255,255,255,.15);
}
.btn--seal:hover {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  transform: translateY(-1px);
}

/* Hero */
.hero {
  border-bottom-color: rgba(139,92,246,.10);
  background: #080810;
}
.hero__slide { min-height: 500px; }
.hero__slide::after {
  background:
    linear-gradient(90deg, rgba(7,7,12,.98) 3%, rgba(7,7,12,.89) 38%, rgba(7,7,12,.34) 70%, rgba(7,7,12,.76) 100%),
    linear-gradient(0deg, #07070c 0%, rgba(7,7,12,.06) 54%, rgba(7,7,12,.24) 100%);
}
.hero__backdrop { opacity: .46; filter: saturate(.95) contrast(1.04); }
.hero__inner { min-height: 500px; grid-template-columns: minmax(0, 1fr) minmax(225px, 292px); }
.hero__text { max-width: 68ch; }
.hero__pick {
  border: 1px solid rgba(196,181,253,.18);
  border-radius: 999px;
  background: rgba(124,58,237,.18);
  color: #ddd6fe;
  padding: 4px 10px;
}
.hero__pick--rank { background: rgba(196,181,253,.11); color: #c4b5fd; }
.hero__title { font-size: clamp(2.25rem, 5vw, 4.4rem); line-height: .98; letter-spacing: -.055em; text-wrap: balance; }
.hero__title a { text-shadow: 0 14px 40px rgba(0,0,0,.45); }
.hero__orig { color: #918da5; }
.hero__blurb { color: #c9c5d8; font-size: .96rem; line-height: 1.72; max-width: 62ch; }
.hero__cover::before { background: radial-gradient(ellipse at center, rgba(124,58,237,.54), transparent 67%); }
.hero__cover img {
  border-radius: 18px;
  border-color: rgba(196,181,253,.20);
  box-shadow: 0 34px 90px -32px rgba(0,0,0,.95), 0 0 42px rgba(109,40,217,.10);
}
.hero__arrow { background: rgba(10,10,18,.68); border-color: rgba(255,255,255,.12); }
.hero__arrow:hover { background: #7c3aed; border-color: #8b5cf6; }
.hero__dot-btn[aria-selected="true"] span { background: #a78bfa; box-shadow: 0 0 14px rgba(139,92,246,.45); }

/* Homepage and listings */
.layout { padding-block: clamp(30px, 4vw, 54px); }
.section + .section { margin-top: clamp(38px, 5vw, 62px); }
.section__head {
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom-color: rgba(255,255,255,.055);
}
.section__head h2, .section__head .section__h1 { font-weight: 760; }
.section__head a { color: #8d899e; }
.section__head a:hover { color: #c4b5fd; }

.updates { gap: 14px; }
.update {
  grid-template-columns: 92px minmax(0,1fr);
  padding: 10px;
  border-radius: 16px;
  border-color: rgba(255,255,255,.055);
  background: linear-gradient(150deg, rgba(18,18,30,.94), rgba(13,13,22,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
.update:hover {
  border-color: rgba(139,92,246,.30);
  background: linear-gradient(150deg, rgba(24,23,40,.98), rgba(15,15,25,.98));
  transform: translateY(-1px);
}
.update__cover img { width: 92px; border-radius: 11px; }
.update__title { font-size: .98rem; letter-spacing: -.015em; }
.chapter-pill {
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 8px;
  background: rgba(7,7,12,.55);
}
.chapter-pill:hover { border-color: rgba(139,92,246,.30); background: rgba(139,92,246,.07); }
.chapter-pill .fresh { color: #a78bfa; }

.grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: clamp(14px,2vw,24px); }
.card__art {
  border-radius: 15px;
  border-color: rgba(255,255,255,.07);
  box-shadow: 0 18px 50px -32px rgba(0,0,0,.95);
}
.card__art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, rgba(7,7,12,.42));
  opacity: 0;
  transition: opacity .25s ease;
}
.card:hover .card__art { border-color: rgba(139,92,246,.34); box-shadow: 0 22px 55px -30px rgba(109,40,217,.34); }
.card:hover .card__art::after { opacity: 1; }
.card__badge { border-radius: 8px; background: rgba(7,7,12,.78); border: 1px solid rgba(255,255,255,.08); }
.card__badge--seal { background: rgba(109,40,217,.88); border-color: rgba(196,181,253,.25); }
.card__score { border-radius: 8px; color: #ddd6fe; }
.card__title { margin-top: 10px; font-weight: 700; letter-spacing: -.018em; }

.panel, .filters {
  border-color: rgba(255,255,255,.065);
  background: linear-gradient(155deg, rgba(17,17,28,.94), rgba(12,12,20,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02), 0 20px 60px -50px #000;
}
.panel { border-radius: 18px; }
.rank__item { border-radius: 11px; }
.rank__item:hover { background: rgba(139,92,246,.07); }
.rank__n { color: #6f6a86; font-variant-numeric: tabular-nums; }
.rank > li:nth-child(-n+3) .rank__n { color: #bba6ff; }
.rank__item img { border-radius: 7px; }
.chip {
  border-color: rgba(255,255,255,.07);
  background: rgba(255,255,255,.025);
  color: #9e9aaf;
}
.chip:hover, .chip[aria-current="page"] { border-color: rgba(139,92,246,.40); color: #eeeaff; background: rgba(139,92,246,.07); }
.chip--on { border-color: rgba(139,92,246,.55); background: rgba(139,92,246,.13); color: #f2efff; }

/* Series */
.hero-series { border-bottom-color: rgba(139,92,246,.09); overflow: hidden; }
.hero-series__bg { opacity: .28; filter: blur(2px) saturate(.9) contrast(1.05); transform: scale(1.02); }
.hero-series::after {
  background:
    radial-gradient(600px 320px at 78% 30%, rgba(109,40,217,.12), transparent 65%),
    linear-gradient(180deg, rgba(7,7,12,.60) 0%, rgba(7,7,12,.92) 66%, #07070c 100%);
}
.series-head { grid-template-columns: minmax(180px, 220px) minmax(0,1fr); padding-block: clamp(32px,5vw,62px); }
.series-head__cover img {
  border-radius: 18px;
  border-color: rgba(196,181,253,.18);
  box-shadow: 0 34px 80px -34px #000, 0 0 45px rgba(109,40,217,.08);
}
.series-head h1 { font-size: clamp(2rem,4.5vw,4rem); line-height: 1; text-wrap: balance; }
.facts { gap: 8px 20px; }
.facts li { color: #9692a8; }
.facts b { color: #f6f3ff; }
.tabs { border-bottom-color: rgba(255,255,255,.07); gap: 6px; }
.tabs button { border-radius: 10px 10px 0 0; }
.tabs button:hover { color: #fff; background: rgba(139,92,246,.06); }
.tabs button[aria-selected="true"] { border-bottom-color: #8b5cf6; color: #fff; }
.prose { color: #c8c4d4; line-height: 1.78; }
.prose a { color: #b8a4ff; text-decoration-color: rgba(184,164,255,.35); }
.chapter-toolbar input, .chapter-toolbar select, .formbox input, .formbox textarea, .formbox select {
  background: #11111b;
  border-color: rgba(255,255,255,.08);
}
.chapter-toolbar input:focus, .chapter-toolbar select:focus, .formbox input:focus, .formbox textarea:focus, .formbox select:focus {
  border-color: rgba(139,92,246,.70);
  box-shadow: 0 0 0 3px rgba(139,92,246,.09);
}
.chapter-row {
  border-radius: 12px;
  border-color: rgba(255,255,255,.055);
  background: linear-gradient(120deg, rgba(18,18,29,.90), rgba(13,13,22,.92));
}
.chapter-row:hover { border-color: rgba(139,92,246,.35); background: rgba(139,92,246,.055); transform: translateX(2px); }
.stat b { color: #efeaff; }
.stars button[data-on="1"] { color: #c4b5fd; }

/* Reader */
.reading { background: #020203; }
.reader-bar {
  background: rgba(5,5,8,.88);
  border-bottom-color: rgba(139,92,246,.12);
  backdrop-filter: blur(18px);
}
.reader-bar select { background: #101018; border-color: rgba(255,255,255,.09); }
.pages { background: #000; }
.progress-bar { background: linear-gradient(90deg,#6d28d9,#a78bfa); box-shadow: 0 -2px 10px rgba(139,92,246,.24); }

/* Pagination / forms / misc */
.pager a, .pager span { border-color: rgba(255,255,255,.07); background: #101019; }
.pager a:hover { border-color: rgba(139,92,246,.45); background: rgba(139,92,246,.07); }
.pager [aria-current="page"] { background: #6d28d9; border-color: #7c3aed; }
.notice { border-color: rgba(255,255,255,.07); background: #11111b; }
.notice--bad { border-color: rgba(244,63,94,.35); background: rgba(244,63,94,.08); }
.notice--good { border-color: rgba(85,214,162,.28); background: rgba(85,214,162,.07); }
.tag-seal { color: #a78bfa; }
.divider { background: rgba(255,255,255,.06); }

/* Footer */
.footer {
  margin-top: 72px;
  border-top-color: rgba(139,92,246,.10);
  background:
    radial-gradient(500px 220px at 8% 0%, rgba(109,40,217,.10), transparent 68%),
    #090910;
}
.footer__grid { padding-block: 48px; }
.footer__bottom { border-top-color: rgba(255,255,255,.05); }
.footer .brand__logo { width: 188px; height: 58px; margin-bottom: 10px; }

/* Mobile */
@media (max-width: 900px) {
  .masthead__bar { gap: 9px; }
  .mainnav {
    background: rgba(9,9,16,.98);
    border-bottom-color: rgba(139,92,246,.14);
    box-shadow: 0 28px 60px rgba(0,0,0,.45);
  }
  .brand__logo { width: 160px; height: 45px; }
  .hero__slide, .hero__inner { min-height: 0; }
  .hero__inner { grid-template-columns: 132px minmax(0,1fr); padding-block: 30px 50px; }
  .hero__title { font-size: clamp(1.55rem,6vw,2.25rem); }
  .series-head { grid-template-columns: 132px minmax(0,1fr); }
  .series-head h1 { font-size: clamp(1.55rem,5.5vw,2.4rem); }
}
@media (max-width: 640px) {
  :root { --header-h: 62px; }
  .brand__logo { width: 132px; height: 40px; }
  .masthead__tools { gap: 5px; }
  .searchbox input { width: 42px; padding-left: 32px; padding-right: 8px; color: transparent; cursor: pointer; }
  .searchbox input::placeholder { color: transparent; }
  .searchbox:focus-within {
    position: absolute;
    left: 52px;
    right: 10px;
    z-index: 8;
  }
  .searchbox:focus-within input { width: 100%; max-width: none; color: var(--paper); cursor: text; background: #11111b; }
  .searchbox:focus-within input::placeholder { color: var(--muted-2); }
  .searchbox:focus-within + .btn { display: none; }
  .hero__inner { grid-template-columns: 102px minmax(0,1fr); gap: 14px; }
  .hero__blurb { display: none; }
  .updates { grid-template-columns: 1fr; }
  .update { grid-template-columns: 78px minmax(0,1fr); }
  .update__cover img { width: 78px; }
  .grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 12px; }
  .series-head { grid-template-columns: 112px minmax(0,1fr); gap: 15px; }
  .series-head__alt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .facts { gap: 5px 12px; }
  .series-actions { gap: 7px; }
  .series-actions .btn { padding: 8px 10px; font-size: .82rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
}
@media (max-width: 390px) {
  .brand__logo { width: 116px; }
  .hero__inner { grid-template-columns: 92px minmax(0,1fr); }
  .hero__actions { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
}

/* ======================================================================
   ASURACOMIX LUXURY UI — 2026 redesign
   This layer intentionally changes the public product identity, while the
   Latest Releases / last-three-chapters component keeps its existing markup.
   ====================================================================== */

:root {
  --ink: #06060a;
  --ink-2: #09090f;
  --panel: #0f0f18;
  --panel-2: #141421;
  --panel-3: #191829;
  --line: rgba(255,255,255,.085);
  --line-soft: rgba(255,255,255,.052);
  --paper: #f7f5ff;
  --muted: #a19caf;
  --muted-2: #716d7f;
  --seal: #8b5cf6;
  --seal-deep: #5b21b6;
  --seal-glow: rgba(139,92,246,.34);
  --gold: #d8c7ff;
  --green: #6ee7b7;
  --violet: #8b5cf6;
  --violet-2: #a78bfa;
  --violet-3: #c4b5fd;
  --blue: #6366f1;
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 24px;
  --r-xl: 34px;
  --shell: 1380px;
  --header-h: 78px;
  --body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html { background: var(--ink); }
body {
  min-height: 100vh;
  background:
    radial-gradient(1100px 560px at 50% -260px, rgba(111,65,246,.14), transparent 67%),
    linear-gradient(180deg, #07070c 0%, #08080e 42%, #06060a 100%);
  font-family: var(--body);
  color: var(--paper);
  font-size: 15px;
  line-height: 1.62;
  letter-spacing: -.006em;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: .26;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg,#000,transparent 70%);
}
.site-ambient { position: fixed; inset: 0; pointer-events: none; z-index: -2; overflow: hidden; }
.site-ambient span { position: absolute; border-radius: 50%; filter: blur(120px); opacity: .14; }
.site-ambient span:nth-child(1) { width: 520px; height: 520px; background:#6d28d9; top:12%; left:-260px; }
.site-ambient span:nth-child(2) { width: 620px; height: 620px; background:#4338ca; top:58%; right:-340px; opacity:.08; }
.site-ambient span:nth-child(3) { width: 360px; height: 360px; background:#a855f7; top:38%; left:42%; opacity:.035; }

h1,h2,h3,h4 { font-family: var(--display); letter-spacing: -.045em; font-weight: 760; }
h1 { font-size: clamp(2rem,4vw,4rem); line-height: .98; }
h2 { font-size: clamp(1.35rem,2.35vw,2.15rem); line-height: 1.04; }
h3 { font-size: 1.04rem; }
::selection { background: rgba(139,92,246,.35); color:#fff; }
:focus-visible { outline: 2px solid #a78bfa; outline-offset: 3px; }

.shell { max-width: var(--shell); padding-inline: clamp(16px,3vw,34px); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #a99dd1;
  font-size: .69rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow::before { content:""; width:22px; height:1px; background: linear-gradient(90deg,#8b5cf6,rgba(139,92,246,.1)); }
.text-link,.panel__link {
  color:#a8a3b7;
  font-size:.82rem;
  font-weight:700;
  transition: color .2s ease, transform .2s ease;
}
.text-link span { color:#a78bfa; margin-left:4px; }
.text-link:hover,.panel__link:hover { color:#fff; }

/* ---------------------------------------------------------------- Header */
.masthead {
  position: sticky;
  top: 0;
  z-index: 90;
  padding: 10px 0 0;
  background: linear-gradient(180deg,rgba(6,6,10,.92),rgba(6,6,10,.70) 70%,transparent);
  border: 0;
  backdrop-filter: none;
}
.masthead__frame { max-width: calc(var(--shell) + 42px); margin:0 auto; padding:0 12px; }
.masthead__bar {
  height: 64px;
  max-width: none;
  margin:0;
  padding: 8px 10px 8px 14px;
  border:1px solid rgba(255,255,255,.085);
  border-radius: 20px;
  background: rgba(11,11,18,.84);
  backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 14px 50px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.035);
}
.brand { min-width: 174px; }
.brand__logo { width: 172px; height: 50px; object-fit: contain; object-position:left center; }
.mainnav {
  flex: 0 1 auto;
  margin:0 auto;
  gap:3px;
  padding:4px;
  border:1px solid rgba(255,255,255,.055);
  border-radius: 14px;
  background: rgba(255,255,255,.018);
}
.mainnav a {
  position:relative;
  padding:8px 12px;
  border-radius:10px;
  color:#878294;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:-.01em;
  transition: .2s ease;
}
.mainnav a:hover { color:#fff; background:rgba(255,255,255,.04); }
.mainnav a[aria-current="page"] {
  color:#fff;
  background:linear-gradient(180deg,rgba(139,92,246,.17),rgba(139,92,246,.08));
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.14), 0 7px 22px rgba(91,33,182,.11);
}
.mainnav a[aria-current="page"]::after { display:none; }
.masthead__tools { gap:7px; }
.searchbox input {
  width: 228px;
  max-width: 32vw;
  height: 42px;
  padding: 9px 13px 9px 37px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:rgba(255,255,255,.025);
  color:#f4f1ff;
  font-size:.82rem;
  transition:.2s ease;
}
.searchbox input:focus { width: 280px; border-color:rgba(139,92,246,.45); background:#11111b; box-shadow:0 0 0 3px rgba(139,92,246,.08); }
.searchbox svg { left:13px; color:#716d7f; }
.suggest {
  top:calc(100% + 12px);
  width:min(420px,88vw);
  padding:6px;
  border-radius:17px;
  border-color:rgba(167,139,250,.14);
  background:rgba(12,12,20,.97);
  box-shadow:0 28px 80px rgba(0,0,0,.55);
  backdrop-filter:blur(20px);
}
.suggest a { border-radius:11px; }
.suggest img { border-radius:8px; }

/* ------------------------------------------------------------- Buttons */
.btn,.icon-btn {
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.085);
  background:linear-gradient(180deg,rgba(25,25,39,.96),rgba(15,15,25,.96));
  color:#f6f3ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn {
  min-height:42px;
  padding:9px 16px;
  border-radius:12px;
  font-size:.84rem;
  font-weight:760;
  letter-spacing:-.012em;
}
.btn:hover,.icon-btn:hover { transform:translateY(-1px); color:#fff; border-color:rgba(167,139,250,.24); background:linear-gradient(180deg,#1b1a2a,#12121d); }
.btn--seal {
  border-color:rgba(196,181,253,.16);
  background:
    radial-gradient(90px 50px at 25% 0%,rgba(255,255,255,.28),transparent 65%),
    linear-gradient(135deg,#8b5cf6 0%,#6d28d9 50%,#4c1d95 100%);
  box-shadow:0 12px 30px rgba(91,33,182,.26),inset 0 1px 0 rgba(255,255,255,.22);
}
.btn--seal:hover { background:linear-gradient(135deg,#9d72fb,#7c3aed 52%,#5b21b6); box-shadow:0 16px 38px rgba(91,33,182,.36),inset 0 1px 0 rgba(255,255,255,.24); }
.btn--soft,.btn--glass { background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.085); backdrop-filter:blur(12px); }
.btn--ghost { background:transparent; }
.btn--lux { min-height:46px; padding:11px 19px; border-radius:14px; }
.btn--sm { min-height:38px; padding:7px 12px; border-radius:11px; font-size:.79rem; }
.icon-btn { width:42px; height:42px; border-radius:12px; }
.account-exit { color:#8f899d; }
.btn[aria-pressed="true"] { background:rgba(139,92,246,.17); border-color:rgba(167,139,250,.35); }

/* ---------------------------------------------------------------- Hero */
.hero-wrap { padding: clamp(20px,3vw,34px) 0 0; }
.hero {
  position:relative;
  min-height: 0;
  border:1px solid rgba(255,255,255,.085);
  border-radius: 32px;
  overflow:hidden;
  background:#0a0a11;
  box-shadow:0 38px 100px -48px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.035);
}
.hero__halo { position:absolute; width:620px; height:620px; right:-220px; top:-300px; border-radius:50%; background:rgba(104,63,230,.22); filter:blur(110px); z-index:0; pointer-events:none; }
.hero__slide { min-height: 540px; }
.hero__backdrop { opacity:.44; filter:saturate(.86) contrast(1.08); transform:scale(1.035); }
.hero__slide::after {
  background:
    radial-gradient(680px 460px at 82% 28%,rgba(7,7,12,.03),rgba(7,7,12,.68) 75%),
    linear-gradient(90deg,rgba(7,7,12,.99) 0%,rgba(7,7,12,.93) 34%,rgba(7,7,12,.47) 70%,rgba(7,7,12,.50) 100%),
    linear-gradient(0deg,#08080e 0%,transparent 60%);
}
.hero__slide--nobanner .hero__backdrop { opacity:.54; filter:blur(34px) saturate(1.4); mask-image:none; -webkit-mask-image:none; }
.hero__inner {
  min-height:540px;
  grid-template-columns:minmax(0,1fr) minmax(230px,310px);
  gap:clamp(40px,7vw,92px);
  padding: clamp(46px,6vw,78px) clamp(30px,5vw,70px);
}
.hero__text { max-width:780px; }
.hero__eyebrow { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.hero__pick { padding:7px 11px; border-radius:999px; background:rgba(139,92,246,.11); border:1px solid rgba(167,139,250,.18); color:#cfc5f7; font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; }
.hero__index { color:#6c6777; font-size:.69rem; font-weight:800; letter-spacing:.12em; }
.hero__title { max-width:820px; margin:0 0 16px; font-size:clamp(2.7rem,6vw,5.75rem); line-height:.9; letter-spacing:-.075em; }
.hero__title a { color:#fff; text-shadow:0 18px 50px rgba(0,0,0,.45); }
.hero__meta { margin-bottom:15px; gap:10px; color:#9b96aa; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.hero__dot { width:3px; height:3px; border-radius:50%; background:#655f70; }
.hero__score { color:#c4b5fd; }
.hero__genres { margin-bottom:18px; }
.hero__blurb { max-width:650px; margin-bottom:26px; color:#bbb6c6; font-size:.95rem; line-height:1.75; }
.hero__actions { gap:10px; }
.hero__signal { display:flex; flex-wrap:wrap; gap:18px; margin-top:20px; color:#716c7b; font-size:.75rem; }
.hero__signal b { color:#b4afbf; font-weight:800; }
.hero__cover { align-self:center; position:relative; display:grid; gap:12px; }
.hero__cover::before { content:""; position:absolute; inset:10% -20%; background:radial-gradient(ellipse,rgba(139,92,246,.32),transparent 64%); filter:blur(20px); }
.hero__cover-frame { position:relative; display:block; padding:7px; border:1px solid rgba(255,255,255,.11); border-radius:25px; background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.015)); box-shadow:0 38px 80px -30px rgba(0,0,0,.86); transform:rotate(2deg); transition:.28s ease; }
.hero__cover:hover .hero__cover-frame { transform:rotate(0deg) translateY(-5px); border-color:rgba(167,139,250,.28); }
.hero__cover img { width:100%; border:0; border-radius:19px; aspect-ratio:2/3; object-fit:cover; box-shadow:none; }
.hero__cover-caption { position:relative; color:#827d8f; font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; text-align:center; }
.hero__controls { position:absolute; left:clamp(30px,5vw,70px); bottom:24px; z-index:7; display:flex; align-items:center; gap:9px; }
.hero__arrow { position:static; transform:none; width:35px; height:35px; border-radius:11px; background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.08); }
.hero__arrow:hover { transform:translateY(-1px); background:rgba(139,92,246,.16); border-color:rgba(167,139,250,.22); }
.hero__dots { position:static; transform:none; display:flex; gap:5px; padding:0; background:none; }
.hero__dot-btn { width:24px; height:35px; padding:0; display:grid; place-items:center; }
.hero__dot-btn span { width:16px; height:2px; border-radius:4px; background:#4a4652; transition:.2s ease; }
.hero__dot-btn[aria-selected="true"] span { width:24px; background:linear-gradient(90deg,#8b5cf6,#c4b5fd); box-shadow:0 0 14px rgba(139,92,246,.34); }

/* --------------------------------------------------------------- Home */
.home-stage { padding-top: clamp(34px,5vw,62px); padding-bottom: 20px; }
.home-layout { display:grid; grid-template-columns:minmax(0,1.72fr) minmax(300px,.62fr); gap:clamp(24px,3vw,36px); align-items:start; }
.home-main { min-width:0; }
.section { position:relative; }
.section + .section { margin-top:clamp(44px,6vw,78px); }
.section--surface {
  padding:clamp(20px,2.3vw,30px);
  border:1px solid rgba(255,255,255,.065);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(14,14,23,.94),rgba(9,9,15,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 30px 70px -60px #000;
}
.section__head { margin-bottom:22px; padding:0 0 15px; border-bottom:1px solid rgba(255,255,255,.055); }
.section__head--lux { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.section__head--lux h1,.section__head--lux h2 { margin:0; }
.section__h1 { font-size:clamp(1.55rem,2.5vw,2.3rem); }
.collection-section { margin-top:0; margin-bottom:clamp(50px,6vw,84px); }
.collection-section--new { margin-top:clamp(54px,7vw,96px); }
.grid { grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:clamp(18px,2.3vw,28px); }
.grid--collection { grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); }
.grid--premium { grid-template-columns:repeat(auto-fill,minmax(172px,1fr)); }
.card { min-width:0; }
.card__art {
  border-radius:20px;
  border:1px solid rgba(255,255,255,.07);
  background:#0d0d15;
  box-shadow:0 24px 55px -34px #000;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s ease,box-shadow .28s ease;
}
.card__art img { transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .35s ease; }
.card:hover .card__art { transform:translateY(-6px); border-color:rgba(167,139,250,.24); box-shadow:0 34px 70px -34px rgba(66,36,140,.5); }
.card:hover .card__art img { transform:scale(1.035); filter:saturate(1.04); }
.card__art::after { background:linear-gradient(180deg,transparent 56%,rgba(6,6,10,.54)); opacity:1; }
.card__badge,.card__score { top:10px; border-radius:9px; backdrop-filter:blur(12px); }
.card__badge { left:10px; padding:5px 8px; background:rgba(8,8,13,.74); color:#d3cfdb; border:1px solid rgba(255,255,255,.10); font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.card__badge--seal { background:rgba(109,40,217,.78); color:#fff; }
.card__score { right:10px; background:rgba(8,8,13,.76); color:#d8caff; border:1px solid rgba(255,255,255,.08); }
.card__title { margin:12px 0 4px; font-size:.95rem; line-height:1.28; font-weight:760; letter-spacing:-.025em; }
.card__title a:hover { color:#c8bafd; }
.card__latest,.card__meta { color:#777281; font-size:.72rem; }

/* Latest release markup intentionally stays unchanged. */
.updates { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.update {
  grid-template-columns:92px minmax(0,1fr);
  gap:14px;
  padding:10px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(18,18,28,.88),rgba(11,11,18,.91));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
  transition:.2s ease;
}
.update:hover { transform:translateY(-2px); border-color:rgba(167,139,250,.22); background:linear-gradient(145deg,rgba(24,23,38,.95),rgba(13,13,21,.97)); }
.update__cover img { width:92px; height:138px; border-radius:11px; }
.update__title { margin-top:2px; font-size:.95rem; }
.update__title a:hover { color:#c7b7ff; }
.update__sub { color:#706b79; letter-spacing:.04em; text-transform:uppercase; font-size:.65rem; font-weight:700; }
.update__chapters { gap:5px; }
.chapter-pill { padding:6px 9px; border:1px solid rgba(255,255,255,.045); border-radius:8px; background:rgba(4,4,8,.47); }
.chapter-pill:hover { border-color:rgba(139,92,246,.26); background:rgba(139,92,246,.06); }
.chapter-pill .fresh { color:#b9a5ff; }
.chapter-pill time { color:#625e6d; }

.aside--discover { display:grid; gap:20px; position:sticky; top:96px; }
.panel {
  padding:22px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:22px;
  background:linear-gradient(150deg,rgba(15,15,25,.95),rgba(9,9,15,.97));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 24px 60px -54px #000;
}
.panel__head { padding-bottom:14px; margin-bottom:10px; border-bottom:1px solid rgba(255,255,255,.05); }
.panel__head h2,.panel > h2 { margin:0; font-size:1.12rem; }
.panel__link { display:flex; justify-content:center; padding-top:14px; margin-top:12px; border-top:1px solid rgba(255,255,255,.045); }
.rank { gap:3px; }
.rank__item { grid-template-columns:30px 46px minmax(0,1fr); gap:10px; padding:8px; border-radius:12px; }
.rank__item:hover { background:rgba(139,92,246,.06); }
.rank__n { font-size:.77rem; font-weight:850; color:#5d5968; }
.rank > li:nth-child(-n+3) .rank__n { color:#aa96ef; }
.rank__item img { width:46px; height:67px; border-radius:9px; }
.rank__title { font-size:.82rem; }
.rank__meta { font-size:.67rem; color:#686371; }
.chips--cloud { gap:7px; }
.chip { padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.025); color:#8c8797; font-size:.73rem; font-weight:700; }
.chip:hover,.chip--on { color:#eeeaff; border-color:rgba(167,139,250,.28); background:rgba(139,92,246,.08); }
.chip--sm { padding:5px 9px; font-size:.68rem; }

.prestige-strip {
  margin-top:clamp(54px,7vw,96px);
  display:grid;
  grid-template-columns:minmax(250px,.7fr) minmax(0,1.3fr);
  gap:clamp(28px,5vw,70px);
  align-items:center;
  padding:clamp(28px,4vw,50px);
  border:1px solid rgba(255,255,255,.075);
  border-radius:28px;
  background:
    radial-gradient(440px 260px at 0% 0%,rgba(91,33,182,.20),transparent 72%),
    linear-gradient(135deg,#11101c,#0b0b12 58%,#10101a);
  overflow:hidden;
}
.prestige-strip__copy h2 { margin-bottom:12px; }
.prestige-strip__copy p { max-width:44ch; color:#8e899a; }
.prestige-strip__rank .rank { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.prestige-strip__rank .rank__item { background:rgba(255,255,255,.018); border:1px solid rgba(255,255,255,.035); }

.brand-story {
  margin-top:clamp(54px,7vw,100px);
  display:grid;
  grid-template-columns:minmax(160px,260px) minmax(0,1fr);
  gap:clamp(24px,5vw,70px);
  align-items:center;
  padding:clamp(28px,5vw,62px);
  border-top:1px solid rgba(255,255,255,.055);
  border-bottom:1px solid rgba(255,255,255,.055);
}
.brand-story__mark { position:relative; display:grid; place-items:center; min-height:220px; }
.brand-story__mark::before { content:""; position:absolute; width:210px; height:210px; border-radius:50%; background:rgba(109,40,217,.14); filter:blur(48px); }
.brand-story__mark img { position:relative; width:min(210px,100%); filter:drop-shadow(0 28px 40px rgba(0,0,0,.45)); }
.brand-story__copy { max-width:780px; }
.brand-story__copy h2 { max-width:18ch; font-size:clamp(2rem,4vw,4rem); }
.brand-story__actions { display:flex; gap:9px; flex-wrap:wrap; margin-top:24px; }

/* ------------------------------------------------------------- Listings */
.listing-page { padding-top:clamp(32px,5vw,68px); padding-bottom:50px; }
.listing-hero {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:28px;
  padding:clamp(24px,4vw,42px) clamp(24px,4vw,44px);
  border:1px solid rgba(255,255,255,.065);
  border-radius:26px;
  background:
    radial-gradient(420px 260px at 90% 0%,rgba(109,40,217,.15),transparent 72%),
    linear-gradient(140deg,rgba(17,17,28,.96),rgba(9,9,15,.98));
}
.listing-hero h1 { margin:0; font-size:clamp(2.2rem,5vw,4.8rem); max-width:18ch; }
.listing-hero__intro { margin-top:13px; max-width:70ch; color:#9691a0; }
.listing-hero__intro p:last-child { margin-bottom:0; }
.listing-hero__count { min-width:120px; text-align:right; display:grid; }
.listing-hero__count strong { font-size:2.2rem; line-height:1; letter-spacing:-.06em; color:#fff; }
.listing-hero__count span { color:#8b8596; font-size:.75rem; text-transform:uppercase; letter-spacing:.12em; font-weight:800; }
.listing-hero__count small { margin-top:5px; color:#5f5a67; font-size:.68rem; }
.listing-surface { padding:clamp(18px,3vw,32px); border:1px solid rgba(255,255,255,.06); border-radius:26px; background:rgba(10,10,17,.66); }
.listing-filters { margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.05); }
.listing-filters__label { display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-bottom:13px; }
.listing-filters__label span { color:#d9d5e0; font-size:.83rem; font-weight:800; }
.listing-filters__label small { color:#696472; font-size:.7rem; }
.filters { padding:0; border:0; background:none; box-shadow:none; display:grid; gap:8px; }
.filters__row { min-height:40px; gap:6px; }
.filters__row > b { min-width:62px; color:#676270; font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; }
.filters .chip { padding:6px 10px; }
.empty--surface { border:1px dashed rgba(255,255,255,.08); border-radius:20px; background:rgba(255,255,255,.012); }

/* --------------------------------------------------------------- Series */
.hero-series {
  position:relative;
  margin-top:-78px;
  padding-top:78px;
  min-height:580px;
  border:0;
  background:#08080e;
  overflow:hidden;
}
.hero-series__bg { inset:0; height:100%; opacity:.42; filter:saturate(.78) contrast(1.07); transform:scale(1.03); }
.hero-series::after {
  background:
    radial-gradient(720px 460px at 70% 25%,rgba(69,35,147,.10),transparent 70%),
    linear-gradient(90deg,rgba(7,7,12,.93) 0%,rgba(7,7,12,.72) 46%,rgba(7,7,12,.40) 80%),
    linear-gradient(0deg,#07070c 0%,rgba(7,7,12,.60) 42%,rgba(7,7,12,.18) 100%);
}
.series-head { min-height:500px; grid-template-columns:minmax(210px,260px) minmax(0,1fr); gap:clamp(34px,5vw,68px); align-items:end; padding-top:74px; padding-bottom:54px; }
.series-head__cover { align-self:end; }
.series-head__cover img { width:100%; border-radius:24px; padding:6px; border:1px solid rgba(255,255,255,.13); background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.015)); box-shadow:0 42px 90px -34px rgba(0,0,0,.95),0 0 48px rgba(91,33,182,.10); }
.series-head__content { max-width:900px; padding-bottom:4px; }
.series-breadcrumb { margin-bottom:16px; color:#787282; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.series-breadcrumb a:hover { color:#c6b8f6; }
.series-kicker { display:inline-flex; margin-bottom:12px; padding:6px 10px; border:1px solid rgba(167,139,250,.16); border-radius:999px; background:rgba(139,92,246,.09); color:#b9a9ef; font-size:.66rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.series-head h1 { margin:0 0 12px; max-width:18ch; font-size:clamp(2.6rem,6vw,5.8rem); line-height:.9; letter-spacing:-.07em; text-wrap:balance; }
.series-head__alt { max-width:72ch; margin-bottom:18px; color:#8c8796; }
.facts { gap:8px; margin-bottom:18px; }
.facts li { padding:7px 10px; border:1px solid rgba(255,255,255,.055); border-radius:9px; background:rgba(7,7,12,.38); color:#777281; font-size:.73rem; }
.facts b { margin-left:5px; color:#d9d5e0; }
.stat-row { gap:10px; margin:20px 0 0; }
.stat { min-width:105px; padding:10px 13px; border:1px solid rgba(255,255,255,.06); border-radius:12px; background:rgba(7,7,12,.45); }
.stat b { font-size:1.08rem; color:#f5f2ff; }
.stat span { font-size:.65rem; }
.series-actions { margin-top:20px; gap:9px; }
.series-layout { grid-template-columns:minmax(0,1fr) 330px; gap:32px; padding-top:42px; }
.series-layout .section--surface { padding:26px; }
.series-about .prose { font-size:.95rem; }
.series-chapters { overflow:hidden; }
.chapter-toolbar { gap:8px; }
.chapter-toolbar input,.chapter-toolbar select,.formbox input,.formbox textarea,.formbox select {
  min-height:43px;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:11px;
  background:#0f0f18;
  color:#ece8f6;
}
.chapter-list { gap:6px; max-height:660px; padding-right:5px; }
.chapter-row { min-height:52px; padding:11px 14px; border:1px solid rgba(255,255,255,.055); border-radius:11px; background:rgba(255,255,255,.017); }
.chapter-row:hover { transform:translateX(3px); border-color:rgba(167,139,250,.22); background:rgba(139,92,246,.055); }
.chapter-row__n { font-size:.86rem; }
.chapter-row__t { color:#726d7c; }
.chapter-row time { color:#5f5a66; }
.series-layout .aside { display:grid; gap:18px; align-content:start; position:sticky; top:98px; }

/* ---------------------------------------------------------------- Reader */
.reading { background:#010102; }
.reading .masthead { display:none; }
.reading #main { padding-top:0; }
.reader-bar {
  top:12px;
  width:min(1180px,calc(100% - 24px));
  margin:12px auto 18px;
  min-height:58px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  background:rgba(9,9,14,.88);
  box-shadow:0 18px 50px rgba(0,0,0,.35);
  backdrop-filter:blur(22px);
}
.reader-bar__title { color:#d5d1db; }
.reader-bar__title > a { font-weight:800; }
.reader-bar select { height:40px; border-radius:10px; background:#101018; }
.pages { border-radius:16px; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.035); }
.pages img { background:#000; }
.reader-nav { max-width:900px; margin:26px auto 0; padding:0 16px; }
.reader-end { margin-top:24px; padding:20px 0; border-top:1px solid rgba(255,255,255,.055); }
.progress-bar { height:3px; background:linear-gradient(90deg,#5b21b6,#8b5cf6,#c4b5fd); }

/* --------------------------------------------------------------- Footer */
.footer { position:relative; margin-top:90px; border-top:1px solid rgba(255,255,255,.055); background:#07070c; overflow:hidden; }
.footer__glow { position:absolute; width:800px; height:400px; left:50%; top:-330px; transform:translateX(-50%); border-radius:50%; background:rgba(91,33,182,.17); filter:blur(100px); }
.footer__lead { position:relative; display:flex; align-items:end; justify-content:space-between; gap:30px; padding:clamp(42px,6vw,76px) 0 34px; border-bottom:1px solid rgba(255,255,255,.055); }
.footer__lead h2 { max-width:18ch; margin:0 0 10px; font-size:clamp(2rem,4vw,4rem); }
.footer__lead p { max-width:60ch; margin:0; color:#8c8796; }
.footer__grid { position:relative; grid-template-columns:minmax(240px,1.6fr) repeat(3,minmax(130px,.65fr)); gap:clamp(30px,5vw,70px); padding:44px 0; }
.footer__brand { max-width:420px; }
.footer .brand__logo { width:190px; height:60px; margin-bottom:15px; }
.footer h3 { margin-bottom:14px; color:#ded9e7; font-size:.78rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.footer a,.footer p { color:#777281; font-size:.82rem; }
.footer a:hover { color:#c7b7ff; }
.footer__bottom { padding:20px 0 28px; border-top:1px solid rgba(255,255,255,.045); color:#5f5b66; font-size:.72rem; }

/* ----------------------------------------------------------- Misc luxe */
.prose { color:#aaa5b2; line-height:1.8; }
.prose h2,.prose h3 { color:#f2eff8; }
.prose a { color:#b7a5f5; text-decoration-color:rgba(183,165,245,.28); }
.pager { gap:7px; }
.pager a,.pager span { min-width:40px; min-height:40px; display:grid; place-items:center; border-radius:11px; border-color:rgba(255,255,255,.065); background:#0e0e17; }
.pager a:hover { border-color:rgba(167,139,250,.25); background:rgba(139,92,246,.07); }
.pager [aria-current="page"] { background:linear-gradient(135deg,#7c3aed,#5b21b6); border-color:rgba(196,181,253,.18); }
.formbox { padding:18px; border:1px solid rgba(255,255,255,.055); border-radius:16px; background:rgba(255,255,255,.014); }
.comment { border-top-color:rgba(255,255,255,.05); }
.comment__avatar { border-radius:11px; }
.comment__body { color:#aaa5b1; }
.empty { padding:70px 24px; }
.divider { background:rgba(255,255,255,.05); }

/* ----------------------------------------------------------- Responsive */
@media (max-width: 1120px) {
  .mainnav a { padding-inline:9px; }
  .searchbox input { width:190px; }
  .home-layout { grid-template-columns:minmax(0,1fr) 290px; }
  .series-layout { grid-template-columns:minmax(0,1fr) 290px; }
}

@media (max-width: 960px) {
  :root { --header-h:72px; }
  .masthead { padding-top:7px; }
  .masthead__bar { height:58px; border-radius:17px; }
  .brand { min-width:0; }
  .brand__logo { width:154px; height:46px; }
  .nav-toggle { display:grid; order:-1; }
  .mainnav {
    position:fixed;
    top:76px;
    left:12px;
    right:12px;
    inset-inline:12px;
    flex-direction:column;
    align-items:stretch;
    gap:3px;
    padding:9px;
    border:1px solid rgba(167,139,250,.12);
    border-radius:18px;
    background:rgba(9,9,15,.98);
    box-shadow:0 28px 70px rgba(0,0,0,.55);
    transform:translateY(-140%);
    max-height:calc(100dvh - 90px);
    overflow:auto;
  }
  .mainnav[data-open="true"] { transform:translateY(0); }
  .mainnav a { padding:11px 12px; border:0; }
  .home-layout,.series-layout { grid-template-columns:1fr; }
  .aside--discover,.series-layout .aside { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero__inner { min-height:490px; grid-template-columns:minmax(0,1fr) 220px; gap:35px; }
  .hero__title { font-size:clamp(2.5rem,7vw,4.5rem); }
  .series-head { grid-template-columns:180px minmax(0,1fr); }
  .series-head h1 { font-size:clamp(2.5rem,7vw,4.7rem); }
  .prestige-strip { grid-template-columns:1fr; }
  .prestige-strip__rank .rank { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 680px) {
  :root { --header-h:68px; }
  .masthead__frame { padding-inline:7px; }
  .masthead__bar { padding:7px; gap:6px; }
  .brand__logo { width:128px; height:42px; }
  .account-exit,.masthead__tools > .btn--soft { display:none; }
  .searchbox input { width:42px; max-width:none; padding-left:34px; padding-right:6px; color:transparent; }
  .searchbox input::placeholder { color:transparent; }
  .searchbox:focus-within { position:absolute; inset-inline:54px 8px; z-index:10; }
  .searchbox:focus-within input { width:100%; color:#fff; background:#11111b; }
  .searchbox:focus-within input::placeholder { color:#777281; }
  .searchbox:focus-within + .btn { display:none; }
  .hero-wrap { padding-top:14px; }
  .hero { border-radius:22px; }
  .hero__slide { min-height:0; }
  .hero__inner { min-height:0; grid-template-columns:94px minmax(0,1fr); gap:15px; padding:26px 18px 64px; align-items:start; }
  .hero__cover { grid-column:1; grid-row:1; margin-top:38px; }
  .hero__cover-frame { padding:4px; border-radius:16px; transform:none; }
  .hero__cover img { border-radius:12px; }
  .hero__cover-caption { display:none; }
  .hero__text { grid-column:2; grid-row:1; }
  .hero__eyebrow { margin-bottom:10px; gap:7px; }
  .hero__pick { padding:5px 7px; font-size:.55rem; }
  .hero__index { display:none; }
  .hero__title { margin-bottom:9px; font-size:clamp(1.55rem,7.2vw,2.35rem); line-height:.95; letter-spacing:-.055em; }
  .hero__meta { gap:6px; margin-bottom:9px; font-size:.59rem; letter-spacing:.05em; }
  .hero__genres { gap:4px; margin-bottom:10px; }
  .hero__genres .chip:nth-child(n+3) { display:none; }
  .hero__blurb,.hero__signal { display:none; }
  .hero__actions { display:grid; grid-template-columns:1fr; gap:6px; }
  .hero__actions .btn { min-height:36px; padding:6px 9px; font-size:.7rem; border-radius:9px; }
  .hero__actions .btn--glass { display:none; }
  .hero__controls { left:18px; bottom:16px; }
  .home-stage { padding-top:34px; }
  .section--surface { padding:16px; border-radius:19px; }
  .section__head--lux { align-items:center; }
  .section__head--lux .text-link { font-size:.72rem; }
  .updates { grid-template-columns:1fr; }
  .update { grid-template-columns:78px minmax(0,1fr); }
  .update__cover img { width:78px; height:117px; }
  .grid,.grid--premium,.grid--collection { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; }
  .card__art { border-radius:16px; }
  .card__title { font-size:.84rem; }
  .aside--discover,.series-layout .aside { grid-template-columns:1fr; }
  .prestige-strip { padding:24px 18px; border-radius:22px; }
  .prestige-strip__rank .rank { grid-template-columns:1fr; }
  .brand-story { grid-template-columns:1fr; padding-inline:8px; }
  .brand-story__mark { min-height:130px; }
  .brand-story__mark img { width:140px; }
  .listing-page { padding-top:30px; }
  .listing-hero { align-items:flex-start; padding:24px 20px; border-radius:21px; }
  .listing-hero h1 { font-size:clamp(2rem,10vw,3.3rem); }
  .listing-hero__count { min-width:80px; }
  .listing-hero__count strong { font-size:1.6rem; }
  .listing-surface { padding:16px; border-radius:20px; }
  .listing-filters__label small { display:none; }
  .filters__row { align-items:flex-start; }
  .filters__row > b { width:100%; min-width:100%; margin-bottom:2px; }
  .hero-series { margin-top:-68px; padding-top:68px; min-height:0; }
  .series-head { min-height:0; grid-template-columns:112px minmax(0,1fr); gap:16px; align-items:start; padding-top:74px; padding-bottom:32px; }
  .series-head__cover { align-self:start; margin-top:6px; }
  .series-head__cover img { border-radius:17px; padding:4px; }
  .series-breadcrumb { display:none; }
  .series-kicker { margin-bottom:8px; padding:4px 7px; font-size:.53rem; }
  .series-head h1 { margin-bottom:8px; font-size:clamp(1.7rem,8.5vw,2.8rem); line-height:.94; }
  .series-head__alt { font-size:.75rem; margin-bottom:10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .facts { gap:4px; margin-bottom:10px; }
  .facts li { padding:4px 6px; font-size:.61rem; }
  .hero-series .chips { display:none; }
  .stat-row { gap:5px; margin-top:10px; }
  .stat { min-width:0; padding:7px 8px; }
  .stat b { font-size:.83rem; }
  .stat span { font-size:.53rem; }
  .series-actions { margin-top:12px; gap:6px; }
  .series-actions .btn { min-height:34px; padding:6px 8px; font-size:.67rem; }
  .series-layout { padding-top:24px; }
  .series-layout .section--surface { padding:18px; }
  .reader-bar { top:6px; width:calc(100% - 12px); margin:6px auto 12px; border-radius:14px; }
  .reader-bar__title { display:none; }
  .reader-bar select { min-width:0; flex:1; }
  .reader-bar .btn { padding-inline:9px; }
  .footer__lead { align-items:flex-start; flex-direction:column; }
  .footer__grid { grid-template-columns:1fr 1fr; gap:30px 20px; }
  .footer__brand { grid-column:1/-1; }
  .footer__bottom { flex-direction:column; gap:7px; }
}

@media (max-width: 390px) {
  .brand__logo { width:112px; }
  .hero__inner { grid-template-columns:86px minmax(0,1fr); padding-inline:14px; }
  .hero__actions .btn { font-size:.64rem; }
  .grid,.grid--premium,.grid--collection { gap:16px 10px; }
  .footer__grid { grid-template-columns:1fr; }
  .footer__brand { grid-column:auto; }
}

/* Standalone public pages */
.simple-page { padding-top:clamp(40px,6vw,78px); padding-bottom:55px; }
.simple-page__hero { margin-bottom:28px; padding:clamp(24px,4vw,42px); border:1px solid rgba(255,255,255,.06); border-radius:24px; background:radial-gradient(400px 220px at 95% 0%,rgba(109,40,217,.14),transparent 70%),linear-gradient(145deg,#10101a,#0a0a11); }
.simple-page__hero h1 { margin-bottom:10px; max-width:18ch; }
.simple-page--prose { max-width:900px; }
.simple-page--prose > h1 { margin-bottom:28px; }
.auth-page { max-width:520px; padding-top:clamp(60px,10vw,120px); padding-bottom:80px; }
.auth-page > h1 { margin-bottom:10px; }
.auth-page > .muted { margin-bottom:24px; }
.auth-page .formbox { margin-top:24px; padding:24px; border-radius:20px; background:linear-gradient(145deg,rgba(17,17,28,.96),rgba(10,10,16,.98)); box-shadow:0 30px 70px -54px #000; }
.genre-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.genre-grid .panel { min-height:110px; display:flex!important; flex-direction:column; justify-content:flex-end; padding:20px; transition:.22s ease; }
.genre-grid .panel:hover { transform:translateY(-4px); border-color:rgba(167,139,250,.24); background:radial-gradient(180px 120px at 100% 0%,rgba(109,40,217,.12),transparent 75%),linear-gradient(145deg,#151421,#0b0b12); }
.genre-grid .panel h2 { margin:0; font-size:1rem; }
@media (max-width:680px){ .simple-page { padding-top:30px; } .simple-page__hero { padding:22px 18px; border-radius:20px; } .auth-page { padding-top:55px; } .genre-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } }