:root {
  --bg: #0e0f12;
  --panel: #17191e;
  --text: #eceef2;
  --muted: #8a8f9a;
  --accent: #3d7eff;
  --green: #2fbf71;
  --amber: #e7a33e;
  --red: #e5484d;
  --summary: #1d2a44;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 17px/1.45 -apple-system, system-ui, sans-serif;
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
#status { flex: 1; font-weight: 600; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--muted); }
.dot.live { background: var(--green); box-shadow: 0 0 10px var(--green); }
.dot.connecting { background: var(--amber); }
.dot.error { background: var(--red); }
.dot.paused { background: var(--amber); }
#reason { margin: 0 16px 8px; font: 12px/1.3 ui-monospace, monospace; color: var(--red); word-break: break-word; }
#banner { margin: 0 16px 8px; padding: 10px 12px; border-radius: 10px; background: var(--red); color: #fff; font-weight: 600; }

main { flex: 1; overflow-y: auto; padding: 4px 16px 16px; }
.hint { color: var(--muted); }
.turn { margin: 0 0 14px; }
.turn .da { color: var(--muted); font-size: 14px; margin: 0 0 2px; }
.turn .fa { font-family: Vazirmatn, system-ui, sans-serif; font-size: 20px; margin: 0; }
.turn.candidate { opacity: .45; }
.turn.candidate .who { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.turn.summary { background: var(--summary); border-radius: 12px; padding: 10px 12px; }
.turn.summary .fa { font-weight: 700; font-size: 22px; }

footer { padding: 8px 16px 12px; background: var(--panel); }
.controls { display: flex; gap: 10px; }
button { font: inherit; border: 0; border-radius: 14px; padding: 16px; cursor: pointer; }
button:disabled { opacity: .4; }
.primary { flex: 2; background: var(--accent); color: #fff; font-weight: 700; font-size: 20px; }
.primary.stop { background: var(--red); }
.secondary { flex: 1; background: #2a2e37; color: var(--text); font-weight: 600; font-size: 18px; }
.secondary.on { background: var(--amber); color: #111; }
.ghost { background: transparent; color: var(--muted); padding: 6px 10px; }
details { margin-bottom: 10px; color: var(--muted); }
summary { padding: 6px 0; }
details label { display: block; margin: 10px 0; color: var(--text); font-size: 15px; }
details input[type=range] { width: 100%; }
output { color: var(--muted); float: right; }

dialog { border: 0; border-radius: 16px; background: var(--panel); color: var(--text); width: min(92vw, 360px); }
dialog::backdrop { background: rgba(0,0,0,.6); }
dialog input { width: 100%; font-size: 18px; padding: 12px; border-radius: 10px; border: 1px solid #333; background: #0b0c0f; color: var(--text); margin: 8px 0 12px; }
dialog .primary { width: 100%; }