:root { --bg:#0f1115; --card:#171a21; --ink:#e8e8ea; --muted:#9aa3b2; --accent:#4a90d9; --danger:#c0494b; --ok:#3fae6a; }
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; background: var(--bg); color: var(--ink); }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:.7rem 1.2rem; background:#11141a; border-bottom:1px solid #232733; }
.brand { font-weight:700; color:var(--ink); text-decoration:none; }
.topbar nav { display:flex; gap:1rem; align-items:center; }
.topbar nav a { color:#bcd3f0; text-decoration:none; }
.topbar .who { color:var(--muted); font-size:.9rem; }
main { max-width: 860px; margin: 1.2rem auto; padding: 0 1rem; }
.card { background:var(--card); border:1px solid #232733; border-radius:10px; padding:1rem 1.2rem; margin-bottom:1rem; }
.card.narrow { max-width:440px; margin-left:auto; margin-right:auto; }
.center { text-align:center; }
h1 { font-size:1.4rem; margin:.2rem 0 .8rem; } h2 { font-size:1.1rem; }
.muted { color:var(--muted); font-size:.9rem; }
.err { color:#ff9a9a; background:#3a1f22; padding:.5rem .7rem; border-radius:6px; }
.ok { color:#bff0d0; } .note { background:#2a2410; border-left:3px solid #c9a227; padding:.5rem .7rem; border-radius:6px; font-size:.9rem; }
.hint { background:#15263a; border-left:3px solid var(--accent); padding:.5rem .7rem; border-radius:6px; font-size:.9rem; }
form.grid { display:flex; flex-direction:column; gap:.7rem; }
form.inline { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
label { display:flex; flex-direction:column; gap:.25rem; font-size:.9rem; }
label.check { flex-direction:row; align-items:flex-start; gap:.5rem; }
input, select { background:#0e1116; color:var(--ink); border:1px solid #2c313d; border-radius:6px; padding:.45rem .55rem; font-size:.95rem; }
button { background:var(--accent); color:#fff; border:0; padding:.5rem .9rem; border-radius:6px; cursor:pointer; font-size:.95rem; }
button:disabled { background:#3a3f4b; cursor:not-allowed; }
button.danger { background:var(--danger); } button.small { padding:.3rem .6rem; font-size:.85rem; }
a.btnlink { display:inline-block; background:var(--accent); color:#fff; padding:.45rem .8rem; border-radius:6px; text-decoration:none; }
table { width:100%; border-collapse:collapse; margin-top:.8rem; font-size:.92rem; }
th, td { text-align:left; padding:.45rem .5rem; border-bottom:1px solid #232733; }
.list { list-style:none; padding:0; } .list li { padding:.4rem 0; border-bottom:1px solid #232733; }
.tag { font-size:.72rem; padding:.1rem .45rem; border-radius:10px; background:#2a2f3a; color:#cdd6e3; }
.tag.live { background:#163a26; color:#8ff0b5; } .tag.ended { background:#3a1616; color:#f0a0a0; }
.tag.minor { background:#3a3410; color:#f0d480; }
.rowspread { display:flex; justify-content:space-between; align-items:center; }
.row { display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; margin:.8rem 0; }
.status { font-weight:bold; } .big { font-size:2.4rem; }
.linkbox { width:100%; font-family:monospace; font-size:.8rem; }
.media { display:flex; flex-direction:column; gap:.6rem; }
video, .remote-video { width:100%; max-width:800px; background:#000; border-radius:8px; }
.log { margin-top:1rem; font-family:monospace; font-size:.78rem; color:#8aa; max-height:170px; overflow:auto; border-top:1px solid #232733; padding-top:.5rem; }
a { color:#7ab8ff; }
.banner { background:#3a2e0c; border:1px solid #c9a227; color:#ffe7a3; font-weight:bold;
  padding:.7rem 1rem; border-radius:8px; margin:.6rem 0; }
.techlog { margin-top:1rem; } .techlog summary { cursor:pointer; color:var(--muted); font-size:.85rem; }
/* Host-Vorschau-Bühne mit Overlay-Banner (auch im Vollbild) */
.stage { position:relative; max-width:820px; }
.stage video { width:100%; background:#000; border-radius:8px; display:block; }
.banner-overlay { position:absolute; top:14px; left:14px; right:14px; z-index:10; cursor:pointer;
  background:rgba(58,46,12,.96); border:1px solid #c9a227; color:#ffe7a3; font-weight:bold;
  text-align:center; padding:.8rem 1rem; border-radius:8px; font-size:1.15rem; }
.stage:fullscreen { max-width:none; width:100vw; height:100vh; background:#000; }
.stage:fullscreen video { width:100%; height:100%; object-fit:contain; border-radius:0; }

/* Host-Quellenblöcke (Web-/Tab vs. native Quelle) */
.source-block { border:1px solid #232733; border-radius:8px; padding:.7rem .9rem; margin:.8rem 0; background:#0f131a; }
.source-block h2 { margin:.1rem 0 .5rem; }
.field { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin:.6rem 0; }
.field > span { color:var(--muted); font-size:.9rem; }
.field select { min-width:min(420px, 80vw); }

/* Reaktionen/Emotes (C) + Anfrage-Bestätigung (D) */
.emote-bar { display:flex; gap:.35rem; flex-wrap:wrap; margin:.5rem 0; }
.emote-bar button { background:#1a1f29; font-size:1.2rem; line-height:1; padding:.3rem .55rem; }
.emote-bar button:hover { background:#222838; }
.emote-float { position:absolute; bottom:6%; z-index:11; font-size:2.6rem; pointer-events:none;
  user-select:none; animation:emoteUp 2.6s ease-out forwards; will-change:transform,opacity; }
@keyframes emoteUp {
  0%   { transform:translateY(0) scale(.5);   opacity:0; }
  12%  { transform:translateY(-8%) scale(1.15); opacity:1; }
  100% { transform:translateY(-260%) scale(1); opacity:0; }
}
#request-banner button { background:#c9a227; color:#1a1405; }