@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

#ovlc-app { font-family:'DM Sans',sans-serif !important; max-width:560px !important; margin:0 auto !important; padding:0 !important; color:#0f172a !important; -webkit-font-smoothing:antialiased !important; background:transparent !important; }
#ovlc-app *, #ovlc-app *::before, #ovlc-app *::after { box-sizing:border-box !important; }
#ovlc-app button { -webkit-appearance:none !important; appearance:none !important; text-shadow:none !important; cursor:pointer !important; font-family:'DM Sans',sans-serif !important; border:none !important; }

/* Header */
#ovlc-app .ovlc-header { background:linear-gradient(135deg,#0d9488,#0f766e) !important; border-radius:18px 18px 0 0 !important; padding:22px 24px !important; display:flex !important; align-items:center !important; gap:14px !important; }
#ovlc-app .ovlc-header-icon { width:38px !important; height:38px !important; flex-shrink:0 !important; }
#ovlc-app .ovlc-title { font-family:'Cormorant Garamond',Georgia,serif !important; font-size:1.55rem !important; font-weight:700 !important; font-style:italic !important; color:#fff !important; margin:0 0 2px !important; padding:0 !important; line-height:1.1 !important; background:none !important; border:none !important; display:block !important; text-transform:none !important; text-shadow:none !important; }
#ovlc-app .ovlc-subtitle { font-size:0.8rem !important; color:rgba(255,255,255,0.80) !important; margin:0 !important; padding:0 !important; display:block !important; font-weight:400 !important; }

/* Form */
#ovlc-app .ovlc-form { background:#fff !important; border:1px solid #e2e8f0 !important; border-top:none !important; border-radius:0 0 18px 18px !important; padding:22px 22px 24px !important; display:flex !important; flex-direction:column !important; gap:18px !important; }

#ovlc-app .ovlc-field { display:flex !important; flex-direction:column !important; gap:7px !important; }
#ovlc-app .ovlc-label { font-size:0.82rem !important; font-weight:600 !important; color:#475569 !important; margin:0 !important; padding:0 !important; display:flex !important; align-items:center !important; justify-content:space-between !important; line-height:1.3 !important; background:none !important; border:none !important; text-transform:none !important; }
#ovlc-app .ovlc-hint { font-size:0.72rem !important; color:#94a3b8 !important; font-weight:400 !important; }

/* Date input */
#ovlc-app .ovlc-date-inp { width:100% !important; padding:11px 14px !important; border:1.5px solid #e2e8f0 !important; border-radius:10px !important; font-family:'DM Sans',sans-serif !important; font-size:0.95rem !important; font-weight:600 !important; color:#0f172a !important; background:#f8fafc !important; outline:none !important; box-shadow:none !important; cursor:pointer !important; display:block !important; transition:border-color 0.18s !important; }
#ovlc-app .ovlc-date-inp:focus { border-color:#0d9488 !important; background:#fff !important; box-shadow:0 0 0 3px rgba(13,148,136,0.12) !important; outline:none !important; }
#ovlc-app .ovlc-date-inp::-webkit-calendar-picker-indicator { cursor:pointer !important; opacity:0.5 !important; filter:invert(35%) sepia(80%) saturate(400%) hue-rotate(140deg) !important; }

/* Cycle badge */
#ovlc-app .ovlc-cycle-badge { font-family:'Cormorant Garamond',Georgia,serif !important; font-size:1rem !important; font-weight:700 !important; font-style:italic !important; color:#0d9488 !important; background:#f0fdfa !important; padding:2px 10px !important; border-radius:20px !important; border:1px solid #99f6e4 !important; }

/* Slider */
#ovlc-app .ovlc-slider { width:100% !important; -webkit-appearance:none !important; appearance:none !important; height:6px !important; border-radius:50px !important; background:linear-gradient(to right,#0d9488 0%,#0d9488 var(--pct,32%),#e2e8f0 var(--pct,32%),#e2e8f0 100%) !important; outline:none !important; cursor:pointer !important; border:none !important; }
#ovlc-app .ovlc-slider::-webkit-slider-thumb { -webkit-appearance:none !important; width:22px !important; height:22px !important; border-radius:50% !important; background:#0d9488 !important; box-shadow:0 2px 8px rgba(13,148,136,0.4) !important; cursor:pointer !important; border:3px solid #fff !important; }
#ovlc-app .ovlc-slider::-moz-range-thumb { width:22px !important; height:22px !important; border-radius:50% !important; background:#0d9488 !important; box-shadow:0 2px 8px rgba(13,148,136,0.4) !important; cursor:pointer !important; border:3px solid #fff !important; }
#ovlc-app .ovlc-slider-ticks { display:flex !important; justify-content:space-between !important; font-size:0.68rem !important; color:#94a3b8 !important; font-weight:500 !important; }

/* Pills */
#ovlc-app .ovlc-pills { display:flex !important; gap:6px !important; flex-wrap:wrap !important; }
#ovlc-app .ovlc-pill { padding:6px 14px !important; border-radius:50px !important; border:1.5px solid #e2e8f0 !important; background:#fff !important; font-size:0.8rem !important; font-weight:600 !important; color:#64748b !important; transition:all 0.18s !important; outline:none !important; line-height:1.3 !important; }
#ovlc-app .ovlc-pill:hover:not(.ovlc-pill--active) { border-color:#0d9488 !important; color:#0d9488 !important; background:#f0fdfa !important; }
#ovlc-app .ovlc-pill--active { background:#0d9488 !important; border-color:#0d9488 !important; color:#fff !important; box-shadow:0 2px 8px rgba(13,148,136,0.28) !important; }

/* Error */
#ovlc-app .ovlc-error { padding:10px 14px !important; background:#fef2f2 !important; border-left:3px solid #ef4444 !important; border-radius:0 8px 8px 0 !important; font-size:0.84rem !important; color:#991b1b !important; font-weight:500 !important; }

/* Button */
#ovlc-app .ovlc-btn { width:100% !important; padding:14px !important; background:#0d9488 !important; border:none !important; border-radius:12px !important; font-size:1rem !important; font-weight:700 !important; color:#fff !important; box-shadow:0 4px 14px rgba(13,148,136,0.35) !important; transition:background 0.18s,transform 0.18s !important; outline:none !important; line-height:1.3 !important; letter-spacing:0.01em !important; display:block !important; }
#ovlc-app .ovlc-btn:hover { background:#0f766e !important; transform:translateY(-1px) !important; color:#fff !important; }
#ovlc-app .ovlc-btn:active { transform:translateY(0) !important; }

/* Result */
#ovlc-app .ovlc-result { margin-top:16px !important; display:flex !important; flex-direction:column !important; gap:16px !important; }

/* Hero */
#ovlc-app .ovlc-hero { background:linear-gradient(135deg,#0d9488,#0f766e) !important; border-radius:16px !important; padding:20px 22px !important; display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:16px !important; box-shadow:0 6px 20px rgba(13,148,136,0.25) !important; }
#ovlc-app .ovlc-hero-left { display:flex !important; flex-direction:column !important; gap:3px !important; }
#ovlc-app .ovlc-hero-label { font-size:0.65rem !important; font-weight:700 !important; color:rgba(255,255,255,0.68) !important; text-transform:uppercase !important; letter-spacing:0.09em !important; display:block !important; }
#ovlc-app .ovlc-hero-date { font-family:'Cormorant Garamond',Georgia,serif !important; font-size:1.55rem !important; font-weight:700 !important; font-style:italic !important; color:#fff !important; display:block !important; line-height:1.1 !important; }
#ovlc-app .ovlc-hero-countdown { font-size:0.78rem !important; color:rgba(255,255,255,0.80) !important; font-weight:500 !important; display:block !important; }
#ovlc-app .ovlc-hero-right { display:flex !important; flex-direction:column !important; gap:10px !important; align-items:flex-end !important; }
#ovlc-app .ovlc-hero-stat { display:flex !important; flex-direction:column !important; align-items:flex-end !important; gap:1px !important; }
#ovlc-app .ovlc-hero-stat-lbl { font-size:0.62rem !important; color:rgba(255,255,255,0.65) !important; font-weight:600 !important; text-transform:uppercase !important; letter-spacing:0.06em !important; display:block !important; }
#ovlc-app .ovlc-hero-stat-val { font-size:0.8rem !important; color:#fff !important; font-weight:700 !important; display:block !important; text-align:right !important; }

/* Legend */
#ovlc-app .ovlc-legend { display:flex !important; flex-wrap:wrap !important; gap:6px 14px !important; }
#ovlc-app .ovlc-legend-item { display:inline-flex !important; align-items:center !important; gap:5px !important; font-size:0.74rem !important; font-weight:500 !important; color:#64748b !important; }
#ovlc-app .ovlc-dot { width:10px !important; height:10px !important; border-radius:50% !important; flex-shrink:0 !important; display:inline-block !important; }

/* Section label */
#ovlc-app .ovlc-section-lbl { font-size:0.76rem !important; font-weight:700 !important; color:#475569 !important; text-transform:uppercase !important; letter-spacing:0.08em !important; margin:0 !important; padding:0 !important; display:block !important; }

/* Calendar grid */
#ovlc-app .ovlc-calendar { display:grid !important; grid-template-columns:repeat(7,1fr) !important; gap:4px !important; }
#ovlc-app .ovlc-cal-cell { aspect-ratio:1 !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:8px !important; font-size:0.76rem !important; font-weight:600 !important; cursor:default !important; position:relative !important; min-height:28px !important; }
#ovlc-app .ovlc-cal-cell--hdr  { background:transparent !important; color:#94a3b8 !important; font-size:0.63rem !important; font-weight:700 !important; }
#ovlc-app .ovlc-cal-cell--empty { background:transparent !important; }
#ovlc-app .ovlc-cal-cell--menstrual  { background:rgba(239,68,68,0.14)  !important; color:#ef4444 !important; }
#ovlc-app .ovlc-cal-cell--follicular { background:rgba(203,213,225,0.20) !important; color:#64748b !important; }
#ovlc-app .ovlc-cal-cell--fertile    { background:rgba(20,184,166,0.18)  !important; color:#0f766e !important; }
#ovlc-app .ovlc-cal-cell--ovulation  { background:#0f766e !important; color:#fff !important; font-weight:700 !important; box-shadow:0 2px 8px rgba(15,118,110,0.40) !important; }
#ovlc-app .ovlc-cal-cell--luteal     { background:rgba(129,140,248,0.14) !important; color:#6366f1 !important; }
#ovlc-app .ovlc-cal-cell--today::after { content:'' !important; position:absolute !important; bottom:3px !important; left:50% !important; transform:translateX(-50%) !important; width:4px !important; height:4px !important; border-radius:50% !important; background:currentColor !important; }

/* Cycle list */
#ovlc-app .ovlc-cycle-list { display:flex !important; flex-direction:column !important; gap:8px !important; }
#ovlc-app .ovlc-cycle-row { display:flex !important; align-items:center !important; gap:12px !important; padding:12px 14px !important; background:#fff !important; border:1.5px solid #e2e8f0 !important; border-radius:12px !important; transition:border-color 0.15s !important; }
#ovlc-app .ovlc-cycle-row:hover { border-color:#99f6e4 !important; }
#ovlc-app .ovlc-cycle-row--past { opacity:0.55 !important; }
#ovlc-app .ovlc-cycle-num { width:32px !important; height:32px !important; border-radius:50% !important; background:#0d9488 !important; color:#fff !important; font-size:0.76rem !important; font-weight:700 !important; display:flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0 !important; }
#ovlc-app .ovlc-cycle-row--past .ovlc-cycle-num { background:#e2e8f0 !important; color:#94a3b8 !important; }
#ovlc-app .ovlc-cycle-info { flex:1 !important; display:flex !important; flex-direction:column !important; gap:2px !important; }
#ovlc-app .ovlc-cycle-ovul { font-size:0.88rem !important; font-weight:700 !important; color:#0d9488 !important; display:block !important; }
#ovlc-app .ovlc-cycle-row--past .ovlc-cycle-ovul { color:#94a3b8 !important; text-decoration:line-through !important; }
#ovlc-app .ovlc-cycle-fertile { font-size:0.72rem !important; color:#64748b !important; display:block !important; }
#ovlc-app .ovlc-cycle-next { font-size:0.7rem !important; font-weight:600 !important; color:#0f766e !important; background:#f0fdfa !important; padding:2px 8px !important; border-radius:6px !important; white-space:nowrap !important; flex-shrink:0 !important; }

/* Info row */
#ovlc-app .ovlc-info-row { display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:10px !important; }
#ovlc-app .ovlc-info-card { background:#f0fdfa !important; border:1px solid #ccfbf1 !important; border-radius:12px !important; padding:13px 10px !important; text-align:center !important; display:flex !important; flex-direction:column !important; gap:3px !important; }
#ovlc-app .ovlc-info-val { font-family:'Cormorant Garamond',Georgia,serif !important; font-size:1.15rem !important; font-weight:700 !important; font-style:italic !important; color:#0d9488 !important; display:block !important; }
#ovlc-app .ovlc-info-lbl { font-size:0.68rem !important; color:#64748b !important; font-weight:500 !important; display:block !important; }

/* Disclaimer */
#ovlc-app .ovlc-disclaimer { font-size:0.72rem !important; color:#94a3b8 !important; line-height:1.5 !important; margin:0 !important; padding:0 !important; display:block !important; }

/* Recalculate */
#ovlc-app .ovlc-recalc { background:transparent !important; border:1.5px solid #e2e8f0 !important; border-radius:8px !important; padding:9px 18px !important; font-size:0.84rem !important; font-weight:600 !important; color:#64748b !important; transition:all 0.18s !important; outline:none !important; line-height:1.3 !important; display:inline-block !important; }
#ovlc-app .ovlc-recalc:hover { border-color:#0d9488 !important; color:#0d9488 !important; background:#f0fdfa !important; }

/* Responsive */
@media screen and (max-width:480px) {
  #ovlc-app .ovlc-form   { padding:18px 16px 20px !important; }
  #ovlc-app .ovlc-header { padding:18px 16px !important; border-radius:14px 14px 0 0 !important; }
  #ovlc-app .ovlc-title  { font-size:1.3rem !important; }
  #ovlc-app .ovlc-hero   { flex-direction:column !important; gap:12px !important; }
  #ovlc-app .ovlc-hero-right { align-items:flex-start !important; flex-direction:row !important; gap:20px !important; width:100% !important; }
  #ovlc-app .ovlc-hero-stat  { align-items:flex-start !important; }
  #ovlc-app .ovlc-info-row   { grid-template-columns:1fr 1fr !important; }
  #ovlc-app .ovlc-info-card:last-child { grid-column:span 2 !important; }
}