:root { --bg: #111418; --panel: #1b2027; --line: #2a313b; --text: #e8ecf1; --muted: #9aa5b1; --accent: #4c9ffe; --live: #e5484d; --ok: #30a46c; }
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, sans-serif; background: var(--bg); color: var(--text); }
main { max-width: 1100px; margin: 0 auto; padding: 16px; }
h1 { font-size: 20px; margin: 8px 0 16px; } h2 { font-size: 16px; margin: 18px 0 8px; color: var(--muted); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-bottom: 12px; }
input, button, select { font: inherit; color: var(--text); background: #0d1014; border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; }
button { cursor: pointer; background: #232a33; } button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.live { background: var(--live); border-color: var(--live); color: #fff; } button:disabled { opacity: .5; cursor: default; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .grow { flex: 1; }
.muted { color: var(--muted); } .error { color: #ff8080; min-height: 1.4em; } .ok { color: var(--ok); }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.person { background: #0d1014; border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.person video, .preview video { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; object-fit: cover; }
.badge { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: #232a33; } .badge.stage { background: var(--accent); } .badge.live { background: var(--live); }
.meter { height: 8px; background: #0d1014; border-radius: 4px; overflow: hidden; } .meter > div { height: 100%; width: 0; background: var(--ok); transition: width .08s; }
.list { list-style: none; padding: 0; margin: 0; } .list li { padding: 6px 0; border-bottom: 1px solid var(--line); }
a { color: var(--accent); } code { word-break: break-all; }
.strips { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.strip { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.strip.backstage { opacity: .7; } .strip .fader { flex: 1; min-width: 0; } .small { font-size: 12px; }
.strip details .stage { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.strip details .stage strong { width: 100%; font-size: 13px; } .ctl { font-size: 13px; } .ctl input[type=number] { width: 78px; padding: 3px 6px; }
.vad { width: 10px; height: 10px; border-radius: 50%; background: #2a313b; } .vad.on { background: var(--ok); }
.offer:empty { display: none; } .offer { font-size: 13px; background: #2a2414; border-radius: 6px; padding: 6px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.comments { max-height: 520px; overflow-y: auto; } .comments li { padding: 8px 4px; }
.comment .text { margin: 4px 0; overflow-wrap: anywhere; } .comment .tools { display: none; gap: 4px; } .comment:hover .tools, .comment:focus-within .tools { display: flex; }
.comment.star { background: #2a2614; } .comment.deleted, .comment.hidden, .comment.blocked { opacity: .5; } .comment.deleted .text { text-decoration: line-through; }
.comment.onscreen { outline: 2px solid var(--accent); } .comment .paid { color: #ffcc4d; font-weight: 600; }
.comment.k-paid, .comment.k-membership, .comment.k-sub { border-left: 4px solid #ffcc4d; } .comment.k-raid { border-left: 4px solid var(--accent); }
button.small { font-size: 12px; padding: 2px 8px; } .gap { background: #3a1d1d; color: #ffb4b4; border-radius: 6px; }
.badge.p-twitch { background: #6441a5; } .badge.p-youtube { background: #c4302b; }