/* Control Room v0.2 — top navigation, dual-mode themes and notebook-style tasks */
:root{--bg:#14171f;--side:#1c202d;--surface:#232938;--panel:#303647;--text:#f5f4fa;--muted:#aeb5c4;--accent:#bcb3fa;--border:#3a4357;--task-bg:var(--surface)}
body{background:var(--bg);color:var(--text);transition:background-color .22s,color .22s}
#shell{display:block;min-height:100dvh}.sidebar,.mobile-nav,.topbar #location{display:none!important}.main{width:100%;min-height:100dvh}
.compact-header{position:sticky;top:0;z-index:8;width:100%;height:70px;padding:0 clamp(16px,3vw,45px);background:var(--side);border-bottom:1px solid var(--border);gap:22px;backdrop-filter:blur(16px)}
.compact-header .brand{font-size:19px;letter-spacing:-.8px;padding:0;white-space:nowrap;gap:8px;flex-shrink:0}.compact-header .symbol{font-size:24px}.compact-header .top-actions{flex-shrink:0}.top-nav{display:flex;align-items:center;justify-content:center;gap:3px;flex:1}.top-nav button,.mobile-links button{border:0;background:transparent;color:var(--muted);font-size:13px;font-weight:600;padding:10px 12px;border-radius:10px;white-space:nowrap;cursor:pointer}.top-nav button:hover,.top-nav button.active,.mobile-links button.active{background:var(--surface);color:var(--accent)}.mobile-links{display:none}
#content{max-width:1230px;padding:clamp(22px,3.5vw,44px);margin:auto;min-height:calc(100dvh - 70px);position:relative;z-index:1}
body[data-theme="forest"] #content::before,body[data-theme="floral"] #content::before{content:"";position:fixed;inset:70px 0 0;pointer-events:none;opacity:.28;z-index:-1;background-size:380px;background-repeat:repeat;background-image:url("/forest.svg")}
body[data-theme="floral"] #content::before{background-image:url("/floral.svg");opacity:.22;background-size:420px}
body[data-theme="rainbow"] #content::before{content:"";position:fixed;inset:70px 0 0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 8% 20%,rgba(233,115,172,.15),transparent 35%),radial-gradient(ellipse at 89% 28%,rgba(87,145,241,.17),transparent 37%),radial-gradient(ellipse at 55% 92%,rgba(88,219,169,.14),transparent 40%)}
body[data-theme="neon"] #content::before{content:"";position:fixed;inset:70px 0 0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 95% 16%,rgba(43,233,238,.17),transparent 45%),radial-gradient(ellipse at 0 90%,rgba(245,65,220,.14),transparent 42%)}
.card,.task,.song{backdrop-filter:blur(8px)}
#content .pagehead{align-items:center}#content .pagehead h1{font-weight:800;letter-spacing:-1.25px}
.theme-mode{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:15px 0 22px}
.mode-toggle{display:inline-flex;gap:3px;border:1px solid var(--border);padding:5px;background:var(--surface);border-radius:13px}
.mode-toggle button{border:0;border-radius:9px;background:transparent;color:var(--muted);padding:10px 18px;font-weight:700}
.mode-toggle button.active{background:var(--accent);color:#161923}
.theme-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.theme-tile{display:flex;flex-direction:column;align-items:stretch;gap:9px;padding:10px;background:var(--surface);border:2px solid transparent;border-radius:16px;min-width:0;color:var(--text);cursor:pointer;text-align:left;transition:transform .15s,border-color .15s}
.theme-tile:hover{transform:translateY(-3px)}.theme-tile.active{border-color:var(--accent)}
.theme-preview{height:78px;border-radius:11px;position:relative;overflow:hidden;background:var(--preview);border:1px solid rgba(128,128,128,.15)}
.theme-preview:before{content:"";position:absolute;left:11px;top:12px;width:25%;height:12px;border-radius:5px;background:var(--preview-accent);box-shadow:0 20px 0 -3px var(--preview-accent),0 38px 0 -4px var(--preview-accent)}
.theme-preview:after{content:"";position:absolute;right:10px;top:12px;width:44%;height:50px;border-radius:7px;background:color-mix(in srgb,var(--preview-accent) 27%,var(--preview));border:1px solid color-mix(in srgb,var(--preview-accent) 44%,transparent)}
.theme-tile-name{font-size:12px;font-weight:750;display:flex;justify-content:space-between;align-items:center;padding:0 2px;gap:3px}.theme-tile small{font-size:10px;color:var(--muted);font-weight:500}
.settings-card{margin-top:18px}
.todo-board{display:grid;gap:0;max-width:950px}.todo-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px 10px;border:1px solid var(--border);background:var(--task-bg);min-height:61px;border-radius:12px;position:relative;transition:background .16s,box-shadow .16s}
.todo-row:hover{box-shadow:0 5px 19px rgba(0,0,0,.08)}.todo-row.dragging{opacity:.42}.todo-row.drag-target{outline:2px solid var(--accent)}.todo-row.done .todo-entry{text-decoration:line-through;opacity:.55}
.todo-row .todo-check{width:19px;height:19px;accent-color:var(--accent);cursor:pointer}.todo-entry{width:100%;background:transparent;border:0;outline:0;box-shadow:none;padding:9px 4px;color:var(--text);font-size:15px;min-width:0}
.todo-entry:focus{border:0;box-shadow:none}.todo-entry::placeholder{color:var(--muted);opacity:.73}
.todo-row-controls{display:flex;align-items:center;gap:3px}
.todo-tool{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:15px;cursor:pointer;flex-shrink:0}
.todo-tool:hover{background:var(--panel);color:var(--accent)}.todo-row .drag-handle{cursor:grab}.todo-row .drag-handle:active{cursor:grabbing}
.todo-separator{height:23px;display:flex;align-items:center;justify-content:center;position:relative}
.todo-separator button{width:29px;height:26px;border:1px solid var(--border);background:var(--surface);color:var(--accent);border-radius:50%;display:grid;place-items:center;font-size:18px;line-height:1;opacity:0;transform:scale(.78);transition:.15s;z-index:2;cursor:pointer}
.todo-separator:hover button,.todo-separator:focus-within button,.todo-separator button:focus-visible{opacity:1;transform:scale(1)}.todo-separator:before{content:"";height:1px;background:var(--border);position:absolute;left:12px;right:12px;opacity:0}.todo-separator:hover:before{opacity:1}
.todo-row.first-entry{border:1px dashed var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.todo-more{position:relative}.todo-more summary{list-style:none;cursor:pointer}.todo-more summary::-webkit-details-marker{display:none}
.todo-menu{position:absolute;right:0;top:34px;z-index:6;width:min(340px,84vw);padding:15px;border:1px solid var(--border);border-radius:15px;background:var(--side);box-shadow:0 12px 40px #0004;display:grid;gap:12px;color:var(--text)}
.todo-menu label{font-weight:650;margin-bottom:4px}.todo-menu .color-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px}.color-pick{border:1px solid #9995;min-width:0;aspect-ratio:1;border-radius:9px;background:var(--c);cursor:pointer}.color-pick.current{outline:2px solid var(--accent);outline-offset:2px}
.todo-menu select{font-size:13px;padding:8px}.todo-menu .row{justify-content:space-between}.todo-menu .delete-btn{border:0;border-radius:9px;padding:8px 12px;background:rgba(209,77,94,.12);color:#e991a3}
.todo-tips{font-size:12px;color:var(--muted);margin:12px 0 25px}.todo-hint{margin-bottom:18px;color:var(--muted)}.todo-board .task-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1080px){.top-nav button{padding:9px 8px;font-size:12px}.compact-header{gap:9px}.compact-header .brand{font-size:16px}.compact-header .symbol{font-size:21px}}
@media(max-width:840px){.compact-header{height:61px;justify-content:space-between;padding:0 16px}.top-nav{display:none}.mobile-links{display:block;background:var(--side);border-bottom:1px solid var(--border);position:sticky;top:61px;z-index:7}.mobile-links nav{display:flex;overflow-x:auto;gap:4px;padding:8px 12px;scrollbar-width:none}.mobile-links nav::-webkit-scrollbar{display:none}.mobile-links button{font-size:12px;padding:9px 13px}.compact-header .brand{font-size:18px}.theme-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#content{padding:24px 16px 50px;min-height:calc(100dvh - 110px)}body[data-theme="forest"] #content::before,body[data-theme="floral"] #content::before,body[data-theme="rainbow"] #content::before,body[data-theme="neon"] #content::before{inset:110px 0 0}.pagehead{flex-wrap:wrap}.todo-row{grid-template-columns:26px minmax(0,1fr) auto;gap:5px;padding:8px 7px}.todo-tool{width:27px;height:29px}.todo-row-controls{gap:1px}.todo-row .drag-handle{display:none}.todo-separator button{opacity:.76;transform:none}.theme-preview{height:60px}.quick-label{display:none}}
@media(max-width:395px){.theme-grid{gap:7px}.theme-tile{padding:7px}.theme-tile-name{font-size:11px}}
/* Theme palettes: each has independent light/dark values. */
body[data-theme="midnight"][data-mode="light"]{--bg:#f4f3fa;--side:#fff;--surface:#eae8f3;--panel:#e0ddee;--text:#222036;--muted:#635f76;--accent:#7962ce;--border:#d8d4e5}
body[data-theme="midnight"][data-mode="dark"]{--bg:#14171f;--side:#1b1e2b;--surface:#242938;--panel:#303647;--text:#f5f4fa;--muted:#adb1c4;--accent:#bcb3fa;--border:#394154}
body[data-theme="minimal"][data-mode="light"]{--bg:#fafafa;--side:#fff;--surface:#f2f2f2;--panel:#e6e6e6;--text:#1c1c1c;--muted:#646464;--accent:#4d5663;--border:#dedede}
body[data-theme="minimal"][data-mode="dark"]{--bg:#131416;--side:#1b1c1f;--surface:#292a2e;--panel:#35363b;--text:#f3f3f4;--muted:#b0b0b7;--accent:#c5cad2;--border:#404147}
body[data-theme="sage"][data-mode="light"]{--bg:#f1f7f1;--side:#fbfffa;--surface:#e5f0e4;--panel:#d3e5d2;--text:#18362b;--muted:#557064;--accent:#3c9072;--border:#cadfcc}
body[data-theme="sage"][data-mode="dark"]{--bg:#17241f;--side:#1d3027;--surface:#294136;--panel:#355246;--text:#effaf2;--muted:#b7d4c5;--accent:#a8dec6;--border:#436654}
body[data-theme="clay"][data-mode="light"]{--bg:#fcf6ef;--side:#fffaf3;--surface:#f4e8dc;--panel:#ecd8c5;--text:#46342a;--muted:#8c6e61;--accent:#b16a42;--border:#e8d4c4}
body[data-theme="clay"][data-mode="dark"]{--bg:#28211e;--side:#302722;--surface:#41342e;--panel:#58463a;--text:#fff4e9;--muted:#c9b5a8;--accent:#e6c09a;--border:#645249}
body[data-theme="berry"][data-mode="light"]{--bg:#fcf4f9;--side:#fffaff;--surface:#f7e5f1;--panel:#edd0e4;--text:#42243b;--muted:#805d78;--accent:#bb5395;--border:#ead0e0}
body[data-theme="berry"][data-mode="dark"]{--bg:#281c28;--side:#332433;--surface:#453246;--panel:#59415b;--text:#fff3fc;--muted:#d4b3cd;--accent:#f2b7d9;--border:#654a64}
body[data-theme="ocean"][data-mode="light"]{--bg:#eaf5fe;--side:#f9fcff;--surface:#dfeefa;--panel:#c9e2f8;--text:#173551;--muted:#54718b;--accent:#217db5;--border:#c2daed}
body[data-theme="ocean"][data-mode="dark"]{--bg:#0b1a2b;--side:#10243a;--surface:#19344d;--panel:#224761;--text:#ecf8ff;--muted:#a3c4d8;--accent:#5bc1fb;--border:#2f516b}
body[data-theme="lagoon"][data-mode="light"]{--bg:#ebfbfa;--side:#f7fffd;--surface:#dcf2ef;--panel:#c2e6e4;--text:#153b3d;--muted:#517c7c;--accent:#1d9bb2;--border:#b7dddc}
body[data-theme="lagoon"][data-mode="dark"]{--bg:#102b2e;--side:#123638;--surface:#1d484b;--panel:#265d60;--text:#eefdf7;--muted:#a7d5ce;--accent:#65e8ce;--border:#387071}
body[data-theme="forest"][data-mode="light"]{--bg:#ecf3e9;--side:#f5f8ef;--surface:#e1eadb;--panel:#d2dec9;--text:#2c412b;--muted:#667c5f;--accent:#5c8750;--border:#bcccaf}
body[data-theme="forest"][data-mode="dark"]{--bg:#0f211b;--side:#162c24;--surface:#213c30;--panel:#2f5140;--text:#edf6db;--muted:#b5cdb1;--accent:#a2dc86;--border:#3c6047}
body[data-theme="floral"][data-mode="light"]{--bg:#fff4f3;--side:#fffaf8;--surface:#fbe9e8;--panel:#f5d5d9;--text:#54303d;--muted:#9b737d;--accent:#c8678b;--border:#edcfd2}
body[data-theme="floral"][data-mode="dark"]{--bg:#291c29;--side:#332433;--surface:#4b3346;--panel:#604255;--text:#fff0ee;--muted:#dcb6cc;--accent:#f5a7c2;--border:#745468}
body[data-theme="rainbow"][data-mode="light"]{--bg:#f9f5fc;--side:#fff;--surface:#eee9f7;--panel:#e2ddf2;--text:#2c2344;--muted:#6f6287;--accent:#9a59da;--border:#ded4ed}
body[data-theme="rainbow"][data-mode="dark"]{--bg:#1a1732;--side:#24203c;--surface:#352d50;--panel:#433b60;--text:#fff3ff;--muted:#bcb1df;--accent:#f0a2eb;--border:#584b72}
body[data-theme="neon"][data-mode="light"]{--bg:#effbff;--side:#fff;--surface:#e0f3f8;--panel:#d7eaf5;--text:#172f46;--muted:#53738a;--accent:#087fb5;--border:#bbdce8}
body[data-theme="neon"][data-mode="dark"]{--bg:#0c1020;--side:#16152e;--surface:#222243;--panel:#303054;--text:#f6edff;--muted:#b0b7d6;--accent:#36eddf;--border:#3f426a}
body[data-theme="lavender"][data-mode="light"]{--bg:#f8f5ff;--side:#fff;--surface:#efe9fc;--panel:#e1d8f4;--text:#352b50;--muted:#7c6d95;--accent:#9370ce;--border:#ddd4eb}
body[data-theme="lavender"][data-mode="dark"]{--bg:#231f34;--side:#2e2942;--surface:#3b3653;--panel:#4d4567;--text:#f7f0ff;--muted:#c2b8d5;--accent:#d1b6ff;--border:#5c5477}
body[data-mode="light"]{color-scheme:light}body[data-mode="dark"]{color-scheme:dark}
body[data-theme="rainbow"] .primary{background:linear-gradient(110deg,#ea98c7,#b4a5ec,#8ccef4,#9ae7ba);color:#26203b}body[data-theme="rainbow"] .bar i{background:linear-gradient(90deg,#e995c5,#8dcbf6,#a3ebb2)}
body[data-theme="neon"][data-mode="dark"] .primary{background:linear-gradient(100deg,#44e4ed,#a59dff);color:#101323}
body[data-theme="forest"] .card,body[data-theme="floral"] .card{background:color-mix(in srgb,var(--surface) 91%,transparent)}


/* Control Room v0.3 — immersive skins and frictionless checklists */
body[data-theme="underwater"][data-mode="light"]{--bg:#d8f3f7;--side:#e7fbfd;--surface:#d3eef4;--panel:#b5dfea;--text:#12364a;--muted:#4d7788;--accent:#167baf;--border:#aacfdc}
body[data-theme="underwater"][data-mode="dark"]{--bg:#071e32;--side:#0c273a;--surface:#14384a;--panel:#205469;--text:#f1fcff;--muted:#abd6e4;--accent:#81d9f5;--border:#2b6075}
body[data-theme="aurora"][data-mode="light"]{--bg:#eff9f7;--side:#f6fffd;--surface:#e0eeed;--panel:#d4e9e6;--text:#253c49;--muted:#63828c;--accent:#588fa5;--border:#c7dfdc}
body[data-theme="aurora"][data-mode="dark"]{--bg:#101d30;--side:#1a2940;--surface:#253951;--panel:#324967;--text:#f0fffa;--muted:#b5c9cf;--accent:#8be8bd;--border:#405e67}
body[data-theme="sunset"][data-mode="light"]{--bg:#fff4ea;--side:#fffaf3;--surface:#ffe7dc;--panel:#f5d0c5;--text:#53383a;--muted:#9b7274;--accent:#c96e4f;--border:#eccbc1}
body[data-theme="sunset"][data-mode="dark"]{--bg:#321e2a;--side:#422633;--surface:#573340;--panel:#6a4350;--text:#fff5e9;--muted:#e2b9b1;--accent:#ffb782;--border:#7e4d58}
body[data-theme="cosmos"][data-mode="light"]{--bg:#f2f5ff;--side:#fdfdff;--surface:#e6eafa;--panel:#d8dff6;--text:#2c3256;--muted:#7a7fa8;--accent:#686ecc;--border:#cfd5eb}
body[data-theme="cosmos"][data-mode="dark"]{--bg:#11152b;--side:#191f39;--surface:#262d4a;--panel:#343d64;--text:#f2efff;--muted:#b1b5d5;--accent:#a5baff;--border:#454c71}
body[data-theme="cherry"][data-mode="light"]{--bg:#fff2f6;--side:#fffaff;--surface:#ffe3ef;--panel:#f9cade;--text:#4a253c;--muted:#9c6987;--accent:#cd4989;--border:#f0c4d7}
body[data-theme="cherry"][data-mode="dark"]{--bg:#291624;--side:#371f32;--surface:#4b2b41;--panel:#60354c;--text:#fff0fa;--muted:#d8acc8;--accent:#ff88bf;--border:#74445c}
body[data-theme="gold"][data-mode="light"]{--bg:#fbf6e9;--side:#fffdf7;--surface:#f3e9ce;--panel:#e9dbb7;--text:#423820;--muted:#8c7c58;--accent:#b08c37;--border:#e0d2ac}
body[data-theme="gold"][data-mode="dark"]{--bg:#211d16;--side:#30291c;--surface:#423820;--panel:#52452a;--text:#fff5d8;--muted:#d6c39a;--accent:#f1d085;--border:#66543a}
/* Unsplash photographs; attribution and external-image dependency documented in README. */
body[data-theme="forest"] #content::before,body[data-theme="underwater"] #content::before{
 content:"";position:fixed;inset:70px 0 0;pointer-events:none;z-index:-1;
 background-size:cover;background-position:center;background-repeat:no-repeat;
 opacity:1;animation:photoDrift 42s ease-in-out infinite alternate;
}
body[data-theme="forest"][data-mode="dark"] #content::before{
 background-image:linear-gradient(135deg,rgba(9,23,18,.84),rgba(11,40,30,.52)),url("https://images.unsplash.com/photo-1750934194233-b0412bf0a28b?auto=format&fit=crop&w=2000&q=76");
}
body[data-theme="forest"][data-mode="light"] #content::before{
 background-image:linear-gradient(125deg,rgba(237,246,233,.89),rgba(219,234,218,.70)),url("https://images.unsplash.com/photo-1750934194233-b0412bf0a28b?auto=format&fit=crop&w=2000&q=76");
}
body[data-theme="underwater"][data-mode="dark"] #content::before{
 background-image:linear-gradient(130deg,rgba(1,17,38,.79),rgba(3,55,81,.54)),url("https://images.unsplash.com/photo-1756753469595-da35f3fb4df0?auto=format&fit=crop&w=2000&q=76");
}
body[data-theme="underwater"][data-mode="light"] #content::before{
 background-image:linear-gradient(130deg,rgba(221,246,251,.84),rgba(177,224,236,.65)),url("https://images.unsplash.com/photo-1756753469595-da35f3fb4df0?auto=format&fit=crop&w=2000&q=76");
}
body[data-theme="forest"] .card,body[data-theme="underwater"] .card,body[data-theme="forest"] .todo-row,body[data-theme="underwater"] .todo-row{
 background:color-mix(in srgb,var(--surface) 91%,transparent);backdrop-filter:blur(17px);
}
body[data-theme="forest"] .topbar,body[data-theme="underwater"] .topbar{background:color-mix(in srgb,var(--side) 90%,transparent)}
.theme-tile[data-theme="forest"] .theme-preview{background-image:linear-gradient(#103b2866,#103b2866),url("https://images.unsplash.com/photo-1750934194233-b0412bf0a28b?auto=format&fit=crop&w=500&q=55")!important;background-size:cover!important;background-position:center!important}
.theme-tile[data-theme="underwater"] .theme-preview{background-image:linear-gradient(#16567955,#16567955),url("https://images.unsplash.com/photo-1756753469595-da35f3fb4df0?auto=format&fit=crop&w=500&q=55")!important;background-size:cover!important;background-position:center!important}
body[data-theme="aurora"] #content::before,body[data-theme="cosmos"] #content::before,body[data-theme="sunset"] #content::before{
 content:"";position:fixed;inset:70px 0 0;z-index:-1;pointer-events:none;
 background:radial-gradient(ellipse at 12% 13%,color-mix(in srgb,var(--accent) 25%,transparent),transparent 35%),
 radial-gradient(ellipse at 90% 87%,color-mix(in srgb,#63a3ec 22%,transparent),transparent 48%);
 animation:glowBreathe 16s ease-in-out infinite alternate;
}
@keyframes photoDrift{0%{background-position:50% 46%}100%{background-position:52% 57%}}
@keyframes glowBreathe{0%{opacity:.43;transform:scale(1)}100%{opacity:.88;transform:scale(1.055)}}
@media(max-width:840px){body[data-theme="forest"] #content::before,body[data-theme="underwater"] #content::before,body[data-theme="aurora"] #content::before,body[data-theme="cosmos"] #content::before,body[data-theme="sunset"] #content::before{inset:110px 0 0}}
@media(prefers-reduced-motion:reduce){body #content::before{animation:none!important}.click-pulse{display:none!important}}
.todo-board .wide-add{
 width:100%;height:28px;min-height:28px;display:flex;align-items:center;justify-content:center;gap:8px;
 border:0;position:relative;padding:0 12px;color:var(--accent);background:transparent;opacity:.12;cursor:pointer;transition:opacity .18s,background .18s,border-radius .18s;transform:none;
}
.todo-board .wide-add:hover,.todo-board .wide-add:focus-visible{opacity:1;background:color-mix(in srgb,var(--accent) 9%,transparent);border-radius:9px}
.todo-board .wide-add span{font-size:21px;line-height:1}.todo-board .wide-add small{font-size:10px;letter-spacing:.3px}
.todo-board .wide-add:before{display:none}
.todo-draft{border-style:dashed;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.todo-draft.saving{opacity:.5;pointer-events:none}
.todo-draft .todo-entry{font-size:15px}
.song-progress{align-items:center;flex-wrap:wrap;gap:16px;padding:15px 18px}
.song-main{flex:1 1 190px;min-width:155px}
.song-lights{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.song-light-item{min-width:35px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px}
.song-light-item small{color:var(--muted);font-size:9px}
.status-light{width:11px;height:11px;border-radius:50%;display:block;background:var(--border);border:1px solid color-mix(in srgb,var(--text) 13%,transparent)}
.status-light.lit{background:hsl(var(--light-hue) 82% 65%);border-color:hsl(var(--light-hue) 82% 65%);box-shadow:0 0 6px hsl(var(--light-hue) 82% 65% / .6),0 0 14px hsl(var(--light-hue) 82% 65% / .25)}
.settings-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0 5px}
.click-pulse{position:fixed;pointer-events:none;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid var(--accent);border-radius:50%;z-index:50;animation:pulseRing .45s ease-out forwards}
body[data-effect="spark"] .click-pulse{border-style:dotted;border-width:3px;box-shadow:0 0 10px var(--accent);animation:pulseSpark .6s ease-out forwards}
@keyframes pulseRing{from{opacity:.75;transform:scale(.3)}to{opacity:0;transform:scale(3)}}
@keyframes pulseSpark{from{opacity:1;transform:scale(.5) rotate(0)}to{opacity:0;transform:scale(3) rotate(100deg)}}
@media(hover:hover) and (pointer:fine){body[data-cursor="precision"] button,body[data-cursor="precision"] a,body[data-cursor="precision"] summary{cursor:crosshair}
body[data-cursor="glow"] button,body[data-cursor="glow"] a,body[data-cursor="glow"] summary{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Ccircle cx='9' cy='9' r='7' fill='%23d8ccff' opacity='.5'/%3E%3Ccircle cx='9' cy='9' r='2.8' fill='%238a6bd9'/%3E%3C/svg%3E") 9 9,pointer}}
@media(max-width:840px){.settings-options{grid-template-columns:1fr}.song-lights{width:100%;justify-content:space-between;gap:4px}.song-light-item{min-width:30px}}


/* Optional unobtrusive loading feedback */
#fetch-indicator{position:fixed;right:18px;bottom:19px;width:52px;height:40px;border:1px solid var(--border);border-radius:13px;background:var(--side);z-index:90;box-shadow:0 6px 26px #0002;display:flex;align-items:center;justify-content:center;gap:4px}
#fetch-indicator[hidden]{display:none!important}
#fetch-indicator span{display:block;width:7px;height:7px;border-radius:50%;background:var(--accent)}
#fetch-indicator.loading-dots span{animation:loaderBounce .75s infinite alternate}
#fetch-indicator.loading-dots span:nth-child(2){animation-delay:.15s}
#fetch-indicator.loading-dots span:nth-child(3){animation-delay:.3s}
#fetch-indicator.loading-orbit span:first-child{width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--accent);background:transparent;animation:loaderSpin .65s linear infinite}
#fetch-indicator.loading-orbit span:not(:first-child){display:none}
#fetch-indicator.loading-minimal span{width:20px;height:4px;border-radius:4px;animation:loaderFade 1.1s ease-in-out infinite}
#fetch-indicator.loading-minimal span:not(:first-child){display:none}
@keyframes loaderSpin{to{transform:rotate(360deg)}}
@keyframes loaderBounce{to{transform:translateY(-6px);opacity:.3}}
@keyframes loaderFade{50%{opacity:.22}}
@media(prefers-reduced-motion:reduce){#fetch-indicator span{animation:none!important}}