:root { --bg:#0d1117; --panel:#161b22; --line:#30363d; --text:#e6edf3; --muted:#8b949e; --green:#238636; }
html, body { background: var(--bg); color: var(--text); font-size: 15px; }
a { color: #58a6ff; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:10px 18px; border-bottom:1px solid var(--line); }
.brand { font-weight:700; font-size:1.25rem; color:var(--text); text-decoration:none; }
.brand small, .auth-card h1 small { color:var(--muted); font-weight:400; }
.logo-dot { display:inline-block; width:14px; height:14px; border-radius:4px; background:#58a6ff; margin-right:8px; }
.shell { display:flex; min-height: calc(100vh - 52px); }
.sidenav { width:170px; padding:14px 10px; border-right:1px solid var(--line); }
.sidenav a { display:block; padding:6px 10px; border-radius:6px; color:var(--text); text-decoration:none; margin-bottom:4px; }
.sidenav a.active { background:#1f6feb; }
.content { flex:1; padding:18px; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, Consolas, monospace; }
.form-control, .form-select { background:#0d1117; color:var(--text); border-color:var(--line); }
.form-control:focus, .form-select:focus { background:#0d1117; color:var(--text); }
label { color: var(--muted); font-size:.85rem; margin-top:6px; }
.editor { display:flex; gap:18px; align-items:flex-start; }
.editor-main { flex:1; min-width:0; }
.editor-head { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.editor-side { width:300px; background:#11161d; border-left:1px solid var(--line); padding:14px; border-radius:8px; }
.editor-side h3 { color:#79c0ff; font-size:1.1rem; }
.editor-side details { border-top:1px solid var(--line); margin-top:12px; padding-top:8px; }
.editor-side summary { cursor:pointer; font-weight:600; }
.grid-board { position:relative; display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:repeat(6,1fr);
  aspect-ratio:16/9; gap:4px; background:#0b0f14; border:1px solid var(--line); border-radius:8px; padding:4px; user-select:none; touch-action:none;
  background-image:linear-gradient(to right,#1c232c 1px,transparent 1px),linear-gradient(to bottom,#1c232c 1px,transparent 1px);
  background-size:calc(100%/12) calc(100%/6); }
.gpanel { position:relative; z-index:1; border:1.5px solid var(--c); border-radius:8px; background:#141a21; padding:6px 10px; cursor:move; overflow:hidden; }
.gpanel b { color:var(--c); display:block; }
.gpanel small { color:var(--muted); }
.gpanel.sel { box-shadow:0 0 0 2px var(--c); background:#18202a; }
.gpanel.bad { border-color:#f85149; background:#2a1416; }
.gpanel .rs { position:absolute; right:3px; bottom:3px; width:12px; height:12px; background:var(--c); cursor:nwse-resize; border-radius:2px; }
.hidden-panels { margin-top:8px; display:flex; gap:6px; flex-wrap:wrap; }
.chip { background:#21262d; color:var(--muted); border:1px solid var(--line); border-radius:12px; padding:2px 10px; }
.tv-preview { position:relative; aspect-ratio:16/9; max-width:640px; background:#0d1117; border:6px solid #000; border-radius:6px; box-shadow:0 0 0 1px var(--line); }
.pv { position:absolute; padding:3px; }
.pv-in { height:100%; background:#161b22; border:1px solid #30363d; border-radius:4px; padding:4px 6px; font-size:9px; overflow:hidden; color:#e6edf3; }
.pv-t { color:#8b949e; font-weight:700; font-size:8px; }
.pv-big { font-size:20px; font-weight:700; }
.pv-red { color:#f85149; } .pv-green { color:#3fb950; font-weight:700; }
.pv-radar { height:80%; border-radius:3px; background: radial-gradient(circle at 30% 60%, #3fb95088 0 8%, transparent 9%), radial-gradient(circle at 70% 40%, #d2992288 0 6%, transparent 7%), #0b1220; }
.alert-ok { background:#12261e; border:1px solid #238636; padding:6px 10px; border-radius:6px; margin:8px 0; }
.alert-err { background:#2a1416; border:1px solid #f85149; padding:6px 10px; border-radius:6px; margin:8px 0; }
.auth-card { max-width:380px; margin:12vh auto; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:24px; }
.auth-card h1 { font-size:1.4rem; margin-bottom:14px; }
.token-box { background:#12261e; border:1px solid #238636; border-radius:8px; padding:12px; margin:12px 0; }
.check { display:flex; gap:6px; align-items:center; color:var(--text); }
code { color:#ffa657; }
.grid-picker { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.grid-picker button { background:#161b22; color:var(--muted); border:0; padding:4px 12px; border-right:1px solid var(--line); }
.grid-picker button:last-child { border-right:0; }
.grid-picker button.on { background:#1f6feb; color:#fff; }
.pv-thumbs { display:flex; gap:3px; margin:3px 0; } .pv-thumbs i { flex:1; aspect-ratio:16/9; background:#ff7b7255; border-radius:2px; }
.pv-video { height:60%; display:flex; align-items:center; justify-content:center; background:#000; color:#e3b341; border-radius:3px; font-size:16px; }

/* Per-panel "Show on TV" switches in the sidebar section headers */
.editor-side summary { display: flex; align-items: center; gap: .5rem; }
.editor-side summary > span { flex: 1; }
.tvsw { position: relative; display: inline-block; width: 38px; height: 22px; margin: 0; cursor: pointer; flex: none; }
.tvsw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tvsw i { position: absolute; inset: 0; border-radius: 11px; background: #30363d; border: 1px solid #484f58; transition: background .15s; pointer-events: none; }
.tvsw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #8b949e; transition: transform .15s, background .15s; }
.tvsw input:checked + i { background: #238636; border-color: #2ea043; }
.tvsw input:checked + i::after { transform: translateX(16px); background: #fff; }
.tvsw input:focus-visible + i { outline: 2px solid #58a6ff; outline-offset: 2px; }