:root{
  --bg:#F8F5EE; --card:#fff; --ink:#2A2622; --muted:#8C847A; --line:#ECE6DA;
  --terra:#CF7A5C; --terra-d:#B9654A; --green:#2E6B47; --green-l:#E3F0E7;
  --red:#C9493B; --red-l:#FBE6E2;
  --t1:#D64541; --t2:#E8912D; --t3:#2F9E5B; --t4:#3B6FD1; --t0:#9A938A;
  --s0:#D5CFC4; --s1:#E3A24F; --s2:#8DBB5A; --s3:#2E6B47;
  --r:22px; --shadow:0 2px 0 rgba(60,40,20,.03),0 8px 24px rgba(60,40,20,.06);
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  --cjk:"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Noto Sans SC","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,"Noto Sans",sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
body{min-height:100vh;min-height:100dvh}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
#app{max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;position:relative}
.cjk,.hz{font-family:var(--cjk)}

/* screens */
.screen{display:none;padding:calc(var(--safe-t) + 14px) 18px calc(96px + var(--safe-b));animation:fade .25s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.top{display:flex;align-items:center;justify-content:space-between;margin:6px 2px 16px}
.top h1{font-size:28px;margin:0;letter-spacing:-.4px}
.brand{font-weight:800;font-size:24px;letter-spacing:-.4px}
.brand span{color:var(--terra)}
.chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-weight:700;font-size:14px;box-shadow:var(--shadow)}
.chip.static{box-shadow:none}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow)}

/* home */
.hero{padding:18px 18px 20px;text-align:center}
.plant-wrap{height:200px;display:flex;align-items:flex-end;justify-content:center}
.plant-wrap svg{height:100%;width:auto;overflow:visible}
.plant-wrap.small{height:160px}
.leaf{transform-box:fill-box;transform-origin:center bottom;transition:transform .8s cubic-bezier(.2,1.4,.4,1),opacity .6s}
.hero-line{font-size:15px;color:var(--muted);margin:10px 0 10px}
.hero-line b{color:var(--ink)}
.bar{height:10px;background:#F1ECE2;border-radius:99px;overflow:hidden}
.bar-fill{height:100%;width:0;background:linear-gradient(90deg,#8DBB5A,var(--green));border-radius:99px;transition:width .8s ease}
.stage-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0 6px}
.stage{padding:14px 8px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px}
.stage b{font-size:24px}
.stage small{font-size:12px;color:var(--muted);font-weight:600}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--s0)}
.dot.s1{background:var(--s1)}.dot.s2{background:var(--s2)}.dot.s3{background:var(--s3)}
.due-note{text-align:center;color:var(--muted);font-size:13px;margin:14px 0 12px;min-height:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:18px;font-weight:700;font-size:17px;height:56px;padding:0 20px;transition:transform .12s ease,filter .2s}
.btn:active{transform:scale(.97)}
.btn.big{width:100%;height:62px;font-size:19px;border-radius:20px}
.btn.primary{background:var(--terra);color:#fff;box-shadow:0 8px 20px rgba(207,122,92,.35)}
.btn.green{background:var(--green);color:#fff;box-shadow:0 8px 18px rgba(46,107,71,.28)}
.btn.outline{background:#fff;border:1.5px solid #D9D1C3;color:var(--ink)}
.btn.ghost{width:100%;margin-top:18px;color:var(--muted);font-size:15px;height:48px}

/* tab bar */
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:480px;display:grid;grid-template-columns:repeat(5,1fr);background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:8px 10px calc(8px + var(--safe-b));z-index:20}
.tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:600;color:#A79F94;padding:4px 0}
.tabbar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tabbar button.active{color:var(--terra)}

/* words */
.word-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.word-row{display:flex;align-items:center;gap:14px;padding:10px 12px 10px 10px}
.word-row img{width:58px;height:58px;border-radius:14px;object-fit:cover;flex:none}
.word-main{flex:1;min-width:0}
.word-main .l1{display:flex;align-items:baseline;gap:8px}
.word-main .hz{font-size:26px;font-weight:600;line-height:1.1}
.word-main .py{font-size:15px;font-weight:600}
.word-main .l2{font-size:13px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.type-tag{font-size:10px;font-weight:800;letter-spacing:.8px;color:var(--terra);background:#FBEEE8;border-radius:6px;padding:2px 6px}
.status{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);font-weight:600}
.spk{width:42px;height:42px;border-radius:50%;background:#F5F0E6;display:flex;align-items:center;justify-content:center;flex:none;color:var(--terra);transition:transform .12s}
.spk:active{transform:scale(.9)}
.spk svg{width:20px;height:20px}
.spk.playing{background:var(--terra);color:#fff}

/* progress */
.cal-card{padding:18px}
.cal-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.cal-head b{font-size:18px}
.cal-head span{font-size:13px;color:var(--muted);font-weight:600}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}
.cal-dow span{font-size:11px;color:var(--muted);font-weight:700;padding-bottom:4px}
.cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:12px;font-size:14px;font-weight:600;color:#6F675D;background:#FAF7F1}
.cal-day.empty{background:none}
.cal-day.studied{background:var(--green);color:#fff}
.cal-day.today{outline:2px solid var(--terra);outline-offset:-2px}
.cal-day.future{color:#C9C2B6}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.stat{padding:16px 8px;text-align:center;display:flex;flex-direction:column;gap:4px}
.stat b{font-size:26px}
.stat small{font-size:12px;color:var(--muted);font-weight:600}
.stat-wide{margin-top:12px;padding:16px 18px;display:flex;justify-content:space-between;align-items:center;font-weight:600}

/* round */
.round{position:fixed;inset:0;background:var(--bg);z-index:40;display:flex;flex-direction:column;max-width:480px;margin:0 auto;transform:translateY(100%);transition:transform .38s cubic-bezier(.2,.9,.3,1);visibility:hidden}
.round.open{transform:none;visibility:visible}
.round-top{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--safe-t) + 12px) 20px 10px}
.link{color:var(--muted);font-weight:700;font-size:15px;padding:8px 0}
.counter{font-weight:800;font-size:15px;background:#fff;border-radius:99px;padding:6px 12px;box-shadow:var(--shadow)}
.round-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 16px calc(100px + var(--safe-b));perspective:1600px}
.round-actions{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1.25fr;gap:12px;padding:12px 16px calc(14px + var(--safe-b));background:linear-gradient(transparent,var(--bg) 30%);transform:translateY(130%);transition:transform .35s cubic-bezier(.2,.9,.3,1)}
.round-actions.show{transform:none}

.flip{display:grid;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,.8,.3,1)}
.flip.flipped{transform:rotateY(180deg)}
.face{grid-area:1/1;align-self:start;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;border-radius:26px;box-shadow:0 10px 30px rgba(60,40,20,.09);overflow:hidden}
.face.back{transform:rotateY(180deg)}
.flip:not(.flipped) .back{pointer-events:none}
.flip.flipped .front{pointer-events:none}
.photo{position:relative;height:270px;background:#ddd center/cover no-repeat}
.back .photo{height:170px}
.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.62))}
.photo .cap{position:absolute;left:18px;right:18px;bottom:14px;color:#fff;z-index:1}
.photo .cap small{display:block;font-size:11px;letter-spacing:1.6px;font-weight:800;opacity:.85}
.photo .cap span{font-size:17px;font-weight:600}
.q{padding:18px 16px 18px}
.q h2{font-size:19px;margin:2px 4px 14px;letter-spacing:-.2px}
.opt{width:100%;display:flex;align-items:center;gap:14px;background:#FBF9F5;border:1.5px solid var(--line);border-radius:18px;padding:12px 14px;margin-bottom:10px;text-align:left;transition:background .2s,border-color .2s,transform .12s}
.opt:active{transform:scale(.98)}
.opt .letter{width:32px;height:32px;border-radius:10px;background:#fff;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:var(--muted);flex:none}
.opt .hz{font-size:30px;font-weight:600;line-height:1.1}
.opt .py{font-size:16px;font-weight:600;margin-left:auto}
.opt.correct{background:var(--green-l);border-color:var(--green)}
.opt.correct .letter{background:var(--green);border-color:var(--green);color:#fff}
.opt.wrong{background:var(--red-l);border-color:var(--red)}
.opt.wrong .letter{background:var(--red);border-color:var(--red);color:#fff}
.opt.dim{opacity:.5}
.a{padding:14px 20px 22px;text-align:center}
.result{display:inline-block;font-size:13px;font-weight:700;border-radius:99px;padding:5px 12px;margin-bottom:6px}
.result.ok{background:var(--green-l);color:var(--green)}
.result.bad{background:var(--red-l);color:var(--red)}
.big-py{font-size:26px;font-weight:700;letter-spacing:.5px;margin-top:4px}
.big-hz{font-size:104px;font-weight:600;line-height:1.08;margin:0}
.meaning{font-size:21px;font-weight:700;margin:2px 0 12px}
.meaning em{font-style:normal;color:var(--muted);font-weight:600}
.spk.lg{width:54px;height:54px;margin:0 auto 14px;background:var(--terra);color:#fff;box-shadow:0 6px 16px rgba(207,122,92,.35)}
.spk.lg svg{width:24px;height:24px}
.box{text-align:left;background:#FBF9F5;border:1px solid var(--line);border-radius:18px;padding:13px 14px;margin-top:10px}
.box h4{margin:0 0 5px;font-size:11px;letter-spacing:1.4px;color:var(--terra);font-weight:800;text-transform:uppercase}
.box p{margin:0;font-size:15px;line-height:1.45}
.ex{display:flex;gap:12px;align-items:center}
.ex .txt{flex:1}
.ex .zh{font-size:22px;font-weight:600}
.ex .expy{font-size:14px;font-weight:600;margin:2px 0}
.ex .tr{font-size:14px;color:var(--muted)}
.tone1{color:var(--t1)}.tone2{color:var(--t2)}.tone3{color:var(--t3)}.tone4{color:var(--t4)}.tone0{color:var(--t0)}
.legend{display:flex;justify-content:center;gap:10px;font-size:11px;color:var(--muted);margin-top:14px;font-weight:600}
.legend i{font-style:normal;display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle}

/* summary */
.summary{justify-content:center;align-items:center}
.summary-inner{text-align:center;padding:24px;width:100%}
.summary h2{font-size:28px;margin:18px 0 6px}
.summary p{color:var(--muted);margin:0 0 26px;font-size:16px}

/* v2: words search & filters */
.search{position:relative;margin:0 0 10px}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;fill:none;stroke:#A79F94;stroke-width:2.2;stroke-linecap:round}
.search input{width:100%;height:46px;border-radius:14px;border:1px solid var(--line);background:#fff;padding:0 14px 0 40px;font:inherit;font-size:16px;color:var(--ink);outline:none;-webkit-appearance:none;box-shadow:var(--shadow)}
.search input:focus{border-color:var(--terra)}
.filters{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 8px;margin:0 -18px;padding-left:18px;padding-right:18px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.fchip{flex:none;display:inline-flex;align-items:center;gap:6px;border-radius:999px;border:1px solid var(--line);background:#fff;padding:7px 12px;font-size:13px;font-weight:700;color:#6F675D;white-space:nowrap}
.fchip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.fchip .dot{width:8px;height:8px}
.fchip small{font-weight:600;opacity:.6}
.list-meta{font-size:12px;color:var(--muted);font-weight:600;margin:2px 4px 10px}
.empty-list{text-align:center;color:var(--muted);padding:40px 10px;font-size:15px}
.offline{gap:12px}
.offline small{display:block;font-size:12px;color:var(--muted);font-weight:500;margin-top:3px}
.mini{flex:none;background:var(--terra);color:#fff;border-radius:12px;padding:9px 12px;font-size:13px;font-weight:700}
.mini:disabled{opacity:.6}
/* v2: question card without heading */
.photo{height:300px}
.front .photo{height:clamp(240px, calc(100vh - 360px), 470px);height:clamp(240px, calc(100dvh - 360px), 470px)}
.bonus-tag{font-size:10px;font-weight:800;letter-spacing:.8px;color:#fff;background:var(--green);border-radius:6px;padding:2px 6px}
.q{padding:16px 14px 6px}
.opt{padding:15px 14px;margin-bottom:10px}
.q .opt:last-child{margin-bottom:4px}
.new-pill{position:absolute;left:14px;top:14px;z-index:2;background:var(--terra);color:#fff;font-size:11px;font-weight:800;letter-spacing:1.2px;border-radius:99px;padding:5px 10px}
.big-hz.l3{font-size:86px}.big-hz.l4{font-size:70px}
.opt .hz.l3{font-size:26px}

/* v3: reading */
.reading-intro{margin:-6px 4px 14px;font-size:13px}
.reading-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.rcard{position:relative;display:flex;align-items:center;gap:14px;padding:18px 16px 18px 18px;cursor:pointer;border:1.5px solid transparent;transition:border-color .2s,box-shadow .2s,transform .12s}
.rcard:active{transform:scale(.985)}
.rcard .num{position:absolute;top:12px;left:16px;font-size:11px;font-weight:800;letter-spacing:1.2px;color:var(--terra)}
.rcard .rtxt{flex:1;min-width:0;padding-top:12px}
.rcard .rzh{font-size:32px;font-weight:600;line-height:1.25;letter-spacing:1px}
.rcard .rpy{font-size:16px;font-weight:600;margin-top:4px;line-height:1.35}
.rcard .rtr{font-size:14px;color:var(--muted);margin-top:6px;line-height:1.4}
.rcard .rtr i{color:#A1978B}
.rcard .spk{width:50px;height:50px}
.rcard.playing{border-color:var(--terra);box-shadow:0 10px 28px rgba(207,122,92,.22)}
.rcard.playing .spk{background:var(--terra);color:#fff;animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(207,122,92,.45)}50%{box-shadow:0 0 0 10px rgba(207,122,92,0)}}
.rcard .wave{display:none;position:absolute;right:18px;bottom:10px;gap:3px;align-items:flex-end;height:12px}
.rcard.playing .wave{display:flex}
.wave i{width:3px;background:var(--terra);border-radius:2px;animation:wv .8s ease-in-out infinite}
.wave i:nth-child(2){animation-delay:.15s}.wave i:nth-child(3){animation-delay:.3s}.wave i:nth-child(4){animation-delay:.45s}
@keyframes wv{0%,100%{height:3px}50%{height:12px}}
.rcard .rzh .sent{display:inline-block;white-space:nowrap;margin-right:2px}
.brand-hz{font-family:var(--cjk);font-size:16px;font-weight:700;color:var(--green);margin-left:4px;letter-spacing:1px;vertical-align:2px}

/* v4: Free vs Premium */
.upsell-chip{display:flex;align-items:center;gap:6px;margin:14px auto 0;background:#FBEEE8;border:1px solid #F1D3C6;color:#8A4B34;border-radius:999px;padding:10px 14px;font-size:13px;font-weight:600;width:100%;justify-content:center}
.upsell-chip b{color:var(--ink)}
.upsell-chip span{color:var(--terra);font-weight:800;margin-left:auto}
.lvl-chips{display:flex;gap:6px}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.lockable{color:#8C847A;background:#F3EEE5;box-shadow:none}
.chip .lk{font-size:11px}
.word-row.locked{opacity:.62;cursor:pointer}
.word-row.locked img{filter:grayscale(.6) blur(1.2px)}
.lock-btn{width:42px;height:42px;border-radius:50%;background:#F3EEE5;display:flex;align-items:center;justify-content:center;flex:none;font-size:16px}
.prem-tag{font-size:10px;font-weight:800;letter-spacing:.8px;color:#8A4B34;background:#FBEEE8;border-radius:6px;padding:2px 6px}
.rcard.locked{cursor:pointer}
.rcard.locked .rtxt{filter:blur(5px);opacity:.55;user-select:none}
.rcard.locked .lock-btn{width:50px;height:50px}
.rcard.more{flex-direction:column;align-items:flex-start;gap:6px;background:linear-gradient(135deg,#FFF8F3,#FBEEE8);border:1.5px dashed #E8B9A6}
.rcard.more .ttl{font-size:18px;font-weight:800;padding-top:14px}
.rcard.more p{margin:0;color:var(--muted);font-size:14px;line-height:1.4}
.rcard.more .go{margin-top:6px;color:var(--terra);font-weight:800;font-size:14px}
.plan-card{display:flex;align-items:center;gap:12px;padding:16px 16px;margin-bottom:12px}
.plan-card .pl{flex:1}
.plan-card .pl small{display:block;color:var(--muted);font-size:12px;margin-top:3px;line-height:1.35}
.plan-badge{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.6px;border-radius:99px;padding:4px 10px;margin-left:6px;vertical-align:1px}
.plan-badge.free{background:#F3EEE5;color:#6F675D}
.plan-badge.premium{background:var(--green);color:#fff}
.plan-card .linkish{display:block;font-size:12px;color:var(--muted);text-decoration:underline;margin-top:6px}
.house-ad{display:flex;align-items:center;gap:10px;width:100%;margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 14px;text-align:left;font-size:13px;color:#6F675D}
.house-ad small{font-size:9px;font-weight:800;letter-spacing:1px;background:#EDE7DC;border-radius:5px;padding:2px 5px;color:#8C847A}
.house-ad em{font-style:normal;color:var(--terra);font-weight:800;margin-left:auto}
/* paywall sheet */
.sheet-backdrop{position:fixed;inset:0;z-index:80;background:rgba(42,38,34,.38);display:flex;align-items:flex-end;justify-content:center;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.sheet-backdrop.open{opacity:1;visibility:visible}
.sheet{position:relative;width:100%;max-width:480px;max-height:94vh;max-height:94dvh;overflow-y:auto;background:var(--bg);border-radius:28px 28px 0 0;padding:10px 20px calc(18px + var(--safe-b));transform:translateY(100%);transition:transform .35s cubic-bezier(.2,.9,.3,1)}
.sheet-backdrop.open .sheet{transform:none}
.grab{width:40px;height:5px;border-radius:3px;background:#D9D1C3;margin:0 auto 8px}
.sheet-x{position:absolute;right:16px;top:14px;width:32px;height:32px;border-radius:50%;background:#EDE7DC;color:#6F675D;font-size:14px;font-weight:700}
.pw-head{text-align:center;padding:4px 10px 6px}
.pw-icon{width:64px;height:64px;border-radius:16px;box-shadow:0 8px 20px rgba(60,40,20,.15)}
.pw-head h2{margin:10px 0 4px;font-size:24px;letter-spacing:-.3px}
.pw-head h2 span{color:var(--terra)}
.pw-reason{margin:0 auto;color:#6F675D;font-size:14px;line-height:1.4;max-width:320px}
.pw-benefits{list-style:none;margin:14px 0 14px;padding:12px 14px;background:#fff;border-radius:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:9px}
.pw-benefits li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;font-weight:650;line-height:1.3}
.pw-benefits li b{font-size:17px;width:24px;text-align:center;flex:none}
.pw-benefits li i{display:block;font-weight:500;font-size:12.5px;color:var(--muted)}
.pw-prices{display:grid;grid-template-columns:1.15fr 1fr;gap:10px;margin-bottom:14px}
.price{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:#fff;border:2px solid var(--line);border-radius:18px;padding:22px 14px 12px}
.price.on{border-color:var(--terra);box-shadow:0 8px 20px rgba(207,122,92,.18)}
.price b{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px}
.price strong{font-size:26px;letter-spacing:-.5px}
.price strong small{font-size:14px;color:var(--muted);font-weight:600}
.price em{font-style:normal;font-size:12px;color:var(--muted);font-weight:600}
.price .badge{position:absolute;top:-10px;left:12px;background:var(--green);color:#fff;font-size:10.5px;font-weight:800;border-radius:99px;padding:3px 9px}
.pw-links{display:flex;justify-content:center;gap:10px;margin-top:12px;font-size:14px;color:var(--muted);font-weight:600}
.pw-links button{color:var(--muted);font-weight:700}
.pw-fine{text-align:center;font-size:11px;color:#B0A79B;margin:10px 0 4px}
.pw-test{display:block;margin:2px auto 0;font-size:11px;color:#B0A79B;text-decoration:underline;padding:6px}
.upsell-chip[hidden],.house-ad[hidden]{display:none}
.upsell-chip{white-space:nowrap}

/* v5: practice — sentence builder, grammar, listening */
.px-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.px-mode{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:16px 14px 14px;gap:3px;transition:transform .12s}
.px-mode:active{transform:scale(.97)}
.px-ico{font-size:28px;width:52px;height:52px;border-radius:16px;background:#FBEEE8;display:flex;align-items:center;justify-content:center;margin-bottom:6px}
#pmListen .px-ico{background:#E8EEF9}
.px-mode b{font-size:16px}
.px-mode small{font-size:12.5px;color:var(--muted);line-height:1.3;font-weight:600}
.px-mode small i{display:block;font-weight:500}
.px-mode em{font-style:normal;font-size:11.5px;font-weight:800;color:var(--terra);margin-top:6px}
.px-head{display:flex;justify-content:space-between;align-items:baseline;margin:0 4px 2px}
.px-head h2{margin:0;font-size:22px;letter-spacing:-.3px}
.px-head span{font-size:13px;color:var(--muted);font-weight:700}
.gram-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.gram-row{display:flex;align-items:center;gap:12px;padding:14px;cursor:pointer;transition:transform .12s}
.gram-row:active{transform:scale(.985)}
.gnum{width:36px;height:36px;border-radius:12px;background:#F5F0E6;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--muted);flex:none;font-size:15px}
.gram-row.done .gnum{background:var(--green);color:#fff}
.gmain{flex:1;min-width:0}
.gmain .tags{margin-bottom:5px}
.gtitle{display:block;font-size:16px;line-height:1.25}
.gpat{display:block;font-size:13px;color:var(--muted);margin-top:2px;font-weight:600}
.chev{font-size:26px;color:#C9C2B6;line-height:1}
.gram-row.locked{opacity:.6}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.tag{font-size:10.5px;font-weight:800;letter-spacing:1.1px;border-radius:99px;padding:4px 9px;line-height:1.2}
.tag.gram{background:var(--green);color:#fff}
.tag.new{background:var(--terra);color:#fff}
.tag.lst{background:#E8EEF9;color:var(--t4)}
.tag.ok{background:var(--green-l);color:var(--green)}
.tag.prem{background:#FBEEE8;color:#8A4B34}
.tag.retry{background:#FFF1DC;color:#B26B12}
.x-btn{width:36px;height:36px;border-radius:50%;background:#EDE7DC;color:#6F675D;font-weight:800;font-size:15px;flex:none}
.drill-top{gap:14px}
.dbar{flex:1;height:10px;background:#EDE7DC;border-radius:99px;overflow:hidden}
.dbar-fill{height:100%;width:0;background:linear-gradient(90deg,#8DBB5A,var(--green));border-radius:99px;transition:width .4s ease}
.drill-foot{position:absolute;left:0;right:0;bottom:0;padding:12px 16px calc(14px + var(--safe-b));background:linear-gradient(rgba(248,245,238,0),var(--bg) 22%)}
.drill-foot:empty{display:none}
.foot-row{display:grid;grid-template-columns:1fr 1.5fr;gap:12px}
.foot-row .btn{width:100%}
.btn:disabled{opacity:.42;box-shadow:none}
.round-body.in{animation:fade .25s ease}
/* exercise card (like the reference: tags, title, dashed answer box, word chips) */
.ex-card{background:#fff;border-radius:26px;box-shadow:0 10px 30px rgba(60,40,20,.09);padding:18px 16px 20px}
.ex-title{font-size:22px;margin:2px 0 8px;letter-spacing:-.3px}
.ex-prompt{margin:0 0 14px;line-height:1.35}
.ex-prompt b{display:block;font-size:19px}
.ex-prompt i{display:block;color:var(--muted);font-size:15px;margin-top:2px}
.ex-prompt.center{text-align:center}
.ans-box{min-height:128px;border:2px dashed #D6CBB8;border-radius:18px;padding:10px;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;background:#FFFDF9;margin:4px 0 18px;transition:background .2s,border-color .2s}
.ans-box:empty::before{content:"Tap the words below · Toque as palavras";color:#B5AC9F;font-size:14px;font-weight:600;margin:auto;text-align:center}
.ans-box.ok{border-color:var(--green);background:var(--green-l)}
.ans-box.bad{border-color:var(--red);background:var(--red-l)}
.bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.bank.done{opacity:.55;pointer-events:none}
.wchip{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:56px;padding:8px 12px 6px;background:#fff;border:1.5px solid #E2DACB;border-bottom-width:4px;border-radius:14px;transition:transform .1s;animation:pop .18s ease}
.wchip:active{transform:scale(.94)}
.wchip .hz{font-size:25px;font-weight:600;line-height:1.15}
.wchip .cpy{font-size:12.5px;font-weight:700;line-height:1.25;margin-top:1px}
.wchip.used{background:#EFEAE0;border-color:#EFEAE0;pointer-events:none;animation:none}
.wchip.used *{visibility:hidden}
@keyframes pop{from{transform:scale(.85);opacity:.4}to{transform:none;opacity:1}}
/* listening */
.listen-row{display:flex;align-items:center;justify-content:center;gap:14px;margin:6px 0 18px}
.play-big{width:84px;height:84px;border-radius:50%;background:var(--terra);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(207,122,92,.38);transition:transform .12s}
.play-big:active{transform:scale(.93)}
.play-big svg{width:36px;height:36px}
.play-big.playing{animation:pulse 1s ease-in-out infinite}
.slow-btn{height:46px;border-radius:99px;background:#F5F0E6;padding:0 16px;font-weight:700;font-size:15px;display:flex;align-items:center;gap:6px;color:#6F675D}
.slow-btn.playing{background:var(--ink);color:#fff}
.lopts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lopts.meaning{grid-template-columns:1fr}
.lopt{background:#FBF9F5;border:1.5px solid var(--line);border-bottom-width:4px;border-radius:18px;padding:12px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:92px;transition:background .2s,border-color .2s,transform .12s}
.lopt:active{transform:scale(.97)}
.lopt .hz{font-size:36px;font-weight:600;line-height:1.15}
.lopt .hz.l3{font-size:28px}
.lopt .py{font-size:14px;font-weight:700;visibility:hidden}
.lopts.answered .py{visibility:visible}
.lopts.meaning .lopt{min-height:0;align-items:flex-start;text-align:left;padding:13px 16px}
.lopt b{font-size:17px}
.lopt i{color:var(--muted);font-size:14px}
.lopt.correct{background:var(--green-l);border-color:var(--green)}
.lopt.wrong{background:var(--red-l);border-color:var(--red)}
.lopt.dim{opacity:.45}
/* feedback panel */
.fb{border-radius:24px;padding:14px 16px;margin:0 -4px;box-shadow:0 -6px 30px rgba(60,40,20,.12);animation:up .3s cubic-bezier(.2,.9,.3,1)}
.fb.ok{background:#E6F2E9}
.fb.bad{background:#FBE8E3}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.fb-head{display:flex;align-items:baseline;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.fb-head b{font-size:19px}
.fb.ok .fb-head b{color:var(--green)}
.fb.bad .fb-head b{color:var(--red)}
.fb-head span{font-size:13px;color:#6F675D;font-weight:600}
.fb-sent{background:rgba(255,255,255,.8);border-radius:16px;padding:10px 12px;margin-bottom:12px}
.fb-sent .zh{font-size:22px}
.fb .btn.big{height:54px;font-size:18px}
/* lesson */
.lesson{padding:2px 2px 10px}
.ls-title{font-size:28px;margin:4px 0 10px;letter-spacing:-.4px;line-height:1.2}
.pattern{display:inline-block;background:#fff;border:2px dashed #D6CBB8;border-radius:14px;padding:8px 14px;font-size:19px;font-weight:700;margin-bottom:4px}
.box p.pt{color:var(--muted);margin-top:6px;font-style:italic}
h4.sec{margin:20px 4px 10px;font-size:11px;letter-spacing:1.4px;color:var(--terra);font-weight:800;text-transform:uppercase}
.ls-ex{padding:14px;margin-bottom:10px}
/* score */
.score{text-align:center;padding:28px 6px 10px}
.score-ring{width:150px;height:150px;border-radius:50%;margin:10px auto 18px;background:conic-gradient(var(--green) calc(var(--p) * 360deg),#E6DFD2 0);display:flex;align-items:center;justify-content:center}
.score-ring>div{width:120px;height:120px;border-radius:50%;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center}
.score-ring b{font-size:34px}
.score-ring small{font-size:12px;color:var(--muted);font-weight:700}
.score h2{font-size:28px;margin:0 0 6px}
.score p{color:var(--muted);margin:0 0 6px;font-weight:600}
.score .score-msg{color:var(--ink);font-size:17px;margin-top:12px}
.ans-box:empty{align-content:center;justify-content:center}

/* v6: real Free / Premium */
.pw-prices.n3{grid-template-columns:1fr 1fr}
.pw-prices.n3 .price:last-child{grid-column:1/-1}
.pw-prices.n4{grid-template-columns:1fr 1fr}
.price.founder{background:linear-gradient(160deg,#FFF8F3,#FFFFFF)}
.price.founder .badge{background:var(--terra)}
.price em{line-height:1.3}
.pw-links button{text-align:center}
.pw-restore{padding:6px 2px 4px}
.pw-restore h3{margin:14px 0 6px;font-size:19px;text-align:center}
.pw-restore>p{margin:0 0 14px;color:#6F675D;font-size:14px;line-height:1.4;text-align:center}
.pw-restore>p i,.restore-ok i{display:block;color:var(--muted);margin-top:3px}
.pw-restore input{width:100%;height:52px;border-radius:16px;border:1.5px solid var(--line);background:#fff;padding:0 16px;font:inherit;font-size:17px;color:var(--ink);outline:none;-webkit-appearance:none;box-shadow:var(--shadow)}
.pw-restore input:focus{border-color:var(--terra)}
.restore-err{min-height:18px;margin:6px 4px 8px;color:var(--red);font-size:13px;font-weight:600}
.restore-ok{display:flex;flex-direction:column;gap:6px;background:var(--green-l);border-radius:18px;padding:16px;font-size:14px;line-height:1.4;color:#2C4A37}
.restore-ok b{font-size:17px;color:var(--green)}
.restore-ok em{font-style:normal;font-weight:700}
.pw-back{display:block;margin:14px auto 4px;color:var(--muted);font-weight:700;font-size:14px;padding:8px}
.pw-restore[hidden],#pwPlans[hidden],.restore-ok[hidden],#restoreForm[hidden]{display:none}
.plan-card .pl-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:10px}
.plan-card .pl-actions .linkish{margin-top:0}
.plan-card .acct{font-weight:600}
.locked-block{padding:14px;cursor:pointer;background:linear-gradient(135deg,#FFF8F3,#FBEEE8);border:1.5px dashed #E8B9A6;box-shadow:none}
.lb-top{display:flex;align-items:center;gap:12px}
.lb-top div{flex:1;min-width:0}
.lb-top b{display:block;font-size:16px}
.lb-top small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;line-height:1.3}
.lb-top .go{color:var(--terra);font-weight:800;font-size:14px;white-space:nowrap}
.lb-top .lock-btn{background:#fff}
.lb-skel{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.sk-row{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.7);border-radius:16px;padding:10px;opacity:.75}
.sk-row div{flex:1;display:flex;flex-direction:column;gap:7px}
.sk-row span{font-size:13px;opacity:.6}
.sk-img{width:46px;height:46px;border-radius:12px;background:#EDE5D8;flex:none}
.sk-l1,.sk-l2,.sk-l3{display:block;height:12px;border-radius:6px;background:#EDE5D8}
.sk-l1{width:55%;height:16px}.sk-l2{width:80%}.sk-l3{width:40%}
.rcard .rtxt.sk{display:flex;flex-direction:column;gap:9px;padding-top:22px;filter:none;opacity:1}
.rcard .rtxt.sk .sk-l1{height:24px;width:70%}

/* v7: approximate USD prices + payment pending */
.price strong.approx{font-size:22px}
.price strong .ap{font-size:17px;font-weight:700;color:var(--muted);letter-spacing:0}
.pw-approx{margin:-4px 4px 12px;font-size:12px;line-height:1.4;color:var(--muted);text-align:center}
.pw-approx[hidden],.pending-banner[hidden]{display:none}
.pending-banner{display:flex;align-items:center;gap:12px;width:100%;margin:14px 0 0;background:#FFF4E0;border:1px solid #F2D7A6;border-radius:18px;padding:12px 14px;text-align:left;color:#7A5212}
.pending-banner b{font-size:22px}
.pending-banner span{flex:1;min-width:0}
.pending-banner strong{display:block;font-size:14px}
.pending-banner small{display:block;font-size:12px;opacity:.85;margin-top:2px}
.pending-banner em{font-style:normal;font-size:22px;opacity:.6}
.pend-sheet{text-align:center;padding-bottom:calc(22px + var(--safe-b))}
.pend-ico{width:72px;height:72px;margin:10px auto 6px;border-radius:22px;background:#FFF4E0;display:flex;align-items:center;justify-content:center;font-size:36px}
.pend-sheet h2{margin:8px 0 10px;font-size:24px;letter-spacing:-.3px}
.pend-sheet h2 span{display:block;font-size:16px;color:var(--muted);font-weight:700;margin-top:2px}
.pend-sheet p{margin:0 6px 18px;color:#6F675D;font-size:14.5px;line-height:1.45}
.pend-sheet p i{display:block;margin-top:8px;color:var(--muted)}
.plan-card .pend-line{color:#9A6510;font-weight:700}
.price strong .amt{white-space:nowrap}
.price strong.approx{font-size:21px;letter-spacing:-.4px}
.price strong.approx .ap{font-size:16px;margin-right:3px}
.price strong.approx small{white-space:nowrap;display:inline-block;margin-left:2px}
.pw-prices>.price{min-width:0}