:root{
  --bg:#F8F5EE; --card:#fff; --ink:#2A2622; --muted:#8C847A; --line:#ECE6DA;
  --terra:#C65D3B; --terra-d:#A94B2D; --terra-l:#FBECE5; --green:#0B6E4F; --green-l:#E1F1EA;
  --red:#C9493B; --red-l:#FBE6E2;
  --s0:#D5CFC4; --s1:#E3A24F; --s2:#7FB069; --s3:#0B6E4F;
  --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);
  --serif:"Iowan Old Style","Palatino","Noto Serif",Georgia,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}
.it{font-family:var(--serif)}

/* 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;color:var(--green)}
.brand span{color:var(--terra)}
.brand-sub{display:block;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:0;margin-top:1px}
.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}
.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}
.lvl-chips{display:flex;gap:6px}
.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,#7FB069,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(198,93,59,.35)}
.btn.green{background:var(--green);color:#fff;box-shadow:0 8px 18px rgba(11,110,79,.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}
.btn:disabled{opacity:.45}
.gram-next{display:flex;align-items:center;gap:12px;width:100%;margin-top:14px;padding:14px 16px;text-align:left}
.gram-next .gi{width:40px;height:40px;border-radius:12px;background:var(--green-l);color:var(--green);display:flex;align-items:center;justify-content:center;font-weight:800;font-family:var(--serif);font-size:18px;flex:none}
.gram-next .gt{flex:1;min-width:0}
.gram-next small{display:block;font-size:11px;letter-spacing:1.2px;font-weight:800;color:var(--green);text-transform:uppercase}
.gram-next b{display:block;font-size:15px;margin-top:2px}
.gram-next em{font-style:normal;color:var(--terra);font-weight:800;font-size:14px}

/* 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 6px 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:6px}
.word-main .w{font-size:22px;font-weight:700;line-height:1.1;font-family:var(--serif)}
.word-main .ar{font-size:15px;color:var(--muted);font-family:var(--serif)}
.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:var(--terra-l);border-radius:6px;padding:2px 6px;text-transform:uppercase}
.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}
.spk.sm{width:34px;height:34px}.spk.sm svg{width:16px;height:16px}

/* 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}

/* 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;text-transform:capitalize}
.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}
.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}

/* 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:300px;background:#ddd center/cover no-repeat;overflow:hidden}
.front .photo{height:clamp(220px, calc(100vh - 390px), 460px);height:clamp(220px, calc(100dvh - 390px), 460px)}
.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;text-transform:uppercase}
.photo .cap span{font-size:17px;font-weight:600}
.photo.veil .bgimg{position:absolute;inset:-30px;background:inherit;background-size:cover;filter:blur(18px) saturate(.9);opacity:.85}
.photo.veil{background-image:none!important;background:#EFE8DA}
.photo .word-q{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.photo .word-q b{font-family:var(--serif);font-size:60px;color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.35);line-height:1.05;text-align:center;padding:0 16px}
.photo .word-q .spk{background:rgba(255,255,255,.92)}
.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}
.q{padding:14px 14px 6px}
.q .prompt{font-size:13px;font-weight:800;letter-spacing:1px;color:var(--muted);text-transform:uppercase;margin:0 4px 10px}
.opt{width:100%;display:flex;align-items:center;gap:14px;background:#FBF9F5;border:1.5px solid var(--line);border-radius:18px;padding:13px 14px;margin-bottom:10px;text-align:left;transition:background .2s,border-color .2s,transform .12s}
.q .opt:last-child{margin-bottom:4px}
.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 .ow{font-size:25px;font-weight:700;line-height:1.1;font-family:var(--serif)}
.opt .om{font-size:16px;font-weight:650;line-height:1.25}
.opt .om small{display:block;font-size:12.5px;color:var(--muted);font-weight:500;margin-top:2px}
.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-w{font-family:var(--serif);font-size:62px;font-weight:700;line-height:1.08;margin:4px 0 2px;color:var(--green)}
.big-w .ar{color:var(--muted);font-weight:500;font-size:.62em;margin-right:6px}
.big-w.long{font-size:46px}
.hint-it{font-size:16px;color:#5E574F;margin:4px 0 6px;font-style:italic}
.meaning{font-size:15px;font-weight:600;margin:2px 0 12px;color:var(--muted)}
.spk.lg{width:54px;height:54px;margin:0 auto 14px;background:var(--terra);color:#fff;box-shadow:0 6px 16px rgba(198,93,59,.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 .exi{font-size:21px;font-weight:600;font-family:var(--serif)}
.ex .tr{font-size:13.5px;color:var(--muted);margin-top:3px}

/* 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}

/* reading */
.reading-intro{margin:-6px 4px 14px;font-size:13px}
.reading-list,.gram-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 16px 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:18px;font-size:11px;font-weight:800;letter-spacing:1.2px;color:var(--terra);text-transform:uppercase}
.rcard .rtxt{flex:1;min-width:0;padding-top:12px}
.rcard .rit{font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.35}
.rcard .rtr{font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.4;display:none}
.rcard .rtr i{color:#A1978B}
.rcard.show-tr .rtr{display:block}
.rcard .trbtn{margin-top:8px;font-size:12px;font-weight:700;color:var(--green);background:var(--green-l);border-radius:99px;padding:4px 10px}
.rcard .spk{width:50px;height:50px;align-self:center}
.rcard.playing{border-color:var(--terra);box-shadow:0 10px 28px rgba(198,93,59,.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(198,93,59,.45)}50%{box-shadow:0 0 0 10px rgba(198,93,59,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.more{flex-direction:column;align-items:flex-start;gap:6px;background:linear-gradient(135deg,#F3FAF6,#E1F1EA);border:1.5px dashed #9CCBB6;cursor:default}
.rcard.more .ttl{font-size:17px;font-weight:800;padding-top:14px}
.rcard.more p{margin:0;color:var(--muted);font-size:14px;line-height:1.4}

/* grammar list */
.gcard{display:flex;align-items:center;gap:14px;padding:16px;cursor:pointer;width:100%;text-align:left}
.gcard .gn{width:44px;height:44px;border-radius:14px;background:var(--green-l);color:var(--green);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;flex:none;font-family:var(--serif)}
.gcard.done .gn{background:var(--green);color:#fff}
.gcard .gt{flex:1;min-width:0}
.gcard .gt b{display:block;font-size:16.5px}
.gcard .gt small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.gcard .gs{font-size:12px;font-weight:800;color:var(--muted);white-space:nowrap}
.gcard.done .gs{color:var(--green)}
/* lesson */
.lesson .round-body{padding-bottom:calc(40px + var(--safe-b))}
.lsn h2{font-size:26px;margin:4px 2px 2px;letter-spacing:-.3px}
.lsn .lsub{color:var(--muted);font-weight:600;margin:0 2px 14px;font-size:14px}
.lsn .sec{background:#fff;border-radius:22px;box-shadow:var(--shadow);padding:16px;margin-bottom:12px}
.lsn .sec h4{margin:0 0 8px;font-size:11px;letter-spacing:1.4px;color:var(--terra);font-weight:800;text-transform:uppercase}
.lsn .sec p{margin:0;font-size:15.5px;line-height:1.5}
.lsn ul.tips{margin:0;padding-left:18px;font-size:14.5px;line-height:1.5}
.lsn ul.tips li+li{margin-top:6px}
.gtable{width:100%;border-collapse:collapse;font-size:15px}
.gtable th{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);text-align:left;padding:4px 6px 8px;font-weight:800}
.gtable td{padding:8px 6px;border-top:1px solid var(--line);font-family:var(--serif);font-size:16.5px}
.gtable td:first-child{font-family:inherit;font-size:13.5px;color:var(--muted);font-weight:600}
.gex{display:flex;align-items:center;gap:10px;padding:8px 0}
.gex+.gex{border-top:1px solid var(--line)}
.gex .txt{flex:1}
.gex .exi{font-family:var(--serif);font-size:19px;font-weight:600}
.gex .tr{font-size:13px;color:var(--muted);margin-top:2px}
.quiz .qq{font-family:var(--serif);font-size:23px;font-weight:600;margin:4px 2px 12px;line-height:1.3}
.quiz .qn{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:1px}
.quiz .opt{padding:12px 14px}
.quiz .why{font-size:14.5px;line-height:1.45;margin:6px 2px 12px;padding:10px 12px;border-radius:14px}
.quiz .why.ok{background:var(--green-l);color:#0A5A41}
.quiz .why.bad{background:var(--red-l);color:#8E2F24}
.quiz .qdone{text-align:center;padding:10px 0 4px}
.quiz .qdone b{display:block;font-size:34px;color:var(--green)}
.quiz .qdone p{color:var(--muted);margin:4px 0 14px}
.toast{font-family:inherit}
[hidden]{display:none!important}

/* v5: Gratis vs Premium */
.upsell-chip{display:flex;align-items:center;gap:6px;margin:14px auto 0;background:var(--terra-l);border:1px solid #F0CDBE;color:#8A4128;border-radius:999px;padding:10px 14px;font-size:13px;font-weight:600;width:100%;justify-content:center;text-align:left}
.upsell-chip b{color:var(--ink)}
.upsell-chip span{color:var(--terra);font-weight:800;margin-left:auto;white-space:nowrap}
.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:#8A4128;background:var(--terra-l);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.premium-more{cursor:pointer;background:linear-gradient(135deg,#FFF8F4,var(--terra-l));border-color:#E8B9A6}
.rcard .go{margin-top:6px;color:var(--terra);font-weight:800;font-size:14px}
.gcard.locked{opacity:.7}
.gcard.locked .gn{background:#F3EEE5;font-size:16px}
.plan-card{display:flex;align-items:center;gap:12px;padding: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}
.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;color:var(--green)}
.pw-head h2 span{color:var(--terra)}
.pw-reason{margin:0 auto;color:#6F675D;font-size:14px;line-height:1.4;max-width:330px}
.pw-benefits{list-style:none;margin:14px 0;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-style:normal;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(198,93,59,.18)}
.price b{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px}
.price strong{font-size:24px;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;white-space:nowrap}
.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}
.pw-practice{width:100%;margin-top:10px;height:48px;font-size:15px}
.upsell-chip{justify-content:space-between;border-radius:18px;gap:10px}
.upsell-chip em{font-style:normal;flex:1;min-width:0;line-height:1.35}
.word-main .l1{gap:0}
.word-main .l1 .ar{margin-right:5px}.word-main .l1 .ar.apos{margin-right:0}
.price strong{font-size:22px;white-space:nowrap}

/* v6: Ascolto */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin:4px 4px 10px}
.sec-head h2{font-size:18px;margin:0;letter-spacing:-.2px}
.sec-head span{font-size:12px;color:var(--muted);font-weight:600}
.listen-hub{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.lh-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px;text-align:left;min-height:118px}
.lh-card.wide,.listen-hub .wide{grid-column:1/-1}
.lh-card.wide{flex-direction:row;align-items:center;min-height:0;background:linear-gradient(135deg,#fff,var(--green-l))}
.lh-ic{font-size:26px;line-height:1}
.lh-t b{display:block;font-size:14.5px;line-height:1.25}
.lh-t small{display:block;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.3}
.lh-best{position:absolute;top:10px;right:10px;font-size:11px;font-weight:800;color:var(--green);background:var(--green-l);border-radius:99px;padding:2px 8px}
.listen-hub .upsell-chip{margin:0}
.listen .round-body{padding-bottom:calc(30px + var(--safe-b))}
.lx{padding:4px 2px}
.lx-mode{font-size:12px;font-weight:800;letter-spacing:1px;color:var(--terra);text-transform:uppercase;text-align:center;margin:2px 0 12px}
.lx-player{display:flex;flex-direction:column;align-items:center;gap:12px;background:#fff;border-radius:26px;box-shadow:0 10px 30px rgba(60,40,20,.08);padding:22px 16px 16px;margin-bottom:14px}
.lx-play{width:64px;height:64px;border-radius:50%;background:var(--terra);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(198,93,59,.35);transition:transform .12s}
.lx-play.big{width:92px;height:92px}
.lx-play svg{width:34px;height:34px}.lx-play.big svg{width:44px;height:44px}
.lx-play:active{transform:scale(.94)}
.lx-play.playing{animation:pulse 1s ease-in-out infinite}
.lx-btns{display:flex;gap:8px;justify-content:center}
.lx-chip{background:#F5F0E6;border-radius:99px;padding:8px 14px;font-size:14px;font-weight:700;color:var(--ink)}
.lx-chip:active{transform:scale(.96)}
.lx-prompt{font-size:13px;font-weight:800;letter-spacing:1px;color:var(--muted);text-transform:uppercase;margin:0 4px 10px}
.lx-q{font-family:var(--serif);font-size:22px;font-weight:600;margin:0 4px 12px;line-height:1.3}
.lx-opts .opt .os{font-family:var(--serif);font-size:18.5px;font-weight:600;line-height:1.3}
.lx-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.lx-pic{position:relative;aspect-ratio:1;border-radius:20px;background:#ddd center/cover no-repeat;border:3px solid transparent;box-shadow:var(--shadow);transition:transform .12s,border-color .2s}
.lx-pic:active{transform:scale(.97)}
.lx-pic .letter{position:absolute;left:8px;top:8px;width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:var(--muted)}
.lx-pic.correct{border-color:var(--green)}.lx-pic.correct .letter{background:var(--green);color:#fff}
.lx-pic.wrong{border-color:var(--red)}.lx-pic.wrong .letter{background:var(--red);color:#fff}
.lx-pic.dim{opacity:.45}
.lx-answer{min-height:64px;background:#fff;border:2px dashed #D9D1C3;border-radius:18px;padding:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.lx-answer.ok{border-style:solid;border-color:var(--green);background:var(--green-l)}
.lx-answer.bad{border-style:solid;border-color:var(--red);background:var(--red-l)}
.lx-hint{color:#B0A79B;font-size:14px;padding:0 4px}
.lx-bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:14px}
.tile{font-family:var(--serif);font-size:19px;font-weight:600;background:#fff;border:1.5px solid var(--line);border-bottom-width:3px;border-radius:14px;padding:9px 14px;transition:transform .1s}
.tile:active{transform:scale(.95)}
.tile.on{background:#FBF9F5}
.tile.used{opacity:.25}
.lx-fb{border-radius:18px;padding:12px 14px;margin:6px 0 12px}
.lx-fb.ok{background:var(--green-l)}.lx-fb.bad{background:var(--red-l)}
.lx-fb-h{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:800;font-size:15px}
.lx-fb.ok .lx-fb-h{color:#0A5A41}.lx-fb.bad .lx-fb-h{color:#8E2F24}
.lx-fb .spk{background:#fff}
.lx-ans-w{display:flex;gap:12px;align-items:center;margin-top:8px}
.lx-ans-w img{width:56px;height:56px;border-radius:14px;object-fit:cover}
.lx-ans-w b{font-family:var(--serif);font-size:22px;display:block}
.lx-ans-w small{display:block;color:#5E574F;font-size:13px}
.lx-ans-s{font-family:var(--serif);font-size:20px;font-weight:600;margin-top:8px}
.lx-fb .tr,.lx-text .tr{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.4}
.lx-show{width:100%;height:48px;font-size:15px;margin-bottom:10px}
.lx-text{background:#fff;border-radius:18px;padding:14px;margin:4px 0 12px;box-shadow:var(--shadow)}
.lx-text .rit{font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.4}
.lx-end{text-align:center;padding-top:30px}
.lx-score b{display:block;font-size:60px;color:var(--green);font-family:var(--serif);line-height:1}
.lx-score span{display:block;font-size:18px;font-weight:700;margin-top:8px}
.lx-end p{color:var(--muted);font-size:14px;margin:8px 0 22px}
.photo.listenq{background:linear-gradient(160deg,#F3FAF6,#DCEFE6)!important}
.photo.listenq::after{display:none}
.trbtn.comp{background:var(--terra-l);color:var(--terra)}
.listen-next .gi{background:var(--terra-l)}
.sec-head h2{white-space:nowrap}.sec-head span{text-align:right;margin-left:12px}

/* ---------- parità con TianTian: benvenuto, obiettivo, serie, creatore, teaser, livelli, impostazioni ---------- */
[hidden]{display:none!important}
.top-r{display:flex;gap:8px;align-items:center}
.acct-chip{padding:8px 12px}
.acct-chip.on{background:var(--green-l);color:var(--green);border-color:transparent}
.welcome{position:fixed;inset:0;z-index:90;background:var(--bg);overflow:hidden}
.wl-inner{max-width:480px;margin:0 auto;display:flex;flex-direction:column;height:100%;text-align:center}
.wl-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:max(16px,env(safe-area-inset-top)) 20px 8px}
.wl-brand{font-weight:800;font-size:23px;letter-spacing:-.4px;color:var(--green)}.wl-brand span{color:var(--terra)}
.wl-h{font-size:26px;line-height:1.15;letter-spacing:-.5px;margin:14px 0 4px}
.wl-sub{color:var(--muted);margin:0 0 12px;font-size:15px}
.wl-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 12px}
.wl-cards figure{margin:0;background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:6px 6px 10px}
.wl-cards img{display:block;width:100%;aspect-ratio:1.2;object-fit:cover;border-radius:13px;background:#EEE8DD}
.wl-cards b{display:block;font-size:17px;margin-top:6px;color:var(--green)}.wl-cards small{color:var(--muted);font-weight:600;font-size:11.5px}
.wl-points{list-style:none;margin:0 0 14px;padding:2px 14px;text-align:left;background:#fff;border-radius:18px;box-shadow:var(--shadow)}
.wl-points li{display:flex;gap:12px;align-items:center;padding:8px 0;font-size:14px;line-height:1.35}
.wl-points li+li{border-top:1px solid var(--line)}.wl-points b{font-size:20px}
.wl-cta{background:var(--bg);border-top:1px solid var(--line);padding:10px 20px max(10px,env(safe-area-inset-bottom))}
.wl-fine{font-size:12px;color:var(--muted);margin:6px 0 0}
.wl-login{margin-top:0;padding:4px;color:var(--muted);font-size:14px;font-weight:600}
.linkish{background:none;border:0;text-decoration:underline;color:var(--muted);font:inherit;font-size:13px;cursor:pointer}
.goal-row{display:flex;gap:10px;align-items:stretch;margin:0 0 12px}
.streak-chip{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:10px 12px;font-size:13px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:5px;max-width:42%;line-height:1.2}
.streak-chip b{font-size:20px;color:var(--ink)}
.goal-box{flex:1;background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:9px 12px}
.goal-t{display:flex;justify-content:space-between;gap:6px;font-size:12px;font-weight:700;color:var(--muted)}.goal-t b{color:var(--ink);white-space:nowrap}
.goal-bar{height:8px;border-radius:99px;background:#EFE9DD;margin-top:7px;overflow:hidden}
.goal-bar div{height:100%;width:0;background:var(--green);border-radius:99px;transition:width .5s}
.goal-row.done .goal-bar div{background:var(--terra)}
.creator{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px;padding:12px;background:#fff;border-radius:18px;box-shadow:var(--shadow);text-align:left}
.creator .av{flex:none;width:52px;height:52px;border-radius:50%;background:var(--green);color:#FBF3E4;display:grid;place-items:center;font-weight:800;font-size:24px;border:3px solid var(--green-l);position:relative}
.creator .av::after{content:"";position:absolute;right:3px;top:3px;width:9px;height:9px;border-radius:50%;background:var(--terra)}
.creator figcaption{min-width:0}.creator b{display:block;font-size:14px;margin-bottom:3px}
.creator p{margin:0 0 4px;font-size:12.5px;line-height:1.4;color:#5E564C}.creator small{display:block;font-size:11.5px;color:var(--muted);font-weight:600}
.creator.compact{padding:10px;margin:0 0 12px;gap:10px;box-shadow:none;border:1px solid var(--line);background:#FFFCF7}
.creator.compact .av{width:44px;height:44px;font-size:20px}.creator.compact p{font-size:12px}
.creator.about{margin:12px 0}
.afterw{margin:12px 0 0;padding:16px}
.afterw h3{margin:0 0 4px;font-size:16px;line-height:1.25;letter-spacing:-.2px}
.fut-sub{margin:0 0 6px;font-size:12.5px;color:var(--muted);line-height:1.4}
.fut-list{list-style:none;margin:0;padding:0}
.fut-row{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line);cursor:pointer}
.fut-row .it{font-size:16px;font-weight:700;line-height:1.3}.fut-row .tr{font-size:12.5px;color:var(--muted)}
.fut-row .spk{flex:none;width:34px;height:34px;border-radius:50%;background:var(--green-l);color:var(--green);display:grid;place-items:center;font-size:15px}
.lvl-chips{display:flex;gap:6px}.lvl-chips .chip{padding:6px 12px;font-size:13px;box-shadow:none}
.lvl-chips .chip.on{background:var(--green);color:#fff;border-color:var(--green)}
.lvl-chips .chip.soon{color:var(--muted);opacity:.75}
.lvl-sheet h2{margin:8px 0 14px;font-size:24px;letter-spacing:-.3px;text-align:center}
.lvl-sheet h2 span{display:block;font-size:13px;color:var(--muted);font-weight:700;margin-top:2px}
.lv-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:14px;margin:0 0 10px;border:2px solid transparent}
.lv-row.on{border-color:var(--green)}.lv-row.soon{opacity:.6}
.lv-row .lv-id{flex:none;width:46px;height:46px;border-radius:14px;background:var(--green-l);color:var(--green);display:grid;place-items:center;font-weight:800;font-size:18px}
.lv-row.on .lv-id{background:var(--green);color:#fff}
.lv-row b{display:block;font-size:15px}.lv-row small{color:var(--muted);font-size:12.5px;line-height:1.35;display:block}
.lv-row .lv-bar{height:5px;border-radius:9px;background:#EFE9DD;margin-top:6px;overflow:hidden}.lv-row .lv-bar i{display:block;height:100%;background:var(--green)}
.st-h{margin:8px 0 12px;font-size:24px;text-align:center}
.st-plan{padding:14px;margin:0 0 12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.st-plan small{color:var(--muted);font-size:12.5px;line-height:1.4}
.st-links{list-style:none;margin:0 0 14px;padding:2px 14px;background:#fff;border-radius:18px;box-shadow:var(--shadow)}
.st-links li+li{border-top:1px solid var(--line)}
.st-links a{display:flex;justify-content:space-between;padding:12px 0;color:var(--ink);font-weight:600;font-size:15px;text-decoration:none}.st-links em{font-style:normal;color:var(--muted)}
#stWelcome,#stReset{margin-top:8px}
.pw-unlocks{text-align:center;font-size:13px;font-weight:700;color:var(--muted);margin:0 0 12px;line-height:1.4}
.pw-trust{list-style:none;margin:10px 0 4px;padding:0;font-size:12px;color:var(--muted);text-align:center;line-height:1.5}
.pw-legal{text-align:center;font-size:12px;margin:6px 0}.pw-legal a{color:var(--muted);font-weight:600}
.lvl-prog{padding:12px 14px;margin:0 0 12px}.lvl-prog .lp{display:flex;justify-content:space-between;font-size:13px;font-weight:700;margin:0 0 4px}.lvl-prog .lp+.lp{margin-top:10px}
.lvl-prog .lb{height:7px;border-radius:9px;background:#EFE9DD;overflow:hidden;margin-bottom:2px}.lvl-prog .lb i{display:block;height:100%;background:var(--green)}

.langsw{display:inline-flex;gap:4px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px;box-shadow:var(--shadow)}
.langsw button{padding:6px 12px;border-radius:999px;font-weight:800;font-size:12.5px;color:var(--muted);letter-spacing:.3px}
.langsw button.on{background:var(--green);color:#fff}
.wl-body>.langsw{float:right;margin:0 0 4px 8px}
.wl-brand{clear:none}
.st-lang{padding:12px 14px;margin:0 0 12px;display:flex;justify-content:space-between;align-items:center}
.pw-prices .price strong span{font:inherit}

.recap{margin:10px 0 16px;text-align:left}.rc-h{font-weight:800;font-size:13px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin:10px 0 6px}
.rc-l{display:flex;flex-wrap:wrap;gap:6px}.rchip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-weight:700;color:var(--green);box-shadow:var(--shadow)}
.rc-t{margin-top:10px;font-size:13px;color:var(--muted);text-align:center}
.weak-next .gi{background:var(--terra)}
.st-toggle{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}.st-toggle small{font-weight:500;color:var(--muted);font-size:12px}.st-toggle.on{border-color:var(--green);background:var(--green-l)}

/* Espressioni A1 */
.seg{display:flex;gap:4px;background:#EFE9DC;border-radius:14px;padding:4px;margin:0 0 12px}
.seg button{flex:1;border:0;background:transparent;border-radius:11px;padding:9px 10px;font:700 14px var(--sans,inherit);color:#6F675D}
.seg button.on{background:#fff;color:var(--green);box-shadow:0 2px 6px rgba(0,0,0,.08)}
.expr-actions{margin:0 0 12px}
.expr-intro{display:flex;flex-direction:column;gap:2px;margin:0 2px 10px}
.expr-intro small{color:#6F675D;font-size:13px}
.expr-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.expr-btns .btn:first-child{grid-column:1/-1}
.expr-row .w{font-size:19px}
.expr-next .gi{font-size:20px}

/* ---------- server Premium: account, accesso, pagamento in attesa, segnaposto bloccati ---------- */
.top-r{display:flex;align-items:center;gap:8px}
.acct-chip[hidden],.pending-banner[hidden],.pw-test[hidden],#loginStep1[hidden],#loginStep2[hidden]{display:none}
.top .brand,.top .brand small,.top-r .chip{white-space:nowrap}
.top-r .chip{padding:8px 11px}
.restore-err{min-height:18px;margin:6px 4px 8px;color:var(--red,#C0392B);font-size:13px;font-weight:600}
.restore-err.ok{color:var(--green)}
.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{text-align:center;padding-bottom:calc(22px + var(--safe-b,0px))}
.pend-sheet h2{margin:8px 0 10px;font-size:24px}
.pend-sheet p{margin:0 0 16px;color:#6F675D;font-size:14px;line-height:1.45}
.pw-back{display:block;margin:12px auto 0;background:none;border:0;color:var(--muted);font:inherit;font-size:14px;text-decoration:underline;cursor:pointer}
.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;font:inherit}
.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-line{color:#7A5212!important}
.login-sheet{text-align:center;padding-bottom:calc(22px + var(--safe-b,0px))}
.login-sheet h2{margin:8px 0 10px;font-size:24px;letter-spacing:-.3px}
.login-p{margin:0 0 14px;color:#6F675D;font-size:14px;line-height:1.45}
.login-sheet 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)}
.login-sheet input:focus{border-color:var(--terra)}
.login-sheet .code-input{height:64px;text-align:center;font-size:30px;font-weight:800;letter-spacing:.5em;padding-left:.5em;font-variant-numeric:tabular-nums}
.login-sheet .restore-err{text-align:left;min-height:20px}
.login-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:12px;font-size:14px;color:var(--muted)}
.login-links button{color:var(--terra);font-weight:700;text-decoration:underline;font-size:14px;background:none;border:0;font-family:inherit}
.login-links button:disabled{color:var(--muted);text-decoration:none;font-weight:600}
.mini.outline{background:#fff;color:var(--terra);border:1.5px solid var(--terra)}
.plan-card .pl-actions{display:flex;gap:12px;align-items:center;margin-top:8px}
.plan-card .pl-actions .linkish{margin-top:0}
.st-plan .pl-actions{display:flex;gap:12px;align-items:center}
.plan-card .pl .acct,.st-plan .acct{word-break:break-all}
.word-row.more-row{cursor:pointer;background:linear-gradient(135deg,#FFF8F4,var(--terra-l));border-color:#E8B9A6}
.word-row.more-row .mlk{width:52px;height:52px;border-radius:16px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;flex:none}
.rtxt.sk{display:flex;flex-direction:column;gap:9px;padding-top:6px}
.rtxt.sk .sk-l{display:block;height:15px;width:88%;border-radius:8px;background:#E4DACB}
.rtxt.sk .sk-l.s{width:58%}
.rcard.locked .rtxt.sk{filter:none;opacity:1}

/* ===== Design v2 — warmer, more premium (Italian palette) ===== */
:root{
  --bg:#FAF6EF; --ink:#2B2420; --muted:#8A7F72; --line:#EDE5D8;
  --terra:#B8482B; --terra-d:#9A3A21; --terra-l:#F9E8DF; --green:#1F6B4A; --green-l:#E4F0E8;
  --gold:#C9A24A; --wine:#7B2D26;
  --r:24px; --shadow:0 1px 2px rgba(70,45,20,.05),0 10px 28px rgba(70,45,20,.08);
  --shadow-lg:0 2px 4px rgba(70,45,20,.06),0 18px 44px rgba(70,45,20,.14);
  --surface:#fff; --surface2:#FBF8F2; --chip-off:#F3EDE2;
}
body{background:radial-gradient(120% 60% at 50% -10%,#FFF3E2 0%,var(--bg) 60%) fixed,var(--bg);font-feature-settings:"ss01","cv11"}
h1,h2,h3{font-family:var(--serif);letter-spacing:-.3px}
.top h1{font-size:32px;font-weight:700}
.brand{font-family:var(--serif);font-weight:700;font-size:26px;letter-spacing:-.5px}
.brand-sub{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,sans-serif;font-size:12px;letter-spacing:.2px}
.screen{padding-left:20px;padding-right:20px}
.chip{background:var(--surface);border-color:var(--line);transition:transform .12s}
.chip:active{transform:scale(.95)}
.card{background:var(--surface);border:1px solid rgba(237,229,216,.7)}

/* hero with progress ring */
.hero{padding:22px 18px 20px;background:linear-gradient(180deg,#fff 0%,#FFF8EE 100%);position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,#1F6B4A 0 33.3%,#F4EFE6 33.3% 66.6%,#B8482B 66.6%);opacity:.9}
.ring-wrap{position:relative;width:196px;height:196px;margin:2px auto 0}
.ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:7;stroke-linecap:round}
.ring-bg{stroke:#F0E8DA}
.ring-fg{stroke:var(--green);stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1s cubic-bezier(.3,.9,.3,1)}
.ring-wrap .plant-wrap{position:absolute;inset:22px 22px 30px;height:auto}
.ring-pct{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:3px 12px;box-shadow:var(--shadow);font-size:13px;font-weight:800;color:var(--green)}
.hero-stats{margin-top:12px}
.hero-line{font-size:14px}
.bar{height:8px;background:#F0E8DA}
.bar-fill{background:linear-gradient(90deg,#6FA77E,var(--green))}
.goal-row{gap:10px}
.streak-chip{border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,#fff,#FFF4E6)}
.goal-box{border-radius:18px}
.stage{border-radius:20px;padding:14px 8px 12px}
.stage b{font-family:var(--serif);font-size:28px}
.btn.primary{background:linear-gradient(180deg,#C4533A,var(--terra-d));box-shadow:0 10px 24px rgba(154,58,33,.34),inset 0 1px 0 rgba(255,255,255,.18)}
.btn.green{background:linear-gradient(180deg,#2A8059,var(--green));box-shadow:0 10px 22px rgba(31,107,74,.3),inset 0 1px 0 rgba(255,255,255,.18)}
.btn.big{height:64px;font-size:20px;border-radius:22px;letter-spacing:.1px}
#startBtn{margin-top:2px;animation:ctaPulse 3.2s ease-in-out 1.2s 2}
@keyframes ctaPulse{0%,100%{transform:none}50%{transform:scale(1.015)}}
.gram-next{border-radius:20px;background:var(--surface)}

/* tab bar */
.tabbar{margin:0 auto;bottom:max(8px,env(safe-area-inset-bottom,0px));width:calc(100% - 24px);border:1px solid var(--line);border-radius:26px;padding:8px 6px;box-shadow:var(--shadow-lg);background:rgba(255,255,255,.88)}
.tabbar button{position:relative;transition:color .2s,transform .15s}
.tabbar button:active{transform:scale(.92)}
.tabbar button.active{color:var(--terra)}
.tabbar button.active:before{content:"";position:absolute;top:-8px;left:50%;width:22px;height:3px;margin-left:-11px;border-radius:3px;background:var(--terra)}
.screen{padding-bottom:calc(112px + var(--safe-b))}

/* flashcards */
.face{border-radius:30px;box-shadow:var(--shadow-lg);border:1px solid rgba(237,229,216,.6)}
.photo{height:340px;border-radius:30px 30px 0 0}
.photo:after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(transparent,rgba(30,18,10,.55));pointer-events:none}
.photo > *{z-index:1}
.round-body{padding-left:14px;padding-right:14px}
.round-top{padding-left:22px;padding-right:22px}
.counter{border:1px solid var(--line);background:var(--surface)}
.opt{border-radius:20px;background:var(--surface2);padding:14px 15px;box-shadow:0 1px 0 rgba(70,45,20,.03);border-width:1.5px}
.opt .ow{font-size:26px}
.opt.correct{animation:pop .42s cubic-bezier(.2,1.6,.4,1);box-shadow:0 6px 18px rgba(31,107,74,.2)}
.opt.wrong{animation:shake .4s ease}
@keyframes pop{0%{transform:scale(.96)}60%{transform:scale(1.035)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.q{animation:slideIn .38s cubic-bezier(.2,.9,.3,1)}
@keyframes slideIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
.round-actions .btn{height:58px;border-radius:20px}

/* words grid & rows */
.word-list{gap:12px}
.word-row{padding:10px 14px 10px 10px;border-radius:22px;transition:transform .14s,box-shadow .2s}
.word-row:active{transform:scale(.985)}
.word-row img{width:68px;height:68px;border-radius:18px;box-shadow:0 4px 12px rgba(70,45,20,.15)}
.word-main .w{font-size:23px}
.spk{background:var(--terra-l)}
.search input{height:50px;border-radius:18px;background:var(--surface)}
.fchip{background:var(--surface);transition:background .2s,transform .12s}
.fchip:active{transform:scale(.95)}
.fchip.on{background:var(--green);border-color:var(--green)}
.chip.on{background:var(--green);border-color:var(--green)}
.type-tag{background:var(--terra-l);color:var(--terra-d)}

/* paywall */
.sheet{border-radius:32px 32px 0 0;background:linear-gradient(180deg,#FFF8EC 0,var(--bg) 220px)}
.pw-head h2{font-family:var(--serif);font-size:28px}
.pw-benefits{border-radius:24px;border:1px solid var(--line);padding:14px 16px;gap:11px}
.pw-benefits li{font-size:15px}
.pw-prices{gap:12px}
.price{border-radius:22px;border-width:2px;transition:transform .15s,box-shadow .2s;background:var(--surface)}
.price:active{transform:scale(.98)}
.price.on{background:linear-gradient(180deg,#fff,#FFF4EC);box-shadow:0 12px 26px rgba(184,72,43,.2)}
.price strong{font-family:var(--serif);font-size:28px}
.price .badge{background:linear-gradient(90deg,var(--gold),#B88A2E);color:#2B2420}
.sheet-backdrop{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}

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

/* dark mode (follows the phone setting) */
@media (prefers-color-scheme:dark){
  :root{--bg:#16130F; --ink:#F3ECE1; --muted:#A39888; --line:#2E2822; --terra:#E07A5A; --terra-d:#C4573A; --terra-l:#3A2620; --green:#4FB383; --green-l:#1D3A2E;
    --red-l:#3A1F1B; --surface:#201B16; --surface2:#262019; --chip-off:#2A241D; --card:#201B16;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.35); --shadow-lg:0 2px 4px rgba(0,0,0,.5),0 18px 44px rgba(0,0,0,.5)}
  body{background:radial-gradient(120% 60% at 50% -10%,#2A1F16 0%,var(--bg) 60%) fixed,var(--bg)}
  .hero{background:linear-gradient(180deg,#241E18,#1D1813)}
  .streak-chip{background:linear-gradient(135deg,#241E18,#2E2216)}
  .ring-bg{stroke:#2E2822}.bar,.goal-bar{background:#2E2822}
  .tabbar{background:rgba(32,27,22,.88)}
  .tabbar button{color:#7E7466}
  .face,.chip,.counter,.search input,.fchip,.card,.price,.pw-benefits,.opt .letter,.cal-card,.round .face{background:var(--surface)}
  .opt{background:var(--surface2)}
  .opt.correct{background:var(--green-l)}.opt.wrong{background:var(--red-l)}
  .sheet{background:linear-gradient(180deg,#2A2018 0,var(--bg) 220px)}
  .price.on{background:linear-gradient(180deg,#2A2018,#241A14)}
  .btn.outline{background:var(--surface);border-color:#3A332B}
  .spk{background:var(--terra-l)}.sheet-x{background:#2E2822;color:#C9BFAF}
  .cal-day{background:#26201A}.cal-day.studied{background:var(--green);color:#10201A}
  .upsell-chip{background:var(--terra-l);border-color:#4A2E24}
}

.google-btn{display:flex;justify-content:center;min-height:44px;margin:4px 0 0}
#googleErr{text-align:center;margin:4px 0 2px;min-height:0}
#googleErr:empty{display:none}
.or-div{display:flex;align-items:center;gap:12px;margin:10px 0 12px;color:var(--muted,#8a7f72);font-size:13px;font-weight:600}
.or-div::before,.or-div::after{content:"";flex:1;height:1px;background:currentColor;opacity:.25}