/* =====================================================================
   ELIZ — Onboarding & Compliance Portal
   Design system styled after Standard Chartered's digital onboarding
   (signature green + blue on white, premium banking UI).
   NOTE: class names are preserved from the original build so application
   logic (data/schema/core/portal/admin/app.js) keeps working unchanged.
   ===================================================================== */

/* --- Attention glow: pulsing orange outline for the applicant status card --- */
@keyframes elizPulseGlow{
  0%,100%{ box-shadow:0 0 0 0 rgba(249,115,22,.50), 0 0 12px 2px rgba(249,115,22,.45); border-color:#f97316; }
  50%    { box-shadow:0 0 0 7px rgba(249,115,22,0), 0 0 30px 10px rgba(249,115,22,.72); border-color:#fb923c; }
}
.status-glow{ border:2px solid #f97316 !important; animation:elizPulseGlow 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .status-glow{ animation:none; box-shadow:0 0 18px 4px rgba(249,115,22,.55); border:2px solid #f97316 !important; } }

:root{
  /* SC green */
  --green-50:#e9f8ef; --green-100:#cdeed8; --green-200:#a7e2bd; --green-300:#5cc97f;
  --green-400:#2eb45f; --green-500:#1aa64b; --green-600:#14843b; --green-700:#0f6a30;
  /* SC blue */
  --blue-50:#e8f1fb; --blue-100:#cfe3f6; --blue-200:#a7caee; --blue-300:#6ba6e2;
  --blue-400:#2f86d6; --blue-500:#0473ea; --blue-600:#0a5fc0; --blue-700:#0b4ea0;
  /* deep navy (SC dark) */
  --navy-900:#0c1733; --navy-800:#13234b; --navy-700:#1b3160; --navy-600:#274684;
  /* legacy accent names remapped to SC (kept so existing classes still resolve) */
  --gold-50:#e9f8ef; --gold-100:#cdeed8; --gold-200:#a7e2bd; --gold-300:#5cc97f;
  --gold-400:#2eb45f; --gold-500:#1aa64b; --gold-600:#14843b; --gold-700:#0f6a30;
  --ink-900:#0e1726; --ink-800:#17223a; --ink-700:#1f2c46; --ink-600:#33415d;
  --ink-500:#475168; --ink-400:#5b6678;
  --slate-50:#f5f7fa; --slate-100:#eef1f6; --slate-200:#e2e7ef; --slate-300:#cdd5e1;
  --slate-400:#97a2b4; --slate-500:#64708a; --slate-600:#48536a; --slate-700:#333d52; --slate-800:#1f2738;
  --white:#ffffff;
  --amber-50:#fff8eb; --amber-100:#fdeccb; --amber-500:#f0a020; --amber-600:#d4860d; --amber-700:#9a6206;
  --orange-50:#fff3ea; --orange-100:#ffd9bd; --orange-200:#ffbe92; --orange-500:#f4761b; --orange-600:#d65f0a; --orange-700:#9e4708;
  --red-50:#fdf0ef; --red-100:#f8dcd9; --red-500:#e4564a; --red-600:#cf3a2e; --red-700:#a82a20;
  --purple-50:#f1f0fb; --purple-100:#e0ddf6; --purple-600:#5b4bc4; --purple-700:#473aa0;

  --brand-grad:linear-gradient(118deg,#13a34a 0%,#0a9b6e 42%,#0473ea 100%);
  --brand-grad-soft:linear-gradient(118deg,#1aa64b 0%,#0473ea 100%);

  --radius:14px; --radius-sm:9px; --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(12,23,51,.06),0 1px 3px rgba(12,23,51,.08);
  --shadow:0 6px 16px rgba(12,23,51,.07),0 2px 6px rgba(12,23,51,.05);
  --shadow-lg:0 14px 36px rgba(12,23,51,.12),0 4px 12px rgba(12,23,51,.07);
  --shadow-xl:0 28px 70px rgba(12,23,51,.20);
  --font:'Inter','Public Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
  --maxw:1320px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);color:var(--ink-800);background:var(--slate-50);-webkit-font-smoothing:antialiased;line-height:1.5;font-size:14.5px}
a{color:var(--blue-600);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit}
img{max-width:100%}
::selection{background:var(--green-100)}
:focus-visible{outline:2px solid var(--green-500);outline-offset:2px}
.hidden{display:none !important}
.mono{font-family:var(--mono)}
.muted{color:var(--slate-500)}
.tiny{font-size:12px}.small{font-size:12.5px}
.center{text-align:center}.nowrap{white-space:nowrap}.spacer{flex:1}
.row{display:flex;gap:12px;align-items:center}
.col{display:flex;flex-direction:column;gap:12px}
.wrap{flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media(max-width:820px){.grid2,.grid3{grid-template-columns:1fr}}

/* ============================ Buttons ============================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--slate-300);
  border-radius:999px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:.16s ease;
  background:var(--white);color:var(--ink-700);white-space:nowrap;letter-spacing:.1px}
.btn:hover{box-shadow:var(--shadow-sm);border-color:var(--slate-400)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--navy-800);color:#fff;border-color:var(--navy-900)}
.btn-primary:hover{background:var(--navy-700)}
.btn-gold{background:var(--green-500);color:#fff;border-color:var(--green-600);font-weight:700;box-shadow:0 1px 0 rgba(255,255,255,.2) inset}
.btn-gold:hover{background:var(--green-400)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--slate-600)}
.btn-ghost:hover{background:var(--slate-100);box-shadow:none;border-color:transparent}
.btn-danger{background:var(--red-600);color:#fff;border-color:var(--red-700)}
.btn-danger:hover{background:var(--red-500)}
.btn-success{background:var(--green-600);color:#fff;border-color:var(--green-700)}
.btn-success:hover{background:var(--green-500)}
.btn-warn{background:var(--amber-600);color:#fff;border-color:var(--amber-700)}
.btn-warn:hover{background:var(--amber-500)}
.btn-orange{background:var(--orange-600);color:#fff;border-color:var(--orange-700)}
.btn-orange:hover{background:var(--orange-500)}
.btn-sm{padding:6px 13px;font-size:12.5px}
.btn-lg{padding:13px 26px;font-size:15px}
.btn-block{width:100%}
.btn-icon{padding:8px;width:36px;height:36px;border-radius:50%}

/* ============================ Forms ============================ */
label.field{display:block;margin-bottom:15px}
.field > .lbl{display:block;font-weight:600;font-size:13px;color:var(--ink-700);margin-bottom:6px}
/* Required-field asterisk — red and inline with the label, everywhere it appears
   (wizard fields, document rows, agreement rows), not only inside label.field. */
.req{color:var(--red-600);font-weight:700;margin-left:2px}
.doc-req{color:var(--red-600);font-weight:800;margin-left:3px;font-size:14px;line-height:1}
.field .hint{font-weight:400;color:var(--slate-500);font-size:12px;margin-top:5px;display:block}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=tel],input[type=url],select,textarea{
  width:100%;padding:11px 13px;border:1.5px solid var(--slate-300);border-radius:var(--radius-sm);
  font-size:14px;font-family:inherit;color:var(--ink-800);background:var(--white);transition:.14s}
textarea{resize:vertical;min-height:80px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green-500);box-shadow:0 0 0 3px rgba(26,166,75,.16)}
/* Date fields: a much shorter box, and a calendar icon with strong contrast in both
   themes. color-scheme makes the browser render the native picker glyph light-on-dark
   (dim) or dark-on-light (bright); the indicator is enlarged and fully opaque. */
input[type=date]{max-width:220px}
.tbl input[type=date]{max-width:100%}
input[type=date]::-webkit-calendar-picker-indicator{opacity:1;cursor:pointer;padding:3px;margin-left:2px;border-radius:4px}
input[type=date]::-webkit-calendar-picker-indicator:hover{background:rgba(127,127,127,.22)}
.shell input[type=date]{color-scheme:dark}
.shell.bright input[type=date]{color-scheme:light}
input::placeholder,textarea::placeholder{color:var(--slate-400)}
input:disabled,select:disabled,textarea:disabled{background:var(--slate-100);color:var(--slate-500)}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5L6 7.5L9 4.5' stroke='%2364708a' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--red-500);box-shadow:0 0 0 3px rgba(228,86,74,.14)}
.field .err{color:var(--red-600);font-size:12px;margin-top:5px;display:none}
.field.invalid .err{display:block}
.checks{display:flex;flex-direction:column;gap:9px}
.check{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;cursor:pointer;padding:2px 0}
.check input{width:17px;height:17px;margin-top:1px;accent-color:var(--green-500);flex:none;cursor:pointer}
.yn{display:inline-flex;border:1.5px solid var(--slate-300);border-radius:999px;overflow:hidden}
.yn button{border:none;background:var(--white);padding:7px 18px;font-size:13px;font-weight:600;cursor:pointer;color:var(--slate-600)}
.yn button + button{border-left:1.5px solid var(--slate-300)}
.yn button.on-yes{background:var(--green-500);color:#fff}
/* "No" uses a strong red for clear contrast against the (light OR dark) background
   and an unambiguous green-Yes / red-No distinction. */
.yn button.on-no{background:var(--red-600);color:#fff}

/* ============================ Cards ============================ */
.card{background:var(--white);border:1px solid var(--slate-200);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.card-pad{padding:22px}
.card-head{padding:16px 22px;border-bottom:1px solid var(--slate-200);display:flex;align-items:center;gap:12px}
.card-head h3{font-size:15px;font-weight:700;color:var(--ink-900);letter-spacing:-.1px}
.card-body{padding:22px}

/* ============================ Badges ============================ */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.2px;line-height:1.5;border:1px solid transparent;white-space:nowrap}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge .bdg-ic{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;margin-right:-1px}
.badge .bdg-ic svg{width:13px;height:13px;stroke-width:2.6}
/* Header role badge: fixed, language-independent width + centred, so translating
   the label (e.g. Corporate Applicant -> 企业申请人) never changes its width and
   therefore never shifts the company badge or the toggles beside it. */
.badge.role-badge{width:150px;justify-content:center}
.b-gray{background:var(--slate-100);color:var(--slate-600);border-color:var(--slate-200)}
.b-green{background:var(--green-50);color:var(--green-700);border-color:var(--green-100)}
.b-amber{background:var(--amber-50);color:var(--amber-700);border-color:var(--amber-100)}
.b-red{background:var(--red-50);color:var(--red-700);border-color:var(--red-100)}
.b-blue{background:var(--blue-50);color:var(--blue-700);border-color:var(--blue-100)}
.b-purple{background:var(--purple-50);color:var(--purple-700);border-color:var(--purple-100)}
.b-orange{background:var(--orange-50);color:var(--orange-700);border-color:var(--orange-100)}
.b-orange .dot{background:var(--orange-500)}
.b-gold{background:var(--green-50);color:var(--green-700);border-color:var(--green-100)}
/* "Required" tag: transparent fill, high-contrast outline so it pops on any surface */
.b-req{background:transparent;color:var(--green-600);border-color:var(--green-400);border-width:1.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.b-req .dot{background:currentColor}

/* ============================ Tables ============================ */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--slate-500);font-weight:700;padding:12px 14px;border-bottom:1px solid var(--slate-200);background:var(--slate-50)}
.tbl td{padding:14px;border-bottom:1px solid var(--slate-100);vertical-align:middle}
.tbl tbody tr.click{cursor:pointer;transition:.1s}
.tbl tbody tr.click:hover{background:var(--green-50)}
.tbl tr:last-child td{border-bottom:none}

/* ============================ Toast ============================ */
#toasts{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px;max-width:380px}
.toast{background:var(--navy-900);color:#fff;padding:13px 16px;border-radius:12px;box-shadow:var(--shadow-lg);display:flex;gap:11px;align-items:flex-start;animation:slidein .25s ease;font-size:13.5px;border-left:3px solid var(--green-400)}
.toast.ok{border-left-color:var(--green-400)}
.toast.err{border-left-color:var(--red-500)}
.toast.warn{border-left-color:var(--amber-500)}
.toast .tx{flex:1}
@keyframes slidein{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}

/* ============================ Modal ============================ */
.modal-backdrop{position:fixed;inset:0;background:rgba(12,23,51,.5);backdrop-filter:blur(3px);z-index:9000;display:flex;align-items:center;justify-content:center;padding:24px;animation:fade .15s ease;overscroll-behavior:contain}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);width:100%;max-width:560px;max-height:88vh;display:flex;flex-direction:column;animation:pop .18s ease;overflow:hidden;overscroll-behavior:contain}
.modal.wide{max-width:860px}
@keyframes pop{from{transform:scale(.96);opacity:0}to{transform:none;opacity:1}}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--slate-200);display:flex;align-items:center;gap:12px}
.modal-head h3{font-size:16px;font-weight:700;flex:1;color:var(--ink-900)}
.modal-body{padding:22px;overflow:auto}
.modal-foot{padding:15px 22px;border-top:1px solid var(--slate-200);display:flex;gap:10px;justify-content:flex-end;background:var(--slate-50)}
.x-close{cursor:pointer;color:var(--slate-400);font-size:22px;line-height:1;background:none;border:none}
.x-close:hover{color:var(--ink-700)}

/* ============================ AUTH screens ============================ */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
@media(max-width:900px){.auth-wrap{grid-template-columns:1fr}.auth-aside{display:none !important}}
.auth-aside{position:relative;overflow:hidden;color:#fff;padding:56px 58px;display:flex;flex-direction:column;
  background:var(--brand-grad)}
.auth-aside::after{content:"";position:absolute;right:-120px;bottom:-120px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.18),transparent 60%)}
.auth-aside::before{content:"";position:absolute;left:-80px;top:-80px;width:300px;height:300px;border-radius:50%;
  border:40px solid rgba(255,255,255,.06)}
.auth-aside .brand-lg{display:flex;align-items:center;gap:14px;margin-bottom:auto;position:relative;z-index:1}
.auth-aside h1{font-size:33px;line-height:1.2;font-weight:800;letter-spacing:-.5px;margin:30px 0 16px;max-width:16ch;position:relative;z-index:1}
.auth-aside h1 .g{color:#eafff1;border-bottom:3px solid rgba(255,255,255,.55);padding-bottom:2px}
.auth-aside p.sub{color:rgba(255,255,255,.85);font-size:15px;max-width:44ch;line-height:1.6;position:relative;z-index:1}
.auth-features{margin-top:34px;display:flex;flex-direction:column;gap:15px;position:relative;z-index:1}
.auth-feature{display:flex;gap:13px;align-items:flex-start}
.auth-feature .ic{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;flex:none}
.auth-feature .t b{display:block;font-size:14px;font-weight:700}
.auth-feature .t span{font-size:13px;color:rgba(255,255,255,.78)}
.auth-aside .foot{margin-top:auto;font-size:12px;color:rgba(255,255,255,.7);padding-top:30px;position:relative;z-index:1}
.auth-main{display:flex;align-items:center;justify-content:center;padding:40px 28px;background:var(--white)}
.auth-card{width:100%;max-width:430px}
.auth-card h2{font-size:25px;font-weight:800;color:var(--ink-900);letter-spacing:-.3px}
.auth-card .lead{color:var(--slate-500);margin:7px 0 26px;font-size:14px}
.auth-switch{margin-top:20px;text-align:center;font-size:13.5px;color:var(--slate-500)}
.divider{display:flex;align-items:center;gap:12px;color:var(--slate-400);font-size:11px;font-weight:700;letter-spacing:1px;margin:20px 0}
.divider::before,.divider::after{content:"";height:1px;background:var(--slate-200);flex:1}
.otp-inputs{display:flex;gap:10px;justify-content:center;margin:8px 0 4px}
.otp-inputs input{width:48px;height:56px;text-align:center;font-size:22px;font-weight:700;font-family:var(--mono)}
.code-banner{background:var(--green-50);border:1px dashed var(--green-400);border-radius:12px;padding:13px 16px;font-size:13px;color:var(--green-700);margin-bottom:18px}
.code-banner b{font-family:var(--mono);font-size:18px;letter-spacing:3px;color:var(--ink-900)}
.auth-help{margin-top:18px;display:flex;align-items:flex-start;gap:10px;padding:12px 14px;background:var(--slate-50);border:1px solid var(--slate-200);border-radius:12px;font-size:13px;color:var(--slate-600);line-height:1.5}
.auth-help .wa{flex:none;line-height:0;margin-top:1px}
.auth-help b{color:var(--slate-700);font-weight:700}
.auth-help a{font-weight:700;color:var(--green-700);white-space:nowrap}
.auth-help a:hover{text-decoration:underline}

/* ============================ Brand mark ============================ */
.mark{width:42px;height:42px;border-radius:12px;background:var(--brand-grad-soft);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:19px;box-shadow:var(--shadow-sm);flex:none;position:relative}
.mark::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 1px rgba(255,255,255,.35)}
.mark.sm{width:32px;height:32px;font-size:15px;border-radius:9px}
.mark.lg{width:54px;height:54px;font-size:24px;border-radius:15px}
.brand-name{font-weight:800;letter-spacing:-.2px}
.brand-name .gold{color:var(--green-500)}
.brand-sub{font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--slate-400);font-weight:700}

/* ============================ App shell ============================ */
.shell{min-height:100vh;display:flex;flex-direction:column}
.topbar{height:64px;background:var(--white);color:var(--ink-800);display:flex;align-items:center;gap:20px;padding:0 24px;position:sticky;top:0;z-index:500;border-bottom:1px solid var(--slate-200);box-shadow:0 1px 0 rgba(12,23,51,.02)}
.topbar::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--brand-grad)}
.topbar .brand{display:flex;align-items:center;gap:11px}
.topbar .brand .nm{color:var(--ink-900);font-size:15.5px;font-weight:800}
.topbar .brand .nm .gold{color:var(--green-600)}
.topbar .env{font-size:10px;color:var(--green-700);background:var(--green-50);border:1px solid var(--green-100);border-radius:6px;padding:3px 8px;letter-spacing:.6px;font-weight:800}
.topbar .tnav{display:flex;gap:4px;margin-left:14px}
.topbar .tnav a{color:var(--slate-600);font-size:13.5px;font-weight:600;padding:9px 14px;border-radius:9px;cursor:pointer;position:relative}
.topbar .tnav a:hover{color:var(--ink-900);background:var(--slate-100);text-decoration:none}
.topbar .tnav a.active{color:var(--green-700);background:var(--green-50)}
.topbar .user{display:flex;align-items:center;gap:10px;cursor:pointer;padding:5px 8px;border-radius:10px}
.topbar .user:hover{background:var(--slate-100)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--brand-grad-soft);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:none}
/* Fixed-width user block so its text length (e.g. the officer title, which is
   translated) can't shift the header toggle buttons when the language changes. */
.topbar .user .who{line-height:1.25;width:148px}
.topbar .user .who b{font-size:13px;display:block;color:var(--ink-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .user .who span{font-size:11px;color:var(--slate-500);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.content{flex:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:30px 24px 64px}
.page-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.page-head h1{font-size:24px;font-weight:800;letter-spacing:-.5px;color:var(--ink-900)}
.page-head .sub{color:var(--slate-500);font-size:14px;margin-top:4px}
.breadcrumb{font-size:12.5px;color:var(--slate-400);margin-bottom:10px;display:flex;gap:7px;align-items:center}
.breadcrumb a{color:var(--blue-600);cursor:pointer}
.breadcrumb .sep{color:var(--slate-300)}

/* dashboard layout with sidebar */
.layout{display:grid;grid-template-columns:264px 1fr;gap:28px;align-items:start}
@media(max-width:900px){.layout{grid-template-columns:1fr}}
.sidenav{position:sticky;top:92px;display:flex;flex-direction:column;gap:3px}
.sidenav .grp{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--slate-400);font-weight:800;padding:14px 12px 8px}
.sidenav a{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:10px;color:var(--slate-600);font-size:13.5px;font-weight:600;cursor:pointer}
.sidenav a:hover{background:var(--slate-100);text-decoration:none;color:var(--ink-900)}
.sidenav a.active{background:var(--navy-800);color:#fff}
.sidenav a.active svg{color:var(--green-300)}
.sidenav a .ct{margin-left:auto;background:var(--slate-200);color:var(--slate-600);font-size:11px;font-weight:700;border-radius:999px;padding:1px 7px;min-width:20px;text-align:center}
.sidenav a.active .ct{background:rgba(255,255,255,.2);color:#fff}

/* ============================ Stat cards ============================ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
@media(max-width:900px){.stats{grid-template-columns:1fr 1fr}}
.stat{background:var(--white);border:1px solid var(--slate-200);border-radius:var(--radius);padding:18px 19px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand-grad)}
.stat .lab{font-size:12px;color:var(--slate-500);font-weight:600;display:flex;align-items:center;gap:7px}
.stat .num{font-size:28px;font-weight:800;margin-top:8px;letter-spacing:-.6px;color:var(--ink-900)}
.stat .meta{font-size:12px;margin-top:3px;color:var(--slate-500)}

/* ============================ Onboarding journey tracker (stepper) ====== */
.stepper{display:flex;flex-direction:column;gap:0;position:relative}
.step{display:flex;gap:13px;align-items:center;padding:11px 12px;border-radius:10px;cursor:pointer;font-size:13.5px;color:var(--slate-600);font-weight:600;position:relative}
.step::before{content:"";position:absolute;left:25px;top:34px;bottom:-2px;width:2px;background:var(--slate-200);z-index:0}
.step:last-child::before{display:none}
.step:hover{background:var(--slate-50)}
.step.active{background:var(--green-50);color:var(--green-700)}
.step .ix{width:27px;height:27px;border-radius:50%;border:2px solid var(--slate-300);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--slate-500);flex:none;background:#fff;z-index:1}
.step.active .ix{border-color:var(--green-500);color:#fff;background:var(--green-500);box-shadow:0 0 0 4px var(--green-100)}
.step.done .ix{background:var(--green-600);border-color:var(--green-600);color:#fff}
.step.error .ix{background:var(--red-50);border-color:var(--red-500);color:var(--red-600)}
.step .nm{flex:1}
.step .stt{font-size:11px}
.progressbar{height:8px;background:var(--slate-200);border-radius:999px;overflow:hidden}
.progressbar > span{display:block;height:100%;background:var(--brand-grad-soft);transition:width .4s ease}

/* Horizontal stage pipeline (SC-style) */
.pipeline{display:flex;align-items:center;gap:0;margin:2px 0 6px;flex-wrap:wrap}
.pipeline .pl-step{display:flex;align-items:center;gap:9px;flex:1;min-width:130px}
.pipeline .pl-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex:none;background:var(--white);border:2px solid var(--slate-300);color:var(--slate-500)}
.pipeline .pl-step.done .pl-dot{background:var(--green-500);border-color:var(--green-500);color:#fff}
.pipeline .pl-step.active .pl-dot{background:var(--white);border-color:var(--green-500);color:var(--green-600);box-shadow:0 0 0 4px var(--green-100)}
.pipeline .pl-lbl{font-size:12.5px;font-weight:700;color:var(--ink-800)}
.pipeline .pl-step:not(.done):not(.active) .pl-lbl{color:var(--slate-400);font-weight:600}
.pipeline .pl-bar{flex:1;height:2px;background:var(--slate-200);margin:0 8px;min-width:18px}
.pipeline .pl-step.done .pl-bar{background:var(--green-400)}

/* ============================ Document / upload ============================ */
.dropzone{border:2px dashed var(--slate-300);border-radius:var(--radius);padding:22px;text-align:center;cursor:pointer;transition:.15s;background:var(--slate-50)}
.dropzone:hover,.dropzone.drag{border-color:var(--green-500);background:var(--green-50)}
.doc-row{display:flex;align-items:center;gap:13px;padding:14px 16px;border:1px solid var(--slate-200);border-radius:12px;background:#fff;margin-bottom:10px}
.doc-ic{width:42px;height:42px;border-radius:10px;background:var(--slate-100);display:flex;align-items:center;justify-content:center;flex:none;color:var(--slate-500)}
.doc-row.required .doc-ic{background:var(--green-50);color:var(--green-600)}
.doc-info{flex:1;min-width:0}
.doc-info b{font-size:13.5px;display:block;color:var(--ink-900);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.doc-info span{font-size:12px;color:var(--slate-500)}
.doc-file{font-size:12px;color:var(--green-700);font-weight:600;display:flex;align-items:center;gap:6px}
/* Section B — tickable agreement acceptance (read full text in a popup, scroll, then accept) */
.decl-row{align-items:flex-start}
.decl-check{display:flex;gap:10px;align-items:flex-start;margin-top:10px;padding:11px 13px;border:1px solid var(--slate-200);border-radius:10px;background:var(--slate-50);cursor:pointer;line-height:1.5}
.decl-check input[type=checkbox]{flex:none;width:17px;height:17px;margin-top:1px;accent-color:var(--green-600);cursor:pointer}
.decl-check span{font-size:12.5px;color:var(--slate-700)}
.decl-check b{color:var(--ink-900)}
.decl-row.required.doc-missing .decl-check{border-color:var(--orange-500)}
.decl-accepted{margin-top:8px;color:var(--green-700);font-weight:700;display:flex;align-items:center;gap:5px}

/* ---- Scroll-to-accept agreement dialog ---- */
.agr-modal{display:flex;flex-direction:column}
.agr-viewport{position:relative}
/* the agreement renders as a white "paper" sheet so it reads clearly in either modal theme */
.agr-scroll{max-height:48vh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background:#fff;color:#1f2735;border:1px solid var(--slate-200);
  border-radius:10px;padding:20px 22px;font-size:13px;line-height:1.6}
.agr-scroll .agr-meta{font-size:11px;color:#7a8499;text-align:center;margin-bottom:14px}
.agr-scroll .agr-title{font-size:14px;font-weight:800;color:#0f1830;margin:0 0 12px;text-align:center}
.agr-scroll .agr-h{font-size:13px;font-weight:700;color:#0f1830;margin:15px 0 5px}
.agr-scroll p{margin:0 0 9px}
.agr-scroll ul{margin:0 0 9px;padding-left:20px}
.agr-scroll li{margin:0 0 5px}
.agr-scroll .agr-end{margin-top:18px;text-align:center;color:#9aa3b4;font-size:11px;letter-spacing:1px;text-transform:uppercase}
.agr-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;align-items:center;gap:7px;
  background:rgba(15,23,42,.88);color:#fff;font-size:12px;font-weight:600;padding:7px 14px;border-radius:999px;
  box-shadow:0 6px 16px rgba(0,0,0,.28);pointer-events:none;z-index:3;animation:agrBounce 1.4s ease-in-out infinite}
.agr-hint.hidden{opacity:0;visibility:hidden;transition:opacity .3s ease}
.agr-chev{display:inline-flex;transform:rotate(90deg);line-height:0}
@keyframes agrBounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}
@media (prefers-reduced-motion: reduce){ .agr-hint{animation:none} }
.agr-confirm{display:block;margin:13px 2px 0;font-size:12px;line-height:1.55}
.agr-confirm.ok{display:flex;align-items:center;gap:7px;color:var(--green-600);font-weight:600}
.agr-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.agr-agree.is-locked{opacity:.5;cursor:not-allowed}
.agr-agree:disabled{opacity:.5;cursor:not-allowed}

/* ============================ Review controls (officer) ============================ */
.review-field{border:1px solid var(--slate-200);border-radius:12px;margin-bottom:12px;overflow:hidden}
.review-field .rf-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--white)}
.review-field.s-approved{border-color:var(--green-200)}
.review-field.s-approved .rf-head{background:var(--green-50)}
.review-field.s-rejected{border-color:var(--red-100)}
.review-field.s-rejected .rf-head{background:var(--red-50)}
.review-field.s-rfi{border-color:var(--amber-100)}
.review-field.s-rfi .rf-head{background:var(--amber-50)}
.review-field.s-questioned{border-color:var(--orange-100)}
.review-field.s-questioned .rf-head{background:var(--orange-50)}
/* The value list sits between .rf-head and .rf-verify, both padded to 16px; without
   matching padding it ran flush to the card edge while the header above it did not.
   The label column sizes to its content instead of a hard 180px, so the long labels
   ("Correspondent Bank Address (optional)") stop wrapping onto a second line. */
.review-field .kv{padding:12px 16px;grid-template-columns:minmax(auto,280px) 1fr;align-items:baseline}
.rf-key{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--slate-500);font-weight:700}
.rf-val{font-size:14px;color:var(--ink-900);margin-top:2px;word-break:break-word}
.rf-val.empty{color:var(--slate-400);font-style:italic}
.rf-actions{display:flex;gap:6px;flex:none}
.rf-remark{padding:11px 16px;background:var(--slate-50);border-top:1px solid var(--slate-200);font-size:12.5px;color:var(--slate-600)}
.rf-remark b{color:var(--ink-800)}
/* ---- Inline verification editor: source of verification + remark ---- */
/* Badge cluster beside a reviewable item (e.g. "Migrated" + "Verified by officer"):
   flex with a gap so badges never stick together, centred so they sit level. */
.rf-status{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.rf-verify{padding:13px 16px 15px;border-top:1px solid var(--slate-200);background:var(--slate-50)}
.rf-vrow{display:flex;gap:12px;flex-wrap:wrap}
.rf-vfield{flex:1 1 230px;min-width:0;display:flex;flex-direction:column;gap:5px;margin:0;cursor:text}
.rf-vcap{display:flex;align-items:center;gap:5px;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:var(--slate-500)}
.rf-vcap svg{opacity:.85}
.rf-vin{width:100%;font-size:13px;padding:8px 11px;border:1px solid var(--slate-300);border-radius:6px;background:var(--slate-50);color:var(--ink-900)}
.rf-vin::placeholder{color:var(--slate-400)}
.rf-vactions{margin-top:11px;flex-wrap:wrap;gap:7px}
.rf-bg{margin-right:5px;font-size:12px;line-height:1}
/* ---- Verdict buttons: four alternatives, not a primary plus three fallbacks ----
   Four solid colours made the row read as a traffic light, and a solid green Verify
   carried the visual weight of a default action — the wrong nudge on a compliance
   decision the officer is supposed to make deliberately. So all four are TINTED at
   rest and carry equal weight; whichever verdict is recorded becomes the only solid
   button (.rv-on) and the rest grey out (.rv-off, below).

   The tints are tokens because --green-50 and friends are NOT remapped for the dark
   shell (only --white / --slate-* are, see the SPACE THEME block): using them raw
   would paint a near-white pill on a dark card. */
.rf-vactions{
  --vd-ok-fg:var(--green-600);  --vd-ok-bg:var(--green-50);   --vd-ok-bd:var(--green-200);
  --vd-qu-fg:var(--orange-600); --vd-qu-bg:var(--orange-50);  --vd-qu-bd:var(--orange-200);
  --vd-rfi-fg:var(--amber-600); --vd-rfi-bg:var(--amber-50);  --vd-rfi-bd:var(--amber-100);
  --vd-no-fg:var(--red-600);    --vd-no-bg:var(--red-50);     --vd-no-bd:var(--red-100);
}
.shell .rf-vactions,.modal .rf-vactions{
  --vd-ok-fg:#6bd894;  --vd-ok-bg:rgba(46,180,95,.14);   --vd-ok-bd:rgba(46,180,95,.42);
  --vd-qu-fg:#f5a165;  --vd-qu-bg:rgba(244,118,27,.14);  --vd-qu-bd:rgba(244,118,27,.42);
  --vd-rfi-fg:#eec06a; --vd-rfi-bg:rgba(240,160,32,.14); --vd-rfi-bd:rgba(240,160,32,.42);
  --vd-no-fg:#f2928a;  --vd-no-bg:rgba(228,86,74,.14);   --vd-no-bd:rgba(228,86,74,.42);
}
.rf-vactions .btn-success{background:var(--vd-ok-bg);color:var(--vd-ok-fg);border-color:var(--vd-ok-bd)}
.rf-vactions .btn-orange{background:var(--vd-qu-bg);color:var(--vd-qu-fg);border-color:var(--vd-qu-bd)}
.rf-vactions .btn-warn{background:var(--vd-rfi-bg);color:var(--vd-rfi-fg);border-color:var(--vd-rfi-bd)}
.rf-vactions .btn-danger{background:var(--vd-no-bg);color:var(--vd-no-fg);border-color:var(--vd-no-bd)}
/* Hover and the recorded verdict both fill solid, reusing the existing button colours. */
.rf-vactions .btn-success:hover,.rf-actions .btn-success.rv-on{background:var(--green-600);color:#fff;border-color:var(--green-700)}
.rf-vactions .btn-orange:hover,.rf-actions .btn-orange.rv-on{background:var(--orange-600);color:#fff;border-color:var(--orange-700)}
.rf-vactions .btn-warn:hover,.rf-actions .btn-warn.rv-on{background:var(--amber-600);color:#fff;border-color:var(--amber-700)}
.rf-vactions .btn-danger:hover,.rf-actions .btn-danger.rv-on{background:var(--red-600);color:#fff;border-color:var(--red-700)}
/* Verdict buttons after a decision is recorded: the chosen one keeps its colour
   (.rv-on, with a subtle ring); the other three turn GREY (.rv-off) but remain
   clickable so the officer can change the decision at any time. */
.rf-actions .btn.rv-off,.rf-actions .btn.rv-off:hover{background:var(--slate-300);border-color:var(--slate-400);color:var(--slate-600)}
.rf-actions .btn.rv-off:hover{background:var(--slate-400);color:var(--slate-700)}
.rf-actions .btn.rv-off .rf-bg{opacity:.65}
.rf-actions .btn.rv-on{box-shadow:0 0 0 2px rgba(15,23,42,.14)}
.rf-recorded{display:flex;align-items:center;gap:5px;margin-top:10px;font-size:11.5px;color:var(--slate-500)}
.rf-recorded svg{opacity:.75;flex:none}
.doc-item{border:1px solid var(--slate-200);border-radius:12px;background:var(--white);margin-bottom:12px;overflow:hidden}
.doc-item .doc-row{border:none;border-radius:0;margin:0;background:transparent}
.shell .doc-item{background:rgba(255,255,255,.05);border-color:rgba(150,185,235,.16)}
.shell .doc-item .doc-row{background:transparent;border:none}

.flag{display:flex;gap:12px;padding:14px 16px;border-radius:12px;border:1px solid;margin-bottom:10px;align-items:flex-start}
.flag.hit{background:var(--red-50);border-color:var(--red-100)}
.flag.warn{background:var(--amber-50);border-color:var(--amber-100)}
.flag.info{background:var(--blue-50);border-color:var(--blue-100)}
.flag.ok{background:var(--green-50);border-color:var(--green-100)}
.flag .fi{flex:none;margin-top:1px}
.flag .ft{flex:1;font-size:13px}
.flag .ft b{display:block;margin-bottom:2px;color:var(--ink-900)}
/* Clickable reviewer-remark rows → jump to the field/document.
   Hover is colour-only (no transform/box-shadow) so it can't trigger the
   backdrop-filter recomposite that flashed faint white seams on nearby cards. */
.flag-click{cursor:pointer;transition:background-color .14s ease, border-color .14s ease}
.flag-click .flag-go{flex:none;align-self:center;opacity:.6;transition:opacity .14s ease}
.flag-click:hover .flag-go{opacity:1}
.flag-click:focus-visible{outline:2px solid var(--amber-500);outline-offset:2px}
/* "Action required" bars: dim mode keeps the original light amber (.13);
   bright mode uses a 40% amber fill so it reads on the light background. */
.shell.bright .flag.warn.flag-click{background:rgba(240,160,32,.40);border-color:rgba(240,160,32,.5)}
@keyframes pulseTarget{0%,100%{box-shadow:0 0 0 0 rgba(244,118,27,0),0 0 0 0 rgba(244,118,27,0)}50%{box-shadow:0 0 0 4px rgba(244,118,27,.6),0 0 22px 4px rgba(244,118,27,.6)}}
.pulse-target{animation:pulseTarget .8s ease-in-out 3;border-radius:12px;position:relative;z-index:2}
/* Rejected / questioned fields: a pulsing coloured ring that shines around the
   box. Opacity-animated overlay (not box-shadow) so it glows without repainting
   the frosted cards behind it. Red = rejected; orange = questioned OR incomplete. */
.field.flagged-rej,.field.flagged-q,.field.flagged-rfi,.field.field-error{position:relative}
.field.flagged-rej::after,.field.flagged-q::after,.field.flagged-rfi::after,.field.field-error::after{content:"";position:absolute;inset:-3px;border-radius:12px;pointer-events:none;border:2px solid transparent;will-change:opacity;animation:fieldShine 1.5s ease-in-out infinite}
.field.flagged-rej::after{border-color:var(--red-500);box-shadow:0 0 13px 1px rgba(228,86,74,.6),inset 0 0 7px rgba(228,86,74,.22)}
.field.flagged-q::after,.field.field-error::after{border-color:var(--orange-500);box-shadow:0 0 13px 1px rgba(244,118,27,.62),inset 0 0 7px rgba(244,118,27,.22)}
.field.flagged-rfi::after{border-color:var(--amber-500);box-shadow:0 0 13px 1px rgba(240,160,32,.6),inset 0 0 7px rgba(240,160,32,.22)}
@keyframes fieldShine{0%,100%{opacity:.32}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){ .field.flagged-rej::after,.field.flagged-q::after,.field.flagged-rfi::after,.field.field-error::after{animation:none;opacity:.9} }
/* Approved-application CTA card — pulses an orange ring to flag the next step
   (download, sign & upload), until the signed copy has been uploaded. */
.cta-pulse{position:relative}
.cta-pulse::after{content:"";position:absolute;inset:-4px;border-radius:calc(var(--radius) + 4px);pointer-events:none;border:2px solid var(--orange-500);box-shadow:0 0 22px 2px rgba(244,118,27,.5),inset 0 0 12px rgba(244,118,27,.14);animation:fieldShine 1.5s ease-in-out infinite;z-index:2}
@media (prefers-reduced-motion: reduce){ .cta-pulse::after{animation:none;opacity:.85} }

/* risk ring */
.riskmeter{display:flex;flex-direction:column;gap:8px}
.riskmeter .track{height:10px;border-radius:999px;background:linear-gradient(90deg,var(--green-500),var(--amber-500) 55%,var(--red-500));position:relative}
.riskmeter .knob{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--navy-800);transform:translate(-50%,-50%);box-shadow:var(--shadow-sm)}
.score-ring{--p:0;width:132px;height:132px;border-radius:50%;background:conic-gradient(var(--rc,var(--green-500)) calc(var(--p)*1%),var(--slate-100) 0);display:flex;align-items:center;justify-content:center;flex:none}
.score-ring .inner{width:100px;height:100px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}
.score-ring .inner b{font-size:31px;font-weight:800;line-height:1;color:var(--ink-900)}
.score-ring .inner span{font-size:11px;color:var(--slate-500);margin-top:3px}

/* timeline */
.timeline{position:relative;padding-left:26px}
.timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--slate-200)}
.tl-item{position:relative;padding:0 0 18px}
.tl-item::before{content:"";position:absolute;left:-22px;top:3px;width:11px;height:11px;border-radius:50%;background:var(--green-500);border:2px solid #fff;box-shadow:0 0 0 2px var(--green-100)}
.tl-item .tl-t{font-size:13.5px;font-weight:600;color:var(--ink-900)}
.tl-item .tl-m{font-size:12.5px;color:var(--slate-500);margin-top:2px}
.tl-item .tl-d{font-size:11.5px;color:var(--slate-400);margin-top:3px}

/* tabs */
.tabs{display:flex;gap:3px;border-bottom:1px solid var(--slate-200);margin-bottom:22px;flex-wrap:wrap}
.tabs button{border:none;background:none;padding:12px 16px;font-size:13.5px;font-weight:600;color:var(--slate-500);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button:hover{color:var(--ink-900)}
.tabs button.active{color:var(--green-700);border-bottom-color:var(--green-500)}

/* accordion */
.acc{border:1px solid var(--slate-200);border-radius:12px;margin-bottom:10px;overflow:hidden;background:#fff}
.acc-h{padding:16px 18px;display:flex;align-items:center;gap:12px;cursor:pointer;font-weight:700;font-size:14px;color:var(--ink-900)}
.acc-h:hover{background:var(--slate-50)}
.acc-h .chev{margin-left:auto;transition:.2s;color:var(--slate-400)}
.acc.open .chev{transform:rotate(90deg)}
.acc-b{padding:0 18px;max-height:0;overflow:hidden;transition:max-height .25s ease;font-size:13.5px;color:var(--slate-700);line-height:1.7}
.acc.open .acc-b{padding:4px 18px 18px;max-height:1600px}
.acc-b h5{font-size:13px;color:var(--ink-900);margin:12px 0 5px;font-weight:700}
.acc-b ul{margin:6px 0 6px 20px}.acc-b li{margin-bottom:4px}.acc-b p{margin-bottom:9px}
.acc-b .src{font-size:12px;color:var(--slate-400);margin-top:10px;border-top:1px dashed var(--slate-200);padding-top:9px}

/* misc */
.note{background:var(--blue-50);border:1px solid var(--blue-100);border-radius:12px;padding:13px 15px;font-size:13px;color:var(--blue-700);display:flex;gap:10px}
.note.amber{background:var(--amber-50);border-color:var(--amber-100);color:var(--amber-700)}
.note.gold{background:var(--green-50);border-color:var(--green-100);color:var(--green-700)}
.note.red{background:var(--red-50);border-color:var(--red-100);color:var(--red-700)}
.email-body{font-size:13.5px;line-height:1.62}
.email-body p{margin:0 0 10px}
.kv{display:grid;grid-template-columns:180px 1fr;gap:9px 16px;font-size:13.5px}
.kv dt{color:var(--slate-500);font-weight:600}
.kv dd{color:var(--ink-900)}
hr.sep{border:none;border-top:1px solid var(--slate-200);margin:20px 0}
.empty-state{text-align:center;padding:56px 20px;color:var(--slate-500)}
.empty-state .ic{width:62px;height:62px;border-radius:16px;background:var(--green-50);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--green-500)}
.empty-state h3{font-size:16px;color:var(--ink-900);margin-bottom:6px}
.pill-tabs{display:inline-flex;background:var(--slate-100);border-radius:999px;padding:3px;gap:3px}
.pill-tabs button{border:none;background:none;padding:7px 16px;font-size:13px;font-weight:600;color:var(--slate-500);border-radius:999px;cursor:pointer}
.pill-tabs button.active{background:#fff;color:var(--green-700);box-shadow:var(--shadow-sm)}
.legalbar{background:#243c72;color:rgba(255,255,255,.78);font-size:11.5px;text-align:center;padding:16px 20px;line-height:1.6;border-top:1px solid rgba(150,185,235,.2)}
.legalbar a{color:var(--green-300)}
.filepreview{width:100%;height:420px;border:1px solid var(--slate-200);border-radius:8px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--slate-100);border:1px solid var(--slate-200);border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:600;color:var(--slate-700)}
.chip .rm{cursor:pointer;color:var(--slate-400);font-weight:700}
.chip .rm:hover{color:var(--red-600)}

/* =====================================================================
   SPACE THEME — applies to the LOGIN / REGISTER / VERIFY screens only.
   Every rule is scoped under .auth-wrap / .auth-card / .auth-aside so the
   logged-in shell (dashboard & officer console) keeps its light theme.
   ===================================================================== */
.auth-wrap{position:relative;overflow:hidden;background:#05080f}
.auth-wrap::before{content:"";position:absolute;top:0;left:0;height:100%;width:200%;z-index:0;background:#05080f url("../img/space-stars-tile.jpg") repeat-x;background-size:50% 100%;animation:driftRight 160s linear infinite;will-change:transform}
/* Cloud field: 10 individually-placed sprites (5 distinct images) drifting right.
   Sparse on purpose — never a full repeating tile, never fills the whole sky. */
.clouds{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.cloud{position:absolute;left:-8%;background-repeat:no-repeat;background-size:contain;background-position:center;aspect-ratio:2/1;will-change:transform;animation:cloudDrift linear infinite}
.cloud-1 {top:6%; width:300px;opacity:.55;background-image:url("../img/cloud-a.png");animation-duration:88s; animation-delay:-6s}
.cloud-2 {top:20%;width:210px;opacity:.40;background-image:url("../img/cloud-b.png");animation-duration:120s;animation-delay:-44s}
.cloud-3 {top:36%;width:350px;opacity:.50;background-image:url("../img/cloud-c.png");animation-duration:74s; animation-delay:-22s}
.cloud-4 {top:54%;width:250px;opacity:.34;background-image:url("../img/cloud-d.png");animation-duration:110s;animation-delay:-66s}
.cloud-5 {top:70%;width:310px;opacity:.46;background-image:url("../img/cloud-e.png");animation-duration:96s; animation-delay:-14s}
.cloud-6 {top:80%;width:220px;opacity:.30;background-image:url("../img/cloud-a.png");animation-duration:132s;animation-delay:-90s}
.cloud-7 {top:13%;width:185px;opacity:.34;background-image:url("../img/cloud-c.png");animation-duration:104s;animation-delay:-52s}
.cloud-8 {top:46%;width:270px;opacity:.42;background-image:url("../img/cloud-b.png");animation-duration:84s; animation-delay:-30s}
.cloud-9 {top:63%;width:200px;opacity:.30;background-image:url("../img/cloud-d.png");animation-duration:116s;animation-delay:-72s}
.cloud-10{top:28%;width:330px;opacity:.48;background-image:url("../img/cloud-e.png");animation-duration:100s;animation-delay:-10s}
.cloud-11{top:4%; width:420px;opacity:.42;background-image:url("../img/cloud-c.png");animation-duration:115s;animation-delay:-33s}
.cloud-12{top:17%;width:240px;opacity:.34;background-image:url("../img/cloud-a.png");animation-duration:92s; animation-delay:-58s}
.cloud-13{top:33%;width:460px;opacity:.40;background-image:url("../img/cloud-e.png");animation-duration:78s; animation-delay:-12s}
.cloud-14{top:50%;width:300px;opacity:.30;background-image:url("../img/cloud-b.png");animation-duration:124s;animation-delay:-85s}
.cloud-15{top:66%;width:400px;opacity:.38;background-image:url("../img/cloud-d.png");animation-duration:100s;animation-delay:-25s}
.cloud-16{top:76%;width:250px;opacity:.28;background-image:url("../img/cloud-c.png");animation-duration:112s;animation-delay:-48s}
.cloud-17{top:10%;width:360px;opacity:.36;background-image:url("../img/cloud-a.png");animation-duration:88s; animation-delay:-70s}
.cloud-18{top:42%;width:480px;opacity:.34;background-image:url("../img/cloud-e.png");animation-duration:134s;animation-delay:-18s}
.cloud-19{top:58%;width:230px;opacity:.30;background-image:url("../img/cloud-b.png");animation-duration:96s; animation-delay:-62s}
.cloud-20{top:24%;width:410px;opacity:.40;background-image:url("../img/cloud-d.png");animation-duration:106s;animation-delay:-38s}
.auth-wrap>.auth-aside,.auth-wrap>.auth-main{position:relative;z-index:2}
@keyframes driftRight{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes cloudDrift{from{transform:translateX(-20vw)}to{transform:translateX(130vw)}}
@media (prefers-reduced-motion:reduce){
  .auth-wrap::before{animation:none;transform:translateX(-50%)}
  .shell::before{animation:none;transform:translateX(-25%)}
  .cloud{animation:none}
  .cloud-1{transform:translateX(10vw)}.cloud-2{transform:translateX(64vw)}.cloud-3{transform:translateX(30vw)}.cloud-4{transform:translateX(82vw)}.cloud-5{transform:translateX(46vw)}
  .cloud-6{transform:translateX(8vw)}.cloud-7{transform:translateX(88vw)}.cloud-8{transform:translateX(24vw)}.cloud-9{transform:translateX(58vw)}.cloud-10{transform:translateX(74vw)}
  .cloud-11{transform:translateX(40vw)}.cloud-12{transform:translateX(6vw)}.cloud-13{transform:translateX(78vw)}.cloud-14{transform:translateX(52vw)}.cloud-15{transform:translateX(18vw)}
  .cloud-16{transform:translateX(92vw)}.cloud-17{transform:translateX(66vw)}.cloud-18{transform:translateX(30vw)}.cloud-19{transform:translateX(84vw)}.cloud-20{transform:translateX(14vw)}
}
.auth-aside{background:transparent}
.auth-aside::before,.auth-aside::after{display:none}
.auth-aside h1 .g{color:#bfe0ff;border-bottom-color:rgba(150,195,255,.6)}
.auth-main{background:transparent}
.auth-card{background:rgba(10,18,38,.52);-webkit-backdrop-filter:blur(22px) saturate(125%);backdrop-filter:blur(22px) saturate(125%);
  border:1px solid rgba(150,185,235,.18);border-radius:20px;padding:38px 34px;
  box-shadow:0 26px 70px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07)}
.auth-card h2{color:#f4f8ff}
.auth-card .lead{color:rgba(208,221,242,.74)}
.auth-card .field > .lbl{color:rgba(226,236,251,.92)}
.auth-card input[type]{background:rgba(255,255,255,.06);border:1.5px solid rgba(160,190,235,.26);color:#eaf2ff;caret-color:#bcd4ff}
.auth-card input::placeholder{color:rgba(216,228,247,.46)}
.auth-card input:focus{border-color:rgba(120,180,255,.78);background:rgba(255,255,255,.11);box-shadow:0 0 0 3px rgba(90,150,240,.24)}
/* Entity / company <select> — match the text inputs exactly (was a white box). */
.auth-card select{background-color:rgba(255,255,255,.06);border:1.5px solid rgba(160,190,235,.26);color:#eaf2ff;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5L6 7.5L9 4.5' stroke='%23bcd4ff' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>")}
.auth-card select:focus{border-color:rgba(120,180,255,.78);background-color:rgba(255,255,255,.11);box-shadow:0 0 0 3px rgba(90,150,240,.24)}
.auth-card select option{background-color:#0e1830;color:#eaf2ff}
.auth-card select option:checked{background-color:#1b3c6b;color:#ffffff}
.auth-card a,.auth-switch a{color:#8cc0ff;font-weight:600}
.auth-switch{color:rgba(208,221,242,.72)}
.auth-card .divider{color:rgba(200,216,242,.6)}
.auth-card .divider::before,.auth-card .divider::after{background:rgba(170,196,236,.20)}
.auth-card .demo-card{border:1px solid rgba(160,190,235,.18);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.04)}
.auth-card .demo-head{padding:12px 16px;border-bottom:1px solid rgba(160,190,235,.14);font-weight:700;font-size:13px;color:#e2ecfd;background:rgba(255,255,255,.05)}
.auth-card .demo-body{padding:10px 16px}
.auth-card .demo-row{justify-content:space-between;padding:7px 0}
.auth-card .demo-label{font-weight:600;font-size:13px;color:#eef4ff}
.auth-card .muted{color:rgba(206,219,242,.62)}
.auth-card .demo-card .btn{background:rgba(255,255,255,.10);border-color:rgba(160,190,235,.32);color:#eaf2ff}
.auth-card .demo-card .btn:hover{background:rgba(255,255,255,.18);box-shadow:none}
.auth-card .note{background:rgba(255,255,255,.05);border-color:rgba(160,190,235,.22);color:#e7eefb}
.auth-card .note.gold{background:rgba(46,180,95,.16);border-color:rgba(46,180,95,.46);color:#c6f3d5}
.auth-card .note.amber{background:rgba(245,182,64,.15);border-color:rgba(245,182,64,.46);color:#ffe4b0}
.auth-card .code-banner{background:rgba(46,180,95,.12);border:1px dashed rgba(46,180,95,.5);color:#c9f1d8}
.auth-card .code-banner b{color:#ffffff}
.auth-card .auth-help{background:rgba(255,255,255,.05);border:1px solid rgba(160,190,235,.18);color:rgba(214,226,245,.82)}
.auth-card .auth-help b{color:#eaf2ff}
.auth-card .auth-help a{color:#43e08a}
.auth-card :focus-visible{outline-color:#7db5ff}

.auth-card .captcha-box{margin:2px 0 16px;min-height:78px}
.auth-card .captcha-fallback{font-size:12.5px;color:rgba(214,226,245,.72);padding:9px 11px;border:1px dashed rgba(160,190,235,.32);border-radius:8px}
.auth-aside{justify-content:flex-start}
.auth-aside .brand-lg{margin-bottom:18px}
.auth-aside .foot{position:absolute;left:58px;right:58px;bottom:30px;margin-top:0}
/* Desktop split: keep the branding panel (and its bottom footer) fully in view.
   Pin the layout to the viewport height and let ONLY the form column scroll if
   the login card is taller than the screen, so the page itself never scrolls. */
@media (min-width:901px){
  .auth-wrap{height:100vh;grid-template-rows:100vh}
  .auth-main{min-height:0;overflow-y:auto}
  .auth-main>.auth-card{margin-block:auto}
}
.auth-logo{height:54px;width:auto;max-width:80%;display:block}
.auth-tagline{margin-top:auto;margin-bottom:auto;max-width:44ch}
.auth-tagline h2{font-size:31px;font-weight:800;color:#f3ecd6;letter-spacing:-.3px;line-height:1.2}
.auth-tagline p{margin-top:16px;font-size:15px;line-height:1.65;color:rgba(234,226,208,.82)}
.topbar-logo{height:30px;width:auto;display:block}

/* ---- Customer-facing per-field review remarks (portal, light theme) ---- */
.field-review{margin-top:7px;font-size:12.5px;line-height:1.5;border-radius:8px;padding:8px 11px;border:1px solid}
.field-review.rej{background:var(--red-50);border-color:var(--red-100);color:var(--red-700)}
.field-review.questioned{background:var(--orange-50);border-color:var(--orange-100);color:var(--orange-700)}
.field-review.rfi{background:var(--amber-50);border-color:var(--amber-100);color:var(--amber-700)}
.field-review.amend{background:var(--blue-50);border-color:var(--blue-100);color:var(--blue-700)}
.field.flagged-rej input,.field.flagged-rej select,.field.flagged-rej textarea{border-color:var(--red-500);box-shadow:0 0 0 3px rgba(228,86,74,.12)}
.field.flagged-q input,.field.flagged-q select,.field.flagged-q textarea{border-color:var(--orange-500);box-shadow:0 0 0 3px rgba(244,118,27,.15)}
.field.flagged-rfi input,.field.flagged-rfi select,.field.flagged-rfi textarea{border-color:var(--amber-500);box-shadow:0 0 0 3px rgba(240,160,32,.14)}
.field-ok{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:1px 9px 1px 6px;font-size:11px;font-weight:700;letter-spacing:.2px;color:var(--green-700);background:var(--green-50);border:1px solid var(--green-100);border-radius:999px;vertical-align:middle}
.field-ok svg{width:13px;height:13px;stroke-width:2.6}

/* ---- Documents step: sections, per-person ID/PoA, file chips ---- */
.doc-sec{margin:20px 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--slate-500);font-weight:700}
.doc-file-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:5px}
.person-doc{border:1px solid var(--slate-200);border-radius:12px;padding:14px 16px;margin-bottom:12px;background:var(--white)}
.person-doc-head{display:flex;align-items:baseline;gap:10px;margin-bottom:4px;flex-wrap:wrap}
.person-doc-grp{padding:12px 14px;margin-top:12px;border:1px solid var(--slate-200);border-radius:10px;background:var(--slate-50)}
.pdg-label{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:600;color:var(--ink-700);margin-bottom:7px}
/* ---- Per-field required highlighting on submit ---- */
.field.field-error > .lbl{color:var(--orange-700)}
.field.field-error input,.field.field-error select,.field.field-error textarea,.field.field-error .yn,.field.field-error .checks{border-color:var(--orange-500)!important;box-shadow:0 0 0 3px rgba(244,118,27,.15)}
.field.field-error .check-box-mark{outline:2px solid var(--orange-500);border-radius:5px}
/* Missing required document — pulses an orange ring at the SAME 1.5s frequency as
   incomplete form fields (was a static outline), for a consistent "incomplete" cue. */
.doc-row.doc-missing,.person-doc-grp.doc-missing{position:relative;border-radius:10px}
.doc-row.doc-missing::after,.person-doc-grp.doc-missing::after{content:"";position:absolute;inset:-3px;border-radius:12px;pointer-events:none;border:2px solid var(--orange-500);box-shadow:0 0 13px 1px rgba(244,118,27,.62),inset 0 0 7px rgba(244,118,27,.22);will-change:opacity;animation:fieldShine 1.5s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){ .doc-row.doc-missing::after,.person-doc-grp.doc-missing::after{animation:none;opacity:.9} }
.field-error-msg{color:var(--orange-700);font-size:12px;font-weight:600;margin-top:5px;display:flex;gap:5px;align-items:center}
/* ---- Custom date-of-birth picker (9-year grid, 18+ min) ---- */
.dob{position:relative;display:inline-flex;align-items:center;max-width:100%}
.dob-pop{position:absolute;z-index:60;top:calc(100% + 4px);left:0;background:var(--white);border:1px solid var(--slate-200);border-radius:12px;box-shadow:var(--shadow-lg);padding:10px;width:236px}
.dob-head{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.dob-nav{flex:none;width:30px;height:30px;border:1px solid var(--slate-200);background:var(--white);border-radius:8px;cursor:pointer;font-size:16px;line-height:1;color:var(--slate-600);display:flex;align-items:center;justify-content:center}
.dob-nav:hover{background:var(--slate-50);border-color:var(--slate-300)}
.dob-nav.ghost{visibility:hidden;border:0;background:transparent}
.dob-title{flex:1;text-align:center;background:transparent;border:0;font-weight:700;font-size:13px;color:var(--slate-800);cursor:pointer;padding:5px 6px;border-radius:8px}
.dob-title:hover{background:var(--slate-50)}
.dob-grid{display:grid;gap:5px}
.dob-grid.y,.dob-grid.m{grid-template-columns:repeat(3,1fr)}
.dob-grid.d{grid-template-columns:repeat(7,1fr);gap:4px}
.dob-cell{padding:8px 0;text-align:center;border:1px solid transparent;background:var(--slate-50);border-radius:8px;cursor:pointer;font-size:13px;color:var(--slate-700);font-family:inherit}
.dob-cell:hover{background:#eef3ff;border-color:#c7d6f5}
.dob-cell.sel{background:var(--brand-grad);color:#fff;font-weight:700;border-color:transparent}
.dob-cell.dis{opacity:.32;cursor:not-allowed;background:transparent;color:var(--slate-400)}
.dob-cal{flex:none;width:40px;height:44px;margin-left:6px;border:1px solid var(--slate-200);background:var(--white);border-radius:8px;cursor:pointer;color:var(--slate-600);display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.dob-cal:hover{background:var(--slate-50);border-color:var(--slate-300)}
.dob input{flex:0 0 auto;width:150px;min-width:0;vertical-align:middle}   /* shorter field so the calendar button sits right beside it, not far right */
/* ---- Collapsible, repeatable bank accounts ---- */
.bankacc{overflow:hidden}
.bankacc-head{display:flex;align-items:center;gap:10px;padding:13px 18px;cursor:pointer;user-select:none}
.bankacc-head:hover{background:var(--slate-50)}
.bankacc-ic{color:var(--green-600);display:inline-flex;flex:none}
.bankacc-tt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.bankacc-tt b{font-size:14px;color:var(--ink-900)}
.bankacc-chev{color:var(--slate-500);transition:transform .18s ease;display:inline-flex;flex:none}
.bankacc.open .bankacc-chev{transform:rotate(180deg)}
.bankacc-body{display:none;padding:6px 18px 18px;border-top:1px solid var(--slate-200)}
.bankacc.open .bankacc-body{display:block}
.bankacc.has-missing .bankacc-head{box-shadow:inset 4px 0 0 var(--orange-500)}
.bankacc.has-missing:not(.open) .bankacc-head::after{content:"Incomplete";font-size:11px;font-weight:700;color:var(--orange-700);background:var(--orange-50);padding:2px 8px;border-radius:999px;margin-left:8px}
/* ---- Password show/hide (eye) toggle — pinned right, transparent, visible ---- */
.pw-wrap{position:relative;display:block}
.pw-wrap > input{padding-right:46px}
.pw-toggle{position:absolute;top:0;right:0;height:100%;width:42px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;margin:0;padding:0;cursor:pointer;color:var(--slate-500);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.pw-toggle:hover{color:var(--ink-900)}
.pw-toggle:focus-visible{outline:2px solid var(--green-500);outline-offset:-2px}
.pw-toggle svg{display:block;pointer-events:none}
/* On the dark login/register card the icon must be light to stay visible */
.auth-card .pw-toggle{color:rgba(222,234,252,.82)}
.auth-card .pw-toggle:hover{color:#ffffff;background:rgba(255,255,255,.06)}
/* Password requirements helper text (also lost in the earlier truncation) */
.pw-req{font-size:12px;color:var(--slate-500);margin:-4px 0 14px;line-height:1.55}
.auth-card .pw-req{color:rgba(208,221,242,.72)}

/* =====================================================================
   SPACE THEME — extended to the logged-in SHELL + modals so the whole
   portal matches the login screen: dark starfield + frosted-glass
   surfaces with high-contrast light text on every element.
   Strategy: remap the neutral design tokens to dark values within
   .shell / .modal so the existing (light-theme) component rules above are
   REUSED but resolve dark; then fix the few spots that use literal light
   backgrounds or dark accents. The auth screens (already dark) are
   untouched because none of these selectors match them.
   ===================================================================== */
.shell, .modal{
  --white:rgba(17,27,52,.92);
  --slate-50:rgba(150,185,235,.06);
  --slate-100:rgba(150,185,235,.10);
  --slate-200:rgba(150,185,235,.18);
  --slate-300:rgba(150,185,235,.30);
  --slate-400:rgba(202,216,244,.60);
  --slate-500:rgba(208,221,242,.74);
  --slate-600:rgba(218,230,248,.86);
  --slate-700:rgba(230,239,252,.93);
  --slate-800:#eef4ff;
  --ink-900:#f4f8ff; --ink-800:#e9f1ff; --ink-700:#dde8fb; --ink-600:#cfddf6; --ink-500:#c2d3f0; --ink-400:#a9c0e8;
}

/* ---- Background: DRIFTING starfield + nebula glow + drifting clouds ----
   Mirrors the login / home screen so the whole portal (dashboard AND officer
   console) shares the same MOVING backdrop. The starfield pans slowly right
   (::before); the nebula glow sits over it (::after); the cloud sprites are
   injected into the DOM (.shell > .clouds) and drift across, same as auth. All
   three are position:fixed so they pan behind the content as the page scrolls. */
.shell{position:relative;isolation:isolate;color:#dfe9fb;background:#05080f}
/* Drift is done with transform (GPU / compositor) rather than animating
   background-position (which runs on the main thread and visibly stalled while
   the user was typing). width:200% + translateX(-50%) pans exactly one tile. */
.shell::before{content:"";position:fixed;top:0;left:0;width:200%;height:100%;z-index:0;pointer-events:none;
  background:#05080f url("../img/space-stars-tile.jpg") repeat-x;background-size:50% 100%;
  animation:driftRight 160s linear infinite;will-change:transform}
.shell::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1200px 760px at 10% -10%,rgba(36,120,96,.22),transparent 60%),
    radial-gradient(1100px 820px at 102% 2%,rgba(28,92,200,.20),transparent 55%),
    radial-gradient(900px 720px at 50% 118%,rgba(70,46,140,.18),transparent 60%)}
/* Drifting cloud field (sprites injected by renderShell), pinned to the viewport
   and clipped so the sprites never create a scrollbar as they wander across. */
.shell > .clouds{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.shell > .content,.shell > .legalbar{position:relative;z-index:2}
@keyframes starPan{from{background-position:0 0}to{background-position:100vw 0}}

/* ---- Top bar (dark glass) ---- */
.topbar{background:rgba(34,58,112,.82);-webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1);
  border-bottom:1px solid rgba(150,185,235,.26);color:#f3f8ff;box-shadow:0 1px 0 rgba(120,170,255,.12)}
.topbar .brand .nm{color:#fff}
.topbar .env{color:#bfe0ff;background:rgba(120,180,255,.14);border-color:rgba(150,185,235,.34)}
.topbar .tnav a{color:rgba(214,226,247,.78)}
.topbar .tnav a:hover{color:#fff;background:rgba(255,255,255,.09)}
.topbar .tnav a.active{color:#d2e6ff;background:rgba(120,180,255,.18)}
.topbar .user:hover{background:rgba(255,255,255,.09)}
.topbar .user .who b{color:#fff}
.topbar .user .who span{color:rgba(208,221,242,.66)}

/* ---- Cards / glass surfaces ---- */
.shell .card{background:rgba(16,26,52,.86);-webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%);
  border:1px solid rgba(150,185,235,.16);box-shadow:0 18px 46px rgba(0,0,0,.46)}
.shell .card-head{border-bottom-color:rgba(150,185,235,.14)}
.shell .stat{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-color:rgba(150,185,235,.16)}
.shell .doc-row,.shell .person-doc{background:rgba(255,255,255,.05);border-color:rgba(150,185,235,.16)}
.shell .acc{background:rgba(255,255,255,.04);border-color:rgba(150,185,235,.16)}
.shell .step .ix{background:rgba(255,255,255,.07);color:#cfddf6;border-color:rgba(150,185,235,.34)}
.shell .score-ring .inner{background:rgba(11,19,40,.96)}
.shell .pipeline .pl-dot{background:rgba(255,255,255,.06)}

/* ---- Inputs (match the login's glass inputs) ---- */
.shell input[type=text],.shell input[type=email],.shell input[type=password],.shell input[type=number],
.shell input[type=date],.shell input[type=tel],.shell input[type=url],.shell select,.shell textarea,
.modal input,.modal select,.modal textarea{
  background-color:rgba(255,255,255,.06);border:1.5px solid rgba(150,185,235,.26);color:#eaf2ff}
.shell input::placeholder,.shell textarea::placeholder,.modal input::placeholder,.modal textarea::placeholder{color:rgba(214,226,247,.46)}
.shell input:focus,.shell select:focus,.shell textarea:focus,.modal input:focus,.modal select:focus,.modal textarea:focus{
  border-color:rgba(120,180,255,.78);background-color:rgba(255,255,255,.10);box-shadow:0 0 0 3px rgba(90,150,240,.22)}
.shell select,.modal select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5L6 7.5L9 4.5' stroke='%23bcd2f4' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 13px center;background-size:12px 12px}
.shell input:disabled,.shell select:disabled,.shell textarea:disabled{background-color:rgba(255,255,255,.03);color:rgba(208,221,242,.5)}

/* ---- Buttons readable on dark ---- */
.shell .btn,.modal .btn{border-color:rgba(150,185,235,.26)}
.shell .btn-primary,.modal .btn-primary{background:#1d3c70;border-color:#2c5290;color:#fff}
.shell .btn-primary:hover,.modal .btn-primary:hover{background:#244a86}
.shell .btn-ghost,.modal .btn-ghost{border-color:transparent;color:rgba(218,230,248,.86)}
.shell .btn-ghost:hover,.modal .btn-ghost:hover{background:rgba(255,255,255,.08)}

/* ---- Links ---- */
.shell a,.shell .breadcrumb a,.modal a{color:#8cc0ff}

/* ---- Tables ---- */
.shell .tbl tbody tr.click:hover,.modal .tbl tbody tr.click:hover{background:rgba(120,180,255,.12)}

/* ---- Sidenav / stepper / tabs / pipeline accents ---- */
.shell .sidenav a.active{background:rgba(120,180,255,.16);color:#fff;border:1px solid rgba(120,180,255,.32)}
.shell .step.active{background:rgba(46,180,95,.16);color:#bff0cf}
.shell .tabs button.active{color:#86e3a6;border-bottom-color:#2eb45f}
.shell .pipeline .pl-step.active .pl-dot{color:#86e3a6;box-shadow:0 0 0 4px rgba(46,180,95,.18)}
.shell .doc-file,.shell .bankacc-ic,.shell .field-ok{color:#86e3a6}
.shell .b-req{background:transparent;color:#8af0ad;border-color:#46d27c}
.shell .doc-req{color:#ff8f84}

/* ---- Officer review-field status heads → dark tints ---- */
.shell .review-field.s-approved{border-color:rgba(46,180,95,.34)}
.shell .review-field.s-approved .rf-head{background:rgba(46,180,95,.12)}
.shell .review-field.s-rejected{border-color:rgba(228,86,74,.34)}
.shell .review-field.s-rejected .rf-head{background:rgba(228,86,74,.12)}
.shell .review-field.s-rfi{border-color:rgba(240,160,32,.34)}
.shell .review-field.s-rfi .rf-head{background:rgba(240,160,32,.12)}
.shell .review-field.s-questioned{border-color:rgba(244,118,27,.38)}
.shell .review-field.s-questioned .rf-head{background:rgba(244,118,27,.13)}

/* ---- Callouts (notes / flags / field-review remarks) → dark tints ---- */
.shell .note,.modal .note{background:rgba(120,180,255,.12);border-color:rgba(120,180,255,.30);color:#cfe3ff}
.shell .note.amber,.modal .note.amber{background:rgba(240,160,32,.14);border-color:rgba(240,160,32,.32);color:#ffd9a0}
.shell .note.gold,.modal .note.gold{background:rgba(38,150,74,.42);border-color:rgba(46,180,95,.6);color:#e1f8e9}
.shell .note.red,.modal .note.red{background:rgba(228,86,74,.16);border-color:rgba(228,86,74,.40);color:#ffc9c2}
.shell .flag.hit{background:rgba(228,86,74,.13);border-color:rgba(228,86,74,.32)}
.shell .flag.warn{background:rgba(240,160,32,.13);border-color:rgba(240,160,32,.30)}
.shell .flag.info{background:rgba(120,180,255,.12);border-color:rgba(120,180,255,.28)}
.shell .flag.ok{background:rgba(46,180,95,.13);border-color:rgba(46,180,95,.30)}
.shell .field-review.rej{background:rgba(228,86,74,.14);border-color:rgba(228,86,74,.32);color:#ffc9c2}
.shell .field-review.questioned{background:rgba(244,118,27,.15);border-color:rgba(244,118,27,.34);color:#ffcaa1}
.shell .field-review.rfi{background:rgba(240,160,32,.14);border-color:rgba(240,160,32,.32);color:#ffe0ac}
.shell .field-review.amend{background:rgba(120,180,255,.13);border-color:rgba(120,180,255,.30);color:#cfe3ff}
.shell .field-ok{color:#bff0cf;background:rgba(46,180,95,.16);border-color:rgba(46,180,95,.34)}
.shell .field.field-error > .lbl,.shell .field-error-msg{color:#ffb37a}
.shell.bright .field.field-error > .lbl,.shell.bright .field-error-msg{color:var(--orange-700)}

/* ---- DOB picker / pill-tabs / empty-state / doc icons / misc ---- */
.shell .dob-cell:hover{background:rgba(120,180,255,.16);border-color:rgba(120,180,255,.40)}
.shell .dob-cell.sel{color:#fff}
.shell .pill-tabs button.active{background:rgba(255,255,255,.14);color:#eaf2ff;box-shadow:none}
.shell .empty-state .ic,.shell .doc-row.required .doc-ic{background:rgba(46,180,95,.15);color:#86e3a6}
.shell .bankacc.has-missing:not(.open) .bankacc-head::after{background:rgba(244,118,27,.18);color:#ffb37a}
.shell.bright .bankacc.has-missing:not(.open) .bankacc-head::after{background:var(--orange-50);color:var(--orange-700)}
.shell hr.sep,.modal hr.sep{border-top-color:rgba(150,185,235,.18)}

/* ---- Modals (rendered in <body>, outside .shell) ---- */
.modal{background:rgba(16,26,52,.97);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  border:1px solid rgba(150,185,235,.18);color:#dfe9fb}
.modal-head{border-bottom-color:rgba(150,185,235,.16)}
.modal-foot{border-top-color:rgba(150,185,235,.16)}
.modal .x-close{color:rgba(202,216,244,.7)}
.modal .x-close:hover{color:#fff}
.modal .kv dd{color:#eaf2ff}
/* Bright mode: modals (Account pop-up, confirm dialogs) follow the box colours —
   light surface with dark text, mirroring .shell.bright .card. Tagged in core.js. */
.modal.bright{
  color:#17223a;
  --white:#ffffff;
  --slate-50:rgba(18,40,78,.05); --slate-100:rgba(18,40,78,.08); --slate-200:rgba(18,40,78,.14);
  --slate-300:rgba(18,40,78,.22); --slate-400:#5b6680; --slate-500:#47526c; --slate-600:#3b4760;
  --slate-700:#28344e; --slate-800:#16213a;
  --ink-900:#0d1626; --ink-800:#18233c; --ink-700:#26334e; --ink-600:#3a4660; --ink-500:#4c5872; --ink-400:#647088;
  background:#ffffff;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:rgba(18,40,78,.14)}
.modal.bright .modal-head{border-bottom-color:rgba(18,40,78,.12)}
.modal.bright .modal-head h3{color:#0d1626}
.modal.bright .modal-foot{border-top-color:rgba(18,40,78,.12);background:rgba(18,40,78,.04)}
.modal.bright .x-close{color:#5b6680}
.modal.bright .x-close:hover{color:#0d1626;background:rgba(18,40,78,.06)}
.modal.bright .kv dd{color:#16213a}
.modal.bright .muted{color:#5b6680}
.modal.bright a{color:#0b5cc0}
.modal.bright .btn{border-color:rgba(18,40,78,.20)}
.modal.bright .btn-ghost{color:#3b4760;border-color:transparent}
.modal.bright .btn-ghost:hover{background:rgba(18,40,78,.06)}
.modal.bright input,.modal.bright select,.modal.bright textarea{background-color:#fff;color:#16213a;border-color:rgba(18,40,78,.22)}
.modal.bright input::placeholder,.modal.bright textarea::placeholder{color:#69748a}
.modal.bright select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5L6 7.5L9 4.5' stroke='%2364708a' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>")}
.modal.bright select option{background-color:#ffffff;color:#16213a}
.modal.bright select option:checked{background-color:#d8e6fb;color:#0d1626}
.modal.bright .note{background:rgba(11,92,192,.10);border-color:rgba(11,92,192,.26);color:#0b4ea0}
.modal.bright .note.amber{background:rgba(176,110,8,.12);border-color:rgba(176,110,8,.3);color:#8a5806}
.modal.bright .note.gold{background:rgba(15,122,61,.12);border-color:rgba(15,122,61,.3);color:#0f6a30}
.modal.bright hr.sep{border-top-color:rgba(18,40,78,.14)}
/* Wizard step in error state (incomplete on submit) — keep the indicator dark-tinted */
.shell .step.error .ix{background:rgba(228,86,74,.18);color:#ff9d92;border-color:rgba(228,86,74,.5)}
.shell .step.error{color:#ffc9c2}

/* =====================================================================
   BACKGROUND BRIGHTNESS MODES (header toggle: Dim / Bright)
   Dim   = the default dark "space" backdrop (current look).
   Bright = a daytime blue-sky version (brighter, bluer) with the white
            clouds made more visible. Only the BACKDROP changes — the
            frosted-glass panels and light text are identical in both, so
            contrast is preserved either way.
   ===================================================================== */

/* Header segmented toggle — the two labels hold FIXED, equal-width positions;
   only the highlight (.thumb) slides between them left<->right. */
.skin-toggle{position:relative;display:inline-flex;align-items:center;flex:0 0 auto;background:rgba(255,255,255,.07);
  border:1px solid rgba(150,185,235,.22);border-radius:999px;padding:2px;margin-right:8px}
/* sliding highlight — travels one segment-width to the right in the .p1 state */
.skin-toggle .thumb{position:absolute;top:2px;bottom:2px;left:2px;width:calc(50% - 2px);border-radius:999px;
  background:rgba(120,180,255,.30);box-shadow:0 1px 2px rgba(0,0,0,.25);pointer-events:none;z-index:0;
  transform:translateX(0);transition:transform .28s cubic-bezier(.4,0,.2,1);will-change:transform}
.skin-toggle.p1 .thumb{transform:translateX(100%)}
.skin-toggle button{position:relative;z-index:1;flex:0 0 auto;width:66px;text-align:center;white-space:nowrap;
  border:none;background:none;color:rgba(214,226,247,.82);font-family:inherit;font-size:12px;
  font-weight:700;letter-spacing:.2px;padding:5px 8px;border-radius:999px;cursor:pointer;line-height:1.1;
  transition:color .28s ease}
.skin-toggle button:hover{color:#fff}
.skin-toggle button.active{color:#fff}
@media (prefers-reduced-motion:reduce){ .skin-toggle .thumb{transition:none} }
.lang-toggle button{width:54px;font-size:12.5px}
.lang-float{position:absolute;top:16px;right:18px;z-index:40}
.lang-float .skin-toggle{margin-right:0;background:rgba(255,255,255,.10);border-color:rgba(160,190,235,.3)}

/* Bright mode — brighten the SAME dim scene by layering a richer, brighter
   nebula image (space-bg.jpg) over it with a SCREEN blend (additive light), so
   the blue nebula clouds and stars glow brighter — no flat colour wash. The
   drifting starfield (::before) and the drifting clouds (.clouds) are kept; only
   the nebula layer (::after) is swapped for the brighter image. Tune the
   `opacity` below to make Bright brighter (higher) or dimmer (lower). */
.shell.bright::after{
  background-image:url("../img/space-bg.jpg");
  background-size:cover;background-position:center center;background-repeat:no-repeat;
  opacity:.92;mix-blend-mode:screen;filter:saturate(1.14) brightness(1.06);
  /* The bright nebula/stars used to sit still (fixed attachment). Give them a very
     slow, GPU-composited drift — much slower than the 160s starfield. The 1.06 scale
     leaves margin so the translate never reveals the layer edges. */
  will-change:transform;animation:brightStarDrift 300s ease-in-out infinite}
@keyframes brightStarDrift{0%,100%{transform:scale(1.06) translate(-1.4%,-0.6%)}50%{transform:scale(1.06) translate(1.4%,0.6%)}}
@media (prefers-reduced-motion: reduce){.shell.bright::after{animation:none;transform:scale(1.06)}}

/* ---------------------------------------------------------------------------
   BRIGHT MODE = Dim's dark starfield + a brighter nebula, PLUS white / frosted
   surfaces. Text colour follows the BACKGROUND, not the mode:
     - On the SKY (breadcrumb, page title, side-nav, tabs, on-sky flags/notes)
       => LIGHT text — inherits the Dim theme untouched, so it stays legible on
       the dark starfield.
     - On WHITE surfaces (cards, stats, doc rows, top bar, footer, inputs)
       => DARK text.
   No text-shadows anywhere.
   --------------------------------------------------------------------------- */
/* On-sky chrome — breadcrumb, page title, side-nav, tabs and the on-sky flags/
   notes — sits on the DARK starfield even in Bright mode. It therefore KEEPS the
   Dim theme's LIGHT tokens and light text (deliberately NO .shell.bright token
   or colour override here). Only the white cards, bars and inputs below flip to
   dark text. This is what keeps the title, breadcrumb, tabs and the sanctions
   banner legible on the dark sky. */

/* Top bar & footer: translucent white tint, light enough for DARK text. */
.shell.bright .topbar{background:rgba(255,255,255,.80);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:rgba(18,45,90,.16);color:#1a2540}
.shell.bright .topbar .brand .nm{color:#101b30}
.shell.bright .topbar .tnav a{color:#2a3550}
.shell.bright .topbar .tnav a:hover{color:#0d1626;background:rgba(18,40,78,.07)}
.shell.bright .topbar .tnav a.active{color:#0b3e86;background:rgba(120,180,255,.24)}
.shell.bright .topbar .user .who b{color:#101b30}
.shell.bright .topbar .user .who span{color:#46506a}
.shell.bright .topbar .user:hover{background:rgba(18,40,78,.07)}
.shell.bright .skin-toggle{background:rgba(18,40,78,.06);border-color:rgba(18,45,90,.2)}
.shell.bright .skin-toggle .thumb{background:rgba(120,180,255,.32)}
.shell.bright .skin-toggle button{color:#2a3550}
.shell.bright .skin-toggle button:hover{color:#0d1626}
.shell.bright .skin-toggle button.active{color:#0b3e86}
.shell.bright .legalbar{background:rgba(255,255,255,.76);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);color:#2a3550;border-top:1px solid rgba(18,45,90,.12)}
.shell.bright .legalbar a{color:#0b4ea0}

/* Cards & boxes: frosted WHITE glass; tokens flip text DARK inside them. */
.shell.bright .card,.shell.bright .stat,.shell.bright .doc-row,.shell.bright .person-doc,
.shell.bright .acc,.shell.bright .review-field,.shell.bright .dob-pop{
  color:#16213a;            /* dark base text INSIDE the white boxes (fixes the light ref no.) */
  /* Cards are near-solid white so text isn't fighting the dark starfield behind them. */
  --white:rgba(255,255,255,.96);
  --slate-50:rgba(18,40,78,.06); --slate-100:rgba(18,40,78,.10); --slate-200:rgba(18,40,78,.20);
  --slate-300:rgba(18,40,78,.30); --slate-400:#4a5570; --slate-500:#3a4560; --slate-600:#323d56;
  --slate-700:#28344e; --slate-800:#16213a;
  --ink-900:#0d1626; --ink-800:#18233c; --ink-700:#26334e; --ink-600:#3a4660; --ink-500:#454f68; --ink-400:#535d76;
  --muted:#454f68;          /* was undefined -> weak #9aa; define a readable dark grey for light mode */
  text-shadow:none}
.shell.bright .card{background:rgba(255,255,255,.96)}
.shell.bright .stat{background:rgba(255,255,255,.96)}
.shell.bright .doc-row,.shell.bright .person-doc{background:rgba(255,255,255,.95)}
.shell.bright .acc{background:rgba(255,255,255,.97)}   /* text-heavy reading panel — more solid so words stay sharp */
.shell.bright .card-head{border-bottom-color:rgba(18,40,78,.16)}
.shell.bright input[type=text],.shell.bright input[type=email],.shell.bright input[type=password],
.shell.bright input[type=number],.shell.bright input[type=date],.shell.bright input[type=tel],
.shell.bright input[type=url],.shell.bright select,.shell.bright textarea{background-color:rgba(255,255,255,.92);color:#16213a;border-color:rgba(18,40,78,.30)}
.shell.bright input::placeholder,.shell.bright textarea::placeholder{color:#5a6480}
.shell.bright .btn{border-color:rgba(18,40,78,.20)}
.shell.bright .btn-ghost{color:#3b4760}
.shell.bright .card a{color:#0b5cc0}
.shell.bright .score-ring .inner{background:rgba(255,255,255,.92)}

/* ============================ Searchable combobox (country / currency) ====== */
.combo{position:relative;width:100%}
.combo-field{display:flex;align-items:center;gap:6px;width:100%;min-height:44px;padding:9px 11px;
  border:1.5px solid var(--slate-300);border-radius:var(--radius-sm);background:var(--white);
  color:var(--ink-800);cursor:pointer;transition:.14s}
.combo:not(.locked) .combo-field:hover{border-color:var(--slate-400)}
.combo.open .combo-field{border-color:var(--green-500);box-shadow:0 0 0 3px rgba(26,166,75,.16)}
.combo.locked .combo-field{background:var(--slate-100);color:var(--slate-500);cursor:default}
.combo-val{flex:1;min-width:0;display:flex;align-items:center;gap:8px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.combo-val.ph{color:var(--slate-400)}
.combo-input{flex:1;min-width:0;border:none!important;background:transparent!important;box-shadow:none!important;
  padding:0!important;height:auto;width:auto;font-size:14px;color:inherit;font-family:inherit}
.combo-input:focus{outline:none!important;box-shadow:none!important}
.combo-caret{flex:none;color:var(--slate-500);display:inline-flex;transition:transform .18s ease}
.combo.open .combo-caret{transform:rotate(180deg)}
.combo-pop{position:fixed;z-index:9500;background:var(--white);border:1px solid var(--slate-200);
  border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;max-height:300px;overflow:auto}
.combo-list{display:flex;flex-direction:column;gap:1px}
.combo-opt{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;cursor:pointer;
  font-size:13.5px;color:var(--ink-800);white-space:nowrap}
.combo-opt:hover,.combo-opt.active{background:#eef3ff}
.combo-opt.sel{background:var(--green-50);font-weight:600}
.combo-opt.active.sel{background:#dff3e6}
.combo-empty{padding:12px 10px;color:var(--slate-500);font-size:13px;text-align:center}
/* currency rows: flag · code · name (flag uses an emoji-flag font where available;
   on platforms without one — e.g. Windows — it degrades to the 2-letter code). */
.cur-flag{flex:none;min-width:1.6em;text-align:center;font-size:15px;line-height:1;
  font-family:"Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.cur-code{flex:none;font-weight:700;min-width:3.3em}
.cur-name{color:var(--slate-500);overflow:hidden;text-overflow:ellipsis}
.combo-val .cur-name{color:var(--slate-600)}
/* Dark shell (glass) */
.shell .combo-field{background-color:rgba(255,255,255,.06);border-color:rgba(150,185,235,.26);color:#eaf2ff}
.shell .combo:not(.locked) .combo-field:hover{border-color:rgba(150,185,235,.45)}
.shell .combo.open .combo-field{border-color:rgba(120,180,255,.78);background-color:rgba(255,255,255,.10);box-shadow:0 0 0 3px rgba(90,150,240,.22)}
.shell .combo.locked .combo-field{background-color:rgba(255,255,255,.03);color:rgba(208,221,242,.5)}
.shell .combo-val.ph{color:rgba(214,226,247,.46)}
.shell .combo-caret{color:rgba(214,226,247,.6)}
.shell .combo-pop{background:rgba(16,26,52,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-color:rgba(150,185,235,.22);box-shadow:0 18px 50px rgba(0,0,0,.5)}
.shell .combo-opt{color:#dfe9fb}
.shell .combo-opt:hover,.shell .combo-opt.active{background:rgba(120,180,255,.16)}
.shell .combo-opt.sel{background:rgba(46,180,95,.18)}
.shell .combo-opt.active.sel{background:rgba(46,180,95,.26)}
.shell .cur-name{color:rgba(214,226,247,.55)}
.shell .combo-val .cur-name{color:rgba(214,226,247,.72)}
.shell .combo-empty{color:rgba(214,226,247,.6)}
/* Bright shell (white glass) */
.shell.bright .combo-field{background-color:rgba(255,255,255,.62);color:#16213a;border-color:rgba(18,40,78,.22)}
.shell.bright .combo.open .combo-field{border-color:var(--green-500);box-shadow:0 0 0 3px rgba(26,166,75,.16)}
.shell.bright .combo-pop{background:rgba(255,255,255,.97);border-color:rgba(18,40,78,.14)}
.shell.bright .combo-opt{color:#16213a}
.shell.bright .combo-opt:hover,.shell.bright .combo-opt.active{background:rgba(18,40,78,.08)}
.shell.bright .combo-val.ph{color:#69748a}
.shell.bright .cur-name,.shell.bright .combo-val .cur-name{color:#47526c}
/* Phone number field: [flag + dial-code selector] [ number ] */
.phone-row{display:flex;gap:8px;align-items:stretch;width:100%}
.phone-row .combo.phone-dial{flex:0 0 auto;width:138px}
.phone-row .phone-num{flex:1 1 auto;min-width:0}
.phone-dial .combo-val{gap:6px}
.phone-dial .combo-val .cur-name{display:none}      /* keep the closed selector compact (flag + code only) */
.phone-dial .cur-code{min-width:0}
@media (max-width:560px){ .phone-row .combo.phone-dial{width:118px} }

/* ============================ Compliance WhatsApp (under completion bar) ==== */
.wa-help{margin-top:14px;display:flex;align-items:flex-start;gap:9px;padding:11px 12px;
  background:var(--slate-50);border:1px solid var(--slate-200);border-radius:12px;font-size:12.5px;line-height:1.45;color:var(--slate-600)}
.wa-help .wa{flex:none;line-height:0;margin-top:1px}
.wa-help .wa-tx b{display:block;color:var(--slate-700);font-weight:700;font-size:12.5px;margin-bottom:2px}
.wa-help .wa-label{font-weight:600}
.wa-help .wa-link{font-weight:700;color:var(--green-700);word-break:break-word}
.wa-help .wa-link:hover{text-decoration:underline}
.shell .wa-help{background:rgba(37,211,102,.10);border-color:rgba(37,211,102,.30);color:rgba(218,230,248,.82)}
.shell .wa-help .wa-tx b{color:#eaf2ff}
.shell .wa-help{color:#e8f0ff}
.shell .wa-help .wa-label{color:#f2f7ff;font-weight:700}
.shell .wa-help .wa-link{color:#6ef2a8}
/* Bright skin: the WhatsApp help sat as near-white text on a light panel — force dark, high-contrast text */
.shell.bright .wa-help{background:rgba(37,211,102,.14);border-color:rgba(37,211,102,.5);color:#243447}
.shell.bright .wa-help .wa-tx b{color:#123423}

/* =====================================================================
   Compliance Glossary — bright-orange jargon terms + definition popover
   (PEP, AML/CFT, KYC, CAHRA, sanctions regimes, OECD Annex II, …)
   Injected by assets/js/glossary.js; the popover lives on <body>.
   ===================================================================== */
:root{
  --tiffany:#ff6a00;         /* bright orange */
  --tiffany-deep:#d45500;    /* readable hover / accent */
  --tiffany-box:#ff8c3f;     /* lighter orange tint */
  --tiffany-glow:rgba(255,106,0,.14);
}

/* A highlighted jargon term. cursor:help is the universal question-mark
   pointer; the SVG cursor upgrades that to an explicit "?" where supported. */
.jargon{
  color:var(--tiffany);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px dotted var(--tiffany);
  padding:0 .5px .5px;
  border-radius:3px;
  cursor:help;
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='%23ffffff' stroke='%23ff6a00' stroke-width='2'/%3E%3Ctext x='12' y='17' font-family='Arial,Helvetica,sans-serif' font-size='14' font-weight='bold' text-anchor='middle' fill='%23d45500'%3E%3F%3C/text%3E%3C/svg%3E") 12 12, help;
  transition:color .12s ease, background-color .12s ease, border-color .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.jargon:hover,
.jargon:focus-visible{
  color:var(--tiffany-deep);
  background-color:var(--tiffany-glow);
  border-bottom-color:var(--tiffany-deep);
  border-bottom-style:solid;
  outline:none;
}
.jargon:focus-visible{ box-shadow:0 0 0 2px rgba(255,106,0,.38); }
/* On the dark "shell" skin keep the term bright and legible */
.shell .jargon{ color:#ff9a4d; border-bottom-color:rgba(255,154,77,.55); }
.shell .jargon:hover,.shell .jargon:focus-visible{ color:#ffbe86; background-color:rgba(255,106,0,.24); }

/* The floating definition card */
.gloss-pop{
  position:absolute; z-index:4000; top:0; left:0;
  width:max-content; max-width:340px;
  background:var(--white); color:var(--ink-800);
  border:1px solid var(--slate-200);
  border-top:3px solid var(--tiffany);
  border-radius:12px;
  box-shadow:var(--shadow-lg);
  font-size:13px; line-height:1.55;
  opacity:0; transform:translateY(4px);
  transition:opacity .14s ease, transform .14s ease;
  pointer-events:none;
}
.gloss-pop.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
@media (max-width:520px){ .gloss-pop{ max-width:min(340px,92vw); } }

.gloss-pop .gp-head{
  display:flex; align-items:center; gap:8px;
  padding:11px 12px 9px; border-bottom:1px solid var(--slate-100);
}
.gloss-pop .gp-ic{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:21px; height:21px; border-radius:50%;
  background:var(--tiffany); color:#fff; font-weight:800; font-size:13px; line-height:1;
}
.gloss-pop .gp-term{ font-weight:700; color:var(--ink-900); font-size:13.5px; }
.gloss-pop .gp-abbr{
  font-weight:700; font-size:10.5px; letter-spacing:.4px; color:var(--tiffany-deep);
  background:var(--tiffany-glow); border-radius:5px; padding:2px 6px;
}
.gloss-pop .gp-x{
  margin-left:auto; border:none; background:none; cursor:pointer;
  font-size:19px; line-height:1; color:var(--slate-400); padding:0 2px;
}
.gloss-pop .gp-x:hover{ color:var(--ink-700); }
.gloss-pop .gp-body{ padding:10px 13px 6px; }
.gloss-pop .gp-body b{ color:var(--ink-900); font-weight:700; }
.gloss-pop .gp-body a{ color:var(--blue-600); font-weight:600; word-break:break-word; }
.gloss-pop.pinned{ box-shadow:var(--shadow-xl); }

/* Little arrow that points back at the term */
.gloss-pop::before,.gloss-pop::after{ content:""; position:absolute; left:var(--arrow-x,50%); width:0; height:0; }
.gloss-pop::after{ top:-8px; transform:translateX(-50%);
  border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:8px solid var(--white); }
.gloss-pop::before{ top:-11px; transform:translateX(-50%);
  border-left:9px solid transparent; border-right:9px solid transparent; border-bottom:9px solid var(--tiffany); }
.gloss-pop.above::after{ top:auto; bottom:-8px;
  border-bottom:none; border-top:8px solid var(--white); }
.gloss-pop.above::before{ top:auto; bottom:-11px;
  border-bottom:none; border-top:9px solid var(--slate-200); }

@media (prefers-reduced-motion: reduce){
  .jargon{ transition:none; }
  .gloss-pop{ transition:none; }
}
.shell.bright .wa-help .wa-label{color:#1b2a3a;font-weight:700}
.shell.bright .wa-help .wa-link{color:#0b7a3e}
.shell.bright .wa-help{background:rgba(37,211,102,.10);border-color:rgba(37,211,102,.30)}
.shell.bright .wa-help .wa-link{color:var(--green-700)}
/* WhatsApp help — MAXIMUM-contrast heading ("需要协助填写吗？") + label ("WhatsApp 合规部 ·") + phone link.
   Pure white on the dark background, near-black on the bright skin; bold with a subtle
   shadow so the words stand out clearly against the green panel. */
/* Heading ("Need help completing this?") + label ("WhatsApp Compliance ·") stay WHITE
   in BOTH skins (dark shadow keeps them readable on the light "bright" skin too).
   The phone number and the box background stay ORIGINAL. */
.shell .wa-help .wa-tx b,.shell .wa-help .wa-label,
.shell.bright .wa-help .wa-tx b,.shell.bright .wa-help .wa-label{color:#ffffff!important;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.shell .wa-help .wa-link{color:#6cf0a6}                       /* number — brighter green for contrast */
.shell.bright .wa-help .wa-link{color:var(--green-700)}       /* number — original green (bright skin) */

/* ============================ Bank card — pulsing "incomplete" ring ========= */
/* .bankacc has overflow:hidden, so we animate the card's OWN box-shadow (not a
   clipped ::after) — same 1.5s frequency as the field / document cues. */
.bankacc.has-missing{animation:bankMissingPulse 1.5s ease-in-out infinite}
@keyframes bankMissingPulse{
  0%,100%{box-shadow:0 0 0 2px rgba(244,118,27,.34),0 0 11px 0 rgba(244,118,27,.16)}
  50%{box-shadow:0 0 0 2px rgba(244,118,27,1),0 0 17px 2px rgba(244,118,27,.62)}
}
@media (prefers-reduced-motion: reduce){ .bankacc.has-missing{animation:none;box-shadow:0 0 0 2px var(--orange-500)} }
.shell.bright .doc-file,.shell.bright .bankacc-ic,.shell.bright .field-ok{color:#0f7a3d}
/* Flags & notes keep their Dim-theme styling. On the sky they read as glass
   callouts with LIGHT text; inside a white card the card-scope tokens above flip
   their text DARK automatically — so they stay legible in both places. (No
   .shell.bright flag/note override on purpose.) */
.shell.bright .review-field.s-approved .rf-head{background:rgba(15,122,61,.10)}
.shell.bright .review-field.s-rejected .rf-head{background:rgba(207,58,46,.10)}
.shell.bright .review-field.s-rfi .rf-head{background:rgba(176,110,8,.10)}
.shell.bright .rf-remark{background:rgba(18,40,78,.05)}
.shell.bright .empty-state .ic,.shell.bright .doc-row.required .doc-ic{background:rgba(15,122,61,.12);color:#0f7a3d}
.shell.bright .tbl tbody tr.click:hover{background:rgba(11,92,192,.07)}

/* Dropdown <option> lists — the native list was white-bg / grey-text and
   unreadable. Tint it to the theme so options are clearly visible. The
   select field itself stays dark glass in both modes, so the list is dark
   in both (a touch lighter in Bright). */
.shell select option,.modal select option,.shell option,.modal option{background-color:#0e1830;color:#eaf2ff}
.shell option:checked,.modal option:checked{background-color:#1b3c6b;color:#ffffff}
.shell select optgroup,.modal select optgroup{background-color:#0a1426;color:#bcd2f4;font-style:normal}
.shell.bright select option,.shell.bright option{background-color:#ffffff;color:#16213a}
.shell.bright option:checked{background-color:#d8e6fb;color:#0d1626}

/* =====================================================================
   "POWERED BY ARTIFICIAL INTELLIGENCE" BADGE
   Fixed bottom-right on every view, floated slightly ABOVE the footer
   (.legalbar). No box: transparent words + logo only, with strong
   contrast via a dark (or light, on Bright sky) halo. The shine sweeps
   across the WORDS (gradient-clipped text). Decorative only:
   pointer-events:none; hidden in print; below modals (9000).
   ===================================================================== */
.ai-badge{
  position:fixed; right:22px; bottom:20px; z-index:8500;
  display:inline-flex; align-items:center; gap:7px;
  opacity:1;
  pointer-events:none; user-select:none;
}
/* words: bright gradient clipped to the glyphs; a white band sweeps
   through = shine on the letters. drop-shadow (not text-shadow) hugs the
   clipped glyphs, giving a dark halo so the light text pops anywhere. */
.ai-badge-text{
  font-size:13px; font-weight:800; letter-spacing:.07em;
  white-space:nowrap; line-height:1;
  background-image:linear-gradient(110deg,#eaf3ff 0%,#eaf3ff 38%,#ffffff 50%,#eaf3ff 62%,#eaf3ff 100%);
  background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  animation:aiTextShine 2.4s linear infinite;
  filter:drop-shadow(0 1px 1px rgba(6,14,32,.90)) drop-shadow(0 0 7px rgba(6,14,32,.50)) drop-shadow(0 0 10px rgba(150,205,255,.40));
}
@keyframes aiTextShine{
  0%{background-position:130% 0}
  100%{background-position:-130% 0}
}
/* Bright-sky theme: deep navy words + blue-white glint, light halo */
body:has(.shell.bright) .ai-badge-text{
  background-image:linear-gradient(110deg,#122e60 0%,#122e60 40%,#3f97f2 50%,#122e60 60%,#122e60 100%);
  filter:drop-shadow(0 1px 1px rgba(255,255,255,.95)) drop-shadow(0 0 6px rgba(255,255,255,.55));
}
/* the shining sparkle logo (pulse + twinkles) — cycles through rainbow
   hues: hue-rotate spins the gradient (and its glow) through the wheel */
.ai-badge-logo{width:22px; height:22px; flex:0 0 auto; overflow:visible;
  animation:aiLogoRainbow 5s linear infinite}
@keyframes aiLogoRainbow{
  0%{filter:drop-shadow(0 1px 2px rgba(6,14,32,.75)) drop-shadow(0 0 8px rgba(90,230,160,.55)) hue-rotate(0deg)}
  100%{filter:drop-shadow(0 1px 2px rgba(6,14,32,.75)) drop-shadow(0 0 8px rgba(90,230,160,.55)) hue-rotate(360deg)}
}
.ai-badge-logo .spark{transform-box:fill-box; transform-origin:center}
.spark-main{animation:aiSparkPulse 2.4s ease-in-out infinite}
.spark-a{animation:aiSparkTwinkle 2.4s ease-in-out infinite .4s}
.spark-b{animation:aiSparkTwinkle 2.4s ease-in-out infinite 1.1s}
@keyframes aiSparkPulse{
  0%,100%{transform:scale(1) rotate(0deg); filter:drop-shadow(0 0 1px rgba(120,190,255,.45))}
  50%{transform:scale(1.16) rotate(8deg); filter:drop-shadow(0 0 6px rgba(140,255,190,.95))}
}
@keyframes aiSparkTwinkle{
  0%,100%{opacity:.30; transform:scale(.55)}
  50%{opacity:1; transform:scale(1.15)}
}
/* small screens: tuck in tighter */
@media (max-width:640px){
  .ai-badge{right:14px; bottom:14px; gap:6px}
  .ai-badge-text{font-size:11.5px}
  .ai-badge-logo{width:18px; height:18px}
}
/* accessibility + print */
@media (prefers-reduced-motion: reduce){
  .ai-badge-text,.ai-badge-logo,.spark-main,.spark-a,.spark-b{animation:none}
  .ai-badge-text{background-position:50% 0}
  .ai-badge-logo{filter:drop-shadow(0 1px 2px rgba(6,14,32,.75))}
}
@media print{ .ai-badge{display:none} }

/* =====================================================================
   MOBILE / RESPONSIVE LAYER — makes the whole portal usable on phones
   and small tablets while keeping the desktop layout untouched.
   Breakpoints: 900px (layout collapse), 700px (tables/pipeline),
   640px (dense phone UI), 400px (very small phones).
   Appended last so these rules win at equal specificity.
   ===================================================================== */

/* Prevent stray horizontal scroll from decorative glows / fixed sprites */
body{overflow-x:clip}

/* Dynamic viewport height (mobile URL-bar safe) */
@supports (height:100dvh){
  .auth-wrap{min-height:100dvh}
  .shell{min-height:100dvh}
}

/* ---------------- ≤900px : shell & top bar ---------------- */
@media (max-width:900px){
  /* Top bar wraps into two tidy rows: [logo · badges · toggles · avatar] / [nav] */
  .topbar{height:auto;min-height:56px;flex-wrap:wrap;gap:8px;row-gap:4px;padding:8px 12px}
  .topbar-logo{height:24px}
  .topbar .brand{margin-right:auto}
  /* the two badge wrappers (entity + role) are hidden — both also appear in the
     account menu, so nothing is lost and the bar stays one clean line */
  .topbar > span{display:none}
  .badge.role-badge{width:auto}
  .topbar .user{padding:3px 4px}
  .topbar .user .who{display:none}   /* avatar alone opens the account menu */
  .avatar{width:34px;height:34px;font-size:12px}
  .skin-toggle{margin-right:4px}
  .skin-toggle button{width:56px;font-size:11.5px;padding:5px 6px}
  .lang-toggle button{width:48px}
  /* nav drops to its own full-width, horizontally-scrollable row */
  .topbar .tnav{order:10;flex:1 0 100%;margin-left:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:2px;padding-bottom:1px}
  .topbar .tnav::-webkit-scrollbar{display:none}
  .topbar .tnav a{white-space:nowrap;flex:0 0 auto;padding:8px 12px;font-size:13px}

  .content{padding:18px 14px 56px}
  .page-head{margin-bottom:18px;gap:10px}
  .page-head h1{font-size:20px}
  .page-head .row{flex-wrap:wrap}

  /* Collapsed .layout: side panel becomes normal flow (never sticky) */
  .layout{gap:18px}
  .sidenav{position:static}
  /* Wizard journey tracker → horizontal scrollable step pills */
  .sidenav .stepper{flex-direction:row;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:8px;padding:2px 2px 6px;scrollbar-width:thin}
  .sidenav .step{flex:0 0 auto;border:1px solid var(--slate-200);border-radius:999px;padding:7px 14px 7px 8px;background:var(--white);white-space:nowrap}
  .sidenav .step::before{display:none}
  .sidenav .grp{padding:2px 2px 6px}

  .card-pad,.card-body{padding:16px}
  .card-head{padding:13px 16px;flex-wrap:wrap;row-gap:8px}
  .card-head .spacer{flex:1 0 8px}
  .stats{gap:10px;margin-bottom:18px}
  .stat{padding:14px 15px}
  .stat .num{font-size:23px}
}

/* ---------------- ≤700px : tables & pipeline ---------------- */
@media (max-width:700px){
  /* Any data table becomes horizontally scrollable instead of crushing columns.
     (The review queue already has its own scroll wrapper — this covers the rest:
     wizard ownership tables, bank tables, modal tables.) */
  .card-body .tbl,.modal .tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;max-width:100%}
  .card-body .tbl td,.modal .tbl td,.card-body .tbl th,.modal .tbl th{min-width:110px}
  .card-body .tbl td:last-child,.modal .tbl td:last-child{min-width:0}
  .tbl th{padding:10px 10px}
  .tbl td{padding:11px 10px}

  /* Stage pipeline: 2-per-row grid, connector bars hidden */
  .pipeline{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
  .pipeline .pl-step{min-width:0}
  .pipeline .pl-bar{display:none}
  .pipeline .pl-lbl{white-space:normal}

  /* Key-value grids stack */
  .kv{grid-template-columns:1fr;gap:2px 0}
  .kv dt{margin-top:9px}
  .kv dt:first-child{margin-top:0}
  .kv dd{margin:0 0 2px}
  /* The review card's own .kv rule is more specific than the stacking rule above,
     so it has to be restated here or the two-column grid survives on a phone.
     Horizontal padding stays 16px to line up with .rf-head, which the narrow
     breakpoint does not change. */
  .review-field .kv{grid-template-columns:1fr;padding:10px 16px}

  /* Officer review rows: verdict buttons drop to their own right-aligned line */
  .review-field .rf-head{flex-wrap:wrap}
  .rf-actions{flex:1 0 100%;justify-content:flex-end;flex-wrap:wrap;gap:6px}
  .doc-row{flex-wrap:wrap;row-gap:8px}
  .doc-info{flex:1 1 200px}
}

/* ---------------- ≤640px : dense phone UI ---------------- */
@media (max-width:640px){
  .row{flex-wrap:wrap}
  .row .badge{white-space:normal;text-align:left;line-height:1.4}

  /* Inputs at 16px stop iOS Safari's focus auto-zoom */
  input[type=text],input[type=email],input[type=password],input[type=number],
  input[type=date],input[type=tel],input[type=url],select,textarea,
  .combo-field,.combo-val,.combo-input{font-size:16px}

  /* Comfortable touch targets */
  .btn{min-height:42px}
  .btn-sm{min-height:36px}
  .btn-icon{width:40px;height:40px}
  .x-close{padding:4px 10px}
  .pill-tabs{display:flex;flex-wrap:wrap}
  .pill-tabs button{padding:8px 14px}
  .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{white-space:nowrap;flex:0 0 auto}

  /* Modals become bottom sheets: full width, big scroll area, easy thumb reach */
  .modal-backdrop{padding:0;align-items:flex-end}
  .modal,.modal.wide{max-width:100%;width:100%;max-height:calc(100dvh - 28px);border-radius:18px 18px 0 0}
  .modal-head{padding:14px 16px}
  .modal-body{padding:16px}
  .modal-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom));flex-wrap:wrap}
  .modal-foot .btn{flex:1 1 auto}
  .agr-scroll{max-height:52dvh;padding:16px 14px}
  .agr-foot{flex-wrap:wrap}

  /* Auth screens */
  .auth-main{padding:64px 12px 28px;align-items:flex-start}
  .auth-card{padding:26px 18px}
  .auth-card h2{font-size:22px}
  .auth-aside{padding:32px 22px}
  .lang-float{top:12px;right:12px}
  .otp-inputs{gap:7px}
  .otp-inputs input{width:44px;height:52px;font-size:20px}

  /* Popovers never exceed the viewport */
  .combo-pop{max-width:calc(100vw - 12px)}
  .dob-pop{max-width:calc(100vw - 20px)}
  .filepreview{height:55vh}

  /* Toasts span the top of the screen */
  #toasts{left:10px;right:10px;top:10px;max-width:none}

  .empty-state{padding:40px 14px}
  .dropzone{padding:16px}
  .legalbar{font-size:10.5px;padding:14px 14px calc(14px + env(safe-area-inset-bottom))}
}

/* ---------------- ≤400px : very small phones ---------------- */
@media (max-width:400px){
  .content{padding:14px 10px 48px}
  .card-pad,.card-body{padding:13px}
  .otp-inputs input{width:38px;height:48px;font-size:18px}
  .stat .num{font-size:20px}
  .page-head h1{font-size:18px}
  .skin-toggle button{width:50px}
  .lang-toggle button{width:44px}
  .pipeline{grid-template-columns:1fr 1fr;gap:8px 10px}
  .pipeline .pl-dot{width:26px;height:26px;font-size:11px}
}