/* SoudCoh TV, the future look: deep space black, blue light, glass and thin glowing edges (theme.mjs puts
   data-theme="future" on <html>; "classic" or no attribute leaves app.css exactly as it is).

   How it's built, so it can never change the layout or fight app.css:
   - Every rule starts with :where(html[data-theme="future"]), which adds no specificity. Each one mirrors an
     app.css selector and wins only because this file loads after it, so app.css's own cascade (states, media
     queries, the more specific rules) still decides everything else.
   - Only paint changes: colours, backgrounds, borders' colour and radius, shadows, glows, blur. No sizes,
     padding, margins, display or positions, except position: relative on a few static panels so their glowing
     edge can sit on top of them.
   - Always dark, whatever the phone or Mac is set to; text meets WCAG AA on its glass; status colours keep
     their meaning (green ok, amber warning, red danger); motion stops with prefers-reduced-motion. */

/* ---------- tokens ---------- */
html[data-theme="future"] {
  --bg: #000000;
  --panel: rgba(11, 18, 35, .9);      /* near-solid, so anything drawn with it stays readable over content */
  --panel-2: rgba(22, 34, 60, .66);   /* rows inside a panel */
  --panel-3: rgba(32, 47, 80, .55);
  --line: rgba(138, 184, 255, .16);
  --ink: #EEF4FF;
  --muted: #A6B5CE;
  --faint: #8494B0;
  --cloud: #C9D0DA;
  --accent: #006DFF;
  --accent-2: #0058d6;
  --accent-soft: rgba(0, 109, 255, .18);
  --accent-line: rgba(92, 157, 255, .5);
  --accent-text: #79B0FF;
  --on-ink: #000000;
  --screen: #020409;
  --screen-line: rgba(138, 184, 255, .14);
  --float: rgba(4, 8, 20, .8);
  --scrim: rgba(0, 3, 12, .66);
  --shadow: inset 0 1px 0 rgba(200, 222, 255, .05), 0 12px 32px -18px rgba(0, 0, 0, .95);
  --shadow-up: 0 -18px 60px rgba(0, 0, 0, .65);
  --danger-soft: rgba(255, 91, 91, .13);
  --dots: rgba(138, 184, 255, .09);
  --ok: #3ddc84;
  --warn: #f5a524;
  --danger: #ff5b5b;
  /* the future look's own */
  --f-edge: rgba(138, 184, 255, .2);         /* a thin lit border */
  --f-edge-hi: rgba(138, 184, 255, .42);     /* the same, hovered or picked */
  --f-holo: #8AB8FF;                         /* focus rings, lit icons */
  --f-icon: #9CC2FF;
  --f-glow: rgba(0, 109, 255, .55);
  --f-hero: linear-gradient(180deg, rgba(18, 29, 54, .76), rgba(7, 12, 26, .82));
  --f-sheet: linear-gradient(180deg, rgba(15, 25, 48, .86), rgba(5, 9, 21, .93));
  --f-well: rgba(2, 6, 16, .8);              /* sunken: inputs, the now-playing line */
  --f-blur: blur(18px) saturate(150%);
  --f-lit: linear-gradient(180deg, #006DFF 0%, #0063ef 55%, #0055d2 100%); /* never lighter than the brand blue under white text */
  --f-lit-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 20, 70, .35), 0 0 0 1px rgba(0, 109, 255, .3), 0 6px 22px -6px rgba(0, 109, 255, .75), 0 0 26px -8px rgba(92, 157, 255, .6);
  --f-orb: radial-gradient(circle at 32% 25%, rgba(110, 170, 255, .42), rgba(0, 109, 255, .16) 62%, rgba(0, 109, 255, .1));
  --f-orb-shadow: inset 0 0 0 1px rgba(138, 184, 255, .3), 0 0 18px -6px rgba(0, 109, 255, .8);
  --f-ring: 0 0 0 4px rgba(0, 109, 255, .28), 0 0 22px rgba(92, 157, 255, .5);
  color-scheme: dark;
  scrollbar-color: rgba(138, 184, 255, .28) transparent;
  /* The black goes on <html> (the canvas) and <body> stays clear: a body background would paint over the
     pinned nebula and stars below. */
  background: #000;
}
/* Without backdrop blur the glass would let busy content show through: make it solid instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme="future"] {
    --float: rgba(4, 8, 20, .97);
    --f-sheet: linear-gradient(180deg, #0d1628, #05091a);
  }
}

/* ---------- the page: space ---------- */
:where(html[data-theme="future"]) body { background: transparent; color: var(--ink); }
/* A nebula of brand blue far behind everything, and faint star dust, both pinned to the screen (gradients only:
   no images, nothing to download). Pinned layers rather than background-attachment, which iOS ignores. */
:where(html[data-theme="future"]) body::before,
:where(html[data-theme="future"]) body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
}
:where(html[data-theme="future"]) body::before {
  background:
    radial-gradient(1px 1px at 31px 47px, rgba(255, 255, 255, .4), transparent),
    radial-gradient(1px 1px at 113px 19px, rgba(190, 215, 255, .34), transparent),
    radial-gradient(1px 1px at 71px 151px, rgba(255, 255, 255, .27), transparent),
    radial-gradient(1px 1px at 197px 89px, rgba(170, 200, 255, .32), transparent),
    radial-gradient(1px 1px at 23px 233px, rgba(255, 255, 255, .24), transparent),
    radial-gradient(1px 1px at 251px 199px, rgba(200, 222, 255, .3), transparent),
    radial-gradient(1.2px 1.2px at 157px 283px, rgba(255, 255, 255, .36), transparent),
    radial-gradient(1px 1px at 331px 61px, rgba(180, 208, 255, .26), transparent),
    radial-gradient(ellipse 72% 52% at 88% -6%, rgba(0, 109, 255, .26), rgba(0, 109, 255, .08) 45%, transparent 72%),
    radial-gradient(ellipse 60% 46% at -4% 104%, rgba(0, 82, 204, .2), rgba(0, 60, 160, .05) 50%, transparent 74%),
    radial-gradient(ellipse 42% 30% at 38% 42%, rgba(92, 157, 255, .055), transparent 72%),
    linear-gradient(180deg, #000 0%, #01040c 55%, #000a1c 100%);
  background-size: 139px 139px, 181px 173px, 223px 211px, 263px 257px, 307px 293px, 349px 337px, 409px 397px, 457px 443px, auto, auto, auto, auto;
}
/* A second, brighter handful of stars that slowly fades in and out (not with reduced motion). */
:where(html[data-theme="future"]) body::after {
  background:
    radial-gradient(1.4px 1.4px at 87px 129px, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1.2px 1.2px at 211px 37px, rgba(205, 225, 255, .6), transparent),
    radial-gradient(1.5px 1.5px at 301px 263px, rgba(255, 255, 255, .55), transparent),
    radial-gradient(1.1px 1.1px at 43px 331px, rgba(170, 205, 255, .6), transparent),
    radial-gradient(1.6px 1.6px at 389px 157px, rgba(140, 185, 255, .55), transparent);
  background-size: 293px 281px, 367px 353px, 433px 421px, 521px 509px, 613px 599px;
  animation: f-twinkle 9s ease-in-out infinite;
}
@keyframes f-twinkle { 50% { opacity: .3; } }
:where(html[data-theme="future"]) ::selection { background: rgba(0, 109, 255, .5); color: #fff; }
:where(html[data-theme="future"]) a { color: var(--accent-text); }

/* Holographic focus: a lit blue ring with a soft halo that shimmers gently. Component focus styles from other
   files (higher specificity) still win. */
:where(html[data-theme="future"]) :focus-visible {
  outline: 2px solid var(--f-holo); outline-offset: 2px; box-shadow: var(--f-ring);
  animation: f-holo 2.4s ease-in-out infinite;
}
@keyframes f-holo { 50% { outline-color: #5C9DFF; } }
:where(html[data-theme="future"]) .input:focus-visible { outline: none; animation: none; } /* inputs light their own border */
:where(html[data-theme="future"]) .setup-pick:focus-visible,
:where(html[data-theme="future"]) .setup-cell:focus-visible { outline: 2px solid var(--f-holo); box-shadow: var(--f-ring); }

/* ---------- shell ---------- */
:where(html[data-theme="future"]) .topbar h1 { color: #F4F8FF; text-shadow: 0 0 34px rgba(0, 109, 255, .38); }
/* The brand's blue full stop stays exactly SoudCoh Blue; out here it gives off a little light. */
:where(html[data-theme="future"]) .stop { color: #006DFF; text-shadow: 0 0 14px rgba(0, 109, 255, .9), 0 0 2px rgba(92, 157, 255, .8); }
:where(html[data-theme="future"]) .live-pill { border-color: var(--f-edge); background: rgba(8, 14, 30, .8); color: var(--muted); }
:where(html[data-theme="future"]) .conn { background: var(--danger); box-shadow: 0 0 8px rgba(255, 91, 91, .7); }
:where(html[data-theme="future"]) .conn.on { position: relative; background: var(--ok); box-shadow: 0 0 0 3px rgba(61, 220, 132, .16), 0 0 10px rgba(61, 220, 132, .85); }
/* Live: a slow radar ping off the green dot. */
:where(html[data-theme="future"]) .conn.on::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid rgba(61, 220, 132, .7);
  animation: f-ping 3.2s ease-out infinite; pointer-events: none;
}
@keyframes f-ping { 0% { transform: scale(.7); opacity: .9; } 70%, 100% { transform: scale(2.1); opacity: 0; } }
:where(html[data-theme="future"]) .help-btn { color: var(--muted); }

/* the phone's tab bar: dark glass with a lit seam along the top */
:where(html[data-theme="future"]) .tabbar {
  background: rgba(2, 5, 14, .76); border-top-color: rgba(138, 184, 255, .13);
  backdrop-filter: var(--f-blur); -webkit-backdrop-filter: var(--f-blur);
  box-shadow: 0 -24px 48px -24px rgba(0, 0, 0, .9);
}
:where(html[data-theme="future"]) .tabbar::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(92, 157, 255, .65), rgba(138, 184, 255, .25) 70%, transparent);
}
:where(html[data-theme="future"]) .tab { color: var(--faint); transition: color .2s; }
:where(html[data-theme="future"]) .tab.on { color: #A9CBFF; }
:where(html[data-theme="future"]) .tabbar .tab.on svg.i {
  background: rgba(0, 109, 255, .26); color: #E6F0FF;
  box-shadow: inset 0 0 0 1px rgba(138, 184, 255, .38), 0 0 18px -2px rgba(0, 109, 255, .7);
}

/* the side bar on a computer: dark glass, a lit edge, and the open tab lit from the left */
:where(html[data-theme="future"]) .side {
  background: linear-gradient(180deg, rgba(9, 15, 30, .8), rgba(2, 5, 13, .82));
  border-right-color: rgba(138, 184, 255, .1);
  backdrop-filter: var(--f-blur); -webkit-backdrop-filter: var(--f-blur);
}
:where(html[data-theme="future"]) .side::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: -1px; width: 1px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(92, 157, 255, .55) 22%, rgba(92, 157, 255, .12) 60%, transparent);
}
:where(html[data-theme="future"]) .side .tab { position: relative; color: var(--muted); transition: background .2s, color .2s, box-shadow .2s; }
:where(html[data-theme="future"]) .side .tab:hover { background: rgba(92, 157, 255, .08); color: var(--ink); }
:where(html[data-theme="future"]) .side .tab.on {
  background: linear-gradient(90deg, rgba(0, 109, 255, .3), rgba(0, 109, 255, .07)); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(138, 184, 255, .2), 0 0 24px -12px rgba(0, 109, 255, .9);
}
:where(html[data-theme="future"]) .side .tab.on::before {
  content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px; border-radius: 3px; pointer-events: none;
  background: #5C9DFF; box-shadow: 0 0 10px #006DFF, 0 0 2px #8AB8FF;
}
:where(html[data-theme="future"]) .side .tab.on svg { color: var(--f-holo); filter: drop-shadow(0 0 6px rgba(0, 109, 255, .9)); }

/* The SoudCoh lockup in white type, whatever the system's light or dark setting: the logo's own picture (the
   navy one in light mode) is moved out of its box and the white version painted in its place, so the image keeps
   its exact size, position and alt text. */
:where(html[data-theme="future"]) :is(.logo, .login-brand) picture img {
  object-position: -10000px 0; background: url("/brand/assets/logo/soudcoh-logo-blue-white.svg") center / contain no-repeat;
}
:where(html[data-theme="future"]) .logo-tv { color: #B5D0FF; border-color: rgba(138, 184, 255, .38); box-shadow: inset 0 0 10px rgba(0, 109, 255, .25), 0 0 12px -4px rgba(0, 109, 255, .8); }

/* ---------- controls ---------- */
:where(html[data-theme="future"]) .btn {
  border-radius: 999px; background: rgba(18, 29, 54, .84); border-color: var(--f-edge); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(200, 222, 255, .07);
  transition: background .18s, border-color .18s, box-shadow .2s, color .18s, transform .1s;
}
:where(html[data-theme="future"]) .btn:hover { background: rgba(28, 45, 82, .9); border-color: var(--f-edge-hi); box-shadow: inset 0 1px 0 rgba(200, 222, 255, .1), 0 0 18px -8px rgba(92, 157, 255, .8); }
/* The main action: a lit brand-blue pill. Its colour stays exactly SoudCoh Blue; the light is in the glow. */
:where(html[data-theme="future"]) .btn.primary {
  background-color: var(--accent); background-image: var(--f-lit); border-color: rgba(138, 184, 255, .6); color: #fff;
  text-shadow: 0 1px 1px rgba(0, 24, 80, .35); box-shadow: var(--f-lit-shadow);
}
:where(html[data-theme="future"]) .btn.primary:hover {
  background-color: var(--accent); background-image: linear-gradient(180deg, #006DFF, #005ee6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36), 0 0 0 1px rgba(92, 157, 255, .45), 0 8px 28px -6px rgba(0, 109, 255, .9), 0 0 34px -6px rgba(92, 157, 255, .75);
}
:where(html[data-theme="future"]) .btn.danger { color: var(--danger); border-color: rgba(255, 91, 91, .3); }
:where(html[data-theme="future"]) .btn.danger:hover { background: rgba(255, 91, 91, .12); border-color: rgba(255, 91, 91, .55); box-shadow: 0 0 18px -8px rgba(255, 91, 91, .8); }
:where(html[data-theme="future"]) .btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
:where(html[data-theme="future"]) .btn.ghost:hover { background: rgba(92, 157, 255, .1); }
:where(html[data-theme="future"]) .btn[disabled] { box-shadow: none; }
:where(html[data-theme="future"]) .icon-btn { border-radius: 50%; color: var(--muted); transition: background .18s, color .18s, box-shadow .2s; }
:where(html[data-theme="future"]) .icon-btn:hover { background: rgba(92, 157, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px var(--f-edge); }
:where(html[data-theme="future"]) [data-act=voice][aria-pressed=true] { background: rgba(255, 91, 91, .14); border-color: var(--danger); color: var(--danger); box-shadow: 0 0 22px -6px rgba(255, 91, 91, .7); }

:where(html[data-theme="future"]) .field > span { color: var(--muted); }
:where(html[data-theme="future"]) .input,
:where(html[data-theme="future"]) textarea.input,
:where(html[data-theme="future"]) select.input {
  background: var(--f-well); border-color: rgba(138, 184, 255, .2); color: var(--ink);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45); transition: border-color .18s, box-shadow .2s;
}
:where(html[data-theme="future"]) .input::placeholder { color: #8090AC; opacity: 1; }
:where(html[data-theme="future"]) .input:hover { border-color: rgba(138, 184, 255, .32); }
:where(html[data-theme="future"]) .input:focus { border-color: #5C9DFF; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45), 0 0 0 3px rgba(0, 109, 255, .28), 0 0 20px -2px rgba(0, 109, 255, .5); }
:where(html[data-theme="future"]) select.input option { background: #0b1324; color: var(--ink); }
:where(html[data-theme="future"]) input[type=checkbox],
:where(html[data-theme="future"]) input[type=radio],
:where(html[data-theme="future"]) input[type=range],
:where(html[data-theme="future"]) progress { accent-color: #2f86ff; }
:where(html[data-theme="future"]) .hint { color: var(--faint); }

:where(html[data-theme="future"]) .chip {
  background: rgba(14, 23, 44, .86); border-color: var(--f-edge); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(200, 222, 255, .05); transition: background .18s, border-color .18s, box-shadow .2s;
}
:where(html[data-theme="future"]) .chip:hover { border-color: var(--f-edge-hi); background: rgba(24, 39, 72, .9); }
:where(html[data-theme="future"]) .chip.on { background: var(--accent) var(--f-lit); border-color: rgba(138, 184, 255, .6); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 0 18px -4px rgba(0, 109, 255, .8); }
:where(html[data-theme="future"]) .chip.ghost { background: transparent; border-color: rgba(138, 184, 255, .3); color: var(--accent-text); box-shadow: none; }
:where(html[data-theme="future"]) .chip.ghost:hover { background: rgba(92, 157, 255, .08); border-color: var(--f-edge-hi); }

:where(html[data-theme="future"]) .seg { background: var(--f-well); border-color: var(--line); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45); }
:where(html[data-theme="future"]) .seg button { color: var(--muted); transition: color .18s, background .2s, box-shadow .2s; }
:where(html[data-theme="future"]) .seg button:hover { color: var(--ink); }
:where(html[data-theme="future"]) .seg button.on {
  background: linear-gradient(180deg, rgba(0, 109, 255, .38), rgba(0, 109, 255, .18)); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(138, 184, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 16px -4px rgba(0, 109, 255, .8);
}
:where(html[data-theme="future"]) .stepper { border-color: var(--f-edge); }
:where(html[data-theme="future"]) .stepper button { background: rgba(22, 34, 60, .7); color: var(--ink); }
:where(html[data-theme="future"]) .stepper button:hover { background: rgba(0, 109, 255, .22); }

/* ---------- panels: glass, lit at the edges ---------- */
/* The big panels get frosted glass and a border of light that's brightest at the top left. */
:where(html[data-theme="future"]) :is(.stage, .room, .home-now, .login-card, .guide-article) {
  background: var(--f-hero); border-color: rgba(138, 184, 255, .12);
  box-shadow: inset 0 1px 0 rgba(200, 222, 255, .06), 0 28px 60px -30px rgba(0, 0, 0, .95), 0 0 50px -30px rgba(0, 109, 255, .45);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
}
:where(html[data-theme="future"]) :is(.stage, .room, .home-now, .login-card) { position: relative; }
@media (max-width: 899px) { :where(html[data-theme="future"]) .guide-article { position: relative; } }
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  :where(html[data-theme="future"]) :is(.stage, .room, .home-now, .login-card, .guide-article, .sheet)::before {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(152deg, rgba(170, 206, 255, .6), rgba(92, 157, 255, .14) 26%, rgba(92, 157, 255, .04) 58%, rgba(0, 109, 255, .36));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }
}
:where(html[data-theme="future"]) .card { background: var(--panel); border-color: var(--line); box-shadow: var(--shadow); }
:where(html[data-theme="future"]) .card.sel { border-color: #5C9DFF; box-shadow: 0 0 0 1px #5C9DFF, 0 0 26px -6px var(--f-glow); }
:where(html[data-theme="future"]) .card .thumb { background: var(--screen); }
:where(html[data-theme="future"]) .card .thumb .glyph { color: var(--faint); }
:where(html[data-theme="future"]) .sel .check { background: var(--accent); border-color: #8AB8FF; box-shadow: 0 0 12px var(--f-glow); }
:where(html[data-theme="future"]) .badge { background: rgba(138, 184, 255, .13); color: #BBCDEB; }
:where(html[data-theme="future"]) .badge.live,
:where(html[data-theme="future"]) .badge.warn { background: rgba(255, 91, 91, .15); color: #FF9B9B; box-shadow: inset 0 0 0 1px rgba(255, 91, 91, .3); }
:where(html[data-theme="future"]) .banner {
  background: linear-gradient(90deg, rgba(0, 109, 255, .24), rgba(0, 109, 255, .07)), rgba(5, 10, 24, .86); border-color: rgba(92, 157, 255, .45);
  box-shadow: inset 0 1px 0 rgba(200, 222, 255, .07), 0 0 30px -14px rgba(0, 109, 255, .9);
}
:where(html[data-theme="future"]) .banner > svg.i { color: var(--f-holo); }
:where(html[data-theme="future"]) .dot { background: #5d6a82; }
:where(html[data-theme="future"]) .dot.on { background: var(--ok); box-shadow: 0 0 8px rgba(61, 220, 132, .75); }

/* floating bars: dark glass */
:where(html[data-theme="future"]) .actionbar,
:where(html[data-theme="future"]) .quickbar {
  background: var(--float); border-color: var(--f-edge);
  backdrop-filter: var(--f-blur); -webkit-backdrop-filter: var(--f-blur);
  box-shadow: inset 0 1px 0 rgba(200, 222, 255, .07), 0 18px 50px -12px rgba(0, 0, 0, .9), 0 0 36px -16px rgba(0, 109, 255, .7);
}
:where(html[data-theme="future"]) .sharing {
  background: rgba(42, 8, 14, .84); border-color: rgba(255, 91, 91, .5); color: #FFE3E3;
  backdrop-filter: var(--f-blur); -webkit-backdrop-filter: var(--f-blur);
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, .9), 0 0 28px -8px rgba(255, 59, 59, .6);
}
:where(html[data-theme="future"]) .sharing .rec,
:where(html[data-theme="future"]) .station-status .rec { box-shadow: 0 0 10px rgba(255, 91, 91, .9); }

/* ---------- walls ---------- */
:where(html[data-theme="future"]) .wall-grid { background: var(--f-well); box-shadow: inset 0 0 0 1px var(--line); }
:where(html[data-theme="future"]) .wall-cell { background: rgba(20, 32, 58, .55); color: var(--muted); }
:where(html[data-theme="future"]) .wall-cell.set { background: rgba(0, 109, 255, .2); color: #fff; border-color: rgba(92, 157, 255, .55); box-shadow: inset 0 0 16px rgba(0, 109, 255, .3); }
:where(html[data-theme="future"]) button.wall-cell,
:where(html[data-theme="future"]) .wall-cell { border-color: rgba(138, 184, 255, .22); }
:where(html[data-theme="future"]) .wall-cell.set { border-color: rgba(92, 157, 255, .55); }
:where(html[data-theme="future"]) .wall-icon i { background: rgba(0, 109, 255, .25); border-color: rgba(92, 157, 255, .55); box-shadow: 0 0 6px -1px rgba(0, 109, 255, .7); }

/* ---------- library ---------- */
:where(html[data-theme="future"]) .media { background: var(--panel); border-color: var(--line); box-shadow: var(--shadow); transition: border-color .18s, box-shadow .2s; }
:where(html[data-theme="future"]) .media:hover { border-color: var(--f-edge-hi); }
:where(html[data-theme="future"]) .media.sel { border-color: #5C9DFF; box-shadow: 0 0 0 1px #5C9DFF, 0 0 24px -6px var(--f-glow); }
:where(html[data-theme="future"]) .media .mthumb { background: var(--screen); }
:where(html[data-theme="future"]) .media .order { background: var(--accent); box-shadow: 0 0 10px var(--f-glow); }
:where(html[data-theme="future"]) .upload { background: var(--panel); border-color: var(--line); }
:where(html[data-theme="future"]) .bar { background: var(--f-well); }
:where(html[data-theme="future"]) .bar > i { background: linear-gradient(90deg, #006DFF, #5C9DFF); box-shadow: 0 0 10px rgba(0, 109, 255, .9); }

/* ---------- lists ---------- */
:where(html[data-theme="future"]) .item { background: var(--panel); border-color: var(--line); box-shadow: var(--shadow); }
:where(html[data-theme="future"]) .item .ico,
:where(html[data-theme="future"]) .np-ico,
:where(html[data-theme="future"]) .guide-ico,
:where(html[data-theme="future"]) .stage-ico,
:where(html[data-theme="future"]) .app-row .ico { background: var(--f-orb); color: var(--f-icon); box-shadow: var(--f-orb-shadow); }
:where(html[data-theme="future"]) .item .poster { background: var(--panel-3); }
:where(html[data-theme="future"]) .empty { background: rgba(7, 12, 26, .72); border-color: rgba(138, 184, 255, .22); color: var(--muted); }
:where(html[data-theme="future"]) .empty svg.i { color: var(--f-icon); filter: drop-shadow(0 0 10px rgba(0, 109, 255, .7)); }
:where(html[data-theme="future"]) .empty h3 { color: var(--ink); }
:where(html[data-theme="future"]) .section-title { color: var(--accent-text); text-shadow: 0 0 18px rgba(0, 109, 255, .5); }
:where(html[data-theme="future"]) .eyebrow { color: var(--accent-text); }

/* ---------- sheets and dialogs ---------- */
:where(html[data-theme="future"]) .scrim {
  background: radial-gradient(ellipse 90% 70% at 50% 100%, rgba(0, 44, 120, .34), rgba(0, 3, 12, .74) 72%);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
:where(html[data-theme="future"]) .sheet {
  background: var(--f-sheet); border-color: rgba(138, 184, 255, .14);
  backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(200, 222, 255, .08), 0 -24px 80px rgba(0, 0, 0, .75), 0 0 70px -24px rgba(0, 109, 255, .6);
}
:where(html[data-theme="future"]) .sheet-head h2 { color: #F4F8FF; }
:where(html[data-theme="future"]) .sheet-foot { border-top-color: rgba(138, 184, 255, .12); }
:where(html[data-theme="future"]) .targets { background: var(--f-well); box-shadow: inset 0 0 0 1px var(--line); }
:where(html[data-theme="future"]) .pick label { background: var(--panel-2); border-color: var(--line); transition: border-color .18s, background .2s, box-shadow .2s; }
:where(html[data-theme="future"]) .pick label:hover { border-color: rgba(138, 184, 255, .32); }
:where(html[data-theme="future"]) .pick label:has(input:checked) { background: rgba(0, 109, 255, .13); border-color: rgba(92, 157, 255, .6); box-shadow: 0 0 22px -10px rgba(0, 109, 255, .9); }
:where(html[data-theme="future"]) .code { background: var(--f-well); border-color: var(--line); color: #CFE0FF; }
:where(html[data-theme="future"]) .steps li::marker { color: var(--accent-text); }

/* ---------- sign in ---------- */
:where(html[data-theme="future"]) .login { background: radial-gradient(ellipse 70% 46% at 50% 46%, rgba(0, 109, 255, .2), rgba(0, 109, 255, .05) 55%, transparent 75%); }
:where(html[data-theme="future"]) .login-card {
  background: linear-gradient(180deg, rgba(16, 27, 52, .72), rgba(5, 9, 22, .82));
  box-shadow: inset 0 1px 0 rgba(200, 222, 255, .08), 0 40px 90px -40px rgba(0, 0, 0, 1), 0 0 90px -30px rgba(0, 109, 255, .75);
}
:where(html[data-theme="future"]) .login-card h1 { color: #F4F8FF; text-shadow: 0 0 34px rgba(0, 109, 255, .4); }
:where(html[data-theme="future"]) .login-card p { color: var(--muted); }

/* the toast: a glass capsule with a blue glow; errors glow red */
:where(html[data-theme="future"]) #toast {
  background: rgba(10, 18, 37, .9); color: var(--ink);
  backdrop-filter: var(--f-blur); -webkit-backdrop-filter: var(--f-blur);
  box-shadow: inset 0 0 0 1px rgba(138, 184, 255, .3), inset 0 1px 0 rgba(200, 222, 255, .1), 0 14px 40px -10px rgba(0, 0, 0, .9), 0 0 32px -8px rgba(0, 109, 255, .7);
}
:where(html[data-theme="future"]) #toast.err {
  background: rgba(58, 9, 15, .92); color: #FFE1E1;
  box-shadow: inset 0 0 0 1px rgba(255, 91, 91, .6), 0 14px 40px -10px rgba(0, 0, 0, .9), 0 0 32px -8px rgba(255, 59, 59, .65);
}
:where(html[data-theme="future"]) .toast-btn { background: var(--accent) var(--f-lit); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 16px -4px rgba(0, 109, 255, .9); }
:where(html[data-theme="future"]) .toast-btn:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 0 22px -2px rgba(0, 109, 255, 1); }

/* ---------- live pictures of the TVs: screens that glow ---------- */
:where(html[data-theme="future"]) .pv-age,
:where(html[data-theme="future"]) .pic-name { background: rgba(0, 4, 14, .72); color: #DCE7FA; box-shadow: inset 0 0 0 1px rgba(138, 184, 255, .14); }
:where(html[data-theme="future"]) .pics figcaption { color: var(--muted); }
:where(html[data-theme="future"]) .pic-cell { background: var(--screen); border-color: rgba(138, 184, 255, .14); box-shadow: 0 10px 26px -16px rgba(0, 109, 255, .6); }
:where(html[data-theme="future"]) .pic-cell:has(.pv-img:not([hidden])) { border-color: rgba(138, 184, 255, .26); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 10px 30px -12px rgba(0, 109, 255, .8), 0 0 22px -10px rgba(120, 175, 255, .7); }
:where(html[data-theme="future"]) .pic-none { color: #8E9DB6; }

/* ---------- now playing ---------- */
:where(html[data-theme="future"]) .np { background: var(--panel-2); border-color: var(--line); box-shadow: inset 0 1px 0 rgba(200, 222, 255, .05); }
:where(html[data-theme="future"]) .np-btns .icon-btn { color: var(--ink); }
:where(html[data-theme="future"]) .np-play { background: var(--accent) var(--f-lit); box-shadow: var(--f-lit-shadow); }

/* ---------- remote ---------- */
:where(html[data-theme="future"]) .r-btn {
  background: linear-gradient(180deg, rgba(21, 33, 60, .9), rgba(9, 15, 30, .92)); border-color: var(--f-edge); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(200, 222, 255, .07), 0 10px 24px -14px rgba(0, 0, 0, .95); transition: border-color .15s, box-shadow .2s, background .15s, transform .08s;
}
:where(html[data-theme="future"]) .r-btn:hover { border-color: var(--f-edge-hi); }
:where(html[data-theme="future"]) .r-btn svg.i { color: var(--f-icon); }
:where(html[data-theme="future"]) .r-btn.pressed,
:where(html[data-theme="future"]) .dp.pressed { background: rgba(0, 109, 255, .26); border-color: #5C9DFF; box-shadow: 0 0 24px -4px rgba(0, 109, 255, .9); }
:where(html[data-theme="future"]) .r-sent { color: var(--muted); }
:where(html[data-theme="future"]) .r-scroll .r-label { color: var(--ink); }
/* the d-pad: a glass disc with a ring of light and a lit OK */
:where(html[data-theme="future"]) .dpad {
  background: radial-gradient(circle at 50% 32%, rgba(32, 50, 90, .85), rgba(9, 14, 30, .92) 62%, rgba(4, 7, 16, .95));
  border-color: rgba(138, 184, 255, .24);
  box-shadow: inset 0 1px 0 rgba(220, 235, 255, .1), inset 0 0 44px rgba(0, 109, 255, .14), 0 0 0 7px rgba(0, 109, 255, .05), 0 24px 56px -14px rgba(0, 0, 0, .95), 0 0 50px -14px rgba(0, 109, 255, .5);
}
:where(html[data-theme="future"]) .dpad::before {
  content: ""; position: absolute; inset: 15%; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(138, 184, 255, .1); box-shadow: 0 0 22px -6px rgba(0, 109, 255, .35);
}
:where(html[data-theme="future"]) .dp { color: #CFE0FF; }
:where(html[data-theme="future"]) .dp:hover { color: #fff; filter: drop-shadow(0 0 8px rgba(92, 157, 255, .9)); }
:where(html[data-theme="future"]) .dp.ok {
  background: radial-gradient(circle at 50% 30%, #1f7dff, #006DFF 55%, #0050c8); color: #fff; text-shadow: 0 1px 2px rgba(0, 24, 80, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -6px 14px rgba(0, 20, 80, .35), 0 0 0 5px rgba(0, 109, 255, .16), 0 0 34px rgba(0, 109, 255, .7);
}
:where(html[data-theme="future"]) .dp.ok:hover { filter: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 0 0 6px rgba(0, 109, 255, .22), 0 0 44px rgba(0, 109, 255, .9); }
:where(html[data-theme="future"]) .dp.ok.pressed { background: radial-gradient(circle at 50% 30%, #2a86ff, #0062ec); }
/* the touchpad: a holographic grid */
:where(html[data-theme="future"]) .touchpad {
  background:
    linear-gradient(rgba(92, 157, 255, .08) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(92, 157, 255, .08) 1px, transparent 1px) 0 0 / 20px 20px,
    radial-gradient(ellipse at 50% 55%, rgba(0, 109, 255, .14), transparent 72%),
    #030712;
  border-color: var(--f-edge); color: var(--muted); box-shadow: inset 0 0 30px rgba(0, 0, 0, .5);
}
:where(html[data-theme="future"]) .scrollstrip { background: linear-gradient(180deg, rgba(0, 109, 255, .12), transparent 50%, rgba(0, 109, 255, .12)), #030712; border-color: var(--f-edge); color: var(--muted); }
:where(html[data-theme="future"]) .more-keys { border-top-color: var(--line); }
:where(html[data-theme="future"]) .more-keys summary,
:where(html[data-theme="future"]) details summary { color: var(--accent-text); }

/* ---------- guide ---------- */
:where(html[data-theme="future"]) .guide-link { background: var(--panel); border-color: var(--line); box-shadow: var(--shadow); color: var(--ink); transition: border-color .18s, background .2s, box-shadow .2s; }
:where(html[data-theme="future"]) .guide-link:hover { background: rgba(24, 38, 68, .74); border-color: var(--f-edge-hi); }
:where(html[data-theme="future"]) .guide-link.on { background: rgba(0, 109, 255, .16); border-color: #5C9DFF; box-shadow: inset 0 0 0 1px rgba(92, 157, 255, .25), 0 0 26px -10px rgba(0, 109, 255, 1); }
:where(html[data-theme="future"]) .guide-article h2 { color: #F4F8FF; }
:where(html[data-theme="future"]) .guide-article li::marker { color: #5C9DFF; }
:where(html[data-theme="future"]) .guide-article .tip { background: linear-gradient(90deg, rgba(0, 109, 255, .2), rgba(0, 109, 255, .06)); border-color: rgba(92, 157, 255, .45); color: var(--ink); }
:where(html[data-theme="future"]) .terms dd { color: var(--muted); }
:where(html[data-theme="future"]) .guide-next { background: var(--panel-2); border-color: var(--line); color: var(--ink); transition: border-color .18s, box-shadow .2s; }
:where(html[data-theme="future"]) .guide-next:hover { border-color: #5C9DFF; box-shadow: 0 0 24px -10px rgba(0, 109, 255, 1); }

/* ---------- camera station ---------- */
:where(html[data-theme="future"]) .station video { background: var(--screen); border-color: var(--f-edge); box-shadow: 0 0 40px -16px rgba(0, 109, 255, .8); }
:where(html[data-theme="future"]) .station-status { background: var(--panel); border-color: var(--line); }
:where(html[data-theme="future"]) .station-status.live { background: rgba(255, 91, 91, .12); border-color: rgba(255, 91, 91, .5); }

/* ---------- welcome tour ---------- */
:where(html[data-theme="future"]) .tour-mark { filter: drop-shadow(0 0 18px rgba(0, 109, 255, .75)); }
:where(html[data-theme="future"]) .tour-dots i { background: rgba(138, 184, 255, .2); }
:where(html[data-theme="future"]) .tour-dots i.done { background: rgba(138, 184, 255, .5); }
:where(html[data-theme="future"]) .tour-dots i.on { background: #5C9DFF; box-shadow: 0 0 10px rgba(0, 109, 255, 1); }

/* ---------- TVs tab: the room map, a holographic floor plan ---------- */
:where(html[data-theme="future"]) .room {
  background:
    linear-gradient(rgba(92, 157, 255, .05) 1px, transparent 1px) -1px -1px / 22px 22px,
    linear-gradient(90deg, rgba(92, 157, 255, .05) 1px, transparent 1px) -1px -1px / 22px 22px,
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(0, 109, 255, .16), transparent 70%),
    var(--f-hero);
}
:where(html[data-theme="future"]) .room.combining { border-color: rgba(92, 157, 255, .6); box-shadow: inset 0 1px 0 rgba(200, 222, 255, .06), 0 0 50px -16px rgba(0, 109, 255, .9); }
:where(html[data-theme="future"]) .tile {
  background: linear-gradient(180deg, rgba(14, 23, 44, .86), rgba(7, 12, 26, .9)); border-color: rgba(138, 184, 255, .15); color: var(--ink);
  box-shadow: 0 12px 26px -16px rgba(0, 0, 0, .95), 0 14px 30px -20px rgba(0, 109, 255, .55);
}
:where(html[data-theme="future"]) .tile:hover { border-color: rgba(138, 184, 255, .38); }
:where(html[data-theme="future"]) .tile.off,
:where(html[data-theme="future"]) .tile.offline { box-shadow: 0 12px 26px -16px rgba(0, 0, 0, .95); } /* a dark TV lights nothing */
/* Each screen is dark glass with a faint glare; when it has a real picture it lights the tile below it. */
:where(html[data-theme="future"]) .tile-screen { background: radial-gradient(ellipse at 50% 125%, #0c1a36, var(--screen) 70%); color: #6F7E98; box-shadow: inset 0 -1px 0 rgba(138, 184, 255, .12); }
:where(html[data-theme="future"]) .tile-screen::before,
:where(html[data-theme="future"]) .pic-cell::before,
:where(html[data-theme="future"]) .where-picture::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01) 22%, transparent 30%);
}
:where(html[data-theme="future"]) .tile-screen:has(.pv-img:not([hidden])),
:where(html[data-theme="future"]) .tile-screen:has(> img:not(.pv-img)) { box-shadow: inset 0 -1px 0 rgba(138, 184, 255, .16), 0 10px 26px -6px rgba(0, 109, 255, .55); }
:where(html[data-theme="future"]) .tile.off .tile-screen,
:where(html[data-theme="future"]) .tile.offline .tile-screen { box-shadow: inset 0 -1px 0 rgba(138, 184, 255, .08); }
:where(html[data-theme="future"]) .tile-win { background: #10223f; border-color: #4a6a9a; }
:where(html[data-theme="future"]) .tile-win.focused { border-color: #8db2ff; background: #133063; box-shadow: 0 0 10px -2px rgba(92, 157, 255, .8); }
:where(html[data-theme="future"]) .tile-name { color: var(--ink); }
:where(html[data-theme="future"]) .tile-now { color: var(--muted); }
:where(html[data-theme="future"]) .tile.in { border-color: rgba(92, 157, 255, .42); background: linear-gradient(180deg, rgba(0, 72, 170, .3), rgba(6, 14, 34, .9)); }
:where(html[data-theme="future"]) .tile.in .tile-screen { box-shadow: inset 0 0 0 2px rgba(92, 157, 255, .45), 0 10px 26px -6px rgba(0, 109, 255, .6); }
:where(html[data-theme="future"]) .tile.sel,
:where(html[data-theme="future"]) .tile.picked { border-color: #5C9DFF; box-shadow: 0 0 0 2px #2f86ff, 0 0 28px -2px rgba(0, 109, 255, .8), 0 14px 30px -18px rgba(0, 0, 0, .95); }
:where(html[data-theme="future"]) .tile.picked .tick { background: var(--accent); border-color: #8AB8FF; box-shadow: 0 0 12px var(--f-glow); }

:where(html[data-theme="future"]) .stage-head h2 { color: #F4F8FF; }
:where(html[data-theme="future"]) .now-line { background: var(--f-well); border-color: var(--line); color: var(--muted); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4); }
:where(html[data-theme="future"]) .now-line b { color: var(--ink); }
:where(html[data-theme="future"]) .now-line svg.i { color: var(--f-icon); filter: drop-shadow(0 0 6px rgba(0, 109, 255, .8)); }
:where(html[data-theme="future"]) .link-btn { color: var(--accent-text); }
:where(html[data-theme="future"]) .link-btn:hover { color: #A9CBFF; }

/* the desktop drawn to scale */
:where(html[data-theme="future"]) .desk { border-color: rgba(138, 184, 255, .3); background: radial-gradient(ellipse at 50% 160%, #1c3f75, #040a16 75%); box-shadow: 0 0 40px -18px rgba(0, 109, 255, .9); }
:where(html[data-theme="future"]) .desk-app { background: #0f2040; border-color: #5274a6; }
:where(html[data-theme="future"]) .desk-app.focused { border-color: #92b6ff; box-shadow: 0 0 0 1px #5288e7, 0 0 18px -4px rgba(0, 109, 255, .9), 0 6px 16px #0007; }
:where(html[data-theme="future"]) .app-row { background: var(--panel-2); border-color: var(--line); }
:where(html[data-theme="future"]) .app-row.on { background: rgba(0, 109, 255, .14); border-color: rgba(92, 157, 255, .5); box-shadow: 0 0 22px -10px rgba(0, 109, 255, .9); }
:where(html[data-theme="future"]) .pano-preview { border-color: rgba(92, 157, 255, .35); box-shadow: 0 0 34px -14px rgba(0, 109, 255, .9); }

/* ---------- picking what to control ---------- */
:where(html[data-theme="future"]) .target-bar {
  background: linear-gradient(180deg, rgba(18, 30, 56, .9), rgba(7, 12, 26, .92)); border-color: rgba(92, 157, 255, .4); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(200, 222, 255, .08), 0 0 32px -14px rgba(0, 109, 255, .9); transition: border-color .18s, box-shadow .2s;
}
:where(html[data-theme="future"]) .target-bar:hover { border-color: #5C9DFF; box-shadow: inset 0 1px 0 rgba(200, 222, 255, .1), 0 0 36px -10px rgba(0, 109, 255, 1); }
:where(html[data-theme="future"]) .target-bar > svg.i { color: var(--f-icon); }
:where(html[data-theme="future"]) .item.tap { color: var(--ink); transition: background .18s, border-color .18s, box-shadow .2s; }
:where(html[data-theme="future"]) .item.tap:hover { background: rgba(24, 38, 68, .78); border-color: var(--f-edge-hi); box-shadow: inset 0 1px 0 rgba(200, 222, 255, .06), 0 0 22px -12px rgba(0, 109, 255, .9); }
:where(html[data-theme="future"]) .item.tap.on { border-color: #5C9DFF; box-shadow: 0 0 0 1px rgba(92, 157, 255, .4), 0 0 22px -8px rgba(0, 109, 255, .9); }
:where(html[data-theme="future"]) .item.tap > svg.i { color: var(--f-icon); }

/* ---------- "Show something" ---------- */
:where(html[data-theme="future"]) .tile-btn {
  background: linear-gradient(180deg, rgba(19, 31, 56, .9), rgba(8, 14, 28, .92)); border-color: var(--line); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(200, 222, 255, .06), 0 12px 28px -18px rgba(0, 0, 0, .95); transition: border-color .18s, box-shadow .2s, background .2s;
}
:where(html[data-theme="future"]) .tile-btn:hover { border-color: var(--f-edge-hi); box-shadow: inset 0 1px 0 rgba(200, 222, 255, .08), 0 0 26px -10px rgba(0, 109, 255, .9); }
:where(html[data-theme="future"]) .tile-btn > .i { background: var(--f-orb); color: var(--f-icon); box-shadow: var(--f-orb-shadow); }
:where(html[data-theme="future"]) .tile-btn span { color: var(--muted); }

/* ---------- remote, library, settings ---------- */
:where(html[data-theme="future"]) .more-keys { border-top-color: var(--line); }
:where(html[data-theme="future"]) .arrange { border-color: var(--line); }

/* ---------- arranging apps ---------- */
:where(html[data-theme="future"]) .desk-ghost { border-color: #8db2ff; background: rgba(0, 109, 255, .2); box-shadow: 0 0 20px -4px rgba(0, 109, 255, .9); }

/* ---------- guided TV installation ---------- */
:where(html[data-theme="future"]) .setup-progress li { color: var(--muted); }
:where(html[data-theme="future"]) .setup-progress li > span { background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--line); }
:where(html[data-theme="future"]) .setup-progress [aria-current] > span,
:where(html[data-theme="future"]) .setup-progress .done > span { background: var(--accent); color: #fff; box-shadow: 0 0 14px -2px rgba(0, 109, 255, .9); }
:where(html[data-theme="future"]) .setup-error { background: rgba(255, 91, 91, .13); color: #FF9B9B; box-shadow: inset 0 0 0 1px rgba(255, 91, 91, .35); }
:where(html[data-theme="future"]) .setup-pick { background: var(--panel-2); border-color: var(--line); color: var(--ink); }
:where(html[data-theme="future"]) .setup-pick:hover { border-color: var(--f-edge-hi); }
:where(html[data-theme="future"]) .setup-pick.selected { border-color: #5C9DFF; box-shadow: inset 0 0 0 1px #5C9DFF, 0 0 22px -8px rgba(0, 109, 255, .9); }
:where(html[data-theme="future"]) .setup-tick { color: var(--f-holo); }
:where(html[data-theme="future"]) .setup-picture { background: var(--screen); box-shadow: 0 0 0 1px rgba(138, 184, 255, .14), 0 8px 20px -10px rgba(0, 109, 255, .7); }
:where(html[data-theme="future"]) .setup-identify,
:where(html[data-theme="future"]) .setup-modes label { border-color: var(--line); background: rgba(10, 17, 33, .5); }
:where(html[data-theme="future"]) .setup-number { background: var(--f-orb); color: #CFE0FF; box-shadow: var(--f-orb-shadow); }
:where(html[data-theme="future"]) .setup-grid-scroll { background: var(--f-well); border-color: var(--line); }
:where(html[data-theme="future"]) .setup-cell { background: rgba(16, 26, 48, .7); border-color: rgba(138, 184, 255, .22); color: var(--muted); }
:where(html[data-theme="future"]) .setup-cell.filled { color: var(--ink); border-color: rgba(138, 184, 255, .3); }
:where(html[data-theme="future"]) .setup-cell b { color: var(--accent-text); }
:where(html[data-theme="future"]) .setup-cell.active { border-color: #5C9DFF; background: rgba(0, 109, 255, .18); box-shadow: 0 0 22px -6px rgba(0, 109, 255, .9); }

/* ---------- Home ---------- */
:where(html[data-theme="future"]) .home-date { color: var(--muted); }
:where(html[data-theme="future"]) .home-now { transition: box-shadow .25s; }
:where(html[data-theme="future"]) .home-now:hover { box-shadow: inset 0 1px 0 rgba(200, 222, 255, .08), 0 28px 60px -30px rgba(0, 0, 0, .95), 0 0 60px -22px rgba(0, 109, 255, .8); }
:where(html[data-theme="future"]) .home-act {
  background: linear-gradient(180deg, rgba(19, 31, 56, .9), rgba(7, 12, 26, .92)); border-color: rgba(138, 184, 255, .15); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(200, 222, 255, .07), 0 18px 36px -22px rgba(0, 0, 0, .95); transition: border-color .18s, box-shadow .25s;
}
:where(html[data-theme="future"]) .home-act:hover { border-color: var(--f-edge-hi); box-shadow: inset 0 1px 0 rgba(200, 222, 255, .09), 0 0 34px -12px rgba(0, 109, 255, .9); }
:where(html[data-theme="future"]) .home-act > svg.i { background: var(--f-orb); color: var(--f-icon); box-shadow: var(--f-orb-shadow); }
:where(html[data-theme="future"]) .home-act span { color: var(--muted); }
/* "Show something": a slab of lit blue. A shade deeper than the brand blue so its small grey-white text reads (AA). */
:where(html[data-theme="future"]) .home-act.primary {
  background: radial-gradient(ellipse 90% 80% at 100% 0%, rgba(120, 180, 255, .34), transparent 60%), linear-gradient(160deg, #005ee2, #004fc2 70%, #003f9e);
  border-color: rgba(138, 184, 255, .55); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 1px rgba(0, 109, 255, .3), 0 16px 40px -14px rgba(0, 109, 255, .85), 0 0 46px -14px rgba(92, 157, 255, .7);
}
:where(html[data-theme="future"]) .home-act.primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36), 0 0 0 1px rgba(92, 157, 255, .5), 0 18px 46px -12px rgba(0, 109, 255, 1), 0 0 56px -10px rgba(92, 157, 255, .85); }
:where(html[data-theme="future"]) .home-act.primary > svg.i { background: rgba(255, 255, 255, .18); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
:where(html[data-theme="future"]) .home-act.primary span { color: #EAF2FF; }

/* ---------- PiHaven, Drive and the visual TV picker ---------- */
:where(html[data-theme="future"]) .ph-photo { background: var(--panel); border-color: var(--line); color: var(--ink); transition: border-color .18s, box-shadow .2s; }
:where(html[data-theme="future"]) .ph-photo:hover { border-color: var(--f-edge-hi); box-shadow: 0 0 24px -10px rgba(0, 109, 255, .9); }
:where(html[data-theme="future"]) .ph-thumb { background: var(--screen); }
:where(html[data-theme="future"]) .ph-video-mark { background: rgba(0, 10, 32, .85); box-shadow: inset 0 0 0 1px rgba(138, 184, 255, .25); }
:where(html[data-theme="future"]) .drive-card { background: var(--panel); border-color: var(--line); }
:where(html[data-theme="future"]) .where-tv { background: linear-gradient(180deg, rgba(14, 23, 44, .86), rgba(7, 12, 26, .9)); border-color: rgba(138, 184, 255, .15); color: var(--ink); transition: border-color .18s, box-shadow .2s; }
:where(html[data-theme="future"]) .where-tv:hover { border-color: var(--f-edge-hi); }
:where(html[data-theme="future"]) .where-tv.selected { border-color: #5C9DFF; box-shadow: 0 0 26px -6px rgba(0, 109, 255, .9); }
:where(html[data-theme="future"]) .where-tv > small { color: var(--muted); }
:where(html[data-theme="future"]) .where-picture { background: radial-gradient(ellipse at 50% 125%, #0c1a36, var(--screen) 70%); color: #8E9DB6; }
:where(html[data-theme="future"]) .where-mini i { background: rgba(138, 184, 255, .12); border-color: rgba(138, 184, 255, .22); }
:where(html[data-theme="future"]) .where-mini i.picked { background: #2f86ff; border-color: #8AB8FF; box-shadow: 0 0 6px rgba(0, 109, 255, .9); }

/* ---------- less motion ---------- */
@media (prefers-reduced-motion: reduce) {
  :where(html[data-theme="future"]) body::after,
  :where(html[data-theme="future"]) .conn.on::after,
  :where(html[data-theme="future"]) :focus-visible { animation: none; }
  :where(html[data-theme="future"]) .conn.on::after { opacity: 0; }
  /* sheets and bars still fade in, but nothing slides or scales */
  :where(html[data-theme="future"]) .sheet.enter,
  :where(html[data-theme="future"]) .actionbar { animation-name: f-fade; }
  :where(html[data-theme="future"]) .sharing .rec,
  :where(html[data-theme="future"]) .station-status .rec { animation: none; }
  :where(html[data-theme="future"]) .btn:active,
  :where(html[data-theme="future"]) .r-btn.pressed,
  :where(html[data-theme="future"]) .dp.pressed,
  :where(html[data-theme="future"]) .np-play:active { transform: none; }
  :where(html[data-theme="future"]) #toast { transition: opacity .2s; }
}
@keyframes f-fade { from { opacity: 0; } }

/* ---------- more contrast, less see-through, or the system's own colours, when asked for ---------- */
@media (prefers-contrast: more) {
  html[data-theme="future"] { --line: rgba(160, 200, 255, .4); --f-edge: rgba(160, 200, 255, .5); --muted: #C3D0E4; --faint: #A9B7CE; }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-theme="future"] {
    --panel: #0b1223; --float: #040814; --scrim: rgba(0, 3, 12, .85);
    --f-hero: linear-gradient(180deg, #111c33, #070c1a); --f-sheet: linear-gradient(180deg, #0f1930, #050915);
  }
}
@media (forced-colors: active) {
  /* the space, the glare and the lit edges are decoration: leave the system's colours to do the work */
  :where(html[data-theme="future"]) body::before,
  :where(html[data-theme="future"]) body::after,
  :where(html[data-theme="future"]) :is(.stage, .room, .home-now, .login-card, .guide-article, .sheet, .tile-screen, .pic-cell, .where-picture, .dpad, .tabbar, .side, .side .tab.on)::before,
  :where(html[data-theme="future"]) :is(.side, .conn.on)::after { display: none; }
  :where(html[data-theme="future"]) :is(.logo, .login-brand) picture img { object-position: 50% 50%; background: none; }
}

/* ---------- the Look picker in Settings (theme.mjs themeSettingsHtml), in both looks ---------- */
.item.theme-settings { display: block; }
.theme-pick .hint { display: block; }
.theme-note { margin: 12px 0 0; }
html:not([data-theme="future"]) .theme-pick label:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
/* A little picture of each look: a panel, a lit button and (for future) a glow in the dark. */
.theme-swatch { position: relative; flex: none; width: 64px; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.theme-swatch i, .theme-swatch b { position: absolute; display: block; }
.theme-swatch i { left: 8px; right: 8px; top: 8px; height: 13px; border-radius: 4px; }
.theme-swatch b { right: 8px; bottom: 7px; width: 22px; height: 8px; border-radius: 99px; background: #006DFF; }
.theme-swatch.future {
  background:
    radial-gradient(1px 1px at 10px 30px, #fff, transparent), radial-gradient(1px 1px at 50px 6px, #cfe0ff, transparent), radial-gradient(1px 1px at 30px 34px, #fff, transparent),
    radial-gradient(ellipse 80% 70% at 90% 0%, rgba(0, 109, 255, .55), transparent 70%), #000;
  border-color: rgba(138, 184, 255, .4);
}
.theme-swatch.future i { background: rgba(20, 32, 58, .8); box-shadow: inset 0 0 0 1px rgba(138, 184, 255, .45); }
.theme-swatch.future b { box-shadow: 0 0 8px #006DFF, 0 0 2px #8AB8FF; }
/* classic follows the system: ice blue and black, half each */
.theme-swatch.classic { background: linear-gradient(135deg, #E8F1FF 50%, #000 50%); }
.theme-swatch.classic i { background: linear-gradient(135deg, #fff 50%, #0E1014 50%); box-shadow: inset 0 0 0 1px #D3E0F3; }