/* =========================================================
   OLD MIXTAPE — WEBDESKTOP V2
   Base structure + CRT overlay (unchanged mechanics, theme
   identity now lives entirely in the 10 theme blocks below).
   ========================================================= */
:root{--font-display:"Fredoka",sans-serif;--font-mono:"Space Mono",monospace;--paper:#d8c8aa;--ink:#211c16;--accent:#b95b2d;--accent2:#72712d;--muted:#827560;--line:#7c7048;--panel:#20261d;--panel2:#171b15;--card:#283126;--card-ink:#e4d6ad;--radius:10px;--radius-sm:6px;--icon-radius:10px;--scan:.2;--noise:.16;--glitch:.02;--vignette:.2;--bg-image:none;--wall:radial-gradient(circle at 50% 10%,rgba(157,139,83,.10),transparent 40%),linear-gradient(145deg,#23291f,#171b15 72%);--bg-tint:rgba(20,16,8,.14)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#080808;color:var(--ink)}
body{font-family:var(--font-mono);transition:color .15s}
button,a,input,textarea,select{font:inherit}button{cursor:pointer}
.crt-layer{position:fixed;inset:0;pointer-events:none;z-index:9999}
.scanlines{position:absolute;inset:0;opacity:var(--scan);background:repeating-linear-gradient(to bottom,rgba(0,0,0,.34) 0,rgba(0,0,0,.34) 1px,transparent 1px,transparent 3px);mix-blend-mode:multiply}
.noise{position:absolute;inset:-30%;opacity:var(--noise);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");animation:noise .18s steps(2) infinite}
.glitch{position:absolute;inset:0;opacity:var(--glitch);background:linear-gradient(transparent 0 47%,rgba(255,0,120,.3) 47.3% 47.6%,transparent 48% 69%,rgba(0,255,255,.24) 69.2% 69.6%,transparent 70%);animation:glitch 7s infinite steps(1)}
.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,var(--vignette)) 100%)}
@keyframes noise{0%{transform:translate(0,0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(-2%,-2%)}}
@keyframes glitch{0%,92%,100%{clip-path:inset(0);transform:none}93%{clip-path:inset(32% 0 58% 0);transform:translateX(-5px)}94%{clip-path:inset(70% 0 12% 0);transform:translateX(7px)}95%{clip-path:inset(0);transform:none}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes scanroll{0%{background-position-y:0}100%{background-position-y:-300px}}
@keyframes staticburst{0%,94%,100%{opacity:.05}95%{opacity:.55}96%{opacity:.1}97%{opacity:.45}98%{opacity:.08}}
@keyframes neonbuzz{0%,100%{opacity:1}91%{opacity:1}92%{opacity:.35}93%{opacity:1}96%{opacity:.6}97%{opacity:1}}
@keyframes sheen{0%{transform:translateX(-40%)}100%{transform:translateX(340%)}}
@keyframes dustdrift{0%{transform:translate(0,0)}100%{transform:translate(-26px,-34px)}}
@keyframes gridscroll{0%{background-position-y:0}100%{background-position-y:72px}}
@keyframes printscan{0%{top:-16%}100%{top:100%}}
@keyframes softpulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.15)}}
@keyframes bootflicker{0%{opacity:0;filter:brightness(2.2)}28%{opacity:1}42%{opacity:.35}58%{opacity:1}100%{opacity:1;filter:brightness(1)}}
@keyframes archsweep{0%,100%{opacity:.45}50%{opacity:.75}}

#desktop{position:relative;width:100%;height:100%;background-color:#080808;background-image:var(--bg-image),var(--wall);background-position:center,center;background-size:cover,cover;background-repeat:no-repeat;overflow:hidden}
.systembar{height:46px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 14px;border-bottom:1px solid var(--line);background:var(--panel2);color:var(--ink);position:relative;z-index:10;font-family:var(--font-mono)}
.brand{display:flex;gap:12px;align-items:baseline;font-size:11px;letter-spacing:.12em;font-family:var(--font-display)}
.brand span{font-size:8px;opacity:.55;font-family:var(--font-mono)}
.system-center{font-size:10px;letter-spacing:.2em}
.system-right{justify-self:end;display:flex;align-items:center;gap:10px;font-size:10px}
.system-right button{border:1px solid var(--line);background:var(--panel2);color:var(--ink);width:30px;height:24px;border-radius:var(--radius-sm)}
.led{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.desktop-stage{position:absolute;inset:46px 0 44px}
.desktop-icons{position:absolute;left:20px;top:22px;width:400px;display:grid;grid-template-columns:repeat(4,82px);gap:17px 14px;z-index:2}
.desktop-icon{appearance:none;border:0;background:transparent;color:#eee;text-shadow:0 2px 3px #000;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:9px;letter-spacing:.04em;min-height:64px}
.icon-glyph{display:block;width:35px;height:30px;position:relative;filter:drop-shadow(0 2px 2px #000)}
.icon-glyph:before,.icon-glyph:after{content:"";position:absolute}
.cassette:before{inset:5px 1px 4px;border:2px solid currentColor;border-radius:3px}
.cassette:after{width:20px;height:6px;left:7px;bottom:7px;border:1px solid currentColor;border-radius:50%}
.typewriter:before{left:2px;top:5px;width:31px;height:19px;border:2px solid currentColor}
.typewriter:after{left:7px;top:22px;width:23px;border-top:3px solid currentColor}
.camera:before{inset:5px 1px 4px;border:2px solid currentColor;border-radius:4px}
.camera:after{left:11px;top:9px;width:10px;height:10px;border:2px solid currentColor;border-radius:50%}
.contact:before{inset:2px 4px;border:2px solid currentColor;border-radius:50%}
.contact:after{left:11px;top:9px;width:8px;height:8px;border:1px solid currentColor;border-radius:50%}
.chat:before{inset:3px 1px 8px;border:2px solid currentColor;border-radius:10px}
.chat:after{left:5px;bottom:2px;border:5px solid transparent;border-top-color:currentColor}
.folder:before{left:1px;top:7px;width:33px;height:22px;border:2px solid currentColor;border-radius:2px}
.folder:after{left:4px;top:3px;width:12px;height:7px;border:2px solid currentColor;border-bottom:0}
.link:before{left:2px;top:7px;width:17px;height:10px;border:2px solid currentColor;border-radius:9px;transform:rotate(-35deg)}
.link:after{right:2px;top:12px;width:17px;height:10px;border:2px solid currentColor;border-radius:9px;transform:rotate(-35deg)}
.guitar:before{left:13px;top:2px;width:8px;height:25px;border-left:2px solid currentColor;transform:rotate(12deg)}
.guitar:after{left:7px;top:15px;width:18px;height:10px;border:2px solid currentColor;border-radius:50%}
.book:before{inset:4px 2px;border:2px solid currentColor;transform:skewY(-4deg)}
.document:before{inset:2px 5px 1px;border:2px solid currentColor}
.sliders:before{left:6px;top:5px;width:24px;height:20px;border-left:2px solid currentColor;border-right:2px solid currentColor;background:linear-gradient(currentColor,currentColor) 6px 0/2px 20px no-repeat,linear-gradient(currentColor,currentColor) 14px 0/2px 20px no-repeat}
.desktop-panel{position:absolute;right:7vw;bottom:8vh;width:330px;padding:26px;background:rgba(27,21,16,.7);border:1px solid rgba(238,218,181,.45);color:#eee;box-shadow:12px 14px 0 rgba(0,0,0,.25);z-index:2}
.panel-kicker{font-size:9px;letter-spacing:.2em;opacity:.6}
.panel-title{font-family:"Space Mono";font-size:28px;line-height:1.05;margin:16px 0}
.panel p{font-size:9px;line-height:1.8;color:#c7b9a4}
.panel-rule{height:1px;background:#8e795e;margin:18px 0}
.panel-readout{display:flex;justify-content:space-between;font-size:8px;margin:7px 0}
.panel-readout span{opacity:.55}
.panel-button{width:100%;margin-top:14px;padding:10px;background:transparent;color:#eee;border:1px solid #8e795e;font-size:8px}
.system-dock{position:absolute;left:0;right:0;bottom:0;height:44px;display:flex;align-items:center;padding:0 14px;background:var(--panel2);color:var(--ink);border-top:1px solid var(--line);z-index:10}
.system-dock button,.just-type{background:transparent;border:0;color:var(--ink);font-size:8px;text-decoration:none}
.dock-status{margin:auto;display:flex;gap:10px;align-items:center}
.dock-label{font-size:8px;letter-spacing:.12em}
.dock-status label{display:flex;align-items:center;gap:5px;font-size:8px}
.dock-status select{height:23px;min-width:112px;background:var(--panel);color:var(--ink);border:1px solid var(--line);font-size:8px;padding:2px 5px;border-radius:var(--radius-sm)}
.system-dock #gameDock{background:transparent;border:1px solid var(--line);color:var(--ink);padding:6px 9px;font-size:8px;border-radius:var(--radius-sm)}
.window{display:none;position:absolute;left:24%;top:18%;width:470px;height:350px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);box-shadow:10px 12px 0 rgba(0,0,0,.3);z-index:50}
.window.wide-window{width:700px;height:520px}
.scale-window{width:760px;height:560px}
.settings-window{width:500px!important;height:370px!important}
.settings-content{overflow:auto}
.titlebar{height:34px;background:var(--panel2);color:var(--ink);display:flex;justify-content:space-between;align-items:center;padding:0 9px;font-size:9px;letter-spacing:.08em;font-family:var(--font-display);border-radius:var(--radius) var(--radius) 0 0}
.actions{display:flex;gap:4px}
.actions button{width:23px;height:21px;background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-sm)}
.content{height:calc(100% - 34px);padding:18px;overflow:auto;background:var(--panel);color:var(--ink)}
.player-display{display:flex;justify-content:space-between;padding:14px;background:var(--card);color:var(--card-ink);border:1px solid var(--line)}
.player-display small{display:block;font-size:7px;opacity:.7}
.player-display strong{display:block;margin-top:5px}
.reels{font-size:24px;color:var(--accent)}
.playlist{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}
.playlist button,.button-row button,.file-list a,.file-list button,.link-board a,.settings-footer button{border:1px solid var(--line);background:var(--card);color:var(--card-ink);padding:8px;text-align:left;border-radius:var(--radius-sm)}
.window audio{width:100%;margin-top:12px}
.content textarea{width:100%;height:260px;resize:none;background:var(--card);color:var(--card-ink);border:1px solid var(--line);padding:15px;outline:0;border-radius:var(--radius-sm)}
.button-row{display:flex;gap:6px;margin-top:7px}
.button-row button{font-size:8px}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.gallery img{width:100%;height:130px;object-fit:cover;cursor:zoom-in;border-radius:var(--radius-sm)}
.file-section-title{font-size:8px;letter-spacing:.15em;color:var(--muted);margin:4px 0 8px}
.file-list{display:grid;gap:6px;margin-bottom:18px}
.file-list a,.file-list button{display:flex;justify-content:space-between;align-items:center;text-decoration:none;font-size:9px}
.link-board{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.link-board a{padding:20px;color:inherit;text-decoration:none;background:var(--card)}
.link-board small{display:block;opacity:.5;margin-top:8px}
.iframe-content{padding:0;overflow:hidden}
.iframe-content iframe{width:100%;height:100%;border:0;background:#fff}
.read-text{font-family:Georgia,serif;line-height:1.7;font-size:15px}
.read-text pre{white-space:pre-wrap;margin:0 auto;max-width:700px;font-family:Georgia,serif;line-height:1.7;font-size:15px}
.chat-log{height:260px;border:1px solid var(--line);background:var(--card);color:var(--card-ink);padding:12px;overflow:auto;border-radius:var(--radius-sm)}
.chat-log p{font-size:9px;line-height:1.6}
.chat-log small{opacity:.5}
.chat input{width:75%;padding:10px;border:1px solid var(--line);background:var(--card);color:var(--card-ink);border-radius:var(--radius-sm)}
.chat>button{padding:10px;border:1px solid var(--line);background:var(--card);color:var(--card-ink);border-radius:var(--radius-sm)}
.settings-hero{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid var(--line);padding-bottom:15px;margin-bottom:18px}
.settings-hero small{font-size:7px;opacity:.6}
.settings-hero h2{margin:5px 0 0;font-family:var(--font-display)}
.setting-meta{font-size:7px;opacity:.5}
.theme-description{margin:14px 0;padding:12px;background:var(--card);color:var(--card-ink);border-left:4px solid var(--accent);font-size:8px;line-height:1.7;min-height:58px;border-radius:var(--radius-sm)}
.settings-columns{display:grid;gap:10px}
.settings-columns label{display:grid;grid-template-columns:80px 1fr 45px;align-items:center;gap:10px;font-size:8px}
.settings-columns input{accent-color:var(--accent)}
.settings-columns output{text-align:right;opacity:.65}
.settings-footer{display:flex;justify-content:flex-end;gap:7px;margin-top:18px}
.settings-footer button{font-size:8px}
:fullscreen.window{width:100vw!important;height:100vh!important;left:0!important;top:0!important;transform:none!important;border:0;box-shadow:none;border-radius:0}

/* Quick header controls */
.quick-controls{display:flex;align-items:center;gap:8px;justify-content:center}
.quick-controls label{font:9px var(--font-mono,"IBM Plex Mono"),monospace;letter-spacing:.12em;display:flex;align-items:center;gap:5px}
.quick-controls select{min-width:150px;height:25px;padding:2px 22px 2px 7px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);outline:none;border-radius:var(--radius-sm)}
.desktop-stage{background-image:var(--bg-image);background-size:cover;background-position:center;background-repeat:no-repeat}
.desktop-stage:after{content:"";position:absolute;inset:0;background:var(--bg-tint,transparent);pointer-events:none;z-index:0}
.desktop-stage:before{pointer-events:none}
.desktop-icons,.desktop-panel{z-index:2}
/* The narrative panel is retired in V2 — controls live in the header/dock instead. */
.desktop-panel.quick-settings{display:none!important}
@media(max-width:900px){.quick-controls select{min-width:112px;font-size:8px}}
@media(max-width:560px){.quick-controls{display:none}}

/* Games */
.icon-glyph.gamepad:before{left:3px;top:9px;width:29px;height:17px;border:2px solid currentColor;border-radius:9px}
.icon-glyph.gamepad:after{left:10px;top:14px;width:14px;height:8px;background:linear-gradient(currentColor,currentColor) 0 3px/8px 2px no-repeat,linear-gradient(currentColor,currentColor) 3px 0/2px 8px no-repeat,radial-gradient(circle at 11px 2px,currentColor 2px,transparent 3px)}
.games-content{background:var(--panel);color:var(--ink)}
.game-tabs{display:flex;gap:6px;margin-bottom:12px}
.game-tabs button{background:var(--panel2);color:var(--ink);border:1px solid var(--line);padding:8px 12px;font-size:8px;border-radius:var(--radius-sm)}
.game-board{display:grid;grid-template-columns:repeat(9,38px);gap:3px;justify-content:center;margin:15px auto}
.mine-cell{width:38px;height:38px;border:1px solid var(--line);background:var(--card);color:var(--card-ink);font-weight:700;font-size:12px}
.mine-cell.revealed{background:var(--panel2)}
.mine-cell.flag{background:#5d2d39;color:#ffd4d4}
.game-toolbar{display:flex;gap:12px;justify-content:center;align-items:center;font-size:9px;margin-bottom:10px}
.game-toolbar button{background:var(--panel2);color:var(--ink);border:1px solid var(--line);padding:6px 9px;border-radius:var(--radius-sm)}
.g2048{display:grid;grid-template-columns:repeat(4,72px);gap:6px;justify-content:center;margin:20px auto}
.g2048 .tile{width:72px;height:72px;display:grid;place-items:center;background:var(--card);color:var(--card-ink);font-size:20px;border:1px solid var(--line)}
.g2048 .t2{background:#b6a27f}.g2048 .t4{background:#c4aa7a}.g2048 .t8{background:#a75e4f}.g2048 .t16{background:#8c4b6b}.g2048 .t32{background:#6f5ba7}.g2048 .t64{background:#477b93}.g2048 .t128{background:#4f9a77}.g2048 .t256{background:#9b8a45}.g2048 .t512{background:#b36c43}.g2048 .t1024{background:#8a4f8e}.g2048 .t2048{background:#d1a84c;color:#211c16}
@media(max-width:700px){.dock-status label:nth-child(3){display:none}.dock-status select{min-width:80px}}

/* =========================================================
   FINAL DESKTOP ICON GRID — stable across every theme.
   Theme personality changes icon treatment, never placement.
   ========================================================= */
#desktop .desktop-icons{left:20px!important;top:22px!important;width:390px!important;display:grid!important;grid-template-columns:repeat(4,82px)!important;grid-auto-rows:76px!important;gap:12px 14px!important;align-content:start!important;justify-content:start!important}
#desktop .desktop-icon{width:82px!important;min-width:82px!important;max-width:82px!important;height:76px!important;min-height:76px!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;box-sizing:border-box!important}
#desktop .desktop-icon span{display:block;width:82px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:650px){#desktop .desktop-icons{width:270px!important;grid-template-columns:repeat(3,82px)!important}.desktop-panel{display:none}.gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.gallery{grid-template-columns:repeat(3,1fr)}}

#versionToggle{min-width:38px;height:28px;padding:2px 8px;font:inherit;cursor:pointer;letter-spacing:.05em}
#versionToggle:hover{filter:brightness(1.2)}
#settingsOpen{min-width:30px}

/* =========================================================
   ICON LEGIBILITY BASE
   A solid plate behind every glyph (box-shadow spread, so it
   doesn't disturb the layout math) plus a scaled-up glyph and
   a bumped label. Per-theme blocks tune the plate/ring color.
   ========================================================= */
.icon-glyph{transform:scale(1.3);transform-origin:center center;border-radius:var(--icon-radius,9px);background:rgba(0,0,0,.45);box-shadow:0 0 0 8px rgba(0,0,0,.45)}
.desktop-icon{gap:13px}
.desktop-icon span{font-size:11px;letter-spacing:.05em;font-weight:600;font-family:var(--font-mono)}

/* Distinguish Scales v2 / v3 from the base Scales glyph — same
   family, different silhouette, so the eye doesn't need the
   label to tell them apart. */
.icon-glyph.guitar.v2:before{transform:rotate(-6deg)}
.icon-glyph.guitar.v2:after{border-radius:35%;transform:rotate(10deg)}
.icon-glyph.guitar.v3:before{transform:rotate(22deg)}
.icon-glyph.guitar.v3:after{width:14px;height:14px;left:10px;top:12px;border-radius:20%}

/* Give Swann's Way an open-book glyph distinct from Amontillado's
   closed-book glyph, instead of two identical icons. */
.icon-glyph.book.v2:before{inset:auto;left:1px;top:4px;width:15px;height:22px;border:2px solid currentColor;border-right:0;transform:skewY(3deg)}
.icon-glyph.book.v2:after{left:19px;top:4px;width:15px;height:22px;border:2px solid currentColor;border-left:0;transform:skewY(-3deg)}

/* =========================================================
   TEN THEMES — one per style-01..style-10 reference sheet.
   Each block sets the full token set (fonts, ink, accents,
   panels, wall, radius, CRT intensities) plus the one or two
   signature flourishes that make that reference unmistakable.
   ========================================================= */

/* ---------- 01 — AMBER ANALOG (olive/amber, rounded analog) ---------- */
body[data-theme="amber"]{
  --font-display:"Fredoka",sans-serif;--font-mono:"Space Mono",monospace;
  --ink:#e4d6ad;--muted:#b7a986;--line:#7c7048;
  --accent:#b95b2d;--accent2:#72712d;
  --panel:#20261d;--panel2:#171b15;--card:#283126;--card-ink:#e4d6ad;
  --radius:10px;--radius-sm:6px;--icon-radius:12px;
  --wall:radial-gradient(circle at 50% 10%,rgba(157,139,83,.10),transparent 40%),linear-gradient(145deg,#23291f,#171b15 72%);
  --scan:.20;--noise:.16;--glitch:.02;--vignette:.20;--bg-tint:rgba(20,16,8,.14);
}
body[data-theme="amber"] .desktop-stage:before{content:"";position:absolute;inset:0;z-index:0;background:repeating-linear-gradient(90deg,transparent 0 3px,rgba(0,0,0,.04) 3px 4px);opacity:.5}
body[data-theme="amber"] .led{animation:flicker-amber 5s ease-in-out infinite}
@keyframes flicker-amber{0%,100%{opacity:1}48%{opacity:1}50%{opacity:.55}52%{opacity:1}}
body[data-theme="amber"] .desktop-icon .icon-glyph{color:#e4d6ad;background:rgba(20,14,8,.55);box-shadow:0 0 0 8px rgba(20,14,8,.55),0 0 0 9px rgba(185,91,45,.4)}
body[data-theme="amber"] .gallery img{filter:sepia(.35) saturate(1.05)}

/* ---------- 02 — GREEN PHOSPHOR DOS/CRT (mono green terminal) ---------- */
body[data-theme="phosphor"]{
  --font-display:"Press Start 2P",monospace;--font-mono:"VT323",monospace;
  --ink:#79d447;--muted:#4f9b38;--line:#2d6b27;
  --accent:#a4ff65;--accent2:#4f9b38;
  --panel:#061007;--panel2:#020702;--card:#081c09;--card-ink:#a4ff65;
  --radius:0px;--radius-sm:0px;--icon-radius:0px;
  --wall:radial-gradient(circle at center,rgba(43,116,40,.14),transparent 62%),#010401;
  --scan:.75;--noise:.05;--glitch:.03;--vignette:.28;--bg-tint:rgba(2,10,2,.30);
}
body[data-theme="phosphor"] .desktop-stage:before{content:"01001101  READY\A ARCHIVE_INDEX ...... OK\A MEMORY .............. 512K\A WAVEFORM_ENGINE ..... ACTIVE";white-space:pre;position:absolute;z-index:0;right:6vw;top:9vh;color:rgba(121,212,71,.16);font:12px/2 "VT323";pointer-events:none}
body[data-theme="phosphor"] .brand{text-transform:uppercase;text-shadow:0 0 9px rgba(164,255,101,.65)}
body[data-theme="phosphor"] .brand:after,body[data-theme="phosphor"] .titlebar span:first-child:after{content:"█";margin-left:5px;animation:blink .9s steps(2,end) infinite}
body[data-theme="phosphor"] .scanlines{animation:scanroll 5s linear infinite}
body[data-theme="phosphor"] .noise{animation:noise .18s steps(2) infinite,staticburst 6s steps(1) infinite}
body[data-theme="phosphor"] .titlebar{text-transform:uppercase;text-shadow:0 0 6px rgba(164,255,101,.5)}
body[data-theme="phosphor"] .window,body[data-theme="phosphor"] .content{text-shadow:0 0 4px rgba(121,212,71,.35)}
body[data-theme="phosphor"] .desktop-icon .icon-glyph{color:#a4ff65;background:rgba(2,10,2,.6);box-shadow:0 0 0 8px rgba(2,10,2,.6),0 0 0 9px rgba(164,255,101,.45)}
body[data-theme="phosphor"] .desktop-icon span{text-transform:uppercase}
body[data-theme="phosphor"] .gallery img{filter:grayscale(1) sepia(1) hue-rotate(70deg) saturate(3) brightness(.8)}

/* ---------- 03 — NAVY 80s CONSUMER COMPUTER (cream chunky/rainbow tiles) ---------- */
body[data-theme="navy80s"]{
  --font-display:"Fredoka",sans-serif;--font-mono:"Roboto Mono",monospace;
  --ink:#eadbb1;--muted:#b8a878;--line:#e4d29b;
  --accent:#c88e12;--accent2:#28676b;
  --panel:#10192b;--panel2:#0a0f1b;--card:#182542;--card-ink:#eadbb1;
  --radius:13px;--radius-sm:5px;--icon-radius:5px;
  --wall:radial-gradient(circle at 50% 5%,#182542,#0a101d 70%);
  --scan:.05;--noise:.04;--glitch:0;--vignette:.14;--bg-tint:rgba(5,10,20,.12);
}
body[data-theme="navy80s"] .brand{-webkit-text-stroke:.5px #2a2a29;text-shadow:1px 1px 0 #807453}
body[data-theme="navy80s"] .desktop-icons{animation:bootflicker 1.1s ease-out 1}
body[data-theme="navy80s"] .desktop-icon:nth-child(6n+1) .icon-glyph{color:#e3705a;background:rgba(30,10,6,.55);box-shadow:0 0 0 8px rgba(30,10,6,.55),0 0 0 9px rgba(163,58,36,.5)}
body[data-theme="navy80s"] .desktop-icon:nth-child(6n+2) .icon-glyph{color:#e08a4a;background:rgba(30,15,4,.55);box-shadow:0 0 0 8px rgba(30,15,4,.55),0 0 0 9px rgba(169,78,32,.5)}
body[data-theme="navy80s"] .desktop-icon:nth-child(6n+3) .icon-glyph{color:#8fc46e;background:rgba(10,20,4,.55);box-shadow:0 0 0 8px rgba(10,20,4,.55),0 0 0 9px rgba(77,119,57,.5)}
body[data-theme="navy80s"] .desktop-icon:nth-child(6n+4) .icon-glyph{color:#5fb2b8;background:rgba(4,18,19,.55);box-shadow:0 0 0 8px rgba(4,18,19,.55),0 0 0 9px rgba(40,103,107,.5)}
body[data-theme="navy80s"] .desktop-icon:nth-child(6n+5) .icon-glyph{color:#c76fa8;background:rgba(20,6,15,.55);box-shadow:0 0 0 8px rgba(20,6,15,.55),0 0 0 9px rgba(116,54,94,.5)}
body[data-theme="navy80s"] .desktop-icon:nth-child(6n+6) .icon-glyph{color:#e15fa0;background:rgba(20,4,12,.55);box-shadow:0 0 0 8px rgba(20,4,12,.55),0 0 0 9px rgba(139,31,84,.5)}

/* ---------- 04 — WARM 1970s CREAM/BROWN (paper card, brown chips) ---------- */
body[data-theme="cream70s"]{
  --font-display:"Cooper Black",Georgia,serif;--font-mono:"DM Mono",monospace;
  --ink:#4d2b16;--muted:#8a6a45;--line:#9e824d;
  --accent:#673014;--accent2:#677057;
  --panel:#eee1af;--panel2:#42210f;--card:#6b3015;--card-ink:#f0dfb3;
  --radius:12px;--radius-sm:3px;--icon-radius:9px;
  --wall:radial-gradient(circle at 50% 20%,#d7c487,#a68b51);
  --scan:.05;--noise:.14;--glitch:0;--vignette:.10;--bg-tint:rgba(90,60,20,.10);
}
body[data-theme="cream70s"] .desktop-stage:before{content:"";position:absolute;inset:-10%;z-index:0;background:radial-gradient(circle at 30% 25%,rgba(255,244,197,.10),transparent 40%),radial-gradient(circle at 70% 60%,rgba(255,244,197,.06),transparent 30%);opacity:.8;animation:dustdrift 26s ease-in-out infinite alternate}
body[data-theme="cream70s"] .systembar,body[data-theme="cream70s"] .system-dock{color:#f0dfb3}
body[data-theme="cream70s"] .brand{letter-spacing:-.02em}
body[data-theme="cream70s"] .desktop-icon{color:#fceedb;text-shadow:0 2px 4px rgba(40,20,8,.6)}
body[data-theme="cream70s"] .desktop-icon .icon-glyph{color:#f0dfb3;background:rgba(66,33,15,.65);box-shadow:0 0 0 8px rgba(66,33,15,.65),0 0 0 9px rgba(103,48,20,.5)}
body[data-theme="cream70s"] .gallery img{filter:sepia(.55) contrast(1.02)}

/* ---------- 05 — MULTICOLOR CRT/CYBER TERMINAL (rainbow neon on black) ---------- */
body[data-theme="cyberterm"]{
  --font-display:"Press Start 2P",monospace;--font-mono:"VT323",monospace;
  --ink:#d8d9d2;--muted:#9a9a95;--line:#7a286d;
  --accent:#48d9ef;--accent2:#c33c9e;
  --panel:#06070c;--panel2:#020306;--card:#070a0d;--card-ink:#d8d9d2;
  --radius:14px;--radius-sm:3px;--icon-radius:3px;
  --wall:radial-gradient(circle,#11131b,#020306 72%);
  --scan:.85;--noise:.05;--glitch:.10;--vignette:.32;--bg-tint:rgba(10,4,16,.30);
}
body[data-theme="cyberterm"] .desktop-stage:before{content:"";position:absolute;inset:0 0 0 0;z-index:0;background:repeating-linear-gradient(90deg,transparent 0 60px,rgba(72,217,239,.10) 61px 62px);transform:perspective(400px) rotateX(60deg) translateY(30%);transform-origin:center bottom;opacity:.6}
body[data-theme="cyberterm"] .brand{text-shadow:2px 0 #48d9ef,-2px 0 #c33c9e}
body[data-theme="cyberterm"] .brand:after,body[data-theme="cyberterm"] .titlebar span:first-child:after{content:"▌";margin-left:5px;animation:blink .8s steps(2,end) infinite}
body[data-theme="cyberterm"] .scanlines{animation:scanroll 3.5s linear infinite}
body[data-theme="cyberterm"] .noise{animation:noise .18s steps(2) infinite,staticburst 4s steps(1) infinite}
body[data-theme="cyberterm"] .desktop-stage:before{animation:gridscroll 2.6s linear infinite}
body[data-theme="cyberterm"] .desktop-icon:nth-child(6n+1) .icon-glyph{color:#48d9ef;background:rgba(3,15,17,.6);box-shadow:0 0 0 8px rgba(3,15,17,.6),0 0 0 9px rgba(72,217,239,.5)}
body[data-theme="cyberterm"] .desktop-icon:nth-child(6n+2) .icon-glyph{color:#70e65a;background:rgba(4,16,4,.6);box-shadow:0 0 0 8px rgba(4,16,4,.6),0 0 0 9px rgba(112,230,90,.5)}
body[data-theme="cyberterm"] .desktop-icon:nth-child(6n+3) .icon-glyph{color:#c33c9e;background:rgba(16,3,12,.6);box-shadow:0 0 0 8px rgba(16,3,12,.6),0 0 0 9px rgba(195,60,158,.5)}
body[data-theme="cyberterm"] .desktop-icon:nth-child(6n+4) .icon-glyph{color:#a071e0;background:rgba(11,4,17,.6);box-shadow:0 0 0 8px rgba(11,4,17,.6),0 0 0 9px rgba(118,51,170,.5)}
body[data-theme="cyberterm"] .desktop-icon:nth-child(6n+5) .icon-glyph{color:#d7d14b;background:rgba(17,15,3,.6);box-shadow:0 0 0 8px rgba(17,15,3,.6),0 0 0 9px rgba(215,209,75,.5)}
body[data-theme="cyberterm"] .desktop-icon:nth-child(6n+6) .icon-glyph{color:#70e65a;background:rgba(4,16,4,.6);box-shadow:0 0 0 8px rgba(4,16,4,.6),0 0 0 9px rgba(112,230,90,.5)}
body[data-theme="cyberterm"] .gallery img{filter:contrast(1.15) saturate(1.3)}

/* ---------- 06 — 1970s WALNUT/BROWN CATALOG (pill nav, rainbow arc) ---------- */
body[data-theme="walnut"]{
  --font-display:"Libre Baskerville",Georgia,serif;--font-mono:"IBM Plex Mono",monospace;
  --ink:#e7d9ae;--muted:#c9b98c;--line:#806040;
  --accent:#914323;--accent2:#657143;
  --panel:#4b2f20;--panel2:#2b1d16;--card:#5a3927;--card-ink:#f0e3bc;
  --radius:14px;--radius-sm:18px;--icon-radius:20px;
  --wall:linear-gradient(90deg,#2e2119,#1d1511 70%);
  --scan:.05;--noise:.20;--glitch:0;--vignette:.18;--bg-tint:rgba(40,20,10,.14);
}
body[data-theme="walnut"] .desktop-stage:before{content:"";position:absolute;left:-6%;top:12%;width:26%;height:100%;z-index:0;background:linear-gradient(90deg,#743018 0 18%,#b14d28 18% 35%,#7c5b2d 35% 53%,#64724a 53% 70%,transparent 70%);opacity:.35;border-radius:80px;transform:rotate(-3deg)}
body[data-theme="walnut"] .brand{font-style:italic;font-weight:700}
body[data-theme="walnut"] .systembar:before{content:"";position:absolute;left:0;top:0;bottom:0;width:70px;background:linear-gradient(180deg,#743018 0 25%,#b14d28 25% 50%,#7c5b2d 50% 75%,#64724a 75%);opacity:.85;animation:archsweep 7s ease-in-out infinite}
body[data-theme="walnut"] .desktop-stage:before{animation:archsweep 7s ease-in-out infinite 1s}
body[data-theme="walnut"] .playlist button,body[data-theme="walnut"] .button-row button,body[data-theme="walnut"] .file-list a,body[data-theme="walnut"] .file-list button,body[data-theme="walnut"] .link-board a,body[data-theme="walnut"] .settings-footer button{background:linear-gradient(#70492f,#5a3927)}
body[data-theme="walnut"] .desktop-icon .icon-glyph{color:#f0e3bc;background:rgba(40,25,15,.6);box-shadow:0 0 0 8px rgba(40,25,15,.6),0 0 0 9px rgba(145,67,35,.45)}
body[data-theme="walnut"] .gallery img{filter:sepia(.6) contrast(1.05)}

/* ---------- 07 — NEON SYNTHWAVE GRID (glowing outlines on void) ---------- */
body[data-theme="synthgrid"]{
  --font-display:"Orbitron",sans-serif;--font-mono:"Space Mono",monospace;
  --ink:#e5e1d5;--muted:#b4b0a4;--line:rgba(135,91,185,.7);
  --accent:#7651ed;--accent2:#e53bbd;
  --panel:#0b0a1f;--panel2:#0a091b;--card:#3a1a52;--card-ink:#fff0f8;
  --radius:12px;--radius-sm:3px;--icon-radius:3px;
  --wall:radial-gradient(ellipse at 50% 80%,rgba(77,30,117,.28),transparent 45%),#080719;
  --scan:.25;--noise:.05;--glitch:.06;--vignette:.30;--bg-tint:rgba(20,10,40,.20);
}
body[data-theme="synthgrid"] .desktop-stage:before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,transparent 55%,rgba(229,59,189,.08) 56%,transparent 58%),repeating-linear-gradient(90deg,transparent 0 70px,rgba(32,229,239,.12) 71px 72px);transform:perspective(450px) rotateX(58deg) translateY(28%);transform-origin:center bottom;opacity:.7;animation:gridscroll 3s linear infinite}
body[data-theme="synthgrid"] .desktop-icon .icon-glyph{animation:neonbuzz 7s ease-in-out infinite}
body[data-theme="synthgrid"] .brand{letter-spacing:-.04em;text-shadow:0 0 8px rgba(118,81,237,.6)}
body[data-theme="synthgrid"] .window{box-shadow:0 0 20px rgba(118,81,237,.18),10px 12px 0 rgba(0,0,0,.3)}
body[data-theme="synthgrid"] .titlebar{box-shadow:0 0 8px rgba(229,59,189,.25)}
body[data-theme="synthgrid"] .desktop-icon:nth-child(6n+1) .icon-glyph{color:#20e5ef;background:rgba(3,17,18,.55);box-shadow:0 0 0 8px rgba(3,17,18,.55),0 0 8px 9px rgba(32,229,239,.35)}
body[data-theme="synthgrid"] .desktop-icon:nth-child(6n+2) .icon-glyph{color:#7651ed;background:rgba(12,4,20,.55);box-shadow:0 0 0 8px rgba(12,4,20,.55),0 0 8px 9px rgba(118,81,237,.35)}
body[data-theme="synthgrid"] .desktop-icon:nth-child(6n+3) .icon-glyph{color:#e1e52b;background:rgba(19,18,3,.55);box-shadow:0 0 0 8px rgba(19,18,3,.55),0 0 8px 9px rgba(225,229,43,.35)}
body[data-theme="synthgrid"] .desktop-icon:nth-child(6n+4) .icon-glyph{color:#9cf22c;background:rgba(10,19,3,.55);box-shadow:0 0 0 8px rgba(10,19,3,.55),0 0 8px 9px rgba(156,242,44,.35)}
body[data-theme="synthgrid"] .desktop-icon:nth-child(6n+5) .icon-glyph{color:#22df71;background:rgba(3,18,10,.55);box-shadow:0 0 0 8px rgba(3,18,10,.55),0 0 8px 9px rgba(34,223,113,.35)}
body[data-theme="synthgrid"] .desktop-icon:nth-child(6n+6) .icon-glyph{color:#e53bbd;background:rgba(18,3,15,.55);box-shadow:0 0 0 8px rgba(18,3,15,.55),0 0 8px 9px rgba(229,59,189,.35)}
body[data-theme="synthgrid"] .desktop-icon:nth-child(6n+2) .icon-glyph{animation-delay:1.1s}
body[data-theme="synthgrid"] .desktop-icon:nth-child(6n+3) .icon-glyph{animation-delay:2.3s}
body[data-theme="synthgrid"] .desktop-icon:nth-child(6n+4) .icon-glyph{animation-delay:.6s}
body[data-theme="synthgrid"] .desktop-icon:nth-child(6n+5) .icon-glyph{animation-delay:3.4s}
body[data-theme="synthgrid"] .desktop-icon:nth-child(6n+6) .icon-glyph{animation-delay:1.8s}
body[data-theme="synthgrid"] .gallery img{filter:contrast(1.2) saturate(1.4) brightness(.95)}

/* ---------- 08 — BRASS/HARDWARE + WALNUT SKEUOMORPHISM ---------- */
body[data-theme="brasswood"]{
  --font-display:"Roboto Slab",Georgia,serif;--font-mono:"IBM Plex Mono",monospace;
  --ink:#e7d5a3;--muted:#c2ab7a;--line:#7f5d2b;
  --accent:#b28a43;--accent2:#405530;
  --panel:#5a3519;--panel2:#2b190d;--card:#604313;--card-ink:#e5d19b;
  --radius:12px;--radius-sm:6px;--icon-radius:6px;
  --wall:linear-gradient(90deg,#3a2112,#21130b);
  --scan:.03;--noise:.10;--glitch:0;--vignette:.20;--bg-tint:rgba(40,20,5,.16);
}
body[data-theme="brasswood"] .desktop-stage:before{content:"";position:absolute;inset:0;z-index:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 2px,transparent 2px 8px);opacity:.6}
body[data-theme="brasswood"] .brand{text-shadow:1px 2px #5b411d}
body[data-theme="brasswood"] .window{overflow:hidden}
body[data-theme="brasswood"] .titlebar{position:relative;overflow:hidden}
body[data-theme="brasswood"] .titlebar:before{content:"";position:absolute;width:5px;height:5px;top:5px;left:5px;border-radius:50%;background:#3a260f;box-shadow:inset 1px 1px rgba(255,255,255,.35),calc(100% + 480px) 0 #3a260f}
body[data-theme="brasswood"] .titlebar:after{content:"";position:absolute;top:0;left:0;width:35%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,244,197,.22),transparent);animation:sheen 6s ease-in-out infinite;pointer-events:none}
body[data-theme="brasswood"] .playlist button,body[data-theme="brasswood"] .button-row button,body[data-theme="brasswood"] .file-list a,body[data-theme="brasswood"] .file-list button,body[data-theme="brasswood"] .link-board a,body[data-theme="brasswood"] .settings-footer button{background:linear-gradient(145deg,#8d672a,#604313 48%,#8b672d);color:#e5d19b}
body[data-theme="brasswood"] .desktop-icon .icon-glyph{color:#e5d19b;background:rgba(45,25,10,.6);box-shadow:0 0 0 8px rgba(45,25,10,.6),0 0 0 9px rgba(178,138,67,.5)}
body[data-theme="brasswood"] .gallery img{filter:sepia(.5) contrast(1.05)}

/* ---------- 09 — MID-CENTURY TRAVEL BROCHURE (circular badges, flat stripe) ---------- */
body[data-theme="brochure"]{
  --font-display:"Fredoka",sans-serif;--font-mono:"DM Mono",monospace;
  --ink:#eadcae;--muted:#c7bb8f;--line:#9a8b5d;
  --accent:#c18a13;--accent2:#3d6f68;
  --panel:#10201c;--panel2:#0b1512;--card:#dfcf9e;--card-ink:#1e2922;
  --radius:12px;--radius-sm:14px;--icon-radius:50%;
  --wall:radial-gradient(circle at 50% 30%,#18332d,#0b1512 75%);
  --scan:0;--noise:0;--glitch:0;--vignette:.12;--bg-tint:rgba(5,20,15,.10);
}
body[data-theme="brochure"] .desktop-stage:before{content:"";position:absolute;left:-8%;top:-4%;height:115%;width:24%;z-index:0;background:linear-gradient(90deg,#913b25 0 17%,#bd721d 17% 34%,#d0a52a 34% 50%,#3d7362 50% 68%,transparent 68%);transform:skewY(-4deg);opacity:.55}
body[data-theme="brochure"] .brand{letter-spacing:-.02em;text-shadow:1px 2px 0 #655a39}
body[data-theme="brochure"] .systembar:after{content:"";position:absolute;right:0;top:0;bottom:0;width:12px;background:linear-gradient(180deg,#b74e2a,#c37c1b,#d0a42b,#4f7660)}
body[data-theme="brochure"] .desktop-icon .icon-glyph{border-radius:50%;animation:softpulse 6s ease-in-out infinite}
body[data-theme="brochure"] .desktop-icon:nth-child(6n+1) .icon-glyph{color:#fff;background:#3d6f68;box-shadow:0 0 0 8px #3d6f68}
body[data-theme="brochure"] .desktop-icon:nth-child(6n+2) .icon-glyph{color:#fff;background:#b76615;box-shadow:0 0 0 8px #b76615}
body[data-theme="brochure"] .desktop-icon:nth-child(6n+3) .icon-glyph{color:#fff;background:#9e432b;box-shadow:0 0 0 8px #9e432b}
body[data-theme="brochure"] .desktop-icon:nth-child(6n+4) .icon-glyph{color:#fff;background:#4c827c;box-shadow:0 0 0 8px #4c827c}
body[data-theme="brochure"] .desktop-icon:nth-child(6n+5) .icon-glyph{color:#fff;background:#9e432b;box-shadow:0 0 0 8px #9e432b}
body[data-theme="brochure"] .desktop-icon:nth-child(6n+6) .icon-glyph{color:#fff;background:#c18a13;box-shadow:0 0 0 8px #c18a13}
body[data-theme="brochure"] .window{border:0}
body[data-theme="brochure"] .gallery img{filter:saturate(1.1)}

/* ---------- 10 — GREEN DOT-MATRIX/EARLY OFFICE COMPUTER (pale card in dark shell) ---------- */
body[data-theme="dotmatrix"]{
  --font-display:"VT323",monospace;--font-mono:"IBM Plex Mono",monospace;
  --ink:#304b42;--muted:#64766b;--line:#7b8678;
  --accent:#1d322c;--accent2:#64766b;
  --panel:#e2e3c6;--panel2:#1d322c;--card:#31483e;--card-ink:#d2d5b5;
  --radius:13px;--radius-sm:3px;--icon-radius:2px;
  --wall:radial-gradient(circle,#3a4540,#1e2522 72%);
  --scan:.06;--noise:.20;--glitch:0;--vignette:.10;--bg-tint:rgba(20,30,25,.12);
}
body[data-theme="dotmatrix"] .desktop-stage:before{content:"◉  ▫  ▫     FILES  ▫  ▫";position:absolute;z-index:0;right:6vw;top:9vh;color:rgba(210,213,181,.12);font:16px "VT323";letter-spacing:.1em;pointer-events:none}
body[data-theme="dotmatrix"] .brand{letter-spacing:.02em}
body[data-theme="dotmatrix"] .brand:after,body[data-theme="dotmatrix"] .titlebar span:first-child:after{content:"_";margin-left:4px;animation:blink 1s steps(2,end) infinite}
body[data-theme="dotmatrix"] .window{overflow:hidden}
body[data-theme="dotmatrix"] .window:after{content:"";position:absolute;left:0;right:0;height:18%;top:-18%;background:linear-gradient(rgba(29,50,44,.16),transparent);animation:printscan 5s linear infinite;pointer-events:none}
body[data-theme="dotmatrix"] .system-right button,body[data-theme="dotmatrix"] .dock-status select,body[data-theme="dotmatrix"] .system-dock #gameDock{background:#1d322c;color:#d2d5b5;border-color:#64766b}
body[data-theme="dotmatrix"] .desktop-icon .icon-glyph{color:#e2e3c6;background:rgba(20,32,28,.6);box-shadow:0 0 0 8px rgba(20,32,28,.6),0 0 0 9px rgba(100,118,107,.45)}
body[data-theme="dotmatrix"] .playlist button,body[data-theme="dotmatrix"] .file-list a,body[data-theme="dotmatrix"] .file-list button,body[data-theme="dotmatrix"] .link-board a,body[data-theme="dotmatrix"] .button-row button,body[data-theme="dotmatrix"] .settings-footer button{border-bottom:1px dashed var(--line);border-radius:0}
body[data-theme="dotmatrix"] .gallery img{filter:grayscale(.6) sepia(.2) hue-rotate(70deg)}

/* OLD MIXTAPE V2 — APPEND TO END OF EXISTING style.css */

/* Shared */
.window{overflow:hidden;transition:border-radius .18s ease,box-shadow .18s ease,border .18s ease}
.window .titlebar{position:relative;z-index:2}.window .content{position:relative;z-index:1}
.window .actions{display:flex;align-items:center;gap:5px}.window .actions button{position:relative;z-index:4}
.window button,.window .file-list a,.window .link-board a,.systembar button,.system-dock button,.panel-button,.settings-footer button{transition:transform .08s ease,box-shadow .08s ease,border-radius .12s ease}
.window button:active,.systembar button:active,.system-dock button:active,.panel-button:active,.settings-footer button:active{transform:translateY(1px)}

/* 1 Hearth Capsule */
body[data-window-style="hearth"] .window{border-radius:28px;border-width:2px;box-shadow:6px 9px 0 rgba(0,0,0,.28)}
body[data-window-style="hearth"] .titlebar{border-radius:26px 26px 14px 14px;margin:4px 5px 0;padding-left:14px}
body[data-window-style="hearth"] .content{border-radius:18px}
body[data-window-style="hearth"] .close{width:22px!important;height:22px!important;border-radius:50%!important}

/* 2 Departure Board */
body[data-window-style="departure"] .window{border-radius:18px;border-width:2px;box-shadow:0 0 0 2px color-mix(in srgb,var(--line) 55%,transparent),0 8px 18px rgba(0,0,0,.28)}
body[data-window-style="departure"] .titlebar{letter-spacing:.10em;text-transform:uppercase;border-bottom:2px solid var(--line)}
body[data-window-style="departure"] .titlebar>span:first-child{font-family:var(--font-mono)}
body[data-window-style="departure"] .close,body[data-window-style="departure"] .fullscreen-btn{border-radius:5px!important;font-family:var(--font-mono)}

/* 3 Bubble Dial */
body[data-window-style="bubble"] .window{border-radius:60px 60px 42px 42px/78px 78px 42px 42px;border-width:2px;box-shadow:7px 9px 0 rgba(0,0,0,.28)}
body[data-window-style="bubble"] .titlebar{margin:5px 8px 0;border-radius:42px 42px 16px 16px}
body[data-window-style="bubble"] .content{border-radius:30px;margin:0 7px 7px}

/* 4 Fondue Arch */
body[data-window-style="fondue"] .window{border-radius:54px 54px 14px 14px;border-width:2px;box-shadow:0 9px 20px rgba(0,0,0,.30)}
body[data-window-style="fondue"] .titlebar{min-height:40px;border-radius:50px 50px 0 0;padding-top:7px;justify-content:center}
body[data-window-style="fondue"] .content{border-radius:0 0 12px 12px}

/* 5 Lava Portal */
body[data-window-style="lava"] .window{border-radius:52% 48% 44% 56%/20px 28px 24px 32px;border-width:2px;box-shadow:8px 10px 24px rgba(0,0,0,.30)}
body[data-window-style="lava"] .titlebar{margin:5px 7px 0;border-radius:30px 24px 18px 22px}
body[data-window-style="lava"] .content{border-radius:26px 18px 30px 20px}

/* 6 Record Sleeve */
body[data-window-style="record"] .window{border-radius:5px;border-width:2px;box-shadow:7px 8px 0 rgba(0,0,0,.24)}
body[data-window-style="record"] .titlebar{margin:5px;border-radius:2px;border-bottom:1px solid var(--line)}
body[data-window-style="record"] .close{width:24px!important;height:24px!important;border-radius:50%!important;font-size:13px!important;box-shadow:inset 0 0 0 2px var(--panel)}
body[data-window-style="record"] .fullscreen-btn{border-radius:2px!important}

/* 7 Horizon Disc */
body[data-window-style="horizon"] .window{border-radius:16px;border-width:2px;box-shadow:0 9px 18px rgba(0,0,0,.26)}
body[data-window-style="horizon"] .titlebar{border-bottom:1px solid var(--line)}
body[data-window-style="horizon"] .titlebar:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);opacity:.55}
body[data-window-style="horizon"] .close{border-radius:50%!important}

/* 8 Porthole Cabinet */
body[data-window-style="porthole"] .window{border-radius:24px;border:7px solid color-mix(in srgb,var(--accent) 58%,var(--line));box-shadow:inset 0 0 0 2px var(--panel),0 9px 20px rgba(0,0,0,.35)}
body[data-window-style="porthole"] .titlebar{margin:3px 4px 0;border-radius:17px 17px 9px 9px}
body[data-window-style="porthole"] .close,body[data-window-style="porthole"] .fullscreen-btn{border-radius:50%!important;border-width:2px!important}

/* 9 Egg Pod */
body[data-window-style="egg"] .window{border-radius:46% 54% 48% 52%/34px 34px 24px 24px;border-width:2px;box-shadow:5px 8px 0 rgba(0,0,0,.22)}
body[data-window-style="egg"] .titlebar{margin:5px 9px 0;border-radius:30px 30px 12px 12px}
body[data-window-style="egg"] .content{border-radius:22px}

/* 10 Pillow Console */
body[data-window-style="pillow"] .window{border-radius:38px;border-width:1px;box-shadow:5px 7px 0 rgba(0,0,0,.22)}
body[data-window-style="pillow"] .titlebar{margin:5px 8px 0;border-radius:28px}
body[data-window-style="pillow"] .content{border-radius:25px}

/* Button styles — independent of window style */
body[data-button-style="hearth"] .window button,body[data-button-style="hearth"] .system-dock button,body[data-button-style="hearth"] .panel-button,body[data-button-style="hearth"] .settings-footer button{border-radius:20px!important;box-shadow:0 2px 0 rgba(0,0,0,.20)}
body[data-button-style="departure"] .window button,body[data-button-style="departure"] .system-dock button,body[data-button-style="departure"] .panel-button,body[data-button-style="departure"] .settings-footer button{border-radius:3px!important;font-family:var(--font-mono);letter-spacing:.04em}
body[data-button-style="bubble"] .window button,body[data-button-style="bubble"] .system-dock button,body[data-button-style="bubble"] .panel-button,body[data-button-style="bubble"] .settings-footer button{border-radius:8px!important;border-width:2px!important;box-shadow:2px 3px 0 rgba(0,0,0,.22)}
body[data-button-style="fondue"] .window button,body[data-button-style="fondue"] .system-dock button,body[data-button-style="fondue"] .panel-button,body[data-button-style="fondue"] .settings-footer button{border-radius:6px 6px 16px 16px!important}
body[data-button-style="lava"] .window button,body[data-button-style="lava"] .system-dock button,body[data-button-style="lava"] .panel-button,body[data-button-style="lava"] .settings-footer button{border-radius:48% 52% 44% 56%!important}
body[data-button-style="record"] .window button,body[data-button-style="record"] .system-dock button,body[data-button-style="record"] .panel-button,body[data-button-style="record"] .settings-footer button{border-radius:3px!important;box-shadow:3px 3px 0 rgba(0,0,0,.18)}
body[data-button-style="horizon"] .window button,body[data-button-style="horizon"] .system-dock button,body[data-button-style="horizon"] .panel-button,body[data-button-style="horizon"] .settings-footer button{border-radius:40px 40px 5px 5px!important}
body[data-button-style="porthole"] .window button,body[data-button-style="porthole"] .system-dock button,body[data-button-style="porthole"] .panel-button,body[data-button-style="porthole"] .settings-footer button{border-radius:14px!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 50%,transparent)}
body[data-button-style="egg"] .window button,body[data-button-style="egg"] .system-dock button,body[data-button-style="egg"] .panel-button,body[data-button-style="egg"] .settings-footer button{border-radius:16px!important}
body[data-button-style="pillow"] .window button,body[data-button-style="pillow"] .system-dock button,body[data-button-style="pillow"] .panel-button,body[data-button-style="pillow"] .settings-footer button{border-radius:30px!important}

/* Picker UI */
.style-picker-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}
.style-picker{display:flex;flex-direction:column;gap:5px;min-width:0}
.style-picker span{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.style-picker select{width:100%;min-height:34px;padding:7px 9px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font:inherit;border-radius:8px}
.style-picker-note{font-family:var(--font-mono);font-size:10px;line-height:1.45;opacity:.68;margin-top:3px}
.settings-style-readout{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 2px}
.settings-style-readout div{border:1px dashed var(--line);padding:7px 9px;min-width:0}
.settings-style-readout small{display:block;font-family:var(--font-mono);font-size:9px;opacity:.65;margin-bottom:2px}
.settings-style-readout b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:700px){.style-picker-grid,.settings-style-readout{grid-template-columns:1fr}body[data-window-style="porthole"] .window{border-width:4px}body[data-window-style="bubble"] .window{border-radius:38px}}