/* Lunara — warm, organic, calm. Light theme. 100% client-side. */
:root{
  --bg:#fbf5ef;
  --bg2:#f4e9e0;
  --ink:#3a2230;
  --ink-soft:#7c6470;
  --ink-faint:#a9909c;
  --card:#fffaf6;
  --line:#ecdcd1;
  --rose:#b8455e;       /* menstruation */
  --coral:#ef9f86;      /* follicular */
  --gold:#e0b04a;       /* ovulation */
  --mauve:#c193ac;      /* luteal */
  --accent:#b8455e;
  --accent-deep:#922f49;
  --shadow:0 24px 60px -34px rgba(120,50,70,.35);
  --r:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Mulish","Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);min-height:100dvh;line-height:1.6;
  background:
    radial-gradient(1100px 620px at 82% -8%, rgba(224,176,74,.12), transparent 55%),
    radial-gradient(900px 560px at -8% 108%, rgba(184,69,94,.10), transparent 55%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  background-attachment:fixed;
}
.wrap{max-width:780px;margin-inline:auto;padding:clamp(20px,5vw,46px) clamp(16px,5vw,28px) 48px}

/* top */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:clamp(24px,6vw,40px)}
.brand{display:flex;align-items:center;gap:11px}
.brand .mark{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(from -90deg,var(--rose),var(--coral),var(--gold),var(--mauve),var(--rose));
  box-shadow:inset 0 0 0 6px var(--bg)}
.brand b{font-family:"Fraunces","Georgia",serif;font-weight:600;font-size:23px;letter-spacing:.01em}
#install{display:none;font:inherit;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#fff;
  background:linear-gradient(180deg,var(--accent),var(--accent-deep));border:0;border-radius:999px;padding:9px 16px;
  cursor:pointer;font-weight:600;box-shadow:0 10px 24px -12px rgba(146,47,73,.6)}
.controls{display:flex;align-items:center;gap:8px}
.lang{font:inherit;font-size:13px;letter-spacing:.03em;color:var(--ink-soft);background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:9px 13px;cursor:pointer;-webkit-appearance:none;appearance:none}
.lang:hover{color:var(--ink);border-color:var(--accent)}

/* hero */
.eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;font-weight:700}
h1{font-family:"Fraunces","Georgia",serif;font-weight:550;font-size:clamp(34px,8.5vw,60px);line-height:1.04;letter-spacing:.005em}
h1 em{font-style:italic;color:var(--accent)}
.sub{margin-top:13px;max-width:48ch;color:var(--ink-soft);font-size:clamp(15px,3.6vw,17px)}

/* cycle wheel + readout */
.dash{margin-top:clamp(26px,6vw,38px);display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,5vw,34px);align-items:center}
@media(max-width:560px){.dash{grid-template-columns:1fr;justify-items:center;text-align:center}}
.wheel{width:min(240px,62vw);height:min(240px,62vw);position:relative}
.wheel svg{width:100%;height:100%;transform:rotate(-90deg)}
.wheel .center{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:2px}
.wheel .day{font-family:"Fraunces",serif;font-size:clamp(30px,9vw,42px);line-height:1;color:var(--ink)}
.wheel .dlbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.wheel .phase{margin-top:4px;font-weight:700;font-size:14px;letter-spacing:.02em}
.readout{display:flex;flex-direction:column;gap:14px;width:100%}
.stat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow)}
.stat .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.stat .v{font-family:"Fraunces",serif;font-size:22px;margin-top:2px;color:var(--ink)}
.stat .v small{font-family:"Mulish",sans-serif;font-size:13px;color:var(--ink-soft);font-weight:600}
.swatch{display:inline-block;width:9px;height:9px;border-radius:50%;margin-inline-end:7px;vertical-align:middle}

/* inputs card */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,5vw,26px);box-shadow:var(--shadow);margin-top:24px}
.card h2{font-family:"Fraunces",serif;font-weight:550;font-size:21px;margin-bottom:4px}
.card .hint{color:var(--ink-soft);font-size:13.5px;margin-bottom:16px}
.field{margin-bottom:15px}
.field label{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:7px;font-weight:700}
input[type="date"],input[type="number"]{width:100%;font:inherit;font-size:17px;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:13px;padding:14px 15px;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(184,69,94,.12)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn{font:inherit;font-weight:700;font-size:15px;letter-spacing:.02em;color:#fff;background:linear-gradient(180deg,var(--accent),var(--accent-deep));
  border:0;border-radius:13px;padding:14px 18px;cursor:pointer;box-shadow:0 12px 28px -14px rgba(146,47,73,.6);transition:filter .2s,transform .2s;width:100%}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn.ghost{color:var(--accent);background:transparent;border:1px solid var(--line);box-shadow:none}
.btn.tiny{width:auto;padding:8px 14px;font-size:13px}

/* history */
.logs{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.logrow{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:11px 14px}
.logrow .d{font-weight:600}.logrow .g{color:var(--ink-faint);font-size:13px}
.logrow button{border:0;background:transparent;color:var(--accent);font:inherit;font-weight:700;cursor:pointer;font-size:18px;line-height:1}
.foot-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.privacy{margin-top:14px;font-size:12.5px;color:var(--ink-soft);display:flex;gap:8px;align-items:flex-start}
.privacy svg{flex:0 0 auto;margin-top:1px}

/* guide */
.guide{margin-top:clamp(34px,8vw,52px)}
.guide h2{font-family:"Fraunces",serif;font-weight:550;font-size:clamp(24px,6vw,32px);margin-bottom:18px}
.phases{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:24px}
.phase-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;border-top:3px solid var(--c)}
.phase-card h3{font-family:"Fraunces",serif;font-weight:600;font-size:17px;margin-bottom:5px}
.phase-card p{font-size:13.5px;color:var(--ink-soft)}
.prose h3{font-family:"Fraunces",serif;font-weight:600;font-size:19px;margin:20px 0 8px}
.prose p{color:var(--ink-soft);font-size:15px;margin-bottom:10px}
.prose ul{margin:0 0 10px;padding-inline-start:20px;color:var(--ink-soft);font-size:15px}
.prose li{margin-bottom:6px}
.disclaimer{margin-top:22px;background:rgba(184,69,94,.06);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:13.5px;color:var(--ink-soft)}
.disclaimer strong{color:var(--ink)}

/* footer / gift */
.gift{margin-top:clamp(40px,9vw,64px);padding-top:26px;border-top:1px solid var(--line);text-align:center}
.gift .lead{font-family:"Fraunces",serif;font-style:italic;font-size:clamp(18px,4.6vw,22px);color:var(--ink-soft)}
.gift .primary{margin-top:14px}
.gift .primary a{display:inline-flex;align-items:center;gap:9px;font-size:16px;color:#fff;font-weight:700;
  background:linear-gradient(180deg,var(--gold),#c8932f);text-decoration:none;border-radius:999px;padding:12px 22px;
  box-shadow:0 12px 30px -14px rgba(200,147,47,.6);transition:filter .2s,transform .2s}
.gift .primary a:hover{filter:brightness(1.05);transform:translateY(-1px)}
.gift .others{margin-top:18px;display:flex;justify-content:center;flex-wrap:wrap;gap:8px 24px}
.gift .others a{color:var(--ink-soft);text-decoration:none;font-size:14px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.gift .others a:hover{color:var(--accent);border-color:var(--line)}
.fineprint{margin-top:22px;color:var(--ink-faint);font-size:12px}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.stagger>*{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
.stagger>*:nth-child(1){animation-delay:.04s}.stagger>*:nth-child(2){animation-delay:.12s}.stagger>*:nth-child(3){animation-delay:.2s}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}