/* Inspector Scanner — full-screen mobile-first camera UI
 * Design tokens follow the Inspector Scanner Design System (claude.ai/design).
 * Legacy var names at the bottom of :root are retained as aliases so existing
 * selectors keep working during the remodel — migrate to the semantic names
 * (--fg-1, --fg-muted, --surface-1, --accent-press, --radius-lg, etc.) when
 * touching a section.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ===== Surfaces ===== */
  --bg: #000;                   /* top of stack, under camera */
  --bg-deep: #020617;           /* bottom of full-surface gradient */
  --bg-soft: #0b1220;           /* top of full-surface gradient */
  --surface-1: #0f172a;         /* raised surface, sheet fill */
  --surface-2: #1e293b;         /* raised surface, lighter */
  --surface-raised: rgba(255,255,255,0.04);
  --surface-inset: rgba(255,255,255,0.06);

  /* ===== Foreground ===== */
  --fg-1: #f8fafc;              /* primary text / icon */
  --fg-2: #cbd5e1;              /* secondary text */
  --fg-muted: #94a3b8;          /* helper / labels */
  --fg-disabled: rgba(248,250,252,0.35);

  /* ===== Brand ===== */
  --accent: #3b82f6;
  --accent-hover: #60a5fa;
  --accent-press: #2563eb;
  --accent-tint: rgba(59,130,246,0.14);
  --accent-tint-strong: rgba(59,130,246,0.25);
  --accent-border: rgba(59,130,246,0.4);

  /* ===== Status ===== */
  --ok: #10b981;
  --ok-tint: rgba(16,185,129,0.18);
  --ok-border: rgba(16,185,129,0.35);
  --warn: #f59e0b;
  --warn-tint: rgba(245,158,11,0.18);
  --warn-border: rgba(245,158,11,0.45);
  --err: #ef4444;
  --err-tint: rgba(239,68,68,0.18);
  --err-border: rgba(239,68,68,0.5);

  /* ===== Borders ===== */
  --border-subtle: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.12);
  --border-strong: rgba(255,255,255,0.22);

  /* ===== Radii ===== */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* ===== Spacing (4px grid) ===== */
  --space-1: 4px;  --space-2: 6px;  --space-3: 8px;  --space-4: 10px;
  --space-5: 12px; --space-6: 14px; --space-7: 18px; --space-8: 20px;
  --space-9: 22px; --space-10: 28px;

  /* ===== Elevation ===== */
  --shadow-card: 0 10px 30px rgba(0,0,0,0.45);
  --shadow-sheet-up: 0 -8px 32px rgba(0,0,0,0.5);
  --shadow-drawer: -8px 0 32px rgba(0,0,0,0.6);
  --shadow-press: 0 1px 3px rgba(0,0,0,0.3);

  /* ===== Blur (chrome over camera) ===== */
  --blur-chrome: blur(12px);
  --blur-hud: blur(8px);
  --blur-mask: blur(4px);
  --blur-backdrop: blur(2px);

  /* ===== Type ===== */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs: 11px; --text-sm: 12px; --text-base: 13px; --text-md: 14px;
  --text-lg: 15px; --text-xl: 16px; --text-2xl: 18px; --text-3xl: 20px;
  --text-4xl: 22px; --text-5xl: 28px;
  --weight-regular: 400; --weight-medium: 500;
  --weight-semibold: 600; --weight-bold: 700;
  --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.4; --lh-relaxed: 1.55;

  /* ===== Motion ===== */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 220ms;

  /* ===== Safe-area ===== */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ===== Legacy aliases (DO NOT add new uses) ===== */
  --surface: var(--surface-1);
  --fg: var(--fg-1);
  --muted: var(--fg-muted);
  --accent-dark: var(--accent-press);
  --radius: var(--radius-lg);
  --shadow: var(--shadow-card);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Ensure the [hidden] attribute beats display:flex/grid on our overlays. */
[hidden] { display: none !important; }

/* Until the user is confirmed signed in, hide everything except the auth gate.
   Prevents a flash of the camera/tabs UI before Firebase Auth resolves. */
body:not(.signed-in) .top-bar,
body:not(.signed-in) .mode-tabs,
body:not(.signed-in) .view,
body:not(.signed-in) .result-overlay,
body:not(.signed-in) .history-sheet,
body:not(.signed-in) .busy-mask {
  display: none !important;
}
body.signed-in #auth-gate { display: none !important; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  line-height: var(--lh-normal);
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { display: flex; flex-direction: column; min-height: 100vh; }

/* ----- Top bar ----- */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Top padding = iOS safe-area inset (~47px on notch phones) + extra
     breathing room so the title sits well clear of the status bar / notch.
     env() with a fallback covers cases where --safe-top isn't honored. */
  padding: calc(env(safe-area-inset-top, 12px) + 16px) 14px 12px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  z-index: 30;
}
.top-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
}
.top-mark { display: block; flex-shrink: 0; }
.top-actions { display: flex; gap: 4px; align-items: center; }
.icon-btn {
  background: transparent;
  color: var(--fg);
  border: none;
  padding: 8px;
  border-radius: 999px;
  display: inline-flex;
  cursor: pointer;
}
.icon-btn:active { background: rgba(255,255,255,0.12); }

/* Camera on/off toggle in the top bar */
.cam-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.cam-toggle-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.75);
}
.cam-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.cam-toggle-track {
  width: 40px;
  height: 22px;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  position: relative;
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.cam-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.cam-toggle input:checked ~ .cam-toggle-track { background: #2a78ff; }
.cam-toggle input:checked ~ .cam-toggle-track .cam-toggle-thumb { transform: translateX(18px); }
.cam-toggle:active .cam-toggle-thumb { width: 22px; }

/* Bottom-of-screen variant — persistent camera on/off control.
   Sits below the shutter row, above the iOS home bar. Higher z-index
   than .camera-idle (7) so it stays tappable while the idle overlay is up. */
.cam-toggle-bottom {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--safe-bottom) + 112px); /* above the 76px shutter + padding */
  z-index: 10;
  padding: 8px 14px 8px 16px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: var(--blur-hud);
  -webkit-backdrop-filter: var(--blur-hud);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-press);
}
.cam-toggle-bottom .cam-toggle-label {
  color: var(--fg-1);
  font-size: var(--text-md);
}

/* Back-arrow + label on account / admin pages */
a.icon-btn { text-decoration: none; }
.back-btn {
  width: auto !important;
  padding: 8px 14px 8px 8px !important;
  border-radius: 999px;
  gap: 4px;
  color: var(--fg);
}
.back-btn .back-label {
  font-size: 14px;
  font-weight: 500;
}

/* ----- Mode tabs ----- */
.mode-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 25;
}
.mode-tab {
  flex: 1;
  padding: 10px 12px;
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 10px;
  font: inherit;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mode-tab.is-active {
  background: rgba(59,130,246,0.18);
  color: var(--fg);
  border-color: rgba(59,130,246,0.55);
}

/* ----- Views ----- */
.view {
  display: none;
  flex: 1;
  min-height: 0;
  position: relative;
}
.view.is-active { display: flex; }

/* ----- Live camera ----- */
.live-view { background: #000; }
.camera-stage {
  position: relative;
  flex: 1;
  width: 100%;
  overflow: hidden;
}
#video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #000;
  display: block;
}

/* Center viewfinder — corner brackets, no dark vignette.
   Portrait rectangle stretching between the tabs (top) and the camera toggle
   (bottom). The capture samples exactly the pixels inside these brackets,
   mapped back to the video's native resolution. */
.reticle {
  position: absolute;
  /* Centered vertically within the visible camera area:
     top offset clears the sharpness HUD (~12px + 40px + ~40px breathing room);
     bottom offset clears the Camera toggle (~152px) + matching breathing room.
     Equal breathing room on both sides, so the rectangle reads as centered
     between the live camera's visible top and the toggle — not the screen. */
  top: 92px;
  bottom: calc(var(--safe-bottom) + 172px);
  left: 4vw;
  right: 4vw;
  pointer-events: none;
}
.reticle-inner {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  /* soft blue pulse — subtle, shows the camera is "live" */
  box-shadow: 0 0 24px rgba(59,130,246,0.18) inset;
  animation: reticle-pulse 2.2s ease-in-out infinite;
}
/* Four L-shaped corner brackets (DSLR viewfinder motif). */
.reticle::before, .reticle::after,
.reticle-inner::before, .reticle-inner::after {
  content: '';
  position: absolute;
  width: 32px; height: 32px;
  border-color: rgba(255,255,255,0.88);
  border-style: solid;
  border-width: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55));
}
.reticle::before       { top: 0;    left: 0;  border-top-width: 3px;    border-left-width: 3px;  border-top-left-radius:  var(--radius-md); }
.reticle::after        { top: 0;    right: 0; border-top-width: 3px;    border-right-width: 3px; border-top-right-radius: var(--radius-md); }
.reticle-inner::before { bottom: 0; left: 0;  border-bottom-width: 3px; border-left-width: 3px;  border-bottom-left-radius:  var(--radius-md); }
.reticle-inner::after  { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: var(--radius-md); }
@keyframes reticle-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(59,130,246,0.10) inset; }
  50%      { box-shadow: 0 0 32px rgba(59,130,246,0.35) inset; }
}

/* Sharpness HUD */
.sharpness-hud {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 14px;
  background: rgba(0,0,0,0.5);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-align: center;
  min-width: 170px;
  pointer-events: none;
  z-index: 5;
}
.sharpness-bar {
  height: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 6px;
}
.sharpness-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--err), var(--warn), var(--ok));
  transition: width 0.12s linear;
}
.sharpness-label { font-size: 12px; color: var(--muted); letter-spacing: 0.02em; }
.sharpness-label.is-ready { color: var(--ok); font-weight: 600; }

/* Freeze-and-tap — native iOS only. Two views share one full-screen overlay:
   the "Detected" card is the calm primary UI, and the pill picker is a
   per-field fallback the user opens by tapping a chip. */
.freeze-tap-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #0b0f1a;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.ft-card-view,
.ft-picker-view {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Card view */
.ft-thumb-wrap {
  flex: 0 0 auto;
  margin: 12px 16px 0;
  display: flex;
  justify-content: center;
}
.ft-thumb-img {
  width: 100%;
  max-width: 300px;
  max-height: 180px;
  object-fit: contain;
  border-radius: 10px;
  background: #000;
}
.ft-card-header {
  padding: 14px 16px 2px;
  text-align: center;
}
.ft-card-header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}
.ft-status {
  margin: 4px 0 0;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.01em;
}
.ft-fields {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 16px 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ft-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  color: #fff;
  font: 600 14px/1.2 -apple-system, system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.ft-field:active { background: rgba(255,255,255,0.10); }
.ft-field .ft-field-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  flex: 0 0 auto;
  min-width: 70px;
}
.ft-field .ft-field-value {
  flex: 1 1 auto;
  text-align: right;
  font: 600 15px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #fff;
  word-break: break-all;
}
.ft-field.is-empty .ft-field-value {
  color: rgba(255,255,255,0.35);
  font-style: italic;
  font-family: -apple-system, system-ui, sans-serif;
}
.ft-field.is-filled {
  border-color: rgba(255, 204, 0, 0.5);
  background: rgba(255, 204, 0, 0.08);
}
.ft-field.is-filled .ft-field-value { color: #ffcc00; }

/* Picker view */
.ft-header {
  flex: 0 0 auto;
  padding: 12px 16px;
  text-align: center;
}
.ft-prompt {
  display: inline-block;
  background: rgba(255,255,255,0.08);
  color: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.ft-prompt b { color: #ffcc00; font-weight: 700; letter-spacing: 0.08em; }
.ft-body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 8px 12px;
}
.ft-stage {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
.ft-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 8px;
}
.ft-pills {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ft-pill {
  position: absolute;
  pointer-events: auto;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 4px;
  font: 600 11px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
  cursor: pointer;
  transform: translateY(-2px);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.ft-pill:active { background: rgba(0,0,0,0.8); }
.ft-pill.is-model {
  background: #ffcc00;
  color: #1a1300;
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.5), 0 2px 8px rgba(0,0,0,0.5);
}
.ft-pill.is-model::before {
  content: 'MODEL';
  display: inline-block;
  font-size: 8px;
  letter-spacing: 0.12em;
  font-weight: 800;
  margin-right: 4px;
  padding: 0 3px;
  border-radius: 2px;
  background: #1a1300;
  color: #ffcc00;
  vertical-align: 1px;
}
.ft-pill.is-serial {
  background: var(--ok, #34c759);
  color: #042b0c;
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(52, 199, 89, 0.45), 0 2px 8px rgba(0,0,0,0.5);
}
.ft-pill.is-serial::before {
  content: 'SERIAL';
  display: inline-block;
  font-size: 8px;
  letter-spacing: 0.12em;
  font-weight: 800;
  margin-right: 4px;
  padding: 0 3px;
  border-radius: 2px;
  background: #042b0c;
  color: var(--ok, #34c759);
  vertical-align: 1px;
}
.ft-footer {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 22px;
}
.ft-btn {
  border: 0;
  padding: 11px 20px;
  border-radius: 999px;
  font: 600 14px/1 -apple-system, system-ui, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.ft-btn-ghost {
  background: rgba(255,255,255,0.10);
  color: #fff;
}
.ft-btn-ghost:active { background: rgba(255,255,255,0.18); }
.ft-btn-primary {
  background: #ffcc00;
  color: #1a1300;
}
.ft-btn-primary:disabled {
  background: rgba(255, 204, 0, 0.25);
  color: rgba(255,255,255,0.45);
  cursor: not-allowed;
}

/* Shutter */
.shutter-row {
  position: absolute;
  bottom: calc(20px + var(--safe-bottom));
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  z-index: 6;
}
.shutter {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 4px solid rgba(255,255,255,0.9);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: transform 0.1s;
}
.shutter::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: white;
  transition: transform 0.1s, background 0.15s;
}
.shutter:active { transform: scale(0.94); }
.shutter:active::after { background: #e2e8f0; }
.shutter.is-auto-ready::after { background: var(--ok); }

.circle-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: var(--fg);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.circle-btn.small { width: 40px; height: 40px; }
.circle-btn:active { background: rgba(255,255,255,0.22); }

/* Idle "Start camera" overlay inside the live stage */
.camera-idle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(180deg, #0b1220 0%, #020617 100%);
  z-index: 7;
}
.camera-idle-inner {
  max-width: 320px;
  width: 100%;
  text-align: center;
  color: var(--fg);
}
.camera-idle-inner svg { color: var(--accent); opacity: 0.9; margin-bottom: 14px; }
.camera-idle-inner h2 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 600;
}
.camera-idle-inner a { color: var(--accent); text-decoration: none; }

/* No-camera fallback inside the live stage */
.no-camera {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: linear-gradient(180deg, #0f172a, #020617);
  z-index: 8;
}
.no-camera .small { color: var(--muted); font-size: 13px; }

/* ----- Upload view ----- */
.upload-view { padding: 18px; display: none; }
.upload-view.is-active { display: flex; }
.upload-drop {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(255,255,255,0.2);
  border-radius: var(--radius);
  cursor: pointer;
  background: rgba(255,255,255,0.02);
  transition: border-color 0.15s, background 0.15s;
}
.upload-drop:active { border-color: var(--accent); background: rgba(59,130,246,0.08); }
.upload-drop-inner { text-align: center; padding: 40px 20px; }
.upload-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(59,130,246,0.15);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 34px; font-weight: 300;
  margin-bottom: 14px;
}
.upload-label { font-size: 15px; font-weight: 500; margin-bottom: 6px; }
.hint { color: var(--muted); font-size: 13px; }

/* ----- Buttons ----- */
button.primary-button, button.secondary-button {
  font: inherit;
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 500;
}
.primary-button { background: var(--accent); color: white; }
.primary-button:active { background: var(--accent-dark); }
.secondary-button {
  background: rgba(255,255,255,0.1);
  color: var(--fg);
  border-color: rgba(255,255,255,0.12);
}
.secondary-button:active { background: rgba(255,255,255,0.18); }

/* ----- Result overlay ----- */
.result-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
}
.result-backdrop {
  position: absolute;
  inset: 0;
  background: #000;
}
#result-image {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.35;
  filter: blur(2px);
}
.result-sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 82vh;
  overflow-y: auto;
  padding: 10px 18px calc(24px + var(--safe-bottom));
  background: linear-gradient(180deg, rgba(15,23,42,0.96), rgba(15,23,42,1));
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
  color: var(--fg);
  animation: sheet-up 0.22s ease-out;
}
@keyframes sheet-up {
  from { transform: translateY(40%); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
.result-sheet-grip {
  width: 48px; height: 4px;
  background: rgba(255,255,255,0.25);
  border-radius: 2px;
  margin: 6px auto 14px;
}
.result-actions {
  display: flex; gap: 8px;
  margin-top: 14px;
}
.result-actions > button { flex: 1; }

.brand-chip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.brand-name { font-weight: 600; font-size: 16px; }
.brand-cat {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: rgba(255,255,255,0.06);
  padding: 3px 8px;
  border-radius: 999px;
}
.alt-brands { font-size: 12px; color: var(--muted); margin: -2px 0 12px; }
.alt-brands a { color: var(--accent); text-decoration: none; }

.result-main { text-align: center; padding: 8px 0 14px; }
.result-date { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.result-age  { font-size: 16px; color: var(--muted); margin-top: 6px; font-weight: 600; }
.result-age.age-good { color: var(--ok); }
.result-age.age-warn { color: var(--warn); }
.result-age.age-bad  { color: var(--err); }
.result-meta { margin-top: 8px; font-size: 12px; color: var(--muted); }

/* Equipment type / service-life chip */
.equip-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  margin-top: 6px;
  font-size: 13px;
}
.equip-name    { font-weight: 600; }
.equip-typical { color: var(--muted); }
.equip-state {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.equip-state-good { background: rgba(16,185,129,0.18); color: var(--ok);   border: 1px solid rgba(16,185,129,0.35); }
.equip-state-warn { background: rgba(245,158,11,0.18); color: var(--warn); border: 1px solid rgba(245,158,11,0.4);  }
.equip-state-bad  { background: rgba(239,68,68,0.18);  color: var(--err);  border: 1px solid rgba(239,68,68,0.4);   }

/* Retry prompt — shown when scan can't extract enough info to proceed */
.retry-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 14px;
}
.retry-banner h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.retry-banner p  { margin: 0; font-size: 14px; line-height: 1.4; }
.retry-icon { font-size: 32px; flex-shrink: 0; line-height: 1; }
.retry-high {
  background: rgba(239,68,68,0.18);
  border: 1px solid rgba(239,68,68,0.5);
}
.retry-high h2 { color: #fecaca; }
.retry-medium {
  background: rgba(245,158,11,0.14);
  border: 1px solid rgba(245,158,11,0.45);
}
.retry-medium h2 { color: #fde68a; }
.retry-tips {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.retry-tips li {
  padding: 6px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg);
  border-top: 1px solid var(--border);
}
.retry-tips li:first-child { border-top: none; }
.retry-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.retry-actions button { padding: 14px 20px; font-size: 15px; }

/* High-severity watch-for banner */
.warn-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.4);
  margin-bottom: 12px;
}
.warn-banner-icon { font-size: 22px; flex-shrink: 0; line-height: 1; margin-top: 2px; }
.warn-banner-title { font-weight: 700; font-size: 13px; color: #fecaca; text-transform: uppercase; letter-spacing: 0.04em; }
.warn-banner-text  { margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--fg); }
.warn-banner-more  { margin-top: 6px; font-size: 12px; color: var(--muted); font-style: italic; }

/* Shared container for collapsible blocks */
.notes-block {
  margin-top: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
}
.notes-block > summary {
  color: var(--fg);
  font-weight: 500;
  font-size: 14px;
  padding: 4px 0;
  list-style: none;
}
.notes-block > summary::-webkit-details-marker { display: none; }
.notes-block > summary::before { content: '▸'; margin-right: 8px; color: var(--muted); transition: transform 0.15s; display: inline-block; }
.notes-block[open] > summary::before { transform: rotate(90deg); }

/* Capacity */
.cap-rule { padding: 8px 0; border-top: 1px solid var(--border); }
.cap-rule:first-of-type { border-top: none; }
.cap-rule-line { font-size: 13px; margin-bottom: 4px; }
.cap-map { font-family: var(--font-mono); color: var(--muted); line-height: 1.6; }

/* Contact / lookup chips row */
.contact-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(59,130,246,0.14);
  border: 1px solid rgba(59,130,246,0.4);
  border-radius: 999px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.chip-btn:active { background: rgba(59,130,246,0.25); }
.chip-btn-lookup { background: rgba(16,185,129,0.14); border-color: rgba(16,185,129,0.35); color: var(--ok); }

/* Technical notes list */
.notes-list { list-style: none; margin: 8px 0 0; padding: 0; }
.note-item {
  display: flex;
  gap: 10px;
  padding: 10px 4px;
  border-top: 1px solid var(--border);
  align-items: flex-start;
}
.note-item:first-child { border-top: none; }
.note-icon { flex-shrink: 0; font-size: 16px; margin-top: 1px; }
.note-body { flex: 1; min-width: 0; }
.note-cat { margin-bottom: 3px; }
.note-text { font-size: 13px; line-height: 1.45; color: var(--fg); }
.note-sev-high .note-icon { filter: drop-shadow(0 0 3px rgba(239,68,68,0.55)); }
.note-sev-high .note-cat { color: #fecaca; }
.note-sev-medium .note-cat { color: #fde68a; }

/* "Save as image" preview modal (iOS only — long-press to save) */
.image-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0,0,0,0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  gap: 16px;
}
.image-preview-hint {
  color: var(--fg);
  font-size: 14px;
  text-align: center;
  padding: 10px 14px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
}
.image-preview-img {
  max-width: 100%;
  max-height: 60vh;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  display: block;
}
.image-preview-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  max-height: 75vh;
  width: 100%;
  align-items: center;
}
.image-preview-item { width: 100%; max-width: 440px; text-align: center; }
.image-preview-label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.image-preview-close { min-width: 140px; }

/* Account page — API keys header row */
.keys-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.keys-header-text { flex: 1; min-width: 0; }
.keys-header #new-key-btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 520px) {
  .keys-header { flex-direction: column; align-items: stretch; gap: 14px; }
  .keys-header #new-key-btn { width: 100%; padding: 14px 20px; font-size: 15px; }
}

/* Anchor-as-button — match button padding/line-height exactly */
a.secondary-button,
a.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  line-height: 1.2;
  text-decoration: none;
}
a.secondary-button.wide,
a.primary-button.wide { width: 100%; }

.muted { color: var(--muted); }
.small { font-size: 13px; }
.warn  { color: var(--warn); }
.err   { color: var(--err); margin-top: 0; }

code {
  background: rgba(255,255,255,0.08);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.92em;
}
pre.rawtext {
  background: rgba(255,255,255,0.04);
  padding: 10px;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
  color: var(--fg-muted);
}

details { margin-top: 12px; }
details summary { cursor: pointer; color: var(--accent); font-size: 13px; }

.debug { margin-top: 16px; }
.debug summary { font-size: 11px; color: var(--muted); }
#debug-json {
  font-size: 11px;
  max-height: 260px;
  overflow: auto;
  background: #020617;
  color: #cbd5e1;
  padding: 12px;
  border-radius: 8px;
  margin-top: 8px;
}

/* ----- History sheet ----- */
.history-sheet {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(92vw, 420px);
  background: linear-gradient(180deg, #0f172a, #020617);
  z-index: 70;
  padding: calc(10px + var(--safe-top)) 14px calc(14px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  box-shadow: -8px 0 32px rgba(0,0,0,0.6);
  animation: sheet-in 0.2s ease-out;
}
@keyframes sheet-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.history-header { display: flex; justify-content: space-between; align-items: center; }
.history-header h2 { margin: 0; font-size: 16px; font-weight: 600; }
.history-list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
}
.history-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  padding: 12px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.history-item:active { background: rgba(255,255,255,0.05); }
.history-item + .history-item { border-top: 1px solid var(--border); }
.history-brand { font-weight: 600; font-size: 14px; }
.history-date  { font-size: 13px; color: var(--muted); text-align: right; }
.history-serial {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--muted);
  grid-column: 1 / -1;
}
.history-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 32px 10px; }

/* ----- Auth gate ----- */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(180deg, #0b1220 0%, #020617 100%);
  overflow-y: auto;
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 22px;
  box-shadow: var(--shadow);
}
.auth-mark {
  display: block;
  margin: 0 auto 12px;
}
.auth-title {
  font-size: var(--text-4xl);
  font-weight: var(--weight-semibold);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  text-align: center;
}
.auth-sub {
  text-align: center;
  color: var(--muted);
  margin: 0 0 22px;
  font-size: 14px;
}
.auth-field {
  display: block;
  margin-bottom: 14px;
}
.auth-field > span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.auth-field input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--fg);
  font: inherit;
  font-size: 16px; /* 16px prevents iOS auto-zoom */
}
.auth-field input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  background: rgba(255,255,255,0.08);
}
.auth-error {
  background: rgba(239,68,68,0.12);
  color: #fecaca;
  border: 1px solid rgba(239,68,68,0.35);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin: 0 0 12px;
}
.auth-toggle {
  margin: 16px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
.auth-toggle a { color: var(--accent); text-decoration: none; }
.auth-sep { margin: 0 8px; color: rgba(255,255,255,0.2); }

/* Account sheet content */
.account-body { margin-top: 20px; }
.account-email {
  font-size: 15px;
  font-weight: 500;
  margin: 4px 0 16px;
  word-break: break-all;
}

/* ----- Busy mask ----- */
.busy-mask {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 80;
  color: var(--fg);
}
.spinner {
  width: 32px; height: 32px;
  border: 3px solid rgba(255,255,255,0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }