:root{--rose-50: #fff1f4;--rose-100: #ffe4ea;--rose-200: #fecdd8;--rose-400: #fb7185;--rose-500: #f43f5e;--rose-600: #e11d63;--rose-700: #be123c;--leaf-100: #d1fae5;--leaf-600: #059669;--leaf-700: #047857;--teal-600: #0d9488;--bg: #fdf5f7;--surface: #ffffff;--surface-2: #fff8fa;--text: #3d1a26;--text-2: #8a5c6b;--muted: #a98b96;--border: #f6dce3;--shadow: 0 8px 28px rgba(190, 18, 60, .09);--nav-bg: rgba(255, 255, 255, .88);--danger: #dc2626;--danger-bg: #fee2e2;--focus: 2px solid #e11d63;color-scheme:light}[data-theme=dark]{--bg: #17121a;--surface: #241c28;--surface-2: #2b2230;--text: #f6e8ee;--text-2: #c9a8b6;--muted: #927e8a;--border: #3a2f40;--shadow: 0 8px 28px rgba(0, 0, 0, .35);--nav-bg: rgba(30, 23, 34, .9);--rose-50: #33202a;--rose-100: #3d2430;--rose-200: #553042;--danger-bg: #3e2222;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";background:var(--bg);color:var(--text);line-height:1.45;min-height:100dvh}#root{min-height:100dvh}.app{max-width:520px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding-bottom:calc(76px + env(safe-area-inset-bottom))}.topbar{display:flex;align-items:center;gap:10px;padding:calc(14px + env(safe-area-inset-top)) 18px 10px;position:sticky;top:0;z-index:20;background:linear-gradient(var(--bg),var(--bg))}.topbar .logo{width:34px;height:34px;border-radius:10px;flex:none}.topbar h1{font-size:17px;font-weight:700;margin:0;letter-spacing:-.01em}.topbar .sub{font-size:11.5px;color:var(--text-2);margin-top:-2px}.screen{flex:1;padding:6px 18px 18px;animation:fadein .18s ease}@keyframes fadein{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}.card h3{margin:0 0 10px;font-size:14px;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.06em}.hero{border-radius:24px;padding:22px 20px;color:#fff;background:linear-gradient(135deg,var(--rose-500),var(--rose-700));box-shadow:0 14px 34px #e11d6359;margin-bottom:14px;position:relative;overflow:hidden}.hero .ring{position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;background:#ffffff1f}.hero .ring.r2{right:-30px;top:-110px}.hero .cycle-day{font-size:56px;font-weight:800;line-height:1;letter-spacing:-.03em}.hero .cycle-day span{font-size:15px;font-weight:600;opacity:.85;margin-left:6px;letter-spacing:0}.hero .phase{display:inline-block;background:#fff3;border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:600;margin-top:10px}.hero .since{font-size:12.5px;opacity:.85;margin-top:10px}.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:600;cursor:pointer;transition:all .14s ease;-webkit-user-select:none;user-select:none}.chip.on{background:var(--rose-600);border-color:var(--rose-600);color:#fff}.chip:focus-visible,button:focus-visible,.day:focus-visible,.seg button:focus-visible{outline:var(--focus);outline-offset:2px}.stat-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:14px}.stat{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:12px 10px;text-align:center;box-shadow:var(--shadow)}.stat .v{font-size:19px;font-weight:800;color:var(--rose-600);white-space:nowrap}.stat .l{font-size:11px;color:var(--text-2);font-weight:600;margin-top:2px;line-height:1.25}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:14px;padding:13px 18px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;transition:transform .12s ease,opacity .12s ease;width:100%}.btn:active{transform:scale(.98)}.btn.primary{background:linear-gradient(135deg,var(--rose-500),var(--rose-600));color:#fff;box-shadow:0 8px 20px #e11d634d}.btn.ghost{background:var(--surface-2);color:var(--text);border:1px solid var(--border);box-shadow:none}.btn.danger{background:var(--danger-bg);color:var(--danger);box-shadow:none}.btn.sm{width:auto;padding:9px 16px;font-size:13.5px;border-radius:11px}.banner{display:flex;gap:10px;align-items:flex-start;background:var(--rose-100);border:1px solid var(--rose-200);color:var(--rose-700);border-radius:16px;padding:12px 14px;font-size:13.5px;font-weight:500;margin-bottom:14px}.empty{text-align:center;padding:34px 18px;color:var(--text-2);font-size:14px}.empty .big{font-size:42px;margin-bottom:10px}.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.cal-head .m{font-size:16.5px;font-weight:800}.cal-nav{background:var(--surface-2);border:1px solid var(--border);width:38px;height:38px;border-radius:12px;font-size:18px;font-weight:700;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center}.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.cal-grid .wd{text-align:center;font-size:11px;font-weight:700;color:var(--muted);padding:6px 0 8px}.day{position:relative;aspect-ratio:1;border-radius:12px;border:1.5px solid transparent;background:var(--surface-2);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--text);padding:0;font-family:inherit}.day.out{opacity:.32}.day.today{border-color:var(--rose-600)}.day.period{background:var(--rose-600);color:#fff}.day.predicted{background:var(--rose-100);color:var(--rose-700);border:1.5px dashed var(--rose-400)}.day.fertile{background:var(--leaf-100);color:var(--leaf-700)}.day.period.fertile,.day.predicted.fertile{background:var(--rose-600);color:#fff}.day .ovu{position:absolute;bottom:5px;width:5px;height:5px;border-radius:50%;background:var(--teal-600)}.day.period .ovu{background:#fff}.legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;font-size:12px;color:var(--text-2);font-weight:600}.legend .li{display:inline-flex;align-items:center;gap:6px}.legend .sw{width:14px;height:14px;border-radius:5px;background:var(--surface-2);border:1px solid var(--border)}.legend .sw.p{background:var(--rose-600);border-color:var(--rose-600)}.legend .sw.pd{background:var(--rose-100);border:1.5px dashed var(--rose-400)}.legend .sw.f{background:var(--leaf-100);border-color:var(--leaf-600)}.legend .sw.o{background:var(--teal-600);border-radius:50%;width:10px;height:10px}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#180a1073;z-index:40;animation:fadein .15s ease;display:flex;align-items:flex-end;justify-content:center}.sheet{background:var(--surface);border-radius:26px 26px 0 0;width:100%;max-width:520px;max-height:88dvh;overflow-y:auto;padding:10px 20px calc(22px + env(safe-area-inset-bottom));animation:slideup .22s cubic-bezier(.2,.9,.3,1)}@keyframes slideup{0%{transform:translateY(40px);opacity:.5}to{transform:none;opacity:1}}.sheet .grab{width:40px;height:4.5px;border-radius:99px;background:var(--border);margin:4px auto 14px}.sheet h2{font-size:18px;margin:0 0 4px}.sheet .sub{font-size:12.5px;color:var(--text-2);margin-bottom:14px;display:flex;gap:8px;flex-wrap:wrap}.tag{font-size:11px;font-weight:700;border-radius:99px;padding:3px 9px}.tag.rose{background:var(--rose-100);color:var(--rose-700)}.tag.leaf{background:var(--leaf-100);color:var(--leaf-700)}.tag.gray{background:var(--surface-2);color:var(--text-2)}.field{margin-bottom:18px}.field>label{display:block;font-size:13px;font-weight:700;color:var(--text-2);margin-bottom:8px}.chips{display:flex;flex-wrap:wrap;gap:8px}textarea.note{width:100%;min-height:84px;border:1.5px solid var(--border);border-radius:14px;padding:12px;font-family:inherit;font-size:14.5px;background:var(--surface-2);color:var(--text);resize:vertical}textarea.note:focus-visible{outline:var(--focus);outline-offset:1px}input[type=date],input[type=time]{border:1.5px solid var(--border);border-radius:14px;padding:12px;font-family:inherit;font-size:15px;background:var(--surface-2);color:var(--text);width:100%}input[type=date]:focus-visible{outline:var(--focus);outline-offset:1px}.flow-row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.flow-opt{border:1.5px solid var(--border);background:var(--surface-2);border-radius:14px;padding:10px 4px;text-align:center;font-size:11.5px;font-weight:700;color:var(--text-2);cursor:pointer}.flow-opt .drops{color:var(--rose-600);font-size:13px;letter-spacing:-1px;margin-bottom:3px;filter:grayscale(1) opacity(.5)}.flow-opt.on{border-color:var(--rose-600);background:var(--rose-100);color:var(--rose-700)}.flow-opt.on .drops{filter:none}.bottomnav{position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;justify-content:center;background:var(--nav-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--border);padding:8px 10px calc(10px + env(safe-area-inset-bottom))}.bottomnav .inner{display:flex;width:100%;max-width:500px}.bottomnav button{flex:1;background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:3px;font-family:inherit;font-size:10.5px;font-weight:700;color:var(--muted);cursor:pointer;padding:4px 0;border-radius:12px}.bottomnav button svg{width:23px;height:23px}.bottomnav button.on{color:var(--rose-600)}.seg{display:grid;grid-template-columns:repeat(3,1fr);background:var(--surface-2);border:1px solid var(--border);border-radius:13px;padding:3px;gap:3px}.seg button{border:none;background:transparent;border-radius:10px;padding:9px 4px;font-family:inherit;font-size:13px;font-weight:700;color:var(--text-2);cursor:pointer}.seg button.on{background:var(--surface);color:var(--rose-700);box-shadow:0 2px 8px #00000014}.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--border)}.set-row:last-child{border-bottom:none}.set-row .t{font-size:14.5px;font-weight:600}.set-row .d{font-size:12px;color:var(--text-2);margin-top:2px;max-width:230px}.stepper{display:flex;align-items:center;gap:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:3px}.stepper button{width:34px;height:34px;border-radius:9px;border:none;background:var(--surface);font-size:17px;font-weight:800;color:var(--rose-700);cursor:pointer;box-shadow:0 1px 4px #00000014}.stepper .val{min-width:44px;text-align:center;font-weight:800;font-size:15px}.switch{position:relative;width:50px;height:30px;border-radius:99px;border:none;background:var(--border);cursor:pointer;transition:background .18s ease;flex:none}.switch:after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px #00000040;transition:transform .18s ease}.switch.on{background:var(--rose-600)}.switch.on:after{transform:translate(20px)}.chart{width:100%;height:auto;display:block}.freq-row{display:flex;align-items:center;gap:10px;margin-bottom:9px}.freq-row .name{width:108px;font-size:13px;font-weight:600;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.freq-row .bar-bg{flex:1;height:10px;background:var(--surface-2);border:1px solid var(--border);border-radius:99px;overflow:hidden}.freq-row .bar{height:100%;background:linear-gradient(90deg,var(--rose-400),var(--rose-600));border-radius:99px}.freq-row .n{font-size:12px;color:var(--text-2);font-weight:700;width:20px;text-align:right;flex:none}.onboard{flex:1;display:flex;flex-direction:column;padding:24px 22px calc(30px + env(safe-area-inset-bottom));max-width:520px;margin:0 auto;width:100%}.onboard .progress{height:4px;border-radius:99px;background:var(--border);overflow:hidden;margin-bottom:30px}.onboard .progress .fill{height:100%;background:linear-gradient(90deg,var(--rose-500),var(--rose-600));border-radius:99px;transition:width .25s ease}.onboard h2{font-size:26px;line-height:1.2;letter-spacing:-.02em;margin:0 0 10px}.onboard p.lead{font-size:14.5px;color:var(--text-2);margin:0 0 24px}.onboard .grow{flex:1}.onboard .steps{font-size:12px;color:var(--muted);font-weight:700;margin-bottom:6px}.privacy-list{list-style:none;padding:0;margin:0 0 22px}.privacy-list li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;font-size:14px}.privacy-list .ic{flex:none;width:22px;height:22px;border-radius:8px;background:var(--leaf-100);color:var(--leaf-700);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;margin-top:1px}.hint{font-size:12px;color:var(--muted);margin-top:6px}.recent-item{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);align-items:flex-start;cursor:pointer}.recent-item:last-child{border-bottom:none}.recent-item .dt{flex:none;width:74px}.recent-item .dt .d1{font-weight:800;font-size:13.5px}.recent-item .dt .d2{font-size:11px;color:var(--muted);font-weight:600}.recent-item .info{font-size:12.5px;color:var(--text-2);line-height:1.5}.footer{text-align:center;font-size:11.5px;color:var(--muted);padding:8px 0 4px}.footer a{color:var(--text-2);font-weight:600}.footer a:hover{color:var(--rose-600)}.flow-pill{display:inline-block;font-size:11px;font-weight:800;border-radius:99px;padding:2px 9px;margin-right:6px}.flow-pill.medium,.flow-pill.heavy{background:var(--rose-600);color:#fff}.flow-pill.light{background:var(--rose-100);color:var(--rose-700)}.flow-pill.spotting{background:var(--rose-50);color:var(--rose-700)}@media (min-width: 521px){body{background:radial-gradient(1000px 500px at 80% -10%,var(--rose-100),transparent 60%),var(--bg)}}