/* =========================================================
   Koop Sahabat — DD-Style Collection System — Mockup
   Brand tokens sourced from koopsahabat.my live CSS + logo
   ========================================================= */
:root{
  --blue:        #1058A4;
  --blue-dark:   #0D3156;
  --blue-darker: #082138;
  --red:         #EB242B;
  --yellow:      #FFE606;
  --peach:       #FFBC7D;
  --bg-soft:     #F1F1F3;
  --wa-green:    #25D366;
  --wa-green-dk: #075E54;
  --white:       #FFFFFF;
  --ink:         #10233A;
  --ink-soft:    #4B5C70;
  --line:        #E2E7ED;

  --success:     #1E9E5A;
  --success-bg:  #E7F7EE;
  --warn:        #B4790A;
  --warn-bg:     #FFF4DF;
  --danger:      #C81E27;
  --danger-bg:   #FDEAEA;
  --info-bg:     #E9F1FB;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(13,49,86,.08), 0 1px 1px rgba(13,49,86,.06);
  --shadow-md: 0 8px 24px rgba(13,49,86,.12);
  --shadow-lg: 0 20px 50px rgba(8,33,56,.28);

  --font-head: "Roboto Slab", Georgia, serif;
  --font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg-soft);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--font-head); margin:0 0 .4em; line-height:1.2; color:var(--blue-dark); }
p{ margin:0 0 1em; }
a{ color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }

.container{ max-width:1120px; margin:0 auto; padding:0 24px; }

/* ---------- disclaimer banner ---------- */
.disclaimer-banner{
  background:var(--blue-darker);
  color:#CFE0F2;
  font-size:13px;
  text-align:center;
  padding:9px 16px;
  letter-spacing:.2px;
}
.disclaimer-banner strong{ color:var(--yellow); }

/* ---------- top nav ---------- */
.topnav{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topnav-inner{
  max-width:1120px; margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; }
.brand img{ height:38px; width:auto; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text strong{ font-family:var(--font-head); font-size:16px; color:var(--blue-dark); }
.brand-text span{ font-size:11px; color:var(--ink-soft); letter-spacing:.4px; text-transform:uppercase; }
.nav-links{ display:flex; gap:4px; }
.nav-links a{
  text-decoration:none; font-size:14px; font-weight:500; color:var(--ink-soft);
  padding:8px 14px; border-radius:999px; transition:background .15s,color .15s;
}
.nav-links a:hover{ background:var(--info-bg); color:var(--blue); }
.nav-links a.active{ background:var(--blue); color:#fff; }
.topnav-actions{ display:flex; gap:8px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; border-radius:999px;
  font-size:14px; font-weight:700; padding:11px 22px;
  cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease, background .15s;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.btn-primary{ background:var(--red); color:#fff; box-shadow:0 6px 16px rgba(235,36,43,.35); }
.btn-primary:hover:not(:disabled){ background:#d31e25; }
.btn-blue{ background:var(--blue); color:#fff; box-shadow:0 6px 16px rgba(16,88,164,.32); }
.btn-blue:hover:not(:disabled){ background:#0d4a8f; }
.btn-secondary{ background:#fff; color:var(--blue-dark); border-color:var(--blue); }
.btn-secondary:hover:not(:disabled){ background:var(--info-bg); }
.btn-ghost{ background:transparent; color:var(--ink-soft); border-color:var(--line); }
.btn-ghost:hover:not(:disabled){ background:#fff; color:var(--blue-dark); }
.btn-wa{ background:var(--wa-green); color:#fff; box-shadow:0 6px 16px rgba(37,211,102,.35); }
.btn-wa:hover:not(:disabled){ background:#20bd5a; }
.btn-sm{ padding:7px 14px; font-size:12.5px; }
.btn-block{ width:100%; }

/* inline spinner */
.spin{
  width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:spin .7s linear infinite; flex:none;
}
.spin-dark{ border:2px solid rgba(16,88,164,.25); border-top-color:var(--blue); }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:700; letter-spacing:.3px; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; white-space:nowrap;
}
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-pending{ background:#EDEFF3; color:#5B6B7C; }
.badge-sent{ background:var(--warn-bg); color:var(--warn); }
.badge-overdue{ background:var(--danger-bg); color:var(--danger); }
.badge-paid{ background:var(--success-bg); color:var(--success); }

/* ---------- generic sections ---------- */
.section{ padding:64px 0; }
.section-tight{ padding:40px 0; }
.section-header{ max-width:640px; margin:0 auto 36px; text-align:center; }
.section-header h2{ font-size:30px; }
.section-header p{ color:var(--ink-soft); font-size:15.5px; }
.eyebrow{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--blue); background:var(--info-bg); padding:5px 12px; border-radius:999px; margin-bottom:14px;
}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(160deg, var(--blue-dark) 0%, var(--blue) 62%, #146bc4 100%);
  color:#fff; padding:72px 0 88px; position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; right:-120px; top:-160px; width:480px; height:480px;
  background:radial-gradient(circle, rgba(255,230,6,.18) 0%, transparent 70%);
}
.hero::after{
  content:""; position:absolute; left:-140px; bottom:-180px; width:420px; height:420px;
  background:radial-gradient(circle, rgba(235,36,43,.22) 0%, transparent 70%);
}
.hero-inner{ position:relative; max-width:760px; }
.hero-badge{
  display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700;
  letter-spacing:.5px; text-transform:uppercase; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3); padding:7px 14px; border-radius:999px; margin-bottom:20px;
}
.hero-badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--yellow); animation:pulse 1.8s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1;} 50%{ opacity:.35;} }
.hero h1{ color:#fff; font-size:44px; letter-spacing:-.5px; margin-bottom:18px; }
.hero p.lead{ font-size:17px; color:#D9E7F7; max-width:600px; margin-bottom:30px; }
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; }
.hero-note{
  margin-top:34px; display:flex; gap:10px; align-items:flex-start;
  background:rgba(8,33,56,.35); border:1px solid rgba(255,255,255,.18);
  padding:14px 16px; border-radius:var(--radius-md); max-width:640px; font-size:13.5px; color:#E4EEFA;
}
.hero-note strong{ color:var(--yellow); }

/* ---------- steps timeline ---------- */
.steps{ display:flex; gap:0; }
.step{ flex:1; position:relative; padding:0 16px; text-align:center; }
.step:not(:last-child)::after{
  content:""; position:absolute; top:22px; left:58%; width:calc(100% - 20px); height:2px;
  background:repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
}
.step-num{
  width:44px; height:44px; border-radius:50%; background:var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:700;
  margin:0 auto 14px; position:relative; z-index:1; box-shadow:0 6px 14px rgba(16,88,164,.3);
}
.step h4{ font-size:15px; color:var(--blue-dark); margin-bottom:6px; }
.step p{ font-size:13px; color:var(--ink-soft); margin:0; }

/* ---------- architecture cards ---------- */
.arch-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.arch-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:24px; box-shadow:var(--shadow-sm);
  border-top:4px solid var(--blue);
}
.arch-card.arch-mid{ border-top-color:var(--yellow); }
.arch-card.arch-last{ border-top-color:var(--red); }
.arch-card h3{ font-size:16px; margin-bottom:4px; }
.arch-card .arch-sub{ font-size:12.5px; color:var(--ink-soft); margin-bottom:14px; }
.arch-card ul{ display:flex; flex-direction:column; gap:9px; }
.arch-card li{ font-size:13.5px; color:var(--ink); display:flex; gap:8px; align-items:flex-start; }
.arch-card li::before{ content:"›"; color:var(--red); font-weight:700; }

/* ---------- dependency callout ---------- */
.dep-note{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--info-bg); border:1px solid #cfe0f5; border-radius:var(--radius-md);
  padding:18px 20px; margin-top:28px;
}
.dep-note svg{ flex:none; margin-top:3px; color:var(--blue); }
.dep-note h4{ margin:0 0 6px; font-size:14.5px; color:var(--blue-dark); }
.dep-note p{ margin:0; font-size:13.5px; color:var(--ink-soft); }
.dep-note strong{ color:var(--blue-dark); }

/* ---------- cta band ---------- */
.cta-band{
  background:var(--blue-dark); color:#fff; border-radius:var(--radius-lg);
  padding:40px; text-align:center; margin:0 24px;
}
.cta-band h3{ color:#fff; font-size:24px; }
.cta-band p{ color:#CFE0F2; margin-bottom:22px; }

/* ---------- footer ---------- */
.site-footer{ border-top:1px solid var(--line); padding:28px 0; background:#fff; }
.site-footer .container{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.site-footer p{ margin:0; font-size:12.5px; color:var(--ink-soft); }

/* ---------- dashboard ---------- */
.page-header{ padding:36px 0 6px; }
.page-header h1{ font-size:28px; margin-bottom:6px; }
.page-header p{ color:var(--ink-soft); margin:0; font-size:14.5px; }
.page-header-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }

.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:24px 0 32px; }
.stat-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-md);
  padding:18px 20px; box-shadow:var(--shadow-sm);
}
.stat-card .stat-label{ font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.4px; font-weight:600; margin-bottom:8px; }
.stat-card .stat-value{ font-family:var(--font-head); font-size:28px; color:var(--blue-dark); }
.stat-card .stat-sub{ font-size:12px; color:var(--ink-soft); margin-top:4px; }
.stat-card--blue .stat-value{ color:var(--blue); }
.stat-card--amber .stat-value{ color:var(--warn); }
.stat-card--green .stat-value{ color:var(--success); }
.stat-card--red .stat-value{ color:var(--danger); }

.panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); overflow:hidden; margin-bottom:28px;
}
.panel-head{ padding:18px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.panel-head h2{ font-size:17px; margin:0; }
.panel-head p{ margin:2px 0 0; font-size:12.5px; color:var(--ink-soft); }

.borrower-table{ width:100%; border-collapse:collapse; }
.borrower-table th{
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.4px;
  color:var(--ink-soft); padding:12px 22px; background:#FAFBFC; border-bottom:1px solid var(--line);
}
.borrower-table td{ padding:14px 22px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle; }
.borrower-table tr:last-child td{ border-bottom:none; }
.borrower-table tr:hover td{ background:#FAFBFF; }
.b-name{ font-weight:700; color:var(--blue-dark); }
.b-name span{ display:block; font-weight:400; font-size:12px; color:var(--ink-soft); margin-top:2px; }
.b-amount{ font-family:var(--font-head); font-weight:700; }
.b-sub{ display:block; font-size:11px; color:var(--ink-soft); margin-top:2px; font-weight:400; }
.cell-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.loading-inline{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-soft); }

.activity-list{ display:flex; flex-direction:column; }
.activity-item{ display:flex; gap:12px; padding:13px 22px; border-bottom:1px solid var(--line); font-size:13.5px; }
.activity-item:last-child{ border-bottom:none; }
.activity-dot{ width:8px; height:8px; border-radius:50%; margin-top:6px; flex:none; }
.activity-dot.sent{ background:var(--warn); }
.activity-dot.paid{ background:var(--success); }
.activity-item .a-text strong{ color:var(--blue-dark); }
.activity-item time{ margin-left:auto; font-size:12px; color:var(--ink-soft); white-space:nowrap; }
.empty-state{ padding:30px 22px; text-align:center; color:var(--ink-soft); font-size:13.5px; }

/* ---------- reports / analytics ---------- */
.chart-body{ padding:24px 22px 26px; }
.bar-chart{ display:flex; align-items:flex-end; gap:18px; justify-content:space-between; }
.bar-col{ display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; }
.bar-track{ height:160px; width:100%; max-width:42px; background:#EEF1F4; border-radius:8px; display:flex; align-items:flex-end; overflow:hidden; }
.bar{ width:100%; border-radius:6px 6px 0 0; background:var(--blue); transition:height .3s ease; }
.bar.live{
  background:repeating-linear-gradient(45deg, var(--peach), var(--peach) 6px, #ffe1bd 6px, #ffe1bd 12px);
}
.bar-val{ font-weight:700; font-size:12.5px; color:var(--blue-dark); }
.bar-label{ font-size:11.5px; color:var(--ink-soft); text-align:center; }

.donut-wrap{ display:flex; align-items:center; gap:32px; flex-wrap:wrap; }
.donut{ width:150px; height:150px; border-radius:50%; flex:none; position:relative; }
.donut-hole{
  position:absolute; inset:23%; background:#fff; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px var(--line);
}
.donut-hole strong{ font-family:var(--font-head); font-size:22px; color:var(--blue-dark); line-height:1; }
.donut-hole span{ font-size:10px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.3px; margin-top:2px; }
.donut-legend{ display:flex; flex-direction:column; gap:11px; min-width:190px; }
.legend-item{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink); }
.legend-swatch{ width:10px; height:10px; border-radius:3px; flex:none; }

.perf-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; }
.perf-dot.ok{ background:var(--success); }
.perf-dot.warn{ background:var(--warn); }
.perf-dot.bad{ background:var(--danger); }

.ref-code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background:#EEF1F4; padding:2px 7px; border-radius:6px; font-size:11.5px; color:var(--blue-dark); white-space:nowrap;
}

.audit-toolbar{ padding:16px 22px; border-bottom:1px solid var(--line); }
.audit-search{ position:relative; max-width:360px; }
.audit-search svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--ink-soft); pointer-events:none; }
.audit-search input{
  width:100%; padding:10px 14px 10px 36px; border-radius:999px; border:1.5px solid var(--line); font-size:13.5px; color:var(--ink);
}
.audit-search input:focus{ outline:none; border-color:var(--blue); }

/* ---------- upload modal ---------- */
body.modal-open{ overflow:hidden; }
.modal-backdrop{
  position:fixed; inset:0; z-index:200; background:rgba(8,33,56,.55); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal-card{
  background:#fff; border-radius:var(--radius-lg); max-width:660px; width:100%; max-height:88vh;
  overflow-y:auto; box-shadow:var(--shadow-lg);
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 22px; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff;
}
.modal-head h2{ font-size:18px; margin:0; }
.modal-close{
  background:none; border:none; color:var(--ink-soft); cursor:pointer; padding:6px; border-radius:8px; line-height:0;
}
.modal-close:hover{ background:var(--info-bg); color:var(--blue-dark); }
.modal-body{ padding:22px; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }

.upload-dropzone{
  border:2px dashed var(--line); border-radius:var(--radius-md); padding:26px 20px; text-align:center;
  margin:14px 0; position:relative; transition:border-color .15s;
}
.upload-dropzone:hover{ border-color:var(--blue); }
.upload-dropzone input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.upload-dropzone label{ color:var(--ink-soft); font-size:13.5px; pointer-events:none; }
.upload-dropzone svg{ color:var(--blue); }

.upload-summary{ margin:12px 0; font-size:13px; color:var(--ink-soft); }
.upload-preview-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.upload-preview-table th{
  text-align:left; padding:8px 10px; background:#FAFBFC; border-bottom:1px solid var(--line);
  font-size:10.5px; text-transform:uppercase; letter-spacing:.3px; color:var(--ink-soft);
}
.upload-preview-table td{ padding:8px 10px; border-bottom:1px solid var(--line); }
.upload-preview-table tr.row-invalid td{ background:var(--danger-bg); }

/* ---------- immersive screens (whatsapp / payment) ---------- */
.immersive{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:40px 16px; position:relative;
  background:radial-gradient(circle at 30% 20%, #123f6e 0%, var(--blue-darker) 65%);
}
.back-pill{
  position:fixed; top:18px; left:18px; z-index:50;
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.3);
  padding:9px 16px 9px 12px; border-radius:999px; font-size:13px; font-weight:600;
  text-decoration:none; backdrop-filter:blur(6px);
}
.back-pill:hover{ background:rgba(255,255,255,.24); }

/* ---- phone frame / whatsapp ---- */
.phone-frame{
  width:380px; max-width:100%; height:760px; max-height:88vh;
  background:#000; border-radius:42px; padding:12px;
  box-shadow:var(--shadow-lg); display:flex; flex-direction:column;
}
.phone-screen{
  flex:1; background:#E9DFCF; border-radius:30px; overflow:hidden; display:flex; flex-direction:column; position:relative;
}
.wa-status{ height:26px; background:var(--wa-green-dk); flex:none; }
.wa-header{
  background:var(--wa-green-dk); color:#fff; padding:10px 14px; display:flex; align-items:center; gap:11px; flex:none;
}
.wa-avatar{
  width:38px; height:38px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center;
  overflow:hidden; flex:none;
}
.wa-avatar img{ width:100%; height:100%; object-fit:cover; }
.wa-titles{ line-height:1.25; overflow:hidden; }
.wa-titles strong{ display:block; font-size:14.5px; }
.wa-titles span{ display:block; font-size:11.5px; color:#CFEFE4; }
.wa-body{
  flex:1; overflow-y:auto; padding:16px 12px;
  background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px);
  background-size:14px 14px;
  display:flex; flex-direction:column; gap:4px;
}
.wa-daychip{ align-self:center; background:#DCE6DE; color:#5c6b60; font-size:11px; padding:4px 10px; border-radius:8px; margin:6px 0 10px; }
.wa-msg-tag{ font-size:10px; color:#8a938c; text-transform:uppercase; letter-spacing:.3px; margin:0 0 3px 4px; }
.bubble{
  max-width:82%; padding:8px 10px 6px; border-radius:9px; font-size:13.6px; line-height:1.42;
  box-shadow:0 1px 1px rgba(0,0,0,.08); position:relative; margin-bottom:8px;
}
.bubble-in{ align-self:flex-start; background:#fff; border-top-left-radius:2px; }
.bubble-out{ align-self:flex-end; background:#DCF8C6; border-top-right-radius:2px; }
.bubble .b-time{ display:block; text-align:right; font-size:10.5px; color:#8a938c; margin-top:3px; }
.bubble .b-time .ticks{ color:#53bdeb; margin-left:3px; }

.link-card{
  margin-top:8px; display:flex; align-items:center; gap:10px;
  background:#F5F2E9; border:1px solid rgba(0,0,0,.08); border-radius:8px; padding:10px;
  cursor:pointer; text-align:left; width:100%; font-family:inherit; transition:transform .1s;
}
.link-card:active{ transform:scale(.98); }
.link-icon{
  width:38px; height:38px; border-radius:8px; background:var(--blue); color:#fff; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:17px;
}
.link-card .lc-text{ overflow:hidden; }
.link-card .lc-text strong{ display:block; font-size:12.8px; color:#111; }
.link-card .lc-text span{ display:block; font-size:11px; color:#6b7280; }
.link-card.paid{ cursor:default; background:var(--success-bg); border-color:#bfe6cf; }
.link-card.paid .link-icon{ background:var(--success); }

.wa-inputbar{
  flex:none; background:#F0F0F0; padding:8px 10px; display:flex; align-items:center; gap:8px;
}
.wa-inputbar .fake-input{ flex:1; background:#fff; border-radius:20px; padding:9px 14px; font-size:12.5px; color:#9aa0a6; }
.wa-inputbar .mic{ width:34px; height:34px; border-radius:50%; background:var(--wa-green); color:#fff; display:flex; align-items:center; justify-content:center; flex:none; }

/* ---- payment card ---- */
.pay-card{
  width:420px; max-width:100%; background:#fff; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); overflow:hidden; animation:cardIn .35s ease;
}
@keyframes cardIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }
.pay-topbar{
  background:var(--blue-dark); color:#fff; padding:14px 22px; display:flex; align-items:center; justify-content:space-between; font-size:12px;
}
.pay-topbar .lock{ display:flex; align-items:center; gap:6px; color:#BFE0FF; }
.pay-topbar .brandmark{ font-weight:700; letter-spacing:.3px; }
.pay-body{ padding:26px 26px 28px; }
.pay-merchant{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.pay-merchant img{ width:46px; height:46px; border-radius:10px; object-fit:contain; background:#fff; border:1px solid var(--line); padding:4px; }
.pay-merchant strong{ display:block; font-size:15px; color:var(--blue-dark); }
.pay-merchant .verified{ font-size:11.5px; color:var(--success); display:flex; align-items:center; gap:4px; }
.pay-divider{ border:none; border-top:1px dashed var(--line); margin:18px 0; }
.pay-row{ display:flex; justify-content:space-between; font-size:13px; color:var(--ink-soft); margin-bottom:8px; }
.pay-row strong{ color:var(--ink); font-weight:600; }
.pay-amount-block{ text-align:center; margin:18px 0 22px; }
.pay-amount-block span{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-soft); margin-bottom:4px; }
.pay-amount-block strong{ font-family:var(--font-head); font-size:38px; color:var(--blue-dark); }
.pay-field{ margin-bottom:18px; }
.pay-field label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; }
.pay-field select{
  width:100%; padding:12px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--line);
  font-size:14px; color:var(--ink); background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%234B5C70" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 14px center;
  appearance:none; -webkit-appearance:none;
}
.pay-field select:focus{ outline:none; border-color:var(--blue); }
.pay-fine{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:14px; }

.pay-loading{ text-align:center; padding:28px 6px 8px; }
.pay-loading p{ margin-top:16px; font-size:13.5px; color:var(--ink-soft); }
.pay-loading strong{ color:var(--blue-dark); }

.pay-result{ text-align:center; padding:10px 6px 4px; }
.result-icon{
  width:68px; height:68px; border-radius:50%; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center; animation:popIn .4s cubic-bezier(.2,1.4,.4,1);
}
@keyframes popIn{ from{ transform:scale(0); opacity:0;} to{ transform:scale(1); opacity:1;} }
.result-icon.ok{ background:var(--success-bg); color:var(--success); }
.result-icon.warn{ background:var(--warn-bg); color:var(--warn); }
.pay-result h2{ font-size:20px; margin-bottom:6px; }
.pay-result p{ color:var(--ink-soft); font-size:14px; }
.pay-result .amt{ font-family:var(--font-head); font-size:22px; color:var(--blue-dark); margin:4px 0 14px; }
.pay-result .actions{ display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.callback-note{
  margin-top:18px; background:var(--info-bg); border-radius:var(--radius-sm); padding:10px 12px;
  font-size:12px; color:var(--blue-dark); text-align:left; display:flex; gap:8px;
}

/* ---------- toasts ---------- */
.toast-root{ position:fixed; bottom:20px; right:20px; z-index:100; display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.toast{
  background:#fff; border-left:4px solid var(--success); box-shadow:var(--shadow-md);
  border-radius:10px; padding:12px 16px; font-size:13.5px; max-width:320px;
  animation:toastIn .25s ease; color:var(--ink);
}
.toast.info{ border-left-color:var(--blue); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }

/* ---------- misc ---------- */
.muted{ color:var(--ink-soft); }
.mt-0{ margin-top:0; }

/* ---------- responsive ---------- */
@media (max-width: 860px){
  .arch-grid{ grid-template-columns:1fr; }
  .steps{ flex-direction:column; gap:22px; }
  .step:not(:last-child)::after{ display:none; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .hero h1{ font-size:34px; }
  .nav-links{ display:none; }
}
@media (max-width: 720px){
  .borrower-table thead{ display:none; }
  .borrower-table, .borrower-table tbody, .borrower-table tr, .borrower-table td{ display:block; width:100%; }
  .borrower-table tr{ padding:14px 18px; border-bottom:1px solid var(--line); }
  .borrower-table td{ border:none; padding:4px 0; }
  .borrower-table td[data-label]::before{
    content: attr(data-label); display:block; font-size:10.5px; text-transform:uppercase;
    letter-spacing:.4px; color:var(--ink-soft); margin-bottom:2px;
  }
  .cta-band{ margin:0 16px; padding:30px 20px; }
}
@media (max-width: 480px){
  .stats-grid{ grid-template-columns:1fr 1fr; }
  .hero{ padding:56px 0 64px; }
  .hero h1{ font-size:28px; }
  .phone-frame{ border-radius:28px; height:88vh; }
  .phone-screen{ border-radius:18px; }
  .pay-body{ padding:22px 18px 24px; }
  .bar-chart{ gap:8px; }
  .bar-track{ max-width:28px; }
  .donut-wrap{ justify-content:center; }
}