:root {
  color-scheme: dark;
  --ink: #e8edf3;
  --muted: #9aa6b3;
  --board: #101720;
  --panel: #161f2b;
  --line: #2b3848;
  --flame: #ff5c00;
  --flame-dark: #c24500;
  --green: #19c37d;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 0, rgba(255, 92, 0, .16), transparent 28rem),
    #0b1118;
  font: 16px/1.55 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.card {
  width: min(100%, 620px);
  border: 1px solid var(--line);
  border-left: 5px solid var(--flame);
  border-radius: 16px;
  padding: clamp(24px, 6vw, 40px);
  background: var(--panel);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .38);
}
.eyebrow, .panel-kicker, .session-note {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  letter-spacing: .09em;
}
.eyebrow, .panel-kicker { margin: 0 0 10px; color: var(--flame); font-weight: 800; }
h1 { margin: 0; color: #fff; font-size: clamp(30px, 7vw, 48px); line-height: 1.02; letter-spacing: -.035em; }
h2 { margin: 0 0 7px; color: #fff; font-size: 19px; }
p { margin: 0; }
.status-line { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-weight: 700; }
.detail { margin-top: 8px; color: var(--muted); font-size: 14px; }
.spinner {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 2px solid #526174;
  border-top-color: var(--flame);
  border-radius: 50%;
  animation: spin 900ms linear infinite;
}
.spinner.done { border-color: var(--green); background: var(--green); animation: none; }
.spinner.stopped { border-color: #7b8794; animation: none; }
.token-panel, .action-panel {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 18px;
  background: #111a25;
}
.token-panel { border-color: rgba(255, 92, 0, .65); }
.token-panel p, .action-panel p { color: var(--muted); font-size: 13px; }
code {
  display: block;
  margin: 14px 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 12px;
  color: #fff;
  background: #0b1118;
  font: 12px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
  overflow-wrap: anywhere;
  user-select: all;
}
.button {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font: 700 12px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-decoration: none;
  cursor: pointer;
}
.button:disabled { opacity: .55; cursor: wait; }
.button-light { color: #101720; background: #fff; }
.button-flame { margin-top: 14px; background: var(--flame); box-shadow: 0 3px 0 var(--flame-dark); }
.button-ghost { border: 1px solid var(--line); background: transparent; }
.actions { margin-top: 26px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.home-link { color: #ff8b4c; text-underline-offset: 4px; }
.mini { min-height: 18px; margin-top: 8px !important; }
.session-note { margin-top: 18px; color: #708093; line-height: 1.55; }
[hidden] { display: none !important; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }