/* Aa & Hunze Live Link – studio (dark broadcast style) and reporter (phone) */
:root {
  --navy: #1a1844; --purple: #352c89; --green: #2da834; --green-dark: #23862a; --red: #e11d48; --amber: #d98f00;
  --bg: #0e0d24; --surface: #18173a; --surface-2: #22204d; --text: #ececf6; --muted: #a2a3c0; --line-c: #2e2c60;
  --line: #2da834;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 "Open Sans", Arial, sans-serif; }
h1, h2, h3 { font-family: Lato, Arial, sans-serif; font-weight: 900; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
code { background: var(--surface-2); padding: 2px 6px; border-radius: 6px; font-size: .82rem; word-break: break-all; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.btn { border: 0; background: var(--green); color: #fff; font-weight: 700; border-radius: 999px; padding: 10px 18px; cursor: pointer; font-size: 1rem; }
.btn:hover { background: var(--green-dark); }
.btn.danger { background: var(--red); }
.big-btn { width: 100%; padding: 15px; font-size: 1.1rem; }
.form, .r-card { display: flex; flex-direction: column; gap: 12px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; color: var(--muted); font-weight: 600; }
label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); font-weight: 400; }
input, select { font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--line-c); border-radius: 10px; padding: 10px 12px; }
input[type=range] { padding: 0; accent-color: var(--green); }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--purple); color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 600; z-index: 90; max-width: 92vw; text-align: center; }
.toast.bad { background: var(--red); }
.err { color: var(--red); font-weight: 600; min-height: 1em; margin: 0; }

/* meters */
.meter { height: 10px; border-radius: 5px; background: #0a0918; overflow: hidden; position: relative; }
.meter i { position: absolute; inset: 0 auto 0 0; width: var(--lvl, 0%); background: linear-gradient(90deg, var(--green) 0 70%, #e7c400 80%, var(--red) 95%); background-size: 100vw 100%; transition: width .05s linear; }
.meter.big { height: 18px; border-radius: 9px; }
.meter.clip { box-shadow: 0 0 0 2px var(--red); }

/* ================= reporter ================= */
.reporter { min-height: 100vh; background: linear-gradient(160deg, var(--navy), #0e0d24 60%); }
.r-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 3px solid var(--line); }
.r-head img { height: 36px; width: auto; border-radius: 6px; }
.r-head strong { font: 900 1.1rem Lato, sans-serif; display: block; }
.r-main { max-width: 520px; margin: 0 auto; padding: 16px; }
.r-card h1 { font-size: 1.5rem; margin: 4px 0; }
.r-label { font-size: .88rem; color: var(--muted); font-weight: 600; }
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mode { border: 2px solid var(--line-c); background: var(--surface); color: var(--text); border-radius: 14px; padding: 10px 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mode span { font-size: .72rem; color: var(--muted); }
.mode.on { border-color: var(--green); background: color-mix(in srgb, var(--green) 18%, var(--surface)); }
#preview, #remote-video { width: 100%; border-radius: 12px; background: #000; aspect-ratio: 16 / 9; object-fit: cover; }
.call-status { text-align: center; padding: 24px 12px; border-radius: 18px; background: var(--surface); position: relative; overflow: hidden; }
.call-status h1 { font-size: 1.45rem; margin: 10px 0 4px; }
.pulse { width: 74px; height: 74px; border-radius: 50%; margin: 0 auto; background: var(--amber); display: grid; place-items: center; }
.pulse::after { content: "📞"; font-size: 2rem; }
.ringing .pulse { animation: ring 1.4s infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(217,143,0,.6); } 100% { box-shadow: 0 0 0 26px rgba(217,143,0,0); } }
.connecting .pulse { background: var(--purple); animation: ring 1s infinite; }
.connected .pulse { background: var(--green); }
.connected .pulse::after { content: "🎧"; }
.onair .pulse { background: var(--red); }
.onair .pulse::after { content: "🎙️"; }
.timer { font: 900 2.2rem Lato, sans-serif; font-variant-numeric: tabular-nums; margin-top: 6px; }
.tally { position: fixed; inset: 0 0 auto 0; height: 0; background: var(--red); color: #fff; z-index: 50; display: grid; place-items: center; font: 900 1.4rem Lato, sans-serif; letter-spacing: .1em; overflow: hidden; transition: height .2s; }
.tally.on { height: 54px; animation: tally 1.5s infinite; }
@keyframes tally { 50% { background: #b5102f; } }
body.onair .r-head { margin-top: 54px; }
body.onair .call-status { background: color-mix(in srgb, var(--red) 30%, var(--surface)); box-shadow: 0 0 0 3px var(--red); }
.r-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.r-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.ctl { flex: 1 1 auto; border: 1px solid var(--line-c); background: var(--surface); color: var(--text); border-radius: 12px; padding: 12px; font-weight: 700; cursor: pointer; flex-direction: row; align-items: center; }
.ctl.off { background: var(--red); border-color: var(--red); }
.ctl.vol { display: flex; gap: 8px; font-size: 1.1rem; }
.ctl.vol input { flex: 1; }
.net { margin: 10px 0; text-align: center; }
.q-goed { color: var(--green); } .q-matig { color: var(--amber); } .q-slecht { color: var(--red); }
.r-chat ul { list-style: none; margin: 0; padding: 0; max-height: 150px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.r-chat li { background: var(--surface); padding: 6px 10px; border-radius: 10px; font-size: .9rem; }
.r-chat li.from-studio { background: color-mix(in srgb, var(--purple) 50%, var(--surface)); }
.r-chat form, .l-chat form { display: flex; gap: 6px; margin: 8px 0; }
.r-chat form input, .l-chat form input { flex: 1; min-width: 0; }
.r-chat form button, .l-chat form button { border: 0; background: var(--green); color: #fff; border-radius: 10px; padding: 0 14px; cursor: pointer; }

/* ================= studio ================= */
.s-head { display: flex; align-items: center; gap: 14px; padding: 8px 16px; background: linear-gradient(90deg, var(--navy), var(--purple)); position: sticky; top: 0; z-index: 20; }
.s-head img { height: 40px; width: auto; border-radius: 6px; }
.s-title { flex: 1; }
.s-title strong { font: 900 1.15rem Lato, sans-serif; }
.s-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.clock { font: 900 1.3rem Lato, sans-serif; font-variant-numeric: tabular-nums; margin-right: 8px; }
.sbtn { border: 1px solid var(--line-c); background: var(--surface-2); color: var(--text); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: .85rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.sbtn:hover { border-color: var(--green); }
.sbtn.on { border-color: var(--green); background: color-mix(in srgb, var(--green) 25%, var(--surface-2)); }
.sbtn.rec { background: var(--red); border-color: var(--red); animation: tally 1.5s infinite; }
.sbtn.danger { color: #ff8095; }
.ibtn { border: 0; background: none; cursor: pointer; font-size: 1.1rem; color: var(--text); }
.s-login { max-width: 400px; margin: 60px auto; padding: 16px; }
.banner { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 30; background: var(--amber); color: #111; text-align: center; padding: 10px 18px; border-radius: 999px; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.rack { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; padding: 14px; }
.line { background: var(--surface); border: 1px solid var(--line-c); border-top: 5px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.line.disabled { opacity: .5; }
.line.st-ringing { animation: ringcard 1.2s infinite; border-color: var(--amber); }
@keyframes ringcard { 50% { box-shadow: 0 0 0 4px rgba(217,143,0,.45); } }
.line.onair { border-color: var(--red); box-shadow: 0 0 0 3px var(--red); background: color-mix(in srgb, var(--red) 12%, var(--surface)); }
.l-head { display: flex; align-items: center; gap: 8px; }
.l-name { font: 900 1.15rem Lato, sans-serif; flex: 1; }
.l-status { font-size: .78rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); }
.st-ringing .l-status { background: var(--amber); color: #111; }
.st-connecting .l-status { background: var(--purple); }
.st-connected .l-status { background: var(--green); }
.onair .l-status { background: var(--red); }
.l-idle p { margin: 0 0 6px; }
.l-link { margin-bottom: 8px; }
.l-who { display: flex; flex-direction: column; }
.l-who b { font-size: 1.1rem; }
.l-timer { font: 900 1.6rem Lato, sans-serif; font-variant-numeric: tabular-nums; }
.l-ring, .l-main-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bigbtn { border: 0; border-radius: 12px; padding: 14px; font: 900 1.05rem Lato, sans-serif; cursor: pointer; color: #fff; background: var(--surface-2); user-select: none; touch-action: none; }
.bigbtn.accept { background: var(--green); }
.bigbtn.reject { background: var(--surface-2); border: 1px solid var(--line-c); }
.bigbtn.onair-btn { background: #3a1020; border: 2px solid var(--red); }
.bigbtn.onair-btn.on { background: var(--red); animation: tally 1.5s infinite; }
.bigbtn.talk-btn { background: #3a2a05; border: 2px solid var(--amber); }
.bigbtn.talk-btn.on { background: var(--amber); color: #111; }
.l-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.l-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: .72rem; color: var(--muted); }
.l-meters .meter { height: 14px; }
.l-video { position: relative; }
.l-video video { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; }
.l-video .fs { position: absolute; right: 8px; top: 8px; background: rgba(0,0,0,.5); border-radius: 8px; padding: 2px 8px; }
.l-routing { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
.l-routing label { font-size: .75rem; }
.l-routing select { padding: 6px; font-size: .8rem; }
.l-stats { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .78rem; color: var(--muted); }
.l-stats .q { font-weight: 700; }
.l-chat ul { list-style: none; margin: 0; padding: 0; max-height: 96px; overflow-y: auto; font-size: .82rem; }
.l-chat li.mine { color: #b9f5bc; }
.l-chat form input { padding: 6px 10px; font-size: .85rem; }
.quick { display: flex; flex-wrap: wrap; gap: 4px; }
.quick button { border: 1px solid var(--line-c); background: none; color: var(--muted); border-radius: 999px; padding: 2px 8px; font-size: .72rem; cursor: pointer; }
.quick button:hover { color: var(--text); border-color: var(--green); }
.drawer { position: fixed; right: 0; top: 0; bottom: 0; width: min(440px, 100vw); background: var(--surface); border-left: 1px solid var(--line-c); z-index: 40; display: flex; flex-direction: column; box-shadow: -10px 0 30px rgba(0,0,0,.4); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line-c); }
.drawer-head h3 { margin: 0; }
.log-list { list-style: none; margin: 0; padding: 8px 14px; overflow-y: auto; font-size: .82rem; display: flex; flex-direction: column; gap: 4px; }
.log-list time { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 6px; }
.log-list .lv-warn { color: #ffd166; }
.modal { position: fixed; inset: 0; background: rgba(5,5,20,.7); z-index: 60; display: grid; place-items: center; padding: 16px; }
.modal-box { background: var(--surface); border-radius: 16px; padding: 22px; width: min(480px, 100%); max-height: 90vh; overflow-y: auto; position: relative; }
.modal-box h2 { margin: 0 0 10px; }
.modal-x { position: absolute; right: 12px; top: 10px; background: none; border: 0; color: var(--muted); font-size: 1.1rem; cursor: pointer; }
.qr { background: #fff; padding: 10px; border-radius: 12px; display: grid; place-items: center; }
.qr svg { width: 100%; max-width: 300px; height: auto; }
.colors { display: flex; gap: 8px; }
.colors input { position: absolute; opacity: 0; }
.colors span { display: block; width: 30px; height: 30px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; }
.colors input:checked + span { border-color: #fff; }
hr { border: 0; border-top: 1px solid var(--line-c); margin: 16px 0; }
@media (max-width: 700px) { .s-head { flex-wrap: wrap; } .rack { grid-template-columns: 1fr; padding: 8px; } .l-routing { grid-template-columns: 1fr; } }