/* ================= TOKENS ================= */
:root{
  --ink:#16202B; --ink-soft:#64707E; --paper:#F4F5F2; --card:#FFFFFF;
  --mint:#0FB89A; --mint-deep:#0A8C77; --mint-soft:#DFF4EF;
  --coin:#F5B23E; --coin-deep:#C98A1C; --coin-soft:#FCEFD3;
  --coral:#FF7466; --coral-soft:#FFE7E2;
  --sky:#3D9BE0; --sky-soft:#E5F1FB;
  --grape:#7C6CF0; --grape-soft:#EBE8FD;
  --line:#E8E9E4; --shadow:0 16px 38px -20px rgba(16,28,38,.26);
  --shadow-sm:0 4px 16px -8px rgba(16,28,38,.16);
  --grad:linear-gradient(135deg,#13C2A3 0%, #0A8C77 100%);
  --radius:20px; --radius-sm:14px;
  --display:'Fredoka', system-ui, sans-serif;
  --body:'Nunito', system-ui, sans-serif;
  --bar-h:66px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{height:100%;}
body{
  margin:0; font-family:var(--body); color:var(--ink); line-height:1.55;
  -webkit-font-smoothing:antialiased; min-height:100dvh;
  display:flex; justify-content:center; align-items:stretch;
  background:var(--paper);
}
h1,h2,h3,h4{font-family:var(--display); font-weight:600; line-height:1.14; margin:0;}
p{margin:0 0 .7em;}
button{font-family:var(--body); cursor:pointer; border:none; background:none; color:inherit;}
a{color:var(--mint-deep);}
img,svg{display:block; max-width:100%;}
input,select{font-family:var(--body);}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

/* ================= APP SHELL (phone) ================= */
.app{
  position:relative; width:100%; max-width:460px; height:100dvh;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--paper);
}
/* clean centered column on larger screens — no phone frame */
@media(min-width:620px){
  .app{max-width:600px; box-shadow:0 0 80px -40px rgba(20,33,45,.3); border-left:1px solid var(--line); border-right:1px solid var(--line);}
}

/* ================= APP BAR ================= */
.appbar{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:calc(env(safe-area-inset-top) + 12px) 16px 12px;
  background:rgba(245,246,244,.85); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); z-index:10; padding:calc(env(safe-area-inset-top) + 14px) 18px 14px;
}
.brand{display:flex; align-items:center; gap:9px; cursor:pointer;}
.brand .logo{width:38px;height:38px;flex:0 0 auto;}
.brand-txt b{font-family:var(--display); font-size:1.06rem; font-weight:700; display:block; line-height:1;}
.brand-txt b span{color:var(--mint-deep);}
.brand-txt small{font-size:.66rem; color:var(--ink-soft); font-weight:800; letter-spacing:.08em; text-transform:uppercase;}
.hud{margin-left:auto; display:flex; gap:7px;}
.hud .chip{display:flex; align-items:center; gap:5px; background:#fff; border:1px solid var(--line);
  padding:6px 12px; border-radius:999px; font-weight:800; font-size:.88rem; box-shadow:var(--shadow-sm);}
.hud .chip svg{width:18px;height:18px;}
.coin-chip{border-color:#F0DDB0;}
.badge-chip{border-color:#D9D4F7; color:var(--grape);}

/* ================= SCREEN ================= */
.screen{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:20px 18px calc(var(--bar-h) + env(safe-area-inset-bottom) + 28px);
}
.view{animation:fade .32s ease;}
@keyframes fade{from{opacity:0; transform:translateY(8px);}to{opacity:1; transform:none;}}

/* ================= BOTTOM TAB BAR ================= */
.tabbar{
  position:absolute; left:0; right:0; bottom:0; z-index:20;
  display:flex; justify-content:space-around; align-items:stretch;
  height:calc(var(--bar-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(245,246,244,.9); backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
}
.tabbar button{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-size:.66rem; font-weight:800; color:var(--ink-soft); padding-top:6px; position:relative;}
.tabbar button .ic{font-size:1.4rem; line-height:1; transition:transform .15s;}
.tabbar button.on{color:var(--mint-deep);}
.tabbar button.on .ic{transform:translateY(-2px) scale(1.12);}
.tabbar button.on::before{content:""; position:absolute; top:0; width:30px; height:4px; border-radius:999px; background:var(--mint);}

/* ================= HERO / JOURNEY ================= */
.hero{position:relative; background:var(--grad);
  border-radius:24px; padding:28px 24px; color:#fff; overflow:hidden; box-shadow:var(--shadow); margin-bottom:18px;
  animation:rise .5s cubic-bezier(.2,.8,.25,1) both;}
.hero::after{content:""; position:absolute; right:-70px; top:-70px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); pointer-events:none;}
.hero-greet{font-family:var(--display); font-weight:700; font-size:1.7rem; letter-spacing:-.01em; position:relative; line-height:1.1;}
.hero-greet .wave{display:inline-block; animation:wave 2.4s ease-in-out infinite; transform-origin:70% 70%;}
@keyframes wave{0%,60%,100%{transform:rotate(0);}10%{transform:rotate(16deg);}20%{transform:rotate(-8deg);}30%{transform:rotate(14deg);}40%{transform:rotate(-4deg);}}
.hero-quote{position:relative; color:#eafaf6; font-size:1.04rem; font-weight:600; margin:10px 0 0; max-width:34ch; font-style:italic;}
.hero .cta{margin-top:20px; display:inline-flex; align-items:center; gap:8px; background:#fff;
  color:var(--mint-deep); font-weight:800; padding:14px 24px; border-radius:999px; font-size:1.02rem; position:relative;
  box-shadow:0 12px 26px -12px rgba(0,0,0,.35); transition:transform .15s ease, box-shadow .2s ease;}
.hero .cta:hover{transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(0,0,0,.4);}
.hero .cta:active{transform:scale(.97);}

.section-head{display:flex; align-items:center; justify-content:space-between; margin:28px 2px 8px; gap:10px;}
.section-head h2{font-size:1.45rem; letter-spacing:-.01em;}
.eyebrow{font-weight:800; color:var(--mint-deep); text-transform:uppercase; letter-spacing:.1em; font-size:.7rem; margin-bottom:3px;}

.journey{position:relative; padding:10px 0 4px;}
.journey::before{content:""; position:absolute; left:33px; top:6px; bottom:30px; width:3px;
  background:var(--line); border-radius:4px;}
.stop{position:relative; display:flex; gap:14px; align-items:flex-start; padding:9px 0; cursor:pointer;
  animation:rise .5s cubic-bezier(.2,.8,.25,1) both;}
.stop:nth-child(2){animation-delay:.04s;} .stop:nth-child(3){animation-delay:.08s;} .stop:nth-child(4){animation-delay:.12s;}
.stop:nth-child(5){animation-delay:.16s;} .stop:nth-child(6){animation-delay:.2s;} .stop:nth-child(7){animation-delay:.24s;}
.stop:nth-child(8){animation-delay:.28s;} .stop:nth-child(9){animation-delay:.32s;} .stop:nth-child(10){animation-delay:.36s;}
.stop .node{flex:0 0 auto; width:64px; height:64px; border-radius:18px; display:grid; place-items:center;
  font-size:1.6rem; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); position:relative; z-index:2; transition:transform .18s ease, box-shadow .2s ease;}
.stop:hover .node{transform:translateY(-2px); box-shadow:var(--shadow);}
.stop:active .node{transform:scale(.94);}
.stop .node .num{position:absolute; top:-7px; left:-7px; width:23px; height:23px; border-radius:50%;
  background:var(--ink); color:#fff; font-family:var(--display); font-weight:700; font-size:.78rem; display:grid; place-items:center;}
.stop .body{flex:1; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:13px 15px; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .2s ease;}
.stop:hover .body{transform:translateY(-2px); box-shadow:var(--shadow);}
.stop .body h3{font-size:1.06rem; margin-bottom:2px;}
.stop .body p{color:var(--ink-soft); font-size:.87rem; margin:0;}
.stop .meta{display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; font-size:.7rem; font-weight:800;}
.stop .meta .tag{background:var(--paper); color:var(--ink-soft); padding:3px 9px; border-radius:999px; border:1px solid var(--line);}
.stop .meta .done{background:var(--mint-soft); color:var(--mint-deep); border-color:transparent;}
.stop .prog{height:5px; background:var(--line); border-radius:999px; margin-top:9px; overflow:hidden;}
.stop .prog i{display:block; height:100%; background:var(--grad); border-radius:999px; transition:width .6s cubic-bezier(.2,.8,.25,1);}

/* ================= LEVEL / LESSONS ================= */
.backbtn{display:inline-flex; align-items:center; gap:6px; font-weight:800; color:var(--ink-soft);
  background:#fff; border:1px solid var(--line); padding:8px 15px; border-radius:999px; margin-bottom:16px;}
.level-head{display:flex; align-items:center; gap:14px; margin-bottom:6px;}
.level-head .badge{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;font-size:1.7rem;box-shadow:var(--shadow-sm);}
.level-head h2{font-size:1.45rem;}
.crumb{font-weight:800; color:var(--mint-deep); font-size:.74rem; text-transform:uppercase; letter-spacing:.08em;}
.listen-all{display:flex; align-items:center; gap:8px; width:100%; justify-content:center; margin:14px 0 4px;
  background:var(--mint-soft); color:var(--mint-deep); border:1px solid transparent; border-radius:14px; padding:12px; font-weight:800;}
.listen-all:active{transform:scale(.98);}

.lessons{display:grid; gap:14px; margin:14px 0;}
.lesson{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-sm); transition:.2s;}
.lesson.read{border-color:var(--mint-soft);}
.lesson .top{display:flex; align-items:center; gap:12px; margin-bottom:12px;}
.lesson .ill{width:70px; height:70px; flex:0 0 auto; display:grid; place-items:center; background:var(--paper); border-radius:16px;}
.lesson .ill svg{height:54px;}
.lesson h3{font-size:1.16rem; flex:1;}
.lesson .speak{flex:0 0 auto; width:42px; height:42px; border-radius:50%; background:var(--mint-soft);
  display:grid; place-items:center; font-size:1.2rem; border:2px solid var(--mint); color:var(--mint-deep);}
.lesson .speak:active{transform:scale(.9);}
.lesson .speak.playing{background:var(--mint); color:#fff; animation:pulse 1s infinite;}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(39,179,135,.18);}}
.lesson p{color:var(--ink); font-size:.98rem;}
.lesson .example{margin-top:10px; background:var(--sky-soft); border-radius:14px; padding:12px 14px; border-left:5px solid var(--sky);}
.lesson .example b{color:var(--sky); display:block; font-family:var(--display); margin-bottom:3px; font-size:.92rem;}
.lesson .example span{font-size:.95rem;}
.lesson .kid-tip{margin-top:10px; background:var(--coin-soft); border-radius:12px; padding:10px 12px; font-size:.9rem; font-weight:700; color:var(--coin-deep);}
.lesson .mark{margin-top:14px; width:100%;}

/* ================= BUTTONS / PANELS ================= */
.panel{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-sm); margin:18px 0;}
.panel h3{font-size:1.2rem; margin-bottom:3px;}
.panel .sub{color:var(--ink-soft); margin-bottom:14px; font-size:.94rem;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:800; border-radius:999px; padding:12px 20px; font-size:1rem; transition:.14s;}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--mint); color:#fff; box-shadow:0 10px 22px -12px var(--mint-deep);}
.btn-coin{background:var(--coin); color:var(--ink);}
.btn-ghost{background:#fff; border:1px solid var(--line); color:var(--ink);}
.btn[disabled]{opacity:.45; cursor:not-allowed;}
.field{margin-bottom:12px;}
.field label{display:block; font-weight:800; margin-bottom:5px; font-size:.9rem;}
.field input,.field select{width:100%; font-size:1rem; font-weight:700; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink);}
.field input:focus,.field select:focus{outline:none; border-color:var(--mint);}
.row{display:flex; gap:10px; flex-wrap:wrap;}
.row>*{flex:1; min-width:110px;}
.note{font-size:.84rem; color:var(--ink-soft); margin-top:8px;}

/* coin counter */
.coin-target{font-family:var(--display); font-size:2.1rem; font-weight:700; color:var(--mint-deep);}
.coin-tray{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0;}
.coin-btn{display:flex; flex-direction:column; align-items:center; gap:3px; background:var(--coin-soft);
  border:2px solid var(--coin); border-radius:14px; padding:8px 10px; min-width:70px; font-weight:800; font-size:.82rem;}
.coin-btn:active{transform:scale(.94);}
.coin-btn .c{width:38px;height:38px;}
.coin-basket{min-height:80px; border:2px dashed var(--line); border-radius:14px; padding:10px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; background:var(--paper);}
.dropped{font-weight:800; background:#fff; border:2px solid var(--coin); border-radius:999px; padding:4px 11px; animation:pop .25s;}
@keyframes pop{from{transform:scale(.5);opacity:0;}to{transform:scale(1);opacity:1;}}
.tally{font-family:var(--display); font-weight:700; font-size:1.5rem;}

/* needs vs wants */
.sort-item{display:inline-flex; align-items:center; gap:8px; background:#fff; border:2px solid var(--line);
  border-radius:14px; padding:9px 13px; font-weight:800; margin:5px; box-shadow:var(--shadow-sm); font-size:.92rem;}
.sort-bins{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px;}
.bin{border:3px dashed var(--line); border-radius:16px; padding:12px; min-height:120px;}
.bin.need{border-color:var(--mint); background:var(--mint-soft);}
.bin.want{border-color:var(--coral); background:var(--coral-soft);}
.bin h4{font-size:1rem; margin-bottom:6px;}
.sort-item.wrong{border-color:var(--coral); background:var(--coral-soft);}

/* jars */
.jars{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:6px;}
.jar{text-align:center; background:var(--paper); border:2px solid var(--line); border-radius:16px; padding:10px 6px; font-size:.82rem; font-weight:800;}
.jar .glass{position:relative; height:96px; width:62px; margin:6px auto; border:3px solid var(--ink); border-top:none; border-radius:5px 5px 22px 22px; overflow:hidden; background:#fff;}
.jar .fill{position:absolute; left:0; right:0; bottom:0; transition:height .5s;}
.jar.save .fill{background:var(--mint);} .jar.spend .fill{background:var(--coral);} .jar.give .fill{background:var(--grape);}
.jar .amt{font-family:var(--display); font-weight:700; font-size:1.1rem;}
.jar input[type=range]{width:100%; accent-color:var(--mint);}

/* goal */
.goalbar{height:24px; background:var(--line); border-radius:999px; overflow:hidden; position:relative; margin:8px 0;}
.goalbar i{display:block; height:100%; background:linear-gradient(90deg,var(--mint),var(--coin)); transition:width .6s;}
.goalbar span{position:absolute; inset:0; display:grid; place-items:center; font-weight:800;}
.ledger{list-style:none; margin:10px 0 0; padding:0;}
.ledger li{display:flex; justify-content:space-between; padding:9px 12px; border:2px solid var(--line); border-radius:12px; margin-bottom:7px; font-weight:700; background:var(--paper); font-size:.92rem;}
.ledger li button{color:var(--coral); font-weight:800;}

/* chore chart */
.chore-grid{width:100%; border-collapse:separate; border-spacing:4px;}
.chore-grid th{font-size:.7rem; color:var(--ink-soft); font-weight:800; padding:2px;}
.chore-grid .cname{text-align:left; font-weight:800; min-width:96px; font-size:.86rem;}
.check{width:30px;height:30px;border-radius:9px;border:2px solid var(--line);background:#fff;font-size:1rem;}
.check.on{background:var(--mint); border-color:var(--mint-deep); color:#fff;}
.check:active{transform:scale(.9);}

/* grow */
.grow-bars{display:flex; gap:6px; align-items:flex-end; height:150px; border-bottom:3px solid var(--line); margin-top:26px;}
.grow-bars .b{flex:1; background:linear-gradient(var(--mint),var(--coin)); border-radius:7px 7px 0 0; position:relative; transition:height .6s; min-height:6px;}
.grow-bars .b span{position:absolute; top:-19px; left:0; right:0; text-align:center; font-size:.62rem; font-weight:800;}
.grow-bars .b small{position:absolute; bottom:-20px; left:0; right:0; text-align:center; font-size:.6rem; color:var(--ink-soft);}
.big-num{font-family:var(--display); font-weight:700; font-size:2.1rem; color:var(--mint-deep);}

/* quiz */
.quiz-q{font-family:var(--display); font-size:1.18rem; font-weight:600; margin-bottom:12px;}
.opt{display:block; width:100%; text-align:left; background:#fff; border:2px solid var(--line); border-radius:14px; padding:13px 15px; font-weight:700; margin-bottom:9px;}
.opt:active{transform:scale(.99);}
.opt.correct{background:var(--mint-soft); border-color:var(--mint);}
.opt.wrong{background:var(--coral-soft); border-color:var(--coral);}

/* badges */
.badges{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.bdg{text-align:center; background:#fff; border:2px solid var(--line); border-radius:16px; padding:12px 6px;}
.bdg .medal{font-size:2rem; filter:grayscale(1); opacity:.32;}
.bdg.earned .medal{filter:none; opacity:1; animation:pop .4s;}
.bdg b{display:block; font-size:.76rem; margin-top:5px;}
.bdg small{font-size:.66rem; color:var(--ink-soft);}

/* dashboard stats */
.stats{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.stat{background:#fff; border:2px solid var(--line); border-radius:16px; padding:14px; box-shadow:var(--shadow-sm);}
.stat .n{font-family:var(--display); font-weight:700; font-size:1.7rem; line-height:1;}
.stat small{color:var(--ink-soft); font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:.66rem;}

/* calendar */
.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:8px;}
.cal .dow{font-size:.66rem; font-weight:800; color:var(--ink-soft); text-align:center;}
.cal .day{aspect-ratio:1; border:2px solid var(--line); border-radius:11px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-weight:800; background:#fff; font-size:.84rem; padding:2px;}
.cal .day.saved{background:var(--mint-soft); border-color:var(--mint);}
.cal .day .dot{font-size:.72rem;}
.cal .empty{border:none; background:none;}

/* flashcards (word bank) */
.cards{display:grid; gap:12px;}
.fcard{perspective:1000px; height:120px;}
.fcard .inner{position:relative; width:100%; height:100%; transition:transform .5s; transform-style:preserve-3d; cursor:pointer;}
.fcard.flipped .inner{transform:rotateY(180deg);}
.fcard .face{position:absolute; inset:0; backface-visibility:hidden; border-radius:18px; padding:14px 16px;
  display:flex; flex-direction:column; justify-content:center; box-shadow:var(--shadow-sm); border:2px solid var(--line); background:#fff;}
.fcard .front{align-items:center; text-align:center;}
.fcard .front b{font-family:var(--display); font-size:1.4rem; color:var(--mint-deep);}
.fcard .front small{color:var(--ink-soft); font-weight:800; margin-top:6px;}
.fcard .back{transform:rotateY(180deg); background:var(--mint-soft); font-size:.92rem; overflow:auto;}
.fcard .back .ex{margin-top:6px; font-style:italic; color:var(--ink-soft); font-size:.86rem;}
.fcard .speak-sm{position:absolute; top:8px; right:8px; width:34px; height:34px; border-radius:50%;
  background:#fff; border:2px solid var(--mint); color:var(--mint-deep); display:grid; place-items:center; z-index:2;}

/* settings */
.setting{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:none;}
.setting:last-child{border-bottom:none;}
.setting .label b{display:block; font-size:1rem;}
.setting .label small{color:var(--ink-soft); font-size:.82rem;}
.switch{width:52px; height:30px; border-radius:999px; background:var(--line); position:relative; flex:0 0 auto; transition:.2s;}
.switch.on{background:var(--mint);}
.switch i{position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; transition:.2s; box-shadow:var(--shadow-sm);}
.switch.on i{left:25px;}
input[type=range].big{width:100%; accent-color:var(--mint); height:26px;}

/* certificate */
.cert{background:linear-gradient(160deg,#fffdf6,#fff6e0); border:6px double var(--coin-deep); border-radius:18px; padding:28px 18px; text-align:center;}
.cert h2{font-size:1.4rem;}
.cert .name{font-family:var(--display); font-weight:700; font-size:1.8rem; color:var(--mint-deep); border-bottom:3px dashed var(--coin-deep); display:inline-block; padding:4px 22px; margin:8px 0;}
.cert .seal{font-size:2.6rem;}

/* word bank glossary fallback */
.gloss{display:grid; gap:9px;}
.gloss .term{background:#fff; border:2px solid var(--line); border-radius:14px; padding:13px 15px; font-size:.95rem;}
.gloss .term b{color:var(--mint-deep); font-family:var(--display);}

/* toast */
.toast{position:fixed; left:50%; bottom:calc(var(--bar-h) + env(safe-area-inset-bottom) + 18px);
  transform:translateX(-50%) translateY(16px); opacity:0; visibility:hidden; pointer-events:none;
  background:var(--ink); color:#fff; font-weight:800; padding:13px 22px; border-radius:16px; box-shadow:var(--shadow);
  z-index:70; transition:opacity .3s ease, transform .3s cubic-bezier(.2,.8,.25,1), visibility .3s; max-width:88%; text-align:center; font-size:.95rem;}
.toast.show{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}

@media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important;}}

/* ================= ONBOARDING ================= */
.onboard{padding:8px 2px 0;}
.onboard .welcome{text-align:center; margin-bottom:18px;}
.onboard .welcome .mascot{font-size:3rem;}
.onboard .welcome h1{font-size:1.8rem; margin-top:6px;}
.onboard .welcome p{color:var(--ink-soft);}
.onboard .step{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm); margin-bottom:14px;}
.onboard .step h3{font-size:1.1rem; margin-bottom:10px;}
.age-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.age-grid button{padding:12px 6px; border:2px solid var(--line); border-radius:14px; background:#fff; font-weight:800; font-size:.92rem;}
.age-grid button.on{background:var(--mint); color:#fff; border-color:var(--mint-deep);}
.country-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.country-grid button{padding:14px 6px; border:2px solid var(--line); border-radius:16px; background:#fff; font-weight:800; display:flex; flex-direction:column; align-items:center; gap:4px;}
.country-grid button .flag{font-size:1.8rem;}
.country-grid button .cur{font-size:.74rem; color:var(--ink-soft);}
.country-grid button.on{border-color:var(--mint); background:var(--mint-soft);}

/* profile greeting on home */
.greeting{display:flex; align-items:center; gap:12px; margin:2px 0 16px;}
.greeting .av{width:46px;height:46px;border-radius:50%;background:var(--mint-soft);border:1px solid var(--line);display:grid;place-items:center;font-size:1.4rem;flex:0 0 auto;}
.greeting b{font-family:var(--display); font-size:1.25rem;}
.greeting small{display:block; color:var(--ink-soft); font-weight:800; font-size:.78rem;}
.reco{background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px 16px; margin:2px 0 16px; display:flex; align-items:center; gap:12px; cursor:pointer; box-shadow:var(--shadow-sm);}
.reco .ic{font-size:1.6rem;} .reco b{font-family:var(--display);} .reco small{color:var(--ink-soft); font-weight:700; display:block;}

/* ================= CURRENCY ILLUSTRATIONS / EXPLORER ================= */
.money-rack{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:12px 0;}
.money-item{text-align:center; font-weight:800; font-size:.74rem;}
.money-item svg{height:54px; margin:0 auto 4px; filter:drop-shadow(0 3px 5px rgba(0,0,0,.15));}
.money-item.note svg{height:44px;}
.cur-tabs{display:flex; gap:8px; margin-bottom:10px;}
.cur-tabs button{flex:1; padding:10px; border:2px solid var(--line); border-radius:12px; background:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; gap:6px;}
.cur-tabs button.on{border-color:var(--mint); background:var(--mint-soft);}
.cur-tabs button .flag{font-size:1.2rem;}

/* start-early race */
.race{margin-top:10px;}
.race .lane{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.race .lane .who{width:74px; flex:0 0 auto; font-weight:800; font-size:.82rem;}
.race .track{flex:1; height:34px; background:var(--line); border-radius:999px; position:relative; overflow:hidden;}
.race .track i{position:absolute; left:0; top:0; bottom:0; border-radius:999px; transition:width .8s;}
.race .lane.early .track i{background:linear-gradient(90deg,var(--mint),var(--coin));}
.race .lane.late .track i{background:linear-gradient(90deg,var(--sky),var(--grape));}
.race .track span{position:absolute; right:10px; top:50%; transform:translateY(-50%); font-weight:800; font-size:.82rem; color:var(--ink);}

/* basket / diversify chips */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;}
.chip-pick{padding:8px 13px; border:2px solid var(--line); border-radius:999px; background:#fff; font-weight:800; font-size:.85rem;}
.chip-pick.on{background:var(--grape-soft); border-color:var(--grape); color:var(--grape);}

/* voice setup card */
.setup-steps{counter-reset:s; list-style:none; padding:0; margin:10px 0 0;}
.setup-steps li{counter-increment:s; position:relative; padding:8px 0 8px 34px; font-size:.92rem; border-bottom:1px dashed var(--line);}
.setup-steps li:last-child{border-bottom:none;}
.setup-steps li::before{content:counter(s); position:absolute; left:0; top:8px; width:24px; height:24px; border-radius:50%; background:var(--mint); color:#fff; font-weight:800; display:grid; place-items:center; font-size:.8rem;}
.codey{background:var(--ink); color:#bfe8d7; font-family:ui-monospace,monospace; font-size:.82rem; padding:8px 12px; border-radius:10px; overflow-x:auto; margin:6px 0;}
.pill{display:inline-block; font-size:.72rem; font-weight:800; padding:3px 9px; border-radius:999px; background:var(--mint-soft); color:var(--mint-deep);}
.pill.warn{background:var(--coral-soft); color:var(--coral);}

/* ================= 5-TAB BAR FIT ================= */
.tabbar button{font-size:.62rem;}
.tabbar button .ic{font-size:1.3rem;}

/* ================= ACTIVITIES HUB ================= */
.act-intro{margin:0 0 18px;}
.act-level{margin:22px 0 10px; display:flex; align-items:center; gap:10px;}
.act-level .pip{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:1rem;color:#fff;flex:0 0 auto;}
.act-level h3{font-size:1.12rem;}
.act-level small{display:block;color:var(--ink-soft);font-weight:700;font-size:.76rem;}
.act-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.act-card{background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px 14px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:6px; cursor:pointer; transition:.16s; text-align:left;}
.act-card:active{transform:scale(.97);}
.act-card .ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:1.4rem;}
.act-card b{font-family:var(--display); font-size:1rem; line-height:1.1;}
.act-card small{color:var(--ink-soft); font-size:.8rem; font-weight:600; line-height:1.3;}
.act-card .done-dot{align-self:flex-start; font-size:.66rem; font-weight:800; color:var(--mint-deep); background:var(--mint-soft); padding:2px 8px; border-radius:999px;}

/* ================= MONEY TRACKER ================= */
.tracker-bal{display:flex; gap:10px; margin:4px 0 14px;}
.tracker-bal .b{flex:1; background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:12px; text-align:center;}
.tracker-bal .b .n{font-family:var(--display); font-weight:700; font-size:1.35rem;}
.tracker-bal .b small{color:var(--ink-soft); font-weight:800; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em;}
.tracker-bal .b.total{background:var(--mint-soft); border-color:transparent;}
.tracker-bal .b.total .n{color:var(--mint-deep);}
.tt-seg{display:flex; gap:8px; margin-bottom:10px;}
.tt-seg button{flex:1; padding:10px; border:1px solid var(--line); border-radius:12px; background:#fff; font-weight:800;}
.tt-seg button.in.on{background:var(--mint-soft); border-color:transparent; color:var(--mint-deep);}
.tt-seg button.out.on{background:var(--coral-soft); border-color:transparent; color:var(--coral);}
.tt-list{list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:8px;}
.tt-list li{display:flex; align-items:center; gap:10px; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:10px 12px;}
.tt-list li .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;font-size:.95rem;}
.tt-list li .ic.in{background:var(--mint-soft);} .tt-list li .ic.out{background:var(--coral-soft);}
.tt-list li .lbl{flex:1; font-weight:700;} .tt-list li .lbl small{display:block;color:var(--ink-soft);font-weight:600;font-size:.74rem;}
.tt-list li .amt{font-family:var(--display); font-weight:700;}
.tt-list li .amt.in{color:var(--mint-deep);} .tt-list li .amt.out{color:var(--coral);}
.tt-list li button.del{background:none;color:var(--ink-soft);font-size:1rem;padding:2px 4px;}
.act-back{margin-bottom:14px;}

/* ================= MOTION & POLISH ================= */
@keyframes rise{from{opacity:0; transform:translateY(14px);}to{opacity:1; transform:none;}}
@keyframes popin{from{opacity:0; transform:scale(.9);}to{opacity:1; transform:scale(1);}}

/* gradient primary action */
.btn-primary{background:var(--grad); box-shadow:0 12px 24px -12px var(--mint-deep);}
.btn{transition:transform .14s ease, box-shadow .2s ease, background .2s ease;}
.btn-primary:hover,.btn-coin:hover{transform:translateY(-2px);}
.cta{transition:transform .15s ease, box-shadow .2s ease;}

/* tab indicator + tap feedback */
.tabbar button{transition:color .2s ease;}
.tabbar button.on::before{background:var(--grad);}
.tabbar button:active .ic{transform:scale(.86);}

/* reco card */
.reco{transition:transform .18s ease, box-shadow .2s ease; animation:rise .5s cubic-bezier(.2,.8,.25,1) both; animation-delay:.06s;}
.reco:hover{transform:translateY(-2px); box-shadow:var(--shadow);}
.reco .ic{font-size:1.7rem;}

/* activity cards: staggered entrance + lift */
.act-card{animation:rise .45s cubic-bezier(.2,.8,.25,1) both; transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease;}
.act-card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:transparent;}
.act-grid .act-card:nth-child(2){animation-delay:.05s;} .act-grid .act-card:nth-child(3){animation-delay:.1s;}
.act-grid .act-card:nth-child(4){animation-delay:.15s;} .act-grid .act-card:nth-child(5){animation-delay:.2s;}
.act-level{animation:rise .45s cubic-bezier(.2,.8,.25,1) both;}

/* lessons & panels gentle entrance + hover */
.lesson,.panel{transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease;}
.lesson{animation:rise .45s cubic-bezier(.2,.8,.25,1) both;}
.lessons .lesson:nth-child(2){animation-delay:.05s;} .lessons .lesson:nth-child(3){animation-delay:.1s;}
.lessons .lesson:nth-child(4){animation-delay:.15s;} .lessons .lesson:nth-child(5){animation-delay:.2s;}
.lesson .ill svg{transition:transform .3s ease;}
.lesson:hover .ill svg{transform:scale(1.06) rotate(-3deg);}

/* speak button gradient while playing */
.lesson .speak.playing{background:var(--grad); border-color:transparent; color:#fff;}
.listen-all{transition:transform .14s ease, background .2s ease;}
.listen-all:hover{transform:translateY(-1px);}

/* progress + goal bars use the brand gradient */
.goalbar i{background:var(--grad)!important;}

/* badge medals pop in when earned */
.bdg.earned .medal{animation:popin .4s ease both;}