:root{--bg:#F8F5F7;--ink:#2A1B2E;--ink2:#5A4A5E;--muted:#8A7C8D;--red:#C8364B;--red-soft:#F6DCE0;--teal:#2F8F83;--teal-soft:#D8EFEB;--lav:#B9A7D6;--line:#E7E0E6;--card:#fff;
  --display:"Gloock",Georgia,serif;--sans:"Outfit",system-ui,sans-serif}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
h1,h2{font-family:var(--display);font-weight:400;line-height:1.08;margin:0 0 .4em}h1{font-size:2.1rem}h2{font-size:1.4rem;margin-top:1.4em}
.muted{color:var(--muted)}.small{font-size:.86rem}
.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));background:rgba(248,245,247,.92);backdrop-filter:blur(10px)}
.logo{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink);font:400 1.5rem var(--display);margin-right:auto}.logo svg{width:28px;height:28px}
.private{font-size:.78rem;color:var(--teal);background:var(--teal-soft);border-radius:999px;padding:3px 10px;font-weight:600}
.icon-btn{border:0;background:#fff;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.icon-btn svg,.tabs svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:380px){.private{display:none}}
main{max-width:640px;margin:0 auto;padding:10px 16px 110px}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:center;gap:6px;background:#fff;border-top:1px solid var(--line);padding:6px 8px max(6px,env(safe-area-inset-bottom))}
.tabs button{flex:1;max-width:170px;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.8rem;font-weight:600;color:var(--muted);padding:6px;border-radius:12px;cursor:pointer}
.tabs button[aria-current]{color:var(--ink);background:var(--red-soft)}
/* ring */
.ring-wrap{position:relative;max-width:340px;margin:6px auto 0}
.ring{width:100%;height:auto;display:block}
.ring .p{fill:#E9E2E8;transition:fill .3s}
.ring .k-period{fill:var(--red)}.ring .k-predicted{fill:#fff;stroke:var(--red);stroke-width:2.2;stroke-dasharray:3 2.5}.ring .k-spotting{fill:#E7A3AE}
.ring .k-fertile{fill:#9FD3CB}.ring .k-ovulation{fill:var(--teal)}
.ring .today{stroke:var(--ink);stroke-width:3}
.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.ring-label{margin:0;color:var(--muted);font-weight:600;font-size:.9rem}
.ring-day{margin:2px 0;font:400 2.8rem/1 var(--display)}
.ring-sub{margin:0;color:var(--ink2)}
@media(prefers-reduced-motion:no-preference){.ring .p{animation:bloom .5s ease-out both}.ring .p:nth-child(4n){animation-delay:.08s}.ring .p:nth-child(4n+1){animation-delay:.16s}.ring .p:nth-child(4n+2){animation-delay:.24s}}
@keyframes bloom{from{opacity:0}}
.phase{background:#fff;border-radius:18px;padding:12px 16px;margin:14px 0}.warn{color:var(--red)}
.quick{display:flex;flex-direction:column;gap:8px}
.cta{display:block;width:100%;border:0;border-radius:16px;background:var(--red);color:#fff;font-weight:600;padding:15px;cursor:pointer;font-size:1rem}
.cta:hover{background:#AE2A3F}.cta:disabled{background:var(--red-soft);color:var(--red);cursor:default}
.ghost{display:block;width:100%;border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:12px;font-weight:600;cursor:pointer;text-align:center}
.ghost.red{color:var(--red)}
.legend{list-style:none;padding:0;margin:18px 0 8px;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.86rem;color:var(--ink2)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.legend .k-period{background:var(--red)}.legend .k-predicted{border:2px dashed var(--red)}.legend .k-fertile{background:#9FD3CB}.legend .k-ovulation{background:var(--teal)}
.note{color:var(--muted);font-size:.84rem}
/* calendar */
.cal-head{display:flex;align-items:center;justify-content:space-between}.cal-head h1{margin:0;font-size:1.7rem}
.nav{border:0;background:#fff;width:42px;height:42px;border-radius:50%;font-size:1.4rem;cursor:pointer}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:14px}
.dow{text-align:center;font-size:.78rem;color:var(--muted);font-weight:600;padding-bottom:4px}
.d{position:relative;aspect-ratio:1;border:0;border-radius:50%;background:#fff;font-weight:500;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center}
.d.k-period{background:var(--red);color:#fff}.d.k-spotting{background:#F2C5CC}.d.k-predicted{background:#fff;box-shadow:inset 0 0 0 2px var(--red);color:var(--red)}
.d.k-fertile{background:var(--teal-soft)}.d.k-ovulation{background:var(--teal);color:#fff}
.d.today{outline:2.5px solid var(--ink);outline-offset:1px}
.marks{position:absolute;bottom:5px;display:flex;gap:2px}.marks i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.7}
.hint{color:var(--muted);font-size:.86rem;text-align:center}
/* insights */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stats div{background:#fff;border-radius:16px;padding:14px}.stats b{display:block;font:400 2rem var(--display)}.stats span{color:var(--muted);font-size:.86rem}
.chart{display:flex;align-items:flex-end;gap:6px;height:170px;background:#fff;border-radius:18px;padding:14px 12px 8px}
.cbar{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;min-width:0}
.cbar i{width:100%;max-width:28px;background:var(--lav);border-radius:6px 6px 2px 2px}.cbar .v{font-size:.78rem;font-weight:600}.cbar .lb{font-size:.7rem;color:var(--muted)}
.sym{width:100%;border-collapse:collapse;background:#fff;border-radius:16px;overflow:hidden}
.sym th,.sym td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);font-size:.92rem}.sym th{color:var(--muted);font-weight:600}
.sym td{text-transform:capitalize}
.data-actions{display:grid;gap:8px}
.file{position:relative}.file input{position:absolute;inset:0;opacity:0;cursor:pointer}
/* sheet */
.sheet{border:0;border-radius:22px;padding:22px 20px;width:min(94vw,520px);max-height:90vh;background:#fff;color:var(--ink)}
.sheet::backdrop{background:rgba(42,27,46,.45)}
.sheet h2{margin-top:0}
.lbl{font-weight:600;margin:14px 0 6px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;cursor:pointer;font-size:.9rem}
.chips[data-group=flow] .chip.on{background:var(--red);border-color:var(--red);color:#fff}
.chips[data-group=symptoms] .chip.on{background:var(--lav);border-color:var(--lav);color:var(--ink)}
.chips[data-group=mood] .chip.on{background:var(--teal);border-color:var(--teal);color:#fff}
.field{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:.9rem;margin:12px 0}
.field input,.field textarea,.field select{border:1.5px solid var(--line);border-radius:12px;padding:10px;font:inherit;font-weight:400;background:#fff;color:var(--ink)}
.unit{display:flex;align-items:center;gap:8px;font-weight:400}.unit input{width:100px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row{display:grid;grid-template-columns:1fr 2fr;gap:10px;margin-top:10px}
.sheet hr{border:0;border-top:1px solid var(--line);margin:16px 0}
.danger summary{cursor:pointer;color:var(--red);font-weight:600}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translate(-50%,16px);background:var(--ink);color:#fff;padding:11px 16px;border-radius:12px;opacity:0;pointer-events:none;transition:.25s;max-width:92vw;z-index:50}
.toast.on{opacity:1;transform:translate(-50%,0)}
.print-only{display:none}
@media print{body>*:not(#print){display:none!important}.print-only{display:block!important;font:12pt/1.5 Georgia,serif;color:#000}
  .print-only table{border-collapse:collapse;width:100%;margin:8px 0 16px}.print-only th,.print-only td{border:1px solid #999;padding:5px 8px;text-align:left}}