@layer reset, tokens, base, layout, components, motion, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { overflow-x: clip; color-scheme: dark; scroll-behavior: smooth; }
  body, h1, h2, h3, p { margin: 0; }
  button, input, select, textarea { font: inherit; }
  button, a, select, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  img { display: block; max-width: 100%; }
}

@layer tokens {
  :root {
    --ink: #f4f2ed;
    --ink-soft: #c2c0ba;
    --ink-muted: #858783;
    --canvas: #050606;
    --canvas-soft: #0a0c0d;
    --surface: rgba(16, 18, 19, .88);
    --surface-solid: #101213;
    --surface-raised: #17191a;
    --surface-glass: rgba(13, 15, 16, .7);
    --line: rgba(235, 233, 227, .1);
    --line-bright: rgba(242, 240, 234, .2);
    --gold: #c8c5bd;
    --gold-bright: #f4f2ed;
    --gold-deep: #666762;
    --blue: #9eabb1;
    --violet: #b78af0;
    --danger: #ff8076;
    --success: #70d6a4;
    --shadow-lg: 0 30px 90px rgba(0, 0, 0, .48);
    --shadow-md: 0 16px 42px rgba(0, 0, 0, .34);
    --radius-xl: 28px;
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --sidebar: 230px;
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-soft: cubic-bezier(.4, 0, .2, 1);
    --duration-fast: 160ms;
    --duration: 320ms;
    --duration-slow: 700ms;
  }
  @property --hero-x { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
}

@layer base {
  body {
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 82% 0%, rgba(216, 214, 207, .09), transparent 30rem),
      linear-gradient(135deg, #040505, #090b0c 44%, #050606);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.5;
  }
  body.modal-open { overflow: hidden; }
  a { color: inherit; text-decoration: none; }
  button { color: inherit; }
  button:not(:disabled), a, select, summary { cursor: pointer; }
  button:disabled { cursor: wait; opacity: .58; }
  :focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
  ::selection { background: rgba(216, 214, 207, .28); }
  .hidden, [hidden] { display: none !important; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .skip-link { position: fixed; z-index: 200; top: 12px; left: 12px; padding: 10px 15px; border-radius: 9px; background: var(--ink); color: var(--canvas); transform: translateY(-160%); }
  .skip-link:focus { transform: none; }
  .eyebrow { color: var(--gold); font-size: .72rem; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; }
  h1, h2, h3 { font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif; font-weight: 500; line-height: 1.05; letter-spacing: -.018em; }
  h1 { font-size: clamp(1.25rem, 2vw, 1.65rem); }
  h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
  h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); }
  input, select, textarea {
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .045);
    color: var(--ink);
    padding: 0 13px;
    transition: border-color var(--duration-fast), background var(--duration-fast), box-shadow var(--duration-fast);
  }
  textarea { min-height: 66px; resize: vertical; padding-block: 10px; }
  input:hover, select:hover, textarea:hover { border-color: var(--line-bright); background: rgba(255,255,255,.065); }
  input:focus, select:focus, textarea:focus { border-color: rgba(216,214,207,.7); box-shadow: 0 0 0 3px rgba(216,214,207,.1); outline: 2px solid rgba(216,214,207,.42); outline-offset: 1px; }
  select option { background: var(--surface-solid); }
  label { display: grid; gap: 7px; color: var(--ink-soft); font-size: .82rem; font-weight: 650; }
  label small, fieldset small { color: var(--ink-muted); font-size: .76rem; font-weight: 450; }
  fieldset { margin: 0; border: 0; padding: 0; }
  legend { margin-bottom: 9px; color: var(--ink-soft); font-size: .82rem; font-weight: 650; }
  code, kbd { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
  kbd { border: 1px solid var(--line-bright); border-bottom-color: rgba(255,255,255,.24); border-radius: 5px; background: rgba(255,255,255,.06); padding: 2px 6px; color: var(--ink-soft); font-size: .7rem; }
}

@layer layout {
  .ambient-glow { position: fixed; z-index: -1; width: 36rem; height: 36rem; border-radius: 50%; filter: blur(100px); opacity: .13; pointer-events: none; }
  .ambient-glow-one { top: -18rem; right: 8%; background: #b8b6af; }
  .ambient-glow-two { bottom: -22rem; left: 10%; background: #38474d; }
  .app-shell { min-height: 100vh; min-height: 100dvh; }
  .app-shell::before { content: ""; position: fixed; z-index: -1; right: -9vw; bottom: -16vw; width: min(58vw, 900px); aspect-ratio: 3/2; background: url('/assets/blacksail-mark-web.png') center/contain no-repeat; opacity: .018; filter: grayscale(1); pointer-events: none; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 50; width: var(--sidebar); display: flex; flex-direction: column; gap: 28px;
    padding: 28px 18px 20px; border-right: 1px solid var(--line); background: linear-gradient(180deg,rgba(5,6,6,.96),rgba(10,12,13,.88)); backdrop-filter: blur(24px) saturate(105%);
  }
  .main-content { min-width: 0; width: calc(100% - var(--sidebar)); margin-left: var(--sidebar); padding: 0 clamp(22px, 4vw, 64px) 30px; }
  .topbar { position: sticky; z-index: 40; top: 0; min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(7,9,12,.96), rgba(7,9,12,.82)); backdrop-filter: blur(20px); }
  .route-heading { min-width: 0; }
  .route-heading h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-actions { min-width: 0; display: flex; align-items: center; gap: 10px; }
  .view { max-width: 1480px; margin: 0 auto; padding: 30px 0 52px; opacity: 0; transform: translateY(10px); }
  .view.active-view { opacity: 1; transform: none; }
  .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 20px 0 22px; }
  .section-heading h2 { margin-top: 5px; }
  .compact-heading { margin-top: 34px; }
  .section-note { max-width: 520px; color: var(--ink-soft); text-align: right; }
  .panel { border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(24,26,27,.9), rgba(10,12,13,.84)); box-shadow: var(--shadow-md); }
  .panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
  .panel-heading h3 { margin-top: 5px; }
  .metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 26px 0; }
  .health-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:20px 0; }.health-panel { padding:22px; }.health-list { display:grid; gap:8px; margin-top:18px; }.health-row { display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.02); }.health-row>span:first-child { display:grid; place-items:center; width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.05); }.health-row strong,.health-row small { display:block; }.health-row small { color:var(--ink-muted); }.health-row code { color:var(--ink-soft);font-size:.68rem; }.health-row.error { border-color:rgba(255,128,118,.22); }.health-row.warning { border-color:rgba(220,190,130,.18); }
  .scanner-grid, .settings-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); gap: 18px; }
  footer { display: flex; justify-content: space-between; gap: 20px; padding-top: 26px; border-top: 1px solid var(--line); color: var(--ink-muted); font-size: .76rem; }
}

@layer components {
  .brand { display: flex; align-items: center; gap: 11px; min-height: 54px; }
  .brand > span:last-child { display: grid; }
  .brand strong { font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif; font-size: .95rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; }
  .brand small { color: var(--ink-muted); font-size: .58rem; font-weight: 750; letter-spacing: .42em; text-transform: uppercase; }
  .brand-mark { position: relative; width: 48px; height: 42px; flex: 0 0 auto; filter: drop-shadow(0 4px 12px rgba(0,0,0,.5)); }
  .brand-mark img { width: 100%; height: 100%; object-fit: contain; }
  .primary-nav { display: grid; gap: 7px; }
  .nav-link { position: relative; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 13px; border-radius: 12px; color: var(--ink-muted); font-weight: 650; transition: color var(--duration-fast), background var(--duration-fast), transform var(--duration-fast); }
  .nav-link:hover { color: var(--ink); background: rgba(255,255,255,.045); transform: translateX(2px); }
  .nav-link.active { color: var(--gold-bright); background: linear-gradient(90deg, rgba(216,214,207,.12), rgba(216,214,207,.018)); }
  .nav-link.active::before { content: ""; position: absolute; left: 0; width: 2px; height: 22px; border-radius: 2px; background: var(--gold); box-shadow: 0 0 14px var(--gold); }
  .nav-icon { width: 22px; color: currentColor; text-align: center; }
  .sidebar-status { display: grid; gap: 10px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
  .connection-row { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 8px; color: var(--ink-soft); font-size: .76rem; }
  .connection-row small { color: var(--ink-muted); }
  .status-dot { width: 7px; height: 7px; border-radius: 50%; background: #565b5c; }
  .status-dot.ready { background: var(--success); box-shadow: 0 0 11px rgba(112,214,164,.55); }
  .local-card { display: flex; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); }
  .local-card strong { font-size: .78rem; }
  .local-card p { margin-top: 2px; color: var(--ink-muted); font-size: .72rem; line-height: 1.4; }
  .lock-shape { width: 15px; height: 13px; margin-top: 6px; border: 1px solid var(--gold); border-radius: 3px; }
  .lock-shape::before { content: ""; display: block; width: 8px; height: 7px; margin: -7px auto 0; border: 1px solid var(--gold); border-bottom: 0; border-radius: 8px 8px 0 0; }
  .route-heading h1 { margin-top: 3px; }
  .command-button, .profile-button, .icon-button, .primary-button, .secondary-button, .danger-button, .glass-button, .text-button { min-height: 44px; border-radius: 11px; font-weight: 750; transition: transform var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast), box-shadow var(--duration-fast); }
  .primary-button { border: 1px solid #f4f2ed; background: linear-gradient(135deg, #faf9f5, #b8b7b1); color: #080909; padding: 0 17px; box-shadow: 0 9px 26px rgba(220,218,211,.13); }
  .primary-button:hover { transform: translateY(-2px); box-shadow: 0 13px 32px rgba(220,218,211,.22); }
  .secondary-button, .glass-button { border: 1px solid var(--line-bright); background: rgba(255,255,255,.05); color: var(--ink); padding: 0 16px; }
  .secondary-button:hover, .glass-button:hover { transform: translateY(-1px); border-color: rgba(216,214,207,.45); background: rgba(216,214,207,.08); }
  .danger-button { border: 1px solid rgba(255,128,118,.4); background: rgba(255,128,118,.09); color: #ffaba4; padding: 0 16px; }
  .text-button { border: 0; background: transparent; color: var(--gold); padding: 0 6px; }
  .text-button:hover { color: var(--gold-bright); }
  .icon-button { width: 42px; border: 1px solid var(--line); background: rgba(255,255,255,.04); font-size: 1.1rem; }
  .icon-button:hover { border-color: var(--line-bright); transform: rotate(12deg); }
  .command-button { display: flex; align-items: center; gap: 9px; min-width: 245px; border: 1px solid var(--line); background: rgba(255,255,255,.035); padding: 0 10px 0 14px; color: var(--ink-muted); text-align: left; }
  .command-button span:nth-child(2) { flex: 1; }
  .profile-button { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.035); padding: 0 10px 0 6px; color: var(--ink-soft); }
  .profile-button:hover { border-color: rgba(216,214,207,.38); background: rgba(216,214,207,.07); }
  #profile-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--profile-color, var(--gold)); color: #0a0b0d; font-size: .75rem; font-weight: 900; }
  .scan-badge { display: flex; align-items: center; gap: 7px; min-height: 34px; border: 1px solid var(--line); border-radius: 99px; padding: 0 11px; color: var(--ink-soft); font-size: .74rem; font-weight: 700; }
  .scan-badge > span { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
  .scan-badge.running > span { background: var(--gold); }
  .global-error { max-width: 1480px; margin: 16px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 16px; border: 1px solid rgba(255,128,118,.32); border-radius: 13px; background: rgba(92,25,25,.2); }
  .global-error div { display: grid; }
  .global-error span { color: var(--ink-soft); font-size: .82rem; }
  .cast-session { max-width: 1480px; margin: 16px auto 0; display: grid; grid-template-columns: 42px minmax(0,1fr) minmax(150px,240px) auto; align-items: center; gap: 13px; padding: 12px 15px; border: 1px solid rgba(114,184,212,.32); border-radius: 13px; background: linear-gradient(90deg,rgba(51,110,134,.18),rgba(216,214,207,.045)); box-shadow: inset 0 1px rgba(255,255,255,.035); }
  .cast-session-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(114,184,212,.42); border-radius: 11px; color: #c6efff; background: rgba(114,184,212,.12); }
  .cast-session-copy { min-width: 0; display: grid; }
  .cast-session-copy small { color: #9eddf5; font-size: .67rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
  .cast-session-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cast-session-timeline { min-width: 0; display: grid; gap: 6px; color: var(--ink-soft); font-size: .72rem; font-variant-numeric: tabular-nums; text-align: right; }
  .cast-session-track { display: block; height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.11); }
  .cast-session-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--blue),#c6efff); transition: width 500ms var(--ease-out); }
  .cast-session-controls { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 7px; min-width: 0; }
  .cast-control-button, .cast-volume-control > button { flex: 0 0 44px; width: 44px; min-height: 40px; display: grid; place-items: center; border: 1px solid rgba(216,214,207,.2); border-radius: 10px; background: rgba(255,255,255,.045); color: var(--ink); font: 800 .76rem/1 system-ui,sans-serif; }
  .cast-control-button:hover, .cast-volume-control > button:hover { border-color: rgba(158,221,245,.52); background: rgba(114,184,212,.1); }
  .cast-control-button:disabled, .cast-volume-control.is-unavailable { opacity: .42; }
  .cast-control-button.has-options { color: #c6efff; border-color: rgba(114,184,212,.32); }
  .cast-session-controls > button:focus-visible, .cast-volume-control > button:focus-visible, .cast-volume-control input:focus-visible { outline: 2px solid #c6efff; outline-offset: 2px; }
  .cast-volume-control { min-width: 286px; height: 40px; display: grid; grid-template-columns: 44px 34px minmax(100px,1fr) 34px 42px; align-items: center; gap: 6px; padding-right: 7px; border: 1px solid rgba(216,214,207,.16); border-radius: 10px; background: rgba(0,0,0,.14); }
  .cast-volume-control > button { min-height: 34px; margin: 0; border-radius: 8px; }
  .cast-volume-control #cast-session-mute { min-height: 40px; margin: -1px 0 -1px -1px; border-radius: 10px 8px 8px 10px; }
  .cast-volume-control .cast-volume-step { width: 34px; font-size: 1rem; }
  .cast-volume-control input { width: 100%; min-width: 0; height: 6px; appearance: none; border-radius: 99px; background: linear-gradient(90deg,#9eddf5 0 var(--cast-volume-percent,50%),rgba(255,255,255,.16) var(--cast-volume-percent,50%) 100%); cursor: pointer; }
  .cast-volume-control input::-webkit-slider-thumb { width: 18px; height: 18px; appearance: none; border: 2px solid #071014; border-radius: 50%; background: #c6efff; box-shadow: 0 0 0 2px rgba(198,239,255,.22); }
  .cast-volume-control input::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid #071014; border-radius: 50%; background: #c6efff; box-shadow: 0 0 0 2px rgba(198,239,255,.22); }
  .cast-volume-control output { min-width: 38px; color: var(--ink-soft); font-size: .68rem; font-variant-numeric: tabular-nums; text-align: right; }
  .cast-track-button { padding-inline: 8px; }
  #cast-session-audio { flex-basis: auto; width: auto; min-width: 48px; }

  .download-tracker { max-width: 1480px; margin: 12px auto 0; padding: 13px 15px; border: 1px solid rgba(216,214,207,.18); border-radius: 13px; background: linear-gradient(100deg,rgba(216,214,207,.06),rgba(114,184,212,.045)); box-shadow: inset 0 1px rgba(255,255,255,.03); }
  .download-tracker-heading { display: grid; grid-template-columns: 38px minmax(0,1fr) auto auto; align-items: center; gap: 11px; }
  .download-tracker-icon { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(216,214,207,.25); border-radius: 10px; color: var(--gold-bright); background: rgba(216,214,207,.06); font-size: 1.15rem; }
  .download-tracker-heading > div { min-width: 0; display: grid; }
  .download-tracker-heading small { color: var(--ink-muted); font-size: .62rem; font-weight: 800; letter-spacing: .12em; }
  .download-tracker-heading strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
  .download-tracker-toggle { min-height: 36px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.045); padding: 0 10px; color: var(--ink-soft); font-size: .7rem; font-weight: 750; }
  .download-tracker-toggle:hover { border-color: var(--line-bright); background: rgba(255,255,255,.075); }
  .download-tracker-toggle i { font-style: normal; transition: transform 180ms var(--ease-out); }
  .download-tracker.is-expanded .download-tracker-toggle i { transform: rotate(180deg); }
  .download-tracker-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 11px; }
  .download-job { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto 28px; gap: 7px 9px; padding: 11px 10px 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(0,0,0,.13); }
  .download-job-copy { min-width: 0; display: grid; }
  .download-job-release { grid-column: 1/-1; min-width: 0; padding-top: 3px; }
  .download-job-release > span { display: block; color: var(--gold-bright); font-size: .63rem; font-weight: 750; }
  .download-job-release p { margin: 5px 0 0; color: var(--ink-soft); font-size: .7rem; line-height: 1.5; overflow-wrap: anywhere; }
  .download-job-activity { grid-column: 1/-1; color: #c6efff; font-size: .68rem; }
  .download-job-stats { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px 10px; margin: 3px 0; padding: 12px 0; border-block: 1px solid var(--line); }
  .download-job-stats > div { min-width: 0; }
  .download-job-stats dt { color: var(--ink-muted); font-size: .62rem; }
  .download-job-stats dd { margin: 4px 0 0; color: var(--ink); font-size: .72rem; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .download-job-note { grid-column: 1/-1; margin: 0; color: var(--ink-muted); font-size: .61rem; line-height: 1.5; }
  .download-job-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
  .download-job-copy small { overflow: hidden; color: var(--ink-muted); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
  .download-job-status { align-self: start; color: #c6efff; font-size: .66rem; font-weight: 750; white-space: nowrap; }
  .download-job-dismiss { width: 28px; min-height: 28px; border: 0; border-radius: 7px; background: transparent; padding: 0; color: var(--ink-muted); font-size: 1rem; line-height: 1; }
  .download-job-dismiss:hover { background: rgba(255,255,255,.08); color: var(--ink); }
  .download-job-metric { grid-column: 1/-1; display: grid; gap: 4px; }
  .download-job-metric > span:first-child { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-muted); font-size: .63rem; }
  .download-job-metric b { color: var(--ink-soft); font-weight: 750; }
  .download-job-metric em { font-style: normal; }
  .download-job-metric small { color: var(--ink-muted); font-size: .61rem; }
  .download-job-track { display: block; height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.1); }
  .download-job-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--gold),#c6efff); transition: width 600ms var(--ease-out); }
  .ready-watch-metric .download-job-track i { background: linear-gradient(90deg,#67c9a7,#bceedd); }
  .progressive-play-button { grid-column: 1/-1; min-height: 34px; border: 1px solid rgba(111,207,181,.35); border-radius: 8px; background: rgba(111,207,181,.1); color: #c9f6e7; font-size: .68rem; font-weight: 800; }
  .progressive-play-button:hover { background: rgba(111,207,181,.17); }
  .progressive-download-button { border-color: rgba(111,207,181,.38) !important; color: #c9f6e7 !important; }
  .download-job[data-status="ready"] { border-color: rgba(111,207,181,.28); }
  .download-job[data-status="ready"] .download-job-status { color: var(--success); }
  .download-job[data-status="failed"] { border-color: rgba(255,128,118,.3); }
  .download-job[data-status="failed"] .download-job-status { color: #ff9a8f; }

  .cinema-hero { position: relative; isolation: isolate; min-height: clamp(420px, 52vh, 560px); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr); align-items: end; border: 1px solid rgba(242,240,234,.14); border-radius: var(--radius-xl); background: #0c0e0f; box-shadow: var(--shadow-lg); }
  .featured-backdrop { position: absolute; z-index: -3; inset: 0; background-position: center 23%; background-size: cover; transform: scale(1.035); filter: saturate(.42) contrast(1.14); }
  .cinema-hero::before { content: ""; position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(6,9,12,.97) 0%, rgba(6,9,12,.82) 38%, rgba(6,9,12,.24) 70%), linear-gradient(0deg, rgba(6,9,12,.95), transparent 56%); }
  .cinema-hero::after { content: ""; position: absolute; z-index: -1; inset: auto 0 0; height: 45%; background: linear-gradient(0deg, rgba(211,209,202,.1), transparent); }
  .hero-grain { position: absolute; inset: 0; z-index: -1; opacity: .13; pointer-events: none; background: repeating-radial-gradient(circle at 30% 40%, rgba(255,255,255,.13) 0 1px, transparent 1px 5px); background-size: 11px 13px; mix-blend-mode: soft-light; }
  .hero-copy { align-self: center; padding: clamp(34px, 6vw, 78px); }
  .hero-kicker { display: flex; align-items: center; gap: 9px; color: var(--gold); font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
  .hero-kicker span { width: 28px; height: 1px; background: var(--gold); }
  .hero-copy h2 { max-width: 700px; margin: 20px 0 16px; font-size: clamp(2.8rem, 5.4vw, 5.4rem); line-height: .92; text-wrap: balance; }
  .hero-copy h2 em { color: var(--gold-bright); font-weight: 400; }
  .featured-meta { color: #dad4c7; font-size: .78rem; font-weight: 800; letter-spacing: .11em; }
  .hero-copy > p { max-width: 620px; margin-top: 17px; color: #c8c6c0; font-size: clamp(.95rem, 1.3vw, 1.08rem); }
  .hero-copy > .featured-reason { margin-top: 9px; color: var(--gold); font-size: .72rem; font-weight: 700; letter-spacing: .035em; }
  .hero-actions { display: flex; gap: 11px; margin-top: 25px; }
  .hero-visual { align-self: end; padding: 0 clamp(24px, 4vw, 54px) 46px 0; }
  .featured-poster-rail { display: flex; align-items: end; justify-content: end; min-height: 290px; perspective: 1000px; }
  .featured-poster { width: clamp(125px, 12vw, 190px); aspect-ratio: 2/3; margin-left: -48px; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: var(--surface-solid); box-shadow: 0 22px 60px rgba(0,0,0,.62); transform: rotateY(-9deg) translateY(14px) scale(.9); opacity: .68; transition: transform var(--duration) var(--ease-out), opacity var(--duration), filter var(--duration); }
  .featured-poster:first-child { margin-left: 0; }
  .featured-poster.active { z-index: 4; transform: translateY(-12px) scale(1.08); opacity: 1; }
  .featured-poster img { width: 100%; height: 100%; object-fit: cover; }
  .hero-library-stat { display: flex; align-items: center; justify-content: end; gap: 12px; margin-top: 28px; }
  .hero-library-stat strong { color: var(--gold-bright); font: 400 2.3rem/1 Georgia, serif; }
  .hero-library-stat span { max-width: 120px; color: var(--ink-soft); font-size: .75rem; line-height: 1.25; }
  .hero-caption { display: flex; justify-content: space-between; margin-top: 17px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.16); color: var(--ink-soft); font-size: .72rem; }
  .hero-caption small { color: var(--gold); letter-spacing: .13em; }

  .mood-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  .mood-grid button { min-height: 104px; display: grid; align-content: center; gap: 2px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); text-align: left; padding: 15px; transition: transform var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast); }
  .mood-grid button:hover { transform: translateY(-4px); border-color: rgba(216,214,207,.35); }
  .mood-grid button.active { border-color: var(--gold); background: linear-gradient(145deg, rgba(216,214,207,.15), rgba(216,214,207,.035)); box-shadow: inset 0 0 25px rgba(216,214,207,.06); }
  .mood-grid button > span { color: var(--gold); font-size: 1.2rem; }
  .mood-grid strong { font-size: .86rem; }
  .mood-grid small { color: var(--ink-muted); font-size: .7rem; }
  .runtime-panel { margin-top: 14px; padding: 20px 24px 15px; }
  .runtime-panel output { color: var(--gold-bright); font-family: Georgia, serif; font-size: 1.25rem; }
  .runtime-panel input[type="range"] { width: 100%; height: 44px; min-height: 44px; margin: 8px 0 2px; padding: 0; border: 0; accent-color: var(--gold); background: linear-gradient(90deg, var(--blue), var(--gold), var(--gold-deep)) center / 100% 5px no-repeat; }
  .runtime-labels { display: flex; justify-content: space-between; color: var(--ink-muted); font-size: .72rem; }
  .intent-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 12px 28px; margin-bottom: 14px; padding: 15px 18px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.022); }
  .choice-group legend { margin-bottom: 7px; color: var(--ink-muted); font-size: .67rem; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
  .choice-group > div { display: flex; flex-wrap: wrap; gap: 7px; }
  .choice-chip { min-height: 44px; border: 1px solid var(--line); border-radius: 99px; background: rgba(255,255,255,.035); padding: 0 13px; color: var(--ink-soft); font-size: .75rem; font-weight: 750; transition: border-color var(--duration-fast),background var(--duration-fast),color var(--duration-fast); }
  .choice-chip:hover { border-color: var(--line-bright); color: var(--ink); }
  .choice-chip.active { border-color: rgba(244,242,237,.58); background: var(--ink); color: var(--canvas); }
  #discover > .preset-strip { margin: 0 0 14px; }
  #discover > .preset-strip:empty { display: none; }
  .discover-results-panel { margin: 22px 0 28px; padding: clamp(18px,2.3vw,28px); overflow: hidden; }
  .discover-results-heading { align-items: end; }
  .discover-results-heading h3 { font-size: clamp(1.7rem,3vw,2.5rem); }
  #discover-results-status { margin-top: 7px; color: var(--ink-muted); font-size: .76rem; }
  .discover-results-panel[aria-busy="true"] #discover-results-status { color: var(--gold); }
  .discovery-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px,190px); gap: 14px; min-height: 285px; overflow-x: auto; margin-top: 20px; padding: 2px 2px 16px; scroll-snap-type: x proximity; scrollbar-width: thin; }
  .discovery-rail .catalog-card { scroll-snap-align: start; }
  .discover-skeleton { aspect-ratio: 2/3; border-radius: 13px; background: linear-gradient(100deg,rgba(255,255,255,.035) 20%,rgba(255,255,255,.09) 40%,rgba(255,255,255,.035) 60%); background-size: 220% 100%; animation: shimmer 1.35s linear infinite; }
  .discover-results-panel > .empty-state { margin-top: 18px; padding-block: 42px; }
  .metric-card { position: relative; min-height: 150px; display: grid; align-content: end; padding: 19px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.025); }
  .metric-card.featured { background: linear-gradient(145deg, rgba(211,209,202,.14), rgba(255,255,255,.025)); }
  .metric-icon { position: absolute; top: 18px; left: 18px; color: #b3afb8; }
  .metric-icon.warm { color: #b8afa5; } .metric-icon.cool { color: var(--blue); } .metric-icon.gold { color: var(--gold); }
  .metric-card > strong { font: 400 2.45rem/1 Georgia, serif; }
  .metric-card p { margin-top: 6px; font-weight: 750; }
  .metric-card small { color: var(--ink-muted); font-size: .72rem; }
  .latest-panel { padding: 22px; content-visibility: auto; contain-intrinsic-size: 420px; }
  .latest-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 11px; margin-top: 19px; }
  .latest-item { min-width: 0; }
  .latest-item img, .latest-placeholder { width: 100%; aspect-ratio: 2/3; border-radius: 9px; object-fit: cover; background: var(--surface-raised); }
  .latest-item strong { display: block; overflow: hidden; margin-top: 8px; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
  .latest-item small { color: var(--ink-muted); font-size: .7rem; }
  .library-shelf { min-width: 0; max-width: 100%; margin-bottom: 22px; padding: 20px 0 6px; }
  .shelf-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
  .shelf-heading h3 { margin-top: 4px; }
  .shelf-heading-tools { display:flex; align-items:center; justify-content:end; gap:9px; flex:0 0 auto; }
  .rail-controls { display:flex; align-items:center; gap:5px; }
  .rail-button { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--line-bright); border-radius:50%; background:rgba(255,255,255,.045); color:var(--ink); padding:0 0 2px; font:700 1.35rem/1 Georgia,serif; box-shadow:0 6px 18px rgba(0,0,0,.18); }
  .rail-button:hover,.rail-button:focus-visible { border-color:var(--gold); background:rgba(216,214,207,.1); color:var(--gold-bright); transform:translateY(-1px); }
  .continue-rail { display: grid; width:100%; max-width:100%; grid-auto-flow: column; grid-auto-columns: minmax(220px, 280px); gap: 13px; overflow-x: auto; overscroll-behavior-inline:contain; padding: 2px 2px 14px; scroll-behavior:smooth; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color:var(--line-bright) transparent; }
  .suggestion-section { margin-top: 2px; }
  .suggestion-rail { display:grid; width:100%; max-width:100%; grid-auto-flow:column; grid-auto-columns:minmax(290px,340px); gap:12px; overflow-x:auto; overscroll-behavior-inline:contain; padding:2px 2px 14px; scroll-behavior:smooth; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:var(--line-bright) transparent; }
  .suggestion-card { min-width:0; display:grid; grid-template-columns:92px minmax(0,1fr); gap:13px; min-height:152px; padding:11px; border:1px solid var(--line); border-radius:15px; background:linear-gradient(135deg,rgba(216,214,207,.075),rgba(255,255,255,.018)); box-shadow:var(--shadow-sm); scroll-snap-align:start; }
  .suggestion-poster { width:92px; height:138px; overflow:hidden; border:0; border-radius:9px; padding:0; background:var(--surface-raised); }
  .suggestion-poster img,.suggestion-poster>.latest-placeholder { width:100%; height:100%; aspect-ratio:auto; object-fit:cover; border-radius:inherit; }
  .suggestion-copy { min-width:0; display:grid; align-content:center; gap:5px; }
  .suggestion-copy>strong { overflow:hidden; color:var(--ink); font:700 1rem/1.2 var(--sans); text-overflow:ellipsis; white-space:nowrap; }
  .suggestion-copy>small { color:var(--ink-muted); }
  .suggestion-sender { display:flex; align-items:center; gap:7px; overflow:hidden; color:var(--ink-soft); font-size:.68rem; text-overflow:ellipsis; white-space:nowrap; }
  .suggestion-sender i,.suggestion-profile>i { flex:0 0 auto; width:25px; height:25px; display:grid; place-items:center; border-radius:50%; color:#080a0d; background:var(--suggestion-color,var(--profile-color,#c8c5bd)); font-style:normal; font-size:.66rem; font-weight:850; }
  .suggestion-actions { display:flex; align-items:center; gap:7px; margin-top:5px; }
  .suggestion-actions button { min-height:34px; padding:0 10px; }
  .continue-card { min-width: 0; scroll-snap-align: start; }
  .continue-art { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-raised); padding: 0; box-shadow: var(--shadow-md); }
  .continue-art img,.continue-art>.latest-placeholder { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; transition: transform var(--duration) var(--ease-out),filter var(--duration); }
  .continue-art::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(2,3,3,.78),transparent 60%); }
  .continue-art:hover img { transform: scale(1.045); filter: brightness(.75); }
  .continue-play { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; margin: auto; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: rgba(5,6,6,.72); opacity: 0; transform: scale(.82); transition: opacity var(--duration-fast),transform var(--duration-fast); }
  .continue-art:hover .continue-play,.continue-art:focus-visible .continue-play { opacity:1; transform:scale(1); }
  .continue-progress,.poster-progress { position:absolute; z-index:3; right:0; bottom:0; left:0; height:4px; background:rgba(255,255,255,.15); }
  .continue-progress i,.poster-progress i { display:block; height:100%; background:linear-gradient(90deg,#8c8d88,var(--ink)); box-shadow:0 0 12px rgba(255,255,255,.32); }
  .continue-card>div { display:grid; margin-top:9px; }.continue-card strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.83rem; }.continue-card small { overflow:hidden; color:var(--ink-soft); text-overflow:ellipsis; white-space:nowrap; font-size:.7rem; }
  .continue-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; }
  .continue-actions>span { color:var(--ink-muted); font-size:.68rem; }
  .continue-cast-button { min-height:30px; padding:0 10px; }
  .smart-shelves { display:grid; min-width:0; max-width:100%; gap:6px; margin-bottom:10px; }
  .catalog-view { padding-top: 0; }
  .library-collections-callout { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:24px; padding:22px; }
  .library-collections-callout h3 { margin:5px 0 7px; }
  .library-collections-callout p:last-child { color:var(--ink-soft); }
  .shelf-poster-rail { display:grid; width:100%; max-width:100%; grid-auto-flow:column; grid-auto-columns:minmax(150px,180px); gap:12px; overflow-x:auto; overscroll-behavior-inline:contain; padding:2px 2px 16px; scroll-behavior:smooth; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:var(--line-bright) transparent; }
  .shelf-poster-rail .catalog-card { scroll-snap-align:start; }

  .filter-panel { position: sticky; z-index: 20; top: 92px; margin-bottom: 22px; padding: 15px; backdrop-filter: blur(22px); }
  .filter-panel.is-querying { border-color: rgba(210,181,111,.38); box-shadow: 0 14px 38px rgba(0,0,0,.26), inset 0 0 0 1px rgba(210,181,111,.06); }
  .filter-bar { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(130px, .55fr)); gap: 9px; }
  .search-field { position: relative; }
  .search-field > .search-icon { position: absolute; z-index: 1; left: 14px; top: 12px; color: var(--ink-muted); }
  .search-field input { width: 100%; padding-right: 42px; padding-left: 38px; }
  .search-indicator { position:absolute; z-index:1; top:50%; right:14px; width:14px; height:14px; margin-top:-7px; border:2px solid transparent; border-radius:50%; opacity:0; transition:opacity 120ms ease; pointer-events:none; }
  .filter-panel.is-querying .search-indicator { border-color:rgba(210,181,111,.24); border-top-color:var(--gold-bright); opacity:1; animation:spin 680ms linear infinite; }
  .search-suggestions { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin:10px 1px 0; color:var(--ink-muted); font-size:.68rem; }.search-suggestions button { min-height:28px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.025); padding:0 10px; color:var(--ink-soft); font-size:.68rem; }.search-suggestions button:hover { border-color:var(--line-bright); color:var(--ink); }
  .catalog-query-status { display:flex; align-items:center; gap:7px; min-height:20px; margin:8px 2px -2px; color:var(--ink-muted); font-size:.68rem; letter-spacing:.02em; }
  .catalog-query-status strong { color:var(--ink-soft); font-size:inherit; font-weight:700; }
  .query-spinner { width:7px; height:7px; margin:2px; border:0; border-radius:50%; background:#8ed2b3; opacity:.72; }
  .filter-panel.is-querying .query-spinner { width:11px; height:11px; margin:0; border:2px solid rgba(210,181,111,.24); border-top-color:var(--gold-bright); background:transparent; opacity:1; animation:spin 680ms linear infinite; }
  .discovery-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 9px; margin-top: 10px; }
  .discovery-controls label { min-width: 140px; }
  .mobile-filter-bar { display: none; }
  .preset-strip { display: flex; gap: 7px; overflow-x: auto; margin-top: 12px; scrollbar-width: thin; }
  .preset-chip { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; min-height: 32px; border: 1px solid var(--line); border-radius: 99px; background: rgba(255,255,255,.03); padding: 0 9px 0 12px; color: var(--ink-soft); font-size: .73rem; }
  .preset-chip:hover { border-color: rgba(216,214,207,.4); color: var(--ink); }
  .preset-chip .delete-preset { border: 0; background: transparent; color: var(--ink-muted); padding: 2px; }
  .catalog-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 20px); }
  .catalog-grid.is-updating { opacity: .72; transition: opacity 120ms ease; }
  .catalog-card { position: relative; min-width: 0; content-visibility: auto; contain-intrinsic-size: 210px 360px; }
  .poster-frame { position: relative; overflow: hidden; aspect-ratio: 2/3; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-raised); box-shadow: 0 14px 34px rgba(0,0,0,.26); }
  .poster-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out), filter var(--duration); }
  .catalog-card:hover .poster-frame img { transform: scale(1.055); filter: brightness(.72); }
  .poster-actions { position: absolute; z-index:8; inset: auto 9px 9px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap: 6px; opacity: 0; transform: translateY(8px); transition: opacity var(--duration), transform var(--duration) var(--ease-out); }
  .catalog-card:hover .poster-actions, .catalog-card:focus-within .poster-actions { opacity: 1; transform: none; }
  .poster-actions button { min-width:0; min-height: 36px; overflow:hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; background: rgba(8,10,13,.9); padding:0 5px; backdrop-filter: blur(10px); font-size: .68rem; font-weight: 750; text-overflow:ellipsis; white-space:nowrap; }
  .poster-actions button:hover { border-color: var(--gold); color: var(--gold-bright); }
  .poster-badge { position: absolute; top: 9px; left: 9px; border-radius: 7px; background: rgba(7,9,12,.76); padding: 4px 7px; color: #efede8; font-size: .7rem; font-weight: 800; backdrop-filter: blur(8px); }
  .rating-badge { left: auto; right: 9px; color: var(--gold-bright); }
  .watched-badge { position:absolute; z-index:5; left:9px; bottom:9px; display:grid; place-items:center; width:25px; height:25px; border:1px solid rgba(255,255,255,.3); border-radius:50%; background:rgba(5,6,6,.78); color:var(--ink); font-size:.7rem; backdrop-filter:blur(8px); }
  .technical-badges { position:absolute; z-index:4; right:8px; bottom:8px; display:flex; justify-content:end; gap:4px; max-width:75%; pointer-events:none; transition:opacity var(--duration-fast); }.catalog-card:hover .technical-badges,.catalog-card:focus-within .technical-badges { opacity:0; }.technical-badges span,.player-technical span { border:1px solid rgba(255,255,255,.2); border-radius:5px; background:rgba(5,6,6,.78); padding:3px 5px; color:#f4f2ed; font-size:.55rem; font-weight:800; letter-spacing:.04em; backdrop-filter:blur(8px); }
  .player-technical { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }.player-technical span { position:static; padding:5px 8px; font-size:.65rem; }
  .player-quality-control { display:flex; align-items:center; gap:8px; width:max-content; margin-top:10px; color:var(--ink-muted); font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
  .player-quality-control.hidden { display:none; }
  .player-quality-control select { min-width:112px; border:1px solid var(--line-bright); border-radius:8px; background:#11161a; padding:7px 28px 7px 9px; color:var(--ink); font:inherit; text-transform:none; }
  .player-audio-control { max-width:100%; }
  .player-audio-control select { min-width:0; max-width:min(420px,calc(100vw - 110px)); text-overflow:ellipsis; }
  .player-audio-control select:disabled { opacity:.7; }
  .player-audio-note { margin:7px 0 0; color:var(--ink-muted); font-size:.7rem; line-height:1.5; }
  .player-up-next { margin:12px 0 0; color:var(--gold-bright); font-size:.82rem; letter-spacing:.02em; }
  body:not(.parents-guide-profile-active) .parents-guide-owner-only { display: none !important; }
  .parents-guide-range-filter { flex:1 1 360px; min-width:min(100%,360px); }
  .parents-guide-range-filter legend { margin-bottom:7px; }
  .parents-guide-range-controls { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:end; gap:7px; }
  .parents-guide-range-controls label { min-width:0; color:var(--ink-muted); font-size:.68rem; }
  .parents-guide-range-controls select { width:100%; min-width:0; }
  .parents-guide-range-separator { padding-bottom:14px; color:var(--ink-muted); font-size:.7rem; }
  .parental-guide-enrichment-status { flex:1 1 100%; margin:0; color:var(--ink-muted); font-size:.75rem; }
  .parents-guide-card-badge { position:absolute; z-index:5; top:40px; left:9px; border:1px solid rgba(216,214,207,.32); border-radius:7px; background:rgba(7,9,12,.82); padding:4px 7px; color:#eee9dd; font-size:.62rem; font-weight:850; letter-spacing:.04em; backdrop-filter:blur(8px); }
  .card-copy { padding: 10px 2px 0; }
  .card-title-button { width: 100%; overflow: hidden; border: 0; background: transparent; padding: 0; color: var(--ink); text-align: left; text-overflow: ellipsis; white-space: nowrap; font-weight: 750; }
  .card-title-button:hover { color: var(--gold-bright); }
  .recommendation-reason { display:-webkit-box; overflow:hidden; margin-top:5px; color:var(--ink-muted); font-size:.63rem; line-height:1.35; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .card-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 3px; color: var(--ink-muted); font-size: .7rem; }
  .collection-button { position: absolute; z-index: 3; top: 42px; right: 9px; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(7,9,12,.74); opacity: 0; }
  .catalog-card:hover .collection-button, .catalog-card:focus-within .collection-button { opacity: 1; }
  .skeleton-grid span { aspect-ratio: 2/3; border-radius: 13px; background: linear-gradient(100deg, rgba(255,255,255,.035) 20%, rgba(255,255,255,.09) 40%, rgba(255,255,255,.035) 60%); background-size: 220% 100%; }
  .empty-state { grid-column: 1/-1; display: grid; justify-items: center; gap: 8px; padding: 70px 20px; border: 1px dashed var(--line-bright); border-radius: var(--radius-lg); color: var(--ink-soft); text-align: center; }
  .empty-state h3 { color: var(--ink); }
  .empty-reel { color: var(--gold); font-size: 3rem; }
  .load-more { display: block; margin: 28px auto 0; }

  .inline-create { display: grid; grid-template-columns: 1fr 1.4fr auto auto; align-items: end; gap: 10px; margin-bottom: 18px; padding: 18px; }
  .collection-list { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
  .collection-tile { min-height: 150px; display: grid; align-content: space-between; border: 1px solid var(--line); border-radius: 16px; background: radial-gradient(circle at 90% 0%, rgba(216,214,207,.1), transparent 50%), var(--surface); padding: 18px; text-align: left; transition: transform var(--duration-fast), border-color var(--duration-fast); }
  .collection-tile:hover, .collection-tile.active { transform: translateY(-3px); border-color: rgba(216,214,207,.46); }
  .collection-tile strong { font: 400 1.45rem Georgia, serif; }
  .collection-tile p { color: var(--ink-muted); font-size: .76rem; }
  .collection-tile small { color: var(--gold); }
  .collection-content-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin: 34px 0 18px; }
  .collection-content-heading h3 { margin-top: 5px; }
  .collection-content-heading > p { color: var(--ink-muted); }

  .scan-form, .activity-panel, .history-panel, .source-form, .download-flow-panel { padding: clamp(18px, 3vw, 28px); }
  .scan-form { display: grid; gap: 18px; }
  .field-grid { display: grid; gap: 11px; }
  .field-grid.two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toggle-row { display: flex; gap: 9px; }
  .check-pill { display: block; }
  .check-pill input { position: absolute; opacity: 0; pointer-events: none; }
  .check-pill span { display: block; min-width: 115px; border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; background: rgba(255,255,255,.03); text-align: center; }
  .check-pill input:checked + span { border-color: rgba(216,214,207,.52); background: rgba(216,214,207,.1); color: var(--gold-bright); }
  .check-line { display: flex; grid-template-columns: none; align-items: center; gap: 9px; }
  .check-line input { min-height: auto; accent-color: var(--gold); }
  .advanced-settings { border: 1px solid var(--line); border-radius: 12px; padding: 13px; }
  .advanced-settings summary { color: var(--ink-soft); font-weight: 750; }
  .advanced-settings[open] summary { margin-bottom: 15px; color: var(--ink); }
  .form-actions { display: flex; gap: 9px; }
  .form-error { border: 1px solid rgba(255,128,118,.3); border-radius: 10px; background: rgba(255,128,118,.08); padding: 10px 12px; color: #ffb0aa; font-size: .8rem; }
  .muted-chip { border: 1px solid var(--line); border-radius: 99px; padding: 6px 10px; color: var(--ink-muted); font-size: .7rem; }
  .scan-progress { display: grid; gap: 11px; margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
  .scan-progress-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink-soft); font-size: .78rem; }
  .scan-progress-heading strong { color: var(--gold); font-variant-numeric: tabular-nums; }
  .scan-progress-track { height: 7px; overflow: hidden; border-radius: 99px; background: #080a0d; }
  .scan-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), #f0d391); transition: width 260ms var(--ease-out); }
  .scan-counter-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
  .scan-counter-grid > span { display: grid; gap: 2px; min-width: 0; }
  .scan-counter-grid strong { color: var(--ink); font-size: .9rem; font-variant-numeric: tabular-nums; }
  .scan-counter-grid small { overflow: hidden; color: var(--ink-muted); font-size: .62rem; text-overflow: ellipsis; }
  .scan-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
  .scan-reasons:empty { display: none; }
  .scan-reasons span { border: 1px solid var(--line); border-radius: 99px; padding: 4px 8px; color: var(--ink-muted); font-size: .62rem; }
  .activity-log { height: 485px; overflow: auto; margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; background: #080a0d; padding: 13px; font: .74rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; scrollbar-width: thin; }
  .log-line { display: grid; grid-template-columns: 68px 1fr; gap: 10px; padding: 5px 0; color: var(--ink-soft); }
  .log-line time { color: var(--ink-muted); }
  .log-line.error { color: var(--danger); } .log-line.success { color: var(--success); } .log-line.warning { color: var(--gold); }
  .scan-history { display: grid; gap: 7px; margin-top: 14px; }
  .scan-history-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; border-top: 1px solid var(--line); padding-top: 9px; color: var(--ink-soft); font-size: .7rem; }
  .scan-history-row span:last-child { color: var(--ink-muted); text-align: right; }
  .history-panel { margin-top: 18px; }
  .history-list { display: grid; margin-top: 17px; }
  .history-row { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; padding: 13px 2px; border-top: 1px solid var(--line); }
  .history-row:first-child { border-top: 0; }
  .history-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(216,214,207,.08); color: var(--gold); }
  .history-row strong { display: block; }
  .history-row small, .history-row time { color: var(--ink-muted); font-size: .72rem; }
  .source-form { display: grid; gap: 18px; }
  .authorization-check { border: 1px solid rgba(216,214,207,.2); border-radius: 11px; background: rgba(216,214,207,.045); padding: 12px; }
  .download-flow { display: grid; gap: 17px; margin: 22px 0; padding: 0; list-style: none; }
  .download-flow li { display: grid; grid-template-columns: 38px 1fr; gap: 10px; }
  .download-flow li > span { color: var(--gold); font: 400 1.05rem Georgia, serif; }
  .download-flow strong { display: block; }
  .download-flow small, .settings-privacy { color: var(--ink-muted); font-size: .75rem; }
  .rule-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(112,214,164,.1); color: var(--success); }
  .media-library-form { display: grid; gap: 18px; margin-top: 18px; padding: clamp(18px, 3vw, 28px); }
  .folder-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .folder-input-row input { min-width: 0; color: var(--ink-soft); cursor: default; }
  .folder-input-row button { white-space: nowrap; }
  .organizer-result { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 11px; border-top: 1px solid var(--line); padding-top: 16px; color: var(--ink-soft); }
  .organizer-result strong, .organizer-result small { display: block; }
  .organizer-result small { margin-top: 3px; color: var(--ink-muted); }
  .admin-intro { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:15px; padding:18px 20px; }
  .admin-intro strong { display:block; margin-bottom:4px; }
  .admin-intro p,.admin-policy-note { margin:0; color:var(--ink-muted); font-size:.76rem; line-height:1.55; }
  .admin-metrics { margin-top:18px; }
  .admin-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); gap:18px; align-items:start; }
  .admin-grid>*,.admin-health-panel { padding:clamp(18px,3vw,28px); }
  .admin-policy-note { border-left:2px solid rgba(235,190,105,.42); padding-left:12px; }
  .admin-settings-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr); gap:18px; margin-top:18px; align-items:start; }
  .admin-settings-grid>form { display:grid; gap:18px; padding:clamp(18px,3vw,28px); }
  .admin-source-list { display:grid; gap:14px; }
  .admin-source-card { display:grid; gap:14px; min-width:0; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.022); padding:15px; }
  .admin-source-card legend { color:var(--ink-soft); font:400 1rem Georgia,serif; padding:0 7px; }
  .admin-source-card legend span { display:inline-grid; place-items:center; width:24px; height:24px; margin-right:7px; border-radius:50%; background:rgba(235,190,105,.12); color:var(--gold); font:.68rem Inter,sans-serif; }
  .admin-source-card code { color:var(--gold-soft); }
  .admin-source-toggles { display:grid; gap:8px; }
  .admin-source-toggles .check-line { min-height:44px; }
  .admin-source-health { margin:0; border-radius:9px; background:rgba(255,255,255,.035); padding:9px 11px; color:var(--ink-muted); font-size:.72rem; line-height:1.45; }
  .admin-source-health[data-state="available"] { background:rgba(99,190,151,.09); color:#9dd8bd; }
  .admin-source-health[data-state="manual-verification"] { background:rgba(235,190,105,.1); color:var(--gold-soft); }
  .admin-scan-schedule { display:grid; gap:13px; border:1px solid var(--line); border-radius:13px; padding:15px; }
  .admin-scan-schedule legend { padding:0 7px; color:var(--ink-soft); }
  .admin-scan-schedule>small { color:var(--ink-muted); }
  .storage-eviction-toggle { align-items:flex-start; border:1px solid var(--line); border-radius:11px; padding:12px; }
  .storage-eviction-toggle input { margin-top:2px; }
  .storage-eviction-toggle span,.storage-eviction-toggle small { display:block; }
  .storage-eviction-toggle small { margin-top:4px; color:var(--ink-muted); font-size:.68rem; line-height:1.45; }
  .admin-queue-panel { display:grid; gap:16px; }
  .admin-warm-health { border:1px solid var(--line); border-radius:11px; padding:13px; background:rgba(255,255,255,.025); }
  .admin-warm-health.needs-attention { border-color:rgba(235,190,105,.48); background:rgba(235,190,105,.065); }
  .admin-warm-health.is-healthy { border-color:rgba(112,214,164,.36); background:rgba(112,214,164,.045); }
  .admin-counts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .admin-counts>span { border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.025); padding:11px; }
  .admin-counts strong,.admin-counts small { display:block; }
  .admin-counts strong { font-size:1.15rem; }
  .admin-counts small { margin-top:2px; color:var(--ink-muted); }
  .admin-health-panel { margin-top:18px; }
  .admin-preparation-list { display:grid; gap:8px; margin-top:18px; }
  .admin-preparation-row { display:grid; grid-template-columns:12px minmax(0,1fr) auto; gap:12px; align-items:center; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.02); padding:12px; }
  .admin-status-mark { width:9px; height:9px; border-radius:50%; background:var(--ink-muted); box-shadow:0 0 0 4px rgba(255,255,255,.035); }
  .admin-preparation-row.status-ready .admin-status-mark,.admin-preparation-row.status-warm .admin-status-mark { background:var(--success); }
  .admin-preparation-row.status-resolving .admin-status-mark,.admin-preparation-row.status-warming .admin-status-mark { background:var(--gold); animation:pulse 1.8s ease-in-out infinite; }
  .admin-preparation-row.status-unavailable .admin-status-mark,.admin-preparation-row.status-failed .admin-status-mark { background:var(--danger); }
  .admin-preparation-row strong,.admin-preparation-row small { display:block; }
  .admin-preparation-row small { margin-top:3px; color:var(--ink-muted); }
  .admin-preparation-row p { margin:6px 0 0; color:#f0b2aa; font-size:.7rem; line-height:1.4; }
  .admin-playback-speed-panel { display:grid; gap:20px; margin-top:18px; padding:clamp(18px,3vw,28px); }
  .admin-playback-speed-heading { align-items:flex-start; }
  .playback-speed-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; align-items:end; }
  .playback-speed-filters label { display:grid; gap:6px; color:var(--ink-muted); font-size:.68rem; }
  .playback-speed-filters select { width:100%; min-height:42px; }
  .playback-approximate-toggle { grid-column:1/-1; min-height:44px; display:flex!important; align-items:center; }
  .playback-speed-stats { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; }
  .playback-speed-stats>span { min-height:88px; display:grid; align-content:center; gap:4px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.025); padding:13px; }
  .playback-speed-stats strong { font:400 clamp(1.35rem,2.5vw,2rem)/1 Georgia,serif; }
  .playback-speed-stats small { color:var(--ink-muted); font-size:.67rem; }
  .playback-acceptance-section { border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.018); padding:15px; }
  .playback-acceptance-copy { margin:0 0 13px; color:var(--ink-soft); font-size:.75rem; line-height:1.55; }
  .playback-acceptance-gates { display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:10px; }
  .playback-acceptance-card { display:grid; gap:7px; min-height:145px; align-content:center; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.025); padding:14px; }
  .playback-acceptance-card strong,.playback-acceptance-card small,.playback-acceptance-card span { display:block; }
  .playback-acceptance-card strong { font:400 1.18rem/1.1 Georgia,serif; }
  .playback-acceptance-card small,.playback-acceptance-card span { color:var(--ink-muted); font-size:.67rem; line-height:1.4; }
  .playback-acceptance-card progress { width:100%; height:8px; accent-color:var(--gold); }
  .playback-acceptance-card.status-pass,.acceptance-status.status-pass { border-color:rgba(105,210,173,.48); }
  .playback-acceptance-card.status-pass progress { accent-color:#69d2ad; }
  .playback-acceptance-card.status-fail,.acceptance-status.status-fail { border-color:rgba(212,123,105,.58); }
  .playback-acceptance-card.status-fail progress { accent-color:#d47b69; }
  .playback-cohort-section { border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.018); padding:15px; }
  .playback-cohort-comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .playback-cohort-card { display:grid; gap:5px; min-height:100px; align-content:center; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.025); padding:14px; }
  .playback-cohort-card strong,.playback-cohort-card small { display:block; }
  .playback-cohort-card strong { font:400 1.25rem/1.1 Georgia,serif; }
  .playback-cohort-card small { color:var(--ink-muted); line-height:1.45; }
  .playback-cohort-card.needs-sample { border-color:rgba(235,190,105,.42); background:rgba(235,190,105,.055); }
  .playback-spectrum { min-height:260px; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,.01)); padding:12px; }
  .playback-spectrum svg { display:block; width:100%; height:auto; min-height:230px; }
  .playback-spectrum .spectrum-grid { stroke:rgba(255,255,255,.08); stroke-width:1; }
  .playback-spectrum .spectrum-label { fill:var(--ink-muted); font:12px "Bahnschrift Light","Avenir Next",sans-serif; }
  .playback-spectrum .spectrum-value { fill:var(--ink); font:700 13px "Bahnschrift Light","Avenir Next",sans-serif; }
  .playback-spectrum-table-wrap { overflow-x:auto; }
  .playback-spectrum-table { width:100%; border-collapse:collapse; font-size:.72rem; }
  .playback-spectrum-table th,.playback-spectrum-table td { border-bottom:1px solid var(--line); padding:8px 10px; text-align:left; }
  .playback-spectrum-table th { color:var(--ink-muted); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; }
  .playback-speed-details { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); gap:16px; }
  .playback-speed-details>section { min-width:0; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.018); padding:15px; }
  .compact-heading { margin-bottom:12px; }
  .compact-heading h4 { margin:2px 0 0; font-size:1rem; }
  .playback-waterfall { display:flex; min-height:92px; overflow:hidden; border-radius:10px; background:rgba(0,0,0,.24); }
  .playback-waterfall-segment { min-width:18px; display:flex; flex-direction:column; justify-content:flex-end; gap:3px; padding:9px 7px; color:#07100e; overflow:hidden; }
  .playback-waterfall-segment strong,.playback-waterfall-segment small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .playback-waterfall-segment strong { font-size:.66rem; }
  .playback-waterfall-segment small { font-size:.58rem; opacity:.72; }
  .playback-speed-details .organizer-result { margin-top:8px; }

  .modal-overlay { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; overflow: auto; padding: 28px; background: rgba(2,4,6,.78); backdrop-filter: blur(20px); }
  .modal-shell { position: relative; width: min(1120px, 96vw); max-height: 92vh; overflow: auto; border: 1px solid var(--line-bright); border-radius: 22px; background: #0e1217; box-shadow: 0 40px 120px rgba(0,0,0,.7); scrollbar-width: thin; }
  .compact-modal { width: min(520px, 94vw); padding: 28px; }
  .household-shell { width: min(840px, 96vw); padding: clamp(24px,4vw,38px); }
  .household-heading { max-width: 650px; padding-right: 44px; }
  .household-heading h2 { margin: 4px 0 8px; font: 400 clamp(2rem,4vw,3rem)/1.05 Georgia,serif; }
  .household-heading > p:last-child { color: var(--ink-soft); }
  .capacity-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 24px 0; }
  .capacity-card { display: grid; gap: 3px; min-height: 104px; align-content: center; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.03); padding: 15px; }
  .capacity-card small { color: var(--ink-muted); text-transform: uppercase; letter-spacing: .08em; font-size: .65rem; }
  .capacity-card strong { font: 400 1.8rem Georgia,serif; }
  .capacity-card span { color: var(--ink-soft); font-size: .75rem; }
  .household-section { margin-top: 24px; }
  .household-list { display: grid; gap: 9px; margin-top: 12px; }
  .household-list .modal-loading { min-height: 120px; }
  .household-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); padding: 13px 14px; }
  .household-row strong,.household-row small { display: block; }
  .household-row small { margin-top: 3px; color: var(--ink-muted); }
  .household-row-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
  .household-row-meta span { border: 1px solid var(--line); border-radius: 99px; padding: 3px 7px; color: var(--ink-soft); font-size: .66rem; }
  .household-row > .secondary-button { min-width: 104px; }
  .household-current { border-color: rgba(111,207,181,.35); background: rgba(111,207,181,.04); }
  .household-danger { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 26px; border-top: 1px solid var(--line); padding-top: 20px; }
  .household-danger p { margin-top: 4px; color: var(--ink-muted); font-size: .76rem; }
  .household-empty { border: 1px dashed var(--line); border-radius: 13px; padding: 18px; color: var(--ink-muted); text-align: center; }
  .modal-close { position: absolute; z-index: 4; top: 14px; right: 14px; width: 44px; height: 44px; border: 1px solid var(--line-bright); border-radius: 50%; background: rgba(7,9,12,.72); font-size: 1.35rem; }
  .modal-loading { min-height: 420px; display: grid; place-items: center; align-content: center; gap: 9px; color: var(--ink-soft); }
  .player-shell { display: flex; flex-direction: column; width: min(1180px, 96vw); max-height: min(92dvh, calc(100dvh - 56px)); overflow: hidden; background: #080a0d; }
  .player-shell.is-preparing video { height: 100%; min-height: 0; opacity:.34; background:radial-gradient(circle at center,rgba(111,207,181,.13),transparent 35%),#030405; }
  .player-heading { flex: 0 0 auto; padding: 25px 72px 18px 25px; }
  .player-heading h2 { margin-top: 4px; font-size: clamp(1.6rem, 3vw, 2.5rem); }
  .player-heading .form-error { margin-top: 12px; }
  .player-progressive-status { display: grid; gap: 3px; margin-top: 11px; border: 1px solid rgba(111,207,181,.26); border-radius: 9px; background: rgba(111,207,181,.08); padding: 9px 11px; color: #c9f6e7; font-size: .72rem; }
  .player-progressive-status span { color: var(--ink-muted); font-size: .65rem; }
  .player-progressive-status.is-waiting { border-color: rgba(235,190,105,.35); background: rgba(235,190,105,.1); color: #f3d89b; }
  .player-audio-help { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding: 10px 12px; border: 1px solid rgba(216,214,207,.28); border-radius: 10px; background: rgba(216,214,207,.065); color: var(--ink-soft); font-size: .8rem; }
  .player-audio-help.hidden { display: none; }
  .player-audio-help .secondary-button { flex: 0 0 auto; }
  .player-stage { position: relative; isolation: isolate; flex: 1 1 auto; min-height: 0; overflow: hidden; aspect-ratio: 16 / 9; background: #000; }
  #player-video { display: block; width: 100%; height: 100%; max-height: none; object-fit: contain; background: #000; }
  .player-controls { position: absolute; z-index: 3; inset: auto 0 0; display: grid; gap: 9px; padding: 54px clamp(14px,2.4vw,26px) 14px; color: #fff; background: linear-gradient(0deg,rgba(0,0,0,.96),rgba(0,0,0,.76) 58%,transparent); opacity: 1; visibility: visible; transition: opacity var(--duration-fast),visibility var(--duration-fast); }
  .player-seek-control { display: block; width: 100%; }
  .player-seek-control input,.player-volume-control input { width: 100%; min-height: 28px; margin: 0; padding: 0; border: 0; accent-color: #f4f2eb; cursor: pointer; }
  .player-seek-control input { --player-played: 0%; --player-available: 0%; appearance: none; height: 28px; background: linear-gradient(90deg,#f4f2eb 0 var(--player-played),rgba(255,255,255,.46) var(--player-played) var(--player-available),rgba(255,255,255,.2) var(--player-available) 100%) center / 100% 5px no-repeat; }
  .player-seek-control input::-webkit-slider-runnable-track,.player-volume-control input::-webkit-slider-runnable-track { height: 5px; border-radius: 99px; background: transparent; }
  .player-seek-control input::-moz-range-track,.player-volume-control input::-moz-range-track { height: 5px; border-radius: 99px; background: rgba(255,255,255,.28); }
  .player-seek-control input::-moz-range-progress { height: 5px; border-radius: 99px; background: #f4f2eb; }
  .player-seek-control input::-webkit-slider-thumb,.player-volume-control input::-webkit-slider-thumb { width: 17px; height: 17px; margin-top: -6px; appearance: none; border: 2px solid #07090b; border-radius: 50%; background: #fff; box-shadow: 0 1px 8px rgba(0,0,0,.65); }
  .player-seek-control input::-moz-range-thumb,.player-volume-control input::-moz-range-thumb { width: 15px; height: 15px; border: 2px solid #07090b; border-radius: 50%; background: #fff; box-shadow: 0 1px 8px rgba(0,0,0,.65); }
  .player-seek-control input:focus-visible,.player-volume-control input:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
  .player-seek-control input:disabled { cursor: wait; opacity: .45; }
  .player-control-row,.player-transport-controls,.player-display-controls,.player-volume-control,.player-volume-control label { display: flex; align-items: center; }
  .player-control-row { justify-content: space-between; gap: 18px; }
  .player-transport-controls,.player-display-controls { gap: 7px; }
  .player-control-button { display: grid; flex: 0 0 auto; place-items: center; min-width: 44px; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: rgba(8,10,13,.7); color: #fff; font-size: 1.08rem; line-height: 1; backdrop-filter: blur(8px); }
  .player-control-button:hover,.player-control-button:focus-visible { border-color: rgba(255,255,255,.72); background: rgba(255,255,255,.15); transform: scale(1.04); }
  .player-control-button:disabled { cursor: wait; opacity: .42; transform: none; }
  .player-play-toggle { background: #f2f0e9; color: #090b0d; }
  .player-cast-toggle.is-progressive { border-color: rgba(111,207,181,.62); color: #c9f6e7; box-shadow: inset 0 0 0 1px rgba(111,207,181,.14); }
  .player-skip-button { position: relative; }
  .player-skip-button span { font-size: 1.5rem; line-height: 1; }
  .player-skip-button small { position: absolute; inset: 16px 0 auto; font-size: .55rem; font-weight: 900; text-align: center; }
  .player-time { min-width: 112px; margin-left: 5px; color: #f4f2eb; font-size: .76rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .player-volume-control { gap: 3px; }
  .player-volume-control label { gap: 7px; width: clamp(105px,14vw,180px); }
  .player-volume-control input { --player-volume: 100%; appearance: none; height: 28px; background: linear-gradient(90deg,#fff 0 var(--player-volume),rgba(255,255,255,.25) var(--player-volume) 100%) center / 100% 5px no-repeat; }
  .player-volume-control output { width: 35px; color: rgba(255,255,255,.75); font-size: .65rem; font-variant-numeric: tabular-nums; text-align: right; }
  .player-shortcut-hint { color: rgba(255,255,255,.56); font-size: .61rem; letter-spacing: .02em; text-align: right; }
  .cast-progressive-note { margin: 18px clamp(20px,4vw,42px) 0; }
  .cast-device-card.is-download-locked { opacity: .58; }
  .cast-device-card.is-download-locked .cast-manual-label { color: #f3d89b; }
  .player-stage:fullscreen,.player-stage:-webkit-full-screen { width: 100vw; height: 100vh; background: #000; }
  .player-stage:fullscreen #player-video,.player-stage:-webkit-full-screen #player-video { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; }
  .player-stage:fullscreen .player-controls,.player-stage:-webkit-full-screen .player-controls { padding-right: max(28px,env(safe-area-inset-right)); padding-bottom: max(20px,env(safe-area-inset-bottom)); padding-left: max(28px,env(safe-area-inset-left)); }
  .player-stage:fullscreen.controls-hidden,.player-stage:-webkit-full-screen.controls-hidden { cursor: none; }
  .player-stage:fullscreen.controls-hidden .player-controls,.player-stage:-webkit-full-screen.controls-hidden .player-controls { opacity: 0; visibility: hidden; pointer-events: none; }
  .loader { width: 30px; height: 30px; border: 2px solid var(--line-bright); border-top-color: var(--gold); border-radius: 50%; }
  .guide-hero, .movie-detail-hero { min-height: 340px; display: grid; grid-template-columns: 210px 1fr; align-items: end; gap: 28px; padding: 60px 42px 34px; background-size: cover; background-position: center; box-shadow: inset 0 -180px 140px #0e1217, inset 180px 0 180px rgba(14,18,23,.78); }
  .guide-hero img, .movie-detail-hero img { width: 100%; border-radius: 12px; box-shadow: var(--shadow-lg); }
  .guide-hero-copy h2, .movie-detail-copy h2 { font-size: clamp(2.4rem, 5vw, 4.6rem); }
  .guide-hero-copy p, .movie-detail-copy p { max-width: 720px; margin-top: 12px; color: #c6c4bd; }
  .guide-facts, .movie-detail-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .guide-facts span, .movie-detail-meta span, .genre-chip, .language-chip { border: 1px solid var(--line); border-radius: 99px; background: rgba(255,255,255,.04); padding: 5px 9px; color: var(--ink-soft); font-size: .72rem; }
  .series-next { display:flex; align-items:center; justify-content:space-between; gap:18px; max-width:650px; margin-top:18px; padding:13px 14px; border:1px solid var(--line-bright); border-radius:13px; background:rgba(5,6,6,.58); backdrop-filter:blur(12px); }.series-next div { display:grid; }.series-next small { color:var(--ink-muted); }.series-next strong { font-size:.82rem; }
  .series-progress { display:grid; gap:6px; margin:10px 0 4px; }.series-progress>span,.episode-progress { display:block; overflow:hidden; width:100%; height:4px; border-radius:5px; background:rgba(255,255,255,.12); }.series-progress i,.episode-progress i { display:block; height:100%; background:linear-gradient(90deg,#797b77,var(--ink)); }.series-progress small { color:var(--ink-muted); font-size:.7rem; }
  .guide-body, .movie-detail-body { padding: 10px 42px 42px; }
  .season-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 15px 0; }
  .season-tab { flex: 0 0 auto; min-height: 38px; border: 1px solid var(--line); border-radius: 99px; background: rgba(255,255,255,.03); padding: 0 13px; }
  .season-tab.active { border-color: var(--gold); color: var(--gold-bright); }
  .episode-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 16px; }
  .episode-card { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); }
  .episode-card.is-watched { opacity:.74; }.episode-card.is-watched .episode-still { filter:grayscale(.65); }
  .episode-still { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--surface-raised); }
  .episode-copy { padding: 13px; }
  .episode-title-row { display: flex; justify-content: space-between; gap: 10px; }
  .episode-copy p { margin: 7px 0; color: var(--ink-soft); font-size: .78rem; }
  .download-button { min-height: 36px; border: 1px solid rgba(216,214,207,.35); border-radius: 9px; background: rgba(216,214,207,.08); color: var(--gold-bright); padding: 0 12px; font-size: .74rem; font-weight: 750; }
  .cast-button { min-height: 36px; border: 1px solid rgba(114,184,212,.36); border-radius: 9px; background: linear-gradient(135deg,rgba(114,184,212,.12),rgba(94,119,255,.08)); color: #bfe8f7; padding: 0 12px; font-size: .74rem; font-weight: 750; }
  .cast-button:hover { border-color: rgba(157,221,245,.72); box-shadow: 0 0 22px rgba(80,174,212,.16); transform: translateY(-1px); }
  .media-action-pair { display: flex; flex-wrap: wrap; gap: 8px; }
  .cast-shell { width: min(760px, 94vw); padding: clamp(24px,4vw,42px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; background: radial-gradient(circle at 14% 0%,rgba(85,107,116,.22),transparent 42%),radial-gradient(circle at 100% 100%,rgba(216,214,207,.08),transparent 40%),#090b0c; }
  .cast-heading { display: grid; grid-template-columns: 90px 1fr; gap: 22px; align-items: center; padding-right: 34px; }
  .cast-heading h2 { margin: 3px 0 7px; font: 400 clamp(1.7rem,4vw,2.55rem)/1.05 Georgia,serif; }
  .cast-heading h2 span { color: var(--gold-bright); }
  .cast-heading p { margin: 0; color: var(--ink-soft); }
  .cast-orbit { position: relative; display: grid; place-items: center; width: 84px; height: 84px; border: 1px solid rgba(133,213,242,.35); border-radius: 50%; box-shadow: inset 0 0 30px rgba(65,166,204,.12),0 0 35px rgba(65,166,204,.08); }
  .cast-orbit::before { content: none; }
  .cast-orbit > img { width: 62px; height: 48px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.58)); }
  .cast-orbit i { position: absolute; inset: calc(var(--i,0)*-8px); border: 1px solid rgba(133,213,242,.15); border-radius: 50%; animation: cast-pulse 2.8s ease-out infinite; }
  .cast-orbit i:nth-child(1) { --i:1; animation-delay: 0s; }.cast-orbit i:nth-child(2) { --i:2; animation-delay:.65s; }.cast-orbit i:nth-child(3) { --i:3; animation-delay:1.3s; }
  .cast-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 28px 0 14px; padding-top: 18px; border-top: 1px solid var(--line); }
  .cast-device-list { display: grid; gap: 10px; min-height: 128px; }
  .cast-device-list .modal-loading { min-height: 150px; }
  .cast-device-card { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; gap: 15px; align-items: center; padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.025); transition: border-color var(--duration-fast),transform var(--duration-fast),background var(--duration-fast); }
  .cast-device-card.is-ready:hover { transform: translateY(-2px); border-color: rgba(114,184,212,.46); background: rgba(114,184,212,.055); }
  .cast-device-card.is-recent { border-style: dashed; background: rgba(255,255,255,.018); }
  .cast-device-card.is-recent .cast-device-icon { opacity: .7; }
  .cast-device-icon { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(114,184,212,.3); border-radius: 14px; color: #c6efff; background: linear-gradient(145deg,rgba(114,184,212,.18),rgba(255,255,255,.02)); font-weight: 800; }
  .cast-device-card strong,.cast-device-card small { display: block; }.cast-device-card small { color: var(--gold); text-transform: uppercase; letter-spacing:.1em; font-size:.64rem; }.cast-device-card p { margin: 4px 0; color: var(--ink-soft); font-size:.78rem; }.cast-device-card div>span { color: var(--ink-muted); font-size:.7rem; }
  .cast-active-session { border-color: rgba(111,207,181,.38); background: rgba(111,207,181,.045); }
  .cast-session-actions { display: flex; gap: 8px; align-items: center; }
  .cast-session-actions .secondary-button { min-width: 72px; padding: 9px 12px; }
  .cast-manual-label { padding: 7px 10px; border-radius: 999px; color: var(--ink-muted); background: rgba(255,255,255,.04); font-size:.7rem; }
  .cast-empty { min-height: 150px; display: grid; place-items: center; align-content: center; gap: 5px; text-align: center; border: 1px dashed var(--line-bright); border-radius: 15px; color: var(--ink-soft); }.cast-empty>span { color: #9eddf5; font-size: 2rem; }.cast-empty p { margin: 0; max-width: 420px; font-size:.8rem; }
  .cast-library-help { display: grid; grid-template-columns: 44px 1fr; gap: 13px; margin-top: 14px; padding: 16px; border: 1px solid rgba(216,214,207,.22); border-radius: 14px; background: rgba(216,214,207,.04); }.cast-library-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--gold-bright); background: rgba(216,214,207,.09); }.cast-library-help p { margin: 5px 0; color: var(--ink-soft); font-size:.78rem; line-height:1.55; }.cast-library-help small { color: var(--ink-muted); }.cast-warning { color:#ff9a8f;background:rgba(255,90,76,.1); }
  @keyframes cast-pulse { 0% { opacity:.7; transform:scale(.72); } 75%,100% { opacity:0; transform:scale(1.08); } }
  .detail-section { margin-top: 28px; }
  .detail-section h3 { margin-bottom: 14px; }
  .edition-list { display:grid; gap:9px; margin-top:14px; }.edition-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.025); }.edition-card.preferred { border-color:rgba(216,214,207,.35); background:rgba(216,214,207,.055); }.edition-card>div:first-child { display:grid; }.edition-card small { color:var(--ink-muted);text-transform:uppercase;letter-spacing:.1em;font-size:.6rem; }.edition-card span { color:var(--ink-soft);font-size:.72rem; }.edition-card>div:last-child { display:flex;flex-wrap:wrap;gap:7px;justify-content:end; }.edition-badges { display:flex;flex-wrap:wrap;gap:4px;margin-top:5px; }.edition-badges i { border:1px solid var(--line);border-radius:5px;padding:2px 5px;color:var(--ink-soft);font-size:.58rem;font-style:normal; }.compact-editions { display:flex;flex-wrap:wrap;gap:5px;margin-top:8px; }.compact-editions button { min-height:28px;border:1px solid var(--line);border-radius:7px;background:rgba(255,255,255,.03);padding:0 8px;color:var(--ink-soft);font-size:.62rem; }
  .cast-grid, .recommendation-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; }
  .cast-card img, .recommendation-card img { width: 100%; aspect-ratio: 2/3; border-radius: 9px; object-fit: cover; background: var(--surface-raised); }
  .cast-card strong, .recommendation-card strong { display: block; overflow: hidden; margin-top: 7px; font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }
  .cast-card small, .recommendation-card small { color: var(--ink-muted); font-size: .72rem; }
  .cast-card-button { appearance:none; width:100%; border:0; border-radius:10px; background:transparent; color:inherit; padding:0 0 8px; text-align:left; cursor:pointer; transition:transform var(--duration-fast),background var(--duration-fast); }
  .cast-card-button:hover,.cast-card-button:focus-visible { transform:translateY(-3px); background:rgba(255,255,255,.045); outline:2px solid rgba(216,214,207,.42); outline-offset:3px; }
  .person-detail-shell { width:min(1120px,94vw); overflow:hidden; }
  .person-detail-hero { display:grid; grid-template-columns:180px minmax(0,1fr); gap:28px; align-items:start; padding:clamp(28px,5vw,52px); background:radial-gradient(circle at 0 0,rgba(114,184,212,.16),transparent 44%),linear-gradient(150deg,rgba(255,255,255,.045),transparent); }
  .person-detail-hero>img,.person-profile-placeholder { width:180px; aspect-ratio:2/3; border-radius:16px; object-fit:cover; background:var(--surface-raised); box-shadow:var(--shadow-lg); }
  .person-profile-placeholder { display:grid; place-items:center; color:var(--ink-muted); font-size:3rem; }
  .person-detail-hero h2 { margin:5px 0 10px; font:400 clamp(2.1rem,5vw,4rem)/1 Georgia,serif; }
  .person-detail-hero p:last-child { max-width:760px; color:var(--ink-soft); line-height:1.65; }
  .person-detail-stats { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
  .person-detail-stats span,.filmography-status { border:1px solid var(--line); border-radius:999px; padding:4px 8px; color:var(--ink-soft); background:rgba(255,255,255,.035); font-size:.64rem; font-weight:750; }
  .person-detail-body { display:grid; gap:34px; padding:8px clamp(24px,5vw,52px) 52px; }
  .filmography-section { min-width:0; }
  .filmography-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
  .filmography-card { position:relative; appearance:none; min-width:0; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.025); color:inherit; padding:8px; text-align:left; }
  button.filmography-card { cursor:pointer; transition:transform var(--duration-fast),border-color var(--duration-fast),background var(--duration-fast); }
  button.filmography-card:hover,button.filmography-card:focus-visible { transform:translateY(-3px); border-color:rgba(216,214,207,.48); background:rgba(216,214,207,.065); outline:none; }
  .filmography-card img,.filmography-card>.latest-placeholder { width:100%; aspect-ratio:2/3; border-radius:8px; object-fit:cover; background:var(--surface-raised); }
  .filmography-card strong,.filmography-card small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .filmography-card strong { margin-top:8px; font-size:.75rem; }
  .filmography-card small { margin-top:3px; color:var(--ink-muted); font-size:.66rem; }
  .filmography-status { position:absolute; top:14px; left:14px; border-color:rgba(0,0,0,.35); color:#fff; background:rgba(5,7,8,.84); backdrop-filter:blur(8px); }
  .filmography-card.is-in-catalog .filmography-status { color:#c6efff; border-color:rgba(114,184,212,.36); background:rgba(15,38,48,.9); }
  .filmography-empty { grid-column:1/-1; display:grid; gap:4px; min-height:110px; place-content:center; border:1px dashed var(--line-bright); border-radius:13px; color:var(--ink-soft); text-align:center; }
  .filmography-empty span { color:var(--ink-muted); font-size:.75rem; }
  .movie-detail-actions { position:relative; z-index:2; display: flex; flex-wrap:wrap; gap: 9px; margin-top: 18px; }
  .parents-guide-panel { display:grid; gap:12px; margin:16px 0 10px; border:1px solid rgba(216,214,207,.24); border-radius:14px; background:linear-gradient(145deg,rgba(216,214,207,.065),rgba(255,255,255,.018)); padding:16px; }
  .parents-guide-heading { display:flex; align-items:start; justify-content:space-between; gap:16px; }.parents-guide-heading .eyebrow { margin:0 0 3px; }.parents-guide-refresh { align-self:center; }
  .parents-guide-scores { display:flex; flex-wrap:wrap; gap:8px; }.guide-score { display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:center; min-width:210px; border:1px solid var(--line); border-radius:10px; background:rgba(5,7,8,.45); padding:8px 10px; }.guide-score b { display:grid; place-items:center; width:31px; height:31px; border-radius:8px; background:rgba(216,214,207,.1); color:var(--gold-bright); font-size:.72rem; }.guide-score small { color:var(--ink-soft); font-size:.68rem; }.guide-score.level-4,.guide-score.level-5 { border-color:rgba(255,128,118,.38); }.guide-score.level-4 b,.guide-score.level-5 b { color:#ffaaa2; background:rgba(255,95,83,.12); }
  .parents-guide-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.parents-guide-detail-grid span { display:grid; gap:3px; border:1px solid var(--line); border-radius:9px; background:rgba(5,7,8,.3); padding:8px 10px; }.parents-guide-detail-grid small { color:var(--ink-muted); font-size:.61rem; }.parents-guide-detail-grid strong { color:var(--ink-soft); font-size:.7rem; }
  .parents-guide-pending { border-left:2px solid var(--gold); padding-left:9px; color:var(--ink-muted) !important; }
  .parents-guide-scene-notes { display:grid; gap:6px; }.parents-guide-scene-notes>small { color:var(--ink-muted); font-size:.64rem; font-weight:750; text-transform:uppercase; }.parents-guide-panel .parents-guide-scene-notes ul { display:grid; gap:5px; }.parents-guide-panel .parents-guide-scene-notes li { border:0; border-radius:0; padding:0 0 0 12px; font-size:.68rem; line-height:1.45; }
  .parents-guide-panel>p { margin:0; color:var(--ink-soft); font-size:.78rem; line-height:1.55; }.parents-guide-panel ul { display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }.parents-guide-panel li { border:1px solid var(--line); border-radius:999px; padding:4px 8px; color:var(--ink-soft); font-size:.64rem; }.parents-guide-provenance { color:var(--ink-muted); font-size:.62rem; text-transform:capitalize; }
  .parents-guide-panel.compact { gap:8px; margin:10px 0; padding:11px; }.parents-guide-panel.compact .parents-guide-heading strong { font-size:.75rem; }.parents-guide-panel.compact .parents-guide-scores { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }.parents-guide-panel.compact .guide-score { min-width:0; padding:6px 7px; }.parents-guide-panel.compact .guide-score b { width:27px; height:27px; }.parents-guide-panel.compact>p { font-size:.68rem; }
  .parents-guide-panel.compact .parents-guide-detail-grid { grid-template-columns:1fr; }
  .picker-list { display: grid; gap: 8px; margin-top: 20px; }
  .picker-list button { display: flex; justify-content: space-between; min-height: 48px; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.03); padding: 0 13px; text-align: left; }
  .picker-list button:hover { border-color: var(--gold); }
  .suggestion-picker-copy { margin-top:8px; color:var(--ink-muted); }
  .suggestion-profile { min-width:0; display:flex; align-items:center; gap:10px; }
  .suggestion-profile>i { width:34px; height:34px; font-size:.78rem; }
  .suggestion-profile>span { min-width:0; }
  .suggestion-profile small { color:var(--ink-muted); }
  .profile-taste-copy { margin-top: 8px; color: var(--ink-muted); }
  .profile-picker-shell { width: min(720px, 94vw); padding: clamp(28px, 4vw, 44px); }
  .profile-picker-shell h2 { margin-top: 5px; font: 400 clamp(2rem, 5vw, 3.25rem)/1.05 Georgia, serif; }
  .profile-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin: 22px 0; }
  .profile-choice { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; min-height: 62px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); padding: 9px; text-align: left; }
  .profile-choice:hover, .profile-choice.active { border-color: var(--profile-color, var(--gold)); background: rgba(255,255,255,.06); }
  .profile-choice .avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--profile-color); color: #080a0d; font-weight: 900; }
  .profile-choice small { color: var(--ink-muted); }
  .profile-choice-lock { min-width: 74px; color: var(--ink-muted); font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-align: right; text-transform: uppercase; }
  .profile-admin-shortcut { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:54px; margin:-2px 0 4px 24px; border:1px solid rgba(235,190,105,.28); border-radius:11px; background:rgba(235,190,105,.075); padding:9px 12px; color:var(--ink-soft); text-align:left; }
  .profile-admin-shortcut:hover { border-color:rgba(235,190,105,.55); background:rgba(235,190,105,.12); }
  .profile-admin-shortcut>span:first-child { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:rgba(235,190,105,.16); color:#f3d89b; }
  .profile-admin-shortcut strong,.profile-admin-shortcut small { display:block; }
  .profile-admin-shortcut small { margin-top:2px; color:var(--ink-muted); font-size:.69rem; }
  .profile-form { display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
  .profile-pin-shell { width: min(430px, 94vw); }
  .profile-pin-identity { display: flex; align-items: center; gap: 15px; margin: 14px 0 22px; }
  .profile-pin-identity .avatar { display: grid; flex: 0 0 auto; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--profile-color, var(--gold)); color: #080a0d; font-weight: 900; }
  .profile-pin-identity h2 { margin: 0; }
  .profile-pin-identity p { margin: 5px 0 0; color: var(--ink-muted); }
  .profile-pin-form { display: grid; gap: 14px; }
  .profile-pin-form label { display: grid; gap: 7px; color: var(--ink-soft); font-size: .78rem; font-weight: 750; }
  .profile-pin-form .pin-input { width: 100%; min-height: 56px; font-size: 1.35rem; font-variant-numeric: tabular-nums; letter-spacing: .55em; text-align: center; }
  .profile-pin-form .primary-button { min-height: 48px; }
  .profile-pin-help { margin: 16px 0 0; color: var(--ink-muted); font-size: .76rem; line-height: 1.5; }
  .color-picker { display: flex; gap: 7px; }
  .color-picker label { display: block; }
  .color-picker input { position: absolute; opacity: 0; pointer-events: none; }
  .color-picker span { display: block; width: 24px; height: 24px; border: 2px solid transparent; border-radius: 50%; background: var(--swatch); }
  .color-picker input:checked + span { border-color: var(--ink); box-shadow: 0 0 0 2px var(--canvas); }
  .command-overlay { align-items: start; padding-top: min(14vh, 130px); }
  .command-shell { width: min(700px, 94vw); overflow: hidden; border: 1px solid var(--line-bright); border-radius: 17px; background: rgba(14,18,23,.96); box-shadow: var(--shadow-lg); }
  .command-search { position: relative; display: block; }
  .command-search span { position: absolute; left: 18px; top: 17px; color: var(--ink-muted); font-size: 1.3rem; }
  .command-search input { width: 100%; min-height: 60px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 0 20px 0 52px; font-size: 1.05rem; }
  .command-search-status { margin: 0; border-bottom: 1px solid var(--line); padding: 8px 14px; color: var(--ink-muted); font-size: .72rem; }
  .command-search-status.is-busy::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--gold); animation: pulse 1.2s ease-in-out infinite; }
  .command-results { max-height: 430px; overflow: auto; padding: 8px; }
  .command-result { width: 100%; min-height: 52px; display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 10px; border: 0; border-radius: 10px; background: transparent; padding: 7px 10px; text-align: left; }
  .command-result:hover, .command-result.active { background: rgba(216,214,207,.085); }
  .command-result img { width: 32px; height: 42px; border-radius: 4px; object-fit: cover; }
  .command-result small { color: var(--ink-muted); }
  .command-hint { display: flex; gap: 18px; padding: 10px 14px; border-top: 1px solid var(--line); color: var(--ink-muted); font-size: .72rem; }
  .toast { position: fixed; z-index: 150; right: 22px; bottom: 22px; max-width: min(430px, calc(100vw - 44px)); border: 1px solid var(--line-bright); border-radius: 12px; background: rgba(21,25,30,.95); box-shadow: var(--shadow-md); padding: 13px 16px; color: var(--ink); opacity: 0; transform: translateY(14px); pointer-events: none; }
  .toast.show { opacity: 1; transform: none; }
  .sign-out-icon { display: none; }
}

@layer motion {
  .view.active-view { animation: view-in var(--duration) var(--ease-out) both; }
  .cinema-hero { animation: hero-reveal var(--duration-slow) var(--ease-out) both; }
  .featured-backdrop { animation: hero-drift 18s ease-in-out infinite alternate; }
  .metric-card, .mood-grid button { animation: card-in 520ms var(--ease-out) both; }
  .metric-card:nth-child(2), .mood-grid button:nth-child(2) { animation-delay: 50ms; }
  .metric-card:nth-child(3), .mood-grid button:nth-child(3) { animation-delay: 100ms; }
  .metric-card:nth-child(4), .mood-grid button:nth-child(4) { animation-delay: 150ms; }
  .mood-grid button:nth-child(5) { animation-delay: 200ms; } .mood-grid button:nth-child(6) { animation-delay: 250ms; }
  .catalog-card { animation: card-in 160ms var(--ease-out) both; animation-delay: calc(var(--card-index, 0) * 12ms); }
  .modal-overlay:not(.hidden) { animation: veil-in var(--duration-fast) ease-out both; }
  .modal-overlay:not(.hidden) .modal-shell, .modal-overlay:not(.hidden) .command-shell { animation: modal-in var(--duration) var(--ease-out) both; }
  .loader { animation: spin 900ms linear infinite; }
  .scan-badge.running > span { animation: pulse 1.2s ease-in-out infinite; }
  .skeleton-grid span { animation: shimmer 1.35s linear infinite; }
  .toast { transition: opacity var(--duration), transform var(--duration) var(--ease-out); }
  @keyframes view-in { from { opacity: 0; transform: translateY(12px); } }
  @keyframes hero-reveal { from { opacity: 0; transform: scale(.985) translateY(10px); } }
  @keyframes hero-drift { from { transform: scale(1.035) translate3d(-.5%,0,0); } to { transform: scale(1.075) translate3d(1%, -.7%, 0); } }
  @keyframes card-in { from { opacity: 0; transform: translateY(14px); } }
  @keyframes veil-in { from { opacity: 0; } }
  @keyframes modal-in { from { opacity: 0; transform: translateY(20px) scale(.975); } }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes pulse { 50% { transform: scale(1.6); box-shadow: 0 0 18px var(--gold); } }
  @keyframes shimmer { to { background-position: -120% 0; } }
  @supports (view-transition-name: none) {
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: var(--ease-out); }
  }
}

@layer responsive {
  @media (max-width: 1450px) {
    .remote-app .command-button { min-width: 45px; width: 45px; }
    .remote-app .command-button span:nth-child(2), .remote-app .command-button kbd { display: none; }
    .remote-app #profile-name, .remote-app .profile-button > span:last-child { display: none; }
    .remote-app .profile-button { width: 44px; min-width: 44px; padding: 0 5px; }
    .remote-app .mode-badge { display: none; }
    .remote-app #remote-sign-out { width: 44px; min-width: 44px; max-width: 44px; justify-content: center; padding: 0; }
    .remote-app #remote-sign-out #remote-user-email, .remote-app #remote-sign-out .sign-out-label { display: none; }
    .remote-app #remote-sign-out .sign-out-icon { display: inline; font-size: 1.25rem; line-height: 1; transform: rotate(180deg); }
  }
  @media (max-width: 1250px) {
    :root { --sidebar: 190px; }
    .catalog-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .mood-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .cinema-hero { grid-template-columns: 1fr 390px; }
    .command-button { min-width: 45px; width: 45px; }
    .command-button span:nth-child(2), .command-button kbd { display: none; }
    #profile-name, .profile-button > span:last-child { display: none; }
    .profile-button { width: 43px; padding: 0 5px; }
  }
  @media (max-width: 980px) {
    :root { --sidebar: 76px; }
    .sidebar { align-items: center; padding-inline: 11px; }
    .brand > span:last-child, .nav-link > span:last-child, .sidebar-status, .local-card { display: none; }
    .nav-link { justify-content: center; width: 50px; padding: 0; }
    .nav-link:hover { transform: none; }
    .main-content { padding-inline: 22px; }
    .cinema-hero { grid-template-columns: 1fr; }
    .hero-copy { align-self: end; padding-bottom: 220px; }
    .hero-visual { position: absolute; right: 0; bottom: 0; left: 0; padding: 0 28px 24px; }
    .featured-poster-rail { justify-content: start; min-height: 150px; }
    .featured-poster { width: 95px; margin-left: -26px; }
    .hero-library-stat { position: absolute; right: 30px; bottom: 65px; }
    .metric-grid { grid-template-columns: repeat(2, 1fr); }
    .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .latest-list { grid-template-columns: repeat(3, 1fr); }
    .scanner-grid, .settings-grid, .admin-grid, .admin-settings-grid { grid-template-columns: 1fr; }
    .playback-speed-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .playback-speed-details { grid-template-columns:1fr; }
    .activity-log { height: 360px; }
    .collection-list { grid-template-columns: repeat(2, 1fr); }
    .discovery-rail { grid-auto-columns: minmax(150px,180px); }
  }
  @media (max-width: 720px) {
    :root { --sidebar: 0px; }
    html { scroll-padding-top: calc(72px + env(safe-area-inset-top)); }
    body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
    input, select, textarea { font-size: 16px; }
    .sidebar { inset: auto 0 0; width: 100%; height: calc(70px + env(safe-area-inset-bottom)); display: block; padding: 7px max(10px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); border: 0; border-top: 1px solid var(--line); background: rgba(8,10,11,.94); box-shadow: 0 -14px 36px rgba(0,0,0,.34); backdrop-filter: blur(24px) saturate(120%); }
    .brand, .sidebar-status, .local-card { display: none; }
    .primary-nav { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
    .remote-app .primary-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .remote-app.admin-profile-active .primary-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .nav-link { width: auto; min-height: 56px; display: grid; place-items: center; align-content: center; gap: 2px; border-radius: 11px; padding: 3px; font-size: .68rem; }
    .nav-link > span:last-child { display: block; }
    .nav-link.active::before { inset: auto auto 0; width: 22px; height: 2px; }
    .nav-icon { font-size: 1.05rem; line-height: 1; }
    .main-content { width: 100%; margin-left: 0; padding-right: max(14px, env(safe-area-inset-right)); padding-left: max(14px, env(safe-area-inset-left)); }
    .topbar { min-width: 0; min-height: calc(72px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); gap: 10px; }
    .route-heading { min-width: 0; flex: 1 1 auto; }
    .route-heading h1 { font-size: 1.35rem; }
    .route-heading .eyebrow, .scan-badge, #refresh-button { display: none; }
    .topbar-actions { flex: 0 0 auto; gap: 6px; }
    .remote-app .mode-badge, .remote-app #top-surprise { display: none; }
    .profile-button, .command-button, #household-button, #remote-sign-out { width: 44px; min-width: 44px; min-height: 44px; justify-content: center; padding: 0; }
    #remote-sign-out #remote-user-email, #remote-sign-out .sign-out-label { display: none; }
    #remote-sign-out .sign-out-icon { display: inline; font-size: 1.25rem; line-height: 1; transform: rotate(180deg); }
    .command-button > span:first-child { font-size: 1.2rem; }
    .cast-session { grid-template-columns: 38px minmax(0,1fr); }
    .cast-session-timeline, .cast-session-controls { grid-column: 1/-1; text-align: left; }
    .cast-session-controls { justify-content: flex-start; flex-wrap: wrap; }
    .cast-control-button, .cast-volume-control > button { min-height: 44px; }
    .cast-volume-control { flex: 1 1 100%; width: 100%; min-width: 0; height: 44px; grid-template-columns: 44px 34px minmax(72px,1fr) 34px 42px; }
    .download-tracker-list { grid-template-columns: 1fr; }
    .download-tracker-heading { grid-template-columns: 36px minmax(0,1fr) auto; }
    .download-tracker-icon { grid-row: 1/3; }
    .download-tracker-heading > div { grid-column: 2; grid-row: 1; }
    #download-tracker-count { grid-column: 2; grid-row: 2; justify-self: start; }
    .download-tracker-toggle { grid-column: 3; grid-row: 1/3; }
    .view { padding-top: 16px; }
    .cinema-hero { min-height: 0; display: flex; flex-direction: column; border-radius: 19px; }
    .cinema-hero::before { background: linear-gradient(0deg, rgba(6,9,12,.98) 8%, rgba(6,9,12,.62) 60%, rgba(6,9,12,.2)); }
    .hero-copy { align-self: stretch; padding: clamp(210px, 54svh, 300px) 20px 18px; }
    .hero-copy h2 { margin-top: 15px; font-size: clamp(2.45rem, 12vw, 4.2rem); }
    .hero-copy > p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 20px; }
    .hero-actions > button { width: 100%; min-width: 0; padding-inline: 10px; }
    .hero-visual { position: relative; inset: auto; align-self: stretch; padding: 0 20px 20px; }
    .featured-poster-rail { min-height: 138px; overflow: hidden; }
    .featured-poster:nth-child(n+4) { display: none; }
    .hero-library-stat { display: none; }
    .hero-caption { margin-left: 98px; }
    .mood-grid { grid-template-columns: repeat(2, 1fr); }
    .intent-toolbar { align-items: stretch; }
    .choice-group { flex: 1 1 240px; }
    .discover-results-heading { align-items: start; }
    .metric-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
    .metric-card { min-height: 130px; padding: 15px; }
    .admin-intro { grid-template-columns:auto minmax(0,1fr); }
    .admin-intro>.muted-chip { grid-column:2; justify-self:start; }
    .admin-preparation-row { grid-template-columns:10px minmax(0,1fr); }
    .admin-preparation-row>.muted-chip { grid-column:2; justify-self:start; }
    .playback-speed-filters { grid-template-columns:1fr; }
    .playback-speed-stats { grid-template-columns:1fr 1fr; }
    .playback-speed-stats>span { min-height:74px; }
    .playback-spectrum { min-height:220px; padding:7px; }
    .playback-spectrum svg { min-width:620px; min-height:200px; }
    .playback-spectrum { overflow-x:auto; }
    .playback-waterfall { min-height:112px; }
    .latest-list { display: flex; overflow-x: auto; }
    .latest-item { min-width: 125px; }
    .section-heading { align-items: start; }
    .library-collections-callout { align-items:flex-start; flex-direction:column; }
    .section-note { display: none; }
    .filter-panel { position: relative; top: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 9px; padding: 10px; backdrop-filter: none; }
    .filter-bar { grid-column: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
    .search-field { grid-column: 1/-1; }
    .filter-bar > label:not(.search-field) { display: none; }
    .filter-panel.filters-open .filter-bar { grid-column: 1/-1; }
    .filter-panel.filters-open .filter-bar > label:not(.search-field) { display: grid; }
    .filter-panel.filters-open .filter-bar > label:last-child { grid-column: 1/-1; }
    .search-suggestions { grid-column: 1/-1; display: none; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain; margin: 0 -2px; padding: 0 2px 4px; scrollbar-width: none; }
    .filter-panel.filters-open .search-suggestions { display: flex; }
    .search-suggestions::-webkit-scrollbar { display: none; }
    .search-suggestions > * { flex: 0 0 auto; }
    .catalog-query-status { grid-column: 1/-1; margin: 0 2px; }
    .mobile-filter-bar { grid-column: 2; grid-row: 1; display: flex; }
    #mobile-filter-toggle { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; padding-inline: 13px; }
    #mobile-filter-toggle[aria-expanded="true"] { border-color: var(--gold); background: rgba(216,214,207,.1); }
    #mobile-filter-count { min-width: 21px; height: 21px; display: grid; place-items: center; border-radius: 999px; background: var(--ink); color: var(--canvas); font-size: .68rem; }
    #mobile-filter-count[hidden] { display: none; }
    .discovery-controls { grid-column: 1/-1; display: none; grid-template-columns: 1fr 1fr; margin-top: 0; padding-top: 2px; }
    .filter-panel.filters-open .discovery-controls { display: grid; }
    .discovery-controls label { min-width: 0; }
    .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
    .poster-actions { opacity: 1; transform: none; }
    .poster-actions button { min-width: 40px; min-height: 44px; padding: 0 5px; font-size: 0; }
    .poster-actions button::after { content: "Open"; font-size: .7rem; }
    .poster-actions button[data-play-file]::after { content: "Play"; }
    .poster-actions .download-button { grid-column: 1 / -1; }
    .poster-actions button[data-download-media]::after { content: attr(data-mobile-label); }
    .poster-actions .download-button::after { content: attr(data-mobile-label); }
    .poster-actions button[data-watch-state]::after { content: attr(data-mobile-label); }
    .collection-button { width: 44px; height: 44px; opacity: 1; }
    .inline-create { grid-template-columns: 1fr; }
    .collection-list { grid-template-columns: 1fr 1fr; }
    .collection-content-heading { display: block; }
    .field-grid.two-column { grid-template-columns: 1fr; }
    .modal-overlay { padding: 0; align-items: end; }
    .modal-shell { width: 100%; max-height: calc(100dvh - max(12px, env(safe-area-inset-top))); padding-bottom: env(safe-area-inset-bottom); border-radius: 22px 22px 0 0; }
    .modal-close { width: 44px; height: 44px; }
    .player-shell { max-height: 100dvh; padding-bottom: 0; border-radius: 18px 18px 0 0; }
    .player-heading { padding: 20px 62px 12px 17px; }
    .player-heading h2 { font-size: clamp(1.35rem,7vw,2rem); }
    #player-video { max-height: min(64dvh,calc(100dvh - 145px)); min-height: 240px; }
    .player-controls { gap: 5px; padding: 52px max(10px,env(safe-area-inset-right)) max(9px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); }
    .player-control-row { display: grid; grid-template-columns: 1fr; gap: 4px; }
    .player-transport-controls,.player-display-controls { justify-content: space-between; }
    .player-time { flex: 1 1 auto; min-width: 0; text-align: right; }
    .player-display-controls { padding-top: 2px; }
    .player-volume-control { flex: 1 1 auto; }
    .player-volume-control label { flex: 1 1 auto; width: auto; }
    .player-volume-control input { min-width: 72px; }
    .player-shortcut-hint { display: none; }
    .guide-hero, .movie-detail-hero { grid-template-columns: 100px 1fr; gap: 16px; padding: 72px 18px 25px; }
    .guide-body, .movie-detail-body { padding: 8px 18px 28px; }
    .episode-grid { grid-template-columns: 1fr; }
    .poster-actions button[data-cast-file]::after { content: "Cast"; }
    .cast-heading { grid-template-columns: 1fr; }
    .cast-orbit { width: 64px; height: 64px; }
    .cast-device-card { grid-template-columns: 46px 1fr; }
    .cast-device-card > .primary-button, .cast-device-card > .cast-manual-label { grid-column: 1/-1; width: 100%; text-align: center; }
    .cast-session-actions { grid-column: 1/-1; }
    .cast-session-actions .secondary-button { flex: 1; }
    .capacity-grid { grid-template-columns: 1fr; }
    .capacity-card { min-height: 78px; }
    .household-row { grid-template-columns: 1fr; }
    .household-row > button { width: 100%; }
    .household-danger { align-items: stretch; flex-direction: column; }
    .cast-toolbar { align-items: stretch; flex-direction: column; }
    .suggestion-actions button { min-height:44px; }
    .cast-grid, .recommendation-grid, .filmography-grid { grid-template-columns: repeat(3, 1fr); }
    .person-detail-hero { grid-template-columns:100px minmax(0,1fr); gap:16px; padding:64px 18px 24px; }
    .person-detail-hero>img,.person-profile-placeholder { width:100px; border-radius:11px; }
    .person-detail-hero h2 { font-size:clamp(2rem,10vw,3.1rem); }
    .person-detail-hero p:last-child { grid-column:1/-1; }
    .person-detail-body { padding:8px 18px 34px; }
    .command-overlay { align-items: start; padding: calc(72px + env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(10px, env(safe-area-inset-left)); }
    .command-shell { border-radius: 14px; }
    .profile-picker-shell { width: 100%; }
    .profile-list { grid-template-columns: 1fr; }
    .profile-form { grid-template-columns: 1fr; }
    footer { display: block; }
    footer span { display: block; margin-top: 7px; }
    .card-title-button { min-height: 44px; display: flex; align-items: center; }
  }
  @media (max-width: 460px) {
    .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .collection-list { grid-template-columns: 1fr; }
    .discover-results-heading { display: grid; }
    #discover-view-all { width: 100%; }
    .discovery-rail { grid-auto-columns: minmax(145px,72vw); }
    .runtime-labels span:nth-child(2), .runtime-labels span:nth-child(4) { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
    .featured-backdrop { transform: scale(1.035); }
  }
  @media (prefers-contrast: more) {
    :root { --line: rgba(255,255,255,.22); --line-bright: rgba(255,255,255,.38); --ink-soft: #e4e1da; --ink-muted: #b8bbb8; }
  }
}
[data-local-only] {
  display: none !important;
}

.remote-auth {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: auto;
  background:
    radial-gradient(circle at 20% 10%, rgba(40, 126, 154, 0.18), transparent 34%),
    radial-gradient(circle at 80% 90%, rgba(104, 64, 147, 0.16), transparent 38%),
    #07090c;
}

.remote-auth.hidden { display: none; }
.remote-auth:not(.hidden) ~ .app-shell { display: none; }

.remote-auth-card {
  width: min(440px, 100%);
  padding: clamp(28px, 6vw, 52px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  background: rgba(14, 17, 22, 0.9);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(24px);
}

.remote-auth-card > img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 22px;
}

.remote-auth-card h1 { margin: 6px 0 10px; font-size: clamp(2rem, 8vw, 3.4rem); }
.remote-auth-card > p { color: var(--ink-muted); line-height: 1.6; }
.remote-auth-card form { display: grid; gap: 16px; margin: 28px 0 18px; }
.remote-auth-card label:not(.check-line) { display: grid; gap: 8px; }
.remote-auth-card input:not([type="checkbox"]) {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.045);
}

.remote-auth-card .check-line {
  min-height: 44px;
  margin: -5px 0;
  padding: 5px 2px;
}

.remote-auth-card .check-line input {
  width: 20px;
  height: 20px;
  margin: 0;
}

.remote-auth-card .primary-button { min-height: 48px; }

@media (max-height: 800px) and (min-width: 601px) {
  .remote-auth { padding: 16px; }
  .remote-auth-card { width: min(500px, 100%); padding: 24px 32px; }
  .remote-auth-card > img { width: 46px; height: 46px; margin-bottom: 10px; }
  .remote-auth-card h1 { margin-block: 3px 7px; font-size: clamp(2rem, 6vh, 2.8rem); }
  .remote-auth-card > p { line-height: 1.45; }
  .remote-auth-card form { gap: 10px; margin: 16px 0 10px; }
  .local-open-fallback { gap: 7px; margin-bottom: 10px; padding: 10px 0; }
}

.local-open-fallback {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
  padding: 16px 0 18px;
  border-block: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--ink-muted);
  font-size: 0.78rem;
}

.local-open-fallback .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  text-decoration: none;
}

.mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid rgba(94, 207, 171, 0.22);
  border-radius: 999px;
  color: #a9e9d2;
  font-size: 0.75rem;
  white-space: nowrap;
  background: rgba(50, 142, 115, 0.1);
}

.mode-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #62d7ad;
  box-shadow: 0 0 12px #62d7ad;
}

#remote-sign-out {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1450px) {
  .remote-app .topbar-actions .mode-badge { display: none; }
}

.remote-cast-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 26px;
}

.cast-option {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 138px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 18px;
  color: var(--ink);
  text-align: left;
  background: rgba(255, 255, 255, 0.035);
}

button.cast-option { cursor: pointer; }
button.cast-option:hover { border-color: rgba(111, 207, 181, 0.45); transform: translateY(-1px); }
.cast-option strong { font-size: 1.05rem; }
.cast-option span { color: var(--ink-muted); line-height: 1.45; }

.remote-home-cast { margin-top: 26px; }
.remote-home-cast .cast-toolbar { margin-top: 0; }
.remote-home-cast .cast-toolbar > div { display: grid; gap: 5px; }
.remote-home-cast .cast-toolbar h3 { margin: 0; }
.remote-home-cast .cast-toolbar .muted-chip { width: fit-content; margin-top: 4px; }
.remote-cast-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 16px; color: var(--ink-muted); font-size: .7rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.remote-cast-divider::before, .remote-cast-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.tv-code-option { grid-row: span 2; }
.tv-code-option input {
  width: 100%;
  margin: 10px 0 2px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  color: var(--ink);
  font: 700 1.4rem/1 monospace;
  letter-spacing: 0.25em;
  text-align: center;
  background: rgba(0, 0, 0, 0.24);
}

.tv-receiver {
  min-height: 100vh;
  margin: 0;
  color: #f4f5f6;
  background: radial-gradient(circle at 50% 35%, #172632, #07090c 60%);
}

.tv-receiver-shell {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  padding: 5vw;
  text-align: center;
}

.tv-receiver-shell > img { width: min(14vw, 130px); }
.tv-receiver-shell h1 { margin: 0; font-size: clamp(2.4rem, 6vw, 5.4rem); }
.tv-receiver-shell p, .tv-receiver-shell small { color: #aeb8c0; font-size: clamp(1rem, 2vw, 1.5rem); }
.tv-code {
  display: block;
  margin: 2vh 0;
  font: 700 clamp(4rem, 14vw, 10rem)/1 monospace;
  letter-spacing: 0.14em;
  color: #eefbf7;
  text-shadow: 0 0 36px rgba(89, 222, 177, 0.25);
}

#tv-playback { width: min(92vw, 1500px); }
#tv-video { width: 100%; max-height: 76vh; margin-top: 20px; background: #000; }

@media (max-width: 720px) {
  .remote-cast-grid { grid-template-columns: 1fr; }
  .tv-code-option { grid-row: auto; }
  .remote-app .mode-badge { display: none; }
  #remote-sign-out #remote-user-email, #remote-sign-out .sign-out-label { display: none; }
  #remote-sign-out .sign-out-icon { display: inline; }
  #remote-sign-out { width: 44px; min-width: 44px; }
}

@media (max-width: 600px) {
  .remote-auth {
    place-items: start center;
    padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    overscroll-behavior: contain;
  }

  .remote-auth-card {
    width: 100%;
    margin-top: clamp(24px, 8svh, 68px);
    padding: 24px 22px;
    border-radius: 24px;
  }

  .remote-auth-card > img { width: 50px; height: 50px; margin-bottom: 16px; }
  .remote-auth-card h1 { margin-block: 4px 8px; font-size: clamp(2.15rem, 11vw, 3rem); }
  .remote-auth-card > p { line-height: 1.5; }
  .remote-auth-card form { gap: 12px; margin: 20px 0 14px; }
}

@media (max-height: 680px) and (max-width: 600px) {
  .remote-auth-card { margin-top: 0; padding-block: 20px; }
  .remote-auth-card > img { width: 42px; height: 42px; margin-bottom: 10px; }
  .remote-auth-card form { margin-block: 14px 10px; }
}

/* Library: resume first, then the complete downloaded collection. */
@layer components {
  .library-heading { align-items:center; margin-top:8px; margin-bottom:24px; }
  .library-heading h2 { font-size:clamp(2rem,4vw,3rem); letter-spacing:-.045em; }
  .library-intro { margin-top:8px; color:var(--ink-soft); font-size:.92rem; }
  .library-heading-actions { display:flex; flex-wrap:wrap; gap:8px; }
  .library-heading-actions > * { min-height:44px; }
  .library-home-status { color:var(--ink-muted); font-size:.8rem; }
  .library-home-status:empty { display:none; }
  .library-continue { margin:0 0 32px; padding:22px; border:1px solid var(--line); border-radius:var(--radius-lg); background:linear-gradient(125deg,rgba(198,202,196,.06),rgba(255,255,255,.015)); }
  .library-continue .continue-rail { grid-auto-columns:minmax(260px,320px); padding-bottom:8px; }
  .library-resume-label { position:absolute; z-index:2; left:14px; bottom:16px; display:flex; align-items:center; gap:8px; padding:7px 11px; border:1px solid rgba(255,255,255,.24); border-radius:8px; color:var(--ink); background:rgba(8,10,10,.76); font-size:.8rem; font-weight:700; }
  .library-resume-label > span { font-size:.65rem; }
  .library-resume-time { position:absolute; z-index:2; right:14px; bottom:24px; color:#f4f2ed; text-shadow:0 1px 8px #000; font-size:.75rem; }
  .library-continue-title { width:fit-content; max-width:100%; min-height:36px; padding:0; overflow:hidden; border:0; background:transparent; color:var(--ink); font-size:.95rem; font-weight:700; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
  .library-continue .continue-cast-button { min-height:44px; }
  .library-browse { min-width:0; padding:0 0 12px; }
  .library-browse h3,.library-continue h3 { font-size:1.3rem; letter-spacing:-.025em; }
  .library-ready-label { display:flex; align-items:center; gap:7px; flex-shrink:0; color:var(--ink-soft); font-size:.73rem; }
  .library-ready-label i { width:6px; height:6px; border-radius:50%; background:var(--success); }
  .library-toolbar { padding:16px; box-shadow:none; }
  .library-toolbar-top,.library-toolbar-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .library-toolbar-bottom { margin-top:15px; padding-top:15px; border-top:1px solid var(--line); }
  .library-type-tabs { display:flex; align-items:center; gap:4px; padding:4px; border:1px solid var(--line); border-radius:12px; background:var(--canvas-soft); }
  .library-type-tabs button { min-height:40px; padding:0 16px; border:0; border-radius:8px; background:transparent; color:var(--ink-soft); font-size:.82rem; font-weight:650; white-space:nowrap; }
  .library-type-tabs button[aria-pressed="true"] { color:var(--canvas); background:var(--ink); box-shadow:0 2px 9px rgba(0,0,0,.18); }
  .library-type-tabs button:not([aria-pressed="true"]):hover { background:var(--surface-raised); color:var(--ink); }
  .library-search { flex:0 1 360px; min-width:0; }
  .library-search input { min-height:46px; }
  .library-selects { display:flex; flex-wrap:wrap; align-items:center; gap:20px; }
  .library-selects label { display:flex; align-items:center; gap:9px; }
  .library-selects label > span { color:var(--ink-muted); font-size:.73rem; white-space:nowrap; }
  .library-selects select { min-height:40px; padding:7px 32px 7px 11px; font-size:.8rem; }
  .library-results-status { min-height:22px; margin:18px 0 14px; color:var(--ink-muted); font-size:.8rem; }
  .library-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); align-items:start; gap:26px 16px; min-width:0; }
  .library-grid.is-updating { opacity:.55; }
  .library-card { min-width:0; }
  .library-card-art { position:relative; display:block; width:100%; aspect-ratio:2/3; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--surface-raised); box-shadow:var(--shadow-md); }
  .library-card-art > img { width:100%; height:100%; object-fit:cover; transition:transform var(--duration) var(--ease-out); }
  .library-card-art:hover > img { transform:scale(1.045); }
  .library-card-art::after { content:""; position:absolute; inset:45% 0 0; pointer-events:none; background:linear-gradient(0deg,rgba(0,0,0,.75),transparent); }
  .library-card-placeholder { display:grid; place-items:center; width:100%; height:100%; padding:18px; background:radial-gradient(ellipse at top,#283338,#101619 70%); color:var(--ink-muted); font-size:1.2rem; text-align:center; }
  .library-card-type,.library-card-rating { position:absolute; z-index:1; top:9px; padding:4px 6px; border-radius:5px; background:rgba(6,8,8,.8); color:var(--ink); font-size:.58rem; font-weight:750; letter-spacing:.04em; }
  .library-card-type { left:8px; }
  .library-card-rating { right:8px; }
  .library-card-technical { position:absolute; z-index:1; left:9px; right:9px; bottom:12px; display:flex; flex-wrap:wrap; gap:4px; }
  .library-card-technical span { padding:3px 5px; border:1px solid rgba(255,255,255,.24); border-radius:4px; color:var(--ink); background:rgba(0,0,0,.48); font-size:.56rem; font-weight:700; }
  .library-card-progress { position:absolute; z-index:2; bottom:0; left:0; right:0; height:4px; background:rgba(255,255,255,.22); }
  .library-card-progress i { display:block; height:100%; background:var(--success); }
  .library-card-copy { min-width:0; padding-top:8px; }
  .library-card-title { display:block; width:100%; min-height:44px; padding:0; border:0; background:transparent; color:var(--ink); overflow:hidden; text-align:left; text-overflow:ellipsis; white-space:nowrap; font-size:.87rem; font-weight:700; }
  .library-card-meta { display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; color:var(--ink-muted); font-size:.7rem; }
  .library-card-status { display:block; min-height:22px; padding-top:0; color:var(--success); font-size:.7rem; }
  .library-card.is-watched .library-card-status { color:var(--ink-muted); }
  .library-card-actions { display:flex; gap:6px; margin-top:8px; }
  .library-card-actions button { min-height:44px; padding:0 10px; border:1px solid var(--line-bright); border-radius:8px; background:var(--surface-raised); color:var(--ink); font-size:.75rem; font-weight:650; }
  .library-card-actions button:first-child { flex:1; }
  .library-card-actions button:hover { border-color:var(--ink-muted); background:#242829; }
  .library-card-actions [data-add-collection] { flex:0 0 44px; font-size:1.15rem; }
  .library-skeleton > span { display:block; aspect-ratio:2/3; border:1px solid var(--line); border-radius:12px; background:linear-gradient(145deg,var(--surface-raised),var(--canvas-soft)); }
  .library-browse-error { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:0 0 18px; padding:18px; border:1px solid rgba(255,128,118,.3); border-radius:12px; background:rgba(255,128,118,.04); }
  .library-browse-error strong { font-size:.9rem; }
  .library-browse-error p { margin-top:4px; color:var(--ink-soft); font-size:.8rem; }
  .library-browse-error button { flex-shrink:0; }
  .library-browse-empty { padding:52px 24px; border:1px dashed var(--line-bright); border-radius:var(--radius-lg); }
  .library-browse-empty p { max-width:430px; margin:8px auto 18px; }
  .library-saved-mark { flex:0 0 58px; display:grid; place-items:center; width:58px; height:66px; border:1px solid var(--line-bright); border-radius:12px; background:var(--surface-raised); font-size:2rem; }
  .library-collections-callout { background:linear-gradient(110deg,rgba(166,185,192,.06),var(--surface)); }
  .library-collections-callout > div { flex:1; }
  .library-collections-callout p:last-child { max-width:560px; font-size:.85rem; }
  #library .load-more { min-height:44px; margin-top:28px; }
}
@layer responsive {
  @media (max-width:980px) {
    .library-toolbar-top { align-items:stretch; flex-direction:column; gap:12px; }
    .library-search { flex:auto; }
    .library-type-tabs { align-self:flex-start; }
    .library-heading { align-items:flex-start; }
    .library-heading-actions { justify-content:flex-end; }
  }
  @media (max-width:720px) {
    .library-heading { gap:18px; margin-bottom:22px; }
    .library-heading-actions { justify-content:flex-start; }
    .library-heading-actions > * { padding:0 12px; font-size:.78rem; }
    .library-continue { padding:16px 12px 10px; margin-bottom:26px; }
    .library-continue .continue-rail { grid-auto-columns:minmax(240px,85%); }
    .library-continue .shelf-heading { padding:0 2px; }
    .library-continue .shelf-heading h3 { font-size:1.15rem; }
    .library-continue .shelf-heading .eyebrow { font-size:.58rem; }
    .library-continue .shelf-heading-tools { gap:6px; }
    .library-continue .muted-chip { padding:4px 7px; font-size:.62rem; }
    .library-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 12px; }
    .library-toolbar { padding:12px; }
    .library-toolbar-bottom { flex-wrap:wrap; gap:8px; }
    .library-selects { width:100%; gap:10px; }
    .library-selects label { flex:1; min-width:0; align-items:stretch; flex-direction:column; gap:5px; }
    .library-selects select { width:100%; min-width:0; min-height:44px; font-size:.85rem; }
    .library-type-tabs { width:100%; }
    .library-type-tabs button { flex:1; min-height:44px; padding:0 10px; }
    .library-search input { font-size:16px; }
    .library-ready-label { font-size:.65rem; }
    .library-saved-mark { display:none; }
    .library-collections-callout { padding:20px; gap:16px; }
    .library-browse-error { align-items:flex-start; flex-direction:column; }
  }
  @media (max-width:460px) {
    .library-heading { flex-direction:column; }
    .library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 12px; }
    .library-browse > .shelf-heading { align-items:flex-start; flex-direction:column; gap:8px; }
    .library-card-title { font-size:.8rem; }
    .library-card-type,.library-card-rating { font-size:.54rem; }
    .library-continue .rail-controls { display:none; }
  }
}

@layer components {
  .library-card-actions { position:relative; }
  .library-card-actions > .primary-button { min-width:0; }
  .library-card-menu { flex:0 0 44px; }
  .library-card-menu > summary { display:grid; place-items:center; width:44px; min-height:44px; border:1px solid var(--line-bright); border-radius:8px; background:var(--surface-raised); list-style:none; font-size:1.2rem; cursor:pointer; }
  .library-card-menu > summary::-webkit-details-marker { display:none; }
  .library-card-menu[open] > summary { background:var(--ink); color:var(--canvas); }
  .library-card-menu-items { position:absolute; z-index:10; bottom:calc(100% + 7px); left:0; right:0; display:grid; gap:3px; padding:6px; border:1px solid var(--line-bright); border-radius:10px; background:var(--surface-solid); box-shadow:var(--shadow-lg); }
  .library-card-menu-items button { width:100%; min-height:44px; padding:8px; border:0; background:transparent; text-align:left; font-size:.72rem; }
  .library-card-menu-items [data-add-collection] { font-size:.72rem; }
}