:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#120f17;--surface:#1c1824;--surface-2:#241f2e;--fg:#f3eef8;--fg-muted:#b3a8c2;--border:#322b3f;--accent:#e0709a;--phase-menstruation:#e05c72;--phase-follicular:#4fb286;--phase-ovulation:#f0a742;--phase-luteal:#8a7de0;--chart-1:#f08fb0;--chart-2:#8a7de0;--chart-3:#4fb286;--chart-4:#f0c34a;--radius:14px;--gap:12px}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--fg);margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.5}button{font:inherit;color:inherit;cursor:pointer}.app{flex-direction:column;max-width:560px;min-height:100dvh;margin-inline:auto;display:flex}.app__header{z-index:2;justify-content:space-between;align-items:center;gap:var(--gap);background:color-mix(in srgb, var(--bg) 88%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);padding:14px 16px;display:flex;position:sticky;top:0}.app__title{letter-spacing:.02em;margin:0;font-size:1.05rem}.app__main{flex:1;padding:16px 16px 96px}.stack{gap:var(--gap);flex-direction:column;display:flex}.card{background:var(--surface);border:1px solid var(--border);border-inline-start:4px solid var(--border);border-radius:var(--radius);padding:14px 16px}.card__header{justify-content:space-between;align-items:flex-start;gap:var(--gap);margin-bottom:10px;display:flex}.card__title{margin:0;font-size:1rem}.card__subtitle{color:var(--fg-muted);margin:2px 0 0;font-size:.9rem}.card__body>*+*{margin-top:10px}.text{margin:0;font-size:.95rem}.text--muted{color:var(--fg-muted)}.note{color:var(--fg-muted);margin:0;font-size:.82rem}.disclaimer{color:var(--fg-muted);margin:8px 4px 0;font-size:.78rem}.today__date{color:var(--fg-muted);margin:0 0 6px;font-size:.85rem}.today__head{justify-content:space-between;align-items:flex-start;gap:var(--gap);display:flex}.today__cycleday{margin:0 0 6px;font-size:1.5rem;font-weight:600}.today__total{color:var(--fg-muted);font-size:1rem;font-weight:400}.today__next{color:var(--fg-muted);text-align:right;flex-direction:column;align-items:flex-end;font-size:.8rem;display:flex}.today__next strong{color:var(--fg);font-size:.95rem}.badge{color:#14101a;border-radius:999px;padding:3px 10px;font-size:.78rem;font-weight:600;display:inline-block}.meter{align-items:center;gap:10px;display:flex}.meter__bars{gap:3px;display:flex}.meter__bar{background:var(--surface-2);border-radius:3px;width:22px;height:6px}.meter__bar.is-on{background:var(--accent)}.meter__label{color:var(--fg-muted);font-size:.82rem}.list{margin:0;padding-inline-start:20px;font-size:.9rem}.list li{margin-block:3px}.list--do li::marker{content:"✓  ";color:var(--phase-follicular)}.list--avoid li::marker{content:"–  ";color:var(--phase-menstruation)}.hormones{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.hormones__row{grid-template-columns:5.5rem 1fr 2.6rem;align-items:center;gap:8px;font-size:.85rem;display:grid}.hormones__track{background:var(--surface-2);border-radius:4px;height:8px;overflow:hidden}.hormones__fill{background:linear-gradient(90deg, var(--chart-2), var(--chart-1));height:100%;display:block}.hormones__value{text-align:right;color:var(--fg-muted)}.chart svg{background:var(--surface-2);border-radius:10px;width:100%;height:150px}.chart__legend{color:var(--fg-muted);flex-wrap:wrap;gap:10px;margin:8px 0 0;padding:0;font-size:.8rem;list-style:none;display:flex}.chart__legend li{align-items:center;gap:5px;display:flex}.chart__dot{border-radius:50%;width:10px;height:10px}.timeline{flex-direction:column;gap:4px;max-height:60dvh;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.timeline__day{text-align:start;background:0 0;border:1px solid #0000;border-radius:10px;grid-template-columns:12px 1fr auto auto;align-items:center;gap:10px;width:100%;padding:8px 10px;font-size:.88rem;display:grid}.timeline__day.is-today{background:var(--surface-2)}.timeline__day.is-selected{border-color:var(--accent)}.timeline__dot{border-radius:50%;width:10px;height:10px}.timeline__phase,.timeline__cycleday{color:var(--fg-muted);font-size:.8rem}.field{flex-direction:column;gap:6px;font-size:.9rem;display:flex}.field--row{flex-direction:row;align-items:center;gap:10px}.field input[type=date]{border:1px solid var(--border);background:var(--surface-2);color:var(--fg);border-radius:10px;padding:10px}.field input[type=range]{accent-color:var(--accent)}.button{background:var(--accent);color:#1a0f16;border:none;border-radius:10px;width:100%;padding:12px;font-weight:600}.button--ghost{background:var(--surface-2);width:auto;color:var(--fg);padding:6px 10px;font-size:.8rem;font-weight:500}.button--danger{border:1px solid var(--phase-menstruation);color:var(--phase-menstruation);background:0 0}.tabs{gap:6px;display:flex}.tab{border:1px solid var(--border);background:0 0;border-radius:999px;flex:1;padding:8px;font-size:.85rem}.tab.is-active{background:var(--surface-2);border-color:var(--accent)}.chips{flex-wrap:wrap;gap:6px;display:flex}.chip{background:var(--surface-2);color:var(--fg-muted);border-radius:999px;padding:2px 9px;font-size:.75rem}.chip--stark{background:color-mix(in srgb, var(--phase-follicular) 30%, var(--surface-2));color:var(--fg)}.chip--gemischt{background:color-mix(in srgb, var(--phase-ovulation) 30%, var(--surface-2));color:var(--fg)}.chip--schwach{background:color-mix(in srgb, var(--phase-menstruation) 30%, var(--surface-2));color:var(--fg)}.link{color:var(--accent);font-size:.85rem;display:inline-block}.nav{bottom:0;z-index:3;max-width:560px;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:color-mix(in srgb, var(--surface) 96%, transparent);border-top:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);justify-content:space-around;gap:2px;margin-inline:auto;display:flex;position:fixed;inset-inline:0}.nav__item{color:var(--fg-muted);background:0 0;border:none;border-radius:10px;flex-direction:column;flex:1;align-items:center;gap:2px;padding:6px 2px;font-size:.7rem;display:flex}.nav__item.is-active{color:var(--fg);background:var(--surface-2)}.nav__icon{font-size:1.1rem}.onboarding{padding-top:24px;max-width:560px;margin-inline:auto;padding-inline:16px}@media (prefers-reduced-motion:no-preference){.card{transition:border-color .12s}}