:root{
  --bg:#0a0f1d;
  --panel:#121a2c;
  --panel-2:#18223a;
  --text:#f4f7fb;
  --muted:#95a4c3;
  --accent:#1ed760;
  --accent-2:#15b34d;
  --border:rgba(255,255,255,.08);
  --orange:#ff6b2b;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;background:linear-gradient(180deg,#10172a 0,#080b14 26%,#080b14 100%);color:var(--text)}
button,input,a{font:inherit}
a{color:inherit;text-decoration:none}
.login-body{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-shell{width:min(520px,100%)}
.login-card{background:rgba(18,26,44,.95);border:1px solid var(--border);border-radius:28px;padding:32px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.badge{display:inline-block;padding:8px 12px;border-radius:999px;background:#0e1530;color:#b7c7e8;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.login-card h1{font-size:40px;line-height:1.05;margin:16px 0}
.login-card p{color:var(--muted);font-size:16px;line-height:1.6}
.login-form{display:grid;gap:12px;margin-top:22px}
.login-form label{color:#cad4e9;font-size:14px}
.login-form input{background:#090d19;border:1px solid var(--border);padding:16px 18px;border-radius:18px;color:#fff;font-size:26px;letter-spacing:.35em;text-align:center}
.login-form button,.sidebar .ghost,.player-controls button,.search-bar button,.upload-form button,.queue-item button,.result-card button,.library-row button,.full,.nav,.folder-actions a{border:0;border-radius:999px;padding:12px 18px;cursor:pointer}
.login-form button,.search-bar button,.upload-form button,.queue-item button.primary,.result-card button.primary,.library-row button.primary,.folder-actions a{background:var(--accent);color:#031207;font-weight:800}
.result-card button.secondary,.library-row button.secondary,.ghost.small{background:transparent;border:1px solid var(--border);color:#dbe7fb}
.error{margin-top:16px;padding:14px 16px;border-radius:16px;background:#3a131d;color:#ffd7df}
.hint{margin-top:18px;color:var(--muted);font-size:13px}
.app-body{min-height:100vh;display:grid;grid-template-columns:280px 1fr}
.sidebar{padding:24px 18px;background:#070b14;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:22px}
.brand{font-weight:900;font-size:30px;letter-spacing:-.02em}
.brand span{color:var(--accent)}
.menu{display:grid;gap:10px}
.nav{background:#0d1323;color:#e7eefc;text-align:left;padding:14px 18px}
.nav.active{background:#1c2945}
.session-box{margin-top:auto;padding:18px;border-radius:22px;background:#0d1323;border:1px solid var(--border)}
.session-main{font-weight:700;margin-bottom:8px;word-break:break-all}
.session-code{font-size:28px;font-weight:900;letter-spacing:.2em;margin-bottom:14px}
.ghost{background:transparent;border:1px solid var(--border);color:#d8e3f9}
.small{padding:9px 14px;font-size:14px}
.full{width:100%}
.content{padding:24px;display:grid;gap:20px}
.compact-top{padding-top:18px}
.grid-top,.grid-bottom,.library-layout{display:grid;gap:20px}
.home-grid{grid-template-columns:1.15fr .85fr}
.grid-bottom{grid-template-columns:1.2fr .8fr}
.library-layout{grid-template-columns:320px 1fr}
.card{background:rgba(18,26,44,.94);border:1px solid var(--border);border-radius:28px;padding:20px}
.card-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.card-head.between{justify-content:space-between}
.card h2{margin:0;font-size:14px;letter-spacing:.16em;color:#b8c6e1;text-transform:uppercase}
.now-card{display:grid;grid-template-columns:220px 1fr;gap:18px}
.cover{width:220px;height:220px;border-radius:22px;background:linear-gradient(135deg,#2a3563,#10172a);display:grid;place-items:center;font-size:72px;font-weight:900;overflow:hidden}
.cover img{width:100%;height:100%;object-fit:cover;border-radius:22px}
.track-meta h3{margin:4px 0 10px;font-size:34px;line-height:1.1}
.track-meta p,.muted,.eyebrow{color:var(--muted)}
.eyebrow{font-size:13px;text-transform:uppercase;letter-spacing:.14em}
.player-controls{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.player-controls button{background:#0f1629;color:#fff;border:1px solid var(--border);min-width:60px}
.range-row{margin-top:14px}
.range-row label{display:block;color:var(--muted);margin-bottom:8px}
.range-row input{width:100%;accent-color:var(--orange)}
.toggle{display:inline-flex;gap:10px;align-items:center;margin-top:12px;color:#dde7f7}
.list,.folder-list,.library-tracks,.search-results{display:grid;gap:12px}
.queue-item,.history-item,.library-row,.folder-row{background:#0c1222;border:1px solid var(--border);border-radius:20px;padding:14px}
.queue-item,.history-item,.library-row{display:flex;justify-content:space-between;gap:16px;align-items:center}
.queue-item h4,.history-item h4,.result-card h4,.library-row h4{margin:0 0 6px}
.queue-item p,.history-item p,.result-card p,.library-row p{margin:0;color:var(--muted);font-size:14px}
.result-card{display:grid;grid-template-columns:92px 1fr auto;gap:14px;align-items:center;background:#0c1222;border:1px solid var(--border);border-radius:20px;padding:14px}
.result-thumb,.library-thumb{width:92px;height:92px;object-fit:cover;border-radius:18px;background:#131b33}
.search-bar{display:grid;grid-template-columns:1fr auto;gap:12px}
.search-bar input,.upload-form input{background:#090d19;border:1px solid var(--border);padding:14px 16px;border-radius:18px;color:#fff}
.search-card-inline{min-height:100%}
.search-results{max-height:580px;overflow:auto;padding-right:4px}
.result-actions,.library-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.folder-row{cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.folder-row.active{background:#172543}
.upload-form{display:grid;gap:10px;margin-top:16px}
.folder-actions{display:flex;gap:10px}
.view{display:none}
.view.active{display:block}
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center}
.modal.hidden{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.modal-panel{position:relative;z-index:1;width:min(760px,92vw);max-height:82vh;overflow:auto;background:rgba(18,26,44,.98);border:1px solid var(--border);border-radius:28px;padding:20px;box-shadow:0 25px 80px rgba(0,0,0,.4)}
.modal-list{max-height:65vh;overflow:auto}
.empty-cover{font-size:72px;opacity:.6}
.tips{margin:0;padding-left:20px;color:#dbe6fb;line-height:1.7}
.download-link{display:inline-flex;align-items:center;justify-content:center}
@media (max-width: 1200px){.home-grid,.grid-bottom,.library-layout{grid-template-columns:1fr}.search-results{max-height:none}}
@media (max-width: 860px){.app-body{grid-template-columns:1fr}.sidebar{border-right:0;border-bottom:1px solid var(--border)}.now-card{grid-template-columns:1fr}.cover{width:100%;max-width:280px;height:280px}.content{padding:16px}}