/* ── Tokens ──────────────────────────────────────────────────────────── */
:root{
  --navy:#0A1628; --ink:#0F172A; --slate:#475569; --muted:#94A3B8;
  --border:#E2E8F0; --bg:#F0F4FF; --surface:#FFFFFF;
  --blue:#2563EB; --blue-dark:#1D4ED8; --blue-bg:#EFF6FF;
  --green:#059669; --green-bg:#ECFDF5;
  --amber:#D97706; --amber-bg:#FFFBEB;
  --red:#DC2626;   --red-bg:#FEF2F2;
  --purple:#7C3AED;--purple-bg:#F5F3FF;
  --radius:12px;
  --font-display:'Sora',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); -webkit-font-smoothing:antialiased;
}

/* ── Header ──────────────────────────────────────────────────────────── */
.topbar{
  background:var(--navy); color:#fff; padding:16px 24px;
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.brand{ font-family:var(--font-display); font-weight:800; font-size:20px; letter-spacing:-0.02em; }
.brand span{ color:#60A5FA; }
.tagline{ font-size:13px; color:#94A3B8; font-weight:500; }

.container{ max-width:760px; margin:0 auto; padding:28px 20px 60px; }

/* ── Dropzone ────────────────────────────────────────────────────────── */
.dropzone{
  background:var(--surface); border:2px dashed #CBD5E1; border-radius:18px;
  padding:56px 28px; text-align:center; cursor:pointer;
  transition:border-color .2s ease, background .2s ease, transform .15s ease;
}
.dropzone:hover{ border-color:#93C5FD; }
.dropzone:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; }
.dropzone.drag-over{ border-color:var(--blue); background:var(--blue-bg); transform:scale(1.01); }

.dz-icon{ font-size:48px; margin-bottom:14px; }
.dz-title{ font-family:var(--font-display); font-size:22px; font-weight:700; margin:0 0 8px; letter-spacing:-0.01em; }
.dz-sub{ font-size:14px; color:var(--slate); margin:0 0 4px; max-width:420px; margin-inline:auto; line-height:1.5; }
.dz-hint{ font-size:12px; color:var(--muted); margin:6px 0 22px; }

.btn-primary, .btn-secondary{
  font-family:var(--font-body); font-weight:700; font-size:14px;
  border:none; border-radius:9px; cursor:pointer; transition:background .15s ease, transform .1s ease;
}
.btn-primary{
  background:var(--blue); color:#fff; padding:11px 28px; letter-spacing:.01em;
  box-shadow:0 4px 14px rgba(37,99,235,.32);
}
.btn-primary:hover{ background:var(--blue-dark); }
.btn-primary:focus-visible, .btn-secondary:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }
.btn-secondary{
  background:var(--navy); color:#fff; padding:11px 22px; width:100%; margin-top:8px;
}
.btn-secondary:hover{ background:#132339; }

.error-box{
  margin-top:16px; background:var(--red-bg); border:1px solid #FCA5A5; color:var(--red);
  border-radius:10px; padding:12px 16px; font-size:13px; font-weight:500;
}

/* ── Processing state — signature scanning animation ────────────────── */
.processing{ text-align:center; padding:60px 20px; }
.scan-frame{
  position:relative; width:110px; height:130px; margin:0 auto 24px;
  background:var(--surface); border:2px solid var(--border); border-radius:10px;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.scan-icon{ font-size:44px; opacity:.85; }
.scan-line{
  position:absolute; left:0; right:0; height:3px;
  background:linear-gradient(90deg, transparent, var(--blue) 50%, transparent);
  box-shadow:0 0 12px 2px rgba(37,99,235,.55);
  animation:scan 1.8s ease-in-out infinite;
}
@keyframes scan{
  0%{ top:6%; } 50%{ top:88%; } 100%{ top:6%; }
}
.proc-title{ font-family:var(--font-display); font-size:19px; font-weight:700; margin:0 0 6px; }
.proc-sub{ font-size:13px; color:var(--muted); margin:0; }

@media (prefers-reduced-motion: reduce){
  .scan-line{ animation:none; top:50%; }
}

/* ── Result state ────────────────────────────────────────────────────── */
.doc-header{
  display:flex; align-items:center; gap:14px; background:var(--surface);
  border:1px solid var(--border); border-radius:14px; padding:16px 20px; margin-bottom:14px;
}
.doc-badge{
  width:46px; height:46px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:22px;
}
.doc-type{ font-family:var(--font-display); font-size:18px; font-weight:700; letter-spacing:-.01em; }
.doc-confidence{ font-size:12px; color:var(--muted); margin-top:2px; }

.summary-box{
  font-size:14px; color:var(--slate); background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:12px 16px; margin:0 0 16px; line-height:1.5;
}

.fields-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px;
}
.field-card{
  background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 14px;
}
.field-label{ font-size:10.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
.field-value{ font-family:var(--font-body); font-variant-numeric:tabular-nums; font-size:15px; font-weight:700; color:var(--ink); word-break:break-word; }
.field-value.empty{ color:#CBD5E1; font-weight:500; }

.flags-box{
  background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px 18px; margin-bottom:16px;
}
.flags-title{ font-family:var(--font-display); font-size:14px; font-weight:700; margin:0 0 10px; }
.flags-list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.flags-list li{
  font-size:13.5px; color:var(--slate); background:#F8FAFF; border-radius:7px; padding:9px 12px;
  display:flex; gap:8px; line-height:1.4;
}
.flags-list li::before{ content:'→'; color:var(--blue); font-weight:800; flex-shrink:0; }

/* Doc-type badge colors */
.badge-bank    { background:var(--blue-bg);   color:var(--blue); }
.badge-itr     { background:var(--purple-bg); color:var(--purple); }
.badge-salary  { background:var(--green-bg);  color:var(--green); }
.badge-cibil   { background:var(--red-bg);    color:var(--red); }
.badge-loan    { background:var(--amber-bg);  color:var(--amber); }
.badge-other   { background:#F1F5F9;          color:var(--slate); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width:480px){
  .fields-grid{ grid-template-columns:1fr; }
  .dropzone{ padding:40px 18px; }
  .dz-title{ font-size:19px; }
}