/* ============================================================================
   CANDLELIGHT FARMERS — Design System v2
   "East African premium fintech"
   ----------------------------------------------------------------------------
   Palette: forest green (institution) + harvest amber (money) + terracotta
   (human warmth) + deep blue (trust/info). Warm cream canvas.
   Typography: Plus Jakarta Sans (headings) + Inter (body/UI).
   Motion: 180ms hovers, 240ms entrances, spring easing. Reduced-motion honoured.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Brand greens (unchanged names, refined values) ---------- */
  --green-900:#0A3D1F; --green-800:#0F5132; --green-700:#137A3F;
  --green-600:#16A34A; --green-500:#22C55E; --green-100:#DCFCE7; --green-50:#F0FDF4;

  /* ---------- Trust blues ---------- */
  --blue-700:#1E40AF; --blue-600:#2563EB; --blue-500:#3B82F6; --blue-100:#DBEAFE;

  /* ---------- Harvest amber (promoted from accent to co-star) ---------- */
  --gold-600:#D97706; --gold-500:#F59E0B; --gold-400:#FBBF24; --gold-100:#FEF3C7;

  /* ---------- Terracotta (East African warmth) ---------- */
  --terracotta-600:#C2410C; --terracotta-500:#EA580C; --terracotta-100:#FFEDD5;

  /* ---------- Reds (alerts, money-out) ---------- */
  --red-500:#EF4444; --red-100:#FEE2E2;

  /* ---------- Warm neutrals (cream canvas, warm ink) ---------- */
  --gray-50:#FAFAF7;   /* warm cream canvas */
  --gray-100:#F5F3EF;  /* warm subtle */
  --gray-200:#E8E5DF;  /* warm border */
  --gray-300:#D4CFC5;  /* warm muted border */
  --gray-500:#8B8479;  /* warm muted text */
  --gray-700:#4A4438;  /* warm body text */
  --gray-900:#0B1220;  /* warm near-black ink */
  --white:#FFFFFF;

  /* ---------- Layout ---------- */
  --sidebar-w:240px;
  --topbar-h:64px;
  --mobile-nav-h:66px;
  --radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-xl:22px;
  --radius-2xl:28px;

  /* ---------- Shadow scale (ambient + directional, warm-tinted) ---------- */
  --shadow-sm:0 1px 2px rgba(11,18,32,.04), 0 1px 3px rgba(11,18,32,.03);
  --shadow:0 2px 6px rgba(11,18,32,.04), 0 4px 14px rgba(11,18,32,.05);
  --shadow-md:0 4px 12px rgba(11,18,32,.05), 0 8px 24px rgba(11,18,32,.06);
  --shadow-lg:0 8px 24px rgba(11,18,32,.07), 0 16px 40px rgba(11,18,32,.08);
  --shadow-xl:0 16px 40px rgba(11,18,32,.10), 0 32px 64px rgba(11,18,32,.10);

  /* ---------- Elevation rings (used instead of borders on glass) ---------- */
  --border:1px solid var(--gray-200);
  --border-warm:1px solid rgba(139,132,121,.18);
  --border-glass:1px solid rgba(255,255,255,.55);

  /* ---------- Motion ---------- */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:.14s cubic-bezier(.4,0,.2,1);
  --t:180ms var(--ease-out);
  --t-slow:240ms var(--ease-out);
}

* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:14px; line-height:1.5; color:var(--gray-900);
  background:var(--gray-50); -webkit-font-smoothing:antialiased;
  min-height:100vh; font-feature-settings:"cv02","cv03","cv04","cv11";
}
img,svg { display:block; max-width:100%; }
button { font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,select,textarea { font:inherit; color:inherit; }
a { color:inherit; text-decoration:none; }
.icon { width:20px; height:20px; flex:none; }
.icon-sm { width:16px; height:16px; }
.icon-lg { width:24px; height:24px; }
::selection { background:var(--gold-100); color:var(--gray-900); }

/* ---------- Typography ---------- */
h1,h2,h3,h4 { font-family:'Plus Jakarta Sans','Inter',sans-serif; font-weight:700; letter-spacing:-0.025em; line-height:1.15; color:var(--gray-900); }
h1 { font-size:28px; font-weight:800; }
h2 { font-size:22px; font-weight:700; }
h3 { font-size:17px; font-weight:700; }
h4 { font-size:15px; font-weight:600; }
.muted { color:var(--gray-500); }
.small { font-size:12px; }
.tiny { font-size:11px; }
.tabular { font-variant-numeric:tabular-nums; }

/* ---------- Layout shell ---------- */
.app { display:flex; min-height:100vh; }

.sidebar {
  width:var(--sidebar-w); flex:none; position:fixed; inset:0 auto 0 0;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(251,191,36,.18) 0%, transparent 55%),
    radial-gradient(120% 60% at 100% 100%, rgba(22,163,74,.22) 0%, transparent 60%),
    linear-gradient(180deg, #062B15 0%, var(--green-900) 45%, var(--green-800) 100%);
  color:#fff; display:flex; flex-direction:column; padding:22px 16px;
  z-index:60; overflow-y:auto;
}
.sidebar .brand { display:flex; align-items:center; gap:10px; padding:0 6px 22px; }
.sidebar .brand img { width:34px; height:34px; }
.sidebar .brand .brand-text { line-height:1.05; }
.sidebar .brand strong { font-family:'Plus Jakarta Sans',sans-serif; display:block; font-size:14px; font-weight:800; letter-spacing:.01em; }
.sidebar .brand span { font-size:9px; letter-spacing:.32em; opacity:.7; text-transform:uppercase; }

.nav { display:flex; flex-direction:column; gap:3px; }
.nav-label { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.4); padding:14px 12px 6px; font-weight:600; }
.nav a, .nav button {
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px;
  color:rgba(255,255,255,.78); font-weight:500; font-size:13.5px;
  transition:var(--t); width:100%; text-align:left; position:relative;
}
.nav a::before, .nav button::before {
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  border-radius:0 3px 3px 0; background:var(--gold-400);
  opacity:0; transform:translateX(-4px); transition:var(--t);
}
.nav a:hover, .nav button:hover { background:rgba(255,255,255,.07); color:#fff; }
.nav a.active, .nav button.active {
  background:linear-gradient(180deg, rgba(22,163,74,.75), rgba(15,81,50,.9));
  color:#fff;
  box-shadow:0 6px 16px rgba(22,163,74,.35), inset 0 1px 0 rgba(255,255,255,.1);
}
.nav a.active::before, .nav button.active::before { opacity:1; transform:none; }
.nav a.active .icon, .nav button.active .icon { color:var(--gold-400); }
.nav .icon { color:rgba(255,255,255,.68); transition:var(--t); }

.sidebar .grow-card {
  margin-top:auto; padding:16px; border-radius:14px;
  background:linear-gradient(180deg, rgba(251,191,36,.22), rgba(34,197,94,.14));
  border:var(--border-glass); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  position:relative; overflow:hidden;
}
.sidebar .grow-card strong { font-family:'Plus Jakarta Sans',sans-serif; display:block; font-size:14px; margin-bottom:3px; }
.sidebar .grow-card p { font-size:11.5px; opacity:.85; line-height:1.45; }
.sidebar .grow-card .leaf { position:absolute; right:-6px; bottom:-6px; width:60px; opacity:.28; color:var(--gold-400); }

/* Main area */
.main { flex:1; margin-left:var(--sidebar-w); min-width:0; display:flex; flex-direction:column; }

.topbar {
  height:var(--topbar-h); background:rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom:var(--border);
  display:flex; align-items:center; gap:14px; padding:0 24px;
  position:sticky; top:0; z-index:40;
}
.topbar .search { flex:1; max-width:480px; position:relative; }
.topbar .search input {
  width:100%; height:40px; background:var(--gray-100); border:1px solid transparent;
  border-radius:10px; padding:0 14px 0 40px; font-size:13px;
  transition:var(--t);
}
.topbar .search input:focus {
  outline:none; background:#fff;
  border-color:var(--gold-500);
  box-shadow:0 0 0 4px rgba(245,158,11,.14);
}
.topbar .search .icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--gray-500); width:18px; height:18px; }

.topbar .actions { margin-left:auto; display:flex; align-items:center; gap:8px; }
.icon-btn {
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center;
  color:var(--gray-700); position:relative; transition:var(--t);
}
.icon-btn:hover { background:var(--gray-100); }
.icon-btn .dot {
  position:absolute; top:8px; right:8px; min-width:16px; height:16px; padding:0 4px;
  background:var(--terracotta-500); color:#fff; font-size:9.5px; font-weight:700;
  border-radius:8px; display:grid; place-items:center; border:2px solid #fff;
}

.user-chip {
  display:flex; align-items:center; gap:10px; padding:5px 10px 5px 5px;
  border-radius:12px; transition:var(--t);
}
.user-chip:hover { background:var(--gray-100); }
.user-chip .avatar { width:34px; height:34px; border-radius:50%; object-fit:cover; border:2px solid #fff; box-shadow:0 2px 6px rgba(11,18,32,.08); }
.user-chip .meta { line-height:1.15; text-align:left; }
.user-chip .meta strong { display:block; font-size:13px; font-weight:600; font-family:'Plus Jakarta Sans',sans-serif; }
.user-chip .meta span { font-size:11px; color:var(--gray-500); }

.page { padding:26px 24px 40px; }
.page-head { margin-bottom:22px; display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.page-head h1 { font-size:24px; }
.page-head p { color:var(--gray-500); font-size:13.5px; margin-top:4px; }

/* ---------- Grids ---------- */
.grid { display:grid; gap:18px; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
.grid-dash { grid-template-columns:repeat(3,1fr); }

/* ---------- Cards ---------- */
.card {
  background:var(--white); border:var(--border); border-radius:var(--radius-lg);
  padding:20px; box-shadow:var(--shadow-sm); transition:var(--t);
}
.card.hover:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--gray-300); }
.card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:10px; }
.card-head h3 { font-size:15px; }
.card-head a { font-size:12.5px; color:var(--green-700); font-weight:600; transition:var(--t); }
.card-head a:hover { color:var(--green-900); }

/* ---------- Balance card — the hero ---------- */
.balance-card {
  grid-column:span 2; position:relative; overflow:hidden;
  border-radius:var(--radius-xl); padding:26px;
  background:
    radial-gradient(120% 140% at 100% -20%, rgba(251,191,36,.55) 0%, rgba(251,191,36,0) 45%),
    radial-gradient(140% 120% at 0% 100%, rgba(10,61,31,.75) 0%, rgba(10,61,31,0) 55%),
    linear-gradient(135deg, #137A3F 0%, #0F5132 45%, #0A3D1F 100%);
  color:#fff;
  box-shadow:
    0 20px 50px rgba(15,81,50,.35),
    0 4px 12px rgba(15,81,50,.15),
    inset 0 1px 0 rgba(255,255,255,.12);
}
.balance-card::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 40% at 85% 15%, rgba(255,255,255,.14), transparent 60%);
}
.balance-card .head { display:flex; align-items:center; gap:8px; font-size:12.5px; opacity:.9; margin-bottom:8px; font-weight:500; letter-spacing:.01em; }
.balance-card .amount {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:36px; font-weight:800; letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums; line-height:1.1;
  text-shadow:0 1px 2px rgba(0,0,0,.15);
}
.balance-card .delta {
  display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  background:rgba(251,191,36,.2); color:var(--gold-400);
  padding:5px 12px; border-radius:20px; font-size:11.5px; font-weight:600;
  border:1px solid rgba(251,191,36,.25);
  backdrop-filter:blur(6px);
}
.balance-card .row-actions { display:flex; gap:10px; margin-top:24px; flex-wrap:wrap; position:relative; z-index:1; }
.balance-card .eye-btn { margin-left:auto; color:rgba(255,255,255,.85); transition:var(--t); }
.balance-card .eye-btn:hover { color:#fff; transform:scale(1.05); }

/* ---------- Hero tile ---------- */
.hero-tile {
  border-radius:var(--radius-xl); overflow:hidden; position:relative;
  min-height:220px; display:flex; align-items:flex-end; padding:24px;
  background:
    linear-gradient(180deg, rgba(10,61,31,0) 30%, rgba(10,61,31,.9) 100%),
    radial-gradient(120% 100% at 0% 100%, rgba(194,65,12,.4), transparent 55%),
    linear-gradient(135deg, #4A7A2E 0%, #6C8E2F 40%, #E7B93A 100%);
  color:#fff;
  box-shadow:var(--shadow-md);
}
.hero-tile::after {
  content:""; position:absolute; inset:0;
  background:radial-gradient(50% 40% at 80% 20%, rgba(255,255,255,.18), transparent 60%);
  pointer-events:none;
}
.hero-tile .quote {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:20px; font-weight:700; line-height:1.25; max-width:240px;
  position:relative; z-index:1;
}
.hero-tile .brand-mark { position:absolute; bottom:18px; right:20px; font-size:11px; opacity:.9; display:flex; align-items:center; gap:6px; z-index:1; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 16px; border-radius:10px; font-size:13px; font-weight:600;
  font-family:'Plus Jakarta Sans',sans-serif;
  transition:var(--t); white-space:nowrap; line-height:1; letter-spacing:.005em;
  position:relative; overflow:hidden;
}
.btn:active { transform:scale(.97); }
.btn:disabled { opacity:.55; cursor:not-allowed; transform:none; }

/* Primary — forest green. Nav, settings, confirmations. */
.btn-primary { background:var(--green-700); color:#fff; box-shadow:0 2px 6px rgba(19,122,63,.25); }
.btn-primary:hover { background:var(--green-800); box-shadow:0 4px 12px rgba(19,122,63,.35); transform:translateY(-1px); }

/* Gold — money IN actions. Deposit, save to goal, buy shares. */
.btn-gold {
  background:linear-gradient(180deg, var(--gold-400), var(--gold-500));
  color:#0B1220; box-shadow:0 2px 6px rgba(245,158,11,.35), inset 0 1px 0 rgba(255,255,255,.35);
  font-weight:700;
}
.btn-gold:hover { filter:brightness(1.05); transform:translateY(-1px); box-shadow:0 4px 14px rgba(245,158,11,.45); }

/* Blue — money OUT actions. Send, withdraw. */
.btn-blue { background:var(--blue-700); color:#fff; box-shadow:0 2px 6px rgba(30,64,175,.25); }
.btn-blue:hover { background:#1D4ED8; transform:translateY(-1px); box-shadow:0 4px 12px rgba(30,64,175,.35); }

/* Outline — neutral, secondary */
.btn-outline { background:#fff; color:var(--gray-900); border:1px solid var(--gray-300); }
.btn-outline:hover { background:var(--gray-100); border-color:var(--gray-500); }
.btn-white { background:#fff; color:var(--gray-900); box-shadow:var(--shadow-sm); }
.btn-white:hover { background:var(--gray-50); box-shadow:var(--shadow); }
.btn-ghost { background:transparent; color:var(--gray-700); }
.btn-ghost:hover { background:var(--gray-100); }
.btn-danger { background:var(--red-500); color:#fff; }
.btn-danger:hover { background:#DC2626; }
.btn-sm { padding:7px 12px; font-size:12px; border-radius:8px; }
.btn-lg { padding:14px 22px; font-size:14px; border-radius:12px; }
.btn-block { width:100%; }
.btn-light { background:rgba(255,255,255,.18); color:#fff; backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.25); }
.btn-light:hover { background:rgba(255,255,255,.28); }

/* ---------- Action tiles ---------- */
.tile {
  background:#fff; border:var(--border); border-radius:var(--radius-lg);
  padding:16px; display:flex; align-items:center; gap:14px;
  cursor:pointer; transition:var(--t); text-align:left;
}
.tile:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:transparent; }
.tile .tile-icon { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex:none; transition:var(--t); }
.tile:hover .tile-icon { transform:scale(1.06); }
.tile-icon.green  { background:var(--green-100); color:var(--green-700); }
.tile-icon.blue   { background:var(--blue-100);  color:var(--blue-700); }
.tile-icon.gold   { background:var(--gold-100);  color:var(--gold-600); }
.tile-icon.red    { background:var(--red-100);   color:var(--red-500); }
.tile strong { display:block; font-size:13.5px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; }
.tile span { font-size:11.5px; color:var(--gray-500); }

/* ---------- Progress ---------- */
.progress { height:6px; background:var(--gray-100); border-radius:20px; overflow:hidden; }
.progress > span {
  display:block; height:100%; border-radius:20px;
  background:linear-gradient(90deg, var(--green-500), var(--green-700));
  transition:width .9s var(--ease-out);
  box-shadow:0 0 12px rgba(22,163,74,.3);
}
.progress.blue > span { background:linear-gradient(90deg, var(--blue-500), var(--blue-700)); box-shadow:0 0 12px rgba(37,99,235,.3); }
.progress.gold > span { background:linear-gradient(90deg, var(--gold-400), var(--gold-500)); box-shadow:0 0 12px rgba(245,158,11,.35); }

.ring { width:120px; height:120px; position:relative; }
.ring svg { transform:rotate(-90deg); }
.ring .bg { fill:none; stroke:var(--gray-100); stroke-width:9; }
.ring .fg {
  fill:none; stroke:var(--green-600); stroke-width:9; stroke-linecap:round;
  transition:stroke-dashoffset 1s var(--ease-out);
  filter:drop-shadow(0 0 6px rgba(22,163,74,.25));
}
.ring.blue .fg { stroke:var(--blue-600); filter:drop-shadow(0 0 6px rgba(37,99,235,.25)); }
.ring .label { position:absolute; inset:0; display:grid; place-items:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:20px; font-weight:700; }

/* ---------- Transactions ---------- */
.tx-list { display:flex; flex-direction:column; gap:2px; }
.tx {
  display:flex; align-items:center; gap:12px; padding:12px 8px;
  border-radius:10px; transition:var(--t); cursor:pointer;
}
.tx:hover { background:var(--gray-50); }
.tx .tx-icon { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; flex:none; transition:var(--t); }
.tx:hover .tx-icon { transform:scale(1.06); }
.tx .tx-icon.in  { background:var(--green-100); color:var(--green-700); }
.tx .tx-icon.out { background:var(--red-100);   color:var(--red-500); }
.tx .tx-icon.neutral { background:var(--blue-100); color:var(--blue-700); }
.tx .tx-info { flex:1; min-width:0; }
.tx .tx-info strong { display:block; font-size:13.5px; font-weight:600; }
.tx .tx-info span { font-size:11.5px; color:var(--gray-500); }
.tx .tx-amount { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:13.5px; font-variant-numeric:tabular-nums; }
.tx-amount.pos { color:var(--green-600); }
.tx-amount.neg { color:var(--terracotta-600); }

/* ---------- Badges ---------- */
.badge {
  display:inline-flex; align-items:center; gap:4px; padding:3px 9px;
  border-radius:20px; font-size:10.5px; font-weight:700;
  letter-spacing:.02em; white-space:nowrap;
}
.badge-green { background:var(--green-100); color:#14532D; }
.badge-gold  { background:var(--gold-100);  color:#78350F; }
.badge-blue  { background:var(--blue-100);  color:var(--blue-700); }
.badge-red   { background:var(--red-100);   color:#991B1B; }
.badge-muted { background:var(--gray-100);  color:var(--gray-700); }

/* ---------- Forms ---------- */
.field { margin-bottom:14px; }
.field label { display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; color:var(--gray-700); font-family:'Plus Jakarta Sans',sans-serif; }
.field input, .field select, .field textarea {
  width:100%; height:44px; padding:0 14px; border:1px solid var(--gray-200);
  background:#fff; border-radius:10px; transition:var(--t); font-size:14px;
  box-shadow:inset 0 1px 2px rgba(11,18,32,.02);
}
.field textarea { height:auto; padding:12px 14px; resize:vertical; min-height:88px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--gold-500);
  box-shadow:0 0 0 4px rgba(245,158,11,.14);
}
.field input[type=file] { padding:8px 12px; height:auto; line-height:1.4; }
.field .hint { font-size:11.5px; color:var(--gray-500); margin-top:5px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field-group { display:flex; gap:8px; }

/* ---------- Modal ---------- */
.modal-back {
  position:fixed; inset:0; background:rgba(11,18,32,.55);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:none; align-items:flex-start; justify-content:center;
  z-index:100; padding:40px 16px; overflow-y:auto;
}
.modal-back.open { display:flex; animation:fadeIn .22s ease; }
.modal {
  background:#fff; border-radius:var(--radius-2xl); width:100%; max-width:520px;
  box-shadow:var(--shadow-xl); animation:modalIn .3s var(--ease-spring);
  overflow:hidden; margin:auto;
}
.modal.lg { max-width:760px; }
.modal.xl { max-width:960px; }
.modal-head { display:flex; justify-content:space-between; align-items:center; padding:22px 26px; border-bottom:var(--border); }
.modal-head h3 { font-size:17px; }
.modal-body { padding:24px 26px; }
.modal-foot { padding:16px 26px; border-top:var(--border); display:flex; gap:10px; justify-content:flex-end; background:var(--gray-50); }
.modal-foot .btn { min-width:110px; }

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes modalIn { from { opacity:0; transform:translateY(16px) scale(.96); } to { opacity:1; transform:none; } }

/* ---------- Toasts ---------- */
.toasts { position:fixed; top:20px; right:20px; z-index:200; display:flex; flex-direction:column; gap:10px; }
.toast {
  background:#fff; border-radius:14px; padding:14px 18px; min-width:280px; max-width:420px;
  box-shadow:var(--shadow-lg); border-left:4px solid var(--green-600);
  display:flex; gap:10px; align-items:flex-start; animation:toastIn .32s var(--ease-spring);
}
.toast.error   { border-left-color:var(--red-500); }
.toast.warning { border-left-color:var(--gold-500); }
.toast.info    { border-left-color:var(--blue-500); }
.toast strong { display:block; font-size:13.5px; margin-bottom:2px; font-family:'Plus Jakarta Sans',sans-serif; }
.toast p { font-size:12.5px; color:var(--gray-500); line-height:1.5; }
@keyframes toastIn { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:none; } }

/* ---------- Tables ---------- */
.table { width:100%; border-collapse:collapse; }
.table th, .table td { padding:12px 14px; text-align:left; border-bottom:var(--border); font-size:13px; }
.table th { background:var(--gray-50); font-weight:600; color:var(--gray-700); font-size:12px; text-transform:uppercase; letter-spacing:.04em; font-family:'Plus Jakarta Sans',sans-serif; }
.table tr:hover td { background:var(--gray-50); }
.table-wrap { overflow-x:auto; border-radius:var(--radius-lg); border:var(--border); background:#fff; }

/* ---------- Empty / loading ---------- */
.empty { text-align:center; padding:44px 20px; color:var(--gray-500); }
.empty .icon { width:40px; height:40px; margin:0 auto 12px; opacity:.5; }
.empty p { font-size:13px; }

.skeleton {
  background:linear-gradient(90deg,var(--gray-100) 25%,var(--gray-200) 50%,var(--gray-100) 75%);
  background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:8px;
}
@keyframes shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }

/* ---------- Auth pages ---------- */
.auth-wrap {
  min-height:100vh; display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(1000px 700px at 10% 0%, rgba(251,191,36,.28), transparent 55%),
    radial-gradient(800px 600px at 100% 100%, rgba(194,65,12,.22), transparent 55%),
    linear-gradient(180deg, #062B15 0%, var(--green-900) 55%, var(--green-800) 100%);
}
.auth-card {
  width:100%; max-width:440px; background:rgba(255,255,255,.97);
  backdrop-filter:blur(24px); border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-xl); padding:36px 32px;
  border:var(--border-glass);
}
.auth-brand { text-align:center; margin-bottom:24px; }
.auth-brand img { width:60px; height:60px; margin:0 auto 12px; }
.auth-brand h1 { font-family:'Plus Jakarta Sans',sans-serif; font-size:24px; color:var(--green-900); letter-spacing:-0.02em; }
.auth-brand p { font-size:12.5px; color:var(--gray-500); margin-top:4px; }
.auth-tabs { display:flex; background:var(--gray-100); border-radius:12px; padding:4px; margin-bottom:22px; }
.auth-tabs button { flex:1; padding:11px; border-radius:9px; font-size:13px; font-weight:600; color:var(--gray-500); transition:var(--t); font-family:'Plus Jakarta Sans',sans-serif; }
.auth-tabs button.active { background:#fff; color:var(--green-800); box-shadow:var(--shadow-sm); }

/* ---------- Mobile nav ---------- */
.mobile-nav {
  display:none; position:fixed; bottom:0; left:0; right:0; height:var(--mobile-nav-h);
  background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(14px);
  border-top:var(--border); z-index:50;
  padding:0 8px; padding-bottom:env(safe-area-inset-bottom);
}
.mobile-nav ul { display:flex; list-style:none; height:100%; }
.mobile-nav li { flex:1; }
.mobile-nav a {
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; font-size:10.5px; font-weight:600; color:var(--gray-500);
  transition:var(--t); border-radius:12px; margin:6px 2px;
}
.mobile-nav a.active { color:var(--green-800); background:var(--green-50); }
.mobile-nav .icon { width:22px; height:22px; }

/* ---------- Hamburger / overlay ---------- */
.hamburger { display:none; }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(11,18,32,.5); backdrop-filter:blur(6px); z-index:55; }
.sidebar-overlay.open { display:block; animation:fadeIn .22s ease; }

/* ---------- Step wizard ---------- */
.steps { display:flex; justify-content:center; gap:8px; margin-bottom:22px; }
.steps .dot { width:32px; height:6px; border-radius:10px; background:var(--gray-200); transition:var(--t); }
.steps .dot.active { background:linear-gradient(90deg,var(--gold-400),var(--gold-500)); width:44px; box-shadow:0 0 12px rgba(245,158,11,.35); }
.steps .dot.done { background:var(--green-600); }

/* ---------- Guarantor picker ---------- */
.member-pick {
  display:flex; align-items:center; gap:12px; padding:12px; border-radius:12px;
  border:1.5px solid var(--gray-200); cursor:pointer; transition:var(--t);
}
.member-pick:hover { border-color:var(--green-500); background:var(--green-50); transform:translateY(-1px); }
.member-pick.selected { border-color:var(--green-600); background:var(--green-50); box-shadow:0 0 0 4px rgba(22,163,74,.1); }
.member-pick img { width:42px; height:42px; border-radius:50%; object-fit:cover; }
.member-pick .meta { flex:1; min-width:0; }
.member-pick .meta strong { display:block; font-size:13.5px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; }
.member-pick .meta span { font-size:11.5px; color:var(--gray-500); }

/* ---------- Charts ---------- */
.chart-box { position:relative; height:220px; }
.chart-box canvas { max-height:100%; }

/* ---------- Tabs ---------- */
.tabs { display:flex; gap:4px; border-bottom:var(--border); margin-bottom:18px; overflow-x:auto; }
.tabs button {
  padding:10px 14px; font-size:13px; font-weight:600; color:var(--gray-500);
  border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap;
  transition:var(--t); font-family:'Plus Jakarta Sans',sans-serif;
}
.tabs button:hover { color:var(--gray-900); }
.tabs button.active { color:var(--green-800); border-color:var(--green-700); }

/* ---------- Filters ---------- */
.filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.chip {
  padding:7px 14px; border-radius:20px; font-size:12.5px; font-weight:500;
  background:#fff; border:1px solid var(--gray-200); color:var(--gray-700);
  transition:var(--t); cursor:pointer;
}
.chip:hover { border-color:var(--green-500); color:var(--green-800); transform:translateY(-1px); }
.chip.active {
  background:var(--green-800); color:#fff; border-color:var(--green-800);
  box-shadow:0 4px 12px rgba(15,81,50,.25);
}

/* ---------- Stat cards (admin) ---------- */
.stat { display:flex; align-items:center; gap:14px; padding:18px; }
.stat .stat-icon { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; flex:none; }
.stat .stat-info strong { display:block; font-size:12px; color:var(--gray-500); font-weight:500; }
.stat .stat-info b { font-family:'Plus Jakarta Sans',sans-serif; font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; }
.stat .stat-info small { font-size:11px; color:var(--gray-500); }

/* ---------- Utilities ---------- */
.flex { display:flex; } .items-center { align-items:center; } .items-start { align-items:flex-start; }
.justify-between { justify-content:space-between; } .justify-center { justify-content:center; }
.gap-4 { gap:4px; } .gap-8 { gap:8px; } .gap-12 { gap:12px; } .gap-16 { gap:16px; }
.mt-8 { margin-top:8px; } .mt-16 { margin-top:16px; } .mt-24 { margin-top:24px; }
.mb-8 { margin-bottom:8px; } .mb-16 { margin-bottom:16px; } .mb-24 { margin-bottom:24px; }
.text-right { text-align:right; } .text-center { text-align:center; }
.w-100 { width:100%; } .hidden { display:none !important; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pos { color:var(--green-600); } .neg { color:var(--terracotta-600); }

/* ============================================================
   RESPONSIVE
 * ============================================================ */
@media (max-width:1100px) {
  .grid-dash, .grid-4 { grid-template-columns:repeat(2,1fr); }
  .balance-card { grid-column:span 2; }
  .grid-3 { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:900px) {
  .sidebar { transform:translateX(-100%); transition:transform .3s var(--ease-out); }
  .sidebar.open { transform:none; box-shadow:var(--shadow-xl); }
  .main { margin-left:0; }
  .hamburger { display:grid; }
  .mobile-nav { display:block; }
  .page { padding-bottom:calc(var(--mobile-nav-h) + 20px); }
}

@media (max-width:768px) {
  .page { padding:18px 14px calc(var(--mobile-nav-h) + 20px); }
  .topbar { padding:0 14px; height:60px; }
  .topbar .search { display:none; }
  .user-chip .meta { display:none; }

  .page-head h1 { font-size:20px; }
  .balance-card { padding:22px; grid-column:span 1; }
  .balance-card .amount { font-size:30px; }
  .balance-card .row-actions .btn { flex:1; padding:10px 10px; font-size:12px; }
  .hero-tile { min-height:160px; padding:18px; }
  .hero-tile .quote { font-size:16px; }

  .grid-2, .grid-3, .grid-4, .grid-dash { grid-template-columns:1fr; }
  .balance-card, .hero-tile { grid-column:span 1; }
  .field-row { grid-template-columns:1fr; }

  .modal { max-width:100%; border-radius:20px; }
  .modal-back { padding:16px; }
  .modal-body { padding:20px; }
  .modal-head, .modal-foot { padding:16px 20px; }

  .toasts { left:14px; right:14px; top:14px; }
  .toast { min-width:0; }
}

/* ============================================================
   STATEMENTS & CERTIFICATES — Official document styling v2
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap');

:root {
  --paper:#FEFDF9;
  --paper-edge:#F4F0E5;
  --doc-ink:#1A1614;
  --doc-green:#0F5132;
  --doc-green-deep:#0A3D1F;
  --doc-gold:#B8860B;
  --doc-gold-bright:#D4A017;
  --doc-red:#8B1A1A;
  --doc-rule:#C9C1B0;
}

/* ---------- Shared paper surface ---------- */
.statement-sheet,
.certificate-sheet {
  background: var(--paper);
  color: var(--doc-ink);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Faint paper texture — pure CSS, no image */
.statement-sheet::before,
.certificate-sheet::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(15,81,50,.02) 0, transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(184,134,11,.02) 0, transparent 40%);
  pointer-events: none;
  z-index: 0;
}
.statement-sheet > *,
.certificate-sheet > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
   ACCOUNT STATEMENT
 * ============================================================ */
.statement-sheet {
  padding: 42px 48px 32px;
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 20px rgba(11,18,32,.06);
  border: 1px solid var(--gray-200);
}

.statement-header {
  display: flex; align-items: flex-start; gap: 20px;
  padding-bottom: 20px;
  border-bottom: 3px double var(--doc-green);
  margin-bottom: 22px;
}
.statement-header img {
  width: 56px; height: 56px; flex: none;
  filter: drop-shadow(0 2px 4px rgba(15,81,50,.15));
}
.statement-header .statement-title {
  flex: 1;
}
.statement-header h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 20px; font-weight: 800;
  color: var(--doc-green-deep);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.1;
}
.statement-header .statement-subtitle {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: 14px;
  color: var(--gray-500);
  margin-top: 2px;
}
.statement-header .statement-badge {
  text-align: right;
  font-size: 11px;
  color: var(--gray-500);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
}
.statement-header .statement-badge strong {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--doc-green-deep);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
  margin-top: 4px;
}

.statement-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--doc-rule);
  margin-bottom: 20px;
}
.statement-meta > div span {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gray-500);
  display: block;
  margin-bottom: 4px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.statement-meta > div strong {
  font-size: 14px;
  color: var(--doc-ink);
  font-weight: 600;
}

.statement-totals {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  padding: 20px 22px;
  background:
    linear-gradient(135deg, rgba(15,81,50,.04), rgba(184,134,11,.04)),
    var(--paper-edge);
  border-radius: 10px;
  margin-bottom: 22px;
  border: 1px solid rgba(201,193,176,.4);
}
.statement-totals > div span {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gray-500);
  display: block;
  margin-bottom: 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.statement-totals > div strong {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--doc-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.statement-totals > div strong.pos { color: var(--doc-green); }
.statement-totals > div strong.neg { color: var(--doc-red); }

/* Statement table */
.statement-sheet .table {
  border: 1px solid var(--doc-rule);
  border-radius: 8px;
  overflow: hidden;
}
.statement-sheet .table thead th {
  background: var(--doc-green-deep);
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 11px 14px;
  border: none;
}
.statement-sheet .table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(201,193,176,.35);
  font-size: 12.5px;
  color: var(--doc-ink);
}
.statement-sheet .table tbody tr:nth-child(even) td {
  background: rgba(244,240,229,.5);
}
.statement-sheet .table tbody tr:last-child td {
  border-bottom: none;
}

.statement-signature {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  padding-top: 50px;
  margin-top: 32px;
  border-top: 1px solid var(--doc-rule);
}
.statement-signature .sig-block {
  text-align: center;
  min-width: 200px;
}
.statement-signature .sig-img {
  max-height: 56px; max-width: 200px;
  margin: 0 auto 6px;
  display: block;
}
.statement-signature .sig-line {
  height: 44px;
  border-bottom: 1.5px solid var(--doc-ink);
  margin-bottom: 6px;
}
.statement-signature .sig-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--doc-ink);
}
.statement-signature .sig-title {
  font-size: 10.5px;
  color: var(--gray-500);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 2px;
}

.statement-footer {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 3px double var(--doc-green);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  color: var(--gray-500);
  letter-spacing: .04em;
}
.statement-footer strong { color: var(--doc-green-deep); font-weight: 700; }

/* ============================================================
   CERTIFICATE
 * ============================================================ */

.certificate-wrap {
  padding: 24px;
  background:
    linear-gradient(135deg, #0A3D1F 0%, #0F5132 100%);
  border-radius: var(--radius-2xl);
  box-shadow: 0 20px 60px rgba(10,61,31,.35);
}

.certificate-sheet {
  padding: 56px 60px 40px;
  border-radius: 16px;
  text-align: center;
  position: relative;
  border: 1px solid rgba(184,134,11,.35);
  /* inner gold hairline */
  outline: 1px solid rgba(184,134,11,.35);
  outline-offset: -14px;
}

/* Decorative outer double-line frame */
.certificate-sheet::after {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid var(--doc-gold);
  border-radius: 8px;
  pointer-events: none;
  opacity: .35;
}

/* Watermark — very faint platform mark repeated */
.certificate-sheet .watermark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: .035;
  z-index: 0;
}
.certificate-sheet .watermark svg,
.certificate-sheet .watermark img {
  width: 320px; height: 320px;
}

.certificate-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}
.certificate-header img {
  width: 64px; height: 64px;
  filter: drop-shadow(0 4px 8px rgba(15,81,50,.15));
}
.certificate-header .cert-brand {
  text-align: left;
}
.certificate-header h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--doc-green-deep);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1;
}
.certificate-header .cert-sub {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--doc-gold);
  font-weight: 700;
  margin-top: 6px;
}

.certificate-rule {
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--doc-gold), transparent);
  margin: 24px auto 32px;
  position: relative;
  z-index: 1;
}
.certificate-rule::before,
.certificate-rule::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px; height: 6px;
  background: var(--doc-gold);
  transform: translateY(-50%) rotate(45deg);
}
.certificate-rule::before { left: -14px; }
.certificate-rule::after  { right: -14px; }

.certificate-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 34px;
  font-weight: 700;
  font-style: italic;
  color: var(--doc-green-deep);
  letter-spacing: .04em;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
  line-height: 1.1;
}

.certificate-body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  color: var(--doc-ink);
  margin: 16px 0;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.certificate-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 40px;
  font-weight: 700;
  color: var(--doc-ink);
  letter-spacing: -0.01em;
  margin: 12px 0 8px;
  line-height: 1.1;
  position: relative;
  z-index: 1;
}
.certificate-name::after {
  content: "";
  display: block;
  width: 220px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--doc-rule), transparent);
  margin: 14px auto 0;
}

.certificate-meta {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 600;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}

.certificate-amount {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 56px;
  font-weight: 700;
  color: var(--doc-gold);
  letter-spacing: -0.01em;
  margin: 14px 0;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  text-shadow: 0 2px 6px rgba(184,134,11,.2);
  position: relative;
  z-index: 1;
}
.certificate-amount::before {
  content: "";
  display: block;
  width: 260px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--doc-gold), transparent);
  margin: 0 auto 16px;
  opacity: .5;
}
.certificate-amount::after {
  content: "";
  display: block;
  width: 260px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--doc-gold), transparent);
  margin: 16px auto 0;
  opacity: .5;
}

/* Seal */
.certificate-seal {
  width: 120px;
  height: 120px;
  margin: 32px auto 12px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), transparent 55%),
    linear-gradient(135deg, var(--doc-gold-bright), var(--doc-gold));
  display: grid;
  place-items: center;
  color: #fff;
  position: relative;
  z-index: 1;
  box-shadow:
    0 8px 20px rgba(184,134,11,.35),
    inset 0 2px 0 rgba(255,255,255,.35),
    inset 0 -3px 8px rgba(0,0,0,.15);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.certificate-seal::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 2px dashed rgba(255,255,255,.55);
}
.certificate-seal .seal-top {
  font-size: 8px;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: .9;
}
.certificate-seal .seal-core {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  margin: 6px 0;
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.certificate-seal .seal-bot {
  font-size: 8px;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: .9;
}

.certificate-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  padding-top: 44px;
  margin-top: 36px;
  border-top: 1px solid var(--doc-rule);
  position: relative;
  z-index: 1;
  text-align: left;
}
.certificate-footer .sig-block {
  text-align: center;
  min-width: 200px;
}
.certificate-footer .sig-img {
  max-height: 60px; max-width: 200px;
  margin: 0 auto 6px;
  display: block;
}
.certificate-footer .sig-line {
  height: 48px;
  border-bottom: 1.5px solid var(--doc-ink);
  margin-bottom: 6px;
}
.certificate-footer .sig-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--doc-ink);
}
.certificate-footer .sig-title {
  font-size: 10.5px;
  color: var(--gray-500);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: 2px;
}

.certificate-verify {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 36px;
  padding: 16px 22px;
  background: linear-gradient(135deg, rgba(15,81,50,.06), rgba(184,134,11,.06));
  border-radius: 10px;
  border: 1px solid rgba(184,134,11,.2);
  position: relative;
  z-index: 1;
}
.certificate-verify .verify-label {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
}
.certificate-verify .verify-ref {
  font-family: 'Courier New', monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--doc-green-deep);
  letter-spacing: .02em;
}
.certificate-verify .verify-url {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: var(--gray-500);
  word-break: break-all;
  max-width: 320px;
  text-align: right;
}

/* ============================================================
   PRINT — isolate the printable sheet, hide everything else
 * ============================================================ */
@media print {
  @page {
    size: A4;
    margin: 12mm;
  }

  html, body {
    background: #fff !important;
    color: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Hide every top-level element by default */
  body > * {
    display: none !important;
  }

  /* Show only the modal-back that is currently open */
  body > .modal-back.open {
    display: block !important;
    position: static !important;
    inset: auto !important;
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    z-index: auto !important;
    animation: none !important;
  }

  /* Inside the open modal, hide the modal head and foot */
  body > .modal-back.open .modal-head,
  body > .modal-back.open .modal-foot,
  body > .modal-back.open .no-print,
  body > .modal-back.open [data-close] {
    display: none !important;
  }

  /* Reset the modal wrapper so it prints flush */
  body > .modal-back.open .modal {
    display: block !important;
    position: static !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    animation: none !important;
  }

  body > .modal-back.open .modal-body {
    padding: 0 !important;
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Ensure the printable sheets take the full page */
  .statement-sheet,
  .certificate-sheet {
    box-shadow: none !important;
    border-radius: 0 !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .statement-sheet {
    padding: 0 !important;
    border: none !important;
  }

  .certificate-wrap {
    background: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  .certificate-sheet {
    padding: 20mm 16mm !important;
    border: 4px double var(--doc-green) !important;
    background: var(--paper) !important;
  }

  .certificate-sheet::after {
    display: none !important;
  }

  /* Disable hover/transition artifacts */
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  a[href]::after { content: none !important; }
}
/* ============================================================
   MOBILE
 * ============================================================ */
@media (max-width: 768px) {
  .statement-sheet { padding: 22px 20px; }
  .statement-meta { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .statement-totals { grid-template-columns: repeat(2, 1fr); }
  .statement-signature { flex-direction: column; align-items: flex-start; gap: 24px; }
  .statement-footer { flex-direction: column; align-items: flex-start; gap: 8px; }

  .certificate-wrap { padding: 14px; }
  .certificate-sheet { padding: 32px 24px 28px; }
  .certificate-sheet::after { inset: 12px; }
  .certificate-header { flex-direction: column; gap: 10px; }
  .certificate-header .cert-brand { text-align: center; }
  .certificate-title { font-size: 24px; margin-bottom: 24px; }
  .certificate-name { font-size: 28px; }
  .certificate-amount { font-size: 36px; }
  .certificate-amount::before,
  .certificate-amount::after { width: 160px; }
  .certificate-seal { width: 90px; height: 90px; }
  .certificate-seal .seal-core { font-size: 16px; }
  .certificate-footer { flex-direction: column; align-items: stretch; gap: 28px; }
  .certificate-verify { flex-direction: column; align-items: flex-start; }
  .certificate-verify .verify-url { text-align: left; max-width: 100%; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ============================================================
   B2B SaaS — signup page + admin organisations + plans
 * ============================================================*/

.signup-page { background: var(--paper, #fafaf7); }
.signup-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px; border-bottom: 1px solid rgba(0,0,0,.06);
}
.signup-wrap { max-width: 980px; margin: 0 auto; padding: 40px 24px 80px; }
.signup-intro h1 { font-size: 2rem; line-height: 1.2; margin-bottom: 12px; }
.signup-intro p { color: #555; max-width: 60ch; }
.signup-form fieldset {
  border: 1px solid rgba(0,0,0,.08); border-radius: 12px;
  padding: 20px 22px; margin: 24px 0; background: #fff;
}
.signup-form legend { font-weight: 600; padding: 0 8px; }
.signup-form label { display: block; margin-bottom: 14px; font-size: .92rem; color: #333; }
.signup-form input, .signup-form select {
  width: 100%; padding: 10px 12px; border: 1px solid #ccc;
  border-radius: 8px; font-size: 1rem; margin-top: 4px;
}
.signup-form small { color: #777; font-size: .8rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 12px; }
.plan-card {
  border: 2px solid #e5e5e0; border-radius: 12px; padding: 18px;
  cursor: pointer; transition: border-color .15s, box-shadow .15s; background: #fff;
}
.plan-card:hover { border-color: #b9d6b0; }
.plan-card.selected { border-color: #4a8f3c; box-shadow: 0 4px 14px rgba(74,143,60,.15); }
.plan-card input { display: none; }
.plan-card h3 { margin: 0 0 6px; }
.plan-price { font-size: 1.5rem; font-weight: 700; color: #2e6b24; margin: 0; }
.plan-price span { font-size: .85rem; font-weight: 400; color: #777; }
.plan-desc { color: #555; font-size: .88rem; margin: 8px 0 12px; }
.plan-features { list-style: none; padding: 0; margin: 0; font-size: .85rem; color: #444; }
.plan-features li { padding: 3px 0; }
.signup-done { text-align: center; padding: 60px 20px; }
.done-icon {
  width: 64px; height: 64px; margin: 0 auto 18px;
  background: #e6f4e1; color: #2e6b24; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 700;
}
.signup-foot { text-align: center; padding: 20px; color: #888; font-size: .85rem; }

/* ---- Admin: Organisations section ---- */
.org-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.org-tabs .tab {
  padding: 8px 16px; border-radius: 999px; background: #eee;
  cursor: pointer; font-size: .9rem; border: none;
}
.org-tabs .tab.active { background: #2e6b24; color: #fff; }

.org-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; }
.org-table th, .org-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #eee; font-size: .9rem; }
.org-table th { background: #f6f6f3; font-weight: 600; color: #444; }
.org-table tr:hover td { background: #fafaf6; }

.badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: .75rem; font-weight: 600; text-transform: capitalize;
}
.badge.pending   { background: #fff3cd; color: #856404; }
.badge.active    { background: #d4edda; color: #155724; }
.badge.trial     { background: #d1ecf1; color: #0c5460; }
.badge.past_due  { background: #f8d7da; color: #721c24; }
.badge.suspended { background: #e2e3e5; color: #383d41; }
.badge.cancelled { background: #f1f1f1; color: #666; }

.org-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.org-stat {
  background: #fff; border-radius: 12px; padding: 16px;
  border: 1px solid #eee;
}
.org-stat .label { font-size: .78rem; color: #777; text-transform: uppercase; letter-spacing: .04em; }
.org-stat .value { font-size: 1.5rem; font-weight: 700; color: #2e6b24; margin-top: 4px; }

/* ---- Admin: Plans section ---- */
.plans-list { display: grid; gap: 12px; }
.plan-row {
  display: grid; grid-template-columns: 1fr auto auto auto;
  gap: 14px; align-items: center;
  padding: 14px 18px; background: #fff; border-radius: 12px;
  border: 1px solid #eee;
}
.plan-row .plan-name { font-weight: 600; }
.plan-row .plan-meta { color: #777; font-size: .85rem; }
.plan-row .plan-price-cell { font-weight: 700; color: #2e6b24; }
.plan-row .plan-actions { display: flex; gap: 8px; }

/* ---- Org trial banner (shown in org.php) ---- */
.trial-banner {
  padding: 14px 18px; border-radius: 12px; margin-bottom: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.trial-banner.trial   { background: #d1ecf1; color: #0c5460; }
.trial-banner.past_due{ background: #f8d7da; color: #721c24; }
.trial-banner strong { font-weight: 700; }
.trial-banner .btn { white-space: nowrap; }