/* ============================================================
   My Cycle — Styles
   Pink + playful · mobile-first · iPhone-ready
   ============================================================ */

/* ---------- Variables ---------- */
:root {
  --pink: #FF6B9D;
  --pink-light: #FF8FB3;
  --pink-dark: #E8436E;
  --pink-bg: #FFF0F5;
  --pink-surface: #FFE4ED;
  --purple: #C084FC;
  --purple-light: #D8B4FE;
  --green: #22C55E;
  --red: #EF4444;
  --orange: #F97316;
  --text: #2D1B2E;
  --text-muted: #8B7280;
  --text-light: #A9929E;
  --card-bg: #FFFFFF;
  --card-shadow: 0 2px 16px rgba(255, 107, 157, 0.12);
  --card-radius: 20px;
  --border: #F5D6DE;
  --tab-height: 64px;
  --header-height: 56px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--pink-bg);
  color:var(--text);
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
a{text-decoration:none;color:var(--pink-dark)}
img{max-width:100%;display:block}
ul{list-style:none}

/* ---------- Screens ---------- */
.screen{display:none;min-height:100dvh}
.screen.active{display:flex;flex-direction:column}
#auth-screen{justify-content:center;align-items:center;padding:24px}
#main-app{padding-top:var(--safe-top)}

/* ---------- Auth ---------- */
.auth-box{
  width:100%;max-width:380px;
  background:var(--card-bg);
  border-radius:var(--card-radius);
  padding:40px 28px 32px;
  box-shadow:0 4px 24px rgba(255,107,157,0.1);
  text-align:center;
}
.auth-box .logo{
  font-size:48px;margin-bottom:4px;
}
.auth-box h1{
  font-size:24px;font-weight:800;color:var(--pink-dark);
  margin-bottom:4px;
}
.auth-box p.sub{
  color:var(--text-muted);font-size:14px;margin-bottom:24px;
}
.auth-box .auth-tabs{
  display:flex;gap:0;margin-bottom:20px;
  background:var(--pink-bg);border-radius:12px;padding:4px;
}
.auth-box .auth-tabs button{
  flex:1;padding:10px;border-radius:10px;font-weight:700;font-size:14px;
  color:var(--text-muted);transition:all 0.2s;
}
.auth-box .auth-tabs button.active{
  background:var(--card-bg);color:var(--pink);box-shadow:0 1px 4px rgba(0,0,0,0.06);
}
.auth-form{text-align:left;display:none}
.auth-form.active{display:block}
.auth-form .field{margin-bottom:16px}
.auth-form label{display:block;font-size:13px;font-weight:700;color:var(--text-muted);margin-bottom:4px}
.auth-form input{
  width:100%;padding:12px 16px;border:2px solid var(--border);border-radius:12px;
  font-size:16px;transition:border-color 0.2s;background:var(--pink-bg);
}
.auth-form input:focus{outline:none;border-color:var(--pink)}
.btn-primary{
  width:100%;padding:14px;border-radius:14px;background:var(--pink);
  color:#fff;font-weight:800;font-size:16px;transition:all 0.2s;
  box-shadow:0 4px 12px rgba(255,107,157,0.3);
}
.btn-primary:active{transform:scale(0.97)}
.btn-primary:disabled{opacity:0.5;transform:none}
.auth-error{color:var(--red);font-size:13px;margin-top:8px;min-height:20px}

/* ---------- Header ---------- */
#app-header{
  height:var(--header-height);padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;
  background:var(--card-bg);position:sticky;top:0;z-index:10;
}
#app-header h1{
  font-size:20px;font-weight:800;color:var(--pink-dark);
}
.header-actions{display:flex;gap:8px}
.header-actions button{
  width:36px;height:36px;border-radius:50%;
  background:var(--pink-bg);font-size:16px;
  display:flex;align-items:center;justify-content:center;
}

/* ---------- Main Content ---------- */
#main-content{
  flex:1;padding:16px 16px calc(var(--tab-height) + var(--safe-bottom) + 16px);
  overflow-y:auto;
}
.page{display:none;animation:fadeIn 0.25s ease}
.page.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Cards ---------- */
.card{
  background:var(--card-bg);border-radius:var(--card-radius);
  padding:20px;margin-bottom:16px;box-shadow:var(--card-shadow);
}
.card-title{
  font-size:14px;font-weight:700;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:0.5px;margin-bottom:12px;
}
.card-icon{font-size:28px;margin-bottom:4px}

/* ---------- Tab Bar ---------- */
#tab-bar{
  position:fixed;bottom:0;left:0;right:0;
  height:calc(var(--tab-height) + var(--safe-bottom));
  padding-bottom:var(--safe-bottom);
  background:var(--card-bg);border-top:1px solid var(--border);
  display:flex;z-index:100;
}
.tab-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;padding:6px 0;
  font-size:10px;font-weight:700;color:var(--text-light);
  transition:color 0.15s;
}
.tab-btn .tab-icon{font-size:22px;line-height:1}
.tab-btn.active{color:var(--pink)}

/* ---------- Dashboard ---------- */
.greeting{font-size:18px;margin-bottom:4px}
.greeting strong{color:var(--pink-dark)}
.date-today{font-size:13px;color:var(--text-muted);margin-bottom:16px}

.pill-card{text-align:center;padding:24px 20px}
.pill-card .pill-status-icon{font-size:56px;margin-bottom:8px}
.pill-card .pill-label{font-size:16px;font-weight:700;margin-bottom:4px}
.pill-card .pill-sub{font-size:13px;color:var(--text-muted);margin-bottom:16px}
.pill-toggle{
  width:72px;height:72px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:36px;transition:all 0.2s;margin:0 auto;
}
.pill-toggle.taken{background:var(--green);color:#fff;box-shadow:0 4px 12px rgba(34,197,94,0.3)}
.pill-toggle.not-taken{background:var(--pink-bg);color:var(--text-light);border:3px dashed var(--border)}

.cycle-status{display:flex;align-items:center;gap:16px}
.cycle-ring{width:72px;height:72px;border-radius:50%;position:relative;flex-shrink:0}
.cycle-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.cycle-ring .ring-bg{fill:none;stroke:var(--pink-bg);stroke-width:6}
.cycle-ring .ring-fg{fill:none;stroke:var(--pink);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset 0.5s}
.cycle-ring .ring-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:18px;font-weight:800;color:var(--pink-dark);
}
.cycle-info h3{font-size:18px;font-weight:800;margin-bottom:2px}
.cycle-info p{font-size:13px;color:var(--text-muted)}

.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quick-btn{
  padding:14px;border-radius:14px;font-weight:700;font-size:14px;
  text-align:center;transition:all 0.15s;
}
.quick-btn:active{transform:scale(0.97)}
.quick-btn.pink{background:var(--pink-bg);color:var(--pink-dark)}
.quick-btn.purple{background:#F3E8FF;color:#7C3AED}
.quick-btn.green{background:#F0FDF4;color:var(--green)}

.next-period-card{text-align:center;padding:16px}
.next-period-card .big-num{font-size:42px;font-weight:800;color:var(--pink-dark);line-height:1}
.next-period-card .big-label{font-size:14px;color:var(--text-muted);margin-top:2px}

/* ---------- Period Module ---------- */
.period-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.period-nav h2{font-size:16px;font-weight:800}
.period-nav button{width:36px;height:36px;border-radius:50%;background:var(--pink-bg);font-size:16px}

.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:16px}
.cal-header{text-align:center;font-size:11px;font-weight:700;color:var(--text-muted);padding:4px 0}
.cal-day{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;border-radius:50%;position:relative;
  transition:background 0.1s;cursor:pointer;
}
.cal-day.other-month{color:var(--text-light);opacity:0.4}
.cal-day.today{background:var(--pink);color:#fff;font-weight:800;box-shadow:0 2px 8px rgba(255,107,157,0.3)}
.cal-day.period{background:var(--pink-bg);color:var(--pink-dark)}
.cal-day.period.today{background:var(--pink);color:#fff}
.cal-day.predicted-period{background:var(--pink-surface);color:var(--pink-dark);opacity:0.7}
.cal-day.fertile{background:#F3E8FF;color:#7C3AED}
.cal-day.ovulation{background:var(--purple);color:#fff}
.cal-day.pill-placebo{border:2px dashed var(--pink-light)}
.cal-day .cal-dot{
  width:4px;height:4px;border-radius:50%;position:absolute;bottom:4px;
}
.cal-day .cal-dot.green{background:var(--green)}
.cal-day .cal-dot.red{background:var(--red)}

.period-form{display:flex;flex-direction:column;gap:12px}
.period-form .form-row{display:flex;gap:10px}
.period-form .form-row .field{flex:1}
.period-form label{display:block;font-size:12px;font-weight:700;color:var(--text-muted);margin-bottom:4px}
.period-form input,.period-form select{
  width:100%;padding:10px 14px;border:2px solid var(--border);border-radius:12px;
  font-size:14px;background:var(--pink-bg);
}
.period-form input:focus,.period-form select:focus{outline:none;border-color:var(--pink)}

.flow-selector{display:flex;gap:8px;flex-wrap:wrap}
.flow-btn{
  padding:8px 16px;border-radius:20px;border:2px solid var(--border);
  font-size:13px;font-weight:700;transition:all 0.15s;flex:1;min-width:60px;
}
.flow-btn.active{background:var(--pink);color:#fff;border-color:var(--pink)}

.period-history .period-item{
  display:flex;align-items:center;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--border);
}
.period-item:last-child{border-bottom:none}
.period-item .pi-date{font-weight:700;flex:1}
.period-item .pi-flow{font-size:12px;color:var(--text-muted)}
.period-item .pi-delete{color:var(--red);font-size:14px;padding:4px}

/* ---------- Symptoms ---------- */
.symptom-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.symptom-btn{
  padding:12px 8px;border-radius:14px;border:2px solid var(--border);
  text-align:center;transition:all 0.15s;
}
.symptom-btn:active{transform:scale(0.95)}
.symptom-btn .sym-icon{font-size:22px;display:block;margin-bottom:2px}
.symptom-btn .sym-label{font-size:11px;font-weight:700;color:var(--text-muted)}
.symptom-btn.selected{background:var(--pink-bg);border-color:var(--pink);color:var(--pink-dark)}

.rating-row{display:flex;gap:6px;align-items:center}
.rating-btn{
  width:36px;height:36px;border-radius:50%;border:2px solid var(--border);
  font-weight:700;font-size:13px;transition:all 0.15s;
}
.rating-btn.active{background:var(--pink);color:#fff;border-color:var(--pink)}

/* ---------- Pills Module ---------- */
.pack-header{text-align:center;margin-bottom:16px}
.pack-header h2{font-size:20px;font-weight:800;color:var(--pink-dark)}
.pack-header p{font-size:13px;color:var(--text-muted);margin-top:2px}
.pack-progress{margin-bottom:16px}
.pack-progress .progress-bar{
  height:10px;background:var(--pink-bg);border-radius:10px;overflow:hidden;margin-bottom:6px;
}
.pack-progress .progress-fill{
  height:100%;background:linear-gradient(90deg,var(--pink),var(--purple));
  border-radius:10px;transition:width 0.5s;
}
.pack-progress .progress-label{
  font-size:12px;font-weight:700;color:var(--text-muted);
  display:flex;justify-content:space-between;
}

.pill-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:16px;
}
.pill-cell{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border-radius:12px;font-size:12px;font-weight:700;
  border:2px solid var(--border);position:relative;cursor:pointer;
  transition:all 0.15s;
}
.pill-cell:active{transform:scale(0.92)}
.pill-cell.active-pill{background:var(--pink-bg);border-color:var(--pink-light);color:var(--text)}
.pill-cell.placebo-pill{background:#F9F0FF;border-color:#E9D5FF;color:#7C3AED}
.pill-cell.taken{background:var(--green);border-color:var(--green);color:#fff}
.pill-cell.taken.placebo-pill{background:var(--purple-light);border-color:var(--purple);color:#4A1D96}
.pill-cell.today-highlight{
  box-shadow:0 0 0 3px var(--pink),0 0 12px rgba(255,107,157,0.3);
}
.pill-cell .pill-check{position:absolute;top:-4px;right:-4px;font-size:10px}

.pill-week-label{
  font-size:11px;font-weight:700;color:var(--text-muted);
  margin-bottom:4px;grid-column:1/-1;padding-top:8px;
}

.week-history{display:flex;gap:8px}
.week-day{
  flex:1;text-align:center;padding:10px 4px;border-radius:12px;
  border:1px solid var(--border);font-size:12px;font-weight:600;
}
.week-day .wd-name{display:block;font-size:10px;color:var(--text-muted);margin-bottom:2px}
.week-day .wd-status{font-size:18px}
.week-day.taken{background:#F0FDF4;border-color:var(--green)}
.week-day.missed{background:#FEF2F2;border-color:var(--red)}

/* ---------- Settings ---------- */
.settings-section{margin-bottom:24px}
.settings-section h3{
  font-size:14px;font-weight:800;color:var(--pink-dark);
  margin-bottom:12px;padding-left:4px;
}
.setting-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;background:var(--card-bg);
  border-radius:14px;margin-bottom:8px;box-shadow:var(--card-shadow);
}
.setting-item .si-label{font-size:14px;font-weight:600}
.setting-item .si-desc{font-size:12px;color:var(--text-muted);margin-top:2px}
.setting-item input[type="number"]{
  width:60px;padding:8px 12px;border:2px solid var(--border);border-radius:10px;
  text-align:center;font-weight:700;background:var(--pink-bg);font-size:16px;
}
.setting-item input[type="number"]:focus{outline:none;border-color:var(--pink)}
.setting-item select{
  padding:8px 12px;border:2px solid var(--border);border-radius:10px;
  background:var(--pink-bg);font-weight:600;font-size:14px;
}
.setting-item select:focus{outline:none;border-color:var(--pink)}
.toggle-switch{
  width:48px;height:28px;background:var(--border);border-radius:14px;
  position:relative;cursor:pointer;transition:background 0.2s;flex-shrink:0;
}
.toggle-switch.on{background:var(--pink)}
.toggle-switch .toggle-knob{
  width:22px;height:22px;border-radius:50%;background:#fff;
  position:absolute;top:3px;left:3px;transition:transform 0.2s;
  box-shadow:0 1px 4px rgba(0,0,0,0.1);
}
.toggle-switch.on .toggle-knob{transform:translateX(20px)}
.setting-item input[type="time"]{
  padding:8px 12px;border:2px solid var(--border);border-radius:10px;
  background:var(--pink-bg);font-weight:600;font-size:14px;
}
.btn-danger{
  padding:10px 20px;border-radius:12px;background:#FEF2F2;
  color:var(--red);font-weight:700;font-size:14px;width:100%;
}

/* ---------- Toast ---------- */
#toast-container{
  position:fixed;top:calc(var(--safe-top) + 8px);left:16px;right:16px;
  z-index:999;display:flex;flex-direction:column;gap:8px;pointer-events:none;
}
.toast{
  padding:14px 20px;border-radius:14px;background:var(--card-bg);
  box-shadow:0 4px 20px rgba(0,0,0,0.12);font-weight:700;font-size:14px;
  pointer-events:auto;animation:slideDown 0.3s ease;
  display:flex;align-items:center;gap:8px;
}
.toast.success{border-left:4px solid var(--green);color:var(--green)}
.toast.error{border-left:4px solid var(--red);color:var(--red)}
.toast.info{border-left:4px solid var(--pink);color:var(--pink-dark)}
@keyframes slideDown{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ---------- Logout Button ---------- */
.logout-section{padding:16px 0;text-align:center}
.logout-btn{
  padding:12px 32px;border-radius:14px;background:#FEF2F2;
  color:var(--red);font-weight:700;font-size:15px;
}

/* ---------- Empty State ---------- */
.empty-state{text-align:center;padding:32px 16px}
.empty-state .empty-icon{font-size:48px;margin-bottom:8px}
.empty-state p{font-size:14px;color:var(--text-muted)}