:root { --bg:#0b1020; --card:#111833; --muted:#9aa3b2; --text:#e7eaf0; --accent:#4f7cff; --danger:#ff4f6d; --border:rgba(255,255,255,.08); }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
a { color: var(--accent); text-decoration: none; }
.container { width: min(1100px, calc(100% - 32px)); margin: 0 auto; }
.topbar { border-bottom: 1px solid var(--border); background: rgba(0,0,0,.2); }
.topbar .container { display:flex; align-items:center; justify-content:space-between; padding: 14px 0; gap: 12px; flex-wrap: wrap; }
.brand { display:flex; gap:10px; align-items:baseline; }
.brand small { color: var(--muted); }
.nav { display:flex; gap: 14px; flex-wrap: wrap; }
main.container { padding: 18px 0 32px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px; }
.grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 800px){ .grid { grid-template-columns: 1fr; } }
label { display:flex; flex-direction:column; gap:6px; margin: 10px 0; }
input, select { background: rgba(255,255,255,.04); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; outline: none; }
button, .btn { background: var(--accent); color:#fff; border: 0; border-radius: 10px; padding: 10px 12px; cursor: pointer; display:inline-flex; align-items:center; justify-content:center; gap: 8px; }
.danger { background: var(--danger); }
.row-between { display:flex; align-items:center; justify-content:space-between; gap: 12px; flex-wrap: wrap; }
.table-wrap { overflow:auto; border-radius: 12px; border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align:left; }
code { color: #c7d1ff; }
.alert { background: rgba(255,79,109,.12); border: 1px solid rgba(255,79,109,.25); padding: 10px 12px; border-radius: 12px; margin: 12px 0; }
.hint { color: var(--muted); margin: 10px 0; }
.footer { border-top: 1px solid var(--border); padding: 18px 0; color: var(--muted); }
.actions { display:flex; gap: 12px; align-items:center; flex-wrap: wrap; margin-top: 16px; }
.upload { display:flex; gap: 10px; align-items:center; flex-wrap: wrap; margin: 12px 0; }
.playlist-item { display:grid; grid-template-columns: 120px 1fr 120px 40px; gap: 10px; align-items:center; padding: 10px 0; border-bottom: 1px dashed var(--border); }
@media (max-width: 900px){ .playlist-item { grid-template-columns: 1fr; } }