:root{--bg:#0b1020;--panel:#141d31;--panel2:#1b2942;--line:#2b3a55;--text:#edf3ff;--muted:#9eacc5;--cyan:#75e4ff;--purple:#a78bfa;--green:#55d6a4;--red:#ff647c}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 12% 0%,#1c2b4b 0,transparent 42%),var(--bg);color:var(--text);font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}
button,input{font:inherit}.topbar{height:76px;border-bottom:1px solid #26334c;display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100vw - 1180px)/2));background:#0c1425dd;position:sticky;top:0;z-index:4;backdrop-filter:blur(12px)}
.brand{display:flex;gap:12px;align-items:center;color:var(--text);text-decoration:none;font-size:19px;letter-spacing:-.5px}.brand-icon{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#54dafa,#9875f6);display:grid;place-items:center;color:#081323;font-size:28px;font-weight:800}.brand small{display:block;font-size:9px;letter-spacing:2px;color:var(--cyan);font-weight:800}
.top-actions{display:flex;gap:12px;align-items:center}.status-pill,.user-chip{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:7px 11px}.status-pill:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin-right:7px}.status-pill.online:before{background:var(--green)}
.shell{max-width:1180px;margin:0 auto;padding:42px 22px 70px}.hidden{display:none!important}.panel{background:linear-gradient(145deg,#17233a,#111a2c);border:1px solid var(--line);border-radius:20px;box-shadow:0 18px 55px #0003}
.login-card{max-width:470px;margin:70px auto;padding:36px}.login-card h1,.welcome-row h1{font-size:clamp(32px,5vw,48px);line-height:1.08;letter-spacing:-1.7px;margin:12px 0}.login-card h1 span,.welcome-row h1 span{color:var(--cyan)}.login-card p,.welcome-row p{color:var(--muted)}label{display:block;font-size:12px;color:#bdc9dd;margin:16px 0 7px}.eyebrow,.mini-heading{font-size:10px;letter-spacing:2px;font-weight:800;color:var(--cyan)}
input[type=email],input[type=text]{width:100%;background:#0b1425;border:1px solid #35445f;border-radius:10px;padding:12px 13px;color:var(--text);outline:none}input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #75e4ff18}
.button{border:0;border-radius:11px;padding:11px 15px;font-weight:750;cursor:pointer;transition:.15s;white-space:nowrap}.button:hover{transform:translateY(-1px);filter:brightness(1.08)}.button:disabled{opacity:.4;cursor:not-allowed;transform:none}.primary{background:linear-gradient(100deg,#66dcf6,#9b8aff);color:#071323}.secondary{background:#263957;color:#e7f2ff;border:1px solid #3b5277}.ghost{background:transparent;color:#c5d2e8;border:1px solid var(--line)}.record{background:#5a2438;color:white}.full{width:100%;margin-top:15px}.fineprint,.hint{font-size:11px;color:#8594ae}.message{font-size:12px;min-height:18px;color:var(--cyan)}
.notice{border:1px solid #846a35;background:#332b1a;color:#ffe2a3;padding:15px 18px;border-radius:13px;margin-bottom:24px}.notice p{margin:5px 0 0;font-size:13px}.notice code{color:#fff}
.welcome-row{display:flex;justify-content:space-between;align-items:center;margin:4px 0 30px;gap:20px}.welcome-row p{margin:8px 0}.user-chip{display:flex;align-items:center;gap:8px}.live-dot{width:8px;height:8px;border-radius:50%;background:var(--green)}
.workspace{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(270px,.8fr);gap:20px}.studio,.side-panel,.library-panel{padding:24px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}.section-heading h2,.side-panel h2,.library-panel h2{margin:3px 0 0;font-size:23px;letter-spacing:-.5px}.recording-indicator{font-size:10px;letter-spacing:1px;color:var(--green);font-weight:800}.recording-indicator.active{color:#ff8191}
.track-box{display:flex;align-items:center;gap:14px;background:#0e1729;border:1px solid #293a57;padding:13px;border-radius:14px}.track-art,.latest-art{width:55px;height:55px;border-radius:12px;background:linear-gradient(135deg,#315e83,#7651a9);display:grid;place-items:center;font-size:30px;color:#d7f7ff;flex-shrink:0}.track-info{flex:1;min-width:0}.track-info b,.track-info span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-info span{font-size:11px;color:var(--muted);margin-top:3px}.upload-label{font-size:12px}.upload-label input{display:none}
.track-list-wrap{margin:20px 0}.mini-heading{color:#aab9d2;margin-bottom:9px}.track-list{display:flex;gap:8px;flex-wrap:wrap}.track-chip{background:#263651;border:1px solid #3b4d6b;color:#e1ebfb;border-radius:9px;padding:7px 10px;font-size:11px;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis}.track-chip.selected{border-color:var(--cyan);color:var(--cyan)}.empty{font-size:12px;color:#8796af}
.levels{display:grid;grid-template-columns:1fr 1fr;gap:12px}.level-card{background:#101a2c;border:1px solid #263752;border-radius:12px;padding:12px}.level-card label{margin:0 0 8px}.level-card input{width:100%;accent-color:var(--cyan)}.level-card span{font-size:11px;color:var(--cyan)}
.transport{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}.record{margin-left:auto}.record-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#ff9aa8;margin-right:6px}.timer{text-align:center;font-size:34px;font-variant-numeric:tabular-nums;letter-spacing:3px;font-weight:300;margin:17px 0 0}.hint{margin-bottom:0}
.latest-art{width:100%;height:110px;font-size:52px;margin:17px 0;background:linear-gradient(135deg,#1d6881,#624a9c)}.side-panel label{margin-top:18px}.audio-player{width:100%;margin:10px 0}.library-panel{margin-top:20px}.recording-list{display:grid;gap:10px}.recording-item{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;background:#0e1729;border:1px solid #293a57;border-radius:13px;padding:13px}.recording-meta b{display:block}.recording-meta small{color:var(--muted)}.recording-actions{display:flex;gap:7px;flex-wrap:wrap}.recording-actions button{font-size:11px;padding:8px 10px}
footer{text-align:center;color:#66758e;font-size:11px;padding:25px}
@media(max-width:820px){.workspace{grid-template-columns:1fr}.welcome-row{align-items:flex-start;flex-direction:column}.record{margin-left:0}.topbar{padding:0 15px}.shell{padding:28px 14px 50px}.studio,.side-panel,.library-panel{padding:18px}.login-card{margin:35px auto;padding:25px}}
@media(max-width:480px){.track-box{flex-wrap:wrap}.track-info{min-width:calc(100% - 80px)}.upload-label{width:100%;text-align:center}.levels{grid-template-columns:1fr}.recording-item{grid-template-columns:1fr}.recording-actions button{flex:1}.status-pill{font-size:0}.status-pill:before{margin:0}.brand{font-size:16px}}