/* ============================================================
   ASHISSTREAMING — "AURORA NOIR" CORE THEME
   Drop-in stylesheet shared by every page override.
   Loaded BEFORE each *_styles.css so per-page rules win.
   ============================================================ */

/* -------------------- 1. RESET --------------------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
img,video,iframe{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none;outline:none}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

/* -------------------- 2. FONTS --------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap');

/* -------------------- 3. TOKENS -------------------------- */
:root{
  /* Aurora hues — shared across themes */
  --au-cyan:    198 100% 60%;   /* #1fb6ff-ish */
  --au-violet:  268  85% 65%;
  --au-magenta: 322  95% 64%;
  --au-amber:    35 100% 60%;

  /* Type */
  --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Geometry */
  --r-xs: 6px;   --r-sm: 10px;   --r-md: 16px;
  --r-lg: 22px;  --r-xl: 32px;   --r-pill: 999px;

  --pad-page: clamp(16px, 4vw, 36px);
  --gutter:   clamp(10px, 2vw, 18px);
  --maxwide: 1440px;

  /* Motion */
  --ease-out: cubic-bezier(.22,.85,.36,1);
  --ease-in:  cubic-bezier(.55,.05,.68,.19);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --t-fast: .18s;
  --t-med:  .35s;
  --t-slow: .7s;
}

/* DARK (default) */
:root, [data-theme="dark"]{
  --bg:           #07080b;
  --bg-elev-1:    #0d0f14;
  --bg-elev-2:    #14171f;
  --bg-glass:     rgba(20,23,31,.55);
  --line:         rgba(255,255,255,.07);
  --line-strong:  rgba(255,255,255,.14);
  --ink:          #f3f5f8;
  --ink-soft:     #c8ccd4;
  --ink-mute:     #7c828d;
  --ink-faint:    #4a4f59;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 18px rgba(0,0,0,.35);
  --shadow-2: 0 10px 40px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.4);
  --shadow-glow: 0 0 50px hsl(var(--au-violet) / .25);

  --aurora: linear-gradient(125deg,
    hsl(var(--au-cyan)) 0%,
    hsl(var(--au-violet)) 50%,
    hsl(var(--au-magenta)) 100%);
  --aurora-soft: radial-gradient(120% 80% at 0% 0%, hsl(var(--au-cyan)/.18), transparent 55%),
                 radial-gradient(120% 80% at 100% 100%, hsl(var(--au-magenta)/.18), transparent 55%);
}

/* LIGHT */
[data-theme="light"]{
  --bg:           #f5f4f0;
  --bg-elev-1:    #fbfaf6;
  --bg-elev-2:    #ffffff;
  --bg-glass:     rgba(255,255,255,.7);
  --line:         rgba(10,12,18,.08);
  --line-strong:  rgba(10,12,18,.16);
  --ink:          #0d0f14;
  --ink-soft:     #2c303a;
  --ink-mute:     #5b606b;
  --ink-faint:    #a8acb3;
  --shadow-1: 0 1px 2px rgba(20,18,40,.05), 0 4px 16px rgba(20,18,40,.07);
  --shadow-2: 0 10px 30px rgba(20,18,40,.10), 0 2px 4px rgba(20,18,40,.05);
  --shadow-glow: 0 0 40px hsl(var(--au-violet) / .18);

  --aurora-soft: radial-gradient(120% 80% at 0% 0%, hsl(var(--au-cyan)/.10), transparent 60%),
                 radial-gradient(120% 80% at 100% 100%, hsl(var(--au-magenta)/.10), transparent 60%);
}

/* -------------------- 4. BASE ---------------------------- */
html{ color-scheme: dark light; }
body{
  font-family: var(--font-sans);
  font-feature-settings: "ss01","cv11";
  background: var(--bg);
  color: var(--ink);
  letter-spacing:-0.005em;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition: background-color var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out);
}

/* Aurora ambient backdrop layer (under everything) */
body::before{
  content:"";
  position:fixed; inset:0;
  background: var(--aurora-soft);
  z-index:-2;
  pointer-events:none;
  transition: opacity var(--t-slow) var(--ease-out);
}
body::after{
  content:"";
  position:fixed; inset:0;
  background-image: radial-gradient(1px 1px at 25% 30%, hsl(var(--au-cyan)/.6) 50%, transparent 51%),
                    radial-gradient(1px 1px at 75% 80%, hsl(var(--au-magenta)/.6) 50%, transparent 51%),
                    radial-gradient(1px 1px at 50% 65%, hsl(var(--au-violet)/.6) 50%, transparent 51%),
                    radial-gradient(1px 1px at 10% 90%, hsl(var(--au-amber)/.5) 50%, transparent 51%);
  background-size: 800px 800px;
  opacity:.25;
  z-index:-1;
  pointer-events:none;
  animation: ash-stars 60s linear infinite;
}
@keyframes ash-stars{ to{ background-position: 800px 800px, -800px 800px, 800px -800px, -800px -800px; } }
[data-theme="light"] body::after{opacity:.08}

/* Smooth theme cross-fade */
html{transition: background-color var(--t-med) var(--ease-out)}
*{transition: background-color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);}

/* -------------------- 5. TYPOGRAPHY ---------------------- */
h1,h2,h3,h4,h5{
  font-family:var(--font-sans);
  font-weight:600; line-height:1.1; letter-spacing:-.02em;
  text-wrap: balance;
}
h1{ font-size: clamp(28px, 4.5vw, 56px); }
h2{ font-size: clamp(22px, 2.6vw, 32px); }
h3{ font-size: clamp(16px, 1.4vw, 20px); }
p { line-height:1.55; color:var(--ink-soft); text-wrap: pretty; }
.mono{ font-family:var(--font-mono); letter-spacing:0; }

/* -------------------- 6. CUSTOM SCROLLBAR --------------- */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, hsl(var(--au-cyan)/.4), hsl(var(--au-violet)/.4));
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, hsl(var(--au-cyan)/.7), hsl(var(--au-magenta)/.7));
  background-clip: padding-box;
}
*{ scrollbar-width: thin; scrollbar-color: hsl(var(--au-violet)/.5) transparent; }

/* hidden-scroll utility for carousels */
.ash-noscroll::-webkit-scrollbar{ display:none; }
.ash-noscroll{ scrollbar-width:none; }

/* -------------------- 7. BUTTON SYSTEM ------------------ */
.ash-btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.7em 1.15em;
  font-family:var(--font-sans); font-weight:500; font-size:.95rem;
  color:var(--ink);
  background: var(--bg-elev-2);
  border:1px solid var(--line-strong);
  border-radius: var(--r-pill);
  cursor:pointer;
  isolation:isolate;
  transition: transform var(--t-fast) var(--ease-spring),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
  user-select:none;
}
.ash-btn::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: var(--aurora);
  opacity:0; z-index:-1;
  transition: opacity var(--t-med) var(--ease-out);
}
.ash-btn:hover{ transform:translateY(-1px); border-color: transparent; color:#fff; }
.ash-btn:hover::before{ opacity:1; }
.ash-btn:active{ transform:translateY(0) scale(.98); }

.ash-btn--primary{
  color:#fff; border-color:transparent;
  background: var(--aurora);
  background-size: 200% 100%;
  background-position: 0% 50%;
  box-shadow: 0 8px 30px hsl(var(--au-violet) / .35);
}
.ash-btn--primary::before{ display:none; }
.ash-btn--primary:hover{ background-position: 100% 50%; transform: translateY(-2px); }

.ash-btn--ghost{ background:transparent; border-color: var(--line); }

.ash-btn--icon{ padding:.6em; aspect-ratio:1; border-radius:50%; }

.ash-btn--sm{ font-size:.8rem; padding:.5em .85em; }

/* -------------------- 8. CARD --------------------------- */
.ash-card{
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow:hidden;
  position:relative;
  transition: transform var(--t-med) var(--ease-spring),
              border-color var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out);
}
.ash-card:hover{
  transform: translateY(-4px);
  border-color: hsl(var(--au-violet)/.5);
  box-shadow: var(--shadow-2), 0 0 0 1px hsl(var(--au-violet)/.4);
}

/* -------------------- 9. INPUT ------------------------- */
.ash-input, .ash-select{
  width:100%;
  padding:.85em 1em;
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: .95rem;
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.ash-input::placeholder{ color: var(--ink-faint); }
.ash-input:focus, .ash-select:focus{
  border-color: hsl(var(--au-violet)/.7);
  box-shadow: 0 0 0 4px hsl(var(--au-violet)/.18);
}

/* Custom <select> styling — chevron drawn via SVG */
.ash-select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:2.4em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/></svg>");
  background-repeat:no-repeat;
  background-position: right 1em center;
  cursor:pointer;
}
.ash-select option{ background:var(--bg-elev-2); color:var(--ink); }

/* -------------------- 10. CHIP ------------------------- */
.ash-chip{
  display:inline-flex; align-items:center; gap:.4em;
  padding:.3em .7em;
  font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.04em; text-transform:uppercase;
  color: var(--ink-soft);
  background: var(--bg-elev-2);
  border:1px solid var(--line);
  border-radius: var(--r-pill);
}
.ash-chip--accent{
  color:#fff;
  background: var(--aurora);
  border-color:transparent;
}

/* -------------------- 11. NAV / LAYOUT ----------------- */
.ash-shell{
  min-height: 100dvh;
  display:flex; flex-direction:column;
}
.ash-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:1.2rem;
  padding: .8rem var(--pad-page);
  background: var(--bg-glass);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.ash-nav .ash-logo{ flex-shrink:0; }
.ash-nav__links{
  display:flex; gap:.25rem; align-items:center;
}
.ash-nav__links a{
  position:relative;
  padding:.5em 1em;
  border-radius: var(--r-pill);
  font-size:.92rem; font-weight:500;
  color: var(--ink-mute);
}
.ash-nav__links a:hover{ color: var(--ink); background: var(--bg-elev-1); }
.ash-nav__links a.is-active{
  color:#fff;
  background: var(--aurora);
}
.ash-nav__spacer{ flex:1; }

/* Search pill */
.ash-search{
  display:flex; align-items:center;
  background: var(--bg-elev-1);
  border:1px solid var(--line);
  border-radius: var(--r-pill);
  padding:.25rem .25rem .25rem 1rem;
  min-width:200px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ash-search:focus-within{
  border-color: hsl(var(--au-violet)/.7);
  box-shadow: 0 0 0 4px hsl(var(--au-violet)/.15);
}
.ash-search input{ flex:1; padding:.45em .25em; min-width:0; font-size:.9rem; }
.ash-search button{
  width:34px; height:34px; border-radius:50%;
  background: var(--aurora); color:#fff;
  display:grid; place-items:center;
  cursor:pointer;
  transition: transform var(--t-fast) var(--ease-spring);
}
.ash-search button:hover{ transform: scale(1.08); }

/* Mobile bottom nav */
.ash-mobile-nav{
  display:none;
  position:fixed; left:50%; bottom: calc(env(safe-area-inset-bottom,0px) + 14px);
  transform: translateX(-50%);
  z-index:60;
  background: var(--bg-glass);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border:1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding:.4rem;
  box-shadow: var(--shadow-2);
}
.ash-mobile-nav__inner{ display:flex; gap:.2rem; }
.ash-mobile-nav a{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:.55rem .9rem;
  border-radius: var(--r-pill);
  color: var(--ink-mute);
  font-size:.66rem; font-family:var(--font-mono); letter-spacing:.04em;
}
.ash-mobile-nav a svg{ width:18px; height:18px; stroke: currentColor; fill:none; stroke-width:1.7; }
.ash-mobile-nav a.is-active{ color:#fff; background: var(--aurora); }

/* -------------------- 12. THEME TOGGLE ----------------- */
.ash-theme-toggle{
  width: 52px; height: 28px; border-radius: var(--r-pill);
  background: var(--bg-elev-2);
  border:1px solid var(--line-strong);
  position:relative; cursor:pointer; flex-shrink:0;
  transition: background var(--t-med) var(--ease-out);
}
.ash-theme-toggle__thumb{
  position:absolute; top:50%; left:3px;
  width:22px; height:22px; border-radius:50%;
  transform: translateY(-50%);
  background: var(--aurora);
  box-shadow: 0 2px 10px hsl(var(--au-violet)/.5);
  transition: left var(--t-med) var(--ease-spring), transform var(--t-med) var(--ease-spring);
  display:grid; place-items:center;
  color:#fff;
}
.ash-theme-toggle__thumb svg{ width:12px; height:12px; }
.ash-theme-toggle__thumb .sun{ display:none; }
[data-theme="light"] .ash-theme-toggle__thumb{
  left: calc(100% - 25px);
}
[data-theme="light"] .ash-theme-toggle__thumb .sun{ display:block; }
[data-theme="light"] .ash-theme-toggle__thumb .moon{ display:none; }

/* -------------------- 13. CAROUSEL --------------------- */
.ash-row{ margin-bottom: 2.4rem; }
.ash-row__head{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:0 var(--pad-page); margin-bottom:.9rem;
  gap:1rem;
}
.ash-row__title{ font-size: clamp(18px, 1.5vw, 22px); font-weight:600; }
.ash-row__sub{ font-family:var(--font-mono); font-size:.7rem; color:var(--ink-mute); letter-spacing:.08em; text-transform:uppercase; }
.ash-rail{
  display:flex; gap: var(--gutter);
  overflow-x:auto; padding: 4px var(--pad-page) 12px;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--pad-page);
}
.ash-rail::-webkit-scrollbar{ height:6px; }
.ash-rail > *{ scroll-snap-align:start; flex:0 0 auto; }

/* Poster card */
.ash-poster{
  width: clamp(130px, 16vw, 180px);
  aspect-ratio: 2/3;
  border-radius: var(--r-md);
  overflow:hidden;
  position:relative;
  background: var(--bg-elev-1);
  border:1px solid var(--line);
  cursor:pointer;
  transition: transform var(--t-med) var(--ease-spring),
              border-color var(--t-med);
}
.ash-poster::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.85) 100%);
  opacity:0; transition: opacity var(--t-med) var(--ease-out);
}
.ash-poster img{ width:100%; height:100%; object-fit:cover; transition: transform var(--t-slow) var(--ease-out); }
.ash-poster:hover{ transform: translateY(-6px) scale(1.02); border-color: hsl(var(--au-violet)/.5); }
.ash-poster:hover img{ transform: scale(1.06); }
.ash-poster:hover::after{ opacity:1; }
.ash-poster__title{
  position:absolute; left:12px; right:12px; bottom:10px;
  font-size:.85rem; color:#fff; font-weight:500;
  opacity:0; transform: translateY(8px);
  transition: opacity var(--t-med), transform var(--t-med) var(--ease-spring);
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
  z-index:2;
}
.ash-poster:hover .ash-poster__title{ opacity:1; transform: translateY(0); }
.ash-poster__rank{
  position:absolute; top:8px; left:8px;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em;
  background: rgba(0,0,0,.6); backdrop-filter: blur(8px);
  color:#fff; padding:.3em .55em; border-radius:var(--r-xs);
  z-index:2;
}

/* -------------------- 14. UTILITY ---------------------- */
.ash-stack > * + *{ margin-top: 1rem; }
.ash-divider{ height:1px; background: var(--line); margin: 1.5rem 0; }
.aurora-text{
  background: var(--aurora);
  -webkit-background-clip:text; background-clip:text;
  color: transparent;
}
.ash-grain{
  position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='1'/></svg>");
  mix-blend-mode: overlay;
}

/* -------------------- 15. KEYFRAMES -------------------- */
@keyframes ash-fade-up { from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)} }
@keyframes ash-fade-in { from{opacity:0} to{opacity:1} }
@keyframes ash-slide-in-right { from{opacity:0; transform:translateX(40px)} to{opacity:1; transform:translateX(0)} }
@keyframes ash-pulse { 0%,100%{ opacity:.7 } 50%{ opacity:1 } }
@keyframes ash-shimmer{ 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes ash-rotate{ to{ transform: rotate(360deg) } }
@keyframes ash-aurora-flow { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

.ash-fade-up{ animation: ash-fade-up var(--t-slow) var(--ease-out) backwards; }
.ash-fade-in{ animation: ash-fade-in var(--t-med) var(--ease-out) backwards; }

/* Skeleton */
.ash-skel{
  background: linear-gradient(90deg, var(--bg-elev-1) 0%, var(--bg-elev-2) 50%, var(--bg-elev-1) 100%);
  background-size: 200% 100%;
  animation: ash-shimmer 1.4s linear infinite;
  border-radius: var(--r-md);
}

/* Spinner */
.ash-spinner{
  width:28px; height:28px;
  border-radius:50%;
  border:2.5px solid transparent;
  border-top-color: hsl(var(--au-cyan));
  border-right-color: hsl(var(--au-violet));
  animation: ash-rotate .8s linear infinite;
}

/* -------------------- 16. RESPONSIVE ------------------- */
@media (max-width: 820px){
  .ash-nav__links{ display:none; }
  .ash-mobile-nav{ display:block; }
  body{ padding-bottom: 80px; }
  .ash-search{ min-width: 0; flex:1; }
}
@media (max-width: 480px){
  .ash-nav{ padding: .7rem 1rem; gap:.6rem; }
  .ash-nav .ash-logo svg{ width:118px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  body::after{ display:none; }
}

/* Selection */
::selection{ background: hsl(var(--au-violet)/.4); color:#fff; }

/* Focus ring (keyboard only) */
:focus-visible{ outline: 2px solid hsl(var(--au-violet)); outline-offset: 2px; border-radius: var(--r-xs); }