:root {
  --primary-color: #2563eb;
  --primary-hover: #1d4ed8;
  --bg-color: #f8fafc;
  --card-bg: #ffffff;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --border-color: #e2e8f0;
  --sidebar-width: 250px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
}

body {
  background-color: var(--bg-color);
  color: var(--text-main);
  height: 100vh;
  overflow-x: hidden;
}

.hidden {
  display: none !important;
}

/* Login View */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.login-card {
  background: #ffffff;
  padding: 32px;
  border-radius: 12px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 8px;
}

.subtitle {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 24px;
}

/* Dashboard Layout */
.app-wrapper {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: var(--sidebar-width);
  background: #0f172a;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.sidebar-brand {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #1e293b;
}

.logo-icon {
  width: 36px;
  height: 36px;
  background: var(--primary-color);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.nav-section {
  padding: 16px 20px 8px;
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.nav-menu {
  list-style: none;
}

.nav-menu li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  color: #94a3b8;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s;
}

.nav-menu li:hover a, .nav-menu li.active a {
  color: #fff;
  background: #1e293b;
  border-left: 4px solid var(--primary-color);
}

.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.sub-text {
  font-size: 13px;
  color: var(--text-muted);
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 36px;
  height: 36px;
  background: #e2e8f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 13px;
  font-weight: 600;
}

.user-role {
  font-size: 11px;
  color: var(--text-muted);
}

.btn-logout {
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  padding: 8px;
  font-size: 16px;
}

/* Stats Cards */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--card-bg);
  padding: 16px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
}

.bg-blue { background: #2563eb; }
.bg-amber { background: #f59e0b; }
.bg-emerald { background: #10b981; }
.bg-purple { background: #8b5cf6; }
.bg-teal { background: #0f766e; }
.bg-indigo { background: #4f46e5; }
.bg-slate { background: #475569; }
.bg-rose { background: #e11d48; }

.stat-info .label {
  font-size: 12px;
  color: var(--text-muted);
}

.stat-info h3 {
  font-size: 18px;
  font-weight: 700;
}

/* Cards & Forms */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 24px;
}

.card-header {
  margin-bottom: 16px;
}

.card-header h3 {
  font-size: 15px;
  font-weight: 600;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.form-group input, .form-group select {
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 13px;
  outline: none;
}

.form-group input:focus, .form-group select:focus {
  border-color: var(--primary-color);
}

/* Buttons */
.btn {
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-primary { background: var(--primary-color); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-success { background: #10b981; color: #fff; }
.btn-block { width: 100%; justify-content: center; }

/* Tables */
.table-responsive {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

th {
  background: #f8fafc;
  color: var(--text-muted);
  font-weight: 600;
}

.text-center { text-align: center; }

/* Badges */
.badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}

.badge-approved { background: #d1fae5; color: #047857; }
.badge-pending { background: #fef3c7; color: #b45309; }
.badge-not-submitted { background: #f1f5f9; color: #475569; }
.badge-rejected { background: #fee2e2; color: #b91c1c; }

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.modal-card {
  background: #fff;
  width: 100%;
  max-width: 450px;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.2);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 16px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--text-muted);
}
/* KYC capture, record preview and A4 print */
.kyc-photo-preview{display:block;width:96px;height:124px;object-fit:cover;border:1px solid var(--border-color);border-radius:6px;margin-top:10px}
.kyc-view-modal-card{max-width:900px;max-height:94vh;overflow:auto}
.kyc-a4-sheet{background:#fff;color:#172033;border:1px solid #dbe2ea;padding:30px;max-width:780px;margin:0 auto;font-size:13px}
.kyc-document-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #1d4ed8;padding-bottom:14px;gap:20px}
.kyc-brand{font-size:26px;font-weight:800;color:#1d4ed8;letter-spacing:2px}
.kyc-doc-subtitle{font-size:10px;letter-spacing:1px;margin-top:5px;color:#64748b}
.kyc-a4-photo{width:132px;height:170px;object-fit:cover;border:1px solid #94a3b8}
.kyc-photo-placeholder{width:132px;height:170px;border:1px dashed #94a3b8;display:grid;place-items:center;text-align:center;color:#64748b}
.kyc-doc-title{text-align:center;margin:24px 0 16px;font-size:22px}
.kyc-status-line{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#eff6ff;padding:12px;margin-bottom:20px}
.kyc-a4-sheet h3{font-size:14px;margin:20px 0 9px}
.kyc-detail-table{width:100%;border-collapse:collapse}
.kyc-detail-table th,.kyc-detail-table td{border:1px solid #cbd5e1;padding:12px;text-align:left}
.kyc-detail-table th{width:34%;background:#f8fafc}
.kyc-doc-list{line-height:2.2}.kyc-doc-list a{color:#1d4ed8}.kyc-missing{color:#64748b}
.kyc-declaration{margin-top:24px;padding:12px;background:#f8fafc;border:1px solid #e2e8f0;line-height:1.6}
.kyc-signatures{display:flex;justify-content:space-between;gap:30px;margin-top:55px}
.kyc-signatures div{width:42%;border-top:1px solid #334155;padding-top:8px;text-align:center}
.kyc-footer{margin-top:30px;border-top:1px solid #e2e8f0;padding-top:8px;text-align:center;color:#64748b;font-size:10px}
.kyc-print-actions{display:flex;justify-content:center;gap:10px;margin-top:16px}
@media(max-width:600px){.kyc-a4-sheet{padding:16px}.kyc-a4-photo,.kyc-photo-placeholder{width:90px;height:116px}.kyc-view-modal-card{padding:12px;max-height:96vh}.kyc-detail-table th,.kyc-detail-table td{padding:8px}}
@media print{@page{size:A4;margin:15mm}.no-print{display:none!important}.kyc-a4-sheet{border:0;padding:0;max-width:none}.kyc-view-modal-card{max-width:none;max-height:none;overflow:visible}.kyc-detail-table{break-inside:avoid}}

/* Organized customer + nominee KYC workflow */
.kyc-form-card{padding:clamp(14px,2vw,26px)}
.kyc-heading p{margin:7px 0 0;color:var(--text-muted);font-size:13px}
.kyc-form-section{border:1px solid #e2e8f0;border-radius:12px;padding:18px;margin:18px 0;background:#fff}
.kyc-section-title{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.kyc-section-title>span{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:10px;background:#eaf1ff;color:#1d4ed8;font-weight:800}
.kyc-section-title h4{font-size:15px;margin:0 0 4px;color:#172033}
.kyc-section-title small,.kyc-upload-card small{font-size:12px;line-height:1.5;color:#64748b}
.kyc-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:0}
.kyc-grid .form-group{min-width:0}
.kyc-grid .form-group input,.kyc-grid .form-group select{width:100%;min-width:0;box-sizing:border-box;min-height:42px}
.kyc-upload-card{padding:13px;border:1px dashed #cbd5e1;border-radius:10px;background:#f8fafc;align-self:stretch}
.kyc-upload-card label{color:#334155;font-weight:650}
.kyc-file-actions{display:flex;flex-direction:column;align-items:stretch;gap:9px}
.kyc-file-actions input[type=file]{font-size:12px;background:#fff;max-width:100%;padding:8px}
.kyc-camera-btn{justify-content:center;background:#eef2ff;color:#1d4ed8;border:1px solid #c7d2fe;padding:9px 12px}
.kyc-camera-btn:hover{background:#e0e7ff}
.kyc-photo-preview{width:96px;height:124px;object-fit:cover;border-radius:8px;background:#fff}
.kyc-form-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:8px}
.kyc-form-footer small{color:#64748b;line-height:1.5;max-width:560px}
.kyc-form-footer button:disabled{opacity:.65;cursor:wait}
.kyc-camera-modal-card{max-width:640px;width:calc(100% - 28px)}
#kyc-camera-video{display:block;width:100%;max-height:60vh;min-height:220px;object-fit:contain;background:#0f172a;border-radius:10px}
#kyc-camera-help{font-size:13px;color:#64748b;margin:12px 0}
.kyc-camera-actions{display:flex;gap:10px;justify-content:flex-end}
@media(max-width:900px){.kyc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.kyc-form-section{padding:13px;margin:14px 0}.kyc-grid{grid-template-columns:minmax(0,1fr);gap:13px}.kyc-form-footer{align-items:stretch;flex-direction:column}.kyc-form-footer .btn{width:100%;justify-content:center}.kyc-file-actions input[type=file]{width:100%;font-size:11px}.kyc-camera-actions .btn{flex:1;justify-content:center}}

/* KYC form refinement: aligned details and compact, repeatable document rows */
.kyc-form-card{max-width:100%;}
.kyc-form-section{min-width:0;}
.kyc-details-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;}
.kyc-photo-row{display:grid;grid-template-columns:minmax(240px,340px);gap:14px;margin:4px 0 22px;}
.kyc-photo-field{display:flex;flex-direction:column;align-items:stretch;gap:9px;padding:14px;border:1px solid var(--border-color);border-radius:10px;background:#f8fafc;min-width:0;}
.kyc-photo-field input[type=file]{width:100%;min-width:0;padding:9px;border:1px solid var(--border-color);border-radius:7px;background:#fff;font-size:12px;}
.kyc-photo-field .kyc-camera-btn{width:100%;}
.kyc-photo-preview{margin:2px auto 0;width:100px;height:130px;object-fit:cover;}
.kyc-doc-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 12px;}
.kyc-doc-toolbar b{font-size:14px;color:var(--text-main);}
.kyc-add-doc{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;padding:8px 12px;white-space:nowrap;}
.kyc-doc-rows{display:flex;flex-direction:column;gap:10px;}
.kyc-doc-row{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(220px,1.35fr) minmax(150px,.8fr);align-items:end;gap:12px;padding:13px;border:1px solid var(--border-color);border-radius:9px;background:#fbfdff;min-width:0;}
.kyc-doc-row .form-group{min-width:0;display:flex;flex-direction:column;gap:7px;}
.kyc-doc-row label{font-size:12px;font-weight:600;color:#475569;}
.kyc-doc-row select,.kyc-doc-row input[type=file]{width:100%;min-width:0;min-height:42px;border:1px solid var(--border-color);border-radius:7px;background:#fff;padding:9px;font-size:12px;}
.kyc-doc-row-actions{display:flex;gap:8px;align-items:center;}
.kyc-doc-row-actions .btn{flex:1;min-width:0;justify-content:center;padding:10px 9px;font-size:12px;}
.kyc-remove-doc{background:#fff1f2;color:#be123c;border:1px solid #fecdd3;}
.kyc-file-name{font-size:11px;color:var(--text-muted);overflow-wrap:anywhere;}
@media(max-width:1000px){.kyc-details-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.kyc-doc-row{grid-template-columns:repeat(2,minmax(0,1fr));}.kyc-doc-row-actions{grid-column:1/-1;}}
@media(max-width:620px){.kyc-details-grid{grid-template-columns:minmax(0,1fr);}.kyc-photo-row{grid-template-columns:minmax(0,1fr);}.kyc-doc-row{grid-template-columns:minmax(0,1fr);padding:12px;}.kyc-doc-row-actions{grid-column:auto;}.kyc-doc-toolbar{align-items:flex-start;}.kyc-form-section{padding:14px;}.kyc-section-title{align-items:flex-start;}}


/* KYC usability polish: compact, aligned fields and document rows (no bulky upload cards). */
#kyc-submit-form{display:flex;flex-direction:column;gap:2px}
#kyc-submit-form .kyc-form-section{margin:12px 0;padding:clamp(14px,1.8vw,22px);background:#fff;border:1px solid #dbe3ef;border-radius:12px;min-width:0}
#kyc-submit-form .kyc-section-title{align-items:flex-start;margin-bottom:18px}
#kyc-submit-form .kyc-section-title>div{min-width:0}
#kyc-submit-form .kyc-section-title small{display:block;max-width:760px}
#kyc-submit-form .kyc-details-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 18px}
#kyc-submit-form .form-group{min-width:0}
#kyc-submit-form .form-group>label{display:block;line-height:1.35;margin-bottom:7px}
#kyc-submit-form input:not([type=file]),#kyc-submit-form select{max-width:100%;box-sizing:border-box}
#kyc-submit-form .kyc-photo-row{display:grid;grid-template-columns:minmax(0,340px);gap:14px}
#kyc-submit-form .kyc-photo-field{padding:14px;border:1px solid #dbe3ef;border-radius:10px;background:#f8fafc}
#kyc-submit-form .kyc-photo-field input[type=file]{width:100%;min-width:0;box-sizing:border-box}
#kyc-submit-form .kyc-doc-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:18px 0 10px}
#kyc-submit-form .kyc-doc-rows{display:flex;flex-direction:column;gap:8px}
#kyc-submit-form .kyc-doc-row{display:grid;grid-template-columns:minmax(170px,.8fr) minmax(220px,1.25fr) minmax(210px,.9fr);gap:12px;align-items:end;padding:12px;border:1px solid #e2e8f0;border-radius:8px;background:#fbfdff;min-width:0}
#kyc-submit-form .kyc-doc-row select,#kyc-submit-form .kyc-doc-row input[type=file]{width:100%;min-width:0;box-sizing:border-box}
#kyc-submit-form .kyc-doc-row-actions{display:flex;gap:8px;min-width:0}
#kyc-submit-form .kyc-doc-row-actions .btn{min-width:0;white-space:nowrap}
#kyc-submit-form .kyc-captured-name{display:block;color:#166534;font-size:12px;overflow-wrap:anywhere;margin-top:6px}
#kyc-submit-form .kyc-form-footer{margin-top:8px}
@media(max-width:1050px){
 #kyc-submit-form .kyc-details-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #kyc-submit-form .kyc-doc-row{grid-template-columns:repeat(2,minmax(0,1fr))}
 #kyc-submit-form .kyc-doc-row-actions{grid-column:1/-1}
}
@media(max-width:640px){
 #kyc-submit-form .kyc-form-section{padding:13px;margin:10px 0}
 #kyc-submit-form .kyc-details-grid,#kyc-submit-form .kyc-doc-row{grid-template-columns:minmax(0,1fr);gap:12px}
 #kyc-submit-form .kyc-doc-row-actions{grid-column:auto}
 #kyc-submit-form .kyc-doc-row-actions .btn{flex:1}
 #kyc-submit-form .kyc-photo-row{grid-template-columns:minmax(0,1fr)}
 #kyc-submit-form .kyc-doc-toolbar{align-items:flex-start}
 #kyc-submit-form .kyc-add-doc{white-space:normal}
}

/* Savings operations responsive layout */
.savings-actions { min-width: 270px; display: table-cell; }
.savings-actions .btn { margin: 2px 2px 2px 0; white-space: nowrap; }
#tab-savings .table-responsive { max-width: 100%; }
#tab-savings table { min-width: 760px; }
@media (max-width: 760px) {
  #tab-savings .card { padding: 14px; }
  #tab-savings .form-grid { grid-template-columns: 1fr; }
  #tab-savings .card-header h3 { line-height: 1.4; }
  #tab-savings .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #tab-savings table { min-width: 760px; }
}


/* Savings workflow: in-app transaction, ledger and receipt modal */
.savings-modal-card{width:min(1100px,calc(100vw - 32px));max-width:1100px;max-height:88vh;overflow:auto;padding:22px}
#savings-modal-content{min-width:0}
.savings-modal-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:18px;padding-top:14px;border-top:1px solid #e2e8f0}
.savings-transaction-form .form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.savings-account-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}
.savings-account-summary>div{background:#f8fafc;border:1px solid #e2e8f0;border-radius:9px;padding:12px;min-width:0}
.savings-account-summary small{display:block;color:#64748b;margin-bottom:5px}
.savings-account-summary strong{display:block;overflow-wrap:anywhere;color:#0f172a}
.savings-inline-message{padding:10px 12px;border-radius:8px;background:#ecfdf5;color:#166534;margin:12px 0}
.savings-inline-message.error{background:#fef2f2;color:#b91c1c}
.savings-form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.savings-document{background:#fff;color:#111;font-family:Arial,sans-serif;font-size:13px;padding:10px}
.savings-document h1{font-size:21px;text-align:center;margin:0 0 24px}
.savings-document h2{font-size:17px;margin:0 0 12px}
.savings-document .meta{line-height:1.8;margin-bottom:24px}
.savings-document .summary{text-align:right;margin-top:42px;font-weight:600}
.savings-document table{width:100%;border-collapse:collapse;font-size:12px;min-width:0!important}
.savings-document th,.savings-document td{padding:7px 8px;border-bottom:1px solid #222;text-align:left}
.savings-document th{font-weight:500}
.savings-document td.num,.savings-document th.num{text-align:right}
.savings-document .receipt{max-width:760px;margin:auto;border:1px solid #bbb;padding:28px}
@media(max-width:760px){
 .savings-modal-card{width:calc(100vw - 18px);max-height:92vh;padding:14px}
 .savings-transaction-form .form-grid,.savings-account-summary{grid-template-columns:1fr}
 .savings-modal-actions .btn{flex:1}
 .savings-document{padding:0;overflow-x:auto}
}
@media print{
 body.savings-printing>*:not(#savings-modal){display:none!important}
 body.savings-printing #savings-modal{display:block!important;position:static!important;background:#fff!important;backdrop-filter:none!important;padding:0!important}
 body.savings-printing #savings-modal .savings-modal-card{width:100%!important;max-width:none!important;max-height:none!important;overflow:visible!important;box-shadow:none!important;border:0!important;padding:0!important;margin:0!important}
 body.savings-printing #savings-modal .modal-header,
 body.savings-printing #savings-modal .savings-modal-actions{display:none!important}
 body.savings-printing #savings-modal-content{display:block!important}
 body.savings-printing .savings-document{padding:0!important}
 body.savings-printing .savings-document .receipt{max-width:none!important;border:0!important;padding:0!important}
 @page{size:A4;margin:16mm}
}


/* Shared list UX: internal scrolling, live search, and compact mobile layout.
   Apply to every .table-responsive list, including sections added later. */
.smart-list-toolbar {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:0 0 8px; width:100%;
}
.smart-list-search {
  width:min(100%, 360px); min-width:0; padding:10px 12px;
  border:1px solid #dbe3ef; border-radius:9px; background:#fff; color:#172033;
  font:inherit; outline:none;
}
.smart-list-search:focus { border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.smart-list-count { color:#64748b; font-size:12px; white-space:nowrap; }
.table-responsive.smart-list-scroll {
  max-height: min(430px, 58vh); overflow:auto; overscroll-behavior:contain;
  border-radius:10px; -webkit-overflow-scrolling:touch;
}
.table-responsive.smart-list-scroll table { min-width:680px; margin-bottom:0; }
.table-responsive.smart-list-scroll thead th { position:sticky; top:0; z-index:2; background:#f8fafc; }
.show-paid-toggle { display:inline-flex; align-items:center; gap:8px; margin-top:8px; color:#475569; font-size:14px; cursor:pointer; }
.show-paid-toggle input { width:18px; height:18px; accent-color:#2563eb; }
@media (max-width: 700px) {
  .smart-list-toolbar { align-items:stretch; }
  .smart-list-search { width:100%; flex:1; font-size:16px; }
  .table-responsive.smart-list-scroll { max-height:52vh; }
  .table-responsive.smart-list-scroll table { min-width:720px; }
  .show-paid-toggle { min-height:40px; }
}


/* Mobile navigation and reliable app-wide list controls (responsive fix v2). */
.mobile-menu-toggle,.sidebar-backdrop{display:none}
@media (max-width: 900px) {
  #dashboard-view.app-wrapper { position:relative; width:100%; min-width:0; overflow:hidden; }
  #dashboard-view .sidebar {
    position:fixed; z-index:1005; inset:0 auto 0 0; width:min( min(82vw, 310px), 100% );
    height:100dvh; height:100vh; overflow-y:auto; flex:0 0 auto;
    transform:translateX(-105%); transition:transform .22s ease; box-shadow:12px 0 28px rgba(15,23,42,.18);
  }
  #dashboard-view.mobile-nav-open .sidebar { transform:translateX(0); }
  #dashboard-view .sidebar-backdrop { display:block; position:fixed; inset:0; z-index:1000; background:rgba(2,6,23,.52); opacity:0; visibility:hidden; transition:opacity .2s ease,visibility .2s ease; }
  #dashboard-view.mobile-nav-open .sidebar-backdrop { opacity:1; visibility:visible; }
  #dashboard-view .main-content { width:100%; min-width:0; max-width:100%; flex:1 1 auto; padding:18px 14px 24px; overflow-x:hidden; }
  #dashboard-view .topbar { gap:10px; align-items:flex-start; }
  #dashboard-view .page-title { min-width:0; flex:1; }
  #dashboard-view .page-title h2 { font-size:clamp(20px,5vw,27px); line-height:1.25; overflow-wrap:anywhere; }
  #dashboard-view .user-profile { gap:8px; }
  #dashboard-view .user-details { display:none; }
  #dashboard-view .mobile-menu-toggle { display:inline-flex; position:relative; z-index:2; flex:0 0 42px; width:42px; height:42px; align-items:center; justify-content:center; border:1px solid #dbe3ef; border-radius:10px; background:#fff; color:#0f172a; font-size:18px; box-shadow:0 1px 3px rgba(15,23,42,.08); }
  #dashboard-view .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  #dashboard-view .stat-card { min-width:0; padding:12px; gap:10px; }
  #dashboard-view .stat-icon { flex:0 0 42px; width:42px; height:42px; }
  #dashboard-view .stat-info { min-width:0; }
  #dashboard-view .stat-info .label { font-size:12px; }
  #dashboard-view .stat-info h3 { font-size:20px; overflow-wrap:anywhere; }
  #dashboard-view .card { min-width:0; padding:14px; }
  #dashboard-view .form-grid { grid-template-columns:minmax(0,1fr)!important; }
  #dashboard-view .table-responsive.smart-list-scroll { width:100%; max-width:100%; max-height:48vh; overflow:auto; overscroll-behavior:contain; }
  #dashboard-view .smart-list-toolbar { display:flex; flex-wrap:wrap; width:100%; }
  #dashboard-view .smart-list-search { display:block; width:100%; min-width:0; min-height:42px; font-size:16px; }
  #dashboard-view .smart-list-count { width:100%; }
  #dashboard-view .table-responsive.smart-list-scroll table { min-width:700px; }
  #tab-savings .savings-actions { min-width:260px; }
  #tab-savings .savings-actions .btn { min-height:32px; margin:3px; }
  .show-paid-toggle { min-height:44px; padding:5px 0; }
}
@media (max-width: 420px) {
  #dashboard-view .main-content { padding:14px 10px 20px; }
  #dashboard-view .stats-grid { grid-template-columns:minmax(0,1fr); }
  #dashboard-view .topbar { flex-wrap:wrap; }
  #dashboard-view .page-title { flex-basis:calc(100% - 54px); }
  #dashboard-view .user-profile { margin-left:auto; }
}


/* App-wide internal list scrolling: keep long directories inside their own cards. */
#dashboard-view .table-responsive.smart-list-scroll {
  display:block; width:100%; max-width:100%;
  max-height:min(52vh, 560px); overflow:auto;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable; border-radius:8px;
}
#dashboard-view .table-responsive.smart-list-scroll table { margin-bottom:0; }
#dashboard-view .table-responsive.smart-list-scroll thead th { position:sticky; top:0; z-index:2; background:#f8fafc; }
#dashboard-view .card { min-width:0; }
@media(max-width:900px) {
  #dashboard-view .table-responsive.smart-list-scroll { max-height:42vh; }
}

/* Customer-facing app-style dashboard */
.customer-portal { min-height:100vh; background:#f3f6fb; color:#172033; }
.customer-portal-top { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px clamp(16px,4vw,40px); background:#fff; border-bottom:1px solid #e2e8f0; box-shadow:0 2px 10px rgba(15,23,42,.04); }
.customer-brand,.customer-welcome { display:flex; align-items:center; gap:12px; }
.customer-brand-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; color:#fff; background:#2563eb; font-size:20px; }
.customer-brand strong,.customer-brand small { display:block; }
.customer-brand strong { font-size:18px; }
.customer-brand small { color:#64748b; font-size:12px; margin-top:2px; }
.customer-welcome { font-weight:600; }
.customer-portal-main { width:min(1160px,100%); margin:0 auto; padding:clamp(16px,3vw,32px); }
.customer-hero { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:clamp(22px,4vw,38px); border-radius:22px; color:#fff; background:linear-gradient(120deg,#1d4ed8,#2563eb 55%,#4f46e5); box-shadow:0 12px 30px rgba(37,99,235,.16); }
.customer-hero .eyebrow { font-size:11px; letter-spacing:1.5px; font-weight:700; opacity:.8; }
.customer-hero h1 { font-size:clamp(24px,4vw,34px); margin:8px 0; }
.customer-hero p { margin:0; color:#dbeafe; line-height:1.5; }
.customer-hero .customer-status { background:#fff; color:#1d4ed8; }
.customer-status { display:inline-flex; align-items:center; border-radius:999px; padding:7px 11px; background:#e8f7ee; color:#166534; font-size:12px; font-weight:700; white-space:nowrap; }
.customer-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:20px 0; }
.customer-summary { display:flex; flex-direction:column; gap:10px; padding:20px; background:#fff; border:1px solid #e2e8f0; border-radius:16px; box-shadow:0 4px 14px rgba(15,23,42,.025); min-width:0; }
.customer-summary span { color:#64748b; font-size:13px; }
.customer-summary strong { font-size:clamp(20px,2.5vw,27px); overflow-wrap:anywhere; }
.customer-panel { margin-top:18px; padding:clamp(15px,2.5vw,24px); background:#fff; border:1px solid #e2e8f0; border-radius:18px; box-shadow:0 4px 14px rgba(15,23,42,.025); min-width:0; }
.customer-panel-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.customer-panel-heading h2 { font-size:18px; margin:0; }
.customer-panel-heading h2 i { color:#2563eb; margin-right:7px; }
.customer-panel-heading p { color:#64748b; font-size:13px; margin-top:5px; }
.customer-account-list { display:grid; gap:14px; }
.portal-account-card,.portal-simple-card { border:1px solid #e2e8f0; border-radius:14px; padding:16px; min-width:0; }
.portal-account-head { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.portal-account-head small,.portal-account-balance small { display:block; color:#64748b; font-size:11px; letter-spacing:.6px; }
.portal-account-head strong { display:block; margin-top:5px; overflow-wrap:anywhere; }
.portal-account-balance { margin:16px 0; padding:14px; border-radius:11px; background:#f1f5ff; }
.portal-account-balance strong { display:block; margin-top:4px; font-size:24px; }
.portal-mini-table-wrap { max-width:100%; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.portal-mini-table { width:100%; min-width:540px; border-collapse:collapse; font-size:13px; }
.portal-mini-table th,.portal-mini-table td { padding:11px 10px; border-bottom:1px solid #e2e8f0; text-align:left; white-space:nowrap; }
.portal-mini-table th { color:#64748b; background:#f8fafc; font-weight:600; }
.portal-positive { color:#15803d; font-weight:600; }
.portal-negative { color:#dc2626; font-weight:600; }
.portal-simple-card { display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; }
.portal-simple-card strong { width:100%; }
.portal-simple-card span { color:#475569; font-size:13px; }
.portal-empty { padding:18px; text-align:center; color:#64748b; background:#f8fafc; border-radius:12px; }
.customer-portal-foot { text-align:center; color:#64748b; font-size:12px; padding:22px 8px; }
@media(max-width:760px) {
  .customer-portal-top { padding:11px 14px; }
  .customer-welcome { gap:8px; font-size:13px; }
  .customer-welcome .btn { padding:9px 10px; font-size:12px; }
  .customer-hero { align-items:flex-start; flex-direction:column; border-radius:17px; }
  .customer-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .customer-summary { padding:15px; border-radius:14px; }
  .customer-panel { border-radius:15px; }
}
@media(max-width:380px) {
  .customer-summary-grid { grid-template-columns:1fr; }
  .customer-brand-icon { width:36px; height:36px; }
}

@media(max-width:760px) {
  #dashboard-view .main-content { padding:14px 12px 24px; }
  #dashboard-view .topbar { align-items:flex-start; gap:12px; }
  #dashboard-view .page-title h2 { font-size:clamp(21px,5.5vw,27px); line-height:1.25; }
  #dashboard-view .sub-text { display:block; font-size:13px; line-height:1.45; }
  #dashboard-view .card { border-radius:16px; margin-bottom:16px; }
  #dashboard-view .card-header { gap:12px; }
  #dashboard-view .card-header h3 { font-size:17px; }
  #dashboard-view .form-group input,#dashboard-view .form-group select { min-height:48px; font-size:16px; }
  #dashboard-view .btn { min-height:44px; }
  #dashboard-view .table-responsive.smart-list-scroll { overscroll-behavior-y:contain; }
}

/* Mobile app shell: keep the menu button floating so it never reserves a blank left rail. */
@media (max-width:900px) {
  #dashboard-view.app-wrapper { display:block; width:100%; min-width:0; }
  #dashboard-view .main-content { display:block; width:100%; margin:0; }
  #dashboard-view .mobile-menu-toggle { position:fixed; top:calc(env(safe-area-inset-top, 0px) + 10px); left:10px; z-index:1006; }
  #dashboard-view .topbar { padding-left:52px; }
  #dashboard-view .sidebar { flex:none; }
}
@media (max-width:420px) {
  #dashboard-view .main-content { padding-left:12px; padding-right:12px; }
  #dashboard-view .topbar { padding-left:50px; }
}

/* WhatsApp send choice */
.whatsapp-choice-overlay { z-index:1200; }
.whatsapp-choice-card { width:min(520px, calc(100vw - 28px)); padding:20px; }
.whatsapp-choice-intro { color:#64748b; margin:4px 0 16px; }
.whatsapp-choice-action { width:100%; display:flex; align-items:center; justify-content:flex-start; gap:14px; text-align:left; padding:14px 16px; margin:10px 0; min-height:68px; }
.whatsapp-choice-action > i { font-size:22px; flex:0 0 28px; }
.whatsapp-choice-action span { display:flex; flex-direction:column; gap:4px; }
.whatsapp-choice-action small { font-size:12px; line-height:1.45; opacity:.82; white-space:normal; }
.whatsapp-choice-note { background:#f8fafc; border:1px solid #e2e8f0; color:#475569; border-radius:10px; padding:12px; font-size:12px; line-height:1.5; margin-top:14px; }
.whatsapp-choice-footer { display:flex; justify-content:flex-end; margin-top:14px; }
.smartpay-action-notice { position:fixed; z-index:1300; left:50%; bottom:24px; transform:translate(-50%,16px); opacity:0; pointer-events:none; width:min(560px,calc(100vw - 28px)); background:#0f172a; color:#fff; padding:13px 16px; border-radius:12px; box-shadow:0 10px 30px #0003; font-size:14px; line-height:1.5; transition:opacity .18s,transform .18s; }
.smartpay-action-notice.visible { opacity:1; transform:translate(-50%,0); }
@media(max-width:600px) { .whatsapp-choice-card { padding:16px; } .whatsapp-choice-action { min-height:74px; } }

/* Mobile page-scroll fix: let the document grow vertically instead of clipping
   the dashboard at 100vh. Keep the sidebar as an overlay, but make all page
   content reachable with normal one-finger browser scrolling. */
@media (max-width: 900px) {
  html, body {
    height: auto !important;
    min-height: 100%;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  #dashboard-view.app-wrapper {
    display: block !important;
    height: auto !important;
    min-height: 100dvh;
    min-height: 100vh;
    overflow: visible !important;
  }
  #dashboard-view .main-content {
    display: block !important;
    height: auto !important;
    min-height: 100dvh;
    min-height: 100vh;
    overflow: visible !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
  }
  #dashboard-view .sidebar {
    position: fixed !important;
    top: 0;
    bottom: 0;
    height: 100dvh !important;
    max-height: 100vh;
    overflow-y: auto !important;
  }
}


/* Final mobile scroll + focused navigation correction.
   Mobile uses the document as the only vertical scroller; dashboard summaries
   collapse after a section is selected so the chosen module is immediately reachable. */
@media (max-width: 900px) {
  html { height: auto !important; min-height: 100% !important; overflow-y: auto !important; }
  body {
    height: auto !important; min-height: 100dvh !important; min-height: 100vh !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    position: static !important;
  }
  #dashboard-view.app-wrapper,
  #dashboard-view.app-wrapper:not(.hidden) {
    display: block !important; position: relative !important;
    height: auto !important; min-height: 100dvh !important; min-height: 100vh !important;
    max-height: none !important; overflow: visible !important;
  }
  #dashboard-view .main-content {
    display: block !important; position: relative !important;
    height: auto !important; min-height: 100dvh !important; min-height: 100vh !important;
    max-height: none !important; overflow: visible !important;
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)) !important;
    touch-action: pan-y;
  }
  #dashboard-view .tab-panel { position: static !important; height: auto !important; overflow: visible !important; }
  #dashboard-view.mobile-tab-active .stats-grid { display: none !important; }
  #dashboard-view .sidebar {
    position: fixed !important; inset: 0 auto 0 0 !important;
    height: 100dvh !important; max-height: 100dvh !important;
    overflow-x: hidden !important; overflow-y: auto !important;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  #dashboard-view .sidebar-backdrop { position: fixed !important; }
}

/* Dashboard can be reopened from the mobile drawer without reloading. */
#dashboard-view .stats-grid[hidden] { display:none !important; }
#dashboard-view .sidebar-brand[role="button"] { cursor:pointer; }
#dashboard-view .sidebar-brand[role="button"]:focus-visible { outline:2px solid #60a5fa; outline-offset:3px; }

/* Consistent focused navigation on desktop and mobile. Selecting a module
   hides dashboard metrics and brings the selected section into view. */
#dashboard-view .tab-panel { scroll-margin-top: 16px; }
#dashboard-view .stats-grid[hidden] { display: none !important; }
#dashboard-view.module-selected .stats-grid { display: none !important; }
#dashboard-view .main-content { scroll-behavior: smooth; }
@media (min-width: 901px) {
  #dashboard-view .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #dashboard-view .stat-card { min-width: 0; }
  #dashboard-view .stat-info .label { overflow-wrap: anywhere; }
}
@media (max-width: 900px) {
  #dashboard-view .tab-panel { scroll-margin-top: 12px; }
  #dashboard-view .main-content { scroll-margin-top: 0; }
}


/* RD plan management: compact responsive forms, action controls and A4 documents */
.rd-plan-preview {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  color: #172033;
  font-weight: 600;
  line-height: 1.6;
}
.rd-subline { display:block; margin-top:4px; color:#64748b; font-size:12px; font-weight:400; }
.rd-row-actions { display:flex; flex-wrap:wrap; gap:6px; min-width:220px; }
.rd-row-actions .btn { white-space:nowrap; }
.rd-list-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; }
.rd-list-toolbar input { flex:1; min-width:0; }
#rd-table-body td { vertical-align:middle; }
@media (max-width: 700px) {
  .rd-list-toolbar { align-items:stretch; flex-direction:column; }
  .rd-row-actions { min-width:190px; }
  .rd-row-actions .btn { min-height:38px; }
  .rd-plan-preview { font-size:14px; }
}
@media print {
  .rd-plan-preview, .rd-list-toolbar { display:none !important; }
}

/* Compact, distinct RD row actions (match the savings action-button style). */
.rd-row-actions { min-width: 0; gap: 5px; }
.rd-row-actions .btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 5px; min-height: 30px; padding: 5px 9px; border: 0;
  border-radius: 7px; font-size: 12px; line-height: 1.2;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}
.rd-row-actions .rd-action-deposit { background: #2563eb; color: #fff; }
.rd-row-actions .rd-action-transactions { background: #0d9488; color: #fff; }
.rd-row-actions .rd-action-ledger { background: #7c3aed; color: #fff; }
.rd-row-actions .btn:hover { filter: brightness(.94); transform: translateY(-1px); }
@media (max-width: 700px) {
  .rd-row-actions { min-width: 0; flex-wrap: wrap; }
  .rd-row-actions .btn { min-height: 34px; padding: 7px 9px; font-size: 12px; }
}

/* RD account filter and extra-compact action controls */
.rd-list-toggles { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.rd-row-actions .btn { min-height:25px !important; padding:3px 6px !important; gap:4px; font-size:11px !important; border-radius:6px; }
.rd-row-actions .btn i { font-size:10px; }
@media (max-width:700px) { .rd-list-toggles { justify-content:space-between; } .rd-row-actions .btn { min-height:27px !important; padding:4px 6px !important; font-size:11px !important; } }

/* Fixed Deposit professional workflow */
.fd-plan-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0 22px}.fd-plan-card{display:flex;flex-direction:column;gap:7px;text-align:left;padding:16px;border:1px solid #d7deea;border-radius:12px;background:var(--card-bg,#fff);color:inherit;cursor:pointer}.fd-plan-card strong{font-size:15px}.fd-plan-card b{font-size:20px;color:#176b50}.fd-plan-card span,.muted{font-size:12px;color:#687386}.fd-plan-card.selected{border:2px solid #176b50;background:#effaf5;box-shadow:0 0 0 2px #176b5015}.fd-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;background:#f3f7fb;border:1px solid #dce5ef;border-radius:10px;padding:14px;margin:16px 0}.fd-preview div{display:flex;flex-direction:column;gap:5px}.fd-preview span{font-size:12px;color:#667085}.fd-preview strong{font-size:14px;color:#172b4d}.fd-actions{display:flex;flex-wrap:wrap;gap:5px;min-width:180px}.btn.btn-small{min-height:28px;padding:5px 8px;font-size:11px;white-space:nowrap}.fd-status{display:inline-block;padding:4px 8px;border-radius:20px;font-size:11px;font-weight:700;background:#eef2f6;color:#475467}.fd-status.success{background:#dcfce7;color:#166534}.fd-status.warning{background:#fff4cc;color:#92400e}.fd-status.info{background:#dbeafe;color:#1d4ed8}.fd-status.active{background:#e8f5e9;color:#216e39}.fd-alert{font-size:11px;font-weight:700;color:#b45309;margin-top:5px}.fd-paid-note{font-size:11px;color:#166534;align-self:center}.fd-bond{font-family:Arial,sans-serif;color:#172033;background:#fff;padding:24px}.fd-bond-head{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #173b68;padding-bottom:14px}.fd-bond-head h1{color:#173b68;margin:0}.fd-bond-head p{font-size:11px;letter-spacing:1.5px}.fd-bond h2{text-align:center;margin:24px 0}.fd-bond-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0}.fd-bond-grid div{border-bottom:1px solid #ccd4df;padding:8px}.fd-bond-grid span,.fd-bond-maturity span{display:block;color:#667085;font-size:12px;margin-bottom:6px}.fd-bond-maturity{text-align:center;background:#eef5ff;padding:18px}.fd-bond-maturity strong{display:block;font-size:28px;color:#173b68}.fd-bond-note{font-size:12px;margin-top:22px}.fd-signatures{display:flex;justify-content:space-between;margin-top:50px}.fd-signatures span{border-top:1px solid #333;padding-top:8px;width:35%;text-align:center;font-size:12px}@media(max-width:700px){.fd-plan-cards{grid-template-columns:1fr}.fd-preview{grid-template-columns:repeat(2,minmax(0,1fr))}.fd-actions{min-width:145px}.fd-bond{padding:14px}.fd-bond-grid{gap:7px}.fd-bond-grid b{font-size:12px}}

/* FD settlement modal: native in-app payment method selection */
.fd-modal-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(15,23,42,.62);backdrop-filter:blur(4px)}.fd-payment-modal{position:relative;width:min(100%,460px);padding:30px;border:1px solid #d9e1eb;border-radius:18px;background:var(--card-bg,#fff);color:var(--text-color,#172033);box-shadow:0 24px 80px #0004;animation:fdModalIn .18s ease-out}.fd-payment-modal h2{margin:12px 0 8px;font-size:22px}.fd-payment-modal p{color:#667085;line-height:1.55;font-size:13px;margin:0 0 22px}.fd-modal-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:#e8f5ee;color:#176b50;font-size:21px}.fd-modal-close{position:absolute;right:14px;top:10px;border:0;background:transparent;color:#667085;font-size:27px;cursor:pointer}.fd-payment-modal label{display:block;font-size:13px;font-weight:700;margin-bottom:8px}.fd-payment-modal select{width:100%;height:46px;padding:0 12px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;color:#172033;font-size:14px;outline:none}.fd-payment-modal select:focus{border-color:#176b50;box-shadow:0 0 0 3px #176b5020}.fd-payment-modal select.fd-invalid{border-color:#dc2626}.fd-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.fd-modal-actions .btn{min-height:42px}.fd-modal-actions button:disabled{opacity:.65;cursor:wait}.fd-payment-error{margin-top:14px;padding:10px 12px;border-radius:8px;background:#fef2f2;color:#b91c1c;font-size:13px}@keyframes fdModalIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}@media(max-width:480px){.fd-payment-modal{padding:24px 18px}.fd-modal-actions{flex-direction:column-reverse}.fd-modal-actions .btn{width:100%}}
/* FD action polish + in-page document workspace */
.fd-list-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}.fd-list-toolbar>div{display:flex;flex-direction:column;gap:4px}.fd-list-toolbar small{color:var(--muted,#687386);font-size:12px}.fd-show-paid{background:#334155!important;color:#fff!important;border-color:#334155!important}.fd-priority-row{background:#fff9e8!important}.fd-priority-row td:first-child{border-left:4px solid #e59a16}.fd-btn-bond{background:#174a7e!important;color:#fff!important;border-color:#174a7e!important}.fd-btn-receipt{background:#6d28d9!important;color:#fff!important;border-color:#6d28d9!important}.fd-btn-paid{background:#16804a!important;color:#fff!important;border-color:#16804a!important}.fd-btn-paid:disabled{background:#aab4c0!important;border-color:#aab4c0!important;color:#fff!important;opacity:.65}.fd-btn-whatsapp{background:#128c52!important;color:#fff!important;border-color:#128c52!important}.fd-btn-print{background:#334155!important;color:#fff!important}.fd-btn-download{background:#b7791f!important;color:#fff!important}.fd-document-modal{position:relative;width:min(1100px,100%);max-height:94vh;overflow:auto;padding:22px;border-radius:18px;background:var(--card-bg,#fff);box-shadow:0 24px 80px #0005}.fd-document-preview{padding:8px;background:#f1f3f5;border-radius:10px}.fd-document-preview .fd-bond{max-width:900px;min-height:0;margin:0 auto;padding:38px;border:8px double #b18a42;outline:1px solid #173b68;outline-offset:-17px;background:radial-gradient(ellipse at center,#fff 0%,#fffdf6 75%,#f7efd9 100%);color:#25334b;position:relative;overflow:hidden}.fd-document-preview .fd-bond-head{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #b18a42;padding-bottom:18px}.fd-document-preview .fd-bond h1{margin:0;color:#173b68;font: bold 30px Georgia,serif;letter-spacing:3px}.fd-document-preview .fd-bond h2{text-align:center;margin:28px 0 12px;color:#173b68;font-size:26px}.fd-document-preview .fd-bond-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;margin:26px 0}.fd-document-preview .fd-bond-grid div{border-bottom:1px solid #d8c99f;padding:10px 8px}.fd-document-preview .fd-bond-grid span,.fd-document-preview .fd-bond-maturity span{display:block;color:#8a7446;font:11px Arial,sans-serif;letter-spacing:1px;margin-bottom:7px}.fd-document-preview .fd-bond-maturity{text-align:center;background:linear-gradient(110deg,#f4e8c6,#fff9e8,#f4e8c6);border:1px solid #c5a45b;padding:18px}.fd-document-preview .fd-bond-maturity strong{font: bold 30px Georgia,serif;color:#173b68}.fd-document-preview .fd-paid-stamp{position:absolute;z-index:5;right:45px;top:430px;transform:rotate(-8deg);border:3px dashed #b42318;border-radius:8px;color:#b42318;padding:12px 20px;text-align:center;background:#fff8f2e8;box-shadow:0 3px 8px #0002}.fd-document-preview .fd-paid-stamp strong{display:block;font-size:28px;letter-spacing:2px;line-height:1}.fd-document-preview .fd-paid-stamp span{display:block;font-size:10px;font-weight:700;letter-spacing:.7px;margin-top:5px}.fd-document-preview .fd-paid-stamp small{display:block;font-size:9px;margin-top:4px}.fd-document-actions{justify-content:center;flex-wrap:wrap;padding-top:14px}.fd-document-actions .btn{min-height:40px}@media(max-width:650px){.fd-list-toolbar{align-items:flex-start;flex-direction:column}.fd-document-modal{padding:12px}.fd-document-preview{padding:3px}.fd-document-preview .fd-bond{padding:25px 18px;outline-offset:-12px}.fd-document-preview .fd-bond h1{font-size:21px}.fd-document-preview .fd-bond-grid{gap:7px}.fd-document-preview .fd-bond-grid b{font-size:12px}.fd-document-preview .fd-paid-stamp{right:12px;top:220px;transform:rotate(-10deg) scale(.7);transform-origin:top right}.fd-document-actions{flex-direction:column}.fd-document-actions .btn{width:100%}}

/* Premium landing and System Config workspace */
.login-container{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;background:radial-gradient(ellipse at 15% 15%,rgba(202,157,54,.20),transparent 34%),radial-gradient(ellipse at 90% 80%,rgba(24,73,115,.34),transparent 36%),linear-gradient(135deg,#071323 0%,#0d2035 55%,#102b42 100%);}
.login-container:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,black,transparent);pointer-events:none;z-index:-1}
.login-card{position:relative;max-width:490px;width:min(92vw,490px);padding:42px 42px 36px;border:1px solid rgba(225,190,105,.26);border-radius:24px;background:rgba(255,255,255,.97);box-shadow:0 28px 90px rgba(0,0,0,.34);}
.login-kicker{display:flex;align-items:center;gap:9px;color:#8b6820;font-size:10px;letter-spacing:2px;font-weight:800;margin:22px 0 12px}.login-kicker span{width:23px;height:2px;background:#c79a36;border-radius:3px}.login-card h3{font-size:clamp(30px,5vw,40px);line-height:1.1;letter-spacing:-1.3px;color:#10243a;margin:0 0 14px}.login-card h3 em{font-style:normal;color:#b18425}.login-card .subtitle{font-size:14px;line-height:1.7;color:#657286}.landing-feature-row{display:flex;gap:16px;flex-wrap:wrap;margin:20px 0 24px;color:#4e5f70;font-size:11px;font-weight:700}.landing-feature-row i{color:#b18425;margin-right:5px}.login-card .btn-primary{background:linear-gradient(105deg,#b88627,#dfb94f);border:0;box-shadow:0 8px 18px rgba(177,132,37,.22);min-height:48px}.brand-logo{color:#142b43;font-weight:800}.brand-logo i{color:#bd9130}.gold-coin-rain{position:fixed;inset:0;z-index:9999;pointer-events:none;overflow:hidden}.gold-coin{position:absolute;top:-48px;width:var(--coin-size);height:var(--coin-size);display:grid;place-items:center;border-radius:50%;font-weight:900;color:#8b5b06;background:radial-gradient(circle at 32% 25%,#fff4b2,#f5ca47 45%,#b87912 100%);border:1px solid #ffdf77;box-shadow:0 2px 9px #0003;text-shadow:0 1px #fff8;animation:coin-fall var(--fall-duration) cubic-bezier(.2,.65,.4,1) forwards;}
@keyframes coin-fall{0%{transform:translate3d(0,-8vh,0) rotateY(0) rotate(0);opacity:0}10%{opacity:1}100%{transform:translate3d(35px,115vh,0) rotateY(760deg) rotate(420deg);opacity:0}}
.config-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:8px 0 22px}.config-heading h2{margin:5px 0;color:#152b42}.config-heading p{margin:0;color:#6c7b8c}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:800;color:#b18425}.config-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.config-card{min-width:0;border:1px solid #e7ebf0;border-radius:16px;padding:22px;box-shadow:0 8px 24px rgba(18,38,63,.045)}.config-card h3{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:16px;color:#1b3047}.config-card h3 i{color:#b18425}.config-card .form-group{margin-bottom:13px}.config-card label{font-size:12px;font-weight:650}.config-card input,.config-card select,.config-card textarea{width:100%;min-width:0}.config-note{font-size:11px;line-height:1.6;color:#7b8794;background:#f6f8fa;border-radius:8px;padding:10px;margin:12px 0 0}.config-checkbox{display:flex;align-items:center;gap:9px;margin:8px 0 16px;font-size:12px}.config-checkbox input{width:auto}.config-savebar{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;margin-top:18px;background:rgba(255,255,255,.96);border:1px solid #e5eaf0;border-radius:14px;box-shadow:0 -8px 30px #10243a0a;z-index:4}.config-gate{max-width:560px;margin:28px auto;padding:32px;text-align:center}.config-gate-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;margin:0 auto 14px;background:#fff4d9;color:#a7791b;font-size:23px}.config-gate p{color:#718096;line-height:1.6}.config-gate form{text-align:left;max-width:360px;margin:22px auto 0}.config-gate .btn{width:100%}.config-lock{font-size:10px;opacity:.65;margin-left:auto}
@media(max-width:850px){.config-grid{grid-template-columns:1fr}.config-heading{align-items:flex-start}.config-savebar{position:static;align-items:stretch;flex-direction:column}.login-card{padding:30px 24px}.login-card h3{font-size:32px}}
@media(prefers-reduced-motion:reduce){.gold-coin{animation-duration:.01ms!important}}
.landing-offer{padding:13px 15px;border-radius:12px;border:1px solid #ead9a9;background:linear-gradient(110deg,#fff8e4,#fffdf6);margin:16px 0;color:#66501e;display:flex;flex-direction:column;gap:4px}.landing-offer strong{font-size:13px}.landing-offer span{font-size:12px;line-height:1.5;color:#77684b}
.landing-tagline{font-size:12px;font-weight:700;color:#7b6a43;letter-spacing:.2px;margin:-6px 0 12px}

/* Premium public landing page */
.public-landing{min-height:100vh;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(ellipse at 78% 42%,#173b6830 0,transparent 38%),linear-gradient(135deg,#071426 0%,#0b1e35 55%,#102b45 100%);color:#f8fafc;padding:0 clamp(20px,6vw,96px);position:relative}.landing-nav{height:90px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff18;position:relative;z-index:2}.landing-brand{display:flex;align-items:center;gap:12px;font-size:21px;letter-spacing:.2px}.landing-brand-icon{width:42px;height:42px;border-radius:13px;background:transparent;display:grid;place-items:center;overflow:hidden;box-shadow:0 8px 28px #d5a63d30}.landing-brand-icon img{width:100%;height:100%;display:block;object-fit:cover;border-radius:13px}.landing-nav-login{border:1px solid #ffffff3b!important;background:#ffffff0d!important;color:#fff!important;border-radius:999px!important;padding:12px 20px!important}.landing-hero{flex:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);align-items:center;gap:clamp(30px,6vw,100px);padding:60px 0 72px;max-width:1440px;width:100%;margin:0 auto}.landing-copy{max-width:700px}.landing-pill{display:inline-flex;align-items:center;gap:9px;border:1px solid #e7c56b55;background:#d9ad3a13;color:#f3d88a;border-radius:999px;padding:9px 14px;font-size:12px;letter-spacing:.7px;text-transform:uppercase}.landing-copy h1{font-size:clamp(40px,5.3vw,76px);line-height:1.06;letter-spacing:-2.8px;margin:26px 0 22px;font-weight:700}.landing-copy h1 em{font-style:normal;color:#e8c66e}.landing-copy>p{font-size:clamp(16px,1.5vw,19px);line-height:1.8;color:#b8c5d5;max-width:600px}.landing-cta-row{display:flex;align-items:center;gap:22px;margin-top:30px;flex-wrap:wrap}.landing-primary-cta{background:linear-gradient(135deg,#f5d782,#c4932f)!important;color:#15263b!important;border:0!important;border-radius:999px!important;padding:15px 24px!important;font-weight:700!important;box-shadow:0 12px 35px #c4932f30}.landing-cta-row>span{font-size:12px;color:#b8c5d5}.landing-cta-row>span i{color:#e8c66e;margin-right:6px}.landing-trust-row{display:flex;gap:24px;margin-top:50px;padding-top:26px;border-top:1px solid #ffffff20;flex-wrap:wrap}.landing-trust-row>div{display:flex;gap:11px;align-items:center}.landing-trust-row>div>i{font-size:20px;color:#e8c66e}.landing-trust-row span{display:flex;flex-direction:column;gap:4px}.landing-trust-row b{font-size:12px}.landing-trust-row small{font-size:11px;color:#8fa2b8}.landing-visual{min-height:400px;display:grid;place-items:center;position:relative}.landing-orbit{position:absolute;border:1px solid #d6b35a2e;border-radius:50%;width:min(100%,440px);aspect-ratio:1}.orbit-two{width:min(82%,360px);border-style:dashed;transform:rotate(28deg)}.landing-visual-card{width:min(330px,80%);aspect-ratio:.88;border:1px solid #ffffff35;border-radius:28px;background:linear-gradient(145deg,#ffffff20,#ffffff06);backdrop-filter:blur(16px);box-shadow:0 30px 90px #0005;padding:24px;display:flex;flex-direction:column;justify-content:space-between;transform:rotate(-5deg);position:relative;z-index:1}.visual-card-top{display:flex;justify-content:space-between;align-items:center;color:#e8c66e;font-size:11px;letter-spacing:2px}.visual-vault{flex:1;display:grid;place-items:center;font-size:clamp(90px,12vw,150px);color:#e7c66f;text-shadow:0 10px 50px #e7c66f30}.visual-card-bottom{border-top:1px solid #ffffff30;padding-top:18px;display:flex;flex-direction:column;gap:8px}.visual-card-bottom span{color:#a8b8ca;font-size:12px}.visual-card-bottom b{font-size:18px}.floating-coin{position:absolute;z-index:2;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#765014;font-weight:800;font-size:25px;background:radial-gradient(circle at 30% 25%,#fff0a9,#e3b844 48%,#9d6c18);border:3px solid #f6dc83;box-shadow:0 10px 30px #0004}.coin-a{top:14%;right:7%}.coin-b{bottom:14%;left:5%;transform:scale(.75)}.coin-c{top:24%;left:7%;transform:scale(.58)}.landing-footer{height:62px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ffffff18;color:#8fa2b8;font-size:11px}.login-container{background:linear-gradient(135deg,#071426,#102b45)}
/* Separate plain, business-style FD receipt */
.fd-document-preview.receipt-preview{background:#eef2f6;padding:18px}.fd-receipt-paper{position:relative;max-width:900px;margin:0 auto;padding:42px;background:#fff;border:1px solid #d7dce3;color:#1f2937;font:14px Arial,sans-serif;box-shadow:0 8px 25px #0f172a0d}.receipt-topline{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #334155;padding-bottom:20px}.receipt-brand{display:flex;gap:14px;align-items:center}.receipt-brand>i{font-size:34px;color:#334155}.receipt-brand h1{font-size:28px;margin:0;color:#1e293b}.receipt-brand span,.receipt-number small{font-size:11px;color:#64748b;letter-spacing:1px}.receipt-number{text-align:right}.receipt-number b{display:block;margin-top:7px;font-size:18px}.receipt-title-row{display:flex;justify-content:space-between;align-items:center;margin-top:28px;gap:12px}.receipt-title-row h2{font-size:23px;color:#1e293b}.receipt-status{padding:6px 10px;border-radius:5px;background:#e2e8f0;font-size:12px;white-space:nowrap}.receipt-intro{margin:16px 0 24px;color:#475569;line-height:1.6}.receipt-details{display:grid;grid-template-columns:1fr 1fr;border:1px solid #e2e8f0}.receipt-details>div{padding:15px;border-bottom:1px solid #e2e8f0;min-width:0}.receipt-details>div:nth-child(odd){border-right:1px solid #e2e8f0}.receipt-details span{display:block;color:#64748b;font-size:11px;margin-bottom:7px}.receipt-details b{font-size:14px;overflow-wrap:anywhere}.receipt-amount-strip{display:flex;justify-content:space-between;align-items:center;background:#f1f5f9;padding:18px;margin-top:20px}.receipt-amount-strip strong{font-size:24px}.receipt-note{margin:22px 0;color:#64748b;font-size:12px;line-height:1.6}.receipt-signatures{display:flex;justify-content:space-between;gap:30px;margin-top:48px}.receipt-signatures span{width:38%;border-top:1px solid #94a3b8;padding-top:8px;font-size:11px}.receipt-footer{text-align:center;border-top:1px solid #e2e8f0;margin-top:28px;padding-top:14px;color:#94a3b8;font-size:11px}.receipt-settled{margin-top:16px;padding:10px;border:1px solid #15803d;color:#15803d;font-weight:bold;text-align:center}.fd-original-seal{position:absolute;right:9%;top:40%;width:112px;height:132px;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-7deg);font-weight:800;z-index:3;color:#f8e8a7;background:linear-gradient(155deg,#1d5a43 0%,#0c3428 58%,#08261e 100%);clip-path:polygon(50% 0%,91% 14%,86% 64%,72% 84%,50% 100%,28% 84%,14% 64%,9% 14%);filter:drop-shadow(0 0 0 #d9b44a) drop-shadow(0 4px 6px rgba(0,0,0,.22));text-align:center}.fd-original-seal:before{content:'';position:absolute;inset:6px;clip-path:inherit;border:2px solid #d9b44a;background:transparent;z-index:-1}.fd-original-seal span{font:bold 34px Georgia,serif;line-height:1;color:#f8e8a7;text-shadow:0 1px 1px #0008}.fd-original-seal small{font-size:9px;letter-spacing:2px;color:#fff;margin-top:5px}.fd-original-seal:after{content:'✓ VERIFIED';font-size:7px;letter-spacing:1px;color:#d9b44a;margin-top:7px}
@media(max-width:850px){.landing-hero{grid-template-columns:1fr;padding:52px 0;gap:20px}.landing-copy{max-width:720px}.landing-visual{min-height:300px}.landing-visual-card{width:245px}.landing-trust-row{gap:18px}.landing-copy h1{letter-spacing:-1.5px}}
@media(max-width:600px){.public-landing{padding:0 20px}.landing-nav{height:74px}.landing-brand{font-size:18px}.landing-brand-icon{width:38px;height:38px}.landing-brand-icon img{width:100%;height:100%;object-fit:cover}.landing-hero{padding:42px 0 48px}.landing-copy h1{font-size:42px}.landing-copy>p{font-size:15px}.landing-cta-row{align-items:flex-start;flex-direction:column;gap:14px}.landing-trust-row{display:grid;grid-template-columns:1fr;gap:18px;margin-top:34px}.landing-visual{min-height:275px}.landing-visual-card{width:220px}.landing-footer{font-size:10px}.fd-receipt-paper{padding:22px 16px}.receipt-brand h1{font-size:22px}.receipt-brand>i{font-size:25px}.receipt-number b{font-size:14px}.receipt-title-row h2{font-size:18px}.receipt-details{grid-template-columns:1fr}.receipt-details>div:nth-child(odd){border-right:0}.receipt-details b{font-size:13px}.receipt-amount-strip strong{font-size:20px}.fd-original-seal{width:84px;height:84px;right:5%;top:44%}.fd-original-seal span{font-size:25px}.fd-original-seal small{font-size:8px}}
@media print{.fd-receipt-paper{box-shadow:none}.fd-document-preview{background:#fff!important;padding:0!important}}

/* Recovery, release QA and SMTP test controls */
.link-button{border:0;background:transparent;color:#a77a20;text-decoration:underline;cursor:pointer;padding:10px 4px;font:inherit;font-size:13px}.login-recovery-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.recovery-form{margin-top:18px;padding-top:16px;border-top:1px solid #e6e9ef}.recovery-form h4{margin:0 0 8px}.recovery-form p{font-size:13px;color:#687789;line-height:1.5}.qa-actions{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.qa-summary{font-weight:800;padding:12px;border-radius:10px;background:#f2f5f8;margin:10px 0}.qa-results{display:grid;gap:8px}.qa-result{display:grid;grid-template-columns:58px 1fr;gap:5px 10px;padding:12px;border:1px solid #e3e8ef;border-radius:10px}.qa-result b{grid-row:span 2}.qa-result.pass b{color:#16803c}.qa-result.fail{border-color:#f1b6b6;background:#fff8f8}.qa-result.fail b{color:#b42318}.qa-result small,.qa-result em{grid-column:2;color:#657286;font-size:12px}.qa-result em{color:#9b4a12;font-style:normal}.gold-coin-rain{display:block!important}.gold-coin-rain.coins-finished{opacity:0;transition:opacity .4s}
/* Reliable landing-page coin shower and optional browser-safe sound control */
.gold-coin-rain{display:block;opacity:1;visibility:visible;contain:layout paint}.gold-coin-rain.coins-finished{opacity:0;transition:opacity .4s}.gold-coin{will-change:transform,opacity;animation:coin-fall var(--fall-duration) cubic-bezier(.2,.65,.4,1) forwards;backface-visibility:hidden}@keyframes coin-fall{0%{transform:translate3d(0,-8vh,0) rotateY(0) rotate(0);opacity:0}8%{opacity:1}100%{transform:translate3d(var(--drift,35px),115vh,0) rotateY(760deg) rotate(420deg);opacity:0}}.coin-sound-toggle{border:1px solid #ffffff35;background:#ffffff0b;color:#d9c17e;border-radius:999px;padding:8px 12px;font:inherit;font-size:11px;cursor:pointer}.coin-sound-toggle:hover{background:#ffffff18}


/* Final targeted fixes: keep the dashboard truly hidden on mobile, and render
   the coin shower as a foreground effect contained by the public landing page. */
#dashboard-view.app-wrapper.hidden { display: none !important; }
.public-landing { isolation: isolate; }
#public-landing > .gold-coin-rain {
  position: absolute; inset: 0; z-index: 5; display: block; pointer-events: none;
  overflow: hidden; opacity: 1; visibility: visible; contain: layout paint;
}
#public-landing > .gold-coin-rain.coins-finished { opacity: 0; transition: opacity .4s; }
#public-landing > .landing-nav,
#public-landing > .landing-hero,
#public-landing > .landing-footer { position: relative; z-index: 2; }
#public-landing .gold-coin { font-size: calc(var(--coin-size) * .68); border-width: 2px; box-shadow: 0 5px 18px #0006, inset 0 1px 2px #fff8; }
@media (max-width: 900px) {
  #dashboard-view.app-wrapper.hidden { display: none !important; }
}

/* Coin rain is a true viewport foreground overlay, not part of the landing background. */
body > #gold-coin-rain { position:fixed!important; inset:0!important; z-index:2147483000!important; pointer-events:none!important; overflow:hidden!important; display:none; opacity:1; visibility:visible; contain:layout paint; }
body > #gold-coin-rain .gold-coin { position:absolute; top:-72px; font-size:calc(var(--coin-size) * .72); }
@keyframes coin-fall { 0%{transform:translate3d(0,-10vh,0) rotateY(0) rotate(0);opacity:0} 8%{opacity:1} 100%{transform:translate3d(var(--drift,35px),110vh,0) rotateY(760deg) rotate(420deg);opacity:0} }

/* Final coin effect: always above landing content, fall to the viewport bottom,
   bounce visibly, then settle/fade. Keep the overlay outside page stacking contexts. */
body > #gold-coin-rain {
  position: fixed !important; inset: 0 !important; z-index: 2147483647 !important;
  pointer-events: none !important; overflow: hidden !important;
  display: none; opacity: 1; visibility: visible; contain: none !important;
}
body > #gold-coin-rain .gold-coin {
  position: absolute; top: -80px; display: grid; place-items: center;
  font-size: calc(var(--coin-size) * .72);
  animation: coin-fall-bounce var(--fall-duration) cubic-bezier(.18,.62,.32,1) forwards !important;
  will-change: transform, opacity;
}
@keyframes coin-fall-bounce {
  0%   { transform: translate3d(0,-12vh,0) rotateY(0) rotate(0); opacity: 0; }
  6%   { opacity: 1; }
  76%  { transform: translate3d(calc(var(--drift,35px)*.72),88vh,0) rotateY(520deg) rotate(275deg); opacity: 1; }
  84%  { transform: translate3d(calc(var(--drift,35px)*.84),79vh,0) rotateY(600deg) rotate(320deg); opacity: 1; }
  91%  { transform: translate3d(calc(var(--drift,35px)*.94),87vh,0) rotateY(675deg) rotate(365deg); opacity: 1; }
  96%  { transform: translate3d(var(--drift,35px),84vh,0) rotateY(725deg) rotate(390deg); opacity: .95; }
  100% { transform: translate3d(var(--drift,35px),88vh,0) rotateY(760deg) rotate(410deg); opacity: 0; }
}

/* Final viewport + auth refresh fixes */
html, body { min-height: 100%; }
body > #gold-coin-rain {
  position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important;
  z-index: 2147483647 !important; pointer-events: none !important; overflow: hidden !important;
  isolation: isolate !important; transform: none !important; display: none;
}
body > #gold-coin-rain .gold-coin {
  position: absolute !important; top: 0 !important; z-index: 1 !important;
  animation: coin-fall-from-top var(--fall-duration) cubic-bezier(.22,.62,.34,1) forwards !important;
}
@keyframes coin-fall-from-top {
  0% { transform: translate3d(0,-110vh,0) rotateY(0) rotate(0); opacity: 0; }
  7% { opacity: 1; }
  78% { transform: translate3d(calc(var(--drift,35px)*.72),72vh,0) rotateY(500deg) rotate(260deg); opacity: 1; }
  86% { transform: translate3d(calc(var(--drift,35px)*.84),84vh,0) rotateY(570deg) rotate(305deg); opacity: 1; }
  92% { transform: translate3d(calc(var(--drift,35px)*.94),77vh,0) rotateY(635deg) rotate(345deg); opacity: 1; }
  100% { transform: translate3d(var(--drift,35px),110vh,0) rotateY(720deg) rotate(390deg); opacity: 0; }
}
.login-container { min-height: 100vh; min-height: 100dvh; padding: 24px 16px; align-items: center; }
.login-card { width: min(100%, 440px); padding: clamp(24px, 5vw, 40px); border-radius: 22px; }
.login-card .subtitle { margin: 0 0 22px; }
#dashboard-view.app-wrapper.hidden { display: none !important; }
@media (max-width: 600px) {
  .login-container { align-items: center; padding: 18px 14px; }
  .login-card { width: 100%; max-width: 420px; padding: 26px 22px; border-radius: 18px; }
  body > #gold-coin-rain { position: fixed !important; inset: 0 !important; height: 100dvh !important; z-index: 2147483647 !important; }
}


/* Password recovery form: full-width, consistent controls on desktop and mobile. */
#password-reset-request-form, #password-reset-confirm-form { width: 100%; min-width: 0; box-sizing: border-box; }
#password-reset-request-form input, #password-reset-confirm-form input {
  display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
  min-height: 48px; padding: 13px 15px; margin: 14px 0 16px;
  border: 1px solid #d5dce5; border-radius: 10px; background: #fff;
  color: #10243a; font: inherit; font-size: 15px; line-height: 1.4;
}
#password-reset-request-form input:focus, #password-reset-confirm-form input:focus {
  outline: 3px solid #d7b45b45; border-color: #b88627;
}
#password-reset-request-form .btn, #password-reset-confirm-form .btn { width: 100%; min-height: 48px; }

/* Responsive, clickable public plan cards and plan-detail tables */
.landing-plan-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:26px;width:100%;max-width:850px}
.landing-plan-card{min-width:0;display:flex;align-items:center;gap:11px;text-align:left;padding:14px 13px;border:1px solid #ffffff24;border-radius:16px;background:linear-gradient(145deg,#ffffff12,#ffffff06);color:#f8fafc;cursor:pointer;transition:transform .18s,border-color .18s,background .18s;box-shadow:0 10px 28px #00000016}
.landing-plan-card:hover,.landing-plan-card:focus-visible{transform:translateY(-3px);border-color:#e8c66eaa;background:linear-gradient(145deg,#e8c66e20,#ffffff0b);outline:none}
.plan-card-icon{width:42px;height:42px;flex:0 0 42px;border-radius:13px;display:grid;place-items:center;background:#e8c66e1b;color:#f0d17b;font-size:18px}
.plan-rd .plan-card-icon{background:#77c8d51c;color:#8bdbe5}.plan-fd .plan-card-icon{background:#9d92fa20;color:#c1b7ff}
.plan-card-copy{display:flex;flex-direction:column;gap:5px;min-width:0}.plan-card-copy b{font-size:13px;line-height:1.25}.plan-card-copy small{font-size:10px;line-height:1.45;color:#aebed0}.plan-card-arrow{margin-left:auto;color:#e8c66e;font-size:11px;flex:0 0 auto}
.public-plan-modal{position:fixed;inset:0;z-index:10020;background:#030b16c9;backdrop-filter:blur(9px);display:grid;place-items:center;padding:18px}.public-plan-modal.hidden{display:none}.public-plan-dialog{width:min(1100px,100%);max-height:min(88vh,900px);display:flex;flex-direction:column;background:#f8fafc;color:#17283c;border:1px solid #ffffff50;border-radius:20px;overflow:hidden;box-shadow:0 30px 100px #0008}.public-plan-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 24px 16px;background:linear-gradient(110deg,#0c2037,#173b60);color:#fff}.public-plan-eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:800;color:#e8c66e}.public-plan-heading h2{font-size:clamp(21px,3vw,29px);margin:7px 0 5px}.public-plan-heading p{margin:0;color:#c0cede;font-size:13px;line-height:1.5}.public-plan-close{width:38px;height:38px;border:1px solid #ffffff35;border-radius:50%;background:#ffffff12;color:white;font-size:27px;line-height:1;cursor:pointer;flex:0 0 auto}.public-plan-table{padding:18px 22px;overflow:auto;overscroll-behavior:contain}.plan-table-scroll{overflow:auto;max-width:100%;border:1px solid #dbe3ec;border-radius:12px;background:white}.public-plan-data{border-collapse:separate;border-spacing:0;width:100%;font-size:12px;white-space:nowrap}.public-plan-data th,.public-plan-data td{padding:10px 12px;border-bottom:1px solid #e8edf3;text-align:right}.public-plan-data thead th{position:sticky;top:0;background:#173b60;color:#fff;text-align:center;font-size:11px;z-index:1}.public-plan-data thead tr:nth-child(2) th{background:#244d73}.public-plan-data tbody th{background:#f4f7fb;text-align:left;color:#1d3550;font-weight:750}.public-plan-data tbody tr:hover td,.public-plan-data tbody tr:hover th{background:#fff9e9}.public-plan-data tbody tr:last-child th,.public-plan-data tbody tr:last-child td{border-bottom:0}.plan-bonus{color:#8b6514;font-weight:650}.plan-maturity{color:#116044;font-weight:800;background:#f0faf5}.plan-rate-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}.plan-rate-pills span{padding:8px 12px;border-radius:999px;background:#fff5d7;border:1px solid #f0d88c;color:#725216;font-size:12px;font-weight:750}.public-plan-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 22px;border-top:1px solid #e2e8f0;background:#fff;color:#667589;font-size:11px}.public-plan-foot .btn{padding:11px 17px!important;font-size:12px!important;white-space:nowrap}.plan-modal-open{overflow:hidden}
@media(max-width:850px){.landing-plan-cards{grid-template-columns:1fr;max-width:600px;gap:9px}.landing-plan-card{padding:12px 14px}.plan-card-copy b{font-size:13px}.plan-card-copy small{font-size:11px}.public-plan-dialog{max-height:90vh}.public-plan-table{padding:14px}}
@media(max-width:600px){.landing-plan-cards{margin-top:24px}.landing-plan-card{border-radius:14px;gap:12px}.plan-card-icon{width:39px;height:39px;flex-basis:39px}.public-plan-modal{padding:8px}.public-plan-dialog{border-radius:16px;max-height:94vh}.public-plan-heading{padding:17px 16px 13px}.public-plan-heading p{font-size:12px}.public-plan-close{width:34px;height:34px}.public-plan-table{padding:12px 10px}.public-plan-data{font-size:11px}.public-plan-data th,.public-plan-data td{padding:9px 10px}.public-plan-foot{padding:12px;align-items:flex-start;flex-direction:column}.public-plan-foot .btn{width:100%}.landing-footer{gap:10px;flex-wrap:wrap;height:auto;min-height:62px;padding:14px 0}}
/* System Config destructive action styling */
.btn-danger{background:#b42318!important;color:#fff!important;border:1px solid #912018!important}.btn-danger:hover{background:#912018!important}
.fd-created-modal h2{margin:14px 0 8px}.fd-created-details{display:grid;gap:8px;margin-top:18px}.fd-created-details>div{display:flex;justify-content:space-between;gap:14px;padding:11px 12px;border:1px solid #e2e8f0;border-radius:9px;background:#f8fafc}.fd-created-details span{font-size:12px;color:#64748b}.fd-created-details b{text-align:right;color:#172033;font-size:13px;overflow-wrap:anywhere}.fd-created-modal .fd-modal-actions{justify-content:flex-end}.fd-created-modal .fd-modal-actions .btn-primary{background:#176b50;color:#fff}
.backup-options,.backup-restore-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:12px 0}.backup-progress-wrap{margin:16px 0 8px}.backup-progress-track{height:10px;border-radius:999px;background:#e9edf5;overflow:hidden}.backup-progress-bar{height:100%;width:0;background:linear-gradient(90deg,#2563eb,#16a34a);border-radius:999px;transition:width .25s ease}.backup-progress-meta{display:flex;justify-content:space-between;gap:12px;font-size:12px;margin-top:7px;color:var(--text-muted,#64748b)}.backup-result{padding:10px 12px;border-radius:9px;margin:8px 0;font-size:13px;background:#f1f5f9}.backup-result.success{background:#ecfdf3;color:#166534}.backup-result.failure{background:#fef2f2;color:#991b1b}.backup-card h4{margin:18px 0 6px}.backup-card code{overflow-wrap:anywhere}


/* Landing hero money tree: replaces only the old right-side vault/camera visual. */
.money-tree-art{width:min(520px,100%);height:min(520px,calc(100vh - 250px));min-height:400px;display:grid;place-items:center;position:relative;z-index:1;filter:drop-shadow(0 28px 55px #0005)}
.money-tree-svg{width:100%;height:100%;max-height:520px;overflow:visible;animation:money-tree-float 6s ease-in-out infinite}
.money-tree-caption{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;white-space:nowrap;text-align:center;text-shadow:0 5px 20px #0008}
.money-tree-caption span{font-size:10px;letter-spacing:2px;color:#e8c66e;font-weight:800}
.money-tree-caption b{font-size:18px;color:#fff;font-weight:700}
@keyframes money-tree-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(max-width:850px){.money-tree-art{width:min(430px,100%);height:390px;min-height:0}.money-tree-caption{bottom:0}}
@media(max-width:600px){.money-tree-art{width:min(350px,100%);height:330px}.money-tree-caption b{font-size:15px}.money-tree-caption span{font-size:8px;letter-spacing:1.5px}}

/* Smart Pay unified brand logo - applied across landing, login, admin and customer views */
.landing-brand-icon{overflow:hidden;display:grid!important;place-items:center!important;background:radial-gradient(circle at 30% 25%,#fff0a0,#d6a83d 55%,#8d6115)!important;border:1px solid #f5d878}
.landing-brand-icon img{width:100%;height:100%;display:block;object-fit:cover}
.brand-logo{display:flex!important;align-items:center;gap:11px!important}
.brand-logo img{width:46px;height:46px;display:block;border-radius:12px;box-shadow:0 8px 24px rgba(12,50,31,.18)}
.sidebar .logo-icon{display:grid!important;place-items:center!important;overflow:hidden!important;background:transparent!important;padding:0!important}
.sidebar .logo-icon img{width:48px;height:48px;display:block;border-radius:13px}
.customer-brand-icon{overflow:hidden!important;background:transparent!important;padding:0!important}
.customer-brand-icon img{width:100%;height:100%;display:block;border-radius:13px}
.receipt-brand>img{width:46px;height:46px;display:block;border-radius:11px}
@media(max-width:600px){.brand-logo img{width:42px;height:42px}.sidebar .logo-icon img{width:42px;height:42px}.receipt-brand>img{width:38px;height:38px}}


/* Expanded admin dashboard stats */
#dashboard-view .stats-grid {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
}
#dashboard-view .stat-card {
  min-height: 78px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#dashboard-view .stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15,23,42,.08);
  border-color: #cbd5e1;
}
@media (max-width: 1100px) {
  #dashboard-view .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  #dashboard-view .stats-grid { grid-template-columns: minmax(0, 1fr); }
}

/* SmartPay PDF Engine: force KYC document to a single A4 page. */
@media print {
  .spdf-kyc .kyc-a4-sheet {
    padding: 18px !important;
    font-size: 10.5px !important;
  }
  .spdf-kyc .kyc-document-head { padding-bottom: 8px !important; gap: 10px !important; }
  .spdf-kyc .kyc-brand { font-size: 20px !important; }
  .spdf-kyc .kyc-doc-subtitle { font-size: 8px !important; }
  .spdf-kyc .kyc-a4-photo, .spdf-kyc .kyc-photo-placeholder { width: 28mm !important; height: 36mm !important; }
  .spdf-kyc .kyc-doc-title { margin: 10px 0 8px !important; font-size: 17px !important; }
  .spdf-kyc .kyc-status-line { padding: 7px !important; margin-bottom: 8px !important; }
  .spdf-kyc .kyc-a4-sheet h3 { font-size: 11px !important; margin: 9px 0 5px !important; }
  .spdf-kyc .kyc-detail-table th, .spdf-kyc .kyc-detail-table td { padding: 5px 6px !important; }
  .spdf-kyc .kyc-doc-list { line-height: 1.35 !important; }
  .spdf-kyc .kyc-declaration { margin-top: 10px !important; padding: 7px !important; line-height: 1.35 !important; }
  .spdf-kyc .kyc-signatures { margin-top: 20px !important; }
  .spdf-kyc .kyc-footer { margin-top: 10px !important; padding-top: 5px !important; }
}


/* Mobile smooth coin-rain performance: keep the effect on the compositor while scrolling. */
.gold-coin-rain, body > #gold-coin-rain {
  contain: strict !important;
  isolation: isolate;
  pointer-events: none !important;
  will-change: transform;
  transform: translateZ(0);
}
.gold-coin-rain .gold-coin, body > #gold-coin-rain .gold-coin {
  will-change: transform, opacity;
  transform: translate3d(0, -8vh, 0) translateZ(0);
  backface-visibility: hidden;
}
@media (max-width:600px) {
  .gold-coin-rain, body > #gold-coin-rain {
    contain: strict !important;
    transform: translate3d(0,0,0);
  }
  .gold-coin-rain .gold-coin, body > #gold-coin-rain .gold-coin {
    box-shadow: 0 2px 6px rgba(0,0,0,.22) !important;
    text-shadow: none !important;
    border-width: 1px !important;
    font-weight: 800;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gold-coin-rain, body > #gold-coin-rain { display:none !important; }
}


/* Final mobile landing scroll-performance pass.
   Keep the same visual design, but remove the expensive 3D/paint work that can
   compete with the browser's native one-finger scrolling on mid-range phones. */
@media (max-width:600px) {
  html, body { overscroll-behavior-y: auto !important; }
  .public-landing {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    overflow-x: clip !important;
    -webkit-overflow-scrolling: touch;
  }
  .landing-hero { flex: none !important; }
  .landing-visual { contain: layout paint; }
  .money-tree-art { filter: none !important; }
  .money-tree-svg { animation: none !important; }

  /* Coins stay visible, but use compositor-friendly 2D rotation and no costly
     per-frame shadow/text painting while the document is being scrolled. */
  body > #gold-coin-rain {
    contain: strict !important;
    will-change: auto !important;
    transform: translateZ(0) !important;
  }
  body > #gold-coin-rain .gold-coin {
    box-shadow: none !important;
    text-shadow: none !important;
    background: linear-gradient(145deg,#ffe98a 0%,#e5b83e 58%,#b77914 100%) !important;
    border: 1px solid #f7d56a !important;
    backface-visibility: hidden !important;
    transform-style: flat !important;
    animation-name: smartpay-mobile-coin-fall !important;
  }
}
@keyframes smartpay-mobile-coin-fall {
  0% { transform: translate3d(0,-10vh,0) rotate(0deg); opacity:0; }
  8% { opacity:1; }
  100% { transform: translate3d(var(--drift,20px),110vh,0) rotate(360deg); opacity:0; }
}

/* KYC crop confirmation */
.kyc-crop-confirm-preview{display:block;width:min(100%,420px);max-height:55vh;object-fit:contain;margin:12px auto 18px;border:1px solid var(--border-color,#d1d5db);border-radius:10px;background:#f8fafc}.kyc-crop-note{font-size:13px;color:#64748b;margin:8px 0}.kyc-camera-modal-card .kyc-camera-actions{flex-wrap:wrap}

/* Manual KYC crop: the selection rectangle is the only area exported. */
.kyc-crop-stage{position:relative;width:100%;max-height:60vh;overflow:hidden;display:flex;justify-content:center;align-items:center;background:#0f172a;border-radius:10px;touch-action:none}
#kyc-source-canvas{display:block;width:100%;height:auto;max-height:60vh;object-fit:contain;touch-action:none}
.kyc-crop-selection{position:absolute;border:2px solid #22c55e;box-shadow:0 0 0 9999px rgba(0,0,0,.48);cursor:move;touch-action:none;box-sizing:border-box}
.kyc-crop-handle{position:absolute;width:18px;height:18px;border:2px solid white;background:#16a34a;border-radius:50%;touch-action:none}
.kyc-crop-handle[data-corner="nw"]{left:-9px;top:-9px;cursor:nwse-resize}.kyc-crop-handle[data-corner="ne"]{right:-9px;top:-9px;cursor:nesw-resize}.kyc-crop-handle[data-corner="sw"]{left:-9px;bottom:-9px;cursor:nesw-resize}.kyc-crop-handle[data-corner="se"]{right:-9px;bottom:-9px;cursor:nwse-resize}
.kyc-crop-controls{display:flex;flex-direction:column;gap:6px;margin:10px 0;color:#475569;font-size:13px}.kyc-crop-controls label{font-weight:650}.kyc-crop-controls input{width:100%}