:root {
  --bg:#000; --side:#070707; --panel:#101010; --card:#151515; --card2:#1b1b1b; --line:#262626; --line2:#333;
  --text:#ececec; --muted:#a3a3a3; --dim:#737373;
  --accent:#8cd446; --accent-strong:#a0e25c; --on-accent:#0d1a05;
  --danger:#ff6b6b; --warn:#f5a524; --ok:#8cd446;
  color-scheme: dark;
}
* { box-sizing:border-box; }
html { scrollbar-color:#333 transparent; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 "Segoe UI",system-ui,-apple-system,sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:radial-gradient(900px 500px at 12% -5%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%); }
h1,h2,h3,h4 { margin:0; letter-spacing:-.01em; }
button { font:inherit; color:inherit; }
.hidden { display:none !important; }

/* ── buttons & fields ───────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px; border-radius:10px;
  background:var(--card2); border:1px solid var(--line2); cursor:pointer; font-weight:600; transition:.15s; white-space:nowrap; }
.btn:hover { border-color:var(--accent); color:var(--accent); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.btn.primary:hover { background:var(--accent-strong); color:var(--on-accent); }
.btn.danger { color:var(--danger); }
.btn.danger:hover { border-color:var(--danger); color:var(--danger); background:rgba(255,107,107,.08); }
.btn.ghost { background:transparent; }
.btn.small { height:30px; padding:0 12px; font-size:12px; }
.icon-btn { width:28px; height:28px; display:inline-grid; place-items:center; border-radius:8px; border:0; background:transparent; color:var(--dim); cursor:pointer; }
.icon-btn:hover { background:var(--card2); color:var(--accent); }
input,select,textarea { width:100%; background:#0a0a0a; color:var(--text); border:1px solid var(--line2); border-radius:10px; padding:10px 12px; font:inherit; transition:.15s; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
label { display:block; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.02em; margin:0 0 6px; }
.field { margin-bottom:14px; }
.hint { color:var(--dim); font-size:12px; margin-top:5px; }
.msg { min-height:20px; margin:6px 0 10px; font-size:13px; color:var(--danger); }
.msg.ok { color:var(--ok); }
code,.mono { font-family:ui-monospace,Consolas,"Cascadia Mono",monospace; }
.mono { letter-spacing:.03em; }

/* ── login ──────────────────────────────────────────────────────── */
#login { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { width:min(400px,100%); background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:34px 32px;
  box-shadow:0 30px 80px -30px color-mix(in srgb, var(--accent) 25%, transparent), 0 20px 60px rgba(0,0,0,.6); text-align:center; }
.login-card img { height:110px; margin-bottom:8px; }
.login-card h1 { font-size:20px; margin-bottom:4px; }
.login-card p { color:var(--muted); margin:0 0 24px; }
.login-card .field { text-align:left; }
.login-card .btn { width:100%; justify-content:center; height:44px; }

/* ── shell ──────────────────────────────────────────────────────── */
#app { display:grid; grid-template-columns:264px minmax(0,1fr); min-height:100vh; }
aside { background:var(--side); border-right:1px solid var(--line); padding:22px 16px; display:flex; flex-direction:column; gap:6px;
  position:sticky; top:0; height:100vh; }
aside .brand { padding:4px 8px 20px; border-bottom:1px solid var(--line); margin-bottom:14px; }
aside .brand img { height:26px; max-width:100%; display:block; }
aside .brand small { display:block; margin-top:8px; color:var(--dim); letter-spacing:.14em; font-size:10px; font-weight:700; }
.nav { display:flex; align-items:center; gap:12px; height:42px; padding:0 14px; border-radius:11px; border:0; background:transparent;
  color:var(--muted); cursor:pointer; font-weight:600; text-align:left; width:100%; }
.nav svg { width:19px; height:19px; flex:none; }
.nav:hover { color:var(--text); background:var(--card); }
.nav.active { color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); box-shadow:inset 3px 0 0 var(--accent); }
.nav.spacer { margin-top:auto; }
main { padding:34px clamp(24px,3.2vw,56px) 60px; width:100%; min-width:0; }
.page-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.page-head h2 { font-size:28px; font-weight:800; letter-spacing:-.02em; }
.page-head p { margin:4px 0 0; color:var(--muted); }

/* ── cards ──────────────────────────────────────────────────────── */
.card { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px; margin-bottom:18px; }
.card h3 { font-size:16px; margin-bottom:4px; display:flex; align-items:center; gap:10px; }
.card h3::before { content:""; width:4px; height:1em; border-radius:2px; background:var(--accent); }
.card .sub { color:var(--muted); margin:0 0 18px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px 16px; }
.stats { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; margin-bottom:22px; }
@media (max-width:1100px){ .stats { grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); } }
.stat { position:relative; overflow:hidden; display:flex; align-items:center; gap:16px; background:linear-gradient(160deg,rgba(255,255,255,.04),var(--panel) 65%); border:1px solid var(--line); border-radius:18px; padding:22px; transition:.2s; }
.stat:hover { border-color:var(--line2); transform:translateY(-2px); }
.stat .ico { flex:none; width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:rgba(255,255,255,.06); color:var(--muted); }
.stat .ico svg { width:24px; height:24px; }
.stat.ok .ico { background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); }
.stat.warn .ico { background:rgba(245,165,36,.14); color:var(--warn); }
.stat.bad .ico { background:rgba(255,107,107,.14); color:var(--danger); }
.stat b { display:block; font-size:36px; font-weight:800; line-height:1.1; letter-spacing:-.02em; }
.stat span { color:var(--muted); font-size:13.5px; }
.stat.warn b { color:var(--warn); } .stat.bad b { color:var(--danger); } .stat.ok b { color:var(--accent); }

.dash { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px; align-items:start; }
@media (max-width:1280px){ .dash { grid-template-columns:1fr; } }
.side-card { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:20px; margin-bottom:18px; }
.side-card h4 { font-size:15px; display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.side-card h4 .n { margin-left:auto; font-size:12px; padding:1px 9px; border-radius:999px; background:var(--card2); color:var(--muted); }
.alert-item { display:flex; align-items:center; gap:12px; padding:10px; margin:0 -10px; border-radius:12px; cursor:pointer; transition:.12s; }
.alert-item:hover { background:var(--card); }
.alert-item .avatar { width:34px; height:34px; font-size:12px; }
.alert-item b { display:block; font-size:14px; }
.alert-item small { color:var(--muted); }
.alert-item .when { margin-left:auto; font-size:12px; font-weight:700; white-space:nowrap; }
.when.bad { color:var(--danger); } .when.warn { color:var(--warn); } .when.ok { color:var(--accent); }
.side-empty { color:var(--dim); font-size:13px; padding:6px 0 2px; }
.card.flush { padding:22px 22px 8px; }

/* ── table ──────────────────────────────────────────────────────── */
.toolbar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; align-items:center; }
.toolbar .search { flex:1 1 260px; position:relative; }
.toolbar .search input { padding-left:38px; }
.toolbar .search svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--dim); }
.toolbar select { width:auto; min-width:160px; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; min-width:760px; }
th { text-align:left; color:var(--dim); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:10px 14px; border-bottom:1px solid var(--line); }
td { padding:16px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; }
tr.click { cursor:pointer; transition:background .12s; }
tr.click:hover { background:var(--card); }
.who { display:flex; align-items:center; gap:14px; }
.avatar { flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:14px;
  color:var(--on-accent); background:linear-gradient(135deg,#a0e25c,#5fa61f); }
.avatar.off { background:#2a2a2a; color:var(--muted); }
.who b { display:block; font-size:15.5px; }
.bar { height:5px; border-radius:3px; background:#232323; margin-top:7px; width:120px; overflow:hidden; }
.bar i { display:block; height:100%; border-radius:3px; background:var(--accent); }
.bar i.warn { background:var(--warn); } .bar i.bad { background:var(--danger); }
.go { color:var(--dim); width:18px; height:18px; transition:.15s; }
tr.click:hover .go { color:var(--accent); transform:translateX(3px); }
.who .mac { display:inline-flex; align-items:center; gap:4px; color:var(--muted); font-size:12px; }
.badge { display:inline-flex; align-items:center; gap:6px; padding:3px 11px; border-radius:999px; font-size:12px; font-weight:700; background:var(--card2); color:var(--muted); }
.badge.ok { background:color-mix(in srgb, var(--accent) 15%, transparent); color:var(--accent); }
.badge.bad { background:rgba(255,107,107,.14); color:var(--danger); }
.badge.warn { background:rgba(245,165,36,.15); color:var(--warn); }
.dot { width:8px; height:8px; border-radius:50%; background:var(--dim); display:inline-block; }
.dot.on { background:var(--accent); box-shadow:0 0 8px var(--accent); }
.empty { text-align:center; color:var(--muted); padding:34px 10px; }
.chip { display:inline-block; padding:2px 10px; border-radius:999px; background:var(--card2); font-weight:700; font-size:12px; }

/* ── detail ─────────────────────────────────────────────────────── */
.back { margin-bottom:16px; }
.id-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-bottom:6px; }
.id-tile { background:#0a0a0a; border:1px solid var(--line2); border-radius:14px; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.id-tile small { display:block; color:var(--dim); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; }
.id-tile b { display:block; font-size:19px; margin-top:2px; }
.quick { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.actions .right { margin-left:auto; }
.playlist-url { max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }

/* ── toast ──────────────────────────────────────────────────────── */
#toast { position:fixed; right:24px; bottom:24px; background:var(--card2); border:1px solid var(--accent); color:var(--text);
  padding:12px 18px; border-radius:12px; box-shadow:0 14px 40px rgba(0,0,0,.6); transform:translateY(20px); opacity:0; pointer-events:none; transition:.25s; z-index:50; }
#toast.show { transform:none; opacity:1; }

@media (max-width: 860px) {
  #app { grid-template-columns:1fr; }
  aside { position:static; height:auto; flex-direction:row; align-items:center; flex-wrap:wrap; padding:12px 16px; }
  aside .brand { border:0; margin:0 auto 0 0; padding:0; } aside .brand small { display:none; }
  .nav { width:auto; } .nav.spacer { margin-top:0; }
  main { padding:20px 16px 50px; }
}


/* ── shell v2: scope banner, brand preview, small helpers ─────── */
#scopebar { display:flex; align-items:center; gap:12px; padding:10px 18px; margin:-6px 0 18px; border-radius:12px;
  background:color-mix(in srgb, var(--warn) 14%, transparent); border:1px solid color-mix(in srgb, var(--warn) 45%, transparent); color:var(--warn); font-weight:600; }
#scopebar .btn { margin-left:auto; }
.who { color:var(--dim); font-size:12px; padding:0 10px 10px; }
.who b { color:var(--text); display:block; font-size:14px; }
.row-link { cursor:pointer; }
.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 11px; border-radius:999px; font-size:12px; font-weight:700; background:var(--card2); color:var(--muted); }
.pill.ok { background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); }
.pill.warn { background:rgba(245,165,36,.15); color:var(--warn); }
.pill.bad { background:rgba(255,107,107,.14); color:var(--danger); }
.two { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:18px; }
.list { display:grid; gap:2px; }
.list .item { display:flex; align-items:center; gap:12px; padding:10px 6px; border-radius:10px; cursor:pointer; }
.list .item:hover { background:var(--card2); }
.list .item b { font-weight:600; }
.list .item small { color:var(--dim); }
.list .item .when { margin-left:auto; font-size:12px; font-weight:700; }
.empty-note { color:var(--dim); padding:14px 6px; }
.preview { border:1px solid var(--line2); border-radius:16px; overflow:hidden; background:#070707; }
.preview-top { display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--line); }
.preview-top img { height:34px; max-width:160px; object-fit:contain; }
.preview-top .tab { padding:6px 14px; border-radius:10px; font-weight:700; font-size:13px; }
.preview-body { padding:18px; display:flex; gap:12px; align-items:center; }
.swatch { width:36px; height:36px; border-radius:10px; border:1px solid var(--line2); }
.fine { font-size:12px; color:var(--dim); }