/* ============ TOKENS — Novaside brand palette ============ */
:root{
  --ink:#0A150F;
  --panel:#0F1F16;
  --panel-2:#15271C;
  --stroke:rgba(23,138,84,.20);
  --stroke-2:rgba(23,138,84,.32);
  --sky:#178A54;
  --sky-2:#22A868;
  --teal:#178A54;
  --amber:#D9A93B;
  --coral:#B3452F;
  --text:#F2F6F1;
  --text-dim:#A9BBAE;
  --text-faint:#6C8074;
  --white:#FFFFFF;
  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:9px;
  --shadow-lift:0 20px 60px -20px rgba(6,20,12,.65);
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --sidebar-w:264px;
  --topbar-h:74px;
}
[data-theme="light"]{
  --ink:#F7F9F4;
  --panel:#FFFFFF;
  --panel-2:#F1F5EE;
  --stroke:#DCE5DE;
  --stroke-2:rgba(11,93,59,.22);
  --text:#12241C;
  --text-dim:#4B5F55;
  --text-faint:#7C8F84;
  --shadow-lift:0 20px 50px -24px rgba(11,93,59,.18);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  font-family:var(--font-body);
  background:var(--ink);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  transition:background .4s var(--ease), color .4s var(--ease);
}
body.locked{overflow:hidden; height:100vh;}
::selection{background:var(--sky); color:#fff;}
::-webkit-scrollbar{width:9px; height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--stroke-2); border-radius:10px;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; font-size:13.5px; color:inherit; background:none; border:1px solid transparent; border-radius:10px; padding:9px 14px; transition:filter .15s, transform .15s, border-color .15s, background .15s;}
button:not([class]){background:var(--panel-2); border-color:var(--stroke-2); color:var(--text); font-weight:600;}
button:not([class]):hover{border-color:var(--sky);}
select, input[type="text"], input[type="date"], input[type="number"], input[type="email"], input[type="password"]{font-family:inherit;}
input:not([class]), select:not([class]){padding:10px 13px; border-radius:10px; border:1px solid var(--stroke-2); background:var(--panel-2); color:var(--text); font-size:13.5px;}
:focus-visible{outline:2px solid var(--sky); outline-offset:2px;}
.mono{font-family:var(--font-mono);}
.tabular{font-variant-numeric:tabular-nums;}

/* ============ AMBIENT SKY BACKGROUND ============ */
.sky-field{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(23,138,84,.20), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(23,138,84,.14), transparent 55%),
    var(--ink);
  transition:background .4s var(--ease);
}
[data-theme="light"] .sky-field{
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(23,138,84,.16), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(23,138,84,.12), transparent 55%),
    var(--ink);
}
.sky-field span{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,255,255,0) 70%);
  opacity:0; animation:drift linear infinite;
}
[data-theme="light"] .sky-field span{display:none;}
@keyframes drift{
  0%{transform:translateY(0) scale(1); opacity:0;}
  10%{opacity:.7;}
  90%{opacity:.5;}
  100%{transform:translateY(-120vh) scale(1.4); opacity:0;}
}

/* ============ APP SHELL ============ */
.shell{position:relative; z-index:1; display:flex; min-height:100vh;}

/* ---- Sidebar ---- */
.sidebar{
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--panel);
  border-right:1px solid var(--stroke);
  padding:26px 18px;
  display:flex; flex-direction:column; gap:6px;
  position:fixed; top:0; left:0; height:100vh; overflow-y:auto;
  transition:transform .35s var(--ease), background .4s var(--ease);
  z-index:40;
}
.brand{display:flex; align-items:center; gap:11px; padding:4px 10px 26px;}
.brand-mark{
  width:38px; height:38px; border-radius:11px; flex-shrink:0;
  background:conic-gradient(from 200deg, var(--sky), var(--teal), var(--sky));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px -6px rgba(23,138,84,.55);
}
.brand-mark svg{width:19px; height:19px;}
.brand-text{font-family:var(--font-display); font-weight:700; font-size:15.5px; line-height:1.15;}
.brand-text small{display:block; font-family:var(--font-body); font-weight:500; font-size:10.5px; color:var(--text-faint); letter-spacing:.06em; text-transform:uppercase; margin-top:2px;}

.nav-label{font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--text-faint); font-weight:600; margin:16px 10px 8px;}
.nav-link{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px;
  color:var(--text-dim); font-size:14px; font-weight:500; position:relative;
  transition:background .2s, color .2s;
}
.nav-link svg{width:18px; height:18px; flex-shrink:0; opacity:.85;}
.nav-link:hover{background:var(--panel-2); color:var(--text);}
.nav-link.active{
  background:linear-gradient(135deg, rgba(23,138,84,.16), rgba(23,138,84,.10));
  color:var(--text); font-weight:600;
}
.nav-link.active::before{
  content:''; position:absolute; left:-18px; top:50%; transform:translateY(-50%);
  width:3px; height:20px; border-radius:3px; background:linear-gradient(var(--sky),var(--teal));
}
.nav-badge{
  margin-left:auto; font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px;
  background:rgba(217,169,59,.16); color:var(--amber);
}

/* ---- Collapsible sidebar groups ---- */
.nav-group{display:flex; flex-direction:column;}
.nav-group-toggle{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  font-family:inherit; -webkit-appearance:none; appearance:none;
}
.nav-group-toggle:focus-visible{outline:2px solid var(--sky); outline-offset:2px;}
.nav-group.has-active > .nav-group-toggle{color:var(--text); font-weight:600;}
.nav-chev{width:16px !important; height:16px !important; margin-left:auto; opacity:.6; transition:transform .25s var(--ease);}
.nav-group-toggle .nav-badge + .nav-chev{margin-left:8px;}
.nav-group.open > .nav-group-toggle .nav-chev{transform:rotate(180deg);}
/* While open, each child shows its own badge — the summed one would double-count. */
.nav-group.open > .nav-group-toggle .nav-badge{display:none;}
.nav-sub{
  display:none; flex-direction:column; gap:2px;
  margin:2px 0 6px 21px; padding-left:10px; border-left:1px solid var(--stroke);
}
.nav-group.open > .nav-sub{display:flex;}
.nav-sub .nav-link{padding:8px 10px; font-size:13.5px; gap:10px;}
.nav-sub .nav-link svg{width:16px; height:16px;}
.nav-sub .nav-link.active::before{left:-11px; height:16px;}

.sidebar-foot{margin-top:auto; padding-top:14px; border-top:1px solid var(--stroke);}
.plan-card{
  border-radius:var(--radius-md); padding:14px; background:var(--panel-2);
  border:1px solid var(--stroke); font-size:12px; color:var(--text-dim); margin-bottom:12px;
}
.plan-card b{display:block; color:var(--text); font-family:var(--font-display); font-size:13px; margin-bottom:3px;}
.logout-link{color:var(--coral) !important;}

/* ---- Main column ---- */
.main{flex:1; min-width:0; display:flex; flex-direction:column; margin-left:var(--sidebar-w);}

.topbar{
  position:fixed; top:0; left:var(--sidebar-w); right:0; z-index:35;
  display:flex; align-items:center; gap:16px;
  padding:16px 30px; border-bottom:1px solid var(--stroke);
  background:color-mix(in srgb, var(--ink) 78%, transparent);
  backdrop-filter:blur(16px);
}
.burger{display:none; width:38px; height:38px; border-radius:10px; border:1px solid var(--stroke); background:var(--panel-2); align-items:center; justify-content:center; color:var(--text);}
.burger svg{width:18px; height:18px;}
.search-box{
  flex:1; max-width:380px; display:flex; align-items:center; gap:9px;
  background:var(--panel-2); border:1px solid var(--stroke); border-radius:12px; padding:9px 14px;
  color:var(--text-faint);
}
.search-box svg{width:16px; height:16px; flex-shrink:0;}
.search-box input{background:none; border:none; color:var(--text); font-size:13.5px; width:100%;}
.search-box input:focus{outline:none;}
.search-box input::placeholder{color:var(--text-faint);}
.topbar-actions{display:flex; align-items:center; gap:10px; margin-left:auto;}
.icon-btn{
  width:40px; height:40px; border-radius:12px; border:1px solid var(--stroke); background:var(--panel-2);
  display:flex; align-items:center; justify-content:center; color:var(--text-dim); position:relative;
  transition:border-color .2s, color .2s, transform .2s;
}
.icon-btn:hover{color:var(--text); border-color:var(--stroke-2); transform:translateY(-1px);}
.icon-btn svg{width:17px; height:17px;}
.dot-ping{position:absolute; top:8px; right:8px; width:7px; height:7px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 2px var(--panel-2);}
.dot-ping::after{content:''; position:absolute; inset:0; border-radius:50%; background:var(--coral); animation:ping 1.8s ease-out infinite;}
@keyframes ping{0%{transform:scale(1); opacity:.7;} 100%{transform:scale(2.6); opacity:0;}}

.user-chip{display:flex; align-items:center; gap:10px; padding:6px 12px 6px 6px; border-radius:30px; background:var(--panel-2); border:1px solid var(--stroke); cursor:pointer;}
.avatar{width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--sky),var(--teal)); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:12px; color:#fff;}
.user-chip .who{line-height:1.1;}
.user-chip .who b{font-size:12.5px; display:block;}
.user-chip .who span{font-size:10.5px; color:var(--text-faint);}

.content{padding:calc(var(--topbar-h) + 28px) 30px 70px; max-width:1360px; width:100%; margin:0 auto;}
.route-section{display:none; animation:fadeUp .5s var(--ease);}
.route-section.active{display:block;}
@keyframes fadeUp{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}

.crumb{font-size:12px; color:var(--text-faint); margin-bottom:6px; display:flex; align-items:center; gap:6px;}
.crumb b{color:var(--sky); font-weight:600;}
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:24px; flex-wrap:wrap;}
.page-head h1{font-family:var(--font-display); font-size:26px; font-weight:700; letter-spacing:-.01em;}
.page-head p{color:var(--text-dim); font-size:13.5px; margin-top:4px;}

.btn{
  display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; padding:11px 20px;
  border-radius:11px; border:1px solid transparent; transition:transform .18s var(--ease), box-shadow .18s, filter .18s;
}
.btn svg{width:15px; height:15px;}
.btn:active{transform:scale(.97);}
.btn-primary{background:linear-gradient(135deg,var(--sky),var(--teal)); color:#052A18; box-shadow:0 10px 26px -10px rgba(23,138,84,.6);}
.btn-primary:hover{filter:brightness(1.08); transform:translateY(-1px);}
.btn-ghost{background:var(--panel-2); color:var(--text); border-color:var(--stroke-2);}
.btn-ghost:hover{border-color:var(--sky);}
.btn-sm{padding:8px 14px; font-size:12.5px; border-radius:9px;}
.btn-block{width:100%; justify-content:center;}
.btn-amber{background:linear-gradient(135deg,var(--amber),#F98C3E); color:#2B1600;}
.btn-spinner{display:inline-block; width:13px; height:13px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:currentColor; animation:spin .7s linear infinite; vertical-align:-2px;}
.btn[disabled]{opacity:.75; cursor:not-allowed; pointer-events:none;}
.status-pill{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; text-transform:uppercase; letter-spacing:.03em;}
.status-pill.active{background:rgba(23,138,84,.14); color:var(--teal);}
.status-pill.disabled{background:rgba(179,69,47,.13); color:var(--coral);}
.status-pill.pending{background:rgba(217,169,59,.15); color:var(--amber);}
.status-pill.approved{background:rgba(23,138,84,.14); color:var(--teal);}
.status-pill.rejected{background:rgba(179,69,47,.13); color:var(--coral);}

/* ---- Hero ---- */
.hero{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  padding:34px 32px; margin-bottom:22px;
  background:linear-gradient(120deg,#0C2A55 0%,#123A63 45%,#0E6D66 100%);
  color:#fff; box-shadow:var(--shadow-lift);
  isolation:isolate;
}
.hero::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(420px 260px at 88% 6%, rgba(255,255,255,.16), transparent 65%),
    radial-gradient(320px 220px at 15% 110%, rgba(23,138,84,.35), transparent 60%);
}
.hero-orbit{position:absolute; right:26px; top:50%; transform:translateY(-50%); width:190px; height:190px; opacity:.55;}
.hero-orbit circle{fill:none; stroke:rgba(255,255,255,.35); stroke-dasharray:3 7;}
.hero-orbit .spin{animation:spin 24s linear infinite; transform-origin:center;}
@keyframes spin{to{transform:rotate(360deg);}}
.hero-top{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap;}
.hero-eyebrow{font-size:11.5px; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.7); font-weight:600; margin-bottom:8px;}
.hero h2{font-family:var(--font-display); font-size:27px; font-weight:700; max-width:480px; line-height:1.25;}
.hero h2 span{color:var(--sky-2);}
.member-pill{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); padding:6px 12px; border-radius:30px; backdrop-filter:blur(6px);}
.hero-actions{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap;}
.hero .btn-ghost{background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.28);}
.hero .btn-ghost:hover{background:rgba(255,255,255,.18);}

/* ---- KPI Grid ---- */
.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px;}
.kpi-card{
  background:var(--panel); border:1px solid var(--stroke); border-radius:var(--radius-md);
  padding:18px 18px 16px; position:relative; overflow:hidden;
  transition:transform .25s var(--ease), border-color .25s;
}
.kpi-card:hover{transform:translateY(-3px); border-color:var(--stroke-2);}
.kpi-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px;}
.kpi-icon{width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;}
.kpi-icon svg{width:18px; height:18px;}
.kpi-trend{font-size:11px; font-weight:700; padding:3px 8px; border-radius:20px; display:flex; align-items:center; gap:3px;}
.kpi-trend.up{color:var(--teal); background:rgba(23,138,84,.13);}
.kpi-trend.down{color:var(--coral); background:rgba(179,69,47,.13);}
.kpi-label{font-size:12px; color:var(--text-faint); margin-bottom:4px;}
.kpi-value{font-family:var(--font-mono); font-size:23px; font-weight:600; letter-spacing:-.01em;}
.kpi-sub{font-size:11.5px; color:var(--text-faint); margin-top:6px;}

/* ---- Panels / grid ---- */
.grid-2{display:grid; grid-template-columns:1.5fr 1fr; gap:16px; margin-bottom:22px; align-items:start;}
.panel{background:var(--panel); border:1px solid var(--stroke); border-radius:var(--radius-lg); padding:22px;}
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:10px; flex-wrap:wrap;}
.panel-head h3{font-family:var(--font-display); font-size:16px; font-weight:700;}
.panel-head p{font-size:12px; color:var(--text-faint); margin-top:2px;}
.chip-toggle{display:flex; gap:6px; background:var(--panel-2); padding:4px; border-radius:10px; border:1px solid var(--stroke);}
.chip-toggle button{padding:6px 12px; font-size:11.5px; font-weight:600; border-radius:7px; background:none; border:none; color:var(--text-faint);}
.chip-toggle button.active{background:var(--panel); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,.2);}
.chart-wrap{height:230px; position:relative;}

/* ---- Activity list ---- */
.activity-item{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--stroke);}
.activity-item:last-child{border-bottom:none;}
.act-icon{width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.act-icon svg{width:16px; height:16px;}
.act-body{flex:1; min-width:0;}
.act-body b{font-size:13px; display:block;}
.act-body span{font-size:11.5px; color:var(--text-faint);}
.act-amt{font-family:var(--font-mono); font-size:13px; font-weight:600; white-space:nowrap;}
.act-amt.pos{color:var(--teal);}
.act-amt.neg{color:var(--coral);}

/* ---- Table ---- */
.table-wrap{overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-size:13px;}
th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--stroke);}
td{padding:13px 12px; border-bottom:1px solid var(--stroke); color:var(--text);}
tr:last-child td{border-bottom:none;}
.status-pill{font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; display:inline-block;}
.status-pill.success{color:var(--teal); background:rgba(23,138,84,.13);}
.status-pill.pending{color:var(--amber); background:rgba(217,169,59,.15);}
.status-pill.failed{color:var(--coral); background:rgba(179,69,47,.13);}

/* ---- Cards grid (savings/investments) ---- */
.cards-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.plan-tile{background:var(--panel); border:1px solid var(--stroke); border-radius:var(--radius-lg); padding:20px; display:flex; flex-direction:column; gap:12px; transition:transform .25s var(--ease), border-color .25s;}
.plan-tile:hover{transform:translateY(-4px); border-color:var(--stroke-2);}
.plan-tile-top{display:flex; justify-content:space-between; align-items:flex-start;}
.plan-tag{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;}
.plan-tag svg{width:20px; height:20px;}
.roi-tag{font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--teal); background:rgba(23,138,84,.12); padding:4px 9px; border-radius:20px;}
.plan-tile h4{font-family:var(--font-display); font-size:16px; font-weight:700;}
.plan-tile p{font-size:12.5px; color:var(--text-dim); line-height:1.5;}
.progress-track{height:7px; border-radius:20px; background:var(--panel-2); overflow:hidden; margin-top:2px;}
.progress-fill{height:100%; border-radius:20px; background:linear-gradient(90deg,var(--sky),var(--teal)); width:0%; transition:width 1.2s var(--ease);}
.plan-meta{display:flex; justify-content:space-between; font-size:11.5px; color:var(--text-faint);}
.plan-meta b{color:var(--text); font-family:var(--font-mono);}
.countdown{font-family:var(--font-mono); font-size:11px; color:var(--amber); display:flex; align-items:center; gap:5px;}

/* ---- Forms ---- */
.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; font-weight:600; margin-bottom:7px; color:var(--text-dim);}
.input, select.input, textarea.input{
  width:100%; padding:12px 14px; border-radius:11px; border:1px solid var(--stroke-2); background:var(--panel-2);
  color:var(--text); font-size:13.5px; font-family:inherit; transition:border-color .2s, box-shadow .2s;
  color-scheme: light dark; appearance:none; -webkit-appearance:none; -moz-appearance:none;
}
[data-theme="light"] .input, [data-theme="light"] select.input, [data-theme="light"] textarea.input{ color-scheme: light; }
[data-theme="dark"] .input, [data-theme="dark"] select.input, [data-theme="dark"] textarea.input{ color-scheme: dark; }
select.input{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393A0BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; background-size:15px; padding-right:36px;
}
input.input[type="date"]{ position:relative; }
input.input[type="date"]::-webkit-calendar-picker-indicator{ cursor:pointer; opacity:.65; filter: var(--date-icon-filter, none); }
[data-theme="light"] input.input[type="date"]::-webkit-calendar-picker-indicator{ filter:none; }
[data-theme="dark"] input.input[type="date"]::-webkit-calendar-picker-indicator{ filter:invert(1) brightness(1.6); }
textarea.input{ font-family:inherit; line-height:1.5; }
.input:focus, select.input:focus, textarea.input:focus{outline:none; border-color:var(--sky); box-shadow:0 0 0 3px rgba(23,138,84,.15);}
.input::placeholder, textarea.input::placeholder{ color:var(--text-faint); opacity:1; }
.field.error .input{border-color:var(--coral); animation:shake .32s;}
.err-msg{font-size:11.5px; color:var(--coral); margin-top:6px; display:none; align-items:center; gap:5px;}
.field.error .err-msg{display:flex;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@keyframes shake{10%,90%{transform:translateX(-1px);}20%,80%{transform:translateX(2px);}30%,50%,70%{transform:translateX(-4px);}40%,60%{transform:translateX(4px);}}
.strength-bar{height:5px; border-radius:6px; background:var(--panel-2); margin-top:8px; overflow:hidden;}
.strength-fill{height:100%; width:0%; border-radius:6px; transition:width .3s, background .3s;}
.strength-text{font-size:11px; margin-top:5px; color:var(--text-faint);}
.input-icon-wrap{position:relative;}
.input-icon-wrap .input{padding-right:40px;}
.input-toggle{position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-faint); display:flex;}
.input-toggle svg{width:17px; height:17px;}

/* ============ AUTH GATE / MODAL ============ */
/* The sign-in / register screens use the SAME palette as the rest of the app —
   the green brand tokens and the theme's own --ink / --panel / --stroke — so
   they follow the light or dark theme exactly like the member and admin
   consoles do. Nothing here is a hard-coded colour. */
.auth-gate{
  position:fixed; inset:0; z-index:100; display:flex; align-items:flex-start; justify-content:flex-start;
  background:
    radial-gradient(ellipse 900px 520px at 15% -10%, rgba(23,138,84,.22), transparent 60%),
    radial-gradient(ellipse 700px 520px at 100% 10%, rgba(23,138,84,.14), transparent 55%),
    var(--ink);
  padding:20px; opacity:1; transition:opacity .5s var(--ease), visibility .5s, background .4s var(--ease);
  /* A tall card (the registration review, a small phone) scrolls instead of being cut off. */
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
.auth-gate.hidden{opacity:0; visibility:hidden; pointer-events:none;}
.auth-gate .sky-field{position:absolute;}
.auth-card{
  position:relative; z-index:2; width:100%; max-width:940px; display:grid; grid-template-columns:1fr 1fr;
  /* auto margins centre the card when there is room and let it start at the top (and scroll) when there isn't */
  margin:auto;
  background:color-mix(in srgb, var(--panel) 92%, transparent); border:1px solid var(--stroke); border-radius:26px;
  box-shadow:var(--shadow-lift); overflow:hidden; backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  animation:cardIn .6s var(--ease);
}
@keyframes cardIn{from{opacity:0; transform:translateY(24px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);}}
.auth-side{
  padding:44px 36px; background:linear-gradient(160deg, color-mix(in srgb, var(--sky) 58%, #04150c), color-mix(in srgb, var(--sky) 84%, #04150c)); color:#fff; position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}
.auth-side::before{content:''; position:absolute; inset:0; background:radial-gradient(280px 220px at 90% 100%, rgba(255,255,255,.16), transparent 60%);}
.auth-side .brand{padding:0 0 40px;}
.auth-side h3{font-family:var(--font-display); font-size:24px; line-height:1.3; font-weight:700; margin-bottom:14px; max-width:280px;}
.auth-side p{font-size:13px; color:rgba(255,255,255,.78); line-height:1.6; max-width:280px;}
.auth-stat-row{margin-top:auto; display:flex; gap:24px; padding-top:30px;}
.auth-stat b{display:block; font-family:var(--font-mono); font-size:20px;}
.auth-stat span{font-size:10.5px; color:rgba(255,255,255,.65); text-transform:uppercase; letter-spacing:.06em;}

.auth-form-side{padding:40px 40px 32px; display:flex; flex-direction:column;}
/* Browsers paint autofilled fields pale blue (Chrome/Safari) or yellow (Firefox). Keep them on the theme. */
.auth-form-side .input:-webkit-autofill,
.auth-form-side .input:-webkit-autofill:hover,
.auth-form-side .input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text); caret-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--panel-2) inset; box-shadow:0 0 0 1000px var(--panel-2) inset;
  border-color:var(--stroke-2); transition:background-color 9999s ease-out 0s;
}
.auth-form-side .input:autofill{ background-color:var(--panel-2); color:var(--text); box-shadow:0 0 0 1000px var(--panel-2) inset; }
.auth-tabs{display:flex; gap:4px; background:var(--panel-2); border:1px solid var(--stroke); border-radius:12px; padding:4px; margin-bottom:26px;}
.auth-tab{flex:1; text-align:center; padding:10px; border-radius:9px; font-size:13px; font-weight:600; color:var(--text-faint); background:none; border:none;}
.auth-tab.active{background:var(--panel); color:var(--text); box-shadow:0 4px 14px rgba(0,0,0,.18);}
.auth-panel{display:none;}
.auth-panel.active{display:block; animation:fadeUp .35s var(--ease);}
.auth-foot-note{font-size:12px; color:var(--text-faint); text-align:center; margin-top:16px;}
.auth-foot-note a{color:var(--sky); font-weight:600;}
.divider{display:flex; align-items:center; gap:12px; margin:18px 0; font-size:11px; color:var(--text-faint);}
.divider::before,.divider::after{content:''; flex:1; height:1px; background:var(--stroke-2);}
.social-row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.social-btn{display:flex; align-items:center; justify-content:center; gap:8px; padding:10px; border-radius:11px; border:1px solid var(--stroke-2); background:var(--panel-2); font-size:12.5px; font-weight:600; color:var(--text);}
.social-btn svg{width:16px; height:16px;}
.checkbox-row{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-dim); margin-bottom:18px;}
.checkbox-row input{accent-color:var(--sky); width:15px; height:15px;}
.auth-close{position:absolute; top:18px; right:18px; z-index:3;}

/* ---- Loader ---- */
.gate-loader{position:fixed; inset:0; z-index:200; background:var(--ink); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px; transition:opacity .5s, visibility .5s;}
.gate-loader.hidden{opacity:0; visibility:hidden; pointer-events:none;}
.orbit-loader{width:64px; height:64px; position:relative;}
.orbit-loader span{position:absolute; inset:0; border-radius:50%; border:3px solid transparent; border-top-color:var(--sky); animation:spin 1s linear infinite;}
.orbit-loader span:nth-child(2){border-top-color:var(--teal); animation-duration:1.5s; inset:9px;}
.gate-loader p{font-size:12.5px; color:var(--text-faint); letter-spacing:.04em;}

/* ---- misc ---- */
.copy-field{display:flex; gap:8px;}
.copy-field .input{flex:1;}
.referral-row{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--stroke);}
.referral-row:last-child{border-bottom:none;}
.level-badge{width:34px; height:34px; border-radius:10px; background:var(--panel-2); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--sky); flex-shrink:0;}
.toggle-switch{position:relative; width:44px; height:25px; border-radius:20px; background:var(--panel-2); border:1px solid var(--stroke-2); cursor:pointer; flex-shrink:0;}
.toggle-switch::after{content:''; position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%; background:var(--text-faint); transition:.25s var(--ease);}
.toggle-switch.on{background:linear-gradient(135deg,var(--sky),var(--teal)); border-color:transparent;}
.toggle-switch.on::after{transform:translateX(19px); background:#fff;}
.settings-row{display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--stroke); gap:16px;}
.settings-row:last-child{border-bottom:none;}
.settings-row b{font-size:13.5px; display:block;}
.settings-row span{font-size:12px; color:var(--text-faint);}

/* ---- toast (custom, in addition to sweetalert toast theme) ---- */
.tk{ }

/* ---- responsive ---- */
.kpi-grid > *, .cards-grid > *, .lp-feature-grid > *, .lp-tier-grid > *, .help-cards > *, .grid-2 > *, .lp-steps > *, .lp-compare > *{min-width:0;}
@media (max-width:1100px){
  .kpi-grid{grid-template-columns:repeat(2,1fr) !important;}
  .grid-2{grid-template-columns:1fr !important;}
  .cards-grid{grid-template-columns:repeat(2,1fr) !important;}
  .help-cards{grid-template-columns:repeat(2,1fr) !important;}
  .lp-feature-grid{grid-template-columns:repeat(2,1fr);}
  .lp-tier-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:860px){
  .sidebar{position:fixed; left:0; height:100vh; transform:translateX(-100%); box-shadow:0 0 60px rgba(0,0,0,.5); z-index:80;}
  .sidebar.open{transform:translateX(0);}
  .burger{display:flex;}
  .search-box{display:none;}
  .auth-card{grid-template-columns:1fr;}
  .auth-side{display:none;}
  .topbar{padding:14px 16px; left:0;}
  .main{margin-left:0;}
  .lp-testimonial-track{grid-template-columns:1fr;}
  .lp-footer-grid{grid-template-columns:1fr 1fr; gap:26px;}
}
@media (max-width:640px){
  .kpi-grid{grid-template-columns:1fr !important;}
  .cards-grid{grid-template-columns:1fr !important;}
  .help-cards{grid-template-columns:repeat(2,1fr) !important;}
  .grid-2{grid-template-columns:1fr !important;}
  .field-row{grid-template-columns:1fr !important;}
  .content{padding:calc(var(--topbar-h) + 14px) 14px 60px;}
  .hero{padding:22px 18px;}
  .hero-orbit{display:none;}
  .hero h2{font-size:21px;}
  .page-head{flex-direction:column; align-items:flex-start;}
  .page-head h1{font-size:21px;}
  .toolbar{flex-direction:column; align-items:stretch;}
  .toolbar .search-box, .toolbar select, .toolbar input, .toolbar .dropdown{width:100% !important; max-width:none;}
  .toolbar .result-count{margin-left:0; text-align:left;}
  .modal-card{padding:24px 18px 20px; max-width:100%; border-radius:18px;}
  .modal-card.wide{max-width:100%;}
  .lp-stats-strip{grid-template-columns:repeat(2,1fr); margin:0;}
  .lp-feature-grid{grid-template-columns:1fr;}
  .lp-tier-grid{grid-template-columns:1fr;}
  .lp-tier.featured{transform:none;}
  .lp-footer-grid{grid-template-columns:1fr; gap:26px;}
  .lp-nav{padding:14px 16px;}
  .lp-hero{padding:14vw 5vw 10vw;}
  .lp-section{padding:12vw 5vw;}
  .kyc-stepper{gap:2px;}
  .kyc-step span{display:none;}
  .kyc-step-line{width:20px;}
  .profile-avatar-wrap{flex-direction:column; align-items:flex-start; margin-top:-30px;}
  .profile-avatar{width:70px; height:70px; font-size:24px;}
  .escrow-parties{flex-wrap:wrap;}
  .amount-grid{grid-template-columns:repeat(3,1fr) !important;}
  .auth-form-side{padding:30px 22px 26px;}
  .identity-value{font-size:12px;}
  .pagination{flex-wrap:wrap;}
  .table-wrap table{min-width:520px;}
  .lp-hero-copy h1{font-size:28px;}
  .lp-trust{gap:18px;}
  .field-row.three{grid-template-columns:1fr !important;}
  .chip-toggle{flex-wrap:wrap;}
  .panel{padding:16px;}
  .chart-wrap{height:200px !important;}
  .kpi-card{padding:14px !important;}
}
@media (max-width:420px){
  .help-cards{grid-template-columns:1fr !important;}
  .amount-grid{grid-template-columns:repeat(2,1fr) !important;}
  .lp-stats-strip{grid-template-columns:1fr;}
  .kpi-value{font-size:19px;}
  .brand-text{font-size:13px;}
  .social-row{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

/* ============ TOP ROUTE-CHANGE PROGRESS BAR ============ */
.route-bar{position:fixed; top:0; left:0; height:3px; width:0%; z-index:500; background:linear-gradient(90deg,var(--sky),var(--teal)); box-shadow:0 0 12px rgba(23,138,84,.8); transition:width .25s var(--ease), opacity .3s;}
.route-bar.active{width:70%;}
.route-bar.done{width:100%; opacity:0;}

/* ============ RING SPINNER ============ */
.ring-spinner{display:inline-block; position:relative;}
.ring-spinner svg{transform:rotate(-90deg);}
.ring-spinner .ring-track{fill:none; stroke:var(--stroke-2);}
.ring-spinner .ring-fill{fill:none; stroke:url(#ringGrad); stroke-linecap:round; transition:stroke-dashoffset 1s var(--ease);}
.ring-center{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column;}
.ring-center b{font-family:var(--font-mono); font-size:15px;}
.ring-center span{font-size:9px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em;}
.spin-basic{animation:spin 1s linear infinite;}

/* ============ GENERIC MODAL SYSTEM ============ */
.modal-overlay{
  position:fixed; inset:0; z-index:150; display:flex; align-items:center; justify-content:center;
  background:rgba(4,8,20,.66); backdrop-filter:blur(6px); padding:20px;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.modal-overlay.show{opacity:1; visibility:visible;}
.modal-card{
  width:100%; max-width:520px; max-height:88vh; overflow-y:auto;
  background:var(--panel); border:1px solid var(--stroke-2); border-radius:var(--radius-lg);
  padding:30px 30px 26px; position:relative; box-shadow:0 40px 90px -30px rgba(0,0,0,.65);
  transform:translateY(18px) scale(.97); transition:transform .35s var(--ease);
}
.modal-overlay.show .modal-card{transform:translateY(0) scale(1);}
.modal-card.wide{max-width:680px;}
.modal-close{position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:9px; border:1px solid var(--stroke-2); background:var(--panel-2); color:var(--text-dim); display:flex; align-items:center; justify-content:center;}
.modal-close:hover{color:var(--text); border-color:var(--sky);}
.modal-eyebrow{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--sky); font-weight:700; margin-bottom:6px;}
.modal-card h2{font-family:var(--font-display); font-size:20px; font-weight:700; margin-bottom:6px; padding-right:24px;}
.modal-card > p.modal-sub{font-size:12.5px; color:var(--text-faint); margin-bottom:20px;}

/* ============ DROPDOWN (custom, not native select) ============ */
.dropdown{position:relative;}
.dropdown-btn{
  display:flex; align-items:center; gap:9px; width:100%; padding:11px 14px; border-radius:11px;
  border:1px solid var(--stroke-2); background:var(--panel-2); color:var(--text); font-size:13.5px; font-family:inherit; text-align:left;
}
.dropdown-btn svg.chev{margin-left:auto; width:14px; height:14px; transition:transform .25s var(--ease); color:var(--text-faint); flex-shrink:0;}
.dropdown.open .dropdown-btn svg.chev{transform:rotate(180deg);}
.dropdown.open .dropdown-btn{border-color:var(--sky);}
.dropdown-menu{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60;
  background:var(--panel); border:1px solid var(--stroke-2); border-radius:12px; padding:6px;
  box-shadow:var(--shadow-lift); opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; max-height:230px; overflow-y:auto;
}
.dropdown.open .dropdown-menu{opacity:1; visibility:visible; transform:translateY(0);}
.dropdown-item{padding:9px 11px; border-radius:8px; font-size:13px; color:var(--text-dim); display:flex; align-items:center; gap:9px;}
.dropdown-item:hover{background:var(--panel-2); color:var(--text);}
.dropdown-item.selected{color:var(--sky); font-weight:600;}
.dropdown-item.selected svg{opacity:1;}
.dropdown-item svg{width:14px; height:14px; opacity:0; flex-shrink:0;}

/* ============ SEARCH + SORT TOOLBAR ============ */
.toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px;}
.toolbar .search-box{max-width:280px; background:var(--panel); flex:1; min-width:200px;}
.toolbar .dropdown{width:190px;}
.result-count{font-size:12px; color:var(--text-faint); margin-left:auto;}

/* ============ AMOUNT QUICK-PICK ============ */
.amount-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:8px 0 4px;}
.amount-chip{padding:9px 4px; border-radius:9px; border:1px solid var(--stroke-2); background:var(--panel-2); font-size:12px; font-weight:700; text-align:center; color:var(--text-dim); font-family:var(--font-mono);}
.amount-chip:hover{border-color:var(--sky); color:var(--text);}
.amount-chip.active{background:linear-gradient(135deg,var(--sky),var(--teal)); color:#052A18; border-color:transparent;}

/* ============ PAGINATION ============ */
.pagination{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:24px;}
.page-btn{
  min-width:36px; height:36px; padding:0 10px; border-radius:10px; border:1px solid var(--stroke-2);
  background:var(--panel-2); color:var(--text-dim); font-size:13px; font-weight:600; display:flex; align-items:center; justify-content:center;
}
.page-btn svg{width:15px; height:15px;}
.page-btn:hover{border-color:var(--sky); color:var(--text);}
.page-btn.active{background:linear-gradient(135deg,var(--sky),var(--teal)); color:#052A18; border-color:transparent;}
.page-btn:disabled, .page-btn[disabled]{opacity:.4; pointer-events:none;}

/* ============ LANDING PAGE ============ */
#landingPage{position:relative; z-index:1;}
.lp-nav{position:sticky; top:0; z-index:150; display:flex; align-items:center; gap:24px; padding:18px 6vw; backdrop-filter:blur(16px); background:color-mix(in srgb, var(--ink) 72%, transparent); border-bottom:1px solid var(--stroke); transition:padding .3s var(--ease), box-shadow .3s var(--ease);}
.lp-nav.scrolled{padding:12px 6vw; box-shadow:0 10px 30px -18px rgba(0,0,0,.4);}
.lp-nav .brand{padding:0;}
.lp-links{display:flex; gap:26px; margin-left:20px;}
.lp-links a{font-size:13.5px; font-weight:500; color:var(--text-dim); position:relative; padding:4px 0;}
.lp-links a::after{content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--sky),var(--teal)); transition:width .25s var(--ease);}
.lp-links a:hover{color:var(--text);}
.lp-links a:hover::after{width:100%;}
.lp-nav-actions{margin-left:auto; display:flex; gap:10px; align-items:center;}
.lp-menu-btn{display:none; width:40px; height:40px; border-radius:11px; border:1px solid var(--stroke-2); background:var(--panel-2); align-items:center; justify-content:center; color:var(--text); position:relative; flex-shrink:0;}
.lp-menu-btn svg{width:18px; height:18px;}
@media (max-width:860px){
  .lp-links{display:none;}
  .lp-menu-btn{display:flex;}
}
.lp-mobile-drawer{
  position:fixed; inset:0; z-index:200; visibility:hidden; opacity:0; transition:opacity .3s var(--ease), visibility .3s;
}
.lp-mobile-drawer.open{visibility:visible; opacity:1;}
.lp-mobile-drawer-veil{position:absolute; inset:0; background:rgba(4,8,20,.62); backdrop-filter:blur(4px);}
.lp-mobile-drawer-panel{
  position:absolute; top:0; right:0; height:100%; width:min(320px,84vw); background:var(--panel);
  border-left:1px solid var(--stroke-2); padding:22px 22px 30px; display:flex; flex-direction:column; gap:4px;
  transform:translateX(100%); transition:transform .35s var(--ease); box-shadow:-20px 0 50px -20px rgba(0,0,0,.5);
}
.lp-mobile-drawer.open .lp-mobile-drawer-panel{transform:translateX(0);}
.lp-mobile-drawer-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.lp-mobile-drawer-close{width:36px; height:36px; border-radius:10px; border:1px solid var(--stroke-2); background:var(--panel-2); display:flex; align-items:center; justify-content:center; color:var(--text);}
.lp-mobile-drawer-close svg{width:15px; height:15px;}
.lp-mobile-link{padding:14px 6px; font-size:15px; font-weight:600; color:var(--text-dim); border-bottom:1px solid var(--stroke); display:flex; align-items:center; justify-content:space-between;}
.lp-mobile-link svg{width:15px; height:15px; opacity:.5;}
.lp-mobile-link:hover{color:var(--text);}
.lp-mobile-drawer-actions{margin-top:auto; display:flex; flex-direction:column; gap:10px; padding-top:18px;}

.lp-hero{padding:9vw 6vw 6vw; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; position:relative; overflow:hidden;}
.lp-hero-mesh{position:absolute; inset:0; z-index:-2; overflow:hidden;}
.lp-hero-mesh span{position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; animation:meshDrift 18s ease-in-out infinite;}
.lp-hero-mesh span:nth-child(1){width:420px; height:420px; background:radial-gradient(circle,var(--sky),transparent 70%); top:-160px; left:-100px; animation-delay:0s;}
.lp-hero-mesh span:nth-child(2){width:380px; height:380px; background:radial-gradient(circle,var(--teal),transparent 70%); top:20%; right:-140px; animation-delay:-6s;}
.lp-hero-mesh span:nth-child(3){width:320px; height:320px; background:radial-gradient(circle,var(--amber),transparent 72%); bottom:-160px; left:22%; opacity:.28; animation-delay:-11s;}
.lp-hero-mesh::after{content:''; position:absolute; inset:0; background-image:radial-gradient(var(--stroke-2) 1px, transparent 1px); background-size:26px 26px; opacity:.35; mask-image:radial-gradient(ellipse 70% 60% at 50% 20%, #000 40%, transparent 90%);}
@keyframes meshDrift{0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(30px,-20px) scale(1.08);} 66%{transform:translate(-20px,18px) scale(.96);}}
.lp-hero-copy .member-pill{margin-bottom:20px; animation:pillIn .7s var(--ease) both;}
@keyframes pillIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
.lp-hero-copy h1{font-family:var(--font-display); font-size:clamp(32px,4.4vw,54px); line-height:1.08; font-weight:700; letter-spacing:-.02em; margin-bottom:18px; animation:heroIn .8s .1s var(--ease) both;}
.lp-hero-copy h1 span{background:linear-gradient(120deg,var(--sky),var(--teal),var(--sky)); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:gradientShift 6s linear infinite;}
@keyframes gradientShift{to{background-position:200% center;}}
@keyframes heroIn{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);}}
.lp-hero-copy p{font-size:15.5px; color:var(--text-dim); max-width:480px; line-height:1.7; margin-bottom:28px; animation:heroIn .8s .2s var(--ease) both;}
.lp-hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:34px; animation:heroIn .8s .3s var(--ease) both;}
.lp-hero-actions .btn-primary{position:relative; overflow:hidden;}
.lp-hero-actions .btn-primary::after{content:''; position:absolute; inset:0; background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent); transform:translateX(-120%); animation:sheen 3.2s ease-in-out infinite;}
@keyframes sheen{0%,60%{transform:translateX(-120%);} 100%{transform:translateX(120%);}}
.lp-trust{display:flex; gap:28px; flex-wrap:wrap; animation:heroIn .8s .4s var(--ease) both;}
.lp-trust div b{display:block; font-family:var(--font-mono); font-size:21px;}
.lp-trust div span{font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em;}

.lp-hero-visual{position:relative; height:420px; animation:heroIn 1s .25s var(--ease) both;}
.lp-orbit-ring{position:absolute; inset:0; margin:auto; width:340px; height:340px; border-radius:50%; border:1px dashed var(--stroke-2); animation:spin 40s linear infinite;}
.lp-orbit-ring::before,.lp-orbit-ring::after{content:''; position:absolute; width:10px; height:10px; border-radius:50%; background:var(--sky); box-shadow:0 0 16px var(--sky);}
.lp-orbit-ring::before{top:-5px; left:calc(50% - 5px);}
.lp-orbit-ring::after{bottom:-5px; left:calc(50% - 5px); background:var(--teal); box-shadow:0 0 16px var(--teal);}
.lp-orbit-ring-2{position:absolute; inset:0; margin:auto; width:230px; height:230px; border-radius:50%; border:1px dashed rgba(23,138,84,.35); animation:spin 26s linear infinite reverse;}
.lp-float-card{
  position:absolute; background:var(--panel); border:1px solid var(--stroke-2); border-radius:16px; padding:14px 16px;
  box-shadow:var(--shadow-lift); display:flex; align-items:center; gap:11px; animation:floaty 5s ease-in-out infinite;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.lp-float-card:hover{transform:translateY(-6px) scale(1.03); box-shadow:0 26px 60px -20px rgba(23,138,84,.4);}
.lp-float-card b{display:block; font-family:var(--font-mono); font-size:14px;}
.lp-float-card span{font-size:10.5px; color:var(--text-faint);}
.lp-fc-1{top:8%; left:2%; animation-delay:0s;}
.lp-fc-2{bottom:14%; right:0%; animation-delay:1.4s;}
.lp-fc-3{top:44%; right:14%; animation-delay:.7s;}
@keyframes floaty{0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);}}

/* scroll-triggered reveal */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-stagger.in > *{animation:none;}

/* marquee ribbon */
.lp-marquee-wrap{overflow:hidden; border-top:1px solid var(--stroke); border-bottom:1px solid var(--stroke); background:var(--panel-2); padding:13px 0; margin-top:2px;}
.lp-marquee-track{display:flex; gap:48px; width:max-content; animation:marqueeScroll 26s linear infinite;}
.lp-marquee-track span{display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:12.5px; font-weight:600; color:var(--text-dim); white-space:nowrap; letter-spacing:.02em;}
.lp-marquee-track span::before{content:'✦'; color:var(--sky);}
@keyframes marqueeScroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.lp-partner-marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.lp-partner-track{display:flex; gap:14px; width:max-content; animation:marqueeScroll 22s linear infinite;}
.lp-partner-track:hover{animation-play-state:paused;}

.lp-section{padding:5vw 6vw;}
.lp-section-head{text-align:center; max-width:600px; margin:0 auto 40px;}
.lp-eyebrow{font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--sky); margin-bottom:10px;}
.lp-section-head h2{font-family:var(--font-display); font-size:clamp(24px,3vw,34px); font-weight:700; letter-spacing:-.01em; margin-bottom:10px;}
.lp-section-head p{color:var(--text-dim); font-size:14.5px;}

.lp-stats-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--stroke); border:1px solid var(--stroke); border-radius:var(--radius-lg); overflow:hidden; margin:0 6vw;}
.lp-stat{background:var(--panel); padding:26px 20px; text-align:center;}
.lp-stat b{display:block; font-family:var(--font-mono); font-size:28px; margin-bottom:4px;}
.lp-stat span{font-size:11.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em;}

.lp-feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.lp-feature-card{background:var(--panel); border:1px solid var(--stroke); border-radius:var(--radius-lg); padding:24px; transition:transform .3s var(--ease), border-color .3s;}
.lp-feature-card:hover{transform:translateY(-5px); border-color:var(--sky);}
.lp-feature-card .plan-tag{margin-bottom:16px;}
.lp-feature-card h4{font-family:var(--font-display); font-size:16px; margin-bottom:8px;}
.lp-feature-card p{font-size:13px; color:var(--text-dim); line-height:1.6;}

/* how it works */
.lp-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative;}
.lp-step{position:relative; padding:0 18px; text-align:center;}
.lp-step-num{width:52px; height:52px; border-radius:16px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:19px; background:linear-gradient(135deg,var(--sky),var(--teal)); color:#052A18; position:relative; z-index:2; box-shadow:0 12px 26px -10px rgba(23,138,84,.55);}
.lp-step-line{position:absolute; top:26px; left:50%; width:100%; height:2px; background:repeating-linear-gradient(90deg,var(--stroke-2) 0 8px,transparent 8px 14px); z-index:1;}
.lp-step:last-child .lp-step-line{display:none;}
.lp-step h4{font-family:var(--font-display); font-size:15.5px; margin-bottom:8px;}
.lp-step p{font-size:12.5px; color:var(--text-dim); line-height:1.6;}
@media (max-width:860px){
  .lp-steps{grid-template-columns:1fr 1fr; row-gap:34px;}
  .lp-step-line{display:none;}
}
@media (max-width:480px){ .lp-steps{grid-template-columns:1fr;} }

/* comparison */
.lp-compare{display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:900px; margin:0 auto;}
.lp-compare-col{border-radius:var(--radius-lg); padding:26px; border:1px solid var(--stroke);}
.lp-compare-col.them{background:var(--panel);}
.lp-compare-col.us{background:linear-gradient(160deg,#0C2A55,#0E6D66); color:#fff; border-color:transparent; position:relative; overflow:hidden;}
.lp-compare-col.us::before{content:''; position:absolute; inset:0; background:radial-gradient(280px 200px at 90% 0%, rgba(255,255,255,.14), transparent 60%);}
.lp-compare-col h4{font-family:var(--font-display); font-size:16px; margin-bottom:16px; position:relative;}
.lp-compare-row{display:flex; align-items:flex-start; gap:10px; font-size:13px; padding:9px 0; border-bottom:1px solid rgba(148,163,184,.14); position:relative;}
.lp-compare-col.us .lp-compare-row{border-bottom-color:rgba(255,255,255,.14);}
.lp-compare-row:last-child{border-bottom:none;}
.lp-compare-row svg{width:16px; height:16px; flex-shrink:0; margin-top:1px;}
.lp-compare-col.them .lp-compare-row svg{color:var(--coral);}
.lp-compare-col.us .lp-compare-row svg{color:#6FE3C7;}
@media (max-width:640px){ .lp-compare{grid-template-columns:1fr;} }

/* membership tiers */
.lp-tier-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.lp-tier{background:var(--panel); border:1px solid var(--stroke); border-radius:var(--radius-lg); padding:26px; display:flex; flex-direction:column; transition:transform .3s var(--ease), border-color .3s;}
.lp-tier:hover{transform:translateY(-5px);}
.lp-tier.featured{border-color:var(--sky); background:linear-gradient(180deg, rgba(23,138,84,.08), var(--panel) 30%); position:relative;}
.lp-tier-badge{position:absolute; top:-12px; right:20px; background:linear-gradient(135deg,var(--sky),var(--teal)); color:#052A18; font-size:10.5px; font-weight:700; padding:5px 12px; border-radius:20px; letter-spacing:.03em;}
.lp-tier h4{font-family:var(--font-display); font-size:17px; margin-bottom:4px;}
.lp-tier .lp-tier-sub{font-size:12px; color:var(--text-faint); margin-bottom:16px;}
.lp-tier-price{font-family:var(--font-mono); font-size:26px; font-weight:700; margin-bottom:18px;}
.lp-tier-price span{font-size:12px; font-weight:500; color:var(--text-faint);}
.lp-tier-list{list-style:none; margin-bottom:20px; flex:1;}
.lp-tier-list li{display:flex; align-items:flex-start; gap:9px; font-size:12.5px; color:var(--text-dim); padding:7px 0; line-height:1.5;}
.lp-tier-list li svg{width:15px; height:15px; color:var(--teal); flex-shrink:0; margin-top:1px;}

/* membership groups & batches */
.mg-card{gap:14px;}
.mg-card-head{display:flex; align-items:flex-start; gap:12px;}
.mg-card-head .plan-tag{flex-shrink:0;}
.mg-card-titles{min-width:0;}
.mg-card-titles h4{font-family:var(--font-display); font-size:15.5px; margin-bottom:2px;}
.mg-card-titles span{font-size:11.5px; color:var(--text-faint);}
.mg-card p.mg-desc{font-size:12.5px; color:var(--text-dim); line-height:1.6;}
.mg-batch-chips{display:flex; flex-wrap:wrap; gap:6px;}
.mg-chip{font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:20px; white-space:nowrap;}
.mg-chip.open{color:var(--teal); background:rgba(23,138,84,.13);}
.mg-chip.filling{color:var(--amber); background:rgba(217,169,59,.15);}
.mg-chip.full{color:var(--coral); background:rgba(179,69,47,.13);}
.mg-card-foot{display:flex; gap:8px; margin-top:auto;}
.mg-card-foot .btn{flex:1;}

.mg-detail-batch{border:1px solid var(--stroke); border-radius:14px; padding:14px; margin-bottom:10px;}
.mg-detail-batch:last-child{margin-bottom:0;}
.mg-detail-batch-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; gap:10px;}
.mg-detail-batch-top b{font-size:13.5px;}
.mg-detail-meta{display:flex; justify-content:space-between; font-size:11.5px; color:var(--text-faint); margin-top:6px;}

.mg-select-card{display:flex; align-items:flex-start; gap:12px; border:1px solid var(--stroke-2); border-radius:14px; padding:14px; margin-bottom:10px; cursor:pointer; transition:border-color .2s var(--ease), background .2s var(--ease);}
.mg-select-card:hover{border-color:var(--stroke-2);}
.mg-select-card.selected{border-color:var(--sky); background:rgba(23,138,84,.07);}
.mg-select-card input{accent-color:var(--sky); width:16px; height:16px; margin-top:2px; flex-shrink:0;}
.mg-select-body{flex:1; min-width:0;}
.mg-select-body b{font-size:13px; display:block;}
.mg-select-body span.mg-sub{font-size:11px; color:var(--text-faint);}
.mg-empty{text-align:center; padding:30px 10px; color:var(--text-dim); font-size:13px;}
.mg-status-banner{display:flex; align-items:center; gap:14px; background:linear-gradient(135deg,#0C2A55,#123A63 60%,#0E6D66); color:#fff; border-radius:var(--radius-lg); padding:18px 20px; margin-bottom:18px;}
.mg-status-banner b{display:block; font-family:var(--font-display); font-size:15px;}
.mg-status-banner span{font-size:12px; color:rgba(255,255,255,.75);}

.lp-calc-panel{display:grid; grid-template-columns:1fr 1fr; gap:0; background:var(--panel); border:1px solid var(--stroke); border-radius:var(--radius-lg); overflow:hidden;}
.lp-calc-form{padding:32px;}
.lp-calc-result{padding:32px; background:linear-gradient(160deg,#0C2A55,#0E6D66); color:#fff; display:flex; flex-direction:column; justify-content:center;}
.lp-calc-result .kpi-label{color:rgba(255,255,255,.7);}
.lp-calc-result .kpi-value{color:#fff; font-size:32px; margin:6px 0 18px;}
@media (max-width:860px){.lp-calc-panel{grid-template-columns:1fr;}}

.lp-slider{position:relative; max-width:920px; margin:0 auto;}
.lp-slider-viewport{overflow:hidden; border-radius:var(--radius-lg);}
.lp-slider-track{display:flex; transition:transform .55s var(--ease);}
.lp-slider-track .lp-quote{flex:0 0 100%; max-width:100%;}
.lp-slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%;
  background:var(--panel); border:1px solid var(--stroke-2); display:flex; align-items:center; justify-content:center;
  color:var(--text); box-shadow:var(--shadow-lift); z-index:5;
}
.lp-slider-arrow:hover{border-color:var(--sky);}
.lp-slider-arrow.prev{left:-8px;}
.lp-slider-arrow.next{right:-8px;}
.lp-slider-arrow svg{width:16px; height:16px;}
.lp-slider-dots{display:flex; gap:8px; justify-content:center; margin-top:18px;}
.lp-slider-dot{width:8px; height:8px; border-radius:50%; background:var(--stroke-2); border:none; padding:0; transition:width .25s var(--ease), background .25s var(--ease);}
.lp-slider-dot.active{width:24px; border-radius:6px; background:linear-gradient(90deg,var(--sky),var(--teal));}
@media (max-width:640px){ .lp-slider-arrow{display:none;} }

.lp-testimonial-track{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.lp-quote{background:var(--panel); border:1px solid var(--stroke); border-radius:var(--radius-lg); padding:24px;}
.lp-quote .stars{color:var(--amber); font-size:13px; margin-bottom:12px; letter-spacing:2px;}
.lp-quote p{font-size:13.5px; color:var(--text-dim); line-height:1.7; margin-bottom:16px;}
.lp-quote-who{display:flex; align-items:center; gap:10px;}
.lp-quote-who b{font-size:12.5px; display:block;}
.lp-quote-who span{font-size:11px; color:var(--text-faint);}

.lp-faq-item{border-bottom:1px solid var(--stroke); padding:16px 0;}
.lp-faq-q{display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:14px; font-weight:600;}
.lp-faq-q svg{width:16px; height:16px; color:var(--text-faint); transition:transform .3s var(--ease); flex-shrink:0;}
.lp-faq-item.open .lp-faq-q svg{transform:rotate(45deg);}
.lp-faq-a{max-height:0; overflow:hidden; transition:max-height .35s var(--ease);}
.lp-faq-item.open .lp-faq-a{max-height:200px;}
.lp-faq-a p{font-size:13px; color:var(--text-dim); padding-top:12px; line-height:1.7;}

.lp-cta{margin:5vw 6vw; border-radius:var(--radius-lg); padding:60px 40px; text-align:center; position:relative; overflow:hidden;
  background:linear-gradient(120deg,#0C2A55 0%,#123A63 45%,#0E6D66 100%); color:#fff;}
.lp-cta::before{content:''; position:absolute; inset:0; background:radial-gradient(420px 260px at 88% 6%, rgba(255,255,255,.16), transparent 65%);}
.lp-cta h2{font-family:var(--font-display); font-size:clamp(24px,3.4vw,36px); margin-bottom:14px; position:relative;}
.lp-cta p{color:rgba(255,255,255,.78); max-width:460px; margin:0 auto 26px; position:relative;}
.lp-cta .hero-actions{justify-content:center; position:relative;}

.lp-footer{padding:50px 6vw 30px; border-top:1px solid var(--stroke);}
.lp-footer-grid{display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:24px; margin-bottom:36px;}
.lp-footer-grid h5{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); margin-bottom:14px;}
.lp-footer-grid a{display:block; font-size:13px; color:var(--text-dim); margin-bottom:10px;}
.lp-footer-grid a:hover{color:var(--sky);}
.lp-footer-bottom{display:flex; justify-content:space-between; font-size:12px; color:var(--text-faint); flex-wrap:wrap; gap:10px;}

.lp-app-panel{
  margin:0 6vw; border-radius:var(--radius-lg); padding:48px 40px; position:relative; overflow:hidden;
  background:linear-gradient(120deg,#0C2A55 0%,#123A63 45%,#0E6D66 100%);
  display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:center;
}
.lp-app-panel::before{content:''; position:absolute; inset:0; background:radial-gradient(380px 260px at 90% 10%, rgba(255,255,255,.14), transparent 60%);}
.lp-app-copy{position:relative;}
.lp-app-badges{display:flex; gap:12px; flex-wrap:wrap;}
.app-badge{display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:12px; padding:10px 16px; color:#fff;}
.app-badge:hover{background:rgba(255,255,255,.2);}
.app-badge span{display:block; font-size:9px; opacity:.75; letter-spacing:.04em;}
.app-badge b{display:block; font-size:14px; font-family:var(--font-display);}
.lp-app-mock{position:relative; display:flex; justify-content:center;}
.lp-app-phone{width:200px; border-radius:28px; background:#052A18; border:6px solid rgba(255,255,255,.18); box-shadow:0 30px 60px -20px rgba(0,0,0,.5); position:relative; animation:floaty 6s ease-in-out infinite;}
.lp-app-phone-notch{width:60px; height:16px; background:rgba(255,255,255,.18); border-radius:0 0 10px 10px; margin:0 auto;}
@media (max-width:860px){ .lp-app-panel{grid-template-columns:1fr; text-align:center;} .lp-app-badges{justify-content:center;} .lp-trust{justify-content:center;} .lp-app-mock{display:none;} }

/* ============ FLOATING WHATSAPP ============ */
.wa-fab{position:fixed; bottom:24px; right:22px; z-index:250; width:58px; height:58px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 14px 30px -10px rgba(37,211,102,.6); border:none; cursor:pointer; transition:transform .2s var(--ease);}
.wa-fab:hover{transform:scale(1.07);}
.wa-fab svg{width:29px; height:29px;}
.wa-fab .dot-ping{top:2px; right:2px;}
.wa-panel{
  position:fixed; bottom:92px; right:22px; z-index:250; width:310px; max-width:calc(100vw - 32px);
  background:var(--panel); border:1px solid var(--stroke-2); border-radius:20px; box-shadow:var(--shadow-lift);
  overflow:hidden; transform:translateY(16px) scale(.96); opacity:0; visibility:hidden; transition:.3s var(--ease);
}
.wa-panel.show{transform:translateY(0) scale(1); opacity:1; visibility:visible;}
.wa-panel-head{background:#075E54; color:#fff; padding:16px 18px; display:flex; align-items:center; gap:10px;}
.wa-panel-head b{display:block; font-size:13.5px;}
.wa-panel-head span{font-size:11px; opacity:.8; display:flex; align-items:center; gap:5px;}
.wa-panel-head span::before{content:''; width:7px; height:7px; border-radius:50%; background:#4AFF8C;}
.wa-panel-body{padding:16px 18px; background:#ECE5DD;}
[data-theme="dark"] .wa-panel-body{background:#0B1120;}
.wa-msg{background:#fff; border-radius:12px 12px 12px 2px; padding:10px 13px; font-size:12.5px; color:#111; max-width:88%; box-shadow:0 1px 2px rgba(0,0,0,.08);}
[data-theme="dark"] .wa-msg{background:var(--panel-2); color:var(--text);}
.wa-panel-foot{padding:14px 18px; display:flex; flex-direction:column; gap:8px;}
.wa-quick{display:block; width:100%; text-align:left; background:var(--panel-2); border:1px solid var(--stroke-2); border-radius:10px; padding:9px 12px; font-size:12.5px; color:var(--text);}
.wa-quick:hover{border-color:#25D366;}
@media (max-width:640px){ .wa-fab{bottom:18px; right:16px; width:52px; height:52px;} .wa-panel{right:12px; bottom:82px;} }


@media (max-width:860px){
  .lp-hero{grid-template-columns:1fr; padding-top:14vw;}
  .lp-hero-visual{display:none;}
  .lp-stats-strip{grid-template-columns:repeat(2,1fr); margin:0;}
  .lp-feature-grid{grid-template-columns:1fr;}
  .lp-testimonial-track{grid-template-columns:1fr;}
  .lp-footer-grid{grid-template-columns:1fr 1fr;}
}

/* ============ WALLET IDENTITY CARD ============ */
.identity-card{background:linear-gradient(135deg,#0C2A55,#123A63 60%,#0E6D66); border-radius:var(--radius-lg); padding:22px; color:#fff; position:relative; overflow:hidden; margin-bottom:16px;}
.identity-card::before{content:''; position:absolute; inset:0; background:radial-gradient(260px 180px at 90% 100%, rgba(255,255,255,.14), transparent 60%);}
.identity-row{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px; position:relative;}
.identity-row:last-child{margin-bottom:0;}
.identity-label{font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.6); margin-bottom:4px;}
.identity-value{font-family:var(--font-mono); font-size:13.5px; word-break:break-all;}
.identity-copy{width:32px; height:32px; border-radius:9px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0;}
.identity-copy svg{width:14px; height:14px;}
.identity-copy:hover{background:rgba(255,255,255,.22);}

/* ============ PROFILE PAGE ============ */
.profile-banner{height:130px; border-radius:var(--radius-lg) var(--radius-lg) 0 0; background:linear-gradient(120deg,#0C2A55,#123A63,#0E6D66); position:relative;}
.profile-head{background:var(--panel); border:1px solid var(--stroke); border-top:none; border-radius:0 0 var(--radius-lg) var(--radius-lg); padding:0 26px 22px; margin-bottom:22px;}
.profile-avatar-wrap{display:flex; align-items:flex-end; gap:16px; margin-top:-38px; padding-bottom:16px;}
.profile-avatar{width:86px; height:86px; border-radius:22px; border:4px solid var(--panel); background:linear-gradient(135deg,var(--sky),var(--teal)); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:30px; color:#fff; position:relative;}
.profile-avatar-edit{position:absolute; bottom:-4px; right:-4px; width:26px; height:26px; border-radius:8px; background:var(--panel-2); border:1px solid var(--stroke-2); display:flex; align-items:center; justify-content:center; color:var(--text-dim);}
.profile-avatar-edit svg{width:12px; height:12px;}
.profile-name{padding-bottom:14px;}
.profile-name h2{font-family:var(--font-display); font-size:19px;}
.profile-name span{font-size:12.5px; color:var(--text-faint);}

/* ============ KYC PAGE ============ */
.kyc-stepper{display:flex; align-items:center; margin-bottom:24px; overflow-x:auto; padding-bottom:6px;}
.kyc-step{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.kyc-step-dot{width:34px; height:34px; border-radius:50%; background:var(--panel-2); border:2px solid var(--stroke-2); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--text-faint); flex-shrink:0;}
.kyc-step.done .kyc-step-dot{background:var(--teal); border-color:var(--teal); color:#04241F;}
.kyc-step.active .kyc-step-dot{border-color:var(--sky); color:var(--sky);}
.kyc-step span{font-size:12.5px; font-weight:600; color:var(--text-faint); white-space:nowrap;}
.kyc-step.done span, .kyc-step.active span{color:var(--text);}
.kyc-step-line{width:44px; height:2px; background:var(--stroke-2); margin:0 8px; flex-shrink:0;}
.kyc-step.done + .kyc-step-line{background:var(--teal);}
.upload-box{border:1.5px dashed var(--stroke-2); border-radius:14px; padding:26px; text-align:center; cursor:pointer; transition:border-color .2s, background .2s;}
.upload-box:hover{border-color:var(--sky); background:var(--panel-2);}
.upload-box svg{width:26px; height:26px; color:var(--text-faint); margin-bottom:10px;}
.upload-box b{display:block; font-size:13px; margin-bottom:4px;}
.upload-box span{font-size:11.5px; color:var(--text-faint);}
.upload-box.filled{border-color:var(--teal); border-style:solid; background:rgba(23,138,84,.06);}
.timeline{position:relative; padding-left:26px;}
.timeline::before{content:''; position:absolute; left:6px; top:4px; bottom:4px; width:2px; background:var(--stroke-2);}
.timeline-item{position:relative; padding-bottom:22px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-dot{position:absolute; left:-26px; top:2px; width:14px; height:14px; border-radius:50%; background:var(--panel-2); border:2px solid var(--text-faint);}
.timeline-item.done .timeline-dot{background:var(--teal); border-color:var(--teal);}
.timeline-item.active .timeline-dot{background:var(--sky); border-color:var(--sky); box-shadow:0 0 0 4px rgba(23,138,84,.18);}
.timeline-item b{font-size:13px; display:block;}
.timeline-item span{font-size:11.5px; color:var(--text-faint);}

/* ============ SUPPORT / HELP DESK ============ */
.ticket-row{display:flex; align-items:center; gap:14px; padding:14px 4px; border-bottom:1px solid var(--stroke); cursor:pointer; transition:background .2s;}
.ticket-row:hover{background:var(--panel-2);}
.ticket-row:last-child{border-bottom:none;}
.ticket-id{font-family:var(--font-mono); font-size:11.5px; color:var(--text-faint); width:88px; flex-shrink:0;}
.ticket-priority{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
.priority-high{background:var(--coral);}
.priority-medium{background:var(--amber);}
.priority-low{background:var(--teal);}
.ticket-body{flex:1; min-width:0;}
.ticket-body b{font-size:13.5px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ticket-body span{font-size:11.5px; color:var(--text-faint);}
.help-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px;}
.help-card{background:var(--panel); border:1px solid var(--stroke); border-radius:var(--radius-md); padding:18px; text-align:center; transition:transform .25s var(--ease), border-color .25s;}
.help-card:hover{transform:translateY(-4px); border-color:var(--sky);}
.help-card .plan-tag{margin:0 auto 12px;}
.help-card b{font-size:13px; display:block; margin-bottom:3px;}
.help-card span{font-size:11px; color:var(--text-faint);}
.chat-bubble{max-width:80%; padding:11px 14px; border-radius:14px; font-size:12.5px; line-height:1.5; margin-bottom:10px;}
.chat-bubble.them{background:var(--panel-2); border:1px solid var(--stroke);}
.chat-bubble.me{background:linear-gradient(135deg,var(--sky),var(--teal)); color:#052A18; margin-left:auto; font-weight:500;}
.chat-time{font-size:10px; color:var(--text-faint); margin-top:4px;}

/* ============ ESCROW ============ */
.escrow-card{background:var(--panel); border:1px solid var(--stroke); border-radius:var(--radius-lg); padding:20px; margin-bottom:14px;}
.escrow-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; gap:10px;}
.escrow-parties{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--text-dim); margin-bottom:16px;}
.escrow-party{display:flex; align-items:center; gap:6px;}
.escrow-party .dot{width:7px; height:7px; border-radius:50%;}
.escrow-arrow{color:var(--text-faint);}
.escrow-actions{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;}

/* ============ VAS VERIFICATION BAR ============ */
.verify-bar{display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; padding:8px 11px; border-radius:9px; margin-top:8px;}
.verify-bar.shimmer{background:var(--panel-2); color:var(--text-faint);}
.verify-bar.verified{background:rgba(23,138,84,.13); color:var(--teal);}
.verify-bar.unknown{background:rgba(217,169,59,.14); color:var(--amber);}

/* ============ TYPING INDICATOR (AI help) ============ */
.typing-dots{display:inline-flex; gap:3px; padding:4px 0;}
.typing-dots span{width:6px; height:6px; border-radius:50%; background:var(--text-faint); animation:typingBounce 1.2s infinite;}
.typing-dots span:nth-child(2){animation-delay:.15s;}
.typing-dots span:nth-child(3){animation-delay:.3s;}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0); opacity:.5;} 30%{transform:translateY(-4px); opacity:1;}}

/* ============ SKELETON ============ */
.skel{background:linear-gradient(100deg, var(--panel-2) 30%, var(--stroke-2) 50%, var(--panel-2) 70%); background-size:200% 100%; animation:skelShine 1.4s ease-in-out infinite; border-radius:8px;}
@keyframes skelShine{0%{background-position:200% 0;} 100%{background-position:-200% 0;}}

/* SweetAlert custom theme */
.fqi-popup{background:var(--panel) !important; color:var(--text) !important; border-radius:22px !important; border:1px solid var(--stroke-2) !important; font-family:var(--font-body) !important;}
.fqi-title{font-family:var(--font-display) !important; font-weight:700 !important;}
.fqi-confirm{background:linear-gradient(135deg,var(--sky),var(--teal)) !important; color:#052A18 !important; font-weight:700 !important; border-radius:11px !important; padding:10px 22px !important; box-shadow:0 10px 26px -10px rgba(23,138,84,.6) !important;}
.fqi-cancel{background:var(--panel-2) !important; color:var(--text) !important; border:1px solid var(--stroke-2) !important; border-radius:11px !important; font-weight:600 !important;}

/* ============ BASIC / BUSINESS CALCULATOR ============ */
.calc-screen{background:var(--panel-2); border:1px solid var(--stroke-2); border-radius:14px; padding:18px 16px; margin-bottom:14px; text-align:right;}
.calc-screen .calc-history{font-size:12px; color:var(--text-faint); min-height:16px; font-family:var(--font-mono); overflow-x:auto; white-space:nowrap;}
.calc-screen .calc-display{font-family:var(--font-mono); font-size:30px; font-weight:600; margin-top:4px; overflow-x:auto; white-space:nowrap;}
.calc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.calc-btn{padding:16px 0; border-radius:12px; border:1px solid var(--stroke-2); background:var(--panel-2); font-size:16px; font-weight:600; color:var(--text); text-align:center;}
.calc-btn:hover{border-color:var(--sky);}
.calc-btn:active{transform:scale(.96);}
.calc-btn.op{background:rgba(23,138,84,.12); color:var(--sky); border-color:rgba(23,138,84,.25);}
.calc-btn.fn{background:rgba(179,69,47,.1); color:var(--coral); border-color:rgba(179,69,47,.2);}
.calc-btn.eq{background:linear-gradient(135deg,var(--sky),var(--teal)); color:#052A18; border-color:transparent; grid-row:span 1;}
.calc-btn.zero{grid-column:span 2;}

/* ============ PAYSTACK CHECKOUT: instructions, uploads, redirect note ============ */
.pstk-redirect-note{
  display:flex; align-items:flex-start; gap:9px; font-size:12.5px; color:var(--text-dim); line-height:1.6;
  background:var(--panel-2); border:1px solid var(--stroke); border-radius:12px; padding:12px 14px; margin-bottom:18px;
}
.pstk-redirect-note svg{color:var(--sky); flex-shrink:0; margin-top:1px;}
.pstk-powered{display:flex; align-items:center; justify-content:center; gap:6px; font-size:11px; color:var(--text-faint); margin-top:14px;}
.pstk-steps{margin-bottom:16px;}
.pstk-step{display:flex; align-items:flex-start; gap:10px; font-size:12.5px; color:var(--text-dim); line-height:1.6; padding:7px 0;}
.pstk-step span{
  flex-shrink:0; width:20px; height:20px; border-radius:50%; background:rgba(23,138,84,.14); color:var(--sky);
  font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:1px; font-family:var(--font-mono);
}
.pstk-step b{color:var(--text);}
.pstk-warn{display:flex; align-items:flex-start; gap:9px; font-size:12px; color:var(--amber); background:rgba(217,169,59,.1); border:1px solid rgba(217,169,59,.25); border-radius:12px; padding:11px 13px; margin:4px 0 16px; line-height:1.6;}
.pstk-warn svg{flex-shrink:0; margin-top:1px;}
.pstk-countdown{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--amber); font-family:var(--font-mono); margin-top:8px; justify-content:center;}
.pstk-upload{
  display:flex; align-items:center; gap:10px; border:1.5px dashed var(--stroke-2); border-radius:12px; padding:14px 16px;
  cursor:pointer; font-size:12.5px; color:var(--text-dim); transition:border-color .2s, background .2s;
}
.pstk-upload:hover{border-color:var(--sky); background:var(--panel-2);}
.pstk-upload svg{flex-shrink:0; color:var(--text-faint);}
.pstk-upload.filled{border-style:solid; border-color:var(--teal); background:rgba(23,138,84,.06); color:var(--text);}
.pstk-upload.filled svg{color:var(--teal);}
.pstk-qr{width:88px; height:88px; border-radius:10px; overflow:hidden; box-shadow:0 8px 20px -8px rgba(0,0,0,.4);}

/* ============ SIMULATED PAYSTACK INLINE POPUP ============ */
.pstk-inline-overlay{
  position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center; padding:16px;
  background:rgba(1,7,20,.72); backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:opacity .25s var(--ease), visibility .25s;
}
.pstk-inline-overlay.show{opacity:1; visibility:visible;}
.pstk-inline-window{
  width:100%; max-width:400px; background:#fff; color:#0B1128; border-radius:16px; overflow:hidden;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.6); transform:translateY(16px) scale(.97); transition:transform .3s var(--ease);
}
.pstk-inline-overlay.show .pstk-inline-window{transform:translateY(0) scale(1);}
.pstk-inline-head{background:#011B33; color:#fff; padding:20px 22px; position:relative;}
.pstk-inline-head .close{position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,.12); border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.pstk-inline-brand{display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; opacity:.85; margin-bottom:14px;}
.pstk-inline-merchant{font-size:13px; opacity:.75;}
.pstk-inline-amount{font-family:var(--font-mono); font-size:26px; font-weight:700; margin-top:4px;}
.pstk-inline-body{padding:22px;}
.pstk-inline-channels{display:flex; gap:8px; margin-bottom:16px;}
.pstk-inline-channel{flex:1; padding:10px 6px; border:1.5px solid #E4E9F2; border-radius:10px; text-align:center; font-size:11.5px; font-weight:600; color:#5C6B85; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:5px;}
.pstk-inline-channel.active{border-color:#00C3F8; color:#011B33; background:#EFFBFF;}
.pstk-inline-field{margin-bottom:12px;}
.pstk-inline-field label{display:block; font-size:11px; font-weight:600; color:#5C6B85; margin-bottom:6px;}
.pstk-inline-field input{width:100%; padding:11px 13px; border-radius:9px; border:1.5px solid #E4E9F2; font-size:13.5px; color:#0B1128; font-family:inherit;}
.pstk-inline-field input:focus{outline:none; border-color:#00C3F8;}
.pstk-inline-row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.pstk-inline-pay{width:100%; padding:13px; border-radius:10px; border:none; background:#00C3F8; color:#011B33; font-weight:700; font-size:14px; cursor:pointer; margin-top:6px;}
.pstk-inline-pay:hover{filter:brightness(1.05);}
.pstk-inline-secure{display:flex; align-items:center; justify-content:center; gap:6px; font-size:10.5px; color:#8895AC; margin-top:14px;}
.pstk-inline-loading, .pstk-inline-success{padding:50px 22px; text-align:center;}
.pstk-inline-loading .spin-basic{color:#00C3F8;}
.pstk-inline-loading p{margin-top:14px; font-size:13px; color:#5C6B85;}
.pstk-inline-success svg{color:#178A54;}
.pstk-inline-success h4{font-family:var(--font-display); font-size:16px; margin:12px 0 4px; color:#0B1128;}
.pstk-inline-success p{font-size:12.5px; color:#5C6B85;}

/* ============ PAGE-LOAD SPINNER (route changes) ============ */
.page-loader{
  position:fixed; top:var(--topbar-h); left:var(--sidebar-w); right:0; bottom:0; z-index:25;
  background:var(--ink); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px;
  opacity:0; visibility:hidden; transition:opacity .22s var(--ease), visibility .22s;
}
.page-loader.show{opacity:1; visibility:visible;}
.page-loader .orbit-loader{width:42px; height:42px;}
.page-loader p{font-size:12px; color:var(--text-faint); letter-spacing:.03em;}
@media (max-width:860px){ .page-loader{left:0;} }

/* ============================================================
   Enterprise polish layer (additive-only — no existing rules
   touched or removed, so nothing above this line changes
   behaviour). Sharpens modals/forms for the new Frontier Quest
   palette: gradient accent, deeper elevation, richer focus state.
   ============================================================ */
.modal-card{
  box-shadow:0 30px 90px -24px rgba(6,7,20,.55), 0 0 0 1px var(--stroke) inset;
  position:relative;
  overflow:hidden;
}
.modal-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--sky),var(--teal) 55%,var(--amber));
}
.input, select.input, textarea.input{
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.input:focus, select.input:focus, textarea.input:focus{
  border-color:var(--sky);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--sky) 18%, transparent);
  outline:none;
}
.field.error .input, .field.error select.input{
  box-shadow:0 0 0 4px color-mix(in srgb, var(--coral) 16%, transparent);
}
.btn-primary, button.primary, .primary-btn{
  background:linear-gradient(135deg,var(--sky),var(--sky-2));
}
.status-pill{
  font-weight:700; letter-spacing:.02em;
}
.kpi-card, .plan-card, .modal-card, .panel-card{
  transition:box-shadow .2s var(--ease), transform .2s var(--ease);
}
.chip{
  transition:border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}
.chip:hover{
  border-color:var(--sky);
  color:var(--sky);
}
.field label{
  display:flex; align-items:center; gap:6px;
}
#wd-send-otp, #wd-otp{
  font-family:var(--font-mono);
  letter-spacing:.06em;
}
.status-pill.success::before, .status-pill.pending::before, .status-pill.failed::before{
  content:"●"; margin-right:5px; font-size:9px; vertical-align:1px;
}

/* SweetAlert2 form inputs (the <input class="swal2-input"> pattern used
   by several confirm-with-input prompts — savings plan creation, escrow
   creation, VAS number entry) ship with SweetAlert2's own stock white
   input styling, which doesn't inherit .input's theme at all. Scoped to
   .fqi-popup (set via the Swal.mixin() in modal.js) so every such prompt
   matches the rest of the app's form fields without touching each call
   site individually. */
.fqi-popup .swal2-input,
.fqi-popup .swal2-textarea,
.fqi-popup .swal2-select{
  width:auto; padding:12px 14px !important; border-radius:11px !important; border:1px solid var(--stroke-2) !important;
  background:var(--panel-2) !important; color:var(--text) !important; font-size:13.5px !important; font-family:inherit !important;
  box-shadow:none !important; transition:border-color .2s, box-shadow .2s;
}
.fqi-popup .swal2-input:focus,
.fqi-popup .swal2-textarea:focus,
.fqi-popup .swal2-select:focus{
  outline:none !important; border-color:var(--sky) !important; box-shadow:0 0 0 3px rgba(23,138,84,.15) !important;
}
.fqi-popup .swal2-input::placeholder,
.fqi-popup .swal2-textarea::placeholder{ color:var(--text-faint) !important; opacity:1 !important; }
.fqi-popup .swal2-validation-message{
  background:var(--panel-2) !important; color:var(--coral) !important; border:1px solid var(--stroke-2) !important;
}
.fqi-popup label.swal2-input-label, .fqi-popup .swal2-html-container{ color:var(--text-dim) !important; }