:root { color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { --canvas: #141517; --surface: #1c1d20; --subtle: #212226; --hairline: #2e3035; --border-strong: #41444b; --ink: #eceef0; --ink-2: #b7bbc2; --ink-3: #959aa3; --q-accent: #3c72a8; --q-accent-dark: #4a82ba; --critical: #f0907c; --positive: #7fc493; } }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--canvas); color: var(--ink); font-family: var(--font-sans); }
.am-start { width: 100%; max-width: 480px; padding: 16px; box-sizing: border-box; }
.am-start-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px; padding: 32px 24px; }
.am-start h1 { margin: 0 0 8px; font-size: 22px; line-height: 1.25; font-weight: 600; color: var(--ink); }
.am-start p { margin: 0 0 16px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.am-start form { margin: 0 0 12px; }
.am-start label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.am-start input[type=text], .am-start input[type=email], .am-start select { width: 100%; box-sizing: border-box; height: 40px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; margin-bottom: 4px; }
.am-start input.am-start-code { font-size: 22px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.am-start-field { margin-bottom: 14px; }
.am-start-hint { margin: 0 !important; font-size: 12px !important; color: var(--ink-3) !important; min-height: 16px; }
.am-start-hint.am-start-bad { color: var(--critical) !important; }
.am-start-hint.am-start-good { color: var(--positive) !important; }
.am-start-row { display: flex; gap: 12px; }
.am-start-row > div { flex: 1; min-width: 0; }
.am-start-choice { display: flex; gap: 16px; align-items: center; min-height: 40px; }
.am-start-choice label { display: inline-flex; align-items: center; gap: 6px; margin: 0; min-height: 40px; font-size: 14px; color: var(--ink); }
.am-start-choice input { width: 18px; height: 18px; margin: 0; }
.am-start input:focus-visible, .am-start select:focus-visible, .am-start button:focus-visible, .am-start a:focus-visible { outline: 2px solid var(--q-accent); outline-offset: 2px; }
.am-start button, .am-start a.am-start-btn { display: block; box-sizing: border-box; width: 100%; min-height: 40px; line-height: 38px; text-align: center; text-decoration: none; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; margin-top: 8px; }
.am-start button:hover, .am-start a.am-start-btn:hover { background: var(--subtle); }
.am-start button.am-start-primary, .am-start a.am-start-primary { background: var(--q-accent); border-color: var(--q-accent); color: #fff; }
.am-start button.am-start-primary:hover, .am-start a.am-start-primary:hover { background: var(--q-accent-dark); }
.am-start-note { padding: 10px 12px; border: 1px solid var(--hairline); border-left: 3px solid var(--q-accent); border-radius: 6px; background: var(--subtle); margin-bottom: 16px; }
.am-start-note p { margin: 0; }
.am-start-err { border-left-color: var(--critical); }
.am-start a { color: var(--q-accent); font-size: 14px; }
.am-start a.am-start-btn { color: var(--ink); }
.am-start a.am-start-primary { color: #fff; }
.am-start-foot { margin-top: 16px; font-size: 12px; color: var(--ink-3); text-align: center; }
.am-start [hidden] { display: none !important; }