/* loan-ui.css — Frenzon member portal: the Loans page (redesign, 6 Nov 2026).
   Reuses the Payments look (pay-ui.css: hero, tiles, step cards, pay-with tiles)
   and the fund colours from account-ui.css. This file only adds what is
   specific to loans: hero figures, apply flow strip, loan cards, overview
   tiles and rows, eligibility, guarantors, history timeline.
   Load after pay-ui.css and home-ui.css. No inline styles (portal CSP is style-src 'self'). */

/* ============ HERO ============ */
.ln-hero { margin-bottom: 12px; }
.ln-hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px; }
.ln-hs { display: grid; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(4px); }
.ln-hs-l { font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #bfe3cf; }
.ln-hs-v { font-size: clamp(1rem, 4.6vw, 1.3rem); font-weight: 850; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; color: #fff; }
.ln-hs:first-child { grid-column: 1 / -1; padding: 12px 14px; }
.ln-hs:first-child .ln-hs-v { font-size: clamp(1.45rem, 7.4vw, 1.9rem); color: var(--pay-gold-soft, #f6e3b0); letter-spacing: -.01em; }

@media (min-width: 900px) {
  .ln-hero-stats { max-width: 560px; grid-template-columns: 1.6fr 1fr 1fr; }
  .ln-hs:first-child { grid-column: auto; }
}

/* ============ SHARED SMALL PIECES ============ */
.ln-refresh { margin-left: auto; align-self: center; flex: none; }
.pay-pane-head .ln-refresh { width: auto; }
.ln-submit { width: 100%; min-height: 54px; border-radius: 18px; font-size: 1rem; font-weight: 800; }
.ln-card-plain { border-radius: 22px; border: 1px solid var(--pay-line, var(--border-color)); box-shadow: var(--shadow-sm); margin-bottom: 14px; }
.ln-card-plain .card-title { font-weight: 800; }

/* ============ APPLY ============ */
.ln-flow { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.ln-flow li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; background: #fff; border: 1px solid var(--pay-line, var(--border-color)); font-size: .78rem; font-weight: 750; color: var(--text-main); }
.ln-flow li span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--pay-gold, #e0b04a); color: #3b2a02; font-size: .74rem; font-weight: 800; }
.ln-capnote { margin-top: 8px; }
.ln-capnote:not(:empty) { padding: 10px 12px; border-radius: 14px; background: var(--info-light); color: #174a85; font-size: .84rem; line-height: 1.4; }
#loanApplicationForm .pay-channels { margin-bottom: 14px; }
#loanApplicationForm .form-row { display: grid; gap: 0 14px; }
@media (min-width: 560px) { #loanApplicationForm .form-row { grid-template-columns: 1fr 1fr; } }

/* ============ ELIGIBILITY ============ */
.ln-elig { position: relative; overflow: hidden; padding: 18px; border: 1px solid var(--pay-line, var(--border-color)); border-left-width: 1px; border-radius: 24px; box-shadow: var(--pay-glow, var(--shadow-md)); background: #fff; }
.ln-elig .eligibility-status { gap: 16px; padding: 16px; border-radius: 20px; background: var(--bg-subtle); border: 1px solid var(--border-color); }
.ln-elig .eligibility-icon { width: 58px; height: 58px; font-size: 1.5rem; border-radius: 20px; color: #fff; background: linear-gradient(145deg, #6b7a72, #44524a); box-shadow: 0 10px 18px -10px rgba(16,35,27,.6); }
.ln-elig .eligibility-status strong { display: inline-block; margin: 0 6px 6px 0; font-size: 1.2rem; font-weight: 850; }
.ln-elig .eligibility-status .form-help { margin-top: 4px; font-size: .86rem; line-height: 1.45; color: var(--text-main); }
.ln-elig .eligibility-status:has(.badge-success) { background: linear-gradient(180deg, #f2fbf6, #e6f6ed); border-color: #bfe3cf; }
.ln-elig .eligibility-status:has(.badge-success) .eligibility-icon { background: linear-gradient(145deg, #2b8a62, #14432f); }
.ln-elig .eligibility-status:has(.badge-warning) { background: linear-gradient(180deg, #fffaf0, #fff4dc); border-color: #f0dca3; }
.ln-elig .eligibility-status:has(.badge-warning) .eligibility-icon { background: linear-gradient(145deg, #e0b04a, #9a5a06); }
.ln-elig .eligibility-status:has(.badge-info) { background: linear-gradient(180deg, #f3f8fe, #e6f0fb); border-color: #c4dbf3; }
.ln-elig .eligibility-status:has(.badge-info) .eligibility-icon { background: linear-gradient(145deg, #2f78c4, #1f5fa8); }
.ln-elig-actions { display: flex; justify-content: flex-end; margin-top: 12px; }

/* ============ MY LOANS ============ */
.ln-paycta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin: 0 0 14px; padding: 12px 14px; border-radius: 18px;
  background: linear-gradient(180deg, #fffaf0, #fff4dc); border: 1px solid #f0dca3; }
.ln-paycta-txt { display: grid; gap: 1px; min-width: 0; font-size: .82rem; color: #5c4306; }
.ln-paycta-txt strong { font-size: .92rem; color: #3b2a02; }
.ln-paycta .loan-pay-cta-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ln-paycta .btn { width: auto; }

.loan-list .ln-card, .ln-card { --lc: #2b8a62; position: relative; overflow: hidden; margin-bottom: 14px; padding: 16px 16px 16px 20px; background: #fff;
  border: 1px solid var(--pay-line, var(--border-color)); border-radius: 24px; box-shadow: var(--shadow-sm); animation: pay-rise .35s ease both; }
.ln-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--lc); }
.ln-card.ln-wait { --lc: #e0b04a; }
.ln-card.ln-live { --lc: #1f6b4a; }
.ln-card.ln-done { --lc: #1f6fb5; }
.ln-card.ln-bad { --lc: #d9392b; }
.ln-card .loan-header { align-items: center; gap: 12px; }
.ln-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 15px; color: #fff;
  background: linear-gradient(145deg, var(--lc), color-mix(in srgb, var(--lc) 62%, #000)); box-shadow: 0 10px 16px -10px var(--lc); }
.ln-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ln-head-txt { flex: 1; min-width: 0; }
.ln-card .loan-title { font-size: 1.05rem; font-weight: 850; letter-spacing: -.005em; overflow-wrap: anywhere; }
.ln-sub { margin-top: 1px; font-size: .76rem; font-weight: 600; color: var(--text-muted); }
.ln-card .badge { flex: none; }

.ln-amount { display: grid; gap: 1px; margin-top: 14px; }
.ln-amount-l { font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.ln-amount-v { font-size: clamp(1.4rem, 7vw, 1.9rem); font-weight: 850; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--pay-ink, #0d2a1e); }

.ln-repay { margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: #f2fbf6; border: 1px solid #cfe9db; }
.ln-repay:empty { display: none; }
.ln-repay-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: .84rem; font-weight: 700; color: var(--text-main); }
.ln-repay-top b { font-size: 1rem; font-weight: 850; color: var(--primary-500); font-variant-numeric: tabular-nums; }
.ln-repay .ld-bar { height: 12px; margin: 8px 0 4px; }
.ln-repay-dates { font-size: .76rem; font-weight: 600; color: var(--text-muted); }

.ln-card .loan-steps { margin-top: 16px; padding: 12px 8px 8px; border-radius: 16px; background: var(--bg-subtle); border: 1px dashed var(--border-dark); }
.ln-card .loan-steps { padding-left: 2px; padding-right: 2px; gap: 2px; }
.ln-card .loan-steps li { font-size: .64rem; letter-spacing: -.01em; }
.ln-card .loan-step-name, .ln-card .loan-step-sub { overflow-wrap: normal; word-break: normal; }
.ln-card .loan-step-sub { font-size: .58rem; letter-spacing: -.02em; }
.ln-card .loan-steps li.current .loan-step-dot { background: var(--primary); box-shadow: 0 0 0 4px rgba(224,176,74,.4); }
.ln-card .loan-next { margin-top: 12px; padding: 11px 13px; border-radius: 14px; background: #fff8e6; border: 1px solid #f0dca3; color: #5c4306; font-size: .84rem; line-height: 1.45; }
.ln-card .loan-next-warn { background: #fdecea; border-color: #f3b9b2; color: #8a1a10; }
.ln-card .loan-summary { gap: 9px; margin-top: 14px; }
.ln-card .loan-summary-item { --a: #1f6b4a; position: relative; overflow: hidden; padding: 11px 12px 11px 15px; border-radius: 15px; background: #fff; border: 1px solid #e0ece5; box-shadow: 0 6px 12px -10px rgba(20,67,47,.6); }
.ln-card .loan-summary-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--a); }
.ln-card .loan-summary-item:nth-child(4n+2) { --a: #e0b04a; }
.ln-card .loan-summary-item:nth-child(4n+3) { --a: #1f6fb5; }
.ln-card .loan-summary-item:nth-child(4n+4) { --a: #6b4bb8; }
.ln-card .loan-summary-label { font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.ln-card .loan-summary-value { font-size: .98rem; font-weight: 850; color: var(--text-main); }
.ln-card .loan-actions { gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border-dark); }
.ln-card .loan-actions .btn { flex: 1 1 auto; width: auto; min-height: 42px; border-radius: 14px; font-weight: 750; }

/* ============ OVERVIEW (built by dashboard.js; restyled here, no JS change) ============ */
#loansDashboard .ld-grid { gap: 10px; margin-bottom: 14px; }
#loansDashboard .ld-grid .stat-card { padding: 14px 14px 13px 18px; border-radius: 20px; border: 1px solid var(--pay-line, var(--border-color)); box-shadow: var(--shadow-sm); background: #fff; animation: pay-rise .35s ease both; }
#loansDashboard .ld-grid .stat-card::before { width: 5px; }
#loansDashboard .ld-grid .stat-label { font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
#loansDashboard .ld-grid .stat-value { font-weight: 850; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
#loansDashboard .ld-grid .stat-card:first-child { grid-column: 1 / -1; color: #fff; border: 0; padding-left: 20px;
  background: radial-gradient(110% 150% at 100% 0%, rgba(224,176,74,.3) 0, rgba(224,176,74,0) 55%), linear-gradient(160deg, #14432f, #0b2c1e); box-shadow: var(--pay-glow, var(--shadow-md)); }
#loansDashboard .ld-grid .stat-card:first-child::before { background: var(--pay-gold, #e0b04a); }
#loansDashboard .ld-grid .stat-card:first-child .stat-label { color: #bfe3cf; }
#loansDashboard .ld-grid .stat-card:first-child .stat-value { color: #fff; font-size: clamp(1.5rem, 8vw, 2rem); }
#loansDashboard .ld-grid .stat-card:nth-child(4) { grid-column: 1 / -1; }
@media (min-width: 900px) { #loansDashboard .ld-grid .stat-card:first-child .stat-value { font-size: 1.45rem; white-space: nowrap; } }
@media (min-width: 900px) { #loansDashboard .ld-grid .stat-card:first-child, #loansDashboard .ld-grid .stat-card:nth-child(4) { grid-column: auto; } }

#loansDashboard .card { margin-bottom: 14px; border-radius: 22px; border: 1px solid var(--pay-line, var(--border-color)); box-shadow: var(--shadow-sm); }
#loansDashboard .card .card-title { font-weight: 800; }
#loansDashboard .ld-row { padding: 14px 0; }
#loansDashboard .ld-row.ld-row--overdue, #loansDashboard .ld-row.ld-row--warn { padding: 13px 14px 13px 16px; border-radius: 16px; }
#loansDashboard .ld-title { font-weight: 800; }
#loansDashboard .ld-bar { height: 12px; }
#loansDashboard .ld-actions .btn { min-height: 40px; border-radius: 13px; font-weight: 750; }
#loansDashboard .ld-pill { font-weight: 750; }
#loansDashboard .ld-steps { gap: 5px; }
#loansDashboard .ld-step { border-top-width: 5px; }

/* ============ HISTORY: one timeline per loan ============ */
.ln-hcard .activity-list { position: relative; margin-top: 14px; padding-left: 4px; }
.ln-hcard .activity-list::before { content: ""; position: absolute; left: 21px; top: 10px; bottom: 14px; width: 2px; background: linear-gradient(180deg, var(--lc), #dde7e2); border-radius: 2px; }
.ln-hcard .activity-item { position: relative; align-items: center; padding: 9px 0; border-top: 0; }
.ln-hcard .activity-item:first-child { padding-top: 9px; }
.ln-hcard .activity-icon { position: relative; z-index: 1; width: 34px; height: 34px; font-size: 1rem; font-weight: 900; color: #fff; background: var(--lc); box-shadow: 0 0 0 4px #fff; }
.ln-hcard .activity-title { font-size: .92rem; font-weight: 800; }
.ln-hcard .activity-time { font-size: .76rem; font-weight: 600; }
.ln-hcard .loan-actions { margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--border-dark); }
.ln-hcard .loan-actions .btn { width: 100%; min-height: 42px; border-radius: 14px; font-weight: 750; }

/* ============ LOAN DETAILS SHEET ============ */
#loanDetailModal .modal-title { font-weight: 850; }
#loanDetailModal .card-title { font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }

/* ============ DESKTOP ============ */
@media (min-width: 900px) {
  .ln-card { padding: 20px 22px 20px 26px; }
  #loan-my-loans .loan-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-items: start; }
  #loan-my-loans .loan-list .ln-card { margin-bottom: 0; }
  #loan-my-loans .loan-list .loading-state, #loan-my-loans .loan-list .empty-state { grid-column: 1 / -1; }
  #loanApplicationForm { max-width: 720px; }
}

@media (prefers-reduced-motion: reduce) {
  .ln-card, #loansDashboard .ld-grid .stat-card { animation: none; }
}

/* phone tidy-ups */
@media (max-width: 420px) {
  .ln-hs { padding: 9px 10px; }
  .ln-hs-l { font-size: .6rem; }
  .ln-card .loan-actions .btn { flex: 1 1 calc(50% - 4px); }
}


/* =====================================================================
   NAVY SKIN (7 Nov 2026): the Loans page wears the admin colours.
   Every rule starts with #route-loans (or a loans-only class), so no
   other page changes. Meaning colours stay: green = good / repaying,
   gold = waiting, red = problem, blue = in progress.
   ===================================================================== */
#route-loans {
  --primary: #0f1f3d; --primary-500: #1f4e9c; --primary-700: #0b1830; --primary-900: #070f20;
  --primary-light: #e3ecfa;
  --pay-ink: #10192b; --pay-line: #dde3ec;
  --pay-glow: 0 18px 40px -22px rgba(15, 31, 61, .65);
  --border-color: #dde3ec; --border-dark: #c5cedb; --bg-subtle: #f5f7fa;
  --text-main: #10192b; --text-muted: #5c6779;
  --shadow-focus: 0 0 0 4px rgba(37, 99, 184, .18);
  --shadow-md: 0 10px 28px -14px rgba(15, 31, 61, .3);
}
#route-loans :focus-visible { outline-color: rgba(37, 99, 184, .55); }
#route-loans .btn-primary { background: linear-gradient(180deg, #2563b8, #173468); box-shadow: 0 8px 16px -8px rgba(15, 31, 61, .75); }
#route-loans .btn-primary:hover { background: linear-gradient(180deg, #2f70c9, #0f1f3d); }
#route-loans .btn-outline { border-color: #c5cedb; }

/* ---- hero ---- */
#route-loans .pay-hero {
  background:
    radial-gradient(90% 120% at 100% -10%, rgba(224, 176, 74, .36) 0, rgba(224, 176, 74, 0) 55%),
    radial-gradient(120% 140% at 0% 110%, rgba(37, 99, 184, .6) 0, rgba(37, 99, 184, 0) 60%),
    linear-gradient(160deg, #0f1f3d 0%, #070f20 100%); }
#route-loans .pay-hero-sub { color: #c5d3ea; }
#route-loans .ln-hs-l { color: #aebfe0; }
#route-loans .pay-chip.good { color: #dbe7fb; }
#route-loans .pay-chips-light .pay-chip.on b { color: #c5d3ea; }

/* ---- the six section tiles: a fixed 3 x 2 grid ---- */
.ln-tiles-wrap { margin: 0 0 16px; }
#route-loans .tabs.ln-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; overflow: visible; background: none; border-radius: 0; border: 0; }
#route-loans .tabs.ln-tiles .tab-button.ln-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 12px;
  width: auto; min-width: 0; min-height: 112px; margin: 0; padding: 12px 11px 12px; text-align: left; white-space: normal; font: inherit; cursor: pointer;
  background: #fff; color: var(--text-main); border: 1.5px solid #dde3ec; border-radius: 20px; box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s, border-color .15s; }
#route-loans .tabs.ln-tiles .tab-button.ln-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #b9c8e2; }
#route-loans .tabs.ln-tiles .tab-button.ln-tile:active { transform: scale(.97); }
.ln-tile-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; color: #fff;
  background: linear-gradient(145deg, var(--tc), color-mix(in srgb, var(--tc) 60%, #000)); box-shadow: 0 10px 16px -10px var(--tc); }
.ln-tile-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lt-ov { --tc: #2563b8; } .lt-ap { --tc: #c98a12; } .lt-el { --tc: #1c7c54; } .lt-ml { --tc: #5b4bb8; } .lt-gu { --tc: #2a7fa8; } .lt-hi { --tc: #64748b; }
.ln-tile-txt { display: grid; gap: 1px; min-width: 0; }
.ln-tile-t { font-size: .9rem; font-weight: 800; line-height: 1.15; }
.ln-tile-s { font-size: .68rem; font-weight: 600; line-height: 1.25; color: var(--text-muted); }
.ln-tile-badge { position: absolute; top: -6px; right: -4px; z-index: 2; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 99px;
  background: #d9392b; color: #fff; font-size: .72rem; font-weight: 800; box-shadow: 0 0 0 3px #eef1f6; }
.ln-tile-badge.hidden { display: none; }

/* the open tile: navy, lifted, gold ring and a gold tick */
#route-loans .tabs.ln-tiles .tab-button.ln-tile.active {
  color: #fff; border-color: transparent; transform: translateY(-2px);
  background: radial-gradient(120% 120% at 100% 0%, rgba(224, 176, 74, .42) 0, rgba(224, 176, 74, 0) 60%), linear-gradient(160deg, #2563b8 0%, #0f1f3d 72%);
  box-shadow: 0 0 0 3px rgba(224, 176, 74, .75), 0 18px 28px -14px rgba(15, 31, 61, .8); }
.ln-tile.active .ln-tile-s { color: #c5d3ea; }
.ln-tile.active .ln-tile-ic { color: #3b2a02; background: linear-gradient(145deg, #f6e3b0, #e0b04a); box-shadow: none; }
.ln-tile.active::after { content: ""; position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%;
  background: #e0b04a no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b2a02' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4.3 4.3L18.5 8'/%3E%3C/svg%3E"); }
.ln-tile.active .ln-tile-badge { box-shadow: 0 0 0 3px #0f1f3d; }
@media (max-width: 380px) { .ln-tile-s { display: none; } #route-loans .tabs.ln-tiles .tab-button.ln-tile { min-height: 96px; } }
@media (min-width: 900px) {
  #route-loans .tabs.ln-tiles { gap: 14px; }
  #route-loans .tabs.ln-tiles .tab-button.ln-tile { min-height: 124px; padding: 16px 15px; }
  .ln-tile-t { font-size: 1rem; } .ln-tile-s { font-size: .76rem; }
}

/* ---- opened tile: a navy heading band (same idea as the Account and Home cards) ---- */
#route-loans .pay-pane-head { position: relative; overflow: hidden; margin: 0 0 14px; padding: 14px 16px; border-radius: 22px; color: #fff;
  background: radial-gradient(170px 110px at 100% 0, rgba(224, 176, 74, .4), transparent 70%), linear-gradient(100deg, #2b4f8c 0%, #3a69b0 75%, #4f86d0 100%);
  box-shadow: var(--pay-glow); }
#route-loans .pay-pane-head::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(224,176,74,0), #e0b04a 40%, rgba(224,176,74,0)); }
#route-loans .pay-pane-head::after { content: ""; position: absolute; right: -28px; top: -36px; width: 104px; height: 104px; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(255,255,255,.18); box-shadow: 0 0 0 14px rgba(255,255,255,.04); }
#route-loans .pay-pane-head > * { position: relative; z-index: 1; }
#route-loans .pay-pane-ic { width: 42px; height: 42px; color: #3b2a02; background: linear-gradient(145deg, #f6e3b0, #e0b04a); box-shadow: 0 8px 14px -8px rgba(0,0,0,.6); }
#route-loans .pay-pane-title { color: #fff; font-size: 1.15rem; }
#route-loans .pay-pane-sub { color: #c5d3ea; font-size: .82rem; }
#route-loans .pay-pane-head .ln-refresh { color: #3b2a02; font-weight: 800; background: linear-gradient(145deg, #f6e3b0, #e0b04a); border: 0; }

/* ---- step cards, channel tiles ---- */
#route-loans .pay-n { background: linear-gradient(145deg, #2563b8, #0f1f3d); box-shadow: 0 8px 14px -8px #0f1f3d; }
#route-loans .pay-ch:focus-visible { outline-color: rgba(37, 99, 184, .4); }
#route-loans .pay-ch.on { background: linear-gradient(180deg, #f3f7fe, #e3ecfa); box-shadow: 0 0 0 3px rgba(31, 78, 156, .16), var(--shadow-sm); }
#route-loans .ln-flow li span { background: linear-gradient(145deg, #f6e3b0, #e0b04a); }

/* ---- APPLY: a soft navy-tinted panel behind the three steps ---- */
#loan-apply.tab-content.active { position: relative; padding: 12px; margin: 0 -4px; border-radius: 28px; border: 1px solid #d6e0f2;
  background:
    radial-gradient(260px 180px at 100% 0, rgba(224, 176, 74, .16), transparent 70%),
    radial-gradient(300px 220px at 0 100%, rgba(37, 99, 184, .14), transparent 70%),
    radial-gradient(rgba(31, 78, 156, .12) 1.2px, transparent 1.5px) 0 0 / 18px 18px,
    linear-gradient(180deg, #f6f9fe, #eaf0fa); }

/* ---- My Loans and Eligibility: colours only, layout untouched ---- */
#route-loans .ln-card .loan-summary-item { --a: #0f1f3d; border-color: #e0e6f0; box-shadow: 0 6px 12px -10px rgba(15, 31, 61, .6); }
#route-loans .ln-card .loan-summary-item:nth-child(4n+3) { --a: #2563b8; }
#route-loans .ln-card .loan-steps li.current .loan-step-dot { background: #0f1f3d; }
#route-loans .ln-repay-top b { color: #1c7c54; }
#route-loans .ln-ic { background: linear-gradient(145deg, var(--lc), color-mix(in srgb, var(--lc) 62%, #000)); }

/* ---- OVERVIEW and HISTORY (cards built by dashboard.js / loan-views.js) ---- */
#loansDashboard .ld-grid .stat-card:first-child {
  background: radial-gradient(110% 150% at 100% 0%, rgba(224, 176, 74, .3) 0, rgba(224, 176, 74, 0) 55%), linear-gradient(160deg, #1f4e9c, #0f1f3d 70%); }
#loansDashboard .ld-grid .stat-card:first-child .stat-label { color: #c5d3ea; }
#loansDashboard .ld-grid .stat-card::before { background: #2563b8; }
#loansDashboard .ld-grid .stat-card:nth-child(2)::before { background: #e0b04a; }
#loansDashboard .ld-grid .stat-card:nth-child(3)::before { background: #2a7fa8; }
#loansDashboard .ld-grid .stat-card:nth-child(4)::before { background: #5b4bb8; }
#loansDashboard .ld-grid .stat-card:first-child::before { background: #e0b04a; }
#loansDashboard .card.ld-section { --cp: 18px; padding: var(--cp); overflow: hidden; }
#loansDashboard .card.ld-section > .card-header { position: relative; align-items: center; margin: calc(var(--cp) * -1) calc(var(--cp) * -1) 14px; padding: 13px var(--cp); overflow: hidden;
  background: radial-gradient(150px 100px at 100% 0, rgba(224, 176, 74, .36), transparent 70%), linear-gradient(100deg, #2b4f8c 0%, #3a69b0 75%, #4f86d0 100%); }
#loansDashboard .card.ld-section > .card-header::after { content: ""; position: absolute; right: -26px; top: -34px; width: 96px; height: 96px; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(255,255,255,.18); box-shadow: 0 0 0 14px rgba(255,255,255,.04); }
#loansDashboard .card.ld-section > .card-header .card-title { padding-left: 0; color: #fff; font-size: 1.02rem; }
#loansDashboard .card.ld-section > .card-header .card-title::before { content: none; }
#loansDashboard .card.ld-section > .card-header .card-subtitle { color: #c5d3ea; font-size: .78rem; }
#loansDashboard .ld-bar::-webkit-progress-value { background: linear-gradient(90deg, #2563b8, #1f4e9c); }
#loansDashboard .ld-bar::-moz-progress-bar { background: #2563b8; }

/* =====================================================================
   GUARANTORS (redesign): three cards in the Account style
   ===================================================================== */
.gq-flow { margin-bottom: 14px; }
.gq-card { margin: 0 0 14px; overflow: hidden; background: #fff; border: 1px solid #dde3ec; border-radius: 24px; box-shadow: var(--shadow-sm); }
.gq-body { padding: 14px; }
.gq-band { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; overflow: hidden; color: #fff;
  background: radial-gradient(150px 100px at 100% 0, rgba(224, 176, 74, .36), transparent 70%), linear-gradient(100deg, #2b4f8c 0%, #3a69b0 75%, #4f86d0 100%); }
.gq-band::after { content: ""; position: absolute; right: -26px; top: -34px; width: 96px; height: 96px; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(255,255,255,.18); box-shadow: 0 0 0 14px rgba(255,255,255,.04); }
.gq-band > * { position: relative; z-index: 1; }
.gq-band-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; color: #3b2a02; background: linear-gradient(145deg, #f6e3b0, #e0b04a); box-shadow: 0 8px 14px -8px rgba(0,0,0,.6); }
.gq-band-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gq-band-txt { flex: 1; min-width: 0; }
.gq-band-t { margin: 0; font-size: 1.02rem; font-weight: 800; color: #fff; }
.gq-band-s { margin: 2px 0 0; font-size: .78rem; line-height: 1.35; color: #c5d3ea; }
.gq-count { flex: none; min-width: 28px; height: 28px; padding: 0 9px; display: inline-grid; place-items: center; border-radius: 99px; background: #e0b04a; color: #3b2a02; font-size: .82rem; font-weight: 850; }
.gq-count.hidden { display: none; }
.gq-count-ref { max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; }

/* the form: heading band, then the 3 step cards */
.gq-form { gap: 12px; margin: 0 0 14px; }
.gq-form > .gq-band { border-radius: 24px; box-shadow: var(--pay-glow); background:
  radial-gradient(150px 100px at 100% 0, rgba(224, 176, 74, .5), transparent 70%), linear-gradient(100deg, #3a69b0 0%, #5a93da 100%); }

/* a guarantee / a member: avatar, name, amount, status */
.gq-list { display: grid; gap: 10px; }
.gq-item { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px; padding: 12px 12px 12px 16px; overflow: hidden;
  background: #fff; border: 1px solid #dde3ec; border-radius: 18px; box-shadow: var(--shadow-sm); }
.gq-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: #94a3b8; }
.gq-wait::before { background: #e0b04a; } .gq-ok::before { background: #1c7c54; } .gq-done::before { background: #2563b8; } .gq-bad::before { background: #d9392b; }
.gq-wait { background: linear-gradient(90deg, #fffbf1, #fff 60%); }
.gq-bad { background: linear-gradient(90deg, #fff6f5, #fff 60%); }
.gq-av { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; font-size: .9rem; font-weight: 850; letter-spacing: .02em;
  background: linear-gradient(145deg, #2563b8, #0f1f3d); box-shadow: 0 8px 14px -8px #0f1f3d; }
.gq-main { min-width: 0; }
.gq-name { font-size: .96rem; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.gq-when { margin-top: 2px; font-size: .74rem; font-weight: 600; color: var(--text-muted); }
.gq-side { display: grid; justify-items: end; gap: 4px; }
.gq-amt { font-size: 1rem; font-weight: 850; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gq-item .guarantor-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px dashed #c5cedb; }
.gq-item .guarantor-actions .btn { flex: 1 1 auto; width: auto; min-height: 42px; border-radius: 14px; font-weight: 750; }
.gq-pick { grid-template-columns: auto 1fr auto; cursor: default; background: #f5f7fa; box-shadow: none; }
.gq-pick::before { background: #2563b8; }
.gq-pick .gq-sel { width: auto; min-height: 38px; padding: 0 16px; border-radius: 99px; font-weight: 800; }
.gq-list .empty-state, .gq-list .loading-state { padding: 22px 12px; border: 1px dashed #c5cedb; border-radius: 18px; background: #f5f7fa; text-align: center; color: var(--text-muted); font-size: .88rem; }

/* member search box and the chosen member */
.gq-search { position: relative; }
.gq-search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; fill: none; stroke: #5c6779; stroke-width: 2.2; stroke-linecap: round; pointer-events: none; }
.gq-search .form-control { padding-left: 42px; }
#guarantorResults { margin-top: 10px; }
.gq-selected:not(:empty) { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 11px 14px; border-radius: 16px; border: 1px solid #b9c8e2; background: linear-gradient(180deg, #f3f7fe, #e3ecfa);
  color: #0f1f3d; font-size: .92rem; font-weight: 800; }
.gq-selected:not(:empty)::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: #1f4e9c no-repeat center / 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4.3 4.3L18.5 8'/%3E%3C/svg%3E"); }
.gq-selected:not(:empty)::after { content: "will get your request"; margin-left: auto; font-size: .7rem; font-weight: 700; color: #5c6779; }

@media (min-width: 900px) { .gq-form, .gq-flow { max-width: 720px; } .gq-card { max-width: 720px; } }
@media (max-width: 420px) { .gq-band-s { display: none; } .gq-form > .gq-band .gq-band-s { display: block; } .gq-item { padding-right: 10px; } }
@media (prefers-reduced-motion: reduce) { #route-loans .tabs.ln-tiles .tab-button.ln-tile { transition: none; } }


/* ---- notes: a small fixed box (members do not write paragraphs) ---- */
#route-loans .pay-form textarea.form-control { height: 58px; min-height: 58px; max-height: 58px; resize: none; padding-top: 12px; }

/* ---- payment status on a loan card ---- */
.ln-paystats { display: grid; gap: 8px; margin-top: 12px; }
.ln-paystat { position: relative; padding: 11px 13px 11px 17px; border-radius: 16px; overflow: hidden; font-size: .84rem; line-height: 1.4; border: 1px solid; }
.ln-paystat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: currentColor; opacity: .55; }
.ln-paystat b { display: block; font-size: .95rem; font-weight: 850; color: var(--text-main); }
.ln-paystat .ps-line { margin-top: 2px; color: var(--text-main); }
.ln-paystat .ps-late { margin-top: 6px; padding-top: 6px; border-top: 1px dashed currentColor; font-weight: 700; }
.ps-wait { color: #7a4504; background: #fff8e6; border-color: #f0dca3; }
.ps-bad { color: #9a1a10; background: #fdecea; border-color: #f3b9b2; }
.ps-ok { color: #0f5d3c; background: #eaf7f0; border-color: #bfe3cf; }

/* ---- history groups ---- */
.ln-hchips { margin: 0 0 12px; }
#loan-history .ln-hmore { width: 100%; min-height: 46px; margin-top: 4px; border-radius: 16px; font-weight: 800; }


/* =====================================================================
   NAVY, BALANCED (6 Nov, owner chose navy): deep navy only in the hero and
   the open tile; heading bands are light blue with navy text and a gold
   icon, so the page has one dark anchor instead of many.
   ===================================================================== */
#route-loans .pay-pane-head, #loansDashboard .card.ld-section > .card-header, .gq-band, .gq-form > .gq-band {
  color: #0f1f3d; border: 1px solid #d3def0;
  background: radial-gradient(160px 100px at 100% 0, rgba(224, 176, 74, .28), transparent 70%), linear-gradient(100deg, #f1f5fc 0%, #e2ebf8 100%); }
#route-loans .pay-pane-head { box-shadow: 0 10px 24px -16px rgba(15, 31, 61, .35); }
#loansDashboard .card.ld-section > .card-header, .gq-band { border-width: 0 0 1px 0; }
.gq-form > .gq-band { border-width: 1px; box-shadow: 0 10px 24px -16px rgba(15, 31, 61, .35); }
#route-loans .pay-pane-head::before { background: linear-gradient(90deg, rgba(224,176,74,0), #e0b04a 40%, rgba(224,176,74,0)); }
#route-loans .pay-pane-head::after, #loansDashboard .card.ld-section > .card-header::after, .gq-band::after {
  border-color: rgba(31, 78, 156, .16); box-shadow: 0 0 0 14px rgba(31, 78, 156, .04); }
#route-loans .pay-pane-title, #loansDashboard .card.ld-section > .card-header .card-title, .gq-band-t { color: #0f1f3d; }
#route-loans .pay-pane-sub, #loansDashboard .card.ld-section > .card-header .card-subtitle, .gq-band-s { color: #4a5b78; }
.gq-count { background: #0f1f3d; color: #f6e3b0; }