:root { color-scheme: dark; --bg:#090e14; --panel:#0f1720; --panel2:#131e28; --line:#263543; --text:#eef4f8; --muted:#8fa0ad; --cyan:#31c8e8; --green:#35d477; --red:#f25561; }
[hidden] { display:none !important; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.45 Inter,Segoe UI,Arial,sans-serif; letter-spacing:0; }
button,input,select { font:inherit; }
img { width:18px; height:18px; filter:invert(81%) sepia(10%) saturate(435%) hue-rotate(160deg); }
.app { min-height:100vh; display:grid; grid-template-columns:220px 1fr; }
.sidebar { position:sticky; top:0; height:100vh; border-right:1px solid var(--line); background:#0b1219; display:flex; flex-direction:column; padding:24px 14px; }
.brand { display:flex; align-items:center; gap:12px; padding:0 10px 30px; font-size:15px; }
.brand>img { width:34px; height:34px; filter:invert(73%) sepia(69%) saturate(1089%) hue-rotate(153deg); }
.brand strong,.eyebrow { color:var(--cyan); }
nav { display:grid; gap:6px; }
.nav { height:44px; border:0; background:transparent; color:var(--muted); display:flex; align-items:center; gap:12px; padding:0 12px; cursor:pointer; border-left:3px solid transparent; }
.nav:hover,.nav.active { color:var(--text); background:var(--panel2); border-left-color:var(--cyan); }
.nav.active img,.button.primary img { filter:brightness(0) saturate(100%); }
.sidebar-foot { margin-top:auto; border-top:1px solid var(--line); padding:16px 8px 0; display:flex; align-items:center; justify-content:space-between; color:var(--muted); }
main { min-width:0; padding:28px 34px 80px; max-width:1500px; width:100%; margin:auto; }
header,.section-head,.panel-head { display:flex; align-items:center; justify-content:space-between; gap:20px; }
h1,h2,p { margin:0; } h1 { font-size:26px; } h2 { font-size:19px; }
.eyebrow { font-size:11px; font-weight:700; margin-bottom:5px; }
.status { height:38px; border:1px solid var(--line); padding:0 13px; display:flex; align-items:center; gap:9px; border-radius:6px; color:var(--muted); }
.status span { width:8px; height:8px; border-radius:50%; background:#7c8993; }
.status.online span { background:var(--green); box-shadow:0 0 9px #35d47799; } .status.error span { background:var(--red); }
.now-playing { margin:26px 0; display:grid; grid-template-columns:78px minmax(180px,1fr) auto minmax(200px,320px); align-items:center; gap:22px; padding:18px; border:1px solid var(--line); background:var(--panel); border-radius:8px; }
.cover { width:78px; height:78px; background:#152b35; display:grid; place-items:center; border-radius:6px; position:relative; overflow:hidden; }
.cover img { width:34px; height:34px; filter:invert(74%) sepia(76%) saturate(977%) hue-rotate(150deg); }
.cover i { position:absolute; inset:auto 0 0; height:3px; background:var(--cyan); box-shadow:0 0 14px var(--cyan); }
.track-meta p:last-of-type { color:var(--muted); margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:600px; }
.track-meta small { color:var(--muted); display:block; margin-top:5px; }
.progress { height:3px; background:#283640; margin-top:13px; overflow:hidden; } .progress i { display:block; height:100%; background:var(--cyan); transition:width 1s linear; }
.controls,.volume,.range-row,.section-actions { display:flex; align-items:center; gap:10px; }
.icon-button { width:38px; height:38px; border:1px solid var(--line); background:#111a23; display:grid; place-items:center; border-radius:6px; cursor:pointer; }
.icon-button:hover { border-color:var(--cyan); background:#162631; } .icon-button.large { width:44px; height:44px; }
.volume { color:var(--muted); } input[type=range] { width:100%; accent-color:var(--cyan); }
.play-modes { grid-column:2/-1; display:flex; gap:8px; }
.play-modes button { min-height:34px; border:1px solid var(--line); background:#111a23; color:var(--muted); display:flex; align-items:center; gap:7px; padding:0 11px; border-radius:5px; cursor:pointer; }
.play-modes button.active { color:var(--cyan); border-color:#24738a; background:#10252d; }
.view,.panel { border:1px solid var(--line); background:var(--panel); border-radius:8px; overflow:hidden; }
.view-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:14px; }
.panel { padding:18px; min-height:150px; } .panel.wide { grid-column:1/-1; }
.panel-head { padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:14px; }
.mini-badge,.count { font-size:11px; color:var(--cyan); border:1px solid #22566a; background:#10242d; padding:4px 7px; border-radius:4px; }
.feature-row { display:flex; align-items:center; gap:13px; } .feature-row span,.muted { color:var(--muted); } .feature-row strong,.feature-row span { display:block; }
.mini-cover { width:48px; height:48px; background:#142a34; display:grid; place-items:center; border-radius:6px; }
.listeners { display:flex; gap:10px; flex-wrap:wrap; } .listener { display:flex; align-items:center; gap:8px; border:1px solid var(--line); padding:6px 9px; border-radius:5px; }
.listener img { width:26px; height:26px; border-radius:50%; filter:none; } .listener i { width:7px; height:7px; border-radius:50%; background:var(--green); }
.history { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.history>div { display:flex; align-items:center; gap:10px; padding:10px; background:#111b24; border:1px solid #1e2d39; border-radius:5px; }
.history span,.history small { display:block; } .history small { color:var(--muted); font-size:11px; margin-top:2px; }
.section-head { padding:18px 20px; border-bottom:1px solid var(--line); }
.button { min-height:40px; border:1px solid var(--line); background:#15202a; color:var(--text); padding:0 14px; display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:6px; cursor:pointer; text-decoration:none; }
.button.primary { background:var(--cyan); border-color:var(--cyan); color:#041015; font-weight:700; }
.search { height:40px; border:1px solid var(--line); display:flex; align-items:center; gap:8px; padding:0 10px; border-radius:6px; background:#0a1118; }
.playlist-tools { display:flex; align-items:center; gap:10px; padding:14px 20px 0; }
.playlist-tools select { max-width:320px; }
.search input { border:0; outline:0; background:transparent; color:var(--text); width:180px; }
.dropzone { margin:18px 20px; border:1px dashed #385064; min-height:100px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:5px; color:var(--muted); border-radius:6px; }
.dropzone.drag { border-color:var(--cyan); background:#12242d; }
.upload-progress { position:relative; width:min(520px,90%); height:22px; background:#111c24; border:1px solid var(--line); overflow:hidden; margin-top:8px; }
.upload-progress i { position:absolute; inset:0 auto 0 0; background:#17647a; } .upload-progress span { position:relative; z-index:1; display:block; text-align:center; font-size:11px; line-height:20px; color:var(--text); }
.table-wrap { min-height:180px; } table { width:100%; border-collapse:collapse; } th,td { text-align:left; padding:13px 16px; border-top:1px solid var(--line); }
th { font-size:11px; color:var(--muted); font-weight:600; } td:first-child { width:42px; cursor:grab; color:var(--muted); }
.track-title { font-weight:650; } .track-file { color:var(--muted); max-width:380px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.track-row:hover { background:#121e28; } .track-row.playing { background:#10252d; } .track-row.dragging { opacity:.35; }
.row-actions { display:flex; gap:4px; width:164px; } .row-actions button { width:30px; height:30px; border:0; background:transparent; display:grid; place-items:center; cursor:pointer; border-radius:4px; }
.row-actions button:hover { background:#20303b; }
.empty { min-height:180px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; color:var(--muted); }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:20px; }
.field,.switch-row { border:1px solid var(--line); padding:15px; background:#111a23; border-radius:6px; } .field>span { display:block; font-weight:650; margin-bottom:10px; }
select { width:100%; height:40px; background:#0a1118; color:var(--text); border:1px solid var(--line); padding:0 10px; border-radius:5px; }
.switch-row { display:flex; justify-content:space-between; align-items:center; gap:15px; cursor:pointer; } .switch-row small { display:block; color:var(--muted); margin-top:3px; }
.switch-row input { position:absolute; opacity:0; } .switch-row i { width:42px; height:24px; background:#344451; border-radius:20px; position:relative; flex:none; }
.switch-row i:after { content:""; position:absolute; width:18px; height:18px; top:3px; left:3px; background:white; border-radius:50%; transition:.15s; }
.switch-row input:checked+i { background:var(--cyan); } .switch-row input:checked+i:after { left:21px; } .settings-grid+.button { margin:0 20px 20px; }
.toast { position:fixed; right:24px; bottom:24px; max-width:420px; padding:13px 16px; border:1px solid var(--line); background:#17232d; border-radius:6px; box-shadow:0 16px 35px #0009; z-index:20; } .toast.error { border-color:var(--red); }
.login,.boot { min-height:100vh; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px; background:#090e14; }
.login-mark,.pulse-logo { width:72px; height:72px; background:#102631; display:grid; place-items:center; border-radius:8px; border:1px solid var(--line); }
.login-mark img,.pulse-logo img { width:38px; height:38px; filter:invert(73%) sepia(69%) saturate(1089%) hue-rotate(153deg); }
.login-copy,.boot { color:var(--muted); } .pulse-logo { animation:pulse 1.5s infinite; } @keyframes pulse { 50% { border-color:var(--cyan); box-shadow:0 0 28px #31c8e822; } }
@media(max-width:1000px) { .view-grid { grid-template-columns:1fr; } .panel.wide { grid-column:auto; } .history { grid-template-columns:1fr 1fr; } .section-actions { align-items:stretch; flex-direction:column; } .search input { width:100%; } .playlist-tools { align-items:stretch; flex-direction:column; } .playlist-tools select { max-width:none; } }
@media(max-width:900px) { .app { grid-template-columns:72px 1fr; } .sidebar { padding:20px 10px; } .brand span,.nav { font-size:0; } .brand { padding:0 8px 28px; } .nav { justify-content:center; padding:0; } .sidebar-foot span { display:none; } main { padding:22px 18px 70px; } .now-playing { grid-template-columns:64px 1fr; } .cover { width:64px; height:64px; } .controls,.volume { grid-column:1/-1; } .settings-grid { grid-template-columns:1fr; } }
@media(max-width:600px) { header,.section-head { align-items:flex-start; flex-direction:column; } .now-playing { grid-template-columns:1fr; gap:14px; } .cover { display:none; } .controls,.volume { grid-column:auto; } .button { width:100%; } .dropzone { margin:12px; } .table-wrap { overflow:auto; } th:nth-child(3),td:nth-child(3),th:nth-child(4),td:nth-child(4) { display:none; } .history { grid-template-columns:1fr; } .panel { padding:14px; } }