:root {
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --focus-ring: 0 0 0 4px rgba(23, 123, 112, .22);
  --shadow-soft: 0 12px 32px rgba(22, 49, 69, .08);
  --muted: #627283;
  color-scheme: light;
}

html { scroll-behavior: smooth; }
body { min-width: 320px; overflow-x: hidden; }
.auth-gate { background: #eef6f6; }
.auth-gate-card .eyebrow { color: #627283; }
.auth-gate-card input:focus, .auth-gate-card input:focus-visible { outline: 3px solid #0f625b; outline-offset: 2px; box-shadow: none; }
.skip-link { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 12px; }
button, input, select, textarea { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, dialog:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.button { min-height: 46px; border-radius: var(--radius-sm); transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease; }
.button:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(22, 49, 69, .10); }
.button:active { transform: translateY(0); }
.button:disabled { cursor: not-allowed; opacity: .66; transform: none; box-shadow: none; }
.topbar { min-height: 80px; padding-block: 16px; box-shadow: 0 2px 0 rgba(255,255,255,.12); }
.brand h1 { letter-spacing: -.02em; }
.shell { padding-top: 42px; }
.hero { margin-bottom: 30px; }
.hero h2 { text-wrap: balance; }
.metrics { border-radius: var(--radius-md); box-shadow: var(--shadow-soft); overflow: hidden; }
.metrics div { min-height: 92px; display: grid; align-content: center; }
.metrics strong { font-variant-numeric: tabular-nums; }
.toolbar { border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.toolbar label { color: var(--ink); }
.toolbar select, .toolbar input, .dialog-card input, .review-note { min-height: 48px; border-radius: var(--radius-sm); }
.toolbar select:focus-visible, .toolbar input:focus-visible, .dialog-card input:focus-visible, .review-note:focus-visible { outline: 0; border-color: var(--teal); box-shadow: var(--focus-ring); }
.dialog-card input:focus-visible { outline: 3px solid #0f625b; outline-offset: 2px; box-shadow: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.notice { min-height: 24px; }
.state-group { border-radius: var(--radius-md); box-shadow: 0 6px 18px rgba(22, 49, 69, .05); }
.state-heading { padding-block: 16px; }
.state-heading .eyebrow { margin-bottom: 2px; }
.state-heading h3 { margin: 0; }
.group-count { font-variant-numeric: tabular-nums; }
.store-row { min-height: 78px; }
.store-primary { min-width: 0; }
.store-row .button { min-width: 76px; }
.status { min-height: 28px; align-items: center; }
.empty { border-radius: var(--radius-md); }

/* Desktop: right-side detail drawer. Mobile: full-screen detail panel. */
#detailDialog { width: min(560px, 100vw); height: 100dvh; max-width: none; max-height: none; margin: 0 0 0 auto; overflow: hidden; }
#detailDialog .detail-card { width: 100%; height: 100%; max-height: none; border-radius: var(--radius-lg) 0 0 var(--radius-lg); padding: 32px; overflow-y: auto; overscroll-behavior: contain; box-shadow: -18px 0 60px rgba(17, 35, 49, .18); }
#detailDialog .detail-header { padding-right: 42px; }
#detailDialog .dialog-close { right: 20px; top: 18px; width: 44px; height: 44px; }
#detailDialog .detail-grid { gap: 12px; }
#detailDialog .review-panel { border-radius: var(--radius-md); padding: 20px; }
#detailDialog .review-actions { gap: 10px; }
#detailDialog .links .button { min-height: 44px; }
.choice { min-height: 46px; border-radius: var(--radius-sm); }
.review-note { min-height: 120px; }

@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --paper: #1b2b34; --bg: #10242e; --ink: #edf5f5; --muted: #b3c4c9; --line: #38515b; --navy: #0d1d25; --shadow-soft: 0 12px 32px rgba(0,0,0,.28); }
  body { background: var(--bg); color: var(--ink); }
  .auth-gate { background: #10242e; }
  .auth-gate-card { background: #1b2b34; border-color: #38515b; }
  .auth-gate-card input { background: #213740; color: var(--ink); border-color: #53707a; }
  .auth-gate-story, .auth-gate-story h2, .auth-story-stats strong, .auth-gate-brand h2, .auth-flow-heading h2 { color: #edf5f5; }
  .auth-story-kicker { color: #6ad6c7; }
  .auth-gate-card .eyebrow { color: #b3c4c9; }
  .auth-gate-card .auth-link { color: #b3e9e2; }
  .toolbar select, .toolbar input, .dialog-card input, .review-note, .button, .choice { background: #213740; color: var(--ink); border-color: #53707a; }
  .state-heading, .detail-field, .review-panel, .import-preview { background: #20343d; }
  .dialog-card { background: #1b2b34; }
}

@media (forced-colors: active) {
  .auth-gate, .auth-gate-card, .dialog-card, .state-group, .toolbar, .metrics { background: Canvas; color: CanvasText; border-color: CanvasText; }
  .topbar { background: CanvasText; color: Canvas; }
  .brand-mark, .button.primary, .auth-sent-icon { forced-color-adjust: none; background: CanvasText; color: Canvas; border-color: CanvasText; }
  .button, .choice, .auth-gate-card input, .toolbar input, .toolbar select, .review-note { background: Canvas; color: CanvasText; border-color: CanvasText; }
  .status { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
}

@media (max-width: 780px) {
  #detailDialog { width: 100vw; }
  #detailDialog .detail-card { border-radius: 0; padding: 24px 18px; }
  .shell { padding-top: 28px; }
}

@media (max-width: 520px) {
  .topbar { padding-inline: 14px; }
  .shell { width: min(100% - 24px, 1240px); }
  .metrics div { min-height: 78px; }
  .store-row { min-height: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}