*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ===== DARK THEME (Midnight - Deep Navy + Gold) ===== */
[data-theme="dark"]{
  --bg:#080c18;--bg2:#0e1425;--bg3:#162036;--card:#121a2e;--card2:#182240;
  --accent:#d4a853;--accent2:#c49a3a;--accent3:#3b82f6;--accent4:#60a5fa;
  --gold:#e8b94a;--coral:#f87171;--blue:#38bdf8;--orange:#fbbf24;
  --text:#f0f2f8;--text2:#94a3b8;--text3:#546580;
  --border:rgba(255,255,255,.06);--border-h:rgba(212,168,83,.25);
  --nav-bg:rgba(8,12,24,.85);--shadow:0 8px 32px rgba(0,0,0,.5);
  --glow:0 0 40px rgba(212,168,83,.1);
  --accent-r:212;--accent-g:168;--accent-b:83;
  --chart-bg:#0e1425;--dl-bg:#080c18;
  --theme-bg:none;
}

/* ===== LIGHT THEME (Crisp + Gold) ===== */
[data-theme="light"]{
  --bg:#f5f7fb;--bg2:#ffffff;--bg3:#eef1f7;--card:#ffffff;--card2:#f0f3f9;
  --accent:#b8860b;--accent2:#a67709;--accent3:#2563eb;--accent4:#3b82f6;
  --gold:#d4a020;--coral:#ef4444;--blue:#0ea5e9;--orange:#f59e0b;
  --text:#0f172a;--text2:#475569;--text3:#94a3b8;
  --border:rgba(0,0,0,.07);--border-h:rgba(184,134,11,.2);
  --nav-bg:rgba(245,247,251,.9);--shadow:0 8px 32px rgba(0,0,0,.08);
  --glow:0 0 40px rgba(184,134,11,.06);
  --accent-r:184;--accent-g:134;--accent-b:11;
  --chart-bg:#ffffff;--dl-bg:#f5f7fb;
  --theme-bg:none;
}

/* ===== GALAXY THEME (Purple + Stars) ===== */
[data-theme="galaxy"]{
  --bg:#0d0d1a;--bg2:#141428;--bg3:#1a1a35;--card:#12122a;--card2:#1e1e3d;
  --accent:#a78bfa;--accent2:#8b5cf6;--accent3:#c084fc;--accent4:#e879f9;
  --gold:#fbbf24;--coral:#fb7185;--blue:#818cf8;--orange:#fbbf24;
  --text:#ede9fe;--text2:#c4b5fd;--text3:#6d28d9;
  --border:rgba(167,139,250,.12);--border-h:rgba(167,139,250,.3);
  --nav-bg:rgba(13,13,26,.9);--shadow:0 8px 32px rgba(0,0,0,.6);
  --glow:0 0 40px rgba(167,139,250,.2);
  --accent-r:167;--accent-g:139;--accent-b:250;
  --chart-bg:#141428;--dl-bg:#0d0d1a;
  --theme-bg:galaxy;
}

/* ===== COFFEE THEME (Warm Brown + Cream) ===== */
[data-theme="coffee"]{
  --bg:#1c1410;--bg2:#2a1f18;--bg3:#3d2e22;--card:#261c14;--card2:#3a2a1e;
  --accent:#d4a574;--accent2:#c49464;--accent3:#a67c52;--accent4:#e8c4a0;
  --gold:#d4a574;--coral:#e07a5f;--blue:#c49464;--orange:#f4a261;
  --text:#f5ebe0;--text2:#d4c4b0;--text3:#8b7355;
  --border:rgba(212,165,116,.12);--border-h:rgba(212,165,116,.3);
  --nav-bg:rgba(28,20,16,.92);--shadow:0 8px 32px rgba(0,0,0,.5);
  --glow:0 0 40px rgba(212,165,116,.15);
  --accent-r:212;--accent-g:165;--accent-b:116;
  --chart-bg:#2a1f18;--dl-bg:#1c1410;
  --theme-bg:coffee;
}

:root{--radius:20px;--radius2:14px}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;min-height:100vh;transition:background .4s,color .4s}
body.theme-transition,body.theme-transition *,body.theme-transition *::before,body.theme-transition *::after{transition:background .4s ease,background-color .4s ease,color .4s ease,border-color .4s ease,box-shadow .4s ease,fill .4s ease,stroke .4s ease!important}
.mono{font-family:'Space Mono',monospace}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px}

.bg-glow{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}
.bg-glow .orb{position:absolute;border-radius:50%;filter:blur(100px);animation:orbFloat 25s ease-in-out infinite}
[data-theme="dark"] .bg-glow .orb{opacity:.06}
[data-theme="light"] .bg-glow .orb{opacity:.04}
.bg-glow .orb:nth-child(1){width:500px;height:500px;background:var(--accent);top:-150px;left:-150px}
.bg-glow .orb:nth-child(2){width:400px;height:400px;background:var(--accent3);bottom:-100px;right:-100px;animation-delay:-8s}
.bg-glow .orb:nth-child(3){width:350px;height:350px;background:var(--gold);top:40%;left:60%;animation-delay:-16s}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(60px,-40px) scale(1.1)}50%{transform:translate(-40px,60px) scale(.9)}75%{transform:translate(50px,25px) scale(1.05)}}
.app{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}

/* NAV */
nav{position:sticky;top:0;z-index:200;background:var(--nav-bg);backdrop-filter:blur(24px) saturate(1.4);border-bottom:1px solid var(--border);padding:0 32px;transition:all .3s}
nav.scrolled{box-shadow:var(--shadow)}
.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;align-items:center;gap:11px;cursor:pointer;text-decoration:none;flex-shrink:0}
.logo-mark{width:38px;height:38px;background:linear-gradient(135deg,var(--accent),var(--accent3));border-radius:11px;display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff;transition:transform .3s;letter-spacing:-.5px}
[data-theme="light"] .logo-mark{color:#fff}
.logo:hover .logo-mark{transform:rotate(8deg) scale(1.08)}
.logo-text{font-size:21px;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--accent3));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.nav-mid{display:flex;align-items:center;gap:2px;height:100%}
.nav-link{position:relative;padding:10px 18px;border-radius:10px;color:var(--text2);text-decoration:none;font-size:14px;font-weight:600;transition:all .25s;cursor:pointer;display:flex;align-items:center;gap:6px;background:none;border:none;font-family:inherit;height:42px}
.nav-link:hover,.nav-link.active{color:var(--accent);background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.08)}
.nav-link .chevron{width:12px;height:12px;transition:transform .25s}
.nav-right{display:flex;align-items:center;gap:10px}
/* Theme toggle */
.theme-toggle{width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text2);cursor:pointer;display:grid;place-items:center;font-size:18px;transition:all .25s}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent);background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.06)}
.nav-cta{padding:10px 22px;border-radius:10px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;border:none;background:linear-gradient(135deg,var(--accent),var(--accent3));color:#fff;transition:all .3s;box-shadow:0 2px 16px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.25);position:relative;overflow:hidden}
.nav-cta::before{content:'';position:absolute;inset:-1px;border-radius:11px;background:linear-gradient(135deg,var(--accent),var(--accent3),var(--gold));background-size:200% 200%;animation:ctaGlow 3s ease infinite;z-index:-1;filter:blur(4px);opacity:.5}
@keyframes ctaGlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
[data-theme="light"] .nav-cta{color:#fff}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 6px 28px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.45)}
.hamburger{display:none;background:none;border:none;color:var(--text);cursor:pointer;padding:8px;border-radius:8px;transition:background .2s}
.hamburger:hover{background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.06)}
.hamburger svg{width:24px;height:24px}

/* Mega */
.mega-overlay{position:fixed;inset:0;z-index:150;display:none}
.mega-overlay.open{display:block}
.mega-menu{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px 32px;min-width:640px;box-shadow:0 20px 60px rgba(0,0,0,.25);display:none;animation:menuIn .25s ease}
.mega-menu.open{display:block}
@keyframes menuIn{from{opacity:0;transform:translateX(-50%) translateY(-8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.mega-label{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mega-item{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:12px;cursor:pointer;transition:all .2s;text-decoration:none;color:var(--text)}
.mega-item:hover{background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.08);transform:translateX(4px)}
.mega-icon{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:19px;flex-shrink:0}
.mega-item-text h4{font-size:14px;font-weight:700;margin-bottom:2px}
.mega-item-text span{font-size:12px;color:var(--text3);line-height:1.3}

/* Mobile drawer */
.mobile-drawer{position:fixed;top:0;right:0;width:320px;max-width:85vw;height:100vh;background:var(--card);z-index:300;transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);overflow-y:auto;box-shadow:-10px 0 40px rgba(0,0,0,.3)}
.mobile-drawer.open{transform:translateX(0)}
.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:250;display:none;opacity:0;transition:opacity .3s}
.drawer-backdrop.open{display:block;opacity:1}
.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border)}
.drawer-close{background:none;border:none;color:var(--text2);cursor:pointer;padding:6px;border-radius:8px;transition:all .2s}
.drawer-close:hover{color:var(--text);background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.06)}
.drawer-close svg{width:20px;height:20px}
.drawer-section{padding:16px 20px}
.drawer-section-label{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:10px;padding:0 4px}
.drawer-item{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:12px;cursor:pointer;transition:all .2s;color:var(--text);text-decoration:none;font-size:14px;font-weight:500}
.drawer-item:hover{background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.08);color:var(--accent)}
.drawer-item .di-icon{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;font-size:16px;flex-shrink:0}

@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* HOME */
.hero{position:relative;padding:40px 0 20px;overflow:hidden}
.hero-content{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hero-left{max-width:540px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.1);border:1px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),.2);border-radius:100px;padding:7px 18px 7px 10px;font-size:12px;color:var(--accent);margin-bottom:28px;font-weight:600}
.hero-badge .flag{font-size:16px}
.hero-badge .dot{width:6px;height:6px;background:var(--accent);border-radius:50%;animation:pulse 2s ease infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.8)}}
.hero h1{font-size:clamp(32px,4.5vw,56px);font-weight:800;line-height:1.08;margin-bottom:20px;letter-spacing:-.02em}
.hero h1 .gradient{background:linear-gradient(135deg,var(--accent),var(--accent3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;animation:shimmer 4s ease infinite}
@keyframes shimmer{0%,100%{background-position:0% center}50%{background-position:100% center}}
.hero-desc{color:var(--text2);font-size:17px;line-height:1.65;margin-bottom:36px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.btn{padding:14px 28px;border-radius:var(--radius2);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;border:none;transition:all .3s;display:inline-flex;align-items:center;gap:8px}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 4px 20px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.25)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 30px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.35)}
.btn-ghost{background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.04);color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--border-h);color:var(--accent)}
.btn-secondary{background:var(--bg2);color:var(--text2);border:1px solid var(--border)}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm{padding:10px 18px;font-size:13px}
.btn-row{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.hero-visual{position:relative;height:380px;display:flex;align-items:center;justify-content:center}
.hero-card{position:absolute;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px 26px;box-shadow:var(--shadow);animation:heroFloat 6s ease-in-out infinite}
.hero-card .hc-label{font-size:11px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.hero-card .hc-value{font-size:26px;font-weight:800;letter-spacing:-.02em}
.hero-card .hc-sub{font-size:12px;color:var(--text2);margin-top:4px}
.hc-1{top:10px;left:10%;z-index:3}
.hc-2{top:40%;right:5%;animation-delay:-2s;z-index:2}
.hc-3{bottom:20px;left:20%;animation-delay:-4s;z-index:1}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.hero-ring{position:absolute;width:260px;height:260px;border:2px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),.12);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);animation:ringRotate 30s linear infinite}
.hero-ring::after{content:'';position:absolute;width:12px;height:12px;background:var(--accent);border-radius:50%;top:-6px;left:50%;box-shadow:0 0 20px var(--accent)}
@keyframes ringRotate{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}

.section-title{text-align:center;margin-bottom:48px}
.section-title h2{font-size:clamp(24px,3.5vw,36px);font-weight:800;margin-bottom:10px}
.section-title p{color:var(--text2);font-size:15px;max-width:500px;margin:0 auto}
.featured-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:72px}
.featured-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:32px 28px;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.featured-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:20px 20px 0 0;opacity:0;transition:opacity .4s}
.featured-card:hover{transform:translateY(-6px);border-color:var(--border-h);box-shadow:var(--glow)}
.featured-card:hover::before{opacity:1}
.featured-card:nth-child(1)::before{background:linear-gradient(90deg,var(--accent),var(--gold))}
.featured-card:nth-child(2)::before{background:linear-gradient(90deg,var(--accent3),var(--accent4))}
.featured-card:nth-child(3)::before{background:linear-gradient(90deg,var(--gold),var(--orange))}
.fc-icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:23px;margin-bottom:20px}
.featured-card h3{font-size:18px;font-weight:700;margin-bottom:8px}
.featured-card p{font-size:13px;color:var(--text2);line-height:1.6;margin-bottom:16px}
.fc-link{font-size:13px;font-weight:700;color:var(--accent);display:inline-flex;align-items:center;gap:6px;transition:gap .3s}
.featured-card:hover .fc-link{gap:10px}
.info-section{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:72px}
.info-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:36px 32px}
.info-card h3{font-size:18px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.tip-list{display:flex;flex-direction:column;gap:14px}
.tip-item{display:flex;gap:12px;align-items:flex-start}
.tip-bullet{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:13px;flex-shrink:0;font-weight:800}
.tip-text{font-size:13px;color:var(--text2);line-height:1.55}
.tip-text strong{color:var(--text);font-weight:600}
.quick-links{text-align:center;margin-bottom:72px}
.pill-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.pill{padding:10px 20px;border-radius:100px;background:var(--card);border:1px solid var(--border);color:var(--text2);font-size:13px;font-weight:600;cursor:pointer;transition:all .3s;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.pill:hover{border-color:var(--border-h);color:var(--accent);transform:translateY(-2px)}
.ic-navy{background:linear-gradient(135deg,rgba(var(--accent-r),var(--accent-g),var(--accent-b),.15),rgba(var(--accent-r),var(--accent-g),var(--accent-b),.04))}
.ic-blue{background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(59,130,246,.04))}
.ic-coral{background:linear-gradient(135deg,rgba(248,113,113,.15),rgba(248,113,113,.04))}
.ic-gold{background:linear-gradient(135deg,rgba(232,185,74,.15),rgba(232,185,74,.04))}
.ic-sky{background:linear-gradient(135deg,rgba(56,189,248,.15),rgba(56,189,248,.04))}
.ic-amber{background:linear-gradient(135deg,rgba(251,191,36,.15),rgba(251,191,36,.04))}

/* HERO RESULT - big monthly repayment highlight */
.hero-result{background:linear-gradient(135deg,rgba(var(--accent-r),var(--accent-g),var(--accent-b),.1),rgba(var(--accent-r),var(--accent-g),var(--accent-b),.03));border:1px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),.2);border-radius:var(--radius);padding:32px;text-align:center;margin-bottom:20px;position:relative;overflow:hidden;animation:resultPop .5s cubic-bezier(.34,1.56,.64,1)}
.hero-result::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(var(--accent-r),var(--accent-g),var(--accent-b),.08),transparent 70%);pointer-events:none}
.hero-result .hr-label{font-size:13px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.hero-result .hr-amount{font-size:clamp(36px,5vw,52px);font-weight:800;color:var(--accent);letter-spacing:-.02em;line-height:1.1}
.hero-result .hr-amount .hr-currency{font-size:.5em;opacity:.7;margin-right:4px}
.hero-result .hr-sub{font-size:13px;color:var(--text3);margin-top:8px}
@keyframes resultPop{from{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* Scroll animations */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}

/* Stagger children */
.stagger-children>*{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}
.stagger-children.visible>*:nth-child(1){opacity:1;transform:translateY(0);transition-delay:.05s}
.stagger-children.visible>*:nth-child(2){opacity:1;transform:translateY(0);transition-delay:.15s}
.stagger-children.visible>*:nth-child(3){opacity:1;transform:translateY(0);transition-delay:.25s}
.stagger-children.visible>*:nth-child(4){opacity:1;transform:translateY(0);transition-delay:.35s}

/* Hero text slide in */
.hero-slide{opacity:0;transform:translateX(-30px);transition:opacity .6s ease,transform .6s ease}
.hero-slide.visible{opacity:1;transform:translateX(0)}
.hero-slide-delay-1{transition-delay:.15s}
.hero-slide-delay-2{transition-delay:.3s}
.hero-slide-delay-3{transition-delay:.45s}

/* Typing cursor for hero */
.type-cursor::after{content:'|';color:var(--accent);animation:blink 1s step-end infinite;margin-left:2px}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* CALC PAGES */
.section-head{margin-bottom:32px}
.section-head .back-btn{display:inline-flex;align-items:center;gap:6px;color:var(--text2);font-size:13px;cursor:pointer;margin-bottom:16px;transition:color .2s;background:none;border:none;font-family:inherit;font-weight:600}
.section-head .back-btn:hover{color:var(--accent)}
.section-head h2{font-size:28px;font-weight:800;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.section-head .page-badge{font-size:12px;background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.12);color:var(--accent);padding:4px 12px;border-radius:100px;font-weight:600}
.section-head p{color:var(--text2);margin-top:6px;font-size:14px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{font-size:13px;font-weight:600;color:var(--text2)}
.form-group input,.form-group select{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);padding:13px 16px;color:var(--text);font-size:15px;font-family:inherit;outline:none;transition:all .25s}
.form-group input:focus,.form-group select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.1)}
.form-group select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.form-group .hint{font-size:11px;color:var(--text3)}
.result-panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px;margin-top:28px;animation:fadeUp .4s ease}
.result-panel h3{font-size:18px;font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:8px}
.result-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:var(--bg2);border-radius:var(--radius2);padding:20px;border:1px solid var(--border)}
.stat-card .stat-label{font-size:11px;color:var(--text3);margin-bottom:6px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.stat-card .stat-value{font-size:22px;font-weight:800}
.stat-card .stat-value.accent{color:var(--accent)}
.stat-card .stat-value.coral{color:var(--coral)}
.stat-card .stat-value.gold{color:var(--gold)}
.stat-card .stat-value.blue{color:var(--accent4)}
.chart-container{background:var(--bg2);border-radius:var(--radius2);padding:20px;margin-top:16px}
.chart-container canvas{max-height:320px}
.amort-table-wrap{max-height:400px;overflow-y:auto;margin-top:16px;border-radius:var(--radius2);border:1px solid var(--border)}
.amort-table{width:100%;border-collapse:collapse;font-size:13px}
.amort-table th{background:var(--bg2);padding:12px 14px;text-align:left;font-weight:600;color:var(--text3);position:sticky;top:0;z-index:1;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.amort-table td{padding:10px 14px;border-top:1px solid var(--border)}
.amort-table tr:hover td{background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.03)}
.general-calc{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px;max-width:420px;margin:0 auto}
.calc-display{background:var(--bg);border-radius:var(--radius2);padding:24px;margin-bottom:20px;text-align:right;min-height:96px;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid var(--border)}
.calc-expression{font-size:14px;color:var(--text3);margin-bottom:6px;min-height:20px;word-break:break-all}
.calc-result{font-size:36px;font-weight:800;word-break:break-all}
.calc-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.calc-key{padding:16px;border-radius:var(--radius2);border:1px solid var(--border);font-family:'Space Mono',monospace;font-size:18px;font-weight:700;cursor:pointer;transition:all .15s;background:var(--bg2);color:var(--text)}
.calc-key:hover{background:var(--bg3);transform:scale(1.03)}
.calc-key:active{transform:scale(.97)}
.calc-key.op{background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.1);color:var(--accent)}
.calc-key.op:hover{background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.18)}
.calc-key.eq{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
.calc-key.eq:hover{opacity:.9}
.calc-key.clear{background:rgba(248,113,113,.1);color:var(--coral)}
/* Split bills person card — LEGACY (kept for compatibility) */
.person-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);padding:20px;margin-bottom:12px;animation:fadeUp .3s ease}

/* ===== SPLIT BILLS v2 ===== */
.split-section{transition:box-shadow .3s ease}
.split-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.split-section-title{display:flex;align-items:center;gap:10px}
.split-section-title h3{font-size:16px;font-weight:700}
.split-section-icon{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:16px;flex-shrink:0}
.split-section-desc{font-size:13px;color:var(--text3);margin-bottom:16px}
.split-empty-hint{text-align:center;padding:28px 20px;background:var(--bg2);border:2px dashed var(--border);border-radius:var(--radius2);color:var(--text3);font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:8px}
.split-empty-hint span{font-size:18px}

/* People Tags */
.people-tags-wrap{display:flex;flex-wrap:wrap;gap:8px}
.people-tag{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:8px 10px 8px 10px;transition:all .2s}
.people-tag:hover{border-color:var(--border-h)}
.people-tag-num{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:800;flex-shrink:0}
.people-tag-input{background:transparent;border:none;color:var(--text);font-family:inherit;font-size:14px;font-weight:600;outline:none;width:100px;padding:2px 0;border-bottom:1.5px solid transparent;transition:border-color .2s}
.people-tag-input:focus{border-bottom-color:var(--accent)}
.people-tag-input::placeholder{color:var(--text3);font-weight:400}
.people-tag-remove{background:none;border:none;color:var(--text3);cursor:pointer;padding:4px;border-radius:6px;display:grid;place-items:center;transition:all .2s;flex-shrink:0}
.people-tag-remove svg{width:14px;height:14px}
.people-tag-remove:hover{color:var(--coral);background:rgba(248,113,113,.1)}

/* Item Cards */
.item-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);padding:12px 14px;margin-bottom:6px;transition:all .2s}
.item-card:hover{border-color:var(--border-h)}
.item-card.item-shared{border-color:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.2);background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.03)}
.item-card-top{display:flex;align-items:flex-start;gap:10px}
.item-num{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:800;flex-shrink:0;margin-top:2px}
.item-fields{flex:1;display:flex;flex-direction:column;gap:6px}
.item-desc-input{background:transparent;border:none;border-bottom:1.5px solid var(--border);color:var(--text);font-family:inherit;font-size:14px;font-weight:600;outline:none;padding:4px 0;transition:border-color .2s;width:100%}
.item-desc-input:focus{border-bottom-color:var(--accent)}
.item-desc-input::placeholder{color:var(--text3);font-weight:400}

/* Autocomplete dropdown */
.ac-dropdown{position:absolute;z-index:500;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.25);overflow:hidden;opacity:0;transform:translateY(-6px);transition:opacity .15s ease,transform .15s ease;max-height:320px;overflow-y:auto}
.ac-dropdown.ac-open{opacity:1;transform:translateY(0)}
.ac-option{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background .15s;font-size:13px;color:var(--text)}
.ac-option:hover,.ac-option.ac-focused{background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.1)}
.ac-option .ac-icon{font-size:16px;flex-shrink:0;width:22px;text-align:center}
.ac-option .ac-name{flex:1;font-weight:500}
.ac-option .ac-name strong{color:var(--accent);font-weight:700}
.ac-option .ac-cat{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;font-weight:600;padding:2px 6px;background:var(--bg3);border-radius:4px;flex-shrink:0}
.item-fields-row{display:flex;gap:8px;align-items:center}
.item-cat-select{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:8px 10px;color:var(--text);font-family:inherit;font-size:12px;outline:none;cursor:pointer;flex-shrink:0;transition:border-color .2s;-webkit-appearance:none;appearance:none}
.item-cat-select:focus{border-color:var(--accent)}
.item-amount-wrap{display:flex;align-items:center;background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:0 12px;transition:border-color .2s;flex-shrink:0}
.item-amount-wrap:focus-within{border-color:var(--accent)}
.item-rm{color:var(--text3);font-size:12px;font-weight:600;margin-right:4px}
.item-amount-input{background:none;border:none;color:var(--text);font-family:inherit;font-size:13px;outline:none;padding:8px 0;width:80px;text-align:right}
.item-remove-btn{background:none;border:none;color:var(--text3);cursor:pointer;padding:6px;border-radius:8px;display:grid;place-items:center;transition:all .2s;flex-shrink:0;margin-top:2px}
.item-remove-btn svg{width:14px;height:14px}
.item-remove-btn:hover{color:var(--coral);background:rgba(248,113,113,.1)}

/* Assign row */
.item-assign-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.item-assign-left{flex-shrink:0}
.item-assign-right{flex:1;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.item-assign-select{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:7px 12px;color:var(--text);font-family:inherit;font-size:13px;font-weight:600;outline:none;cursor:pointer;transition:border-color .2s;-webkit-appearance:none;appearance:none;min-width:120px}
.item-assign-select:focus{border-color:var(--accent)}

/* Shared toggle */
.item-shared-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.item-shared-toggle input{display:none}
.item-shared-slider{width:36px;height:20px;background:var(--bg3);border:1px solid var(--border);border-radius:10px;position:relative;transition:all .25s;flex-shrink:0}
.item-shared-slider::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:7px;background:var(--text3);transition:all .25s}
.item-shared-toggle input:checked+.item-shared-slider{background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.2);border-color:var(--accent)}
.item-shared-toggle input:checked+.item-shared-slider::after{transform:translateX(16px);background:var(--accent)}
.item-shared-label{font-size:12px;font-weight:600;color:var(--text2);transition:color .2s}
.item-shared-toggle input:checked~.item-shared-label{color:var(--accent)}

/* Shared people chips */
.item-shared-people{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end}
.item-shared-chip{padding:5px 10px;border-radius:8px;font-size:11px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text2);transition:all .2s;font-family:inherit}
.item-shared-chip.selected{background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.15);border-color:var(--accent);color:var(--accent)}
.item-shared-chip:hover{border-color:var(--accent)}
.item-shared-info{font-size:11px;color:var(--text3);font-weight:500}

/* No-tax toggle */
.item-notax-toggle{display:flex;align-items:center;gap:5px;cursor:pointer;user-select:none;margin-top:4px}
.item-notax-toggle input{display:none}
.item-notax-check{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--border);background:transparent;display:grid;place-items:center;transition:all .2s;flex-shrink:0;position:relative}
.item-notax-check::after{content:'';display:none;width:8px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);margin-top:-2px}
.item-notax-toggle input:checked+.item-notax-check{background:var(--coral);border-color:var(--coral)}
.item-notax-toggle input:checked+.item-notax-check::after{display:block}
.item-notax-label{font-size:11px;font-weight:600;color:var(--text3);transition:color .2s}
.item-notax-toggle input:checked~.item-notax-label{color:var(--coral)}

/* No-tax tag in receipt */
.rpd-notax-tag{display:inline-block;font-size:9px;font-weight:700;color:var(--coral);background:rgba(248,113,113,.1);padding:1px 5px;border-radius:4px;vertical-align:middle;margin-left:3px;text-transform:uppercase;letter-spacing:.5px}

/* Receipt view toggle */
.receipt-view-toggle{display:flex;gap:0;margin:0 14px 2px;background:var(--bg2);border-radius:10px;padding:3px;border:1px solid var(--border)}
.receipt-tab{flex:1;padding:7px 12px;border:none;background:transparent;color:var(--text3);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;border-radius:8px;transition:all .2s}
.receipt-tab.active{background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.15);color:var(--accent)}
.receipt-tab:hover:not(.active){color:var(--text2)}
.receipt-view{display:none}
.receipt-view.active{display:block}

/* Detailed receipt */
.receipt-person-detail{border-bottom:1px solid var(--border)}
.rpd-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;cursor:pointer;transition:background .2s}
.rpd-header:hover{background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.04)}
.rpd-left{display:flex;flex-direction:column;gap:1px}
.rpd-name{font-size:13px;font-weight:700;color:var(--text)}
.rpd-count{font-size:10px;color:var(--text3)}
.rpd-right{display:flex;align-items:center;gap:8px}
.rpd-total{font-size:15px;font-weight:800;color:var(--accent)}
.rpd-chevron{width:14px;height:14px;color:var(--text3);transition:transform .25s;flex-shrink:0}
.receipt-person-detail.expanded .rpd-chevron{transform:rotate(180deg)}
.rpd-body{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;padding:0 14px}
.receipt-person-detail.expanded .rpd-body{max-height:600px;padding:0 14px 12px}
.rpd-item{display:flex;align-items:center;justify-content:space-between;padding:5px 0;gap:8px}
.rpd-item-left{display:flex;align-items:center;gap:6px;min-width:0;flex:1}
.rpd-item-icon{font-size:13px;flex-shrink:0}
.rpd-item-name{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rpd-shared-tag{display:inline-block;font-size:9px;font-weight:700;color:var(--accent);background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.1);padding:1px 5px;border-radius:4px;vertical-align:middle;margin-left:4px;text-transform:uppercase;letter-spacing:.5px}
.rpd-item-amount{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;flex-shrink:0}

/* Clickable receipt items */
.rpd-item-clickable{cursor:pointer;border-radius:6px;padding:5px 4px;margin:0 -4px;transition:background .2s}
.rpd-item-clickable:hover{background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.08)}
.rpd-item-clickable:active{background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.15)}

/* Item highlight animation when scrolled to from receipt */
.item-card.item-highlight{animation:itemHighlight 2s ease;box-shadow:0 0 0 2px var(--accent),0 0 20px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.25)}
@keyframes itemHighlight{
  0%{box-shadow:0 0 0 2px var(--accent),0 0 20px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.4);transform:scale(1.01)}
  30%{box-shadow:0 0 0 3px var(--accent),0 0 30px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.3);transform:scale(1.005)}
  100%{box-shadow:none;transform:scale(1)}
}
.rpd-subtotals{margin-top:8px;padding-top:8px;border-top:1px dashed var(--border)}
.rpd-sub-row{display:flex;justify-content:space-between;font-size:11px;color:var(--text3);padding:1px 0}
.rpd-sub-row.rpd-sub-total{font-size:12px;font-weight:700;color:var(--accent);padding-top:4px;margin-top:2px;border-top:1px solid var(--border)}

@media(max-width:640px){
  .people-tags-wrap{flex-direction:column}
  .people-tag{width:100%}
  .people-tag-input{flex:1;width:auto}
  .item-fields-row{flex-wrap:wrap}
  .item-amount-wrap{width:100%}
  .item-assign-row{flex-direction:column;align-items:stretch}
  .item-assign-right{align-items:stretch}
  .item-shared-people{justify-content:flex-start}
}

/* Receipt wrapper */
.receipt-wrapper{position:relative}

/* Receipt inner — styled receipt card (captured by screenshot) */
.receipt-inner{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.rcpt-header{text-align:center;padding:16px 16px 10px}
.rcpt-title{font-size:18px;font-weight:800;color:var(--text)}
.rcpt-restaurant{font-size:13px;font-weight:700;color:var(--text);margin-top:4px}
.rcpt-date{font-size:11px;color:var(--text3);margin-top:2px}
.rcpt-table{width:100%;border-collapse:collapse}
.rcpt-th-left{text-align:left;padding:6px 14px;font-size:11px;color:var(--text3);font-weight:600;border-bottom:2px solid var(--border)}
.rcpt-th-right{text-align:right;padding:6px 14px;font-size:11px;color:var(--text3);font-weight:600;border-bottom:2px solid var(--border)}
.rcpt-row{border-bottom:1px solid var(--border)}
.rcpt-td-left{padding:8px 14px}
.rcpt-name{font-size:13px;font-weight:700;color:var(--text)}
.rcpt-sub-hint{font-size:10px;color:var(--text3);margin-top:1px}
.rcpt-td-right{padding:8px 14px;text-align:right;font-size:16px;font-weight:800;color:var(--accent)}
.rcpt-grand{padding:10px 14px;border-top:2px solid var(--border)}
.rcpt-grand-table{width:100%;border-collapse:collapse}
.rcpt-gt-label{padding:2px 0;font-size:11px;color:var(--text3)}
.rcpt-gt-value{padding:2px 0;text-align:right;font-size:11px;color:var(--text2)}
.rcpt-gt-total-label{padding:8px 0 0;font-size:15px;font-weight:800;color:var(--accent)}
.rcpt-gt-total-value{padding:8px 0 0;text-align:right;font-size:18px;font-weight:800;color:var(--accent)}
.rcpt-payto-wrap{margin:0 14px;border-top:2px dashed var(--border);padding:12px 0;text-align:center}
.rcpt-payto{background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.1);border:1px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),.25);border-radius:10px;padding:10px 14px}
.rcpt-payto-label{font-size:10px;color:var(--accent);text-transform:uppercase;letter-spacing:1.5px;font-weight:700;margin-bottom:4px}
.rcpt-payto-name{font-size:14px;font-weight:800;color:var(--accent)}
.rcpt-footer{text-align:center;padding:8px 14px 12px;font-size:10px;color:var(--text3)}

/* Receipt action buttons */
.receipt-actions{display:flex;gap:8px;padding:12px 14px 14px;justify-content:center}
.receipt-action-btn{display:flex;align-items:center;gap:6px;padding:9px 16px;border-radius:10px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all .25s;flex:1;justify-content:center}
.receipt-action-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.06)}
.receipt-action-btn:disabled{opacity:.6;cursor:not-allowed}
.receipt-action-btn svg{width:16px;height:16px;flex-shrink:0}
.receipt-action-btn span{white-space:nowrap}
@keyframes receiptBtnSpin{to{transform:rotate(360deg)}}
.receipt-btn-spin{animation:receiptBtnSpin .6s linear infinite}

/* Split form area */
.split-form-area{max-width:720px}

/* Receipt side panel */
.split-receipt-panel{display:none;position:fixed;top:84px;right:max(24px, calc((100vw - 1200px)/2 + 24px));width:380px;max-height:calc(100vh - 100px);overflow-y:auto;z-index:100;scrollbar-width:thin}

/* Mobile receipt - shown inline below form on small screens */
.split-receipt-mobile{display:none}

/* Medium screens (750-1400px): shrink form, shrink receipt, keep side by side */
@media(max-width:1400px) and (min-width:751px){
  .split-form-area{max-width:none;padding-right:340px}
  .split-receipt-panel{width:320px;right:max(16px, calc((100vw - 1200px)/2 + 16px))}
}
@media(max-width:1100px) and (min-width:751px){
  .split-form-area{padding-right:300px}
  .split-receipt-panel{width:280px;right:12px}
}

/* Small screens (<750px): receipt moves inline */
@media(max-width:750px){
  .split-receipt-panel{display:none!important}
  .split-receipt-mobile{display:block}
  .split-form-area{max-width:720px;padding-right:0}
}
/* Search overlay */
.search-overlay{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,0);display:flex;align-items:flex-start;justify-content:center;padding-top:100px;backdrop-filter:blur(0px);pointer-events:none;opacity:0;transition:all .35s cubic-bezier(.4,0,.2,1)}
.search-overlay.open{background:rgba(0,0,0,.55);backdrop-filter:blur(8px);pointer-events:auto;opacity:1}
.search-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);width:90%;max-width:560px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.5);transform:translateY(-30px) scale(.96);opacity:0;transition:all .35s cubic-bezier(.4,0,.2,1);position:relative}
.search-overlay.open .search-box{transform:translateY(0) scale(1);opacity:1}
.search-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent3),var(--gold));background-size:200% 100%;animation:gradientSlide 3s linear infinite}
.search-input-wrap{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--border)}
.search-input-wrap svg{width:22px;height:22px;color:var(--accent);flex-shrink:0;animation:searchPulse 2s ease infinite}
@keyframes searchPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.92)}}
.search-input{flex:1;background:none;border:none;color:var(--text);font-family:inherit;font-size:17px;font-weight:500;outline:none}
.search-input::placeholder{color:var(--text3)}
.search-results{max-height:380px;overflow-y:auto;padding:8px}
.search-results .sr-item{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);color:var(--text);opacity:0;transform:translateY(10px);animation:srSlideIn .3s ease forwards;position:relative;overflow:hidden}
.search-results .sr-item::before{content:'';position:absolute;inset:0;border-radius:14px;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(var(--accent-r),var(--accent-g),var(--accent-b),.08),transparent 70%);opacity:0;transition:opacity .3s}
.search-results .sr-item:hover::before{opacity:1}
.search-results .sr-item:hover{transform:translateX(6px)!important;background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.06)}
.search-results .sr-item.focused{background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.1);transform:translateX(6px)!important}
.search-results .sr-item.focused .sr-icon{transform:scale(1.15);box-shadow:0 0 16px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.3)}
@keyframes srSlideIn{to{opacity:1;transform:translateY(0)}}
.search-results .sr-icon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:18px;flex-shrink:0;transition:all .3s}
.search-results .sr-text h4{font-size:14px;font-weight:700;transition:color .2s}
.search-results .sr-item:hover .sr-text h4,.search-results .sr-item.focused .sr-text h4{color:var(--accent)}
.search-results .sr-text span{font-size:12px;color:var(--text3)}
.search-results .sr-text .sr-match{color:var(--accent);font-weight:700;text-decoration:underline;text-decoration-color:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.3);text-underline-offset:2px}
.search-results .sr-empty{padding:32px;text-align:center;color:var(--text3);font-size:14px;animation:fadeUp .3s ease}
.search-results .sr-empty-icon{font-size:32px;margin-bottom:8px;opacity:.5}
.search-hint{padding:10px 18px 14px;font-size:11px;color:var(--text3);text-align:center;border-top:1px solid var(--border);display:flex;justify-content:center;gap:16px}
.search-hint kbd{display:inline-flex;align-items:center;padding:2px 6px;background:var(--bg3);border:1px solid var(--border);border-radius:5px;font-family:inherit;font-size:10px;font-weight:600;color:var(--text2)}
/* Nav search button */
.nav-search{width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text2);cursor:pointer;display:grid;place-items:center;transition:all .25s}
.nav-search:hover{border-color:var(--accent);color:var(--accent)}
.nav-search svg{width:18px;height:18px}

/* Scroll to top */
.scroll-top{position:fixed;bottom:24px;right:24px;width:44px;height:44px;border-radius:12px;background:var(--card);border:1px solid var(--border);color:var(--text2);cursor:pointer;display:grid;place-items:center;z-index:100;opacity:0;transform:translateY(20px);pointer-events:none;transition:all .3s;box-shadow:0 4px 20px rgba(0,0,0,.2)}
.scroll-top.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.scroll-top:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.scroll-top svg{width:20px;height:20px}

/* Tip of day banner */
.tip-banner{background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.06);border:1px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),.12);border-radius:var(--radius2);padding:16px 20px;margin-bottom:32px;display:flex;align-items:flex-start;gap:12px;animation:fadeUp .5s ease}
.tip-banner .tip-icon{font-size:20px;flex-shrink:0;margin-top:1px}
.tip-banner .tip-content{flex:1}
.tip-banner .tip-title{font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
.tip-banner .tip-body{font-size:13px;color:var(--text2);line-height:1.5}
.tip-banner .tip-body strong{color:var(--text);font-weight:600}





.split-grid{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.split-empty-state{text-align:center;padding:60px 24px;background:var(--card);border:2px dashed var(--border);border-radius:var(--radius)}

/* ===== OCR SCAN RECEIPT ===== */
.ocr-mode-tabs{display:flex;gap:6px;margin-bottom:24px;background:var(--bg2);border-radius:12px;padding:4px;max-width:720px}
.ocr-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border-radius:9px;font-size:14px;font-weight:600;color:var(--text3);background:transparent;border:none;cursor:pointer;transition:all .25s ease}
.ocr-tab:hover{color:var(--text)}
.ocr-tab.active{background:var(--card);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.ocr-tab svg{flex-shrink:0}

.ocr-upload-area{max-width:720px;animation:ocrFadeIn .35s ease}
@keyframes ocrFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.ocr-upload-box{text-align:center;padding:48px 24px;background:var(--card);border:2px dashed var(--border);border-radius:var(--radius2);cursor:pointer;transition:all .25s ease;position:relative}
.ocr-upload-box:hover{border-color:var(--accent);background:var(--bg2)}
.ocr-upload-box.ocr-dragover{border-color:var(--accent);background:rgba(184,134,11,.06);transform:scale(1.01)}
.ocr-upload-icon{font-size:48px;margin-bottom:16px}
.ocr-upload-title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:6px}
.ocr-upload-desc{font-size:13px;color:var(--text3);margin-bottom:20px;max-width:400px;margin-left:auto;margin-right:auto;line-height:1.6}
.ocr-upload-btns{display:flex;gap:10px;justify-content:center}
.ocr-upload-hint{font-size:11px;color:var(--text3);margin-top:14px;opacity:.7}

.ocr-preview-area{margin-top:20px;animation:ocrFadeIn .35s ease}
.ocr-preview-img-wrap{border-radius:var(--radius2);overflow:hidden;border:1px solid var(--border);max-height:300px;display:flex;align-items:center;justify-content:center;background:var(--bg2)}
.ocr-preview-img-wrap img{max-width:100%;max-height:300px;object-fit:contain;display:block}

.ocr-progress-section{margin-top:20px;padding:20px;background:var(--card);border-radius:var(--radius2);border:1px solid var(--border)}
.ocr-progress-bar-wrap{height:8px;background:var(--bg2);border-radius:99px;overflow:hidden;position:relative}
.ocr-progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--gold));border-radius:99px;transition:width .4s ease;position:relative}
.ocr-progress-bar::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:ocrShimmer 1.5s infinite}
@keyframes ocrShimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.ocr-progress-text{font-size:14px;font-weight:600;color:var(--text);margin-top:12px;text-align:center}
.ocr-progress-sub{font-size:12px;color:var(--text3);margin-top:4px;text-align:center}

.ocr-progress-section.ocr-error{border-color:rgba(248,113,113,.3);background:rgba(248,113,113,.05)}
.ocr-progress-section.ocr-error .ocr-progress-bar{background:var(--coral)}
.ocr-progress-section.ocr-error .ocr-progress-text{color:var(--coral)}

.ocr-progress-section.ocr-success{border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.05)}
.ocr-progress-section.ocr-success .ocr-progress-bar{background:#22c55e}
.ocr-progress-section.ocr-success .ocr-progress-text{color:#22c55e}

.ocr-actions{display:flex;gap:10px;justify-content:center;margin-top:16px}

.ocr-tips{margin-top:20px}
.ocr-tip{font-size:12px;color:var(--text3);padding:12px 16px;background:var(--bg2);border-radius:var(--radius2);line-height:1.6}
.ocr-tip strong{color:var(--text2);font-weight:600}
.ocr-disclaimer{background:rgba(248,113,113,.06);border:1px solid rgba(248,113,113,.15);margin-top:8px}

/* OCR disabled upload state */
.ocr-upload-box.ocr-disabled{pointer-events:none;opacity:.5}

footer{margin-top:auto;border-top:1px solid var(--border);padding:36px 24px}
.footer-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.footer-left{font-size:13px;color:var(--text3)}
.footer-right{font-size:12px;color:var(--text3)}

/* ===== BUY ME A COFFEE NAV ===== */
.nav-bmc{width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:transparent;cursor:pointer;display:grid;place-items:center;transition:all .3s ease;position:relative;text-decoration:none}
.nav-bmc:hover{border-color:#d4a017;background:rgba(212,160,23,.08);transform:translateY(-2px);box-shadow:0 4px 16px rgba(212,160,23,.2)}
.nav-bmc .bmc-cup{width:24px;height:24px}
.nav-bmc .bmc-cup-body{fill:#d4a017;transition:fill .3s}
.nav-bmc .bmc-cup-handle{stroke:#d4a017;stroke-width:2;fill:none;transition:stroke .3s}
.nav-bmc .bmc-steam{stroke:var(--text3);stroke-width:1.5;fill:none;opacity:.5;transition:opacity .3s}
.nav-bmc .bmc-steam.s1{animation:bmcSteam 2s ease-in-out infinite}
.nav-bmc .bmc-steam.s2{animation:bmcSteam 2s ease-in-out .4s infinite}
.nav-bmc .bmc-steam.s3{animation:bmcSteam 2s ease-in-out .8s infinite}
.nav-bmc:hover .bmc-steam{opacity:1;stroke:#d4a017}
.nav-bmc:hover .bmc-cup-body{fill:#c49215}
.nav-bmc:hover .bmc-cup-handle{stroke:#c49215}
@keyframes bmcSteam{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(-3px);opacity:.8}}

/* BMC tooltip on hover */
.nav-bmc::after{content:'Fuel my late-night coding ☕';position:absolute;top:calc(100% + 10px);right:0;background:var(--card);border:1px solid var(--border);color:var(--text);font-size:12px;font-weight:600;white-space:nowrap;padding:8px 14px;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.15);opacity:0;pointer-events:none;transform:translateY(-4px);transition:all .25s ease;z-index:1000}
.nav-bmc::before{content:'';position:absolute;top:calc(100% + 4px);right:16px;border:6px solid transparent;border-bottom-color:var(--border);opacity:0;pointer-events:none;transition:all .25s ease;z-index:1001}
.nav-bmc:hover::after{opacity:1;transform:translateY(0)}
.nav-bmc:hover::before{opacity:1}

/* Mobile drawer BMC */
.drawer-bmc{display:flex;align-items:center;gap:10px;padding:12px 16px;margin:8px 12px;border-radius:12px;font-size:13px;font-weight:600;color:#d4a017;text-decoration:none;background:rgba(212,160,23,.06);border:1px solid rgba(212,160,23,.15);transition:all .25s}
.drawer-bmc:hover{background:rgba(212,160,23,.12)}
.drawer-bmc-icon{font-size:18px}
@media(max-width:900px){.nav-bmc::after,.nav-bmc::before{display:none}.nav-bmc{width:36px;height:36px}}

/* ===== SPOTLIGHT SECTION ===== */
.spotlight{margin:20px 0 48px;border-radius:var(--radius);overflow:hidden;background:var(--card);border:1px solid var(--border);position:relative;transition:all .4s}
.spotlight:hover{border-color:var(--border-h);box-shadow:var(--glow);transform:translateY(-4px)}
.spotlight::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent),var(--accent3),var(--gold));background-size:200% 100%;animation:gradientSlide 3s linear infinite}
@keyframes gradientSlide{0%{background-position:0% 0}100%{background-position:200% 0}}
.spotlight-inner{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center}
.spotlight-text{padding:44px 40px}
.spotlight-badge{display:inline-block;font-size:12px;font-weight:700;color:var(--coral);background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.2);padding:4px 12px;border-radius:100px;margin-bottom:16px;animation:badgePulse 2s ease infinite}
@keyframes badgePulse{0%,100%{opacity:1}50%{opacity:.7}}
.spotlight-text h2{font-size:26px;font-weight:800;margin-bottom:12px}
.spotlight-text p{font-size:14px;color:var(--text2);line-height:1.6}
.spotlight-preview{padding:32px;display:flex;justify-content:center;align-items:center;position:relative}
.spotlight-preview::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at center,rgba(var(--accent-r),var(--accent-g),var(--accent-b),.06),transparent 70%)}
.spotlight-receipt{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:24px;width:260px;box-shadow:0 8px 30px rgba(0,0,0,.2);animation:receiptFloat 4s ease-in-out infinite;position:relative}
@keyframes receiptFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-8px) rotate(1deg)}}
.sp-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;color:var(--text)}
.sp-row.sp-total{border-bottom:none;border-top:2px solid var(--border);margin-top:4px;padding-top:10px}
.sp-payto{text-align:center;font-size:11px;color:var(--accent);font-weight:700;margin-top:12px;padding:10px;background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.08);border-radius:8px}



/* ===== PAGE TRANSITIONS ===== */
.page{display:none;max-width:1200px;margin:0 auto;padding:32px 24px 80px;width:100%;opacity:0;transform:translateY(20px);transition:opacity .4s ease,transform .4s ease}
.page.active{display:block;opacity:1;transform:translateY(0)}
.page.active{display:block}
.page.active.page-enter{opacity:1;transform:translateY(0)}

/* Loading skeleton shimmer */
.page-loader{position:fixed;top:68px;left:0;right:0;height:3px;z-index:300;background:var(--bg2);overflow:hidden;opacity:0;transition:opacity .2s}
.page-loader.active{opacity:1}
.page-loader::after{content:'';position:absolute;top:0;left:-40%;width:40%;height:100%;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:loaderSlide .8s ease infinite}
@keyframes loaderSlide{0%{left:-40%}100%{left:100%}}

/* ===== ANIMATED LOGO ===== */
.logo-mark{position:relative}
.logo-mark::after{content:'';position:absolute;inset:-3px;border-radius:13px;background:linear-gradient(135deg,var(--accent),var(--accent3));opacity:0;filter:blur(8px);transition:opacity .4s;z-index:-1}
.logo:hover .logo-mark::after{opacity:.5;animation:logoPulse 1.5s ease infinite}
@keyframes logoPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.2;transform:scale(1.15)}}

/* ===== FLOATING PARTICLES ===== */
.particles-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}

/* ===== CONFETTI ===== */
.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:500;overflow:hidden}
.confetti-piece{position:absolute;width:8px;height:8px;opacity:.9;animation:confettiFall 1.5s ease-out forwards}
@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0deg) scale(1);opacity:1}100%{transform:translateY(100vh) rotate(720deg) scale(0);opacity:0}}

/* ===== ANIMATED NUMBER INPUT ===== */
.form-group input[type="number"]{transition:all .25s}
.input-flash{animation:inputFlash .3s ease}
@keyframes inputFlash{0%{box-shadow:0 0 0 0 rgba(var(--accent-r),var(--accent-g),var(--accent-b),.3)}50%{box-shadow:0 0 0 4px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.15)}100%{box-shadow:0 0 0 0 rgba(var(--accent-r),var(--accent-g),var(--accent-b),0)}}





/* ===== CONTACT FORM ===== */
.contact-hero{text-align:center;padding:20px 0 40px}
.contact-hero .ch-icon{width:72px;height:72px;border-radius:20px;display:grid;place-items:center;font-size:32px;margin:0 auto 20px;background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.1);border:1px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),.15)}
.contact-hero h3{font-size:24px;font-weight:800;margin-bottom:8px}
.contact-hero p{font-size:14px;color:var(--text2);max-width:480px;margin:0 auto;line-height:1.6}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;margin-top:0}
.contact-info{display:flex;flex-direction:column;gap:14px}
.contact-info-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius2);padding:20px;display:flex;gap:14px;align-items:center;transition:all .3s;cursor:default}
.contact-info-card:hover{border-color:var(--accent);transform:translateX(6px);box-shadow:0 4px 20px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.08)}
.contact-info-card .ci-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:20px;flex-shrink:0}
.contact-info-card .ci-text h4{font-size:14px;font-weight:700;margin-bottom:2px}
.contact-info-card .ci-text p{font-size:13px;color:var(--text2);line-height:1.4}
.contact-form-wrap{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:32px;position:relative;overflow:hidden}
.contact-form-wrap::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent3),var(--gold));background-size:200% 100%;animation:gradientSlide 3s linear infinite}
.contact-form{display:flex;flex-direction:column;gap:18px}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-form .cf-field{display:flex;flex-direction:column;gap:6px}
.contact-form .cf-field label{font-size:12px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}
.contact-form .cf-field input,.contact-form .cf-field textarea{background:var(--bg2);border:1.5px solid var(--border);border-radius:12px;padding:14px 18px;color:var(--text);font-family:inherit;font-size:14px;outline:none;transition:all .3s;resize:vertical}
.contact-form .cf-field input:focus,.contact-form .cf-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.1);background:var(--card)}
.contact-form .cf-field input::placeholder,.contact-form .cf-field textarea::placeholder{color:var(--text3)}
.contact-form .cf-field textarea{min-height:130px}
.contact-form .cf-submit{padding:16px 36px;border-radius:14px;border:none;background:linear-gradient(135deg,var(--accent),var(--accent3));color:#fff;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:all .3s;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px;letter-spacing:.3px}
.contact-form .cf-submit::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);opacity:0;transition:opacity .3s}
.contact-form .cf-submit:hover::after{opacity:1}
.contact-form .cf-submit:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.35)}
.contact-form .cf-submit:active{transform:translateY(-1px)}
.contact-form .cf-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
.cf-status{padding:16px 20px;border-radius:14px;font-size:14px;font-weight:600;text-align:center;animation:fadeUp .4s ease}
.cf-status.success{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);color:#22c55e;animation:cfSuccessIn .5s ease}
.cf-status.error{background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.2);color:var(--coral);animation:shake .4s ease}

/* ===== CONTACT FORM ENHANCED UX ===== */

/* Staggered entrance for info cards */
.contact-info-card{opacity:0;animation:cfSlideIn .5s ease forwards;animation-delay:calc(var(--ci,0) * .12s)}
@keyframes cfSlideIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}

/* Info card 3D hover */
.contact-info-card{perspective:600px}
.contact-info-card:hover{border-color:var(--accent);transform:translateX(6px) translateY(-2px);box-shadow:0 8px 30px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.12)}
.contact-info-card:hover .ci-icon{transform:scale(1.1) rotate(-5deg);transition:transform .3s ease}

/* Progress bar */
.cf-progress{height:3px;background:var(--border);border-radius:3px;margin-bottom:20px;overflow:hidden}
.cf-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent3));border-radius:3px;transition:width .4s cubic-bezier(.4,0,.2,1)}

/* Staggered entrance for form fields (fields only, NOT the button — button must always be visible) */
.contact-form .cf-field,.contact-form .cf-row{opacity:0;animation:fadeUp .5s ease forwards;animation-delay:calc(var(--i,0) * .1s + .3s)}
.contact-form .cf-submit{opacity:1 !important;animation:fadeUp .5s ease forwards;animation-delay:.6s}

/* Floating labels */
.cf-floating{position:relative}
.cf-floating label{position:absolute;left:18px;top:14px;font-size:14px;font-weight:500;color:var(--text3);pointer-events:none;transition:all .25s cubic-bezier(.4,0,.2,1);text-transform:none;letter-spacing:0;background:transparent;padding:0;z-index:1}
.cf-floating input:focus+label,.cf-floating input:not(:placeholder-shown)+label,
.cf-floating textarea:focus+label,.cf-floating textarea:not(:placeholder-shown)+label{top:-10px;left:14px;font-size:11px;font-weight:700;color:var(--accent);background:var(--card);padding:0 6px;text-transform:uppercase;letter-spacing:.5px}

/* Enhanced focus glow */
.contact-form .cf-floating input:focus,.contact-form .cf-floating textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.12),0 0 20px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.06);background:var(--card)}

/* Filled field indicator */
.cf-floating input:not(:placeholder-shown),.cf-floating textarea:not(:placeholder-shown){border-color:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.3)}

/* Character counter */
.cf-char-count{display:block;text-align:right;font-size:11px;color:var(--text3);margin-top:4px;font-weight:600;font-family:'Space Mono',monospace;transition:color .3s}
.cf-field:has(textarea:focus) .cf-char-count{color:var(--accent)}

/* Submit button spinner */
.cf-btn-content{display:flex;align-items:center;gap:8px;transition:opacity .3s}
.cf-spinner{display:none;width:20px;height:20px;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:cfSpin .6s linear infinite}
.cf-submit.loading .cf-btn-content{opacity:0}
.cf-submit.loading .cf-spinner{display:block;position:absolute}
.cf-submit.loading{pointer-events:none}
@keyframes cfSpin{to{transform:rotate(360deg)}}

/* Submit button pulse on hover */
.contact-form .cf-submit:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.35),0 0 0 0 rgba(var(--accent-r),var(--accent-g),var(--accent-b),.2);animation:cfPulse 1.5s ease infinite}
@keyframes cfPulse{0%{box-shadow:0 10px 30px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.35),0 0 0 0 rgba(var(--accent-r),var(--accent-g),var(--accent-b),.2)}70%{box-shadow:0 10px 30px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.35),0 0 0 12px rgba(var(--accent-r),var(--accent-g),var(--accent-b),0)}100%{box-shadow:0 10px 30px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.35),0 0 0 0 rgba(var(--accent-r),var(--accent-g),var(--accent-b),0)}}

/* Success animation */
@keyframes cfSuccessIn{0%{opacity:0;transform:scale(.9) translateY(10px)}50%{transform:scale(1.02) translateY(0)}100%{opacity:1;transform:scale(1) translateY(0)}}

/* Hero icon float animation */
.contact-hero .ch-icon{animation:cfIconFloat 3s ease-in-out infinite}
@keyframes cfIconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ===== FAQ ACCORDION ===== */
.faq-hero{text-align:center;padding:20px 0 44px}
.faq-hero-icon{width:80px;height:80px;border-radius:24px;display:grid;place-items:center;font-size:36px;margin:0 auto 20px;background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.08);border:1px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),.12);animation:faqIconFloat 4s ease-in-out infinite}
@keyframes faqIconFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-8px) rotate(3deg)}}
.faq-hero h3{font-size:26px;font-weight:800;margin-bottom:8px}
.faq-hero p{font-size:15px;color:var(--text2);max-width:420px;margin:0 auto;line-height:1.6}
.faq-hero-stats{display:flex;justify-content:center;gap:40px;margin-top:28px}
.faq-stat{text-align:center}
.faq-stat-num{display:block;font-size:28px;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--accent3));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.faq-stat-label{font-size:12px;color:var(--text3);margin-top:2px;font-weight:600}
.faq-section{max-width:760px;margin:0 auto}
.faq-category{margin-bottom:36px;animation:fadeUp .5s ease both}
.faq-category:nth-child(1){animation-delay:.05s}
.faq-category:nth-child(2){animation-delay:.15s}
.faq-category:nth-child(3){animation-delay:.25s}
.faq-cat-title{font-size:18px;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.faq-cat-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:17px;flex-shrink:0}
.faq-cat-count{margin-left:auto;font-size:11px;font-weight:600;color:var(--text3);background:var(--bg2);border:1px solid var(--border);padding:3px 10px;border-radius:100px}
.faq-item{background:var(--card);border:1px solid var(--border);border-radius:16px;margin-bottom:10px;overflow:hidden;transition:all .35s cubic-bezier(.4,0,.2,1);cursor:pointer;position:relative}
.faq-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);border-radius:3px 0 0 3px;opacity:0;transform:scaleY(0);transition:all .3s}
.faq-item:hover{border-color:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.15);transform:translateX(4px)}
.faq-item.open{border-color:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.2);box-shadow:0 8px 24px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.06);transform:translateX(0)}
.faq-item.open::before{opacity:1;transform:scaleY(1)}
.faq-q{display:flex;align-items:center;padding:20px 24px;gap:14px;font-size:15px;font-weight:600;color:var(--text);transition:color .25s}
.faq-item:hover .faq-q,.faq-item.open .faq-q{color:var(--accent)}
.faq-num{font-size:12px;font-weight:800;color:var(--text3);background:var(--bg2);border:1px solid var(--border);width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;transition:all .3s}
.faq-item.open .faq-num{background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.1);border-color:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.2);color:var(--accent)}
.faq-chevron{width:20px;height:20px;flex-shrink:0;margin-left:auto;color:var(--text3);transition:transform .35s cubic-bezier(.4,0,.2,1),color .3s}
.faq-item.open .faq-chevron{transform:rotate(180deg);color:var(--accent)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1),padding .35s,opacity .3s;padding:0 24px;font-size:14px;color:var(--text2);line-height:1.75;opacity:0}
.faq-item.open .faq-a{max-height:300px;padding:0 24px 22px 70px;opacity:1}
.faq-cta{text-align:center;margin-top:48px;padding:32px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);position:relative;overflow:hidden}
.faq-cta::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent3),var(--gold));background-size:200% 100%;animation:gradientSlide 3s linear infinite}
.faq-cta p{font-size:16px;color:var(--text2);margin-bottom:16px;font-weight:600}

/* ===== LEGAL PAGES (Privacy, Terms, About) ===== */
.legal-content{max-width:760px;margin:0 auto}
.legal-content h3{font-size:17px;font-weight:700;margin:28px 0 10px;color:var(--text);display:flex;align-items:center;gap:8px}
.legal-content h3:first-child{margin-top:0}
.legal-content p{font-size:14px;color:var(--text2);line-height:1.75;margin-bottom:14px}
.legal-content strong{color:var(--text);font-weight:700}

/* ===== TIME MACHINE ===== */
.tm-hero-card{text-align:center;padding:32px 24px;margin-bottom:28px;background:linear-gradient(135deg,rgba(var(--accent-r),var(--accent-g),var(--accent-b),.06),rgba(59,130,246,.06));border:1px solid var(--border);border-radius:var(--radius)}
.tm-hero-card .tm-hero-emoji{font-size:48px;margin-bottom:12px;animation:tmFloat 3s ease-in-out infinite}
@keyframes tmFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-8px) rotate(10deg)}}
.tm-hero-card h3{font-size:20px;font-weight:800;margin-bottom:8px}
.tm-hero-card p{font-size:14px;color:var(--text2);max-width:480px;margin:0 auto;line-height:1.6}
.tm-regret-card{display:flex;align-items:flex-start;gap:16px;padding:20px 24px;background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.06);border:1px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),.15);border-radius:var(--radius2);margin-top:20px}
.tm-regret-emoji{font-size:32px;flex-shrink:0}
.tm-regret-text{font-size:14px;color:var(--text2);line-height:1.65}
.tm-timeline{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.tm-timeline-row{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--card);border:1px solid var(--border);border-radius:12px;transition:all .3s}
.tm-timeline-row.tm-you{border-color:var(--accent);background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.04);box-shadow:0 0 0 3px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.08)}
.tm-timeline-age{display:flex;align-items:center;gap:8px;min-width:110px;flex-shrink:0}
.tm-age-badge{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:14px;font-weight:800;color:#fff;flex-shrink:0}
.tm-age-label{font-size:13px;font-weight:600;color:var(--text2)}
.tm-timeline-row.tm-you .tm-age-label{color:var(--accent);font-weight:700}
.tm-timeline-bar{flex:1;height:10px;background:var(--bg3);border-radius:99px;overflow:hidden}
.tm-bar-fill{height:100%;border-radius:99px;transition:width 1.2s cubic-bezier(.4,0,.2,1)}
.tm-timeline-amount{font-size:15px;font-weight:800;color:var(--text);min-width:100px;text-align:right;font-family:'Space Mono',monospace}
.tm-timeline-row.tm-you .tm-timeline-amount{color:var(--accent)}
.tm-takeaway{display:flex;align-items:flex-start;gap:14px;padding:20px 24px;background:linear-gradient(135deg,rgba(var(--accent-r),var(--accent-g),var(--accent-b),.08),rgba(59,130,246,.06));border:1px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),.15);border-radius:var(--radius2);margin-top:20px}
.tm-takeaway-icon{font-size:28px;flex-shrink:0}
.tm-takeaway-text{font-size:13px;color:var(--text2);line-height:1.65}

/* ===== FINANCIAL HEALTH QUIZ ===== */
.quiz-progress{display:flex;align-items:center;gap:12px;margin-bottom:28px;padding:18px 24px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius2);position:sticky;top:72px;z-index:50;backdrop-filter:blur(16px)}
.quiz-progress-bar{flex:1;height:8px;background:var(--bg3);border-radius:99px;overflow:hidden}
.quiz-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent3));border-radius:99px;transition:width .4s cubic-bezier(.4,0,.2,1)}
.quiz-progress-text{font-size:13px;font-weight:700;color:var(--text2);white-space:nowrap}
.quiz-question{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px 28px;margin-bottom:14px;transition:all .35s cubic-bezier(.4,0,.2,1)}
.quiz-question.answered{border-color:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.2);background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.02)}
.quiz-q-header{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
.quiz-num{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:14px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent3));flex-shrink:0;transition:transform .3s,box-shadow .3s}
.quiz-question.answered .quiz-num{transform:scale(1.05);box-shadow:0 4px 16px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.3)}
.quiz-q-cat{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:4px}
.quiz-q-text{font-size:15px;font-weight:600;color:var(--text);line-height:1.55}
.quiz-options{display:flex;flex-direction:column;gap:8px;padding-left:50px}
.quiz-option{position:relative;text-align:left;padding:14px 18px 14px 44px;border-radius:12px;border:1px solid var(--border);background:transparent;color:var(--text2);font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);line-height:1.4}
.quiz-option::before{content:'';position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;border:2px solid var(--border);transition:all .25s}
.quiz-option:hover{border-color:var(--border-h);color:var(--text);background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.04);transform:translateX(4px)}
.quiz-option:hover::before{border-color:var(--accent)}
.quiz-option.selected{border-color:var(--accent);color:var(--accent);background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.1);font-weight:600;box-shadow:0 0 0 3px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.12);transform:translateX(4px)}
.quiz-option.selected::before{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 3px var(--card)}
.quiz-score-gauge{width:200px;height:200px;margin:0 auto 20px;position:relative}
.quiz-score-gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.quiz-score-gauge .gauge-bg{fill:none;stroke:var(--bg3);stroke-width:12}
.quiz-score-gauge .gauge-fill{fill:none;stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1)}
.quiz-score-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.quiz-score-number{font-size:48px;font-weight:800;font-family:'Space Mono',monospace;line-height:1}
.quiz-score-label{font-size:13px;font-weight:600;color:var(--text3);margin-top:4px}

/* ===== SCROLL PROGRESS BAR ===== */
.scroll-progress{position:fixed;top:0;left:0;height:3px;z-index:999;background:linear-gradient(90deg,var(--accent),var(--accent3));width:0%;transition:width .05s linear;pointer-events:none}

/* ===== INPUT VALIDATION ===== */
.form-group input.invalid,.form-group select.invalid{border-color:var(--coral)!important;box-shadow:0 0 0 3px rgba(248,113,113,.15)!important;animation:shake .4s ease}
.form-group .validation-msg{font-size:11px;color:var(--coral);margin-top:2px;display:none;animation:fadeUp .3s ease}
.form-group .validation-msg.show{display:block}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

@media(max-width:900px){.nav-mid,.nav-cta{display:none!important}.hamburger{display:flex!important}.hero-content{grid-template-columns:1fr;text-align:center}.hero-left{max-width:100%}.hero-visual{height:280px;margin-top:20px}.hero-actions{justify-content:center}.featured-grid{grid-template-columns:1fr}.info-section{grid-template-columns:1fr}.spotlight-inner{grid-template-columns:1fr}.spotlight-preview{padding:20px}}
@media(max-width:768px){nav{padding:0 16px}.page{padding:24px 16px 60px}.form-grid{grid-template-columns:1fr}.hero{padding:36px 0 20px}.hero h1{font-size:30px}.result-stats{grid-template-columns:1fr 1fr}.general-calc{max-width:100%}.mobile-drawer{width:100%;max-width:100%}.footer-inner{flex-direction:column;text-align:center}.contact-grid{grid-template-columns:1fr}.cf-row{grid-template-columns:1fr}.quiz-options{padding-left:0}.quiz-question{padding:18px 16px}.quiz-progress{top:60px;padding:12px 16px}.tm-timeline-row{flex-wrap:wrap;gap:8px}.tm-timeline-age{min-width:auto}.tm-timeline-bar{flex-basis:100%;order:3}.tm-timeline-amount{margin-left:auto}}
@media(max-width:480px){.result-stats{grid-template-columns:1fr}.calc-key{padding:14px;font-size:16px}}

/* ===== THEME PICKER ===== */
.theme-picker-wrap{position:relative}
.theme-picker{position:absolute;top:calc(100% + 8px);right:0;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;min-width:200px;box-shadow:var(--shadow);z-index:300;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .25s cubic-bezier(.4,0,.2,1)}
.theme-picker.open{opacity:1;visibility:visible;transform:translateY(0)}
.theme-picker-title{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
.theme-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.theme-option{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--bg2);border:2px solid transparent;border-radius:10px;cursor:pointer;transition:all .2s;font-family:inherit;font-size:12px;font-weight:600;color:var(--text2)}
.theme-option:hover{border-color:var(--border-h);background:var(--bg3)}
.theme-option.active{border-color:var(--accent);background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.1);color:var(--accent)}
.theme-preview{width:18px;height:18px;border-radius:50%;flex-shrink:0;border:2px solid rgba(255,255,255,.2)}
.theme-preview.dark{background:linear-gradient(135deg,#080c18,#d4a853)}
.theme-preview.light{background:linear-gradient(135deg,#f5f7fb,#b8860b)}
.theme-preview.galaxy{background:linear-gradient(135deg,#0d0d1a,#a78bfa)}
.theme-preview.coffee{background:linear-gradient(135deg,#1c1410,#d4a574)}

/* Mobile drawer theme grid */
.drawer-theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px 12px 16px}
.drawer-theme-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;background:var(--bg2);border:2px solid transparent;border-radius:10px;cursor:pointer;font-family:inherit;font-size:10px;font-weight:600;color:var(--text2);transition:all .2s}
.drawer-theme-btn:hover,.drawer-theme-btn.active{border-color:var(--accent);background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.1);color:var(--accent)}
.drawer-theme-btn .theme-preview{width:24px;height:24px}

/* ===== THEME ANIMATED BACKGROUNDS ===== */
.theme-bg-container{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}

/* Galaxy - Subtle twinkling stars */
[data-theme="galaxy"] .theme-bg-container{background:radial-gradient(ellipse at 20% 20%,rgba(139,92,246,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(192,132,252,.06) 0%,transparent 50%),var(--bg)}
.galaxy-star{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(1)}50%{opacity:.8;transform:scale(1.2)}}

/* Coffee - Subtle steam wisps */
[data-theme="coffee"] .theme-bg-container{background:radial-gradient(ellipse at 50% 100%,rgba(212,165,116,.06) 0%,transparent 60%),var(--bg)}
.coffee-steam{position:absolute;bottom:0;width:40px;height:80px;background:linear-gradient(to top,rgba(212,165,116,.03),transparent);border-radius:50%;filter:blur(8px);animation:steamRise 8s ease-in-out infinite}
@keyframes steamRise{0%,100%{transform:translateY(0) scaleX(1);opacity:0}25%{opacity:.5}50%{transform:translateY(-60px) scaleX(1.3);opacity:.3}75%{opacity:.1}100%{transform:translateY(-120px) scaleX(.8);opacity:0}}

/* ===== LOAN COMPARISON TOGGLE ===== */
.compare-toggle-wrap{display:flex;justify-content:center;margin-bottom:24px}
.compare-toggle{display:flex;align-items:center;gap:16px;padding:12px 20px;background:var(--card);border:2px solid var(--border);border-radius:16px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);user-select:none}
.compare-toggle:hover{border-color:var(--border-h);transform:translateY(-2px);box-shadow:var(--shadow)}
.compare-toggle.active{border-color:var(--accent);background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.06);box-shadow:0 0 0 4px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.1),var(--glow)}
.compare-toggle-track{position:relative;width:64px;height:32px;background:var(--bg3);border-radius:16px;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden}
.compare-toggle.active .compare-toggle-track{background:linear-gradient(135deg,var(--accent),var(--accent3))}
.compare-toggle-thumb{position:absolute;top:3px;left:3px;width:26px;height:26px;background:#fff;border-radius:50%;transition:all .4s cubic-bezier(.68,-.55,.27,1.55);box-shadow:0 2px 8px rgba(0,0,0,.2)}
.compare-toggle.active .compare-toggle-thumb{left:calc(100% - 29px);transform:scale(1.05)}
.compare-toggle-icons{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 8px;font-size:12px;font-weight:800;pointer-events:none}
.compare-icon-single{color:var(--text);opacity:.7;transition:opacity .3s}
.compare-icon-dual{color:#fff;opacity:0;transition:opacity .3s}
.compare-toggle.active .compare-icon-single{opacity:0}
.compare-toggle.active .compare-icon-dual{opacity:1}
.compare-toggle-label{display:flex;flex-direction:column;gap:2px}
.compare-label-text{font-size:14px;font-weight:700;color:var(--text);transition:color .3s}
.compare-toggle.active .compare-label-text{color:var(--accent)}
.compare-label-hint{font-size:11px;color:var(--text3);transition:color .3s}
.compare-toggle.active .compare-label-hint{color:var(--accent2)}
.compare-toggle.active .compare-toggle-track::after{content:'';position:absolute;inset:-4px;border-radius:20px;background:linear-gradient(135deg,var(--accent),var(--accent3));opacity:0;animation:togglePulse 1s ease-out}
@keyframes togglePulse{0%{opacity:.4;transform:scale(1)}100%{opacity:0;transform:scale(1.3)}}

/* Loan input cards */
.loan-inputs-container{display:grid;grid-template-columns:1fr;gap:20px;transition:all .4s cubic-bezier(.4,0,.2,1)}
.loan-inputs-container.compare-mode{grid-template-columns:1fr 1fr}
.loan-input-card{background:var(--card);border:2px solid var(--border);border-radius:var(--radius);padding:20px 24px;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.loan-input-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--bg3);transition:all .3s}
.loan-input-card.loan-a::before{background:linear-gradient(90deg,var(--accent),var(--gold))}
.loan-input-card.loan-b::before{background:linear-gradient(90deg,var(--accent3),var(--accent4))}
.loan-input-card.hidden{display:none;opacity:0;transform:translateX(30px)}
.loan-input-card.loan-b.showing{display:block;animation:slideInCard .5s cubic-bezier(.4,0,.2,1) forwards}
@keyframes slideInCard{0%{opacity:0;transform:translateX(30px)}100%{opacity:1;transform:translateX(0)}}
.loan-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.loan-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:10px;font-size:13px;font-weight:800;letter-spacing:.5px}
.loan-badge-a{background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.12);color:var(--accent)}
.loan-badge-b{background:rgba(59,130,246,.12);color:var(--accent3)}

/* Compare results */
.compare-results{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.compare-result-card{background:var(--card);border:2px solid var(--border);border-radius:var(--radius);padding:24px;position:relative;overflow:hidden;transition:all .3s}
.compare-result-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px}
.compare-result-card.result-a::before{background:linear-gradient(90deg,var(--accent),var(--gold))}
.compare-result-card.result-b::before{background:linear-gradient(90deg,var(--accent3),var(--accent4))}
.compare-result-card.winner{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.15),var(--glow)}
.compare-winner-badge{position:absolute;top:12px;right:12px;display:flex;align-items:center;gap:4px;padding:4px 10px;background:linear-gradient(135deg,var(--accent),var(--gold));color:#fff;border-radius:8px;font-size:11px;font-weight:800;animation:winnerPop .5s cubic-bezier(.68,-.55,.27,1.55)}
@keyframes winnerPop{0%{opacity:0;transform:scale(.5)}100%{opacity:1;transform:scale(1)}}
.compare-card-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.compare-card-title{font-size:15px;font-weight:700;color:var(--text)}
.compare-hero-amount{text-align:center;padding:20px 0;margin-bottom:16px;border-bottom:1px solid var(--border)}
.compare-hero-label{font-size:12px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.compare-hero-value{font-size:32px;font-weight:800;color:var(--text);font-family:'Space Mono',monospace}
.result-a .compare-hero-value{color:var(--accent)}
.result-b .compare-hero-value{color:var(--accent3)}
.compare-stats-grid{display:flex;flex-direction:column;gap:10px}
.compare-stat-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px dashed var(--border)}
.compare-stat-row:last-child{border-bottom:none}
.compare-stat-label{font-size:13px;color:var(--text2)}
.compare-stat-value{font-size:14px;font-weight:700;color:var(--text);font-family:'Space Mono',monospace}
.compare-summary{margin-top:24px;padding:20px 24px;background:linear-gradient(135deg,rgba(var(--accent-r),var(--accent-g),var(--accent-b),.06),rgba(59,130,246,.06));border:1px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),.15);border-radius:var(--radius);display:flex;align-items:center;gap:16px}
.compare-summary-icon{font-size:32px;flex-shrink:0}
.compare-summary-text{font-size:14px;color:var(--text2);line-height:1.6}
.compare-summary-text strong{color:var(--accent)}
.compare-diff{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.1);color:var(--accent);border-radius:6px;font-weight:700;font-size:13px}
.compare-diff.negative{background:rgba(248,113,113,.1);color:var(--coral)}

/* ===== CELEBRATION EFFECTS ===== */
/* Confetti */
.confetti-piece{position:fixed;z-index:9999;pointer-events:none;animation:confettiFall 2.5s ease-out forwards}
@keyframes confettiFall{0%{transform:translateY(0) rotate(0deg) scale(1);opacity:1}100%{transform:translateY(100vh) rotate(720deg) scale(0);opacity:0}}

/* Money rain */
.money-rain{position:fixed;font-size:24px;z-index:9999;pointer-events:none;animation:moneyFall 3s ease-in forwards}
@keyframes moneyFall{0%{transform:translateY(-50px) rotate(0deg);opacity:1}100%{transform:translateY(100vh) rotate(360deg);opacity:0}}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){.loan-inputs-container.compare-mode,.compare-results{grid-template-columns:1fr}.theme-picker{right:-50px}}
@media(max-width:768px){.compare-toggle{padding:10px 14px;gap:12px}.compare-toggle-track{width:54px;height:28px}.compare-toggle-thumb{width:22px;height:22px}.compare-toggle.active .compare-toggle-thumb{left:calc(100% - 25px)}.compare-label-text{font-size:13px}.compare-label-hint{font-size:10px}.compare-hero-value{font-size:26px}}
/* ===== PTPTN INFO CARD ===== */
.ptptn-info-card{display:flex;align-items:flex-start;gap:16px;margin:20px 0;padding:20px 24px;background:linear-gradient(135deg,rgba(var(--accent-r),var(--accent-g),var(--accent-b),.08),rgba(59,130,246,.05));border:1px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),.15);border-radius:var(--radius)}
.ptptn-info-icon{font-size:28px;flex-shrink:0}
.ptptn-info-text{font-size:14px;color:var(--text2);line-height:1.7}
.ptptn-info-text strong{color:var(--accent)}

/* ===== CURRENCY CONVERTER ===== */
.currency-converter{max-width:600px}
.currency-input-group{margin-bottom:24px}
.currency-input-group label{display:block;font-size:13px;font-weight:600;color:var(--text2);margin-bottom:8px}
.currency-input-wrap{display:flex;align-items:center;background:var(--bg2);border:2px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:all .3s}
.currency-input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.1)}
.currency-symbol{padding:16px 20px;background:var(--bg3);font-size:18px;font-weight:800;color:var(--accent);border-right:2px solid var(--border)}
.currency-input-wrap input{flex:1;padding:16px 20px;font-size:24px;font-weight:700;font-family:'Space Mono',monospace;background:transparent;border:none;color:var(--text)}
.currency-input-wrap input:focus{outline:none}
.currency-results{background:var(--card);border:2px solid var(--border);border-radius:var(--radius);overflow:hidden}
.currency-row{display:flex;align-items:center;padding:14px 20px;border-bottom:1px solid var(--border);transition:background .2s}
.currency-row:last-child{border-bottom:none}
.currency-row:hover{background:var(--bg2)}
.cur-flag{font-size:24px;width:36px}
.cur-code{font-size:14px;font-weight:800;color:var(--accent);width:50px}
.cur-name{font-size:13px;color:var(--text2);flex:1}
.cur-value{font-size:16px;font-weight:700;font-family:'Space Mono',monospace;color:var(--text);text-align:right;min-width:100px}
.currency-disclaimer{margin-top:16px;font-size:12px;color:var(--text3);text-align:center}

/* ===== CAR TRUE COST RESULTS ===== */
.car-true-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.car-true-card{background:var(--card);border:2px solid var(--border);border-radius:var(--radius);padding:20px;text-align:center;position:relative;overflow:hidden}
.car-true-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent),var(--gold))}
.car-true-card.highlight{border-color:var(--accent);background:linear-gradient(135deg,rgba(var(--accent-r),var(--accent-g),var(--accent-b),.05),transparent)}
.car-true-card.highlight::before{height:6px}
.car-true-label{font-size:12px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.car-true-value{font-size:28px;font-weight:800;color:var(--text);font-family:'Space Mono',monospace}
.car-true-card.highlight .car-true-value{color:var(--accent)}
.car-true-sub{font-size:12px;color:var(--text3);margin-top:6px}

.car-breakdown{background:var(--card);border:2px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-top:20px}
.car-breakdown-title{padding:16px 20px;background:var(--bg2);font-size:14px;font-weight:700;color:var(--text);border-bottom:1px solid var(--border)}
.car-breakdown-row{display:flex;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border)}
.car-breakdown-row:last-child{border-bottom:none}
.car-breakdown-row.total{background:var(--bg2);font-weight:700}
.car-breakdown-row.total .cb-value{color:var(--accent);font-size:16px}
.cb-label{font-size:14px;color:var(--text2);display:flex;align-items:center;gap:8px}
.cb-label span{font-size:16px}
.cb-value{font-size:14px;font-weight:600;color:var(--text);font-family:'Space Mono',monospace}

/* ===== SHARE BUTTON ===== */
.share-btn-wrap{display:flex;justify-content:center;margin-top:20px;gap:12px}
.share-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;border-radius:var(--radius);font-size:14px;font-weight:700;cursor:pointer;transition:all .3s}
.share-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.3)}
.share-btn.secondary{background:var(--bg3);color:var(--text)}
.share-btn.secondary:hover{background:var(--bg2)}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .car-true-summary{grid-template-columns:1fr}
  .currency-input-wrap input{font-size:18px;padding:14px 16px}
  .currency-symbol{padding:14px 16px;font-size:16px}
  .cur-value{font-size:14px;min-width:80px}
}



/* Educational content — tip cards */
.edu-content{margin-top:40px;padding-top:28px;border-top:2px solid var(--border);display:flex;flex-direction:column;gap:16px}
.edu-card{display:flex;gap:16px;padding:20px 22px;border-radius:var(--radius2);border:1px solid var(--border);transition:border-color .3s}
.edu-card:hover{border-color:var(--border-h)}
.edu-card-icon{font-size:24px;flex-shrink:0;margin-top:2px}
.edu-card-body{flex:1}
.edu-card-body h3{font-size:15px;font-weight:700;color:var(--text);margin-bottom:10px}
.edu-card-body p{font-size:13px;color:var(--text2);line-height:1.75;margin-bottom:8px}
.edu-card-body p:last-child{margin-bottom:0}
.edu-card-body p strong{color:var(--text);font-weight:600}
.edu-card.edu-how{background:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.04);border-color:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.12)}
.edu-card.edu-tip{background:rgba(56,189,248,.04);border-color:rgba(56,189,248,.12)}
.edu-card.edu-note{background:rgba(251,191,36,.04);border-color:rgba(251,191,36,.15)}
.edu-card.edu-note .edu-card-body p{font-size:12px;color:var(--text3)}
@media(max-width:640px){.edu-card{flex-direction:column;gap:8px}.edu-card-icon{font-size:20px}}

/* ===== SEO article block (long-form content below calculators) ===== */
.seo-article{max-width:860px;margin:40px auto 20px;padding:28px 24px;background:var(--card,rgba(255,255,255,.03));border:1px solid var(--border,rgba(255,255,255,.08));border-radius:16px;line-height:1.75;color:var(--text,#e5e7eb)}
.seo-article h2{font-size:24px;font-weight:800;margin:0 0 16px;color:var(--text,#fff);letter-spacing:-.02em}
.seo-article h3{font-size:18px;font-weight:700;margin:28px 0 10px;color:var(--text,#fff);letter-spacing:-.01em}
.seo-article h4{font-size:15px;font-weight:700;margin:20px 0 6px;color:var(--text,#fff)}
.seo-article p{margin:0 0 14px;font-size:15px;color:var(--text2,#cbd5e1)}
.seo-article ul{margin:0 0 14px;padding-left:20px;color:var(--text2,#cbd5e1)}
.seo-article li{margin:6px 0;font-size:15px}
.seo-article a{color:var(--accent,#60a5fa);text-decoration:none;border-bottom:1px dashed var(--accent,#60a5fa)}
.seo-article a:hover{opacity:.8}
.seo-article strong{color:var(--text,#fff);font-weight:600}
@media (max-width:640px){.seo-article{margin:28px 12px 16px;padding:20px 18px;border-radius:12px}.seo-article h2{font-size:20px}}

/* ===== CONTACT FORM BUTTON — bulletproof visibility ===== */
/* These rules guarantee the submit button is always visible and correctly positioned, */
/* regardless of animation state, error state, or any other interaction. */
#cfSubmitBtn{
  opacity:1 !important;
  visibility:visible !important;
  display:flex !important;
  min-height:52px;
}
#cfSubmitBtn:disabled{
  opacity:.6 !important;
}
/* Ensure status message appears BELOW the button with its own spacing */
#cfStatus{min-height:0;margin-top:4px}
#cfStatus:empty{display:none}