:root{--bg-body:#020617;--bg-elevated:#020617;--bg-card:#020617;--bg-panel:#020617;--bg-panel-alt:#020617;--border-subtle:rgba(148,163,184,.25);--border-strong:rgba(148,163,184,.45);--accent:#6366f1;--accent-soft:rgba(99,102,241,.15);--accent-strong:#818cf8;--text-main:#e5e7eb;--text-muted:#9ca3af;--text-soft:#6b7280;--text-strong:#f9fafb;--danger:#f97373;--radius-lg:18px;--radius-md:12px;--radius-pill:999px;--shadow-soft:0 24px 60px rgba(15,23,42,.75);--blur-card:18px;--transition-fast:150ms ease-out;--transition-med:200ms ease-out;--safari-top:2px}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background-color:#020617}
body{min-height:auto;padding-top:var(--safari-top);background-color:#020617;font-family:system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",sans-serif;background:#020617;color:var(--text-main);-webkit-font-smoothing:antialiased}
body::before{content:"";position:absolute;top:0;left:0;right:0;height:360px;background:radial-gradient(circle at top,#1f2937 0,#020617 65%,#020617 100%);z-index:0}
.shell{width:100%;max-width:1300px;margin:0 auto;padding-inline:1.5rem}
main{padding-block:1.5rem 3.5rem}
.site-header{position:static;backdrop-filter:blur(22px);background:linear-gradient(to bottom,rgba(2,6,23,.95),rgba(2,6,23,.7),transparent);border-bottom:1px solid rgba(51,65,85,.7);min-height:1px;z-index:1000}
.header-inner{display:flex;align-items:center;justify-content:center;padding-block:.9rem;gap:1rem;min-height:74px}
.nav-desktop{display:flex;align-items:center;gap:1rem}
.nav-link{font-size:.85rem;color:var(--text-muted);text-decoration:none;padding:.4rem .9rem;border-radius:999px;border:1px solid transparent;transition:background-color 150ms ease-out,color 150ms ease-out,border-color 150ms ease-out,transform 120ms ease-out}
.nav-link:hover{color:var(--text-main);background:rgba(15,23,42,.85);border-color:rgba(148,163,184,.35);transform:translateY(-1px)}
.nav-toggle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38px;height:34px;border-radius:999px;border:1px solid rgba(55,65,81,.75);background:rgba(15,23,42,.8);display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;padding:0;z-index:50}
.nav-toggle-line{width:18px;height:2px;border-radius:999px;background:#e5e7eb;transition:transform .25s ease,opacity .25s ease}
.nav-mobile{display:none;flex-direction:column;gap:.5rem;padding:1rem 1.5rem;border-bottom:1px solid rgba(55,65,81,.8);background:var(--bg-body);position:absolute;top:100%;left:0;width:100%;z-index:999}
.nav-mobile.nav-open{display:flex}
.nav-toggle.open .nav-toggle-line:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
.nav-toggle.open .nav-toggle-line:nth-child(2){transform:rotate(-45deg) translate(3px,-3px)}
.nav-toggle.open{opacity:1;pointer-events:auto}
.hero{padding-block:1.6rem 1.2rem}
.hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:2.4rem;align-items:stretch}
.hero-cover{display:flex;justify-content:center}
.cover-frame{width:min(100%,320px);padding:6px;border-radius:24px;background:radial-gradient(circle at top,#4f46e5,transparent 55%);box-shadow:0 24px 60px rgba(15,23,42,.9)}
.hero-content{align-self:center}
.series-label{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-strong);margin-bottom:.5rem}
.series-title{font-size:clamp(2rem,3.1vw,2.6rem);margin:0 0 .4rem;letter-spacing:.03em}
.series-alt{font-size:.9rem;color:var(--text-soft);margin-bottom:.9rem}
.series-alt span{color:var(--text-muted)}
.series-meta{margin:0 0 1.3rem}
.series-meta dt{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-soft)}
.series-meta dd{margin:.22rem 0 .7rem;font-size:.92rem}
.meta-row{display:grid;grid-template-columns:minmax(0,110px) minmax(0,1fr);gap:.75rem}
.status-pill{display:inline-flex;align-items:center;gap:.3rem;padding:.22rem .7rem;border-radius:var(--radius-pill);border:1px solid rgba(34,197,94,.4);background:rgba(22,163,74,.12);font-size:.75rem;color:#bbf7d0}
.rating-stars{font-size:.9rem;letter-spacing:.16em;color:#fbbf24}
.rating-score{margin-left:.45rem;font-size:.86rem;color:var(--text-soft)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:.85rem}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.1rem;border-radius:var(--radius-pill);font-size:.85rem;font-weight:500;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background-color var(--transition-med),color var(--transition-med),border-color var(--transition-med),transform 120ms ease-out,box-shadow 160ms ease-out}
.btn-primary{background:radial-gradient(circle at top left,#818cf8,#4f46e5);border-color:rgba(191,219,254,.4);color:var(--text-strong);box-shadow:0 18px 40px rgba(79,70,229,.58),0 0 0 1px rgba(129,140,248,.3)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 24px 60px rgba(79,70,229,.8),0 0 0 1px rgba(191,219,254,.5)}
.btn-ghost{border-color:rgba(148,163,184,.45);background:rgba(15,23,42,.85);color:var(--text-main)}
.btn-ghost:hover{background:rgba(15,23,42,1);border-color:rgba(148,163,184,.8)}
.btn-outline{border-color:rgba(148,163,184,.45);background:rgba(15,23,42,.7);color:var(--text-main);height:38px}
.hero-note{font-size:.8rem;color:var(--text-soft)}
.panel{margin-top:1.6rem}
.panel-inner {
    z-index:2;
    border-radius:var(--radius-lg);
    border:1px solid var(--border-subtle);
    background:
        radial-gradient(circle at top left,rgba(129,140,248,.12),transparent 55%) border-box,
        linear-gradient(135deg,rgba(15,23,42,.96),rgba(15,23,42,.98)) border-box;
    box-shadow:var(--shadow-soft);
    padding:1.4rem 1.3rem 1.2rem;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background-color: rgba(15,23,42,0.97); /* transparent layer preserved */
}
.panel-inner, .panel { overflow: visible !important; }
.panel-title{margin:0 0 .2rem;font-size:1.1rem}
.panel-subtitle{margin:0;font-size:.86rem;color:var(--text-soft)}
.panel-body{margin:.35rem 0;font-size:.92rem;color:var(--text-muted);line-height:1.6}
#story .panel-inner{padding-bottom:1.45rem;max-width:980px;margin:0 auto;width:100%;padding-inline:1.3rem}
.layout-grid{display:block;width:100%;margin-top:1.6rem}
#chapters{width:100%}
#chapters .panel-inner{max-width:980px;margin:0 auto}
.info-list{list-style:none;padding:0;margin:.3rem 0 0;display:grid;gap:.55rem}
.info-list li{display:flex;justify-content:space-between;font-size:.87rem;color:var(--text-muted)}
.info-list strong{color:var(--text-main)}
.panel-header{display:flex;justify-content:space-between;gap:.8rem;align-items:flex-start;margin-bottom:1rem}
.chapters-controls{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.input{background:rgba(15,23,42,.92);border-radius:var(--radius-pill);border:1px solid rgba(148,163,184,.6);padding:.45rem .9rem;font-size:.85rem;color:var(--text-main);min-width:0;width:180px;outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background-color var(--transition-fast)}
.input::placeholder{color:var(--text-soft)}
.input:focus{border-color:var(--accent-strong);box-shadow:0 0 0 1px rgba(129,140,248,.6)}
.chapter-item{z-index:3;border-radius:999px;border:1px solid rgba(51,65,85,.85);background:rgba(15,23,42,.92);padding:.55rem .9rem;margin-bottom:.55rem;display:flex;justify-content:space-between;align-items:center;gap:.7rem;font-size:.86rem;cursor:pointer;text-decoration:none;color:var(--text-main);transition:background-color var(--transition-med),border-color var(--transition-med),transform 120ms ease-out,box-shadow 160ms ease-out}
.chapter-main{display:flex;flex-direction:column;gap:.1rem}
.chapter-list { max-height: none;overflow: visible; }
.chapter-title{font-weight:500}
.chapter-meta{font-size:.78rem;color:var(--text-soft)}
.chapter-badge{font-size:.75rem;padding:.2rem .6rem;border-radius:var(--radius-pill);background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.5);color:#bbf7d0}
.chapter-item:hover{background:radial-gradient(circle at top left,rgba(129,140,248,.22),rgba(15,23,42,.98));border-color:rgba(129,140,248,.7);transform:translateY(-1px);box-shadow:0 18px 45px rgba(15,23,42,.9)}
.scroll-top-btn{position:absolute;right:1.4rem;bottom:1.3rem;width:30px;height:30px;border-radius:999px;border:1px solid rgba(148,163,184,.6);background:rgba(15,23,42,.95);color:var(--text-main);font-size:.9rem;cursor:pointer;display:none;align-items:center;justify-content:center;transition:background-color var(--transition-fast),border-color var(--transition-fast),transform 120ms ease-out}
.scroll-top-btn:hover{background:rgba(15,23,42,1);border-color:var(--accent);transform:translateY(-1px)}
#chapters .panel-inner{position:relative}
.cover-img{width:100%;height:auto;display:block;border-radius:20px;object-fit:cover}
.series-logo-wrapper{width:100%;text-align:center;margin-top:1rem;margin-bottom:.3rem}
.series-logo-img{height:260px;width:auto;object-fit:contain;opacity:.95;filter:drop-shadow(0 0 14px rgba(129,140,248,.45));transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .25s ease-out,filter .25s ease-out}
.series-logo-img:hover{transform:scale(1.06);opacity:1;filter:drop-shadow(0 0 14px rgba(129,140,248,.6))}
.ad-wrap { margin:0 auto;padding:0;line-height:0;overflow:hidden;text-align:center;}
.ad-wrap iframe, .ad-wrap img { display:inline-block; margin:0 auto; padding:0; }

@media(max-width:900px){
.hero-grid{grid-template-columns:minmax(0,1fr);gap:1.5rem}
.hero-content{order:-1}
.layout-grid{grid-template-columns:minmax(0,1fr)}
}

@media(max-width:720px){
.nav-desktop{display:none}
.nav-toggle{display:flex;right:1.2rem}
.header-inner{justify-content:space-between;padding-right:3.5rem}
.nav-mobile{display:none}
.nav-mobile.nav-open{display:flex}
.series-logo-img{height:300px}
.site-header{background:#020617!important}
.hero-actions{justify-content:center}
.chapters-controls{justify-content:flex-start}
.hero{padding-top:1rem}
.panel-inner{padding-inline:1rem}
}

@media(max-width:480px){
.hero-grid{gap:1.1rem}
.series-title{font-size:1.7rem}
.meta-row{grid-template-columns:minmax(0,95px) minmax(0,1fr)}
.input{width:100%}
}

.hero>.shell,.hero-inner{max-width:980px;width:100%;margin:0 auto;padding-inline:1.5rem}