* { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            --lavender: #E6E6FA; --blush: #FFB6C1; --cream: #FFF8E7; --mint: #D4F1F4;
            --purple: #9B7EBD; --rose: #FF8FA3; --sage: #A8DADC; --peach: #FFD4B8;
        }
        body { font-family: 'Poppins', sans-serif; color: #5A5A5A; overflow-x: hidden; }
        
        .landing { min-height: 100vh; background: linear-gradient(135deg, var(--cream) 0%, var(--lavender) 50%, var(--mint) 100%); display: flex; flex-direction: column; }
        .hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 20px; animation: fadeIn 1s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        .hero h1 { font-size: 4em; font-weight: 700; color: var(--purple); margin-bottom: 20px; text-shadow: 2px 2px 4px rgba(155, 126, 189, 0.2); }
        .hero .tagline { font-size: 1.5em; color: var(--rose); margin-bottom: 40px; font-weight: 300; }
        .cta-btn { background: linear-gradient(135deg, var(--purple), var(--rose)); color: white; border: none; padding: 20px 50px; font-size: 1.3em; font-weight: 600; border-radius: 50px; cursor: pointer; transition: all 0.4s ease; box-shadow: 0 8px 25px rgba(155, 126, 189, 0.3); }
        .cta-btn:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(155, 126, 189, 0.5); }
        .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; padding: 80px 40px; max-width: 1200px; margin: 0 auto; }
        .feature-card { background: white; padding: 40px; border-radius: 25px; text-align: center; box-shadow: 0 10px 30px rgba(155, 126, 189, 0.15); transition: all 0.4s ease; }
        .feature-card:hover { transform: translateY(-10px); box-shadow: 0 20px 50px rgba(155, 126, 189, 0.3); }
        .feature-icon { font-size: 4em; margin-bottom: 20px; }
        .feature-card h3 { color: var(--purple); font-size: 1.5em; margin-bottom: 15px; }
        .feature-card p { line-height: 1.6; }
        .landing-footer { background: white; padding: 30px; text-align: center; color: var(--purple); font-weight: 300; }
        
        .app { display: none; min-height: 100vh; background: linear-gradient(135deg, var(--cream) 0%, var(--lavender) 100%); }
        .app.active { display: block; }
        .navbar { background: white; padding: 20px; box-shadow: 0 4px 20px rgba(155, 126, 189, 0.15); position: sticky; top: 0; z-index: 100; }
        .nav-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; position: relative; }
        .nav-brand { font-size: 1.8em; font-weight: 700; color: var(--purple); }
        .hamburger { display: none; flex-direction: column; cursor: pointer; }
        .hamburger span { width: 25px; height: 3px; background: var(--purple); margin: 3px 0; transition: 0.3s; }
        .hamburger.active span:nth-child(1) { transform: rotate(-45deg) translate(-5px, 6px); }
        .hamburger.active span:nth-child(2) { opacity: 0; }
        .hamburger.active span:nth-child(3) { transform: rotate(45deg) translate(-5px, -6px); }
        .nav-menu { display: flex; gap: 10px; flex-wrap: wrap; }
        .nav-btn { background: linear-gradient(135deg, var(--lavender), var(--blush)); border: none; padding: 12px 25px; border-radius: 30px; color: white; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-size: 0.95em; }
        .nav-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(155, 126, 189, 0.3); }
        .nav-btn.active { background: linear-gradient(135deg, var(--purple), var(--rose)); }
        
        .container { max-width: 1200px; margin: 0 auto; padding: 30px 20px; }
        .page { display: none; animation: fadeIn 0.5s ease; }
        .page.active { display: block; }
        .card { background: white; padding: 30px; border-radius: 25px; box-shadow: 0 8px 30px rgba(155, 126, 189, 0.15); margin-bottom: 25px; transition: all 0.3s ease; }
        .card:hover { box-shadow: 0 12px 40px rgba(155, 126, 189, 0.25); }
        .card h2 { color: var(--purple); margin-bottom: 25px; font-size: 2em; }
        .welcome-box { background: linear-gradient(135deg, var(--mint), var(--peach)); padding: 25px; border-radius: 20px; text-align: center; margin-bottom: 30px; font-size: 1.3em; color: var(--purple); font-weight: 600; }
        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 25px 0; }
        .stat-card { background: linear-gradient(135deg, var(--cream), var(--mint)); padding: 25px; border-radius: 20px; text-align: center; }
        .stat-label { font-size: 0.9em; margin-bottom: 10px; }
        .stat-value { font-size: 2.5em; font-weight: 700; color: var(--purple); }
        .phase-badge { display: inline-block; padding: 12px 30px; border-radius: 25px; font-weight: 600; font-size: 1.2em; margin: 15px 0; }
        .phase-menstrual { background: var(--rose); color: white; }
        .phase-follicular { background: var(--mint); color: #4A5859; }
        .phase-ovulation { background: var(--peach); color: #8B5A3C; }
        .phase-luteal { background: var(--lavender); color: var(--purple); }
        
        .form-group { margin-bottom: 25px; }
        .form-group label { display: block; margin-bottom: 10px; color: var(--purple); font-weight: 600; font-size: 1.05em; }
        input, textarea, select { width: 100%; padding: 15px; border: 2px solid var(--lavender); border-radius: 15px; font-family: 'Poppins', sans-serif; font-size: 1em; transition: all 0.3s ease; }
        input:focus, textarea:focus, select:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 4px rgba(155, 126, 189, 0.1); }
        .mood-selector { display: flex; justify-content: space-around; gap: 15px; margin: 20px 0; flex-wrap: wrap; }
        .mood-option { font-size: 3em; cursor: pointer; transition: all 0.3s ease; opacity: 0.4; padding: 10px; border-radius: 50%; }
        .mood-option:hover, .mood-option.selected { opacity: 1; transform: scale(1.2); background: var(--cream); }
        .symptom-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; }
        .symptom-check { display: flex; align-items: center; gap: 10px; }
        .symptom-check input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; }
        .btn { background: linear-gradient(135deg, var(--purple), var(--rose)); color: white; border: none; padding: 15px 40px; border-radius: 30px; font-size: 1.1em; font-weight: 600; cursor: pointer; transition: all 0.3s ease; width: 100%; margin-top: 10px; }
        .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(155, 126, 189, 0.4); }
        .btn-danger { background: linear-gradient(135deg, #FF6B6B, #FF8E8E); }
        
        .prediction-box { background: linear-gradient(135deg, var(--peach), var(--cream)); padding: 30px; border-radius: 20px; text-align: center; margin: 25px 0; }
        .prediction-emoji { font-size: 5em; margin: 20px 0; }
        .prediction-text { font-size: 1.3em; color: var(--purple); font-weight: 600; }
        .confidence { margin-top: 10px; color: #888; font-size: 0.95em; }
        .tips-box { background: var(--cream); padding: 25px; border-radius: 20px; margin: 20px 0; }
        .tip-item { padding: 15px; margin: 15px 0; border-left: 5px solid var(--rose); background: white; border-radius: 10px; }
        .quote-box { background: linear-gradient(135deg, var(--blush), var(--lavender)); padding: 25px; border-radius: 20px; color: white; font-style: italic; text-align: center; font-size: 1.2em; margin: 25px 0; }
        
        .calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
        .calendar-month { font-size: 1.5em; font-weight: 600; color: var(--purple); min-width: 200px; text-align: center; }
        .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 25px; }
        .calendar-day-header { text-align: center; font-weight: 600; color: var(--purple); padding: 10px; }
        .calendar-day { aspect-ratio: 1; background: white; border-radius: 15px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; font-weight: 600; position: relative; min-height: 60px; }
        .calendar-day:hover { transform: scale(1.05); box-shadow: 0 5px 15px rgba(155, 126, 189, 0.3); }
        .calendar-day.has-log::after { content: '•'; position: absolute; bottom: 5px; font-size: 2em; color: var(--rose); }
        .calendar-day.other-month { opacity: 0.3; }
        .calendar-day.today { border: 3px solid var(--rose); font-weight: 700; }

        .calendar-day.predicted-period {
            background-color: rgba(255, 182, 193, 0.5);
            border: 1px solid var(--rose);
        }
        
        .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 1000; align-items: center; justify-content: center; padding: 20px; }
        .modal.active { display: flex; }
        .modal-content { background: white; padding: 40px; border-radius: 25px; max-width: 600px; width: 100%; max-height: 85vh; overflow-y: auto; position: relative; }
        .modal-close { position: absolute; top: 20px; right: 25px; font-size: 2em; cursor: pointer; color: var(--purple); font-weight: 300; }
        .pattern-item { background: var(--cream); padding: 20px; border-radius: 15px; margin: 15px 0; border-left: 5px solid var(--purple); }
        
        body.theme-dark { background: linear-gradient(135deg, #2C2C54 0%, #474787 100%); }
        body.theme-dark .card, body.theme-dark .navbar, body.theme-dark .feature-card, body.theme-dark .landing-footer { background: #3D3D5C; color: #E0E0E0; }
        body.theme-dark input, body.theme-dark textarea, body.theme-dark select { background: #4A4A6A; color: #E0E0E0; border-color: #6A6A8A; }
        
        @media (max-width: 768px) {
            .hero { padding: 40px 20px; }
            .hero h1 { font-size: 2.5em; }
            .hero .tagline { font-size: 1.2em; }
            .cta-btn { padding: 15px 30px; font-size: 1.1em; }
            .features { padding: 40px 20px; grid-template-columns: 1fr; }
            .feature-card { padding: 30px; }
            .feature-icon { font-size: 3em; }
            .feature-card h3 { font-size: 1.3em; }
            .landing-footer { padding: 20px; font-size: 0.9em; }
            .hamburger { display: flex; position: absolute; top: 0; right: 0; }
            .changeMonth { font-size: 0.6em; padding: 4px 10px; }
            .nav-menu { display: none; flex-direction: column; width: 100%; gap: 15px; margin-top: 15px; }
            .nav-menu.active { display: flex; }
            .calendar-day { min-height: 30px; font-size: 0.7em; }
            .calendar-grid { gap: 3px; }
            .calendar-day-header { padding: 3px; font-size: 0.8em; }
            .calendar-header {  margin-bottom: 8px; }
            .calendar-month { font-size: 0.7rem; min-width: auto; }
            .stats-grid { grid-template-columns: 1fr; }
            .modal-content { padding: 30px; max-width: 90vw; }
            .pattern-item { padding: 15px; }
            .welcome-box { font-size: 1.1em; padding: 20px; }
            .phase-badge { font-size: 1em; padding: 10px 25px; }
            .prediction-box { padding: 20px; }
            .tips-box { padding: 20px; }
            .quote-box { padding: 20px; font-size: 1.1em; }
            .form-group label { font-size: 0.95em; }
            input, textarea, select { padding: 12px; font-size: 0.9em; }
            .btn { padding: 12px 30px; font-size: 1em; }
            .mood-selector { gap: 10px; }
            .mood-option { font-size: 2.5em; }
            .toggle-label { font-size: 0.9em; 
                text-align: center;
                margin-left:20px;
                display: flex; align-items: center; gap: 3px;
                 border: none;
             }
             #calendar h2 {
                margin-bottom: 10px;
                font-size: 1.5em;
                text-align: center;
             }
             .toggle-label input { width: 10px; height: 10px; }
            .symptom-checks { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
        }