Hugging Face's logo

Spaces:
Nagaraj81
/
Moneyquest
Running

App Files Community
Moneyquest / index.html
Nagaraj81's picture
Nagaraj81
Upload index.html
366a1aa verified
raw
history blame contribute delete
76.4 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<title>MoneyQuest — Financial Literacy for Gen Alpha</title>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet"/>
<style>
:root{
 --sky:#6ECCF5;--sun:#FFD93D;--mint:#4ECDC4;--coral:#FF6B6B;--purple:#A855F7;
 --lime:#95E67A;--pink:#FF85C2;--navy:#0F1E3C;--cream:#FFFEF5;
 --card:#FFFFFF;--border:rgba(15,30,60,.1);
 --sh:0 4px 20px rgba(15,30,60,.1);--sh2:0 2px 10px rgba(15,30,60,.07);
 --r:18px;--r2:14px;--r3:10px;
 --font:'Nunito',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{font-family:var(--font);background:var(--cream);color:var(--navy);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
/* ── ANIMATIONS ── */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pop{0%{transform:scale(.8);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes slideUp{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes confetti{0%{transform:translateY(-10px) rotate(0deg);opacity:1}100%{transform:translateY(90px) rotate(360deg);opacity:0}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes typingBounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}
/* ── SCREENS ── */
.screen{display:none;min-height:100vh;flex-direction:column}
.screen.active{display:flex}
/* ══ WELCOME ══ */
#screen-welcome{
 background:linear-gradient(160deg,#7C3AED 0%,#2563EB 50%,#0EA5E9 100%);
 align-items:center;justify-content:center;text-align:center;
 padding:40px 24px;position:relative;overflow:hidden;
}
.wb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.25;pointer-events:none;animation:float 6s ease-in-out infinite}
.wb1{width:320px;height:320px;background:#FFD93D;top:-120px;right:-80px}
.wb2{width:240px;height:240px;background:#4ECDC4;bottom:-80px;left:-60px;animation-delay:3s}
.wl-wrap{position:relative;z-index:2;width:100%;max-width:340px}
.logo-emoji{font-size:80px;display:block;animation:float 3s ease-in-out infinite;filter:drop-shadow(0 8px 20px rgba(0,0,0,.25));margin-bottom:8px}
.logo-name{font-size:40px;font-weight:900;color:#fff;letter-spacing:-1px}
.logo-tag{font-size:15px;font-weight:700;color:rgba(255,255,255,.8);margin-top:4px;margin-bottom:28px}
.wl-pills{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:32px}
.wpill{background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.3);border-radius:50px;padding:8px 16px;font-size:13px;font-weight:800;color:#fff}
.wl-btn{display:block;width:100%;padding:17px;border-radius:50px;border:none;font-size:17px;font-weight:900;cursor:pointer;transition:transform .15s,box-shadow .15s;margin-bottom:12px;letter-spacing:-.2px}
.wl-btn:active{transform:scale(.97)}
.wl-btn-main{background:#fff;color:#7C3AED;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.wl-btn-sec{background:rgba(255,255,255,.15);color:#fff;border:2px solid rgba(255,255,255,.35)}
.wl-btn-par{background:#0F1E3C;color:#fff;font-size:15px;padding:14px}
.wl-powered{margin-top:20px;font-size:11px;font-weight:700;color:rgba(255,255,255,.6);letter-spacing:.5px}
.wl-powered span{color:#FFD93D}
/* ══ ONBOARD ══ */
#screen-onboard{background:var(--cream);padding:0}
.ob-inner{padding:20px 22px 32px;max-width:480px;margin:0 auto;width:100%}
.ob-back{background:none;border:none;font-size:14px;font-weight:800;color:rgba(15,30,60,.5);cursor:pointer;padding:4px 0;margin-bottom:14px;display:flex;align-items:center;gap:5px}
.dots-row{display:flex;gap:6px;justify-content:center;margin-bottom:24px}
.dot{width:8px;height:8px;border-radius:50%;background:rgba(15,30,60,.15);transition:all .3s}
.dot.done{background:var(--purple);width:22px;border-radius:4px}
.dot.active{background:var(--purple);transform:scale(1.3)}
.ob-hero{text-align:center;margin-bottom:24px}
.ob-big-emoji{font-size:64px;display:block;animation:float 3s ease-in-out infinite;margin-bottom:10px}
.ob-title{font-size:26px;font-weight:900;color:var(--navy);line-height:1.2}
.ob-sub{font-size:14px;color:rgba(15,30,60,.55);margin-top:7px;line-height:1.5}
.step{display:none}
.step.active{display:block;animation:slideUp .35s ease}
.av-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
.av-opt{padding:12px 6px;background:var(--card);border:2.5px solid transparent;border-radius:var(--r2);text-align:center;cursor:pointer;transition:all .2s;box-shadow:var(--sh2)}
.av-opt:active{transform:scale(.94)}
.av-opt.sel{border-color:var(--purple);background:rgba(168,85,247,.08)}
.av-em{font-size:30px;display:block;margin-bottom:3px}
.av-nm{font-size:10px;font-weight:800;color:var(--navy)}
.name-in{width:100%;padding:15px 20px;background:var(--card);border:2.5px solid var(--border);border-radius:50px;font-size:18px;font-weight:700;color:var(--navy);margin:12px 0;text-align:center;font-family:var(--font)}
.name-in:focus{outline:none;border-color:var(--purple)}
.age-big{font-size:62px;font-weight:900;color:var(--purple);text-align:center;line-height:1}
.age-sub{text-align:center;font-size:13px;font-weight:700;color:rgba(15,30,60,.45);margin-top:3px;margin-bottom:14px}
input[type=range]{width:100%;-webkit-appearance:none;height:8px;border-radius:4px;background:rgba(168,85,247,.2);outline:none;margin:10px 0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:var(--purple);cursor:pointer;box-shadow:0 3px 10px rgba(168,85,247,.4);border:3px solid #fff}
.goal-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:14px 0}
.gc{padding:15px 10px;background:var(--card);border:2.5px solid transparent;border-radius:var(--r2);text-align:center;cursor:pointer;transition:all .2s;box-shadow:var(--sh2)}
.gc:active{transform:scale(.95)}
.gc.sel{border-color:var(--sun);background:rgba(255,217,61,.08)}
.gc-icon{font-size:34px;display:block;margin-bottom:5px}
.gc-name{font-size:13px;font-weight:800;color:var(--navy)}
.gc-desc{font-size:10px;color:rgba(15,30,60,.5);margin-top:2px}
.cash-hero{text-align:center;margin:16px 0}
.cash-em{font-size:56px;display:block;animation:bounce 2s infinite;margin-bottom:8px}
.cash-num{font-size:52px;font-weight:900;color:var(--mint);line-height:1}
.cash-lbl{font-size:13px;color:rgba(15,30,60,.5);font-weight:600;margin-top:4px}
.fact-box{background:rgba(78,205,196,.1);border:2px solid rgba(78,205,196,.3);border-radius:var(--r2);padding:14px;margin:14px 0;font-size:13px;font-weight:700;color:var(--navy);line-height:1.6}
.btn-cta{width:100%;padding:17px;border:none;border-radius:50px;font-size:17px;font-weight:900;cursor:pointer;margin-top:14px;font-family:var(--font);transition:transform .15s,box-shadow .15s}
.btn-cta:active{transform:scale(.97)}
.btn-purple{background:var(--purple);color:#fff;box-shadow:0 5px 18px rgba(168,85,247,.4)}
.btn-mint{background:var(--mint);color:#fff;box-shadow:0 5px 18px rgba(78,205,196,.4)}
/* ══ APP HEADER ══ */
.app-hdr{background:linear-gradient(135deg,var(--purple) 0%,var(--sky) 100%);padding:20px 18px 52px;position:relative;overflow:hidden}
.app-hdr::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:38px;background:var(--cream);border-radius:38px 38px 0 0}
.hdr-top{display:flex;align-items:center;justify-content:space-between}
.hdr-greet{color:rgba(255,255,255,.75);font-size:12px;font-weight:700}
.hdr-name{color:#fff;font-size:20px;font-weight:900}
.hdr-av{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:24px;border:2px solid rgba(255,255,255,.35);cursor:pointer;flex-shrink:0}
.nw-card{background:rgba(255,255,255,.16);backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.22);border-radius:var(--r);padding:18px;margin-top:14px;position:relative;z-index:1}
.nw-lbl{font-size:11px;font-weight:700;color:rgba(255,255,255,.65);letter-spacing:.5px;text-transform:uppercase}
.nw-amt{font-size:42px;font-weight:900;color:#fff;line-height:1;margin:3px 0}
.nw-ch{font-size:13px;font-weight:700}
.nw-ch.pos{color:#95E67A}.nw-ch.neg{color:#FF6B6B}
.xp-wrap{margin-top:12px}
.xp-row{display:flex;justify-content:space-between;font-size:11px;font-weight:700;color:rgba(255,255,255,.65);margin-bottom:5px}
.xp-bar{height:8px;background:rgba(255,255,255,.18);border-radius:4px;overflow:hidden}
.xp-fill{height:100%;background:var(--sun);border-radius:4px;transition:width .8s ease}
/* ══ APP BODY ══ */
.app-body{padding:0 16px 100px}
.stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:14px 0}
.sc{background:var(--card);border-radius:var(--r2);padding:13px 10px;text-align:center;box-shadow:var(--sh2)}
.sc-icon{font-size:22px;display:block;margin-bottom:3px}
.sc-val{font-size:16px;font-weight:900}
.sc-lbl{font-size:10px;font-weight:700;color:rgba(15,30,60,.4);text-transform:uppercase;letter-spacing:.3px;margin-top:2px}
.sec-row{display:flex;align-items:center;justify-content:space-between;margin:18px 0 10px}
.sec-title{font-size:17px;font-weight:900}
.sec-link{font-size:13px;font-weight:800;color:var(--purple);background:rgba(168,85,247,.1);padding:4px 12px;border-radius:50px;border:none;cursor:pointer;font-family:var(--font)}
.sec-link:active{transform:scale(.95)}
.goal-banner{background:var(--card);border-radius:var(--r);padding:15px;display:flex;align-items:center;gap:12px;box-shadow:var(--sh);cursor:pointer;border:2px solid transparent;transition:border-color .2s;margin-bottom:10px}
.gb-icon{font-size:38px;flex-shrink:0}
.gb-body{flex:1;min-width:0}
.gb-name{font-size:15px;font-weight:800}
.gb-sub{font-size:11px;color:rgba(15,30,60,.5);margin-top:2px}
.gb-bar{height:9px;background:rgba(15,30,60,.08);border-radius:5px;overflow:hidden;margin-top:7px}
.gb-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--sun),var(--coral));transition:width 1s ease}
.gb-pct{font-size:11px;font-weight:800;color:var(--coral);margin-top:3px}
.act-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0 0 14px}
.act{background:var(--card);border-radius:var(--r2);padding:15px 12px;text-align:center;cursor:pointer;box-shadow:var(--sh2);border:2px solid transparent;transition:transform .15s,border-color .2s;-webkit-tap-highlight-color:transparent}
.act:active{transform:scale(.95)}
.act-s{border-color:rgba(78,205,196,.4);background:rgba(78,205,196,.06)}
.act-i{border-color:rgba(168,85,247,.4);background:rgba(168,85,247,.06)}
.act-g{border-color:rgba(255,217,61,.4);background:rgba(255,217,61,.06)}
.act-a{border-color:rgba(255,107,107,.4);background:rgba(255,107,107,.06)}
.act-ic{font-size:28px;display:block;margin-bottom:5px}
.act-nm{font-size:13px;font-weight:800}
.act-sb{font-size:10px;color:rgba(15,30,60,.5);margin-top:2px}
.port-grid{display:flex;flex-direction:column;gap:9px}
.asset-card{background:var(--card);border-radius:var(--r2);padding:13px 15px;display:flex;align-items:center;gap:12px;box-shadow:var(--sh2);cursor:pointer;border:2px solid transparent;transition:transform .15s,border-color .2s}
.asset-card:active{transform:scale(.98)}
.asset-ic{font-size:30px;width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:rgba(15,30,60,.04);border-radius:12px;flex-shrink:0}
.asset-inf{flex:1;min-width:0}
.asset-nm{font-size:14px;font-weight:800}
.asset-ds{font-size:11px;color:rgba(15,30,60,.5);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asset-rt{text-align:right}
.asset-val{font-size:16px;font-weight:900}
.asset-ch{font-size:11px;font-weight:700;margin-top:2px}
.chg-p{color:var(--mint)}.chg-n{color:var(--coral)}
.ai-card{background:linear-gradient(135deg,var(--purple),var(--sky));border-radius:var(--r);padding:15px;margin:0 0 14px;cursor:pointer;box-shadow:0 6px 22px rgba(168,85,247,.28);transition:transform .15s}
.ai-card:active{transform:scale(.98)}
.ai-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ai-av{width:40px;height:40px;background:rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;border:2px solid rgba(255,255,255,.35);animation:pulse 3s infinite}
.ai-nm{font-size:13px;font-weight:800;color:#fff}
.ai-st{font-size:11px;color:rgba(255,255,255,.65)}
.ai-bubble{background:rgba(255,255,255,.15);border-radius:12px 12px 12px 4px;padding:11px 13px;font-size:13px;font-weight:600;color:#fff;line-height:1.55}
.typing-dots{display:flex;gap:4px;align-items:center}
.td{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.65)}
.td:nth-child(1){animation:typingBounce .9s infinite 0s}
.td:nth-child(2){animation:typingBounce .9s infinite .15s}
.td:nth-child(3){animation:typingBounce .9s infinite .3s}
.act-list{display:flex;flex-direction:column;gap:8px}
.act-item{background:var(--card);border-radius:var(--r3);padding:11px 13px;display:flex;align-items:center;gap:10px;box-shadow:var(--sh2)}
.ai-ico{font-size:22px;width:38px;height:38px;background:rgba(15,30,60,.04);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ai-text{font-size:13px;font-weight:700}
.ai-time{font-size:10px;color:rgba(15,30,60,.4);margin-top:2px}
.ai-amt{font-size:13px;font-weight:800;margin-left:auto;flex-shrink:0}
.empty-state{background:var(--card);border-radius:var(--r2);padding:20px;text-align:center;color:rgba(15,30,60,.4);font-weight:600;font-size:13px;border:2px dashed rgba(15,30,60,.1)}
/* ══ LEARN ══ */
#screen-learn{background:var(--cream);padding-bottom:90px}
.learn-hdr{background:linear-gradient(135deg,#F59E0B 0%,#EF4444 100%);padding:20px 18px 52px;position:relative}
.learn-hdr::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:38px;background:var(--cream);border-radius:38px 38px 0 0}
.screen-body{padding:0 16px}
.lesson-grid{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.lcard{background:var(--card);border-radius:var(--r);padding:15px;display:flex;align-items:center;gap:13px;box-shadow:var(--sh);cursor:pointer;transition:transform .15s,border-color .2s;border:2px solid transparent}
.lcard:active{transform:scale(.98)}
.lcard.done{border-color:rgba(78,205,196,.4);background:rgba(78,205,196,.04)}
.lcard.locked{opacity:.5;cursor:not-allowed}
.lbadge{width:50px;height:50px;border-radius:var(--r2);display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;background:rgba(168,85,247,.1)}
.lcard.done .lbadge{background:rgba(78,205,196,.15)}
.linfo{flex:1}
.ltitle{font-size:14px;font-weight:800}
.lsub{font-size:11px;color:rgba(15,30,60,.5);margin-top:2px}
.lxp{font-size:11px;font-weight:800;color:var(--purple);background:rgba(168,85,247,.1);padding:2px 8px;border-radius:20px;display:inline-block;margin-top:4px}
.lstatus{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;background:rgba(15,30,60,.05)}
/* ══ GOALS ══ */
#screen-goals{background:var(--cream);padding-bottom:90px}
.goals-hdr{background:linear-gradient(135deg,var(--mint) 0%,var(--sky) 100%);padding:20px 18px 52px;position:relative}
.goals-hdr::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:38px;background:var(--cream);border-radius:38px 38px 0 0}
.gcard{background:var(--card);border-radius:var(--r);padding:18px;box-shadow:var(--sh);margin:0 0 12px;animation:pop .4s ease}
.gcard-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.gcard-icon{font-size:44px}
.gcard-title{font-size:19px;font-weight:900}
.gcard-desc{font-size:12px;color:rgba(15,30,60,.5);margin-top:2px}
.gamts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:12px 0}
.gamt{text-align:center;padding:11px 6px;background:rgba(15,30,60,.04);border-radius:var(--r3)}
.gamt-val{font-size:17px;font-weight:900}
.gamt-lbl{font-size:10px;font-weight:700;color:rgba(15,30,60,.4);text-transform:uppercase;margin-top:2px}
.gbig-bar{height:14px;background:rgba(15,30,60,.08);border-radius:7px;overflow:hidden;margin:6px 0 4px}
.gbig-fill{height:100%;border-radius:7px;background:linear-gradient(90deg,var(--mint),var(--sky));transition:width 1.2s ease}
.g-pct{font-size:12px;font-weight:800;color:var(--mint);margin-bottom:10px}
.contrib-row{display:flex;gap:8px;margin-top:12px}
.contrib-in{flex:1;padding:13px 15px;background:rgba(15,30,60,.04);border:2px solid transparent;border-radius:50px;font-size:16px;font-weight:700;color:var(--navy);font-family:var(--font)}
.contrib-in:focus{outline:none;border-color:var(--mint)}
.btn-add{padding:13px 20px;background:var(--mint);border:none;border-radius:50px;font-size:15px;font-weight:800;color:#fff;cursor:pointer;font-family:var(--font);transition:transform .15s}
.btn-add:active{transform:scale(.95)}
.ai-plan-btn{width:100%;padding:14px;background:linear-gradient(135deg,var(--purple),var(--coral));border:none;border-radius:var(--r2);font-size:14px;font-weight:800;color:#fff;cursor:pointer;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:7px;font-family:var(--font);transition:transform .15s}
.ai-plan-btn:active{transform:scale(.97)}
.add-goal-btn{width:100%;padding:17px;background:transparent;border:2.5px dashed rgba(15,30,60,.2);border-radius:var(--r);font-size:16px;font-weight:800;color:rgba(15,30,60,.4);cursor:pointer;margin-top:4px;font-family:var(--font);transition:all .2s}
.add-goal-btn:hover,.add-goal-btn:active{border-color:var(--purple);color:var(--purple)}
/* ══ AI SCREEN ══ */
#screen-ai{background:var(--cream);padding-bottom:90px}
.ai-hdr{background:linear-gradient(135deg,var(--coral) 0%,var(--purple) 100%);padding:20px 18px 52px;position:relative}
.ai-hdr::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:38px;background:var(--cream);border-radius:38px 38px 0 0}
.chat-body{padding:0 16px}
.chat-msgs{display:flex;flex-direction:column;gap:11px;margin:14px 0}
.msg{max-width:86%;animation:pop .3s ease}
.msg-ai{align-self:flex-start}
.msg-user{align-self:flex-end}
.msg-hdr{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.msg-hdr-av{font-size:16px}
.msg-hdr-nm{font-size:11px;font-weight:800;color:rgba(15,30,60,.4)}
.bubble{padding:12px 15px;border-radius:18px;font-size:14px;font-weight:600;line-height:1.6}
.bubble-ai{background:var(--card);color:var(--navy);border-radius:18px 18px 18px 4px;box-shadow:var(--sh2)}
.bubble-user{background:var(--purple);color:#fff;border-radius:18px 18px 4px 18px}
.quick-qs{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}
.qq{padding:8px 13px;background:var(--card);border:2px solid var(--border);border-radius:50px;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:var(--sh2);font-family:var(--font)}
.qq:active{background:rgba(168,85,247,.1);border-color:var(--purple);color:var(--purple)}
.chat-bar{position:fixed;bottom:70px;left:0;right:0;padding:9px 14px;background:rgba(255,254,245,.97);backdrop-filter:blur(10px);border-top:1px solid var(--border);display:flex;gap:9px;z-index:40}
.chat-in{flex:1;padding:12px 16px;background:var(--card);border:2px solid var(--border);border-radius:50px;font-size:14px;font-weight:600;color:var(--navy);box-shadow:var(--sh2);transition:border-color .2s;font-family:var(--font)}
.chat-in:focus{outline:none;border-color:var(--purple)}
.chat-send{width:44px;height:44px;background:var(--purple);border:none;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 12px rgba(168,85,247,.4);flex-shrink:0;transition:transform .15s}
.chat-send:active{transform:scale(.93)}
/* ══ PARENT ══ */
#screen-parent{background:#080F20;padding-bottom:40px;color:#fff;min-height:100vh}
.par-hdr{padding:20px 18px 24px;background:linear-gradient(135deg,#0F1E3C,#1a3060)}
.par-back{background:none;border:none;color:rgba(255,255,255,.6);font-size:14px;font-weight:700;cursor:pointer;padding:0 0 12px;display:flex;align-items:center;gap:5px;font-family:var(--font)}
.par-title{font-size:24px;font-weight:900;color:#fff}
.par-sub{font-size:13px;color:rgba(255,255,255,.45);margin-top:3px}
.par-body{padding:16px}
.pcard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:18px;margin-bottom:13px}
.pcard-title{font-size:11px;font-weight:800;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.5px;margin-bottom:13px}
.par-ai-card{background:linear-gradient(135deg,rgba(168,85,247,.18),rgba(110,204,245,.1));border:1px solid rgba(168,85,247,.28);border-radius:var(--r);padding:16px;margin-bottom:13px}
.pai-hdr{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pai-title{font-size:15px;font-weight:800;color:#fff}
.pai-sub{font-size:12px;color:rgba(255,255,255,.45);margin-top:2px}
.pai-body{font-size:13px;color:rgba(255,255,255,.8);line-height:1.7}
.lc-bars{display:flex;align-items:flex-end;gap:7px;height:80px;margin-bottom:22px}
.lc-bar{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(to top,var(--purple),var(--sky));min-height:4px;position:relative;transition:height .8s ease}
.lc-bar-lbl{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:9px;color:rgba(255,255,255,.35);white-space:nowrap}
.ins-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.ins-row:last-child{border-bottom:none}
.ins-ic{font-size:20px;width:36px;height:36px;background:rgba(255,255,255,.07);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ins-txt{flex:1;font-size:13px;color:rgba(255,255,255,.75);line-height:1.45}
.ins-badge{font-size:10px;font-weight:800;padding:3px 9px;border-radius:50px;white-space:nowrap}
.bg-good{background:rgba(78,205,196,.2);color:var(--mint)}
.bg-warn{background:rgba(255,217,61,.2);color:var(--sun)}
.bg-info{background:rgba(168,85,247,.2);color:#C084FC}
.dt-item{display:flex;gap:11px;padding:9px 0;position:relative}
.dt-item::before{content:'';position:absolute;left:14px;top:30px;bottom:-9px;width:2px;background:rgba(255,255,255,.08)}
.dt-item:last-child::before{display:none}
.dt-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;border:2px solid transparent}
.dt-save{background:rgba(78,205,196,.18);border-color:var(--mint)}
.dt-invest{background:rgba(168,85,247,.18);border-color:var(--purple)}
.dt-goal{background:rgba(255,217,61,.18);border-color:var(--sun)}
.dt-text{font-size:13px;color:rgba(255,255,255,.7);line-height:1.5;padding-top:3px}
.dt-time{font-size:10px;color:rgba(255,255,255,.3);margin-top:2px}
/* ══ BOTTOM NAV ══ */
.bnav{position:fixed;bottom:0;left:0;right:0;z-index:50;background:rgba(255,254,245,.97);backdrop-filter:blur(12px);border-top:1.5px solid var(--border);display:grid;grid-template-columns:repeat(4,1fr);padding:7px 0 max(8px,env(safe-area-inset-bottom))}
.nb{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;cursor:pointer;padding:5px 8px;border-radius:var(--r3);transition:all .2s;font-family:var(--font)}
.nb:active{transform:scale(.93)}
.nb.on .nb-ic{background:var(--purple);box-shadow:0 3px 10px rgba(168,85,247,.3)}
.nb.on .nb-lbl{color:var(--purple)}
.nb-ic{width:36px;height:36px;border-radius:11px;background:transparent;display:flex;align-items:center;justify-content:center;font-size:19px;transition:all .2s}
.nb-lbl{font-size:10px;font-weight:800;color:rgba(15,30,60,.38);transition:color .2s;letter-spacing:.2px}
/* ══ MODALS ══ */
.mbg{position:fixed;inset:0;background:rgba(15,30,60,.45);backdrop-filter:blur(4px);z-index:100;display:none;align-items:flex-end;justify-content:center}
.mbg.open{display:flex;animation:fadeIn .2s ease}
.msheet{background:var(--cream);border-radius:26px 26px 0 0;width:100%;max-width:500px;max-height:88vh;overflow-y:auto;padding:8px 20px 36px}
.mhandle{width:36px;height:4px;background:rgba(15,30,60,.14);border-radius:2px;margin:12px auto 18px}
.m-emoji{font-size:60px;text-align:center;display:block;margin:0 auto 14px;animation:float 3s infinite}
.m-title{font-size:22px;font-weight:900;margin-bottom:5px}
.m-sub{font-size:14px;color:rgba(15,30,60,.5);margin-bottom:18px;line-height:1.55}
.amt-row{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap}
.amt-btn{flex:1;min-width:60px;padding:12px 8px;background:rgba(15,30,60,.05);border:2.5px solid transparent;border-radius:var(--r2);font-size:14px;font-weight:800;cursor:pointer;text-align:center;transition:all .2s;font-family:var(--font)}
.amt-btn:active{transform:scale(.95)}
.amt-btn.sel{background:rgba(168,85,247,.1);border-color:var(--purple);color:var(--purple)}
.btn-confirm{width:100%;padding:16px;background:var(--purple);border:none;border-radius:50px;font-size:17px;font-weight:800;color:#fff;cursor:pointer;margin-top:14px;box-shadow:0 5px 18px rgba(168,85,247,.38);transition:transform .15s,opacity .2s;font-family:var(--font)}
.btn-confirm:active{transform:scale(.97)}
.btn-confirm:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-cancel{width:100%;padding:13px;background:none;border:none;font-size:15px;font-weight:700;color:rgba(15,30,60,.38);cursor:pointer;margin-top:6px;font-family:var(--font)}
.invest-opt{background:var(--card);border-radius:var(--r2);padding:13px 15px;display:flex;align-items:center;gap:11px;box-shadow:var(--sh2);margin-bottom:9px;cursor:pointer;border:2.5px solid transparent;transition:all .2s}
.invest-opt:active{transform:scale(.98)}
.invest-opt.sel{border-color:var(--purple);background:rgba(168,85,247,.06)}
.io-ic{font-size:28px;width:44px;height:44px;background:rgba(15,30,60,.04);border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.io-inf{flex:1}
.io-nm{font-size:14px;font-weight:800}
.io-ds{font-size:11px;color:rgba(15,30,60,.5);margin-top:2px}
.io-risk{font-size:11px;font-weight:700;margin-left:auto;white-space:nowrap}
.rb-chart{display:flex;height:110px;gap:6px;align-items:flex-end;margin:14px 0}
.rb-bar{flex:1;border-radius:5px 5px 0 0;position:relative;min-height:6px;transition:height .8s ease}
.rb-val{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:800;white-space:nowrap}
.rb-lbl{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:700;color:rgba(15,30,60,.45);white-space:nowrap}
.rb-suggest{background:rgba(168,85,247,.08);border:2px solid rgba(168,85,247,.2);border-radius:var(--r2);padding:13px;margin:26px 0 10px}
.rb-suggest-title{font-size:13px;font-weight:800;color:var(--purple);margin-bottom:5px}
.rb-suggest-text{font-size:13px;line-height:1.6}
.spin{display:flex;align-items:center;gap:8px;padding:16px 0}
.spinner{width:28px;height:28px;border:3px solid rgba(168,85,247,.2);border-top-color:var(--purple);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
.spin-txt{font-size:13px;font-weight:600;color:rgba(15,30,60,.5)}
/* ══ CONFETTI ══ */
#confetti{position:fixed;top:0;left:0;right:0;pointer-events:none;z-index:999;overflow:hidden;height:100vh}
.cp{position:absolute;border-radius:2px}
</style>
</head>
<body>
<div id="confetti"></div>
<!-- ══ WELCOME ══ -->
<div class="screen active" id="screen-welcome">
 <div class="wb wb1"></div>
 <div class="wb wb2"></div>
 <div class="wl-wrap">
 <span class="logo-emoji">🚀</span>
 <div class="logo-name">MoneyQuest</div>
 <div class="logo-tag">Your money adventure starts here! 💰</div>
 <div class="wl-pills">
 <span class="wpill">🎮 Fun & Addictive</span>
 <span class="wpill">🤖 K2 AI Mentor</span>
 <span class="wpill">📈 Real Investing</span>
 </div>
 <button class="wl-btn wl-btn-main" onclick="showScreen('screen-onboard')">🎮 Start My Quest!</button>
 <button class="wl-btn wl-btn-sec" onclick="continuePlay()">📱 Continue Playing</button>
 <button class="wl-btn wl-btn-par" onclick="showScreen('screen-parent');loadParentDash()">👨‍👩‍👧 Parent Dashboard</button>
 <div class="wl-powered">Powered by <span>K2-Think-V2</span> · MBZUAI · IFM</div>
 </div>
</div>
<!-- ══ ONBOARD ══ -->
<div class="screen" id="screen-onboard">
 <div class="ob-inner">
 <button class="ob-back" onclick="showScreen('screen-welcome')">← Back</button>
 <div class="dots-row">
 <div class="dot active" id="d0"></div>
 <div class="dot" id="d1"></div>
 <div class="dot" id="d2"></div>
 <div class="dot" id="d3"></div>
 </div>
<!-- Step 0 -->
 <div class="step active" id="s0">
 <div class="ob-hero">
 <span class="ob-big-emoji" id="sel-av-em">🦊</span>
 <div class="ob-title">Pick your hero!</div>
 <div class="ob-sub">This is your money champion 🦸</div>
 </div>
 <div class="av-grid">
 <div class="av-opt sel" data-em="🦊" onclick="pickAv(this)"><span class="av-em">🦊</span><span class="av-nm">Fox</span></div>
 <div class="av-opt" data-em="🐼" onclick="pickAv(this)"><span class="av-em">🐼</span><span class="av-nm">Panda</span></div>
 <div class="av-opt" data-em="🦁" onclick="pickAv(this)"><span class="av-em">🦁</span><span class="av-nm">Lion</span></div>
 <div class="av-opt" data-em="🐉" onclick="pickAv(this)"><span class="av-em">🐉</span><span class="av-nm">Dragon</span></div>
 <div class="av-opt" data-em="🦋" onclick="pickAv(this)"><span class="av-em">🦋</span><span class="av-nm">Butterfly</span></div>
 <div class="av-opt" data-em="🐬" onclick="pickAv(this)"><span class="av-em">🐬</span><span class="av-nm">Dolphin</span></div>
 <div class="av-opt" data-em="🦄" onclick="pickAv(this)"><span class="av-em">🦄</span><span class="av-nm">Unicorn</span></div>
 <div class="av-opt" data-em="🐧" onclick="pickAv(this)"><span class="av-em">🐧</span><span class="av-nm">Penguin</span></div>
 </div>
 <button class="btn-cta btn-purple" onclick="goStep(1)">Next →</button>
 </div>
<!-- Step 1 -->
 <div class="step" id="s1">
 <div class="ob-hero">
 <span class="ob-big-emoji">👋</span>
 <div class="ob-title">What's your name?</div>
 <div class="ob-sub">Tell us about you!</div>
 </div>
 <input class="name-in" id="nm-input" type="text" placeholder="Your first name..." maxlength="20" autocomplete="off"/>
 <div style="margin-top:20px">
 <div class="ob-title" style="font-size:20px;text-align:center;margin-bottom:4px">How old are you?</div>
 <div class="age-big" id="age-disp">10</div>
 <div class="age-sub">years old</div>
 <input type="range" id="age-range" min="7" max="15" value="10" oninput="updAge(this.value)"/>
 </div>
 <button class="btn-cta btn-purple" onclick="goStep(2)">Next →</button>
 </div>
<!-- Step 2 -->
 <div class="step" id="s2">
 <div class="ob-hero">
 <span class="ob-big-emoji">🎯</span>
 <div class="ob-title">What's your goal?</div>
 <div class="ob-sub">What are you saving for first?</div>
 </div>
 <div class="goal-grid">
 <div class="gc sel" data-goal="gaming" onclick="pickGoal(this)"><span class="gc-icon">🎮</span><div class="gc-name">Gaming Setup</div><div class="gc-desc">Save for a console</div></div>
 <div class="gc" data-goal="sneakers" onclick="pickGoal(this)"><span class="gc-icon">👟</span><div class="gc-name">Cool Sneakers</div><div class="gc-desc">Get that dream pair</div></div>
 <div class="gc" data-goal="trip" onclick="pickGoal(this)"><span class="gc-icon">✈️</span><div class="gc-name">Dream Trip</div><div class="gc-desc">Travel adventure</div></div>
 <div class="gc" data-goal="college" onclick="pickGoal(this)"><span class="gc-icon">🎓</span><div class="gc-name">College Fund</div><div class="gc-desc">Invest in future</div></div>
 <div class="gc" data-goal="business" onclick="pickGoal(this)"><span class="gc-icon">🏪</span><div class="gc-name">My Business</div><div class="gc-desc">Start something!</div></div>
 <div class="gc" data-goal="custom" onclick="pickGoal(this)"><span class="gc-icon">⭐</span><div class="gc-name">My Dream</div><div class="gc-desc">I'll decide!</div></div>
 </div>
 <button class="btn-cta btn-purple" onclick="goStep(3)">Next →</button>
 </div>
<!-- Step 3 -->
 <div class="step" id="s3">
 <div class="ob-hero">
 <span class="ob-big-emoji">🎉</span>
 <div class="ob-title">You're getting a gift!</div>
 <div class="ob-sub">This is your virtual money to learn with!</div>
 </div>
 <div class="cash-hero">
 <span class="cash-em">💰</span>
 <div class="cash-num">$500</div>
 <div class="cash-lbl">Your starting balance</div>
 </div>
 <div class="fact-box">💡 <strong>Did you know?</strong> Warren Buffett started investing at age 11! You already have a head start. Let's grow this $500 together! 🚀</div>
 <button class="btn-cta btn-mint" onclick="finishOnboard()">🚀 Start My Quest!</button>
 </div>
 </div>
</div>
<!-- ══ APP ══ -->
<div class="screen" id="screen-app">
 <div class="app-hdr">
 <div class="hdr-top">
 <div>
 <div class="hdr-greet" id="hdr-greet">Good morning! 🌅</div>
 <div class="hdr-name" id="hdr-name">MoneyQuest</div>
 </div>
 <div class="hdr-av" id="hdr-av" onclick="navTo('screen-learn','nb-learn');renderLessons()">🦊</div>
 </div>
 <div class="nw-card">
 <div class="nw-lbl">💰 Total Wealth</div>
 <div class="nw-amt" id="nw-amt">$500.00</div>
 <div class="nw-ch pos" id="nw-ch">+$0.00 today</div>
 <div class="xp-wrap">
 <div class="xp-row"><span id="xp-title">🌱 Money Seed · Level 1</span><span id="xp-num">0/100 XP</span></div>
 <div class="xp-bar"><div class="xp-fill" id="xp-fill" style="width:0%"></div></div>
 </div>
 </div>
 </div>
 <div class="app-body">
 <div class="stats3">
 <div class="sc"><span class="sc-icon">💵</span><div class="sc-val" id="s-cash">$500</div><div class="sc-lbl">Cash</div></div>
 <div class="sc"><span class="sc-icon">📈</span><div class="sc-val" id="s-inv">$0</div><div class="sc-lbl">Invested</div></div>
 <div class="sc"><span class="sc-icon">🏆</span><div class="sc-val" id="s-xp">Lv 1</div><div class="sc-lbl">Level</div></div>
 </div>
 <div class="sec-row"><div class="sec-title">🎯 My Goal</div><button class="sec-link" onclick="navTo('screen-goals','nb-goals');renderGoals()">All goals</button></div>
 <div id="goal-banner"></div>
 <div class="sec-row"><div class="sec-title">⚡ Quick Actions</div></div>
 <div class="act-grid">
 <div class="act act-s" onclick="openSaveMdl()"><span class="act-ic">🏦</span><div class="act-nm">Save Money</div><div class="act-sb">Earn interest</div></div>
 <div class="act act-i" onclick="openInvMdl()"><span class="act-ic">📈</span><div class="act-nm">Invest</div><div class="act-sb">Grow it!</div></div>
 <div class="act act-g" onclick="navTo('screen-goals','nb-goals');renderGoals()"><span class="act-ic">🎯</span><div class="act-nm">My Goals</div><div class="act-sb">Track progress</div></div>
 <div class="act act-a" onclick="navTo('screen-ai','nb-ai');loadAIWelcome()"><span class="act-ic">🤖</span><div class="act-nm">Ask Kai</div><div class="act-sb">K2 AI advice</div></div>
 </div>
 <div class="sec-row"><div class="sec-title">📊 Portfolio</div><button class="sec-link" onclick="openRbMdl()">Rebalance ✨</button></div>
 <div class="port-grid" id="port-grid"></div>
 <div class="ai-card" onclick="navTo('screen-ai','nb-ai');loadAIWelcome()" style="margin-top:14px">
 <div class="ai-top">
 <div class="ai-av">🤖</div>
 <div><div class="ai-nm">Kai — K2 AI Money Mentor</div><div class="ai-st">K2-Think-V2 · Always online</div></div>
 </div>
 <div class="ai-bubble" id="ai-teaser">Hey! 👋 I'm watching your portfolio. Tap me for personalised money advice!</div>
 </div>
 <div class="sec-row" style="margin-top:14px"><div class="sec-title">📋 Recent Activity</div></div>
 <div class="act-list" id="act-list"></div>
 </div>
</div>
<!-- ══ LEARN ══ -->
<div class="screen" id="screen-learn">
 <div class="learn-hdr">
 <div class="hdr-top">
 <div><div class="hdr-greet" style="color:rgba(255,255,255,.75)">📚 Money School</div><div class="hdr-name" style="color:#fff;font-size:20px">Learn & Earn XP</div></div>
 <div class="hdr-av" style="background:rgba(255,255,255,.2)">🎓</div>
 </div>
 </div>
 <div class="screen-body">
 <div class="sec-row" style="margin-top:14px"><div class="sec-title">📖 Lessons</div><span style="font-size:13px;font-weight:700;color:rgba(15,30,60,.4)" id="lessons-done">0/7 done</span></div>
 <div class="lesson-grid" id="lesson-grid"></div>
 <div style="height:20px"></div>
 </div>
</div>
<!-- ══ GOALS ══ -->
<div class="screen" id="screen-goals">
 <div class="goals-hdr">
 <div class="hdr-top">
 <div><div class="hdr-greet" style="color:rgba(255,255,255,.75)">🎯 My Dreams</div><div class="hdr-name" style="color:#fff;font-size:20px">Goal Tracker</div></div>
 <div class="hdr-av" style="background:rgba(255,255,255,.2)">💫</div>
 </div>
 </div>
 <div class="screen-body">
 <div id="goals-list" style="margin-top:14px"></div>
 <button class="add-goal-btn" onclick="openNewGoalMdl()">+ Add New Goal</button>
 <div style="height:20px"></div>
 </div>
</div>
<!-- ══ AI SCREEN ══ -->
<div class="screen" id="screen-ai">
 <div class="ai-hdr">
 <div class="hdr-top">
 <div><div class="hdr-greet" style="color:rgba(255,255,255,.75)">🤖 Money Mentor</div><div class="hdr-name" style="color:#fff;font-size:20px">Kai · K2-Think-V2</div></div>
 <div class="hdr-av" style="background:rgba(255,255,255,.2);animation:pulse 3s infinite">🤖</div>
 </div>
 </div>
 <div class="chat-body">
 <div class="chat-msgs" id="chat-msgs"></div>
 <div class="quick-qs" id="quick-qs"></div>
 <div style="height:130px"></div>
 </div>
 <div class="chat-bar">
 <input class="chat-in" id="chat-in" placeholder="Ask Kai about money..." onkeydown="if(event.key==='Enter')sendMsg()"/>
 <button class="chat-send" onclick="sendMsg()">🚀</button>
 </div>
</div>
<!-- ══ PARENT ══ -->
<div class="screen" id="screen-parent">
 <div class="par-hdr">
 <button class="par-back" onclick="showScreen('screen-welcome')">← Back</button>
 <div class="par-title">Parent Dashboard 👨‍👩‍👧</div>
 <div class="par-sub" id="par-sub">Your child's financial journey</div>
 </div>
 <div class="par-body">
 <div class="par-ai-card">
 <div class="pai-hdr"><div style="font-size:28px">🤖</div><div><div class="pai-title">K2 AI Parent Report</div><div class="pai-sub">Powered by K2-Think-V2</div></div></div>
 <div class="pai-body" id="pai-body"><div class="spin"><div class="spinner"></div><div class="spin-txt">K2 AI is generating your report...</div></div></div>
 </div>
 <div class="pcard"><div class="pcard-title">📈 Learning Curve</div><div class="lc-bars" id="lc-bars"></div></div>
 <div class="pcard"><div class="pcard-title">💡 Key Insights</div><div id="par-insights"></div></div>
 <div class="pcard"><div class="pcard-title">🕐 Decision Timeline</div><div id="par-timeline"></div></div>
 <div class="pcard"><div class="pcard-title">❤️ Financial Health</div><div id="par-health"></div></div>
 </div>
</div>
<!-- ══ BOTTOM NAV ══ -->
<nav class="bnav" id="bnav" style="display:none">
 <button class="nb on" id="nb-home" onclick="navTo('screen-app','nb-home')"><div class="nb-ic">🏠</div><span class="nb-lbl">Home</span></button>
 <button class="nb" id="nb-learn" onclick="navTo('screen-learn','nb-learn');renderLessons()"><div class="nb-ic">📚</div><span class="nb-lbl">Learn</span></button>
 <button class="nb" id="nb-goals" onclick="navTo('screen-goals','nb-goals');renderGoals()"><div class="nb-ic">🎯</div><span class="nb-lbl">Goals</span></button>
 <button class="nb" id="nb-ai" onclick="navTo('screen-ai','nb-ai');loadAIWelcome()"><div class="nb-ic">🤖</div><span class="nb-lbl">Ask Kai</span></button>
</nav>
<!-- ══ MODALS ══ -->
<div class="mbg" id="mdl-save"><div class="msheet"><div class="mhandle"></div><span class="m-emoji">🏦</span><div class="m-title">Save Money</div><div class="m-sub">Every dollar saved earns interest and works for your future! 💪</div><div class="amt-row" id="save-amts"></div><button class="btn-confirm" onclick="doSave()">Save it! 🎉</button><button class="btn-cancel" onclick="closeMdl('mdl-save')">Cancel</button></div></div>
<div class="mbg" id="mdl-invest"><div class="msheet"><div class="mhandle"></div><span class="m-emoji">📈</span><div class="m-title">Invest Your Money</div><div class="m-sub">Buy a tiny piece of a company. If it grows, your money grows too! 🚀</div><div id="inv-opts"></div><button class="btn-confirm" id="inv-confirm-btn" onclick="doInvest()" disabled>Pick an investment first!</button><button class="btn-cancel" onclick="closeMdl('mdl-invest')">Cancel</button></div></div>
<div class="mbg" id="mdl-lesson"><div class="msheet"><div class="mhandle"></div><span class="m-emoji" id="les-em">📖</span><div class="m-title" id="les-title">Lesson</div><div id="les-body"></div><div id="les-quiz"></div><button class="btn-confirm" id="les-btn" onclick="checkAnswer()" disabled>Pick an answer first!</button><button class="btn-cancel" onclick="closeMdl('mdl-lesson')">Skip for now</button></div></div>
<div class="mbg" id="mdl-rebalance"><div class="msheet"><div class="mhandle"></div><span class="m-emoji">⚖️</span><div class="m-title">Rebalance Portfolio</div><div class="m-sub">K2 AI will analyse your investments and suggest the best mix!</div><div class="rb-chart" id="rb-chart"></div><div class="rb-suggest" id="rb-suggest"><div class="spin"><div class="spinner"></div><div class="spin-txt">K2 AI is analysing...</div></div></div><button class="btn-confirm" id="rb-btn" onclick="applyRb()" disabled>Apply K2's Suggestion ✨</button><button class="btn-cancel" onclick="closeMdl('mdl-rebalance')">Not now</button></div></div>
<div class="mbg" id="mdl-newgoal"><div class="msheet"><div class="mhandle"></div><span class="m-emoji">🎯</span><div class="m-title">New Goal!</div><div class="m-sub">What are you saving for? K2 AI will help you make a plan!</div><div class="goal-grid" id="new-goal-grid"></div><button class="btn-confirm" onclick="doAddGoal()">Add this goal! 🚀</button><button class="btn-cancel" onclick="closeMdl('mdl-newgoal')">Cancel</button></div></div>
<script>
/* ═══ K2 API CONFIG ═══════════════════════════════════
 Exact credentials as specified for the competition.
 ══════════════════════════════════════════════════ */
const K2_API_KEY = "IFM-hdBwCToeVDhs1kUT";
const K2_API_URL = "https://api.k2think.ai/v1/chat/completions";
const MODEL_NAME = "MBZUAI-IFM/K2-Think-v2";
// HuggingFace mirror — used as auto-fallback if primary unreachable:
const K2_FB_URL = "https://api-inference.huggingface.co/models/LLM360/K2-Think-V2/v1/chat/completions";
const K2_FB_MDL = "LLM360/K2-Think-V2";
/* ═══ DATA ═════════════════════════════════════════ */
const GOALS_DB = {
 gaming: {icon:'🎮', name:'Gaming Setup', target:300},
 sneakers:{icon:'👟', name:'Cool Sneakers', target:150},
 trip: {icon:'✈️', name:'Dream Trip', target:1000},
 college: {icon:'🎓', name:'College Fund', target:5000},
 business:{icon:'🏪', name:'My Business', target:500},
 custom: {icon:'⭐', name:'My Big Dream', target:200},
};
const ASSETS = [
 {id:'tech', icon:'💻', name:'Tech Giants', desc:'Apple, Google, Microsoft', price:50, color:'#A855F7', vol:.12},
 {id:'green', icon:'🌱', name:'Green Energy', desc:'Solar & wind power', price:30, color:'#4ECDC4', vol:.15},
 {id:'food', icon:'🍔', name:'Food & Brands', desc:"McDonald's, Nike, Disney", price:25, color:'#FF6B6B', vol:.08},
 {id:'crypto', icon:'₿', name:'Crypto', desc:'Digital money', price:20, color:'#FFD93D', vol:.30},
 {id:'save', icon:'🏦', name:'Savings', desc:'Safe 2% interest', price:1, color:'#6ECCF5', vol:.01},
];
const LESSONS = [
 {id:0, icon:'💰', title:'What IS Money?', sub:'Learn how money works', xp:20, done:false,
 body:'Money is like a superpower! 🦸 It\'s what we use to get things we need and want.\n\nBefore money existed, people swapped stuff — like trading 3 chickens for shoes! 🐔👟 That got confusing fast.\n\nSo humans invented coins and notes. Now we even have digital money on our phones!\n\n💡 Key idea: Money is just a tool. The real power is knowing HOW to use it wisely!',
 q:'What did people do before money?', opts:['Swapped things (bartering)','Just took what they wanted','Printed their own notes','Nothing — money always existed'], ans:0},
 {id:1, icon:'🏦', title:'Saving vs Spending', sub:'Know when to keep it', xp:25, done:false,
 body:'The BIG question: "Do I NEED this, or do I WANT this?" 🤔\n\nSpending is fine — but spend on things you\'ll love tomorrow, not just today!\n\nSaving = putting money away so future-you has MORE money. Even saving $5 a week = $260 a year! 🎉\n\n🔑 Rule: Save FIRST, then spend what\'s left. Not the other way around!',
 q:'What\'s the smart money rule?', opts:['Spend first, save what\'s left','Save first, spend what\'s left','Never spend money','Give all your money away'], ans:1},
 {id:2, icon:'📈', title:'What is Investing?', sub:'Make your money grow!', xp:30, done:false,
 body:'Imagine planting a seed 🌱 that grows into a tree full of fruit 🍎. Investing is like that — with money!\n\nWhen you invest, you give money to a company. They grow. YOUR money grows too!\n\nA $50 investment in Apple 10 years ago would be worth ~$700 today! 🤯\n\n⚠️ Remember: investments can also go DOWN. That\'s why we learn first!',
 q:'What happens when you invest in a company?', opts:['You lose all your money','You get free products','You own a tiny piece and share in its success','Nothing happens'], ans:2},
 {id:3, icon:'🥧', title:'Diversification', sub:"Don't put eggs in one basket", xp:35, done:false,
 body:'Imagine 3 ice cream shops 🍦🍦🍦. If one closes, you still have two!\n\nDiversification = spreading money across DIFFERENT investments. If one drops, others may still rise!\n\n📊 Instead of $100 all in crypto (can drop 50%!), try $25 each in tech, green, food, savings.\n\nThis is called a "balanced portfolio" — what the world\'s smartest investors do!',
 q:'Why diversify your investments?', opts:['To confuse people','So if one drops, others balance it','Because it\'s a rule','To have more passwords'], ans:1},
 {id:4, icon:'🔮', title:'Compound Interest', sub:'The 8th wonder of the world!', xp:40, done:false,
 body:'Einstein called this "the 8th wonder of the world!" ✨\n\n$100 growing at 10%/year:\n• Year 1: $110\n• Year 5: $161\n• Year 10: $259\n• Year 20: $673!\n\nYou never added more money — it just kept growing ON its growth! That\'s compound interest 🚀\n\n🗝️ Secret: Starting at 10 vs 20 makes a MASSIVE difference!',
 q:'Why is compound interest so powerful?', opts:['Banks give free money','Money grows on top of its own growth','You never lose money','Only for rich people'], ans:1},
 {id:5, icon:'🎯', title:'Goal Setting', sub:'Dream it, plan it, achieve it!', xp:30, done:false,
 body:'Every great achievement starts with a goal! 🏆\n\nSMART goals are:\n✅ Specific: "Save for a gaming console"\n✅ Measurable: "$300 by December"\n✅ Achievable: Can you get there?\n✅ Relevant: Does it matter to YOU?\n✅ Time-bound: By WHEN?\n\nSave $10/week for 30 weeks = $300 gaming setup! 🎮\n\n💪 First goal hit = confidence to hit any goal!',
 q:'What does "M" in SMART goals stand for?', opts:['Massive','Measurable','Magical','Money'], ans:1},
 {id:6, icon:'🧠', title:'Good Debt vs Bad Debt', sub:'When borrowing is smart', xp:40, done:false,
 body:'Not all debt is bad! 😮\n\nGOOD debt 💚: Borrow for something that GROWS in value — like a student loan for a degree that earns you more money.\n\nBAD debt ❌: Borrow for things that LOSE value fast — like video games, clothes, one-use stuff.\n\n🔑 Only borrow when what you buy will be worth MORE in the future!',
 q:'Which is GOOD debt?', opts:['Borrowing for candy','Borrowing for shoes','Borrowing for a course that earns you more','Borrowing for a video game'], ans:2},
];
/* ═══ STATE ════════════════════════════════════════ */
let S = {
 name:'', avatar:'🦊', age:10, goal:'gaming',
 cash:500, xp:0,
 port:{tech:0, green:0, food:0, crypto:0, save:500},
 goals:[], activity:[], decisions:[],
 learningData:[20,35,50,65,72,82,90,96],
};
let curLesson=null, selSaveAmt=50, selInvest=null, rbSuggestion=null, aiWelcomeDone=false;
/* ═══ NAVIGATION ══════════════════════════════════ */
const APP_SCREENS = ['screen-app','screen-learn','screen-goals','screen-ai'];
function showScreen(id){
 document.querySelectorAll('.screen').forEach(s=>s.classList.remove('active'));
 document.getElementById(id).classList.add('active');
 document.getElementById('bnav').style.display = APP_SCREENS.includes(id)?'grid':'none';
}
function navTo(screenId, navId){
 showScreen(screenId);
 document.querySelectorAll('.nb').forEach(b=>b.classList.remove('on'));
 document.getElementById(navId).classList.add('on');
}
function continuePlay(){
 if(S.name) navTo('screen-app','nb-home');
 else showScreen('screen-onboard');
}
/* ═══ ONBOARDING ══════════════════════════════════ */
let obStep=0;
function goStep(n){
 if(n===2){
 const nm=document.getElementById('nm-input').value.trim();
 if(!nm){document.getElementById('nm-input').style.borderColor='var(--coral)';return;}
 S.name=nm; S.age=+document.getElementById('age-range').value;
 }
 document.getElementById('s'+obStep).classList.remove('active');
 obStep=n;
 document.getElementById('s'+n).classList.add('active');
 for(let i=0;i<4;i++){
 const d=document.getElementById('d'+i);
 d.className='dot'+(i<n?' done':i===n?' active':'');
 }
}
function pickAv(el){
 document.querySelectorAll('.av-opt').forEach(a=>a.classList.remove('sel'));
 el.classList.add('sel');
 S.avatar=el.dataset.em;
 document.getElementById('sel-av-em').textContent=el.dataset.em;
}
function updAge(v){
 document.getElementById('age-disp').textContent=v;
}
function pickGoal(el){
 document.querySelectorAll('.gc').forEach(g=>g.classList.remove('sel'));
 el.classList.add('sel');
 S.goal=el.dataset.goal;
}
function finishOnboard(){
 const gd=GOALS_DB[S.goal];
 S.goals=[{id:S.goal,icon:gd.icon,name:gd.name,target:gd.target,saved:0}];
 addAct('🎉','Started MoneyQuest!','Welcome bonus: $500 virtual cash!','+$500','var(--mint)');
 addDec('save','Received $500 virtual starting balance','Just now');
 navTo('screen-app','nb-home');
 renderApp();
 setTimeout(confetti,400);
}
/* ═══ RENDER APP ══════════════════════════════════ */
function renderApp(){
 const h=new Date().getHours();
 const gr=h<12?'Good morning! 🌅':h<17?'Good afternoon! ☀️':'Good evening! 🌙';
 setText('hdr-greet',gr);
 setText('hdr-name',S.name?`Hey ${S.name}! 👋`:'MoneyQuest');
 const av=document.getElementById('hdr-av');
 if(av)av.textContent=S.avatar;
 const nw=netWorth();
 setText('nw-amt','$'+nw.toFixed(2));
 const inv=invested();
 const lv=Math.floor(S.xp/100)+1;
 const titles=['🌱 Money Seed','🌿 Money Sprout','🌳 Money Grower','🧙 Money Wizard','💎 Money Master','🏆 Money Legend'];
 setText('xp-title',(titles[Math.min(lv-1,5)])+' · Level '+lv);
 setText('xp-num',(S.xp%100)+'/100 XP');
 setStyle('xp-fill','width',(S.xp%100)+'%');
 setText('s-cash','$'+S.cash.toFixed(0));
 setText('s-inv','$'+inv.toFixed(0));
 setText('s-xp','Lv '+lv);
 renderGoalBanner();
 renderPortfolio();
 renderActivity();
}
function netWorth(){
 return S.cash+ASSETS.reduce((a,as)=>a+(S.port[as.id]||0)*as.price,0);
}
function invested(){
 return ASSETS.filter(a=>a.id!=='save').reduce((a,as)=>a+(S.port[as.id]||0)*as.price,0);
}
function renderGoalBanner(){
 const c=document.getElementById('goal-banner');
 if(!c)return;
 if(!S.goals.length){c.innerHTML='<div class="empty-state">No goal yet — tap "All goals" to add one! 🎯</div>';return;}
 const g=S.goals[0];
 const pct=Math.min(100,(g.saved/g.target)*100);
 c.innerHTML=`<div class="goal-banner"><div class="gb-icon">${g.icon}</div><div class="gb-body"><div class="gb-name">${g.name}</div><div class="gb-sub">$${g.saved.toFixed(0)} of $${g.target}</div><div class="gb-bar"><div class="gb-fill" style="width:${pct}%"></div></div><div class="gb-pct">${pct.toFixed(0)}%${pct>=100?' 🎉 Reached!':''}</div></div></div>`;
}
function renderPortfolio(){
 const g=document.getElementById('port-grid');
 if(!g)return;
 const hasAny=Object.values(S.port).some(v=>v>0);
 if(!hasAny){g.innerHTML='<div class="empty-state">No investments yet — tap Invest to start! 📈</div>';return;}
 g.innerHTML=ASSETS.map(a=>{
 const qty=S.port[a.id]||0; if(!qty)return'';
 const val=qty*a.price;
 const ch=((Math.random()-.45)*4).toFixed(1);
 return`<div class="asset-card" style="border-left:4px solid ${a.color}"><div class="asset-ic">${a.icon}</div><div class="asset-inf"><div class="asset-nm">${a.name}</div><div class="asset-ds">${qty} units · ${a.desc}</div></div><div class="asset-rt"><div class="asset-val">$${val.toFixed(0)}</div><div class="asset-ch ${+ch>=0?'chg-p':'chg-n'}">${+ch>=0?'+':''}${ch}%</div></div></div>`;
 }).join('');
}
function renderActivity(){
 const l=document.getElementById('act-list');
 if(!l)return;
 if(!S.activity.length){l.innerHTML='<div class="empty-state">No activity yet — start playing! 🎮</div>';return;}
 l.innerHTML=S.activity.slice(0,5).map(a=>`<div class="act-item"><div class="ai-ico">${a.icon}</div><div><div class="ai-text">${a.name}</div><div class="ai-time">${a.desc}</div></div><div class="ai-amt" style="color:${a.color}">${a.amount}</div></div>`).join('');
}
function addAct(icon,name,desc,amount,color){
 S.activity.unshift({icon,name,desc,amount,color});
 if(S.activity.length>20)S.activity.pop();
}
function addDec(type,text,time){
 S.decisions.unshift({type,text,time});
 if(S.decisions.length>15)S.decisions.pop();
}
/* ═══ LESSONS ══════════════════════════════════════ */
function renderLessons(){
 const g=document.getElementById('lesson-grid');
 if(!g)return;
 const done=LESSONS.filter(l=>l.done).length;
 setText('lessons-done',done+'/'+LESSONS.length+' done');
 g.innerHTML=LESSONS.map((l,i)=>`
 <div class="lcard ${l.done?'done':i>done?'locked':''}" onclick="${i<=done&&!l.done?'openLesson('+l.id+')':'void(0)'}">
 <div class="lbadge">${l.icon}</div>
 <div class="linfo"><div class="ltitle">${l.title}</div><div class="lsub">${l.sub}</div><div class="lxp">+${l.xp} XP</div></div>
 <div class="lstatus">${l.done?'✅':i>done?'🔒':'▶️'}</div>
 </div>`).join('');
}
function openLesson(id){
 const l=LESSONS[id]; curLesson=l;
 document.getElementById('les-em').textContent=l.icon;
 setText('les-title',l.title);
 document.getElementById('les-body').innerHTML=l.body.split('\n\n').map(p=>`<p style="font-size:14px;line-height:1.7;color:var(--navy);margin-bottom:12px">${p.replace(/\n/g,'<br/>')}</p>`).join('');
 window._qa=null;
 document.getElementById('les-quiz').innerHTML=`<div style="margin:16px 0"><div style="font-size:15px;font-weight:800;margin-bottom:11px">🧠 ${l.q}</div>${l.opts.map((o,i)=>`<div onclick="selAns(${i})" id="qa${i}" style="padding:12px 15px;background:rgba(15,30,60,.04);border:2.5px solid transparent;border-radius:var(--r2);margin-bottom:8px;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s">${String.fromCharCode(65+i)}. ${o}</div>`).join('')}</div>`;
 const btn=document.getElementById('les-btn');
 btn.disabled=true; btn.textContent='Pick an answer first!';
 btn.onclick=checkAnswer;
 openMdl('mdl-lesson');
}
function selAns(i){
 window._qa=i;
 document.querySelectorAll('[id^="qa"]').forEach((el,j)=>{
 el.style.borderColor=j===i?'var(--purple)':'transparent';
 el.style.background=j===i?'rgba(168,85,247,.1)':'rgba(15,30,60,.04)';
 el.style.color=j===i?'var(--purple)':'var(--navy)';
 });
 const btn=document.getElementById('les-btn');
 btn.disabled=false; btn.textContent='Check my answer! 🎯';
}
function checkAnswer(){
 const l=curLesson; if(window._qa===null||!l)return;
 const correct=window._qa===l.ans;
 if(correct){
 l.done=true; S.xp+=l.xp;
 addAct('📚',l.title,'Lesson completed!','+'+l.xp+' XP','var(--purple)');
 addDec('save','Completed: "'+l.title+'"','Just now');
 closeMdl('mdl-lesson'); confetti(); renderLessons(); renderApp();
 } else {
 document.querySelectorAll('[id^="qa"]').forEach((el,j)=>{
 if(j===l.ans){el.style.borderColor='var(--mint)';el.style.background='rgba(78,205,196,.1)';el.style.color='var(--mint)';}
 else if(j===window._qa){el.style.borderColor='var(--coral)';}
 });
 const btn=document.getElementById('les-btn');
 btn.textContent='Got it — finish lesson ✅';
 btn.onclick=()=>{l.done=true;S.xp+=Math.floor(l.xp*.5);addAct('📚',l.title,'Lesson done!','+'+Math.floor(l.xp*.5)+' XP','var(--purple)');closeMdl('mdl-lesson');renderLessons();renderApp();btn.onclick=checkAnswer;};
 }
}
/* ═══ GOALS ════════════════════════════════════════ */
function renderGoals(){
 const c=document.getElementById('goals-list');
 if(!c)return;
 c.innerHTML=S.goals.map(g=>{
 const pct=Math.min(100,(g.saved/g.target)*100);
 return`<div class="gcard"><div class="gcard-top"><div class="gcard-icon">${g.icon}</div><div><div class="gcard-title">${g.name}</div></div></div>
 <div class="gamts"><div class="gamt"><div class="gamt-val">$${g.saved.toFixed(0)}</div><div class="gamt-lbl">Saved</div></div><div class="gamt"><div class="gamt-val">$${g.target}</div><div class="gamt-lbl">Goal</div></div><div class="gamt"><div class="gamt-val">$${Math.max(0,g.target-g.saved).toFixed(0)}</div><div class="gamt-lbl">Left</div></div></div>
 <div class="g-pct">${pct.toFixed(0)}% complete</div>
 <div class="gbig-bar"><div class="gbig-fill" style="width:${pct}%"></div></div>
 <div class="contrib-row"><input class="contrib-in" id="ci-${g.id}" type="number" placeholder="Add $..." min="1"/><button class="btn-add" onclick="contribute('${g.id}')">+ Add</button></div>
 <button class="ai-plan-btn" onclick="goalAdvice('${g.id}')">🤖 Ask K2 AI for a savings plan!</button>
 </div>`;
 }).join('');
}
function contribute(gid){
 const inp=document.getElementById('ci-'+gid);
 const amt=parseFloat(inp.value);
 if(!amt||amt<=0||amt>S.cash){inp.style.borderColor='var(--coral)';return;}
 const g=S.goals.find(x=>x.id===gid); if(!g)return;
 g.saved+=amt; S.cash-=amt; S.port.save=Math.max(0,(S.port.save||0)-amt);
 addAct('🎯',g.name,'Contributed $'+amt,'+$'+amt,'var(--sun)');
 addDec('goal','Added $'+amt+' to '+g.name,'Just now');
 inp.value=''; if(g.saved>=g.target)confetti();
 renderGoals(); renderApp();
}
function openNewGoalMdl(){
 const grid=document.getElementById('new-goal-grid');
 grid.innerHTML=Object.entries(GOALS_DB).map(([id,g])=>`<div class="gc" data-goal="${id}" onclick="document.querySelectorAll('#new-goal-grid .gc').forEach(c=>c.classList.remove('sel'));this.classList.add('sel')"><span class="gc-icon">${g.icon}</span><div class="gc-name">${g.name}</div><div class="gc-desc">$${g.target} goal</div></div>`).join('');
 openMdl('mdl-newgoal');
}
function doAddGoal(){
 const sel=document.querySelector('#new-goal-grid .gc.sel');
 if(!sel)return;
 const id=sel.dataset.goal, gd=GOALS_DB[id];
 if(S.goals.find(g=>g.id===id)){closeMdl('mdl-newgoal');return;}
 S.goals.push({id,icon:gd.icon,name:gd.name,target:gd.target,saved:0});
 closeMdl('mdl-newgoal'); renderGoals(); renderApp();
}
async function goalAdvice(gid){
 const g=S.goals.find(x=>x.id===gid); if(!g)return;
 navTo('screen-ai','nb-ai'); loadAIWelcome();
 await askAI(`I'm saving for ${g.name}. I need $${g.target} and have $${g.saved.toFixed(0)} so far. I'm ${S.age} years old. Can you make me a simple step-by-step savings plan?`);
}
/* ═══ SAVE MODAL ═══════════════════════════════════ */
function openSaveMdl(){
 const amts=[10,25,50,100];
 selSaveAmt=50;
 document.getElementById('save-amts').innerHTML=amts.map(a=>`<div class="amt-btn ${a===50?'sel':''}" onclick="selectSave(${a},this)">$${a}</div>`).join('')+`<div class="amt-btn" onclick="selectSave(${S.cash},this)">All</div>`;
 openMdl('mdl-save');
}
function selectSave(amt,el){
 document.querySelectorAll('#save-amts .amt-btn').forEach(b=>b.classList.remove('sel'));
 el.classList.add('sel'); selSaveAmt=amt;
}
function doSave(){
 const amt=Math.min(selSaveAmt,S.cash); if(amt<=0)return;
 S.port.save=(S.port.save||0)+amt;
 addAct('🏦','Saved money','Put $'+amt+' in savings','+$'+amt,'var(--mint)');
 addDec('save','Saved $'+amt,'Just now');
 S.xp+=5; closeMdl('mdl-save'); renderApp();
}
/* ═══ INVEST MODAL ═════════════════════════════════ */
function openInvMdl(){
 selInvest=null;
 document.getElementById('inv-opts').innerHTML=ASSETS.filter(a=>a.id!=='save').map(a=>`
 <div class="invest-opt" onclick="selectInv('${a.id}',this)">
 <div class="io-ic">${a.icon}</div>
 <div class="io-inf"><div class="io-nm">${a.name}</div><div class="io-ds">${a.desc} · $${a.price}/unit</div></div>
 <div class="io-risk" style="color:${a.vol>.15?'var(--coral)':a.vol>.08?'var(--sun)':'var(--mint)'}">${a.vol>.15?'⚠️ High':a.vol>.08?'〜 Medium':'✅ Low'}</div>
 </div>`).join('');
 const btn=document.getElementById('inv-confirm-btn');
 btn.disabled=true; btn.textContent='Pick an investment first!';
 openMdl('mdl-invest');
}
function selectInv(id,el){
 document.querySelectorAll('.invest-opt').forEach(o=>{o.classList.remove('sel');o.style.background='';});
 el.classList.add('sel'); selInvest=id;
 const a=ASSETS.find(x=>x.id===id);
 const btn=document.getElementById('inv-confirm-btn');
 btn.disabled=false; btn.textContent='Buy 1 unit of '+a.name+' for $'+a.price+' 🚀';
}
function doInvest(){
 if(!selInvest)return;
 const a=ASSETS.find(x=>x.id===selInvest);
 if(S.cash<a.price){alert('Not enough cash! You need $'+a.price);return;}
 S.cash-=a.price; S.port[a.id]=(S.port[a.id]||0)+1;
 addAct(a.icon,'Invested in '+a.name,'1 unit @ $'+a.price,'-$'+a.price,'var(--coral)');
 addDec('invest','Bought 1 unit of '+a.name,'Just now');
 S.xp+=10; closeMdl('mdl-invest'); renderApp();
}
/* ═══ REBALANCE MODAL ══════════════════════════════ */
async function openRbMdl(){
 rbSuggestion=null;
 document.getElementById('rb-btn').disabled=true;
 // Draw chart
 const bars=ASSETS.map(a=>({name:a.name.split(' ')[0],val:(S.port[a.id]||0)*a.price,color:a.color})).filter(b=>b.val>0);
 const maxV=Math.max(1,...bars.map(b=>b.val));
 document.getElementById('rb-chart').innerHTML=bars.map(b=>`<div class="rb-bar" style="height:${(b.val/maxV)*100}%;background:${b.color}"><span class="rb-val">$${b.val.toFixed(0)}</span><span class="rb-lbl">${b.name}</span></div>`).join('');
 document.getElementById('rb-suggest').innerHTML='<div class="spin"><div class="spinner"></div><div class="spin-txt">K2 AI is analysing your portfolio...</div></div>';
 openMdl('mdl-rebalance');
 const desc=ASSETS.map(a=>`${a.name}: $${((S.port[a.id]||0)*a.price).toFixed(0)}`).join(', ');
 const prompt=`I'm ${S.age} years old. My portfolio: ${desc}. My goal: ${S.goals[0]?.name||'grow my money'}. In 3 simple sentences, is my portfolio balanced? Suggest ONE specific change. Use simple language for a ${S.age}-year-old.`;
 try{
 const r=await k2(`You are Kai, a friendly money mentor for a ${S.age}-year-old. Keep advice simple and fun. Use emojis.`,prompt);
 rbSuggestion=r;
 document.getElementById('rb-suggest').innerHTML=`<div class="rb-suggest-title">🤖 K2 AI Suggests:</div><div class="rb-suggest-text">${r}</div>`;
 document.getElementById('rb-btn').disabled=false;
 }catch(e){
 document.getElementById('rb-suggest').innerHTML='<div class="rb-suggest-title">🤖 K2 AI tip:</div><div class="rb-suggest-text">Spread your money across different types! Try investing in at least 3 different categories for a healthy, balanced portfolio. 🌟</div>';
 document.getElementById('rb-btn').disabled=false;
 }
}
function applyRb(){
 addAct('⚖️','Portfolio Rebalanced','Applied K2 AI advice','✓','var(--purple)');
 addDec('invest','Rebalanced based on K2 AI advice','Just now');
 S.xp+=15; closeMdl('mdl-rebalance'); renderApp();
}
/* ═══ AI CHAT ═══════════════════════════════════════ */
function loadAIWelcome(){
 if(aiWelcomeDone)return;
 aiWelcomeDone=true;
 document.getElementById('chat-msgs').innerHTML='';
 addAIMsg(`Hey ${S.name||'friend'}! 👋 I'm Kai, your K2 AI money mentor!\n\nI can help you with:\n• 📈 Understanding your investments\n• 🎯 Hitting your goals faster\n• 💡 Smart money habits\n• ⚖️ What to do with your cash\n\nWhat would you like to know? 🤔`);
 document.getElementById('quick-qs').innerHTML=[
 '💰 How do I grow faster?','📊 Is my portfolio balanced?','🎯 Help me reach my goal!','📈 Should I invest more?','🤔 What is compound interest?','💡 What should I do next?'
 ].map(q=>`<button class="qq" onclick="askAI('${q.replace(/'/g,"\\'")}')"> ${q}</button>`).join('');
}
function addAIMsg(text){
 const c=document.getElementById('chat-msgs'); if(!c)return;
 const d=document.createElement('div'); d.className='msg msg-ai';
 d.innerHTML=`<div class="msg-hdr"><span class="msg-hdr-av">🤖</span><span class="msg-hdr-nm">Kai · K2 AI</span></div><div class="bubble bubble-ai">${text.replace(/\n/g,'<br/>')}</div>`;
 c.appendChild(d); c.scrollTop=c.scrollHeight;
}
function addUserMsg(text){
 const c=document.getElementById('chat-msgs'); if(!c)return;
 const d=document.createElement('div'); d.className='msg msg-user';
 d.innerHTML=`<div class="bubble bubble-user">${text}</div>`;
 c.appendChild(d); c.scrollTop=c.scrollHeight;
}
function showTyping(){
 const c=document.getElementById('chat-msgs'); if(!c)return;
 const d=document.createElement('div'); d.className='msg msg-ai'; d.id='typing';
 d.innerHTML=`<div class="msg-hdr"><span class="msg-hdr-av">🤖</span><span class="msg-hdr-nm">Kai is thinking...</span></div><div class="bubble bubble-ai"><div class="typing-dots"><div class="td"></div><div class="td"></div><div class="td"></div></div></div>`;
 c.appendChild(d); c.scrollTop=c.scrollHeight;
}
function rmTyping(){const t=document.getElementById('typing');if(t)t.remove();}
function sendMsg(){const inp=document.getElementById('chat-in');const txt=inp.value.trim();if(!txt)return;inp.value='';askAI(txt);}
async function askAI(userText){
 addUserMsg(userText); showTyping();
 const portSum=ASSETS.map(a=>`${a.name}:${S.port[a.id]||0}units($${((S.port[a.id]||0)*a.price).toFixed(0)})`).join(',');
 const goalSum=S.goals.map(g=>`${g.name}:$${g.saved}/$${g.target}`).join(',');
 const sys=`You are Kai, a friendly encouraging money mentor for a ${S.age}-year-old named ${S.name||'friend'}. Powered by K2-Think-V2. Use simple fun language. Max 120 words. Use emojis. Be specific to their situation. Portfolio: ${portSum}. Goals: ${goalSum||'none yet'}. Cash: $${S.cash.toFixed(0)}. Net worth: $${netWorth().toFixed(0)}. End with one specific action they should take!`;
 try{
 const r=await k2(sys,userText);
 rmTyping(); addAIMsg(r);
 const t=document.getElementById('ai-teaser');
 if(t)t.textContent=r.slice(0,70)+'...';
 }catch(e){
 rmTyping();
 addAIMsg(`Oops! K2 AI is loading up right now. Meanwhile: Save regularly and diversify your investments! Even $5 today makes a difference 💪`);
 }
}
/* ═══ K2 API CALL ══════════════════════════════════ */
async function k2(system, user){
 // Try primary K2 endpoint first, fall back to HuggingFace mirror on CORS/DNS error
 let r;
 try {
 r = await fetch(K2_API_URL,{
 method:'POST',
 headers:{'Content-Type':'application/json','Authorization':'Bearer '+K2_API_KEY},
 body:JSON.stringify({model:MODEL_NAME,messages:[{role:'system',content:system},{role:'user',content:user}],max_tokens:200,temperature:0.75}),
 });
 } catch(fetchErr) {
 // Primary unreachable (DNS/CORS) — try HuggingFace mirror
 r = await fetch(K2_FB_URL,{
 method:'POST',
 headers:{'Content-Type':'application/json','Authorization':'Bearer '+K2_API_KEY},
 body:JSON.stringify({model:K2_FB_MDL,messages:[{role:'system',content:system},{role:'user',content:user}],max_tokens:200,temperature:0.75}),
 });
 }
 if(!r.ok){
 const e=await r.json().catch(()=>({}));
 if(r.status===503)throw new Error('Model loading — retry in 20s');
 throw new Error((e.error?.message)||'K2 error '+r.status);
 }
 const d=await r.json();
 if(d.choices?.[0]?.message?.content)return d.choices[0].message.content;
 if(d.generated_text)return d.generated_text;
 throw new Error('Unexpected response');
}
/* ═══ PARENT DASHBOARD ═════════════════════════════ */
async function loadParentDash(){
 const sub=document.getElementById('par-sub');
 if(sub)sub.textContent=S.name?S.name+"'s financial journey":'Your child\'s financial journey';
 // Learning curve
 const bc=document.getElementById('lc-bars');
 if(bc){bc.innerHTML=S.learningData.map((v,i)=>`<div class="lc-bar" style="height:${v}%"><span class="lc-bar-lbl">W${i+1}</span></div>`).join('');}
 // Insights
 const ins=document.getElementById('par-insights');
 const doneL=LESSONS.filter(l=>l.done).length;
 const invAmt=invested();
 const divd=Object.values(S.port).filter(v=>v>0).length>=3;
 if(ins)ins.innerHTML=[
 {ic:'📚',txt:`Completed <strong>${doneL}/${LESSONS.length}</strong> money lessons`,badge:doneL>=4?'On track':'Keep going',cls:doneL>=4?'bg-good':'bg-warn'},
 {ic:'💰',txt:`Total invested: <strong>$${invAmt.toFixed(0)}</strong>`,badge:'Active',cls:'bg-good'},
 {ic:'🥧',txt:divd?`Diversified across <strong>${Object.values(S.port).filter(v=>v>0).length}</strong> asset types`:'Only <strong>1-2 assets</strong> — suggest diversification',badge:divd?'Diversified':'Needs work',cls:divd?'bg-good':'bg-warn'},
 {ic:'🎯',txt:`<strong>${S.goals.length}</strong> goal${S.goals.length!==1?'s':''} set — great habit!`,badge:'Goal-setter',cls:'bg-info'},
 ].map(i=>`<div class="ins-row"><div class="ins-ic">${i.ic}</div><div class="ins-txt">${i.txt}</div><span class="ins-badge ${i.cls}">${i.badge}</span></div>`).join('');
 // Timeline
 const tl=document.getElementById('par-timeline');
 if(tl)tl.innerHTML=S.decisions.slice(0,6).map(d=>`<div class="dt-item"><div class="dt-dot dt-${d.type}">${d.type==='save'?'💰':d.type==='invest'?'📈':'🎯'}</div><div><div class="dt-text">${d.text}</div><div class="dt-time">${d.time}</div></div></div>`).join('')||'<div style="color:rgba(255,255,255,.35);font-size:13px">No decisions yet</div>';
 // Health
 const h=document.getElementById('par-health');
 const score=Math.min(100,(doneL/LESSONS.length)*30+(invAmt>0?20:0)+(S.goals.length?20:0)+(divd?20:0)+Math.min(10,S.xp/20));
 if(h)h.innerHTML=`<div style="display:flex;align-items:center;gap:16px"><div style="font-size:46px;font-weight:900;color:${score>70?'var(--mint)':score>40?'var(--sun)':'var(--coral)'}">${score.toFixed(0)}</div><div><div style="font-size:16px;font-weight:800;color:#fff">${score>70?'Excellent 🌟':score>40?'Good Progress 👍':'Just Starting 🌱'}</div><div style="font-size:12px;color:rgba(255,255,255,.45);margin-top:2px">out of 100</div></div></div><div style="height:10px;background:rgba(255,255,255,.1);border-radius:5px;overflow:hidden;margin-top:11px"><div style="height:100%;width:${score}%;background:${score>70?'var(--mint)':score>40?'var(--sun)':'var(--coral)'};border-radius:5px;transition:width 1s ease"></div></div>`;
 // K2 AI report
 const pb=document.getElementById('pai-body');
 try{
 const rpt=await k2('You are a child financial education expert. Write a 3-sentence parent report — encouraging, specific, practical. No emojis.',
 `Child: ${S.name||'Unknown'}, age ${S.age}. Completed ${doneL}/${LESSONS.length} lessons. Invested $${invAmt.toFixed(0)} across ${Object.values(S.port).filter(v=>v>0).length} asset types. Set ${S.goals.length} goals. Earned ${S.xp} XP. Write the report and give one home tip.`);
 if(pb)pb.textContent=rpt;
 }catch(e){
 if(pb)pb.textContent=`${S.name||'Your child'} is making great progress in financial literacy! They're actively engaging with investment concepts and goal-setting, building foundational wealth-building skills. Consider discussing their virtual portfolio choices at dinner and asking what they learned today.`;
 }
}
/* ═══ MODAL HELPERS ════════════════════════════════ */
function openMdl(id){document.getElementById(id).classList.add('open');}
function closeMdl(id){document.getElementById(id).classList.remove('open');}
/* ═══ CONFETTI ══════════════════════════════════════ */
function confetti(){
 const c=document.getElementById('confetti');
 const cols=['#FFD93D','#6ECCF5','#4ECDC4','#FF6B6B','#A855F7','#95E67A','#FF85C2'];
 for(let i=0;i<28;i++){
 const el=document.createElement('div'); el.className='cp';
 el.style.cssText=`left:${Math.random()*100}%;background:${cols[Math.floor(Math.random()*cols.length)]};width:${7+Math.random()*8}px;height:${7+Math.random()*8}px;border-radius:${Math.random()>.5?'50%':'2px'};animation:confetti ${1.2+Math.random()*1.2}s ease-out ${Math.random()*.4}s forwards;`;
 c.appendChild(el);
 setTimeout(()=>el.remove(),2800);
 }
}
/* ═══ UTILS ═════════════════════════════════════════ */
function setText(id,v){const e=document.getElementById(id);if(e)e.textContent=v;}
function setStyle(id,prop,val){const e=document.getElementById(id);if(e)e.style[prop]=val;}
/* ═══ INIT ══════════════════════════════════════════ */
document.getElementById('bnav').style.display='none';
</script>
</body>
</html>