/* Layout nach Twitch: Top-Leiste (50 px), linke Seitenleiste (240 px), Inhalt. Nur Desktop. */
.topbar { height: 50px; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--panel); border-bottom: 1px solid var(--line); position: fixed; inset: 0 0 auto 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; color: var(--ink); text-decoration: none; margin-right: auto; }
.brand i { width: 28px; height: 28px; border-radius: var(--radius-lg); background: var(--accent); display: inline-grid; place-items: center; }
.brand i svg { width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 2.6; stroke-linecap: round; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.userchip { display: flex; align-items: center; gap: 8px; font-weight: 600; }

.side { position: fixed; top: 50px; bottom: 0; left: 0; width: 240px; background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; padding: 12px 0; }
.side h2 { font-size: 13px; padding: 4px 16px 8px; color: var(--ink-2); font-weight: 700; }
.side .newq { margin: 0 12px 12px; width: calc(100% - 24px); }
.sitem { display: flex; align-items: center; gap: 10px; padding: 6px 16px; color: var(--ink); text-decoration: none; }
.sitem:hover { background: var(--panel-2); }
.sitem.on { background: var(--panel-3); }
.sitem .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sitem .sub { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sitem .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--panel-3); flex: none; margin-left: auto; }
.sitem .dot.live { background: var(--ok); }
.sitem .av { width: 30px; height: 30px; border-radius: 50%; background: var(--panel-3); display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none; }
.sitem.on .av { background: var(--accent); color: #fff; }

main { margin: 50px 0 0 240px; padding: 24px 32px 96px; max-width: 1400px; }
main .panel { padding: 16px; }
main .panel h2 { margin-bottom: 12px; }

/* Login */
.loginwrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login { width: 400px; }
.login .brand { margin: 0 0 16px; font-size: 22px; justify-content: center; }
.login .panel { padding: 24px; }
.login h1 { text-align: center; font-size: 20px; margin-bottom: 16px; }

/* Übersicht: Kachelraster wie die Twitch-Kategorien. Die Kachel ist ein Maßband: große Fragenzahl, Skalenstriche oben. */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin-top: 20px; }
.tile { text-decoration: none; color: inherit; display: block; }
.tile .cover { aspect-ratio: 4 / 3; border-radius: var(--radius-xl); background: var(--accent); color: #fff; position: relative; padding: 14px 16px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; transition: transform .12s, box-shadow .12s; }
.tile .cover::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; opacity: .55;
  background: linear-gradient(90deg, #fff 1px, transparent 1px) 0 0 / 8px 9px repeat-x, linear-gradient(90deg, #fff 2px, transparent 2px) 0 0 / 40px 18px repeat-x; }
.tile:hover .cover { transform: translate(6px, -6px); box-shadow: -6px 6px 0 var(--accent-text); }
.tile .cover .big { font-size: 88px; line-height: .9; letter-spacing: -0.02em; }
.tile .cover .unit { font-size: 15px; font-weight: 700; font-stretch: 112%; opacity: .9; margin-top: 4px; }
.tile .cover .tag { position: absolute; right: 12px; bottom: 14px; background: #fff; color: #1b0b3a; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: var(--radius); }
.tile .cover .tag.idle { background: rgba(0,0,0,.35); color: #fff; }
.tile .t { font-weight: 800; font-stretch: 108%; margin-top: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile.add .cover { background: var(--panel); border: 2px dashed var(--line); color: var(--ink-2); align-items: center; justify-content: center; }
.tile.add .cover::before { display: none; }
.tile.add .cover .big { font-size: 64px; font-weight: 300; }
.tile.add:hover .cover { box-shadow: none; transform: none; border-color: var(--accent); color: var(--accent-text); }

/* Editor (Creator-Dashboard-Stil) */
.pagehead { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.editor { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.rail { position: sticky; top: 74px; }
.settings { display: grid; gap: 16px; grid-template-columns: 2fr 1fr; }
.check { display: flex; gap: 10px; align-items: flex-start; }
.check label { margin: 0; font-weight: 600; }
.qs { display: grid; gap: 8px; margin-top: 12px; }
.q { display: grid; gap: 12px; grid-template-columns: 28px 1fr; background: var(--panel-2); border-radius: var(--radius-lg); padding: 12px; }
.q .n { font-size: 28px; line-height: 1; color: var(--signal); text-align: center; padding-top: 22px; }
.q .f { display: grid; gap: 8px; grid-template-columns: 1.2fr 1fr 1.2fr 36px; align-items: end; }
.q .f .wide { grid-column: 1 / -1; }
.q label { font-size: 12px; color: var(--ink-2); font-weight: 500; }
.q input { background: var(--panel); }
.q input:focus { background: var(--bg); }
.segs { display: inline-flex; background: var(--panel-2); border-radius: var(--radius); padding: 2px; gap: 2px; }
.seg { background: transparent; height: 30px; width: 34px; }
.seg.on { background: var(--panel-3); color: var(--accent-text); }
.linkbox { display: grid; gap: 8px; }
.linkbox input { font-size: 12.5px; }
.savebar { position: sticky; bottom: 0; display: flex; gap: 8px; align-items: center; padding: 12px 0; margin-top: 16px; background: linear-gradient(transparent, var(--bg) 35%); }
.empty { padding: 40px 16px; text-align: center; color: var(--ink-2); }

/* Antwortzahl in Zielgelb, schmal: die Zahl ist der Hauptdarsteller */
.q input.ans { color: var(--signal); font-size: 18px; height: 40px; }
.q select { background: var(--panel); }

/* Gewichtungs-Katalog */
.cat { display: grid; gap: 8px; margin-top: 12px; }
.sch { background: var(--panel-2); border-radius: var(--radius-lg); padding: 12px; }
.schhead { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.schhead input { max-width: 240px; font-weight: 700; background: var(--panel); }
.pts { display: flex; flex-wrap: wrap; gap: 8px; }
.pt { width: 58px; }
.pt label { font-size: 12px; color: var(--ink-2); font-weight: 500; margin-bottom: 2px; text-align: center; }
.pt input { text-align: center; padding: 6px 2px; background: var(--panel); font-size: 16px; }
select { width: 100%; height: 36px; padding: 0 8px; background: var(--panel-2); color: var(--ink); border: 2px solid transparent; border-radius: var(--radius); font: inherit; }
select:focus { outline: none; border-color: var(--accent); }

/* Spielsteuerung */
.curq .qt { font-size: 24px; font-weight: 800; font-stretch: 108%; margin-top: 4px; line-height: 1.2; }
.gold { color: var(--signal); font-size: 26px; }
.plist { margin-top: 8px; display: grid; gap: 4px; }
.prow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--panel-2); border-radius: var(--radius-lg); }
.prow.off { opacity: .65; }
.prow .av { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none; }
.prow .nm { font-weight: 700; }
.prow .pts { font-size: 22px; width: 44px; text-align: right; color: var(--signal); }
.jk { font-size: 11.5px; font-weight: 700; padding: 2px 6px; border-radius: var(--radius); background: var(--panel-3); color: var(--accent-text); white-space: nowrap; }
.jk.used { opacity: .5; color: var(--ink-2); }
.chatbox { display: flex; gap: 4px; align-items: center; } .chatbox input { width: 96px; height: 30px; font-size: 13px; background: var(--panel); }
.brow { display: flex; gap: 8px; align-items: center; padding: 4px 0; }
table.res { width: 100%; border-collapse: collapse; margin-top: 8px; }
table.res th, table.res td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--line); }
table.res th { color: var(--ink-2); font-size: 12.5px; font-weight: 600; } table.res .n { text-align: right; font-variant-numeric: tabular-nums; }

.badge { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--panel-3); color: var(--ink-2); white-space: nowrap; }
.badge.on { background: color-mix(in srgb, var(--ok) 22%, var(--panel-3)); color: var(--ok); }

.modcams { height: 330px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.ok { color: var(--ok); font-weight: 600; }

/* Seitenleiste eingeklappt: schmale Leiste nur mit Initialen und Plus-Knopf */
.side, main { transition: width .15s, margin-left .15s; }
.sidec .side { width: 56px; overflow-x: hidden; }
.sidec main { margin-left: 56px; }
.sidec .side h2, .sidec .side .grow, .sidec .side .dot, .sidec .side .hint, .sidec .newq .lbl { display: none; }
.sidec .side .newq { width: 36px; margin: 0 10px 12px; padding: 0; }
.sidec .sitem { padding: 6px 0; justify-content: center; }

/* Status, „Läuft gerade“, Verlauf */
.tile .cover .tag.active { background: var(--signal); color: var(--on-signal); }
.tile .cover .tag.draft { background: rgba(0,0,0,.35); color: #fff; }
.tile .cover .tag.closed { background: rgba(0,0,0,.55); color: #cbd2dc; }
.tile .cover.closed { filter: saturate(.35) brightness(.8); }
.ld { width: 10px; height: 10px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 25%, transparent); flex: none; }
.livepanel { margin-top: 16px; border: 1px solid color-mix(in srgb, var(--signal) 40%, var(--line)); }
.livebox { padding: 0 12px 8px; }
.livebox h2 { padding: 4px 4px 6px !important; color: var(--signal) !important; }
.livelink { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; background: color-mix(in srgb, var(--signal) 16%, var(--panel-2)); color: var(--ink); text-decoration: none; font-weight: 700; }
.livelink + .livelink { margin-top: 6px; }
.livelink:hover { background: color-mix(in srgb, var(--signal) 26%, var(--panel-2)); }
.livelink .go { font-size: 12px; color: var(--signal); }
.sidec .livebox { padding: 0 8px 8px; } .sidec .livelink { padding: 9px 0; justify-content: center; } .sidec .livebox h2, .sidec .lbl2 { display: none; }
.statebox.active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--signal) 45%, transparent); }
.endbox { padding: 10px; border-radius: 14px; background: var(--panel-2); }
.runs { display: grid; gap: 8px; }
.run { padding: 10px 14px; background: var(--panel-2); border-radius: 14px; }
.run .rt { font-weight: 800; } .run .rs { color: var(--ink-2); font-size: 12.5px; }
.run ol { margin: 6px 0 0; padding-left: 22px; } .run li b { float: right; color: var(--signal); font-variant-numeric: tabular-nums; }
.sitem .dot.live { background: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 25%, transparent); }