*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,Helvetica,sans-serif;line-height:1.6;color:#333;background-color:#f8f9fa}.app{max-width:1200px;margin:0 auto;padding:20px}.header{text-align:center;margin-bottom:40px;padding:30px 0;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:10px;box-shadow:0 4px 6px #0000001a}.header h1{font-size:2.5em;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.header p{font-size:1.2em;opacity:.9}.main{background:#fff;padding:30px;border-radius:10px;box-shadow:0 2px 10px #0000001a;margin-bottom:30px}.form{background:#f8f9fa;padding:25px;border-radius:8px;margin-bottom:30px;border:2px solid #e9ecef}.form-group{margin-bottom:20px}.form-group label{display:block;font-weight:700;margin-bottom:8px;color:#495057;font-size:1.1em}.form-group input{width:100%;padding:12px;border:2px solid #ced4da;border-radius:5px;font-size:1em;transition:border-color .3s ease}.form-group input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:12px 30px;border:none;border-radius:5px;font-size:1.1em;font-weight:700;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;text-decoration:none;display:inline-block}.btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.btn-primary{background:linear-gradient(135deg,#28a745,#20c997)}.btn-primary:hover{box-shadow:0 4px 12px #28a7454d}.current-phase{background:#e3f2fd;padding:25px;border-radius:8px;margin-bottom:30px;border-left:5px solid #2196f3}.current-phase h2{color:#1976d2;margin-bottom:15px;font-size:1.8em}.phase-description{font-size:1.1em;margin-bottom:20px;color:#424242}.recommendations{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-top:20px}.nutrition,.exercise{background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.nutrition h3,.exercise h3{color:#1976d2;margin-bottom:15px;font-size:1.3em}.nutrition p,.exercise p{margin-bottom:10px;line-height:1.5}.next-4-weeks{margin-top:40px}.next-4-weeks h2{color:#333;margin-bottom:25px;font-size:1.8em;text-align:center}.week{margin-bottom:30px;background:#f8f9fa;padding:20px;border-radius:8px;border:1px solid #e9ecef}.week h3{color:#495057;margin-bottom:15px;font-size:1.4em;text-align:center}.week-phases{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px}.day{background:#fff;padding:15px;border-radius:6px;box-shadow:0 1px 3px #0000001a;border-left:4px solid #ccc}.day.menstruation{border-left-color:#e91e63;background:#fce4ec}.day.follicular{border-left-color:#4caf50;background:#e8f5e8}.day.ovulation{border-left-color:#ff9800;background:#fff3e0}.day.luteal{border-left-color:#9c27b0;background:#f3e5f5}.day-header{display:flex;justify-content:space-between;margin-bottom:8px;font-size:.9em}.date{font-weight:700;color:#666}.day-number{color:#999}.phase-name{font-weight:700;margin-bottom:8px;color:#333}.phase-details p{font-size:.9em;margin-bottom:5px;line-height:1.4}.subtle-ad{text-align:center;margin:20px 0}.btn-subtle{background:transparent;color:#6c757d;padding:8px 16px;border:1px solid #dee2e6;border-radius:4px;font-size:.9em;text-decoration:none;transition:all .3s ease;display:inline-block}.btn-subtle:hover{background:#f8f9fa;color:#495057;border-color:#adb5bd;text-decoration:none}.footer{background:#f8f9fa;padding:30px 20px;color:#666;font-size:.9em;border-top:1px solid #e9ecef}.footer-content{max-width:800px;margin:0 auto;text-align:center}.footer-link{color:#667eea;text-decoration:none;font-weight:700;transition:color .3s ease}.footer-link:hover{color:#764ba2;text-decoration:underline}.sources{margin-top:25px;padding:20px;background:#fff;border-radius:8px;border:1px solid #e9ecef;text-align:left}.sources h4{color:#495057;margin-bottom:15px;font-size:1.2em;text-align:center}.sources p{margin-bottom:15px;line-height:1.6;color:#6c757d}.source-links{display:flex;flex-direction:column;gap:10px;margin:15px 0}.source-link{display:inline-block;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:10px 20px;border-radius:5px;text-decoration:none;font-weight:700;margin:5px 0;transition:transform .2s ease,box-shadow .2s ease;text-align:center}.source-link:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d;color:#fff;text-decoration:none}.disclaimer{font-size:.85em;color:#6c757d;margin-top:15px;padding-top:15px;border-top:1px solid #e9ecef}.copyright{margin-top:25px;padding-top:20px;border-top:1px solid #e9ecef;color:#666;font-size:.9em}.calculator-section{margin:30px 0;background:#f8f9fa;padding:25px;border-radius:8px;border:1px solid #e9ecef}.calculator-toggle{text-align:center;margin-bottom:20px}.btn-secondary{background:linear-gradient(135deg,#6c757d,#495057);color:#fff;padding:12px 30px;border:none;border-radius:5px;font-size:1.1em;font-weight:700;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;text-decoration:none;display:inline-block}.btn-secondary:hover{transform:translateY(-2px);box-shadow:0 4px 12px #6c757d4d}.macro-form{background:#fff;padding:25px;border-radius:8px;margin-bottom:20px;box-shadow:0 2px 4px #0000001a}.macro-form h3{color:#495057;margin-bottom:10px;text-align:center}.macro-form p{text-align:center;color:#6c757d;margin-bottom:20px}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-bottom:20px}.macro-results{background:linear-gradient(135deg,#e3f2fd,#f3e5f5);padding:25px;border-radius:8px;border-left:5px solid #2196f3;margin-top:20px}.macro-results h3{color:#1976d2;margin-bottom:20px;text-align:center}.macro-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;margin-bottom:20px}.macro-item{background:#fff;padding:20px;border-radius:8px;text-align:center;box-shadow:0 2px 4px #0000001a}.macro-item h4{color:#495057;margin-bottom:10px;font-size:1.1em}.macro-value{font-size:2em;font-weight:700;color:#1976d2;margin:0}.macro-percent{color:#6c757d;font-size:.9em;margin:5px 0 0}.macro-note{text-align:center;color:#495057;font-style:italic;margin:0}.macro-usage{margin-top:25px;padding:20px;background:#f8f9fa;border-radius:8px;border-left:4px solid #28a745}.macro-usage h4{color:#28a745;margin-bottom:15px;font-size:1.2em}.macro-usage p{color:#495057;line-height:1.6;margin-bottom:15px}.usage-example{text-align:center;margin-top:15px}.food-label-example{max-width:200px;height:auto;border-radius:4px;box-shadow:0 2px 4px #0000001a;margin-bottom:10px}.usage-tip{font-size:.9em;color:#6c757d;font-style:italic;margin:0}@media(max-width:768px){.app{padding:10px}.header h1{font-size:2em}.recommendations,.week-phases{grid-template-columns:1fr}.main{padding:20px}.form-row{grid-template-columns:1fr}.macro-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.header h1{font-size:1.8em}.header p{font-size:1em}.btn{width:100%;padding:15px}.macro-grid{grid-template-columns:1fr}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}