/* ============================================================
   POSA by InTrust — design system (mockup parity: green/cream)
   Deep Green #0E5F4A · Primary Green #18A66A · Light Green #9BE7B1
   Cream #FFF8EA · Cream Orange #F4A340 · Bluish #2F80ED
   ============================================================ */
:root{
  --green-900:#0E5F4A; --green-800:#12705A; --green-700:#14905F; --green-600:#18A66A;
  --green-500:#2BBE7F; --green-300:#9BE7B1; --green-100:#DFF6E7;
  --soft-green:#EAF8EF; --cream:#FFF8EA; --cream-soft:#FFFDF6;
  --orange:#F4A340; --orange-soft:#FFF1DC; --orange-deep:#C56A0E;
  --blue:#2F80ED; --soft-blue:#EAF4FF; --blue-deep:#1B62C4;
  --ink:#123B33; --ink-2:#1E5248; --muted:#6B857E; --faint:#9DB3AC;
  --line:#E4EADF; --line-strong:#CFDBCE; --white:#FFFFFF;
  --red:#E5533D; --red-soft:#FDEAE7;
  --bg:var(--cream);
  --surface:var(--white); --surface2:#F7FCF8;
  --border:var(--line); --border-strong:var(--line-strong);
  --text:var(--ink); --muted-c:var(--muted);
  --acc1:#18A66A; --acc2:#2F80ED;
  --grad:linear-gradient(120deg,#0E5F4A,#18A66A);
  --grad-orange:linear-gradient(120deg,#F4A340,#E8862E);
  --up:#14905F; --down:var(--red); --warn:var(--orange);
  --radius:16px; --radius-sm:10px;
  --shadow:0 10px 34px rgba(14,95,74,.08);
  --shadow-lg:0 22px 60px rgba(14,95,74,.16);
  --font:"Inter","SF Pro Display",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,canvas{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:14.5px;color:var(--ink);background:var(--white);border:1.5px solid var(--line-strong);border-radius:12px;padding:11px 13px;width:100%;outline:none;transition:border .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--green-600);box-shadow:0 0 0 3.5px rgba(24,166,106,.16)}
::placeholder{color:var(--faint)}
code,.mono{font-family:var(--mono);font-size:.86em;background:var(--soft-green);border:1px solid var(--green-100);padding:1px 6px;border-radius:6px}
.block{display:block}
.muted{color:var(--muted)} .tiny{font-size:11.5px;color:var(--faint)}
.up{color:var(--green-700)} .down{color:var(--red)} .ok-text{color:var(--green-700)} .warn-text{color:var(--orange-deep)} .accent{color:var(--green-600)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.center{text-align:center}
.hidden{display:none!important}
.inline{display:inline}

/* ---------- soft background orbs ---------- */
.bg-orbs{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.14}
.orb-a{width:520px;height:520px;background:#9BE7B1;top:-180px;left:-120px}
.orb-b{width:460px;height:460px;background:#BFE0F5;bottom:-160px;right:-100px}
.orb-c{width:300px;height:300px;background:#FBE3BC;top:38%;left:55%;opacity:.1}

/* ---------- container / grid ---------- */
.container{width:min(1180px,92%);margin-inline:auto}
.page{padding:26px 0 90px;display:flex;flex-direction:column;gap:20px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
.page-head h1,.greet h1{font-size:clamp(22px,3vw,30px);letter-spacing:-.02em;color:var(--green-900)}
.page-head p,.greet p{font-size:13px}
.section{padding:64px 0;position:relative}
.section.alt{background:var(--white);border-block:1px solid var(--line)}
.section-head{margin-bottom:30px}
.section-head h2{font-size:clamp(23px,3vw,32px);letter-spacing:-.02em;color:var(--green-900)}
.row-between{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:0 2px 10px rgba(14,95,74,.04)}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;font-weight:700;font-size:14.5px;flex-wrap:wrap}
.card-foot{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);display:flex;gap:14px;flex-wrap:wrap}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:12px;padding:10px 18px;font-weight:700;font-size:14px;border:1.5px solid transparent;transition:transform .12s,box-shadow .2s,background .2s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(24,166,106,.3)}
.btn-primary:hover{box-shadow:0 10px 26px rgba(24,166,106,.42)}
.btn-ghost{background:var(--white);border-color:var(--line-strong);color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--green-500)}
.btn-lg{padding:13px 26px;font-size:15px;border-radius:14px}
.btn-sm{padding:7px 13px;font-size:12.5px;border-radius:10px}
.btn-block{width:100%}
.btn-row{display:flex;gap:6px;flex-wrap:wrap}
.btn-row .btn{margin:2px 0}
.icon-btn{background:var(--white);border:1.5px solid var(--line-strong);border-radius:11px;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);position:relative;transition:background .15s}
.icon-btn:hover{border-color:var(--green-500);color:var(--green-700)}
.icon-btn .dot{position:absolute;top:-5px;right:-5px;background:var(--orange);color:#fff;font-size:10px;font-weight:800;border-radius:99px;min-width:17px;height:17px;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* ---------- badges / pills ---------- */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border-radius:99px;padding:4px 10px;background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--muted)}
.badge-ok{background:var(--soft-green);border-color:var(--green-100);color:var(--green-700)}
.badge-err{background:var(--red-soft);border-color:#F8D4CE;color:var(--red)}
.badge-warn{background:var(--orange-soft);border-color:#FBE3BC;color:var(--orange-deep)}
.badge-violet{background:var(--soft-blue);border-color:#D6E7FC;color:var(--blue-deep)}
.badge-neutral{background:#F2F5F0;border-color:var(--line);color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--green-700);background:var(--soft-green);border:1px solid var(--green-100);padding:6px 14px;border-radius:99px;margin-bottom:14px}
.pill-dot{width:8px;height:8px;border-radius:99px;background:var(--green-500);box-shadow:0 0 0 4px rgba(24,166,106,.15);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ---------- app shell: cream sidebar + white topbar (mockup 01) ---------- */
.app-header{position:sticky;top:0;z-index:60;background:rgba(255,248,234,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:22px;height:62px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--green-900)}
.brand-mark{color:#fff;display:flex;width:34px;height:34px;border-radius:11px;background:var(--grad);align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(24,166,106,.35)}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-text small{font-size:8px;font-weight:800;letter-spacing:.24em;color:var(--green-600)}
.nav-desktop{display:flex;gap:4px;margin-left:8px}
.nav-desktop a{padding:8px 13px;border-radius:10px;font-size:13px;font-weight:600;color:var(--ink-2);transition:.15s}
.nav-desktop a:hover{color:var(--green-700);background:var(--soft-green)}
.nav-desktop a.active{color:var(--green-700);background:var(--soft-green)}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:9px}
.avatar{width:36px;height:36px;border-radius:99px;background:var(--grad);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:14px}
.avatar-menu{position:relative}
.avatar-drop{position:absolute;right:0;top:46px;width:250px;background:var(--white);border:1px solid var(--line-strong);border-radius:14px;padding:8px;box-shadow:var(--shadow-lg);display:none;z-index:70}
.avatar-drop.open{display:block}
.avatar-drop a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:9px;font-size:13px;font-weight:600}
.avatar-drop a:hover{background:var(--soft-green);color:var(--green-700)}
.avatar-drop a.danger,.danger{color:var(--red)!important}
.drop-head{padding:10px;border-bottom:1px solid var(--line);margin-bottom:6px;display:flex;flex-direction:column;gap:3px}
.drop-head span{font-size:12px;color:var(--muted)}

/* ---------- mobile bottom nav ---------- */
.nav-mobile{display:none;position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--white);backdrop-filter:blur(18px);border-top:1.5px solid var(--line);padding:6px 4px calc(8px + env(safe-area-inset-bottom))}
.nav-mobile a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:9.5px;font-weight:800;color:var(--faint);padding:5px 2px;border-radius:10px}
.nav-mobile a.active{color:var(--green-600)}
@media(max-width:880px){.nav-desktop{display:none}.nav-mobile{display:flex}.app-main{padding-bottom:70px}}

/* ---------- ticker ---------- */
.ticker{overflow:hidden;border-bottom:1px solid var(--line);background:var(--white)}
.ticker-track{display:flex;gap:0;white-space:nowrap;animation:marquee 45s linear infinite;width:max-content}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-item{display:inline-flex;gap:7px;align-items:baseline;padding:8px 22px;font-size:12.5px;border-right:1px solid var(--line);color:var(--muted)}
.ticker-item strong{color:var(--ink-2);font-size:12.5px}
.ticker-item em{font-style:normal;font-weight:800}

/* ---------- hero (mockup 06) ---------- */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;padding:56px 0 70px}
#hero3d{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.85}
.hero-glow{position:absolute;inset:0;z-index:0;background:radial-gradient(60% 50% at 70% 30%,rgba(24,166,106,.12),transparent 70%)}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.hero-copy h1{font-size:clamp(36px,5.2vw,58px);line-height:1.06;letter-spacing:-.03em;font-weight:800;color:var(--green-900)}
.hero-sub{color:var(--muted);font-size:16.5px;max-width:540px;margin:18px 0 26px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-cta.center{justify-content:center}
.hero-stats{display:flex;gap:32px;margin-top:38px;flex-wrap:wrap}
.hero-stats div{display:flex;flex-direction:column}
.hero-stats strong{font-size:21px;color:var(--green-900)}
.hero-stats span{font-size:11px;color:var(--faint);font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.hero-phone{position:relative;display:flex;justify-content:center}
.phone{width:252px;background:var(--green-900);border-radius:34px;padding:10px;box-shadow:0 34px 80px rgba(14,95,74,.35)}
.phone-notch{width:90px;height:20px;background:#0A4A38;border-radius:99px;margin:4px auto 10px}
.phone-screen{background:var(--cream-soft);border-radius:26px;padding:16px;min-height:440px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.phone-top{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-weight:700}
.phone-pnl{font-weight:800;font-size:13px}
.phone-value{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--green-900)}
.phone-rows{display:flex;flex-direction:column;gap:7px;margin-top:6px}
.phone-row{display:flex;justify-content:space-between;font-size:11.5px;font-weight:700;background:var(--white);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.phone-btn{background:var(--grad);color:#fff;font-weight:800;text-align:center;font-size:13px;border-radius:12px;padding:11px;margin-top:auto}
.float-card{position:absolute;background:var(--white);backdrop-filter:blur(10px);border:1px solid var(--line-strong);border-radius:14px;padding:10px 14px;font-size:12px;font-weight:800;display:flex;gap:8px;align-items:center;box-shadow:var(--shadow-lg);animation:float 5s ease-in-out infinite;color:var(--green-700)}
.fc-1{top:14%;left:-6%}
.fc-2{bottom:16%;right:-8%;animation-delay:2.2s;color:var(--orange-deep)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.hero-scroll{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:var(--faint);font-size:11px;letter-spacing:.2em;text-transform:uppercase;display:flex;gap:6px;align-items:center;z-index:2}
@media(max-width:980px){.hero-inner{grid-template-columns:1fr}.hero-phone{display:none}.hero{min-height:auto}}

/* ---------- landing sections ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{position:relative;padding:24px}
.step-num{position:absolute;top:18px;right:20px;font-size:13px;font-weight:800;color:var(--faint)}
.step h3,.product h3,.trust h3{margin:12px 0 6px;font-size:16.5px;color:var(--green-900)}
.step p,.product p,.trust p{font-size:13px;color:var(--muted)}
.step svg,.trust svg{color:var(--green-600)}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.product{display:flex;flex-direction:column;padding:22px;transition:transform .2s,box-shadow .3s}
.product:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.product-icon{width:46px;height:46px;border-radius:14px;background:var(--soft-green);border:1px solid var(--green-100);display:flex;align-items:center;justify-content:center;color:var(--green-700)}
.link-more{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px;color:var(--green-600)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.testimonial-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.testimonial-row blockquote{font-size:14.5px;color:var(--muted);font-style:italic}
.testimonial-row cite{display:block;margin-top:12px;font-style:normal;font-size:12.5px;color:var(--ink-2);font-weight:700}
.cta-band{background:var(--grad);color:#fff;padding:60px 0;text-align:center;border-radius:26px;margin:0 4%}
.cta-inner h2{font-size:clamp(26px,4vw,40px);letter-spacing:-.02em;margin-bottom:10px}
.cta-inner p{opacity:.9;margin-bottom:18px}
.cta-band .btn-primary{background:#fff;color:var(--green-900);box-shadow:none}
@media(max-width:900px){.steps,.product-grid,.trust-grid{grid-template-columns:1fr 1fr}.testimonial-row{grid-template-columns:1fr}}
@media(max-width:560px){.steps,.product-grid,.trust-grid{grid-template-columns:1fr}}

/* ---------- basket / case cards (mockup 01) ---------- */
.basket-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:16px}
.basket-card{padding:18px;display:flex;flex-direction:column;gap:8px;transition:transform .2s,box-shadow .3s,border-color .2s;transform-style:preserve-3d}
.basket-card:hover{transform:translateY(-3px);border-color:var(--green-300);box-shadow:var(--shadow)}
.basket-head{display:flex;justify-content:space-between;align-items:center}
.basket-avatar{width:42px;height:42px;border-radius:13px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 6px 14px rgba(24,166,106,.28)}
.basket-avatar.lg{width:52px;height:52px;border-radius:15px}
.basket-card h3{font-size:15.5px;letter-spacing:-.01em;color:var(--green-900)}
.case-tag{font-size:10px;font-weight:800;letter-spacing:.07em;color:var(--orange-deep);text-transform:uppercase}
.basket-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:auto;padding-top:9px;border-top:1px dashed var(--line)}
.basket-meta strong{color:var(--ink-2)}
.basket-meta .ret{color:var(--green-700);font-size:15px}
.wldot{color:var(--orange)}
.basket-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;overflow:hidden}
.basket-hero h1{font-size:clamp(22px,3vw,30px);color:var(--green-900)}
.basket-desc{color:var(--muted);font-size:14px;margin:12px 0}
.hero-stats-row{display:flex;gap:26px;flex-wrap:wrap;margin:18px 0}
.hstat{display:flex;flex-direction:column}
.hstat strong{font-size:18px;color:var(--ink-2)}
.hstat span{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;font-weight:800}
.basket-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.holding-note{margin-top:14px;font-size:12.5px;color:var(--muted);background:var(--soft-green);border:1px solid var(--green-100);padding:8px 12px;border-radius:10px;display:flex;gap:8px;align-items:center;width:max-content;max-width:100%}
.basket-chart{padding:18px}
.basket-cols{display:grid;grid-template-columns:1.05fr .95fr;gap:18px}
.constituents{display:flex;flex-direction:column;gap:9px}
.constituent{display:grid;grid-template-columns:30px 1fr 1.4fr 52px;align-items:center;gap:10px;font-size:13px;padding:6px 0;border-bottom:1px dashed var(--line)}
.constituent:last-child{border-bottom:none}
.const-rank{color:var(--faint);font-weight:800;font-size:12px}
.const-sym{display:flex;flex-direction:column}
.const-sym small{font-size:11px}
.const-bar{height:7px;border-radius:99px;background:var(--soft-green);overflow:hidden}
.const-bar i{display:block;height:100%;background:var(--grad);border-radius:99px}
.const-wt{font-weight:700;text-align:right;font-size:12.5px}
.thesis-list{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:13px}
.thesis-list li{display:flex;gap:9px;color:var(--muted)}
.thesis-list svg{color:var(--green-600);flex:none;margin-top:2px}
.basket-side{display:flex;flex-direction:column;gap:18px}
@media(max-width:900px){.basket-hero,.basket-cols{grid-template-columns:1fr}}

/* ---------- dashboard overview (mockup 01) ---------- */
.dash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dash-grid.two{grid-template-columns:1fr 1fr}
.greet{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.port-card .port-value{font-size:clamp(26px,3.6vw,36px);font-weight:800;letter-spacing:-.02em;color:var(--green-900)}
.port-sub{font-size:13px;margin:2px 0 12px}
.quick-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.qa{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--muted);background:var(--white);border:1px solid var(--line);border-radius:12px;padding:10px 14px;transition:.15s}
.qa:hover{color:var(--green-700);background:var(--soft-green);border-color:var(--green-100)}
.digest-card{grid-column:span 2}
.digest-title{display:flex;gap:8px;align-items:center;color:var(--green-700)}
.digest-text{font-size:14.5px;line-height:1.7;color:var(--ink-2)}
.digest-foot{margin-top:14px}
/* green stat cards (mockup 01) */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat-card-green{background:var(--soft-green);border:1px solid var(--green-100);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:3px}
.stat-card-green .s-label{font-size:12px;font-weight:700;color:var(--muted)}
.stat-card-green .s-val{font-size:24px;font-weight:800;color:var(--green-900);letter-spacing:-.02em}
.stat-card-green .s-sub{font-size:11.5px;color:var(--faint)}
@media(max-width:900px){.dash-grid{grid-template-columns:1fr}.dash-grid.two{grid-template-columns:1fr}.digest-card{grid-column:auto}.stat-row{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.stat-row{grid-template-columns:1fr 1fr}}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}
.table th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);padding:10px 12px;border-bottom:1.5px solid var(--line)}
.table td{padding:12px;border-bottom:1px solid var(--line)}
.table tr:last-child td{border-bottom:none}
.table tr:hover td{background:var(--soft-green)}
.link{color:var(--green-600)}
.link:hover{text-decoration:underline}

/* ---------- filters / forms ---------- */
.filter-bar{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;padding:16px 18px}
.filter-bar label{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;min-width:130px}
.form{display:flex;flex-direction:column;gap:14px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
.form label.check{flex-direction:row;align-items:center;gap:9px;font-weight:500;font-size:13px}
.form label.check input{width:auto}
.form-inline{display:block;margin-top:12px}
.form-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-row{flex-direction:row;align-items:flex-end;flex-wrap:wrap}
.form-row label{flex:1;min-width:170px}
.amount-quick{display:flex;gap:8px;flex-wrap:wrap}
.search-form{display:flex;gap:8px;flex:1;max-width:420px}
.otp-input{font-size:22px!important;letter-spacing:.5em;text-align:center;font-weight:800}
.switch-label{display:flex;align-items:center;gap:10px;font-weight:700;font-size:13px}
.switch{position:relative;width:44px;height:24px}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch i{position:absolute;inset:0;background:var(--line);border-radius:99px;transition:.2s}
.switch i:before{content:"";position:absolute;width:18px;height:18px;border-radius:99px;background:#fff;top:3px;left:3px;transition:.2s;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.switch input:checked+i{background:var(--grad);border-color:transparent}
.switch input:checked+i:before{transform:translateX(20px)}
.demo-box{background:var(--soft-green);border:1px dashed var(--green-300);border-radius:13px;padding:12px 14px;font-size:12.5px;display:flex;flex-direction:column;gap:4px;margin-bottom:16px}
.demo-box strong{color:var(--green-700)}

/* ---------- auth / onboarding ---------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:30px 16px;background:radial-gradient(80% 60% at 50% 0%,#F2FBE9 0%,var(--cream) 55%)}
.auth-card{width:min(430px,100%);padding:32px;background:var(--white);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg)}
.auth-card h1{font-size:25px;letter-spacing:-.02em;margin:16px 0 6px;color:var(--green-900)}
.auth-brand{margin-bottom:6px}
.auth-links{display:flex;justify-content:space-between;margin-top:18px;font-size:13px;flex-wrap:wrap;gap:8px}
.auth-links a{color:var(--green-600);font-weight:700}
.auth-links a:hover{text-decoration:underline}
.auth-sec{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:20px;padding-top:16px;border-top:1px dashed var(--line)}
.big-ico{color:var(--green-600);margin-bottom:10px}

/* ---------- empty states / misc ---------- */
.empty-state{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 20px;text-align:center;color:var(--muted)}
.empty-state.compact{padding:20px;flex-direction:row}
.empty-state svg{color:var(--green-300)}
.sip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.sip-card{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:4px}
.sip-amt{font-size:20px;font-weight:800;color:var(--green-900)}
.sip-amt small{font-size:11px;color:var(--muted);font-weight:600}
.alert-row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;margin-bottom:8px;border:1px solid var(--line)}
.alert-profit{background:var(--soft-green);border-color:var(--green-100)}
.alert-loss{background:var(--red-soft);border-color:#F8D4CE}
.alert-ico{flex:none}
.alert-profit .alert-ico{color:var(--green-600)}
.alert-loss .alert-ico{color:var(--red)}
.alert-body{flex:1;display:flex;flex-direction:column}
.alert-body small{color:var(--muted);font-size:12px}
.trend-row{display:flex;gap:10px;flex-wrap:wrap}
.trend-chip{background:var(--white);border:1px solid var(--line-strong);border-radius:99px;padding:8px 16px;font-size:13px;font-weight:700;color:var(--green-700);transition:.15s}
.trend-chip:hover{background:var(--soft-green);border-color:var(--green-300)}
.trend-chip em{font-style:normal;color:var(--muted);font-weight:600;font-size:11.5px}
.crumbs{display:flex;align-items:center;gap:6px}
.crumbs a:hover{color:var(--green-600)}

/* ---------- credit ---------- */
.credit-card .port-value{font-size:clamp(28px,3.6vw,38px);font-weight:800;color:var(--green-900)}
.credit-slider{margin:18px 0}
.credit-slider input[type=range]{padding:0;accent-color:var(--green-600);height:6px}
.credit-detail{display:flex;flex-direction:column;gap:8px;font-size:13px;border-top:1px dashed var(--line);padding-top:14px;margin-bottom:16px}
.credit-detail span{display:flex;justify-content:space-between;color:var(--muted)}
.credit-info{display:flex;flex-direction:column;gap:16px}

/* ---------- expert ---------- */
.expert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.expert-top{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.ticker-tag{font-size:11px;color:var(--muted);font-weight:700;background:var(--soft-green);border:1px solid var(--green-100);border-radius:6px;padding:2px 7px;vertical-align:2px;margin-left:4px}
.expert-prices{display:flex;justify-content:space-between;background:var(--soft-green);border:1px solid var(--green-100);border-radius:12px;padding:12px 14px;margin-bottom:12px}
.expert-prices div{display:flex;flex-direction:column}
.expert-prices span{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;font-weight:800}
.expert-prices strong{font-size:15.5px;color:var(--ink-2)}
.thesis{font-size:12.5px;line-height:1.6;margin-bottom:12px}

/* ---------- profile ---------- */
.profile-grid{display:grid;grid-template-columns:340px 1fr;gap:18px;align-items:start}
.profile-card{text-align:center}
.profile-avatar{width:72px;height:72px;border-radius:99px;background:var(--grad);color:#fff;font-size:30px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.kyc-box{background:var(--soft-green);border:1px solid var(--green-100);border-radius:14px;padding:14px;margin-top:16px;display:flex;flex-direction:column;gap:10px;text-align:left}
.kyc-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600}
.setting-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.setting-row:last-of-type{border-bottom:none}
.setting-row p{font-size:12.5px;margin-top:2px}
.notif-row{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.notif-row:last-child{border-bottom:none}
.notif-row.read{opacity:.55}
.notif-dot{width:9px;height:9px;border-radius:99px;background:var(--green-500);margin-top:6px;flex:none}
.notif-row.read .notif-dot{background:var(--faint)}
.notif-row p{font-size:12.5px}
.broker-status{display:flex;gap:12px;align-items:center}
.broker-status small{display:flex;align-items:center;gap:4px;font-size:11.5px}
@media(max-width:900px){.profile-grid{grid-template-columns:1fr}}

/* ---------- brokers ---------- */
.broker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.broker-card{display:flex;align-items:center;gap:13px;padding:16px}
.broker-card.linked{border-color:var(--green-300)}
.broker-logo{width:44px;height:44px;border-radius:12px;background:var(--grad);color:#fff;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;flex:none}
.broker-logo.sm{width:26px;height:26px;font-size:12px;border-radius:8px;display:inline-flex;vertical-align:-6px;margin-right:4px}
.broker-info{flex:1;display:flex;flex-direction:column;gap:4px}
.trust-row{display:flex;gap:14px;align-items:flex-start}
.trust-row svg{color:var(--green-600);flex:none;margin-top:2px}

/* ---------- modal ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(14,48,40,.45);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;padding:18px}
.modal-backdrop[hidden]{display:none}
.modal{width:min(440px,100%);max-height:88vh;overflow:auto;background:var(--white);border-radius:20px;box-shadow:var(--shadow-lg);animation:pop .18s ease}
@keyframes pop{from{transform:scale(.95) translateY(10px);opacity:0}to{transform:none;opacity:1}}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.modal-head h3{font-size:17px}
.reveal-out{margin-top:14px;display:flex;flex-direction:column;gap:8px;font-size:13px}
.reveal-out div{background:var(--soft-green);border:1px solid var(--green-100);border-radius:9px;padding:9px 12px;display:flex;justify-content:space-between}
.reveal-out code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}

/* ---------- toast ---------- */
.toast{position:fixed;top:74px;left:50%;transform:translateX(-50%);z-index:200;background:var(--green-900);color:#fff;border-radius:13px;padding:12px 18px;display:flex;gap:10px;align-items:center;font-size:13px;font-weight:600;box-shadow:var(--shadow-lg);animation:pop .25s ease;max-width:92%}
.toast-err{background:var(--red)}
.toast-err svg{color:#fff} .toast-ok svg{color:var(--green-300)}

/* ---------- agent widget ---------- */
.agent-fab{position:fixed;right:20px;bottom:22px;z-index:150;width:58px;height:58px;border-radius:99px;background:var(--grad);border:none;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 34px rgba(24,166,106,.4);transition:transform .15s}
.agent-fab:hover{transform:scale(1.07)}
.fab-pulse{position:absolute;inset:-5px;border-radius:99px;border:2px solid rgba(24,166,106,.5);animation:pulse 2.4s infinite}
.agent-panel{position:fixed;right:20px;bottom:92px;z-index:150;width:min(380px,calc(100vw - 32px));height:min(560px,calc(100vh - 130px));background:var(--white);border:1px solid var(--line-strong);border-radius:20px;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-lg);transform:translateY(16px) scale(.97);opacity:0;pointer-events:none;transition:.22s}
.agent-panel.open{transform:none;opacity:1;pointer-events:auto}
.agent-head{display:flex;align-items:center;gap:11px;padding:14px 16px;background:linear-gradient(120deg,rgba(14,95,74,.08),rgba(155,231,177,.14));border-bottom:1px solid var(--line)}
.agent-avatar{width:36px;height:36px;border-radius:11px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center}
.agent-head strong{font-size:14.5px;color:var(--green-900)}
.agent-sub{font-size:10.5px;color:var(--muted)}
.agent-head .icon-btn{margin-left:auto;background:rgba(255,255,255,.6)}
.agent-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.agent-msg{max-width:88%;padding:10px 13px;border-radius:14px;font-size:13px;line-height:1.55;white-space:pre-wrap;word-wrap:break-word;animation:pop .18s ease}
.agent-bot{background:var(--soft-green);border:1px solid var(--green-100);border-top-left-radius:4px;align-self:flex-start}
.agent-user{background:var(--grad);color:#fff;font-weight:600;border-top-right-radius:4px;align-self:flex-end}
.agent-typing{display:flex;gap:4px;padding:12px 14px;align-self:flex-start;background:var(--soft-green);border:1px solid var(--green-100);border-radius:14px;border-top-left-radius:4px}
.agent-typing i{width:6px;height:6px;border-radius:99px;background:var(--green-600);animation:typing 1.2s infinite}
.agent-typing i:nth-child(2){animation-delay:.2s}.agent-typing i:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.agent-chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{background:var(--white);border:1.5px solid var(--line-strong);color:var(--ink-2);border-radius:99px;padding:8px 15px;font-size:12px;font-weight:700;transition:.15s}
.chip:hover{border-color:var(--green-500);background:var(--soft-green)}
.agent-links{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.agent-links a{display:flex;justify-content:space-between;align-items:center;background:var(--soft-green);border:1px solid var(--green-100);color:var(--green-700);border-radius:10px;padding:8px 12px;font-size:12.5px;font-weight:700}
.agent-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--cream-soft)}
.agent-input input{flex:1}
.agent-send{width:42px;height:42px;flex:none;border-radius:12px;background:var(--grad);border:none;color:#fff;display:flex;align-items:center;justify-content:center}
@media(max-width:560px){.agent-panel{right:10px;bottom:80px;width:calc(100vw - 20px)}.agent-fab{right:14px;bottom:76px}}

/* ---------- admin console (mockup 04) ---------- */
.admin-shell{display:flex;min-height:100vh}
.admin-side{width:225px;flex:none;background:var(--green-900);border-right:none;padding:20px 14px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh;overflow-y:auto}
.admin-brand{padding:0 6px;color:#fff}
.admin-brand .brand-text small{color:var(--green-300)}
.admin-brand .brand-mark{background:rgba(255,255,255,.14);box-shadow:none}
.admin-nav{display:flex;flex-direction:column;gap:3px}
.admin-nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;font-size:13px;font-weight:600;color:#C9E8D8;transition:.15s}
.admin-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.admin-nav a.active{background:#fff;color:var(--green-900)}
/* Broker group with submenu */
.admin-nav-group .admin-nav-parent{cursor:pointer}
.admin-nav-group .admin-nav-parent svg:last-child{margin-left:auto;opacity:.65;transition:transform .18s}
.admin-nav-group.open .admin-nav-parent svg:last-child{transform:rotate(90deg)}
.admin-nav-sub{display:none;flex-direction:column;gap:2px;margin:2px 0 4px;padding-left:14px;border-left:1px solid rgba(255,255,255,.18)}
.admin-nav-group.open .admin-nav-sub{display:flex}
.admin-nav-sub a{font-size:12.5px;font-weight:500;padding:8px 12px;color:#AFD8C6}
.admin-nav-sub a:hover{background:rgba(255,255,255,.08);color:#fff}
.admin-nav-sub a.active{background:rgba(255,255,255,.16);color:#fff}
.admin-side-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding:0 6px}
.admin-side-foot a{color:#9DC9B6}
.admin-side-foot a:hover{color:#fff}
.admin-side-foot .danger{color:#FFB4A6!important}
.admin-main{flex:1;min-width:0}
.admin-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 26px;border-bottom:1px solid var(--line);background:var(--white);flex-wrap:wrap}
.admin-title h1{font-size:19px;color:var(--green-900)}
.admin-user{display:flex;align-items:center;gap:10px}
.admin-user-meta{display:flex;flex-direction:column}
.admin-user-meta small{font-size:11px}
.admin-content{padding:24px 26px;display:flex;flex-direction:column;gap:18px;max-width:1200px}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.kpi{display:flex;flex-direction:column;gap:2px;padding:16px}
.kpi-big{font-size:23px;font-weight:800;letter-spacing:-.02em;color:var(--green-900)}
.flag-list{display:flex;flex-direction:column;gap:8px}
.flag-row{display:flex;align-items:center;gap:14px;padding:13px 14px;border:1px solid var(--line);border-radius:13px;background:var(--white)}
.flag-info{flex:1;display:flex;flex-direction:column}
.flag-info small{font-size:12px}
.pick-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.pick-row:last-child{border-bottom:none}
.audit-list{display:flex;flex-direction:column;gap:10px}
.audit-row{display:flex;gap:10px;align-items:flex-start}
.audit-dot{width:9px;height:9px;border-radius:99px;background:var(--green-500);margin-top:6px;flex:none}
.audit-row small{font-size:11px;display:block}
.summary-list{display:flex;flex-direction:column;gap:12px}
.summary-row{display:flex;justify-content:space-between;font-size:14px;border-bottom:1px dashed var(--line);padding-bottom:9px}
.pager{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:16px}
.qr-box{display:flex;flex-direction:column;align-items:center;gap:12px;margin:14px 0}
#qrCode{background:#fff;padding:12px;border-radius:16px}
.qr-secret{display:flex;flex-direction:column;align-items:center;gap:4px}
.qr-secret code{font-size:15px;letter-spacing:.14em;padding:8px 14px}
.kyc-user{display:flex;gap:11px;align-items:center}
@media(max-width:820px){.admin-side{position:fixed;left:-230px;transition:.2s;z-index:90}.admin-shell.menu-open .admin-side{left:0}.admin-content{padding:18px 14px}}

/* ---------- misc layout ---------- */
.app-main{min-height:70vh}
.app-footer{border-top:1px solid var(--line);background:var(--green-900);color:#CFE8DC;padding:44px 0 30px;margin-top:20px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px}
.footer-col{display:flex;flex-direction:column;gap:9px;font-size:13px}
.footer-col strong{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#9DC9B6;margin-bottom:4px}
.footer-col a:hover{color:#fff}
.footer-col .muted{color:#9DC9B6}
.footer-legal{margin-top:30px;padding-top:20px;border-top:1px solid rgba(255,255,255,.15);display:flex;flex-direction:column;gap:6px}
.footer-legal .muted{color:#9DC9B6}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}

/* ---------- utilities ---------- */
.svg-chart{width:100%;height:auto}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(14,95,74,.2);border-radius:99px}
::-webkit-scrollbar-track{background:transparent}
::selection{background:rgba(24,166,106,.25)}

/* ---------- client sidebar (mockup 01) ---------- */
.side-nav a:hover{background:var(--green-100);color:var(--green-800)}
.side-nav a.on{background:var(--green-900);color:#fff;box-shadow:0 6px 16px rgba(14,95,74,.28)}
.side-nav a.on svg{color:#fff}
/* mobile: hide sidebar, green gradient header (mockup 02) */
@media(max-width:880px){
  .side{display:none!important}
  .top{background:linear-gradient(120deg,#0E5F4A,#18A66A)!important;border-bottom:none!important;color:#fff;padding:12px 14px}
  .top .search{display:none}
  .m-brand{display:flex!important;color:#fff!important}
  .top .header-actions .icon-btn{background:rgba(255,255,255,.16);border-color:transparent;color:#fff}
  .top .avatar{box-shadow:0 3px 10px rgba(0,0,0,.18)}
}

/* ---------- mobile dashboard (mockup 02) ---------- */
.m-view{display:none}
.quick-modules{display:none}
@media(max-width:880px){
  .ov-stats,.ov-cases{display:none!important}
  .m-view{display:flex;flex-direction:column;gap:14px}
  .quick-modules{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .qm{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:13px;display:flex;gap:10px;align-items:center;font-weight:700;font-size:12.5px;color:var(--ink-2)}
  .qm-ic{width:38px;height:38px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center}
  .ic-g{background:var(--soft-green);color:var(--green-700)} .ic-o{background:var(--orange-soft);color:var(--orange-deep)} .ic-b{background:var(--soft-blue);color:var(--blue-deep)}
  .m-networth{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:18px}
  .m-networth .mn-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);font-weight:700}
  .m-networth .mn-val{font-size:27px;font-weight:800;color:var(--green-900);letter-spacing:-.02em;margin:4px 0 8px}
  .m-acc{background:var(--white);border:1px solid var(--line);border-radius:13px;padding:11px 13px;display:flex;align-items:center;gap:11px;margin-bottom:8px}
  .m-acc .grow{flex:1;min-width:0}
}

/* ---------- mockup extras ---------- */
.screener-link:hover{border-color:var(--green-500);color:var(--green-700)}
.donut-wrap svg{max-width:100%}
@media(max-width:900px){.rc-grid{grid-template-columns:1fr!important}}

/* ============================================================
   SMALLCASE-STYLE TYPOGRAPHY — exact scale & distribution
   Family: Inter (free Graphik-Web equivalent)
   Base 14px · lh 1.38 · headings tight-tracked · tabular numbers
   ============================================================ */
:root{
  --font:"Inter","Graphik","Helvetica Neue",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --text-xs:10px; --text-sm:12px; --text-base:14px; --text-md:15px; --text-lg:16px;
  --text-title:18px; --text-h3:20px; --text-h2:24px; --text-h1:28px; --text-display:40px;
  --lh-body:1.38; --lh-head:1.2; --lh-loose:1.57;
  --track-head:-0.3px; --track-tight:-0.4px; --track-label:0.4px;
  --num:tabular-nums;
}
body{font-size:var(--text-base);line-height:var(--lh-body);letter-spacing:0}
h1,h2,h3,h4{font-weight:600;letter-spacing:var(--track-head);line-height:var(--lh-head)}
h1{font-size:var(--text-h1)} h2{font-size:var(--text-h2)} h3{font-size:var(--text-title)}
/* numbers — tabular, like smallcase financial tables */
.port-value,.s-val,.kpi-big,.stat-big,.phone-value,.sip-amt,.tbl td,.basket-meta strong,.price-row strong,.expert-prices strong,.const-wt,.hero-stats strong,.p-price,.s-val,.stat-card-green .s-val,.m-networth .mn-val{font-variant-numeric:var(--num)}
/* micro & labels */
.tiny{font-size:var(--text-xs);letter-spacing:var(--track-label)}
.badge{font-size:var(--text-xs);font-weight:600;letter-spacing:.05em}
.pill{font-size:var(--text-sm)}
/* page headings */
.page-head h1,.greet h1{font-size:var(--text-h1);font-weight:600;letter-spacing:var(--track-tight)}
.page-head p,.greet p{font-size:var(--text-base);line-height:var(--lh-body)}
.section-head h2{font-size:var(--text-h2);font-weight:600}
.sec-head h2{font-size:var(--text-title)}
/* cards & tables — smallcase density */
.card-head{font-size:var(--text-md);font-weight:600;letter-spacing:0}
.table{font-size:13px}
.table th{font-size:var(--text-xs);font-weight:600;letter-spacing:.05em}
.table td{font-size:13px;line-height:1.38;font-variant-numeric:var(--num)}
/* case cards (smallcase's "basket card" type scale) */
.basket-card h3{font-size:var(--text-lg);font-weight:600;letter-spacing:-0.2px}
.case-tag{font-size:var(--text-xs);font-weight:600;letter-spacing:.07em}
.basket-card p,.prod-card p,.feature-card p{font-size:13px;line-height:1.44}
.basket-meta{font-size:var(--text-sm);font-weight:500}
.basket-meta .ret{font-size:var(--text-md);font-weight:600}
/* dashboard stats */
.stat-card-green .s-label{font-size:var(--text-sm);font-weight:500}
.stat-card-green .s-val{font-size:var(--text-h2);font-weight:600;letter-spacing:-0.4px}
.stat-card-green .s-sub{font-size:var(--text-xs)}
/* sidebar / nav — smallcase density */
.side-nav a,.nav-desktop a{font-size:var(--text-base);font-weight:500}
.admin-nav a{font-size:var(--text-base);font-weight:500}
/* buttons */
.btn{font-size:var(--text-base);font-weight:600;letter-spacing:0}
.btn-sm{font-size:var(--text-sm);font-weight:600}
.btn-lg{font-size:var(--text-md)}
/* forms */
input,select,textarea{font-size:var(--text-base)}
.form label{font-size:var(--text-sm);font-weight:500}
/* links & meta */
.link-more{font-size:var(--text-sm);font-weight:600}
.muted,.small{font-size:13px}
/* hero — marketing display scale */
.hero-copy h1{font-size:clamp(40px,5vw,56px);font-weight:600;letter-spacing:-0.8px;line-height:1.12}
.hero-sub{font-size:var(--text-lg);line-height:var(--lh-loose)}
.hero-stats strong{font-size:var(--text-h2);font-weight:600}
.hero-stats span{font-size:var(--text-xs);letter-spacing:.07em;font-weight:600}
/* auth / onboarding headings */
.auth-card h1{font-size:var(--text-h2);font-weight:600}
.onboard-card h1{font-size:var(--text-h2)}
/* alerts/intraday cards */
.alert-card strong{letter-spacing:-0.2px}
.price-row strong{font-size:var(--text-md);font-weight:600}
/* footer */
.app-footer{font-size:13px;line-height:1.5}
/* admin */
.admin-title h1{font-size:var(--text-h1)}
.kpi .k-val{font-size:var(--text-h2);font-weight:600;letter-spacing:-0.4px}
.kpi .k-label{font-size:var(--text-xs);letter-spacing:.06em;font-weight:600}
/* digest text */
.digest-text{font-size:var(--text-md);line-height:var(--lh-loose)}
/* agent chat */
.agent-msg{font-size:13px;line-height:1.44}

/* ============================================================
   MOBILE / SMARTPHONE — APP-LIKE INTERFACE (no website feel)
   ============================================================ */
@media (max-width: 880px){
  /* full-bleed app canvas */
  body{background:var(--cream-soft)}
  .app-main{padding-bottom:78px}
  .container{width:100%;padding:0 14px}
  .page{padding:14px 0 20px;gap:14px}

  /* app header: solid green bar with title + icons (native feel) */
  .top{position:sticky;top:0;z-index:70;padding:10px 14px;min-height:52px}
  .top .m-brand{font-size:17px;letter-spacing:-.2px}

  /* hide website-only furniture */
  .app-footer{display:none!important}
  .crumbs{display:none}
  .page-head{flex-direction:column;align-items:flex-start;gap:8px}
  .page-head .btn,.page-head .badge{align-self:flex-start}

  /* cards become app tiles */
  .card{border-radius:14px;padding:16px;border-color:var(--line-strong)}
  .card-head{font-size:14px}
  .basket-card{border-radius:14px}
  .stat-card-green{border-radius:14px;padding:14px}

  /* touch-friendly controls */
  .btn{min-height:44px;border-radius:12px}
  .btn-sm{min-height:36px}
  .chip{min-height:34px;padding:8px 14px}
  input,select,textarea{min-height:44px;border-radius:12px}

  /* tables: card-scroll, no website table look */
  .table-wrap{margin:0 -14px;padding:0 14px;-webkit-overflow-scrolling:touch}
  .table{min-width:560px}
  .table th{padding:9px 10px}
  .table td{padding:10px}

  /* stat rows 2-up */
  .stat-row{grid-template-columns:1fr 1fr;gap:10px}

  /* grids stack to single column app lists */
  .basket-grid,.prod-row{grid-template-columns:1fr 1fr;gap:10px}
  .dash-grid,.dash-grid.two{grid-template-columns:1fr;gap:12px}

  /* bottom nav: always visible, 5 tabs, safe-area */
  .nav-mobile{display:flex;padding:5px 4px calc(7px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(14,95,74,.08)}
  .nav-mobile a{min-height:48px}

  /* agent FAB above nav */
  .agent-fab{right:14px;bottom:calc(76px + env(safe-area-inset-bottom));width:54px;height:54px}
  .agent-panel{bottom:calc(140px + env(safe-area-inset-bottom));height:min(560px,calc(100vh - 190px))}

  /* filter bars become scrollable chips */
  .filter-bar{flex-direction:column;align-items:stretch;gap:10px;padding:12px}
  .filter-bar .chips{overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}

  /* landing hero: compact app-style marketing */
  .hero{padding:34px 0 40px;min-height:0}
  .hero-copy h1{font-size:32px;line-height:1.1}
  .hero-sub{font-size:14.5px;margin:12px 0 18px}
  .hero-cta .btn{flex:1;min-height:46px}
  .hero-stats{gap:18px;margin-top:24px}
  .hero-stats strong{font-size:18px}
  .section{padding:38px 0}
  .section-head h2{font-size:22px}

  /* intraday alert cards stack */
  .alert-grid{grid-template-columns:1fr;gap:10px}
  .expert-grid{grid-template-columns:1fr}
  .price-row{gap:10px}
  .price-row div{min-width:calc(50% - 10px)}

  /* modal sheets bottom-sheet style */
  .modal-backdrop{align-items:flex-end;padding:0}
  .modal{width:100%;border-radius:20px 20px 0 0;max-height:88vh;padding:20px 16px calc(16px + env(safe-area-inset-bottom))}

  /* toast above nav */
  .toast{top:auto;bottom:calc(84px + env(safe-area-inset-bottom));width:calc(100% - 28px);max-width:none;justify-content:center}
}

/* mobile links (mockup 02) — no underline, block taps */
.m-networth,.m-acc{text-decoration:none;display:flex}
.m-networth{flex-direction:column}

/* ---------- admin mobile (app-like) ---------- */
.admin-menu-btn{display:none}
@media(max-width:820px){
  .admin-menu-btn{display:inline-flex}
  .admin-top{background:linear-gradient(120deg,#0E5F4A,#18A66A);border-bottom:none;color:#fff}
  .admin-top .muted{color:#BFE8D2}
  .admin-top .admin-title h1{color:#fff;font-size:18px}
  .admin-top .icon-btn{background:rgba(255,255,255,.16);border-color:transparent;color:#fff}
  .admin-user .badge{background:rgba(255,255,255,.18);color:#DFF6E7;border:none}
  .admin-user-meta strong{color:#fff}
  .admin-user-meta small{color:#BFE8D2}
  .admin-bottom-nav{display:flex}
  .admin-content{padding-bottom:90px}
}

/* ============================================================
   MOBILE APP POLISH — full-screen auth, sheets, safe-area
   ============================================================ */
@media (max-width: 880px){
  /* green header respects notch */
  .top{padding-top:calc(10px + env(safe-area-inset-top))}

  /* full-screen app-style auth (login/signup/OTP) */
  .auth-wrap{padding:0;background:var(--cream-soft);min-height:100vh}
  .auth-card{width:100%;min-height:100vh;border-radius:0;border:none;box-shadow:none;
    padding:calc(56px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
    display:flex;flex-direction:column;justify-content:center}
  .auth-card h1{font-size:26px}
  .demo-box{border-radius:12px}

  /* avatar menu + bell → bottom sheets */
  .avatar-drop{position:fixed;left:10px;right:10px;top:auto;bottom:calc(84px + env(safe-area-inset-bottom));
    width:auto;border-radius:18px;padding:10px;box-shadow:0 -10px 40px rgba(14,95,74,.25)}
  .avatar-drop a{padding:13px 14px;font-size:15px;border-radius:12px}

  /* detail page CTAs full-width */
  .basket-cta{display:grid;grid-template-columns:1fr 1fr}
  .basket-cta .btn{min-height:46px}
  .basket-cta .btn:first-child{grid-column:1/-1}

  /* section titles spacing */
  .sec-head{margin-bottom:10px}

  /* onboarding steps card */
  .onboard-wrap{padding:0;align-items:stretch}
  .onboard-card{width:100%}
  .onboard-card .card{border-radius:0;border:none;box-shadow:none;min-height:calc(100vh - 90px)}

  /* risk profile seg control full width */
  .seg{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr}
  .seg button{padding:12px 8px}
}

/* ============================================================
   FORCE APP-UI AT ALL WIDTHS — matches the reference app screens
   (no desktop sidebar; green app header + bottom tabs everywhere;
    phone-width app column centered on desktop)
   ============================================================ */
/* hide desktop sidebar always */
.side{display:none!important}
/* always green app header */
.top{background:linear-gradient(120deg,#0E5F4A,#18A66A)!important;border-bottom:none!important;color:#fff;padding:12px 16px;min-height:56px}
.top .m-brand{display:flex!important;color:#fff!important}
.top .search{display:none!important}
.top .header-actions .icon-btn{background:rgba(255,255,255,.16);border-color:transparent;color:#fff}
.top .avatar{box-shadow:0 3px 10px rgba(0,0,0,.18)}
/* always bottom nav */
.nav-mobile{display:flex!important}
/* public marketing nav (logged-out desktop visitors) */
.pubnav{overflow-x:auto;scrollbar-width:none}
.pubnav::-webkit-scrollbar{display:none}
.pubnav-link{font-size:13px;font-weight:600;color:#5b6e66;padding:7px 13px;border-radius:99px;white-space:nowrap;transition:.15s}
.pubnav-link:hover{background:var(--green-50, #e6f5ee);color:var(--green-800, #0E5F4A)}
.pubnav-link.active{background:rgba(255,255,255,.18);color:#fff}
@media(max-width:880px){.pubnav{display:none!important}}
/* app column: phone width centered on desktop */
.app-shell{background:#f4f6f5}
.app-shell .main{max-width:520px;margin:0 auto;background:#fafbfa;min-height:100vh;box-shadow:0 0 40px rgba(14,95,74,.08)}
.app-main{padding-bottom:86px!important}
.container{width:100%;padding:0 14px}
.page{padding:14px 0 20px;gap:14px}
/* white page background app feel */
body{background:#eef1ef}
/* full-screen auth */
.auth-wrap{padding:0;background:#fafbfa;min-height:100vh}
.auth-card{width:100%;min-height:100vh;border-radius:0;border:none;box-shadow:none;padding:56px 20px 24px;display:flex;flex-direction:column;justify-content:center}
/* toast above nav */
.toast{top:auto;bottom:calc(84px + env(safe-area-inset-bottom));width:calc(100% - 28px);max-width:none;justify-content:center;left:14px;transform:none}

/* app-style stat cards (white, big dark figures, green accents) */
.stat-card-green{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:0 1px 4px rgba(14,95,74,.05)}
.stat-card-green .s-label{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.stat-card-green .s-val{font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.3px}
.stat-card-green .s-sub{font-size:11px;color:var(--faint)}
.stat-card-green .up{color:var(--green-700)}
/* app cards flat + rounded */
.card{border-radius:16px;box-shadow:0 1px 6px rgba(14,95,74,.05);border:1px solid var(--line)}
.card-head{font-size:14px;font-weight:600;color:var(--ink-2)}
/* page titles app style */
.page-head h1{font-size:24px;font-weight:700;letter-spacing:-.3px;color:var(--ink)}
/* green primary buttons */
.btn-primary{background:var(--grad);border-radius:12px;min-height:44px}
/* links/rows app feel */
.link-row{border-radius:14px}

/* desktop marketing header uses the POSA logo wordmark */
.l-top .brand-mark{display:none}
.l-top .brand img{height:30px;width:auto}

/* ============================================================
   RESPONSIVE FIX — app column collapses by CONTAINER width
   (breakpoints were viewport-based, but the app column is 520px —
    so desktop showed cramped 2-col layouts inside it)         */
/* landing: full-width marketing on desktop */
.main-wide{max-width:none!important;margin:0!important;background:#fff!important;box-shadow:none!important;width:100%!important}
.main-wide .top{max-width:none}
/* app pages: everything collapses to single column at any viewport */
.app-page .dash-grid,
.app-page .dash-grid.two{grid-template-columns:1fr!important}
.app-page .digest-card{grid-column:auto!important}
.app-page .basket-hero,
.app-page .basket-cols{grid-template-columns:1fr!important}
.app-page .profile-grid{grid-template-columns:1fr!important}
.app-page .rc-grid{grid-template-columns:1fr!important}
.app-page .alert-grid{grid-template-columns:1fr!important}
.app-page .expert-grid{grid-template-columns:1fr!important}
.app-page .basket-grid,
.app-page .prod-row{grid-template-columns:1fr 1fr!important}
.app-page .constituent{grid-template-columns:26px 1fr 1.2fr 48px!important}
.app-page .sector-heat{grid-template-columns:repeat(3,1fr)!important}
.app-page .price-row div{min-width:calc(50% - 10px)}
/* centered floating bottom nav like an app (not full-width on desktop) */
@media (min-width: 560px){
  .nav-mobile{left:50%;transform:translateX(-50%);width:100%;max-width:520px;border-radius:18px 18px 0 0}
  .toast{left:50%;transform:translateX(-50%);width:min(92%,520px)}
  .agent-fab{right:calc(50vw - 260px + 14px)}
  .agent-panel{right:calc(50vw - 260px + 14px)}
}
/* hide orbs (they're desktop-decorative) inside app column */
.app-page .bg-orbs{opacity:0}