/* ===================================================================
   Supernova Theme — Light UI, blue accent, Open Sans + Source Sans 3
   Prefix: sn-
   =================================================================== */

/* -- 00. Tokens -- */
:root {
    --sn-blue: #3b6dad;
    --sn-blue-dark: #2c5a96;
    --sn-blue-light: #e8f0fa;
    --sn-accent: #f5a623;
    --sn-bg: #f5f6f8;
    --sn-surface: #ffffff;
    --sn-text: #222222;
    --sn-text-dim: #5a6370;
    --sn-border: #dfe3e8;
    --sn-radius: 6px;
    --sn-radius-lg: 10px;
    --sn-shadow: 0 2px 8px rgba(0,0,0,.06);
    --sn-font: 'Open Sans', 'Source Sans 3', system-ui, sans-serif;
    --sn-font-display: 'Source Sans 3', 'Open Sans', system-ui, sans-serif;
    --sn-shell-max: 1260px;
    --sn-gap: 16px;
}

/* -- 01. Reset & base -- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--sn-font); font-size: 15px; line-height: 1.55; color: var(--sn-text); background: var(--sn-bg); }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--sn-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

/* -- 02. Utilities -- */
.sn-shell { max-width: var(--sn-shell-max); margin-inline: auto; padding-inline: var(--sn-gap); }
.sn-shell--narrow { max-width: 820px; }
.sn-skiplink { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 9999; }
.sn-skiplink:focus { position: fixed; top: 8px; left: 8px; width: auto; height: auto; padding: 8px 14px; background: var(--sn-blue); color: #fff; border-radius: var(--sn-radius); font-weight: 600; }

/* -- 03. Header bar -- */
.sn-bar { background: var(--sn-blue); color: #fff; position: sticky; top: 0; z-index: 900; }
.sn-bar-row { display: flex; align-items: center; gap: 12px; height: 54px; }
.sn-brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; color: #fff; font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.sn-brand-mark { width: 32px; height: 32px; border-radius: 4px; }
.sn-quicksearch { display: flex; flex: 1; max-width: 420px; margin-left: auto; background: rgba(255,255,255,.15); border-radius: 20px; overflow: hidden; align-items: center; padding-left: 12px; }
.sn-quicksearch-glass { width: 16px; height: 16px; flex-shrink: 0; stroke: rgba(255,255,255,.7); }
.sn-quicksearch-input { flex: 1; border: none; background: transparent; color: #fff; padding: 7px 8px; font-size: .88rem; outline: none; }
.sn-quicksearch-input::placeholder { color: rgba(255,255,255,.55); }
.sn-quicksearch-go { background: rgba(255,255,255,.2); color: #fff; padding: 7px 14px; font-size: .82rem; font-weight: 600; border-radius: 0 20px 20px 0; }
.sn-quicksearch-go:hover { background: rgba(255,255,255,.3); }
.sn-burger { display: none; width: 28px; height: 28px; flex-direction: column; justify-content: center; gap: 5px; margin-left: 10px; }
.sn-burger span { display: block; height: 2px; background: #fff; border-radius: 2px; }

/* Nav strip */
.sn-strip { display: flex; align-items: center; gap: 0; background: var(--sn-blue-dark); height: 36px; font-size: .82rem; font-weight: 600; }
.sn-strip-link { color: rgba(255,255,255,.85); padding: 0 14px; height: 100%; display: inline-flex; align-items: center; transition: background .15s; }
.sn-strip-link:hover { background: rgba(255,255,255,.08); text-decoration: none; color: #fff; }
.sn-strip-link--side { margin-left: auto; }
.sn-strip-link--side ~ .sn-strip-link--side { margin-left: 0; }

/* -- 04. Drawer (mobile menu) -- */
.sn-drawer { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .2s; }
.sn-drawer[aria-hidden="false"] { opacity: 1; pointer-events: auto; }
.sn-drawer-pane { position: absolute; top: 0; right: 0; width: 280px; height: 100%; background: var(--sn-surface); padding: 20px; display: flex; flex-direction: column; gap: 16px; transform: translateX(100%); transition: transform .25s ease; }
.sn-drawer[aria-hidden="false"] .sn-drawer-pane { transform: translateX(0); }
.sn-drawer-close { align-self: flex-end; color: var(--sn-text-dim); }
.sn-drawer-search { display: flex; border: 1px solid var(--sn-border); border-radius: var(--sn-radius); overflow: hidden; }
.sn-drawer-search input { flex: 1; border: none; padding: 8px 10px; font-size: .9rem; outline: none; }
.sn-drawer-search button { padding: 8px 10px; background: var(--sn-blue-light); }
.sn-drawer-nav { display: flex; flex-direction: column; gap: 4px; }
.sn-drawer-link { padding: 10px 8px; border-radius: var(--sn-radius); color: var(--sn-text); font-weight: 600; }
.sn-drawer-link:hover { background: var(--sn-blue-light); text-decoration: none; }

/* -- 05. Breadcrumbs -- */
.sn-trail { background: var(--sn-surface); border-bottom: 1px solid var(--sn-border); padding: 8px 0; font-size: .78rem; }
.sn-trail-row { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; overflow: hidden; }
.sn-trail-step { white-space: nowrap; color: var(--sn-text-dim); }
.sn-trail-step--current { overflow: hidden; text-overflow: ellipsis; color: var(--sn-text); font-weight: 600; }
.sn-trail-link { color: var(--sn-blue); }
.sn-trail-tick { display: flex; color: var(--sn-text-dim); }

/* -- 06. Cards -- */
.sn-card { flex: 0 0 auto; width: 160px; }
.sn-card-tile { display: block; text-decoration: none; color: var(--sn-text); }
.sn-card-art { position: relative; border-radius: var(--sn-radius); overflow: hidden; aspect-ratio: 2/3; background: var(--sn-border); }
.sn-card-img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.sn-card-tile:hover .sn-card-img { opacity: .85; }
.sn-card-pill { position: absolute; font-size: .65rem; font-weight: 700; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: .3px; }
.sn-card-pill--quality { bottom: 8px; left: 6px; background: var(--sn-blue); color: #fff; }
.sn-card-pill--year { bottom: 8px; right: 6px; background: rgba(0,0,0,.65); color: #fff; }
.sn-card-pill--type { top: 6px; left: 6px; background: var(--sn-accent); color: #222; }
.sn-card-pill--ep { bottom: 8px; right: 6px; background: rgba(0,0,0,.65); color: #fff; }
.sn-card-veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .2s; color: #fff; }
.sn-card-tile:hover .sn-card-veil { opacity: 1; }
.sn-card-foot { padding: 6px 2px 0; }
.sn-card-name { font-size: .8rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sn-card-meta { display: flex; align-items: center; gap: 8px; font-size: .72rem; color: var(--sn-text-dim); margin-top: 2px; }
.sn-card-rate { display: inline-flex; align-items: center; gap: 2px; color: var(--sn-accent); }

/* -- 07. Grid -- */
.sn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: var(--sn-gap); }
.sn-grid .sn-card { width: auto; }

/* -- 08. Slider / Rail -- */
.sn-rail { position: relative; }
.sn-rail-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.sn-rail-track::-webkit-scrollbar { display: none; }
.sn-rail-track .sn-card { scroll-snap-align: start; }
.sn-rail-arrow { position: absolute; top: 50%; transform: translateY(-70%); z-index: 5; width: 34px; height: 34px; border-radius: 50%; background: var(--sn-surface); box-shadow: var(--sn-shadow); display: flex; align-items: center; justify-content: center; color: var(--sn-text); border: 1px solid var(--sn-border); }
.sn-rail-arrow--back { left: -12px; }
.sn-rail-arrow--fwd { right: -12px; }
.sn-rail-arrow:hover { background: var(--sn-blue-light); }

/* -- 09. Filter tabs -- */
.sn-filterset { margin-bottom: 20px; }
.sn-filterset-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; align-items: center; }
.sn-pill { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 16px; font-size: .78rem; font-weight: 600; color: var(--sn-text-dim); background: var(--sn-surface); border: 1px solid var(--sn-border); transition: background .15s, color .15s; text-decoration: none; }
.sn-pill:hover { background: var(--sn-blue-light); color: var(--sn-blue); text-decoration: none; }
.sn-pill--lit { background: var(--sn-blue); color: #fff; border-color: var(--sn-blue); }
.sn-pill--lit:hover { background: var(--sn-blue-dark); color: #fff; }
.sn-pill--toggle { cursor: pointer; }
.sn-flyout { position: relative; display: inline-flex; }
.sn-flyout-pane { position: absolute; top: 100%; left: 0; z-index: 50; background: var(--sn-surface); border: 1px solid var(--sn-border); border-radius: var(--sn-radius); box-shadow: var(--sn-shadow); padding: 8px; display: flex; flex-wrap: wrap; gap: 4px; min-width: 200px; max-height: 260px; overflow-y: auto; }
.sn-flyout-link { padding: 4px 10px; border-radius: 12px; font-size: .76rem; color: var(--sn-text-dim); white-space: nowrap; }
.sn-flyout-link:hover { background: var(--sn-blue-light); color: var(--sn-blue); text-decoration: none; }
.sn-flyout-link--lit { background: var(--sn-blue); color: #fff; }

/* -- 10. Section heads -- */
.sn-section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.sn-section-title { font-family: var(--sn-font-display); font-size: 1.15rem; font-weight: 700; color: var(--sn-text); }
.sn-section-tag { font-size: .72rem; font-weight: 600; color: var(--sn-accent); text-transform: uppercase; letter-spacing: .5px; }
.sn-section-more { margin-left: auto; font-size: .78rem; font-weight: 600; color: var(--sn-blue); }
.sn-home-section { padding: 28px 0; }

/* -- 11. Pagination -- */
.pagination { display: flex; justify-content: center; padding: 28px 0; }
.pagination__list { display: flex; gap: 4px; }
.pagination__item { display: flex; }
.pagination__link { display: flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: var(--sn-radius); font-size: .82rem; font-weight: 600; color: var(--sn-text-dim); background: var(--sn-surface); border: 1px solid var(--sn-border); text-decoration: none; }
.pagination__link:hover { background: var(--sn-blue-light); color: var(--sn-blue); }
.pagination__link--active { background: var(--sn-blue); color: #fff; border-color: var(--sn-blue); }
.pagination__ellipsis { display: flex; align-items: center; padding: 0 4px; color: var(--sn-text-dim); font-size: .82rem; }

/* -- 12. Footer -- */
.sn-foot { background: #1a2a3e; color: rgba(255,255,255,.75); padding: 32px 0 20px; margin-top: 40px; font-size: .82rem; }
.sn-foot-disclaimer { max-width: 700px; line-height: 1.6; margin-bottom: 16px; color: rgba(255,255,255,.55); }
.sn-foot-links { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.sn-foot-links a { color: rgba(255,255,255,.7); font-weight: 600; }
.sn-foot-links a:hover { color: #fff; text-decoration: none; }
.sn-foot-bar { display: flex; align-items: center; gap: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); font-size: .75rem; }
.sn-foot-mark { font-weight: 700; color: #fff; }
.sn-foot-copy { color: rgba(255,255,255,.45); }
.sn-foot-status { margin-left: auto; display: flex; align-items: center; gap: 5px; color: #6fcf97; font-weight: 600; }
.sn-foot-dot { width: 7px; height: 7px; border-radius: 50%; background: #6fcf97; }

/* -- 13. Notification bar -- */
.sn-notice { background: var(--sn-blue-light); border-bottom: 1px solid var(--sn-border); padding: 8px 0; font-size: .8rem; }
.sn-notice-row { display: flex; align-items: center; gap: 8px; }
.sn-notice-glyph { flex-shrink: 0; color: var(--sn-blue); }
.sn-notice-msg { flex: 1; color: var(--sn-text); }
.sn-notice-cta { font-weight: 600; color: var(--sn-blue); background: none; border: none; cursor: pointer; }
.sn-notice-dismiss { flex-shrink: 0; color: var(--sn-text-dim); }

/* Modal */
.sn-modal { border: none; border-radius: var(--sn-radius-lg); padding: 0; max-width: 480px; width: 90%; box-shadow: 0 12px 40px rgba(0,0,0,.15); }
.sn-modal::backdrop { background: rgba(0,0,0,.4); }
.sn-modal-pane { padding: 24px; }
.sn-modal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sn-modal-head h3 { flex: 1; font-size: 1.05rem; }
.sn-modal-x { color: var(--sn-text-dim); }
.sn-modal-body { color: var(--sn-text-dim); line-height: 1.6; }
.sn-modal-foot { margin-top: 16px; }
.sn-modal-cta { font-weight: 600; color: var(--sn-blue); }

/* -- 14. Ad banner -- */
.sn-adslot { text-align: center; margin: 16px auto; padding: 0 var(--sn-gap); }

/* -- 15. Landing page -- */
.sn-page-landing { background: var(--sn-bg); }
.sn-land-hero { background: linear-gradient(135deg, var(--sn-blue) 0%, #2c5a96 100%); color: #fff; padding: 48px 0 40px; }
.sn-land-hero-grid { display: grid; grid-template-columns: 1fr 280px; gap: 32px; align-items: start; }
.sn-land-eyebrow { font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; opacity: .7; margin-bottom: 6px; }
.sn-land-h1 { font-family: var(--sn-font-display); font-size: 1.7rem; font-weight: 700; line-height: 1.25; margin-bottom: 10px; }
.sn-land-lede { font-size: .92rem; opacity: .85; line-height: 1.5; margin-bottom: 18px; }
.sn-land-search { display: flex; border-radius: 24px; overflow: hidden; background: #fff; max-width: 480px; }
.sn-land-search-input { flex: 1; border: none; padding: 10px 16px; font-size: .88rem; color: var(--sn-text); outline: none; }
.sn-land-search-btn { display: flex; align-items: center; gap: 5px; padding: 10px 18px; background: var(--sn-blue); color: #fff; font-weight: 600; font-size: .82rem; border: none; }
.sn-land-search-btn:hover { background: var(--sn-blue-dark); }
.sn-land-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sn-land-shortcut { display: inline-block; padding: 5px 12px; border-radius: 14px; font-size: .76rem; font-weight: 600; background: rgba(255,255,255,.12); color: rgba(255,255,255,.9); text-decoration: none; }
.sn-land-shortcut:hover { background: rgba(255,255,255,.2); text-decoration: none; }

/* Stats sidebar */
.sn-land-hero-stats { background: rgba(255,255,255,.08); border-radius: var(--sn-radius-lg); padding: 20px; }
.sn-land-statlist { display: flex; flex-direction: column; gap: 14px; }
.sn-land-stat { display: flex; flex-direction: column; }
.sn-land-stat-num { font-family: var(--sn-font-display); font-size: 1.4rem; font-weight: 700; }
.sn-land-stat-tag { font-size: .72rem; opacity: .65; }

/* Hub heads */
.sn-hub-head { margin-bottom: 16px; }
.sn-hub-title { font-family: var(--sn-font-display); font-size: 1.2rem; font-weight: 700; color: var(--sn-text); }
.sn-hub-title--center { text-align: center; }
.sn-hub-sub { font-size: .82rem; color: var(--sn-text-dim); margin-top: 2px; }
.sn-hub-foot { text-align: center; margin-top: 14px; font-size: .82rem; }

/* Hot list */
.sn-land-hot { padding: 32px 0; }
.sn-land-hotlist { display: flex; flex-direction: column; gap: 0; }
.sn-land-hotrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--sn-border); }
.sn-land-hotrow:last-child { border-bottom: none; }
.sn-land-hotrank { font-weight: 700; font-size: .82rem; color: var(--sn-blue); min-width: 28px; }
.sn-land-hotname { flex: 1; font-weight: 600; font-size: .88rem; color: var(--sn-text); }
.sn-land-hotname:hover { color: var(--sn-blue); }
.sn-land-hotmeta { display: flex; align-items: center; gap: 8px; font-size: .72rem; color: var(--sn-text-dim); }
.sn-land-hotkind { background: var(--sn-blue-light); padding: 2px 6px; border-radius: 3px; font-weight: 600; color: var(--sn-blue); }
.sn-land-hotrate { display: inline-flex; align-items: center; gap: 2px; color: var(--sn-accent); }

/* Genre grid */
.sn-land-genres { padding: 32px 0; background: var(--sn-surface); }
.sn-land-genregrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.sn-land-genretile { }
.sn-land-genrelink { display: flex; flex-direction: column; padding: 14px 12px; border-radius: var(--sn-radius); border: 1px solid var(--sn-border); text-decoration: none; transition: border-color .15s, background .15s; }
.sn-land-genrelink:hover { border-color: var(--sn-blue); background: var(--sn-blue-light); text-decoration: none; }
.sn-land-genrename { font-weight: 600; font-size: .85rem; color: var(--sn-text); }
.sn-land-genrecount { font-size: .7rem; color: var(--sn-text-dim); margin-top: 2px; }

/* Pillars */
.sn-land-pillars { padding: 36px 0; }
.sn-land-pillargrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 20px; counter-reset: pillar; }
.sn-land-pillar { background: var(--sn-surface); border: 1px solid var(--sn-border); border-radius: var(--sn-radius-lg); padding: 20px; }
.sn-land-pillar-num { font-family: var(--sn-font-display); font-size: 1.6rem; font-weight: 700; color: var(--sn-blue); opacity: .3; }
.sn-land-pillar-title { font-size: .92rem; font-weight: 700; margin: 6px 0 4px; }
.sn-land-pillar-desc { font-size: .82rem; color: var(--sn-text-dim); line-height: 1.5; }

/* FAQ */
.sn-land-faq { padding: 36px 0; background: var(--sn-surface); }
.sn-land-faqlist { margin-top: 16px; }
.sn-faq-item { border-bottom: 1px solid var(--sn-border); }
.sn-faq-q { padding: 14px 0; font-weight: 600; font-size: .92rem; cursor: pointer; list-style: none; }
.sn-faq-q::-webkit-details-marker { display: none; }
.sn-faq-q::marker { content: ''; }
.sn-faq-a { padding: 0 0 14px; font-size: .85rem; color: var(--sn-text-dim); line-height: 1.6; }
.sn-faq-a a { color: var(--sn-blue); }

/* Prose */
.sn-land-prose { padding: 32px 0; }
.sn-land-prose p { font-size: .88rem; color: var(--sn-text-dim); line-height: 1.65; margin-bottom: 12px; }
.sn-land-prose a { color: var(--sn-blue); }

/* -- 16. Home page -- */
.sn-home-stage { padding: 24px 0 0; }
.sn-home-stage-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.sn-home-stage-h { font-family: var(--sn-font-display); font-size: 1rem; font-weight: 700; }
.sn-home-stage-more { font-size: .78rem; font-weight: 600; color: var(--sn-blue); margin-left: auto; }
.sn-home-stage-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
.sn-home-stage-row::-webkit-scrollbar { display: none; }
.sn-home-stage-tile { position: relative; flex: 0 0 140px; border-radius: var(--sn-radius); overflow: hidden; aspect-ratio: 2/3; text-decoration: none; }
.sn-home-stage-img { width: 100%; height: 100%; object-fit: cover; }
.sn-home-stage-rank { position: absolute; top: 6px; left: 6px; background: var(--sn-blue); color: #fff; font-size: .7rem; font-weight: 700; padding: 2px 7px; border-radius: 3px; }
.sn-home-stage-cap { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px 8px 8px; background: linear-gradient(transparent, rgba(0,0,0,.7)); color: #fff; }
.sn-home-stage-name { display: block; font-size: .75rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-home-stage-yr { font-size: .65rem; opacity: .7; }

.sn-home-h1 { font-family: var(--sn-font-display); font-size: 1.3rem; font-weight: 700; margin-top: 28px; }
.sn-home-h1-mark { color: var(--sn-blue); }
.sn-home-lede { font-size: .85rem; color: var(--sn-text-dim); margin-top: 4px; margin-bottom: 12px; }

/* Top 10 rail */
.sn-top10-rail { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.sn-top10-rail::-webkit-scrollbar { display: none; }
.sn-top10-tile { position: relative; flex: 0 0 110px; text-decoration: none; }
.sn-top10-num { position: absolute; bottom: -6px; left: -4px; font-family: var(--sn-font-display); font-size: 3rem; font-weight: 900; color: var(--sn-bg); -webkit-text-stroke: 2px var(--sn-blue); line-height: 1; z-index: 2; }
.sn-top10-img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: var(--sn-radius); }

/* -- 17. Detail page -- */
.sn-detail-head { padding: 20px 0 12px; }
.sn-detail-h1 { font-family: var(--sn-font-display); font-size: 1.5rem; font-weight: 700; }
.sn-detail-h1-yr { font-weight: 400; color: var(--sn-text-dim); }
.sn-detail-altname { font-size: .82rem; color: var(--sn-text-dim); margin-top: 2px; }

/* Player stage */
.sn-stage { margin-bottom: 24px; }
.sn-stage-grid { display: grid; grid-template-columns: 1fr 260px; gap: 16px; }
.sn-screen { position: relative; aspect-ratio: 16/9; background: #111; border-radius: var(--sn-radius); overflow: hidden; }
.sn-screen-cover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.sn-screen-cover-img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.sn-screen-prompt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #fff; text-align: center; }
.sn-screen-prompt-line { font-size: .82rem; opacity: .7; }
.sn-screen-play { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--sn-blue); color: #fff; border-radius: 24px; font-weight: 600; font-size: .88rem; border: none; cursor: pointer; }
.sn-screen-play:hover { background: var(--sn-blue-dark); }
.sn-screen-busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; font-size: .82rem; background: rgba(0,0,0,.7); }
.sn-screen-spin { width: 20px; height: 20px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: sn-spin .7s linear infinite; }
@keyframes sn-spin { to { transform: rotate(360deg); } }
.sn-screen-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.sn-player-interstitial { position: absolute; inset: 0; z-index: 10; display: block; }

/* Stage meta row */
.sn-stage-meta { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; font-size: .76rem; }
.sn-stage-meta-tag { background: var(--sn-blue-light); color: var(--sn-blue); padding: 3px 8px; border-radius: 3px; font-weight: 600; }
.sn-stage-meta-rate { display: inline-flex; align-items: center; gap: 3px; color: var(--sn-accent); font-weight: 600; }

/* Stage tools */
.sn-stage-tools { display: flex; gap: 10px; padding: 6px 0; }
.sn-stage-toolbtn { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; color: var(--sn-text-dim); padding: 5px 10px; border-radius: var(--sn-radius); border: 1px solid var(--sn-border); background: var(--sn-surface); }
.sn-stage-toolbtn:hover { border-color: var(--sn-blue); color: var(--sn-blue); }

/* Report form */
.sn-report-form { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.sn-report-form select, .sn-report-form textarea { font-size: .82rem; padding: 6px 10px; border: 1px solid var(--sn-border); border-radius: var(--sn-radius); }
.sn-report-form textarea { flex: 1 1 100%; resize: vertical; }
.sn-report-form button[type="submit"] { padding: 6px 14px; background: var(--sn-blue); color: #fff; border-radius: var(--sn-radius); font-size: .8rem; font-weight: 600; }

/* Direct links sidebar */
.sn-stage-side { background: var(--sn-surface); border: 1px solid var(--sn-border); border-radius: var(--sn-radius-lg); padding: 14px; overflow-y: auto; max-height: 420px; }
.sn-stage-side-head { margin-bottom: 10px; }
.sn-stage-side-h { font-size: .92rem; font-weight: 700; }
.sn-stage-side-sub { font-size: .72rem; color: var(--sn-text-dim); margin-top: 2px; }
.sn-srvlist { display: flex; flex-direction: column; gap: 4px; }
.sn-srvlist-empty { font-size: .78rem; color: var(--sn-text-dim); padding: 8px 0; }
.sn-srv { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: var(--sn-radius); border: 1px solid var(--sn-border); background: var(--sn-bg); font-size: .8rem; text-align: left; transition: border-color .15s, background .15s; }
.sn-srv:hover { border-color: var(--sn-blue); background: var(--sn-blue-light); }
.sn-srv--current { border-color: var(--sn-blue); background: var(--sn-blue-light); }
.sn-srv-num { font-weight: 700; color: var(--sn-blue); min-width: 18px; }
.sn-srv-name { flex: 1; font-weight: 600; }
.sn-srv-tag { font-size: .65rem; font-weight: 700; background: var(--sn-blue); color: #fff; padding: 2px 5px; border-radius: 3px; }

/* Detail canvas (backdrop) */
.sn-detail-canvas { position: relative; height: 200px; overflow: hidden; margin-bottom: -60px; }
.sn-detail-canvas img { width: 100%; height: 100%; object-fit: cover; }
.sn-detail-canvas-tint { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(245,246,248,.3), var(--sn-bg)); }

/* Info section */
.sn-info { position: relative; z-index: 2; padding-bottom: 24px; }
.sn-info-grid { display: grid; grid-template-columns: 180px 1fr; gap: 24px; }
.sn-info-poster { margin-top: -80px; }
.sn-info-poster img { width: 100%; border-radius: var(--sn-radius); box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.sn-info-body { padding-top: 8px; }
.sn-info-syn { font-size: .88rem; color: var(--sn-text-dim); line-height: 1.6; margin-bottom: 14px; }
.sn-info-row { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--sn-border); font-size: .82rem; }
.sn-info-key { font-weight: 600; color: var(--sn-text); min-width: 80px; flex-shrink: 0; }
.sn-info-val { color: var(--sn-text-dim); }
.sn-info-link { color: var(--sn-blue); }

/* -- 18. Episodes -- */
.sn-eps { padding: 24px 0; }
.sn-seasonbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.sn-seasonbar-label { font-size: .82rem; font-weight: 600; color: var(--sn-text-dim); margin-right: 4px; }
.sn-seasonbar-pill { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: .78rem; font-weight: 700; border: 1px solid var(--sn-border); background: var(--sn-surface); color: var(--sn-text-dim); }
.sn-seasonbar-pill:hover { border-color: var(--sn-blue); color: var(--sn-blue); }
.sn-seasonbar-pill--current { background: var(--sn-blue); color: #fff; border-color: var(--sn-blue); }
.sn-eps-pane--hidden { display: none; }
.sn-eps-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.sn-eps-head-num { font-weight: 700; font-size: .92rem; }
.sn-eps-head-count { font-size: .76rem; color: var(--sn-text-dim); }
.sn-eps-empty { font-size: .82rem; color: var(--sn-text-dim); padding: 12px 0; }
.sn-eppills { display: flex; flex-wrap: wrap; gap: 6px; }
.sn-eppill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--sn-radius); border: 1px solid var(--sn-border); background: var(--sn-surface); font-size: .8rem; cursor: pointer; transition: border-color .15s, background .15s; }
.sn-eppill:hover { border-color: var(--sn-blue); background: var(--sn-blue-light); }
.sn-eppill--current { border-color: var(--sn-blue); background: var(--sn-blue); color: #fff; }
.sn-eppill--soon { opacity: .5; cursor: default; border-style: dashed; }
.sn-eppill-num { font-weight: 700; min-width: 18px; }
.sn-eppill-name { font-size: .74rem; color: var(--sn-text-dim); max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-eppill--current .sn-eppill-name { color: rgba(255,255,255,.8); }
.sn-eppill-soon-tag { color: var(--sn-accent); font-weight: 600; }

/* Episode bar under player */
.sn-epbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--sn-surface); border: 1px solid var(--sn-border); border-radius: var(--sn-radius); font-size: .8rem; margin-top: 8px; }
.sn-epbar-label { font-weight: 600; color: var(--sn-text-dim); }
.sn-epbar-current { font-weight: 700; color: var(--sn-blue); }
.sn-epbar-spacer { flex: 1; }
.sn-epbar-nav { padding: 4px 10px; border-radius: var(--sn-radius); border: 1px solid var(--sn-border); font-size: .76rem; font-weight: 600; color: var(--sn-text-dim); }
.sn-epbar-nav:hover:not(:disabled) { border-color: var(--sn-blue); color: var(--sn-blue); }
.sn-epbar-nav:disabled { opacity: .4; cursor: default; }

/* -- 19. List pages -- */
.sn-list { padding: 24px 0; }
.sn-list-head { margin-bottom: 18px; }
.sn-list-h1 { font-family: var(--sn-font-display); font-size: 1.3rem; font-weight: 700; }
.sn-list-sub { font-size: .82rem; color: var(--sn-text-dim); margin-top: 4px; }
.sn-list-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: .72rem; font-weight: 700; background: var(--sn-blue-light); color: var(--sn-blue); margin-bottom: 6px; }

/* Empty state */
.sn-empty { text-align: center; padding: 48px 16px; }
.sn-empty-h { font-size: 1.1rem; font-weight: 700; margin-bottom: 6px; }
.sn-empty-copy { font-size: .85rem; color: var(--sn-text-dim); margin-bottom: 16px; }
.sn-empty-cta { display: inline-block; padding: 8px 18px; border-radius: var(--sn-radius); background: var(--sn-blue); color: #fff; font-weight: 600; font-size: .82rem; text-decoration: none; margin: 4px; }
.sn-empty-cta:hover { background: var(--sn-blue-dark); text-decoration: none; }
.sn-empty-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* -- 20. Search page -- */
.sn-search { padding: 32px 0; }
.sn-search-hero { text-align: center; max-width: 520px; margin: 0 auto; }
.sn-search-hero-icon { margin: 0 auto 12px; color: var(--sn-blue); }
.sn-search-hero-h { font-family: var(--sn-font-display); font-size: 1.4rem; font-weight: 700; }
.sn-search-hero-sub { font-size: .88rem; color: var(--sn-text-dim); margin: 4px 0 20px; }
.sn-search-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.sn-search-input { flex: 1; min-width: 200px; padding: 10px 14px; border: 1px solid var(--sn-border); border-radius: var(--sn-radius); font-size: .88rem; outline: none; }
.sn-search-input:focus { border-color: var(--sn-blue); }
.sn-search-go { padding: 10px 18px; background: var(--sn-blue); color: #fff; border-radius: var(--sn-radius); font-weight: 600; font-size: .85rem; }
.sn-search-go:hover { background: var(--sn-blue-dark); }
.sn-search-types { display: flex; gap: 4px; }
.sn-search-type { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 14px; font-size: .78rem; font-weight: 600; border: 1px solid var(--sn-border); cursor: pointer; color: var(--sn-text-dim); }
.sn-search-type input { display: none; }
.sn-search-type--on { background: var(--sn-blue); color: #fff; border-color: var(--sn-blue); }
.sn-search-count { font-size: .82rem; color: var(--sn-text-dim); margin-bottom: 16px; }
.sn-search-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }

/* -- 21. Request page -- */
.sn-request { padding: 32px 0; }
.sn-request-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 32px; align-items: start; }
.sn-request-info { }
.sn-request-h1 { font-family: var(--sn-font-display); font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; }
.sn-request-desc { font-size: .85rem; color: var(--sn-text-dim); line-height: 1.6; margin-bottom: 16px; }
.sn-request-steps { padding-left: 18px; list-style: decimal; font-size: .82rem; color: var(--sn-text-dim); line-height: 1.7; margin-bottom: 10px; }
.sn-request-note { font-size: .76rem; color: var(--sn-text-dim); font-style: italic; }
.sn-request-formwrap { background: var(--sn-surface); border: 1px solid var(--sn-border); border-radius: var(--sn-radius-lg); padding: 24px; }
.sn-request-form { display: flex; flex-direction: column; gap: 14px; }
.sn-request-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sn-field { display: flex; flex-direction: column; gap: 4px; }
.sn-field-label { font-size: .78rem; font-weight: 600; color: var(--sn-text); }
.sn-field-req { color: #e53935; }
.sn-field-opt { font-weight: 400; color: var(--sn-text-dim); }
.sn-field-input, .sn-field-select, .sn-field-textarea { padding: 9px 12px; border: 1px solid var(--sn-border); border-radius: var(--sn-radius); font-size: .85rem; outline: none; }
.sn-field-input:focus, .sn-field-select:focus, .sn-field-textarea:focus { border-color: var(--sn-blue); }
.sn-field-textarea { resize: vertical; }
.sn-request-submit { padding: 10px 20px; background: var(--sn-blue); color: #fff; border-radius: var(--sn-radius); font-weight: 600; font-size: .88rem; align-self: flex-start; }
.sn-request-submit:hover { background: var(--sn-blue-dark); }
.sn-alert { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: var(--sn-radius); font-size: .82rem; margin-bottom: 14px; }
.sn-alert--ok { background: #e8f5e9; color: #2e7d32; }
.sn-alert--err { background: #fbe9e7; color: #c62828; }

/* -- 22. 404 page -- */
.sn-notfound { padding: 60px 0; text-align: center; }
.sn-notfound-code { font-family: var(--sn-font-display); font-size: 5rem; font-weight: 900; color: var(--sn-blue); opacity: .2; line-height: 1; }
.sn-notfound-h { font-size: 1.3rem; font-weight: 700; margin: 8px 0; }
.sn-notfound-copy { font-size: .88rem; color: var(--sn-text-dim); margin-bottom: 20px; }
.sn-notfound-search { max-width: 400px; margin: 0 auto 20px; }
.sn-notfound-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* -- 23. Share CTA -- */
.sn-share { text-align: center; padding: 24px 16px; max-width: 600px; margin: 0 auto; }
.sn-share-headline { font-size: .92rem; font-weight: 700; margin-bottom: 2px; }
.sn-share-copy { font-size: .78rem; color: var(--sn-text-dim); margin-bottom: 10px; }

/* -- 24. Subscribe popup -- */
.sn-pop { position: fixed; bottom: 20px; right: 20px; z-index: 2000; width: 280px; background: var(--sn-surface); border: 1px solid var(--sn-border); border-radius: var(--sn-radius-lg); box-shadow: 0 8px 28px rgba(0,0,0,.12); padding: 20px; text-align: center; transform: translateY(20px); opacity: 0; pointer-events: none; transition: transform .3s, opacity .3s; }
.sn-pop--open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.sn-pop-x { position: absolute; top: 8px; right: 10px; color: var(--sn-text-dim); font-size: 1.1rem; }
.sn-pop-icon { color: var(--sn-blue); margin-bottom: 8px; }
.sn-pop-title { font-weight: 700; font-size: .92rem; margin-bottom: 4px; }
.sn-pop-copy { font-size: .78rem; color: var(--sn-text-dim); line-height: 1.5; margin-bottom: 12px; }
.sn-pop-cta { display: inline-block; padding: 9px 18px; background: #0088cc; color: #fff; border-radius: var(--sn-radius); font-weight: 600; font-size: .82rem; text-decoration: none; }
.sn-pop-cta:hover { background: #006fa3; text-decoration: none; }

/* -- 25. Trailer dialog -- */
.sn-trailer { border: none; padding: 0; background: transparent; max-width: 860px; width: 92%; }
.sn-trailer::backdrop { background: rgba(0,0,0,.8); }
.sn-trailer-pane { position: relative; }
.sn-trailer-x { position: absolute; top: -32px; right: 0; color: #fff; font-size: 1.6rem; font-weight: 300; }
.sn-trailer-frame { aspect-ratio: 16/9; width: 100%; }
.sn-trailer-frame iframe { width: 100%; height: 100%; border: none; border-radius: var(--sn-radius); }

/* -- 26. Responsive -- */
@media (max-width: 900px) {
    .sn-stage-grid { grid-template-columns: 1fr; }
    .sn-stage-side { max-height: none; }
    .sn-info-grid { grid-template-columns: 140px 1fr; gap: 16px; }
    .sn-land-hero-grid { grid-template-columns: 1fr; }
    .sn-land-hero-stats { display: none; }
    .sn-request-layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .sn-strip { display: none; }
    .sn-burger { display: flex; }
    .sn-quicksearch { max-width: 220px; }
    .sn-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
    .sn-info-grid { grid-template-columns: 1fr; }
    .sn-info-poster { margin-top: 0; max-width: 160px; margin-inline: auto; }
    .sn-detail-canvas { height: 140px; }
    .sn-home-stage-tile { flex: 0 0 120px; }
    .sn-land-h1 { font-size: 1.3rem; }
}
@media (max-width: 480px) {
    .sn-grid { grid-template-columns: repeat(2, 1fr); }
    .sn-card { width: auto; }
    .sn-quicksearch { display: none; }
    .sn-request-row { grid-template-columns: 1fr; }
}