/* ============================================================
   Health Tools Module – CSS
   Extends the main site design system (variables, typography).
   ============================================================ */

/* ── Shared Tool Variables ── */
:root {
    --tool-accent: var(--magenta, #f40773);
    --tool-accent-soft: var(--pink-soft, #fff0f7);
    --tool-purple: var(--purple, #633276);
    --tool-surface: #fff;
    --tool-bg: var(--background, #fff9fc);
    --tool-border: var(--border, #eee5ef);
    --tool-radius: 20px;
    --tool-radius-sm: 12px;
    --tool-shadow: 0 12px 36px rgba(70, 29, 78, .08);
    --tool-shadow-lg: 0 20px 50px rgba(70, 29, 78, .12);
}

/* ──────────────────────────────────────────────
   1. TOOLS LANDING PAGE
   ────────────────────────────────────────────── */

.tools-hero {
    position: relative;
    overflow: hidden;
    padding: 70px 0 80px;
    background: linear-gradient(135deg, #fff 0%, #fff4fa 45%, #fce8f6 100%);
    border-bottom: 1px solid var(--tool-border);
    text-align: center;
}

.tools-hero::before {
    content: '';
    position: absolute;
    left: -120px;
    top: -100px;
    width: 320px;
    height: 320px;
    border: 50px solid rgba(244, 7, 115, .06);
    border-radius: 50%;
    pointer-events: none;
}

.tools-hero::after {
    content: '';
    position: absolute;
    right: -80px;
    bottom: -60px;
    width: 200px;
    height: 200px;
    background: rgba(99, 50, 118, .04);
    border-radius: 50%;
    pointer-events: none;
}

.tools-hero__icon {
    display: inline-grid;
    place-items: center;
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
    color: #fff;
    background: linear-gradient(135deg, var(--pink), var(--tool-accent));
    border: 10px solid rgba(255, 255, 255, .7);
    border-radius: 28px;
    box-shadow: var(--tool-shadow);
    font-size: 34px;
    transform: rotate(-4deg);
}

.tools-hero h1 {
    position: relative;
    margin: 8px 0;
    color: var(--purple-dark);
    font-size: clamp(28px, 4.5vw, 44px);
    line-height: 1.4;
}

.tools-hero__subtitle {
    display: block;
    max-width: 560px;
    margin: 10px auto 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 2;
}

.tools-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--tool-accent);
    font-weight: 700;
    font-size: 13px;
}

/* ── Tool Cards Grid ── */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 60px 0 80px;
}

.tool-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 32px 26px 28px;
    color: var(--purple-dark);
    background: var(--tool-surface);
    border: 1px solid var(--tool-border);
    border-radius: var(--tool-radius);
    box-shadow: var(--tool-shadow);
    transition: .28s ease;
}

.tool-card::before {
    content: '';
    position: absolute;
    left: -40px;
    top: -50px;
    width: 120px;
    height: 120px;
    background: var(--tool-accent-soft);
    border-radius: 50%;
    transition: .35s ease;
    pointer-events: none;
}

.tool-card:hover {
    color: var(--tool-accent);
    border-color: rgba(244, 7, 115, .25);
    transform: translateY(-7px);
    box-shadow: var(--tool-shadow-lg);
}

.tool-card:hover::before {
    transform: scale(1.3);
}

.tool-card__icon {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin-bottom: 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--pink), var(--tool-accent));
    border-radius: 18px;
    font-size: 26px;
    box-shadow: 0 8px 20px rgba(244, 7, 115, .18);
}

.tool-card:nth-child(even) .tool-card__icon {
    background: linear-gradient(135deg, #8b52a0, var(--tool-purple));
    box-shadow: 0 8px 20px rgba(99, 50, 118, .18);
}

.tool-card h2 {
    position: relative;
    margin: 0 0 10px;
    font-size: 18px;
    line-height: 1.6;
}

.tool-card p {
    position: relative;
    flex: 1;
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 13px;
    line-height: 2;
}

.tool-card__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--tool-accent);
    font-weight: 700;
    font-size: 13px;
    transition: .2s;
}

.tool-card__link i {
    transition: .25s;
}

.tool-card:hover .tool-card__link i {
    transform: translateX(-4px);
}

/* ──────────────────────────────────────────────
   2. INDIVIDUAL TOOL PAGES
   ────────────────────────────────────────────── */

.tool-page {
    padding: 50px 0 80px;
}

.tool-page__header {
    max-width: 700px;
    margin-bottom: 35px;
}

.tool-page__header .tool-page-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    color: var(--tool-accent);
    font-weight: 700;
    font-size: 12px;
}

.tool-page__header h1 {
    margin: 0 0 10px;
    color: var(--purple-dark);
    font-size: clamp(24px, 3.5vw, 36px);
    line-height: 1.5;
}

.tool-page__header p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 2;
}

/* ── Tool Form ── */
.tool-form {
    max-width: 640px;
    padding: 32px;
    background: var(--tool-surface);
    border: 1px solid var(--tool-border);
    border-radius: var(--tool-radius);
    box-shadow: var(--tool-shadow);
}

.tool-form__group {
    margin-bottom: 22px;
}

.tool-form__group:last-child {
    margin-bottom: 0;
}

.tool-form__label {
    display: block;
    margin-bottom: 8px;
    color: var(--purple-dark);
    font-weight: 700;
    font-size: 14px;
}

.tool-form__label i {
    margin-left: 6px;
    color: var(--tool-accent);
}

.tool-form__hint {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

/* ── Persian Date Picker ── */
.tool-datepicker {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tool-datepicker select {
    flex: 1;
    min-width: 100px;
    padding: 12px 14px;
    color: var(--purple-dark);
    background: var(--tool-accent-soft);
    border: 2px solid var(--tool-border);
    border-radius: var(--tool-radius-sm);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s;
    appearance: auto;
}

.tool-datepicker select:focus {
    border-color: var(--tool-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(244, 7, 115, .12);
}

/* ── Cycle Length Selector ── */
.tool-cycle-select {
    display: inline-block;
    padding: 12px 14px;
    color: var(--purple-dark);
    background: var(--tool-accent-soft);
    border: 2px solid var(--tool-border);
    border-radius: var(--tool-radius-sm);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s;
}

.tool-cycle-select:focus {
    border-color: var(--tool-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(244, 7, 115, .12);
}

/* ── Submit Button ── */
.tool-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 26px;
    padding: 14px 28px;
    color: #fff;
    background: linear-gradient(135deg, var(--pink), var(--tool-accent));
    border: 0;
    border-radius: var(--tool-radius-sm);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(244, 7, 115, .2);
    transition: .25s;
}

.tool-form__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(244, 7, 115, .28);
}

.tool-form__submit:active {
    transform: translateY(0);
}

/* ──────────────────────────────────────────────
   3. RESULT CARD
   ────────────────────────────────────────────── */

.tool-result {
    max-width: 640px;
    margin-top: 30px;
    padding: 32px;
    background: linear-gradient(145deg, #fff8fc, #fff);
    border: 1px solid var(--tool-border);
    border-radius: var(--tool-radius);
    box-shadow: var(--tool-shadow-lg);
    animation: toolResultEnter .45s cubic-bezier(.25, .8, .25, 1) both;
}

.tool-result--error {
    border-color: #e74c3c;
    background: #fff5f5;
}

.tool-result__header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.tool-result__icon {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    color: #fff;
    background: linear-gradient(135deg, var(--pink), var(--tool-accent));
    border-radius: 16px;
    font-size: 26px;
    flex-shrink: 0;
}

.tool-result__title {
    margin: 0;
    color: var(--purple-dark);
    font-size: 20px;
    line-height: 1.5;
}

.tool-result__subtitle {
    display: inline-block;
    margin-top: 3px;
    padding: 3px 10px;
    color: var(--tool-accent);
    background: var(--tool-accent-soft);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}

.tool-result__error-message {
    margin: 0;
    color: #c0392b;
    font-size: 15px;
}

/* ── Progress Bar ── */
.tool-result__progress {
    margin-bottom: 22px;
}

.tool-progress-bar {
    width: 100%;
    height: 14px;
    background: var(--tool-accent-soft);
    border-radius: 10px;
    overflow: hidden;
}

.tool-progress-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--pink), var(--tool-accent));
    border-radius: 10px;
    transition: width .8s cubic-bezier(.25, .8, .25, 1);
}

.tool-progress-label {
    display: block;
    margin-top: 8px;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
}

/* ── Detail Cards ── */
.tool-result__details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.tool-detail-card {
    padding: 18px 16px;
    background: #fff;
    border: 1px solid var(--tool-border);
    border-radius: var(--tool-radius-sm);
    text-align: center;
}

.tool-detail-card__icon {
    display: block;
    font-size: 24px;
    margin-bottom: 8px;
}

.tool-detail-card__label {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 4px;
}

.tool-detail-card__value {
    display: block;
    color: var(--purple-dark);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.5;
}

/* ── Related Tools ── */
.tool-result__related {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--tool-border);
}

.tool-result__related-title {
    display: block;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.tool-result__related-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tool-related-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    color: var(--tool-purple);
    background: #f8f3fa;
    border: 1px solid var(--tool-border);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    transition: .2s;
}

.tool-related-link:hover {
    color: #fff;
    background: var(--tool-purple);
    border-color: var(--tool-purple);
}

/* ── Disclaimer ── */
.tool-result__disclaimer {
    margin-top: 18px;
    padding: 14px 16px;
    color: var(--muted);
    background: #fdf8ff;
    border: 1px dashed rgba(99, 50, 118, .2);
    border-radius: var(--tool-radius-sm);
    font-size: 12px;
    line-height: 2;
}

.tool-result__disclaimer i {
    margin-left: 5px;
    color: var(--tool-accent);
}

/* ──────────────────────────────────────────────
   4. PREGNANCY WEEK CONTENT
   ────────────────────────────────────────────── */

.pregnancy-week-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 640px;
    margin-bottom: 25px;
}

.pregnancy-week-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    color: var(--tool-purple);
    background: #f8f3fa;
    border: 1px solid var(--tool-border);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    transition: .2s;
}

.pregnancy-week-nav__link:hover {
    color: #fff;
    background: var(--tool-purple);
    border-color: var(--tool-purple);
}

.pregnancy-week-nav__link--disabled {
    opacity: .4;
    pointer-events: none;
}

.pregnancy-week-nav__current {
    color: var(--tool-accent);
    font-weight: 800;
    font-size: 15px;
}

.pregnancy-content-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 800px;
}

.pregnancy-content-card {
    padding: 24px;
    background: var(--tool-surface);
    border: 1px solid var(--tool-border);
    border-radius: var(--tool-radius);
    box-shadow: var(--tool-shadow);
}

.pregnancy-content-card__icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--pink), var(--tool-accent));
    border-radius: 13px;
    font-size: 18px;
}

.pregnancy-content-card:nth-child(even) .pregnancy-content-card__icon {
    background: linear-gradient(135deg, #8b52a0, var(--tool-purple));
}

.pregnancy-content-card h3 {
    margin: 0 0 8px;
    color: var(--purple-dark);
    font-size: 15px;
}

.pregnancy-content-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 2;
}

/* ──────────────────────────────────────────────
   5. TOOLS SECTION ON HOMEPAGE
   ────────────────────────────────────────────── */

.home-tools {
    position: relative;
    padding: 65px 0;
    background: linear-gradient(135deg, #fff 0%, #fff7fc 50%, #fce8f6 100%);
}

.home-tools::before {
    content: '';
    position: absolute;
    left: -100px;
    top: -80px;
    width: 280px;
    height: 280px;
    border: 45px solid rgba(244, 7, 115, .05);
    border-radius: 50%;
    pointer-events: none;
}

.home-tools .container {
    position: relative;
    z-index: 1;
}

.home-tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 30px;
}

.home-tool-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    color: var(--purple-dark);
    background: var(--tool-surface);
    border: 1px solid var(--tool-border);
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(70, 29, 78, .05);
    transition: .25s ease;
}

.home-tool-card:hover {
    color: var(--tool-accent);
    border-color: rgba(244, 7, 115, .25);
    transform: translateY(-4px);
    box-shadow: var(--tool-shadow);
}

.home-tool-card__icon {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    color: #fff;
    background: linear-gradient(135deg, var(--pink), var(--tool-accent));
    border-radius: 14px;
    font-size: 20px;
}

.home-tool-card:nth-child(even) .home-tool-card__icon {
    background: linear-gradient(135deg, #8b52a0, var(--tool-purple));
}

.home-tool-card__text {
    flex: 1;
    min-width: 0;
}

.home-tool-card__text strong {
    display: block;
    font-size: 13px;
    line-height: 1.6;
}

.home-tool-card__text small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-tool-card__arrow {
    color: #c4a8cb;
    font-size: 12px;
    transition: .25s;
}

.home-tool-card:hover .home-tool-card__arrow {
    color: var(--tool-accent);
    transform: translateX(-4px);
}

.home-tools__cta {
    display: block;
    text-align: center;
    margin-top: 24px;
}

.home-tools__cta a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--tool-accent);
    font-weight: 700;
    font-size: 14px;
    transition: .2s;
}

.home-tools__cta a:hover {
    color: var(--tool-purple);
}

.home-tools__cta a i {
    transition: .25s;
}

.home-tools__cta a:hover i {
    transform: translateX(-4px);
}

/* ──────────────────────────────────────────────
   6. HEADER TOOLS CTA
   ────────────────────────────────────────────── */

.tools-cta-header {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    color: var(--tool-accent);
    background: var(--tool-accent-soft);
    border: 1px solid rgba(244, 7, 115, .2);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    transition: .2s;
}

.tools-cta-header:hover {
    color: #fff;
    background: var(--tool-accent);
    border-color: var(--tool-accent);
}

/* ──────────────────────────────────────────────
   7. RESPONSIVE
   ────────────────────────────────────────────── */

@media (max-width: 1080px) {
    .tools-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .home-tools-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .pregnancy-content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 740px) {
    .tools-hero {
        padding: 45px 0 50px;
    }

    .tools-hero__icon {
        width: 60px;
        height: 60px;
        font-size: 26px;
    }

    .tools-hero h1 {
        font-size: 26px;
    }

    .tools-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 40px 0 60px;
    }

    .tool-card {
        padding: 24px 20px 22px;
    }

    .tool-card h2 {
        font-size: 16px;
    }

    .tool-page {
        padding: 35px 0 60px;
    }

    .tool-form {
        padding: 22px 18px;
    }

    .tool-datepicker {
        flex-direction: column;
        gap: 8px;
    }

    .tool-datepicker select {
        min-width: auto;
    }

    .tool-result {
        padding: 22px 18px;
    }

    .tool-result__details {
        grid-template-columns: 1fr;
    }

    .home-tools {
        padding: 45px 0;
    }

    .home-tools-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .home-tool-card {
        padding: 14px 16px;
    }

    .pregnancy-content-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .pregnancy-content-card {
        padding: 18px 16px;
    }
}

@media (max-width: 430px) {
    .tool-form__submit {
        font-size: 14px;
        padding: 12px 20px;
    }

    .tool-result__title {
        font-size: 17px;
    }

    .tool-detail-card__value {
        font-size: 14px;
    }
}

/* ── Entrance animation ── */
@keyframes toolResultEnter {
    from {
        opacity: 0;
        transform: translateY(16px) scale(.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tool-result {
        animation: none !important;
    }
}

/* 2026 tools experience refresh */
.home-tools--legacy { display: none !important; }
.home-tools--spotlight { padding: 28px 0 34px; background: linear-gradient(180deg,#fff 0%,#fff8fb 100%); }
.home-tools-shell { position:relative; display:grid; grid-template-columns:.85fr 1.35fr; gap:24px; overflow:hidden; padding:32px; background:linear-gradient(135deg,#fff5f8,#fff 52%,#f7f0ff); border:1px solid #f2dce9; border-radius:30px; box-shadow:0 24px 60px rgba(84,38,91,.11); }
.home-tools-shell::before { content:""; position:absolute; width:180px; height:180px; top:-100px; left:-50px; border-radius:50%; background:rgba(255,121,151,.13); }
.home-tools-intro,.home-quick-tool,.home-tools-cards { position:relative; z-index:1; }
.home-tools-intro h2 { margin:10px 0 8px; color:var(--purple-dark); font-size:clamp(24px,3vw,35px); }
.home-tools-intro>p { margin:0; color:var(--muted); font-size:13px; line-height:2; }
.home-tool-tabs { display:flex; flex-wrap:wrap; gap:7px; margin-top:20px; }
.home-tool-tabs button { padding:9px 12px; color:#704f78; background:#fff; border:1px solid #eadce9; border-radius:999px; font:inherit; font-size:11px; cursor:pointer; transition:.2s; }
.home-tool-tabs button.is-active { color:#fff; background:linear-gradient(135deg,#f40773,#8b3d91); border-color:transparent; box-shadow:0 7px 18px rgba(244,7,115,.2); }
.home-quick-tool { display:grid; grid-template-columns:1.15fr .85fr; gap:14px; padding:18px; background:rgba(255,255,255,.82); border:1px solid #f1e5ee; border-radius:22px; }
.home-quick-tool__form>label,.home-quick-tool__row label { display:block; margin-bottom:7px; color:var(--purple-dark); font-size:12px; font-weight:700; }
.home-quick-tool .tool-datepicker { gap:7px; }
.home-quick-tool .tool-datepicker select,.home-quick-tool .tool-cycle-select { min-width:0; padding:10px 8px; font-size:12px; }
.home-quick-tool__row { margin:12px 0; }
.home-quick-tool .tool-form__submit { padding:11px 15px; font-size:12px; }
.home-quick-tool__result { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:185px; padding:18px; text-align:center; background:linear-gradient(145deg,#fff0f6,#f7efff); border:1px dashed #dfbdd7; border-radius:17px; }
.home-quick-tool__result>span { display:grid; place-items:center; width:43px; height:43px; margin-bottom:9px; color:#fff; background:linear-gradient(135deg,#ff7997,#8b3d91); border-radius:14px; }
.home-quick-tool__result strong { color:var(--purple-dark); font-size:12px; line-height:1.7; }
.home-quick-tool__result b { margin:5px 0; color:var(--tool-accent); font-size:17px; }
.home-quick-tool__result small { color:var(--muted); font-size:10px; line-height:1.7; }
.home-quick-tool__result .tool-result--error { padding:12px; box-shadow:none; }
.home-tools-cards { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.home-tools-cards a { display:flex; align-items:center; gap:11px; padding:13px 15px; color:var(--purple-dark); background:#fff; border:1px solid #eee2ed; border-radius:15px; transition:.2s; }
.home-tools-cards a:hover { transform:translateY(-3px); border-color:#e9a8c8; box-shadow:0 10px 22px rgba(74,32,82,.08); }
.home-tools-cards a>i { display:grid; place-items:center; width:38px; height:38px; color:var(--tool-accent); background:#fff0f6; border-radius:12px; }
.home-tools-cards strong,.home-tools-cards small { display:block; }
.home-tools-cards strong { font-size:12px; }.home-tools-cards small { color:var(--muted); font-size:10px; }
.home-tools-cards__all { background:linear-gradient(135deg,#704080,#8f4b9d)!important; color:#fff!important; border:0!important; }.home-tools-cards__all small { color:#f5dff7; }

/* Clear mode selection and contextual feedback */
.home-tools-shell { grid-template-columns:1fr; gap:22px; }
.home-tools-intro { max-width:900px; margin:auto; text-align:center; }
.home-tools-intro>p { font-size:14px; }
.home-tool-tabs { justify-content:center; gap:12px; margin-top:24px; }
.home-tool-tabs button { display:flex; align-items:center; gap:10px; min-width:210px; padding:13px 17px; text-align:right; border-radius:16px; box-shadow:0 5px 16px rgba(73,35,80,.05); }
.home-tool-tabs button>i { display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px; color:#9a668f; background:#fbf1f7; border-radius:12px; font-size:16px; }
.home-tool-tabs button span,.home-tool-tabs button strong,.home-tool-tabs button small { display:block; }
.home-tool-tabs button strong { font-size:13px; line-height:1.6; }
.home-tool-tabs button small { color:#967f98; font-size:9px; }
.home-tool-tabs button.is-active { transform:translateY(-3px); }
.home-tool-tabs button.is-active>i { color:var(--mode-color,#f40773); background:#fff; }
.home-tool-tabs button.is-active small { color:rgba(255,255,255,.78); }
.home-tool-tabs button[data-quick-tool="period"].is-active { --mode-color:#ec407a; background:linear-gradient(135deg,#f40773,#d93272); }
.home-tool-tabs button[data-quick-tool="ovulation"].is-active { --mode-color:#7a4ea3; background:linear-gradient(135deg,#9b61bd,#684080); }
.home-tool-tabs button[data-quick-tool="pregnancy"].is-active { --mode-color:#e77954; background:linear-gradient(135deg,#ff956f,#d86662); }
.home-quick-tool { --mode-color:#ec407a; --mode-soft:#fff0f6; width:100%; max-width:900px; margin:auto; grid-template-columns:1fr 1fr; padding:0; overflow:hidden; border:2px solid color-mix(in srgb,var(--mode-color) 18%,white); border-radius:24px; box-shadow:0 18px 42px color-mix(in srgb,var(--mode-color) 12%,transparent); transition:border-color .25s,box-shadow .25s; }
.home-quick-tool.mode-ovulation { --mode-color:#7d4a9c; --mode-soft:#f8effd; }
.home-quick-tool.mode-pregnancy { --mode-color:#e77954; --mode-soft:#fff2ed; }
.home-quick-tool__form { padding:24px; background:#fff; }
.home-quick-tool__heading { display:flex; align-items:center; gap:11px; margin-bottom:8px; }
.home-quick-tool__heading>span { display:grid; place-items:center; width:46px; height:46px; flex:0 0 46px; color:#fff; background:var(--mode-color); border-radius:15px; font-size:18px; box-shadow:0 8px 18px color-mix(in srgb,var(--mode-color) 25%,transparent); }
.home-quick-tool__heading small { color:#9a889c; font-size:9px; }
.home-quick-tool__heading h3 { margin:1px 0 0; color:var(--mode-color); font-size:18px; }
.home-quick-tool__help { margin:0 0 20px; padding:9px 12px; color:#76667a; background:var(--mode-soft); border-radius:10px; font-size:11px; line-height:1.8; }
.home-field-step { display:inline-grid; place-items:center; width:21px; height:21px; margin-left:5px; color:#fff; background:var(--mode-color); border-radius:7px; font-size:10px; }
.home-quick-tool .tool-form__submit { background:linear-gradient(135deg,var(--mode-color),color-mix(in srgb,var(--mode-color) 72%,#583568)); box-shadow:0 8px 20px color-mix(in srgb,var(--mode-color) 22%,transparent); }
.home-quick-tool__result { min-height:100%; padding:28px; background:linear-gradient(145deg,var(--mode-soft),#fff); border:0; border-radius:0; transition:background .25s; }
.home-quick-tool__result>span { width:58px; height:58px; margin-bottom:13px; background:var(--mode-color); border-radius:19px; font-size:21px; box-shadow:0 10px 24px color-mix(in srgb,var(--mode-color) 25%,transparent); }
.home-quick-tool__result em { margin-bottom:9px; color:#927f95; font-size:10px; font-style:normal; }
.home-quick-tool__result em b { color:var(--mode-color); font-size:10px; }
.home-quick-tool__result strong { max-width:280px; font-size:14px; }
.home-quick-tool__result>b { margin:8px 0; color:var(--mode-color); font-size:20px; }
.home-quick-tool__result.has-result { animation:toolResultEnter .35s ease; }
.home-result-message { display:flex; align-items:flex-start; gap:10px; width:100%; margin:15px 0 0; padding:14px; color:#5f5063; background:#fff; border:1px solid color-mix(in srgb,var(--mode-color) 18%,white); border-radius:14px; line-height:1.9; text-align:right; }
.home-result-message>i { display:grid; place-items:center; width:32px; height:32px; flex:0 0 32px; color:#fff; background:var(--mode-color); border-radius:10px; font-size:13px; }
.home-result-message>div { flex:1; }
.home-result-message strong { display:block; max-width:none; margin:0 0 6px; color:var(--mode-color); font-size:15px; font-weight:800; line-height:1.8; }
.home-result-message small { display:block; padding-top:7px; color:#645767; border-top:1px dashed color-mix(in srgb,var(--mode-color) 18%,white); font-size:10px; font-weight:500; line-height:1.9; }
.home-result-message small b { color:var(--mode-color); font-size:10px; }

.tools-hero { padding:0; text-align:right; background:#fff8f3; }
.tools-hero .container { display:grid; grid-template-columns:1fr 1.25fr; align-items:center; min-height:460px; }
.tools-hero__content { position:relative; z-index:2; padding:55px 0; }
.tools-hero__art { width:100%; height:460px; object-fit:cover; object-position:left center; }
.tools-hero__badges { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.tools-hero__badges span { padding:8px 12px; color:#68446f; background:rgba(255,255,255,.8); border:1px solid #f0dce7; border-radius:999px; font-size:11px; }
.tool-page { background:linear-gradient(180deg,#fff 0,#fffafd 100%); }
.tool-form { position:relative; border-top:4px solid var(--tool-accent); box-shadow:0 18px 50px rgba(71,31,79,.1); }
.tool-datepicker select,.tool-cycle-select { border:1px solid #e4d6e3; background:#fffafc; border-radius:12px; transition:.2s; }
.tool-datepicker select:focus,.tool-cycle-select:focus { outline:3px solid rgba(244,7,115,.1); border-color:var(--tool-accent); }

@media(max-width:900px){.home-tools-shell{grid-template-columns:1fr}.home-quick-tool{grid-template-columns:1fr 1fr}.tools-hero .container{grid-template-columns:1fr}.tools-hero__art{height:320px;order:-1}.tools-hero__content{padding:25px 0 45px}.tools-hero{text-align:center}.tools-hero__badges{justify-content:center}}
@media(max-width:720px){.home-tool-tabs{display:grid;grid-template-columns:1fr}.home-tool-tabs button{width:100%;min-width:0}.home-quick-tool{grid-template-columns:1fr}.home-quick-tool__result{min-height:210px;border-top:1px solid color-mix(in srgb,var(--mode-color) 15%,white)}}
@media(max-width:620px){.home-tools--spotlight{padding:16px 0 24px}.home-tools-shell{padding:20px 15px;border-radius:22px}.home-tools-cards{grid-template-columns:1fr}.home-quick-tool__form{padding:20px 16px}.tools-hero__art{height:240px}.tools-hero .container{padding:0}.tools-hero__content{padding:22px 18px 38px}.tools-hero h1{font-size:27px}}

/* Individual calculator workspaces */
.tool-page>.container>.tool-page__header { max-width:920px; margin:0 auto 26px; text-align:center; }
.tool-page>.container>.tool-page__header p { max-width:720px; margin:auto; }
.tool-workspace { --workspace-color:#ec407a; --workspace-soft:#fff1f6; display:grid; grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr); align-items:stretch; gap:22px; margin-bottom:30px; }
.tool-workspace--ovulation { --workspace-color:#8152a0; --workspace-soft:#f8f0fd; }
.tool-workspace--pregnancy,.tool-workspace--calendar { --workspace-color:#e77754; --workspace-soft:#fff2ed; }
.tool-workspace--cycle { --workspace-color:#367f8b; --workspace-soft:#edf9fa; }
.tool-workspace--conception { --workspace-color:#b15383; --workspace-soft:#fff1f8; }
.tool-guide { display:grid; grid-template-columns:220px 1fr; overflow:hidden; min-height:390px; background:linear-gradient(145deg,var(--workspace-soft),#fff); border:1px solid color-mix(in srgb,var(--workspace-color) 17%,white); border-radius:24px; box-shadow:0 16px 42px rgba(69,31,76,.08); }
.tool-guide__visual { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:100%; overflow:hidden; color:var(--workspace-color); background:linear-gradient(155deg,color-mix(in srgb,var(--workspace-color) 17%,white),var(--workspace-soft)); }
.tool-guide__visual::before,.tool-guide__visual::after { content:""; position:absolute; width:110px; height:110px; border:22px solid rgba(255,255,255,.38); border-radius:50%; }
.tool-guide__visual::before { top:-45px; right:-45px; }.tool-guide__visual::after { bottom:-55px; left:-55px; }
.tool-guide__visual img { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; object-position:center; }
.tool-guide__visual>span { position:relative; z-index:1; display:grid; place-items:center; width:78px; height:78px; color:#fff; background:linear-gradient(135deg,var(--workspace-color),color-mix(in srgb,var(--workspace-color) 68%,#4d3157)); border:8px solid rgba(255,255,255,.55); border-radius:25px; font-size:28px; box-shadow:0 12px 28px color-mix(in srgb,var(--workspace-color) 22%,transparent); }
.tool-guide__visual>small { position:relative; z-index:1; max-width:100px; color:#806e82; font-size:9px; line-height:1.7; text-align:center; }
.tool-guide__body { padding:23px 20px; }
.tool-guide__eyebrow { color:var(--workspace-color); font-size:10px; font-weight:800; }
.tool-guide__body h2 { margin:6px 0; color:var(--purple-dark); font-size:18px; }
.tool-guide__body>p { margin:0 0 13px; color:#786b7b; font-size:11px; line-height:1.9; }
.tool-guide__body ol { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.tool-guide__body li { display:flex; align-items:flex-start; gap:8px; }
.tool-guide__body li>span { display:grid; place-items:center; width:25px; height:25px; flex:0 0 25px; color:#fff; background:var(--workspace-color); border-radius:8px; font-size:10px; font-weight:800; }
.tool-guide__body li strong,.tool-guide__body li small { display:block; }.tool-guide__body li strong { color:#5c4661; font-size:11px; }.tool-guide__body li small { color:#918494; font-size:9px; line-height:1.7; }
.tool-guide__privacy { display:flex; align-items:center; gap:8px; margin-top:14px; padding:9px 10px; color:#467268; background:rgba(228,248,240,.72); border-radius:10px; }
.tool-guide__privacy>i { font-size:16px; }.tool-guide__privacy strong,.tool-guide__privacy small { display:block; }.tool-guide__privacy strong { font-size:9px; }.tool-guide__privacy small { color:#6d887f; font-size:8px; }
.tool-workspace__calculator { min-width:0; }
.tool-workspace__calculator>.tool-form { width:100%; max-width:none; min-height:390px; display:flex; flex-direction:column; justify-content:center; padding:28px; border-top-color:var(--workspace-color); }
.tool-workspace__calculator>.tool-form form { width:100%; }
.tool-workspace__calculator .tool-form__submit { background:linear-gradient(135deg,var(--workspace-color),color-mix(in srgb,var(--workspace-color) 70%,#50315b)); box-shadow:0 9px 22px color-mix(in srgb,var(--workspace-color) 20%,transparent); }
.tool-workspace__calculator>#result-container:not(:empty) { margin-top:16px; }
.tool-workspace__calculator .tool-result { max-width:none; margin-top:0; border-top:4px solid var(--workspace-color); }
.tool-form__badge { display:inline-flex; align-items:center; gap:6px; align-self:flex-start; margin-bottom:8px; padding:6px 10px; color:var(--workspace-color); background:var(--workspace-soft); border-radius:999px; font-size:10px; font-weight:800; }
.tool-week-picker h2 { margin:3px 0 6px; color:var(--purple-dark); font-size:21px; }.tool-week-picker>p { margin:0 0 20px; color:var(--muted); font-size:11px; line-height:1.9; }
.tool-week-picker .tool-cycle-select { width:100%; }
.tool-week-picker__help { display:flex; align-items:center; gap:6px; margin-top:14px; color:var(--workspace-color); font-size:11px; font-weight:700; }
.tool-week-picker__submit { margin-top:16px; }

/* Friendly week-by-week result */
.week-result { scroll-margin-top:155px; max-width:1000px; margin:12px auto 48px; padding:24px; overflow:hidden; background:linear-gradient(145deg,#fff8f4,#fff 48%,#faf1ff); border:1px solid #f0dce5; border-radius:28px; box-shadow:0 22px 55px rgba(72,31,78,.11); opacity:0; transform:translateY(18px); }
.week-result[hidden] { display:none !important; }
.week-result.is-visible { opacity:1; transform:none; transition:opacity .35s ease,transform .35s ease; }
.week-result:focus { outline:none; }
.week-result__welcome { position:relative; display:flex; align-items:center; gap:18px; overflow:hidden; margin:-24px -24px 20px; padding:25px 30px; color:#fff; background:linear-gradient(125deg,#e77754,#c85475 55%,#724083); }
.week-result__welcome::after { content:""; position:absolute; left:-35px; bottom:-55px; width:155px; height:155px; border:26px solid rgba(255,255,255,.09); border-radius:50%; }
.week-result__number { position:relative; z-index:1; display:grid; place-items:center; width:76px; height:76px; flex:0 0 76px; color:#d75f61; background:#fff; border:7px solid rgba(255,255,255,.3); border-radius:24px; font-size:31px; font-weight:900; box-shadow:0 13px 30px rgba(72,24,69,.2); }
.week-result__welcome>div { position:relative; z-index:1; flex:1; }.week-result__welcome small { color:#ffe8ee; font-size:11px; font-weight:700; }.week-result__welcome h2 { margin:4px 0; color:#fff; font-size:clamp(18px,2.4vw,27px); line-height:1.6; }.week-result__welcome p { margin:0; color:#f9eaf3; font-size:11px; }
.week-result__heart { position:relative; z-index:1; color:rgba(255,255,255,.17); font-size:55px; transform:rotate(-10deg); }
.week-result .pregnancy-week-nav { max-width:none; margin:0 0 18px; padding:10px; background:#fff; border:1px solid #f0e3ec; border-radius:15px; }
.week-result .pregnancy-week-nav__link { font-family:inherit; cursor:pointer; }
.week-result .pregnancy-week-nav__current { padding:0 12px; color:#b34c74; font-size:14px; }
.week-result .pregnancy-content-grid { max-width:none; gap:13px; }
.week-result .pregnancy-content-card { position:relative; overflow:hidden; min-height:175px; padding:22px; border:0; box-shadow:none; transition:transform .2s,box-shadow .2s; }
.week-result .pregnancy-content-card:hover { transform:translateY(-3px); box-shadow:0 13px 26px rgba(73,35,81,.08); }
.week-result .pregnancy-content-card:nth-child(1) { background:#fff0f3; }.week-result .pregnancy-content-card:nth-child(2) { background:#f8f0ff; }.week-result .pregnancy-content-card:nth-child(3) { background:#fff8e9; }.week-result .pregnancy-content-card:nth-child(4) { background:#edf9f5; }
.week-result .pregnancy-content-card__icon { width:48px; height:48px; margin-bottom:12px; border-radius:15px; }
.week-result .pregnancy-content-card:nth-child(1) .pregnancy-content-card__icon { background:linear-gradient(135deg,#ff7994,#d65376); }.week-result .pregnancy-content-card:nth-child(2) .pregnancy-content-card__icon { background:linear-gradient(135deg,#a36ac0,#714285); }.week-result .pregnancy-content-card:nth-child(3) .pregnancy-content-card__icon { background:linear-gradient(135deg,#f1ae54,#db7656); }.week-result .pregnancy-content-card:nth-child(4) .pregnancy-content-card__icon { background:linear-gradient(135deg,#52a88c,#367b78); }
.week-result .pregnancy-content-card h3 { font-size:14px; }.week-result .pregnancy-content-card p { font-size:12px; line-height:2; }

@media(max-width:1050px){.tool-workspace{grid-template-columns:1fr}.tool-guide{min-height:0}.tool-workspace__calculator>.tool-form{min-height:0}.tool-guide__visual{min-height:260px}}
@media(max-width:650px){.tool-page>.container>.tool-page__header{text-align:right}.tool-workspace{gap:14px}.tool-guide{grid-template-columns:1fr}.tool-guide__visual{min-height:180px}.tool-guide__body{padding:20px 16px}.tool-workspace__calculator>.tool-form{padding:22px 17px}.tool-guide__visual>small{display:none}}
@media(max-width:650px){.week-result{scroll-margin-top:100px;padding:16px;border-radius:20px}.week-result__welcome{align-items:flex-start;margin:-16px -16px 15px;padding:20px 16px}.week-result__number{width:58px;height:58px;flex-basis:58px;border-radius:18px;font-size:24px}.week-result__heart{display:none}.week-result__welcome h2{font-size:17px}.week-result .pregnancy-week-nav__current{font-size:11px}.week-result .pregnancy-week-nav__link{padding:7px 9px;font-size:10px}}