/* Luna — calming, feminine, mobile-first */
:root{
  --bg: #fdf6f8;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-solid: #fff5f8;
  --text: #5b4a55;
  --text-soft: #8a7280;
  --accent: #d96a8f;
  --accent-soft: #f3d4e0;
  --rose: #c98ba8;
  --lilac: #b8a8d4;
  --amber: #e0a458;
  --green: #8fbf9f;
  --border: rgba(217,106,143,0.18);
  --shadow: 0 8px 30px rgba(157,90,120,0.12);
  --radius: 18px;
  --period: #d96a8f;
  --fertile: #b8a8d4;
  --ovulation: #9d80bf;
  --predicted: #e0a458;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg: #1f1620;
    --surface: rgba(42, 30, 38, 0.7);
    --surface-solid: #2a1f29;
    --text: #f0dde6;
    --text-soft: #c4a8b8;
    --accent: #e88fad;
    --accent-soft: #4a2f3c;
    --rose: #c98ba8;
    --lilac: #b8a8d4;
    --border: rgba(232,143,173,0.22);
    --shadow: 0 8px 30px rgba(0,0,0,0.3);
    --period: #e88fad;
    --fertile: #b8a8d4;
    --ovulation: #c4a0e0;
    --predicted: #e0a458;
  }
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
body{
  font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
h1, h2{ font-family: 'Cormorant Garamond', Georgia, serif; font-weight:600; margin:0; }

/* Background ambience */
#bg-layer{ position: fixed; inset:0; z-index:-1; overflow:hidden; }
#bg-img{
  position:absolute; right:-10%; top:-10%; width:70%; max-width:760px; opacity:.5;
  filter: saturate(.9); pointer-events:none;
}
#bg-tint{ position:absolute; inset:0; background: linear-gradient(160deg, rgba(253,246,248,0.4), rgba(253,246,248,0.85) 60%); }
@media (prefers-color-scheme: dark){ #bg-tint{ background: linear-gradient(160deg, rgba(31,22,32,0.55), rgba(31,22,32,0.92) 60%); } #bg-img{ opacity:.25; } }
@media (max-width:640px){ #bg-img{ width:120%; right:-30%; top:-15%; } }

.hidden{ display:none !important; }

/* ---------- Onboarding ---------- */
.onboarding{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.ob-card{
  width:100%; max-width:460px; background: var(--surface-solid);
  border-radius: 24px; overflow:hidden; box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.ob-banner{ width:100%; height:120px; object-fit:cover; display:block; }
.ob-body{ padding: 24px 24px 28px; }
.ob-progress{ height:4px; background: var(--accent-soft); border-radius:99px; overflow:hidden; margin-bottom:18px; }
#ob-bar{ height:100%; width:0; background: linear-gradient(90deg, var(--rose), var(--accent)); border-radius:99px; transition: width .4s ease; }
.ob-step{ display:none; animation: fade .4s ease; }
.ob-step.active{ display:block; }
@keyframes fade{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
.ob-step h1{ font-size:2.4rem; text-align:center; color:var(--accent); letter-spacing:.02em; }
.ob-tag{ text-align:center; color:var(--text-soft); margin:4px 0 20px; font-size:.95rem; }
.ob-step h2{ font-size:1.5rem; margin-bottom:14px; color:var(--text); }
.ob-privacy{ background: var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px; margin:14px 0 20px; }
.ob-privacy h2{ font-size:1.15rem; margin-bottom:6px; }
.ob-privacy p{ font-size:.9rem; color:var(--text-soft); margin:0; }
.ob-hint{ font-size:.85rem; color:var(--text-soft); margin:8px 0 0; }

.field{ display:block; margin-bottom:16px; }
.field span{ display:block; font-size:.85rem; font-weight:500; margin-bottom:6px; color:var(--text-soft); }
.field span small{ font-weight:400; opacity:.8; }
.field input, .field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:12px;
  background: var(--surface); color:var(--text); font-family:inherit; font-size:1rem;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.seg{ display:flex; gap:6px; }
.seg-btn{
  flex:1; padding:10px; border:1px solid var(--border); background:var(--surface);
  color:var(--text-soft); border-radius:10px; font-family:inherit; font-size:.9rem; cursor:pointer;
  transition: all .2s;
}
.seg-btn.active{ background: var(--accent); color:#fff; border-color:var(--accent); }

.ob-nav{ display:flex; justify-content:space-between; gap:10px; margin-top:18px; }

.btn{
  padding:13px 20px; border:none; border-radius:12px; font-family:inherit; font-weight:600;
  font-size:.95rem; cursor:pointer; transition: all .2s; min-height:44px;
}
.btn.primary{ background: linear-gradient(135deg, var(--rose), var(--accent)); color:#fff; box-shadow: 0 4px 14px rgba(217,106,143,0.3); }
.btn.primary:hover{ transform: translateY(-1px); box-shadow:0 6px 18px rgba(217,106,143,0.4); }
.btn.ghost{ background: var(--surface); color:var(--text); border:1px solid var(--border); }
.btn.ghost:hover{ background: var(--accent-soft); }
.btn.danger{ background: transparent; color:#c0533f; border:1px solid rgba(192,83,63,0.4); }
.btn.danger:hover{ background: rgba(192,83,63,0.1); }
.btn.small{ padding:8px 14px; font-size:.85rem; min-height:36px; }
.btn.full{ width:100%; margin-top:8px; }

/* ---------- App ---------- */
#app{ max-width:780px; margin:0 auto; padding:18px 16px 60px; }
.app-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand h1{ font-size:1.8rem; color:var(--accent); }
.brand p{ margin:0; font-size:.82rem; color:var(--text-soft); }
.moon{
  width:38px; height:38px; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, var(--accent), var(--lilac));
  box-shadow: 0 0 18px rgba(217,106,143,0.4); flex-shrink:0;
}
.icon-btn{
  background: var(--surface); border:1px solid var(--border); color:var(--text);
  padding:9px 14px; border-radius:10px; font-family:inherit; font-weight:500; cursor:pointer; min-height:44px;
}

.card{
  background: var(--surface); backdrop-filter: blur(12px);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; box-shadow: var(--shadow); margin-bottom:16px;
}
@media (prefers-color-scheme: dark){ .card{ backdrop-filter: blur(8px); } }

.phase-strip{ display:flex; justify-content:space-between; align-items:center; }
.phase-label{ font-family:'Cormorant Garamond',serif; font-size:1.4rem; color:var(--accent); display:block; }
.phase-sub{ font-size:.85rem; color:var(--text-soft); }
.phase-countdown{ font-weight:600; color:var(--text); text-align:right; font-size:.95rem; }

/* Tabs */
.tabs{ display:flex; gap:6px; margin-bottom:16px; background:var(--surface); padding:6px; border-radius:14px; border:1px solid var(--border); }
.tab{
  flex:1; padding:10px 6px; border:none; background:transparent; color:var(--text-soft);
  font-family:inherit; font-weight:600; font-size:.85rem; border-radius:10px; cursor:pointer; min-height:40px;
  transition: all .2s;
}
.tab.active{ background: linear-gradient(135deg, var(--rose), var(--accent)); color:#fff; }

.view{ display:none; animation: fade .35s ease; }
.view.active{ display:block; }

/* Calendar */
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cal-head h2{ font-size:1.4rem; }
.nav-btn{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface-solid); color:var(--accent); font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.cal-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:.7rem; color:var(--text-soft); margin-bottom:6px; font-weight:600; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-cell{
  aspect-ratio:1; position:relative; border:1px solid transparent; border-radius:10px;
  background: transparent; color:var(--text); font-family:inherit; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:flex-start; padding:5px 0 0; min-height:42px;
  transition: all .15s;
}
.cal-cell.empty{ visibility:hidden; }
.cal-cell:hover{ background: var(--accent-soft); }
.day-num{ font-size:.8rem; font-weight:500; margin:0 auto; padding-top:2px; }
.cal-cell.today{ border-color:var(--accent); }
.cal-cell.today .day-num{ color:var(--accent); font-weight:700; }
.cal-cell.selected{ box-shadow: 0 0 0 2px var(--accent) inset; }
.cal-cell.is-period{ background: var(--period); }
.cal-cell.is-period .day-num{ color:#fff; }
.cal-cell.is-fertile{ background: rgba(184,168,212,0.35); }
.cal-cell.is-ovulation{ background: var(--ovulation); }
.cal-cell.is-ovulation .day-num{ color:#fff; }
.cal-cell.is-predicted{ border: 2px dashed var(--predicted); }
.flow-mark{
  position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
  height:5px; border-radius:3px; background:#fff; opacity:.85;
}
.flow-mark.light{ width:8px; }
.flow-mark.medium{ width:14px; }
.flow-mark.heavy{ width:20px; }
.temp-mark{
  position:absolute; bottom:6px; right:6px; width:5px; height:5px; border-radius:50%;
  background: var(--amber);
}
.legend{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; font-size:.75rem; color:var(--text-soft); }
.legend span{ display:flex; align-items:center; gap:5px; }
.dot{ width:11px; height:11px; border-radius:50%; display:inline-block; }
.dot.period{ background:var(--period); }
.dot.fertile{ background:var(--fertile); }
.dot.ovulation{ background:var(--ovulation); }
.dot.predicted{ background:transparent; border:2px dashed var(--predicted); }
.dot.temp{ background:var(--amber); }

/* Log panel */
.log-card{ position:fixed; bottom:0; left:0; right:0; max-height:80vh; overflow-y:auto;
  border-radius:24px 24px 0 0; transform:translateY(100%); transition: transform .35s ease; z-index:50; margin:0; max-width:780px; margin-left:auto; margin-right:auto;
}
.log-card.open{ transform: translateY(0); }
@media (min-width:780px){ .log-card{ left:50%; transform: translate(-50%, 100%); } .log-card.open{ transform: translate(-50%, 0); } }
.log-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.log-head h2{ font-size:1.3rem; }
.log-hint{ color:var(--text-soft); font-size:.9rem; margin:0; }
.phase-pill{ display:inline-block; padding:6px 12px; border-radius:99px; font-size:.8rem; font-weight:600; margin-bottom:14px; background:var(--accent-soft); color:var(--accent); }
.phase-pill.period{ background:rgba(217,106,143,0.18); color:var(--period); }
.phase-pill.fertile{ background:rgba(184,168,212,0.2); color:var(--ovulation); }
.phase-pill.ovulation{ background:rgba(157,128,175,0.2); color:var(--ovulation); }
.log-section{ margin-bottom:14px; }
.log-label{ display:block; font-size:.8rem; font-weight:600; color:var(--text-soft); margin-bottom:6px; }
.log-label small{ font-weight:400; opacity:.7; }
.toggle-row{ display:flex; gap:8px; }
.toggle{
  flex:1; padding:12px; border-radius:12px; border:1px solid var(--border);
  background:var(--surface-solid); color:var(--text-soft); font-family:inherit; cursor:pointer; min-height:44px;
}
.toggle.active{ background:var(--period); color:#fff; border-color:var(--period); }
.temp-input-row{ display:flex; gap:8px; }
.temp-input-row input{ flex:1; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--surface-solid); color:var(--text); font-family:inherit; font-size:1rem; }
#notes-val{ width:100%; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--surface-solid); color:var(--text); font-family:inherit; font-size:.95rem; resize:vertical; }

/* Charts */
.chart-hint{ font-size:.85rem; color:var(--text-soft); margin:0 0 14px; }
.chart-wrap{ height:280px; position:relative; }

/* Insights */
.insight-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (max-width:520px){ .insight-grid{ grid-template-columns:1fr; } }
.insight-card{ display:flex; flex-direction:column; gap:4px; padding:16px; }
.ins-title{ font-size:.8rem; color:var(--text-soft); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.ins-value{ font-family:'Cormorant Garamond',serif; font-size:1.5rem; color:var(--text); }
.ins-sub{ font-size:.78rem; color:var(--text-soft); }
.insight-card.period .ins-value{ color:var(--period); }
.insight-card.ovulation .ins-value{ color:var(--ovulation); }
.insight-card.fertile .ins-value{ color:var(--fertile); }
.insight-card.warn .ins-value{ color:var(--amber); }
.insight-card.good .ins-value{ color:var(--green); }
.insight-note h2{ margin-bottom:6px; }
.insight-note p{ margin:0; font-size:.9rem; color:var(--text-soft); }

/* Settings */
.settings-form{ display:flex; flex-direction:column; gap:14px; }
.setting-note{ font-size:.9rem; color:var(--text-soft); }
.btn-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.btn-row .btn{ flex:1; min-width:140px; }
.footer-note{ text-align:center; font-size:.8rem; color:var(--text-soft); margin-top:20px; }

/* Toast */
.toast{
  position:fixed; bottom:20px; left:50%; transform:translate(-50%, 80px);
  background: var(--accent); color:#fff; padding:12px 20px; border-radius:99px;
  font-size:.9rem; font-weight:500; box-shadow: 0 6px 20px rgba(217,106,143,0.4);
  opacity:0; transition: all .3s ease; z-index:100; pointer-events:none;
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }