body.menstrual-page { min-height:100vh; height:auto; background:#fff8fb; color:#22313f; user-select:auto; }
body.menstrual-page header { background:#e8f7f1; color:#1f5b49; }
.calculator-shell { width:min(100%, 1040px); margin:0 auto; padding:16px 16px 34px; }
.back-button { display:inline-flex; min-height:40px; align-items:center; border:1px solid #d8e8e1; border-radius:999px; background:#fff; color:#1f5b49; padding:8px 15px; font-size:.95rem; font-weight:900; box-shadow:0 3px 10px rgba(32,88,71,.08); text-decoration:none; }
.intro-card,.form-card,.feature-card,.medical-note { background:#fff; border:1px solid #f0dfe8; border-radius:12px; box-shadow:0 6px 18px rgba(170,73,121,.08); }
.intro-card { display:flex; gap:14px; align-items:flex-start; margin-top:14px; padding:18px; }.intro-icon { width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; border-radius:12px; background:#ffe5f0; font-size:1.55rem; }
.intro-card h1 { margin:0; color:#164937; font-size:clamp(1.3rem,4vw,1.65rem); line-height:1.35; }.intro-card p { margin:8px 0 0; color:#5d6d7e; line-height:1.6; font-size:.95rem; }
.form-card,.medical-note { margin-top:16px; padding:18px; }.form-card h2,.medical-note h2 { margin:0 0 14px; color:#1f5b49; font-size:1.08rem; }
.field-grid { display:grid; gap:14px; }.field { display:grid; gap:6px; position:relative; color:#4b635b; font-size:.92rem; font-weight:800; }.field small { color:#71817b; font-weight:600; }.field input,.field select { box-sizing:border-box; width:100%; min-height:46px; border:1px solid #d8e8e1; border-radius:10px; padding:10px 12px; color:#22313f; background:#fff; font:inherit; font-size:1rem; }.field input:focus,.field select:focus { outline:3px solid rgba(236,154,189,.28); border-color:#ec9abd; }.field em { position:absolute; right:13px; bottom:13px; color:#61736b; font-style:normal; }.field em + * { padding-right:34px; }
.form-message { min-height:20px; margin:12px 0 0; color:#b42318; font-size:.9rem; font-weight:800; line-height:1.45; }.subtle-note { margin:9px 0 0; color:#6b7b76; font-size:.85rem; line-height:1.5; }
.card-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; }.card-controls p { margin:0; color:#5d6d7e; font-size:.9rem; font-weight:800; }.card-controls button { min-height:40px; border:1px solid #cfe3da; border-radius:999px; background:#fff; color:#1f5b49; padding:8px 14px; font:inherit; font-size:.9rem; font-weight:900; cursor:pointer; }.card-controls button:focus-visible,.card-heading:focus-visible { outline:3px solid rgba(236,154,189,.35); outline-offset:2px; }.feature-grid { display:grid; gap:16px; margin-top:10px; }.feature-card { padding:18px; }.card-heading { box-sizing:border-box; display:flex; width:100%; align-items:center; gap:8px; border:0; padding:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }.card-heading span { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:#ffe5f0; font-size:1.15rem; }.card-heading h2 { margin:0; color:#1f5b49; font-size:1.08rem; }.card-heading i { margin-left:auto; color:#1f5b49; font-size:1.35rem; font-style:normal; transition:transform .2s ease; }.feature-card:not(.is-collapsed) .card-heading i { transform:rotate(180deg); }.feature-card.is-collapsed > :not(.card-heading) { display:none; }.result-label { margin:17px 0 5px; color:#7a5265; font-size:.84rem; font-weight:800; }.big-date { display:block; color:#164937; font-size:1.55rem; line-height:1.3; }.small-big { font-size:1.25rem; }.mini-results { display:grid; gap:5px; margin-top:14px; padding:12px; border:1px solid #f0dfe8; border-radius:11px; background:#fff8fb; }.mini-results p,.alternate-dates p { margin:0; color:#5c6d66; font-size:.9rem; line-height:1.45; }.mini-results b,.alternate-dates b { color:#164937; }.inline-warning { margin:14px 0 0; border-left:3px solid #d79748; padding-left:10px; color:#765322; font-size:.86rem; line-height:1.5; }.status { color:#765322 !important; font-weight:800; }.compact-field { margin-top:14px; }.compact-grid { margin-top:14px; }.alternate-dates { display:grid; gap:10px; margin-top:16px; padding-top:15px; border-top:1px solid #f0dfe8; }
details { margin-top:15px; border-top:1px solid #f0dfe8; padding-top:12px; } summary { color:#1f5b49; cursor:pointer; font-size:.9rem; font-weight:900; } details p { margin:10px 0 0; color:#62736c; font-size:.86rem; line-height:1.6; }.medical-note { color:#62736c; font-size:.9rem; line-height:1.65; }.medical-note p { margin:8px 0 0; }.site-footer { padding:0 16px 30px; color:#687872; font-size:.84rem; line-height:1.5; text-align:center; }.site-footer p { margin:5px auto; }.site-footer a { color:#1f5b49; }
@media (min-width:720px) { .calculator-shell { padding-top:24px; }.intro-card,.form-card,.feature-card,.medical-note { padding:22px; }.field-grid { grid-template-columns:1fr 1fr; }.feature-grid { grid-template-columns:1fr 1fr; align-items:start; }.pregnancy-card { grid-column:1 / -1; }.pregnancy-card .alternate-dates { grid-template-columns:1fr 1fr; align-items:end; }.pregnancy-card .alternate-dates > :nth-child(5),.pregnancy-card .alternate-dates > :nth-child(6) { grid-column:1 / -1; }.compact-grid { grid-template-columns:1fr 1fr; } }