/* LiveRumble app pages: the same night studio as the site */
:root{
  --ink:#0E0B1E; --stage:#15112C; --panel:#1D1840; --line:#2D2757; --text:#F4F0FF; --muted:#ABA3D2;
  --gold:#FFC93C; --gold-ink:#231900; --violet:#7A62FF; --live:#FF4D6A; --ok:#3DDC84; --warn:#FFB347; --sky:#7FD3FF;
  --display:"Unbounded","Arial Black",system-ui,sans-serif; --body:"Manrope","Segoe UI",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ink);color:var(--text);font:16px/1.55 var(--body);padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
a{color:var(--sky)} a:hover{color:var(--text)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px}
h1,h2,h3{margin:0;text-wrap:balance}
.wrap{max-width:1100px;margin:0 auto}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding-block:18px;border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font:800 17px var(--display);letter-spacing:.04em}
.logo img{width:36px;height:36px;border-radius:10px}
.logo b{color:var(--gold)}
.top .grow{flex:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:800 15px/1 var(--body);text-decoration:none;border-radius:14px;padding:14px 18px;border:0;cursor:pointer;transition:transform .15s, box-shadow .2s;color:var(--text);background:var(--panel);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1.5px var(--muted);color:var(--text)}
.btn.gold{background:var(--gold);color:var(--gold-ink);box-shadow:0 10px 26px -12px rgba(255,201,60,.7)}
.btn.gold:hover{color:var(--gold-ink)}
.btn.small{padding:10px 13px;font-size:14px;border-radius:12px}
.btn.danger{background:transparent;color:#FF9AA8;box-shadow:inset 0 0 0 1.5px #5A2433}
.card{background:var(--stage);border-radius:22px;box-shadow:inset 0 0 0 1px var(--line);padding:22px}
.muted{color:var(--muted)}
.eyebrow{font:700 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
label.f{display:flex;flex-direction:column;gap:6px;font-weight:700}
input[type=text],input[type=email],input[type=password],select,textarea{background:var(--ink);color:var(--text);border:0;box-shadow:inset 0 0 0 1.5px var(--line);border-radius:12px;padding:13px 14px;font:inherit;min-width:0}
input:focus,select:focus,textarea:focus{box-shadow:inset 0 0 0 1.5px var(--gold);outline:none}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;font:700 13px var(--mono);border-radius:999px;padding:6px 12px;box-shadow:inset 0 0 0 1px var(--line)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.ok .dot{background:var(--ok)} .warn .dot{background:var(--warn)} .bad .dot{background:var(--live)}
.msg{min-height:1.4em;font-weight:700;color:#FF9AA8}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom, 0px));transform:translate(-50%,140px);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line),0 12px 30px rgba(0,0,0,.5);border-radius:14px;padding:12px 18px;font-weight:700;transition:transform .25s;z-index:30}
.toast.on{transform:translate(-50%,0)}
table{width:100%;border-collapse:collapse}
th{font:700 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:10px}
td{padding:10px;border-top:1px solid var(--line);vertical-align:top}
.tabular{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}
.langpick{padding:8px 10px;font-size:14px;border-radius:10px;max-width:170px}