/* ═══════════════════════════════════════════
   PaperLess — Design System
   Tone: white & blue · serene · in control
═══════════════════════════════════════════ */

:root {
  --blue-900: #0B1D3A;
  --blue-800: #0F2859;
  --blue-700: #1040A0;
  --blue-600: #1565C0;
  --blue-500: #1E88E5;
  --blue-400: #42A5F5;
  --blue-200: #90CAF9;
  --blue-100: #E3F0FF;
  --blue-50:  #F0F7FF;
  --white:    #FFFFFF;
  --slate-50: #F8FAFC;
  --slate-100:#F1F5F9;
  --slate-200:#E2E8F0;
  --slate-300:#CBD5E1;
  --slate-400:#94A3B8;
  --slate-500:#64748B;
  --slate-700:#334155;
  --slate-900:#0F172A;
  --green:    #059669;
  --green-bg: #ECFDF5;
  --amber:    #D97706;
  --amber-bg: #FFFBEB;
  --red:      #DC2626;
  --red-bg:   #FEF2F2;
  --radius-sm:8px;
  --radius:   12px;
  --radius-lg:18px;
  --radius-xl:24px;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);
  --shadow:   0 4px 16px rgba(11,29,58,0.08),0 1px 4px rgba(11,29,58,0.04);
  --shadow-lg:0 16px 48px rgba(11,29,58,0.13),0 4px 12px rgba(11,29,58,0.06);
  --font-display:'DM Serif Display',Georgia,serif;
  --font-body:   'DM Sans',system-ui,sans-serif;
  --t: 0.18s ease;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }
body { font-family:var(--font-body); background:var(--white); color:var(--slate-900); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { text-decoration:none; color:inherit; }
button { cursor:pointer; font-family:inherit; border:none; background:none; }
input, select { font-family:inherit; }

/* ── Buttons ─────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:0.4rem;
  padding:0.55rem 1.25rem; border-radius:var(--radius-sm);
  font-size:0.875rem; font-weight:500; transition:all var(--t);
  white-space:nowrap; cursor:pointer;
}
.btn-primary {
  background:var(--blue-600); color:var(--white);
  box-shadow:0 1px 4px rgba(21,101,192,0.3);
}
.btn-primary:hover { background:var(--blue-700); transform:translateY(-1px); box-shadow:0 4px 14px rgba(21,101,192,0.35); }
.btn-ghost  { color:var(--slate-600); }
.btn-ghost:hover { background:var(--slate-100); }
.btn-outline { border:1.5px solid var(--slate-200); color:var(--slate-700); background:var(--white); }
.btn-outline:hover { border-color:var(--blue-400); color:var(--blue-600); }
.btn-white  { background:var(--white); color:var(--blue-700); font-weight:600; }
.btn-white:hover { background:var(--blue-50); }
.btn-lg { padding:0.75rem 1.75rem; font-size:1rem; border-radius:var(--radius); }
.btn-full { width:100%; justify-content:center; padding:0.75rem; font-size:0.95rem; }

/* ── Forms ───────────────────────────────── */
.form-group { display:flex; flex-direction:column; gap:0.35rem; }
.form-group label { font-size:0.8rem; font-weight:500; color:var(--slate-700); }
.form-group input, .form-group select {
  padding:0.65rem 0.9rem; border:1.5px solid var(--slate-200);
  border-radius:var(--radius-sm); font-size:0.9rem;
  background:var(--white); color:var(--slate-900);
  transition:border-color var(--t);
}
.form-group input:focus, .form-group select:focus {
  outline:none; border-color:var(--blue-400);
  box-shadow:0 0 0 3px rgba(30,136,229,0.12);
}
.alert { padding:0.75rem 1rem; border-radius:var(--radius-sm); font-size:0.875rem; margin-bottom:1rem; }
.alert-error { background:var(--red-bg); color:var(--red); border:1px solid #FECACA; }

/* ════════════════════════════════════════════
   LANDING
════════════════════════════════════════════ */
.landing { min-height:100vh; }

/* Nav */
.nav {
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:2rem;
  padding:1rem 3rem;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--slate-100);
}
.nav-brand { display:flex; align-items:center; gap:0.6rem; margin-right:auto; }
.nav-logo-mark {
  width:34px; height:34px; border-radius:8px;
  background:var(--blue-600); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:1.1rem; font-weight:700;
}
.nav-logo-text { font-family:var(--font-display); font-size:1.1rem; color:var(--blue-900); }
.nav-links { display:flex; gap:2rem; }
.nav-links a { font-size:0.875rem; color:var(--slate-500); transition:color var(--t); }
.nav-links a:hover { color:var(--blue-600); }
.nav-actions { display:flex; gap:0.75rem; }

/* Hero */
.hero {
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:5rem;
  max-width:1160px; margin:0 auto;
  padding:7rem 3rem 8rem;
}
.hero-badge {
  display:inline-block; padding:0.3rem 0.85rem;
  background:var(--blue-50); color:var(--blue-700);
  border:1px solid var(--blue-100); border-radius:20px;
  font-size:0.8rem; font-weight:500; margin-bottom:1.5rem;
}
.hero-title {
  font-family:var(--font-display);
  font-size:clamp(2.4rem,4vw,3.6rem);
  line-height:1.1; color:var(--blue-900);
  margin-bottom:1.5rem;
}
.hero-title em { color:var(--blue-600); font-style:normal; }
.hero-sub { font-size:1.05rem; color:var(--slate-500); max-width:460px; line-height:1.75; margin-bottom:2rem; }
.hero-ctas { display:flex; gap:1rem; margin-bottom:1rem; }
.hero-note { font-size:0.78rem; color:var(--slate-400); }

/* App card preview */
.hero-visual { display:flex; justify-content:center; }
.app-card {
  width:100%; max-width:380px;
  background:var(--white); border:1px solid var(--slate-200);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.app-card-bar {
  padding:0.75rem 1rem; background:var(--slate-50);
  border-bottom:1px solid var(--slate-100);
  display:flex; gap:0.4rem;
}
.app-card-bar span { width:10px; height:10px; border-radius:50%; background:var(--slate-200); }
.app-card-body { padding:1.5rem; display:flex; flex-direction:column; gap:0.85rem; }
.mini-stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:0.6rem; }
.mini-stat {
  background:var(--slate-50); border-radius:var(--radius-sm);
  padding:0.75rem; display:flex; flex-direction:column; gap:0.2rem;
}
.mini-stat--warn { background:var(--amber-bg); }
.mini-n { font-family:var(--font-display); font-size:1.5rem; color:var(--blue-900); line-height:1; }
.mini-l { font-size:0.7rem; color:var(--slate-400); }
.mini-divider { height:1px; background:var(--slate-100); }
.mini-doc { display:flex; align-items:center; gap:0.7rem; font-size:0.82rem; color:var(--slate-600); }
.mini-doc-icon { width:28px; height:28px; border-radius:6px; flex-shrink:0; }
.mini-doc-icon--id   { background:#DBEAFE; }
.mini-doc-icon--bill { background:#FEF3C7; }
.mini-doc-icon--med  { background:#D1FAE5; }
.mini-doc span { flex:1; }
.mini-pill { padding:0.15rem 0.55rem; border-radius:10px; font-size:0.72rem; font-weight:600; background:var(--slate-100); color:var(--slate-500); }
.mini-pill--warn { background:var(--amber-bg); color:var(--amber); }
.mini-pill--ok   { background:var(--green-bg); color:var(--green); }

/* Sections */
.section-wrap { max-width:1100px; margin:0 auto; padding:0 3rem; }
.section-label { font-size:0.78rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--blue-500); margin-bottom:0.75rem; }
.section-title { font-family:var(--font-display); font-size:clamp(1.9rem,3vw,2.6rem); color:var(--blue-900); margin-bottom:3rem; }

/* How */
.how { padding:7rem 0; background:var(--slate-50); }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.step {
  padding:2rem 1.75rem; background:var(--white);
  border:1px solid var(--slate-100); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.step-num { font-family:var(--font-display); font-size:2.8rem; color:var(--blue-100); line-height:1; margin-bottom:1rem; }
.step h3 { font-size:1rem; font-weight:600; color:var(--blue-900); margin-bottom:0.5rem; }
.step p  { font-size:0.9rem; color:var(--slate-500); line-height:1.7; }

/* Pillars */
.pillars { padding:7rem 0; }
.pillars-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.pillar {
  padding:2rem 1.5rem;
  border:1.5px solid var(--slate-100); border-radius:var(--radius-lg);
  background:var(--white); transition:all var(--t);
}
.pillar:hover { border-color:var(--blue-200); box-shadow:var(--shadow); transform:translateY(-3px); }
.pillar--soon { opacity:0.6; }
.pillar--soon:hover { transform:none; box-shadow:none; }
.pillar-icon {
  width:50px; height:50px; border-radius:var(--radius);
  background:var(--blue-50); color:var(--blue-600);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.25rem;
}
.pillar h3 { font-size:1rem; font-weight:600; color:var(--blue-900); margin-bottom:0.5rem; display:flex; align-items:center; gap:0.5rem; }
.pillar p  { font-size:0.875rem; color:var(--slate-500); line-height:1.65; }
.soon-pill { display:inline-block; padding:0.15rem 0.55rem; background:var(--blue-100); color:var(--blue-700); border-radius:10px; font-size:0.7rem; font-weight:600; }

/* CTA band */
.cta-band { padding:6rem 0; background:linear-gradient(135deg,var(--blue-900),var(--blue-600)); }
.cta-inner { text-align:center; }
.cta-band h2 { font-family:var(--font-display); font-size:2.4rem; color:var(--white); margin-bottom:1rem; }
.cta-band p  { color:rgba(255,255,255,0.7); font-size:1.05rem; margin-bottom:2.5rem; }

/* Footer */
.footer { padding:1.75rem 0; border-top:1px solid var(--slate-100); }
.footer-inner { display:flex; justify-content:space-between; font-size:0.8rem; color:var(--slate-400); }
/* ════════════════════════════════════════════
   AUTH PAGES
════════════════════════════════════════════ */
.auth-page {
  min-height:100vh; display:grid; grid-template-columns:1fr 1fr;
}

.auth-left {
  background:linear-gradient(150deg, var(--blue-900) 0%, var(--blue-700) 100%);
  padding:2.5rem 3rem;
  display:flex; flex-direction:column; gap:3rem;
}
.auth-brand {
  display:flex; align-items:center; gap:0.6rem;
}
.auth-brand .nav-logo-text { color:var(--white); }
.auth-left-body { flex:1; display:flex; flex-direction:column; justify-content:center; gap:2.5rem; }
.auth-left-title {
  font-family:var(--font-display);
  font-size:clamp(2rem,3.5vw,3rem);
  color:var(--white); line-height:1.15;
}
.auth-left-title em { color:var(--blue-200); font-style:normal; }
.auth-features { list-style:none; display:flex; flex-direction:column; gap:0.85rem; }
.auth-features li { color:rgba(255,255,255,0.8); font-size:0.95rem; }

.auth-right {
  display:flex; align-items:center; justify-content:center;
  padding:2rem; background:var(--white);
}
.auth-box { width:100%; max-width:400px; }
.auth-title { font-family:var(--font-display); font-size:2rem; color:var(--blue-900); margin-bottom:0.4rem; }
.auth-sub   { font-size:0.9rem; color:var(--slate-400); margin-bottom:2rem; }
.auth-form  { display:flex; flex-direction:column; gap:1.1rem; }
.auth-switch { text-align:center; font-size:0.875rem; color:var(--slate-500); margin-top:1.25rem; }
.auth-switch a { color:var(--blue-600); font-weight:500; }
.auth-switch a:hover { text-decoration:underline; }
.auth-back {
  display:block; text-align:center;
  font-size:0.8rem; color:var(--slate-400);
  margin-top:1rem; transition:color var(--t);
}
.auth-back:hover { color:var(--blue-600); }
/* ════════════════════════════════════════════
   APP LAYOUT
════════════════════════════════════════════ */
.app-layout {
  display:flex; min-height:100vh;
  background:var(--slate-50);
}

/* Sidebar */
.sidebar {
  width:230px; flex-shrink:0;
  background:var(--white);
  border-right:1px solid var(--slate-100);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
  padding:1.5rem 0;
}
.sidebar-brand {
  display:flex; align-items:center; gap:0.6rem;
  padding:0 1.25rem 1.5rem;
  border-bottom:1px solid var(--slate-100);
}
.sidebar-user {
  display:flex; align-items:center; gap:0.7rem;
  padding:1.25rem;
  border-bottom:1px solid var(--slate-100);
}
.user-avatar {
  width:34px; height:34px; border-radius:50%;
  background:var(--blue-100); color:var(--blue-700);
  display:flex; align-items:center; justify-content:center;
  font-size:0.85rem; font-weight:600; flex-shrink:0;
}
.user-name  { display:block; font-size:0.85rem; font-weight:600; color:var(--slate-800); }
.user-email { display:block; font-size:0.72rem; color:var(--slate-400); }
.sidebar-nav {
  list-style:none; flex:1;
  padding:0.75rem 0;
}
.sidebar-nav li a {
  display:flex; align-items:center; gap:0.7rem;
  padding:0.65rem 1.25rem;
  font-size:0.875rem; color:var(--slate-500);
  transition:all var(--t); position:relative;
}
.sidebar-nav li a:hover { color:var(--blue-700); background:var(--blue-50); }
.sidebar-nav li.active a {
  color:var(--blue-700); font-weight:600;
  background:var(--blue-50);
}
.sidebar-nav li.active a::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--blue-600);
  border-radius:0 2px 2px 0;
}
.nav-soon a { opacity:0.45; pointer-events:none; }
.sidebar-logout {
  display:flex; align-items:center; gap:0.6rem;
  padding:0.85rem 1.25rem;
  font-size:0.82rem; color:var(--slate-400);
  border-top:1px solid var(--slate-100);
  transition:color var(--t);
}
.sidebar-logout:hover { color:var(--red); }

/* Main content */
.app-main {
  flex:1; padding:2.5rem 3rem;
  max-width:1000px;
}
.page-header {
  display:flex; align-items:flex-start;
  justify-content:space-between;
  margin-bottom:2rem; gap:1rem;
}
.page-title { font-family:var(--font-display); font-size:1.8rem; color:var(--blue-900); }
.page-sub   { font-size:0.875rem; color:var(--slate-400); margin-top:0.25rem; }
.page-actions { display:flex; gap:0.75rem; flex-shrink:0; }

/* Stats */
.stats-row {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1rem; margin-bottom:2rem;
}
.stat-card {
  display:flex; align-items:center; gap:1rem;
  background:var(--white); border-radius:var(--radius-lg);
  padding:1.25rem 1.5rem;
  border:1px solid var(--slate-100);
  box-shadow:var(--shadow-sm);
}
.stat-card--warn { border-color:#FED7AA; background:var(--amber-bg); }
.stat-icon {
  width:44px; height:44px; border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.stat-icon--blue  { background:var(--blue-50);  color:var(--blue-600); }
.stat-icon--amber { background:var(--amber-bg); color:var(--amber); }
.stat-icon--green { background:var(--green-bg); color:var(--green); }
.stat-value { display:block; font-family:var(--font-display); font-size:2rem; color:var(--blue-900); line-height:1; }
.stat-label { display:block; font-size:0.78rem; color:var(--slate-400); margin-top:0.2rem; }

/* Pillar cards */
.pillars-row {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1.25rem;
}
.pillar-card {
  background:var(--white);
  border:1.5px solid var(--slate-100);
  border-radius:var(--radius-lg);
  padding:1.75rem 1.5rem;
  display:flex; flex-direction:column; gap:0.4rem;
  transition:all var(--t);
}
.pillar-card:not(.pillar-card--soon):hover {
  border-color:var(--blue-200);
  box-shadow:var(--shadow);
  transform:translateY(-2px);
}
.pillar-card--soon { opacity:0.55; pointer-events:none; }
.pillar-card-icon {
  width:48px; height:48px; border-radius:var(--radius);
  background:var(--blue-50); color:var(--blue-600);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:0.5rem;
}
.pillar-card h3 { font-size:1rem; font-weight:600; color:var(--blue-900); }
.pillar-card p  { font-size:0.82rem; color:var(--slate-400); flex:1; line-height:1.5; }
.pillar-arrow   { font-size:1rem; color:var(--blue-300); margin-top:0.5rem; }
/* ════════════════════════════════════════════
   VAULT
════════════════════════════════════════════ */
.cat-tabs {
  display:flex; gap:0.4rem; flex-wrap:wrap; margin-bottom:1.75rem;
}
.cat-tab {
  padding:0.4rem 0.9rem; border-radius:20px;
  font-size:0.8rem; color:var(--slate-500);
  border:1px solid var(--slate-200); background:var(--white);
  transition:all var(--t);
}
.cat-tab:hover { border-color:var(--blue-300); color:var(--blue-600); }
.cat-tab.active { background:var(--blue-600); color:var(--white); border-color:var(--blue-600); }
.cat-tab--archive { color:var(--slate-400); font-style:italic; }

.docs-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
  gap:1rem;
}
.doc-card {
  background:var(--white); border:1px solid var(--slate-100);
  border-radius:var(--radius-lg); padding:1.25rem;
  display:flex; flex-direction:column; gap:0.75rem;
  box-shadow:var(--shadow-sm); transition:all var(--t);
}
.doc-card:hover { box-shadow:var(--shadow); border-color:var(--slate-200); }
.doc-card--archived { opacity:0.6; }
.doc-card-top {
  display:flex; align-items:center; justify-content:space-between;
}
.doc-icon {
  width:38px; height:38px; border-radius:var(--radius-sm);
  background:var(--blue-50); color:var(--blue-500);
  display:flex; align-items:center; justify-content:center;
}
.doc-card-actions { display:flex; gap:0.4rem; }
.doc-action {
  width:28px; height:28px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  color:var(--slate-400); background:var(--slate-50);
  font-size:0.78rem; transition:all var(--t);
}
.doc-action:hover { background:var(--slate-100); color:var(--slate-700); }
.btn-delete:hover { background:var(--red-bg) !important; color:var(--red) !important; }
.doc-name { font-size:0.9rem; font-weight:500; color:var(--slate-800); }
.doc-cat-badge {
  display:inline-block; padding:0.15rem 0.55rem;
  background:var(--slate-100); color:var(--slate-500);
  border-radius:10px; font-size:0.72rem;
}
.doc-expiry { font-size:0.78rem; display:block; margin-top:0.2rem; }
.doc-expiry--ok       { color:var(--green); }
.doc-expiry--warn     { color:var(--amber); }
.doc-expiry--critical { color:var(--red); font-weight:600; }
.doc-expiry--overdue  { color:var(--red); font-weight:700; }

.empty-state {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:1rem;
  padding:5rem 2rem; text-align:center;
  color:var(--slate-400); font-size:0.9rem;
}

/* ════════════════════════════════════════════
   MODAL
════════════════════════════════════════════ */
.modal-overlay {
  display:none; position:fixed; inset:0; z-index:1000;
  background:rgba(11,29,58,0.5);
  backdrop-filter:blur(6px);
  align-items:center; justify-content:center; padding:1rem;
}
.modal-overlay[style*="flex"] { display:flex; }
.modal {
  background:var(--white); border-radius:var(--radius-xl);
  width:100%; max-width:640px; max-height:92vh; overflow-y:auto;
  box-shadow:var(--shadow-lg);
}
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem 1.75rem 1rem;
  border-bottom:1px solid var(--slate-100);
}
.modal-header h2 { font-family:var(--font-display); font-size:1.3rem; color:var(--blue-900); }
.modal-close {
  width:30px; height:30px; border-radius:50%;
  background:var(--slate-100); color:var(--slate-500);
  font-size:0.8rem; display:flex; align-items:center; justify-content:center;
}
.modal-close:hover { background:var(--slate-200); }

.source-tabs {
  display:flex; border-bottom:1px solid var(--slate-100);
  padding:0 1.75rem;
}
.source-tab {
  display:flex; align-items:center; gap:0.5rem;
  padding:0.9rem 1.25rem; font-size:0.875rem; font-weight:500;
  color:var(--slate-400); border-bottom:2px solid transparent;
  margin-bottom:-1px; transition:all var(--t);
}
.source-tab:hover { color:var(--blue-600); }
.source-tab.active { color:var(--blue-600); border-bottom-color:var(--blue-600); }

.tab-panel { display:none; padding:1.5rem 1.75rem; }
.tab-panel.active { display:block; }

.drop-zone {
  border:2px dashed var(--slate-200); border-radius:var(--radius-lg);
  padding:2.5rem 2rem; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:0.6rem;
  color:var(--slate-400); font-size:0.875rem; cursor:pointer;
  transition:all var(--t);
}
.drop-zone:hover, .drop-zone.drag-over { border-color:var(--blue-400); background:var(--blue-50); }
.drop-hint { font-size:0.75rem; color:var(--slate-300); }

/* Crop */
.crop-hint { font-size:0.82rem; color:var(--slate-400); text-align:center; margin-bottom:0.75rem; }
.crop-wrap {
  position:relative; width:100%; background:#111;
  border-radius:var(--radius); overflow:hidden; user-select:none;
}
.crop-wrap img { width:100%; display:block; }
.crop-svg { position:absolute; inset:0; width:100%; height:100%; }
.crop-handle { cursor:move; }
.crop-actions {
  display:flex; justify-content:flex-end; gap:0.75rem; margin-top:1rem;
}

/* Camera */
.cam-wrap {
  position:relative; background:#000;
  border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3;
}
.cam-wrap video { width:100%; height:100%; object-fit:cover; display:block; }
.cam-ring {
  position:absolute; bottom:1rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:0.3rem;
}
.cam-ring span { font-size:0.72rem; color:rgba(255,255,255,0.6); }
.cam-btns {
  position:absolute; bottom:1rem; right:1rem;
  display:flex; flex-direction:column; align-items:center; gap:0.75rem;
}
.btn-shutter {
  width:54px; height:54px; border-radius:50%;
  background:rgba(255,255,255,0.2);
  border:3px solid rgba(255,255,255,0.8);
  transition:all var(--t);
}
.btn-shutter:hover { background:rgba(255,255,255,0.35); }
.btn-shutter:active { transform:scale(0.92); }
.cam-auto-label { font-size:0.75rem; color:rgba(255,255,255,0.7); display:flex; align-items:center; gap:0.3rem; cursor:pointer; }

/* Meta form */
.meta-wrap {
  display:flex; gap:1.5rem; padding:1.5rem 1.75rem 0;
}
.meta-wrap canvas {
  border-radius:var(--radius-sm); border:1px solid var(--slate-200);
  flex-shrink:0;
}
.meta-fields { flex:1; display:flex; flex-direction:column; gap:1rem; }
.meta-actions {
  display:flex; justify-content:flex-end; gap:0.75rem;
  padding:1.25rem 1.75rem 1.5rem;
}
/* ════════════════════════════════════════════
   DEADLINES
════════════════════════════════════════════ */
.dl-group { margin-bottom:2.5rem; }

.dl-group-title {
  font-size:0.78rem; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase;
  display:flex; align-items:center; gap:0.5rem;
  margin-bottom:0.75rem;
}
.dl-group-title--red   { color:var(--red); }
.dl-group-title--amber { color:var(--amber); }
.dl-group-title--blue  { color:var(--blue-600); }
.dl-group-title--grey  { color:var(--slate-400); }

.dl-count {
  padding:0.1rem 0.5rem; border-radius:10px;
  background:var(--slate-100); color:var(--slate-500);
  font-size:0.72rem; font-weight:600;
}

.dl-list { display:flex; flex-direction:column; gap:0.5rem; }

.dl-item {
  display:flex; align-items:center; gap:1rem;
  background:var(--white); border:1px solid var(--slate-100);
  border-radius:var(--radius); padding:1rem 1.25rem;
  box-shadow:var(--shadow-sm);
}
.dl-item--red   { border-left:3px solid var(--red); }
.dl-item--amber { border-left:3px solid var(--amber); }
.dl-item--blue  { border-left:3px solid var(--blue-500); }
.dl-item--grey  { border-left:3px solid var(--slate-200); }

.dl-left {
  display:flex; align-items:center; gap:0.75rem; flex:1;
}
.dl-icon {
  width:34px; height:34px; border-radius:var(--radius-sm);
  background:var(--slate-50); color:var(--slate-400);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.dl-name { font-size:0.9rem; font-weight:500; color:var(--slate-800); }
.dl-cat  { font-size:0.75rem; color:var(--slate-400); }

.dl-center {
  display:flex; flex-direction:column; align-items:flex-end;
  gap:0.2rem; min-width:110px;
}
.dl-date { font-size:0.75rem; color:var(--slate-400); }

.dl-actions { display:flex; gap:0.5rem; }

.days-chip {
  padding:0.2rem 0.65rem; border-radius:10px;
  font-size:0.78rem; font-weight:600;
}
.days-chip--red   { background:var(--red-bg);   color:var(--red); }
.days-chip--amber { background:var(--amber-bg); color:var(--amber); }
.days-chip--blue  { background:var(--blue-50);  color:var(--blue-600); }
.days-chip--grey  { background:var(--slate-100);color:var(--slate-500); }
/* ── Logo image ──────────────────────────── */
.nav-logo-img {
  height: 52px;
  width: auto;
  display: block;
  object-fit: contain;
}

.auth-left .nav-logo-img {
  height: 56px;
}

.sidebar-brand .nav-logo-img {
  height: 44px;
}
/* ════════════════════════════════════════════
   MOBILE RESPONSIVE
════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Nav ─────────────────────────────────── */
  .nav {
    padding: 0.75rem 1.25rem;
  }
  .nav-links {
    display: none;
  }
  .nav-actions {
    gap: 0.5rem;
  }
  .nav-actions .btn-ghost {
    display: none;
  }

  /* ── Hero ────────────────────────────────── */
  .hero {
    grid-template-columns: 1fr;
    padding: 3rem 1.25rem 4rem;
    gap: 3rem;
    text-align: center;
  }
  .hero-sub {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-ctas {
    justify-content: center;
  }
  .hero-visual {
    order: -1;
  }
  .app-card {
    max-width: 100%;
  }

  /* ── How ─────────────────────────────────── */
  .how { padding: 4rem 0; }
  .section-wrap { padding: 0 1.25rem; }
  .steps {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* ── Pillars ─────────────────────────────── */
  .pillars { padding: 4rem 0; }
  .pillars-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  /* ── CTA ─────────────────────────────────── */
  .cta-band { padding: 4rem 0; }
  .cta-band h2 { font-size: 1.8rem; }

  /* ── Footer ──────────────────────────────── */
  .footer-inner {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

  /* ── Auth pages ──────────────────────────── */
  .auth-page {
    grid-template-columns: 1fr;
  }
  .auth-left {
    padding: 2rem 1.5rem;
    min-height: auto;
  }
  .auth-left-title {
    font-size: 1.8rem;
  }
  .auth-features {
    display: none;
  }

  /* ── App layout ──────────────────────────── */
  .app-layout {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
    border-right: none;
    border-bottom: 1px solid var(--slate-100);
    padding: 0;
  }
  .sidebar-brand {
    padding: 0.75rem 1.25rem;
    border-bottom: none;
  }
  .sidebar-user {
    display: none;
  }
  .sidebar-nav {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    padding: 0;
    border-top: 1px solid var(--slate-100);
    flex: none;
  }
  .sidebar-nav li a {
    padding: 0.75rem 1rem;
    white-space: nowrap;
    font-size: 0.8rem;
    flex-direction: column;
    gap: 0.25rem;
    align-items: center;
  }
  .sidebar-nav li.active a::before {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 3px;
    border-radius: 2px 2px 0 0;
  }
  .sidebar-logout {
    display: none;
  }

  /* ── Dashboard main ──────────────────────── */
  .app-main {
    padding: 1.5rem 1.25rem;
  }
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  /* ── Stats ───────────────────────────────── */
  .stats-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  /* ── Pillar cards ────────────────────────── */
  .pillars-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .pillar-card {
    padding: 1.25rem 1rem;
  }
  .pillar-card p {
    display: none;
  }

  /* ── Vault ───────────────────────────────── */
  .cat-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.25rem;
  }
  .docs-grid {
    grid-template-columns: 1fr;
  }

  /* ── Modal ───────────────────────────────── */
  .modal {
    max-width: 100%;
    max-height: 95vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    margin-top: auto;
  }
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .meta-wrap {
    flex-direction: column;
  }
  .meta-wrap canvas {
    display: none;
  }

  /* ── Deadlines ───────────────────────────── */
  .dl-item {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .dl-left {
    flex: 1;
    min-width: 0;
  }
  .dl-center {
    align-items: flex-start;
    min-width: auto;
  }
  .dl-actions {
    width: 100%;
    justify-content: flex-end;
  }

  /* ── Logo ────────────────────────────────── */
  .nav-logo-img {
    height: 40px;
  }
  .sidebar-brand .nav-logo-img {
    height: 34px;
  }
}

@media (max-width: 480px) {
  .pillars-grid {
    grid-template-columns: 1fr;
  }
  .pillars-row {
    grid-template-columns: 1fr;
  }
  .hero-title {
    font-size: 2rem;
  }
  .btn-lg {
    padding: 0.65rem 1.25rem;
    font-size: 0.95rem;
  }
}
/* ── Mobile crop fixes ───────────────────────────── */
@media (max-width: 768px) {
  .crop-wrap {
    min-height: 220px;
    width: 100%;
  }
  .crop-wrap img {
    width: 100%;
    height: auto;
    display: block;
  }
  .tab-panel {
    padding: 1rem;
  }
  .source-tab {
    padding: 0.75rem 0.85rem;
    font-size: 0.8rem;
  }
  .drop-zone {
    padding: 2rem 1rem;
    min-height: 160px;
  }
  .meta-wrap {
    flex-direction: column;
  }
  .meta-wrap canvas {
    display: none;
  }
  .meta-fields {
    width: 100%;
  }
}
/* ════════════════════════════════════════════
   PDF VIEWER
════════════════════════════════════════════ */
.viewer-main {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  padding: 2rem;
}

.pdf-viewer-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--slate-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.pdf-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-100);
  gap: 1rem;
  flex-wrap: wrap;
}

.pdf-toolbar-left,
.pdf-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pdf-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--white);
  border: 1px solid var(--slate-200);
  color: var(--slate-600);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t);
  min-width: 32px;
  height: 32px;
}
.pdf-btn:hover {
  border-color: var(--blue-400);
  color: var(--blue-600);
  background: var(--blue-50);
}

.pdf-page-info {
  font-size: 0.85rem;
  color: var(--slate-500);
  padding: 0 0.5rem;
}

.pdf-zoom-label {
  font-size: 0.82rem;
  color: var(--slate-500);
  min-width: 44px;
  text-align: center;
}

.pdf-canvas-wrap {
  flex: 1;
  overflow: auto;
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: var(--slate-100);
  min-height: 500px;
}

#pdfCanvas {
  display: none;
  box-shadow: var(--shadow-lg);
  border-radius: 4px;
  max-width: 100%;
}

.pdf-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--slate-400);
  font-size: 0.9rem;
  padding: 4rem;
}

.pdf-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--slate-200);
  border-top-color: var(--blue-500);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
  .viewer-main { padding: 1rem; }
  .pdf-canvas-wrap { padding: 0.75rem; min-height: 300px; }
  .pdf-toolbar { padding: 0.5rem 0.75rem; }
}
/* ════════════════════════════════════════════
   CAMERA OVERLAY + ENHANCE
════════════════════════════════════════════ */
.cam-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.meta-enhance {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.75rem 0;
}

.enhance-hint {
  font-size: 0.78rem;
  color: var(--slate-400);
}

#btnEnhance {
  transition: all 0.2s ease;
  flex-shrink: 0;
}
/* ════════════════════════════════════════════
   DOCUMENT TYPE SELECTOR
════════════════════════════════════════════ */
.type-select-wrap {
  padding: 1.5rem 1.75rem 1rem;
}
.type-select-hint {
  font-size: 0.9rem;
  color: var(--slate-500);
  margin-bottom: 1.25rem;
  text-align: center;
}
.type-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.75rem 1rem;
  border: 2px solid var(--slate-100);
  border-radius: var(--radius-lg);
  background: var(--white);
  cursor: pointer;
  transition: all var(--t);
  color: var(--slate-700);
}
.type-card:hover {
  border-color: var(--blue-400);
  background: var(--blue-50);
  color: var(--blue-700);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.type-card svg {
  color: var(--blue-500);
}
.type-card span {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--slate-800);
}
.type-card small {
  font-size: 0.78rem;
  color: var(--slate-400);
}

/* ════════════════════════════════════════════
   PDF PREVIEW IN MODAL
════════════════════════════════════════════ */
.pdf-preview-wrap {
  width: 100%;
  overflow: auto;
  max-height: 380px;
  display: flex;
  justify-content: center;
  background: var(--slate-100);
  border-radius: var(--radius);
  padding: 1rem;
}
.pdf-preview-wrap canvas {
  max-width: 100%;
  box-shadow: var(--shadow);
  border-radius: 4px;
}

/* ════════════════════════════════════════════
   ID CARD VIEWER
════════════════════════════════════════════ */
.pdf-canvas-wrap[data-doctype="id"] {
  background: var(--slate-900);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}
.pdf-canvas-wrap[data-doctype="id"] #pdfCanvas {
  max-width: min(90vw, 600px);
  width: auto;
  height: auto;
  border-radius: var(--radius);
}

@media (max-width: 768px) {
  .type-cards {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .type-card {
    padding: 1.25rem 0.75rem;
  }
  .pdf-canvas-wrap[data-doctype="id"] #pdfCanvas {
    max-width: 95vw;
  }
}