/* ============================================================
   COLA DE ARROZ ROXO — APP · Design iOS/Editorial (vanilla)
   Inspirado em Apple Health + trilha gamificada.
   ============================================================ */
:root{
  --ink:#1B1C28; --muted:#797E92; --faint:#A9ADBE;
  --card:#FFFFFF; --line:#ECE9F3;
  --pp:#5B4FD6; --pp-deep:#3A3299; --pp-ink:#272160; --pp-bg:#EFEDFB; --pp-soft:#F6F5FD;
  --gold:#C09A37; --gold-bg:#F7F0DD;
  --green:#1FA565; --green-bg:#E7F7EF;
  --pink:#E85C8A; --teal:#2BA8A0;
  --shadow:0 8px 20px rgba(40,34,96,.07);
  --shadow-sm:0 1px 3px rgba(40,34,96,.06);
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Segoe UI',Roboto,'Inter',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:16px}
body{font-family:var(--font);color:var(--ink);
  background:#E9E6F2;-webkit-font-smoothing:antialiased;letter-spacing:-.2px}
.app{max-width:480px;margin:0 auto;min-height:100vh;position:relative;
  background:linear-gradient(180deg,#FBFAFF 0%,#F4F1FB 38%,#EFEDF9 100%);
  box-shadow:0 0 70px rgba(40,34,96,.12);overflow-x:hidden}
.screen{padding:0 17px 120px;animation:fade .35s cubic-bezier(.2,.7,.3,1)}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.92);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(91,79,214,.45)}50%{box-shadow:0 0 0 10px rgba(91,79,214,0)}}
h1{font-family:var(--font);font-size:28px;font-weight:800;line-height:1.14;letter-spacing:-.7px}
h2{font-family:var(--font);font-size:20px;font-weight:800;line-height:1.2;letter-spacing:-.45px;margin-bottom:9px}
h2 em{font-style:normal;color:var(--pp-deep)}
.kick{font-size:12px;font-weight:700;letter-spacing:-.1px;color:var(--gold);margin-bottom:5px}
.muted{color:var(--muted);font-size:13.5px;line-height:1.55;letter-spacing:-.15px}
.sect-h{font-size:20px;font-weight:800;letter-spacing:-.5px;color:var(--ink);margin:26px 2px 12px}

/* ---------- top bar ---------- */
.topbar{display:flex;align-items:center;gap:9px;padding:16px 17px 12px;position:sticky;top:0;z-index:20;
  background:linear-gradient(180deg,rgba(251,250,255,.92),rgba(251,250,255,.6));backdrop-filter:blur(12px)}
.topbar .logo{width:30px;height:30px;flex:0 0 30px}
.topbar .bt b{display:block;font-size:14px;font-weight:900;line-height:1.05}
.topbar .bt b span{color:var(--pp)}
.topbar .bt small{font-size:7.5px;font-weight:800;letter-spacing:1.6px;color:var(--gold);text-transform:uppercase}
.topbar .pill{margin-left:auto;display:flex;align-items:center;gap:5px;background:var(--gold-bg);color:var(--gold);
  font-size:11px;font-weight:900;border-radius:30px;padding:6px 12px}

/* ---------- generic card ---------- */
.card{background:var(--card);border-radius:18px;box-shadow:var(--shadow-sm);animation:pop .4s cubic-bezier(.2,.7,.3,1)}
.row-card{display:flex;gap:12px;align-items:center;background:var(--card);border-radius:18px;padding:13px 15px;
  box-shadow:var(--shadow-sm);cursor:pointer;transition:opacity .12s}
.row-card:active{opacity:.65}
.row-card .ic{width:40px;height:40px;flex:0 0 40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:19px;background:var(--pp-bg);color:var(--pp)}
.row-card .ic svg{width:21px;height:21px}
.row-card .ct{font-size:15px;font-weight:600;line-height:1.25;letter-spacing:-.25px}
.row-card .cs{font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:1px;letter-spacing:-.1px}
.row-card .chev{margin-left:auto;color:#C6C3D4;font-size:21px;font-weight:600}
/* lista agrupada estilo iOS: um card, linhas com hairline */
.group{background:var(--card);border-radius:18px;box-shadow:var(--shadow-sm);overflow:hidden}
.group .row-card{box-shadow:none;border-radius:0;border-bottom:1px solid var(--line);background:none}
.group .row-card:last-child{border-bottom:none}

/* ---------- AGE RING (Apple Health style) ---------- */
.ring-card{padding:20px 18px;margin-top:4px;background:linear-gradient(160deg,#fff,#FAF9FF);border:1px solid #F0EDFA}
.ring-wrap{display:flex;align-items:center;gap:18px}
.ring{position:relative;width:140px;height:140px;flex:0 0 140px}
.ring svg{transform:rotate(-90deg)}
.ring .rc-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .rc-num{font-size:38px;font-weight:900;letter-spacing:-1px;line-height:1}
.ring .rc-lab{font-size:8.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);text-align:center;margin-top:3px;line-height:1.25}
.ring-stats{flex:1;display:flex;flex-direction:column;gap:0}
.ring-stats .st{padding:7px 0}
.ring-stats .st + .st{border-top:1px solid var(--line)}
.ring-stats .sl{font-size:11px;color:var(--muted);font-weight:600}
.ring-stats .sv{font-size:16px;font-weight:800;margin-top:1px}
.ring-stats .sv.goal{color:var(--green)} .ring-stats .sv.real{color:var(--faint)}

/* ---------- daily insight ---------- */
.insight{display:flex;gap:12px;align-items:flex-start;padding:14px 15px;border-radius:18px;margin-top:12px;
  background:var(--card);box-shadow:var(--shadow-sm)}
.insight .ic{width:38px;height:38px;flex:0 0 38px;border-radius:10px;background:var(--pp-bg);color:var(--pp);display:flex;align-items:center;justify-content:center;font-size:18px}
.insight .ic svg{width:20px;height:20px}
.insight h3{font-size:14.5px;font-weight:700;line-height:1.25;letter-spacing:-.25px}
.insight p{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:3px}

/* ---------- streak ---------- */
.streak-card{display:flex;align-items:center;gap:13px;padding:15px 16px;margin-top:13px;border-radius:20px;
  background:linear-gradient(135deg,#2B2466,#15122E);color:#fff;box-shadow:0 16px 32px rgba(34,30,80,.34)}
.streak-card .fl{font-size:30px;filter:drop-shadow(0 4px 8px rgba(255,140,40,.5))}
.streak-card b{font-size:22px;font-weight:900}
.streak-card .sl{font-size:11px;color:#B8B3E0;font-weight:600}
.streak-card .mini{margin-left:auto;display:flex;gap:5px}
.streak-card .dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)}
.streak-card .dot.on{background:#FFB454;box-shadow:0 0 8px rgba(255,180,84,.7)}

/* ---------- gamified path ---------- */
.path{position:relative;padding:14px 0 6px}
.node{position:relative;display:flex;align-items:center;gap:14px;padding:9px 0;cursor:default}
.node .bub{width:54px;height:54px;flex:0 0 54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:900;position:relative;z-index:2;transition:transform .12s}
.node.done .bub{background:linear-gradient(145deg,#2FB673,#1FA565);color:#fff;box-shadow:0 8px 18px rgba(31,165,101,.34)}
.node.active .bub{background:linear-gradient(145deg,#6B5FE0,#4A3FBE);color:#fff;box-shadow:0 8px 20px rgba(74,63,190,.4);animation:pulse 2s infinite;cursor:pointer}
.node.active .bub:active{transform:scale(.93)}
.node.lock .bub{background:#E7E3F1;color:var(--faint)}
.node::before{content:"";position:absolute;left:26px;top:-9px;width:3px;height:18px;background:var(--line)}
.node:first-child::before{display:none}
.node.done::before,.node.active::before{background:#C9C2EC}
.node .nt{font-size:13.5px;font-weight:800}
.node .ns{font-size:11px;color:var(--muted)}
.node.lock .nt{color:var(--faint)}
.node .tag{margin-left:auto;font-size:9.5px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;padding:4px 9px;border-radius:20px}
.node.active .tag{background:var(--pp);color:#fff}
.node.done .tag{background:var(--green-bg);color:var(--green)}
.wk-div{font-size:10px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;color:var(--pp-deep);
  background:var(--pp-bg);display:inline-block;padding:4px 11px;border-radius:20px;margin:14px 0 4px}

/* ---------- buttons ---------- */
.btn{display:block;width:100%;border:none;border-radius:16px;color:#fff;font-weight:900;font-size:16px;padding:17px;
  text-align:center;cursor:pointer;background:linear-gradient(135deg,#2FB673,#1FA565);
  box-shadow:0 12px 26px rgba(31,165,101,.32);transition:transform .12s}
.btn:active{transform:scale(.99)} .btn:disabled{opacity:.45;box-shadow:none}
.btn.pp{background:linear-gradient(135deg,#6B5FE0,#4A3FBE);box-shadow:0 12px 26px rgba(74,63,190,.34)}
.btn.ghost{background:none;color:var(--muted);box-shadow:none;font-weight:700;font-size:13.5px;padding:13px}
.btn-bar{position:fixed;bottom:64px;left:50%;transform:translateX(-50%);width:100%;max-width:480px;padding:12px 17px;
  background:linear-gradient(to top,#EFEDF9 72%,transparent);z-index:30}
.backlink{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:800;color:var(--muted);
  background:none;border:none;cursor:pointer;margin:14px 0 12px;font-family:var(--font)}

/* ---------- bottom tab bar ---------- */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;height:64px;z-index:40;
  display:flex;background:rgba(255,255,255,.86);backdrop-filter:blur(16px);border-top:1px solid var(--line)}
.tabbar .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;
  color:var(--faint);font-size:9.5px;font-weight:800;letter-spacing:.2px}
.tabbar .tab svg{width:23px;height:23px}
.tabbar .tab.on{color:var(--pp)}
.tabbar .tab.on svg{stroke:var(--pp)}

/* ---------- onboarding ---------- */
.ob-dots{display:flex;gap:5px;justify-content:center;margin-bottom:18px}
.ob-dots i{width:7px;height:7px;border-radius:50%;background:#D6D0E8;transition:all .25s}
.ob-dots i.on{background:var(--pp);width:18px;border-radius:4px}
.ob-opts{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.opt{display:flex;align-items:center;gap:12px;background:var(--card);border:2px solid var(--line);border-radius:16px;
  padding:15px 16px;font-size:14.5px;font-weight:700;cursor:pointer;text-align:left;width:100%;
  transition:border-color .15s,background .15s,transform .1s}
.opt:active{transform:scale(.99)} .opt .e{font-size:21px}
.opt.sel{border-color:var(--pp);background:var(--pp-bg)}
.opt .ck{margin-left:auto;width:22px;height:22px;border:2px solid var(--line);border-radius:50%;flex:0 0 22px;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px}
.opt.multi .ck{border-radius:7px}
.opt.sel .ck{background:var(--pp);border-color:var(--pp)}
.ti{width:100%;border:2px solid var(--line);border-radius:16px;background:var(--card);padding:16px;font-size:16px;
  font-weight:600;text-align:center;outline:none;margin-top:16px}
.ti:focus{border-color:var(--pp)}
.ob-hero{width:100%;height:150px;border-radius:20px;object-fit:cover;object-position:center 25%;margin-bottom:4px;box-shadow:var(--shadow)}

/* ---------- cards de programa (capa + borda fade dourado) ---------- */
.pcov{border-radius:22px;padding:2px;margin-bottom:14px;cursor:pointer;transition:transform .12s;
  background:linear-gradient(160deg,#F3DFA4 0%,#D9B356 26%,rgba(192,154,55,.28) 55%,rgba(192,154,55,.05) 82%,rgba(192,154,55,0) 100%)}
.pcov:active{transform:scale(.985)}
.pcv-in{background:var(--card);border-radius:20px;overflow:hidden}
.pcv-img{position:relative;width:100%;aspect-ratio:16/9;background-size:cover;background-position:center}
.pcov.lk .pcv-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,28,40,.02),rgba(27,28,40,.38))}
.pcv-badge{position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;padding:5px 11px;border-radius:20px;backdrop-filter:blur(8px);letter-spacing:-.1px}
.pcv-badge svg{width:12px;height:12px}
.pcv-badge.lock{background:rgba(255,255,255,.92);color:var(--ink)}
.pcv-badge.open{background:rgba(231,247,239,.95);color:var(--green)}
.pcv-badge.gold{background:linear-gradient(135deg,#F6E7B4,#DDB959);color:#6B5313;box-shadow:0 2px 8px rgba(192,154,55,.35)}
.pcv-b{padding:12px 14px 13px}
.pcv-t{font-size:16.5px;font-weight:700;letter-spacing:-.35px;line-height:1.2}
.pcv-s{font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:4px;letter-spacing:-.1px}
.pcv-cta{display:flex;align-items:center;margin-top:10px;font-size:14px;font-weight:600;color:var(--pp)}
.pcv-cta .price{margin-left:auto;font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.3px}
.pcv-cta .price s{color:var(--faint);font-weight:600;font-size:12px;margin-right:6px}

/* botão de voltar destacado (páginas de programa) */
.backfab{display:inline-flex;align-items:center;gap:6px;margin:12px 0 4px;border:none;cursor:pointer;
  background:var(--pp);color:#fff;font-family:var(--font);font-size:14px;font-weight:700;letter-spacing:-.2px;
  padding:10px 18px;border-radius:30px;box-shadow:0 8px 18px rgba(74,63,190,.32);transition:transform .12s}
.backfab:active{transform:scale(.96)}

/* imagens de conteúdo (dentro dos cards) */
.cimg{width:100%;border-radius:13px;margin-top:11px;display:block}
.cimg-cap{font-size:11.5px;color:var(--muted);line-height:1.45;margin-top:6px;letter-spacing:-.1px}

/* ---------- ícones utilitários ---------- */
.gate-ic{width:64px;height:64px;border-radius:18px;background:var(--pp-bg);color:var(--pp);display:flex;align-items:center;justify-content:center;margin:0 auto}
.gate-ic svg{width:30px;height:30px}
.cons-ic{color:var(--pp)}
.cons-ic svg{width:19px;height:19px;display:block}

/* ---------- yuna chip ---------- */
.yuna{display:flex;gap:11px;align-items:center;background:var(--card);border-radius:18px;border-left:4px solid var(--gold);
  padding:13px 14px;margin:13px 0;box-shadow:var(--shadow-sm)}
.yuna img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 44px}
.yuna .yt{font-size:12.5px;line-height:1.5}
.yuna .yn{font-size:10px;font-weight:900;color:var(--gold);text-transform:uppercase;letter-spacing:.6px;margin-bottom:2px}

/* ---------- ritual / recipe ---------- */
.r-hero{width:100%;height:130px;border-radius:18px;object-fit:cover;object-position:center 60%;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.phase-tag{display:inline-block;background:var(--pp-bg);color:var(--pp-deep);font-size:10px;font-weight:900;
  letter-spacing:.6px;text-transform:uppercase;border-radius:8px;padding:5px 11px;margin-bottom:8px}
.recipe{background:var(--card);border-radius:20px;padding:16px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.ing{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.ing:last-child{border-bottom:none}
.ing .amt{flex:0 0 80px;font-size:12.5px;font-weight:900;color:var(--pp-deep)}
.ing .ina b{font-size:13px} .ing .ina span{display:block;font-size:11px;color:var(--muted);line-height:1.4;margin-top:2px}
.booster{background:var(--green-bg);border-radius:13px;padding:12px 13px;margin-top:11px;font-size:12.5px;line-height:1.55}
.booster b{color:var(--green)}
.steps{counter-reset:s;list-style:none;margin-top:8px}
.steps li{counter-increment:s;position:relative;padding:9px 0 9px 35px;font-size:13px;line-height:1.55;border-bottom:1px solid var(--line)}
.steps li:last-child{border-bottom:none}
.steps li::before{content:counter(s);position:absolute;left:0;top:7px;width:25px;height:25px;border-radius:50%;
  background:var(--pp);color:#fff;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center}
.note{font-size:11px;color:var(--muted);line-height:1.55;margin-top:11px;font-style:italic}
.taichi{background:var(--card);border-radius:18px;padding:14px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.taichi .th{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.taichi .th b{font-size:14px}
.taichi .th .tm{margin-left:auto;font-size:10.5px;font-weight:900;color:var(--gold);background:var(--gold-bg);border-radius:7px;padding:3px 9px}
.video{position:relative;width:100%;aspect-ratio:16/9;border-radius:13px;overflow:hidden;margin-bottom:10px;background:#15122E}
.video iframe{width:100%;height:100%;border:0;display:block}
.video .vph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#A99FE6;font-size:11px;font-weight:700;text-align:center;padding:14px;gap:6px}
.video .vph .pl{width:46px;height:46px;border-radius:50%;background:var(--pp);display:flex;align-items:center;justify-content:center}
.taichi ul{list-style:none;margin-top:4px}
.taichi ul li{font-size:12.5px;line-height:1.5;padding:5px 0 5px 18px;position:relative;color:var(--muted)}
.taichi ul li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* ---------- generic content (rituals/bonuses) ---------- */
.content-hero{width:100%;height:140px;border-radius:20px;object-fit:cover;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.cblock{background:var(--card);border-radius:16px;padding:15px 16px;margin-bottom:11px;box-shadow:var(--shadow-sm)}
.cblock h3{font-size:14px;font-weight:800;margin-bottom:5px}
.cblock p{font-size:12.5px;line-height:1.6;color:var(--muted)}
.cblock .num{display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--gold);color:#fff;font-size:12px;font-weight:900;align-items:center;justify-content:center;margin-right:8px;vertical-align:-2px}
.disclaimer{font-size:10px;color:var(--faint);line-height:1.55;text-align:center;margin-top:18px;padding:0 6px}

/* ---------- bottom sheet (check-in) ---------- */
.sheet-bg{position:fixed;inset:0;z-index:90;background:rgba(20,16,46,.4);backdrop-filter:blur(3px);animation:fade .25s}
.sheet{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;z-index:91;
  background:var(--card);border-radius:28px 28px 0 0;padding:8px 18px calc(18px + env(safe-area-inset-bottom));
  box-shadow:0 -16px 40px rgba(20,16,46,.25);animation:sheetUp .35s cubic-bezier(.2,.8,.3,1);max-height:92vh;overflow-y:auto}
@keyframes sheetUp{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
.sheet .grab{width:38px;height:4px;border-radius:3px;background:#DCD7EC;margin:6px auto 14px}
.seg{display:flex;background:var(--pp-soft);border-radius:16px;padding:5px;gap:5px;margin-top:9px}
.seg button{flex:1;border:none;background:none;border-radius:12px;padding:11px 4px;font-weight:800;
  font-size:12.5px;color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;transition:all .15s}
.seg button .se{font-size:19px}
.seg button.on{background:var(--card);color:var(--pp);box-shadow:var(--shadow-sm)}
.ci-q{font-size:14px;font-weight:800;margin-top:18px}

/* ===== LUVLY REDESIGN ===== */
:root{ --font-display:'Fraunces','Georgia',serif; }
.app{background:linear-gradient(180deg,#FDF9F4 0%,#F6F3FC 42%,#EFEDF9 100%)}
.topbar{background:linear-gradient(180deg,rgba(253,249,244,.94),rgba(253,249,244,.62))}
h1,h2,.sect-h{font-family:var(--font-display)}
h1{font-weight:700;letter-spacing:-.3px}
h2{font-weight:700;letter-spacing:-.2px}
.sect-h{font-weight:700;letter-spacing:-.2px}
.pcv-t{font-family:var(--font-display);font-weight:600;font-size:17.5px;letter-spacing:-.2px}
.card,.row-card,.group,.insight,.recipe,.taichi,.cblock,.gate-card{border-radius:22px}
.card,.row-card,.group,.insight{box-shadow:0 10px 28px rgba(60,50,130,.07)}
.pcov{border-radius:24px}
.pcv-in{border-radius:22px}

/* tabbar 5 itens · FAB central elevado */
.tabbar{height:66px;background:rgba(255,255,255,.94);backdrop-filter:blur(18px)}
.tabbar .tab{gap:4px;font-size:9px}
.tabbar .tab svg{width:22px;height:22px}
.tabbar .tab.fab{flex:0 0 74px}
.tabbar .fab .fabc{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#6B5FE0,#4A3FBE);color:#fff;transform:translateY(-14px);
  box-shadow:0 14px 30px rgba(74,63,190,.45),0 0 0 5px rgba(253,249,244,.92);transition:transform .12s}
.tabbar .fab .fabc svg{width:26px;height:26px;stroke:#fff}
.tabbar .fab.on .fabc{background:linear-gradient(145deg,#5B4FD6,#30297E)}
.tabbar .fab:active .fabc{transform:translateY(-14px) scale(.93)}
.btn-bar{bottom:66px}

/* strip da semana (Progresso) */
.lv-strip{display:flex;gap:7px;margin:4px 0 6px}
.lv-day{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;background:var(--card);border-radius:16px;padding:9px 0 8px;box-shadow:var(--shadow-sm)}
.lv-day .dl{font-size:9px;font-weight:800;letter-spacing:.5px;color:var(--faint)}
.lv-day .dn{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--muted);background:var(--pp-soft)}
.lv-day .dn svg{width:14px;height:14px}
.lv-day.done .dn{background:var(--green-bg);color:var(--green)}
.lv-day.today{box-shadow:0 0 0 2px var(--pp),var(--shadow-sm)}
.lv-day.today .dl{color:var(--pp)}

/* roadmap (Home) */
.lv-road{display:flex;flex-direction:column;gap:9px}
.lv-rw{display:flex;gap:12px;align-items:flex-start;background:var(--card);border-radius:20px;padding:14px 15px;box-shadow:var(--shadow-sm)}
.lv-rw .ric{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--pp-soft);color:var(--faint)}
.lv-rw .ric svg{width:19px;height:19px}
.lv-rw .rt{font-size:14.5px;font-weight:700;letter-spacing:-.25px}
.lv-rw .rs{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.lv-rw .rn{font-size:12px;color:var(--pp-deep);background:var(--pp-bg);border-radius:12px;padding:8px 11px;margin-top:8px;line-height:1.5}
.lv-rw.done .ric{background:var(--green-bg);color:var(--green)}
.lv-rw.cur{box-shadow:0 0 0 2px var(--pp),var(--shadow)}
.lv-rw.cur .ric{background:linear-gradient(145deg,#6B5FE0,#4A3FBE);color:#fff}
.lv-rw.lock{opacity:.62}

/* grade de zonas do scan (0-3) */
.lv-zgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.lv-zc{border-radius:14px;padding:11px 6px;text-align:center}
.lv-zc b{display:block;font-size:12px;letter-spacing:-.2px}
.lv-zc span{font-size:10px;font-weight:700}
.lv-zc.z0{background:var(--green-bg);color:var(--green)}
.lv-zc.z1{background:#F7F0DD;color:#8A6D18}
.lv-zc.z2{background:#FDEBDC;color:#B4611E}
.lv-zc.z3{background:#FBDFE7;color:#C2325F}
.lv-det{list-style:none;margin-top:4px}
.lv-det li{font-size:12.5px;line-height:1.55;color:var(--muted);padding:5px 0 5px 18px;position:relative}
.lv-det li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%;background:var(--pp)}

/* pontos por zona (Progresso) */
.lv-zpts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lv-zp{position:relative;background:var(--card);border-radius:16px;padding:13px 8px 11px;text-align:center;box-shadow:var(--shadow-sm)}
.lv-zp .zl{display:block;font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:-.1px}
.lv-zp b{display:block;font-family:var(--font-display);font-size:21px;font-weight:700;margin-top:3px}
.lv-zp .zs{font-size:9px;font-weight:800;color:var(--faint);text-transform:uppercase;letter-spacing:.5px}
.lv-zp.pri{box-shadow:0 0 0 2px var(--gold),var(--shadow-sm)}
.lv-zp .zp-pri{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#F3DFA4,#D9B356);color:#6B5313;font-size:8px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:2px 8px;border-radius:20px;white-space:nowrap}

/* stats (Progresso) */
.lv-stats{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.lv-stat{padding:15px;display:flex;flex-direction:column;gap:2px}
.lv-stat .ic-s{display:inline-flex;width:20px;height:20px;margin-bottom:5px}
.lv-stat b{font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:-.5px}
.lv-stat span{font-size:11.5px;color:var(--muted);font-weight:600}

/* fotos: foto do dia, chips da timeline, comparação */
.lv-photo{width:100%;border-radius:16px;display:block}
.lv-days{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px}
.lv-dchip{flex:0 0 auto;border:1.5px solid var(--line);background:var(--card);border-radius:20px;padding:7px 13px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;font-family:var(--font)}
.lv-dchip.on{border-color:var(--pp);background:var(--pp-bg);color:var(--pp-ink)}
.lv-compare{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.lv-compare .cph{position:relative;border-radius:16px;overflow:hidden;background:var(--pp-soft);min-height:120px}
.lv-compare .cph img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/4}
.lv-compare .cph span{position:absolute;left:8px;bottom:8px;background:rgba(20,16,46,.55);color:#fff;font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:4px 9px;border-radius:12px;backdrop-filter:blur(4px)}

/* card recompensa (meta da pele de vidro) */
.lv-reward{border:1px solid #F0E7CF;background:linear-gradient(160deg,#FFFDF6,#FBF4E2)}
.lv-reward .ic-r{width:44px;height:44px;flex:0 0 44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--gold-bg);color:var(--gold)}
.lv-reward .ic-r svg{width:22px;height:22px}
.lv-reward .rw-t{font-family:var(--font-display);font-size:16.5px;font-weight:700;letter-spacing:-.2px}
.lv-reward.on{box-shadow:0 14px 30px rgba(192,154,55,.22)}

/* card assinatura (teste A/B) */
.lv-sub{position:relative;border:1.5px solid #D9B356;overflow:visible;background:linear-gradient(170deg,#FFFEF9,#FDF7E8)}
.lv-sub .sublbl{position:absolute;top:-10px;left:16px;background:linear-gradient(135deg,#F3DFA4,#D9B356);color:#6B5313;font-size:8.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:3px 10px;border-radius:20px;box-shadow:0 2px 8px rgba(192,154,55,.3)}
.lv-sub .lv-det li::before{background:var(--gold)}

/* ===== LUVLY POLISH (feedback) ===== */
/* sombras mais suaves e difusas + mais respiro entre seções */
.card,.row-card,.group,.insight{box-shadow:0 14px 36px rgba(60,50,130,.055)}
.sect-h{margin:30px 2px 13px}
/* thumbs de imagem nos cards da biblioteca */
.lv-lib{display:flex;flex-direction:column;gap:10px}
.row-card .th{width:60px;height:60px;flex:0 0 60px;border-radius:14px;object-fit:cover;box-shadow:0 4px 12px rgba(60,50,130,.14)}
/* gradientes pastéis (Luvly collections) */
.lv-grad{background:linear-gradient(165deg,#FFFFFF 0%,#F6F2FD 62%,#FBF4E6 100%)}
.lv-soon{background:linear-gradient(165deg,#FFFEF9 0%,#FBF4E2 100%);border:1px solid #F0E7CF}
.insight{background:linear-gradient(160deg,#FFFFFF,#F7F4FE)}
.lv-rw.cur{background:linear-gradient(160deg,#FFFFFF,#F5F2FE)}
.lv-stat{background:linear-gradient(165deg,#FFFFFF,#F8F5FE)}
/* trilha de 21 dias mais elegante */
.node .bub{width:58px;height:58px;flex:0 0 58px;font-size:17px}
.node.lock .bub{background:#FFFFFF;color:#C9C4DC;box-shadow:0 6px 16px rgba(60,50,130,.09)}
.node.done .bub{box-shadow:0 10px 22px rgba(31,165,101,.32)}
.node.active .bub{box-shadow:0 12px 26px rgba(74,63,190,.42)}
.node::before{left:27px;width:3.5px;border-radius:3px}
.node.done::before,.node.active::before{background:linear-gradient(180deg,#C9C2EC,#8E86E8)}
.node .nt{font-size:14px}
.wk-div{background:linear-gradient(135deg,#EFEDFB,#F9EFDA);color:var(--pp-deep);border-radius:30px;padding:6px 15px;box-shadow:0 3px 10px rgba(60,50,130,.08);letter-spacing:1px}

/* ============ BÔNUS SURPRESA (quiz do presente) ============ */
.bq-home{display:flex;gap:14px;align-items:center;background:linear-gradient(135deg,#FFFDF6,#F9EFDA);
  border:2px solid var(--gold);border-radius:22px;padding:22px 18px;margin-bottom:14px;cursor:pointer;
  box-shadow:0 10px 26px rgba(192,154,55,.2);animation:pop .3s ease,bqGlow 2.6s ease-in-out 1s infinite}
@keyframes bqGlow{0%,100%{box-shadow:0 8px 22px rgba(192,154,55,.16);transform:scale(1)}
  50%{box-shadow:0 12px 30px rgba(192,154,55,.4);transform:scale(1.013)}}
.bq-home .bq-gift-ic{width:64px;height:64px;flex:0 0 64px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  font-size:34px;background:linear-gradient(160deg,#E7C868,var(--gold));animation:pulse 2.6s infinite}
.bq-home .bq-ht{font-weight:800;font-size:18px;letter-spacing:-.4px}
.bq-home .bq-hs{font-size:13.5px;color:var(--muted);margin-top:3px}
.bq-prog{height:6px;border-radius:4px;background:#EDE9F5;margin:10px 0 18px;overflow:hidden}
.bq-prog i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#E7C868,var(--gold));transition:width .35s ease}
.bq-boxwrap{position:relative;width:150px;height:150px;margin:44px auto 20px}
.bq-box{position:absolute;left:15px;bottom:6px;width:120px;height:86px;border-radius:12px;
  background:linear-gradient(160deg,#E7C868,#B8922E);box-shadow:0 18px 40px rgba(184,146,46,.4)}
.bq-box::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:16px;height:100%;background:rgba(255,255,255,.55)}
.bq-lid{position:absolute;left:7px;top:26px;width:136px;height:30px;border-radius:9px;
  background:linear-gradient(160deg,#EFD37E,#C09A37);box-shadow:0 6px 14px rgba(184,146,46,.35);z-index:2}
.bq-lid::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:18px;height:100%;background:rgba(255,255,255,.55)}
.bq-lid::after{content:"";position:absolute;left:50%;top:-16px;transform:translateX(-50%);width:34px;height:18px;
  border:6px solid #EFD37E;border-bottom:none;border-radius:16px 16px 0 0}
.bq-rays{position:absolute;inset:-16px;border-radius:50%;z-index:0;opacity:0;
  background:radial-gradient(circle,rgba(231,200,104,.85) 0%,rgba(231,200,104,0) 68%)}
.bq-shake .bq-box,.bq-shake .bq-lid{animation:bqShake .55s ease-in-out infinite}
.bq-open .bq-lid{animation:bqLidPop .6s ease forwards}
.bq-open .bq-rays{animation:bqRays .7s ease forwards}
.bq-prep{text-align:center;font-weight:700;color:var(--muted);margin-top:26px}
.bq-prep .dots i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin:0 2px;animation:pulse 1.2s infinite}
.bq-prep .dots i:nth-child(2){animation-delay:.2s}.bq-prep .dots i:nth-child(3){animation-delay:.4s}
.bq-rise{animation:bqRise .5s ease}
.bq-res1{border:2px solid var(--gold);border-radius:20px;overflow:hidden;background:var(--card);
  box-shadow:0 14px 34px rgba(184,146,46,.2);margin-bottom:16px}
.bq-res1 .img{height:150px;background-size:cover;background-position:center;position:relative}
.bq-badge{position:absolute;left:12px;top:12px;background:linear-gradient(160deg,#E7C868,var(--gold));color:#fff;
  font-size:11px;font-weight:900;letter-spacing:.8px;padding:6px 12px;border-radius:20px;text-transform:uppercase}
.bq-res1 .bd{padding:15px 16px 17px}
.bq-res1 h3{font-size:19px;letter-spacing:-.4px;margin-bottom:6px}
.bq-why{background:var(--gold-bg);border-radius:12px;padding:11px 13px;font-size:13.5px;line-height:1.5;margin:10px 0}
.bq-stack{margin:12px 0 4px;font-size:14px}
.bq-stack s{color:#b25454;margin-right:8px}
.bq-stack b{font-size:22px;letter-spacing:-.5px}
.bq-stack .tagd{display:block;color:var(--gold);font-weight:800;font-size:12px;letter-spacing:.4px;margin-top:2px}
.btn.bq-gold{background:linear-gradient(135deg,#E7C868,#B8922E);box-shadow:0 12px 26px rgba(184,146,46,.38)}
@keyframes bqShake{0%,100%{transform:rotate(0)}20%{transform:rotate(-5deg) translateX(-3px)}40%{transform:rotate(5deg) translateX(3px)}60%{transform:rotate(-3deg)}80%{transform:rotate(3deg)}}
@keyframes bqLidPop{to{transform:translateY(-58px) rotate(-16deg);opacity:0}}
@keyframes bqRays{from{transform:scale(.4);opacity:.95}to{transform:scale(1.7);opacity:0}}
@keyframes bqRise{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){.bq-shake .bq-box,.bq-shake .bq-lid,.bq-open .bq-lid,.bq-open .bq-rays,.bq-rise,.bq-home,.bq-home .bq-gift-ic{animation:none!important}}


/* ============ BALAO DE CHAT FIXO (especialista) ============ */
.chat-fab{position:fixed;left:14px;bottom:88px;width:56px;height:56px;border-radius:50%;background:var(--pp);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 12px 28px rgba(107,92,231,.45);cursor:pointer;z-index:60;animation:pop .3s ease}
.chat-fab svg{width:27px;height:27px}
.chat-fab:active{transform:scale(.94)}

/* ============ MODAL CENTRAL (cadastro de e-mail / paywall) ============ */
.kbm-ov{position:fixed;inset:0;background:rgba(22,17,44,.5);z-index:90;display:flex;align-items:center;justify-content:center;padding:22px;animation:fadein .2s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.kbm-modal{background:#fff;border-radius:22px;padding:24px 20px;max-width:350px;width:100%;text-align:center;box-shadow:0 26px 70px rgba(0,0,0,.3);animation:pop .25s ease}
.kbm-modal h2{margin:8px 0 6px;font-size:19px}
.kbm-modal p{font-size:13.5px;color:var(--muted);margin:0 0 6px}
.kbm-modal .mic{width:58px;height:58px;border-radius:50%;margin:0 auto 4px;display:flex;align-items:center;justify-content:center;background:var(--pp);color:#fff}
.kbm-modal .mic svg{width:28px;height:28px}
.kbm-modal .ti{margin-top:10px}
.kbm-modal .mlink{display:block;margin-top:12px;font-size:13px;color:var(--muted);cursor:pointer;text-decoration:underline}

/* ============ COMPARATIVO ASSINATURA x CREDITOS ============ */
.cmp-t{width:100%;border-collapse:collapse;font-size:13px;margin-top:10px;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 6px 18px rgba(60,50,130,.07)}
.cmp-t th{background:#F4F1FB;padding:11px 8px;font-size:12.5px}
.cmp-t th:nth-child(2){color:var(--pp)}
.cmp-t td{padding:11px 8px;border-top:1px solid #F0EDF8;text-align:center}
.cmp-t td:first-child{text-align:left;color:var(--muted);font-size:12.5px}
.cmp-t .ok{color:var(--pp);font-weight:800}

/* ===== bolinha de "digitando" do chat (16/07) ===== */
.typing-dots{ display:inline-flex; align-items:center; gap:5px; padding:3px 0 1px }
.typing-dots i{ width:8px; height:8px; border-radius:50%; background:var(--pp,#5B4FD6); opacity:.35;
  animation:kbmTyping 1.25s infinite ease-in-out }
.typing-dots i:nth-child(2){ animation-delay:.18s }
.typing-dots i:nth-child(3){ animation-delay:.36s }
@keyframes kbmTyping{ 0%,60%,100%{ transform:translateY(0); opacity:.35 } 30%{ transform:translateY(-4px); opacity:1 } }
@media (prefers-reduced-motion:reduce){ .typing-dots i{ animation:none; opacity:.6 } }

/* ===== notificação in-app (45s sem começar o quiz do presente) ===== */
.kbm-nudge{ position:fixed; left:12px; right:12px; bottom:78px; z-index:60; display:flex; gap:12px; align-items:center;
  background:#fff; border:1px solid var(--line,#ECE9F3); border-left:4px solid var(--pp,#5B4FD6); border-radius:14px;
  padding:13px 14px; box-shadow:0 12px 30px rgba(40,34,96,.18); cursor:pointer;
  transform:translateY(120%); transition:transform .38s cubic-bezier(.22,1,.36,1) }
.kbm-nudge.on{ transform:translateY(0) }
.kbm-nudge .ic{ font-size:22px; flex-shrink:0 }
.kbm-nudge .tt{ font-weight:800; font-size:14px; line-height:1.3 }
.kbm-nudge .ss{ font-size:12.5px; color:var(--muted,#6A7084); margin-top:2px; line-height:1.35 }
.kbm-nudge .cl{ margin-left:auto; flex-shrink:0; font-size:20px; color:var(--muted,#6A7084); padding:0 4px; line-height:1 }
@media (min-width:620px){ .kbm-nudge{ left:auto; right:18px; width:380px } }