:root {
  --bg: #07070a;
  --panel: #131319;
  --panel-2: #1c1c24;
  --line: #2a2a35;
  --text: #e8e4dc;
  --muted: #8b8798;
  --accent: #e8a33d;
  --accent-dim: #6b4d1c;
  --danger: #b04a3a;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.wrap { max-width: 520px; margin: 0 auto; padding: 18px 18px 40px; }

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

button, .btn {
  font: inherit;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  user-select: none;
  transition: transform 60ms ease, background 120ms ease;
}
button:active, .btn:active { transform: scale(0.97); background: #262630; }
button:disabled { opacity: 0.4; }

.btn-accent { background: var(--accent-dim); border-color: #8a6526; }
.btn-danger { background: #331914; border-color: #5c2b22; color: #f0b6a9; }

a { color: var(--accent); }

.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--muted);
  vertical-align: middle;
  transition: background 200ms ease;
}
.dot.live { background: #4caf6a; }
.dot.off { background: var(--danger); }