/* FemFlow Pro — Styles */
:root {
    --color-bg: #0a0a12;
    --color-text: #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.7);
    --color-text-muted: rgba(255, 255, 255, 0.5);
    --color-primary: #ff6b9d;
    --color-primary-glow: rgba(255, 107, 157, 0.4);
    --color-secondary: #c084fc;
    --color-menstruation: #ff6b6b;
    --color-follicular: #ffd93d;
    --color-ovulation: #6bcb77;
    --color-luteal: #a78bfa;
    --color-fertile: #4ade80;
    --glass-bg: rgba(255, 255, 255, 0.06);
    --glass-bg-hover: rgba(255, 255, 255, 0.1);
    --glass-blur: 20px;
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 100px;
    --font-family: 'Inter', -apple-system, sans-serif;
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-base: 15px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
    --safe-left: env(safe-area-inset-left);
    --safe-right: env(safe-area-inset-right);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; font-family: var(--font-family); font-size: var(--font-size-base); color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; }
body { -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; touch-action: pan-y; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }
input { font-family: inherit; }

/* Glass Background */
.liquid-glass-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(135deg, #0a0a12 0%, #12121a 40%, #1a1a2e 100%); }
.glass-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5; animation: float 20s ease-in-out infinite; will-change: transform; }
.glass-orb-1 { width: 500px; height: 500px; top: -150px; left: -150px; background: radial-gradient(circle, var(--color-primary-glow) 0%, transparent 70%); }
.glass-orb-2 { width: 600px; height: 600px; top: 40%; right: -200px; background: radial-gradient(circle, rgba(103, 232, 249, 0.25) 0%, transparent 70%); animation-delay: -7s; }
.glass-orb-3 { width: 400px; height: 400px; bottom: -100px; left: 20%; background: radial-gradient(circle, rgba(192, 132, 252, 0.3) 0%, transparent 70%); animation-delay: -14s; }
.glass-orb-4 { width: 350px; height: 350px; top: 30%; left: 50%; background: radial-gradient(circle, rgba(74, 222, 128, 0.2) 0%, transparent 70%); animation-delay: -10s; }
@keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(40px, -40px) scale(1.08); } 50% { transform: translate(-30px, 30px) scale(0.92); } 75% { transform: translate(-40px, -30px) scale(1.05); } }

/* Glass Components */
.glass-card { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(180%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: all var(--transition-base); }
.glass-card:hover { background: var(--glass-bg-hover); }
.glass-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-radius: var(--radius-full); font-size: var(--font-size-sm); color: var(--color-text-secondary); transition: all var(--transition-fast); }
.glass-pill:hover { background: rgba(255, 255, 255, 0.15); color: var(--color-text); }
.glass-glow { animation: glass-glow 4s ease-in-out infinite; }
@keyframes glass-glow { 0%, 100% { box-shadow: 0 0 20px rgba(255, 107, 157, 0.1), var(--glass-shadow); } 50% { box-shadow: 0 0 40px rgba(255, 107, 157, 0.2), var(--glass-shadow); } }
.glass-input { width: 100%; padding: 12px 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border); border-radius: var(--radius-md); color: var(--color-text); transition: all var(--transition-fast); }
.glass-input:focus { outline: none; border-color: var(--color-primary); background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.2); }
.glass-input::placeholder { color: var(--color-text-muted); }

/* App Layout */
.app-container { min-height: 100vh; display: flex; flex-direction: column; padding-top: var(--safe-top); padding-bottom: calc(var(--safe-bottom) + 80px); padding-left: var(--safe-left); padding-right: var(--safe-right); }
.app-header { position: sticky; top: var(--safe-top); z-index: 100; margin: var(--spacing-md); margin-bottom: 0; padding: var(--spacing-md) var(--spacing-lg); }
.header-content { display: flex; align-items: center; justify-content: space-between; }
.header-left { display: flex; align-items: center; gap: var(--spacing-sm); }
.app-logo { font-size: 28px; }
.app-title { font-size: var(--font-size-lg); font-weight: 600; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.btn-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; transition: all var(--transition-fast); }
.btn-icon:hover { background: rgba(255, 255, 255, 0.15); transform: scale(1.05); }
.btn-icon:active { transform: scale(0.95); }

/* Main */
.app-main { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-md); padding: var(--spacing-md); overflow-y: auto; }
.section-title { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-base); font-weight: 600; color: var(--color-text-secondary); margin-bottom: var(--spacing-md); }
.section-title svg { opacity: 0.7; }

/* Phase Card */
.phase-card { padding: var(--spacing-lg); }
.phase-header { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md); }
.phase-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; font-size: 36px; background: rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg); animation: pulse 3s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.phase-info { flex: 1; }
.phase-name { font-size: var(--font-size-xl); font-weight: 700; margin-bottom: var(--spacing-xs); }
.phase-day { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.phase-description { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.6; margin-bottom: var(--spacing-lg); }
.phase-progress { margin-top: var(--spacing-md); }
.progress-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: var(--radius-full); overflow: hidden; margin-bottom: var(--spacing-sm); }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--color-menstruation) 0%, var(--color-follicular) 33%, var(--color-ovulation) 50%, var(--color-luteal) 100%); border-radius: var(--radius-full); transition: width 0.5s ease; }
.progress-labels { display: flex; justify-content: space-between; font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* Timeline */
.timeline-section { padding: var(--spacing-lg); }
.timeline { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.timeline-empty { text-align: center; padding: var(--spacing-xl); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.timeline-item { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); background: rgba(255, 255, 255, 0.04); border-radius: var(--radius-md); transition: all var(--transition-fast); }
.timeline-item:hover { background: rgba(255, 255, 255, 0.08); transform: translateX(4px); }
.timeline-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: rgba(255, 255, 255, 0.08); border-radius: 50%; }
.timeline-content { flex: 1; }
.timeline-title { font-weight: 600; font-size: var(--font-size-sm); margin-bottom: 2px; }
.timeline-subtitle { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.timeline-days { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-primary); }
.timeline-days-label { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* Recommendations */
.recommendations-section { padding: var(--spacing-lg); }
.recommendations-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-sm); }
.recommendation-card { padding: var(--spacing-md); background: rgba(255, 255, 255, 0.04); border-radius: var(--radius-md); border-left: 3px solid var(--color-primary); transition: all var(--transition-fast); }
.recommendation-card:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-2px); }
.recommendation-icon { font-size: 24px; margin-bottom: var(--spacing-sm); }
.recommendation-title { font-size: var(--font-size-sm); font-weight: 600; margin-bottom: var(--spacing-xs); }
.recommendation-text { font-size: var(--font-size-xs); color: var(--color-text-secondary); line-height: 1.5; }

/* Calendar */
.calendar-section { padding: var(--spacing-lg); }
.calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-md); }
.calendar-title { font-size: var(--font-size-lg); font-weight: 600; }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: var(--spacing-sm); text-align: center; font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: 500; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-sm); font-weight: 500; border-radius: 50%; background: transparent; color: var(--color-text); cursor: pointer; transition: all var(--transition-fast); }
.calendar-day:hover { background: rgba(255, 255, 255, 0.1); }
.calendar-day.empty { visibility: hidden; }
.calendar-day.today { border: 2px solid var(--color-primary); }
.calendar-day.period { background: var(--color-menstruation); color: white; }
.calendar-day.fertile { background: rgba(74, 222, 128, 0.3); color: var(--color-fertile); }
.calendar-day.ovulation { background: var(--color-ovulation); color: white; }
.calendar-day.selected { box-shadow: 0 0 0 2px var(--color-primary); }
.calendar-legend { display: flex; justify-content: center; gap: var(--spacing-lg); margin-top: var(--spacing-md); padding-top: var(--spacing-md); border-top: 1px solid var(--glass-border); }
.legend-item { display: flex; align-items: center; gap: var(--spacing-xs); font-size: var(--font-size-xs); color: var(--color-text-muted); }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.legend-dot.period { background: var(--color-menstruation); }
.legend-dot.fertile { background: var(--color-fertile); }
.legend-dot.ovulation { background: var(--color-ovulation); }

/* Navigation */
.glass-nav { position: fixed; bottom: calc(var(--safe-bottom) + 16px); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; padding: 12px 20px; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-full); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1); z-index: 1000; }
.glass-nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 16px; border-radius: 50px; color: rgba(255, 255, 255, 0.5); font-size: var(--font-size-xs); font-weight: 500; transition: all var(--transition-fast); }
.glass-nav-item svg { width: 22px; height: 22px; }
.glass-nav-item:hover { color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.08); }
.glass-nav-item.active { color: var(--color-primary); background: rgba(255, 107, 157, 0.15); }

/* Modal */
.glass-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2000; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.glass-modal[hidden] { display: none; }
.glass-modal-content { width: 90%; max-width: 400px; max-height: 85vh; overflow-y: auto; background: rgba(20, 20, 30, 0.9); backdrop-filter: blur(40px) saturate(150%); -webkit-backdrop-filter: blur(40px) saturate(150%); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1); animation: modal-in 0.3s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: scale(0.95) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-lg); border-bottom: 1px solid var(--glass-border); }
.modal-header h2 { font-size: var(--font-size-lg); font-weight: 600; }
.modal-body { padding: var(--spacing-lg); display: flex; flex-direction: column; gap: var(--spacing-lg); }
.modal-footer { padding: var(--spacing-lg); padding-top: 0; }
.setting-group { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.setting-label { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-secondary); }
.setting-control { display: flex; align-items: center; gap: var(--spacing-md); }
.range-input { flex: 1; -webkit-appearance: none; background: rgba(255, 255, 255, 0.1); height: 6px; border-radius: var(--radius-full); outline: none; }
.range-input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; background: var(--color-primary); border-radius: 50%; cursor: pointer; box-shadow: 0 2px 8px rgba(255, 107, 157, 0.4); }
.range-value { min-width: 32px; text-align: center; font-weight: 600; color: var(--color-primary); }
.toggle { position: relative; display: inline-block; width: 52px; height: 28px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.1); border-radius: var(--radius-full); cursor: pointer; transition: all var(--transition-fast); }
.toggle-slider::before { content: ''; position: absolute; height: 22px; width: 22px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: transform var(--transition-fast); }
.toggle input:checked + .toggle-slider { background: var(--color-primary); }
.toggle input:checked + .toggle-slider::before { transform: translateX(24px); }
.btn { padding: 14px 28px; font-weight: 600; border-radius: var(--radius-full); transition: all var(--transition-fast); }
.btn-primary { width: 100%; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); color: white; border: none; box-shadow: 0 4px 16px rgba(255, 107, 157, 0.3); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(255, 107, 157, 0.4); }

/* Responsive */
@media (prefers-reduced-motion: reduce) { .glass-orb, .glass-glow, .phase-icon { animation: none; } .glass-card, .btn, .calendar-day { transition: none; } }
@media (max-width: 480px) { :root { --glass-blur: 16px; } .recommendations-grid { grid-template-columns: 1fr; } .glass-nav { padding: 10px 16px; gap: 4px; } .glass-nav-item { padding: 8px 12px; } }
@media (min-width: 768px) { .app-container { max-width: 600px; margin: 0 auto; } }