/* ═══════════════════════════════════════════════════════
   SMARTWEALTH ANALYZER v2 — analyzer.css
   FULLY RESPONSIVE: Mobile → Tablet → Desktop
   Mobile-First Approach | All classes prefixed swa-
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Fira+Code:wght@400;500;600&display=swap');

/* ── Variables ─────────────────────────────────────────── */
.swa-root {
  --f:  'Plus Jakarta Sans', -apple-system, sans-serif;
  --m:  'Fira Code', monospace;
  --ink:   #080E1A; --ink2: #1F2937;
  --mut:   #6B7280; --mut2: #9CA3AF;
  --bdr:   #E5E7EB; --bdr2: #F3F4F6;
  --s0:    #FFFFFF; --s1:   #F9FAFB; --s2: #F3F4F6;
  --blue:  #0EA5E9; --bluL: #E0F2FE; --blu2: #0284C7;
  --ind:   #6366F1; --indL: #EEF2FF;
  --teal:  #14B8A6; --teaL: #CCFBF1;
  --grn:   #10B981; --grnL: #D1FAE5;
  --amb:   #F59E0B; --ambL: #FEF3C7;
  --red:   #F43F5E; --redL: #FFE4E6;
  --pur:   #A855F7; --purL: #F3E8FF;
  --grad:  linear-gradient(135deg,#0EA5E9,#6366F1);
  --gradb: linear-gradient(135deg,#38BDF8,#818CF8);
  --sh0: 0 1px 3px rgba(8,14,26,.06),0 1px 2px rgba(8,14,26,.04);
  --sh1: 0 4px 16px rgba(8,14,26,.08),0 2px 6px rgba(8,14,26,.04);
  --sh2: 0 10px 36px rgba(8,14,26,.12),0 4px 12px rgba(8,14,26,.06);
  --ease: cubic-bezier(.4,0,.2,1);
  --spg:  cubic-bezier(.34,1.56,.64,1);
  --r1: 8px; --r2: 12px; --r3: 16px; --r4: 22px;

  font-family: var(--f);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  width: 100%; max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}
.swa-root *,.swa-root *::before,.swa-root *::after { box-sizing: border-box; margin:0; padding:0; }
.swa-root input[type=number]::-webkit-inner-spin-button,
.swa-root input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; }
.swa-root input[type=number] { -moz-appearance: textfield; }
.swa-root button { font-family: var(--f); cursor: pointer; }
.swa-hide { display: none !important; }

/* ── Screens ────────────────────────────────────────────── */
.swa-screen { display: none; width: 100%; }
.swa-on     { display: block; }

/* ── Animations ─────────────────────────────────────────── */
@keyframes swaFU   { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes swaCIn  { from{opacity:0;transform:scale(.96) translateY(8px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes swaSIn  { from{opacity:0;transform:translateX(-10px)} to{opacity:1;transform:translateX(0)} }
@keyframes swaShm  { 0%{transform:translateX(-100%)} 45%{transform:translateX(100%)} 100%{transform:translateX(100%)} }
@keyframes swaLrc  { 0%{stroke-dashoffset:345;transform:rotate(-90deg)} 50%{stroke-dashoffset:86} 100%{stroke-dashoffset:345;transform:rotate(270deg)} }
@keyframes swaRip  { to{transform:scale(1);opacity:0} }

/* ═══════════════════════════════════════════════════════
   ONBOARDING WRAP (screens 1 + 2)
═══════════════════════════════════════════════════════ */
.swa-ob {
  background: #060C17;
  min-height: 460px; width: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 32px 14px 40px; gap: 16px;
  border-radius: var(--r4);
  position: relative; overflow: hidden;
  animation: swaFU .5s var(--spg) both;
}
.swa-ob::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(37,99,235,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(37,99,235,.09) 1px,transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%,black 30%,transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%,black 30%,transparent 100%);
  pointer-events: none;
}

/* Logo */
.swa-logo { display:flex; align-items:center; gap:9px; z-index:1; }
.swa-btext { display:flex; flex-direction:column; line-height:1.1; }
.swa-bn { font-size:.98rem; font-weight:800; color:#fff; letter-spacing:-.02em; }
.swa-bt { font-size:.56rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.35); }

/* Glass card */
.swa-card {
  width:100%; max-width:520px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.11);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-radius: var(--r4);
  padding: 26px 18px 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
  z-index: 1;
}
.swa-chip {
  display: inline-flex; align-items: center;
  background: rgba(56,189,248,.14); border: 1px solid rgba(56,189,248,.24);
  color: #7DD3FC; font-size:.62rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; padding: 3px 10px; border-radius: 100px; margin-bottom: 11px;
}
.swa-card h2 {
  font-size: clamp(1.2rem,4.5vw,1.75rem);
  font-weight:900; color:#fff; letter-spacing:-.03em; line-height:1.18; margin-bottom:7px;
}
.swa-hl {
  background: var(--gradb);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.swa-sub { font-size:.82rem; color:rgba(255,255,255,.42); line-height:1.6; margin-bottom:18px; }

/* ─── Currency grid ─────────────────────────────────────── */
/* MOBILE: 2 cols | TABLET: 4 cols | DESKTOP: 4 cols */
.swa-cgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px; margin-bottom: 18px;
}
.swa-cb {
  display:flex; flex-direction:column; align-items:center;
  padding: 11px 6px;
  background: rgba(255,255,255,.05);
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: var(--r2); transition: all .2s var(--ease);
  gap: 2px; position: relative;
  -webkit-tap-highlight-color: transparent;
}
.swa-cb:hover, .swa-cb:active { background:rgba(56,189,248,.1); border-color:rgba(56,189,248,.35); }
.swa-cb.swa-sel { background:rgba(56,189,248,.15); border-color:#38BDF8; box-shadow:0 0 0 3px rgba(56,189,248,.2); }
.swa-cs    { font-size:1.2rem; font-weight:700; color:#fff; line-height:1; }
.swa-cs-sm { font-size:.8rem; }
.swa-cc    { font-size:.66rem; font-weight:800; color:#7DD3FC; letter-spacing:.04em; }
.swa-cn    { font-size:.57rem; color:rgba(255,255,255,.35); text-align:center; }
.swa-ck    { position:absolute; top:4px; right:6px; font-size:.6rem; color:#38BDF8; opacity:0; transition:opacity .15s; }
.swa-cb.swa-sel .swa-ck { opacity:1; }

/* ─── Primary button ────────────────────────────────────── */
.swa-btn {
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 18px;
  background: var(--grad); border:none; border-radius: var(--r2);
  font-size:.92rem; font-weight:700; color:#fff;
  position:relative; overflow:hidden;
  transition: transform .2s var(--spg), box-shadow .2s;
  box-shadow: 0 4px 18px rgba(14,165,233,.35);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; min-height: 48px;
}
.swa-btn:hover  { transform:translateY(-2px); box-shadow:0 8px 26px rgba(14,165,233,.44); }
.swa-btn:active { transform:translateY(0); }
.swa-btn:disabled { opacity:.36; cursor:not-allowed; transform:none; box-shadow:none; }
.swa-btn::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.12) 50%,transparent 100%);
  transform:translateX(-100%); animation: swaShm 3.5s ease-in-out infinite;
}
.swa-btn:disabled::after { animation:none; }

/* Pills */
.swa-pills { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; z-index:1; }
.swa-pills span { font-size:.66rem; font-weight:600; color:rgba(255,255,255,.28); }

/* ─── Currency indicator pill ───────────────────────────── */
.swa-curpill {
  display:flex; align-items:center; gap:7px;
  background:rgba(56,189,248,.08); border:1px solid rgba(56,189,248,.2);
  border-radius:100px; padding:5px 11px; margin-bottom:13px; width:fit-content; max-width:100%;
}
.swa-cpdot  { width:6px; height:6px; background:#38BDF8; border-radius:50%; flex-shrink:0; }
#swa-cptext { font-size:.74rem; font-weight:600; color:#7DD3FC; }
.swa-cpchg  { font-size:.7rem; font-weight:700; color:rgba(255,255,255,.38); background:none; border:none; cursor:pointer; text-decoration:underline; text-underline-offset:2px; padding:0; font-family:var(--f); }

/* ─── Input fields ──────────────────────────────────────── */
.swa-fb   { margin-bottom: 13px; }
.swa-flbl {
  display:flex; align-items:center; gap:6px;
  font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:rgba(255,255,255,.44); margin-bottom:6px;
}
.swa-opt  { font-weight:500; text-transform:none; letter-spacing:0; opacity:.75; }
.swa-fic  { display:flex; align-items:center; justify-content:center; width:19px; height:19px; border-radius:5px; flex-shrink:0; }
.swa-nic  { background:rgba(168,85,247,.2); color:#D8B4FE; }
.swa-iic  { background:rgba(14,165,233,.2);  color:#7DD3FC; }
.swa-eic  { background:rgba(244,63,94,.2);   color:#FDA4AF; }
.swa-sic  { background:rgba(16,185,129,.2);  color:#6EE7B7; }
.swa-ftt  { margin-left:auto; font-size:.64rem; color:rgba(255,255,255,.22); cursor:help; }
.swa-fr {
  display:flex !important; align-items:center !important;
  background:rgba(255,255,255,.06) !important;
  border:1.5px solid rgba(255,255,255,.12) !important;
  border-radius: var(--r1) !important; overflow:hidden !important;
  transition: border-color .2s, box-shadow .2s; min-height:46px;
  box-shadow: none !important;
}
.swa-fr:focus-within {
  border-color:rgba(56,189,248,.5) !important;
  box-shadow:0 0 0 3px rgba(14,165,233,.13) !important;
}
.swa-fp {
  padding:0 11px !important; font-family:var(--m) !important;
  font-size:.82rem !important; color:rgba(255,255,255,.32) !important;
  border-right:1.5px solid rgba(255,255,255,.08) !important;
  align-self:stretch !important; display:flex !important; align-items:center !important;
  background:rgba(255,255,255,.03) !important; white-space:nowrap !important; min-width:30px !important;
}
/* Force dark background on ALL inputs inside plugin — overrides any WordPress/Elementor/theme CSS */
.swa-root .swa-fi,
.swa-root input.swa-fi,
.swa-root input[type="number"].swa-fi,
.swa-root input[type="text"].swa-fi {
  flex:1 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  padding: 11px 12px !important;
  font-family: var(--f) !important;
  font-size: .92rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  min-width: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.swa-root .swa-fi::placeholder,
.swa-root input.swa-fi::placeholder {
  color: rgba(255,255,255,.22) !important;
  opacity: 1 !important;
}
/* Name input specifically */
.swa-root .swa-nfi,
.swa-root input.swa-nfi {
  font-size: .88rem !important;
  font-weight: 500 !important;
}
/* Autofill override — browsers inject yellow/white bg on autofill */
.swa-root .swa-fi:-webkit-autofill,
.swa-root .swa-fi:-webkit-autofill:hover,
.swa-root .swa-fi:-webkit-autofill:focus,
.swa-root input.swa-fi:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,.06) inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
}
.swa-fs  { padding:0 10px; font-size:.66rem; font-weight:600; color:rgba(255,255,255,.22); white-space:nowrap; flex-shrink:0; }
.swa-ffb { min-height:14px; margin-top:3px; font-size:.68rem; font-weight:600; }
.swa-ffb.ok   { color:#34D399; }
.swa-ffb.warn { color:#FBBF24; }
.swa-ffb.err  { color:#F87171; }

/* Live strip */
.swa-strip {
  display:flex; align-items:center;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
  border-radius: var(--r1); padding:9px 12px; margin-bottom:12px;
  gap:0;
}
.swa-sp   { display:flex; flex-direction:column; align-items:center; gap:2px; flex:1; }
.swa-sl2  { font-size:.58rem; font-weight:600; color:rgba(255,255,255,.3); }
.swa-sv   { font-size:.74rem; font-weight:800; font-family:var(--m); color:#fff; }
.swa-sdiv { width:1px; height:26px; background:rgba(255,255,255,.1); margin:0 6px; }

.swa-err {
  display:flex; align-items:flex-start; gap:7px;
  background:rgba(244,63,94,.12); border:1px solid rgba(244,63,94,.25);
  border-radius: var(--r1); padding:8px 12px; margin-bottom:11px;
  font-size:.76rem; font-weight:600; color:#F87171;
}
.swa-priv { text-align:center; margin-top:9px; font-size:.66rem; color:rgba(255,255,255,.25); }

/* ═══════════════════════════════════════════════════════
   LOADING SCREEN
═══════════════════════════════════════════════════════ */
.swa-load {
  display:flex; flex-direction:column; align-items:center; gap:15px;
  background:#060C17; padding:48px 20px; border-radius:var(--r4); width:100%;
}
.swa-lring  { position:relative; width:100px; height:100px; }
.swa-lring svg { width:100px; height:100px; }
.swa-larc   { transform-origin:center; animation:swaLrc 1.5s var(--ease) infinite; }
.swa-lico   { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1.5rem; }
.swa-load h3 { font-size:.98rem; font-weight:800; color:#fff; text-align:center; }
.swa-lsteps { display:flex; flex-direction:column; gap:6px; margin-top:4px; width:100%; max-width:260px; }
.swa-lstep  { font-size:.72rem; font-weight:600; color:rgba(255,255,255,.22); padding:4px 12px; border-radius:100px; border:1px solid transparent; transition:all .3s; text-align:center; }
.swa-lstep.act  { color:#7DD3FC; border-color:rgba(56,189,248,.3); background:rgba(56,189,248,.08); }
.swa-lstep.done { color:#34D399; }

/* ═══════════════════════════════════════════════════════
   DASHBOARD — NAV
   Mobile: compact | Tablet+: full
═══════════════════════════════════════════════════════ */
.swa-nav {
  position:sticky; top:0; z-index:200;
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--bdr);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 12px; min-height:52px; gap:8px;
}
.swa-nl { display:flex; align-items:center; gap:8px; flex:1; min-width:0; overflow:hidden; }
.swa-nname { font-size:.86rem; font-weight:800; color:var(--ink); letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.swa-nsep  { color:var(--bdr); font-weight:300; flex-shrink:0; }
.swa-npage { font-size:.7rem; font-weight:600; color:var(--mut); white-space:nowrap; }
.swa-nr    { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.swa-ngreet { font-size:.72rem; font-weight:700; color:var(--ink); padding:3px 9px; background:var(--s2); border-radius:100px; border:1px solid var(--bdr); white-space:nowrap; }
.swa-ncur  { font-size:.66rem; font-weight:800; letter-spacing:.06em; background:var(--indL); color:var(--ind); padding:3px 9px; border-radius:100px; font-family:var(--m); }
.swa-nscore { display:flex; align-items:center; gap:5px; font-size:.7rem; font-weight:600; background:var(--s2); border:1px solid var(--bdr); padding:3px 9px; border-radius:100px; color:var(--mut); white-space:nowrap; }
.swa-nscore b { color:var(--ink); font-family:var(--m); font-weight:800; }
.swa-nsdot { width:6px; height:6px; border-radius:50%; background:var(--grn); flex-shrink:0; box-shadow:0 0 0 2px var(--grnL); }
.swa-recalc {
  display:flex; align-items:center; gap:5px;
  font-size:.74rem; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#0EA5E9,#6366F1);
  border:none; border-radius:var(--r1); padding:6px 11px;
  box-shadow:0 3px 12px rgba(14,165,233,.32);
  transition:transform .2s var(--spg),box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.swa-recalc:hover  { transform:scale(1.04); box-shadow:0 5px 18px rgba(14,165,233,.46); }
.swa-recalc:active { transform:scale(.98); }

/* ═══════════════════════════════════════════════════════
   DASHBOARD BODY
═══════════════════════════════════════════════════════ */
.swa-dbody { width:100%; max-width:1320px; margin:0 auto; padding:12px 10px 40px; }

/* ── KPI ROW ─────────────────────────────────────────────
   Mobile:  2 × 2 grid
   Tablet:  2 × 2 grid (larger)
   Desktop: 4 × 1 row
──────────────────────────────────────────────────────── */
.swa-krow {
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.swa-kcard {
  background:var(--s0); border:1px solid var(--bdr);
  border-radius:var(--r2); padding:13px 12px 11px;
  position:relative; overflow:hidden;
  box-shadow:var(--sh0); display:flex; align-items:flex-start; gap:9px;
  transition:transform .22s var(--spg),box-shadow .22s;
  animation:swaCIn .5s var(--spg) both; min-width:0;
  -webkit-tap-highlight-color:transparent;
}
.swa-kcard:hover { transform:translateY(-3px); box-shadow:var(--sh2); }
.swa-kcard:nth-child(1){animation-delay:.04s}
.swa-kcard:nth-child(2){animation-delay:.08s}
.swa-kcard:nth-child(3){animation-delay:.12s}
.swa-kcard:nth-child(4){animation-delay:.16s}

.swa-kico { width:32px; height:32px; flex-shrink:0; border-radius:9px; display:flex; align-items:center; justify-content:center; }
.swa-ki1 { background:var(--bluL); color:var(--blu2); }
.swa-ki2 { background:var(--redL); color:var(--red);  }
.swa-ki3 { background:var(--teaL); color:var(--teal); }
.swa-ki4 { background:var(--purL); color:var(--pur);  }

.swa-kdata { flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.swa-klbl  { font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.swa-kval  { font-size:1.05rem; font-weight:800; font-family:var(--m); color:var(--ink); line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.swa-kbar  { position:absolute; bottom:0; left:0; right:0; height:3px; }
.swa-kb1 { background:linear-gradient(90deg,#0EA5E9,#60A5FA); }
.swa-kb2 { background:linear-gradient(90deg,#F43F5E,#FB923C); }
.swa-kb3 { background:linear-gradient(90deg,#14B8A6,#10B981); }
.swa-kb4 { background:linear-gradient(90deg,#A855F7,#6366F1); }

/* ── MAIN GRID ───────────────────────────────────────────
   Mobile:  1 col
   Tablet:  1 col
   Desktop: 360px | 1fr (2 col)
──────────────────────────────────────────────────────── */
.swa-mgrid { display:grid; grid-template-columns:1fr; gap:12px; align-items:start; }
.swa-left  { display:flex; flex-direction:column; gap:12px; }
.swa-right { display:flex; flex-direction:column; gap:12px; }

/* ── PANEL ──────────────────────────────────────────────── */
.swa-panel {
  background:var(--s0); border:1px solid var(--bdr);
  border-radius:var(--r3); padding:16px 14px;
  box-shadow:var(--sh0); animation:swaCIn .5s var(--spg) both;
  transition:box-shadow .22s; width:100%;
}
.swa-panel:hover { box-shadow:var(--sh1); }
.swa-ph  { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:13px; gap:8px; flex-wrap:wrap; }
.swa-pht h3 { font-size:.88rem; font-weight:800; color:var(--ink); margin-bottom:2px; }
.swa-pht p  { font-size:.68rem; color:var(--mut); }

/* ── HEALTH SCORE ───────────────────────────────────────── */
.swa-sbadge { font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; padding:4px 10px; border-radius:100px; white-space:nowrap; flex-shrink:0; }
/* Mobile: stacked. Desktop: row */
.swa-sbody  { display:flex; flex-direction:column; align-items:center; gap:14px; }
.swa-ringwrap { position:relative; width:120px; height:120px; flex-shrink:0; cursor:help; }
.swa-rsvg   { width:120px; height:120px; transform:rotate(-90deg); }
.swa-rtrack { fill:none; stroke:var(--s2); stroke-width:10; }
.swa-rfill  { fill:none; stroke:url(#srg); stroke-width:10; stroke-linecap:round; transition:stroke-dashoffset 1.5s var(--ease); }
.swa-rcenter { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.swa-rscore { font-size:2rem; font-weight:900; font-family:var(--m); color:var(--ink); line-height:1; }
.swa-rden   { font-size:.64rem; font-weight:700; color:var(--mut); }
.swa-rtag   { font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; margin-top:1px; }
.swa-bars   { width:100%; display:flex; flex-direction:column; gap:9px; }
.swa-bar    { display:flex; flex-direction:column; gap:4px; }
.swa-brt    { display:flex; justify-content:space-between; align-items:center; }
.swa-brt span:first-child { font-size:.68rem; font-weight:600; color:var(--mut); cursor:help; }
.swa-bv     { font-size:.7rem; font-weight:800; font-family:var(--m); color:var(--ink); }
.swa-btrack { height:5px; background:var(--s2); border-radius:100px; overflow:hidden; }
.swa-bfill  { height:100%; border-radius:100px; transition:width 1.1s var(--ease) .35s; }
.swa-bf1 { background:linear-gradient(90deg,#0EA5E9,#60A5FA); }
.swa-bf2 { background:linear-gradient(90deg,#14B8A6,#5EEAD4); }
.swa-bf3 { background:linear-gradient(90deg,#10B981,#6EE7B7); }
.swa-bf4 { background:linear-gradient(90deg,#F59E0B,#FCD34D); }
.swa-bf5 { background:linear-gradient(90deg,#6366F1,#A5B4FC); }

/* ── AI Tag ── */
.swa-aitag { font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; background:linear-gradient(135deg,var(--bluL),var(--indL)); color:var(--ind); padding:4px 10px; border-radius:100px; white-space:nowrap; flex-shrink:0; }

/* ── Insights ── */
.swa-ifeed { display:flex; flex-direction:column; gap:8px; }
.swa-insight {
  display:flex; gap:9px; align-items:flex-start;
  padding:11px; border-radius:var(--r1); border:1px solid transparent;
  animation:swaSIn .35s ease both;
}
.swa-exc  { background:#F0FDF4; border-color:#BBF7D0; }
.swa-good { background:var(--bluL); border-color:#BFDBFE; }
.swa-warn { background:#FFFBEB; border-color:#FDE68A; }
.swa-alrt { background:var(--redL); border-color:#FECACA; }
.swa-iico { font-size:.96rem; flex-shrink:0; margin-top:2px; }
.swa-ibody strong { display:block; font-size:.76rem; font-weight:800; color:var(--ink); margin-bottom:2px; }
.swa-ibody span   { font-size:.7rem; color:var(--mut); line-height:1.55; }

/* ── Emergency Fund ── */
.swa-emhead { display:flex; gap:11px; align-items:flex-start; margin-bottom:12px; }
.swa-emico  { font-size:1.7rem; line-height:1; flex-shrink:0; }
.swa-emhead h4 { font-size:.86rem; font-weight:800; color:var(--ink); margin-bottom:3px; }
.swa-emhead p  { font-size:.7rem; color:var(--mut); line-height:1.5; }
.swa-emtrack { height:9px; background:var(--s2); border-radius:100px; overflow:visible; position:relative; margin-bottom:5px; }
.swa-emfill  { height:100%; border-radius:100px; background:linear-gradient(90deg,var(--grn),var(--teal)); transition:width 1s var(--ease) .4s; }
.swa-emmrk   { position:absolute; top:-3px; left:100%; transform:translateX(-50%); width:3px; height:15px; background:var(--amb); border-radius:2px; }
.swa-emticks { display:flex; justify-content:space-between; font-size:.6rem; color:var(--mut2); font-weight:600; margin-bottom:11px; }
.swa-emstats { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:11px; }
.swa-emstat  { background:var(--s1); border:1px solid var(--bdr); border-radius:var(--r1); padding:8px 9px; }
.swa-esl { display:block; font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--mut); margin-bottom:3px; }
.swa-esv { font-size:.8rem; font-weight:800; font-family:var(--m); color:var(--ink); }
.swa-red { color:var(--red) !important; }
.swa-emedu { background:var(--bluL); border:1px solid #BFDBFE; border-radius:var(--r1); padding:10px 12px; font-size:.7rem; color:var(--mut); line-height:1.6; }
.swa-emedu strong { display:block; font-size:.74rem; color:var(--ink); margin-bottom:3px; }

/* ── Charts pair ─────────────────────────────────────────
   Mobile: 1 col | Tablet+: 2 col
──────────────────────────────────────────────────────── */
.swa-cpair { display:grid; grid-template-columns:1fr; gap:12px; }
.swa-cpanel { padding:16px 14px; }
.swa-cbox   { width:100%; }
.swa-cbox canvas { width:100%!important; max-height:220px; }
.swa-lbox canvas { max-height:180px!important; }

.swa-cleg { display:flex; gap:8px; flex-wrap:wrap; font-size:.66rem; font-weight:600; color:var(--mut); align-items:center; flex-shrink:0; }
.swa-cleg span { display:flex; align-items:center; gap:4px; }
.swa-cleg em   { display:inline-block; width:7px; height:7px; border-radius:50%; font-style:normal; flex-shrink:0; }

/* Donut */
.swa-dwrap { display:flex; flex-direction:column; align-items:center; gap:10px; }
.swa-dcv   { position:relative; width:150px; height:150px; }
.swa-dcv canvas { width:150px!important; height:150px!important; }
.swa-dcen  { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
#swa-dval  { font-size:.9rem; font-weight:800; font-family:var(--m); color:var(--ink); line-height:1; }
#swa-dlbl  { font-size:.62rem; color:var(--mut); font-weight:600; }
.swa-dkey  { display:flex; flex-direction:column; gap:6px; width:100%; }
.swa-dkr   { display:flex; align-items:center; gap:7px; }
.swa-dkd   { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.swa-dkl   { font-size:.7rem; font-weight:600; color:var(--ink); flex:1; }
.swa-dkp   { font-size:.64rem; color:var(--mut); font-family:var(--m); }

/* Projection */
.swa-ptags { display:flex; gap:6px; flex-wrap:wrap; }
.swa-ptag  { font-size:.7rem; font-weight:800; font-family:var(--m); padding:3px 9px; border-radius:100px; white-space:nowrap; }
.swa-ptg   { background:var(--grnL); color:var(--grn); }
.swa-ptb   { background:var(--bluL); color:var(--blu2); }

/* Invest */
.swa-ttag  { font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; padding:4px 9px; border-radius:100px; white-space:nowrap; flex-shrink:0; }

/* ══════════════════════════════════════════════════════
   INVESTMENT CARDS — Premium Redesign
══════════════════════════════════════════════════════ */
/* Mobile: 1 col | Tablet: 2 col | Desktop: 3 col */
.swa-igrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.swa-icard {
  background: var(--s0);
  border: 1px solid var(--bdr);
  border-radius: var(--r3);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all .25s var(--spg);
  animation: swaCIn .4s var(--spg) both;
  position: relative;
  overflow: hidden;
}
/* Top accent line per card */
.swa-icard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0EA5E9, #6366F1);
  opacity: 0;
  transition: opacity .25s;
}
.swa-icard:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(8,14,26,.12), 0 4px 12px rgba(8,14,26,.06);
  border-color: rgba(99,102,241,.2);
}
.swa-icard:hover::before { opacity: 1; }

/* Card header row: emoji + title + pill */
.swa-icard-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.swa-icem {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #EEF2FF, #E0F2FE);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: transform .25s var(--spg);
}
.swa-icard:hover .swa-icem { transform: scale(1.1) rotate(-5deg); }

.swa-icard-title-row {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.swa-ictit {
  font-size: .84rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}
.swa-icpil {
  font-size: .6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 8px;
  border-radius: 100px;
  align-self: flex-start;
}

/* Divider */
.swa-icard-div {
  height: 1px;
  background: var(--bdr);
  margin: 2px 0;
}

/* Description */
.swa-icdsc {
  font-size: .74rem;
  color: var(--mut);
  line-height: 1.6;
}

/* Tips */
/* Mobile: 1 col | Tablet: 2 col | Desktop: 3 col */
.swa-tmosaic { display:grid; grid-template-columns:1fr; gap:10px; }
.swa-tbrick  {
  background:var(--s1); border:1px solid var(--bdr); border-radius:var(--r2);
  padding:14px 13px; display:flex; flex-direction:column; gap:5px;
  transition:all .22s var(--spg);
}
.swa-tbrick:hover { transform:translateY(-2px); box-shadow:var(--sh1); border-color:transparent; background:var(--s0); }
.swa-tbi  { font-size:1.3rem; line-height:1; }
.swa-tbrick strong { font-size:.78rem; font-weight:800; color:var(--ink); }
.swa-tbrick span   { font-size:.68rem; color:var(--mut); line-height:1.6; }

/* Tooltip */
.swa-tipbox {
  position:fixed; z-index:9999; background:rgba(17,24,39,.95); color:#F3F4F6;
  font-family:var(--f); font-size:.7rem; font-weight:500;
  padding:7px 11px; border-radius:7px; box-shadow:0 4px 16px rgba(0,0,0,.28);
  pointer-events:none; max-width:220px; line-height:1.5;
  opacity:0; transition:opacity .15s;
}
.swa-tipbox.on { opacity:1; }

/* ══════════════════════════════════════════════════════
   MOBILE HIDE — Donut + Projection charts hidden < 600px
══════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  .swa-hide-mobile { display: none !important; }
  /* Bar chart full width when alone */
  .swa-cpair { grid-template-columns: 1fr !important; }
}


/* ═══════════════════════════════════════════════════════
   RESPONSIVE — TABLET (≥ 600px)
═══════════════════════════════════════════════════════ */
@media (min-width: 600px) {

  /* Onboarding */
  .swa-ob     { padding: 40px 24px 48px; gap: 20px; }
  .swa-card   { padding: 30px 26px 26px; }
  .swa-card h2 { font-size: 1.7rem; }
  .swa-ob-sub { font-size: .88rem; }

  /* Currency: 4 columns on tablet */
  .swa-cgrid  { grid-template-columns: repeat(4, 1fr); gap: 9px; }
  .swa-cs     { font-size: 1.3rem; }

  /* KPI: still 2×2 on tablet (keeps numbers readable) */
  .swa-krow   { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .swa-kval   { font-size: 1.15rem; }
  .swa-klbl   { font-size: .64rem; }
  .swa-kico   { width: 36px; height: 36px; }

  /* Charts pair: 2 columns */
  .swa-cpair  { grid-template-columns: 1fr 1fr; }

  /* Invest: 2 columns on tablet */
  .swa-igrid  { grid-template-columns: repeat(2, 1fr); }

  /* Tips: 2 columns */
  .swa-tmosaic { grid-template-columns: repeat(2, 1fr); }
  .swa-tbig    { grid-column: span 2; }

  /* Score: side by side */
  .swa-sbody  { flex-direction: row; align-items: center; }
  .swa-ringwrap { width: 128px; height: 128px; }
  .swa-rsvg   { width: 128px; height: 128px; }

  /* Nav: show page label */
  .swa-nname  { font-size: .9rem; }

  /* Panel padding */
  .swa-panel  { padding: 20px 18px; }
  .swa-dbody  { padding: 16px 14px 50px; }
}


/* ═══════════════════════════════════════════════════════
   RESPONSIVE — DESKTOP (≥ 960px)
═══════════════════════════════════════════════════════ */
@media (min-width: 960px) {

  /* KPI: 4 in one row */
  .swa-krow   { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .swa-kval   { font-size: 1.22rem; }
  .swa-klbl   { font-size: .66rem; }
  .swa-kico   { width: 38px; height: 38px; }

  /* Main grid: 2 columns */
  .swa-mgrid  { grid-template-columns: 360px 1fr; gap: 18px; }

  /* Invest: 3 columns on desktop */
  .swa-igrid  { grid-template-columns: repeat(3, 1fr); }

  /* Tips: 3 col mosaic */
  .swa-tmosaic { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto; }
  .swa-tbig    { grid-row: span 2; grid-column: auto; }

  /* Score ring bigger */
  .swa-ringwrap { width: 138px; height: 138px; }
  .swa-rsvg   { width: 138px; height: 138px; }
  .swa-rscore { font-size: 2.2rem; }

  /* Nav */
  .swa-nname  { font-size: .92rem; }
  .swa-nav    { padding: 0 20px; min-height: 56px; }
  .swa-nscore { font-size: .74rem; }

  /* Panel */
  .swa-panel  { padding: 22px 20px; }
  .swa-dbody  { padding: 20px 18px 60px; }

  /* KPI cards */
  .swa-kcard  { padding: 18px 15px 13px; }
}


/* ═══════════════════════════════════════════════════════
   RESPONSIVE — LARGE DESKTOP (≥ 1200px)
═══════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
  .swa-mgrid  { grid-template-columns: 380px 1fr; }
  .swa-krow   { gap: 16px; }
  .swa-kval   { font-size: 1.28rem; }
  .swa-dbody  { padding: 24px 22px 60px; }
}


/* ═══════════════════════════════════════════════════════
   MOBILE NAV — Clean layout under 600px
   Score badge hidden · Back button visible · Font small
═══════════════════════════════════════════════════════ */
@media (max-width: 599px) {

  /* Hide these completely on mobile */
  .swa-ngreet   { display: none !important; }
  .swa-npage    { display: none !important; }
  .swa-nsep     { display: none !important; }
  .swa-nscore   { display: none !important; }  /* Score badge HIDDEN on mobile */
  .swa-ncur     { display: none !important; }  /* Currency badge hidden on mobile */

  /* Nav layout tight */
  .swa-nav      { padding: 0 10px; min-height: 48px; gap: 6px; }
  .swa-nl       { gap: 6px; }
  .swa-nname    { font-size: .78rem; }

  /* Back button — clean, small */
  .swa-recalc {
    padding: 6px 12px;
    font-size: .72rem;
    gap: 5px;
    border-radius: 7px;
    box-shadow: 0 2px 10px rgba(14,165,233,.28);
  }

  /* KPI cards — smaller font on mobile */
  .swa-kval   { font-size: .9rem; }
  .swa-klbl   { font-size: .52rem; letter-spacing: .03em; }
  .swa-kico   { width: 28px; height: 28px; border-radius: 7px; }
  .swa-kcard  { padding: 11px 10px 10px; gap: 7px; }

  /* Panel heading smaller */
  .swa-pht h3 { font-size: .8rem; }
  .swa-pht p  { font-size: .63rem; }

  /* Insight text smaller */
  .swa-ibody strong { font-size: .72rem; }
  .swa-ibody span   { font-size: .66rem; }

  /* Bar label smaller */
  .swa-brt span:first-child { font-size: .62rem; }
  .swa-bv   { font-size: .64rem; }

  /* Emergency fund smaller */
  .swa-emhead h4 { font-size: .8rem; }
  .swa-emhead p  { font-size: .64rem; }
  .swa-esl       { font-size: .56rem; }
  .swa-esv       { font-size: .74rem; }

  /* Chart legend smaller */
  .swa-cleg { font-size: .6rem; gap: 6px; }

  /* Invest / tips text smaller */
  .swa-ictit  { font-size: .74rem; }
  .swa-icdsc  { font-size: .64rem; }
  .swa-tbrick strong { font-size: .74rem; }
  .swa-tbrick span   { font-size: .64rem; }

  /* Score ring smaller on mobile */
  .swa-ringwrap { width: 110px; height: 110px; }
  .swa-rsvg     { width: 110px; height: 110px; }
  .swa-rscore   { font-size: 1.75rem; }
  .swa-rtag     { font-size: .56rem; }

  /* Onboarding text smaller */
  .swa-card h2  { font-size: 1.3rem; }
  .swa-sub      { font-size: .78rem; }
  .swa-flbl     { font-size: .64rem; }
  .swa-fi       { font-size: .86rem; }
  .swa-btn      { font-size: .86rem; padding: 12px 16px; }
}

/* ── Extra small phones (< 380px) ── */
@media (max-width: 380px) {
  .swa-kval   { font-size: .82rem; }
  .swa-klbl   { font-size: .48rem; }
  .swa-kico   { width: 24px; height: 24px; }
  .swa-kcard  { padding: 9px 8px 8px; gap: 6px; }
  .swa-recalc { padding: 5px 10px; font-size: .68rem; }
}

/* ── Tablet nav (600–959px) ── */
@media (min-width: 600px) and (max-width: 959px) {
  .swa-npage  { display: none !important; }
  .swa-nsep   { display: none !important; }
  .swa-ngreet { font-size: .68rem; padding: 3px 8px; }
  .swa-nscore { font-size: .68rem; padding: 3px 8px; }
}