styles.css

:root { --ink:#30272a; --muted:#83777b; --rose:#d44f73; --rose-soft:#fbe5eb; --line:#eee5e6; --paper:#fffdfd; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; font-family:ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif; color:var(--ink); background:#fff7f8; }
button { font:inherit; cursor:pointer; }
.app-shell { width:min(100%, 760px); margin:auto; padding:25px 20px 42px; }
.topbar { display:flex; justify-content:space-between; align-items:center; }
.brand { color:var(--ink); text-decoration:none; font-weight:760; letter-spacing:-.8px; font-size:1.25rem; display:flex; align-items:center; gap:7px; }
.brand-mark { display:grid; place-items:center; height:25px; width:25px; background:var(--rose); border-radius:50%; color:white; font-family:Georgia,serif; font-size:1.2rem; font-weight:400; }
.text-button { border:0; color:var(--rose); background:transparent; font-weight:700; padding:8px; }
.intro { padding:50px 3px 30px; }.eyebrow { margin:0 0 9px; color:var(--rose); font-size:.68rem; font-weight:800; letter-spacing:1.6px; }
h1 { margin:0; letter-spacing:-1.8px; font-size:clamp(2.1rem,8vw,3.5rem); line-height:1; }.lead { max-width:380px; color:var(--muted); margin:16px 0 0; line-height:1.55; }
.calendar-card { background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:15px 14px 13px; box-shadow:0 12px 32px rgba(111,49,65,.06); }
.calendar-header { display:grid; grid-template-columns:42px 1fr 42px; align-items:center; text-align:center; }.calendar-header h2 { margin:0; font-size:1.02rem; letter-spacing:-.2px; }.icon-button { border:0; width:36px; height:36px; border-radius:50%; background:#fff7f8; color:var(--rose); font-size:1.2rem; }.icon-button:last-child { justify-self:end; }
.weekdays,.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); }.weekdays { padding:17px 0 7px; color:#aa9da0; text-align:center; font-size:.65rem; font-weight:750; }.calendar-grid { gap:5px 2px; }.day { border:0; position:relative; display:grid; place-items:center; aspect-ratio:1; max-height:55px; margin:auto; width:min(100%,47px); border-radius:50%; background:transparent; color:var(--ink); font-size:.87rem; transition:transform .15s, background .15s; }.day:not(:disabled):hover { background:#fff1f4; transform:scale(1.05); }.day:disabled { pointer-events:none; }.day.outside { color:#c9bfc1; }.day.period { color:white; background:var(--rose); font-weight:750; }.day.forecast { color:#a73e5b; background:var(--rose-soft); font-weight:700; }.day.today { box-shadow:inset 0 0 0 1.5px var(--rose); }.day.period.today { box-shadow:inset 0 0 0 2px white, 0 0 0 1.5px var(--rose); }
.legend { display:flex; gap:18px; padding:15px 5px 1px; color:var(--muted); font-size:.7rem; }.legend span { display:flex; align-items:center; gap:5px; }.dot { width:9px; height:9px; border-radius:50%; display:inline-block; }.period-dot { background:var(--rose); }.forecast-dot { background:var(--rose-soft); border:1px solid #efb2c2; }.today-dot { border:1.5px solid var(--rose); }
.summary { display:grid; grid-template-columns:repeat(3,1fr); margin:17px 0; background:var(--paper); border:1px solid var(--line); border-radius:18px; overflow:hidden; }.stat { padding:16px 12px; min-width:0; }.stat + .stat { border-left:1px solid var(--line); }.stat p { font-size:.69rem; color:var(--muted); margin:0 0 8px; }.stat strong { display:block; font-size:1.05rem; letter-spacing:-.4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.stat small { display:block; margin-top:3px; color:#a99da0; font-size:.62rem; line-height:1.25; }
.how-it-works { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:6px 3px; }.how-it-works div { display:flex; align-items:center; gap:10px; }.step { display:grid; place-items:center; flex:0 0 auto; width:25px; height:25px; background:#f6dce3; border-radius:50%; color:var(--rose); font-size:.73rem; font-weight:800; }.how-it-works p { margin:0; font-size:.73rem; color:var(--muted); line-height:1.45; }.how-it-works strong { color:var(--ink); }.privacy-note { margin:27px auto 0; max-width:470px; color:#a99da0; font-size:.7rem; text-align:center; line-height:1.5; }
@media (max-width:480px) { .app-shell { padding:20px 12px 30px; }.intro { padding:38px 5px 25px; }.calendar-card { border-radius:18px; padding:12px 9px; }.weekdays { font-size:.58rem; }.day { font-size:.8rem; }.summary { margin:13px 0; }.stat { padding:13px 8px; }.stat strong { font-size:.92rem; }.stat small { font-size:.57rem; }.how-it-works { gap:4px; }.how-it-works p { font-size:.67rem; } }