.sa-period-tool { display:grid; gap:18px; }
.sa-period-intro { display:flex; align-items:center; gap:16px; padding:18px; border:1px solid color-mix(in srgb,var(--sa-accent) 24%,var(--sa-line)); border-radius:20px; background:linear-gradient(135deg,color-mix(in srgb,var(--sa-accent) 11%,var(--sa-surface)),var(--sa-surface)); }
.sa-period-intro__icon { width:60px; aspect-ratio:1; display:grid; place-items:center; flex:0 0 auto; border-radius:19px; background:var(--sa-accent); color:#fff; font-size:27px; box-shadow:0 13px 28px color-mix(in srgb,var(--sa-accent) 25%,transparent); }
.sa-period-intro span,.sa-period-results__header span,.sa-period-forecast header span { color:var(--sa-accent); font-size:12px; font-weight:900; }
.sa-period-intro h3,.sa-period-results h3,.sa-period-forecast h3 { margin:2px 0 4px; font-size:clamp(20px,2.5vw,29px); }
.sa-period-intro p,.sa-period-results__header p { margin:0; color:var(--sa-muted); font-size:13px; }
.sa-period-form { padding:20px; display:grid; gap:16px; border:1px solid var(--sa-line); border-radius:20px; background:var(--sa-surface-soft); }
.sa-period-form__primary { display:grid; grid-template-columns:minmax(260px,1.4fr) minmax(150px,.7fr) minmax(170px,.8fr); gap:12px; }
.sa-period-form__secondary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.sa-period-field { min-width:0; display:grid; gap:7px; }
.sa-period-field > span { font-size:13px; font-weight:900; }
.sa-period-field > span i { color:var(--sa-accent); margin-left:6px; }
.sa-period-field input,.sa-period-field select { width:100%; min-height:54px; padding:0 14px; border:1px solid var(--sa-line); border-radius:14px; background:var(--sa-surface); color:var(--sa-text); }
.sa-period-field input:focus,.sa-period-field select:focus { border-color:var(--sa-accent); outline:0; box-shadow:0 0 0 4px color-mix(in srgb,var(--sa-accent) 13%,transparent); }
.sa-period-field small { color:var(--sa-muted); font-size:10px; }
.sa-period-quick-actions { display:flex; flex-wrap:wrap; gap:8px; }
.sa-period-quick-actions button { min-height:39px; padding:0 12px; border:1px solid var(--sa-line); border-radius:999px; background:var(--sa-surface); color:var(--sa-text); cursor:pointer; }
.sa-period-quick-actions button:hover { border-color:var(--sa-accent); color:var(--sa-accent); }
.sa-period-submit { min-height:56px; display:flex; align-items:center; justify-content:center; gap:9px; border:0; border-radius:15px; background:var(--sa-accent); color:#fff; font-weight:900; cursor:pointer; box-shadow:0 12px 25px color-mix(in srgb,var(--sa-accent) 24%,transparent); }
.sa-period-alert { padding:14px 16px; display:flex; align-items:flex-start; gap:10px; border-radius:14px; }
.sa-period-alert--error { border:1px solid #f2b4b4; background:#fff0f0; color:#a42d2d; }
.sa-period-alert--warning { margin:15px 0; border:1px solid #f0d28c; background:#fff8df; color:#795b12; }
[data-sa-theme="dark"] .sa-period-alert--error { background:#351d22; border-color:#6b303b; color:#ffc5cc; }
[data-sa-theme="dark"] .sa-period-alert--warning { background:#352d18; border-color:#6c5b2d; color:#ffe39b; }
.sa-period-results { padding:20px; border:1px solid var(--sa-line); border-radius:20px; background:var(--sa-surface); box-shadow:0 14px 38px rgba(20,30,50,.07); }
.sa-period-results__header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; }
.sa-period-results__actions { display:flex; flex-wrap:wrap; gap:8px; }
.sa-period-results__actions button { min-height:40px; padding:0 12px; border:1px solid var(--sa-line); border-radius:11px; background:var(--sa-surface-soft); color:var(--sa-text); cursor:pointer; }
.sa-period-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.sa-period-summary__card { min-width:0; padding:15px; display:grid; gap:4px; border:1px solid var(--sa-line); border-radius:16px; background:var(--sa-surface-soft); }
.sa-period-summary__card > span { width:38px; aspect-ratio:1; display:grid; place-items:center; margin-bottom:3px; border-radius:12px; background:color-mix(in srgb,var(--sa-accent) 12%,var(--sa-surface)); color:var(--sa-accent); }
.sa-period-summary__card small { color:var(--sa-muted); font-size:10px; }.sa-period-summary__card strong{font-size:15px;line-height:1.6}.sa-period-summary__card em{color:var(--sa-muted);font-size:10px;font-style:normal}
.sa-period-summary__card--period > span { background:#fde6f1;color:#c33b79}.sa-period-summary__card--fertile > span{background:#e4f5df;color:#438b38}.sa-period-summary__card--ovulation > span{background:#fff1ce;color:#b77a00}
[data-sa-theme="dark"] .sa-period-summary__card--period > span{background:#492336}.sa-period-legend { margin:16px 0 12px; display:flex; flex-wrap:wrap; gap:8px 15px; color:var(--sa-muted); font-size:11px; }
.sa-period-legend span { display:flex; align-items:center; gap:6px; }.sa-period-legend i{width:16px;height:16px;border-radius:5px;display:inline-block;border:1px solid transparent}.sa-period-legend .is-period{background:#f8c6dc;border-color:#e991b9}.sa-period-legend .is-fertile{background:#d8efcf;border-color:#94c981}.sa-period-legend .is-ovulation{background:#ffe59e;border-color:#dfb846}.sa-period-legend .is-today{background:transparent;border:2px solid var(--sa-accent)}
.sa-period-calendars { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.sa-period-calendar { overflow:hidden; border:1px solid var(--sa-line); border-radius:17px; background:var(--sa-surface); }
.sa-period-calendar header { padding:12px 14px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--sa-line); background:var(--sa-surface-soft); }.sa-period-calendar header i{color:var(--sa-accent)}.sa-period-calendar header span{margin-inline-start:auto;color:var(--sa-muted)}
.sa-period-calendar__weekdays,.sa-period-calendar__days { padding:8px; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; text-align:center; }
.sa-period-calendar__weekdays { padding-bottom:2px; color:var(--sa-muted); font-size:10px; font-weight:800; }
.sa-period-calendar__days span { min-height:34px; display:grid; place-items:center; border-radius:9px; font-size:11px; border:1px solid transparent; position:relative; }.sa-period-calendar__days .is-empty{visibility:hidden}.sa-period-calendar__days .is-fertile{background:#dff3d8;color:#2f6f28}.sa-period-calendar__days .is-period{background:#f8c9dd;color:#91315d}.sa-period-calendar__days .is-ovulation{box-shadow:inset 0 0 0 2px #d8a92f;font-weight:900}.sa-period-calendar__days .is-today{border-color:var(--sa-accent);font-weight:900}
[data-sa-theme="dark"] .sa-period-calendar__days .is-fertile{background:#244129;color:#bfe9b5}[data-sa-theme="dark"] .sa-period-calendar__days .is-period{background:#48263a;color:#ffc5df}
.sa-period-forecast { margin-top:18px; padding-top:18px; border-top:1px solid var(--sa-line); }.sa-period-forecast header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.sa-period-forecast header > div > i{color:var(--sa-accent);margin-left:6px}.sa-period-forecast header small{color:var(--sa-muted)}
.sa-period-table-wrap { max-width:100%; overflow:auto; border:1px solid var(--sa-line); border-radius:16px; }.sa-period-table-wrap table{width:100%;border-collapse:collapse;min-width:830px}.sa-period-table-wrap th,.sa-period-table-wrap td{padding:12px 10px;border-bottom:1px solid var(--sa-line);text-align:right;vertical-align:middle;font-size:11px}.sa-period-table-wrap thead th{position:sticky;top:0;background:var(--sa-surface-soft);z-index:1;font-weight:900}.sa-period-table-wrap tbody tr:last-child td{border-bottom:0}.sa-period-table-wrap tbody tr:hover{background:color-mix(in srgb,var(--sa-accent) 4%,var(--sa-surface))}
.sa-period-table-tag { display:inline-block;padding:5px 8px;border-radius:9px;line-height:1.7}.sa-period-table-tag--fertile{background:#e2f4dc;color:#34712b}.sa-period-table-tag--ovulation{background:#fff0c7;color:#8b6500}
[data-sa-theme="dark"] .sa-period-table-tag--fertile{background:#244129;color:#bfe9b5}[data-sa-theme="dark"] .sa-period-table-tag--ovulation{background:#463a1c;color:#ffe099}
.sa-period-medical-note { margin-top:15px; padding:15px 16px; display:flex; align-items:flex-start; gap:11px; border-radius:15px; background:color-mix(in srgb,var(--sa-accent) 7%,var(--sa-surface-soft)); color:var(--sa-muted); }.sa-period-medical-note i{color:var(--sa-accent);margin-top:4px}.sa-period-medical-note p{margin:0;font-size:12px}.sa-period-ad{margin-block:16px;overflow:hidden}
@media(max-width:980px){.sa-period-form__primary{grid-template-columns:1fr 1fr}.sa-period-field--date{grid-column:1/-1}.sa-period-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.sa-period-calendars{grid-template-columns:1fr 1fr}.sa-period-calendars > :last-child{grid-column:1/-1;max-width:50%;width:100%;margin-inline:auto}}
@media(max-width:680px){.sa-period-form__primary,.sa-period-form__secondary,.sa-period-calendars{grid-template-columns:1fr}.sa-period-field--date,.sa-period-calendars > :last-child{grid-column:auto;max-width:none}.sa-period-results__header,.sa-period-forecast header{flex-direction:column}.sa-period-results__actions{width:100%}.sa-period-results__actions button{flex:1}.sa-period-summary{grid-template-columns:1fr 1fr}.sa-period-table-wrap{overflow:visible;border:0}.sa-period-table-wrap table{min-width:0}.sa-period-table-wrap thead{display:none}.sa-period-table-wrap tbody,.sa-period-table-wrap tr,.sa-period-table-wrap td{display:block;width:100%}.sa-period-table-wrap tr{margin-bottom:10px;padding:8px;border:1px solid var(--sa-line);border-radius:14px;background:var(--sa-surface-soft)}.sa-period-table-wrap td{padding:8px;border-bottom:1px dashed var(--sa-line);display:flex;justify-content:space-between;gap:12px;text-align:left}.sa-period-table-wrap td:last-child{border-bottom:0}.sa-period-table-wrap td::before{content:attr(data-label);font-weight:800;text-align:right;color:var(--sa-muted)}}
@media(max-width:480px){.sa-period-intro{align-items:flex-start}.sa-period-intro__icon{width:48px}.sa-period-form,.sa-period-results{padding:14px}.sa-period-summary{grid-template-columns:1fr}.sa-period-quick-actions button{flex:1}.sa-period-calendar__days span{min-height:31px}}
@media print{.sa-period-intro,.sa-period-form,.sa-period-results__actions,.sa-tool-aftercare,.sa-modern-ad,.sa-period-alert--warning{display:none!important}.sa-period-results{box-shadow:none;border:0;padding:0}.sa-period-calendars{grid-template-columns:repeat(3,1fr)}.sa-period-table-wrap{overflow:visible}.sa-period-table-wrap table{min-width:0}}
.sa-period-legacy-estimate { display:block; margin-top:5px; color:var(--sa-muted); font-size:9px; line-height:1.6; }