/* ================================================================
   WHAM — Who As Hot As Me
   Palette   coal / ash / ember / flare / steam / frost
   Display   Antonio (condensed, shouts)
   Body      Barlow (industrial, reads at 14px)
   Data      IBM Plex Mono (keys, money, counters)
   Signature The heat gauge: a filament that fills to the weaker rod.
   ================================================================ */

:root {
  --coal:  #14100f;   /* warm near-black, brown-tinted */
  --ash:   #1f1917;   /* panel */
  --soot:  #2b2320;   /* border / raised */
  --steam: #f2eae4;   /* primary text */
  --smoke: #a2938b;   /* secondary text */
  --ember: #ff4d1c;   /* hot — primary action */
  --flare: #ffc02e;   /* gold — second heat stop, warnings */
  --frost: #7e93a3;   /* cold — locked, offline, disabled */
  --live:  #ff2d55;   /* live dot only */

  --gauge: linear-gradient(90deg, var(--ember) 0%, var(--flare) 100%);
  --r: 3px;
  --rail: 216px;
  --pad: 20px;

  --f-display: 'Antonio', 'Oswald', Impact, sans-serif;
  --f-body: 'Barlow', system-ui, -apple-system, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--coal);
  color: var(--steam);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Heat haze: two faint radial embers behind everything. Ambient, not animated. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(255,77,28,.13), transparent 60%),
    radial-gradient(700px 400px at 95% 8%, rgba(255,192,46,.07), transparent 60%);
}

a { color: var(--steam); text-decoration: none; }
a:hover { color: var(--ember); }
:focus-visible { outline: 2px solid var(--flare); outline-offset: 2px; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.02;
  margin: 0 0 .4em;
  text-transform: uppercase;
}
h1 { font-size: 44px; }
h2 { font-size: 27px; }
h3 { font-size: 19px; }

.eyebrow {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--smoke);
  margin: 0 0 10px;
}
.muted { color: var(--smoke); }
.mono  { font-family: var(--f-mono); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

/* ---------------- Shell ---------------- */
.shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; }

.rail {
  background: linear-gradient(180deg, var(--ash), var(--coal));
  border-right: 1px solid var(--soot);
  padding: 18px 0;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { padding: 0 var(--pad) 18px; display: block; }
.brand b {
  font-family: var(--f-display); font-size: 38px; font-weight: 700;
  letter-spacing: .04em; display: block; line-height: .9;
  background: var(--gauge); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}
.brand span {
  font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .2em;
  color: var(--smoke); text-transform: uppercase; display: block; margin-top: 4px;
}
.rail-group { padding: 12px var(--pad) 6px; font-family: var(--f-mono);
  font-size: 9.5px; letter-spacing: .2em; color: #6b5c55; text-transform: uppercase; }
.rail a.nav {
  display: flex; align-items: center; gap: 10px;
  padding: 9px var(--pad); color: var(--smoke);
  border-left: 2px solid transparent; font-size: 14px;
}
.rail a.nav:hover { color: var(--steam); background: rgba(255,255,255,.03); }
.rail a.nav.on { color: var(--steam); border-left-color: var(--ember); background: rgba(255,77,28,.08); }
.rail a.nav .ic { width: 16px; text-align: center; opacity: .85; }

.main { padding: 22px 28px 64px; max-width: 1400px; width: 100%; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.topbar .grow { flex: 1; }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  padding: 10px 16px; border-radius: var(--r); border: 1px solid var(--soot);
  background: transparent; color: var(--steam); cursor: pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { border-color: var(--ember); color: var(--steam); }
.btn:active { transform: translateY(1px); }
.btn.hot { background: var(--ember); border-color: var(--ember); color: #1a0b05; font-weight: 600; }
.btn.hot:hover { background: #ff653a; }
.btn.gold { background: var(--flare); border-color: var(--flare); color: #241a00; font-weight: 600; }
.btn.ghost { color: var(--smoke); }
.btn.sm { padding: 6px 11px; font-size: 10px; }
.btn[disabled], .btn.locked { opacity: .45; cursor: not-allowed; border-color: var(--soot); color: var(--frost); }

/* ---------------- Panels ---------------- */
.panel {
  background: var(--ash); border: 1px solid var(--soot);
  border-radius: var(--r); padding: 18px;
}
.panel + .panel,
.gauge + .panel, .panel + .gauge,
.grid + .panel, .grid + .gauge,
.gauge + .gauge, .cards + .panel { margin-top: 16px; }
.panel-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.panel-head h3 { margin: 0; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.split > *, .grid > * { min-width: 0; }

/* ---------------- Stat blocks ---------------- */
.stat { background: var(--ash); border: 1px solid var(--soot); border-radius: var(--r); padding: 15px 16px; }
.stat .k { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--smoke); }
.stat .v { font-family: var(--f-display); font-size: 34px; line-height: 1.05; margin-top: 6px; }
.stat .d { font-size: 12px; color: var(--smoke); margin-top: 2px; }
.stat.hot .v { color: var(--ember); }

/* ---------------- The heat gauge (signature) ---------------- */
.gauge { background: var(--ash); border: 1px solid var(--soot); border-radius: var(--r); padding: 22px; }
.gauge-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.gauge-temp { font-family: var(--f-display); font-size: 84px; line-height: .82; letter-spacing: -.01em; }
.gauge-temp sup { font-size: 26px; vertical-align: super; color: var(--smoke); }
.gauge-state { font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.gauge-state.cold { color: var(--frost); }
.gauge-state.warm { color: var(--flare); }
.gauge-state.hot  { color: var(--ember); }

.rods { margin-top: 22px; display: grid; gap: 16px; }
.rod-label { display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--smoke); margin-bottom: 7px; }
.rod-label b { color: var(--steam); font-family: var(--f-display); font-size: 17px; letter-spacing: .02em; }
.rod-track { height: 10px; background: #100c0b; border: 1px solid var(--soot);
  border-radius: 20px; overflow: hidden; position: relative; }
.rod-fill { height: 100%; width: 0; background: var(--gauge);
  border-radius: 20px; transition: width .7s cubic-bezier(.2,.8,.2,1); }
.rod-fill.cold { background: var(--frost); }
.rod-note { font-size: 12px; color: var(--smoke); margin-top: 6px; }

/* ---------------- Channel cards ---------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 18px; }
.card { border: 1px solid var(--soot); border-radius: var(--r); background: var(--ash); overflow: hidden; display: block; }
.card:hover { border-color: var(--ember); }
.card .thumb { aspect-ratio: 16/9; background: #0d0a09 center/cover no-repeat; position: relative; display: block; }
.card .thumb::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(20,16,15,.9)); }
.card .meta { display: block; padding: 12px 13px 14px; }
.card .meta .t { font-weight: 600; font-size: 14.5px; display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .meta .u { font-family: var(--f-mono); font-size: 11px; color: var(--smoke); margin-top: 3px; display: block; }
.card .meta .c { font-size: 12px; color: var(--flare); margin-top: 6px; }

.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--live); box-shadow: 0 0 0 0 rgba(255,45,85,.7); animation: pulse 2s infinite; }
@keyframes pulse {
  70%  { box-shadow: 0 0 0 8px rgba(255,45,85,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,45,85,0); }
}
.tag {
  position: absolute; z-index: 2; font-family: var(--f-mono);
  font-size: 9.5px; letter-spacing: .12em; padding: 4px 7px; border-radius: 2px;
}
.tag.live { top: 9px; left: 9px; background: var(--live); color: #fff; font-weight: 600; }
.tag.viewers { bottom: 9px; left: 9px; background: rgba(0,0,0,.66); color: var(--steam); }
.tag.heat { top: 9px; right: 9px; background: var(--gauge); color: #1a0b05; font-weight: 700; }

/* ---------------- Theatre (channel page) ---------------- */
.theatre { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 0;
  border: 1px solid var(--soot); border-radius: var(--r); overflow: hidden; }
.stage { background: #000; position: relative; }
.stage video { width: 100%; aspect-ratio: 16/9; display: block; background: #000; }
.stage-off { aspect-ratio: 16/9; display: grid; place-content: center; text-align: center;
  background: var(--ash); gap: 6px; padding: 20px; }
.stage-bar { display: flex; align-items: center; gap: 14px; padding: 13px 16px;
  background: var(--ash); border-top: 1px solid var(--soot); flex-wrap: wrap; }
.stage-bar .who { flex: 1; min-width: 180px; }
.stage-bar .who .n { font-family: var(--f-display); font-size: 22px; }
.stage-bar .who .s { font-size: 13px; color: var(--smoke); }

/* ---------------- Chat ---------------- */
.chat { display: flex; flex-direction: column; background: var(--ash);
  border-left: 1px solid var(--soot); height: 640px; }
.chat-head { padding: 11px 14px; border-bottom: 1px solid var(--soot);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--smoke); display: flex; justify-content: space-between; }
.chat-log { flex: 1; overflow-y: auto; padding: 10px 13px; font-size: 14px; }
.chat-log .line { margin-bottom: 7px; word-wrap: break-word; }
.chat-log .line .nm { font-weight: 600; color: var(--flare); }
.chat-log .line .nm.creator { color: var(--ember); }
.chat-log .line .nm.sub { color: #78c7ff; }
.chat-log .line .nm.staff { color: #9dff8f; }
.chat-log .sys { color: var(--smoke); font-size: 12.5px; font-style: italic; margin-bottom: 7px; }
.chat-foot { border-top: 1px solid var(--soot); padding: 11px; }
.chat-foot .row { display: flex; gap: 7px; }

/* ---------------- Forms ---------------- */
label.fl { display: block; font-family: var(--f-mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--smoke); margin: 0 0 6px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=url], select, textarea {
  width: 100%; background: #100c0b; border: 1px solid var(--soot); color: var(--steam);
  border-radius: var(--r); padding: 10px 12px; font-family: var(--f-body); font-size: 14px;
}
input:focus, select:focus, textarea:focus { border-color: var(--ember); outline: none; }
textarea { min-height: 96px; resize: vertical; }
.field { margin-bottom: 14px; }
.hint { font-size: 12px; color: var(--smoke); margin-top: 5px; }

.notice { border-left: 2px solid var(--flare); background: rgba(255,192,46,.07);
  padding: 11px 14px; border-radius: var(--r); font-size: 14px; margin-bottom: 16px; }
.notice.bad { border-left-color: var(--live); background: rgba(255,45,85,.08); }
.notice.good { border-left-color: #6ddc7a; background: rgba(109,220,122,.08); }

/* ---------------- Tables ---------------- */
table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.t th { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--smoke); text-align: left;
  padding: 9px 10px; border-bottom: 1px solid var(--soot); white-space: nowrap; }
table.t td { padding: 10px; border-bottom: 1px solid rgba(43,35,32,.6); vertical-align: middle; }
table.t tr:hover td { background: rgba(255,255,255,.02); }
table.t td.num { font-family: var(--f-mono); text-align: right; }

.pill { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 20px;
  border: 1px solid var(--soot); color: var(--smoke); display: inline-block; }
.pill.on { border-color: var(--ember); color: var(--ember); }
.pill.ok { border-color: #6ddc7a; color: #6ddc7a; }
.pill.warn { border-color: var(--flare); color: var(--flare); }
.pill.cold { border-color: var(--frost); color: var(--frost); }

.key {
  font-family: var(--f-mono); font-size: 12.5px; background: #100c0b;
  border: 1px dashed var(--soot); border-radius: var(--r); padding: 10px 12px;
  display: flex; justify-content: space-between; gap: 10px; align-items: center; word-break: break-all;
}

.empty { text-align: center; padding: 48px 20px; border: 1px dashed var(--soot); border-radius: var(--r); }
.empty h3 { color: var(--steam); }
.empty p { color: var(--smoke); margin: 0 0 16px; }

hr.rule { border: 0; border-top: 1px solid var(--soot); margin: 22px 0; }

/* ---------------- Auth pages ---------------- */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 30px 18px; }
.gate .box { width: 100%; max-width: 400px; }
.gate .brand { padding: 0 0 22px; text-align: center; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1040px) {
  .theatre { grid-template-columns: 1fr; }
  .chat { border-left: 0; border-top: 1px solid var(--soot); height: 420px; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .theatre > * { min-width: 0; }
}
@media (max-width: 760px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; height: auto; min-width: 0; max-width: 100vw;
    display: flex; align-items: center; gap: 4px; overflow-x: auto;
    -webkit-overflow-scrolling: touch; padding: 10px;
    border-right: 0; border-bottom: 1px solid var(--soot); }
  .rail .brand { padding: 0 12px 0 6px; }
  .rail .brand b { font-size: 26px; }
  .rail .brand span, .rail-group { display: none; }
  .rail a.nav { border-left: 0; border-bottom: 2px solid transparent; padding: 7px 10px; white-space: nowrap; }
  .rail a.nav.on { border-left: 0; border-bottom-color: var(--ember); }
  .main { padding: 16px 14px 56px; }
  h1 { font-size: 32px; }
  .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); }
  .gauge-temp { font-size: 62px; }
  /* Wide ledgers scroll inside their panel instead of pushing the page sideways. */
  table.t { display: block; overflow-x: auto; white-space: nowrap; }
  .topbar { gap: 10px; }
  .stage-bar { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}