:root{
  --bg:#FBF6F1; --card:#FFFFFF; --ink:#3A2A2A; --muted:#7D6B66; --line:#EADFD6;
  --rose:#C2675A; --rose-soft:#F6E2DC; --sage:#6F8F7A; --sage-soft:#E3EDE6;
  --gold:#C99A4B; --gold-soft:#F7ECD8; --alert:#B5473A; --alert-soft:#FBE4DF;
  --r:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.55}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.2}
h1{font-size:1.9rem} h2{font-size:1.4rem} h3{font-size:1.1rem}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:var(--rose)}
.app{max-width:560px;margin:0 auto;padding:20px 18px 110px}
.view{display:none;animation:fade .35s ease} .view.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.brand svg{flex:none}
.brand b{font-family:Fraunces,serif;font-size:1.35rem;font-weight:600;letter-spacing:.2px}
.brand span{display:block;font-size:.78rem;color:var(--muted);margin-top:-2px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:14px}
.hero{background:linear-gradient(160deg,#F6E2DC 0%,#FBF1E6 60%,#E9F0EA 100%);border:none;padding:26px 22px}
.hero p{color:var(--muted);margin:10px 0 18px}
.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--rose);color:#fff;border-radius:999px;padding:13px 22px;font-weight:600;width:100%;transition:transform .15s,background .15s}
.btn:active{transform:scale(.98)} .btn:hover{background:#AE584C}
.btn.ghost{background:transparent;color:var(--rose);border:1.5px solid var(--rose)}
.btn.sage{background:var(--sage)}
.row{display:flex;gap:10px}
.muted{color:var(--muted)} .small{font-size:.85rem}
.pill{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.4px;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--rose-soft);color:var(--rose)}
.pill.sage{background:var(--sage-soft);color:var(--sage)} .pill.gold{background:var(--gold-soft);color:#9A7230}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;text-align:left}
.tile b{display:block;font-size:.95rem;margin:6px 0 2px}
.tile small{color:var(--muted);font-size:.8rem;line-height:1.35;display:block}
.disc{font-size:.8rem;color:var(--muted);background:#F4ECE4;border-radius:12px;padding:12px 14px;margin-top:8px}

/* quiz */
.progress{height:6px;background:var(--line);border-radius:9px;overflow:hidden;margin:6px 0 20px}
.progress i{display:block;height:100%;background:var(--rose);border-radius:9px;transition:width .35s}
.qstep{font-size:.8rem;color:var(--muted);display:flex;justify-content:space-between}
.qtitle{font-family:Fraunces,serif;font-size:1.35rem;font-weight:600;margin-bottom:6px}
.qhelp{color:var(--muted);font-size:.9rem;margin-bottom:16px}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:10px;transition:border-color .15s,background .15s}
.opt .mk{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid #CDBDB2;display:grid;place-items:center}
.opt.multi .mk{border-radius:6px}
.opt.sel{border-color:var(--rose);background:#FFF8F5}
.opt.sel .mk{border-color:var(--rose);background:var(--rose)}
.opt.sel .mk::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
.opt.multi.sel .mk::after{width:9px;height:5px;border-radius:0;background:none;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.qnav{display:flex;gap:10px;margin-top:18px}
.qnav .btn{flex:1}

/* results */
.alert{background:var(--alert-soft);border:1px solid #F1C6BD;border-radius:var(--r);padding:16px 18px;margin-bottom:14px}
.alert h3{color:var(--alert);margin-bottom:4px}
.ok{background:var(--sage-soft);border:1px solid #C9DCCF}
.ok h3{color:var(--sage)}
.hyp{padding:0;overflow:hidden}
.hyp-h{display:flex;align-items:center;gap:12px;width:100%;padding:16px 18px;text-align:left}
.hyp-h .ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:1.25rem;background:var(--rose-soft)}
.hyp-h .tt{flex:1}
.hyp-h .tt b{display:block;font-size:1rem}
.meter{display:flex;gap:3px;margin-top:6px}
.meter i{width:22px;height:5px;border-radius:4px;background:var(--line)}
.meter i.on{background:var(--rose)}
.chev{transition:transform .2s;color:var(--muted)}
.hyp.open .chev{transform:rotate(180deg)}
.hyp-b{display:none;padding:0 18px 18px;border-top:1px solid var(--line)}
.hyp.open .hyp-b{display:block}
.hyp-b h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:16px 0 6px}
.hyp-b ul{padding-left:18px} .hyp-b li{margin-bottom:5px}
.why li{color:var(--rose)} .why li span{color:var(--ink)}
.mtcbox{background:var(--sage-soft);border-radius:12px;padding:12px 14px;margin-top:14px;font-size:.92rem}
.mtcbox b{color:var(--sage)}
.bar{display:flex;align-items:center;gap:10px;margin:8px 0}
.bar span{width:150px;font-size:.88rem}
.bar div{flex:1;height:8px;background:var(--line);border-radius:9px;overflow:hidden}
.bar div i{display:block;height:100%;background:var(--sage);border-radius:9px}
.checklist li{list-style:none;display:flex;gap:10px;align-items:flex-start;margin-bottom:8px}
.checklist .cb{flex:none;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-size:.75rem;margin-top:2px}
.cb.done{background:var(--sage);color:#fff} .cb.todo{border:2px solid var(--gold)}
.cta{background:linear-gradient(150deg,#3A2A2A,#5B3E39);color:#fff;border:none}
.cta p{color:#E9D9D2;margin:8px 0 16px;font-size:.93rem}
.cta .btn{background:#fff;color:var(--ink)}

/* library */
.tabs{display:flex;gap:8px;overflow-x:auto;margin-bottom:16px;padding-bottom:4px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;padding:8px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:.88rem;font-weight:500}
.tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.art{padding:0;overflow:hidden}
.art .hyp-b p{margin:10px 0}

/* cycle */
label.f{display:block;font-size:.85rem;font-weight:600;margin:12px 0 6px}
input[type=date],input[type=number]{width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);font:inherit;background:#fff;color:var(--ink)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:12px;text-align:center;font-size:.82rem}
.cal .h{color:var(--muted);font-size:.7rem;font-weight:600;padding:4px 0}
.cal .d{padding:8px 0;border-radius:9px}
.d.men{background:var(--rose-soft);color:var(--rose);font-weight:600}
.d.fer{background:var(--sage-soft);color:var(--sage);font-weight:600}
.d.ov{background:var(--sage);color:#fff;font-weight:700}
.d.today{outline:2px solid var(--ink)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.78rem;color:var(--muted);margin-top:10px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}

/* temperatura basal */
.csub{display:none} .csub.on{display:block}
.inp{width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);font:inherit;background:#fff;color:var(--ink)}
select.inp{appearance:none}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.stat{background:var(--bg);border-radius:12px;padding:10px 12px}
.stat small{display:block;font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.stat b{font-size:1.15rem;font-family:Fraunces,serif}
.idx{display:flex;align-items:center;gap:12px;border-radius:14px;padding:14px;margin-top:4px}
.idx .dot{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:1.1rem}
.idx>div>b{display:block}
.chart{width:100%;height:auto;display:block;margin-top:8px}
.reads{max-height:260px;overflow:auto;margin-top:6px}
.reads div{display:flex;justify-content:space-between;align-items:center;padding:8px 2px;border-bottom:1px solid var(--line);font-size:.88rem}
.reads button{color:var(--muted);padding:2px 8px;font-size:1rem}
.chip{display:inline-block;padding:6px 12px;border-radius:999px;border:1px solid var(--line);font-size:.8rem;margin:0 6px 6px 0;background:#fff}
.chip.on{background:var(--sage);color:#fff;border-color:var(--sage)}
.step{display:flex;gap:12px;margin-bottom:14px}
.step .n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--rose-soft);color:var(--rose);font-weight:700;display:grid;place-items:center;font-size:.85rem}

/* nav */
nav{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
nav .in{max-width:560px;margin:0 auto;display:flex;justify-content:space-around}
nav button{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.7rem;color:var(--muted);padding:6px 10px;border-radius:12px}
nav button.on{color:var(--rose)}
nav svg{width:22px;height:22px}

/* ===== Hoje (acompanhamento do ciclo) ===== */
.lnk{color:var(--rose);font-weight:600;font-size:.85rem;padding:0;text-decoration:underline;text-underline-offset:2px}
.nova{position:relative;display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-left:4px solid;border-radius:16px;padding:14px 36px 14px 14px;margin-bottom:14px}
.nova .ic{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:1.2rem}
.nova b{display:block;font-size:.95rem;margin-bottom:2px}
.nova .small{display:block;margin-bottom:6px}
.x{position:absolute;top:6px;right:8px;width:32px;height:32px;font-size:1.4rem;line-height:1;color:var(--muted)}
.semana{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:12px}
.dia{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 10px;border-radius:14px}
.dia small{font-size:.66rem;font-weight:600;color:var(--muted);letter-spacing:.3px}
.dia b{font-size:1.1rem;font-weight:600}
.dia i{width:8px;height:8px;border-radius:50%;margin-top:2px}
.dia em{position:absolute;top:4px;right:4px;font-style:normal;font-size:.6rem;color:var(--rose)}
.dia.on{background:#fff;box-shadow:0 1px 0 var(--line),0 0 0 1.5px var(--line)}
.hojecard{padding:16px 16px 12px}
.anel{position:relative;width:220px;height:220px;margin:4px auto 6px}
.anel svg{display:block;max-width:100%}
.centro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.centro small{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.centro b{font-family:Fraunces,Georgia,serif;font-size:2.3rem;font-weight:600;line-height:1.1}
.centro span{font-size:.85rem;font-weight:600}
.mt{text-align:center;margin-top:4px}
.acoes{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:16px}
.acoes button{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.74rem;color:var(--ink)}
.bola{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:0 2px 6px rgba(58,42,42,.06)}
.bola.on{color:var(--rose);border-color:var(--rose)}
.sec{display:flex;justify-content:space-between;align-items:baseline;margin:18px 0 10px}
.hscroll{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;margin:0 -18px 14px;padding-left:18px;padding-right:18px;scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.fcard{flex:none;width:128px;height:128px;border-radius:16px;padding:14px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;scroll-snap-align:start;border:1px solid rgba(58,42,42,.06)}
.fcard span{font-size:1.6rem}
.fcard b{font-size:.92rem;line-height:1.25}
.sheet{position:fixed;inset:0;z-index:100;display:none}
.sheet.on{display:block}
.sheet-bg{position:absolute;inset:0;background:rgba(58,42,42,.35);animation:fade .2s ease}
.sheet-p{position:absolute;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;max-height:88vh;overflow-y:auto;background:var(--bg);border-radius:22px 22px 0 0;padding:22px 18px calc(22px + env(safe-area-inset-bottom));animation:sobe .25s ease}
@keyframes sobe{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.lista{padding-left:20px;margin-top:8px}
.lista li{margin-bottom:6px}