/* CONTROL — themes. Each theme overrides the tokens from app.css and draws its own
   animated backdrop. [data-tp="…"] scopes the same tokens onto the Settings previews. */

/* ---------- shared backdrop layer ---------- */
.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.backdrop i { position: absolute; display: none; }
#app { z-index: 1; }

/* ---------- lock screen as a centered card (glass themes) ---------- */
[data-lock="card"] .lock { background: transparent; justify-content: center; align-items: center; }
[data-lock="card"] .lock-right, [data-lock="card"] .lock .corner, [data-lock="card"] .lock .clear-line { display: none; }
[data-lock="card"] .lock-left { width: 440px; max-width: calc(100vw - 32px); padding: 36px 40px 28px; gap: 34px; justify-content: flex-start;
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r); box-shadow: var(--shadow), var(--gloss);
  backdrop-filter: blur(calc(var(--blur) + 8px)); -webkit-backdrop-filter: blur(calc(var(--blur) + 8px)); animation: cardin .9s cubic-bezier(.2,.8,.2,1) both; }
[data-lock="card"] .lock-left .brand { justify-content: center; }
[data-lock="card"] .lock-left .title { font-size: 52px; text-align: center; }
[data-lock="card"] .lock-left p, [data-lock="card"] .lock-left .lock-tag { text-align: center; }
[data-lock="card"] .lock-foot { text-align: center; }
[data-lock="card"] .lock .enter { letter-spacing: .04em !important; font-size: 14px; }
[data-lock="card"] .lock .enter:hover { letter-spacing: .12em !important; }
[data-lock="card"] .lock.gone { animation: cardout .7s cubic-bezier(.7,0,.2,1) forwards; }
@keyframes cardin { from { opacity: 0; transform: translateY(24px) scale(.98); filter: blur(8px); } }
@keyframes cardout { to { opacity: 0; transform: scale(1.04); filter: blur(10px); } }

/* ---------- soft page transition (non-terminal themes) ---------- */
.curtain.soft .band { position: absolute; left: 0; right: 0; height: 45%; filter: blur(14px);
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--accent) 22%, transparent) 42%, color-mix(in srgb, #fff 22%, transparent) 50%, color-mix(in srgb, var(--accent) 22%, transparent) 58%, transparent);
  animation: band .7s cubic-bezier(.6,0,.3,1) forwards; }
@keyframes band { from { top: -45%; } to { top: 100%; } }

/* ---------- theme switch: circular reveal from the click point ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: reveal .9s cubic-bezier(.7,0,.2,1); }
@keyframes reveal { from { clip-path: circle(0 at var(--vx, 50%) var(--vy, 50%)); } to { clip-path: circle(150vmax at var(--vx, 50%) var(--vy, 50%)); } }

/* ---------- user motion setting ---------- */
[data-motion="reduced"] *, [data-motion="reduced"] *::before, [data-motion="reduced"] *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition: none !important; }

/* =====================================================================
   TERMINAL — the original. (Tokens live in app.css :root; repeated here
   so the Settings preview shows it even while another theme is active.)
   ===================================================================== */
[data-tp="terminal"] {
  --bg: #060607; --bg2: #0D0D0E; --bg-fill: #060607; --panel: rgba(18,18,19,.78);
  --line: #1C1C1B; --line2: #2A2A28; --edge: #242423; --edge-hi: #3A3A37; --card: #101011; --card-hi: #141415; --sticky: #060607;
  --fg: #E9E9E4; --fg2: #BDBDB7; --mute: #8A8A84; --mute2: #6E6E69; --dim: #5C5C57;
  --hot: #FF5A1F; --accent: #FF5A1F; --ok: #7BE38B; --on-accent: #060607;
  --ui: "JetBrains Mono", ui-monospace, Menlo, monospace; --disp: "Archivo", sans-serif;
  --disp-stretch: 72%; --disp-weight: 850; --disp-ls: -0.01em; --disp-tt: none; --disp-fill: #E9E9E4;
  --label-ls: .2em; --label-tt: uppercase; --r: 0px; --r-btn: 0px; --r-sm: 0px; --gloss: none; --text-shadow: none;
  --btn-bg: transparent; --solid-bg: #E9E9E4; --solid-fg: #060607; --solid-border: #E9E9E4;
}

/* =====================================================================
   MIDNIGHT — navy spotlight, blueprint grid, soft glass (login-box look)
   ===================================================================== */

/* =====================================================================
   OBSIDIAN — black, grainy blue light, heavy frosted glass
   ===================================================================== */
@keyframes spin { to { transform: rotate(360deg); } }

/* =====================================================================
   AERO — glossy sky, bubbles, sun rays, aqua glass
   ===================================================================== */
:root[data-theme="aero"], [data-tp="aero"] {
  --bg: #0A57C2; --bg2: rgba(255,255,255,.14);
  --panel: linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.13) 40%, rgba(18,96,196,.26) 100%); --panel-solid: #1A6FD6;
  --bg-fill: radial-gradient(circle at 86% 6%, rgba(255,255,255,.95) 0, rgba(255,255,255,.45) 5%, rgba(255,255,255,0) 20%), linear-gradient(180deg, #0852BC 0%, #1A7BE3 38%, #3D9CEE 72%, #5AAEF0 100%);
  --line: rgba(255,255,255,.22); --line2: rgba(255,255,255,.42); --edge: rgba(255,255,255,.5); --edge-hi: rgba(255,255,255,.85);
  --card: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.1)); --card-hi: rgba(255,255,255,.28); --sticky: rgba(26,110,214,.6);
  --tile-bg: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.08));
  --fg: #FFFFFF; --fg2: rgba(255,255,255,.92); --mute: rgba(236,248,255,.84); --mute2: rgba(226,243,255,.76); --dim: rgba(214,236,255,.64);
  --hot: #FFC24A; --accent: #7CF05A; --ok: #A6FF93; --on-accent: #0B3D08;
  --hot-edge: rgba(255,194,74,.75); --hot-bg: rgba(255,194,74,.2);
  --ui: "Nunito", "Segoe UI", "Frutiger", sans-serif; --disp: "Nunito", "Segoe UI", sans-serif;
  --disp-stretch: 100%; --disp-weight: 800; --disp-ls: -0.02em; --disp-tt: none;
  --disp-fill: linear-gradient(180deg, #FFFFFF 35%, #D3EEFF 100%);
  --label-ls: .02em; --label-tt: none; --label-size: 12px; --nav-ls: .03em; --btn-ls: .02em;
  --r: 22px; --r-btn: 999px; --r-sm: 14px; --dot-r: 50%;
  --blur: 14px; --shadow: 0 14px 34px rgba(0,46,130,.3);
  --gloss: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -12px 28px rgba(140,210,255,.2);
  --btn-bg: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.14) 50%, rgba(255,255,255,.06) 51%, rgba(255,255,255,.2));
  --input-bg: rgba(255,255,255,.2);
  --solid-bg: linear-gradient(180deg, #C9FFB4 0%, #6FE24D 48%, #3FB81F 52%, #7BEA57 100%); --solid-fg: #0B3D08; --solid-border: rgba(255,255,255,.85);
  --bar-bg: linear-gradient(180deg, rgba(8,70,180,.42), rgba(30,120,220,.22)); --bar-blur: blur(14px);
  --ribbon: #FFFFFF; --ribbon-op: .55; --lock-bg: transparent; --scanlines: none;
  --text-shadow: 0 1px 2px rgba(0,48,120,.45); --disp-shadow: drop-shadow(0 2px 2px rgba(0,50,130,.35));
}
[data-theme="aero"] .foot { background: linear-gradient(180deg, rgba(20,110,215,.62), rgba(10,85,190,.72)); }
[data-theme="aero"] .backdrop .b1 { display: block; width: 260vmax; height: 260vmax; left: calc(86% - 130vmax); top: calc(6% - 130vmax);
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.13) 0 3deg, transparent 3deg 11deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, rgba(0,0,0,.6) 12%, transparent 30%); mask-image: radial-gradient(circle, #000 0, rgba(0,0,0,.6) 12%, transparent 30%);
  animation: spin 140s linear infinite; }
[data-theme="aero"] .backdrop .b2 { display: block; left: -10%; right: -10%; bottom: -6vh; height: 46vh;
  background: radial-gradient(ellipse 30% 45% at 18% 70%, rgba(255,255,255,.75), transparent 70%), radial-gradient(ellipse 26% 40% at 48% 80%, rgba(255,255,255,.6), transparent 70%), radial-gradient(ellipse 32% 42% at 82% 75%, rgba(255,255,255,.7), transparent 70%);
  filter: blur(18px); animation: drift 40s ease-in-out infinite; }
[data-theme="aero"] .backdrop .b3 { display: block; left: 0; right: 0; bottom: 0; height: 14vh;
  background: linear-gradient(to top, rgba(70,180,50,.55), rgba(110,210,80,.25) 50%, transparent); filter: blur(4px); }

/* =====================================================================
   HORIZON — deep blue dream, light beams, wide thin type
   ===================================================================== */

@keyframes streak { 0%,100% { opacity: .55; transform: scaleX(.9); } 50% { opacity: 1; transform: scaleX(1.05); } }

/* =====================================================================
   HYPERLIGHT — cyan light streaks, HUD rings, tech grid
   ===================================================================== */

/* ============================ SETTINGS ============================ */
.settings { padding: 40px; max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 44px; position: relative; }
.settings h1 { font-size: 56px; margin: 8px 0 0; line-height: .95; }
.sec { display: flex; flex-direction: column; gap: 18px; }
.sechead { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tcard { text-align: left; padding: 0; color: var(--fg); border: 1px solid var(--edge); border-radius: var(--r); background: var(--panel); overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--gloss); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .4s; }
.tcard:hover { transform: translateY(-5px); border-color: var(--edge-hi); box-shadow: var(--shadow), var(--gloss); }
.tcard.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.tp { position: relative; height: 176px; overflow: hidden; background: var(--bg-fill); color: var(--fg); font-family: var(--ui); text-shadow: var(--text-shadow);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 16px; }
.tp .disp { font-size: 30px; line-height: 1; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.tp-panel { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--edge); border-radius: calc(var(--r) * .6);
  box-shadow: var(--gloss); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.tcard:hover .tp-panel { transform: translateY(-4px); } .tcard:hover .tp .disp { transform: translateY(-3px); }
.tp-line { flex: 1; font-size: 11px; color: var(--fg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-pill { height: 24px; padding: 0 11px; display: inline-flex; align-items: center; font-size: 10px; border-radius: var(--r-btn); border: 1px solid var(--line2); background: var(--btn-bg, transparent); color: var(--fg); white-space: nowrap; }
.tp-pill.solid { background: var(--solid-bg, var(--fg)); color: var(--solid-fg, var(--bg)); border-color: transparent; text-shadow: none; font-weight: 700; }
.tp-sw { display: flex; gap: 6px; position: absolute; top: 14px; left: 16px; }
.tp-sw span { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); }
.tbadge { position: absolute; top: 12px; right: 12px; font-size: 10px; letter-spacing: .12em; padding: 4px 8px; border-radius: var(--r-btn); background: var(--solid-bg, var(--fg)); color: var(--solid-fg, var(--bg)); text-shadow: none; font-weight: 700; }
.tmeta { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 4px; }
.tname { font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tdesc { font-size: 12px; color: var(--mute); line-height: 1.5; }
.setrow { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.setrow .t { font-size: 14px; } .setrow .d { font-size: 12px; color: var(--mute); margin-top: 4px; }
.seg { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--line2); border-radius: var(--r-btn); background: var(--btn-bg, transparent); }
.seg button { height: 34px; padding: 0 16px; border: 0; background: transparent; color: var(--mute); border-radius: var(--r-btn); font-size: 12px; letter-spacing: var(--btn-ls, .1em); text-transform: var(--label-tt); transition: background .25s, color .25s; }
.seg button:hover { color: var(--fg); }
.seg button.on { background: var(--solid-bg, var(--fg)); color: var(--solid-fg, var(--bg)); text-shadow: none; font-weight: 700; }
.gear { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; color: var(--fg); background: var(--btn-bg, transparent); border: 1px solid var(--line2); border-radius: var(--r-btn); transition: border-color .25s, transform .2s; }
.gear svg { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.gear:hover { border-color: var(--edge-hi); } .gear:hover svg { transform: rotate(90deg); }
.gear.on { border-color: var(--accent); color: var(--accent); }
@media (max-width: 1100px) { .themes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =====================================================================
   PHOSPHOR — CRT monitor. Amber by default, green via Settings.
   ===================================================================== */
@font-face { font-family: "VT323"; src: url("/fonts/vt323-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
:root[data-theme="phosphor"], [data-tp="phosphor"] {
  --p: 255,180,58;
  --bg: #0E0802; --bg2: #140B03; --panel: rgba(var(--p),.035); --panel-solid: #140B03;
  --bg-fill: radial-gradient(ellipse 85% 75% at 50% 45%, #1F1204 0%, #0E0802 68%, #040200 100%);
  --line: rgba(var(--p),.18); --line2: rgba(var(--p),.4); --edge: rgba(var(--p),.55); --edge-hi: rgb(var(--p));
  --card: rgba(var(--p),.04); --card-hi: rgba(var(--p),.1); --sticky: #0E0802; --tile-bg: transparent;
  --fg: #FFB43A; --fg2: #EBA236; --mute: #B97B25; --mute2: #9C6620; --dim: #6F4A17;
  --hot: #FF6A2B; --accent: #FFB43A; --ok: #FFD98A; --on-accent: #0E0802;
  --hot-edge: rgba(255,106,43,.6); --hot-bg: rgba(255,106,43,.1);
  --ui: "JetBrains Mono", ui-monospace, monospace; --disp: "VT323", "JetBrains Mono", monospace; --nav-font: "VT323", monospace;
  --disp-stretch: 100%; --disp-weight: 400; --disp-ls: .02em; --disp-tt: uppercase; --disp-fill: var(--fg);
  --label-ls: .16em; --label-tt: uppercase; --label-size: 11px; --nav-ls: .08em;
  --r: 2px; --r-btn: 2px; --r-sm: 2px; --dot-r: 0;
  --blur: 0px; --shadow: 0 0 26px rgba(var(--p),.14); --gloss: none;
  --btn-bg: transparent; --input-bg: rgba(var(--p),.04);
  --solid-bg: var(--fg); --solid-fg: var(--bg); --solid-border: var(--fg);
  --bar-bg: rgba(14,8,2,.88); --bar-blur: none;
  --ribbon: var(--fg); --ribbon-op: .22; --lock-bg: transparent; --scanlines: none;
  --text-shadow: 0 0 6px rgba(var(--p),.55), 0 0 1px rgba(var(--p),.9);
  --disp-shadow: drop-shadow(0 0 8px rgba(var(--p),.6));
  --stagger: 38ms;
}
:root[data-theme="phosphor"][data-phos="green"] {
  --p: 200,244,110;
  --bg: #060B03; --bg2: #0A1205; --panel-solid: #0A1205; --sticky: #060B03;
  --bg-fill: radial-gradient(ellipse 85% 75% at 50% 45%, #13200A 0%, #060B03 68%, #020401 100%);
  --fg: #C8F46E; --fg2: #B5E05F; --mute: #87A94B; --mute2: #718F3F; --dim: #4E6A2B;
  --hot: #FFF06A; --accent: #C8F46E; --ok: #9DFFB0; --on-accent: #060B03;
  --hot-edge: rgba(255,240,106,.55); --hot-bg: rgba(255,240,106,.08); --bar-bg: rgba(6,11,3,.88);
}
[data-theme="phosphor"] .disp { font-size: 1.12em; }
[data-theme="phosphor"] .hero h1 { font-size: 92px; line-height: .82; }
[data-theme="phosphor"] .panel, [data-theme="phosphor"] .tile { outline: 1px dashed var(--line2); outline-offset: 4px; }
[data-theme="phosphor"] .colhead, [data-theme="phosphor"] .sechead { background: var(--fg); color: var(--bg); text-shadow: none; padding: 5px 8px; border: 0; }
[data-theme="phosphor"] .colhead .hot, [data-theme="phosphor"] .colhead.hot { color: var(--bg); }
[data-theme="phosphor"] .sechead .label { color: var(--bg); }
/* CRT glass: scanlines, vignette, flicker and a rolling refresh bar over everything */
[data-theme="phosphor"] body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.32) 2px 3px), radial-gradient(ellipse 110% 100% at 50% 50%, transparent 60%, rgba(0,0,0,.65) 100%);
  animation: crtflicker 7s steps(1) infinite; }
[data-theme="phosphor"] body::before { content: ""; position: fixed; left: 0; right: 0; top: -20vh; height: 18vh; z-index: 91; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(var(--p),.06), transparent); animation: rollbar 8s linear infinite; }
@keyframes crtflicker { 0%,100% { opacity: 1; } 31% { opacity: .92; } 32% { opacity: 1; } 67% { opacity: .95; } 68% { opacity: 1; } }
@keyframes rollbar { to { transform: translateY(140vh); } }
[data-theme="phosphor"] .backdrop .b1 { display: block; right: -4vw; top: 8vh; width: 58vw; height: 70vh;
  background-image: radial-gradient(circle, rgba(var(--p),.5) 1.1px, transparent 1.6px); background-size: 5px 5px;
  -webkit-mask-image: radial-gradient(ellipse 50% 42% at 55% 50%, #000 0, rgba(0,0,0,.35) 45%, transparent 75%); mask-image: radial-gradient(ellipse 50% 42% at 55% 50%, #000 0, rgba(0,0,0,.35) 45%, transparent 75%);
  opacity: .22; translate: calc(var(--px, 0) * -18px) calc(var(--py, 0) * -12px); transition: translate 1.2s cubic-bezier(.2,.8,.2,1); }
[data-theme="phosphor"] .backdrop .b2 { display: block; width: 640px; height: 640px; left: -220px; bottom: -260px; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 34px, rgba(var(--p),.28) 34px 36px, transparent 36px 52px);
  -webkit-mask-image: repeating-conic-gradient(#000 0 8deg, transparent 8deg 12deg); mask-image: repeating-conic-gradient(#000 0 8deg, transparent 8deg 12deg);
  opacity: .5; animation: spin 90s linear infinite; }

/* =====================================================================
   CHROME — 2001 media-player skin: brushed gunmetal, bevels, lime LCD
   ===================================================================== */
:root[data-theme="chrome"], [data-tp="chrome"] {
  --bg: #0D141E; --bg2: #151E2A; --panel-solid: #222C39;
  --panel: linear-gradient(180deg, #364355 0%, #232D3A 40%, #1A222D 100%);
  --bg-fill: radial-gradient(ellipse 60% 50% at 18% 0%, rgba(90,140,205,.28), transparent 60%), radial-gradient(ellipse 50% 50% at 92% 100%, rgba(60,110,185,.28), transparent 60%), repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px), linear-gradient(180deg, #131C28, #0A1018);
  --line: rgba(160,185,215,.14); --line2: rgba(175,198,226,.32); --edge: #4B596C; --edge-hi: #93A6BC;
  --card: linear-gradient(180deg, #2C3747, #1D2531); --card-hi: #303C4D; --sticky: #151D28; --tile-bg: linear-gradient(180deg, #2C3747, #1B232E);
  --fg: #E9EFF7; --fg2: #C5D0DD; --mute: #95A5B9; --mute2: #8192A7; --dim: #617185;
  --hot: #FF5AA8; --accent: #B6F23A; --ok: #5CE1FF; --on-accent: #10210A;
  --hot-edge: rgba(255,90,168,.55); --hot-bg: rgba(255,90,168,.1);
  --ui: "Figtree", "Helvetica Neue", sans-serif; --disp: "Exo 2", "Figtree", sans-serif;
  --disp-stretch: 100%; --disp-weight: 900; --disp-ls: 0em; --disp-tt: uppercase;
  --disp-fill: linear-gradient(180deg, #FFFFFF 0%, #DDE5EE 42%, #7B899A 50%, #EEF3F8 70%, #A8B4C2 100%);
  --disp-shadow: drop-shadow(0 2px 0 rgba(0,0,0,.65)) drop-shadow(0 0 1px rgba(0,0,0,.9));
  --label-ls: .14em; --label-tt: uppercase; --label-size: 11px; --nav-ls: .1em; --btn-ls: .1em;
  --r: 16px; --r-btn: 999px; --r-sm: 10px; --dot-r: 50%;
  --blur: 0px; --shadow: 0 12px 28px rgba(0,0,0,.55); --gloss: inset 1px 1px 0 rgba(255,255,255,.3), inset -1px -1px 0 rgba(0,0,0,.55);
  --btn-bg: linear-gradient(180deg, #F4F7FA 0%, #C4CDD7 48%, #9CA8B5 52%, #DAE1E8 100%); --input-bg: linear-gradient(180deg, #0A1805, #10240A);
  --solid-bg: linear-gradient(180deg, #E6FFA0 0%, #B6F23A 48%, #8FD11A 52%, #C8F862 100%); --solid-fg: #10210A; --solid-border: #DFFFA0;
  --bar-bg: linear-gradient(180deg, #3A4758, #1E2733); --bar-blur: none;
  --ribbon: #9FB6D0; --ribbon-op: .22; --lock-bg: transparent; --scanlines: none; --text-shadow: 0 1px 0 rgba(0,0,0,.5);
  --stagger: 55ms;
}
[data-theme="chrome"] .disp { font-style: italic; }
[data-theme="chrome"] .panel, [data-theme="chrome"] .tile {
  background: radial-gradient(circle at 11px 11px, #D2DBE5 0 1.8px, #4E5A68 2.4px, transparent 3px), radial-gradient(circle at calc(100% - 11px) 11px, #D2DBE5 0 1.8px, #4E5A68 2.4px, transparent 3px),
    radial-gradient(circle at 11px calc(100% - 11px), #D2DBE5 0 1.8px, #4E5A68 2.4px, transparent 3px), radial-gradient(circle at calc(100% - 11px) calc(100% - 11px), #D2DBE5 0 1.8px, #4E5A68 2.4px, transparent 3px), var(--panel); }
[data-theme="chrome"] .btn:not(.solid), [data-theme="chrome"] .chip:not(.on), [data-theme="chrome"] .seg button:not(.on), [data-theme="chrome"] .gear { color: #1B2430; text-shadow: 0 1px 0 rgba(255,255,255,.65); border-color: #7D8A99; }
[data-theme="chrome"] .seg { background: linear-gradient(180deg, #F4F7FA 0%, #C4CDD7 48%, #9CA8B5 52%, #DAE1E8 100%); }
[data-theme="chrome"] .btn::before, [data-theme="chrome"] .chip::before { background: var(--solid-bg); }
[data-theme="chrome"] .btn:hover, [data-theme="chrome"] .chip:hover { color: #10210A; }
[data-theme="chrome"] .btn:active { box-shadow: inset 0 2px 5px rgba(0,0,0,.45); }
/* LCD readouts */
[data-theme="chrome"] .countdown, [data-theme="chrome"] .tile .n, [data-theme="chrome"] .stats .n, [data-theme="chrome"] .clock b, [data-theme="chrome"] .colcount {
  font-family: "VT323", monospace; color: #B6F23A; background: linear-gradient(180deg, #0B1B06, #06120A); padding: 1px 10px; border-radius: 6px; letter-spacing: .06em;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.18); text-shadow: 0 0 6px rgba(182,242,58,.7); display: inline-block; }
[data-theme="chrome"] .countdown { font-size: 40px; } [data-theme="chrome"] .clock b { font-size: 20px; }
[data-theme="chrome"] .backdrop .b1 { display: block; inset: -10%;
  background: radial-gradient(40vw 30vw at 8% 20%, rgba(90,150,230,.16), transparent 70%), radial-gradient(45vw 35vw at 92% 80%, rgba(90,150,230,.13), transparent 70%), radial-gradient(30vw 20vw at 70% 0%, rgba(182,242,58,.05), transparent 70%);
  translate: calc(var(--px, 0) * 24px) calc(var(--py, 0) * 18px); transition: translate 1s cubic-bezier(.2,.8,.2,1); }
[data-theme="chrome"] .backdrop .b2 { display: block; inset: 0; background-image: radial-gradient(circle, rgba(170,200,235,.12) 1px, transparent 1.6px); background-size: 14px 14px; }
.eq { display: none; }
[data-theme="chrome"] .eq { display: flex; align-items: flex-end; gap: 3px; height: 22px; padding: 3px 8px; border-radius: 6px; background: linear-gradient(180deg, #0B1B06, #06120A); box-shadow: inset 0 2px 6px rgba(0,0,0,.85); }
.eq span { width: 5px; height: 20%; background: linear-gradient(to top, #8FD11A, #D8FF7A); border-radius: 1px; box-shadow: 0 0 6px rgba(182,242,58,.55); transition: height .12s linear; }
/* chrome lock: media-player LCD on the card */
.lcd { display: none; }
[data-theme="chrome"] .lcd { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 10px; background: linear-gradient(180deg, #0B1B06, #06120A);
  box-shadow: inset 0 3px 10px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.2); font-family: "VT323", monospace; color: #B6F23A; text-shadow: 0 0 6px rgba(182,242,58,.7); }
.lcd-time { font-size: 44px; line-height: 1; letter-spacing: .06em; }
.lcd-marq { overflow: hidden; white-space: nowrap; font-size: 18px; }
.lcd-marq span { display: inline-block; padding-left: 100%; animation: marquee 12s linear infinite; }
.lcd .eq { display: flex; height: 26px; padding: 0; background: none; box-shadow: none; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ============================ NAV STYLES ============================ */
.nav a { position: relative; z-index: 1; }
[data-theme="aero"] .nav, [data-theme="chrome"] .nav, [data-theme="phosphor"] .nav { padding: 4px; gap: 2px; }
[data-theme="aero"] .nav a, [data-theme="chrome"] .nav a, [data-theme="phosphor"] .nav a { padding: 8px 14px; }
[data-theme="aero"] .nav { border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.1)); border: 1px solid rgba(255,255,255,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
[data-theme="aero"] .nav a.on { color: #0B3D08; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
[data-theme="aero"] .nav-ind { top: 4px; bottom: 4px; height: auto; border-radius: 999px; background: var(--solid-bg); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 12px rgba(40,120,20,.35); }
[data-theme="chrome"] .nav { border-radius: 999px; background: linear-gradient(180deg, #F4F7FA 0%, #C4CDD7 48%, #9CA8B5 52%, #DAE1E8 100%); box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(0,0,0,.5); }
[data-theme="chrome"] .nav a { color: #2A3440; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
[data-theme="chrome"] .nav a.on { color: #B6F23A; text-shadow: 0 0 6px rgba(182,242,58,.8); }
[data-theme="chrome"] .nav-ind { top: 4px; bottom: 4px; height: auto; border-radius: 999px; background: linear-gradient(180deg, #0B1B06, #06120A); box-shadow: inset 0 2px 5px rgba(0,0,0,.9); }
[data-theme="phosphor"] .nav a.on { color: var(--bg); text-shadow: none; }
[data-theme="phosphor"] .nav a::before { content: "[" attr(data-key) "] "; opacity: .6; }
[data-theme="phosphor"] .nav-ind { top: 4px; bottom: 4px; height: auto; border-radius: 0; background: var(--fg); box-shadow: 0 0 14px rgba(var(--p),.6); transition: left .18s steps(4), width .18s steps(4); }
[data-theme="phosphor"] .nav a { font-size: 17px; letter-spacing: .06em; }

/* ======================= ENTRANCE MOTION PER THEME ======================= */
.stagger > * { animation-delay: calc(var(--i, 0) * var(--stagger, 65ms) + 140ms); }
[data-theme="aero"] .stagger > * { animation-name: bounceIn; animation-duration: .9s; animation-timing-function: cubic-bezier(.3,1.4,.5,1); }
[data-theme="phosphor"] .stagger > * { animation-name: crtIn; animation-duration: .45s; animation-timing-function: steps(6); }
[data-theme="chrome"] .stagger > * { animation-name: dropIn; animation-duration: .6s; }

@keyframes bounceIn { 0% { opacity: 0; transform: translateY(46px) scale(.94); } 55% { opacity: 1; } 100% { transform: none; } }

@keyframes crtIn { 0% { opacity: 0; transform: scaleY(.02); filter: brightness(3); } 50% { opacity: 1; transform: scaleY(1.03); } 100% { transform: none; filter: none; } }
@keyframes dropIn { 0% { opacity: 0; transform: translateY(-26px); } 70% { opacity: 1; transform: translateY(4px); } 100% { transform: none; } }

/* ======================= LEAVING MOTION PER THEME ======================= */
[data-theme="aero"] .view.leaving > * { animation: floatOut .26s ease-in forwards; }
[data-theme="phosphor"] .view.leaving > * { animation: crtOff .24s ease-in forwards; }
[data-theme="chrome"] .view.leaving > * { animation: sink .26s ease-in forwards; }

@keyframes floatOut { to { opacity: 0; transform: translateY(-34px) scale(.98); } }

@keyframes crtOff { 60% { transform: scaleY(.01) scaleX(1); filter: brightness(3); opacity: 1; } 100% { transform: scaleY(.004) scaleX(0); opacity: 0; } }
@keyframes sink { to { opacity: 0; transform: scale(.96); filter: brightness(.5); } }

/* ======================= PAGE TRANSITIONS PER THEME ======================= */
.curtain.beam .beam { position: absolute; top: 0; bottom: 0; left: -30%; width: 30%; mix-blend-mode: screen; filter: blur(4px);
  background: linear-gradient(90deg, transparent, rgba(92,225,255,.25), #fff 50%, rgba(92,225,255,.25), transparent); animation: beamx .6s cubic-bezier(.6,0,.3,1) forwards; }
.curtain.beam .rays { position: absolute; inset: 0; background: repeating-linear-gradient(178deg, transparent 0 22px, rgba(160,240,255,.25) 22px 23px); animation: raysx .6s ease-out forwards; }
@keyframes beamx { to { left: 100%; } }
@keyframes raysx { 0% { opacity: 0; transform: translateX(-10%); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateX(10%); } }
.curtain.crt .line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--fg); box-shadow: 0 0 22px 5px var(--fg); animation: crtline .55s forwards; }
@keyframes crtline { 0% { transform: scaleX(0); opacity: 1; } 40% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1) scaleY(80); opacity: 0; } }
.curtain.bloom .glow { position: absolute; left: 50%; top: 40%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(120,170,255,.5), transparent 70%); animation: bloom .75s ease-out forwards; }
@keyframes bloom { to { transform: translate(-50%,-50%) scale(280); opacity: 0; } }
.curtain.bubblewipe .bb { position: absolute; bottom: -140px; border-radius: 50%; animation: bbup .8s cubic-bezier(.3,.6,.4,1) forwards; animation-delay: var(--d, 0s);
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 7%, transparent 15%), radial-gradient(closest-side, rgba(200,235,255,.12), rgba(150,210,255,.3) 80%, rgba(255,255,255,.85) 95%, transparent 100%); }
@keyframes bbup { to { transform: translateY(calc(-100vh - 280px)); } }
.curtain.flash .streak { position: absolute; left: -10%; right: -10%; top: 45%; height: 2px; background: #fff; box-shadow: 0 0 40px 10px rgba(180,215,255,.9); animation: flash .75s forwards; }
@keyframes flash { 0% { transform: scaleX(.1); opacity: 0; } 30% { transform: scaleX(1); opacity: 1; } 60% { transform: scaleY(180); opacity: .45; } 100% { transform: scaleY(360); opacity: 0; } }
.curtain.shutter .pl { position: absolute; left: 0; right: 0; height: 50%; background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px), linear-gradient(180deg, #4A586B, #232D3A); box-shadow: 0 0 30px rgba(0,0,0,.6); }
.curtain.shutter .pl.t { top: 0; transform: translateY(-100%); border-bottom: 2px solid #B6F23A; animation: shutT .64s cubic-bezier(.7,0,.3,1) forwards; }
.curtain.shutter .pl.b { bottom: 0; transform: translateY(100%); border-top: 2px solid #B6F23A; animation: shutB .64s cubic-bezier(.7,0,.3,1) forwards; }
@keyframes shutT { 42%, 58% { transform: translateY(0); } 100% { transform: translateY(-100%); } }
@keyframes shutB { 42%, 58% { transform: translateY(0); } 100% { transform: translateY(100%); } }

/* ======================= HOVER PERSONALITIES ======================= */
/* Obsidian + Aero: a specular sheen sweeps across glass */
[data-theme="aero"] .panel::after {
  inset: 0; opacity: 1; border-radius: inherit; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.16) 48%, transparent 60%) no-repeat;
  background-size: 260% 100%; background-position: 130% 0; transition: background-position 1s cubic-bezier(.2,.8,.2,1); }
[data-theme="aero"] .panel::after { background-image: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.45) 48%, transparent 60%); }
[data-theme="aero"] .panel:hover::after { inset: 0; background-position: -40% 0; }
[data-theme="aero"] .panel:hover, [data-theme="aero"] .tile:hover { transform: translateY(-4px) scale(1.01); }
[data-theme="aero"] .card:hover { animation: jelly .6s; }
@keyframes jelly { 30% { transform: scale(1.04, .96); } 50% { transform: scale(.98, 1.03); } 70% { transform: scale(1.01, .99); } }
/* Midnight: soft blue glow ring, corner dots */
/* Horizon: bloom and a flare line across the top edge */
/* Hyperlight: a scan line passes over the panel */

/* Phosphor: selection inverts, like an old terminal */
[data-theme="phosphor"] .panel::after { display: none; }
[data-theme="phosphor"] .card:hover, [data-theme="phosphor"] .mrow:hover, [data-theme="phosphor"] .panel .row:hover, [data-theme="phosphor"] .cls:hover, [data-theme="phosphor"] .todo:hover, [data-theme="phosphor"] .bucket:not(.on):hover {
  background: var(--fg) !important; color: var(--bg) !important; text-shadow: none; }
[data-theme="phosphor"] .card:hover *, [data-theme="phosphor"] .mrow:hover *, [data-theme="phosphor"] .panel .row:hover *, [data-theme="phosphor"] .cls:hover * { color: var(--bg) !important; text-shadow: none; }
[data-theme="phosphor"] .panel:hover { transform: none; box-shadow: 0 0 22px rgba(var(--p),.3); }
/* Chrome: glowing LCD rim */
[data-theme="chrome"] .panel::after { display: none; }
[data-theme="chrome"] .panel:hover, [data-theme="chrome"] .tile:hover, [data-theme="chrome"] .card:hover { box-shadow: var(--gloss), 0 0 0 1px #B6F23A, 0 0 22px rgba(182,242,58,.28), var(--shadow); }

/* ======================= BOARD DRAG ======================= */
.cardlist { display: flex; flex-direction: column; gap: 10px; min-height: 56px; }
.card.floating { position: fixed; z-index: 100; margin: 0; pointer-events: none; will-change: transform; transform-origin: 50% 40%;
  box-shadow: var(--drag-shadow, 0 28px 60px rgba(0,0,0,.55)); cursor: grabbing; }
.card-ph { border-radius: var(--r-sm); border: 1px dashed var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); animation: phpulse 1.4s ease-in-out infinite; }
@keyframes phpulse { 50% { background: color-mix(in srgb, var(--accent) 14%, transparent); } }
.card-ghost { position: fixed; left: 0; top: 0; z-index: 99; pointer-events: none; border: 1px solid var(--accent); border-radius: var(--r-sm); background: color-mix(in srgb, var(--accent) 6%, transparent); opacity: 0; }
[data-theme="phosphor"] .card-ghost { background: rgba(var(--p),.12); border-color: rgba(var(--p),.5); filter: blur(1px); }
.card.landed { animation: land .45s; }
@keyframes land { 30% { box-shadow: 0 0 0 2px var(--accent), 0 0 30px color-mix(in srgb, var(--accent) 40%, transparent); } }
body.dragging-card, body.dragging-card * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.card { touch-action: pan-y; }
[data-theme="aero"] { --drag-shadow: 0 30px 50px rgba(0,46,130,.4); }
[data-theme="phosphor"] { --drag-shadow: 0 0 30px rgba(var(--p),.4); }

/* ======================= AMBIENT: cursor parallax ======================= */
[data-theme="aero"] .backdrop .b1 { translate: calc(var(--px, 0) * -30px) calc(var(--py, 0) * -20px); transition: translate 1.4s cubic-bezier(.2,.8,.2,1); }
[data-theme="aero"] .backdrop .b2 { translate: calc(var(--px, 0) * 40px) 0; transition: translate 2s cubic-bezier(.2,.8,.2,1); }

/* ======================= AERO BUBBLES (real, poppable) ======================= */
.bubbles { position: absolute; inset: 0; }
.bub { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 7%, rgba(255,255,255,0) 15%),
    radial-gradient(closest-side, rgba(210,240,255,.06) 0, rgba(160,215,255,.18) 70%, rgba(255,255,255,.7) 92%, rgba(255,255,255,.95) 96%, rgba(255,255,255,0) 100%);
  box-shadow: inset -4px -6px 12px rgba(120,200,255,.25); }
.bub.pop { animation: pop .32s ease-out forwards; }
@keyframes pop { 40% { opacity: .9; } 100% { transform: var(--t) scale(1.6); opacity: 0; } }
.droplet { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.9); box-shadow: 0 0 6px rgba(255,255,255,.8); animation: dropfly .5s ease-out forwards; }
@keyframes dropfly { to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }

/* ======================= PHOSPHOR LOCK: wireframe globe ======================= */
.globe { display: none; }
[data-lock="globe"] .globe { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
[data-lock="globe"] .knight-wrap, [data-lock="globe"] .field-wrap { display: none; }
[data-lock="globe"] .lock-right { background: transparent; }
[data-lock="globe"] .lock .corner { border-color: var(--line2); }

/* ── Mouse effects overlay ── */
.cursorfx { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 96; pointer-events: none; }
[data-theme="phosphor"] .cursorfx, [data-theme="terminal"] .cursorfx, [data-theme="chrome"] .cursorfx { mix-blend-mode: screen; }
.cursorfx { opacity: .7; }