/* Five independent visual identities. Original is the unchanged base stylesheet. */
.design-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:15px 0 24px}.design-card{position:relative;padding:8px;border:1px solid var(--line);border-radius:11px;background:var(--bg);text-align:left;transition:border-color .15s,transform .15s;min-width:0}.design-card:hover{transform:translateY(-2px);border-color:var(--accent)}.design-card[aria-checked=true]{border:2px solid var(--accent);padding:7px}.design-card:last-child{grid-column:1/-1;display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:center}.design-card:last-child .design-card-title{margin-top:0}.design-card-title{display:block;font-size:12px;font-weight:650;margin:9px 4px 0}.design-card-desc{display:block;color:var(--muted);font-size:10px;line-height:1.5;margin:3px 4px 5px}.design-check{position:absolute;right:14px;bottom:21px;color:var(--accent);display:none}.design-check svg{width:15px;height:15px}.design-card[aria-checked=true] .design-check{display:block}.design-card:last-child .design-check{top:14px;bottom:auto}.design-preview{display:grid;grid-template-columns:20% 1fr 28%;grid-template-rows:1fr 11px;gap:4px;height:86px;padding:7px;overflow:hidden;border-radius:6px;background:var(--pv-bg);color:var(--pv-accent);border:1px solid #ffffff0c}.pv-side{grid-row:1;display:flex;flex-direction:column;gap:6px;padding-top:5px;border-right:1px solid #ffffff16}.pv-side i{display:block;width:70%;height:3px;background:currentColor;opacity:.35;border-radius:2px}.pv-side i:first-child{height:7px;width:8px;opacity:1;border-radius:3px;margin-bottom:6px}.pv-main{padding:5px 4px}.pv-hero{height:22px;background:var(--pv-hero);margin-bottom:7px;border-radius:4px}.pv-main i{height:3px;display:block;background:var(--pv-text);width:90%;opacity:.2;margin:5px 0}.pv-cover{aspect-ratio:1;align-self:center;background:var(--pv-art);border-radius:5px;position:relative;overflow:hidden}.pv-cover:after{content:"";position:absolute;inset:18%;border:7px solid #fff2;border-radius:50%}.pv-player{grid-column:1/-1;background:var(--pv-player);display:flex;align-items:center;justify-content:center;gap:8px;border-radius:3px}.pv-player i{display:block;width:4px;height:4px;border-radius:50%;background:currentColor}.pv-player i:nth-child(2){width:7px;height:7px}.design-card[data-design=midnight]{--pv-bg:#0d1512;--pv-hero:linear-gradient(115deg,#19392b,#0b2119);--pv-art:conic-gradient(from 30deg,#c3f572,#275948,#0d302c,#b6e88c);--pv-text:#eaf2e9;--pv-accent:#baf479;--pv-player:#17251c}.design-card[data-design=aurora]{--pv-bg:#151126;--pv-hero:linear-gradient(115deg,#542f77,#244a61);--pv-art:conic-gradient(#bb9cf9,#5de7db,#ee98c6,#bb9cf9);--pv-text:#f1eafb;--pv-accent:#d7bbff;--pv-player:#302042}.design-card[data-design=studio]{--pv-bg:#eee8dc;--pv-hero:#d2c8b6;--pv-art:repeating-radial-gradient(#ce7848 0 5px,#3b3731 6px 10px);--pv-text:#40372c;--pv-accent:#ab5636;--pv-player:#d4ccbe}.design-card[data-design=mono]{--pv-bg:#f5f5f5;--pv-hero:#181818;--pv-art:linear-gradient(40deg,#0f0f0f 47%,#ccc 48%);--pv-text:#111;--pv-accent:#111;--pv-player:#dedede}.design-card[data-design=mono] .design-preview,.design-card[data-design=mono] .pv-hero,.design-card[data-design=mono] .pv-cover{border-radius:0}.design-card[data-design=mono] .pv-cover{grid-column:2/4;grid-row:1;aspect-ratio:auto;height:100%;width:35%;justify-self:end}.design-card[data-design=studio] .pv-cover:after{inset:36%;border:0;background:#e7d5aa}.design-card[data-design=original]{--pv-bg:#f7f8f3;--pv-hero:#e9eddf;--pv-art:linear-gradient(130deg,#a1b58b,#dce3b8);--pv-text:#252b24;--pv-accent:#657b48;--pv-player:#fff}.design-picker-label{margin-top:13px}.design-name-pill{font-size:9px;text-transform:uppercase;letter-spacing:1.7px;color:var(--accent);border:1px solid var(--line);border-radius:20px;padding:4px 10px}.design-hint{font-size:11px;line-height:1.8;color:var(--muted);margin:0 0 8px}
/* Shared player scale and touch targets across the new designs. */
:root:not([data-design=original]){--sidebar:224px;--panel:284px;--player:104px;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif}
:root:not([data-design=original]) .main{padding-left:32px;padding-right:32px}
:root:not([data-design=original]) .brand{letter-spacing:-1.2px;font-size:24px}
:root:not([data-design=original]) .brand small{letter-spacing:1.9px;font-size:6px}
:root:not([data-design=original]) .sidebar{padding-top:34px}
:root:not([data-design=original]) .topbar{height:88px}
:root:not([data-design=original]) .side-caption{font-size:10px}
:root:not([data-design=original]) .side-link{font-size:12px;min-height:48px}
:root:not([data-design=original]) .hero-text h1{font-size:43px;letter-spacing:-2px;font-weight:750;line-height:1.16}
:root:not([data-design=original]) .hero-text>p{font-size:13px}
:root:not([data-design=original]) .hero-meta{font-size:10px}
:root:not([data-design=original]) .primary-btn,:root:not([data-design=original]) .secondary-btn{font-size:12px;padding:12px 18px}
:root:not([data-design=original]) .room-hero{min-height:300px;padding:30px}
:root:not([data-design=original]) .view-tab{font-size:12px}
:root:not([data-design=original]) .search-box input{font-size:11px}
:root:not([data-design=original]) .track-name b{font-size:12px}
:root:not([data-design=original]) .track-name small{font-size:10px}
:root:not([data-design=original]) .track-row{min-height:72px}
:root:not([data-design=original]) .track-thumb{width:40px;height:40px}
:root:not([data-design=original]) .track-duration{font-size:11px}
:root:not([data-design=original]) .now-info h2{font-size:18px;line-height:1.4}
:root:not([data-design=original]) .now-info>p{font-size:11px}
:root:not([data-design=original]) .player-track b{font-size:12px}
:root:not([data-design=original]) .player-track small{font-size:10px}
:root:not([data-design=original]) .play-button{width:43px;height:43px}
:root:not([data-design=original]) .progress-line time{font-size:9px}
:root:not([data-design=original]) .empty-state{padding-top:36px;padding-bottom:35px}
:root:not([data-design=original]) .empty-state h2{font-size:19px}
:root:not([data-design=original]) .empty-state p{font-size:12px}
:root:not([data-design=original]) .text-btn{font-size:12px}
:root:not([data-design=original]) .demo-btn{font-size:11px}
:root:not([data-design=original]) .room-edit{display:inline-flex}
/* 01. Midnight — a dedicated streaming-player interface. */
:root[data-design=midnight]{--bg:#edf2ee;--surface:#f9fbf8;--surface2:#e2eae3;--text:#15261d;--muted:#65776b;--line:#d7e1d9;--accent:#315a3b;--accent-soft:#dce9d8;--hero:#d8e4d2}
:root[data-design=midnight][data-theme=dark]{--bg:#0c120f;--surface:#101a14;--surface2:#1a281e;--text:#eff6ee;--muted:#91a395;--line:#243128;--accent:#b9f477;--accent-soft:#263923;--hero:#173022}
[data-design=midnight] .sidebar{background:var(--bg);border-right:1px solid var(--line)}
[data-design=midnight] .brand-mark{border-radius:50%}
[data-design=midnight] .room-hero{background:radial-gradient(ellipse at 85% 0%,#75a05044,transparent 65%),linear-gradient(125deg,var(--hero),var(--surface));border:0;border-radius:18px;position:relative}
[data-design=midnight] .hero-art{height:240px;flex-basis:210px;color:var(--accent)}
[data-design=midnight] .art-label{font-size:18px;top:6px;color:var(--accent);opacity:.8}
[data-design=midnight] .art-label em{font-size:24px}
[data-design=midnight] .art-star{display:none}
[data-design=midnight] .vinyl{width:185px;height:185px;top:37px;right:-10px;box-shadow:0 0 65px #8dbb372d,12px 14px 25px #0006;border:3px solid #314236}
[data-design=midnight] .vinyl-label{inset:53px;background:#baf479}
[data-design=midnight] .art-orbit{border-color:#9bbd6e22}
[data-design=midnight] .art-footer{color:var(--muted)}
[data-design=midnight] .heading-dot{display:none}
[data-design=midnight] .primary-btn{border-radius:40px;font-weight:700}
[data-design=midnight] .secondary-btn{border-radius:40px;background:transparent;border-color:var(--muted)}
[data-design=midnight] .now-panel{background:var(--bg);padding-top:33px}
[data-design=midnight] .panel-title{font-size:11px;letter-spacing:.5px}
[data-design=midnight] .cover-art{background:conic-gradient(from 45deg,#c8ef8b,#1a493f,#1c3735,#89b276,#e5f8a4);border-radius:14px;box-shadow:0 15px 40px #0003}
[data-design=midnight] .cover-orb{height:140%;width:90%;right:-20%;top:-35%;border-radius:45%;background:linear-gradient(20deg,#b5e2a688,#264c3f66,#e6fc9166);transform:rotate(45deg)}
[data-design=midnight] .cover-lines{border:1px solid #ceefaf55;transform:rotate(-30deg) scale(1.2)}
[data-design=midnight] .cover-caption{color:#f3ffda;text-shadow:0 2px 20px #0003;font-size:29px;font-weight:800;bottom:35px}
[data-design=midnight] .cover-caption em{font-family:inherit;font-style:normal;font-weight:800;font-size:31px}
[data-design=midnight] .cover-number{color:#f3ffda;letter-spacing:3px}
[data-design=midnight] .listening-note{padding-top:16px;margin-top:21px}
[data-design=midnight] .listening-note p{font-size:12px;margin-bottom:20px}
[data-design=midnight] .player{background:var(--surface);box-shadow:0 -14px 40px #0001}
[data-design=midnight] .mini-cover{background:linear-gradient(135deg,#b7d28a,#2b5640);color:#edf4df;border-radius:9px}
[data-design=midnight] .track-thumb{background:linear-gradient(135deg,#b6ce88,#25523c)}
[data-design=midnight] .side-link.active{border-radius:7px}
/* 02. Aurora — floating glass, luminous covers, round controls. */
:root[data-design=aurora]{--bg:#f0edf8;--surface:#ffffffb8;--surface2:#e9e0f3;--text:#2e2244;--muted:#847393;--line:#dcd1ea;--accent:#7851b4;--accent-soft:#e3d6f2;--hero:#e0cff1}
:root[data-design=aurora][data-theme=dark]{--bg:#100e1b;--surface:#1d172bbd;--surface2:#2b203c;--text:#f6efff;--muted:#a797bb;--line:#382b49;--accent:#d8b6ff;--accent-soft:#38264d;--hero:#342047}
[data-design=aurora] body{background:radial-gradient(ellipse at 60% 0%,#a153db24,transparent 60%),radial-gradient(ellipse at 95% 70%,#4dafa926,transparent 45%),var(--bg)}
[data-design=aurora] .sidebar{background:var(--surface);backdrop-filter:blur(25px);border:1px solid var(--line);border-radius:20px;left:14px;top:14px;bottom:calc(var(--player) + 14px);width:calc(var(--sidebar) - 14px);padding-left:13px;padding-right:13px}
[data-design=aurora] .brand{font-size:22px}
[data-design=aurora] .brand-mark{background:linear-gradient(135deg,#d0a9ff,#6eaff4);border-radius:11px}
[data-design=aurora] .room-hero{border-radius:26px;background:radial-gradient(ellipse at 100% 50%,#70dbd744,transparent 55%),linear-gradient(120deg,var(--hero),var(--surface));border:1px solid var(--line);box-shadow:0 20px 50px #5b358a10}
[data-design=aurora] .hero-art{height:240px;flex-basis:195px}
[data-design=aurora] .art-label,[data-design=aurora] .art-footer,[data-design=aurora] .art-star{display:none}
[data-design=aurora] .vinyl{width:180px;height:180px;border:0;top:20px;right:0;background:radial-gradient(circle at 30% 30%,#e9caff,#a075ce 35%,#5d8eae 65%,#98ead7);border-radius:35% 65% 50% 50%;box-shadow:0 0 30px #b2a0ff66,inset 5px 5px 30px #e7d4ff99;transform:rotate(-20deg)}
[data-design=aurora] .vinyl-label{background:#ffffff22;inset:36px;border:1px solid #ffffff55;backdrop-filter:blur(6px);color:#fff}
[data-design=aurora] .vinyl-label small{font-size:6px;letter-spacing:1.5px}
[data-design=aurora] .art-orbit{border-color:#ae8ed255;transform:rotate(-20deg) scale(.9,1.05);left:0;top:0}
[data-design=aurora] .primary-btn{border-radius:12px;background:linear-gradient(120deg,var(--accent),#9f7ac4);box-shadow:0 4px 16px #9e73d733;color:var(--bg)}
[data-design=aurora] .secondary-btn{border-radius:12px;background:var(--surface)}
[data-design=aurora] .now-panel{background:transparent;border:0;padding-top:33px}
[data-design=aurora] .cover-art{border-radius:24px;background:conic-gradient(from 15deg,#7a60ad,#d29abb,#84c7d6,#9a8ed3,#7a60ad);box-shadow:0 14px 30px #603b921f}
[data-design=aurora] .cover-orb{background:linear-gradient(135deg,#e7ceff99,#5fc5db88);height:135%;width:90%;top:-20%;right:-18%;transform:rotate(20deg);box-shadow:-20px 70px 30px #58458a66;filter:blur(1px)}
[data-design=aurora] .cover-caption,[data-design=aurora] .cover-number{color:#fff}
[data-design=aurora] .cover-caption{font-size:28px;font-weight:350;letter-spacing:-1px}
[data-design=aurora] .cover-caption em{font-size:39px;font-weight:400}
[data-design=aurora] .cover-lines{border-color:#ffe1ff99;box-shadow:0 0 0 14px #ffffff0d,0 0 0 30px #ffffff0b,0 0 0 46px #ffffff09}
[data-design=aurora] .track-row{border:1px solid var(--line);margin-bottom:7px;border-radius:13px;padding-left:12px;padding-right:12px;background:var(--surface)}
[data-design=aurora] .track-head{border:0}
[data-design=aurora] .track-thumb{border-radius:50%;background:linear-gradient(135deg,#b28bdc,#61aaa6)}
[data-design=aurora] .sound-settings{border-radius:13px}
[data-design=aurora] .player{left:14px;right:14px;bottom:12px;height:calc(var(--player) - 12px);border:1px solid var(--line);border-radius:20px;backdrop-filter:blur(25px);box-shadow:0 10px 50px #30195622}
[data-design=aurora] .play-button{box-shadow:0 0 20px #bd8aee44}
[data-design=aurora] .mini-cover{background:linear-gradient(135deg,#c0a3e1,#73aaa8);color:#fff;border-radius:12px}
[data-design=aurora] dialog{border-radius:24px;background:var(--bg)}
/* 03. Studio — tactile hi-fi, orange accents, analog record. */
:root[data-design=studio]{--bg:#eae6dc;--surface:#f4f0e7;--surface2:#e1dacc;--text:#302b24;--muted:#8b7e6c;--line:#ccc3b3;--accent:#af542f;--accent-soft:#e9cfbb;--hero:#d5cbbc}
:root[data-design=studio][data-theme=dark]{--bg:#25231f;--surface:#302c25;--surface2:#3d372d;--text:#ede4d5;--muted:#ad9b82;--line:#4d4437;--accent:#eea474;--accent-soft:#573b2c;--hero:#40372d}
[data-design=studio] body{background-image:repeating-linear-gradient(0deg,transparent 0,transparent 3px,#00000003 4px)}
[data-design=studio] .brand-mark{border-radius:4px}
[data-design=studio] .sidebar{background:var(--surface);border-right:1px solid var(--line)}
[data-design=studio] .brand{font-family:Georgia,"Noto Serif JP",serif;font-weight:600;letter-spacing:-.6px}
[data-design=studio] .side-link.active{border-radius:3px;border-left:3px solid var(--accent);padding-left:9px}
[data-design=studio] .room-hero{border-radius:4px;border:1px solid var(--line);background:linear-gradient(120deg,var(--surface2),var(--hero));box-shadow:inset 0 1px 1px #fff4,0 3px 0 var(--line)}
[data-design=studio] .hero-text h1{font-family:Georgia,"Noto Serif JP",serif;font-size:40px;font-weight:500;letter-spacing:-1.8px}
[data-design=studio] .eyebrow{font-family:monospace;letter-spacing:1px;font-size:8px}
[data-design=studio] .hero-art{color:var(--text)}
[data-design=studio] .art-label{font-family:Georgia,serif;font-size:18px;letter-spacing:0;top:9px}
[data-design=studio] .art-label em{font-size:24px}
[data-design=studio] .art-orbit{border-color:var(--line)}
[data-design=studio] .art-star{display:none}
[data-design=studio] .vinyl{top:55px;right:-7px;width:165px;height:165px;border-color:#25241f}
[data-design=studio] .vinyl-label{inset:43px;background:#c7774e;color:#402d20}
[data-design=studio] .art-footer{color:var(--muted);font-family:monospace;letter-spacing:0}
[data-design=studio] .primary-btn,[data-design=studio] .secondary-btn{border-radius:4px;box-shadow:0 2px 0 #0002}
[data-design=studio] .now-panel{padding:32px 20px;background:var(--bg)}
[data-design=studio] .cover-art{background:#c9c0ae;border-radius:3px;border:8px solid var(--surface);box-shadow:0 3px 10px #0002}
[data-design=studio] .cover-orb{width:175px;height:175px;background:repeating-radial-gradient(circle,#39382f 0,#25261f 2px,#4b4a3e 3px,#272920 4px);top:10%;left:20%;right:auto;box-shadow:7px 7px 12px #0003}
[data-design=studio] .cover-orb:after{content:"MR";display:flex;align-items:center;justify-content:center;position:absolute;inset:55px;background:#c3794f;border-radius:50%;color:#453321;font:18px Georgia,serif}
[data-design=studio] .cover-lines{display:none}
[data-design=studio] .cover-caption{color:#382e23;font-size:18px;line-height:1.1;left:13px;bottom:25px;letter-spacing:-.7px;z-index:1;text-shadow:0 0 10px #e8dbc9}
[data-design=studio] .cover-caption em{font-size:24px}
[data-design=studio] .cover-number{left:13px;bottom:8px;color:#5a4d3c}
[data-design=studio] .track-row{border-radius:0;min-height:68px}
[data-design=studio] .track-thumb{border-radius:3px;background:linear-gradient(135deg,#c1a77f,#9e7456)}
[data-design=studio] .player{background:linear-gradient(var(--surface),var(--surface2));border-top:3px double var(--line);box-shadow:0 -3px 0 #0001}
[data-design=studio] .play-button{border-radius:7px;box-shadow:inset 0 1px 1px #fff5,0 3px 0 #0003}
[data-design=studio] .transport .icon-btn{border:1px solid var(--line);box-shadow:0 1px 0 #0001;border-radius:4px}
[data-design=studio] .progress-line time{font-family:monospace}
[data-design=studio] .mini-cover{border:1px solid var(--line);background:var(--accent-soft);border-radius:3px}
[data-design=studio] .sound-settings{border-radius:4px;border:1px solid var(--line)}
[data-design=studio] dialog{border-radius:5px;box-shadow:5px 7px 0 #0002}
/* 04. Mono — editorial library with a prominent inline player. */
:root[data-design=mono]{--bg:#f6f6f4;--surface:#fff;--surface2:#e9e9e6;--text:#151515;--muted:#767674;--line:#d4d4d0;--accent:#151515;--accent-soft:#e3e3df;--hero:#e7e7e3;--panel:0px}
:root[data-design=mono][data-theme=dark]{--bg:#121212;--surface:#1b1b1b;--surface2:#2b2b2b;--text:#f6f6f2;--muted:#a0a09a;--line:#383835;--accent:#f6f6f2;--accent-soft:#333330;--hero:#242424}
[data-design=mono] .app-shell{grid-template-columns:var(--sidebar) minmax(0,1fr);grid-template-rows:auto auto}
[data-design=mono] .main{grid-column:2;grid-row:1;padding-right:40px;padding-left:40px}
[data-design=mono] .sidebar{background:var(--bg)}
[data-design=mono] .brand{font-weight:800;letter-spacing:-1.5px}
[data-design=mono] .brand-mark{border-radius:0;height:33px}
[data-design=mono] .side-link{border-radius:0}
[data-design=mono] .side-link.active{background:var(--text);color:var(--bg)}
[data-design=mono] .room-hero{background:transparent;border:0;border-top:2px solid var(--text);border-bottom:1px solid var(--text);border-radius:0;min-height:230px;padding:32px 0;overflow:visible}
[data-design=mono] .hero-text h1{font-size:54px;letter-spacing:-3px;font-weight:800}
[data-design=mono] .heading-dot{display:none}
[data-design=mono] .hero-art{height:200px;width:220px;flex-basis:220px;background:var(--text);color:var(--bg);overflow:hidden}
[data-design=mono] .art-orbit{border-color:var(--bg);opacity:.2;width:180px;height:180px;left:80px;top:50px}
[data-design=mono] .orbit2{width:240px;height:240px;left:50px;top:20px}
[data-design=mono] .vinyl{display:none}
[data-design=mono] .art-label{font:800 27px/1.02 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;left:18px;top:17px;letter-spacing:-1px}
[data-design=mono] .art-label em{font-size:27px;font-family:inherit;font-style:normal;font-weight:300}
[data-design=mono] .art-star{color:var(--bg);font-size:70px;top:auto;bottom:14px;right:18px}
[data-design=mono] .art-footer{display:none}
[data-design=mono] .primary-btn,[data-design=mono] .secondary-btn{border-radius:0;border:1px solid var(--text)}
[data-design=mono] .library-section{padding-top:20px}
[data-design=mono] .track-row{border-radius:0;min-height:68px}
[data-design=mono] .track-thumb,[data-design=mono] .track-row:nth-child(3n+2) .track-thumb,[data-design=mono] .track-row:nth-child(3n) .track-thumb{border-radius:0;background:var(--text);color:var(--bg)}
[data-design=mono] .track-head{font-size:10px;letter-spacing:1px}
[data-design=mono] .now-panel{grid-column:2;grid-row:2;margin:0 40px 34px;padding:20px 0;border:0;border-top:1px solid var(--text);display:grid;grid-template-columns:110px 1fr auto;grid-template-rows:auto auto;gap:10px 22px;background:transparent;align-items:center}
[data-design=mono] .panel-title{grid-column:2;grid-row:1;margin:0;align-self:end;max-width:280px;font-size:10px}
[data-design=mono] .cover-art{grid-column:1;grid-row:1/3;width:110px;height:110px;border-radius:0;background:var(--text)}
[data-design=mono] .cover-orb{background:var(--bg);height:120px;width:120px;top:-40px;right:-30px;box-shadow:none}
[data-design=mono] .cover-lines{border-color:var(--bg);opacity:.2;width:120px;height:120px;top:10px;left:15px;box-shadow:none}
[data-design=mono] .cover-caption{font-size:12px;left:10px;bottom:20px;color:var(--bg);letter-spacing:-.5px}
[data-design=mono] .cover-caption em{font-size:17px}
[data-design=mono] .cover-number{font-size:4px;left:10px;bottom:8px;color:var(--bg)}
[data-design=mono] .now-info{grid-column:2;grid-row:2;text-align:left;margin:0;align-self:start}
[data-design=mono] .now-info>small{display:none}
[data-design=mono] .now-info h2{margin:0 0 4px;font-size:19px}
[data-design=mono] .now-tools{grid-column:3;grid-row:1;margin:0;align-self:end;gap:12px}
[data-design=mono] .sound-settings{grid-column:3;grid-row:2;align-self:start;min-width:170px;border-radius:0;margin-top:4px}
[data-design=mono] .listening-note{display:none}
[data-design=mono] .player{grid-template-columns:250px minmax(200px,1fr) 220px;background:var(--bg);border-top:2px solid var(--text)}
[data-design=mono] .mini-cover{border-radius:0;background:var(--text);color:var(--bg)}
[data-design=mono] .speed-pill,[data-design=mono] .sound-settings,[data-design=mono] dialog,[data-design=mono] .design-card{border-radius:0}
/* Responsive design profiles. The original mobile layout stays available unchanged. */
@media(min-width:1450px){:root:not([data-design=original]){--sidebar:242px;--panel:310px}:root:not([data-design=original]) .main{padding-left:45px;padding-right:45px}:root:not([data-design=original]) .hero-text h1{font-size:49px}[data-design=mono]{--panel:0px!important}[data-design=mono] .hero-text h1{font-size:60px}}
@media(max-width:1180px){:root:not([data-design=original]){--sidebar:200px;--panel:238px}:root:not([data-design=original]) .main{padding-left:22px;padding-right:22px}:root:not([data-design=original]) .hero-text h1{font-size:33px}:root:not([data-design=original]) .room-hero{padding:25px}:root:not([data-design=original]) .hero-art{flex-basis:145px;margin-left:-30px;transform:scale(.84);transform-origin:right center}[data-design=mono]{--panel:0px}[data-design=mono] .room-hero{padding-left:0;padding-right:0}[data-design=mono] .hero-text h1{font-size:45px}[data-design=mono] .hero-art{height:200px;flex-basis:220px;transform:none;margin:0}[data-design=mono] .now-panel{margin-left:22px;margin-right:22px}}
@media(max-width:960px){:root:not([data-design=original]){--sidebar:200px;--panel:0px}:root:not([data-design=original]) .hero-art{flex-basis:180px;margin-left:-10px;transform:scale(.9)}:root:not([data-design=original]) .player{grid-template-columns:180px minmax(180px,1fr) 150px;gap:13px}[data-design=mono] .now-panel{display:grid}[data-design=mono] .hero-art{transform:none;margin:0}[data-design=aurora] .sidebar{left:10px;width:calc(var(--sidebar) - 8px)}[data-design=aurora] .brand{font-size:20px;gap:6px}}
@media(max-width:760px){:root:not([data-design=original]){--sidebar:0px;--player:144px}:root:not([data-design=original]) .sidebar{width:244px;left:0;top:0;bottom:var(--player);border-radius:0;padding-left:18px;padding-right:18px;background:var(--bg)}:root:not([data-design=original]) .main{padding:0 18px}:root:not([data-design=original]) .topbar{height:70px}:root:not([data-design=original]) .room-hero{min-height:280px;padding:25px;isolation:isolate;position:relative}:root:not([data-design=original]) .hero-text h1{font-size:36px;letter-spacing:-1.8px;max-width:90%}:root:not([data-design=original]) .hero-text>p{font-size:12px;max-width:85%}:root:not([data-design=original]) .hero-actions{gap:8px}:root:not([data-design=original]) .hero-actions .primary-btn,:root:not([data-design=original]) .hero-actions .secondary-btn{padding:11px 15px;font-size:12px}:root:not([data-design=original]) .hero-meta{font-size:9px;gap:7px}:root:not([data-design=original]) .hero-art{position:absolute;right:-35px;top:18px;opacity:.3;transform:scale(.92);width:195px;height:240px;margin:0;z-index:-1}:root:not([data-design=original]) .hero-art .art-label,:root:not([data-design=original]) .hero-art .art-footer{display:none}:root:not([data-design=original]) .now-panel{display:none}:root:not([data-design=original]) .track-name b{font-size:12px}:root:not([data-design=original]) .track-name small{font-size:10px}:root:not([data-design=original]) .track-row{min-height:70px}:root:not([data-design=original]) .track-thumb{width:37px;height:37px}:root:not([data-design=original]) .player{display:grid;grid-template-columns:1fr auto;gap:3px 13px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));height:var(--player)}:root:not([data-design=original]) .player-track b{font-size:12px}:root:not([data-design=original]) .play-button{width:36px;height:36px}:root:not([data-design=original]) .transport{gap:20px;margin-top:9px}:root:not([data-design=original]) .player-center{grid-column:1/3}:root:not([data-design=original]) .progress-line time{font-size:9px}:root:not([data-design=original]) .empty-state h2{font-size:18px}:root:not([data-design=original]) .empty-state p{font-size:11px}:root:not([data-design=original]) .library-footnote{font-size:9px}[data-design=aurora] .player{left:9px;right:9px;bottom:9px;height:calc(var(--player) - 9px);border-radius:18px;padding:9px 14px 13px}[data-design=aurora] .sidebar{background:var(--bg)}[data-design=aurora] .room-hero{border-radius:23px}[data-design=aurora] .hero-art{right:-15px;top:35px}[data-design=studio] .room-hero{min-height:265px;border-radius:4px}[data-design=studio] .hero-text h1{font-size:33px;letter-spacing:-1.5px}[data-design=mono] .app-shell{display:block}[data-design=mono] .room-hero{padding:26px 0;min-height:270px;overflow:hidden}[data-design=mono] .hero-text h1{font-size:41px;letter-spacing:-2px}[data-design=mono] .hero-art{width:125px;height:205px;right:-18px;top:25px;opacity:.1}[data-design=mono] .art-star{bottom:10px;right:10px;font-size:90px}[data-design=mono] .hero-actions .primary-btn,[data-design=mono] .hero-actions .secondary-btn{padding:11px 14px}[data-design=mono] .now-panel{display:none!important}.design-picker{gap:10px}.design-card-title{font-size:11px}.design-card-desc{font-size:9px}.design-card:last-child{grid-template-columns:110px 1fr}.design-check{right:10px;bottom:18px}.design-preview{height:75px;padding:5px}}
@media(prefers-reduced-motion:reduce){.design-card{transition:none}.design-card:hover{transform:none}}
:root:not([data-design=original]) body.room-language,:root:not([data-design=original]) body.room-soundtrack{--hero:inherit}

/* v0.5 — fifteen additional themes, each with light and dark palettes. */
:root[data-design=ocean]{--bg:#edf4f8;--surface:#fbfdff;--surface2:#dcebf3;--text:#143444;--muted:#617f90;--line:#ccdfe9;--accent:#126c8c;--accent-soft:#d5eaf2;--hero:#b8dbe8;--theme-art:linear-gradient(135deg,#48a3c3,#1b526f,#a4dce3);}
:root[data-design=ocean][data-theme=dark]{--bg:#071b25;--surface:#102a36;--surface2:#153746;--text:#e9f7fc;--muted:#8eb0c1;--line:#244754;--accent:#70d7e3;--accent-soft:#164b59;--hero:#123e50;--theme-art:linear-gradient(135deg,#48a3c3,#1b526f,#a4dce3);}
.design-card[data-design=ocean]{--pv-bg:#071b25;--pv-text:#e9f7fc;--pv-accent:#70d7e3;--pv-hero:#123e50;--pv-player:#102a36;--pv-art:linear-gradient(135deg,#48a3c3,#1b526f,#a4dce3);}
:root[data-design=sakura]{--bg:#fbf2f5;--surface:#fffafb;--surface2:#f4e2e9;--text:#492e3d;--muted:#997788;--line:#ebd2dd;--accent:#a14872;--accent-soft:#f2dce6;--hero:#eed0dd;--theme-art:linear-gradient(135deg,#e5a7c5,#a36e93,#f7d9e6);}
:root[data-design=sakura][data-theme=dark]{--bg:#24151e;--surface:#321e29;--surface2:#422735;--text:#fff0f6;--muted:#c39aa9;--line:#563344;--accent:#eda6c6;--accent-soft:#563149;--hero:#482b3c;--theme-art:linear-gradient(135deg,#e5a7c5,#a36e93,#f7d9e6);}
.design-card[data-design=sakura]{--pv-bg:#fbf2f5;--pv-text:#492e3d;--pv-accent:#a14872;--pv-hero:#eed0dd;--pv-player:#fffafb;--pv-art:linear-gradient(135deg,#e5a7c5,#a36e93,#f7d9e6);}
:root[data-design=ember]{--bg:#f8f0e8;--surface:#fff9f2;--surface2:#f0decd;--text:#472b20;--muted:#94705a;--line:#e4c9b3;--accent:#b64b20;--accent-soft:#f5d4bd;--hero:#eac7a7;--theme-art:linear-gradient(135deg,#ed8439,#79372b,#e8b26d);}
:root[data-design=ember][data-theme=dark]{--bg:#21140e;--surface:#2d1e15;--surface2:#3d2a1e;--text:#fff1df;--muted:#c69c77;--line:#563821;--accent:#ffb576;--accent-soft:#5b341f;--hero:#4b2919;--theme-art:linear-gradient(135deg,#ed8439,#79372b,#e8b26d);}
.design-card[data-design=ember]{--pv-bg:#21140e;--pv-text:#fff1df;--pv-accent:#ffb576;--pv-hero:#4b2919;--pv-player:#2d1e15;--pv-art:linear-gradient(135deg,#ed8439,#79372b,#e8b26d);}
:root[data-design=cobalt]{--bg:#edf1ff;--surface:#fbfcff;--surface2:#dce5ff;--text:#17295b;--muted:#6b7ba2;--line:#cdd7f1;--accent:#2856d8;--accent-soft:#d7e2ff;--hero:#c8d7fc;--theme-art:linear-gradient(135deg,#527aff,#233f9c,#9db4f9);}
:root[data-design=cobalt][data-theme=dark]{--bg:#0a1331;--surface:#131f43;--surface2:#1b2c59;--text:#eef3ff;--muted:#91a4ce;--line:#2a3e6e;--accent:#91b3ff;--accent-soft:#243c73;--hero:#172e65;--theme-art:linear-gradient(135deg,#527aff,#233f9c,#9db4f9);}
.design-card[data-design=cobalt]{--pv-bg:#0a1331;--pv-text:#eef3ff;--pv-accent:#91b3ff;--pv-hero:#172e65;--pv-player:#131f43;--pv-art:linear-gradient(135deg,#527aff,#233f9c,#9db4f9);}
:root[data-design=forest]{--bg:#edf3ed;--surface:#fbfdf8;--surface2:#dfe9da;--text:#263c2a;--muted:#738570;--line:#d1dfc9;--accent:#42653a;--accent-soft:#e0edd6;--hero:#cdddba;--theme-art:linear-gradient(135deg,#8cae63,#385d40,#d0d9a4);}
:root[data-design=forest][data-theme=dark]{--bg:#111d13;--surface:#1a2a1c;--surface2:#263a27;--text:#eff5e5;--muted:#9eaf8c;--line:#364d31;--accent:#b8d295;--accent-soft:#384e2b;--hero:#2c4225;--theme-art:linear-gradient(135deg,#8cae63,#385d40,#d0d9a4);}
.design-card[data-design=forest]{--pv-bg:#111d13;--pv-text:#eff5e5;--pv-accent:#b8d295;--pv-hero:#2c4225;--pv-player:#1a2a1c;--pv-art:linear-gradient(135deg,#8cae63,#385d40,#d0d9a4);}
:root[data-design=sand]{--bg:#f7f1e6;--surface:#fffbf4;--surface2:#eae0cf;--text:#433b2d;--muted:#958674;--line:#ddd0ba;--accent:#936b36;--accent-soft:#ebdec1;--hero:#e3d2ad;--theme-art:linear-gradient(135deg,#c9a670,#856b51,#e5d7ad);}
:root[data-design=sand][data-theme=dark]{--bg:#221e16;--surface:#30291e;--surface2:#3e3527;--text:#f6edda;--muted:#b7a584;--line:#55472f;--accent:#d9b77d;--accent-soft:#57452a;--hero:#4c3a23;--theme-art:linear-gradient(135deg,#c9a670,#856b51,#e5d7ad);}
.design-card[data-design=sand]{--pv-bg:#f7f1e6;--pv-text:#433b2d;--pv-accent:#936b36;--pv-hero:#e3d2ad;--pv-player:#fffbf4;--pv-art:linear-gradient(135deg,#c9a670,#856b51,#e5d7ad);}
:root[data-design=lavender]{--bg:#f4f0fb;--surface:#fffaff;--surface2:#e9e1f5;--text:#3d3055;--muted:#8b7b9d;--line:#ded1ed;--accent:#7c56a6;--accent-soft:#e9dcf8;--hero:#dcd0ee;--theme-art:linear-gradient(135deg,#aa8bd7,#6f6ea8,#d5b6e7);}
:root[data-design=lavender][data-theme=dark]{--bg:#1d172b;--surface:#2a203b;--surface2:#382c4c;--text:#f6edff;--muted:#b2a1c7;--line:#4a395e;--accent:#c9aff0;--accent-soft:#4a3465;--hero:#3d2d57;--theme-art:linear-gradient(135deg,#aa8bd7,#6f6ea8,#d5b6e7);}
.design-card[data-design=lavender]{--pv-bg:#f4f0fb;--pv-text:#3d3055;--pv-accent:#7c56a6;--pv-hero:#dcd0ee;--pv-player:#fffaff;--pv-art:linear-gradient(135deg,#aa8bd7,#6f6ea8,#d5b6e7);}
:root[data-design=ice]{--bg:#eff8fa;--surface:#fcffff;--surface2:#dfeff2;--text:#223d49;--muted:#7595a0;--line:#d0e3e9;--accent:#397e96;--accent-soft:#d6ecf2;--hero:#c4e3ec;--theme-art:linear-gradient(135deg,#8dcede,#4e879e,#e0f5f5);}
:root[data-design=ice][data-theme=dark]{--bg:#122027;--surface:#1b3039;--surface2:#29404b;--text:#ecfbff;--muted:#9cb9c6;--line:#3a5460;--accent:#a2dfef;--accent-soft:#344e5e;--hero:#2c4a57;--theme-art:linear-gradient(135deg,#8dcede,#4e879e,#e0f5f5);}
.design-card[data-design=ice]{--pv-bg:#eff8fa;--pv-text:#223d49;--pv-accent:#397e96;--pv-hero:#c4e3ec;--pv-player:#fcffff;--pv-art:linear-gradient(135deg,#8dcede,#4e879e,#e0f5f5);}
:root[data-design=rose]{--bg:#faf0ef;--surface:#fff9f7;--surface2:#f0dedb;--text:#4f2e32;--muted:#a17c7b;--line:#e7ceca;--accent:#a44e5c;--accent-soft:#f3dbdc;--hero:#e8c6c4;--theme-art:linear-gradient(135deg,#d58c93,#8b4b68,#f4b7a4);}
:root[data-design=rose][data-theme=dark]{--bg:#25151b;--surface:#341e27;--surface2:#452932;--text:#ffeff0;--muted:#c298a1;--line:#573441;--accent:#eea3ae;--accent-soft:#56313d;--hero:#4b2c37;--theme-art:linear-gradient(135deg,#d58c93,#8b4b68,#f4b7a4);}
.design-card[data-design=rose]{--pv-bg:#25151b;--pv-text:#ffeff0;--pv-accent:#eea3ae;--pv-hero:#4b2c37;--pv-player:#341e27;--pv-art:linear-gradient(135deg,#d58c93,#8b4b68,#f4b7a4);}
:root[data-design=neon]{--bg:#eff7fa;--surface:#fbffff;--surface2:#dceef1;--text:#17313b;--muted:#658995;--line:#c6dfe6;--accent:#137e8d;--accent-soft:#ccedf0;--hero:#b8e1e8;--theme-art:linear-gradient(135deg,#55dadd,#6c3e9f,#f5a4d4);}
:root[data-design=neon][data-theme=dark]{--bg:#0b121f;--surface:#111f30;--surface2:#182e41;--text:#edfaff;--muted:#89a8bd;--line:#263d54;--accent:#69edeb;--accent-soft:#1b454d;--hero:#173142;--theme-art:linear-gradient(135deg,#55dadd,#6c3e9f,#f5a4d4);}
.design-card[data-design=neon]{--pv-bg:#0b121f;--pv-text:#edfaff;--pv-accent:#69edeb;--pv-hero:#173142;--pv-player:#111f30;--pv-art:linear-gradient(135deg,#55dadd,#6c3e9f,#f5a4d4);}
:root[data-design=sunset]{--bg:#fff1ed;--surface:#fffaf6;--surface2:#f9dfd4;--text:#4c2c36;--muted:#9d7a7d;--line:#efd0c5;--accent:#be5c51;--accent-soft:#f7dbcb;--hero:#edc2b9;--theme-art:linear-gradient(135deg,#e89966,#8b538d,#f0bfd0);}
:root[data-design=sunset][data-theme=dark]{--bg:#251725;--surface:#342137;--surface2:#472c44;--text:#fff0e7;--muted:#c49bab;--line:#5d3b53;--accent:#ffbe9e;--accent-soft:#603d46;--hero:#583145;--theme-art:linear-gradient(135deg,#e89966,#8b538d,#f0bfd0);}
.design-card[data-design=sunset]{--pv-bg:#251725;--pv-text:#fff0e7;--pv-accent:#ffbe9e;--pv-hero:#583145;--pv-player:#342137;--pv-art:linear-gradient(135deg,#e89966,#8b538d,#f0bfd0);}
:root[data-design=graphite]{--bg:#f0f0ed;--surface:#fafaf7;--surface2:#e1e3dd;--text:#2a2e29;--muted:#7e8479;--line:#cfd4ca;--accent:#64713e;--accent-soft:#e3e8d4;--hero:#d9ddcf;--theme-art:linear-gradient(135deg,#798273,#353d3c,#c0bc90);}
:root[data-design=graphite][data-theme=dark]{--bg:#181c1b;--surface:#222826;--surface2:#303835;--text:#f0f1e6;--muted:#a6ada0;--line:#424a44;--accent:#d5d9a7;--accent-soft:#454a31;--hero:#363d30;--theme-art:linear-gradient(135deg,#798273,#353d3c,#c0bc90);}
.design-card[data-design=graphite]{--pv-bg:#181c1b;--pv-text:#f0f1e6;--pv-accent:#d5d9a7;--pv-hero:#363d30;--pv-player:#222826;--pv-art:linear-gradient(135deg,#798273,#353d3c,#c0bc90);}
:root[data-design=paper]{--bg:#f5f3ec;--surface:#fffef8;--surface2:#e9e5d9;--text:#2c2c26;--muted:#878476;--line:#d6d1c0;--accent:#5e6550;--accent-soft:#e2e6d3;--hero:#e9e5d9;--theme-art:linear-gradient(135deg,#48483c,#aaa68e,#dfdcc7);}
:root[data-design=paper][data-theme=dark]{--bg:#1e1e19;--surface:#2c2c24;--surface2:#3b3a30;--text:#f3f0df;--muted:#b1ac94;--line:#4c493a;--accent:#d5d2b6;--accent-soft:#4f4c37;--hero:#39392c;--theme-art:linear-gradient(135deg,#48483c,#aaa68e,#dfdcc7);}
.design-card[data-design=paper]{--pv-bg:#f5f3ec;--pv-text:#2c2c26;--pv-accent:#5e6550;--pv-hero:#e9e5d9;--pv-player:#fffef8;--pv-art:linear-gradient(135deg,#48483c,#aaa68e,#dfdcc7);}
:root[data-design=velvet]{--bg:#f7f0f5;--surface:#fff9fd;--surface2:#ecdeea;--text:#452e49;--muted:#917495;--line:#dfcadd;--accent:#8d587c;--accent-soft:#edd8e6;--hero:#dfc6dd;--theme-art:linear-gradient(135deg,#74496f,#372b59,#c6a66b);}
:root[data-design=velvet][data-theme=dark]{--bg:#211128;--surface:#301c38;--surface2:#432948;--text:#faeff6;--muted:#c09aba;--line:#59355b;--accent:#e6c589;--accent-soft:#59442f;--hero:#482548;--theme-art:linear-gradient(135deg,#74496f,#372b59,#c6a66b);}
.design-card[data-design=velvet]{--pv-bg:#211128;--pv-text:#faeff6;--pv-accent:#e6c589;--pv-hero:#482548;--pv-player:#301c38;--pv-art:linear-gradient(135deg,#74496f,#372b59,#c6a66b);}
:root[data-design=terminal]{--bg:#eef5eb;--surface:#fafff7;--surface2:#dce8d5;--text:#263b20;--muted:#73896a;--line:#cdddbe;--accent:#3f6e2f;--accent-soft:#ddedce;--hero:#d2e4c1;--theme-art:linear-gradient(135deg,#57a86e,#153b28,#bee68c);}
:root[data-design=terminal][data-theme=dark]{--bg:#081109;--surface:#0d1c10;--surface2:#142b18;--text:#e1f8d3;--muted:#81ac77;--line:#26432b;--accent:#a1ee88;--accent-soft:#25482a;--hero:#15351f;--theme-art:linear-gradient(135deg,#57a86e,#153b28,#bee68c);}
.design-card[data-design=terminal]{--pv-bg:#081109;--pv-text:#e1f8d3;--pv-accent:#a1ee88;--pv-hero:#15351f;--pv-player:#0d1c10;--pv-art:linear-gradient(135deg,#57a86e,#153b28,#bee68c);}
[data-design=ocean] .cover-art,[data-design=sakura] .cover-art,[data-design=ember] .cover-art,[data-design=cobalt] .cover-art,[data-design=forest] .cover-art,[data-design=sand] .cover-art,[data-design=lavender] .cover-art,[data-design=ice] .cover-art,[data-design=rose] .cover-art,[data-design=neon] .cover-art,[data-design=sunset] .cover-art,[data-design=graphite] .cover-art,[data-design=paper] .cover-art,[data-design=velvet] .cover-art,[data-design=terminal] .cover-art{background:var(--theme-art);border-radius:16px;box-shadow:0 16px 35px #0002}
[data-family=nature] .room-hero{background:linear-gradient(125deg,var(--hero),var(--surface));border-radius:23px;border-color:var(--line)}
[data-family=nature] .primary-btn,[data-family=nature] .secondary-btn{border-radius:22px}
[data-family=nature] .cover-caption,[data-family=vivid] .cover-caption{color:#fffaf2;text-shadow:0 2px 14px #0006;font-size:29px}
[data-family=nature] .cover-number,[data-family=vivid] .cover-number{color:#fffaf2}
[data-family=nature] .cover-orb{background:linear-gradient(135deg,#fff7,#ffffff08);box-shadow:-30px 55px 35px #0002;height:140%;top:-40%;right:-40%;width:120%}
[data-family=nature] .vinyl-label{background:var(--accent-soft);color:var(--accent)}
[data-family=nature] .art-label,[data-family=nature] .art-star,[data-family=nature] .art-footer{color:var(--accent)}
[data-family=nature] .track-thumb{background:var(--theme-art);border-radius:9px}
[data-family=nature] .now-panel{background:var(--surface)}
[data-design=sakura] .cover-orb,[data-design=lavender] .cover-orb{border-radius:38% 62% 40% 60%;transform:rotate(20deg)}
[data-design=ice] .cover-orb{border-radius:7px;transform:rotate(35deg)}
[data-design=sand] .room-hero{border-radius:5px;background:repeating-linear-gradient(0deg,transparent 0 3px,#8d7c5005 4px),var(--hero)}
[data-design=forest] .cover-lines{border-color:#eef6da66}
[data-family=vivid] .room-hero{background:radial-gradient(ellipse at 90% 10%,var(--accent-soft),transparent 70%),linear-gradient(110deg,var(--hero),var(--surface));border-radius:15px}
[data-family=vivid] .primary-btn{border-radius:9px;box-shadow:0 4px 20px color-mix(in srgb,var(--accent) 20%,transparent)}
[data-family=vivid] .cover-orb{background:linear-gradient(35deg,#fff2,#fff9,#fff0);height:135%;width:75%;top:-20%;right:-15%;transform:rotate(25deg);box-shadow:-20px 65px 25px #0002}
[data-family=vivid] .vinyl-label{background:var(--accent);color:var(--bg)}
[data-family=vivid] .art-label,[data-family=vivid] .art-star,[data-family=vivid] .art-footer{color:var(--accent)}
[data-family=vivid] .track-thumb{background:var(--theme-art)}
[data-family=vivid] .play-button{box-shadow:0 0 20px color-mix(in srgb,var(--accent) 20%,transparent)}
[data-design=neon] .room-hero{border:1px solid var(--accent)}
[data-design=neon] .cover-lines{border-color:#c5faff99;box-shadow:0 0 0 14px #9ce7ff0c,0 0 0 30px #f29ddb0c,0 0 0 46px #9ce7ff0a}
[data-design=cobalt] .room-hero,[data-design=cobalt] .cover-art,[data-design=cobalt] .primary-btn{border-radius:4px}
[data-design=cobalt] .cover-orb{border-radius:3px;transform:rotate(40deg)}
[data-design=velvet] .hero-text h1,[data-design=velvet] .brand{font-family:Georgia,serif;font-weight:500}
[data-design=velvet] .cover-art{border:1px solid var(--accent);border-radius:5px}
[data-family=minimal] .room-hero{background:var(--surface);border:1px solid var(--line);border-radius:3px}
[data-family=minimal] .primary-btn,[data-family=minimal] .secondary-btn,[data-family=minimal] .brand-mark{border-radius:3px}
[data-family=minimal] .cover-art{border-radius:3px}
[data-family=minimal] .cover-orb{background:#fff2;box-shadow:none;width:200px;height:200px;top:-70px;right:-30px;border:1px solid #fff5}
[data-family=minimal] .cover-caption,[data-family=minimal] .cover-number{color:#fffdec;text-shadow:0 1px 10px #0005}
[data-family=minimal] .art-label,[data-family=minimal] .art-star,[data-family=minimal] .art-footer{color:var(--accent)}
[data-family=minimal] .vinyl-label{background:var(--accent-soft);color:var(--accent)}
[data-family=minimal] .track-thumb{background:var(--theme-art);border-radius:3px}
[data-design=terminal] body,[data-design=terminal] input,[data-design=terminal] button,[data-design=terminal] select{font-family:"SFMono-Regular",Consolas,monospace}
[data-design=terminal] .hero-text h1{font-size:37px;letter-spacing:-1.5px}
[data-design=terminal] .room-hero{border-color:var(--accent);border-style:dashed}
[data-design=paper] .room-hero{border-width:2px 0 1px;border-color:var(--text)}
[data-design=paper] .hero-text h1{font-family:Georgia,serif;font-weight:500}
[data-design=graphite] .player{border-top:3px double var(--line)}
/* Settings now separate theme discovery from storage and security. */
dialog.settings-dialog[open]{display:flex;flex-direction:column;width:min(980px,calc(100vw - 36px));height:min(88dvh,940px);max-height:88dvh;padding:24px;overflow:hidden}
.settings-dialog .dialog-header{flex-shrink:0;margin:0;padding-bottom:15px;border-bottom:1px solid var(--line)}
.settings-dialog #modalBody{overflow:auto;min-height:0;padding:0 5px 12px;scrollbar-gutter:stable;flex:1}
.settings-tabs{position:sticky;top:0;z-index:4;display:flex;gap:7px;padding:14px 0;background:var(--surface);border-bottom:1px solid var(--line);margin-bottom:20px}
.settings-tabs button{border:1px solid transparent;border-radius:8px;padding:10px 14px;font-size:12px;white-space:nowrap;color:var(--muted)}
.settings-tabs button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent);font-weight:600;border-color:var(--line)}
.settings-dialog [data-settings-panel]{border:0;padding:0;margin-bottom:22px}
.settings-dialog [data-settings-panel]>h3{font-size:13px;margin-top:0}
.theme-selected{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;background:var(--hero);border:1px solid var(--line);border-radius:12px;margin-bottom:13px;gap:12px}
.theme-selected small{font-size:10px;letter-spacing:.7px;color:var(--muted)}
.theme-selected h3{font-size:24px;font-weight:650;margin:3px 0 0;letter-spacing:-.8px}
.theme-count{font-size:30px;font-weight:300;color:var(--accent);white-space:nowrap}.theme-count span{display:block;font-size:9px;text-align:right;line-height:1}
.theme-filters{display:flex;align-items:center;gap:12px;padding:12px 0 2px}
.theme-filters .search-box{flex:1;padding:9px 12px;border:1px solid var(--line);border-radius:7px;background:var(--bg)}
.theme-filters .search-box input{width:100%;font-size:12px}
.theme-filters select{font-size:11px;padding:10px}#designVisibleCount{font-size:10px;color:var(--muted);white-space:nowrap}
.settings-dialog .design-picker{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.settings-dialog .design-card{display:block;border-radius:9px;min-height:158px}.settings-dialog .design-card:last-child{grid-column:auto;display:block}
.settings-dialog .design-card:last-child .design-card-title{margin-top:9px}
.settings-dialog .design-preview{height:80px}
.settings-dialog .design-card-title{font-size:12px;margin-right:20px}
.settings-dialog .design-card-desc{font-size:9px;min-height:29px}
.settings-dialog .design-check,.settings-dialog .design-card:last-child .design-check{top:auto;bottom:42px;right:12px}
.cloud-capacity{width:100%;height:6px;accent-color:var(--accent);border:0;margin-bottom:14px}
.cloud-quota-line{font-size:12px;font-variant-numeric:tabular-nums;color:var(--accent)}
/* Direct offline actions in the song list. */
.track-head,.track-row{grid-template-columns:25px minmax(100px,1fr) minmax(60px,.45fr) 40px 30px 30px 28px}
.track-head svg{width:12px;height:12px}.offline-download[aria-busy=true]{opacity:.5;animation:downloadPulse .7s ease-in-out alternate infinite}.offline-download.active{background:var(--accent-soft)}
@keyframes downloadPulse{to{opacity:1}}
@media(max-width:1180px){.settings-dialog .design-picker{grid-template-columns:repeat(3,minmax(0,1fr))}.settings-dialog .design-preview{height:85px}}
@media(max-width:960px){.track-head,.track-row{grid-template-columns:20px minmax(80px,1fr) minmax(35px,.3fr) 35px 28px 28px 26px;gap:7px}}
@media(max-width:760px){dialog.settings-dialog[open]{width:calc(100vw - 20px);height:92dvh;max-height:92dvh;padding:18px 14px}.settings-dialog #modalBody{padding:0 2px 12px}.settings-tabs{gap:3px;overflow-x:auto;padding:11px 0;margin-bottom:16px}.settings-tabs button{font-size:11px;padding:9px 10px}.settings-dialog .design-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.settings-dialog .design-preview{height:77px}.settings-dialog .design-card{min-height:153px}.theme-selected{padding:15px 16px}.theme-selected h3{font-size:22px}.theme-filters{gap:7px;flex-wrap:wrap}.theme-filters .search-box{min-width:140px}.theme-filters select{max-width:120px}#designVisibleCount{margin-left:auto}.track-head,.track-row{grid-template-columns:18px minmax(80px,1fr) 34px 26px 26px 25px;gap:6px}.view-tabs{gap:15px}.view-tab{font-size:11px}.view-tab svg{width:12px;height:12px}.track-name b{font-size:11px!important}}
@media(prefers-reduced-motion:reduce){.offline-download[aria-busy=true]{animation:none}}
/* User-owned storage selector */
.storage-providers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:22px 0}.storage-provider{display:flex;flex-direction:column;align-items:flex-start;gap:15px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);text-align:left;cursor:pointer;min-height:100px;transition:background .15s,border-color .15s}.storage-provider[aria-checked=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface));box-shadow:inset 0 0 0 1px var(--accent)}.storage-provider:hover{border-color:var(--accent)}.provider-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;font-size:17px;font-weight:800;background:var(--surface-2);color:var(--accent)}.storage-source{padding:20px;margin-bottom:18px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.storage-source small{color:var(--muted);font-size:11px}.storage-source h3{margin:7px 0 12px;font-size:19px;overflow-wrap:anywhere}.storage-source p{margin:7px 0}.storage-source-name{font-size:16px;font-weight:700;overflow-wrap:anywhere}.storage-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}.storage-actions button{white-space:normal;text-align:left}.storage-legacy{padding:15px;border-radius:10px;background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--muted);font-size:12px;line-height:1.8}#storageStatus{font-size:12px;color:var(--accent)}@media(max-width:600px){.storage-providers{grid-template-columns:repeat(2,minmax(0,1fr))}.storage-actions{display:grid;grid-template-columns:1fr}.storage-actions button{justify-content:center}.storage-source h3{font-size:16px}}
.storage-download-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;padding:12px 18px;border-radius:24px;color:var(--bg)}
/* Larger controls, independent seek sizing, and a fully dismissible player. */
html:root[data-design] body{--player:var(--player-height,180px)}
html:root[data-design] .icon-btn{width:var(--control-size,44px);height:var(--control-size,44px);min-width:var(--control-size,44px);min-height:var(--control-size,44px)}
html:root[data-design] .icon-btn svg{width:22px;height:22px}
html:root[data-design] .primary-btn,html:root[data-design] .secondary-btn,html:root[data-design] .side-link{min-height:var(--control-size,44px)}
html:root[data-design] .player{height:calc(var(--player) + env(safe-area-inset-bottom));padding-top:16px;padding-bottom:calc(12px + env(safe-area-inset-bottom));gap:20px}
html:root[data-design] .player-close{position:absolute;left:8px;top:6px;z-index:3;background:var(--surface2);border:1px solid var(--line);border-radius:50%}
html:root[data-design] .player-track{padding-left:38px}.player-track b{font-size:13px}.player-track small{font-size:11px}
html:root[data-design] .play-button{width:var(--play-size,60px);height:var(--play-size,60px);flex-shrink:0}
html:root[data-design] .play-button svg{width:28px;height:28px}
html:root[data-design] .transport{gap:clamp(5px,1.4vw,20px);margin:0 0 4px}
html:root[data-design] .transport .icon-btn svg{width:23px;height:23px}
html:root[data-design] input[type=range]{height:var(--seek-height,36px);min-height:var(--seek-height,36px);background:linear-gradient(var(--line),var(--line)) center/100% var(--seek-track,6px) no-repeat;border-radius:10px;touch-action:pan-y}
html:root[data-design] input[type=range]::-webkit-slider-thumb{width:var(--seek-thumb,18px);height:var(--seek-thumb,18px);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent)}
html:root[data-design] input[type=range]::-moz-range-thumb{width:var(--seek-thumb,18px);height:var(--seek-thumb,18px)}
html:root[data-design] .progress-line time{font-size:11px;min-width:34px}.size-setting{display:grid;grid-template-columns:1fr auto;gap:8px 16px;margin:20px 0}.size-setting input{grid-column:1/-1;width:100%}.size-setting output{font-variant-numeric:tabular-nums;color:var(--accent)}
.track-rating{display:flex;align-items:center;gap:2px;grid-column:2/-1;margin:0 0 8px;max-width:100%}.rating-star{display:grid;place-items:center;min-width:var(--rating-size,32px);width:var(--rating-size,32px);height:var(--rating-size,32px);font-size:23px;line-height:1;color:var(--muted);padding:0;border-radius:7px}.rating-star.filled{color:var(--accent)}.rating-star:hover{background:var(--surface2);color:var(--accent)}
html:root[data-design] .track-row{row-gap:0;padding-top:9px;padding-bottom:4px;grid-template-columns:32px minmax(0,1fr) minmax(70px,.6fr) 48px var(--control-size,44px) var(--control-size,44px) var(--control-size,44px)}
html:root[data-design] .track-head{grid-template-columns:32px minmax(0,1fr) minmax(70px,.6fr) 48px var(--control-size,44px) var(--control-size,44px) var(--control-size,44px)}
html:root[data-design] body.player-dismissed{--player:0px}
html:root[data-design] body.player-dismissed .player,html:root[data-design] body.player-dismissed .now-panel{display:none}
html:root[data-design] body.player-dismissed .app-shell{grid-template-columns:var(--sidebar) minmax(0,1fr);padding-bottom:0}
body.single-library .isolated,body.single-library .meta-dot{display:none}
@media(max-width:1000px){html:root[data-design] .player{grid-template-columns:minmax(100px,.7fr) minmax(270px,1.4fr);gap:12px}html:root[data-design] .player-right{display:none}}
@media(max-width:760px){html:root[data-design] .player{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:8px 14px calc(8px + env(safe-area-inset-bottom));align-content:center}html:root[data-design] .player-track{padding-left:var(--control-size,44px);min-height:var(--control-size,44px)}html:root[data-design] .player-track .mini-cover{display:none}html:root[data-design] .player-track b{max-width:45vw;font-size:13px}html:root[data-design] .player-right{display:flex;gap:0}html:root[data-design] .player-right>.icon-btn{display:none}html:root[data-design] .player-right .speed-pill{min-height:var(--control-size,44px);font-size:12px;padding:5px 10px;margin:0}html:root[data-design] .player-close{left:6px;top:8px}html:root[data-design] .player-center{grid-column:1/-1;display:flex;flex-direction:column-reverse;max-width:none}html:root[data-design] .transport{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));justify-items:center;width:100%;gap:4px;margin:1px 0 0}html:root[data-design] .transport .icon-btn{max-width:100%;min-width:0}html:root[data-design] .play-button{max-width:100%}html:root[data-design] .progress-line input{height:var(--seek-height,36px)}html:root[data-design] .track-row,html:root[data-design] .track-head{grid-template-columns:20px minmax(0,1fr) 34px var(--control-size,44px) var(--control-size,44px) var(--control-size,44px);column-gap:2px}html:root[data-design] .track-album{display:none}html:root[data-design] .track-duration{font-size:10px}html:root[data-design] .track-thumb{display:none}html:root[data-design] .track-name b{white-space:normal;overflow-wrap:anywhere}.track-rating{grid-column:2/-1;gap:2px}html:root[data-design] .home-add-room{display:inline-flex}.hero-actions{flex-wrap:wrap}}
html:root[data-design] .cloud-access,html:root[data-design] .view-tab,html:root[data-design] .speed-pill,html:root[data-design] .text-btn,html:root[data-design] .demo-btn,html:root[data-design] .settings-tabs button{min-height:var(--control-size,44px)}
html:root[data-design] .search-box{min-height:var(--control-size,44px)}