:root {
  color-scheme: light;
  --mq-brand-900: #0b2942;
  --mq-brand-800: #0b4a6f;
  --mq-brand-700: #075985;
  --mq-brand-600: #0e7490;
  --mq-brand-100: #cffafe;
  --mq-brand-50: #ecfeff;
  --mq-text: #172033;
  --mq-text-strong: #344054;
  --mq-text-secondary: #475467;
  --mq-text-disabled: #98a2b3;
  --mq-border: #d0d5dd;
  --mq-divider: #eaecf0;
  --mq-surface: #fff;
  --mq-canvas: #f6f8fa;
  --mq-success: #177245;
  --mq-success-bg: #ecfdf3;
  --mq-success-border: #abefc6;
  --mq-warning: #a15c00;
  --mq-warning-bg: #fffaeb;
  --mq-warning-border: #fedf89;
  --mq-danger: #b42318;
  --mq-danger-bg: #fef3f2;
  --mq-danger-border: #fecdca;
  --mq-info: #175cd3;
  --mq-info-bg: #eff8ff;
  --mq-info-border: #b2ddff;
  --mq-radius-sm: 6px;
  --mq-radius-md: 10px;
  --mq-radius-lg: 14px;
  --mq-radius-xl: 20px;
  --mq-shadow: 0 1px 2px rgb(16 24 40 / 6%);
  --mq-focus: 0 0 0 3px rgb(14 116 144 / 24%);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--mq-canvas); }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--mq-text); background: var(--mq-canvas); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: var(--mq-brand-700); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: 28px; line-height: 36px; letter-spacing: -.01em; }
h2 { margin-bottom: 12px; font-size: 22px; line-height: 28px; }
h3 { margin-bottom: 8px; font-size: 18px; line-height: 24px; }
p { margin-bottom: 16px; }
.app-root { min-height: 100vh; }
.boot-screen { min-height: 100vh; display: grid; place-content: center; justify-items: center; padding: 24px; text-align: center; }
.boot-screen p { color: var(--mq-text-secondary); }
.brand-mark { width: 56px; height: 56px; margin-bottom: 16px; display: grid; place-items: center; color: #fff; background: var(--mq-brand-800); border-radius: 16px; font-size: 18px; font-weight: 800; letter-spacing: -.04em; }
.spinner { width: 24px; height: 24px; display: inline-block; border: 3px solid var(--mq-brand-100); border-top-color: var(--mq-brand-600); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.page-shell { min-height: 100vh; padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
.page-shell.focus { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
.app-bar { position: sticky; z-index: 20; top: 0; min-height: calc(56px + env(safe-area-inset-top)); display: flex; align-items: flex-end; gap: 8px; padding: env(safe-area-inset-top) 12px 8px; background: rgb(255 255 255 / 96%); border-bottom: 1px solid var(--mq-divider); box-shadow: var(--mq-shadow); backdrop-filter: blur(12px); }
.app-bar-title { min-width: 0; flex: 1; padding: 6px 4px; }
.app-bar-title strong, .app-bar-title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-bar-title strong { font-size: 17px; line-height: 22px; }
.app-bar-title small { color: var(--mq-text-secondary); font-size: 12px; line-height: 16px; }
.icon-button { width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: var(--mq-radius-md); background: transparent; font-size: 24px; cursor: pointer; }
.icon-button:hover { background: var(--mq-canvas); }
.icon-button:focus-visible, .button:focus-visible, .field:focus-visible, .select:focus-visible, .choice:focus-visible, .nav-item:focus-visible, .tap-target:focus-visible { outline: 0; box-shadow: var(--mq-focus); }
.page-content { width: 100%; max-width: 480px; margin: 0 auto; padding: 20px 16px 28px; }
.page-content.wide { max-width: 720px; }
.eyebrow { margin: 0 0 4px; color: var(--mq-brand-700); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.lead { color: var(--mq-text-secondary); font-size: 17px; line-height: 26px; }
.muted { color: var(--mq-text-secondary); }
.caption { color: var(--mq-text-secondary); font-size: 12px; line-height: 16px; }
.numeric { font-variant-numeric: tabular-nums; }
.section { margin-top: 28px; }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 12px; }
.section-heading h2, .section-heading h3 { margin: 0; }
.stack { display: grid; gap: 12px; }
.cluster { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.split { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.card { padding: 16px; background: var(--mq-surface); border: 1px solid var(--mq-divider); border-radius: var(--mq-radius-lg); }
.card.compact { padding: 12px; }
.selection-card { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px; color: inherit; text-align: left; background: var(--mq-surface); border: 1px solid var(--mq-border); border-radius: var(--mq-radius-lg); cursor: pointer; }
.selection-card:hover { border-color: var(--mq-brand-600); }
.selection-card:focus-visible { outline: 0; border-color: var(--mq-brand-600); box-shadow: var(--mq-focus); }
.selection-card[disabled] { cursor: not-allowed; color: var(--mq-text-disabled); background: var(--mq-canvas); }
.selection-card .card-body { min-width: 0; flex: 1; }
.selection-card strong, .selection-card small { display: block; }
.selection-card small { margin-top: 3px; color: var(--mq-text-secondary); }
.selection-card[disabled] small { color: var(--mq-text-disabled); }
.card-icon { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; color: var(--mq-brand-800); background: var(--mq-brand-50); border-radius: 12px; font-size: 20px; font-weight: 800; }
.card-arrow { color: var(--mq-text-disabled); font-size: 20px; }

.field-group { display: grid; gap: 6px; }
.field-label { color: var(--mq-text-strong); font-size: 14px; line-height: 20px; font-weight: 650; }
.field, .select, .textarea { width: 100%; min-height: 48px; padding: 11px 12px; color: var(--mq-text); background: var(--mq-surface); border: 1px solid var(--mq-border); border-radius: var(--mq-radius-md); }
.textarea { min-height: 92px; resize: vertical; }
.field::placeholder, .textarea::placeholder { color: var(--mq-text-disabled); }
.field:focus, .select:focus, .textarea:focus { outline: 0; border-color: var(--mq-brand-600); box-shadow: var(--mq-focus); }
.field[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--mq-danger); }
.field-help { margin: 0; color: var(--mq-text-secondary); font-size: 12px; line-height: 16px; }
.field-error { margin: 0; color: var(--mq-danger); font-size: 13px; line-height: 18px; }
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; background: var(--mq-canvas); border-radius: 12px; }
.choice { min-height: 44px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.choice.selected { color: var(--mq-brand-800); background: var(--mq-surface); box-shadow: 0 1px 3px rgb(16 24 40 / 12%); font-weight: 700; }

.button { min-height: 48px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid transparent; border-radius: var(--mq-radius-md); font-weight: 700; line-height: 20px; text-decoration: none; cursor: pointer; }
.button.full { width: 100%; }
.button.primary { color: #fff; background: var(--mq-brand-600); }
.button.primary:hover { background: var(--mq-brand-700); }
.button.secondary { color: var(--mq-brand-800); background: var(--mq-surface); border-color: var(--mq-brand-600); }
.button.tertiary { color: var(--mq-brand-700); background: transparent; }
.button.danger { color: #fff; background: var(--mq-danger); }
.button.danger-outline { color: var(--mq-danger); background: var(--mq-surface); border-color: var(--mq-danger-border); }
.button[disabled] { color: var(--mq-text-disabled); background: var(--mq-divider); border-color: var(--mq-divider); cursor: not-allowed; }
.action-stack { display: grid; gap: 10px; }
.action-bar { position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); background: rgb(255 255 255 / 97%); border-top: 1px solid var(--mq-divider); backdrop-filter: blur(12px); }
.action-bar-inner { max-width: 480px; margin: 0 auto; }

.bottom-nav { position: fixed; z-index: 25; right: 0; bottom: 0; left: 0; min-height: calc(64px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 6px env(safe-area-inset-bottom); background: rgb(255 255 255 / 97%); border-top: 1px solid var(--mq-divider); backdrop-filter: blur(12px); }
.nav-item { min-height: 54px; position: relative; display: grid; place-content: center; justify-items: center; gap: 1px; padding: 4px; color: var(--mq-text-secondary); border: 0; border-radius: 10px; background: transparent; font-size: 11px; cursor: pointer; }
.nav-item .nav-icon { font-size: 19px; line-height: 22px; }
.nav-item.active { color: var(--mq-brand-700); background: var(--mq-brand-50); font-weight: 700; }
.nav-badge { position: absolute; top: 2px; left: calc(50% + 7px); min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; color: #fff; background: var(--mq-danger); border: 2px solid #fff; border-radius: 999px; font-size: 10px; }

.banner { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-bottom: 1px solid; font-size: 13px; line-height: 18px; }
.banner.offline, .status.warning { color: var(--mq-warning); background: var(--mq-warning-bg); border-color: var(--mq-warning-border); }
.banner.info, .status.info { color: var(--mq-info); background: var(--mq-info-bg); border-color: var(--mq-info-border); }
.banner.danger, .status.fail { color: var(--mq-danger); background: var(--mq-danger-bg); border-color: var(--mq-danger-border); }
.status.pass { color: var(--mq-success); background: var(--mq-success-bg); border-color: var(--mq-success-border); }
.status { padding: 14px; border: 1px solid; border-radius: var(--mq-radius-lg); }
.status-title { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-weight: 750; }
.status p { margin: 0; color: currentColor; }
.status-row { min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--mq-divider); }
.status-row:last-child { border-bottom: 0; }
.status-row .status-label { min-width: 0; flex: 1; }
.status-row strong, .status-row small { display: block; }
.status-row small { color: var(--mq-text-secondary); }
.status-symbol { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; font-weight: 800; }
.status-symbol.pass { color: var(--mq-success); background: var(--mq-success-bg); }
.status-symbol.warning { color: var(--mq-warning); background: var(--mq-warning-bg); }
.status-symbol.fail { color: var(--mq-danger); background: var(--mq-danger-bg); }
.chip { min-height: 24px; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; color: var(--mq-text-secondary); background: var(--mq-canvas); border: 1px solid var(--mq-divider); border-radius: 999px; font-size: 12px; line-height: 18px; font-weight: 650; }
.chip.pass { color: var(--mq-success); background: var(--mq-success-bg); border-color: var(--mq-success-border); }
.chip.warning { color: var(--mq-warning); background: var(--mq-warning-bg); border-color: var(--mq-warning-border); }
.chip.fail { color: var(--mq-danger); background: var(--mq-danger-bg); border-color: var(--mq-danger-border); }

.login-shell { min-height: 100vh; display: grid; align-items: center; padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, var(--mq-brand-50), var(--mq-canvas) 38%); }
.login-panel { width: 100%; max-width: 420px; margin: 0 auto; }
.login-brand { margin-bottom: 28px; }
.login-brand .brand-mark { margin-bottom: 18px; }
.login-card { padding: 20px; background: var(--mq-surface); border: 1px solid var(--mq-divider); border-radius: var(--mq-radius-xl); box-shadow: 0 10px 30px rgb(16 24 40 / 8%); }
.version-note { margin: 18px 0 0; text-align: center; color: var(--mq-text-secondary); font-size: 12px; }

.hero-card { padding: 20px; color: #fff; background: linear-gradient(145deg, var(--mq-brand-800), var(--mq-brand-600)); border-radius: 18px; }
.hero-card p { margin: 0; color: rgb(255 255 255 / 82%); }
.hero-card .eyebrow { color: var(--mq-brand-100); }
.hero-card h1 { margin-bottom: 6px; }
.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.metric-card { min-width: 0; padding: 14px; background: var(--mq-surface); border: 1px solid var(--mq-divider); border-radius: var(--mq-radius-lg); }
.metric-card.primary { grid-column: 1 / -1; padding: 18px; background: var(--mq-brand-50); border-color: var(--mq-brand-100); }
.metric-label { display: block; margin-bottom: 4px; color: var(--mq-text-secondary); font-size: 12px; line-height: 16px; }
.metric-value { display: block; font-size: 24px; line-height: 32px; font-weight: 750; font-variant-numeric: tabular-nums; }
.metric-card.primary .metric-value { font-size: 36px; line-height: 44px; color: var(--mq-brand-800); }
.metric-unit { margin-left: 4px; font-size: .55em; font-weight: 650; }

.step-note { margin-bottom: 16px; color: var(--mq-text-secondary); font-size: 13px; }
.instruction-visual { min-height: 180px; display: grid; place-items: center; padding: 24px; background: var(--mq-brand-50); border: 1px solid var(--mq-brand-100); border-radius: 18px; text-align: center; }
.phone-figure { width: 78px; height: 146px; position: relative; border: 6px solid var(--mq-brand-800); border-radius: 16px; background: #fff; box-shadow: 0 10px 24px rgb(11 74 111 / 16%); }
.phone-figure::before { content: ''; width: 24px; height: 4px; position: absolute; top: 5px; left: 21px; background: var(--mq-brand-800); border-radius: 999px; }
.phone-figure::after { content: '↑'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--mq-brand-600); font-size: 38px; font-weight: 800; }
.instruction-list { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.instruction-list li { display: flex; align-items: flex-start; gap: 10px; }
.instruction-list li::before { content: '✓'; width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; color: var(--mq-success); background: var(--mq-success-bg); border-radius: 999px; font-size: 12px; font-weight: 800; }

.recording-screen { min-height: 100vh; display: flex; flex-direction: column; padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); background: #fff; text-align: center; }
.recording-context { color: var(--mq-text-secondary); font-size: 14px; }
.recording-main { flex: 1; display: grid; place-content: center; justify-items: center; width: 100%; max-width: 440px; margin: 0 auto; }
.recording-state { min-height: 30px; display: inline-flex; align-items: center; gap: 8px; color: var(--mq-danger); font-size: 13px; font-weight: 800; letter-spacing: .05em; }
.recording-dot { width: 10px; height: 10px; background: var(--mq-danger); border-radius: 50%; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.recording-timer { margin: 24px 0 8px; font-size: clamp(52px, 17vw, 76px); line-height: 1; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.progress-track { width: min(100%, 320px); height: 10px; overflow: hidden; margin: 16px 0 8px; background: var(--mq-divider); border-radius: 999px; }
.progress-bar { width: 0; height: 100%; background: var(--mq-brand-600); border-radius: inherit; transition: width 180ms linear; }
.recording-instruction { max-width: 320px; margin: 28px 0 0; font-size: 18px; line-height: 28px; }
.recording-footer { width: 100%; max-width: 440px; margin: auto auto 0; }
.countdown { font-size: clamp(96px, 36vw, 160px); line-height: 1; font-weight: 800; color: var(--mq-brand-800); }

.tap-target { width: min(78vw, 320px); aspect-ratio: 1; display: grid; place-items: center; color: #fff; background: var(--mq-brand-600); border: 10px solid var(--mq-brand-100); border-radius: 50%; box-shadow: 0 12px 28px rgb(14 116 144 / 22%); font-size: 22px; font-weight: 800; touch-action: manipulation; user-select: none; }
.tap-target:active { transform: scale(.98); background: var(--mq-brand-700); }
.tap-count { margin: 16px 0 0; font-size: 20px; font-variant-numeric: tabular-nums; }

.chart-card { padding: 14px; background: #fff; border: 1px solid var(--mq-divider); border-radius: var(--mq-radius-lg); }
.chart-card canvas { width: 100%; height: 180px; display: block; }
.chart-title { margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.details { border: 1px solid var(--mq-divider); border-radius: var(--mq-radius-lg); background: #fff; }
.details summary { min-height: 48px; display: flex; align-items: center; padding: 12px 14px; cursor: pointer; font-weight: 700; }
.details-content { padding: 0 14px 14px; }
.key-value { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; margin: 0; }
.key-value dt { color: var(--mq-text-secondary); }
.key-value dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.empty-state { padding: 36px 20px; text-align: center; color: var(--mq-text-secondary); background: var(--mq-surface); border: 1px dashed var(--mq-border); border-radius: var(--mq-radius-lg); }
.empty-state strong { display: block; margin-bottom: 6px; color: var(--mq-text); font-size: 18px; }
.notice { padding: 12px; color: var(--mq-text-secondary); background: var(--mq-canvas); border-radius: var(--mq-radius-md); font-size: 13px; }
.divider { height: 1px; margin: 20px 0; background: var(--mq-divider); border: 0; }
.hidden { display: none !important; }

.toast-region { position: fixed; z-index: 100; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); left: 16px; pointer-events: none; }
.toast { max-width: 440px; margin: 0 auto; padding: 12px 14px; color: #fff; background: var(--mq-text); border-radius: var(--mq-radius-md); box-shadow: 0 8px 20px rgb(16 24 40 / 20%); font-size: 14px; }
.modal-backdrop { position: fixed; z-index: 80; inset: 0; display: grid; align-items: end; padding: 16px; background: rgb(11 41 66 / 54%); }
.modal { width: 100%; max-width: 480px; max-height: min(88vh, 720px); overflow: auto; margin: 0 auto; padding: 20px; background: #fff; border-radius: var(--mq-radius-xl); box-shadow: 0 -8px 24px rgb(16 24 40 / 18%); }

@media (min-width: 480px) {
  .page-content { padding-right: 20px; padding-left: 20px; }
  .modal-backdrop { align-items: center; }
}

@media (min-width: 768px) {
  .bottom-nav { right: auto; top: 0; width: 88px; grid-template-columns: 1fr; grid-template-rows: repeat(4, 74px); padding: 20px 10px; border-top: 0; border-right: 1px solid var(--mq-divider); }
  .page-shell:not(.focus) { padding: 0 0 0 88px; }
  .page-shell:not(.focus) .app-bar { padding-left: 20px; }
  .page-content { max-width: 640px; }
  .page-content.wide { max-width: 960px; }
  .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metric-card.primary { grid-column: auto; }
}

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