:root { --bg:#0f0f1a; --card:#1a1a2e; --accent:#7c3aed; --accent2:#06b6d4; --text:#f1f5f9; --muted:#94a3b8; --ok:#10b981; --bad:#ef4444; --line:#2d2d44; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-bottom: 120px; scroll-padding-top: 70px; }
body { margin:0; font-family: system-ui, -apple-system, Roboto, sans-serif; background: linear-gradient(160deg, var(--bg), #1e1b4b) fixed; color: var(--text); min-height:100vh; padding-bottom: calc(96px + env(safe-area-inset-bottom)); font-size:16px; }
a { color: var(--accent2); }
.topbar { position: sticky; top:0; z-index:5; display:flex; align-items:center; gap:10px; padding: 10px 16px; background: rgba(15,15,26,.92); backdrop-filter: blur(6px); }
.topbar h1 { font-size:1.4rem; margin:0; flex:1; background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.net-badge { font-size:.8rem; color: var(--ok); }
body.offline .net-badge { color: #f59e0b; }
.container { max-width: 760px; margin: 0 auto; padding: 8px 12px; }
.card { background: var(--card); border-radius:16px; padding:14px; margin-bottom:12px; }
.card h2 { font-size:1.1rem; margin:0 0 10px; display:inline; }
.card h3 { font-size:1rem; margin:18px 0 6px; }
details.card > summary { cursor:pointer; list-style:none; padding:6px 0; min-height:44px; }
details.card > summary::-webkit-details-marker { display:none; }
details.card > summary::after { content:'▾'; float:right; color:var(--muted); }
details[open].card > summary::after { content:'▴'; }
.card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.muted { color: var(--muted); } .small { font-size:.85rem; } .center { text-align:center; }
button { font: inherit; background: var(--accent); color:#fff; border:none; border-radius:12px; padding: 12px 16px; min-height:48px; cursor:pointer; touch-action: manipulation; }
button:active { transform: scale(.97); }
button:disabled { opacity:.5; }
button.secondary { background:#334155; }
button.danger { background: var(--bad); }
button.big { font-weight:600; }
button.wide { width:100%; font-size:1.1rem; padding:18px; }
button.chip { min-height:32px; padding:4px 10px; font-size:.8rem; border-radius:999px; background:#334155; }
input[type=text], input[type=search], input[type=password], select, textarea { font: inherit; width:100%; min-height:48px; padding:10px 12px; border-radius:12px; border:1px solid #334155; background:#0f172a; color:#fff; }
textarea { min-height:auto; }
input[type=range] { width:100%; height:36px; accent-color: var(--accent); }
label { display:block; margin:12px 0 4px; }
label.check { display:flex; gap:10px; align-items:center; min-height:44px; margin:6px 0; }
label.check input { width:22px; height:22px; accent-color: var(--accent); flex:none; }
.row { display:flex; gap:8px; align-items:center; margin:6px 0; }
.row > input, .row > select { flex:1; min-width:0; }
.row > label { margin:0; white-space:nowrap; }
.tabs { display:flex; gap:6px; margin-bottom:12px; }
.tab { flex:1; background:#262640; padding:10px 6px; font-size:.95rem; }
.tab.active { background: var(--accent); }
.results { max-height: 300px; overflow-y:auto; border-radius:12px; }
.result { display:flex; gap:10px; align-items:center; padding:10px; border-bottom:1px solid var(--line); cursor:pointer; min-height:56px; }
.result img { width:48px; height:48px; object-fit:cover; border-radius:8px; flex:none; }
.result .add { margin-left:auto; color: var(--accent2); font-size:1.4rem; }
.needs-net { display:none; background:#3b2f0b; color:#fcd34d; padding:10px; border-radius:10px; margin-bottom:8px; }
body.offline .needs-net { display:block; }
body.offline [data-pane=yt] .row, body.offline [data-pane=sp] .row, body.offline .yt-links { opacity:.4; pointer-events:none; }
.yt-links { margin-bottom:14px; }
.yt-label { font-weight:600; margin-top:4px; }
#ytLinks { min-height:96px; font-size:16px; resize:vertical; word-break:break-all; }
.row > .grow { flex:1; font-size:1.1rem; min-height:56px; }
#ytPasteBtn { min-height:56px; }
.yt-msg { padding:16px 8px; line-height:1.5; }
.yt-msg .chip { margin-top:8px; }
.playlist { max-height: 50vh; overflow-y:auto; }
.empty { text-align:center; color:var(--muted); padding:28px 8px; }
.item { display:flex; align-items:center; gap:10px; padding:8px 4px; border-bottom:1px solid var(--line); min-height:60px; cursor:pointer; }
.item.playing { background: rgba(124,58,237,.22); border-radius:10px; }
.item.unavailable { opacity:.55; }
.thumb { width:44px; height:44px; object-fit:cover; border-radius:8px; background:#2d2d44; flex:none; }
.song-info { flex:1; min-width:0; }
.song-title { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.badge { font-size:.7rem; background:#334155; padding:2px 6px; border-radius:6px; margin-left:4px; font-weight:400; }
.badge.warn { background:#78350f; color:#fde68a; }
.item .x { background:transparent; color: var(--muted); font-size:1.2rem; min-height:44px; min-width:44px; padding:0; }
.now-playing .np-row { display:flex; gap:14px; align-items:center; }
.np-art { width:84px; height:84px; border-radius:12px; object-fit:cover; background:#2d2d44; flex:none; }
.np-art:not([src]), .np-art[src=""] { visibility:hidden; }
.np-info { min-width:0; }
.np-title { font-size:1.2rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.yt-wrap { margin-top:10px; aspect-ratio:16/9; width:100%; max-width:480px; border-radius:12px; overflow:hidden; background:#000; }
.yt-wrap iframe { width:100%; height:100%; }
.progress { background:#2d2d44; height:10px; border-radius:6px; margin:14px 0 6px; cursor:pointer; }
.progress-bar { height:100%; width:0; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius:6px; }
.times { display:flex; justify-content:space-between; }
#djState { color: var(--accent2); }
.status { min-height:22px; margin-top:6px; color: var(--ok); font-size:.9rem; }
.party-list { margin:8px 0; }
.party { display:flex; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.party .pname { flex:1; min-width:150px; }
.setup { background:#111827; border-left:4px solid var(--accent2); padding:10px 12px; border-radius:10px; margin:10px 0; font-size:.92rem; }
.setup ol { padding-left:20px; margin:6px 0; } .setup li { margin:6px 0; }
code { background:#0b1220; padding:2px 6px; border-radius:6px; word-break:break-all; color:#a5f3fc; }
.transport { position:fixed; left:0; right:0; bottom:0; z-index:10; display:flex; justify-content:center; gap:18px; padding:10px 10px calc(10px + env(safe-area-inset-bottom)); background: rgba(15,15,26,.96); border-top:1px solid var(--line); }
.tbtn { width:64px; height:64px; border-radius:50%; font-size:1.5rem; background:#334155; padding:0; }
.tbtn.main { width:76px; height:76px; background: var(--accent); font-size:2rem; }