/* =====================================================================
   DABA Loan Consultants — interface styles
   Single file, no external dependencies.
   ===================================================================== */
:root{
  /* brand */
  --p-900:#2e1550;
  --p-800:#3d1d69;
  --p-700:#4c2582;
  --p-600:#5b2c8d;
  --p-500:#6f3aa8;
  --p-300:#b79ede;
  --p-100:#efe7fa;
  --p-50:#f8f4fd;
  --accent:#f5a623;

  /* ink + surfaces */
  --ink:#1a1721;
  --ink-2:#4b4657;
  --ink-3:#7a7487;
  --line:#e7e3ef;
  --line-2:#f1eef7;
  --bg:#f6f4fa;
  --surface:#ffffff;

  /* status */
  --good:#12694a; --good-bg:#e3f4ec;
  --warn:#8a5a00; --warn-bg:#fdf2dd;
  --bad:#a51f1a;  --bad-bg:#fbe9e8;
  --info:#17538f; --info-bg:#e7f0fa;
  --neutral:#54505f; --neutral-bg:#eeecf3;

  --r-sm:8px; --r:12px; --r-lg:16px;
  --sh-1:0 1px 2px rgba(26,23,33,.06), 0 1px 3px rgba(26,23,33,.04);
  --sh-2:0 2px 4px rgba(26,23,33,.05), 0 12px 28px rgba(46,21,80,.08);
  --sh-3:0 18px 40px rgba(46,21,80,.16);
  --sidebar:248px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.55 "Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--p-600);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .5rem;line-height:1.25;letter-spacing:-.01em}
h1{font-size:1.4rem;font-weight:700}
h2{font-size:1.08rem;font-weight:700}
h3{font-size:.98rem;font-weight:700}
p{margin:0 0 .75rem}
small,.small{font-size:.85rem}
.muted{color:var(--ink-3)}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.ico{vertical-align:-.18em;flex:none}
.right{text-align:right}
.nowrap{white-space:nowrap}
.mt{margin-top:18px}

/* ---------------------------------------------------------- app shell ---- */
.shell{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar);flex:0 0 var(--sidebar);
  background:linear-gradient(175deg,var(--p-800) 0%,var(--p-900) 62%,#25104a 100%);
  color:#fff;display:flex;flex-direction:column;padding:16px 0 10px;position:sticky;top:0;height:100vh;
}
.brand{display:flex;align-items:center;gap:10px;padding:0 16px 16px}
.brand img{width:40px;height:34px;object-fit:contain;background:#fff;border-radius:8px;padding:3px}
.brand-text{line-height:1.15}
.brand-name{font-weight:800;letter-spacing:.04em;font-size:.98rem}
.brand-sub{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.side-nav{display:flex;flex-direction:column;gap:2px;padding:6px 10px;flex:1;overflow-y:auto}
.nav-group{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);
  padding:14px 12px 5px;font-weight:700}
.nav-link{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.78);
  padding:9px 12px;border-radius:9px;font-size:.9rem;font-weight:500;position:relative}
.nav-link:hover{background:rgba(255,255,255,.09);color:#fff;text-decoration:none}
.nav-link.active{background:rgba(255,255,255,.14);color:#fff;font-weight:600;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.nav-link.active::before{content:"";position:absolute;left:-10px;top:9px;bottom:9px;width:3px;
  border-radius:0 3px 3px 0;background:var(--accent)}
.nav-link .count{margin-left:auto;background:var(--accent);color:#3a2600;border-radius:20px;
  font-size:.7rem;font-weight:800;padding:1px 7px}
.side-foot{padding:12px 16px 0;border-top:1px solid rgba(255,255,255,.12);margin:8px 10px 0}
.side-user{display:flex;align-items:center;gap:10px}
.avatar{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:.8rem;flex:none}
.side-user .who{font-size:.86rem;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis}
.side-user .role{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.side-foot a{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.72);
  font-size:.84rem;margin-top:10px}
.side-foot a:hover{color:#fff;text-decoration:none}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:rgba(255,255,255,.96);backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;
  padding:12px 24px;position:sticky;top:0;z-index:30}
.topbar h1{margin:0;font-size:1.12rem}
.topbar .crumb{font-size:.76rem;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.topbar-spacer{flex:1}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;
  color:var(--ink-2);background:transparent;border:1px solid transparent;position:relative;cursor:pointer}
.icon-btn:hover{background:var(--p-50);color:var(--p-600);border-color:var(--line);text-decoration:none}
.icon-btn .dot-count{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;
  background:#d0342c;color:#fff;border-radius:20px;font-size:.65rem;font-weight:800;
  display:grid;place-items:center;border:2px solid #fff}
.menu-btn{display:none;background:none;border:0;cursor:pointer;color:var(--ink);padding:4px}
.content{padding:22px 24px 30px;max-width:1280px;width:100%;flex:1}
.app-foot{padding:14px 24px 22px;color:var(--ink-3);font-size:.8rem}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.page-head .lede{color:var(--ink-3);font-size:.92rem;margin:0}

/* ------------------------------------------------------------- cards ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);padding:18px 20px;margin-bottom:18px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:-2px 0 14px;flex-wrap:wrap}
.card-head h2{margin:0}
.card-head .sub{font-size:.84rem;color:var(--ink-3)}
.card.flush{padding:0}
.card.flush .card-head{padding:16px 20px 0;margin-bottom:10px}
.card.flush .table-wrap{padding-bottom:6px}
.grid{display:grid;gap:16px}
/* Grid and flex children default to min-width:auto, which lets a wide table
   push the whole page sideways. Allowing them to shrink keeps every table
   inside its own scroll area instead. */
.grid > *,.split-2 > *,.stack > *,.main,.content{min-width:0}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
.split-2{display:grid;gap:16px;grid-template-columns:1.55fr 1fr;align-items:start}
@media(max-width:980px){.split-2{grid-template-columns:1fr}}

/* --------------------------------------------------------- stat tiles ---- */
.tile{display:flex;gap:13px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:15px 16px;box-shadow:var(--sh-1)}
.tile-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:var(--p-100);color:var(--p-600)}
.tile-good .tile-ico{background:var(--good-bg);color:var(--good)}
.tile-warn .tile-ico{background:var(--warn-bg);color:var(--warn)}
.tile-bad .tile-ico{background:var(--bad-bg);color:var(--bad)}
.tile-brand{background:linear-gradient(150deg,var(--p-700),var(--p-900));border-color:transparent;color:#fff}
.tile-brand .tile-ico{background:rgba(255,255,255,.16);color:#fff}
.tile-brand .tile-label,.tile-brand .tile-sub{color:rgba(255,255,255,.72)}
.tile-body{min-width:0}
.tile-label{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.tile-value{font-size:1.55rem;font-weight:750;letter-spacing:-.02em;margin-top:2px;line-height:1.15}
.tile-sub{font-size:.82rem;color:var(--ink-3);margin-top:1px}

/* ------------------------------------------------------------ tables ---- */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.91rem}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
td.right,th.right{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tile-value,.hero-value,.kv strong,.dl dd{font-variant-numeric:tabular-nums}
th{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700;
  background:#fbfafd;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1}
tbody tr:hover{background:var(--p-50)}
tbody tr:last-child td{border-bottom:0}
td .sub{font-size:.8rem;color:var(--ink-3)}
.row-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:nowrap;align-items:center}
.row-actions form{display:contents}

/* overflow menu for row actions — pure HTML, no script */
.menu{position:relative}
.menu>summary{list-style:none;cursor:pointer;padding:6px 10px;line-height:1;font-size:1rem}
.menu>summary::-webkit-details-marker{display:none}
.menu[open]>summary{border-color:var(--p-300);color:var(--p-700);background:var(--p-50)}
.menu-pop{position:fixed;z-index:80;min-width:190px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-2);padding:6px;display:flex;flex-direction:column;gap:2px;text-align:left}
.menu-pop form{display:block}
.menu-pop button,.menu-pop a{display:block;width:100%;text-align:left;background:none;border:0;
  font:inherit;font-size:.88rem;color:var(--ink-2);padding:8px 10px;border-radius:8px;cursor:pointer}
.menu-pop button:hover,.menu-pop a:hover{background:var(--p-50);color:var(--p-700);text-decoration:none}
.menu-pop button.danger{color:var(--bad)}
.menu-pop button.danger:hover{background:var(--bad-bg)}

/* ------------------------------------------------------------ badges ---- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;
  font-size:.75rem;font-weight:700;white-space:nowrap;line-height:1.5}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75}
.badge-green{background:var(--good-bg);color:var(--good)}
.badge-red{background:var(--bad-bg);color:var(--bad)}
.badge-amber{background:var(--warn-bg);color:var(--warn)}
.badge-blue{background:var(--info-bg);color:var(--info)}
.badge-purple{background:var(--p-100);color:var(--p-700)}
.badge-grey{background:var(--neutral-bg);color:var(--neutral)}
.badge.plain::before{display:none}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.dot-green{background:#1c8a5f}.dot-red{background:#c0392b}.dot-amber{background:#d99500}
.dot-blue{background:#2a6fb8}.dot-purple{background:var(--p-500)}.dot-grey{background:#8e8a99}

/* ----------------------------------------------------------- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid transparent;border-radius:10px;padding:9px 16px;font:inherit;font-weight:600;
  font-size:.9rem;cursor:pointer;transition:transform .06s ease,box-shadow .15s ease,background .15s ease}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(160deg,var(--p-600),var(--p-800));color:#fff;box-shadow:var(--sh-1)}
.btn-primary:hover{box-shadow:0 4px 14px rgba(76,37,130,.32)}
.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--p-300);color:var(--p-700);background:var(--p-50)}
.btn-success{background:#17795a;color:#fff}
.btn-danger{background:#b3302a;color:#fff}
.btn-sm{padding:6px 11px;font-size:.83rem;border-radius:9px}
.btn-lg{padding:12px 22px;font-size:.98rem}
.btn-block{width:100%}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ------------------------------------------------------------- forms ---- */
label{display:block;font-size:.82rem;font-weight:600;margin-bottom:5px;color:var(--ink-2)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],
input[type=tel],input[type=file],select,textarea{
  width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;
  font:inherit;color:var(--ink);transition:border-color .12s,box-shadow .12s}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],
input[type=tel],select{height:42px}
select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%237a7487' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
input[type=number]{font-variant-numeric:tabular-nums}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--p-500);
  box-shadow:0 0 0 3px rgba(111,58,168,.15)}
input[type=file]{padding:8px 10px;background:#fbfafd}
textarea{min-height:96px;resize:vertical}
.field{margin-bottom:15px}
.field-inline{display:flex;align-items:center;gap:8px}
.field-inline label{margin:0}
.hint{font-size:.79rem;color:var(--ink-3);margin-top:4px}
fieldset{border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px 6px;margin:0 0 18px;
  background:var(--surface);box-shadow:var(--sh-1)}
legend{font-weight:700;padding:0 8px;color:var(--p-700);font-size:.95rem}
/* form fields keep one consistent track width instead of stretching to fill a row */
fieldset .grid{grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:14px 18px;align-items:start}
fieldset .grid .field{margin-bottom:9px}
fieldset .switch,fieldset .field-inline{align-self:center;padding-top:18px}
@media(max-width:680px){fieldset{padding:15px 15px 4px}fieldset .grid{grid-template-columns:1fr}}
.switch{display:flex;align-items:center;gap:9px;font-size:.9rem;font-weight:600;color:var(--ink-2)}
.switch input{width:auto}

.filters{display:flex;gap:10px 12px;flex-wrap:wrap;align-items:end;margin-bottom:14px;
  background:#fbfafd;border:1px solid var(--line);border-radius:var(--r);padding:13px 14px}
.filters .field{margin:0;min-width:150px;display:flex;flex-direction:column;justify-content:flex-end}
.filters .field label{min-height:1.2em}
.filters .field-grow{flex:1;min-width:190px}
.filters .btn{height:42px}
@media(max-width:640px){
  .filters{display:grid;grid-template-columns:1fr 1fr}
  .filters .field,.filters .field-grow{min-width:0}
  .filters .field-grow{grid-column:1 / -1}
  .filters .btn{width:100%}
}

/* ------------------------------------------------------------ alerts ---- */
.alert{border-radius:var(--r);padding:12px 15px;margin-bottom:16px;font-size:.9rem;
  border:1px solid;display:flex;gap:10px;align-items:flex-start}
.alert-success{background:var(--good-bg);border-color:#bde3d1;color:var(--good)}
.alert-error{background:var(--bad-bg);border-color:#f2c9c6;color:var(--bad)}
.alert-info{background:var(--info-bg);border-color:#c9ddf2;color:var(--info)}
.alert-warning{background:var(--warn-bg);border-color:#f0dcae;color:var(--warn)}
.alert a{color:inherit;text-decoration:underline}

/* ------------------------------------------------------------ charts ---- */
.chart figcaption{font-size:.8rem;color:var(--ink-3);margin-bottom:10px}
.chart{margin:0}
.bars{display:flex;align-items:flex-end;justify-content:flex-start;gap:12px;height:170px;padding:0 2px}
.bar-col{display:flex;flex-direction:column;justify-content:flex-end;height:100%;cursor:default;
  max-width:112px;min-width:26px;flex:1 1 0}
.bar-track{flex:1;display:flex;align-items:flex-end;padding:0 3px}
.bar-fill{width:100%;background:linear-gradient(180deg,var(--p-500),var(--p-700));
  border-radius:4px 4px 0 0;transition:filter .12s;min-height:3px}
.bar-col:hover .bar-fill{filter:brightness(1.18)}
.bar-label{text-align:center;font-size:.72rem;color:var(--ink-3);padding-top:7px;
  border-top:1px solid var(--line);margin-top:6px}

.breakdown{display:flex;flex-direction:column;gap:10px}
.bd-row{display:grid;grid-template-columns:minmax(120px,1.1fr) 2fr auto;gap:10px;align-items:center;font-size:.86rem}
.bd-label{display:flex;align-items:center;gap:7px;color:var(--ink-2);font-weight:600}
.bd-track{height:8px;background:var(--line-2);border-radius:20px;overflow:hidden}
.bd-fill{height:100%;border-radius:20px}
.bd-green{background:#1c8a5f}.bd-red{background:#c0392b}.bd-amber{background:#d99500}
.bd-blue{background:#2a6fb8}.bd-purple{background:var(--p-500)}.bd-grey{background:#9b97a6}
.bd-value{font-weight:700;font-variant-numeric:tabular-nums}
.bd-pct{color:var(--ink-3);font-weight:600;font-size:.78rem;margin-left:6px}

.progress{height:8px;background:var(--line-2);border-radius:20px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--p-500),var(--p-700));border-radius:20px}

#tip{position:fixed;z-index:80;background:#231a33;color:#fff;font-size:.8rem;padding:6px 10px;
  border-radius:8px;pointer-events:none;opacity:0;transform:translate(-50%,-130%);
  transition:opacity .12s;box-shadow:var(--sh-2);white-space:nowrap}
#tip.on{opacity:1}

/* --------------------------------------------------- detail lists etc ---- */
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px 24px}
/* denser pairs for narrow side panels, so a long record does not become a column */
.dl-tight{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:12px 18px}
.dl-tight dd{font-size:.92rem}
.dl>div{min-width:0}
.dl dt{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.dl dd{margin:3px 0 0;font-weight:600;word-break:break-word}

.timeline{list-style:none;margin:6px 0 0;padding:0 0 0 6px;border-left:2px solid var(--line)}
.timeline li{padding:0 0 16px 18px;position:relative}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;
  background:var(--p-500);border:2px solid #fff;box-shadow:0 0 0 2px var(--p-100)}
.timeline .when{font-size:.78rem;color:var(--ink-3);margin-top:2px}

.empty,.empty-state{text-align:center;color:var(--ink-3);padding:26px 14px}
.empty-state .empty-ico{width:52px;height:52px;border-radius:50%;background:var(--p-50);color:var(--p-500);
  display:grid;place-items:center;margin:0 auto 12px}
.empty-state h3{color:var(--ink);margin-bottom:4px}
.empty-state p{max-width:42ch;margin:0 auto 14px}

.pager{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap}
.pager a,.pager span{padding:6px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;
  font-size:.85rem;font-weight:600;color:var(--ink-2)}
.pager a:hover{border-color:var(--p-300);color:var(--p-700);text-decoration:none}
.pager .current{background:var(--p-600);color:#fff;border-color:var(--p-600)}

.stepbar{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.stepbar span{font-size:.79rem;font-weight:600;padding:6px 13px;border-radius:20px;
  background:#fff;border:1px solid var(--line);color:var(--ink-3)}
.stepbar span.on{background:var(--p-100);border-color:transparent;color:var(--p-700)}

.notif{display:flex;gap:12px;padding:13px 14px;border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:9px;background:#fff;align-items:flex-start}
.notif.unread{border-left:3px solid var(--p-500);background:var(--p-50)}
.notif .n-ico{width:32px;height:32px;border-radius:9px;background:var(--p-100);color:var(--p-600);
  display:grid;place-items:center;flex:none}
.notif .n-body{flex:1;min-width:0}
.notif .n-title{font-weight:700}

/* -------------------------------------------------------------- auth ---- */
.auth{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr}
.auth-brand{background:linear-gradient(160deg,var(--p-700) 0%,var(--p-900) 55%,#1e0d3d 100%);
  color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-brand::after{content:"";position:absolute;right:-120px;bottom:-140px;width:420px;height:420px;
  border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(245,166,35,.35),transparent 62%)}
.auth-brand img{width:76px;height:64px;object-fit:contain;background:#fff;border-radius:14px;padding:6px}
.auth-brand h2{font-size:1.9rem;max-width:16ch;margin-top:26px;color:#fff;letter-spacing:-.02em}
.auth-brand p{color:rgba(255,255,255,.78);max-width:42ch}
.auth-points{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}
.auth-points li{display:flex;gap:10px;align-items:flex-start;color:rgba(255,255,255,.88);font-size:.93rem}
.auth-points .n{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.16);
  display:grid;place-items:center;font-size:.72rem;font-weight:800;flex:none}
.auth-form{display:flex;align-items:center;justify-content:center;padding:40px 28px;background:var(--surface)}
.auth-inner{width:100%;max-width:400px}
.auth-inner h1{font-size:1.5rem}
.auth-foot{margin-top:18px;font-size:.9rem;color:var(--ink-3);text-align:center}
@media(max-width:900px){
  .auth{grid-template-columns:1fr}
  .auth-brand{padding:28px;min-height:auto}
  .auth-brand h2{font-size:1.4rem;margin-top:16px}
  .auth-points{display:none}
}

/* ------------------------------------------------------ public pages ---- */
.public-head{background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:30}
.public-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.brand-link{display:flex;align-items:center;gap:10px;color:var(--ink)}
.brand-link .brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-link img{width:42px;height:36px;object-fit:contain}
.brand-link .brand-name{color:var(--p-700)}
.brand-link .brand-sub{color:var(--ink-3)}
.public-nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.public-nav a{color:var(--ink-2);font-size:.92rem;font-weight:600}
.public-nav .btn-primary{color:#fff}
.public-main{padding:28px 0 50px}
.public-foot{background:var(--p-900);color:rgba(255,255,255,.8);padding:26px 0;margin-top:44px;font-size:.88rem}
.public-foot .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.public-foot a{color:#fff;text-decoration:underline}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}

.hero{background:linear-gradient(150deg,var(--p-700) 0%,var(--p-900) 58%,#1f0e40 100%);color:#fff;
  border-radius:22px;padding:46px 40px;margin-bottom:30px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-90px;top:-110px;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(245,166,35,.32),transparent 60%)}
.hero-inner{position:relative;z-index:1;max-width:640px}
.hero h1{font-size:2.1rem;color:#fff;max-width:20ch;letter-spacing:-.02em}
.hero p{color:rgba(255,255,255,.84);font-size:1.02rem;max-width:56ch}
.hero .btn-row{margin-top:20px}
.hero .btn-ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34);color:#fff}
.hero .btn-ghost:hover{background:rgba(255,255,255,.2);color:#fff}
.hero-stats{display:flex;gap:28px;margin-top:28px;flex-wrap:wrap;position:relative;z-index:1}
.hero-stats div{color:rgba(255,255,255,.75);font-size:.82rem}
.hero-stats strong{display:block;font-size:1.4rem;color:#fff;font-weight:750}

.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;
  box-shadow:var(--sh-1)}
.step .n{width:30px;height:30px;border-radius:9px;background:var(--p-100);color:var(--p-700);
  display:grid;place-items:center;font-weight:800;margin-bottom:10px}
.product{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;
  box-shadow:var(--sh-1);display:flex;flex-direction:column}
.product:hover{box-shadow:var(--sh-2);border-color:var(--p-300)}
.product h3{color:var(--p-800)}
.product .meta{font-size:.84rem;color:var(--ink-3);margin-bottom:10px;font-weight:600}
.product .spec{display:flex;gap:14px;flex-wrap:wrap;font-size:.82rem;color:var(--ink-2);
  border-top:1px dashed var(--line);padding-top:12px;margin-top:auto}
.product .spec b{display:block;color:var(--ink);font-size:.9rem}

/* -------------------------------------------------------- responsive ---- */
@media(max-width:1100px){
  th,td{padding:10px 12px}
}
@media(max-width:900px){
  .sidebar{position:fixed;left:-272px;top:0;bottom:0;transition:left .22s ease;z-index:60;box-shadow:var(--sh-3)}
  .sidebar.open{left:0}
  .menu-btn{display:block}
  .content{padding:16px 14px 36px}
  .topbar{padding:10px 14px}
  .topbar h1{font-size:1rem}
  .scrim{position:fixed;inset:0;background:rgba(26,23,33,.4);z-index:50;display:none}
  .scrim.on{display:block}
  .hero{padding:30px 22px;border-radius:16px}
  .hero h1{font-size:1.6rem}
  .card{padding:16px;border-radius:var(--r)}
  .card.flush{padding:0}
  .card.flush .card-head{padding:14px 16px 0}
}
@media(max-width:680px){
  /* two tiles to a row beats one tall column of four */
  .grid-4,.grid-3,.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .tile{padding:13px;gap:10px}
  .tile-ico{width:32px;height:32px;border-radius:9px}
  .tile-value{font-size:1.22rem}
  .tile-label{font-size:.68rem}
  .tile-sub{font-size:.76rem}
  .hero-stat{padding:18px;gap:16px}
  .hero-stat .hero-value{font-size:1.6rem}
  .hero-ico{width:38px;height:38px;border-radius:11px}
  .hero-chips{gap:14px 20px;width:100%}
  .hero-chip strong{font-size:1rem}
  th,td{padding:10px 11px;font-size:.88rem}
  .card-head h2{font-size:1rem}
  .btn{padding:9px 14px}
}
/* a table never widens the page: it scrolls inside its own card, and a soft
   edge shadow appears only while there is more to scroll to */
.table-wrap{overflow-x:auto;scrollbar-width:thin;overscroll-behavior-x:contain;
  background:
    linear-gradient(to right,#fff 40%,rgba(255,255,255,0)) left center,
    linear-gradient(to left,#fff 40%,rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%,rgba(26,23,33,.10),rgba(26,23,33,0)) left center,
    radial-gradient(farthest-side at 100% 50%,rgba(26,23,33,.10),rgba(26,23,33,0)) right center;
  background-repeat:no-repeat;
  background-size:30px 100%,30px 100%,13px 100%,13px 100%;
  background-attachment:local,local,scroll,scroll}
.card.flush .table-wrap{border-radius:0 0 var(--r-lg) var(--r-lg)}
/* rows of stat tiles keep a steady tile width instead of stretching two tiles
   across the whole page */
.tiles{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(218px,1fr));margin-bottom:16px}
@media(max-width:680px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media print{
  .sidebar,.topbar,.filters,.pager,.btn,.row-actions{display:none!important}
  body{background:#fff}
  .card,.tile,fieldset{box-shadow:none;border-color:#ccc;break-inside:avoid}
  .content{padding:0}
}

/* -------------------------------------------------------- payday quote ---- */
.quote{background:linear-gradient(140deg,var(--p-700),var(--p-900));color:#fff;border-radius:var(--r-lg);
  padding:16px 18px;margin:4px 0 16px;display:grid;gap:12px 22px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.quote-row{display:flex;flex-direction:column;gap:2px;font-size:.78rem;letter-spacing:.04em;
  color:rgba(255,255,255,.68);font-weight:600}
.quote-row strong{color:#fff;font-variant-numeric:tabular-nums;font-size:1.15rem;font-weight:720;letter-spacing:-.01em}
.quote-row.big strong{font-size:1.5rem;font-weight:760}
.quote.over{background:linear-gradient(140deg,#8c2f2a,#5e1c18)}
.quote.over .quote-row strong{color:#ffe2e0}
@media(max-width:520px){.quote{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ====================================================================
   Charts, hero stats and document printing
   ==================================================================== */
.donut-wrap{display:flex;gap:20px 24px;align-items:center;flex-wrap:wrap;justify-content:center}
.donut{width:150px;height:150px;flex:none}
.donut .seg{transition:opacity .12s}
.donut-wrap:hover .seg{opacity:.55}
.donut .seg:hover{opacity:1}
.donut .d-value{font-size:19px;font-weight:750;fill:var(--ink)}
.donut .d-label{font-size:8.5px;fill:var(--ink-3);letter-spacing:.1em;text-transform:uppercase}
.donut-legend{list-style:none;margin:0;padding:0;flex:1 1 190px;min-width:0;display:flex;flex-direction:column;gap:7px}
.donut-legend li{display:flex;align-items:center;gap:9px;font-size:.87rem}
.donut-legend .l{color:var(--ink-2);font-weight:600;flex:1;min-width:0}
.donut-legend .v{font-weight:700;font-variant-numeric:tabular-nums}
.donut-legend .p{color:var(--ink-3);font-size:.78rem;width:36px;text-align:right}

.spark{width:100%;height:26px;margin-top:6px;display:block}
.spark-purple{color:var(--p-500)}
.spark-green{color:#1c8a5f}
.spark-red{color:#c0392b}
.tile-brand .spark{color:rgba(255,255,255,.75)}

.hero-stat{background:linear-gradient(135deg,var(--p-700) 0%,var(--p-900) 58%,#210f42 100%);
  color:#fff;border-radius:var(--r-lg);padding:22px 24px;margin-bottom:18px;
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  position:relative;overflow:hidden;box-shadow:var(--sh-2)}
.hero-stat::after{content:"";position:absolute;right:-60px;top:-90px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(245,166,35,.28),transparent 62%)}
.hero-main{display:flex;gap:16px;align-items:center;position:relative;z-index:1}
.hero-ico{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}
.hero-label{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.66);font-weight:700}
.hero-value{font-size:2rem;font-weight:780;letter-spacing:-.02em;line-height:1.1;margin-top:2px}
.hero-sub{font-size:.86rem;color:rgba(255,255,255,.72);margin-top:3px}
.hero-chips{display:flex;gap:26px;flex-wrap:wrap;position:relative;z-index:1}
.hero-chip span{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:700}
.hero-chip strong{font-size:1.15rem;font-weight:720}

.num{font-variant-numeric:tabular-nums}
td.neg,.neg{color:var(--bad)}
/* long settings / record forms keep their save button in reach */
.form-actions{position:sticky;bottom:8px;z-index:20;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  background:rgba(255,255,255,.93);backdrop-filter:saturate(160%) blur(8px);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);
  padding:12px 14px;margin:0 0 18px}
.form-actions .note{color:var(--ink-3);font-size:.84rem;margin:0}
.card-accent{border-top:3px solid var(--p-500)}
.card-accent-red{border-top:3px solid #c0392b}
.card-accent-green{border-top:3px solid #1c8a5f}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--p-50);border:1px solid var(--line);
  border-radius:20px;padding:3px 11px;font-size:.8rem;font-weight:600;color:var(--p-700)}
.stack{display:flex;flex-direction:column;gap:6px}
.kv{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px dashed var(--line-2);font-size:.9rem}
.kv:last-child{border-bottom:0}
.kv span{color:var(--ink-3)}
.kv strong{font-variant-numeric:tabular-nums}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.tabs a{padding:9px 14px;font-size:.9rem;font-weight:600;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--p-700);text-decoration:none}
.tabs a.on{color:var(--p-700);border-bottom-color:var(--p-600)}

/* ------------------------------------------------------- documents ---- */
.doc{max-width:860px;margin:24px auto;background:#fff;padding:44px 52px;border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-1);color:#15121c}
.doc-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;
  border-bottom:3px solid var(--p-600);padding-bottom:16px;margin-bottom:22px}
.doc-head img{width:76px;height:64px;object-fit:contain}
.doc-org{font-weight:800;font-size:1.1rem;color:var(--p-800);letter-spacing:.03em}
.doc-meta{text-align:right;font-size:.84rem;color:var(--ink-3);line-height:1.6}
.doc h1{font-size:1.25rem;letter-spacing:.02em;text-transform:uppercase;color:var(--p-800)}
.doc h2{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  margin:22px 0 8px;border-bottom:1px solid var(--line);padding-bottom:5px}
.doc table{font-size:.88rem}
.doc .terms{font-size:.84rem;color:#3b3846;line-height:1.65}
.doc .terms li{margin-bottom:6px}
.doc .signatures{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:36px}
.doc .sign-line{border-top:1px solid #15121c;padding-top:6px;font-size:.82rem;color:var(--ink-3)}
.doc .stamp{display:inline-block;border:2px solid var(--good);color:var(--good);border-radius:8px;
  padding:4px 12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;transform:rotate(-3deg)}
.doc-actions{max-width:860px;margin:18px auto 0;display:flex;gap:10px;justify-content:flex-end}
@media print{
  body{background:#fff}
  .doc{box-shadow:none;border:0;margin:0;padding:0;max-width:none}
  .doc-actions,.topbar,.sidebar,.app-foot{display:none!important}
}

/* table footer totals */
tfoot th{
  background:var(--p-50);
  border-top:2px solid var(--line-2);
  font-size:.82rem;
  letter-spacing:.02em;
  color:var(--ink-2);
  padding:10px 14px;
}
tfoot th.right{color:var(--ink);font-size:.95rem}

/* ---------------------------------------------- readiness questionnaire ---- */
.quiz-form fieldset.q{padding:18px 20px 14px}
.quiz-form legend{font-size:1rem;color:var(--ink);max-width:70ch}
.choices{display:grid;gap:8px;margin-top:4px}
.choice{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;cursor:pointer;font-weight:500;color:var(--ink-2);margin:0;
  transition:border-color .12s,background .12s,box-shadow .12s}
.choice:hover{border-color:var(--p-300);background:var(--p-50)}
.choice input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--p-600);flex:none}
.choice.on,.choice:has(input:checked){border-color:var(--p-500);background:var(--p-50);
  box-shadow:inset 0 0 0 1px var(--p-500)}
.c-label{display:block;color:var(--ink);font-weight:600}
.c-note{display:block;font-size:.82rem;color:var(--ink-3);margin-top:2px}
@media(min-width:760px){.choices.cols-2{grid-template-columns:1fr 1fr}}

/* ------------------------------------------------ questionnaire editing ---- */
.qrow{border-top:1px solid var(--line-2);padding:14px 0}
.qrow:first-of-type{border-top:0;padding-top:4px}
.qrow-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.qrow-head .sub{font-size:.79rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;
  font-weight:700;margin-top:3px}
.answer-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.answer-list li{display:flex;align-items:center;gap:12px;background:var(--p-50);
  border:1px solid var(--line-2);border-radius:10px;padding:7px 10px 7px 12px}
.a-label{flex:1;min-width:0;font-size:.88rem;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.answer-list input[type=number]{width:82px;height:36px;text-align:right;flex:none}

/* ------------------------------------------------------ market listings ---- */
.listing-figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px 18px;margin-top:4px}
.listing-figures div{display:flex;flex-direction:column;gap:2px}
.listing-figures span{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.listing-figures strong{font-size:1.12rem;font-weight:720;font-variant-numeric:tabular-nums}
.score-green{color:var(--good)}.score-amber{color:var(--warn)}.score-red{color:var(--bad)}.score-grey{color:var(--ink-3)}
.listing .card-head h2{font-family:inherit;letter-spacing:.02em}
.offer-best{box-shadow:inset 0 0 0 2px var(--good)}

/* a note field inside a row-action menu */
.menu-note{display:flex;gap:6px;padding:4px 6px}
.menu-note input[type=text]{height:32px;font-size:.85rem;padding:5px 8px}
.menu-note button{width:auto;flex:none;background:var(--p-100);color:var(--p-700);font-weight:600}

/* ================================================================
   Lender dashboard — portfolios, preview cards, bid form
   ================================================================ */
.portfolio-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.pf{display:flex;align-items:center;gap:13px;padding:14px 15px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  border-left:4px solid var(--p-500);transition:box-shadow .14s,transform .06s,border-color .14s}
.pf:hover{text-decoration:none;box-shadow:var(--sh-2);transform:translateY(-1px)}
.pf-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:var(--p-100);color:var(--p-700)}
.pf-body{flex:1;min-width:0}
.pf-name{display:block;font-weight:700;font-size:.95rem}
.pf-sub{display:block;font-size:.79rem;color:var(--ink-3);margin-top:2px}
.pf-count{text-align:right;flex:none;line-height:1.25}
.pf-count strong{display:block;font-size:1.3rem;font-weight:760;font-variant-numeric:tabular-nums}
.pf-count span{display:block;font-size:.7rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.pf-count .pf-value{color:var(--ink-2);font-weight:600;text-transform:none;letter-spacing:0;font-size:.76rem}
.pf-empty{opacity:.55}
.pf-blue{border-left-color:#2a6fb8}    .pf-blue .pf-ico{background:var(--info-bg);color:var(--info)}
.pf-green{border-left-color:#1c8a5f}   .pf-green .pf-ico{background:var(--good-bg);color:var(--good)}
.pf-amber{border-left-color:#d99500}   .pf-amber .pf-ico{background:var(--warn-bg);color:var(--warn)}
.pf-grey{border-left-color:#8e8a99}    .pf-grey .pf-ico{background:var(--neutral-bg);color:var(--neutral)}
.pf-purple{border-left-color:var(--p-500)}

.pf-tabs{overflow-x:auto;white-space:nowrap;padding-bottom:2px}
.pf-tabs .tab-n{display:inline-block;margin-left:5px;background:var(--p-100);color:var(--p-700);
  border-radius:20px;padding:0 7px;font-size:.72rem;font-weight:800}
.pf-tabs a.on .tab-n{background:var(--p-600);color:#fff}

/* Colour-coded portfolio tabs. The class comes straight from
   loan_portfolios.colour, so a tab carries the same colour as its card. */
.pf-tabs a.tab-blue  {color:#2a6fb8}
.pf-tabs a.tab-green {color:#1c8a5f}
.pf-tabs a.tab-amber {color:#a97400}
.pf-tabs a.tab-grey  {color:#6f6b7a}
.pf-tabs a.tab-purple{color:var(--p-700)}
.pf-tabs a.tab-blue.on  {border-bottom-color:#2a6fb8}
.pf-tabs a.tab-green.on {border-bottom-color:#1c8a5f}
.pf-tabs a.tab-amber.on {border-bottom-color:#d99500}
.pf-tabs a.tab-grey.on  {border-bottom-color:#8e8a99}
.pf-tabs a.tab-purple.on{border-bottom-color:var(--p-600)}
.pf-tabs a.tab-blue  .tab-n{background:var(--info-bg);color:var(--info)}
.pf-tabs a.tab-green .tab-n{background:var(--good-bg);color:var(--good)}
.pf-tabs a.tab-amber .tab-n{background:var(--warn-bg);color:var(--warn)}
.pf-tabs a.tab-grey  .tab-n{background:var(--neutral-bg);color:var(--neutral)}
.pf-tabs a.tab-blue.on  .tab-n{background:#2a6fb8;color:#fff}
.pf-tabs a.tab-green.on .tab-n{background:#1c8a5f;color:#fff}
.pf-tabs a.tab-amber.on .tab-n{background:#d99500;color:#fff}
.pf-tabs a.tab-grey.on  .tab-n{background:#8e8a99;color:#fff}

/* A plain heading between two blocks of cards. */
.section-title{margin:26px 0 12px;font-size:.78rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.09em;color:var(--ink-3)}

/* preview card — the fields the layout document specifies */
.preview-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);display:flex;flex-direction:column;overflow:hidden}
.preview-card.has-bid{box-shadow:inset 0 0 0 2px var(--good),var(--sh-1)}
.pc-head{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 14px;background:var(--p-50);border-bottom:1px solid var(--line-2)}
.pc-portfolio{font-size:.73rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--p-700)}
.pc-no{font-size:.78rem;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pc-blue{background:var(--info-bg)}   .pc-blue .pc-portfolio{color:var(--info)}
.pc-green{background:var(--good-bg)}  .pc-green .pc-portfolio{color:var(--good)}
.pc-amber{background:var(--warn-bg)}  .pc-amber .pc-portfolio{color:var(--warn)}
.pc-grey{background:var(--neutral-bg)}.pc-grey .pc-portfolio{color:var(--neutral)}
.pc-fields{margin:0;padding:13px 14px 6px;display:grid;gap:9px}
.pc-fields>div{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.pc-fields dt{font-size:.76rem;color:var(--ink-3);font-weight:600;flex:none}
.pc-fields dd{margin:0;font-weight:600;font-size:.88rem;text-align:right;min-width:0;word-break:break-word}
.pc-amount{font-size:1.05rem;font-weight:760;color:var(--p-700);font-variant-numeric:tabular-nums}
.pc-foot{margin-top:auto;padding:10px 14px 14px;border-top:1px dashed var(--line-2)}

/* bid form */
.bid-section{border-top:1px solid var(--line-2);padding-top:14px;margin-top:16px}
.bid-section:first-of-type{border-top:0;padding-top:0;margin-top:0}
.bid-section h3{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--p-700);
  font-weight:800;margin-bottom:10px}
.fee-row{display:grid;grid-template-columns:1fr 120px;gap:10px;align-items:end}
.fee-row.with-freq{grid-template-columns:1fr 120px 130px}
@media(max-width:680px){.fee-row,.fee-row.with-freq{grid-template-columns:1fr}}
.readonly-panel{background:var(--p-50);border:1px solid var(--line-2);border-radius:var(--r);
  padding:12px 14px;margin-bottom:16px}
.readonly-panel .kv{border-bottom-color:var(--line)}

/* ── Sub-navigation (ADMIN DASHBOARD menu) ───────────────────────────── */
.nav-subs{display:flex;flex-direction:column;gap:1px;margin:2px 0 6px 0;padding-left:28px;
  border-left:1px solid rgba(255,255,255,.12);margin-left:18px}
.nav-sub{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.62);
  font-size:.82rem;padding:6px 10px;border-radius:8px;line-height:1.25}
.nav-sub:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.nav-sub.active{color:#fff;font-weight:600;background:rgba(255,255,255,.1)}
.nav-sub .count{margin-left:auto;background:var(--accent);color:#3a2600;border-radius:20px;
  font-size:.66rem;font-weight:700;padding:1px 6px;min-width:18px;text-align:center}

/* ── Topbar quick search + profile dropdown ──────────────────────────── */
.quick-search{position:relative;display:flex;align-items:center;gap:8px;
  background:var(--p-50);border:1px solid var(--line);border-radius:10px;
  padding:0 10px;height:36px;max-width:320px;flex:0 1 320px;color:var(--ink-3)}
.quick-search:focus-within{border-color:var(--p-400,#8a5cc4);background:#fff;
  box-shadow:0 0 0 3px rgba(122,71,190,.14)}
.quick-search input{border:0;background:none;outline:0;font:inherit;font-size:.86rem;
  width:100%;min-width:0;color:var(--ink-1);padding:0}
.quick-search input::placeholder{color:var(--ink-3)}

.profile-menu{position:relative}
.profile-menu>summary{list-style:none;cursor:pointer}
.profile-menu>summary::-webkit-details-marker{display:none}
.profile-btn{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px 0 4px;
  border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink-2);
  font-size:.85rem;font-weight:600}
.profile-btn:hover{background:var(--p-50);color:var(--p-700)}
.profile-btn .avatar.sm{width:28px;height:28px;font-size:.72rem;background:var(--p-600);color:#fff}
.profile-btn .caret{font-size:.7rem;color:var(--ink-3)}
.profile-name{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-pop .menu-head{padding:10px 14px;border-bottom:1px solid var(--line);display:grid;gap:2px}
.menu-pop .menu-head strong{font-size:.88rem}
.menu-pop .menu-head .sub{font-size:.76rem;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis}

@media (max-width:900px){
  .quick-search{display:none}
  .profile-name,.profile-btn .caret{display:none}
  .profile-btn{padding:0;border:0;background:none}
}

/* ── Help desk threads ───────────────────────────────────────────────── */
.thread{display:flex;flex-direction:column;gap:10px}
.msg{border:1px solid var(--line);border-radius:12px;padding:10px 13px;background:#fff}
.msg-staff{background:var(--p-50);border-color:var(--p-100)}
.msg-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  margin-bottom:5px;font-size:.86rem}
.msg-head .sub{font-size:.75rem;color:var(--ink-3);white-space:nowrap}
.msg-body{font-size:.9rem;line-height:1.5;color:var(--ink-2);word-break:break-word}
.note-block{background:var(--p-50);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;font-size:.9rem;line-height:1.55;color:var(--ink-2);word-break:break-word}
.plain-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.plain-list li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.88rem;
  padding-bottom:8px;border-bottom:1px dashed var(--line-2)}
.plain-list li:last-child{border-bottom:0;padding-bottom:0}
.back{font-size:.86rem;font-weight:600;color:var(--ink-3)}
.back:hover{color:var(--p-700)}

/* ── Dashboard alert rows and clickable tiles ────────────────────────── */
.alert-list{display:flex;flex-direction:column;gap:8px}
.alert-row{display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:12px;
  border:1px solid var(--line);background:#fff}
.alert-row .ico{flex:none}
.alert-text{display:grid;gap:2px;min-width:0;flex:1}
.alert-text strong{font-size:.9rem}
.alert-text span{font-size:.82rem;color:var(--ink-3)}
.alert-row.alert-critical{background:var(--bad-bg);border-color:transparent;color:var(--bad)}
.alert-row.alert-warning{background:var(--warn-bg);border-color:transparent;color:var(--warn)}
.alert-row.alert-info{background:var(--info-bg);border-color:transparent;color:var(--info)}
.alert-row.alert-critical .alert-text span,
.alert-row.alert-warning .alert-text span,
.alert-row.alert-info .alert-text span{color:inherit;opacity:.85}
.tile-link{display:block;color:inherit}
.tile-link:hover{text-decoration:none;transform:translateY(-1px);transition:transform .12s ease}
.tile-link>.tile{height:100%}
@media (max-width:640px){
  .alert-row{flex-wrap:wrap}
  .alert-row .btn{width:100%}
}

/* ── Full bid terms ──────────────────────────────────────────────────── */
.bid-terms h4{margin:14px 0 6px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700}
.bid-terms h4:first-child{margin-top:0}
.bid-terms .dl{gap:10px 20px}
.bid-terms .note-block{font-size:.86rem}
.bid-detail{border-top:1px dashed var(--line);margin-top:10px;padding-top:12px}
details.bid-more>summary{cursor:pointer;font-size:.84rem;font-weight:600;color:var(--p-700);
  list-style:none;padding:6px 0}
details.bid-more>summary::-webkit-details-marker{display:none}
details.bid-more>summary::before{content:"▸ ";font-size:.8em}
details.bid-more[open]>summary::before{content:"▾ "}

/* ── Consent checkbox on the registration form ───────────────────────── */
.check{display:flex;gap:10px;align-items:flex-start;margin:4px 0 16px;
  font-size:.84rem;line-height:1.5;color:var(--ink-2);cursor:pointer}
.check input{margin-top:2px;flex:none;width:16px;height:16px;accent-color:var(--p-600)}

/* Preview cards fill the row they are in but never stretch when there are few. */
.preview-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
@media (max-width:700px){.preview-grid{grid-template-columns:1fr}}

/* ── Labelled progress bars (readiness sections) ─────────────────────── */
.progress-row{margin:0 0 12px}
.progress-row:last-child{margin-bottom:0}
.progress-label{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  margin-bottom:5px;font-size:.85rem;color:var(--ink-2)}
.progress-label span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.progress-label strong{font-variant-numeric:tabular-nums;flex:none}
.progress-fill.pf-good{background:var(--good)}
.progress-fill.pf-warn{background:var(--warn)}
.progress-fill.pf-bad{background:var(--bad)}


/* ── Preview cards fill the row but never stretch when there are few ─── */
.preview-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
@media (max-width:700px){.preview-grid{grid-template-columns:1fr}}

/* ── In-page document viewer ─────────────────────────────────────────── */
.doc-viewer{border-top:1px solid var(--line);background:var(--p-50)}
.doc-viewer-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.doc-viewer-bar strong{font-size:.88rem;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.doc-viewer-body{padding:12px 14px;display:grid;place-items:center;background:#fff}
.doc-viewer-body iframe{width:100%;height:70vh;min-height:420px;border:1px solid var(--line);
  border-radius:8px;background:#fff}
.doc-viewer-body img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:8px}
@media (max-width:640px){.doc-viewer-body iframe{height:56vh;min-height:300px}}

/* ── Applicant location panel ────────────────────────────────────────── */
.place-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px 18px}
.place{display:grid;grid-template-columns:1fr;gap:4px;padding:8px 10px;border-radius:10px;
  border:1px solid transparent;color:inherit}
.place:hover{background:var(--p-50);border-color:var(--line);text-decoration:none}
.place.on{background:var(--p-50);border-color:var(--p-200,#d9c9ef)}
.place-name{font-size:.86rem;font-weight:600}
.place-bar{height:6px;border-radius:4px;background:var(--line-2);overflow:hidden}
.place-bar>span{display:block;height:100%;background:var(--p-600);border-radius:4px}
.place-n{display:flex;justify-content:space-between;gap:10px;font-size:.76rem;color:var(--ink-3)}
.place-n strong{color:var(--ink-2);font-variant-numeric:tabular-nums}

/* --- PNG province map ------------------------------------------------- */
/* A schematic: every province is one equal tile, placed roughly where it
   sits on the country, so NCD reads as clearly as Western. */
.pmap-wrap{overflow-x:auto;padding:2px 0}
.pmap{display:block;width:100%;min-width:560px;height:auto}
.pmap-a{cursor:default}
a.pmap-a{cursor:pointer}
.pmap-t{fill:var(--line-2);stroke:var(--line);stroke-width:1;transition:fill .12s}
.pmap-0{fill:var(--line-2)}
.pmap-1{fill:var(--p-100)}
.pmap-2{fill:var(--p-300)}
.pmap-3{fill:var(--p-500)}
.pmap-4{fill:var(--p-700)}
a.pmap-a:hover .pmap-t{stroke:var(--p-600);stroke-width:2}
.pmap-n{text-anchor:middle;font-size:19px;font-weight:700;fill:var(--ink);
        font-variant-numeric:tabular-nums;pointer-events:none}
.pmap-l{text-anchor:middle;font-size:11px;fill:var(--ink-2);pointer-events:none}
.pmap-3 ~ .pmap-n,.pmap-4 ~ .pmap-n{fill:#fff}
.pmap-3 ~ .pmap-l,.pmap-4 ~ .pmap-l{fill:rgba(255,255,255,.82)}
.pmap-key{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;
          font-size:.76rem;color:var(--ink-3)}
.pmap-sw{width:22px;height:11px;border-radius:3px;border:1px solid var(--line)}
/* The swatches are <span>s, so they need a background — `fill` does nothing. */
.pmap-sw.pmap-0{background:var(--line-2)}
.pmap-sw.pmap-1{background:var(--p-100)}
.pmap-sw.pmap-2{background:var(--p-300)}
.pmap-sw.pmap-3{background:var(--p-500)}
.pmap-sw.pmap-4{background:var(--p-700)}
.pmap-key-note{margin-left:auto;color:var(--ink-3)}

/* A short "what you get" list, used on the subscription page. */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ticks li{position:relative;padding-left:26px;font-size:.9rem;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;
  border-radius:50%;background:var(--good-bg)}
.ticks li::after{content:"";position:absolute;left:5px;top:7px;width:5px;height:8px;
  border:solid var(--good);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* A one-line form living inside a table cell. */
.inline-form{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.inline-form input[type=text]{min-width:150px;max-width:220px;margin:0}

/* =====================================================================
   FORMS — the application pack

   The pack has its own colour tokens because it is the one part of the
   platform that is mostly derived figures on tinted panels, and those
   need to invert cleanly. theme-cosmic.css redefines the seven below and
   nothing else in this section has to change.
   ===================================================================== */
:root{
  --form-head:var(--p-700);          /* section headings            */
  --form-panel:#fbfafd;              /* tinted panels and tables    */
  --form-total-bg:var(--p-50);       /* a derived total             */
  --form-total-ink:var(--p-800);
  --form-total-line:var(--p-300);
  --form-total-strong:#ffffff;       /* the big totals at the foot  */
  --form-pre-bg:var(--p-50);         /* the PGK prefix on a money box */
  --form-pre-ink:var(--p-700);
}

/* =====================================================================
   FORMS — layout
   The pack is filled in on whatever device the applicant has, which in
   Port Moresby is far more often a phone than a desktop. Everything here
   collapses to one column early and keeps tap targets finger-sized.
   ===================================================================== */

.crumbs{font-size:.86rem;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--p-600);text-decoration:none}
.crumbs a:hover{text-decoration:underline}

.pill{display:inline-block;min-width:19px;padding:1px 6px;margin-left:6px;border-radius:999px;
  background:var(--p-600);color:#fff;font-size:.72rem;font-weight:700;text-align:center;line-height:17px}

.steps{margin:14px 0 0;padding-left:20px;color:var(--ink-2)}
.steps li{margin-bottom:7px}

.detail-rows{margin:6px 0 0;display:grid;gap:1px;background:var(--line-2);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.detail-rows>div{display:grid;grid-template-columns:170px 1fr;gap:14px;
  background:var(--surface);padding:11px 14px}
.detail-rows dt{color:var(--ink-3);font-size:.85rem;font-weight:600}
.detail-rows dd{margin:0;color:var(--ink);font-size:.93rem}
@media(max-width:600px){.detail-rows>div{grid-template-columns:1fr;gap:2px}}

/* ---- the pack list ------------------------------------------------- */
.form-list{display:grid;gap:10px}
.form-item{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  padding:15px 17px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
.form-item:hover{border-color:var(--p-300);box-shadow:var(--sh-2);transform:translateY(-1px)}
.form-item-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;
  background:var(--form-total-bg);color:var(--p-500)}
.form-item-txt{display:grid;gap:3px;min-width:0}
.form-item-txt strong{font-size:.98rem;color:var(--ink)}
.form-item-txt .sub{font-size:.85rem;color:var(--ink-3);line-height:1.45}
.form-item-back{font-size:.85rem;color:var(--bad);background:var(--bad-bg);
  border-radius:var(--r-sm);padding:6px 9px;margin-top:4px}
.form-item-state{display:grid;gap:4px;justify-items:end;text-align:right}
.form-item-state .sub{font-size:.75rem;color:var(--ink-3)}
@media(max-width:620px){
  .form-item{grid-template-columns:auto 1fr;gap:12px}
  .form-item-state{grid-column:1 / -1;justify-items:start;text-align:left}
}

/* ---- the forms themselves ------------------------------------------ */
.form-body{margin-top:18px}
.form-sec{border-top:1px solid var(--line);padding-top:18px;margin-top:20px}
.form-sec:first-child{border-top:0;padding-top:0;margin-top:0}
.form-sec h3{margin:0 0 14px;font-size:1.02rem;color:var(--form-head);letter-spacing:-.01em;
  font-weight:700}

.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px 20px;align-items:start}
.form-field{display:flex;flex-direction:column;min-width:0}
.form-field label{font-size:.85rem;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.form-field input,.form-field select,.form-field textarea{width:100%}
.form-field textarea{resize:vertical;min-height:74px}
/* A long answer deserves the whole row rather than a narrow column.
   is-check is set in PHP rather than matched with :has(), because a
   declaration sentence must not end up in a 240px column on the older
   Android browsers that do not support :has() — the ones most likely to
   be used to fill this in. */
.form-grid>.form-field.is-check{grid-column:1 / -1}
.form-grid>.form-field:has(textarea),
.form-grid>.form-field:has(.form-ticks),
.form-grid>.form-field:has(.form-rows){grid-column:1 / -1}
.form-hint{font-size:.78rem;color:var(--ink-3);margin-top:5px;line-height:1.45}
.req{color:var(--bad);font-weight:700}

.form-note{grid-column:1 / -1;background:var(--info-bg);border-left:3px solid var(--info);
  border-radius:var(--r-sm);padding:11px 14px;font-size:.88rem;color:var(--ink-2)}

.form-money{display:flex;align-items:stretch}
.form-pre{display:grid;place-items:center;padding:0 11px;border:1px solid var(--line);
  border-right:0;border-radius:var(--r-sm) 0 0 var(--r-sm);background:var(--form-pre-bg);
  color:var(--form-pre-ink);font-size:.82rem;font-weight:700}
.form-money input{border-radius:0 var(--r-sm) var(--r-sm) 0}

.form-check,.form-radio{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;
  color:var(--ink-2);font-weight:500;cursor:pointer;padding:7px 0;line-height:1.5}
.form-check input,.form-radio input{width:19px;height:19px;flex:0 0 auto;margin-top:1px}
.form-ticks{display:grid;gap:2px}
.form-radios{display:flex;gap:24px}

/* ---- totals the applicant never types ------------------------------ */
.form-field.is-computed output{display:block;padding:11px 13px;
  border:1px dashed var(--form-total-line);border-radius:var(--r-sm);
  background:var(--form-total-bg);color:var(--form-total-ink);
  font-weight:700;font-variant-numeric:tabular-nums;font-size:1rem}
.form-field.is-total output{border-style:solid;border-width:2px;border-color:var(--p-600);
  background:var(--form-total-strong);font-size:1.12rem}
.form-field.is-total label{color:var(--form-head);font-weight:800;letter-spacing:.02em}

/* ---- repeating tables ---------------------------------------------- */
.form-rows{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--form-panel)}
.form-rows table{width:100%;border-collapse:collapse}
.form-rows th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);
  text-align:left;padding:9px 10px;background:var(--line-2)}
.form-rows td{padding:6px;border-top:1px solid var(--line)}
.form-rows input{width:100%;min-width:90px}
.row-del{border:0;background:transparent;color:var(--ink-3);font-size:1.25rem;line-height:1;
  cursor:pointer;padding:4px 9px;border-radius:var(--r-sm)}
.row-del:hover{background:var(--bad-bg);color:var(--bad)}
.form-rows .row-add{margin:10px}
@media(max-width:620px){
  .form-rows{overflow-x:auto}
  .form-rows table{min-width:440px}
}

/* ---- the balance sheet --------------------------------------------- */
/* Assets on the left against liabilities on the right, the way the paper
   form reads. Below 900px the columns stack, because a balance sheet
   squeezed into two phone-width columns is unreadable. */
.form-body.is-ledger{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;align-items:start}
.form-body.is-ledger>.form-sec{grid-column:1 / -1}
.form-body.is-ledger>.side-left{grid-column:1}
.form-body.is-ledger>.side-right{grid-column:2}
.form-body.is-ledger .form-grid{grid-template-columns:1fr}
@media(max-width:900px){
  .form-body.is-ledger{grid-template-columns:1fr}
  .form-body.is-ledger>.side-left,.form-body.is-ledger>.side-right{grid-column:1}
}

/* ---- read-only, as staff and lenders see it ------------------------- */
.form-body input:disabled,.form-body select:disabled,.form-body textarea:disabled{
  background:var(--form-panel);color:var(--ink);opacity:1;-webkit-text-fill-color:var(--ink);
  border-style:solid;cursor:default}
.form-body .form-check input:disabled,.form-body .form-radio input:disabled{opacity:.85}

/* A lender reads the pack one form at a time; all of them open at once is a
   wall of figures nobody scrolls through. */
.pack-form{border:1px solid var(--line);border-radius:var(--r);margin-top:12px;
  background:var(--form-panel)}
.pack-form>summary{cursor:pointer;padding:13px 16px;font-size:.95rem;display:flex;
  flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.pack-form>summary .sub{font-size:.82rem;color:var(--ink-3)}
.pack-form[open]>summary{border-bottom:1px solid var(--line);background:var(--form-total-bg)}
.pack-form .form-body{padding:4px 16px 18px;margin-top:0}

/* =====================================================================
   PROVINCE PANEL
   An even grid rather than a schematic map: equal tiles in straight rows
   that reflow to whatever width there is, so it stays readable on a phone
   instead of shrinking a fixed drawing until the labels vanish.
   ===================================================================== */
:root{
  --pg-0:var(--line-2);
  --pg-1:var(--p-100);
  --pg-2:var(--p-300);
  --pg-3:var(--p-500);
  --pg-4:var(--p-700);
}

.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));
  gap:8px;margin-top:14px}
.pgrid-t{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:66px;padding:11px 9px;border:1px solid var(--line);border-radius:10px;
  text-align:center;text-decoration:none;color:inherit;
  transition:border-color .12s,transform .12s,box-shadow .12s}
a.pgrid-t:hover{border-color:var(--p-600);box-shadow:var(--sh-2);transform:translateY(-1px)}
.pgrid-n{font-size:1.2rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;
  line-height:1}
.pgrid-l{font-size:.76rem;color:var(--ink-2);line-height:1.3}

.pgrid-0{background:var(--pg-0)}
.pgrid-1{background:var(--pg-1)}
.pgrid-2{background:var(--pg-2)}
.pgrid-3{background:var(--pg-3)}
.pgrid-4{background:var(--pg-4)}
/* The two darkest steps need light text to stay legible on their fill. */
.pgrid-3 .pgrid-n,.pgrid-4 .pgrid-n{color:#fff}
.pgrid-3 .pgrid-l,.pgrid-4 .pgrid-l{color:rgba(255,255,255,.85)}

.pgrid-key{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:12px;
  font-size:.78rem;color:var(--ink-3)}
.pgrid-sw{width:22px;height:11px;border-radius:3px;border:1px solid var(--line)}
.pgrid-note{margin-left:auto}
@media(max-width:520px){
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px}
  .pgrid-t{min-height:58px;padding:9px 6px}
  .pgrid-n{font-size:1.05rem}
  .pgrid-l{font-size:.71rem}
  .pgrid-note{margin-left:0;flex-basis:100%}
}

/* A read-only figure is still a figure the applicant must be able to read and
   copy — it is dimmed, not greyed out of legibility. */
.form-field input[readonly]{background:var(--form-panel);cursor:default}
.form-field input[readonly]:focus{outline:2px solid var(--p-300);outline-offset:1px}