.calculator{background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);border-radius:22px;padding:20px;box-shadow:0 10px 30px rgba(26,75,95,.08);margin:20px 0;border:1px solid #d9e3ee;position:relative;overflow:hidden}.calculator::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(107,158,158,.12),transparent 38%),radial-gradient(circle at bottom left,rgba(26,75,95,.08),transparent 35%);pointer-events:none}.tabs{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;background:#fff0f6;padding:6px;border-radius:14px;justify-content:flex-end;border:1px solid #ffd6e8}.tab-btn{flex:0 0 auto;padding:10px 12px;border:none;border-radius:10px;background:transparent;cursor:pointer;font-weight:700;color:#5a6c7d;text-align:center;font-size:.9rem;transition:all .2s ease}.tab-btn.active{background:linear-gradient(135deg,#ff3d8a,#ff6b9d);color:#fff;box-shadow:0 6px 18px rgba(255,61,138,.2)}.form-container{display:none}.form-container.active{display:block}.input-group{margin-bottom:20px}.input-label{display:block;color:#1a4b5f;font-weight:700;margin-bottom:10px;font-size:.95rem}.date-inputs{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px;align-items:center}.date-input-wrapper{position:relative}.date-input{width:100%;padding:10px 12px;border:1.5px solid #ffd6e8;border-radius:12px;text-align:center;cursor:pointer;background:#fff0f6;font-size:.95rem;color:#1a3f5c;transition:border-color .2s ease,box-shadow .2s ease}.date-input:focus{outline:none;border-color:#1a4b5f;box-shadow:0 0 0 4px rgba(26,75,95,.08);background:#fff}.calendar-select{padding:10px 12px;border:1.5px solid #ffd6e8;border-radius:12px;background:#fff0f6;min-width:85px;font-size:.9rem;cursor:pointer;color:#1a3f5c;transition:border-color .2s ease,box-shadow .2s ease}.calendar-select:focus{outline:none;border-color:#1a4b5f;box-shadow:0 0 0 4px rgba(26,75,95,.08);background:#fff}.date-list{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid #ffd6e8;border-radius:12px;max-height:200px;overflow:auto;display:none;box-shadow:0 12px 28px rgba(0,0,0,.08);z-index:100}.date-list.active{display:block}.date-item{padding:8px 10px;text-align:center;border-bottom:1px solid #dce5ec;cursor:pointer;font-size:.9rem;color:#1a3f5c}.date-item:last-child{border-bottom:none}.date-item:hover{background:#f2f6fc}.cycle-input{width:100%;padding:10px 12px;border:1.5px solid #ffd6e8;border-radius:12px;text-align:center;font-size:.95rem;color:#1a3f5c;margin-bottom:10px;background:#fff0f6;transition:border-color .2s ease,box-shadow .2s ease}.cycle-input:focus{outline:none;border-color:#1a4b5f;box-shadow:0 0 0 4px rgba(26,75,95,.08);background:#fff}.cycle-slider{width:100%;margin:0 0 12px 0;height:6px;border-radius:6px;background:#dce5ec;outline:none;-webkit-appearance:none}.cycle-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#ff3d8a;cursor:pointer;box-shadow:0 2px 8px rgba(255,61,138,.3)}.cycle-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#ff3d8a;cursor:pointer;border:none;box-shadow:0 2px 8px rgba(255,61,138,.3)}.cycle-value{text-align:center;color:#ff3d8a;font-weight:700;font-size:1rem;margin-top:8px;display:block}.calculate-btn{background:linear-gradient(135deg,#ff3d8a,#ff6b9d);color:#fff;border:0;padding:12px;border-radius:12px;cursor:pointer;font-weight:700;font-size:1rem;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;margin:20px auto 0;display:block;width:auto;box-shadow:0 8px 18px rgba(255,61,138,.2)}.calculate-btn:hover{transform:translateY(-2px);box-shadow:0 12px 22px rgba(255,61,138,.3);filter:saturate(1.03)}.results-container{margin-top:25px;padding:20px;background:#fff0f6;border-radius:16px;border:1px solid #ffd6e8;border-right:5px solid #ff3d8a;display:none;box-shadow:0 6px 16px rgba(0,0,0,.04)}.results-container.show{display:block}.results-title{color:#1a4b5f;font-size:1.1rem;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid #ffd6e8;font-weight:800}.fertility-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}.fertility-card{background:#fff;padding:16px;border-radius:16px;border:1px solid #e0e7ef;text-align:center;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 4px 12px rgba(0,0,0,.02)}.fertility-card:hover{transform:translateY(-4px);box-shadow:0 12px 22px rgba(26,75,95,.08)}.fertility-card.high{border-top:3px solid #ea4335}.fertility-card.medium{border-top:3px solid #fbbc04}.fertility-card.low{border-top:3px solid #34a853}.fertility-card.pregnancy{border-top:3px solid #8c00ff}.fertility-date{font-size:1.1rem;font-weight:800;color:#1a4b5f;display:block;margin-bottom:6px}.fertility-label{color:#5a6c7d;font-size:.85rem;margin-bottom:4px;display:block}.fertility-probability{font-weight:700;font-size:.9rem;display:inline-block;padding:4px 12px;border-radius:20px}.fertility-card.high .fertility-probability{color:#ea4335;background:#fef0ef}.fertility-card.medium .fertility-probability{color:#fbbc04;background:#fff8e1}.fertility-card.low .fertility-probability{color:#34a853;background:#e8f5e9}.fertility-card.pregnancy .fertility-probability{color:#8c00ff;background:#f0e6ff}.calendar-container{margin:20px 0;background:#fff0f6;padding:16px;border-radius:16px;border:1px solid #ffd6e8}.calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-nav{background:#fff;color:#1a4b5f;border:1px solid #d0ddee;padding:6px 12px;border-radius:12px;cursor:pointer;font-weight:600;font-size:.85rem;transition:all .2s ease}.calendar-nav:hover{background:#f2f6fc;border-color:#1a4b5f;transform:translateY(-1px)}.calendar-title{color:#1a4b5f;font-size:1rem;font-weight:700;text-align:center;flex:1;margin:0 10px}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:12px}.calendar-day-header{text-align:center;padding:8px 4px;font-weight:700;color:#2e546a;background:#f2f6fc;border-radius:12px;font-size:.8rem}.calendar-day{text-align:center;padding:8px 4px;border-radius:12px;cursor:pointer;transition:all .2s ease;font-size:.85rem;min-height:36px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #e0e7ef}.calendar-day.empty{background:transparent;border:none;cursor:default}.calendar-day.period{background:#fef0ef;color:#ea4335;border-color:#ea4335}.calendar-day.fertile{background:#e8f0fe;color:#1a73e8;border-color:#1a73e8}.calendar-day.ovulation{background:#ff3d8a;color:#fff;font-weight:700;border-color:#ff3d8a}.calendar-day.today{border:2px solid #34a853;background:#fff}.legend{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:16px}.legend-item{display:flex;align-items:center;gap:6px;font-size:.8rem;color:#5a6c7d}.legend-color{width:16px;height:16px;border-radius:6px}.legend-period{background:#fef0ef;border:1px solid #ea4335}.legend-fertile{background:#e8f0fe;border:1px solid #1a73e8}.legend-ovulation{background:#ff3d8a}.legend-today{border:2px solid #34a853;background:#fff}.tips-container{background:#fff;padding:16px;border-radius:12px;margin-top:20px;border:1px solid #e0e7ef}.tips-title{color:#1a4b5f;margin-bottom:12px;font-size:1rem;font-weight:700}.tips-list{padding-right:16px;margin:0}.tips-list li{margin-bottom:8px;line-height:1.5;font-size:.9rem;color:#1a3f5c}.cycle-inputs-container{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}@media(max-width:768px){.calculator{padding:16px;margin:16px 0}.tabs{flex-wrap:wrap;align-items:center;gap:6px;justify-content:flex-start;width:auto}.tab-btn{padding:9px 10px;font-size:.7rem}.date-inputs{grid-template-columns:1fr 1fr 1fr 1fr;gap:8px}.calendar-select{min-width:60px;font-size:.8rem;padding:8px 6px}.date-input{padding:8px 6px;font-size:.8rem}.cycle-inputs-container{grid-template-columns:1fr 1fr;gap:15px}.fertility-grid{grid-template-columns:repeat(2,1fr)}.fertility-card:nth-child(5){grid-column:span 2}.calendar-day{padding:6px 2px;min-height:32px;font-size:.8rem}.calendar-day-header{padding:6px 2px;font-size:.75rem}.calendar-nav{padding:6px 10px;font-size:.8rem}.calendar-title{font-size:.9rem}.calculate-btn{padding:12px 10px;width:auto}}@media(max-width:480px){.tabs{width:100%}.tab-btn{flex:1;text-align:center}}@media(min-width:769px) and (max-width:1024px){.date-inputs{grid-template-columns:repeat(3,1fr)}.calendar-select{grid-column:1/span 3;margin-top:10px}}