:root{color-scheme:dark;--bg:#0d1012;--panel:#14181b;--line:#292f33;--muted:#91999f;--text:#f4f7f6;--green:#39d49d;--yellow:#f1bf55;--danger:#ff6b6b}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:0}button,input,select,textarea{font:inherit;letter-spacing:0}.hidden{display:none!important}.shell{min-height:100vh;display:grid;grid-template-columns:220px 1fr}aside{position:sticky;top:0;height:100vh;border-right:1px solid var(--line);padding:24px 14px;display:flex;flex-direction:column;background:#101315}.brand{display:flex;align-items:center;gap:10px;padding:0 8px 28px;font-size:18px}.mark{width:50px;height:50px;display:grid;place-items:center;background:var(--green);color:#072419;font-weight:900;font-size:25px;border-radius:8px}.mark.small{width:30px;height:30px;font-size:15px}.nav{width:100%;height:44px;border:0;background:transparent;color:var(--muted);display:flex;align-items:center;gap:12px;padding:0 14px;cursor:pointer;border-radius:6px;text-align:left}.nav.active,.nav:hover{background:#1b2124;color:var(--text)}.profile{margin-top:auto;padding:14px 8px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:32px 1fr 30px;align-items:center;gap:8px}.avatar{width:32px;height:32px;border-radius:50%;background:#30383d center/cover}.profile span{overflow:hidden;text-overflow:ellipsis}.profile button{background:none;border:0;color:var(--muted);cursor:pointer}.workspace{min-width:0}header{height:80px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5vw}header select{display:block;background:transparent;color:var(--text);border:0;font-weight:700;padding:3px 18px 3px 0;max-width:260px}.eyebrow{font-size:11px;color:var(--muted);font-weight:700}.status{font-size:12px;color:var(--green)}.view{padding:42px 5vw}.music-view{max-width:1050px;margin:auto}.player-main{display:grid;grid-template-columns:minmax(230px,360px) 1fr;gap:5vw;align-items:center}.cover{aspect-ratio:1;background:#20272a;display:grid;place-items:center;overflow:hidden;border-radius:6px;box-shadow:0 18px 50px #0007}.cover img{width:100%;height:100%;object-fit:cover}.cover span{font-size:80px;color:#3c474c}.track h1{font-size:clamp(28px,4vw,50px);line-height:1.05;margin:12px 0 10px;overflow-wrap:anywhere}.track p{color:var(--muted)}.progress{height:4px;background:#30363a;margin:35px 0 22px}.progress span{display:block;width:0;height:100%;background:var(--green)}.controls{display:flex;align-items:center;justify-content:center;gap:18px}.controls button{border:0;background:transparent;color:var(--text);width:42px;height:42px;font-size:25px;cursor:pointer}.controls .play{background:var(--text);color:#111;border-radius:50%;font-size:19px;width:54px;height:54px}.search{margin:48px 0 35px;height:50px;border:1px solid var(--line);display:grid;grid-template-columns:45px 1fr auto;align-items:center;background:var(--panel);border-radius:6px}.search span{text-align:center;color:var(--muted);font-size:22px}.search input{height:100%;border:0;background:transparent;color:var(--text);outline:0}.primary{border:0;background:var(--green);color:#08271d;font-weight:800;padding:11px 18px;border-radius:5px;cursor:pointer}.search .primary{height:100%;border-radius:0 5px 5px 0}.queue-head{display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid var(--line);padding-bottom:13px}.queue-head h2,.calendar-title h2{margin:0 0 4px;font-size:20px}.queue-head span,.calendar-title span{color:var(--muted);font-size:12px}.danger-text,.ghost{background:none;border:0;color:var(--danger);cursor:pointer}.queue.empty,.reminder-list:empty{padding:28px 0;color:var(--muted)}.queue-item{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid #202629}.queue-item img{width:44px;height:44px;object-fit:cover;border-radius:4px}.queue-item p{margin:0;font-weight:600}.queue-item span{color:var(--muted);font-size:12px}.reminder-layout{display:grid;grid-template-columns:minmax(320px,540px) minmax(300px,1fr);gap:5vw;max-width:1150px;margin:auto}.editor{display:flex;flex-direction:column;gap:22px}.tabs{border-bottom:1px solid var(--line)}.tabs button{border:0;border-bottom:2px solid var(--green);background:transparent;color:var(--text);padding:10px 4px}.title-input{font-size:28px}.editor input,.editor select,.editor textarea{width:100%;background:transparent;color:var(--text);border:0;border-bottom:1px solid #3a4247;padding:10px 3px;outline:0}.editor input:focus,.editor select:focus,.editor textarea:focus{border-color:var(--green)}.editor label{color:var(--muted);font-size:12px}.editor textarea{resize:vertical;line-height:1.5}.form-actions{display:flex;justify-content:flex-end;gap:10px}.ghost{color:var(--muted)}.calendar-title{padding-bottom:14px;border-bottom:1px solid var(--line)}.reminder{padding:16px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:10px}.reminder h3{margin:0 0 6px;font-size:15px}.reminder p{margin:0;color:var(--muted);font-size:12px}.reminder-actions button{background:transparent;border:0;color:var(--muted);cursor:pointer}.login{min-height:100vh;display:grid;place-content:center;justify-items:center;text-align:center}.login h1{margin:16px 0 4px}.login p{color:var(--muted);margin-bottom:25px}.login-button{text-decoration:none}.login .mark{width:62px;height:62px}.toast{display:block}#toast{position:fixed;right:20px;bottom:20px;z-index:10;background:#23292d;padding:13px 16px;border:1px solid #3a4247;border-radius:5px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s}#toast.show{opacity:1;transform:none}#toast.error{border-color:var(--danger)}@media(max-width:760px){.shell{grid-template-columns:1fr;padding-bottom:64px}aside{position:fixed;z-index:5;top:auto;bottom:0;width:100%;height:64px;border:0;border-top:1px solid var(--line);padding:6px;display:block}.brand,.profile{display:none}aside nav{display:flex}.nav{justify-content:center}.nav span{display:none}header{height:68px;padding:0 18px}.view{padding:28px 18px}.player-main{grid-template-columns:1fr;text-align:center}.cover{width:min(72vw,320px);margin:auto}.track h1{font-size:30px}.search{margin-top:35px}.reminder-layout{grid-template-columns:1fr}.calendar-side{margin-top:20px}}
