/* FalconPay brand tokens (extracted from the FalconPay app's color reference:
   Navy #1F3864 / Sky Blue #4A90D9 core brand, semantic + neutral scales for
   light and dark mode). */
:root {
  --navy: #1F3864;
  --navy-2: #162d52;
  --navy-3: #0f1f3a;
  --sky: #4A90D9;
  --sky-dark: #5b9fd4;

  --success: #27ae60;
  --danger: #e74c3c;
  --warning: #f39c12;

  --bg: #eef0f5;
  --surface: #ffffff;
  --surface-alt: #f0f4ff;
  --text: #1a202c;
  --text-muted: #718096;
  --border: #e2e8f0;
  --input-border: #cbd5e0;

  --radius: 14px;
  --radius-lg: 20px;
  --shadow: 0 2px 8px rgba(0,0,0,.04), 0 4px 24px rgba(0,0,0,.06);

  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --navy: #5b9fd4;
    --sky: #5b9fd4;
    --success: #2ecc71;
    --danger: #e05252;
    --warning: #e0a030;

    --bg: #14172a;
    --surface: #1e2235;
    --surface-alt: #252c45;
    --text: #dce3f5;
    --text-muted: #7a8aad;
    --border: #2e3858;
    --input-border: #3d4e78;
  }
}

* , *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}

button, input, select {
  font-family: inherit;
}

.app-header {
  background: linear-gradient(160deg, #1F3864 0%, #162d52 60%, #0f1f3a 100%);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: var(--shadow);
}
.btn-start-over {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  flex: none;
}
.btn-start-over:active { background: rgba(255,255,255,.24); }

.header-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.btn-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
}
.btn-back:active { background: rgba(255,255,255,.14); }
.btn-back svg { width: 20px; height: 20px; }
/* `display: flex` above otherwise beats the browser's built-in
   `[hidden] { display: none }` UA rule (author styles always win over UA
   defaults, regardless of specificity) -- without this override the
   `hidden` attribute/property would be silently ignored and the button
   would stay visible no matter what JS sets .hidden to. */
.btn-back[hidden] { display: none; }

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1F3864, #4A90D9);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.brand-mark svg { width: 20px; height: 20px; }
.brand-name { font-size: 15px; font-weight: 800; color: #fff; letter-spacing: -.2px; }
.brand-name b { color: #9cc4ec; }
.brand-sub { font-size: 12px; color: rgba(255,255,255,.7); margin-top: 1px; }

.app-root {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 48px;
}

.screen-header { margin-bottom: 16px; }
.screen-header h2 { font-size: 20px; font-weight: 800; margin: 0 0 4px; letter-spacing: -.3px; }
.hint { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.5; }

.screen-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  padding: 12px 18px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease, opacity .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; }

.btn-primary { background: var(--navy); color: #fff; flex: 1; min-width: 140px; }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-small { font-size: 12px; padding: 7px 10px; border-radius: 8px; background: var(--surface-alt); color: var(--text); border: 1px solid var(--border); }

/* ---- Capture screen ---- */
.camera-aspect {
  position: relative;
  width: 100%;
  /* Fixed aspect ratio -- NOT derived from the camera's negotiated video
     resolution, and deliberately NOT vh-based. Some devices return a very
     tall portrait stream (especially once a high ideal resolution is
     requested), and sizing the container from that directly could overflow
     below the fold. vh units were tried first but are unreliable on iOS
     Safari, whose address bar dynamically shows/hides and changes the
     effective viewport height out from under a height computed at load
     time -- that mismatch is what caused the corners-screen stretching
     bug (see .corners-stage). A fixed aspect-ratio has no such dependency.
     object-fit:cover fills this box regardless of the stream's actual
     aspect; the JS side computes the resulting crop to keep the guide box
     and live-detection overlay aligned with what's actually visible. */
  aspect-ratio: 3 / 4;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.camera-aspect video { width: 100%; height: 100%; object-fit: cover; display: block; }
.guide-box {
  position: absolute;
  border: 2.5px dashed rgba(255,255,255,.85);
  border-radius: 10px;
  box-shadow: 0 0 0 999px rgba(0,0,0,.35);
  pointer-events: none;
}
.focus-ring {
  position: absolute;
  width: 74px; height: 74px;
  margin-left: -37px; margin-top: -37px;
  border: 2px solid #fff;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}
.focus-ring-anim { animation: focusPulse .9s ease-out; }
@keyframes focusPulse {
  0% { opacity: 1; transform: scale(1.4); border-color: var(--sky); }
  55% { opacity: 1; transform: scale(1); border-color: #fff; }
  100% { opacity: 0; transform: scale(1); }
}
.capture-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.flash-anim { animation: flashPop .28s ease-out; }
@keyframes flashPop {
  0% { opacity: .85; }
  100% { opacity: 0; }
}
.shutter-overlay {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: 68px;
  height: 68px;
  flex: 0 0 auto;
  border-radius: 50%;
  padding: 0;
  /* Sits on top of the live video, below the guide box -- translucent
     rather than fully opaque so it still reads as an overlay control. */
  background: rgba(255, 255, 255, .82);
  border: 3px solid rgba(31, 56, 100, .85);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  cursor: pointer;
}
.shutter-overlay:active { transform: translateX(-50%) scale(.92); background: rgba(255, 255, 255, .65); }
/* Upload control -- always in the DOM (see capture.js), doubling as a
   drag-and-drop target for desktop/laptop. */
.upload-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 2px dashed var(--input-border);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.upload-dropzone-active { border-color: var(--sky); background: var(--surface-alt); }
.upload-trigger-icon { color: var(--sky); font-size: 18px; }

/* ---- Corner editor / redact stage ---- */
.corners-stage, .redact-stage {
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  touch-action: none;
  background: #000;
}
.corners-stage {
  /* Same fixed aspect ratio as the camera preview (not vh-based -- see the
     comment on .camera-aspect for why) -- the JS side crops the source
     photo to exactly this aspect, so this screen always feels like the
     same-sized viewfinder instead of growing to match whatever the
     captured photo's own (often much taller) aspect is. */
  aspect-ratio: 3 / 4;
}
.corners-stage canvas, .redact-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* Defense in depth: the JS side crops to exactly match this box's
     aspect, so this is normally a no-op, but object-fit's default (fill)
     would silently stretch/distort the image if that ever drifted out of
     sync -- contain fails safe by letterboxing instead. */
  object-fit: contain;
}
.corners-stage svg, .redact-stage svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.quad-outline { fill: rgba(74,144,217,.18); stroke: var(--sky); stroke-width: .6; vector-effect: non-scaling-stroke; }
.corner-handle {
  /* Hit area is bigger than the visual dot (44x44, Apple HIG's minimum
     touch target) so dragging doesn't require landing exactly on a small
     point -- the dot inside stays modest so it doesn't itself obscure the
     corner it's marking. */
  position: absolute;
  width: 44px; height: 44px;
  margin-left: -22px; margin-top: -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  cursor: grab;
}
.corner-handle-dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--sky);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  pointer-events: none;
}
.redact-draft { fill: rgba(0,0,0,.55); stroke: var(--danger); stroke-width: .6; vector-effect: non-scaling-stroke; }

/* Loupe shown while dragging a corner handle -- fixed positioning so it
   floats above the finger regardless of page scroll (see corners.js). */
.magnifier {
  position: fixed;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
  pointer-events: none;
  z-index: 50;
  background: #000;
}
.magnifier canvas { display: block; width: 100%; height: 100%; }

.redaction-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.redaction-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 12px; font-size: 13px;
}

/* ---- Quality screen ---- */
.quality-preview { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.quality-preview img { display: block; width: 100%; }
.quality-warnings {
  margin: 14px 0 0;
  padding: 12px 16px;
  background: #fdecea;
  border: 1px solid #f5c6cb;
  color: #c0392b;
  border-radius: 10px;
  font-size: 13px;
}
@media (prefers-color-scheme: dark) {
  .quality-warnings { background: rgba(224,82,82,.12); border-color: var(--danger); color: var(--danger); }
}

/* ---- Gallery ---- */
.card-grid { display: flex; flex-direction: column; gap: 16px; }
.card-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.card-tile-media { background: var(--surface-alt); padding: 10px; }
.card-tile-media img {
  width: 100%;
  display: block;
  /* Matches CARD_CORNER_RADIUS_PX / CARD_PX_WIDTH,HEIGHT in constants.js
     so the in-app preview matches the rounded corners baked into exports. */
  border-radius: 3.75% / 5.95%;
}
.card-tile-body { padding: 12px 14px 14px; }
.card-tile-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.card-tile-label { font-weight: 800; font-size: 14px; }
.badge {
  font-size: 11px; font-weight: 700; color: #b45309;
  background: #fef9e7; border: 1px solid #fcd34d;
  border-radius: 999px; padding: 2px 9px;
}
.filter-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.filter-tab {
  font-size: 12px; font-weight: 600; padding: 6px 10px;
  border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-alt); color: var(--text-muted); cursor: pointer;
}
.filter-tab.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.card-tile-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gallery-actions { flex-direction: column; }
.gallery-actions .btn { width: 100%; }

.ocr-result { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 10px; }
.ocr-field { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 3px 0; }
.ocr-field dt { color: var(--text-muted); margin: 0; }
.ocr-field dd { margin: 0; font-family: var(--mono); text-align: right; }
.ocr-loading, .ocr-error, .ocr-empty { font-size: 12.5px; color: var(--text-muted); }
.ocr-error { color: var(--danger); }

/* ---- Export ---- */
.export-field { margin-bottom: 18px; }
.export-field > label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 8px; }
.segmented { display: flex; gap: 6px; }
.seg-btn {
  flex: 1;
  font-size: 13px; font-weight: 700; padding: 10px 8px;
  border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface-alt); color: var(--text-muted); cursor: pointer;
}
.seg-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.export-field select, .export-field input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--input-border);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
}
.export-field input[type="text"] { margin-top: 10px; }
.checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text); }
.checkbox-label input { width: 16px; height: 16px; }

/* ---- Export preview ---- */
.preview-list { display: flex; flex-direction: column; gap: 16px; }
.preview-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.preview-media img { display: block; width: 100%; }
.preview-media-pdf iframe { width: 100%; height: 70vh; border: 0; display: block; background: #525659; }
.preview-filename {
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--text-muted);
  font-family: var(--mono);
  border-top: 1px solid var(--border);
}