:root{--oc-primary:#0072ce;--oc-primary-deep:#005fa3;--oc-secondary:#00a86b;--oc-secondary-light:#e6f0ff;--oc-danger:#e74c3c;--oc-bg:#f7f9fb;--oc-white:#ffffff;--oc-text:#26282c;--oc-border:#d8dce2;--oc-radius:8px;--oc-spacing:1.5rem;--oc-gap:0.6rem;--oc-primary-soft:rgba(0, 114, 206, 0.08);--oc-secondary-soft:rgba(0, 168, 107, 0.1);--oc-danger-soft:rgba(231, 76, 60, 0.08);--oc-ovulation-color:#e85d04;--oc-fertile-color:#00a86b;--oc-period-color:#c0392b;--oc-luteal-color:#8e44ad;--oc-shadow-sm:0 2px 8px rgba(38, 40, 44, 0.07);--oc-shadow-md:0 4px 20px rgba(38, 40, 44, 0.1);--oc-shadow-lg:0 8px 40px rgba(38, 40, 44, 0.13);--oc-transition:0.22s cubic-bezier(0.4, 0, 0.2, 1)}.oc-app{display:flex;flex-direction:column}.oc-header{position:relative;background:linear-gradient(135deg,var(--oc-primary) 0%,var(--oc-primary-deep) 60%,#003d6e 100%);color:var(--oc-white)!important;padding:1.5rem 1rem;overflow:hidden;text-align:center;border-radius:var(--oc-radius);box-shadow:var(--oc-shadow-sm)}.oc-header-blob{position:absolute;width:420px;height:420px;border-radius:50%;background:rgb(255 255 255 / .05);top:-120px;right:-80px;pointer-events:none}.oc-header-blob::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgb(255 255 255 / .04);bottom:-160px;left:-100px}.oc-header-icon{width:45px;height:45px;margin:0 auto 1.1rem;color:var(--oc-white)!important;opacity:.92}.oc-header-icon svg{width:100%;height:100%}.oc-title{font-size:clamp(1.2rem, 5vw, 2.2rem)!important;font-weight:700;letter-spacing:-.01em;line-height:1.15;color:var(--oc-white)!important;margin-bottom:.65rem}.oc-subtitle{font-size:0.97rem!important;color:rgb(255 255 255 / .8)!important;font-weight:300;max-width:460px;margin:0 auto;line-height:1.55}.oc-main{display:flex;flex-direction:column;gap:1.5rem;margin-top:3.5rem}.oc-card{background:var(--oc-white)!important;border:1px solid var(--oc-border)!important;border-radius:var(--oc-radius);padding:var(--oc-spacing) calc(var(--oc-spacing) * 1.1);box-shadow:var(--oc-shadow-sm);transition:box-shadow var(--oc-transition)}.oc-card:hover{box-shadow:var(--oc-shadow-md)}.oc-card-label{font-size:0.72rem!important;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--oc-primary)!important;margin-bottom:1.2rem;padding-bottom:.65rem;border-bottom:2px solid var(--oc-secondary-light)}.oc-input-card{margin-top:-1.5rem}.oc-field-group{display:flex;flex-direction:column;gap:1.35rem}.oc-field{display:flex;flex-direction:column;gap:.4rem}.oc-label{display:flex;align-items:center;gap:.45rem;font-size:0.9rem!important;font-weight:500;color:var(--oc-text)!important}.oc-label-icon{font-size:1rem!important}.oc-badge{display:inline-block;font-size:0.68rem!important;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--oc-secondary-soft)!important;color:var(--oc-secondary)!important;padding:.15rem .5rem;border-radius:20px;margin-left:.3rem}.oc-input{width:100%;padding:.75rem 1rem;font-size:0.95rem!important;color:var(--oc-text)!important;background:var(--oc-bg)!important;border:1px solid var(--oc-border)!important;border-radius:var(--oc-radius);outline:none;transition:border-color var(--oc-transition),box-shadow var(--oc-transition),background var(--oc-transition);appearance:none;-webkit-appearance:none}.oc-input:hover{border-color:#b0b8c8!important;background:#fff!important}.oc-input:focus{border-color:var(--oc-primary)!important;background:var(--oc-white)!important;box-shadow:0 0 0 3px var(--oc-primary-soft)}.oc-input.oc-input-error{border-color:var(--oc-danger)!important;box-shadow:0 0 0 3px var(--oc-danger-soft)}.oc-select-wrapper{position:relative}.oc-select{cursor:pointer;padding-right:2.5rem}.oc-select-arrow{position:absolute;right:1rem;top:50%;transform:translateY(-50%);pointer-events:none;color:#7a8494!important;font-size:1.5rem!important}.oc-field-hint{font-size:0.78rem!important;color:#7a8494!important;line-height:1.4}.oc-error-msg{font-size:0.78rem!important;color:var(--oc-danger)!important;font-weight:500;display:none}.oc-error-msg.oc-visible{display:block}.oc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.78rem 1.5rem;font-size:0.92rem!important;font-weight:600;border:none;border-radius:var(--oc-radius);cursor:pointer;transition:background var(--oc-transition),transform var(--oc-transition),box-shadow var(--oc-transition),opacity var(--oc-transition);text-decoration:none;white-space:nowrap}.oc-btn:active{transform:scale(.97)}.oc-btn-primary{background:var(--oc-primary)!important;color:var(--oc-white)!important;box-shadow:0 4px 14px rgb(0 114 206 / .35)}.oc-btn-primary:hover{background:var(--oc-primary-deep)!important;box-shadow:0 4px 18px rgb(0 114 206 / .45)}.oc-btn-secondary{background:var(--oc-secondary-light)!important;color:var(--oc-primary-deep)!important;border:1px solid rgb(0 114 206 / .2)!important}.oc-btn-secondary:hover{background:#d4e6ff!important}.oc-btn-danger{background:var(--oc-danger-soft)!important;color:var(--oc-danger)!important;border:1px solid rgb(231 76 60 / .2)!important}.oc-btn-danger:hover{background:rgb(231 76 60 / .14)!important}.oc-btn-icon{font-size:1.1rem!important;transition:transform var(--oc-transition)}.oc-btn-primary:hover .oc-btn-icon{transform:translateX(3px)}.oc-btn-icon-left{font-size:1rem!important}.oc-actions-top{margin-top:1.6rem;display:flex}.oc-actions-top .oc-btn-primary{width:100%;padding:.9rem 1.5rem;font-size:1rem!important}.oc-results-section{display:flex;flex-direction:column;gap:1.4rem;animation:ocFadeIn 0.45s ease forwards}@keyframes ocFadeIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.oc-results-header{text-align:center;padding:.5rem 0}.oc-results-title{font-size:clamp(1.2rem, 4vw, 1.5rem)!important;font-weight:700;color:var(--oc-primary-deep)!important;margin-bottom:.4rem}.oc-results-intro{font-size:0.9rem!important;color:#5a6270!important;font-weight:300}.oc-dates-grid{display:grid;grid-template-columns:1fr;gap:1rem}.oc-date-card{background:var(--oc-white)!important;border:1px solid var(--oc-border)!important;border-radius:var(--oc-radius);padding:1.3rem 1.2rem;text-align:center;box-shadow:var(--oc-shadow-sm);position:relative;overflow:hidden;transition:transform var(--oc-transition),box-shadow var(--oc-transition)}.oc-date-card:hover{transform:translateY(-2px);box-shadow:var(--oc-shadow-md)}.oc-date-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;border-radius:var(--oc-radius)}.oc-date-ovulation::before{background:var(--oc-ovulation-color)}.oc-date-fertile::before{background:var(--oc-fertile-color)}.oc-date-period::before{background:var(--oc-primary)}.oc-date-icon{font-size:2rem!important;margin-bottom:.5rem}.oc-date-label{font-size:0.73rem!important;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#7a8494!important;margin-bottom:.4rem}.oc-date-value{font-size:clamp(1.1rem, 3vw, 1.4rem)!important;color:var(--oc-text)!important;font-weight:400;line-height:1.2}.oc-date-sub{font-size:0.77rem!important;color:#9aa1ae!important;margin-top:.3rem}.oc-timeline{width:100%;height:52px;border-radius:var(--oc-radius);overflow:hidden;display:flex;margin-bottom:1rem;border:1px solid var(--oc-border)!important}.oc-timeline-segment{height:100%;display:flex;align-items:center;justify-content:center;font-size:0.68rem!important;font-weight:600;color:rgb(255 255 255 / .95)!important;text-transform:uppercase;letter-spacing:.05em;transition:opacity 0.2s;cursor:default;position:relative;overflow:hidden}.oc-timeline-segment:hover{opacity:.88}.oc-segment-period{background:var(--oc-period-color)!important}.oc-segment-pre{background:#a0aec0!important}.oc-segment-fertile{background:var(--oc-fertile-color)!important}.oc-segment-ovulation{background:var(--oc-ovulation-color)!important}.oc-segment-luteal{background:var(--oc-luteal-color)!important}.oc-timeline-legend{display:flex;flex-wrap:wrap;gap:.75rem;font-size:0.78rem!important;color:#5a6270!important}.oc-legend-item{display:flex;align-items:center;gap:.35rem}.oc-legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.oc-legend-period{background:var(--oc-period-color)!important}.oc-legend-fertile{background:var(--oc-fertile-color)!important}.oc-legend-ovulation{background:var(--oc-ovulation-color)!important}.oc-legend-luteal{background:var(--oc-luteal-color)!important}.oc-breakdown-list{display:flex;flex-direction:column;gap:.55rem}.oc-breakdown-row{display:flex;justify-content:space-between;align-items:center;padding:.65rem .9rem;border-radius:var(--oc-radius);background:var(--oc-bg)!important;font-size:0.88rem!important}.oc-breakdown-row:nth-child(even){background:var(--oc-secondary-light)!important}.oc-breakdown-key{color:#5a6270!important;font-weight:400}.oc-breakdown-val{font-weight:600;color:var(--oc-text)!important;text-align:right}.oc-future-grid{display:flex;flex-direction:column;gap:.75rem}.oc-future-cycle{border:1px solid var(--oc-border)!important;border-radius:var(--oc-radius);padding:.9rem 1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.2rem;background:var(--oc-bg)!important}.oc-future-num{font-size:0.7rem!important;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--oc-primary)!important;background:var(--oc-primary-soft)!important;padding:.2rem .55rem;border-radius:20px;flex-shrink:0}.oc-future-item{display:flex;align-items:center;gap:.3rem;font-size:0.84rem!important}.oc-future-item strong{font-weight:500;color:#7a8494!important;margin-right:.2rem}.oc-tips-list{list-style:none;display:flex;flex-direction:column;gap:.7rem;margin:0!important}.oc-tips-list li{font-size:0.875rem!important;color:#4a5260!important;padding-left:1.4rem;position:relative;line-height:1.55}.oc-tips-list li::before{content:"✓";position:absolute;left:0;color:var(--oc-secondary)!important;font-weight:700;font-size:0.85rem!important}.oc-actions-bottom{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}.oc-actions-bottom .oc-btn{flex:1 1 140px;max-width:220px}.oc-disclaimer{font-size:0.78rem!important;color:#8a9aac!important;text-align:center;padding:0 .5rem;line-height:1.6}.oc-disclaimer strong{color:#6a7a8c!important}.oc-modal-overlay{position:fixed;inset:0;background:rgb(26 30 36 / .55);backdrop-filter:blur(3px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem;animation:ocFadeIn 0.2s ease forwards}.oc-modal-overlay[hidden]{display:none}.oc-modal{background:var(--oc-white)!important;border-radius:var(--oc-radius);padding:2rem 1.8rem;max-width:400px;width:100%;box-shadow:var(--oc-shadow-lg);text-align:center;animation:ocSlideUp 0.3s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes ocSlideUp{from{transform:scale(.92) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.oc-modal-icon{font-size:2.2rem!important;margin-bottom:.8rem;color:var(--oc-danger)!important}.oc-modal-title{font-size:1.3rem!important;color:var(--oc-text)!important;margin-bottom:.6rem}.oc-modal-body{font-size:0.88rem!important;color:#5a6270!important;margin-bottom:1.5rem;line-height:1.55}.oc-modal-actions{display:flex;gap:.75rem;justify-content:center}.oc-modal-actions .oc-btn{flex:1;max-width:160px}.oc-toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(80px);background:#1e2530!important;color:#fff!important;padding:.75rem 1.4rem;border-radius:40px;font-size:0.875rem!important;font-weight:500;box-shadow:0 6px 24px rgb(0 0 0 / .25);z-index:2000;opacity:0;transition:transform 0.35s cubic-bezier(.34,1.2,.64,1),opacity 0.3s ease;pointer-events:none;white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis}.oc-toast.oc-toast-show{opacity:1;transform:translateX(-50%) translateY(0)}@media (min-width:560px){.oc-dates-grid{grid-template-columns:repeat(3,1fr)}.oc-future-cycle{flex-wrap:nowrap}.oc-actions-bottom{justify-content:flex-end}.oc-actions-bottom .oc-btn{flex:0 1 auto}}@media (min-width:768px){.oc-input-card{margin-top:-2rem}.oc-field-group{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}.oc-field-advanced{grid-column:1 / -1;max-width:380px}.oc-actions-top .oc-btn-primary{width:auto;min-width:240px}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}}:focus-visible{outline:3px solid var(--oc-primary);outline-offset:2px}@media print{.oc-actions-bottom,.oc-modal-overlay,.oc-toast{display:none!important}.oc-app{background:#fff!important}}