.sleep-calculator{--sleep-primary: #6366f1;--sleep-secondary: #818cf8;--sleep-accent: #a5b4fc;--sleep-dark: #312e81;--sleep-light: #e0e7ff;--sleep-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);--sleep-card-bg: #ffffff;--sleep-border: #e5e7eb;--sleep-text: #1f2937;--sleep-text-muted: #6b7280;--sleep-success: #10b981;--sleep-warning: #f59e0b;--sleep-error: #ef4444;max-width:900px;margin:0 auto;font-family:system-ui,-apple-system,sans-serif}.sleep-header{text-align:center;margin-bottom:2rem;padding:2rem;background:var(--sleep-gradient);border-radius:20px;color:#fff;position:relative;overflow:hidden}.sleep-header:before{content:"🌙";position:absolute;font-size:8rem;opacity:.1;right:-1rem;top:50%;transform:translateY(-50%)}.sleep-title{font-size:2rem;font-weight:800;margin:0 0 .5rem;position:relative}.sleep-description{font-size:1.1rem;opacity:.95;margin:0;position:relative}.sleep-formula-container{background:var(--sleep-card-bg);border-radius:16px;padding:1.5rem;margin-bottom:2rem;box-shadow:0 4px 20px #6366f11a;border:1px solid var(--sleep-border)}.sleep-formula-title{font-size:1.1rem;font-weight:700;color:var(--sleep-dark);margin:0 0 1rem;text-align:center}.sleep-formula-grid{display:grid;grid-template-columns:1fr;gap:1rem}.sleep-formula-card{background:linear-gradient(135deg,#f5f3ff,#ede9fe);border-radius:12px;padding:1.25rem;text-align:center}.sleep-formula-label{font-size:.875rem;font-weight:600;color:var(--sleep-primary);margin:0 0 .75rem;text-transform:uppercase;letter-spacing:.05em}.sleep-formula-display{min-height:3rem;display:flex;align-items:center;justify-content:center;overflow-x:auto;overflow-y:hidden;font-size:1.1rem}.sleep-mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:1.5rem;background:var(--sleep-light);padding:.375rem;border-radius:12px}.sleep-mode-btn{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.875rem 1rem;border:none;background:transparent;border-radius:10px;cursor:pointer;transition:all .3s ease}.sleep-mode-btn.active{background:#fff;box-shadow:0 2px 8px #6366f133}.sleep-mode-label{font-weight:700;font-size:.95rem;color:var(--sleep-dark)}.sleep-mode-detail{font-size:.75rem;color:var(--sleep-text-muted)}.sleep-form-container{background:var(--sleep-card-bg);border-radius:16px;padding:1.5rem;margin-bottom:2rem;box-shadow:0 4px 20px #6366f11a;border:1px solid var(--sleep-border)}.sleep-form{display:flex;flex-direction:column;gap:1.25rem}.sleep-input-group{display:flex;flex-direction:column;gap:.5rem}.sleep-input-group.hidden{display:none}.sleep-label{font-weight:600;font-size:.9rem;color:var(--sleep-text)}.sleep-input,.sleep-select{padding:.875rem 1rem;border:2px solid var(--sleep-border);border-radius:10px;font-size:1rem;transition:all .2s ease;background:#fff}.sleep-input:focus,.sleep-select:focus{outline:none;border-color:var(--sleep-primary);box-shadow:0 0 0 4px #6366f11a}.sleep-buttons{display:grid;grid-template-columns:2fr 1fr;gap:.75rem;margin-top:.5rem}.sleep-calculate-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem;background:var(--sleep-gradient);color:#fff;border:none;border-radius:12px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #6366f14d}.sleep-calculate-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6366f166}.sleep-btn-icon{font-size:1.25rem}.sleep-reset-btn{padding:1rem;background:var(--sleep-light);color:var(--sleep-primary);border:none;border-radius:12px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s ease}.sleep-reset-btn:hover{background:#ddd6fe}.sleep-results{background:var(--sleep-card-bg);border-radius:16px;padding:1.5rem;margin-bottom:2rem;box-shadow:0 4px 20px #6366f11a;border:1px solid var(--sleep-border)}.sleep-results.hidden{display:none}.sleep-results-title{font-size:1.25rem;font-weight:700;color:var(--sleep-dark);margin:0 0 1.25rem;text-align:center}.sleep-times-label{font-size:.9rem;font-weight:600;color:var(--sleep-text-muted);text-transform:uppercase;letter-spacing:.05em;margin:0 0 1rem;text-align:center}.sleep-times-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.sleep-time-card{background:linear-gradient(135deg,#f5f3ff,#ede9fe);border-radius:12px;padding:1.25rem;text-align:center;border:2px solid transparent;transition:all .3s ease}.sleep-time-card.optimal{border-color:var(--sleep-success);background:linear-gradient(135deg,#d1fae5,#a7f3d0)}.sleep-time-card.good{border-color:var(--sleep-primary)}.sleep-time-card.fair{border-color:var(--sleep-warning);background:linear-gradient(135deg,#fef3c7,#fde68a)}.sleep-time-card.poor{border-color:var(--sleep-error);background:linear-gradient(135deg,#fee2e2,#fecaca)}.sleep-time-main{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:.5rem}.sleep-time-icon{font-size:1.25rem}.sleep-time-value{font-size:1.5rem;font-weight:800;color:var(--sleep-dark)}.sleep-time-details{display:flex;justify-content:center;gap:.75rem;font-size:.85rem;color:var(--sleep-text-muted);margin-bottom:.5rem}.sleep-time-quality{font-size:.75rem;font-weight:600;color:var(--sleep-primary);text-transform:uppercase;letter-spacing:.05em}.sleep-time-card.optimal .sleep-time-quality{color:var(--sleep-success)}.sleep-time-card.fair .sleep-time-quality{color:var(--sleep-warning)}.sleep-time-card.poor .sleep-time-quality{color:var(--sleep-error)}.sleep-times-note{text-align:center;font-size:.85rem;color:var(--sleep-text-muted);margin-top:1rem;font-style:italic}.sleep-content{margin-top:3rem}.sleep-section{margin-bottom:2.5rem}.sleep-section-title{font-size:1.5rem;font-weight:800;color:var(--sleep-dark);margin:0 0 1rem;padding-bottom:.5rem;border-bottom:3px solid var(--sleep-accent)}.sleep-paragraph{color:var(--sleep-text);line-height:1.7;margin-bottom:1rem}.sleep-features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1.5rem}.sleep-feature-card{background:var(--sleep-card-bg);border-radius:12px;padding:1.25rem;text-align:center;border:1px solid var(--sleep-border);transition:all .3s ease}.sleep-feature-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #6366f126}.sleep-feature-icon{font-size:2rem;display:block;margin-bottom:.75rem}.sleep-feature-title{font-size:1rem;font-weight:700;color:var(--sleep-dark);margin:0 0 .5rem}.sleep-feature-description{font-size:.875rem;color:var(--sleep-text-muted);margin:0;line-height:1.5}.sleep-tips-list{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}.sleep-tip-card{display:flex;gap:1rem;background:var(--sleep-card-bg);border-radius:12px;padding:1.25rem;border:1px solid var(--sleep-border)}.sleep-tip-icon{font-size:1.5rem;flex-shrink:0}.sleep-tip-content{flex:1}.sleep-tip-title{font-size:1rem;font-weight:700;color:var(--sleep-dark);margin:0 0 .375rem}.sleep-tip-text{font-size:.9rem;color:var(--sleep-text-muted);margin:0;line-height:1.6}.sleep-table-wrapper{overflow-x:auto;margin-top:1.5rem;border-radius:12px;border:1px solid var(--sleep-border)}.sleep-table{width:100%;border-collapse:collapse;font-size:.9rem}.sleep-table th{background:var(--sleep-light);padding:.875rem 1rem;text-align:left;font-weight:700;color:var(--sleep-dark);border-bottom:2px solid var(--sleep-border)}.sleep-table td{padding:.875rem 1rem;border-bottom:1px solid var(--sleep-border);color:var(--sleep-text)}.sleep-table-row.adult{background:#6366f10d}.sleep-table-label{font-weight:600;color:var(--sleep-dark)}.sleep-faq-list{display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem}.sleep-faq-item{background:var(--sleep-card-bg);border-radius:12px;border:1px solid var(--sleep-border);overflow:hidden}.sleep-faq-question{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;cursor:pointer;font-weight:600;color:var(--sleep-dark);list-style:none}.sleep-faq-question::-webkit-details-marker{display:none}.sleep-faq-icon{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;background:var(--sleep-gradient);color:#fff;border-radius:6px;font-size:.75rem;font-weight:800;flex-shrink:0}.sleep-faq-item[open] .sleep-faq-question{border-bottom:1px solid var(--sleep-border)}.sleep-faq-answer{padding:1rem 1.25rem;background:#fafafa}.sleep-faq-answer p{margin:0;color:var(--sleep-text);line-height:1.7;font-size:.95rem}@media (max-width: 768px){.sleep-title{font-size:1.5rem}.sleep-description{font-size:1rem}.sleep-header:before{font-size:5rem}.sleep-times-grid,.sleep-features-grid,.sleep-buttons{grid-template-columns:1fr}.sleep-formula-display{min-height:2.5rem;font-size:.95rem}.sleep-mode-btn{padding:.75rem}}.hidden{display:none!important}