/* Alpha Assistant shell — the wrapper is invisible once the application is running.
   Black structure, old gold for brand/primary only. No inline styles, so the CSP needs no
   'unsafe-inline'. */
:root {
  --black: #000000;
  --charcoal: #1A1A1A;
  --paper: #F7F5EF;
  --gold: #CFB53B;
  --muted: #A9A69C;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--black); color: var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; }
iframe { border: 0; display: block; width: 100%; height: 100vh; height: 100dvh; background: var(--black); }
iframe[hidden] { display: none; }

.screen { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: calc(28px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom)); }
.screen[hidden] { display: none; }
.mark { border-radius: 20px; }
.wordmark { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: .3px; }
h1 { margin: 6px 0 0; font-size: 22px; color: var(--gold); }
.lede { margin: 0; max-width: 34ch; color: var(--muted); font-size: 15px; line-height: 1.55; }
.retry { margin-top: 10px; background: var(--gold); color: #1A1400; font: inherit; font-weight: 700;
  border: 0; border-radius: 12px; padding: 14px 22px; min-height: 44px; cursor: pointer; }
.retry:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

.spinner { width: 18px; height: 18px; margin: 4px 0 0; border: 2px solid rgba(207, 181, 59, .25);
  border-top-color: var(--gold); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }