.zm-ovulation-app {
    display: grid;
    grid-template-columns: minmax(300px, .86fr) minmax(460px, 1.35fr);
    gap: 18px;
    color: #3f4657;
}

.zm-ovulation-input-card,
.zm-ovulation-result-card {
    min-width: 0;
    padding: clamp(20px, 2.4vw, 30px);
    border: 1px solid #e8eaf2;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 15px 40px rgba(43, 51, 82, .07);
}

.zm-ovulation-input-card {
    background:
        radial-gradient(circle at 96% 0, rgba(255, 226, 235, .7), transparent 32%),
        #fff;
}

.zm-ovulation-section-heading {
    display: flex;
    align-items: center;
    gap: 13px;
}

.zm-ovulation-heading-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    border-radius: 13px;
    color: #e25f84;
    background: #fff0f5;
    font-size: 18px;
}

.zm-ovulation-heading-icon.is-result {
    color: #5267ef;
    background: #eef1ff;
}

.zm-ovulation-section-heading h2 {
    margin: 0;
    color: #262c3a;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 760;
}

.zm-ovulation-section-heading p {
    margin: 3px 0 0;
    color: #8a90a0;
    font-size: 13px;
    line-height: 1.6;
}

.zm-ovulation-form {
    margin-top: 25px;
}

.zm-ovulation-field { min-width: 0; }
.zm-ovulation-field label,
.zm-field-label {
    margin-bottom: 8px;
    display: block;
    color: #454c5e;
    font-size: 14px;
    font-weight: 700;
}

.zm-ovulation-field input[type="date"] {
    width: 100%;
    height: 48px;
    padding-right: 14px;
    background: rgba(255, 255, 255, .92);
}

.zm-cycle-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.zm-cycle-stepper {
    height: 48px;
    padding: 4px;
    display: grid;
    grid-template-columns: 38px minmax(44px, 1fr) 38px;
    align-items: center;
    border: 1px solid #dfe3ec;
    border-radius: 12px;
    background: #fff;
}

.zm-cycle-stepper button {
    width: 36px;
    min-height: 36px !important;
    padding: 0;
    border: 0;
    border-radius: 9px !important;
    color: #5d6577;
    background: #f3f5f9;
    cursor: pointer;
    font-size: 19px !important;
    line-height: 1;
    transition: color .15s ease, background .15s ease, transform .15s ease;
}

.zm-cycle-stepper button:hover {
    color: #5267ef;
    background: #eef1ff;
    transform: translateY(-1px);
}

.zm-cycle-stepper output {
    color: #2f3544;
    font-size: 18px;
    font-weight: 760;
    text-align: center;
}

.zm-ovulation-field small {
    margin-top: 6px;
    display: block;
    color: #9a9fad;
    font-size: 11px;
}

.zm-ovulation-error {
    margin: 14px 0 0;
    padding: 9px 11px;
    border-radius: 9px;
    color: #b64e61;
    background: #fff0f3;
    font-size: 13px;
}

.zm-ovulation-primary-button {
    width: 100%;
    min-height: 50px !important;
    margin-top: 20px;
    border: 0;
    border-radius: 13px !important;
    color: #fff;
    background: linear-gradient(125deg, #e9668b, #7a66ef) !important;
    box-shadow: 0 12px 25px rgba(195, 90, 143, .24);
    cursor: pointer;
    font-size: 15px !important;
    font-weight: 750;
    transition: transform .18s ease, box-shadow .18s ease;
}

.zm-ovulation-primary-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 15px 30px rgba(195, 90, 143, .3);
}

.zm-ovulation-primary-button i { margin-right: 7px; }

.zm-ovulation-note {
    margin-top: 18px;
    padding: 13px 14px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border: 1px solid #f0e5e9;
    border-radius: 12px;
    color: #747b8c;
    background: rgba(255, 249, 251, .84);
}

.zm-ovulation-note > i { margin-top: 4px; color: #d76a89; }
.zm-ovulation-note p { margin: 0; font-size: 12px; line-height: 1.75; }
.zm-ovulation-note strong { color: #535a6a; }

.zm-ovulation-empty {
    min-height: 390px;
    display: grid;
    place-content: center;
    justify-items: center;
    color: #8d93a2;
    text-align: center;
}

.zm-ovulation-empty[hidden],
.zm-ovulation-result[hidden] { display: none !important; }

.zm-ovulation-empty > span {
    width: 70px;
    height: 70px;
    margin-bottom: 14px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    color: #7888ed;
    background: linear-gradient(145deg, #eef1ff, #f9eff8);
    font-size: 28px;
}

.zm-ovulation-empty strong { color: #4b5263; font-size: 16px; }
.zm-ovulation-empty p { margin: 5px 0 0; font-size: 13px; }

.zm-ovulation-result { margin-top: 23px; }
.zm-result-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.zm-result-summary article {
    min-width: 0;
    padding: 15px 13px;
    border: 1px solid #eceef4;
    border-radius: 13px;
    background: #fafbfe;
}

.zm-result-summary article.is-period { background: #fff5f7; border-color: #f7e2e8; }
.zm-result-summary article.is-ovulation { background: #f2f3ff; border-color: #e1e4ff; }
.zm-result-summary article.is-fertile { background: #fff8ee; border-color: #fae9ce; }
.zm-result-summary span { display: block; color: #858b9b; font-size: 11px; }
.zm-result-summary strong { margin-top: 5px; display: block; overflow-wrap: anywhere; color: #353b4b; font-size: 15px; line-height: 1.45; }
.zm-result-summary small { margin-top: 4px; display: block; color: #a0a5b2; font-size: 10px; }

.zm-calendar-legend {
    margin: 20px 0 11px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;
    color: #757c8d;
    font-size: 11px;
}

.zm-calendar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.zm-calendar-legend i { width: 9px; height: 9px; border-radius: 50%; background: #e9ecf2; }
.zm-calendar-legend i.is-period { background: #ef7b98; }
.zm-calendar-legend i.is-fertile { background: #f0aa4f; }
.zm-calendar-legend i.is-ovulation { background: #6b73e9; }

.zm-ovulation-calendars {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.zm-calendar {
    min-width: 0;
    padding: 12px;
    border: 1px solid #eaedf3;
    border-radius: 13px;
    background: #fff;
}

.zm-calendar h3 { margin: 0 0 9px; color: #42495a; font-size: 14px; text-align: center; }
.zm-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.zm-calendar-grid span {
    min-width: 0;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: #626a7b;
    font-size: 10px;
}
.zm-calendar-grid .is-weekday { aspect-ratio: auto; padding: 2px 0 5px; color: #a0a6b3; font-size: 9px; }
.zm-calendar-grid .is-empty { visibility: hidden; }
.zm-calendar-grid .is-period { color: #b63f61; background: #ffe7ee; }
.zm-calendar-grid .is-fertile { color: #a76213; background: #fff0d5; }
.zm-calendar-grid .is-ovulation { color: #fff; background: #6872e8; font-weight: 800; box-shadow: 0 4px 10px rgba(104, 114, 232, .25); }

@media (max-width: 1080px) {
    .zm-ovulation-app { grid-template-columns: 1fr; }
    .zm-ovulation-empty { min-height: 260px; }
}

@media (max-width: 700px) {
    .zm-ovulation-input-card, .zm-ovulation-result-card { padding: 19px 16px; border-radius: 17px; }
    .zm-result-summary { grid-template-columns: 1fr; }
    .zm-ovulation-calendars { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
    .zm-cycle-grid { grid-template-columns: 1fr; }
}