/* Layout: coluna única de app, uma tarefa por vez. Abas fixas embaixo, alvos de toque grandes (público 35+). */
:root{
  --bg:#f6ece8; --surface:#fbf3ef; --surface-2:#efdcd7; --ink:#3a2a2e; --ink-2:#6e5f65; --line:#ead9d3; --deep:#7d2a42; --deep-2:#a63e5a;
  --brand:#cf697a; --accent:#a63e5a; --accent-ink:#ffffff; --accent-soft:#f1d9d9;
  --sun:#b7791f; --night:#4a4c92; --warn:#a8481f; --warn-soft:#f8e8de;
  --t-std-bg:#dfeaf7; --t-std-ink:#1f4b7a; --t-prem-bg:#fbe0e6; --t-prem-ink:#9b2745; --t-elite-bg:#f5e3a8; --t-elite-ink:#5c4300; --t-old-bg:#e9e3e5; --t-old-ink:#6b5a60; --t-gift-bg:#d6efe6; --t-gift-ink:#10573e;
  --display:"Playfair Display",Georgia,"Times New Roman",serif;
  --body:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1b1415; --surface:#261c1d; --surface-2:#33272a; --ink:#f4ebe4; --ink-2:#b8a7a0; --line:#352728; --deep:#7d2a42; --deep-2:#a63e5a;
    --brand:#de7f90; --accent:#e5798c; --accent-ink:#2c0f17; --accent-soft:#3c2229;
    --sun:#e3b45a; --night:#a4a7f0; --warn:#f0a07a; --warn-soft:#3b2a22;
    --t-std-bg:#22364d; --t-std-ink:#a9cdf2; --t-prem-bg:#4b2530; --t-prem-ink:#f7b4c3; --t-elite-bg:#4d3d10; --t-elite-ink:#f3d27a; --t-old-bg:#34292d; --t-old-ink:#b9a6ad; --t-gift-bg:#1c3a31; --t-gift-ink:#98dcc2;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1b1415; --surface:#261c1d; --surface-2:#33272a; --ink:#f4ebe4; --ink-2:#b8a7a0; --line:#352728; --deep:#7d2a42; --deep-2:#a63e5a;
  --brand:#de7f90; --accent:#e5798c; --accent-ink:#2c0f17; --accent-soft:#3c2229;
  --sun:#e3b45a; --night:#a4a7f0; --warn:#f0a07a; --warn-soft:#3b2a22;
    --t-std-bg:#22364d; --t-std-ink:#a9cdf2; --t-prem-bg:#4b2530; --t-prem-ink:#f7b4c3; --t-elite-bg:#4d3d10; --t-elite-ink:#f3d27a; --t-old-bg:#34292d; --t-old-ink:#b9a6ad; --t-gift-bg:#1c3a31; --t-gift-ink:#98dcc2;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body)}
.app{max-width:560px;margin:0 auto;padding-inline:16px;padding-block:22px 112px;font-size:1rem;line-height:1.5}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}

.eyebrow{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.top{display:grid;gap:4px;margin-bottom:22px}
h1{font-family:var(--display);font-weight:500;font-size:1.625rem;line-height:1.08;text-wrap:balance}
.date{color:var(--ink-2)}
h2{font-family:var(--display);font-weight:500;font-size:1.5rem;line-height:1.2;text-wrap:balance}
h3{font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);font-weight:700}
.muted{color:var(--ink-2);font-size:.9375rem}
.stack{display:grid;gap:16px}
.masonry{display:grid;gap:16px}
.sec{display:grid;gap:12px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px}
.banner{background:var(--warn-soft);color:var(--warn);border-radius:10px;padding:12px 14px;font-size:.9375rem;margin-bottom:16px;font-weight:500}
.aulas{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.aulas button{display:flex;gap:14px;align-items:center;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px;color:var(--ink);font:inherit;cursor:pointer}
.aulas img{flex:none;width:120px;aspect-ratio:16/9;object-fit:cover;border-radius:10px}
.aulas b{display:block;font-weight:600}
.aulas-grupo{margin-top:10px}
.aulas .muted{display:block;font-size:.875rem;margin-top:2px}
/* botão das aulas no cartão "Seu plano": centralizado e na cor da marca (antes ficava apagado, igual aos botões comuns) */
/* questionário do tipo de pele: uma parte por tela */
.qprog{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}.qprog span{display:block;height:100%;background:var(--accent);border-radius:3px}
.qstick{position:sticky;top:0;z-index:4;background:var(--bg);padding:8px 0}
.qcard{display:grid;gap:12px}
.qnum{margin:0;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.qt{display:block;font-size:1.0625rem;font-weight:700;color:var(--ink);line-height:1.4}
.qz{border:0;padding:0;margin:0;display:grid;gap:8px}.qz legend.qt{margin-bottom:6px;padding:0}
.qopt{position:relative;display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;line-height:1.4;font-size:.9375rem;color:var(--ink-2)}
.qopt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.qopt .ql{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--ink-2);display:grid;place-items:center;font-size:.8125rem;font-weight:700;color:var(--ink-2);margin-top:-2px}
.qopt.on{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.qopt.on .ql{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.qopt:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.qz+.qz,.qz+.field,.field+.qz{margin-top:14px}
.qfotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}.qf{display:grid;gap:4px}.qf img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:var(--surface-2)}
.qnav{justify-content:space-between;position:sticky;bottom:calc(74px + env(safe-area-inset-bottom,0px));z-index:4;background:var(--bg);padding:10px 0}.qcode{font-size:2rem;font-weight:700;letter-spacing:.08em;color:var(--accent)}
.qans summary{cursor:pointer}
.quest-sent{display:flex;justify-content:space-between;align-items:center;gap:12px}
.quest-sent p{margin:0}
.btn.btn-soft .i{flex:none}
.btn.btn-wide{width:100%;max-width:none;justify-content:center;padding:12px 16px;font-size:15px}
.hoje-aulas{margin-bottom:16px}
.btn.btn-soft.desafio-btn{width:100%;max-width:none;justify-content:center;padding:12px 16px;font-size:15px}
.btn.desafio-btn .i{width:20px;height:20px;position:relative;top:1px}
.btn.btn-soft{display:inline-flex;align-items:center;justify-content:center;flex:none;white-space:normal;text-align:center;background:var(--accent-soft);border:1.5px solid var(--accent);color:var(--accent);font-weight:700}
.aula-player{background:#000;border-radius:14px;overflow:hidden;min-height:200px;display:flex;align-items:center;justify-content:center}
.aula-player video{display:block;width:100%;max-height:72vh;background:#000}
.flash{background:var(--accent-soft);color:var(--accent);border-radius:10px;padding:12px 14px;font-size:.9375rem;margin-bottom:16px;font-weight:600}

.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--surface-2);padding:4px;border-radius:999px}
.seg button{min-height:48px;border:0;border-radius:999px;background:transparent;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.seg svg{width:20px;height:20px}
.seg .am svg{color:var(--sun)} .seg .pm svg{color:var(--night)}
svg.i{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.prog{display:grid;grid-template-columns:88px 1fr;gap:16px;align-items:center}
.ring{width:88px;height:88px;display:block}
.ring .bg{fill:none;stroke:var(--surface-2);stroke-width:8}
.ring .fg{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;transform:rotate(-90deg);transform-origin:44px 44px}
.ring text{font-family:var(--display);font-size:24px;font-weight:600;fill:var(--ink);text-anchor:middle}
.prog b{display:block;font-size:1.0625rem}
.streak{display:inline-flex;margin-top:6px;padding:4px 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-weight:600;font-size:.875rem}

.steps{padding:0 16px}
.steps li+li{border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;width:100%;text-align:left;background:none;border:0;padding:16px 0;min-height:68px}
.box{width:32px;height:32px;border-radius:50%;border:2px solid var(--ink-2);display:grid;place-items:center;color:transparent;flex:none}
.box svg{width:18px;height:18px;stroke-width:2.6}
.step[aria-pressed="true"] .box{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.step[aria-pressed="true"] .nm{color:var(--ink-2);text-decoration:line-through;text-decoration-thickness:1px}
.nm{font-weight:600;font-size:1.0625rem}
.pr{color:var(--ink);font-size:.9375rem}
.tp{color:var(--ink-2);font-size:.875rem;margin-top:2px}
.empty{padding:20px 0;color:var(--ink-2)}
.done-msg{background:var(--accent-soft);color:var(--accent);border-radius:12px;padding:14px 16px;font-weight:600}

.btn{min-height:48px;padding:0 20px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;font-size:.9375rem}
a.btn{display:inline-flex;align-items:center;text-decoration:none}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.danger{color:var(--warn);border-color:var(--warn)}
.btn.sm{min-height:40px;padding:0 14px;font-size:.875rem}
.row{display:flex;flex-wrap:wrap;gap:8px}

.field{display:grid;gap:4px;min-width:0}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:.9375rem;color:var(--ink-2);cursor:pointer}
.agree input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--accent)}
.agree a,.legal a{color:var(--accent);font-weight:600}
.legal{font-size:.875rem;color:var(--ink-2)}
/* rodapé dos links (Termos · Privacidade · Desistir): uma linha, centralizado; a letra diminui um pouco em telas estreitas */
p.legal.foot{text-align:center;white-space:nowrap;font-size:clamp(11px,3.05vw,.875rem);margin:4px 0 0}
p.legal.foot a{white-space:nowrap}
@media (max-width:359px){p.legal.foot{white-space:normal}}
.cap{font-size:.8125rem;color:var(--ink-2);font-weight:600}
input[type=text],input[type=url],input[type=email],input[type=password],input[type=time],input[type=date],textarea{width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
textarea{min-height:96px;resize:vertical;line-height:1.45}
.chip{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:500;font-size:.9375rem}
.chip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:700}
.chip.d{min-width:48px;padding:0 10px;font-size:.875rem}

.edit{display:grid;gap:12px}
.edit .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* iPhone: campos de hora/data têm largura mínima própria e vazam do quadro */
input[type=time],input[type=date]{-webkit-appearance:none;appearance:none;min-width:0;display:block}
.rem-times{display:grid;grid-template-columns:repeat(2,minmax(0,140px));justify-content:center;gap:16px}
.rem-times .field{justify-items:center;text-align:center}
.rem-times input{max-width:140px;text-align:center}
.rem-times input::-webkit-date-and-time-value{text-align:center}
.tools{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center}
.tools .mv{display:flex;gap:8px}
.ico{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center}
.ico svg{width:18px;height:18px}
.ico:disabled{opacity:.35;cursor:default}

.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.scale button{min-height:68px;padding:6px 2px;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:grid;gap:0;place-items:center;align-content:center}
.scale b{font-family:var(--display);font-size:1.375rem;line-height:1.1}
.scale span{font-size:.75rem;color:var(--ink-2);font-weight:500}
.scale button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.scale button[aria-pressed="true"] span{color:var(--accent-ink)}
.hist li{display:grid;gap:2px;padding:12px 0}
.hist li+li{border-top:1px solid var(--line)}
.hist .hd{display:flex;justify-content:space-between;gap:12px;font-weight:600}
.hist .hd span:last-child{color:var(--accent)}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 10px;display:grid;gap:2px;min-width:0}
.stat b{font-family:var(--display);font-size:1.75rem;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{font-size:.8125rem;color:var(--ink-2)}
.wk,.heat{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.wk span{font-size:.75rem;text-align:center;color:var(--ink-2);font-weight:600}
.cell{border:1px solid var(--line);border-radius:8px;background:var(--surface);min-height:54px;padding:5px 6px 7px;display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.cell .n{font-size:.75rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.cell.today{border:2px solid var(--accent)}
.cell.fut{opacity:.4}
.bars{display:grid;gap:3px}
.bars i{display:block;height:6px;border-radius:3px;background:var(--surface-2)}
.bars i.am.full{background:var(--sun)} .bars i.am.part{background:var(--sun);opacity:.45}
.bars i.pm.full{background:var(--night)} .bars i.pm.part{background:var(--night);opacity:.45}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.8125rem;color:var(--ink-2)}
.legend i{display:inline-block;width:14px;height:6px;border-radius:3px;margin-right:6px;vertical-align:middle}
.chart{width:100%;height:auto;display:block}
.chart text{fill:var(--ink-2);font-size:11px;font-family:var(--body)}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .ln{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart .pt{fill:var(--surface);stroke:var(--accent);stroke-width:2.5}
.chart .pt.last{fill:var(--accent)}
.visit b{font-family:var(--display);font-size:1.25rem;font-weight:500}




.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.th{display:grid;gap:2px;min-width:0}
.th span{font-size:.75rem;color:var(--ink-2);text-align:center;font-variant-numeric:tabular-nums}
.ph{display:block;width:100%;max-width:100%;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface-2);aspect-ratio:3/4}
.ph img{display:block;width:100%;height:100%;object-fit:cover}
.miss{display:grid;place-items:center;height:100%;padding:8px;font-size:.75rem;line-height:1.3;color:var(--ink-2);text-align:center}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cm{margin:0;display:grid;gap:6px;min-width:0;align-content:start}
.cm figcaption{display:grid;font-size:.875rem}
.cm figcaption span{color:var(--ink-2);font-variant-numeric:tabular-nums}
/* antes e depois deslizante: as duas fotos sobrepostas; a linha (--p) mostra o antes à esquerda e o depois à direita */
.ba{position:relative;aspect-ratio:3/4;max-height:70vh;margin:0 auto;width:100%;border-radius:14px;overflow:hidden;background:var(--surface);border:1px solid var(--line);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;--p:50%}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.ba .af{clip-path:inset(0 0 0 var(--p))}
.ba .bar{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 6px rgba(0,0,0,.45);pointer-events:none}
.ba .bar i{position:absolute;top:50%;left:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.4)}
.ba .bar i::before,.ba .bar i::after{content:"";position:absolute;top:50%;margin-top:-6px;border:6px solid transparent}
.ba .bar i::before{left:5px;border-right-color:#7a5a64}
.ba .bar i::after{right:5px;border-left-color:#7a5a64}
.ba .lbl{position:absolute;top:10px;padding:3px 10px;border-radius:999px;background:rgba(0,0,0,.5);color:#fff;font-size:.8125rem;font-weight:600;pointer-events:none}
.ba .lbl.l{left:10px}.ba .lbl.r{right:10px}
.ba:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* câmera com guia para o rosto (tela cheia, fora do render normal) */
.camv{position:fixed;inset:0;z-index:20;background:#000;color:#fff;display:grid;grid-template-rows:auto 1fr auto;gap:10px;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top,0px));padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
.camv .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.camv .top b{font-size:.9375rem}
.camf{position:relative;align-self:center;justify-self:center;width:min(100%,calc((100vh - 290px)*.75));width:min(100%,calc((100dvh - 290px)*.75));aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:#111}
.camf video,.camf .gh{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.camf video.mir{transform:scaleX(-1)}
.camf .gh{opacity:.35;pointer-events:none}
.camf .camg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.camf .hint{position:absolute;left:0;right:0;top:6px;margin:0;text-align:center;font-size:.8125rem;text-shadow:0 1px 3px #000;padding:0 12px}
.camv .bot{display:grid;gap:10px;justify-items:center}
.camv .row{justify-content:center}
.camv .chip{color:#fff;border-color:rgba(255,255,255,.35);background:transparent}
.camv .chip[aria-pressed="true"]{background:#fff;color:#000}
.camv .btn{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3)}
.camv .shot{width:68px;height:68px;border-radius:50%;border:4px solid #fff;background:rgba(255,255,255,.25);padding:0}
.camv .shot:active{background:#fff}
.camv .err{align-self:center;text-align:center;display:grid;gap:12px;justify-items:center;max-width:320px;margin:0 auto}
.lb{position:fixed;inset:0;z-index:10;background:var(--bg);display:grid;grid-template-rows:auto 1fr auto;gap:12px;padding:16px;padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.lbtop,.lbbot{width:100%;max-width:560px;margin-inline:auto}
.lbtop{display:flex;justify-content:flex-end}
.lbbot{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}
.lbimg{min-height:0;display:grid;place-items:center}
.lbimg img{max-width:100%;max-height:75vh;object-fit:contain;border-radius:10px}

details.bk{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:4px 16px}
details.bk summary{min-height:48px;display:flex;align-items:center;font-weight:600;cursor:pointer}
details.bk .in{display:grid;gap:12px;padding-bottom:16px}

.tabbar{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);z-index:5}
.tabs{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(var(--n,4),1fr)}
.tabs button{min-height:62px;border:0;background:none;display:grid;place-items:center;align-content:center;gap:2px;color:var(--ink-2);font-size:.8125rem;font-weight:600;padding:6px 2px}
.tabs button svg{width:24px;height:24px}
.tabs button{font-size:.75rem}
.hn{font-family:var(--display);font-size:1.5rem;font-weight:600}
.chgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.chd{aspect-ratio:1;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:.6875rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.chd.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.chd.hoje{box-shadow:0 0 0 2px var(--accent)}
.chd.fut{opacity:.45}
.phrase{border-radius:12px;padding:14px 16px;background:var(--accent-soft);color:var(--ink)}
.phrase p{margin:6px 0 0;font-family:var(--display);font-size:1.125rem;line-height:1.4}
.phrase.inc{background:var(--warn-soft)}
.tabs button[aria-current="page"]{color:var(--accent)}
@media (prefers-reduced-motion: no-preference){
  .ring .fg{transition:stroke-dasharray .35s ease}
  .box,.step .nm{transition:background .15s,color .15s}
}
@media (max-width:380px){
  h1{font-size:1.5rem}
  .edit .two{grid-template-columns:1fr}
  .stats{gap:6px}
}

.cl{width:100%;text-align:left;min-height:64px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);display:grid;gap:3px;justify-items:start}
.cl b{font-weight:600}
.badge{display:inline-block;font-size:.75rem;font-weight:600;padding:2px 10px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);width:fit-content}
.badge.on{background:var(--accent);color:var(--accent-ink)}
.steps .rd{display:grid;gap:2px;padding:12px 16px}
.buyrow{padding:0 0 14px 38px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.lk{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:14px}
.steps .rd .buyrow{padding:8px 0 0}
.opts{padding:0 0 14px 38px;display:grid;gap:6px}
.opts ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.opts li{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:start;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.opts li .pt{width:44px;height:44px;border-radius:8px;object-fit:cover}
.opts li>span{display:grid;gap:2px}
.opts .buyrow{padding:6px 0 0}
.rb .opts,.sos .opts{padding-left:0}
.sos .step{display:flex;gap:12px;align-items:flex-start;padding:12px 0;min-height:0}
.plano ul li{line-height:1.45}
.reav{border:1px solid var(--accent);background:var(--accent-soft)}
.plano-edit textarea{min-height:0;resize:vertical}
.steps .rd+.rd{border-top:1px solid var(--line)}
.rd .nm{font-weight:600}
.pt{width:56px;height:56px;border-radius:10px;object-fit:cover;background:var(--surface-2);display:block;flex:none}
.step .pt,.rd .pt{float:right;margin-left:10px}
.prodrow{grid-template-columns:auto 1fr;align-items:center;gap:12px}
.ba .bn{position:absolute;bottom:10px;display:flex;align-items:center;gap:2px;padding:2px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:.8125rem;font-weight:600;cursor:default}
.ba .bn.l{left:10px}.ba .bn.r{right:10px}
.ba .bn button{width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:#fff;font-size:1.375rem;line-height:1;display:grid;place-items:center}
.ba .bn button:disabled{opacity:.3}
.ba .bn span{min-width:62px;text-align:center}
.slotbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 14px;margin-bottom:12px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-weight:600;font-size:.875rem}
.rtop{display:flex;justify-content:space-between;align-items:center;gap:8px}
.rtop .btn svg{width:16px;height:16px;vertical-align:-3px}
.rl{padding:0 14px}
.rl>li+li{border-top:1px solid var(--line)}
.rh{width:100%;display:grid;grid-template-columns:40px minmax(0,1fr) auto 18px;gap:10px;align-items:center;text-align:left;background:none;border:0;padding:12px 0;min-height:60px;color:var(--ink)}
.rh.rh2{grid-template-columns:40px minmax(0,1fr) auto 18px;padding:0;min-height:48px}
.rh>svg{width:18px;height:18px;color:var(--ink-2)}
.open>.rh>svg{transform:rotate(180deg)}
.rpt{width:40px;height:40px;border-radius:8px;object-fit:cover;background:var(--surface-2);display:block}
.rn{justify-self:center;width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:.8125rem;font-weight:700}
.rt{display:grid;min-width:0}.rt b{font-weight:600}.rt span{color:var(--ink-2);font-size:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz{font-size:.75rem;color:var(--ink-2);background:var(--surface-2);border-radius:999px;padding:3px 9px;white-space:nowrap}
.rb{padding:0 0 14px 50px;display:grid;gap:8px}
.rb .buyrow{padding:0}
.rb .pt{float:none}
.re{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;align-items:center;padding:8px 0}
.re .mv{display:grid}
.re .mv button{width:36px;height:26px;border:0;background:none;display:grid;place-items:center;color:var(--ink-2)}
.re .mv svg{width:18px;height:18px}
.re .mv button:disabled{opacity:.25}
.ef{display:grid;gap:12px;padding:4px 0 16px}
.dp{display:flex;flex-wrap:wrap;gap:6px}
.bau16{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:8px;max-width:420px}
.bau16 .chip{justify-content:center;font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.04em}
.sline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.sline .muted{flex:1;min-width:150px;font-size:.875rem}
.pubbar{position:sticky;bottom:calc(74px + env(safe-area-inset-bottom,0px));z-index:4;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 6px 6px 18px;box-shadow:0 2px 12px rgba(0,0,0,.10)}
.pubbar .warn{color:var(--warn);font-weight:600;font-size:.875rem}
.pubbar .muted{font-size:.875rem}
select{width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
.qadj-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px}
.qface{display:grid;gap:8px;padding:12px 0;border-top:1px solid var(--line)}.qface:first-of-type{border-top:0}.qface img{width:100%;max-width:240px;aspect-ratio:3/4;object-fit:cover;border-radius:12px;background:var(--surface-2)}
.ctabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--surface-2);padding:4px;border-radius:14px;position:sticky;top:0;z-index:5}
.ctabs button{position:relative;min-height:44px;border:0;border-radius:11px;background:transparent;font-weight:600;font-size:.8125rem;color:var(--ink-2);padding:0 4px}
.ctabs button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.ctabs .dot{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.qfotos.rosto{grid-template-columns:repeat(3,1fr)}.qfotos.rosto .qf img{aspect-ratio:3/4}
/* ---------- versão de PC dos painéis (Daiane e Assistente), a partir de 1024 px ---------- */
.splitR .backrow{display:none}
@media (min-width:1024px){
  body.panel .tabbar{top:0;right:auto;bottom:0;width:224px;border-top:0;border-right:1px solid var(--line);padding:28px 12px}
  body.panel .tabs{display:flex;flex-direction:column;gap:4px;max-width:none;margin:0}
  body.panel .tabs button{display:flex;align-items:center;justify-content:flex-start;gap:12px;min-height:48px;padding:0 14px;border-radius:12px;font-size:.9375rem;text-align:left}
  body.panel .tabs button[aria-current="page"]{background:var(--accent-soft)}
  body.panel .app{max-width:1280px;margin:0 0 0 224px;padding:32px 40px 56px}
  body.panel .top{grid-template-columns:auto 1fr;grid-template-areas:"logo title" "logo date";align-items:center;column-gap:20px;margin-bottom:26px}
  body.panel .top .logo{grid-area:logo;width:110px;margin:0}
  body.panel .top h1{grid-area:title;margin:0;align-self:end}
  body.panel .top .date{grid-area:date;margin:0;align-self:start}
  body.panel .pubbar{bottom:16px}
  /* Clientes: lista fixa à esquerda, ficha à direita */
  .split{display:grid;grid-template-columns:360px minmax(0,1fr);gap:28px;align-items:start}
  .splitL{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto;padding-right:6px}
  .splitR{min-width:0}
  .splitR .ctabs{top:0}
  .cl[aria-current="true"]{border-color:var(--accent);background:var(--accent-soft)}
  /* listas e cartões em grade, aproveitando a largura */
  body.panel .plist{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;align-items:start}
  .pgrid2{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
  .pgrid2>.sec,.pgrid2>.stats,.pgrid2>.banner,.pgrid2>.row{grid-column:1/-1}
  /* Início: cartões em colunas que se encaixam (sem linhas de altura igual, que deixavam vazios ao lado dos menores) */
  .pgrid2>.masonry{display:block;column-count:2;column-gap:16px;grid-column:1/-1}
  .masonry>*{break-inside:avoid;margin:0 0 16px}
  .splitR .qfotos.rosto{max-width:520px}
}
/* etiquetas de plano, iguais na Daiane e na Assistente: Standard azul, Premium rosa, Elite dourado, vencido cinza */
.tag{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:700;line-height:1.3;padding:3px 10px;border-radius:999px;width:fit-content;white-space:nowrap}
.tag::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.tag-std{background:var(--t-std-bg);color:var(--t-std-ink)}
.tag-prem{background:var(--t-prem-bg);color:var(--t-prem-ink)}
.tag-elite{background:var(--t-elite-bg);color:var(--t-elite-ink)}
.tag-old{background:var(--t-old-bg);color:var(--t-old-ink)}
.tag-none{background:transparent;color:var(--ink-2);border:1px dashed var(--line)}
.tag-grace{outline:1.5px dashed currentColor;outline-offset:-2px}
.tag-gift{background:var(--t-gift-bg);color:var(--t-gift-ink)}
/* filtros da lista de clientes: busca + botão Filtros, chips ativos e gaveta */
.frow{display:flex;gap:8px;align-items:flex-end}.frow .field{flex:1;min-width:0;margin:0}.frow .btn{flex:none;min-height:48px}
.btn .n{display:inline-block;min-width:20px;padding:0 6px;margin-left:4px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:.75rem;line-height:20px;text-align:center}
.fact{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fchip{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:inherit;font-size:.875rem;font-weight:600;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.fchip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.fopts{display:flex;flex-wrap:wrap;gap:8px}
.fdates{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fs-bg{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center}
.fs{background:var(--surface);border:1px solid var(--line);border-radius:18px 18px 0 0;width:100%;max-width:560px;max-height:88vh;overflow:auto;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));display:grid;gap:12px;align-content:start}
.fs-top{display:flex;justify-content:space-between;align-items:center}.fs-top h2{margin:0}
.fs .cap{margin:6px 0 0}
.fs-ft{display:flex;gap:10px;position:sticky;bottom:0;background:var(--surface);padding-top:10px}
.fs-ft .btn{flex:1;justify-content:center}.fs-ft .btn.pri{flex:2}
@media (min-width:1024px){.fs-bg{align-items:stretch;justify-content:flex-end}.fs{border-radius:0;max-width:420px;max-height:none;height:100%;border-width:0 0 0 1px;padding:28px 24px}}

/* Hoje: passo em duas colunas (marcar + nome + "Como usar" | foto grande), sem espaço sobrando */
.steps li.sr{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center}
.sr .step{grid-column:1;grid-row:1;padding:14px 0 4px;min-height:0}
.sr .zb{grid-column:2;grid-row:1 / span 2;margin:12px 0;padding:0;border:0;background:none;border-radius:12px;cursor:zoom-in;line-height:0}
.sr .zb .pt{width:116px;height:116px;border-radius:12px;float:none;margin:0}
.sr .tipw{grid-column:1;grid-row:2;padding:0 0 12px 46px}
.sr .tipw .btn{min-height:34px;padding:4px 14px}
.sr .tipw .tp{margin:8px 0 0}
.sr .buyrow,.sr .opts{grid-column:1 / -1}
.sos .step .pt{width:72px;height:72px}
.zoomov{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:16px;cursor:zoom-out}
.zoomov img{max-width:100%;max-height:78vh;border-radius:14px;background:#fff;object-fit:contain}
/* Hoje: o nome do passo (função) em rosa e caixa alta; o produto em branco, maior, para não se confundirem */
.sr .nm{display:block;color:var(--accent);font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.sr .pr{color:var(--ink);font-size:1.0625rem;font-weight:600;line-height:1.3;margin-top:2px}
.sr .step[aria-pressed="true"] .nm{color:var(--ink-2)}
/* Editar (cliente): fotos maiores e clicáveis */
.rl .rh:not(.rh2){grid-template-columns:56px minmax(0,1fr) auto 18px}
.rl .rh:not(.rh2) .rpt{width:56px;height:56px;border-radius:10px;cursor:zoom-in}
.rl .rh:not(.rh2) .rt span{white-space:normal}
.opts li{grid-template-columns:76px 1fr}
.opts li .pt{width:76px;height:76px;cursor:zoom-in}
/* Editar (cliente): foto | nome e produto | seta; o rótulo de dias/opções vai para uma linha própria, sem sobrepor o nome */
.rl .rh:not(.rh2){grid-template-columns:56px minmax(0,1fr) 18px;grid-template-rows:auto auto;align-items:center;row-gap:6px}
.rl .rh:not(.rh2)>.rpt,.rl .rh:not(.rh2)>.rn{grid-column:1;grid-row:1 / span 2;align-self:start}
.rl .rh:not(.rh2)>.rt{grid-column:2;grid-row:1}
.rl .rh:not(.rh2)>.dz{grid-column:2;grid-row:2;justify-self:start;white-space:normal}
.rl .rh:not(.rh2)>svg{grid-column:3;grid-row:1 / span 2}

/* Relatório da Daiane: linhas compactas, filtros e detalhe na própria linha */
.seg{display:flex;gap:8px;flex-wrap:wrap}
.rchips{display:flex;gap:8px;flex-wrap:wrap}
.rbar{display:grid;gap:10px}
.rrows{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.rrow{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.rrow.open{border-color:var(--accent)}
.rline{display:flex;align-items:stretch}
.rhead{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 12px;text-align:left;background:none;border:0;color:inherit;font:inherit}
.rwa{flex:none;width:52px;display:grid;place-items:center;border-left:1px solid var(--line);color:var(--accent)}
.rwa .i{width:22px;height:22px}
.rrow.cob{opacity:.7}
.rleg{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:.75rem;margin:0}
.rleg .rdot{display:inline-block}
.rhead .i{flex:none;width:18px;height:18px;transition:transform .15s}
.rrow.open .rhead .i{transform:rotate(180deg)}
.rname{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;flex:0 1 auto}
.rtxt{flex:1;min-width:0;color:var(--ink-2);font-size:.8125rem;line-height:1.3}
.rtxt.late{color:var(--warn);font-weight:700}
.rmeta{flex:none;color:var(--ink-2);font-size:.75rem;font-variant-numeric:tabular-nums}
.rdot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--line)}
.rdot.ok{background:#4caf7a}.rdot.wait{background:#c9a23a}.rdot.warn{background:#e5534b}
.rdet{display:grid;gap:10px;padding:0 14px 14px}
.rlist{list-style:none;padding:0;margin:0;display:grid;gap:4px;color:var(--ink-2);font-size:.875rem}
@media (max-width:520px){.rhead{flex-wrap:wrap}.rtxt{flex-basis:100%;order:3;white-space:normal}}
@media (min-width:900px){.rrows{grid-template-columns:1fr 1fr}}

/* guia de passos do acompanhamento */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.steps li{display:flex;gap:12px;align-items:flex-start}
.steps .sn{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.8125rem;font-weight:700;border:1px solid var(--line);color:var(--ink-2)}
.steps li.done .sn{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.steps li.now .sn{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.steps li.todo{opacity:.7}
.grp .rhead{min-height:60px}

/* ---------- Painel (Daiane e Assistente): visual rosé, cartões macios, lista | detalhe no PC ---------- */
body.panel .card{border-radius:20px;padding:18px 20px}
body.panel .stat{border-radius:18px;padding:14px 16px}
body.panel .chip,body.panel .fchip{border-radius:999px}
body.panel .rchips .chip[aria-pressed="true"],body.panel .seg .chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
body.panel .rchips,body.panel .seg{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;-webkit-overflow-scrolling:touch}
body.panel .rchips::-webkit-scrollbar,body.panel .seg::-webkit-scrollbar{display:none}
body.panel .rchips .chip,body.panel .seg .chip{flex:none;white-space:nowrap}
.relpg>*{grid-column:auto}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpi{display:grid;gap:4px;padding:14px 16px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.kpi span{font-size:.75rem;font-weight:600;color:var(--ink-2)}
.kpi b{font-family:var(--display);font-size:1.875rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi.hot{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.kpi.hot span{color:inherit;opacity:.92}
.kpi.soft{background:var(--accent-soft);border-color:transparent}
.kpi.soft span,.kpi.soft b{color:var(--accent)}
@media (max-width:640px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi b{font-size:1.625rem}}
.rbar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end}
.rbar .field{flex:1 1 260px;margin:0}
.rbar .rleg{flex:1 1 100%}
.rrows{gap:0;border:1px solid var(--line);border-radius:22px;background:var(--surface);overflow:hidden}
.rrow{border:0;border-radius:0;background:transparent}
.rrow+.rrow{border-top:1px solid var(--line)}
.rrow.open,.rrow.sel{background:var(--accent-soft)}
.rhead{min-height:68px;padding:12px 8px 12px 16px;gap:12px}
.rcol{flex:1;min-width:0;display:grid;gap:2px}
.rcol .rtxt{flex:none;font-size:.8125rem}
.rav{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:.875rem;font-weight:700;background:var(--accent-soft);color:var(--accent)}
.rrow.open .rav,.rrow.sel .rav{background:var(--surface)}
.rav.warn{background:var(--brand);color:var(--accent-ink)}
.rav.big{width:56px;height:56px;font-size:1.125rem}
.rwa{width:auto;min-width:44px;height:44px;align-self:center;margin:0 12px 0 4px;border-left:0;border-radius:999px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;font-size:.75rem;font-weight:700}
.rrow.open .rwa,.rrow.sel .rwa{background:var(--surface)}
.rrow:has(.rav.warn) .rwa{background:var(--accent);color:var(--accent-ink)}
.rwa .lbl{display:none}
.rname{flex-wrap:wrap}
.rrow .rdet{background:transparent}
.relsplit{display:block}
.reldet{display:none}
.rdhead{display:flex;align-items:center;gap:14px}
.rdalert{border-radius:16px;padding:12px 14px;font-size:.875rem;font-weight:500;line-height:1.5;background:var(--surface-2)}
.rdalert.warn{background:var(--warn-soft);color:var(--warn)}
@media (min-width:1100px){
  .relsplit{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,1fr);gap:20px;align-items:start}
  .reldet{display:grid;gap:16px;position:sticky;top:20px;padding:24px;border-radius:24px;border:1px solid var(--line);background:var(--surface)}
  .reldet .rdet{padding:0}
  .rrow .rdet{display:none}
  .rrow .rhead .i{display:none}
  .rrows{grid-template-columns:1fr}
  .rwa .lbl{display:inline}
  .rwa{padding:0 16px}
}
@media (min-width:1024px){
  body.panel .tabbar{background:var(--accent-soft);border-right:0}
  body.panel .tabs button[aria-current="page"]{background:var(--accent);color:var(--accent-ink)}
}
@media (max-width:520px){.rhead{flex-wrap:nowrap}.rcol .rtxt{white-space:normal;order:0}}
.rrow.open .rav.warn,.rrow.sel .rav.warn{background:var(--brand);color:var(--accent-ink)}
.rwa,.rwa:hover{text-decoration:none}
@media (max-width:1023px){
  body.panel .top{grid-template-columns:auto 1fr;grid-template-areas:"logo title" "logo date";align-items:center;column-gap:14px;margin-bottom:16px}
  body.panel .top .logo{grid-area:logo;width:72px;margin:0}
  body.panel .top h1{grid-area:title;margin:0;align-self:end;font-size:1.25rem}
  body.panel .top .date{grid-area:date;margin:0;align-self:start}
}

/* ======================================================================
   Direção 3: cartões macios, serifa nos títulos, menu flutuante, vinho profundo nos destaques
   ====================================================================== */
body{font-family:var(--body)}
h1,h2{font-family:var(--display);font-weight:500}
h1{font-size:2rem}
h2{font-size:1.75rem}
h3{letter-spacing:.14em}
.card{border-radius:26px;padding:18px 20px}
.btn{min-height:50px;padding:0 22px}
.btn.pri{background:var(--deep);border-color:var(--deep);color:#fff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}}
:root[data-theme="dark"] .btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
input[type=text],input[type=url],input[type=email],input[type=password],input[type=time],input[type=date],textarea,select{border-radius:22px;border-color:var(--line);background:var(--surface)}

/* topo: símbolo, nome e SkinApp, como na logo original */
.top{gap:6px;margin-bottom:20px}
.brandbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.brandbar .bsym{width:46px;height:auto;display:block;flex:none}
.brandbar .bword{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.brandbar .bword img{display:block;height:auto}
.brandbar .bword img:first-child{width:min(150px,38vw)}
.brandbar .bword img:last-child{width:min(84px,22vw)}
.brandbar .bsp{width:46px;flex:none}
.top .date{order:-1;font-size:.8125rem;font-weight:500;color:var(--accent);margin:0}
.top .brandbar{order:-2}
.top h1{margin:0}
body.panel .top,body.panel .top .logo{all:unset}
body.panel .top{display:grid;gap:6px;margin-bottom:20px}
body.panel .top h1,body.panel .top .date{grid-area:auto;margin:0}

/* menu flutuante em pílula, com ícones (o nome fica só para leitores de tela) */
.tabbar{left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));padding-bottom:0;border:1px solid var(--line);border-radius:40px;background:var(--surface);box-shadow:0 6px 24px rgba(125,42,66,.14)}
.tabs{padding:0 8px;max-width:520px}
.tabs button{min-height:66px;color:var(--ink-2)}
.tabs button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tabs button svg{width:46px;height:46px;padding:12px;border-radius:50%}
.tabs button[aria-current="page"]{color:var(--accent-ink)}
.tabs button[aria-current="page"] svg{background:var(--accent)}
.app{padding-block:22px 124px}
.pubbar{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
.qnav{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
@media (min-width:1024px){
  body.panel .tabbar{left:0;right:auto;top:0;bottom:0;width:224px;border:0;border-right:1px solid var(--line);border-radius:0;box-shadow:none;background:var(--accent-soft);padding:28px 12px}
  body.panel .tabs button{min-height:50px}
  body.panel .tabs button span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  body.panel .tabs button svg{width:24px;height:24px;padding:0;border-radius:0;background:none}
  body.panel .tabs button[aria-current="page"]{background:var(--accent);color:var(--accent-ink)}
  body.panel .tabs button[aria-current="page"] svg{background:none}
  body.panel .pubbar{bottom:16px}
}

/* Hoje */
.seg{background:var(--surface-2);padding:4px}
.seg button{min-height:50px;font-size:1rem}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px rgba(125,42,66,.14)}
.seg .am svg,.seg .pm svg{color:var(--accent)}
.card.prog{position:relative;overflow:hidden;border:0;background:var(--deep);color:#fff;border-radius:32px;padding:18px 22px}
.card.prog::before{content:"";position:absolute;right:-36px;top:-46px;width:150px;height:150px;border-radius:50%;background:var(--deep-2);opacity:.5;pointer-events:none}
.card.prog>*{position:relative}
.card.prog .ring .bg{stroke:var(--deep-2)}
.card.prog .ring .fg{stroke:#fff}
.card.prog .ring text{fill:#fff}
.card.prog b{font-family:var(--display);font-size:1.5rem;font-weight:500;line-height:1.15}
.card.prog .muted{color:rgba(255,255,255,.85)}
.card.prog .streak{background:var(--deep-2);color:#fff}
ul.card.steps{background:transparent;border:0;padding:0;gap:10px;display:grid}
ul.card.steps>li{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:0 14px 6px}
ul.card.steps>li+li{border-top:1px solid var(--line)}
.sr .zb .pt{border-radius:18px}
.box{border-color:var(--ink-2)}
.done-msg{border-radius:22px}
.step[aria-pressed="true"] .box{background:var(--accent);border-color:var(--accent)}
.sr .nm{color:var(--accent)}

/* painel da Daiane: números em cartões de destaque, linhas como cartões soltos */
.kpi{border-radius:26px;padding:16px 18px}
.kpi.hot{background:var(--deep);border-color:var(--deep);color:#fff}
.kpi b{font-weight:500}
.rrows{gap:10px;border:0;background:transparent;overflow:visible;border-radius:0}
.rrow{background:var(--surface);border:1px solid var(--line);border-radius:26px;overflow:hidden}
.rrow+.rrow{border-top:1px solid var(--line)}
.rrow.open,.rrow.sel{background:var(--accent-soft);border-color:var(--accent-soft)}
.rav{border-radius:20px;width:56px;height:56px;font-family:var(--display);font-size:1.125rem}
.rav.big{border-radius:50%;width:72px;height:72px;font-size:1.5rem}
.rwa{border-radius:999px}
.reldet{border-radius:30px}
.stat{border-radius:22px}
.stat b{font-weight:500}
.tabbar{left:50%;right:auto;transform:translateX(-50%);width:min(560px,calc(100% - 28px))}
@media (min-width:1024px){body.panel .tabbar{left:0;transform:none;width:224px}}

/* Entrar e telas de acesso: logo grande sobre rosé e folha clara por cima */
body.gate{background:var(--surface-2)}
body.gate .app{padding-bottom:0}
.gatehead{margin:0;padding:18px 0 44px;text-align:center;justify-items:center}
.gatehead .biglogo{width:min(240px,64vw);height:auto;display:block;margin:0 auto}
body.gate #view{background:var(--bg);border-radius:40px 40px 0 0;margin:0 -16px;padding:30px 20px 48px;min-height:60vh}
.gt{font-size:2.125rem;line-height:1.1;font-weight:500}

/* Conta: cartão do plano em destaque */
.card.home{position:relative;overflow:hidden;border:0;background:var(--deep);color:#fff;border-radius:32px}
.card.home::before{content:"";position:absolute;right:-40px;top:-50px;width:170px;height:170px;border-radius:50%;background:var(--deep-2);opacity:.5;pointer-events:none}
.card.home>*{position:relative}
.card.home h3{color:rgba(255,255,255,.85)}
.card.home .muted{color:rgba(255,255,255,.9)}
.card.home .badge{background:var(--deep-2);color:#fff;font-family:var(--display);font-size:1.25rem;font-weight:500;padding:4px 16px}
.card.home .btn{background:#fff;color:var(--deep);border-color:#fff}
body.panel .top h1{font-size:2rem}
.card.hero{position:relative;overflow:hidden;border:0;background:var(--deep);color:#fff;border-radius:32px}
.card.hero::before{content:"";position:absolute;right:-40px;top:-50px;width:170px;height:170px;border-radius:50%;background:var(--deep-2);opacity:.5;pointer-events:none}
.card.hero>*{position:relative}
.card.hero h3{color:rgba(255,255,255,.85)}
.card.hero .muted{color:rgba(255,255,255,.9)}
.card.hero .badge{background:var(--deep-2);color:#fff}
.card.hero .btn{background:#fff;color:var(--deep);border-color:#fff}
input[type=search]{width:100%;min-height:48px;padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink)}
.cl{border-radius:26px;min-height:68px}
details.bk{border-radius:26px}
.lk,.opts li,.sline{border-radius:22px}

/* Entrar: formulário solto sobre a folha, com círculos suaves ao fundo (como no desenho) */
:root{--gate-bg:#e6c7c4;--gate-c1:#efdcd7;--gate-c2:#cf697a}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--gate-bg:#3c2229;--gate-c1:#4a2c33;--gate-c2:#a63e5a}}
:root[data-theme="dark"]{--gate-bg:#3c2229;--gate-c1:#4a2c33;--gate-c2:#a63e5a}
body.gate{background:var(--gate-bg);position:relative;overflow-x:hidden}
body.gate::before{content:"";position:absolute;right:-90px;top:-60px;width:340px;height:340px;border-radius:50%;background:var(--gate-c1);pointer-events:none}
body.gate::after{content:"";position:absolute;left:-80px;top:240px;width:200px;height:200px;border-radius:50%;background:var(--gate-c2);opacity:.3;pointer-events:none}
body.gate .app{position:relative;z-index:1}
body.gate #view{position:relative;z-index:1}
.sronly{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.authf{gap:14px}
.authf .sub{color:var(--ink-2);font-size:.9375rem}
.authf .field.pw{position:relative}
.authf .field.pw input{padding-right:92px}
.authf .show{position:absolute;right:18px;top:50%;transform:translateY(-50%)}
.authf input[type=email],.authf input[type=password],.authf input[type=text]{min-height:54px;padding:12px 22px;border-radius:999px;border-color:transparent;background:var(--surface)}
.btn.go{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:58px;padding:0 8px 0 26px;font-size:1.0625rem}
.btn.go .arr{width:42px;height:42px;border-radius:50%;background:#fff;color:var(--deep);display:grid;place-items:center;font-size:1.25rem}
.lnk{background:none;border:0;padding:6px;font:inherit;font-weight:600;font-size:.875rem;color:var(--accent);cursor:pointer;text-decoration:none}
.lnk.center{align-self:center}
.authf .alt{display:grid;gap:8px;justify-items:center;margin-top:6px}
.authf .alt .btn{width:100%;max-width:320px}
.foot2{text-align:center;color:var(--ink-2);font-size:.875rem;margin:6px 0 0}

/* Hoje: foto à esquerda, nome e produto, marcador à direita; o próximo passo em destaque */
.steps li.sr{grid-template-columns:auto 1fr;column-gap:12px;align-items:center}
.sr .zb{grid-column:1;grid-row:1 / span 2;margin:12px 0 12px;padding:0}
.sr .zb .pt{width:60px;height:60px;border-radius:18px;background:#fff}
.sr .step{grid-column:2;grid-row:1;grid-template-columns:1fr auto;padding:14px 0 4px;align-items:center}
.sr .step .box{order:2;width:32px;height:32px;border-color:var(--accent)}
.sr .tipw{grid-column:2;grid-row:2;padding:0 0 12px}
.sr .buyrow,.sr .opts{grid-column:1 / -1}
.sr .step[aria-pressed="true"] .nm{text-decoration:none}
ul.card.steps>li.sr.now{background:var(--accent-soft);border-color:var(--accent-soft)}
ul.card.steps>li.sr:has(.step[aria-pressed="true"]){opacity:.72}
.seg[role="group"]{display:grid;grid-template-columns:1fr 1fr;gap:4px;flex-wrap:nowrap;overflow:visible}
.seg[role="group"] button{width:100%}
.sr .zb .pt{width:92px;height:92px;border-radius:22px}
.sr .zb{margin:10px 0}

/* sino das notificações */
.bell{position:relative;flex:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--surface);color:var(--ink);display:grid;place-items:center;box-shadow:0 1px 4px rgba(125,42,66,.12)}
.bell svg{width:22px;height:22px}
.bell .dot{position:absolute;top:10px;right:11px;width:10px;height:10px;border-radius:50%;background:var(--accent);border:2px solid var(--surface)}
.bellsheet .card p{margin:0}

/* Editar rotina: cada passo num cartão, foto maior, opções com botão em pílula */
ul.card.rl{background:transparent;border:0;padding:0;display:grid;gap:10px}
ul.card.rl>li{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:0 16px}
ul.card.rl>li+li{border-top:1px solid var(--line)}
ul.card.rl>li.open{background:var(--accent-soft);border-color:var(--accent-soft)}
.rl .rh:not(.rh2){grid-template-columns:84px minmax(0,1fr) 18px;padding:14px 0}
.rl .rh:not(.rh2) .rpt{width:84px;height:84px;border-radius:22px;background:#fff}
.rl .rt b{font-size:1.0625rem}
.rl .dz{background:var(--surface-2)}
.rl>li.open .dz{background:var(--surface)}
.opts{padding-left:0}
.opts .cap{font-family:var(--display);font-size:1.125rem;font-weight:600;color:var(--ink)}
.opts li{border:0;border-radius:22px;background:var(--surface);grid-template-columns:72px 1fr}
.opts li .pt{width:72px;height:72px;border-radius:18px;background:#fff}
.opts .btn{border-radius:999px;background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.rb{padding-left:0}

/* Diário: semana em cartões, pergunta em destaque, ações rápidas e "Anteriores" em cartões */
.eyebrow-a{font-size:.8125rem;font-weight:500;color:var(--accent)}
.wkstrip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.dday{display:grid;gap:2px;place-items:center;padding:10px 0;border:0;border-radius:22px;background:var(--surface);color:var(--ink)}
.dday span{font-size:.6875rem;font-weight:500;color:var(--ink-2)}
.dday b{font-size:1.0625rem;font-weight:600;font-variant-numeric:tabular-nums}
.dday.has b{box-shadow:0 2px 0 var(--accent)}
.dday[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.dday[aria-pressed="true"] span{color:var(--accent-ink);opacity:.9}
.card.hero2{position:relative;overflow:hidden;border:0;background:var(--surface-2);border-radius:32px;padding:20px 22px}
.card.hero2::before{content:"";position:absolute;right:-36px;top:-46px;width:150px;height:150px;border-radius:50%;background:var(--surface);opacity:.5;pointer-events:none}
.card.hero2>*{position:relative}
.card.hero2 h3.q{font-family:var(--display);font-size:1.375rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);line-height:1.2}
.card.hero2 .scale{display:flex;flex-wrap:wrap;gap:8px}
.card.hero2 .scale button{display:inline-flex;align-items:center;gap:6px;min-height:46px;padding:0 16px;border-radius:999px;border:0;background:var(--surface)}
.card.hero2 .scale b{font-family:var(--body);font-size:.875rem;color:var(--ink-2)}
.card.hero2 .scale span{font-size:.9375rem;color:var(--ink);font-weight:500}
.card.hero2 .scale button[aria-pressed="true"]{background:var(--deep);color:#fff}
.card.hero2 .scale button[aria-pressed="true"] b,.card.hero2 .scale button[aria-pressed="true"] span{color:#fff}
.two-act{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.act{display:grid;gap:6px;justify-items:start;text-align:left;padding:16px;border:0;border-radius:26px;background:var(--surface);color:var(--ink)}
.act .ico{width:44px;height:44px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:1.5rem}
.act .ico svg{width:20px;height:20px}
.act b{font-size:.9375rem}
.act .muted{font-size:.8125rem}
.h2s{font-size:1.25rem}
ul.hist{display:grid;gap:10px}
ul.hist>li{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:14px 16px}
ul.hist>li+li{border-top:1px solid var(--line)}

.card.hero2 .scale{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.card.hero2 .scale button{display:grid;gap:0;place-items:center;align-content:center;min-height:64px;padding:6px 2px;border-radius:20px;text-align:center}
.card.hero2 .scale b{font-family:var(--display);font-size:1.25rem;line-height:1.1;color:var(--ink)}
.card.hero2 .scale span{font-size:.6875rem;line-height:1.15;font-weight:500;color:var(--ink-2)}
.skinhint{font-size:.875rem;color:var(--ink);min-height:1.4em;margin:2px 0 0}
.card.hero2 .scale button{min-height:54px;padding:6px 4px}
.card.hero2 .scale span{font-size:.8125rem;color:var(--ink)}
/* escala em pílulas que quebram linha, como no desenho */
.card.hero2 .scale{display:flex;flex-wrap:wrap;gap:8px}
.card.hero2 .scale button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 18px;border-radius:999px;background:var(--surface);border:0}
.card.hero2 .scale span{font-size:.9375rem;font-weight:500;color:var(--ink)}
.card.hero2 .scale button[aria-pressed="true"]{background:var(--deep)}
.card.hero2 .scale button[aria-pressed="true"] span{color:#fff}
.card.hero2{padding:20px 22px}

/* Progresso: anel em destaque, 30 dias em bolinhas e dois números grandes */
.card.prog2{position:relative;overflow:hidden;border:0;background:var(--deep);color:#fff;border-radius:34px;padding:22px;display:flex;align-items:center;gap:20px}
.card.prog2::before{content:"";position:absolute;right:-40px;top:-50px;width:170px;height:170px;border-radius:50%;background:var(--deep-2);opacity:.5;pointer-events:none}
.card.prog2>*{position:relative}
.ring2{width:104px;height:104px;flex:none}
.ring2 .bg{fill:none;stroke:var(--deep-2);stroke-width:10}
.ring2 .fg{fill:none;stroke:#fff;stroke-width:10;stroke-linecap:round;transform:rotate(-90deg);transform-origin:52px 52px}
.ring2 text{font-family:var(--display);font-size:26px;fill:#fff;text-anchor:middle}
.card.prog2 b{display:block;font-family:var(--display);font-size:1.625rem;font-weight:500;line-height:1.15}
.card.prog2 span{display:block;font-size:.875rem;opacity:.9;margin-top:6px;line-height:1.4}
.chdots{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
.chdots i,.dotleg i{display:block;aspect-ratio:1;border-radius:50%}
.chdots i.full,.dotleg i.full{background:var(--accent)}
.chdots i.part,.dotleg i.part{background:var(--brand);opacity:.75}
.chdots i.miss,.dotleg i.miss{background:var(--surface-2)}
.chdots i.fut{background:var(--surface-2);opacity:.55}
.chdots i.hoje{box-shadow:0 0 0 2px var(--accent) inset;background:var(--surface)}
.dotleg{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:.75rem;color:var(--ink-2)}
.dotleg span{display:inline-flex;align-items:center;gap:6px}
.dotleg i{width:10px;height:10px;aspect-ratio:auto}
.two-stat{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.two-stat>div{border-radius:26px;padding:16px 18px;display:grid;gap:2px}
.two-stat .s1{background:var(--accent-soft)}
.two-stat .s2{background:var(--surface)}
.two-stat span{font-size:.8125rem;color:var(--ink-2)}
.two-stat .s1 span,.two-stat .s1 b{color:var(--accent)}
.two-stat b{font-family:var(--display);font-size:2rem;font-weight:500;line-height:1.1}
body{font-feature-settings:"lnum" 1}

/* Conta: identificação, plano em destaque, lista de atalhos com chaves e setas */
.acc-id{display:flex;align-items:center;gap:14px}
.acc-id b{display:block;font-family:var(--display);font-size:1.625rem;font-weight:600;line-height:1.1}
.acc-id span:not(.rav){display:block;color:var(--ink-2);font-size:.875rem;margin-top:2px}
.card.home .plan-n{font-family:var(--display);font-size:2.25rem;font-weight:500;line-height:1.1}
.card.home .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.card.home a.btn{text-decoration:none}
.card.setl{padding:4px 18px}
.srow{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;background:none;border:0;padding:14px 0;color:var(--ink);min-height:64px}
.srow+.srow{border-top:1px solid var(--line)}
.srow .st{display:grid;gap:2px;min-width:0}
.srow b{font-size:1rem;font-weight:600}
.srow .muted{font-size:.8125rem}
.srow .chev{color:var(--accent);font-size:1.5rem;line-height:1}
.sw{flex:none;position:relative;width:52px;height:30px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--ink-2);transition:transform .15s}
.sw.on{background:var(--accent);border-color:var(--accent)}
.sw.on::after{background:#fff;transform:translateX(22px)}
.center{text-align:center}
details.bk[open]>summary{margin-bottom:6px}
.card.setl.flat{background:var(--surface-2);border-color:transparent}
.two-stat.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.two-stat.three>div{padding:14px 14px}
.two-stat.three b{font-size:1.75rem;order:-1}
.two-stat.three span{font-size:.75rem;line-height:1.25}
.two-stat.three .s1 span,.two-stat.three .s1 b{color:var(--accent)}

/* ======================================================================
   Tipografia padronizada: só duas famílias (Playfair Display nos títulos e números grandes, Jost em todo o resto)
   Escala: título 2rem · seção 1.625rem · destaque 1.375rem · número grande 2rem · texto 1rem · apoio .875rem · rótulo .75rem
   ====================================================================== */
:root{--fs-title:2rem;--fs-h2:1.625rem;--fs-card:1.375rem;--fs-num:2rem;--fs-body:1rem;--fs-sm:.875rem;--fs-xs:.75rem}
button,input,textarea,select{font-family:inherit}
h1{font-size:var(--fs-title);font-weight:500;line-height:1.1}
h2{font-size:var(--fs-h2);font-weight:500;line-height:1.15}
h3{font-family:var(--body);font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase}
body.panel .top h1{font-size:var(--fs-title)}
/* números grandes */
.stat b,.kpi b,.two-stat b,.card.home .plan-n{font-family:var(--display);font-size:var(--fs-num);font-weight:500;line-height:1.1}
.two-stat.three b{font-size:1.75rem}
.hn{font-family:var(--display);font-size:var(--fs-card);font-weight:500}
/* títulos de cartões em destaque e nomes de pessoa */
.card.prog b,.card.prog2 b,.acc-id b,.card.hero2 h3.q,.phrase p,.visit b{font-family:var(--display);font-size:var(--fs-card);font-weight:500;line-height:1.2}
.acc-id b{font-size:var(--fs-h2)}
.card.home .badge{font-family:var(--display);font-size:var(--fs-card);font-weight:500}
.opts .cap{font-family:var(--display);font-size:1.125rem;font-weight:500}
.ring text,.ring2 text{font-family:var(--display);font-size:26px;font-weight:500}
.scale b,.card.hero2 .scale b,.rav{font-family:var(--display);font-weight:500}
.bau16 .chip{font-family:var(--body);letter-spacing:.04em}
/* nomes em listas e linhas: sempre Jost 600 */
.rt b,.cl b,.rname b,.srow b,.nm,.sr .pr{font-family:var(--body);font-weight:600}
.hist .hd,.tag,.badge,.btn,.chip,.fchip{font-family:var(--body)}
.card.setl.flat .sw:not(.on){background:var(--surface)}
.sr .pr{font-size:.9375rem;line-height:1.3}

/* logo do topo maior (símbolo, nome e SkinApp), centralizada entre o símbolo e o sino */
.brandbar{display:grid;grid-template-columns:64px minmax(0,1fr) 64px;align-items:center;gap:8px}
.brandbar .bsym{width:64px}
.brandbar .bword{justify-self:center;gap:6px}
.brandbar .bword img:first-child{width:min(190px,46vw)}
.brandbar .bword img:last-child{width:min(104px,26vw)}
.brandbar .bell{justify-self:end}
.brandbar .bsp{width:64px}

/* teste: logo completa centralizada no topo, como era antes, com o sino no canto */
.brandbar.centro{display:block;position:relative;text-align:center;margin-bottom:14px}
.brandbar.centro .biglogo2{width:min(240px,64vw);height:auto;display:block;margin:0 auto}
.brandbar.centro .bell{position:absolute;right:0;top:0}
body.panel .brandbar.centro .biglogo2{width:min(200px,56vw)}

/* teste: o fundo com círculos suaves da tela de entrar passa a valer no app da cliente (a imagem fica fixa atrás do conteúdo) */
body:not(.gate):not(.panel){background:var(--gate-bg);overflow-x:hidden}
body:not(.gate):not(.panel)::before{content:"";position:fixed;right:-90px;top:-60px;width:340px;height:340px;border-radius:50%;background:var(--gate-c1);pointer-events:none;z-index:0}
body:not(.gate):not(.panel)::after{content:"";position:fixed;left:-80px;top:300px;width:200px;height:200px;border-radius:50%;background:var(--gate-c2);opacity:.3;pointer-events:none;z-index:0}
body:not(.gate):not(.panel) .app{position:relative;z-index:1}
ul.card.steps>li.sr.now{background:var(--surface);border-color:var(--accent)}

/* quadro de conteúdo: tudo (saudação, avisos, textos, cartões e botões) fica dentro de uma folha com cantos redondos, como na tela de Entrar */
.greet{display:grid;gap:6px;margin-bottom:18px}
.greet .date{order:-1;font-size:.8125rem;font-weight:500;color:var(--accent);margin:0}
.greet h1{margin:0}
body:not(.panel) .app{padding-bottom:0}
body:not(.panel) #sheet{position:relative;background:var(--bg);border-radius:40px 40px 0 0;margin:0 -16px;padding:28px 18px 132px;min-height:72vh;box-shadow:0 -6px 24px rgba(125,42,66,.10)}
body.gate #view{background:none;border-radius:0;margin:0;padding:0;min-height:0}
body.gate #sheet{min-height:62vh}

/* Manhã / Noite em destaque: trilha com contorno e o período escolhido em cor cheia */
.seg[role="group"]{background:var(--surface);border:1px solid var(--line);padding:5px;box-shadow:0 2px 10px rgba(125,42,66,.10)}
.seg[role="group"] button{min-height:52px;font-size:1.0625rem}
.seg[role="group"] button[aria-pressed="true"]{background:var(--deep);color:#fff;box-shadow:0 2px 8px rgba(125,42,66,.35)}
.seg[role="group"] button[aria-pressed="true"] svg{color:#fff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .seg[role="group"] button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}:root:not([data-theme="light"]) .seg[role="group"] button[aria-pressed="true"] svg{color:var(--accent-ink)}}
:root[data-theme="dark"] .seg[role="group"] button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
:root[data-theme="dark"] .seg[role="group"] button[aria-pressed="true"] svg{color:var(--accent-ink)}

/* cartões dos produtos com destaque suave: sombra leve e contorno um pouco mais marcado */
ul.card.steps>li,ul.card.rl>li{box-shadow:0 4px 14px rgba(125,42,66,.12);border-color:color-mix(in srgb,var(--accent) 16%,var(--line))}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) ul.card.steps>li,:root:not([data-theme="light"]) ul.card.rl>li{box-shadow:0 4px 16px rgba(0,0,0,.35);border-color:color-mix(in srgb,var(--accent) 22%,var(--line))}}
:root[data-theme="dark"] ul.card.steps>li,:root[data-theme="dark"] ul.card.rl>li{box-shadow:0 4px 16px rgba(0,0,0,.35);border-color:color-mix(in srgb,var(--accent) 22%,var(--line))}

/* menu do rodapé que some sozinho ao rolar para baixo */
.tabbar{transition:transform .28s ease,opacity .28s ease}
.tabbar.oculta{transform:translate(-50%,170%);opacity:0;pointer-events:none}
@media (prefers-reduced-motion: reduce){.tabbar{transition:none}}
@media (min-width:1024px){body.panel .tabbar.oculta{transform:none;opacity:1;pointer-events:auto}}

/* menu encostado na base da tela: cantos arredondados só em cima. Pouca folga embaixo: no iPhone a área do indicador de início (34 px) deixava um vazio grande; ficam só 14 px */
:root{--barpad:max(6px,calc(env(safe-area-inset-bottom,0px) - 20px))}
.tabbar{bottom:0;width:min(560px,100%);border-radius:30px 30px 0 0;border-bottom:0;padding-bottom:var(--barpad);box-shadow:0 -6px 20px rgba(125,42,66,.14)}
.tabbar.oculta{transform:translate(-50%,115%)}
.tabs button{min-height:54px}
body:not(.panel) #sheet{padding-bottom:88px}
.pubbar{bottom:calc(62px + var(--barpad))}
.qnav{bottom:calc(62px + var(--barpad))}
@media (min-width:1024px){body.panel .tabbar{bottom:0;width:224px;border-radius:0;transform:none}}

/* questionário: espaço no fim para a barra Voltar/Continuar e o menu não cobrirem o último item */
.qroot{padding-bottom:calc(84px + var(--barpad))}
body:not(.panel) #sheet:has(.qroot){padding-bottom:140px}

/* filtros da lista de produtos: duas colunas também no celular */
.pfg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pfg .field{min-width:0}
.pfg select{width:100%;min-width:0}
.mine{display:grid;gap:6px;margin-top:4px}
.mine .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mine .pt{width:56px;height:56px;border-radius:10px;object-fit:cover;cursor:zoom-in}
.mine .muted{margin:0;font-size:.8125rem}
/* painel: produto escolhido com foto e catálogo com fotos para escolher */
.ppr{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.ppc{display:flex;align-items:center;gap:10px;min-width:0}
.ppc .pt{width:64px;height:64px;cursor:zoom-in}
.ppc>span{display:grid;gap:2px;min-width:0}
.ppc .muted{font-size:.8125rem}
.ph0{display:grid;place-items:center;font-size:.6875rem;color:var(--ink-2);background:var(--surface-2);text-align:center}
.ppk{display:grid;gap:8px;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
#ppk-list{max-height:480px;overflow:auto;display:grid;gap:6px}
.ppk h4{margin:6px 0 0;font-size:.8125rem;font-weight:600;color:var(--ink-2)}
.ppg{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.ppi{display:grid;align-content:start;gap:3px;text-align:left;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.ppi img,.ppi .ph0{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;background:var(--surface-2)}
.ppi b{font-size:.8125rem;font-weight:600;line-height:1.25}
.ppi .muted{font-size:.75rem;line-height:1.25}
.ppi[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
/* produto da cliente: marca nos passos e lista no painel */
.tagme{display:inline-block;font-size:.6875rem;font-weight:600;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:1px 8px;margin-left:6px;vertical-align:1px}
.cmeus ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cmeus li{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:start;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.cmeus li .pt{width:64px;height:64px;cursor:zoom-in}
.cmeus li>span{display:grid;gap:4px}
.cmeus .muted{font-size:.8125rem;margin:0}
/* painel: fotos de produtos do questionário para usar no passo */
.qfpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin-top:4px}
/* lupa para ampliar a foto no seletor do painel */
.ppw{position:relative;display:grid}
.ppw .ppi{height:100%}
.ppz{position:absolute;top:10px;right:10px;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;cursor:zoom-in}
.ppz svg{width:18px;height:18px}
/* lista de clientes em categorias que abrem e fecham */
.clg{border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.clg+.clg{margin-top:10px}
.clg.warn{border-color:var(--warn)}
.clgh{width:100%;display:flex;align-items:center;gap:10px;padding:14px 16px;background:none;border:0;color:var(--ink);font:inherit;font-weight:600;text-align:left;cursor:pointer}
.clg.warn .clgh{color:var(--warn)}
.clgh .cnt{margin-left:auto;font-size:.8125rem;font-weight:600;padding:2px 10px;border-radius:999px;background:var(--surface-2);color:var(--ink-2)}
.clgh svg{width:18px;height:18px;color:var(--ink-2);flex:none}
.clgh[aria-expanded="true"] svg{transform:rotate(180deg)}
.clgl{list-style:none;margin:0;padding:0 8px 8px}
.clge{margin:0;padding:0 16px 14px}
.clgb{padding:0 12px 12px}
.clgb>.card{box-shadow:none;border:0;padding:0;background:none}
.clgl.stc{padding:0 12px 4px}
.clgl.stc>li.card{box-shadow:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:12px 4px;background:none}
.clgl.stc>li.card:first-child{border-top:0}
.clr{width:100%;display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 8px;border:0;border-top:1px solid var(--line);background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;border-radius:0}
.clgl li:first-child .clr{border-top:0}
.clr:hover{background:var(--surface-2)}
.clr .rav{width:36px;height:36px}
.clrt{display:grid;min-width:0}
.clrt b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clrt .muted,.clrm .muted{font-size:.8125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clrm{display:flex;gap:6px;align-items:center;justify-content:flex-end;min-width:0}
.clrn{display:flex;align-items:center;gap:8px;min-width:0}
.clrn b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.clrn .tag{flex:none}
.clwa{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;text-decoration:none}
.clwa .i{width:16px;height:16px;flex:none}
@media (max-width:480px){.clwa .lbl{display:none}}
/* topo da ficha: voltar, caminho e "Ir para outra cliente" */
.backrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.crumb{font-size:.875rem}
.cjump{position:relative;margin-left:auto;min-width:220px}
.cjump input{min-height:40px;padding:6px 12px}
.cjl{position:absolute;z-index:5;top:calc(100% + 4px);right:0;left:0;list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cjl:empty{display:none}
.cjl li>button{width:100%;display:flex;justify-content:space-between;gap:8px;padding:10px 12px;border:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.cjl li>button:hover{background:var(--surface-2)}
.cjl li.muted{padding:10px 12px}
/* PC: rotina com os passos à esquerda e o catálogo com fotos à direita */
.rsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,1fr);gap:20px;align-items:start}
.rsl{display:grid;gap:12px;min-width:0}
.rside{position:sticky;top:16px;max-height:calc(100vh - 110px);overflow:auto;border-radius:20px}
.rside #ppk-list{max-height:none}
.rside .ppk{border:0;padding:0;background:none}
/* ficha: rotina como está no app da cliente */
.cmeus h4{margin:8px 0 0;font-size:.875rem;font-weight:600;color:var(--ink-2)}
.cmeus li.mudou{border-color:var(--accent)}
.tagmud{display:inline-block;justify-self:start;font-size:.75rem;font-weight:600;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:2px 9px;margin-top:2px}

/* abertura: a logo fica na frente até a primeira tela pronta (splashOff no app.js) */
#splash{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--bg);transition:opacity .3s ease;animation:splash-fim .3s ease 10s forwards}
@keyframes splash-fim{to{opacity:0;visibility:hidden;pointer-events:none}} /* se o app.js não chegar, a logo sai sozinha */
#splash img{width:min(240px,64vw);height:auto}
#splash.sai{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){#splash{transition:none}}
/* Ajuda da assistente (aba Ajuda) */
.hsec .in{font-size:.9375rem;line-height:1.5}
.hsec .in p{margin:0}
.hls{margin:0;padding-left:20px;display:grid;gap:6px}
.htw{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:12px}
.htb{border-collapse:collapse;width:100%;min-width:520px;font-size:.875rem}
.htb th,.htb td{padding:8px 10px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.htb thead th{border-top:0;background:var(--surface-2);font-weight:600}
.hbt{font-weight:600;color:var(--accent,var(--ink));white-space:nowrap}
.hpr{padding:10px 12px;border-radius:12px;background:var(--surface-2)}
.hmsg summary{cursor:pointer;font-weight:600;color:var(--accent,var(--ink))}
.hmsg p{margin:6px 0 0;padding:10px 12px;border-radius:12px;background:var(--surface-2);white-space:pre-wrap;font-size:.875rem}
.hck{font:inherit;font-size:.8125rem;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.hck.on{background:var(--surface-2);font-weight:600}
.hfin li.on{font-weight:600}
.hnew{border-color:var(--accent,var(--line))}
.hlink{margin-top:6px}
.tabbar button[data-new]{position:relative}
.tabbar button[data-new]::after{content:"";position:absolute;top:6px;left:calc(50% + 8px);width:8px;height:8px;border-radius:50%;background:var(--accent,#c0395a)}
.hsec summary .badge{margin-left:8px}
/* celular: cada linha da tabela vira um cartão, com o nome da coluna em cima de cada valor */
@media (max-width:640px){
  .htw{border:0;overflow:visible}
  .htb{min-width:0}
  .htb thead{display:none}
  .htb,.htb tbody,.htb tr,.htb td{display:block;width:auto}
  .htb tr{border:1px solid var(--line);border-radius:12px;padding:4px 12px;margin-bottom:8px;background:var(--surface)}
  .htb td{border-top:0;padding:6px 0}
  .htb td+td{border-top:1px dashed var(--line)}
  .htb td:first-child{font-weight:600}
  .htb td+td::before{content:attr(data-l);display:block;font-size:.75rem;font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
}
/* Ajuda: resultados da busca */
.hres h3{margin:0}
.hhit{padding:10px 12px;border-radius:12px;background:var(--surface-2);font-size:.9375rem;line-height:1.5;display:grid;gap:6px}
.hhit .cap{display:block;font-size:.75rem;font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em}
.hhit details.hmsg p{background:var(--surface)}
.hsec mark,.hhit mark{background:var(--accent-soft);color:inherit;border-radius:3px;padding:0 2px;box-shadow:inset 0 -2px 0 var(--accent);font-weight:600}
/* Relatório em três partes (27/10): visão geral, precisa de atenção e conversão */
.relsec>h3{margin:0}
.relsec .clg+.clg{margin-top:8px}
.stats .stat small{font-size:.75rem;color:var(--ink-2);line-height:1.35}
.rpill{flex:none;font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap;line-height:1.3}
.rpill.late{background:var(--warn);color:#fff}
.rpill.today{background:var(--accent);color:var(--accent-ink)}
.rpill.offer{background:var(--accent-soft);color:var(--accent)}
.rpill.renew{background:var(--surface-2);color:var(--ink)}
.rpill.wait{background:transparent;color:var(--ink-2);border:1px dashed var(--line)}
.rblk0 .clgh{color:var(--ink-2);cursor:default}
.rblk0 .rpill{opacity:1;background:transparent;color:var(--ink-2);border:1px dashed var(--line)}
.rblk0 .clgh svg{visibility:hidden}
.relsec .rrows{padding:0 8px 8px}
.rfun{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(60px,2fr) 76px;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.rfun:first-child{border-top:0}
.rfun .bar{height:10px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.rfun .bar i{display:block;height:100%;background:var(--brand);border-radius:999px}
.rfun b{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
@media (max-width:480px){.rfun{grid-template-columns:minmax(0,1fr) auto}.rfun .bar{grid-column:1/-1;grid-row:2}}
@media (max-width:480px){.relsec .stats{grid-template-columns:repeat(2,minmax(0,1fr))}.clrn{flex-wrap:wrap;row-gap:2px}}
/* dentro do Relatório novo as listas ficam numa coluna e o detalhe abre na própria linha (sem o painel ao lado) */
.relsec .relsplit{display:block}
.relsec .reldet{display:none}
.relsec .rrows{grid-template-columns:minmax(0,1fr)}
.relsec .rrow .rdet{display:grid}
.relsec .rrow .rhead .i{display:block}
/* sino da Daiane: lista do "Precisa de você" */
.bellpends{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.bellpend{width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:none;color:var(--ink);font:inherit;font-weight:600;text-align:left;cursor:pointer}
.bellpend .cnt{margin-left:auto;font-size:.8125rem;padding:2px 10px;border-radius:999px;background:var(--surface-2);color:var(--ink-2)}
/* contatos do quiz em linhas (27/10) */
.qrows{list-style:none;margin:0;padding:0 8px 8px}
.qrow{border-top:1px solid var(--line)}
.qrows .qrow:first-child{border-top:0}
.qline{display:flex;align-items:center;gap:10px;padding:10px 6px}
.qt{flex:1;min-width:0;display:grid;gap:3px}
.qt>.muted{font-size:.8125rem;overflow:hidden;text-overflow:ellipsis}
.qdots{display:flex;gap:4px;margin-top:2px}
.qdots i{width:22px;height:6px;border-radius:999px;border:1px solid var(--line);background:transparent}
.qdots i.f{background:#4caf7a;border-color:#4caf7a}
.qdots i.h{background:var(--brand);border-color:var(--brand)}
.qdots i.n{border-color:var(--brand)}
.qmore{flex:none;min-width:40px;font-size:1.1rem;line-height:1}
.qline .btn.pri{flex:none;white-space:nowrap}
.qmais{padding:0 6px 12px;gap:8px}
@media (max-width:480px){.qline{flex-wrap:wrap;row-gap:8px}.qt{flex-basis:100%}.qline .btn.pri{margin-left:auto}.qline .qmore:first-of-type{margin-left:auto}.qline .btn.pri+.qmore{margin-left:0}}