/* StreamerMix – spoločný vzhľad (strižňa, kamera, úvod, admin) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* elegantné odtiene šedej a čiernej; farba len s významom: červená = naživo, zelená = zapnuté */
  --bg:#0b0b0c; --bg2:#101011; --panel:#151516; --panel2:#1b1b1d; --panel3:#242426;
  --line:#28282b; --line2:#38383c; --text:#ececee; --muted:#8e8e93; --muted2:#636368;
  --live:#e5323e; --live2:#f2525d; --prev:#2fb35c; --accent:#d9d9de; --accent2:#ffffff; --warn:#e8b931;
  --radius:12px; --shadow:0 12px 34px rgba(0,0,0,.55);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; background:var(--bg); color:var(--text);
  font:16px/1.45 Inter, -apple-system, "Segoe UI", Roboto, system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
body { padding:max(12px, env(safe-area-inset-top)) 14px 14px; }
h1 { font-size:24px; font-weight:800; letter-spacing:-.4px; margin:6px 0 18px; }
h2 { font-size:18px; font-weight:700; margin:0 0 10px; }
a { color:#c9c9cf; }

/* tlačidlá */
button, .btn { font:inherit; font-size:15px; font-weight:600; padding:10px 16px; border:1px solid transparent; border-radius:10px;
  background:var(--accent); color:#111113; cursor:pointer; text-decoration:none; display:inline-block; text-align:center;
  transition:background .15s, border-color .15s, transform .05s, box-shadow .15s; }
button:hover, .btn:hover { background:var(--accent2); }
button:active, .btn:active { transform:translateY(1px); }
button:disabled { opacity:.4; cursor:default; }
button.red { background:var(--live); color:#fff; } button.red:hover { background:var(--live2); }
button.grey { background:var(--panel3); border-color:var(--line2); color:var(--text); }
button.grey:hover { background:#2e2e31; }

/* formuláre */
input, select, textarea { font:inherit; font-size:15px; padding:10px 12px; border-radius:9px; border:1px solid var(--line2);
  background:var(--bg2); color:var(--text); width:100%; outline:none; transition:border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { border-color:#6b6b71; box-shadow:0 0 0 3px rgba(255,255,255,.07); }
input[type=checkbox] { width:18px; height:18px; accent-color:var(--prev); flex:0 0 auto; }
input[type=range] { padding:0; border:0; background:transparent; accent-color:#bdbdc3; box-shadow:none; }
input[type=file] { padding:8px; font-size:13px; }
label { display:block; color:var(--muted); margin:12px 0 6px; font-size:13px; font-weight:500; }

/* karta (prihlásenie, nastavenie, platby) */
.card { max-width:460px; margin:6vh auto; background:var(--panel); border:1px solid var(--line); border-radius:18px;
  padding:28px; box-shadow:var(--shadow); }
.card h1 { display:flex; align-items:center; gap:10px; }
.card button { width:100%; padding:13px; font-size:16px; }
.brandmark { display:inline-flex; align-items:center; gap:9px; font-weight:800; letter-spacing:-.3px; }
.brandmark img { width:30px; height:30px; } .brandmark b { color:var(--live); font-weight:800; }

/* úvodná stránka */
.big-links { display:grid; gap:14px; max-width:520px; }
.big-links .btn { font-size:20px; padding:22px; border-radius:14px; text-align:left; }

.status { font-size:14px; color:var(--muted); margin:8px 0; min-height:1.3em; word-break:break-word; }
.status.err { color:#ff7b84; font-weight:600; }
video { background:#000; display:block; width:100%; }
.hidden { display:none !important; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.row > * { flex:1 1 auto; }