@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
    --pink-bg: #fff7fa;
    --pink-soft: #fff0f5;
    --pink-light: #ffe4ee;
    --pink: #ed5b91;
    --pink-dark: #df417c;
    --pink-pale: #fff5f8;
    --text-dark: #2d1d2b;
    --text: #554956;
    --text-light: #81747f;
    --white: #fff;
    --border: rgba(230,145,174,.14);
    --shadow: 0 10px 35px rgba(120,55,85,.07);
    --shadow-hover: 0 16px 40px rgba(120,55,85,.11);
    --radius-card: 20px;
    --radius-nav: 24px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    font-family: "DM Sans", sans-serif;
    background:
        radial-gradient(circle at 78% 17%, rgba(255,226,238,.55), transparent 26%),
        linear-gradient(180deg,#fff8fa 0%,#fff5f8 100%);
    color: var(--text-dark);
    line-height: 1.6;
    cursor: url("cyelle-cursor.svg") 12 12, auto;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }

/* NAVIGATION */
.navbar {
    width: calc(100% - 60px);
    max-width: 1475px;
    height: 104px;
    margin: 14px auto 0;
    padding: 0 30px;
    display: flex;
    align-items: center;
    background: rgba(255,255,255,.91);
    border: 1px solid rgba(255,255,255,.8);
    border-radius: var(--radius-nav);
    box-shadow: 0 8px 30px rgba(70,35,50,.06);
    position: sticky;
    top: 14px;
    z-index: 1000;
    backdrop-filter: blur(18px);
}

.logo {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 250px;
    color: var(--pink);
    font-family: "DM Sans", sans-serif;
    font-size: 2.65rem;
    font-weight: 600;
    letter-spacing: -1.5px;
}
.logo-flower { width: 51px; height: 51px; display:flex; align-items:center; justify-content:center; }
.logo-flower svg { width:100%; height:100%; }

.nav-links {
    flex: 1;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
}
.nav-links a {
    min-height:58px;
    padding:0 22px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border-radius:30px;
    color:#514953;
    font-size:1rem;
    transition:.25s ease;
}
.nav-links a:hover,
.nav-links a.active { color:var(--pink); background:#fff0f5; }
.nav-icon { width:25px; height:25px; display:inline-flex; align-items:center; justify-content:center; }
.nav-icon svg { width:100%; height:100%; }

.account-menu { position:relative; min-width:230px; display:flex; justify-content:flex-end; }
.account-button {
    border:0;
    background:transparent;
    display:flex;
    align-items:center;
    gap:12px;
    padding:7px 8px;
    color:var(--text-dark);
    font-size:1rem;
    border-radius:30px;
}
.account-button:hover { background:var(--pink-pale); }
.account-avatar,
.dropdown-avatar {
    width:46px; height:46px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--pink); color:#fff; font-size:1.1rem;
}
.account-chevron { width:20px; height:20px; display:flex; }
.account-chevron svg { width:100%; height:100%; }

.account-dropdown {
    position:absolute;
    top:calc(100% + 15px);
    right:0;
    width:345px;
    padding:28px 24px;
    background:#fff;
    border-radius:20px;
    box-shadow:0 15px 45px rgba(70,35,50,.13);
    border:1px solid rgba(230,145,174,.12);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:.2s ease;
}
.account-dropdown.show,
.account-menu:focus-within .account-dropdown {
    opacity:1; visibility:visible; transform:translateY(0);
}
.account-info { display:flex; align-items:center; gap:16px; padding:3px 4px 18px; }
.dropdown-user { display:flex; flex-direction:column; gap:3px; }
.dropdown-user strong { font-size:1.05rem; }
.dropdown-user span { color:var(--text-light); font-size:.9rem; }
.account-divider { height:1px; background:#f2e5eb; margin:0 -24px 10px; }
.account-dropdown a,
.account-dropdown button {
    width:100%;
    border:0;
    background:transparent;
    padding:14px 5px;
    display:flex;
    align-items:center;
    gap:14px;
    color:var(--text-dark);
    font-size:.95rem;
    text-align:left;
}
.account-dropdown a:hover { color:var(--pink); }
.logout-button { color:var(--pink) !important; }
.dropdown-icon { width:25px; height:25px; display:flex; flex:0 0 25px; }
.dropdown-icon svg { width:100%; height:100%; }

/* MAIN + HERO */
main {
    width:calc(100% - 60px);
    max-width:1440px;
    margin:0 auto;
}
.dashboard-hero {
    min-height:368px;
    padding:70px 38px 35px;
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden;
}
.hero-content { position:relative; z-index:3; max-width:620px; }
.greeting { margin-bottom:12px; color:var(--pink); font-size:1.25rem; font-weight:600; }
.greeting-flower { display:inline-flex; width:25px; height:25px; margin-left:5px; vertical-align:-5px; }
.greeting-flower svg { width:100%; height:100%; }
.dashboard-hero h1 {
    max-width:650px;
    font-family:"DM Sans", sans-serif;
    font-size:clamp(3rem,4vw,4.4rem);
    line-height:1.13;
    font-weight:600;
    letter-spacing:-2px;
    color:#2d1d2b;
    margin-bottom:16px;
}
.hero-description {
    max-width:560px;
    color:#716570;
    font-size:1.1rem;
    line-height:1.65;
}

/* HERO FLOWER */
.dashboard-flower {
    position:absolute;
    right:55px;
    bottom:-62px;
    width:500px;
    height:430px;
    opacity:.88;
    pointer-events:none;
}
.dashboard-petal {
    position:absolute;
    width:122px;
    height:245px;
    left:185px;
    top:70px;
    border-radius:72% 72% 45% 45%;
    background:linear-gradient(160deg,#ffe8f1 0%,#f8b0ca 50%,#ee79a6 100%);
    transform-origin:50% 100%;
    box-shadow:0 10px 30px rgba(226,90,137,.12);
}
.dashboard-petal-1 { transform:rotate(-48deg); }
.dashboard-petal-2 { transform:rotate(-18deg); }
.dashboard-petal-3 { transform:rotate(12deg); }
.dashboard-petal-4 { transform:rotate(42deg); }
.dashboard-petal-5 { transform:rotate(72deg); }
.dashboard-flower-center {
    position:absolute;
    width:60px; height:60px; left:217px; top:235px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#fff9fc,#fbc4d9 45%,#e9699a);
    z-index:5;
}
.flower-stem {
    position:absolute; left:243px; top:268px; width:16px; height:190px;
    border-radius:50%;
    background:linear-gradient(90deg,#f08aac,#e96c9b);
    transform:rotate(14deg);
    transform-origin:top;
    z-index:1;
}
.flower-leaf { position:absolute; width:120px; height:52px; border-radius:100% 0 100% 0; background:#f7bdd1; opacity:.55; }
.flower-leaf-left { left:128px; top:315px; transform:rotate(-20deg); }
.flower-leaf-right { left:315px; top:320px; transform:rotate(24deg) scaleX(-1); }

/* SUMMARY CARDS */
.summary-grid {
    display:grid;
    grid-template-columns:1.05fr 1fr 1.05fr;
    gap:20px;
    margin-top:0;
}
.dashboard-card {
    min-height:276px;
    padding:28px 35px;
    background:rgba(255,255,255,.94);
    border:1px solid rgba(230,145,174,.08);
    border-radius:var(--radius-card);
    box-shadow:var(--shadow);
    position:relative;
    overflow:hidden;
}
.dashboard-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-hover); }
.dashboard-card-label { color:var(--pink); font-size:.95rem; font-weight:500; margin-bottom:12px; }
.dashboard-card h2 {
    font-family:"DM Sans", sans-serif;
    font-size:1.85rem;
    line-height:1.2;
    font-weight:600;
    color:var(--text-dark);
    margin-bottom:14px;
}
.card-content { position:relative; z-index:2; }
.phase-summary-card { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.cycle-day-badge {
    display:inline-block;
    padding:4px 14px;
    border-radius:999px;
    background:#fff0f5;
    color:#a65a75;
    font-size:.9rem;
    margin-bottom:14px;
}
.card-description { color:var(--text); font-size:.95rem; line-height:1.65; margin-bottom:20px; }
.card-link {
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--pink);
    font-size:.9rem;
    font-weight:500;
}
.card-link span { font-size:1.2rem; }
.cycle-progress {
    width:165px; height:165px; flex:0 0 165px;
    position:relative; display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    background:conic-gradient(var(--pink) calc(var(--progress) * 1), #f0edf0 0);
}
.cycle-progress::before {
    content:""; position:absolute; inset:9px; background:#fff; border-radius:50%;
}
.cycle-progress-inner {
    position:relative; z-index:1;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.cycle-progress-inner span { font-size:.8rem; color:var(--text); line-height:1.1; }
.cycle-progress-inner strong { font-family:"DM Sans",sans-serif; font-size:2.3rem; line-height:1.05; color:var(--text-dark); }
.cycle-progress-inner small { font-size:.72rem; color:var(--text-light); }

.next-period-summary-card { position:relative; }
.next-period-summary-card h2 { font-size:2rem; margin-bottom:8px; }
.estimated-label { color:var(--text); font-size:.95rem; }
.estimated-date { color:var(--text); font-size:.95rem; }
.calendar-icon {
    position:absolute; right:32px; top:45px;
    width:65px; height:65px; border-radius:50%;
    background:#fff1f6; color:var(--pink);
    display:flex; align-items:center; justify-content:center;
}
.calendar-icon svg { width:32px; height:32px; }
.mini-chart { position:absolute; left:32px; right:32px; bottom:18px; height:90px; color:var(--pink); }
.mini-chart svg { width:100%; height:100%; }

.overview-summary-card { position:relative; }
.overview-summary-card h2 { font-size:2rem; margin-bottom:15px; }
.overview-label { color:var(--text); font-size:.95rem; }
.overview-value { color:var(--text); font-size:.95rem; margin-bottom:28px; }
.uterus-illustration {
    position:absolute; right:25px; top:45px;
    width:150px; height:150px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
}
.uterus-illustration svg { width:150px; height:150px; }

/* DAILY GRID */
.daily-grid {
    display:grid;
    grid-template-columns:1.55fr 1fr;
    gap:20px;
    margin-top:20px;
    margin-bottom:60px;
}
.check-in-card,
.daily-tip-card { min-height:220px; padding:28px 35px; }
.check-in-heading h2,
.daily-tip-card h2 {
    font-family:"DM Sans",sans-serif;
    font-size:1.45rem;
    font-weight:600;
    color:var(--text-dark);
    margin-bottom:2px;
}
.check-in-heading p { color:var(--text); font-size:.92rem; margin-bottom:20px; }
.check-in-options { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.check-in-option {
    min-height:96px;
    border:1px solid #f5dce6;
    background:#fffafb;
    border-radius:16px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:7px; color:var(--text-dark);
    transition:.25s ease;
}
.check-in-option:hover { background:#fff0f5; border-color:#f4b7cd; transform:translateY(-3px); }
.check-in-option.active { background:#ffe9f1; border-color:var(--pink); color:var(--pink-dark); }
.check-in-icon { width:28px; height:28px; display:flex; align-items:center; justify-content:center; color:var(--pink); }
.check-in-icon svg { width:100%; height:100%; }
.check-in-option > span:last-child { font-size:.88rem; }

.daily-tip-card { display:flex; flex-direction:column; justify-content:space-between; }
.tip-content { position:relative; z-index:2; max-width:370px; }
.tip-quote { margin-top:24px; color:var(--text); font-size:1rem; line-height:1.7; position:relative; padding-left:28px; }
.quote-mark { position:absolute; left:0; top:-12px; color:var(--pink); font-family:"DM Sans",sans-serif; font-size:3.5rem; line-height:1; }
.tip-flower { position:absolute; right:15px; bottom:-5px; width:170px; height:170px; opacity:.35; pointer-events:none; }
.tip-petal { position:absolute; width:58px; height:100px; left:55px; top:30px; border-radius:70% 70% 45% 45%; background:linear-gradient(160deg,#ffe7f0,#f29abd); transform-origin:50% 100%; }
.tip-petal-1 { transform:rotate(-45deg); }
.tip-petal-2 { transform:rotate(-5deg); }
.tip-petal-3 { transform:rotate(35deg); }
.tip-petal-4 { transform:rotate(75deg); }
.tip-petal-5 { transform:rotate(115deg); }
.tip-flower-center { position:absolute; left:74px; top:82px; width:35px; height:35px; border-radius:50%; background:#f8b8ce; }
.tip-stem { position:absolute; width:8px; height:75px; left:83px; top:100px; border-radius:50%; background:#ef9db9; transform:rotate(18deg); transform-origin:top; }
.tip-indicators { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:10px; }
.tip-dot { width:9px; height:9px; padding:0; border:0; border-radius:50%; background:#ded9dc; }
.tip-dot.active { background:var(--pink); }

/* HIDDEN LOWER SECTIONS FOR THE DASHBOARD VIEW */
.settings-section
{ display:none; }

#home, #cycle, #calendar, #learn, #settings, .learn-phase-card {
    scroll-margin-top: 130px;
}

@media (max-width:1200px) {
    .navbar { width:calc(100% - 35px); }
    main { width:calc(100% - 35px); }
    .nav-links { gap:5px; }
    .nav-links a { padding:0 14px; }
    .logo { min-width:auto; font-size:2.1rem; }
    .logo-flower { width:42px; height:42px; }
    .account-menu { min-width:190px; }
    .dashboard-flower { right:-20px; opacity:.65; }
    .summary-grid { grid-template-columns:1fr 1fr; }
    .overview-summary-card { grid-column:span 2; }
}
@media (max-width:900px) {
    .navbar { height:auto; min-height:78px; padding:12px 18px; }
    .nav-links { display:none; }
    .logo { font-size:2rem; }
    .account-menu { min-width:auto; }
    .account-name { display:none; }
    .dashboard-hero { min-height:420px; padding:55px 25px; }
    .dashboard-hero h1 { font-size:3.2rem; }
    .dashboard-flower { right:-120px; bottom:-20px; opacity:.45; }
    .summary-grid { grid-template-columns:1fr; }
    .overview-summary-card { grid-column:auto; }
    .daily-grid { grid-template-columns:1fr; }
}
@media (max-width:600px) {
    .navbar { width:calc(100% - 20px); margin-top:10px; border-radius:18px; }
    main { width:calc(100% - 20px); }
    .logo { font-size:1.7rem; }
    .logo-flower { width:36px; height:36px; }
    .account-avatar { width:40px; height:40px; }
    .account-dropdown { width:290px; right:-5px; }
    .dashboard-hero { min-height:450px; padding:45px 15px 35px; align-items:flex-start; }
    .dashboard-hero h1 { font-size:2.65rem; letter-spacing:-1px; }
    .greeting { font-size:1rem; }
    .hero-description { font-size:.95rem; }
    .dashboard-flower { width:350px; height:330px; right:-100px; bottom:-30px; }
    .dashboard-card { padding:25px; min-height:250px; }
    .phase-summary-card { align-items:flex-start; }
    .cycle-progress { width:130px; height:130px; flex-basis:130px; }
    .cycle-progress-inner strong { font-size:1.9rem; }
    .uterus-illustration { width:90px; height:90px; }
    .uterus-illustration svg { width:90px; height:90px; }
    .check-in-card, .daily-tip-card { padding:25px; }
    .check-in-options { grid-template-columns:repeat(2,1fr); }
    .check-in-option:last-child { grid-column:span 2; }
    .tip-flower { opacity:.2; }
}

button:disabled { opacity:.65; cursor:not-allowed; }
:focus-visible { outline:3px solid rgba(237,91,145,.35); outline-offset:3px; }

/* ========================================
   CYELLE — MOOD PICKER
   ======================================== */

.check-in-picker {
    margin: 24px 0 20px;
    padding: 20px;
    border-radius: 20px;
    background: #fff7fa;
    border: 1px solid #f4dce7;
}

.check-in-picker[hidden] {
    display: none;
}

.check-in-picker-label {
    margin: 0 0 16px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #5f4b55;
}

.mood-options {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.mood-option {
    border: 1px solid #eadde3;
    background: #ffffff;
    border-radius: 16px;
    padding: 14px 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.mood-option:hover {
    transform: translateY(-2px);
    border-color: #ef78a8;
}

.mood-option.selected {
    border-color: #ef78a8;
    background: #fff0f6;
}

.mood-emoji {
    font-size: 30px;
    line-height: 1;
}

.mood-name {
    font-size: 13px;
    font-weight: 600;
    color: #5f4b55;
}

@media (max-width: 700px) {
    .mood-options {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========================================
   CYELLE — CHECK-IN PICKERS
   ======================================== */

.check-in-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 22px 0 20px;
    animation: checkInPickerIn 0.25s ease;
}

.check-in-picker[hidden] {
    display: none;
}


/* ---------- MOOD / ENERGY OPTIONS ---------- */

.mood-option,
.energy-option,
.flow-option {
    border: 1px solid rgba(239, 120, 168, 0.22);
    background: #fff8fb;
    border-radius: 16px;
    padding: 12px 18px;
    min-width: 100px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    color: #5c4650;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}


/* ---------- CYELLE MOOD ILLUSTRATIONS ---------- */

.mood-illustration,
.flow-illustration {
    width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #ef78a8;

    flex-shrink: 0;
}

.mood-illustration svg {
    width: 100%;
    height: 100%;
    display: block;
}

.mood-option.selected .mood-illustration {
    color: #c95784;
}


/* ---------- ANIMATION ---------- */

@keyframes checkInPickerIn {

    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ---------- MOBILE ---------- */

@media (max-width: 600px) {

    .check-in-picker {
        gap: 8px;
    }

    .mood-option,
    .energy-option {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
        padding: 11px 10px;
    }

}

/* ========================================
   CYELLE — CHECK-IN SELECTED STATE
   ======================================== */

.mood-option,
.energy-option,
.flow-option {
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

/* Selected option */

.mood-option.selected,
.energy-option.selected,
.flow-option.selected {
    background: #fff0f6;
    border-color: #ef78a8;
    color: #d95f91;
    box-shadow: 0 4px 14px rgba(239, 120, 168, 0.16);
}

/* Small interaction */

.mood-option.selected .mood-illustration,
.energy-option.selected .energy-illustration,
.flow-option.selected .flow-illustration {
    color: #ef78a8;
}

.mood-option.selected,
.energy-option.selected,
.flow-option.selected {
    transform: translateY(-2px);
}

/* ========================================
   CYELLE — SYMPTOMS
   ======================================== */

#symptomsPicker:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.symptom-option {
    border: 1px solid rgba(239, 120, 168, 0.22);
    background: #fff8fb;
    border-radius: 999px;
    padding: 10px 18px;

    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: #5c4650;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.symptom-option:hover {
    transform: translateY(-2px);
    border-color: #ef78a8;
}

.symptom-option.selected {
    background: #fff0f6;
    border-color: #ef78a8;
    color: #d95f91;
    box-shadow: 0 4px 14px rgba(239, 120, 168, 0.16);
    transform: translateY(-2px);
}

@media (max-width: 600px) {

    .symptom-option {
        padding: 9px 14px;
        font-size: 13px;
    }

}
/* ========================================
   CYELLE — NOTES PANEL
   ======================================== */

body {
    transition: padding-right 0.3s ease;
}

body.notes-open {
    padding-right: 420px;
}

.notes-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    height: 100vh;

    background: linear-gradient(180deg, #fffafc 0%, #fff5f9 100%);
    border-left: 1px solid rgba(239, 120, 168, 0.18);
    box-shadow: -12px 0 40px rgba(120, 55, 85, 0.08);

    display: flex;
    flex-direction: column;
    padding: 28px 26px;

    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1200;
}

.notes-panel.open {
    transform: translateX(0);
}

.notes-panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.notes-panel-header h2 {
    flex: 1;
    font-family: "DM Sans", sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-dark);
}

.notes-panel-flower {
    position: relative;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
}

.notes-close-btn {
    border: 0;
    background: #fff0f5;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pink);
}

.notes-close-btn svg { width: 18px; height: 18px; }
.notes-close-btn:hover { background: var(--pink-light); }

.notes-new-btn {
    border: 1px dashed rgba(239, 120, 168, 0.4);
    background: #fff8fb;
    border-radius: 14px;
    padding: 13px;
    margin-bottom: 18px;
    color: var(--pink-dark);
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.notes-new-btn:hover {
    background: var(--pink-light);
    border-color: var(--pink);
}

.notes-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.note-card {
    position: relative;
    border: 1px solid rgba(239, 120, 168, 0.18);
    background: #ffffff;
    border-radius: 16px;
    padding: 14px 16px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.note-card:hover {
    transform: translateY(-2px);
    border-color: #ef78a8;
    box-shadow: 0 6px 16px rgba(239, 120, 168, 0.12);
}

.note-card-date {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--pink);
    margin-bottom: 4px;
}

.note-card-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.note-card-snippet {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.note-card-delete {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    border: 0;
    background: transparent;
    color: #c98da2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.note-card:hover .note-card-delete { opacity: 1; }
.note-card-delete:hover { background: #ffe4ee; color: var(--pink-dark); }
.note-card-delete svg { width: 14px; height: 14px; }

.notes-empty {
    text-align: center;
    color: var(--text-light);
    font-size: 13.5px;
    margin-top: 30px;
}

/* ---------- EDITOR VIEW ---------- */

.notes-editor {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.notes-back-btn {
    align-self: flex-start;
    border: 0;
    background: transparent;
    color: var(--pink);
    font-weight: 600;
    font-size: 13.5px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.notes-title-input {
    border: none;
    background: transparent;
    font-family: "DM Sans", sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-dark);
    padding: 4px 0 10px;
    border-bottom: 1px solid rgba(239, 120, 168, 0.18);
    margin-bottom: 14px;
    outline: none;
}

.notes-title-input::placeholder { color: #d9a9bb; }

.notes-content-input {
    flex: 1;
    resize: none;
    border: none;
    background: transparent;
    outline: none;
    font-family: "DM Sans", sans-serif;
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--text-dark);
}

.notes-content-input::placeholder { color: #d9a9bb; font-style: normal; }

.notes-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid rgba(239, 120, 168, 0.14);
}

.notes-status {
    font-size: 12px;
    font-weight: 600;
    color: var(--pink);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.notes-status.show { opacity: 1; }

.notes-delete-btn {
    border: 0;
    background: transparent;
    color: #c95784;
    font-weight: 600;
    font-size: 13px;
}

.notes-delete-btn:hover { text-decoration: underline; }

/* ---------- DECORATIVE FLOWER (reused motif, small scale) ---------- */

.notes-petal {
    position: absolute;
    width: 9px;
    height: 17px;
    left: 12.5px;
    top: 3px;
    border-radius: 72% 72% 45% 45%;
    background: linear-gradient(160deg, #ffe8f1 0%, #f29abd 100%);
    transform-origin: 50% 100%;
}

.notes-petal-1 { transform: rotate(-48deg); }
.notes-petal-2 { transform: rotate(-18deg); }
.notes-petal-3 { transform: rotate(12deg); }
.notes-petal-4 { transform: rotate(42deg); }
.notes-petal-5 { transform: rotate(72deg); }

.notes-flower-center {
    position: absolute;
    width: 8px;
    height: 8px;
    left: 13px;
    top: 13px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff9fc, #e9699a);
}

@media (max-width: 600px) {

    .notes-panel {
        width: 100%;
    }

    body.notes-open {
        padding-right: 0;
        overflow: hidden;
    }

}

/* ========================================
   CYELLE — CYCLE SETUP BANNER
   ======================================== */

.cycle-setup-banner {
    display: flex;
    align-items: center;
    gap: 20px;

    margin: 20px auto 0;
    padding: 24px 28px;
    max-width: 1440px;

    background: linear-gradient(135deg, #fff0f5 0%, #ffe4ee 100%);
    border: 1px solid rgba(239, 120, 168, 0.25);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
}

.cycle-setup-banner[hidden] {
    display: none;
}

.cycle-setup-banner-flower {
    position: relative;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
}

.cycle-setup-banner-flower .notes-petal {
    width: 14px;
    height: 26px;
    left: 18px;
    top: 5px;
}

.cycle-setup-banner-flower .notes-flower-center {
    width: 12px;
    height: 12px;
    left: 19px;
    top: 19px;
}

.cycle-setup-banner-text {
    flex: 1;
}

.cycle-setup-banner-text h3 {
    font-family: "DM Sans", sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.cycle-setup-banner-text p {
    font-size: 0.92rem;
    color: var(--text);
}

.cycle-setup-banner-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 0 auto;
}

.cycle-setup-btn {
    border: none;
    background: var(--pink);
    color: #fff;
    padding: 11px 22px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.cycle-setup-btn:hover {
    background: var(--pink-dark);
}

.cycle-setup-skip {
    border: none;
    background: transparent;
    color: var(--text-light);
    font-size: 0.82rem;
    text-decoration: underline;
}

@media (max-width: 700px) {

    .cycle-setup-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .cycle-setup-banner-actions {
        flex-direction: row;
        width: 100%;
    }

    .cycle-setup-btn {
        flex: 1;
    }

}


/* ========================================
   CYELLE — CYCLE SETUP MODAL
   ======================================== */

.cycle-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(45, 29, 43, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1500;
}

.cycle-modal-overlay[hidden] {
    display: none;
}

.cycle-modal {
    position: relative;
    width: 90%;
    max-width: 420px;
    background: #fffafc;
    border-radius: 22px;
    padding: 32px 30px;
    box-shadow: 0 20px 60px rgba(120, 55, 85, 0.2);
    border: 1px solid rgba(239, 120, 168, 0.18);
}

.cycle-modal h2 {
    font-family: "DM Sans", sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 6px;
}

.cycle-modal-subtext {
    font-size: 0.88rem;
    color: var(--text-light);
    margin-bottom: 22px;
}

.cycle-modal-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
    margin-top: 16px;
}

.cycle-modal-input {
    width: 100%;
    border: 1px solid rgba(239, 120, 168, 0.25);
    background: #fff;
    border-radius: 12px;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text-dark);
    outline: none;
}

.cycle-modal-input:focus {
    border-color: var(--pink);
}

.cycle-modal-save {
    width: 100%;
    margin-top: 24px;
    border: none;
    background: var(--pink);
    color: #fff;
    padding: 13px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background 0.2s ease;
}

.cycle-modal-save:hover {
    background: var(--pink-dark);
}

.cycle-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 32px;
    height: 32px;
    border: none;
    background: #fff0f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pink);
}

.cycle-modal-close svg {
    width: 16px;
    height: 16px;
}
/* ========================================
   CYELLE — CYCLE INFO SECTION
   ======================================== */

.cycle-info-section {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 20px;
    margin-top: 20px;
}

.cycle-setup-card,
.cycle-timeline-card {
    min-height: auto;
}

.cycle-setup-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    margin: 14px 0 6px;
}

.cycle-setup-input {
    width: 100%;
    border: 1px solid rgba(239, 120, 168, 0.25);
    background: #fff;
    border-radius: 12px;
    padding: 10px 13px;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text-dark);
    outline: none;
}

.cycle-setup-input:focus {
    border-color: var(--pink);
}

.cycle-setup-save {
    margin-top: 18px;
    border: none;
    background: var(--pink);
    color: #fff;
    padding: 11px 24px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.2s ease;
}

.cycle-setup-save:hover {
    background: var(--pink-dark);
}

.cycle-setup-status {
    display: inline-block;
    margin-left: 12px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--pink);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cycle-setup-status.show {
    opacity: 1;
}

.cycle-timeline-track {
    display: flex;
    height: 22px;
    border-radius: 999px;
    overflow: hidden;
    margin: 20px 0 14px;
    position: relative;
}

.cycle-timeline-segment {
    height: 100%;
}

.segment-menstrual { background: #df417c; }
.segment-follicular { background: #f4a5c4; }
.segment-ovulation { background: #f7c948; }
.segment-luteal { background: #f7d9e6; }

.cycle-timeline-today {
    position: absolute;
    top: -6px;
    width: 3px;
    height: 34px;
    background: var(--text-dark);
    border-radius: 2px;
}

.cycle-timeline-today::after {
    content: "Today";
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-dark);
    white-space: nowrap;
}

.cycle-timeline-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 0.82rem;
    color: var(--text);
}

.legend-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 6px;
}

.legend-menstrual { background: #df417c; }
.legend-follicular { background: #f4a5c4; }
.legend-ovulation { background: #f7c948; }
.legend-luteal { background: #f7d9e6; }

@media (max-width: 900px) {

    .cycle-info-section {
        grid-template-columns: 1fr;
    }

}
/* ========================================
   CYELLE — TODAY'S REFLECTION
   ======================================== */

.reflection-section {
    margin-top: 20px;
}

.reflection-section[hidden] {
    display: none;
}

.reflection-card {
    position: relative;
    padding: 26px 32px 26px 70px;
    min-height: auto;
}

.reflection-flower {
    position: absolute;
    left: 26px;
    top: 26px;
    width: 34px;
    height: 34px;
}

.reflection-text {
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--text-dark);
}
/* ========================================
   CYELLE — LEARN SECTION
   ======================================== */

.learn-section,
.calendar-section {
    padding: 40px 0 60px;
}

.section-heading { max-width: 640px; margin: 0 0 28px; }
.section-heading .eyebrow { color: var(--pink); font-size: 0.85rem; font-weight: 700; letter-spacing: 1px; margin-bottom: 8px; }
.section-heading h2 { font-family: "DM Sans", sans-serif; font-size: 2rem; font-weight: 600; color: var(--text-dark); margin-bottom: 8px; }
.section-heading p { color: var(--text); font-size: 1rem; }

.learn-intro-card { margin-bottom: 24px; }
.learn-intro-card h3 { font-family: "DM Sans", sans-serif; font-size: 1.3rem; color: var(--text-dark); margin-bottom: 10px; }
.learn-intro-card p { color: var(--text); line-height: 1.75; font-size: 0.96rem; }

.learn-phase-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.learn-phase-card { min-height: auto; }
.learn-phase-icon { width: 44px; height: 44px; color: var(--pink); margin-bottom: 10px; }
.learn-phase-icon svg { width: 100%; height: 100%; }
.learn-phase-day-range { display: inline-block; background: #fff0f5; color: var(--pink-dark); font-size: 0.78rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; margin-bottom: 10px; }
.learn-phase-card h3 { font-family: "DM Sans", sans-serif; font-size: 1.35rem; color: var(--text-dark); margin-bottom: 10px; }
.learn-phase-card > p { color: var(--text); line-height: 1.7; font-size: 0.93rem; margin-bottom: 14px; }
.learn-phase-subheading { font-size: 0.82rem; font-weight: 700; color: var(--pink); margin-bottom: 8px; }
.learn-phase-list { list-style: none; margin-bottom: 14px; }
.learn-phase-list li { position: relative; padding-left: 18px; font-size: 0.9rem; color: var(--text); margin-bottom: 6px; line-height: 1.5; }
.learn-phase-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); }
.learn-phase-tip { background: #fff7fa; border: 1px solid rgba(239, 120, 168, 0.18); border-radius: 12px; padding: 12px 14px; font-size: 0.88rem; color: var(--text-dark); line-height: 1.6; }

@media (max-width: 900px) {
    .learn-phase-grid { grid-template-columns: 1fr; }
}

/* ========================================
   CYELLE — CALENDAR (compact, rounded)
   ======================================== */

.calendar-card {
    position: relative;
    padding: 26px 24px;
    max-width: 400px;
    margin: 0 auto;
}
/* When range view is active, break out of the narrow single-month width */
.calendar-card.range-mode {
    max-width: 100%;
}

.calendar-flower {
    position: absolute;
    right: 18px;
    top: 18px;
    width: 36px;
    height: 36px;
    opacity: 0.5;
}

.calendar-flower .notes-petal { width: 10px; height: 18px; left: 13px; top: 3px; }
.calendar-flower .notes-flower-center { width: 8px; height: 8px; left: 14px; top: 13px; }

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 14px;
}

.calendar-header h3 {
    font-family: "DM Sans", sans-serif;
    font-size: 1.1rem;
    color: var(--text-dark);
    min-width: 130px;
    text-align: center;
}

.calendar-nav-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: #fff0f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pink);
}

.calendar-nav-btn svg { width: 14px; height: 14px; }
.calendar-nav-btn:hover { background: var(--pink-light); }

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 6px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 14px;
    justify-items: center;
}

.calendar-day {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    color: var(--text-dark);
    background: transparent;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.calendar-day.empty { cursor: default; }

.calendar-day:not(.empty):hover {
    transform: scale(1.12);
}

.calendar-day.is-today {
    border: 2px solid var(--text-dark);
    font-weight: 700;
}

/* Phase colors: period=red, follicular=green, ovulation=pink, luteal=blue */

.calendar-day.phase-menstrual { background: #f8b4bb; color: #7a1f28; }
.calendar-day.phase-follicular { background: #bfe8c9; color: #245e35; }
.calendar-day.phase-ovulation { background: #f9c2dc; color: #7a2450; }
.calendar-day.phase-luteal { background: #c3d9f7; color: #244a7a; }

.calendar-day.is-logged-period {
    background: var(--logged-color, #df1f3d) !important;
    color: #fff !important;
    font-weight: 700;
}

.calendar-legend {
    justify-content: center;
    gap: 12px;
    font-size: 0.75rem;
    flex-wrap: wrap;
}

.calendar-legend-note {
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-light);
    margin-top: 6px;
}

.legend-menstrual { background: #f45b69; }
.legend-follicular { background: #4fae68; }
.legend-ovulation { background: #ef78a8; }
.legend-luteal { background: #6f9ce8; }

.calendar-empty-message {
    text-align: center;
    color: var(--text-light);
    font-size: 0.85rem;
    margin-top: 8px;
}

.calendar-range-mode-btn { display:block; margin: 0 auto 10px; border:none; background:#fff0f5; color:var(--pink-dark); padding:8px 16px; border-radius:999px; font-size:0.8rem; font-weight:600; }
.calendar-range-mode-btn.active { background: var(--pink); color:#fff; }

@media (max-width: 500px) {
    .calendar-card { max-width: 100%; padding: 20px 14px; }
    .calendar-day { width: 30px; height: 30px; }
}

.day-detail-popover {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 16px;
    padding: 18px 22px;
    box-shadow: 0 12px 34px rgba(120,55,85,0.22);
    z-index: 2000;
    text-align: center;
    min-width: 220px;
}
.day-detail-popover[hidden] { display: none; }
.day-detail-close { position: absolute; top: 8px; right: 10px; border: none; background: transparent; color: var(--text-light); }
.day-detail-date { font-weight: 700; color: var(--text-dark); margin-bottom: 4px; }
.day-detail-cycleday, .day-detail-status { font-size: 0.85rem; color: var(--text); margin-bottom: 4px; }
.day-detail-action { margin-top: 10px; border: none; background: var(--pink); color: #fff; padding: 8px 18px; border-radius: 999px; font-weight: 600; }

/* ========================================
   CYELLE — PROFILE / SETTINGS MODALS
   ======================================== */

.profile-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(45, 29, 43, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1500;
}

.profile-modal-overlay[hidden] { display: none; }

.profile-modal {
    position: relative;
    width: 90%;
    max-width: 420px;
    max-height: 85vh;
    overflow-y: auto;
    background: #fffafc;
    border-radius: 22px;
    padding: 32px 30px;
    box-shadow: 0 20px 60px rgba(120, 55, 85, 0.2);
    border: 1px solid rgba(239, 120, 168, 0.18);
}

.profile-modal h2 {
    font-family: "DM Sans", sans-serif;
    font-size: 1.5rem;
    color: var(--text-dark);
    margin-bottom: 20px;
}

.modal-close-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 32px;
    height: 32px;
    border: none;
    background: #fff0f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pink);
}

.modal-close-btn svg { width: 16px; height: 16px; }

.profile-avatar-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.profile-avatar-preview {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--pink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    overflow: hidden;
}

.profile-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar-btn {
    border: 1px solid rgba(239, 120, 168, 0.3);
    background: #fff0f5;
    color: var(--pink-dark);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.account-avatar img,
.dropdown-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.modal-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    margin: 14px 0 6px;
}

.modal-input {
    width: 100%;
    border: 1px solid rgba(239, 120, 168, 0.25);
    background: #fff;
    border-radius: 12px;
    padding: 10px 13px;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text-dark);
    outline: none;
}

.modal-input:disabled { color: var(--text-light); background: #f7f2f4; }
.modal-input:focus { border-color: var(--pink); }

.modal-save-btn {
    margin-top: 18px;
    width: 100%;
    border: none;
    background: var(--pink);
    color: #fff;
    padding: 12px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
}

.modal-save-btn:hover { background: var(--pink-dark); }

.modal-status {
    display: block;
    margin-top: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--pink);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-status.show { opacity: 1; }

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

.settings-explainer {
    margin: -4px 0 8px;
    max-width: 380px;
    color: var(--text-light);
    font-size: 0.82rem;
    line-height: 1.55;
}

.settings-toggle {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
}

.settings-toggle input { opacity: 0; width: 0; height: 0; }

.settings-toggle-slider {
    position: absolute;
    inset: 0;
    background: #eadde3;
    border-radius: 999px;
    transition: 0.2s;
    cursor: pointer;
}

.settings-toggle-slider::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.2s;
}

.settings-toggle input:checked + .settings-toggle-slider {
    background: var(--pink);
}

.settings-toggle input:checked + .settings-toggle-slider::before {
    transform: translateX(18px);
}

.settings-divider {
    height: 1px;
    background: rgba(239, 120, 168, 0.15);
    margin: 20px 0;
}

.settings-logout-btn {
    width: 100%;
    margin-top: 10px;
    border: 1px solid rgba(239, 120, 168, 0.3);
    background: #fff0f5;
    color: var(--pink-dark);
    padding: 11px;
    border-radius: 999px;
    font-weight: 600;
}

.settings-delete-btn {
    width: 100%;
    margin-top: 10px;
    border: none;
    background: transparent;
    color: #b23a5e;
    font-size: 0.85rem;
    text-decoration: underline;
    padding: 8px;
}


/* ========================================
   CYELLE — DARK MODE (core surfaces)
   ======================================== */

body.dark-mode {
    background: linear-gradient(180deg, #241a22 0%, #1c1319 100%);
    color: #f1e5eb;
}

body.dark-mode .navbar,
body.dark-mode .dashboard-card,
body.dark-mode .account-dropdown,
body.dark-mode .profile-modal,
body.dark-mode .notes-panel,
body.dark-mode .cycle-setup-card,
body.dark-mode .cycle-timeline-card {
    background: #2e2129;
    border-color: rgba(239, 120, 168, 0.15);
    color: #f1e5eb;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3 {
    color: #fbeaf1;
}

body.dark-mode .card-description,
body.dark-mode .hero-description,
body.dark-mode p {
    color: #cdb9c4;
}

body.dark-mode .modal-input,
body.dark-mode .cycle-setup-input,
body.dark-mode .notes-title-input,
body.dark-mode .notes-content-input {
    background: #241a22;
    color: #f1e5eb;
    border-color: rgba(239, 120, 168, 0.25);
}

body.dark-mode .check-in-option,
body.dark-mode .mood-option,
body.dark-mode .energy-option,
body.dark-mode .flow-option,
body.dark-mode .symptom-option {
    background: #241a22;
    color: #f1e5eb;
}
.account-info { position: relative; }
.dropdown-close-btn { position: absolute; top: 0; right: 0; }

/* ========================================
   CYELLE — BLOG BANNER (bold CTA)
   ======================================== */

.blog-banner {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 60px 30px;
    border-radius: var(--radius-card);

    background: linear-gradient(135deg, #ff8fb8 0%, #ed5b91 55%, #c73b73 100%);
    box-shadow: 0 20px 50px rgba(223, 65, 124, 0.28);
}

.blog-banner-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 999px;
    margin-bottom: 18px;
    backdrop-filter: blur(4px);
}

.blog-banner h3 {
    font-family: "DM Sans", sans-serif;
    font-size: 2.2rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 12px;
    position: relative;
    z-index: 2;
}

.blog-banner p {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.05rem;
    max-width: 480px;
    margin: 0 auto 28px;
    position: relative;
    z-index: 2;
}

.blog-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: var(--pink-dark);
    padding: 15px 34px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    animation: blogPulse 2.4s ease-in-out infinite;
}

.blog-banner-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

@keyframes blogPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

.blog-banner-flower {
    position: absolute;
    width: 140px;
    height: 140px;
    opacity: 0.18;
    pointer-events: none;
}

.blog-banner-flower .notes-petal {
    width: 38px;
    height: 70px;
    left: 51px;
    top: 12px;
    background: #fff;
}

.blog-banner-flower .notes-flower-center {
    width: 30px;
    height: 30px;
    left: 55px;
    top: 55px;
    background: #fff;
}

.blog-banner-flower-1 { top: -40px; left: -30px; }
.blog-banner-flower-2 { bottom: -50px; right: -20px; transform: rotate(35deg); }

@media (max-width: 600px) {
    .blog-banner { padding: 44px 22px; }
    .blog-banner h3 { font-size: 1.6rem; }
}
/* ========================================
   CYELLE — FOOTER
   ======================================== */

footer {
    max-width: 1440px;
    margin: 60px auto 0;
    padding: 40px 30px 50px;
    text-align: center;
    border-top: 1px solid rgba(239, 120, 168, 0.15);
}

.footer-logo-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}

.footer-logo-flower {
    width: 28px;
    height: 28px;
    color: var(--pink);
    display: flex;
}

.footer-logo {
    font-family: "DM Sans", sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--pink);
}

footer p {
    color: var(--text);
    font-size: 0.95rem;
    margin-bottom: 6px;
}

footer .disclaimer {
    color: var(--text-light);
    font-size: 0.8rem;
    max-width: 560px;
    margin: 10px auto 0;
}
/* ========================================
   CYELLE — FALLING PETALS (auth pages)
   ======================================== */

.auth-page {
    overflow-x: hidden;
}

.petal-field {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

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

.falling-petal {
    position: absolute;
    top: -60px;
    background: linear-gradient(160deg, #ffe8f1 0%, #f29abd 60%, #ee79a6 100%);
    border-radius: 70% 70% 45% 45%;
    opacity: 0.75;
    animation: petalFall linear infinite;
}

@keyframes petalFall {
    0% {
        transform: translateY(-10vh) translateX(0) rotate(0deg);
        opacity: 0.85;
    }
    100% {
        transform: translateY(110vh) translateX(40px) rotate(360deg);
        opacity: 0.35;
    }
}

.falling-petal:nth-child(1)  { left: 4%;  width: 18px; height: 24px; animation-duration: 14s; animation-delay: 0s; }
.falling-petal:nth-child(2)  { left: 14%; width: 26px; height: 34px; animation-duration: 18s; animation-delay: 2s; }
.falling-petal:nth-child(3)  { left: 24%; width: 20px; height: 27px; animation-duration: 12s; animation-delay: 4s; }
.falling-petal:nth-child(4)  { left: 34%; width: 24px; height: 32px; animation-duration: 16s; animation-delay: 1s; }
.falling-petal:nth-child(5)  { left: 44%; width: 18px; height: 24px; animation-duration: 13s; animation-delay: 5s; }
.falling-petal:nth-child(6)  { left: 54%; width: 28px; height: 36px; animation-duration: 20s; animation-delay: 3s; }
.falling-petal:nth-child(7)  { left: 64%; width: 20px; height: 27px; animation-duration: 15s; animation-delay: 6s; }
.falling-petal:nth-child(8)  { left: 74%; width: 24px; height: 32px; animation-duration: 17s; animation-delay: 2.5s; }
.falling-petal:nth-child(9)  { left: 84%; width: 18px; height: 24px; animation-duration: 12.5s; animation-delay: 4.5s; }
.falling-petal:nth-child(10) { left: 92%; width: 26px; height: 34px; animation-duration: 19s; animation-delay: 1.5s; }
.falling-petal:nth-child(11) { left: 60%; width: 16px; height: 22px; animation-duration: 11s; animation-delay: 7s; }
.falling-petal:nth-child(12) { left: 8%;  width: 22px; height: 30px; animation-duration: 21s; animation-delay: 8s; }

/* ========================================
   CYELLE — AUTH PAGES (Login / Signup)
   ======================================== */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.auth-container {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auth-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    color: var(--pink);
    font-family: "DM Sans", sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
}

.auth-logo-flower {
    width: 40px;
    height: 40px;
    display: flex;
}

.auth-logo-flower svg {
    width: 100%;
    height: 100%;
}

.auth-box {
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
    padding: 38px 34px;
    backdrop-filter: blur(6px);
}

.auth-heading { margin-bottom: 26px; }

.auth-heading .eyebrow {
    color: var(--pink);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.auth-heading h1 {
    font-family: "DM Sans", sans-serif;
    font-size: 1.9rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.auth-heading p {
    color: var(--text);
    font-size: 0.95rem;
}

.form-group { margin-bottom: 18px; }

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

.form-group input {
    width: 100%;
    border: 1px solid rgba(239, 120, 168, 0.25);
    background: #fff;
    border-radius: 12px;
    padding: 12px 15px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text-dark);
    outline: none;
    transition: border-color 0.2s ease;
}

.form-group input:focus {
    border-color: var(--pink);
}

.form-group input::placeholder {
    color: #c79aab;
}

.password-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.password-label label { margin-bottom: 0; }

.forgot-password {
    font-size: 0.8rem;
    color: var(--pink);
    font-weight: 600;
}

.forgot-password:hover { text-decoration: underline; }

.primary-button.auth-button {
    width: 100%;
    border: none;
    background: var(--pink);
    color: #fff;
    padding: 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.98rem;
    margin-top: 6px;
    transition: background 0.2s ease;
}

.primary-button.auth-button:hover {
    background: var(--pink-dark);
}

.primary-button.auth-button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.auth-divider-horizontal {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-light);
    font-size: 0.8rem;
    margin: 22px 0;
}

.auth-divider-horizontal::before,
.auth-divider-horizontal::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(239, 120, 168, 0.2);
}

.auth-divider-horizontal span {
    padding: 0 12px;
}

.google-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(239, 120, 168, 0.25);
    background: #fff;
    color: var(--text-dark);
    padding: 13px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.92rem;
    transition: background 0.2s ease;
}

.google-button:hover {
    background: #fff5f8;
}

.google-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4285F4;
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-switch {
    text-align: center;
    margin-top: 22px;
    font-size: 0.9rem;
    color: var(--text);
}

.auth-switch a {
    color: var(--pink);
    font-weight: 700;
}

.auth-switch a:hover { text-decoration: underline; }

.auth-footer {
    margin-top: 26px;
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-light);
    max-width: 340px;
}

.cycle-empty-state {
    text-align: center;
    padding: 40px 10px;
    color: var(--text-light);
    font-size: 0.9rem;
}

.cycle-empty-state .dashboard-card-label {
    margin-bottom: 10px;
}

.cycle-empty-state[hidden] {
    display: none;
}
/* ========================================
   CYELLE — FIRST-TIME CYCLE ONBOARDING
   ======================================== */

.cycle-onboarding-overlay {
    position: fixed;
    inset: 0;
    background: rgba(45, 29, 43, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.cycle-onboarding-overlay[hidden] { display: none; }

.cycle-onboarding-modal {
    position: relative;
    width: 90%;
    max-width: 440px;
    background: linear-gradient(180deg, #fffafc 0%, #fff5f9 100%);
    border-radius: 24px;
    padding: 40px 34px 32px;
    box-shadow: 0 24px 70px rgba(120, 55, 85, 0.25);
    border: 1px solid rgba(239, 120, 168, 0.2);
    text-align: center;
}

.onboarding-flower {
    position: relative;
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
}

.onboarding-flower .notes-petal {
    width: 14px;
    height: 27px;
    left: 19px;
    top: 4px;
}

.onboarding-flower .notes-flower-center {
    width: 13px;
    height: 13px;
    left: 20px;
    top: 20px;
}

.cycle-onboarding-modal h2 {
    font-family: "DM Sans", sans-serif;
    font-size: 1.6rem;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.onboarding-subtext {
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 22px;
}

.cycle-onboarding-modal .modal-label {
    text-align: left;
}

.onboarding-skip-btn {
    width: 100%;
    margin-top: 12px;
    border: none;
    background: transparent;
    color: var(--text-light);
    font-size: 0.85rem;
    text-decoration: underline;
    padding: 6px;
}

.page-loading-cover {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: linear-gradient(180deg, #fff8fa 0%, #fff5f8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.page-loading-cover.hidden {
    opacity: 0;
    pointer-events: none;
}

.page-loading-spinner {
    width: 44px;
    height: 44px;
    border: 4px solid rgba(239, 120, 168, 0.2);
    border-top-color: var(--pink);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.period-color-input {
    width: 60px;
    height: 40px;
    border: 1px solid rgba(239, 120, 168, 0.25);
    border-radius: 10px;
    padding: 3px;
    cursor: pointer;
    margin-bottom: 14px;
}

.calendar-day {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.calendar-day.empty {
    cursor: default;
}

.calendar-day:not(.empty):hover {
    transform: scale(1.08);
}

.calendar-day.is-logged-period {
    box-shadow: inset 0 0 0 3px var(--logged-color, var(--pink-dark));
    font-weight: 700;
}

.calendar-range-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 20px;
    font-size: 0.85rem;
    color: var(--text);
}

.calendar-range-controls label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.calendar-range-controls input[type="month"] {
    border: 1px solid rgba(239, 120, 168, 0.25);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 0.85rem;
    font-family: inherit;
}

.calendar-range-btn {
    border: none;
    background: var(--pink);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
}

.calendar-range-btn:hover { background: var(--pink-dark); }

.calendar-range-back {
    background: #fff0f5;
    color: var(--pink-dark);
}

.calendar-range-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
    align-items: start;
    padding: 8px 4px 16px;
}

.range-month-block {
    position: relative;
    padding: 0 10px;
}

/* connective line joining months into one continuous timeline (only when side-by-side) */
.range-month-block:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 34px;
    right: -10px;
    width: 1px;
    height: calc(100% - 60px);
    background: linear-gradient(180deg, transparent, rgba(239,120,168,0.28), transparent);
}

.range-month-block h4 {
    text-align: center;
    font-family: "DM Sans", sans-serif;
    font-size: 0.92rem;
    color: var(--text-dark);
    margin-bottom: 8px;
    white-space: nowrap;
}

.range-month-block .calendar-day {
    width: 30px;
    height: 30px;
    font-size: 0.74rem;
}

.range-month-block .calendar-grid {
    gap: 4px;
}

/* thin scrollbar styling, desktop */
.calendar-range-container::-webkit-scrollbar {
    height: 8px;
}

.calendar-range-container::-webkit-scrollbar-thumb {
    background: rgba(239, 120, 168, 0.3);
    border-radius: 999px;
}

@media (max-width: 640px) {

    .calendar-range-container {
        flex-direction: column;
        overflow-x: visible;
    }

    .range-month-block {
        width: 100%;
        min-width: 0;
        padding: 0;
        border-left: none;
    }

    .range-month-block:not(:last-child)::after {
        display: none;
    }

}

.calendar-clear-btn {
    display: block;
    margin: 0 auto 14px;
    border: none;
    background: transparent;
    color: #b23a5e;
    font-size: 0.78rem;
    text-decoration: underline;
}

/* ========================================
   CYELLE — PHASE VISUAL SYSTEM
   ======================================== */
.phase-visual-scene { position: absolute; right: 8px; bottom: 8px; width: 108px; height: 108px; overflow: hidden; border-radius: 20px; pointer-events: none; z-index: 1; }
.phase-visual { position: absolute; inset: 0; opacity: 0; transform: scale(0.94); transition: opacity 0.35s ease, transform 0.35s ease; }
.phase-visual.is-active { opacity: 1; transform: scale(1); }
.phase-visual svg { width: 100%; height: 100%; }

@media (prefers-reduced-motion: no-preference) {

    /* MENSTRUAL */
    #visualMenstrual #mainBody { animation: dropBreathe 4.5s ease-in-out infinite; transform-origin: 100px 132px; }
    #visualMenstrual #leftEye, #visualMenstrual #rightEye { animation: blink 6s ease-in-out infinite; transform-origin: center; }
    #visualMenstrual #droplet1 { animation: dropFloat 5.5s ease-in-out infinite; }
    #visualMenstrual #droplet2 { animation: dropFloat 6.5s ease-in-out infinite 1.2s; }
    #visualMenstrual #droplet3 { animation: dropFloat 5s ease-in-out infinite 2.4s; }
    #visualMenstrual #droplet4 { animation: dropFloat 6s ease-in-out infinite 0.6s; }
    #visualMenstrual #ribbon1, #visualMenstrual #ribbon2 { animation: ribbonFlow 8s ease-in-out infinite; }
    #visualMenstrual #sparkle1 { animation: sparklePop 4s ease-in-out infinite; }
    #visualMenstrual #sparkle2 { animation: sparklePop 5s ease-in-out infinite 2s; }

    /* FOLLICULAR */
    #visualFollicular #mainBody { animation: sproutGrow 5s ease-in-out infinite; transform-origin: 100px 178px; }
    #visualFollicular #leftEye, #visualFollicular #rightEye { animation: blink 5s ease-in-out infinite; transform-origin: center; }
    #visualFollicular #sunRays { animation: sunSpin 14s linear infinite; transform-origin: 160px 54px; }
    #visualFollicular #sunBody { animation: sunPulse 6s ease-in-out infinite; }
    #visualFollicular #leaf1 { animation: leafSway 5s ease-in-out infinite; }
    #visualFollicular #leaf2 { animation: leafDrift 7s ease-in-out infinite 1.5s; }
    #visualFollicular #leaf3 { animation: leafSway 6s ease-in-out infinite 0.8s; }
    #visualFollicular #leaf4 { animation: leafDrift 6.5s ease-in-out infinite 2.2s; }
    #visualFollicular #leaf5 { animation: leafSway 5.5s ease-in-out infinite 1s; }
    #visualFollicular #flower1 { animation: flowerPulse 4s ease-in-out infinite; }
    #visualFollicular #flower2 { animation: flowerPulse 5s ease-in-out infinite 1.6s; }
    #visualFollicular #flower3 { animation: flowerPulse 4.6s ease-in-out infinite 0.8s; }

    /* OVULATION */
    #visualOvulation #flower { animation: bloomDrift 7s ease-in-out infinite; }
    #visualOvulation #petalOuterTop, #visualOvulation #petalOuterRight,
    #visualOvulation #petalOuterBottom, #visualOvulation #petalOuterLeft {
        animation: petalBreathe 4s ease-in-out infinite; transform-origin: 100px 102px;
    }
    #visualOvulation #petalOuterRight { animation-delay: 0.3s; }
    #visualOvulation #petalOuterBottom { animation-delay: 0.6s; }
    #visualOvulation #petalOuterLeft { animation-delay: 0.9s; }
    #visualOvulation #rightEye { animation: blink 5.5s ease-in-out infinite; transform-origin: center; }
    #visualLuteal #cloud1front { animation: cloudSlow 13s ease-in-out infinite 0.8s; }
    #visualLuteal #eyebrows { animation: sleepyBlink 7s ease-in-out infinite; transform-origin: center; }
    #visualOvulation #orbitalRing { animation: ringRotate 10s linear infinite; transform-origin: 100px 102px; }
    #visualOvulation #sparkle1 { animation: sparklePop 3.5s ease-in-out infinite; }
    #visualOvulation #sparkle2 { animation: sparklePop 4.2s ease-in-out infinite 1.4s; }
    #visualOvulation #sparkle3 { animation: sparklePop 4.8s ease-in-out infinite 2.6s; }
    #visualOvulation #sparkle4 { animation: sparklePop 4s ease-in-out infinite 0.7s; }
    #visualOvulation #floatingPetal1 { animation: petalFloat 6s ease-in-out infinite; }
    #visualOvulation #floatingPetal2 { animation: petalFloat 7s ease-in-out infinite 2s; }
    #visualOvulation #floatingPetal3 { animation: petalFloat 6.5s ease-in-out infinite 3.2s; }
    #visualOvulation #floatingPetal4 { animation: petalFloat 5.8s ease-in-out infinite 1s; }

    /* LUTEAL */
    #visualLuteal #mainBody { animation: moonDrift 8s ease-in-out infinite; }
    #visualLuteal #leftEye, #visualLuteal #rightEye { animation: sleepyBlink 7s ease-in-out infinite; transform-origin: center; }
    #visualLuteal #cloud1 { animation: cloudSlow 12s ease-in-out infinite; }
    #visualLuteal #cloud2 { animation: cloudSlow 14s ease-in-out infinite reverse; }
    #visualLuteal #cloud3 { animation: cloudPass 10s ease-in-out infinite 2s; }
    #visualLuteal #cloud4 { animation: cloudSlow 11s ease-in-out infinite 1s; }
    #visualLuteal #star1 { animation: sparklePop 3.8s ease-in-out infinite; }
    #visualLuteal #star2 { animation: sparklePop 4.4s ease-in-out infinite 1.6s; }
    #visualLuteal #star3 { animation: sparklePop 5s ease-in-out infinite 3s; }
    #visualLuteal #star4 { animation: sparklePop 4.6s ease-in-out infinite 0.9s; }
    #visualLuteal #leaf1 { animation: leafDrift 7.5s ease-in-out infinite; }
    #visualLuteal #leaf2 { animation: leafDrift 8s ease-in-out infinite 1.5s; }
    #visualLuteal #leaf3 { animation: leafDrift 7s ease-in-out infinite 2.5s; }

}

@keyframes dropBreathe { 0%,100%{transform:scale(1);} 50%{transform:scale(1.035);} }
@keyframes blink { 0%,92%,100%{transform:scaleY(1);} 96%{transform:scaleY(0.15);} }
@keyframes dropFloat { 0%{transform:translateY(0);opacity:0.9;} 50%{transform:translateY(6px);opacity:1;} 100%{transform:translateY(0);opacity:0.9;} }
@keyframes ribbonFlow { 0%,100%{transform:translateX(0);opacity:0.5;} 50%{transform:translateX(4px);opacity:0.7;} }
@keyframes sparklePop { 0%,100%{opacity:0;transform:scale(0.6);} 50%{opacity:1;transform:scale(1);} }
@keyframes sproutGrow { 0%,100%{transform:scaleY(0.97);} 45%{transform:scaleY(1.03) translateY(-2px);} 65%{transform:scaleY(1.0);} }
@keyframes sunSpin { to{transform:rotate(360deg);} }
@keyframes sunPulse { 0%,100%{opacity:0.85;} 50%{opacity:1;} }
@keyframes leafSway { 0%,100%{transform:rotate(0deg);} 50%{transform:rotate(12deg);} }
@keyframes leafDrift { 0%,100%{transform:translate(0,0);} 50%{transform:translate(4px,-5px);} }
@keyframes flowerPulse { 0%,100%{transform:scale(1);opacity:0.85;} 50%{transform:scale(1.15);opacity:1;} }
@keyframes bloomDrift { 0%,100%{transform:translateX(-2px);} 50%{transform:translateX(2px);} }
@keyframes petalBreathe { 0%,100%{transform:scale(0.96);} 50%{transform:scale(1.05);} }
@keyframes ringRotate { to{transform:rotate(360deg);} }
@keyframes petalFloat { 0%,100%{transform:translate(0,0) rotate(0deg);opacity:0.7;} 50%{transform:translate(4px,-6px) rotate(18deg);opacity:0.9;} }
@keyframes moonDrift { 0%,100%{transform:translate(-2px,0);} 50%{transform:translate(2px,-2px);} }
@keyframes sleepyBlink { 0%,85%,100%{transform:scaleY(1);} 90%{transform:scaleY(0.3);} }
@keyframes cloudSlow { 0%,100%{transform:translateX(0);} 50%{transform:translateX(6px);} }
@keyframes cloudPass { 0%,70%,100%{transform:translateX(0);opacity:0.75;} 35%{transform:translateX(-14px);opacity:0.95;} }

/* ========================================
   CYELLE — CYCLE TIMELINE HERO REDESIGN
   ======================================== */

.cth-hero {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 30px auto 0;
    padding: 42px 40px 46px;
    border-radius: 32px;
    background: linear-gradient(135deg, #fff7f2 0%, #fdf0f3 40%, #f6eefb 70%, #fff4ec 100%);
    overflow: hidden;
}

.cth-label {
    display: inline-block;
    background: #ffe1ea;
    color: #d13a63;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 7px 18px;
    border-radius: 999px;
    margin-bottom: 18px;
}

.cth-heading {
    font-family: "DM Sans", sans-serif;
    font-size: clamp(2rem, 4vw, 3.1rem);
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.1;
    margin-bottom: 16px;
}

.cth-subtext {
    color: var(--text);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 420px;
    margin-bottom: 8px;
}

.cth-connect-ribbon {
    position: absolute;
    top: 90px;
    left: 0;
    right: 0;
    height: 120px;
    pointer-events: none;
    z-index: 0;
}
.cth-connect-ribbon svg { width: 100%; height: 100%; }

.cth-worlds-row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 20px 0 36px;
}

.cth-world {
    position: relative;
    height: 130px;
}

.cth-world-svg { width: 100%; height: 100%; }

.cth-sun { position: absolute; top: -6px; right: 8px; width: 30px; height: 30px; }

.cth-mini-drop, .cth-mini-leaf, .cth-sparkle, .cth-mini-cloud {
    position: absolute;
    opacity: 0.8;
}
.cth-mini-drop { width: 8px; height: 11px; background: radial-gradient(circle at 30% 25%,#ff9caf,#c72139 70%); border-radius: 50% 50% 50% 0; transform: rotate(45deg); }
.drop1 { left: 6px; top: 4px; } .drop2 { right: 10px; top: 14px; }
.cth-mini-leaf { width: 11px; height: 7px; background: #9ccf87; border-radius: 100% 0 100% 0; }
.leafA { left: 2px; top: 30px; } .leafB { right: 4px; bottom: 10px; transform: rotate(140deg); }
.cth-sparkle { width: 6px; height: 6px; background: #ffe07a; clip-path: polygon(50% 0%,65% 35%,100% 50%,65% 65%,50% 100%,35% 65%,0% 50%,35% 35%); }
.spkA { left: 4px; top: 8px; } .spkB { right: 6px; bottom: 20px; }
.cth-mini-cloud { width: 26px; height: 11px; background: #d9c9ec; border-radius: 999px; }
.cloudA { left: -2px; bottom: 16px; } .cloudB { right: -4px; top: 20px; }

@media (prefers-reduced-motion: no-preference) {
    #worldMenstrual .cth-world-svg { animation: cthPulse 4.5s ease-in-out infinite; transform-origin: 50% 90%; }
    .drop1 { animation: cthFloat 5.5s ease-in-out infinite; }
    .drop2 { animation: cthFloat 6.5s ease-in-out infinite 1.2s; }

    #worldFollicular .cth-world-svg { animation: cthGrow 5s ease-in-out infinite; transform-origin: 50% 100%; }
    .cth-sun { animation: cthPulseOpacity 6s ease-in-out infinite; }
    .leafA { animation: cthSway 5s ease-in-out infinite; }
    .leafB { animation: cthSway 6s ease-in-out infinite 1s; }

    #worldOvulation .cth-world-svg { animation: cthBloom 4s ease-in-out infinite; transform-origin: 50% 50%; }
    .spkA { animation: cthPulseOpacity 3.5s ease-in-out infinite; }
    .spkB { animation: cthPulseOpacity 4.2s ease-in-out infinite 1.4s; }

    #worldLuteal .cth-world-svg { animation: cthDrift 8s ease-in-out infinite; }
    .cloudA { animation: cthSlide 12s ease-in-out infinite; }
    .cloudB { animation: cthSlide 14s ease-in-out infinite reverse; }
}

@keyframes cthPulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.04);} }
@keyframes cthFloat { 0%,100%{transform:translateY(0) rotate(45deg);opacity:0.8;} 50%{transform:translateY(8px) rotate(45deg);opacity:1;} }
@keyframes cthGrow { 0%,100%{transform:scaleY(0.97);} 50%{transform:scaleY(1.04) translateY(-3px);} }
@keyframes cthPulseOpacity { 0%,100%{opacity:0.7;} 50%{opacity:1;} }
@keyframes cthSway { 0%,100%{transform:rotate(0deg);} 50%{transform:rotate(14deg);} }
@keyframes cthBloom { 0%,100%{transform:scale(0.97);} 50%{transform:scale(1.06);} }
@keyframes cthDrift { 0%,100%{transform:translate(-2px,0);} 50%{transform:translate(2px,-2px);} }
@keyframes cthSlide { 0%,100%{transform:translateX(0);} 50%{transform:translateX(5px);} }

.cth-progress-track {
    position: relative;
    display: flex;
    height: 14px;
    border-radius: 999px;
    overflow: visible;
    z-index: 1;
}

.cth-segment { height: 100%; }
.cth-seg-menstrual { background: #ef3f5f; border-radius: 999px 0 0 999px; }
.cth-seg-follicular { background: #ffd76b; }
.cth-seg-ovulation { background: #a4d68f; }
.cth-seg-luteal { background: #f6c7dc; border-radius: 0 999px 999px 0; }

.cth-marker {
    position: absolute;
    top: 50%;
    width: 22px;
    height: 22px;
    background: #fff;
    border: 4px solid var(--text-dark);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    transition: left 0.4s ease;
}

.cth-connector {
    position: relative;
    width: 2px;
    height: 26px;
    margin-top: 4px;
    border-left: 2px dashed rgba(90, 60, 80, 0.35);
    transition: left 0.4s ease;
    z-index: 1;
}

.cth-cards-row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 10px;
}

.cth-card {
    border-radius: 22px;
    padding: 24px 22px 26px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 8px 20px rgba(90,40,70,0.05);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.cth-card.is-active {
    box-shadow: 0 14px 34px rgba(90,40,70,0.14);
    transform: translateY(-4px);
    border-color: rgba(0,0,0,0.08);
}

.cth-card-icon { font-size: 1.6rem; display: block; margin-bottom: 10px; }

.cth-card h3 {
    font-family: "DM Sans", sans-serif;
    font-size: 1.35rem;
    margin-bottom: 10px;
}

.cth-card-menstrual { background: linear-gradient(160deg,#fff,#fff0f3); } .cth-card-menstrual h3 { color: #c72139; }
.cth-card-follicular { background: linear-gradient(160deg,#fff,#f1f8ea); } .cth-card-follicular h3 { color: #3a5c34; }
.cth-card-ovulation { background: linear-gradient(160deg,#fff,#f6eefc); } .cth-card-ovulation h3 { color: #7a3fa8; }
.cth-card-luteal { background: linear-gradient(160deg,#fff,#fdf1e7); } .cth-card-luteal h3 { color: #9a5a1f; }

.cth-date-badge {
    display: inline-block;
    background: rgba(0,0,0,0.05);
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.cth-card p { color: var(--text); font-size: 0.9rem; line-height: 1.55; }

@media (max-width: 900px) {
    .cth-worlds-row { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .cth-cards-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .cth-hero { padding: 30px 20px 34px; }
    .cth-worlds-row { grid-template-columns: 1fr; }
    .cth-cards-row { grid-template-columns: 1fr; }
}

/* Cycle timeline: illustrated, spacious layout matching the Cyelle reference. */
.cth-hero {
    --cth-ink: #43233b;
    --cth-muted: #716578;
    width: min(100%, 1440px);
    padding: clamp(26px, 4vw, 54px) clamp(22px, 4.4vw, 62px) 42px;
    margin: 30px auto 0;
    border: 1px solid rgba(227, 190, 205, .36);
    border-radius: 30px;
    background:
        radial-gradient(ellipse at 82% 20%, rgba(244, 220, 255, .62), transparent 33%),
        radial-gradient(ellipse at 28% 82%, rgba(255, 224, 231, .62), transparent 38%),
        linear-gradient(125deg, #fffaf7 0%, #fff5f4 53%, #fff8f5 100%);
    box-shadow: 0 18px 55px rgba(99, 52, 79, .08);
    overflow: hidden;
}

.cth-top {
    display: grid;
    grid-template-columns: minmax(250px, .82fr) minmax(0, 1.8fr);
    align-items: center;
    gap: clamp(18px, 3vw, 44px);
    min-height: 285px;
}

.cth-copy { position: relative; z-index: 2; }
.cth-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px;
    margin: 0 0 18px;
    border: 1px solid rgba(231, 104, 144, .1);
    border-radius: 999px;
    background: #ffe7ed;
    color: #c7436c;
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .01em;
}
.cth-label svg { width: 19px; height: 19px; flex: 0 0 auto; }
.cth-heading {
    margin: 0 0 20px;
    color: var(--cth-ink);
    font-family: "DM Sans", sans-serif;
    font-size: clamp(2.35rem, 4.8vw, 4.25rem);
    font-weight: 600;
    letter-spacing: -.045em;
    line-height: .99;
}
.cth-subtext {
    max-width: 330px;
    margin: 0;
    color: var(--cth-muted);
    font-size: clamp(.98rem, 1.35vw, 1.16rem);
    line-height: 1.7;
}
.cth-heart { display: inline-block; margin-left: 7px; color: #ec7395; font-size: 1.5em; line-height: .5; vertical-align: -.15em; }

.cth-illustration { position: relative; min-width: 0; align-self: stretch; display: flex; align-items: end; }
.cth-connect-ribbon { top: auto; bottom: 18px; left: -2%; right: -2%; height: 45%; opacity: .72; }
.cth-worlds-row {
    z-index: 1;
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: clamp(4px, 1.4vw, 20px);
    margin: 0 0 20px;
}
.cth-world {
    height: clamp(142px, 17vw, 218px);
    display: grid;
    place-items: end center;
    isolation: isolate;
}
.cth-world::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 92%;
    height: 58%;
    bottom: 4px;
    border-radius: 52% 48% 47% 53% / 58% 58% 42% 42%;
    background: var(--world-glow, rgba(255, 210, 220, .42));
    filter: blur(1px);
}
#worldMenstrual { --world-glow: rgba(255, 191, 204, .44); }
#worldFollicular { --world-glow: rgba(208, 235, 188, .48); }
#worldOvulation { --world-glow: rgba(233, 202, 247, .56); }
#worldLuteal { --world-glow: rgba(250, 221, 182, .52); }
.cth-world-svg { width: min(100%, 205px); height: 96%; overflow: visible; filter: drop-shadow(0 10px 11px rgba(86, 50, 70, .1)); }
.cth-sun { width: clamp(32px, 4vw, 48px); height: auto; top: 1%; right: 12%; }
.cth-mini-drop, .cth-mini-leaf, .cth-sparkle, .cth-mini-cloud { z-index: 2; }
.cth-mini-drop { width: 10px; height: 14px; }
.cth-mini-leaf { width: 15px; height: 10px; }
.cth-sparkle { width: 9px; height: 9px; }
.cth-mini-cloud { width: 38px; height: 15px; }
.cloudA { left: 0; bottom: 16px; }
.cloudB { right: 0; top: 24px; }

.cth-progress-track {
    height: 18px;
    margin-top: 8px;
    border: 1px solid rgba(255, 255, 255, .78);
    background: #f7dce7;
    box-shadow: 0 4px 12px rgba(110, 61, 91, .08);
    isolation: isolate;
}
.cth-segment { flex-basis: 0; min-width: 0; }
.cth-seg-menstrual { background: linear-gradient(90deg, #e84c79, #f46e91); }
.cth-seg-follicular { background: linear-gradient(90deg, #fbd56e, #cde2a5); }
.cth-seg-ovulation { background: linear-gradient(90deg, #d2a6ec, #e6b4e6); }
.cth-seg-luteal { background: linear-gradient(90deg, #f1b2d1, #f7c7d9); }
.cth-phase-pin { position: absolute; top: 50%; left: 0; width: 16px; height: 16px; z-index: 3; transform: translate(-50%, -50%); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px currentColor; color: #de5279; background: currentColor; }
.cth-phase-pin::before { content: ""; position: absolute; left: 50%; top: 12px; height: 32px; border-left: 2px dashed currentColor; opacity: .7; }
.cth-phase-pin::after { content: ""; position: absolute; left: 50%; bottom: -37px; width: 5px; height: 5px; transform: translateX(-50%); border-radius: 50%; background: currentColor; }
.pin-follicular { color: #78aa70; }
.pin-ovulation { color: #bd73d0; }
.pin-luteal { color: #df9168; }
.cth-marker { width: 24px; height: 24px; border: 4px solid #fff; background: #5c3155; box-shadow: 0 0 0 2px #5c3155, 0 3px 9px rgba(60, 35, 57, .2); }
.cth-cards-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 1.7vw, 24px);
    margin-top: 43px;
}
.cth-card {
    position: relative;
    min-height: 285px;
    padding: 22px clamp(16px, 2vw, 27px) 24px;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 9px 25px rgba(89, 55, 78, .055);
}
.cth-card::after {
    content: "";
    position: absolute;
    right: -20px;
    bottom: -42px;
    width: 155px;
    height: 92px;
    border-radius: 50%;
    background: var(--card-glow, rgba(246, 183, 203, .22));
    filter: blur(2px);
    pointer-events: none;
}
.cth-card-menstrual { --card-glow: rgba(245, 128, 164, .2); border-color: #f3c4d0; background: linear-gradient(155deg,#fffafa,#fff0f3); }
.cth-card-follicular { --card-glow: rgba(150, 194, 130, .22); border-color: #d4e5cd; background: linear-gradient(155deg,#fffefa,#f2f8ed); }
.cth-card-ovulation { --card-glow: rgba(196, 133, 222, .24); border-color: #dfc4ef; background: linear-gradient(155deg,#fffaff,#f7effb); }
.cth-card-luteal { --card-glow: rgba(244, 172, 130, .22); border-color: #f2d2c0; background: linear-gradient(155deg,#fffdfa,#fff3ec); }
.cth-card.is-active { transform: translateY(-5px); box-shadow: 0 15px 34px rgba(90, 40, 70, .13); }
.cth-card-icon {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    margin: 0 0 12px;
    border-radius: 50%;
    background: rgba(227, 91, 133, .15);
    font-size: 1.45rem;
}
.cth-card-follicular .cth-card-icon { background: rgba(117, 171, 103, .16); }
.cth-card-ovulation .cth-card-icon { background: rgba(176, 105, 205, .16); }
.cth-card-luteal .cth-card-icon { background: rgba(224, 151, 99, .18); }
.cth-card h3 { position: relative; z-index: 1; margin: 0 0 12px; font-family: "DM Sans", sans-serif; font-size: clamp(1.3rem, 1.8vw, 1.75rem); line-height: 1.08; letter-spacing: -.025em; }
.cth-card-menstrual h3 { color: #a82f55; }
.cth-card-follicular h3 { color: #426749; }
.cth-card-ovulation h3 { color: #743394; }
.cth-card-luteal h3 { color: #89503e; }
.cth-date-badge { position: relative; z-index: 1; display: inline-block; max-width: 100%; padding: 7px 12px; margin-bottom: 13px; border-radius: 999px; background: rgba(226, 102, 145, .12); color: #973b5d; font-size: .8rem; line-height: 1.25; font-weight: 700; }
.cth-card-follicular .cth-date-badge { background: rgba(126, 170, 106, .14); color: #426749; }
.cth-card-ovulation .cth-date-badge { background: rgba(172, 110, 199, .14); color: #743394; }
.cth-card-luteal .cth-date-badge { background: rgba(220, 149, 102, .15); color: #89503e; }
.cth-card p { position: relative; z-index: 1; max-width: 29ch; margin: 0; color: var(--cth-muted); font-size: .93rem; line-height: 1.58; }

body.dark-mode .cth-hero { --cth-ink: #f6e9f0; --cth-muted: #d0bdcb; background: linear-gradient(135deg,#29202b,#302333 55%,#28232d); border-color: rgba(255,255,255,.09); }
body.dark-mode .cth-card { background: #332a35; border-color: rgba(255,255,255,.12); }
body.dark-mode .cth-label { background: #4a2e40; color: #f2aac3; }
body.dark-mode .cth-date-badge { color: #f3c5d4; background: rgba(238,150,183,.15); }

@media (max-width: 900px) {
    .cth-top { grid-template-columns: minmax(220px, .8fr) minmax(0, 1.3fr); min-height: 245px; gap: 12px; }
    .cth-worlds-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
    .cth-cards-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
    .cth-card { min-height: 250px; }
    .cth-phase-pin::before { height: 29px; }
    .cth-phase-pin::after { bottom: -34px; }
}
@media (max-width: 620px) {
    .cth-hero { padding: 28px 18px 26px; border-radius: 24px; }
    .cth-top { grid-template-columns: 1fr; gap: 4px; }
    .cth-copy { padding: 0 3px; }
    .cth-heading { font-size: clamp(2.6rem, 12vw, 3.7rem); }
    .cth-subtext br { display: none; }
    .cth-illustration { min-height: 175px; }
    .cth-world { height: 165px; }
    .cth-worlds-row { margin-bottom: 13px; }
    .cth-progress-track { height: 14px; }
    .cth-phase-pin { width: 12px; height: 12px; }
    .cth-phase-pin::before { height: 23px; }
    .cth-phase-pin::after { bottom: -28px; }
    .cth-marker { width: 20px; height: 20px; }
    .cth-cards-row { margin-top: 35px; gap: 12px; }
    .cth-card { min-height: 0; padding: 17px 14px 19px; border-radius: 22px; }
    .cth-card h3 { font-size: 1.28rem; }
    .cth-card p { font-size: .87rem; }
    .cth-date-badge { white-space: normal; font-size: .75rem; }
}
@media (max-width: 390px) {
    .cth-cards-row { grid-template-columns: 1fr; }
    .cth-card { min-height: 0; padding: 20px; }
    .cth-card h3 { font-size: 1.55rem; }
    .cth-card p { max-width: 40ch; }
}

/* Reference artwork and proportions for the Cycle Timeline. */
.cth-top {
    grid-template-columns: minmax(300px, .92fr) minmax(0, 1.9fr);
    min-height: 352px;
    gap: clamp(24px, 3.3vw, 46px);
}
.cth-heading {
    font-size: clamp(2.7rem, 4.25vw, 3.8rem);
    line-height: 1.03;
    letter-spacing: -.04em;
}
.cth-subtext { font-size: clamp(1.08rem, 1.5vw, 1.22rem); line-height: 1.65; }
.cth-illustration { align-self: stretch; min-width: 0; display: flex; align-items: center; }
.cth-reference-art { display: block; width: 100%; height: auto; max-height: 352px; object-fit: contain; }
.cth-connect-ribbon, .cth-worlds-row { display: none; }
.cth-cards-row { margin-top: 43px; }
.cth-card {
    min-height: 370px;
    padding: 23px clamp(18px, 2vw, 27px) 28px;
    border-radius: 27px;
    border-width: 1px;
    box-shadow: 0 5px 16px rgba(89, 55, 78, .035);
}
.cth-card::after { display: none; }
.cth-card > :not(.cth-card-flourish) { position: relative; z-index: 2; }
.cth-card-flourish {
    position: absolute;
    z-index: 1;
    left: -1px;
    bottom: -1px;
    display: block;
    width: calc(100% + 2px);
    height: auto;
    max-height: 105px;
    object-fit: contain;
    object-position: center bottom;
    opacity: .9;
    mix-blend-mode: multiply;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 29%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 29%);
}
.cth-card-icon { width: 43px; height: 43px; margin-bottom: 12px; font-size: 1.4rem; }
.cth-card h3 { margin-bottom: 12px; font-size: clamp(1.5rem, 2.35vw, 2rem); line-height: 1.04; }
.cth-date-badge { margin-bottom: 15px; padding: 7px 13px; font-size: .88rem; }
.cth-card p { font-size: 1rem; line-height: 1.55; }

@media (max-width: 900px) {
    .cth-top { grid-template-columns: minmax(235px, .85fr) minmax(0, 1.35fr); min-height: 300px; }
    .cth-reference-art { max-height: 300px; }
    .cth-card { min-height: 330px; }
}
@media (max-width: 620px) {
    .cth-top { grid-template-columns: 1fr; min-height: 0; gap: 8px; }
    .cth-heading { font-size: clamp(2.8rem, 10vw, 3.6rem); }
    .cth-illustration { min-height: 0; }
    .cth-reference-art { width: 100%; max-height: none; }
    .cth-card { min-height: 285px; }
    .cth-card h3 { font-size: 1.6rem; }
    .cth-card p { font-size: .95rem; }
    .cth-phase-pin { display: none; }
}
@media (max-width: 390px) {
    .cth-card { min-height: 260px; }
}

/* Dashboard, calendar and phase-card refinements. */
.summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.summary-grid > .dashboard-card { min-width: 0; }
.next-period-confidence { max-width: 28ch; margin-top: 8px; color: var(--text-muted, #817382); font-size: .82rem; line-height: 1.45; }
.next-period-range { display: inline-flex; margin: 8px 0 0; padding: 6px 10px; border-radius: 999px; background: rgba(239, 120, 168, .12); color: #9e3d62; font-size: .76rem; line-height: 1.3; }
.cycle-pattern-summary-card { position: relative; overflow: hidden; padding: 24px; }
.cycle-pattern-summary-card > :not(.cycle-pattern-art) { position: relative; z-index: 1; }
.cycle-pattern-summary-card h2 { max-width: 11ch; margin: 8px 0; color: #744e68; font-family: "DM Sans", sans-serif; font-size: clamp(1.45rem, 2vw, 2rem); line-height: 1.1; }
.cycle-pattern-description { max-width: 30ch; color: var(--text-muted, #817382); line-height: 1.5; }
.cycle-pattern-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.cycle-pattern-meta span { padding: 6px 9px; border-radius: 999px; background: #fff0f5; color: #95516e; font-size: .72rem; }
.cycle-pattern-art { position: absolute; top: 12px; right: 14px; display: flex; align-items: end; gap: 5px; height: 72px; opacity: .62; transform: rotate(-11deg); }
.cycle-pattern-art span { width: 10px; height: 30px; border-radius: 999px; background: linear-gradient(#f7b9d0, #d975a0); }
.cycle-pattern-art span:nth-child(2) { height: 45px; }
.cycle-pattern-art span:nth-child(3) { height: 60px; }
.cycle-pattern-art span:nth-child(4) { height: 42px; }
.cycle-pattern-art span:nth-child(5) { height: 34px; }
.cycle-info-section { grid-template-columns: minmax(260px, .82fr) minmax(0, 1.58fr); align-items: start; gap: 18px; }
.cycle-setup-card { align-self: start; }
.cycle-info-section #calendar { min-width: 0; margin: 0; padding: 0; }
.cycle-info-section .calendar-card { width: 100%; max-width: none; margin: 0; padding: 20px 16px; }
.cycle-info-section .calendar-section-heading { margin-bottom: 12px; }
.calendar-range-container { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; }
.range-month-block { min-width: 0; padding: 0 4px; }
.range-month-block .calendar-grid { gap: 2px; }
.range-month-block .calendar-day { width: clamp(21px, 2vw, 28px); height: clamp(21px, 2vw, 28px); font-size: .68rem; }
.calendar-day:not(.empty) { border: 0; padding: 0; font: inherit; appearance: none; -webkit-appearance: none; }
.phase-visual-scene { right: 14px; bottom: 12px; width: 116px; height: 116px; overflow: visible; border-radius: 24px; }
.phase-visual-scene[hidden] { display: none !important; }
.phase-visual-image { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 22px; box-shadow: 0 8px 20px rgba(116, 59, 97, .12); animation: phaseCardBob 3.2s ease-in-out infinite; }
.phase-accent { position: absolute; display: block; width: 11px; height: 15px; border-radius: 70% 30% 60% 40%; opacity: 0; }
.phase-visual-scene .accent-one { left: 4px; top: 9px; animation: phaseAccentFloat 2.7s ease-in-out infinite; }
.phase-visual-scene .accent-two { right: -5px; top: 27px; animation: phaseAccentFloat 3.1s ease-in-out infinite .5s; }
.phase-visual-scene .accent-three { left: 18px; bottom: -5px; animation: phaseAccentFloat 2.5s ease-in-out infinite .9s; }
.phase-visual-scene[data-phase="menstrual"] .phase-accent { background: #e44c78; border-radius: 70% 30% 65% 35%; opacity: .75; }
.phase-visual-scene[data-phase="follicular"] .phase-accent { background: #79a978; border-radius: 2px 12px 2px 12px; opacity: .72; }
.phase-visual-scene[data-phase="ovulation"] .phase-accent { width: 12px; height: 12px; background: #bd77d8; clip-path: polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%); opacity: .82; }
.phase-visual-scene[data-phase="luteal"] .phase-accent { width: 10px; height: 10px; background: #e9ac66; clip-path: polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%); opacity: .82; }
@keyframes phaseCardBob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
@keyframes phaseAccentFloat { 0%, 100% { transform: translateY(0) rotate(-8deg) scale(.9); } 50% { transform: translateY(-8px) rotate(18deg) scale(1.08); } }
@media (max-width: 1200px) {
    .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .overview-summary-card { grid-column: auto; }
    .cycle-info-section { grid-template-columns: minmax(240px, .9fr) minmax(0, 1.3fr); }
    .calendar-range-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .cycle-info-section { grid-template-columns: 1fr; }
    .calendar-range-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cycle-info-section .calendar-card { padding: 16px 10px; }
}
@media (max-width: 480px) {
    .summary-grid { grid-template-columns: 1fr; }
    .calendar-range-container { grid-template-columns: 1fr; }
    .phase-visual-scene { width: 94px; height: 94px; right: 10px; bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .phase-visual-image, .phase-accent { animation: none !important; }
}

/* Cyelle-specific fertility, character and learning experience. */
.fertility-advisory { position: relative; z-index: 2; margin-top: 16px; padding: 13px 15px; max-width: 420px; border: 1px solid rgba(188, 111, 199, .2); border-radius: 18px; background: linear-gradient(135deg, rgba(255,248,253,.97), rgba(246,239,251,.94)); box-shadow: 0 7px 20px rgba(115,74,121,.06); }
.fertility-advisory[data-level="peak"] { border-color: rgba(183,105,192,.42); background: linear-gradient(135deg,#fff5fc,#f1e3f5); }
.fertility-advisory[data-level="window"] { border-color: rgba(173,129,195,.32); }
.fertility-kicker { display: block; margin-bottom: 5px; color: #98649b; font-size: .66rem; font-weight: 800; letter-spacing: .1em; }
.fertility-advisory strong { display: block; margin-bottom: 4px; color: #623d69; font-family: "DM Sans", sans-serif; font-size: 1.07rem; line-height: 1.2; }
.fertility-advisory p { margin: 0; color: #675a6d; font-size: .77rem; line-height: 1.42; }
.fertility-advisory .discharge-observation { margin-top: 7px; color: #865d78; font-size: .73rem; font-weight: 600; }
.fertility-advisory .fertility-caveat { display: block; margin-top: 7px; color: #806f82; font-size: .68rem; line-height: 1.35; }
.next-period-summary-card { min-height: 350px; }
.next-period-summary-card .mini-chart { height: 38px; opacity: .25; }
.legend-fertile-window { background: #b784c6; }
.legend-fertile-peak { background: #8b4c9b; }
.calendar-day.fertility-window { box-shadow: inset 0 0 0 2px rgba(166, 114, 184, .82); }
.calendar-day.fertility-peak { box-shadow: inset 0 0 0 3px #844795, 0 0 0 2px rgba(182, 130, 197, .19); }
.calendar-day.is-logged-period.fertility-window { outline: 2px solid #c796d4; outline-offset: 1px; }
.calendar-day.is-logged-period.fertility-peak { outline: 2px solid #7a3d8e; outline-offset: 1px; }

.cycle-sidekick { position: relative; display: grid; grid-template-columns: 145px minmax(0,1fr) auto; align-items: center; gap: 22px; min-height: 175px; margin: 18px 0 20px; padding: 22px 30px; overflow: hidden; border: 1px solid rgba(232,174,199,.54); border-radius: 30px; background: radial-gradient(circle at 10% 40%,rgba(255,225,239,.9),transparent 35%),linear-gradient(110deg,#fff9fc,#f7effa 68%,#fff7ef); box-shadow: 0 14px 35px rgba(104,60,91,.08); }
.sidekick-mascot { position: relative; z-index: 1; width: 132px; height: 132px; object-fit: cover; border-radius: 32px; filter: drop-shadow(0 9px 10px rgba(90,55,85,.13)); animation: sidekickBounce 4s ease-in-out infinite; }
.sidekick-copy { position: relative; z-index: 2; max-width: 680px; }
.sidekick-label { display: block; margin-bottom: 7px; color: #b94f7d; font-size: .71rem; font-weight: 800; letter-spacing: .13em; }
.sidekick-copy h2 { margin: 0 0 7px; color: #48263c; font-family: "DM Sans",sans-serif; font-size: clamp(1.4rem,2.5vw,2.1rem); line-height: 1.1; }
.sidekick-copy p { margin: 0 0 10px; color: #695765; font-size: .98rem; line-height: 1.55; }
.sidekick-link { color: #bd4e7c; font-size: .84rem; font-weight: 700; }
.sidekick-age-button { align-self: end; z-index: 2; border: 1px solid rgba(190,102,144,.25); border-radius: 999px; padding: 8px 12px; background: rgba(255,255,255,.72); color: #985173; font: inherit; font-size: .75rem; cursor: pointer; }
.sidekick-orbit { position: absolute; left: 15px; top: 20px; width: 160px; height: 130px; pointer-events: none; }
.sidekick-orbit span { position: absolute; color: #cd86ad; animation: sidekickSparkle 3.6s ease-in-out infinite; }
.sidekick-orbit span:nth-child(1) { top: 3px; right: 15px; font-size: 1.3rem; }
.sidekick-orbit span:nth-child(2) { bottom: 0; left: 0; font-size: 1rem; animation-delay: .9s; }
.sidekick-orbit span:nth-child(3) { top: 52px; left: -7px; font-size: .9rem; animation-delay: 1.7s; }
@keyframes sidekickBounce { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes sidekickSparkle { 0%,100% { opacity:.5; transform: scale(.8) rotate(-8deg); } 50% { opacity:1; transform: scale(1.16) rotate(12deg); } }

/* The timeline artwork and phase cards have a gentle, phase-like pulse. */
.cth-reference-art { animation: timelineArtFloat 8s ease-in-out infinite; transform-origin: center; }
.cth-card { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.cth-card.is-active .cth-card-icon { animation: timelineIconLift 2.8s ease-in-out infinite; }
.cth-phase-pin { animation: timelinePinGlow 3s ease-in-out infinite; }
.cth-marker { animation: timelineMarkerPulse 2.4s ease-in-out infinite; }
@keyframes timelineArtFloat { 0%,100% { transform: translateY(0) rotate(-.4deg); } 50% { transform: translateY(-6px) rotate(.4deg); } }
@keyframes timelineIconLift { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
@keyframes timelinePinGlow { 0%,100% { filter: drop-shadow(0 0 0 rgba(191,102,160,0)); } 50% { filter: drop-shadow(0 0 6px rgba(191,102,160,.48)); } }
@keyframes timelineMarkerPulse { 0%,100% { box-shadow: 0 0 0 2px #5c3155,0 3px 9px rgba(60,35,57,.2); } 50% { box-shadow: 0 0 0 5px rgba(92,49,85,.12),0 3px 14px rgba(60,35,57,.24); } }

.learn-phase-grid { align-items: stretch; }
.learn-phase-card { min-height: 390px; padding: 26px 30px; border: 1px solid rgba(225,174,198,.34); border-radius: 26px; transition: transform .32s ease, box-shadow .32s ease; animation: learnCardFloat 6s ease-in-out infinite; }
.learn-phase-card:nth-child(2) { animation-delay: .5s; }
.learn-phase-card:nth-child(3) { animation-delay: 1s; }
.learn-phase-card:nth-child(4) { animation-delay: 1.5s; }
.learn-phase-card:hover { transform: translateY(-7px) rotate(-.3deg); box-shadow: 0 18px 36px rgba(106,67,92,.13); }
.learn-phase-card:nth-child(1) { background: linear-gradient(150deg,#fffafa,#fff0f4); }
.learn-phase-card:nth-child(2) { background: linear-gradient(150deg,#fffefa,#f1f8ed); }
.learn-phase-card:nth-child(3) { background: linear-gradient(150deg,#fffbff,#f6effb); }
.learn-phase-card:nth-child(4) { background: linear-gradient(150deg,#fffdf9,#fff2e9); }
.learn-phase-card h3 { position: relative; z-index: 2; max-width: 75%; font-size: 1.5rem; }
.learn-phase-card > p:not(.learn-phase-tip):not(.learn-phase-subheading), .learn-phase-list, .learn-phase-subheading, .learn-phase-tip, .learn-phase-day-range, .learn-phase-icon { position: relative; z-index: 2; }
.learn-phase-icon { width: 52px; height: 52px; padding: 9px; border-radius: 17px; background: rgba(255,255,255,.68); animation: learnIconSway 5s ease-in-out infinite; }
.learn-mascot { position: absolute; z-index: 1; top: 17px; right: 15px; width: 108px; height: 108px; border-radius: 26px; object-fit: cover; opacity: .78; mix-blend-mode: multiply; filter: drop-shadow(0 7px 12px rgba(91,58,84,.1)); animation: learnMascotFloat 4.2s ease-in-out infinite; }
.learn-phase-card .learn-phase-tip { border-radius: 16px; background: rgba(255,255,255,.7); }
@keyframes learnCardFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes learnIconSway { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes learnMascotFloat { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
.cycle-field-notes { position: relative; margin: 28px 0 18px; padding: 28px clamp(22px,4vw,48px); overflow: hidden; border: 1px solid rgba(204,158,218,.34); border-radius: 28px; background: linear-gradient(120deg,#f7effb,#fff7fb 68%,#fff8ee); }
.cycle-field-notes .eyebrow { margin: 0 0 6px; color: #9c63a9; font-size: .76rem; font-weight: 800; letter-spacing: .12em; }
.cycle-field-notes h3 { margin: 0 0 9px; color: #56395e; font-family: "DM Sans",sans-serif; font-size: 1.7rem; }
.cycle-field-notes > p { max-width: 75ch; color: #66586b; line-height: 1.6; }
.cycle-field-notes ol { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: 18px 0; padding-left: 23px; color: #634d68; }
.cycle-field-notes li { padding: 5px 10px 5px 3px; line-height: 1.5; }
.field-notes-footnote { font-size: .82rem; }
.field-notes-footnote a, .discharge-learning-note a { color: #a34575; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.field-notes-orbit { position: absolute; right: 30px; top: 22px; display: flex; gap: 12px; color: #b37dbb; font-size: 1.35rem; animation: sidekickSparkle 5s ease-in-out infinite; }
.discharge-learning-note { display: flex; align-items: start; gap: 14px; margin-top: 18px; padding: 19px 22px; border-radius: 21px; background: linear-gradient(100deg,#eef8f3,#f8f4fc); color: #5b5967; }
.discharge-learning-note > span { font-size: 1.8rem; animation: learnMascotFloat 4s ease-in-out infinite; }
.discharge-learning-note p { margin: 0; line-height: 1.6; }
.picker-group-heading { width: 100%; margin: 6px 4px 0; color: #9d587c; font-size: .78rem; font-weight: 800; letter-spacing: .04em; }
.discharge-option { border-color: rgba(157,111,180,.28); background: #fbf7fd; }

.age-preference-overlay { position: fixed; z-index: 2200; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(47,29,46,.46); backdrop-filter: blur(8px); }
.age-preference-overlay[hidden] { display: none !important; }
.age-preference-card { position: relative; width: min(100%,480px); padding: 34px; overflow: hidden; border: 1px solid rgba(238,191,212,.65); border-radius: 28px; background: linear-gradient(145deg,#fffaff,#fff4f8 62%,#f8f0fa); box-shadow: 0 24px 70px rgba(48,27,48,.23); }
.age-preference-card .eyebrow { margin: 0 0 8px; color: #bb5b87; font-size: .72rem; font-weight: 800; letter-spacing: .1em; }
.age-preference-card h2 { margin: 0 0 10px; color: #482b41; font-family: "DM Sans",sans-serif; font-size: 1.85rem; line-height: 1.1; }
.age-preference-card p:not(.eyebrow) { color: #6d5a69; font-size: .91rem; line-height: 1.55; }
.age-preference-card label { display: block; margin: 18px 0 6px; color: #754c68; font-size: .83rem; font-weight: 700; }
.age-preference-card input { width: 100%; padding: 12px 13px; border: 1px solid #e9c9d9; border-radius: 12px; background: white; font: inherit; }
.age-preference-save, .age-preference-pg { display: block; width: 100%; margin-top: 12px; padding: 12px 16px; border: 0; border-radius: 999px; font: inherit; font-weight: 700; cursor: pointer; }
.age-preference-save { background: #d95d91; color: white; }
.age-preference-pg { border: 1px solid #ebd5e1; background: rgba(255,255,255,.72); color: #805c73; }
.age-preference-sparkle { position: absolute; top: 19px; right: 23px; color: #d58ab4; font-size: 1.8rem; animation: sidekickSparkle 3s ease-in-out infinite; }
.age-privacy-note { display: block; margin-top: 7px; color: #776b76; font-size: .75rem; line-height: 1.4; }

@media (max-width: 900px) {
    .learn-phase-card { min-height: 350px; padding: 22px; }
    .cycle-field-notes ol { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 700px) {
    .cycle-sidekick { grid-template-columns: 80px minmax(0,1fr); gap: 14px; padding: 20px; border-radius: 23px; }
    .sidekick-mascot { width: 78px; height: 78px; border-radius: 21px; }
    .sidekick-age-button { grid-column: 2; justify-self: start; align-self: start; }
    .learn-phase-card { min-height: 0; padding: 21px; }
    .learn-mascot { width: 82px; height: 82px; }
    .learn-phase-card h3 { max-width: 68%; }
    .age-preference-card { padding: 28px 23px; }
}
@media (prefers-reduced-motion: reduce) {
    .sidekick-mascot, .sidekick-orbit span, .cth-reference-art, .cth-card.is-active .cth-card-icon, .cth-phase-pin, .cth-marker,
    .learn-phase-card, .learn-phase-icon, .learn-mascot, .discharge-learning-note > span, .age-preference-sparkle { animation: none !important; transition: none !important; }
}

/* A tiny phase character loops through the dashboard waves and pauses on the flower. */
.dashboard-hero { isolation: isolate; }


/* The next-period card offers a choice of short, useful topic cards. */
.cycle-explore { position: relative; z-index: 2; margin-top: 16px; }
.cycle-explore h3 { margin: 5px 0 12px; color: #563950; font-family: "DM Sans", sans-serif; font-size: 1.13rem; line-height: 1.15; }
.cycle-explore-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.cycle-explore-choice { display: flex; min-width: 0; min-height: 91px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 9px; border: 1px solid rgba(205,153,183,.27); border-radius: 15px; background: linear-gradient(145deg,#fff,#fff7fa); color: #65475a; text-align: left; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.cycle-explore-choice:hover, .cycle-explore-choice:focus-visible { transform: translateY(-3px); border-color: #df9bb8; box-shadow: 0 8px 18px rgba(135,74,107,.12); outline: none; }
.cycle-explore-choice.is-selected { border-color: #d97aa2; background: linear-gradient(145deg,#fff3f8,#f8effb); box-shadow: 0 5px 14px rgba(135,74,107,.12); }
.cycle-choice-icon { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: #f8e8f0; font-size: .83rem; }
.cycle-explore-choice strong { font-size: .75rem; line-height: 1.2; }
.cycle-explore-choice small { color: #857784; font-size: .62rem; line-height: 1.25; }
.cycle-explore-prompt { margin: 10px 1px 0; color: #847682; font-size: .75rem; line-height: 1.4; }
.cycle-explore-content { margin-top: 10px; padding: 13px 14px; border: 1px solid rgba(188,133,184,.19); border-radius: 16px; background: linear-gradient(135deg,#fff9fc,#f8f3fb); color: #6d5a69; }
.cycle-explore-content[hidden], .cycle-explore-prompt[hidden] { display: none !important; }
.cycle-explore-content > strong { display: block; margin-bottom: 5px; color: #623d69; font-family: "DM Sans", sans-serif; font-size: .97rem; line-height: 1.25; }
.cycle-explore-content p { margin: 0 0 7px; font-size: .73rem; line-height: 1.48; }
.cycle-explore-content p:last-child { margin-bottom: 0; }
.cycle-explore-content a { color: #a34575; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.cycle-explore-content .fertility-caveat { display: block; margin-top: 6px; color: #806f82; font-size: .65rem; line-height: 1.4; }

/* Circular, auto-spinning phase selector with a single readable detail card. */
.phase-wheel-explorer { display: grid; grid-template-columns: minmax(0,1fr); align-items: center; gap: clamp(18px,4vw,54px); margin: 25px 0 28px; padding: clamp(18px,3vw,34px); overflow: hidden; border: 1px solid rgba(204,158,218,.35); border-radius: 30px; background: radial-gradient(circle at 24% 38%,rgba(255,255,255,.9),transparent 34%),linear-gradient(120deg,#faf1fc,#fff7fb 62%,#fff8ee); }
.phase-wheel-copy { grid-column: 1/-1; margin-bottom: -12px; text-align: center; }
.phase-wheel-copy .eyebrow { margin: 0 0 4px; color: #9c63a9; font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.phase-wheel-copy p { margin: 0; color: #746579; font-size: .86rem; }
.phase-wheel-stage { position: relative; width: min(100%,430px); aspect-ratio: 1; justify-self: center; }
.phase-wheel-stage::before { content: ""; position: absolute; inset: 7%; border: 1px dashed rgba(163,113,176,.28); border-radius: 50%; }
.phase-wheel-orbit { position: absolute; z-index: 1; inset: 0; border-radius: 50%; }
.phase-wheel-node { position: absolute; display: flex; width: 116px; min-height: 92px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 7px; border: 1px solid rgba(208,163,203,.45); border-radius: 24px; background: rgba(255,255,255,.92); color: #65445e; box-shadow: 0 8px 20px rgba(93,61,95,.09); cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.phase-wheel-node span { font-size: 1.5rem; line-height: 1; }
.phase-wheel-node strong { font-family: "DM Sans", sans-serif; font-size: .92rem; }
.phase-wheel-node:hover, .phase-wheel-node:focus-visible, .phase-wheel-node.is-selected { border-color: #c17fba; background: #fff8fd; box-shadow: 0 11px 25px rgba(116,68,124,.19); outline: none; }
.node-menstrual { top: 14%; left: 50%; transform: translate(-50%,-50%); }
.node-follicular { top: 50%; left: 86%; transform: translate(-50%,-50%); }
.node-ovulation { top: 86%; left: 50%; transform: translate(-50%,-50%); }
.node-luteal { top: 50%; left: 14%; transform: translate(-50%,-50%); }
.phase-wheel-center { position: absolute; z-index: 2; inset: 30%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px solid rgba(224,190,217,.54); border-radius: 50%; background: linear-gradient(145deg,#fff,#fbf2fa); color: #704c72; text-align: center; box-shadow: 0 6px 19px rgba(94,60,99,.06); pointer-events: none; }
.phase-wheel-center span { color: #bf7fae; font-size: 1.8rem; }
.phase-wheel-center strong { font-family: "DM Sans", sans-serif; font-size: .82rem; line-height: 1.22; }
.phase-wheel-controls { display: flex; align-items: center; justify-content: center; gap: 14px; grid-column: 1; }
.phase-wheel-controls button { width: 40px; height: 40px; border: 1px solid #dfc3dc; border-radius: 50%; background: #fff; color: #8a568c; font-size: 1.2rem; cursor: pointer; }
.phase-wheel-controls button:hover, .phase-wheel-controls button:focus-visible { background: #f6e9f6; outline: 2px solid #ca99cb; }
.phase-wheel-controls span { min-width: 145px; color: #6a506f; font-size: .82rem; font-weight: 700; text-align: center; }
.learn-phase-grid { display: block; max-width: 920px; margin: 0 auto; }
.learn-phase-card[hidden] { display: none !important; }
.learn-phase-card.is-selected { animation: phaseDetailArrive .42s ease both; }
@keyframes phaseDetailArrive { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Make every timeline card respond to a click or keyboard activation. */
.cth-card[role="button"] { cursor: pointer; }
.cth-card[role="button"]:focus-visible { outline: 3px solid rgba(173,104,177,.55); outline-offset: 4px; }
.cth-card.is-rising { animation: timelineCardRise .72s cubic-bezier(.2,.8,.25,1) both; }
@keyframes timelineCardRise { 0% { transform: translateY(12px) scale(.985); box-shadow: 0 5px 14px rgba(90,40,70,.06); } 58% { transform: translateY(-13px) scale(1.018); box-shadow: 0 20px 38px rgba(90,40,70,.18); } 100% { transform: translateY(-5px) scale(1); box-shadow: 0 15px 34px rgba(90,40,70,.13); } }

/* Advice-style dialog close action. */
.age-preference-card { padding-top: 46px; }
.age-preference-close { position: absolute; z-index: 2; top: 13px; right: 15px; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(184,128,159,.24); border-radius: 50%; background: rgba(255,255,255,.88); color: #754c68; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.age-preference-close:hover, .age-preference-close:focus-visible { background: #f9e8f0; outline: 2px solid #d58caf; }

@media (max-width: 900px) {
    .phase-wheel-explorer { grid-template-columns: minmax(0,1fr); }
    .phase-wheel-copy { grid-column: 1; }
    .phase-wheel-controls { grid-column: 1; }
    .phase-wheel-stage { width: min(100%,390px); }
}
@media (max-width: 540px) {
    .cycle-explore-choices { gap: 5px; }
    .cycle-explore-choice { min-height: 83px; padding: 7px 6px; border-radius: 12px; }
    .cycle-explore-choice strong { font-size: .69rem; }
    .cycle-explore-choice small { font-size: .56rem; }
    .phase-wheel-explorer { padding: 17px 10px; border-radius: 23px; }
    .phase-wheel-stage { width: min(100%,340px); }
    .phase-wheel-node { width: 93px; min-height: 78px; border-radius: 19px; }
    .phase-wheel-node span { font-size: 1.25rem; }
    .phase-wheel-node strong { font-size: .78rem; }
    .phase-wheel-center { inset: 31%; }
}
@media (prefers-reduced-motion: reduce) {
    .phase-wheel-orbit, .phase-wheel-node { animation: none !important; }
    .phase-wheel-orbit, .phase-wheel-node, .cycle-explore-choice, .cth-card[role="button"] { transition: none !important; }
    .cth-card.is-rising { animation: none !important; }
}


/* A persistent section switcher keeps the dashboard tidy and lets each area have its own view. */
.dashboard-section-switcher { position: sticky; z-index: 900; top: 126px; display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 620px; margin: 0 auto 20px; padding: 10px 14px 10px 18px; border: 1px solid rgba(226,181,203,.62); border-radius: 18px; background: rgba(255,252,254,.94); box-shadow: 0 8px 22px rgba(99,58,84,.08); backdrop-filter: blur(16px); }
.dashboard-section-switcher label { display: grid; gap: 2px; color: #67475d; }
.dashboard-section-switcher label span { color: #ba668c; font-size: .61rem; font-weight: 800; letter-spacing: .13em; }
.dashboard-section-switcher label strong { font-family: "DM Sans",sans-serif; font-size: .97rem; }
.dashboard-section-switcher select { min-width: min(52%,250px); padding: 10px 34px 10px 13px; border: 1px solid #e8c9d9; border-radius: 12px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23875c78' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center; color: #69485f; font: inherit; font-size: .83rem; appearance: none; cursor: pointer; }
[data-dashboard-view][hidden] { display: none !important; }
[data-dashboard-view] { scroll-margin-top: 150px; }
.phase-summary-card .card-content { flex: 1 1 auto; min-width: 0; }
.phase-summary-card .cycle-sidekick { grid-template-columns: 42px minmax(0,1fr) auto; gap: 9px; min-height: 0; margin: 13px 0 0; padding: 10px; overflow: visible; border: 1px solid rgba(232,174,199,.4); border-radius: 17px; background: linear-gradient(110deg,#fff7fb,#f8f1fb); box-shadow: none; }
.phase-summary-card .sidekick-mascot { width: 42px; height: 42px; border-radius: 13px; }
.phase-summary-card .sidekick-copy { min-width: 0; }
.phase-summary-card .sidekick-label { margin-bottom: 2px; font-size: .56rem; letter-spacing: .09em; }
.phase-summary-card .sidekick-copy h2 { margin: 0 0 2px; font-size: .93rem; line-height: 1.16; }
.phase-summary-card .sidekick-copy p { margin: 0; font-size: .69rem; line-height: 1.35; }
.phase-summary-card .sidekick-age-button { align-self: center; padding: 6px 8px; white-space: nowrap; font-size: .62rem; }
.phase-summary-card .sidekick-orbit { display: none; }

/* A different, flower-headed fairy flies through the hero with a soft pink glitter trail. */
.cycle-fairy-flight { position: absolute; z-index: 6; left: 51%; top: 56%; width: clamp(66px,7vw,94px); height: clamp(76px,8vw,106px); pointer-events: none; animation: cycleFairyFlight 18s ease-in-out infinite; filter: drop-shadow(0 8px 11px rgba(149,72,126,.17)); }
.cycle-fairy-svg { position: relative; z-index: 2; width: 100%; height: 100%; overflow: visible; }
.fairy-wing { transform-box: fill-box; transform-origin: 50% 50%; animation: fairyWingFlutter .42s ease-in-out infinite alternate; }
.fairy-wing path:first-child { fill: rgba(255,255,255,.84); stroke: #e8a5cb; stroke-width: 1.5; }
.fairy-wing path + path { fill: none; stroke: rgba(211,128,177,.64); stroke-width: 1; stroke-linecap: round; }
.fairy-wing-left { transform-origin: 90% 52%; }
.fairy-wing-right { transform-origin: 10% 52%; animation-delay: .12s; }
.fairy-petal-crown ellipse { fill: #ef84b3; stroke: #dc659b; stroke-width: .8; }
.fairy-petal-crown ellipse:nth-child(even) { fill: #ffc1d8; }
.fairy-face { fill: #ffe8ef; stroke: #e989aa; stroke-width: 1.2; }
.fairy-eye { fill: #573547; }
.fairy-smile { fill: none; stroke: #9f536f; stroke-width: 1.3; stroke-linecap: round; }
.fairy-dress { fill: #ef83b5; stroke: #d9659c; stroke-width: 1; }
.fairy-limb { fill: none; stroke: #d98ca9; stroke-width: 2.2; stroke-linecap: round; }
.fairy-shoe { fill: #d9689c; }
.fairy-dress-shine { fill: #ffe6a6; stroke: #fff8e5; stroke-width: .5; }
.fairy-glitter-trail { position: absolute; z-index: 1; left: -55%; top: 35%; width: 88%; height: 48%; transform: rotate(-12deg); background: linear-gradient(90deg,transparent,rgba(252,151,199,.08) 28%,rgba(251,142,197,.26) 70%,transparent); filter: blur(3px); }
.fairy-glitter-trail i { position: absolute; width: 7px; height: 7px; background: #ffaad2; clip-path: polygon(50% 0,62% 36%,100% 50%,62% 64%,50% 100%,38% 64%,0 50%,38% 36%); opacity: 0; animation: fairyGlitterDrift 1.5s ease-out infinite; filter: drop-shadow(0 0 4px #f185b4); }
.fairy-glitter-trail i:nth-child(1) { left: 8%; top: 60%; animation-delay: 0s; }
.fairy-glitter-trail i:nth-child(2) { left: 23%; top: 20%; width: 5px; height: 5px; animation-delay: .23s; }
.fairy-glitter-trail i:nth-child(3) { left: 40%; top: 75%; animation-delay: .47s; }
.fairy-glitter-trail i:nth-child(4) { left: 58%; top: 30%; width: 4px; height: 4px; animation-delay: .68s; }
.fairy-glitter-trail i:nth-child(5) { left: 72%; top: 64%; width: 6px; height: 6px; animation-delay: .9s; }
.fairy-glitter-trail i:nth-child(6) { left: 90%; top: 15%; width: 4px; height: 4px; animation-delay: 1.13s; }
@keyframes cycleFairyFlight {
    0%,4% { left: 50%; top: 56%; transform: translate(-50%,-50%) rotate(-8deg); }
    13% { left: 59%; top: 39%; transform: translate(-50%,-50%) rotate(9deg); }
    24% { left: 69%; top: 37%; transform: translate(-50%,-50%) rotate(14deg); }
    34% { left: 77%; top: 48%; transform: translate(-50%,-50%) rotate(-4deg); }
    39%,55% { left: 80%; top: 45%; transform: translate(-50%,-50%) rotate(0); }
    68% { left: 74%; top: 64%; transform: translate(-50%,-50%) rotate(-15deg); }
    82% { left: 62%; top: 38%; transform: translate(-50%,-50%) rotate(10deg); }
    94%,100% { left: 50%; top: 56%; transform: translate(-50%,-50%) rotate(-8deg); }
}
@keyframes fairyWingFlutter { from { transform: scaleX(.72) rotate(-7deg); } to { transform: scaleX(1.08) rotate(7deg); } }
@keyframes fairyGlitterDrift { 0% { opacity: 0; transform: translate(-5px,7px) scale(.4) rotate(0); } 20% { opacity: .95; } 100% { opacity: 0; transform: translate(-18px,-10px) scale(1.25) rotate(95deg); } }

/* Cycle topics live in their own view rather than in the Next Period summary. */
.cycle-topics-view { padding: 24px 0 54px; }
.cycle-topics-view .section-heading { margin-bottom: 26px; }
.cycle-topic-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.cycle-topic-choice { display: grid; min-height: 148px; grid-template-rows: auto auto 1fr; justify-items: start; gap: 7px; padding: 20px 22px; border: 1px solid rgba(218,170,199,.42); border-radius: 23px; background: linear-gradient(150deg,#fff,#fff5fa); color: #67485f; text-align: left; box-shadow: 0 8px 22px rgba(93,57,83,.055); cursor: pointer; transition: transform .22s ease,box-shadow .22s ease,border-color .22s ease; }
.cycle-topic-choice:hover,.cycle-topic-choice:focus-visible,.cycle-topic-choice.is-selected { transform: translateY(-4px); border-color: #d887ae; box-shadow: 0 15px 30px rgba(124,69,103,.12); outline: none; }
.cycle-topic-choice:nth-child(2),.cycle-topic-choice:nth-child(5) { background: linear-gradient(150deg,#fff,#f2faf7); }
.cycle-topic-choice:nth-child(3),.cycle-topic-choice:nth-child(7) { background: linear-gradient(150deg,#fff,#f8f1fb); }
.cycle-topic-choice > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: rgba(238,179,207,.28); color: #ac5d87; font-size: 1.2rem; }
.cycle-topic-choice strong { color: #5b3c56; font-family: "DM Sans",sans-serif; font-size: 1.16rem; }
.cycle-topic-choice small { align-self: end; color: #857784; font-size: .81rem; line-height: 1.4; }
.cycle-topics-prompt { margin: 20px 0 0; color: #857784; text-align: center; }
.cycle-topics-prompt[hidden] { display: none !important; }
.cycle-topic-detail { position: relative; max-width: 900px; margin: 22px auto 0; padding: 29px clamp(22px,4vw,42px); border: 1px solid rgba(208,156,199,.42); border-radius: 26px; background: linear-gradient(115deg,#fffafd,#f7effa 67%,#fff8ef); box-shadow: 0 13px 32px rgba(93,57,83,.085); animation: phaseDetailArrive .35s ease both; }
.cycle-topic-detail[hidden] { display: none !important; }
.cycle-topic-detail .eyebrow { margin: 0 0 6px; color: #ad648f; font-size: .7rem; font-weight: 800; letter-spacing: .12em; }
.cycle-topic-detail h3 { margin: 0 40px 10px 0; color: #573950; font-family: "DM Sans",sans-serif; font-size: clamp(1.35rem,2.5vw,1.8rem); }
.cycle-topic-detail p:not(.eyebrow) { max-width: 75ch; color: #6e5c6c; line-height: 1.65; }
.cycle-topic-detail a { color: #aa4d7c; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cycle-topic-detail .fertility-caveat { display: block; max-width: 78ch; color: #806f82; font-size: .78rem; line-height: 1.5; }
.topic-detail-close,.learn-phase-close { position: absolute; z-index: 5; top: 12px; right: 13px; display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid rgba(194,143,177,.33); border-radius: 50%; background: rgba(255,255,255,.9); color: #865270; font-size: 1.45rem; line-height: 1; cursor: pointer; }
.topic-detail-close:hover,.learn-phase-close:hover { background: #fae9f2; }

/* The phase guide's selected explanation sits beside the spinning wheel. */
.phase-wheel-explorer { grid-template-columns: minmax(0,430px) minmax(0,1fr); align-items: center; column-gap: clamp(22px,5vw,70px); }
.phase-wheel-copy { grid-column: 1/-1; }
.phase-wheel-stage { grid-column: 1; grid-row: 2; }
.phase-wheel-controls { grid-column: 1; grid-row: 3; }
.phase-wheel-explorer .learn-phase-grid { grid-column: 2; grid-row: 2/span 2; width: 100%; max-width: none; margin: 0; align-self: center; }
.phase-wheel-explorer .learn-phase-card { min-height: 0; padding: 28px; border-radius: 25px; }
.learn-phase-close { display: grid; }
.learn-phase-card[hidden] { display: none !important; }
.phase-wheel-explorer.has-detail .phase-wheel-center strong { font-size: .76rem; }
.phase-wheel-explorer .learn-phase-card h3 { margin-right: 35px; }
.phase-wheel-explorer .learn-phase-card > .learn-phase-close + .learn-mascot { top: 57px; right: 19px; width: 83px; height: 83px; }

@media (max-width: 980px) {
    .cycle-topic-choices { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .phase-wheel-explorer { grid-template-columns: minmax(0,1fr); }
    .phase-wheel-copy,.phase-wheel-stage,.phase-wheel-controls,.phase-wheel-explorer .learn-phase-grid { grid-column: 1; }
    .phase-wheel-stage { grid-row: 2; }
    .phase-wheel-controls { grid-row: 3; }
    .phase-wheel-explorer .learn-phase-grid { grid-row: 4; }
}
@media (max-width: 700px) {
    .dashboard-section-switcher { top: 110px; gap: 8px; padding: 9px 10px; }
    .dashboard-section-switcher label strong { font-size: .83rem; }
    .dashboard-section-switcher select { min-width: 49%; max-width: 60%; padding: 9px 29px 9px 9px; font-size: .72rem; }
    .cycle-fairy-flight { width: 66px; height: 76px; }
    .cycle-topic-choices { gap: 9px; }
    .cycle-topic-choice { min-height: 125px; padding: 15px; border-radius: 18px; }
    .cycle-topic-choice strong { font-size: 1rem; }
    .phase-wheel-stage { width: min(100%,340px); }
    .phase-wheel-explorer .learn-phase-card { padding: 22px 18px; }
}
@media (max-width: 430px) {
    .dashboard-section-switcher label span { font-size: .54rem; }
    .dashboard-section-switcher label strong { font-size: .76rem; }
    .cycle-topic-choice { padding: 13px 11px; }
    .cycle-topic-choice small { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
    .cycle-fairy-flight,.fairy-wing,.fairy-glitter-trail i { animation: none !important; }
}

@media (max-width: 900px) {
    .cycle-fairy-flight { animation-name: cycleFairyFlightTablet; }
    .phase-summary-card .cycle-sidekick { grid-template-columns: 40px minmax(0,1fr); }
    .phase-summary-card .sidekick-age-button { grid-column: 2; justify-self: start; }
}
@keyframes cycleFairyFlightTablet {
    0%,4% { left: 47%; top: 57%; transform: translate(-50%,-50%) rotate(-8deg); }
    14% { left: 53%; top: 39%; transform: translate(-50%,-50%) rotate(9deg); }
    25% { left: 58%; top: 39%; transform: translate(-50%,-50%) rotate(14deg); }
    34% { left: 62%; top: 49%; transform: translate(-50%,-50%) rotate(-4deg); }
    39%,55% { left: 62%; top: 54%; transform: translate(-50%,-50%) rotate(0); }
    68% { left: 58%; top: 67%; transform: translate(-50%,-50%) rotate(-15deg); }
    82% { left: 51%; top: 40%; transform: translate(-50%,-50%) rotate(10deg); }
    94%,100% { left: 47%; top: 57%; transform: translate(-50%,-50%) rotate(-8deg); }
}
@media (max-width: 760px) {
    .summary-grid { grid-template-columns: minmax(0,1fr); }
    .phase-summary-card { position: relative; display: block; padding-bottom: 166px; }
    .phase-summary-card .cycle-progress { position: absolute; right: 25px; bottom: 18px; width: 126px; height: 126px; }
    .phase-summary-card .cycle-progress-inner strong { font-size: 1.75rem; }
}
@media (max-width: 600px) {
    .dashboard-flower { right: -55px; }
    .cycle-fairy-flight { animation-name: cycleFairyFlightMobile; }
}
@keyframes cycleFairyFlightMobile {
    0%,4% { left: 43%; top: 61%; transform: translate(-50%,-50%) rotate(-8deg); }
    14% { left: 56%; top: 45%; transform: translate(-50%,-50%) rotate(9deg); }
    25% { left: 69%; top: 43%; transform: translate(-50%,-50%) rotate(14deg); }
    34% { left: 79%; top: 49%; transform: translate(-50%,-50%) rotate(-4deg); }
    39%,55% { left: 83%; top: 52%; transform: translate(-50%,-50%) rotate(0); }
    68% { left: 74%; top: 68%; transform: translate(-50%,-50%) rotate(-15deg); }
    82% { left: 61%; top: 45%; transform: translate(-50%,-50%) rotate(10deg); }
    94%,100% { left: 43%; top: 61%; transform: translate(-50%,-50%) rotate(-8deg); }
}

.cth-card[role="button"]:hover { transform: translateY(-9px) scale(1.012); box-shadow: 0 19px 38px rgba(90,40,70,.18); border-color: rgba(176,113,158,.42); }
.cth-card[role="button"]:active { transform: translateY(-3px) scale(.995); }

/* Calendar links open the same focused, scrollable dialog from anywhere. */
.calendar-modal[hidden] { display: none !important; }
.calendar-modal {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(51, 29, 45, .48);
    backdrop-filter: blur(7px);
}
.calendar-modal-panel {
    position: relative;
    width: min(1120px, 100%);
    max-height: min(92vh, 980px);
    overflow: auto;
    padding: 28px;
    border: 1px solid rgba(226,181,203,.72);
    border-radius: 26px;
    background: linear-gradient(145deg, #fffafd, #fff4f8);
    box-shadow: 0 28px 90px rgba(52, 24, 43, .25);
}
.calendar-modal-title {
    margin: 0 54px 18px 4px;
    color: #4f263f;
    font-family: "DM Sans", sans-serif;
    font-size: clamp(1.65rem, 3vw, 2.2rem);
}
.calendar-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid #f0c9da;
    border-radius: 50%;
    background: #fff;
    color: #9e3f6a;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 5px 16px rgba(99,58,84,.1);
}
.calendar-modal-close:hover { background: #fff0f6; }
.calendar-modal-panel .cycle-info-section {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 0;
}
.calendar-modal-panel #calendar { order: -1; margin-top: 0; }
.calendar-modal-panel .calendar-card { max-width: none; }
body.calendar-modal-open { overflow: hidden; }
@media (max-width: 700px) {
    .calendar-modal { align-items: flex-start; padding: 8px; }
    .calendar-modal-panel { width: 100%; max-height: calc(100vh - 16px); padding: 56px 12px 16px; border-radius: 20px; }
    .calendar-modal-title { margin: 0 44px 14px 2px; font-size: 1.55rem; }
    .calendar-modal-close { top: 10px; right: 10px; width: 38px; height: 38px; }
}

/* Topic and phase details open as focused glass dialogs. */
.guide-detail-modal[hidden] { display: none !important; }
.guide-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 3200;
    display: grid;
    place-items: center;
    padding: 22px;
    overflow-y: auto;
    background: rgba(45, 25, 46, .42);
    backdrop-filter: blur(12px) saturate(1.2);
}
body.guide-dialog-open { overflow: hidden; }
.guide-detail-modal > .cycle-topic-detail,
.guide-detail-modal > .learn-phase-card {
    width: min(720px, 100%);
    max-width: 720px;
    max-height: min(86vh, 820px);
    overflow: auto;
    margin: auto;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 30px;
    background: linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,244,250,.8) 54%,rgba(244,237,255,.84));
    box-shadow: 0 0 0 1px rgba(239,148,199,.18), 0 0 30px rgba(243,111,183,.23), 0 24px 80px rgba(32,17,39,.28);
    backdrop-filter: blur(24px) saturate(1.35);
    animation: guideDialogArrive .34s cubic-bezier(.2,.8,.25,1) both;
}
.guide-detail-modal > .cycle-topic-detail { padding: clamp(26px,5vw,46px); }
.guide-detail-modal > .learn-phase-card { min-height: 0; padding: clamp(26px,5vw,46px); }
.guide-detail-modal > .learn-phase-card > .learn-mascot { top: 25px; right: 28px; width: 98px; height: 98px; }
.guide-detail-modal > .learn-phase-card h3 { max-width: calc(100% - 108px); }
@keyframes guideDialogArrive { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Centered, larger circular phase wheel with a neon liquid-glass finish. */
.phase-wheel-explorer {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) !important;
    justify-items: center;
    gap: 18px;
    margin: 28px auto 34px;
    padding: clamp(24px,4vw,42px);
    overflow: visible;
    border: 1px solid rgba(255,255,255,.78);
    border-radius: 34px;
    background: linear-gradient(135deg,rgba(255,255,255,.58),rgba(255,239,250,.52) 45%,rgba(239,234,255,.58));
    box-shadow: 0 0 0 1px rgba(234,143,205,.18), 0 0 38px rgba(233,111,190,.18), 0 18px 50px rgba(112,70,137,.1), inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(24px) saturate(1.45);
}
.phase-wheel-explorer::before {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 52%,rgba(255,161,218,.1),transparent 43%),radial-gradient(circle at 15% 10%,rgba(255,255,255,.75),transparent 35%);
    content: "";
    pointer-events: none;
}
.phase-wheel-copy,.phase-wheel-stage,.phase-wheel-controls { position: relative; z-index: 1; grid-column: 1; }
.phase-wheel-copy { width: 100%; margin: 0; }
.phase-wheel-stage { grid-row: auto; width: min(100%,560px); margin: 0 auto; }
.phase-wheel-stage::before {
    inset: auto;
    top: 50%;
    left: 50%;
    width: var(--phase-wheel-orbit-diameter, 82%);
    height: var(--phase-wheel-orbit-diameter, 82%);
    transform: translate(-50%, -50%);
    border: 1px solid rgba(238,153,215,.4);
    box-shadow: 0 0 20px rgba(238,117,195,.18), inset 0 0 20px rgba(178,151,245,.08);
}
.phase-wheel-orbit,
.phase-wheel-orbit:hover,
.phase-wheel-orbit:focus-within {
    position: absolute;
    inset: 0;
    transform: none !important;
    animation: none !important;
}
.phase-wheel-node {
    width: clamp(104px,17vw,144px);
    min-height: clamp(92px,12vw,116px);
    padding: 13px 9px;
    border: 1px solid rgba(255,255,255,.92);
    border-radius: 27px;
    background: linear-gradient(145deg,rgba(255,255,255,.78),rgba(255,243,251,.58));
    box-shadow: 0 0 0 1px rgba(236,147,209,.28), 0 0 20px rgba(242,112,196,.22), 0 12px 28px rgba(105,58,127,.13), inset 0 1px 0 rgba(255,255,255,.98);
    backdrop-filter: blur(18px) saturate(1.4);
}
.phase-wheel-orbit .phase-wheel-node,
.phase-wheel-orbit:hover .phase-wheel-node,
.phase-wheel-orbit:focus-within .phase-wheel-node {
    animation: none !important;
    transform: translate(-50%, -50%);
    will-change: transform;
}
.phase-wheel-node strong { color: #65445e; font-family: "DM Sans",sans-serif; font-size: clamp(.82rem,1.7vw,1rem); font-weight: 700; }
.phase-wheel-node span { filter: drop-shadow(0 0 8px rgba(239,103,179,.45)); }
.phase-wheel-node:hover,.phase-wheel-node:focus-visible,.phase-wheel-node.is-selected {
    border-color: rgba(255,255,255,.98);
    background: linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,222,242,.8));
    box-shadow: 0 0 0 2px rgba(246,136,205,.36), 0 0 28px rgba(246,91,187,.48), 0 14px 30px rgba(116,55,140,.2);
}
.node-menstrual { top: 10%; left: 50%; }
.node-follicular { top: 50%; left: 90%; }
.node-ovulation { top: 90%; left: 50%; }
.node-luteal { top: 50%; left: 10%; }
.phase-wheel-center {
    inset: 34%;
    border-color: rgba(255,255,255,.88);
    background: linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,235,250,.48));
    box-shadow: 0 0 0 1px rgba(229,146,210,.24), 0 0 32px rgba(232,116,196,.28), inset 0 0 26px rgba(255,255,255,.72);
    backdrop-filter: blur(20px) saturate(1.35);
}
.phase-wheel-center span { color: #dc81c7; text-shadow: 0 0 12px rgba(245,102,204,.7); }
.phase-wheel-center strong { color: #71496f; font-family: "DM Sans",sans-serif; font-size: clamp(.76rem,1.4vw,.9rem); font-weight: 700; }
.phase-wheel-controls { grid-row: auto; }
.phase-wheel-controls button { border-color: rgba(255,255,255,.92); background: rgba(255,255,255,.62); box-shadow: 0 0 18px rgba(239,118,194,.2); backdrop-filter: blur(14px); }
.phase-wheel-explorer .learn-phase-grid { display: none; }
@media (max-width: 700px) {
    .phase-wheel-explorer { gap: 14px; padding: 22px 13px; border-radius: 26px; }
    .phase-wheel-stage { width: min(100%,430px); }
    .phase-wheel-node { width: clamp(72px,23vw,96px); min-height: 70px; border-radius: 20px; }
    .node-menstrual { top: 10%; left: 50%; }
    .node-follicular { top: 50%; left: 90%; }
    .node-ovulation { top: 90%; left: 50%; }
    .node-luteal { top: 50%; left: 10%; }
    .phase-wheel-center { inset: 39%; }
    .guide-detail-modal { padding: 12px; }
    .guide-detail-modal > .cycle-topic-detail,.guide-detail-modal > .learn-phase-card { width: 100%; max-height: 92vh; padding: 54px 22px 24px; border-radius: 23px; }
    .guide-detail-modal > .learn-phase-card > .learn-mascot { top: 14px; right: 18px; width: 72px; height: 72px; }
    .guide-detail-modal > .learn-phase-card h3 { max-width: calc(100% - 72px); }
}