:root{
  --bg:#fff1f7;
  --card:#ffffff;
  --ink:#3b2f3f;
  --muted:#7a6b7f;
  --stroke:rgba(59,47,63,.10);
  --shadow: 0 10px 30px rgba(59,47,63,.10);
  --radius: 22px;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--ink);
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(255,209,232,.9), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(196,181,253,.55), transparent 55%),
    var(--bg);
}
.top{
  position:sticky; top:0;
  backdrop-filter: blur(10px);
  background: rgba(255,241,247,.7);
  border-bottom:1px solid var(--stroke);
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; z-index:10;
}
.brand{ display:flex; align-items:center; gap:12px; }
.logo svg{ width:34px; height:34px; }
.title{ font-weight:800; letter-spacing:.2px; }
.subtitle{ font-size:12px; color:var(--muted); margin-top:2px; }
.wrap{ max-width:980px; margin:18px auto; padding:0 14px 40px; display:flex; flex-direction:column; gap:14px;  position:relative; z-index:1; }
.card{ background:var(--card); border:1px solid var(--stroke); border-radius: var(--radius); box-shadow: var(--shadow); padding:18px; }
.hero{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
@media (max-width:860px){ .hero{ grid-template-columns:1fr; } }
.kicker{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.14em; }
.h2{ font-size:20px; font-weight:850; margin-top:6px; }
.status-state{ font-size:42px; font-weight:900; margin-top:10px; line-height:1.05; }
.status-msg{ margin-top:10px; font-size:14px; }
.status-since{ margin-top:8px; font-size:12px; color:var(--muted); }
.today-title{ font-size:14px; font-weight:800; }
.today-date{ font-size:12px; color:var(--muted); margin-top:4px; }
.graph{
  margin-top:10px;
  background: linear-gradient(180deg, rgba(255,209,232,.45), rgba(255,255,255,0));
  border:1px dashed rgba(255,119,183,.35);
  border-radius: 18px;
  padding:12px;
  overflow:hidden;
}
.legend{ display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; color:var(--muted); font-size:12px; align-items:center; }
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:6px; border:1px solid rgba(0,0,0,.06); }
.dot.green{ background:#7bdcb5; } .dot.yellow{ background:#fde68a; } .dot.orange{ background:#fdba74; }
.dot.red{ background:#fca5a5; } .dot.purple{ background:#c4b5fd; }
.pill{
  text-decoration:none; color:var(--ink);
  background: rgba(255,209,232,.8);
  border:1px solid var(--stroke);
  padding:10px 12px; border-radius: 999px;
  font-weight:700; font-size:13px;
}
.pill:hover{ background: rgba(255,209,232,1); }
.row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.month-nav{ display:flex; align-items:center; gap:10px; }
.month-label{ font-weight:850; }
.btn{
  width:38px; height:38px; border-radius: 12px;
  border:1px solid var(--stroke);
  background: rgba(255,209,232,.7);
  font-size:18px; cursor:pointer;
}
.btn:hover{ background: rgba(255,209,232,1); }
.calendar{ margin-top:12px; display:grid; grid-template-columns: repeat(7, 1fr); gap:8px; }
.cal-head{ font-size:11px; color:var(--muted); text-align:center; padding:6px 0; }
.day{
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.9);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  cursor:default; opacity:1;
}
.day .n{ font-weight:900; }
.day .spark{ font-size:12px; color:var(--muted); }
.day.has{
  cursor:pointer;
  border-color: rgba(255,119,183,.35);
  background: rgba(255,209,232,.35);
}
.day.has:hover{ background: rgba(255,209,232,.60); }
.day.out{ opacity:.35; }
.mini-dot{ width:9px; height:9px; border-radius:50%; border:1px solid rgba(0,0,0,.06); }
.divider{ height:1px; background: var(--stroke); margin:14px 0; }
.moments{ display:flex; flex-direction:column; gap:10px; font-size:14px; }
.moment{ padding:12px; border:1px solid var(--stroke); border-radius: 16px; background: rgba(255,241,247,.6); }
.footer{ text-align:center; padding:18px; color:var(--muted); }
.tiny{ font-size:12px; color:var(--muted); }
svg.timeline{ width:100%; height:110px; display:block; }
.timeline text{ fill: rgba(59,47,63,.65); font-size:11px; font-weight:700; }

/* --- Mobile calendar overflow fix (Android/Chrome) --- */
.calendar{
  width: 100%;
  max-width: 100%;
}
.calendar{
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.calendar .day, .day{
  min-width: 0;
}
/* Keep the calendar inside cards on small screens */
@media (max-width: 480px){
  .wrap{ padding-left: 10px; padding-right: 10px; }
  .calendar{ gap: 6px; }
}

.site-header {
  width: 100%;
  text-align: center;
  background: #ffd6ea;
  padding: 0;
  margin: 0;
}

body {
  background: linear-gradient(180deg, #ffeaf4 0%, #fff 300px);
}

.card, .panel, .status-box {
  border-radius: 20px;
}

.site-header-image {
  width: 100%;
  max-width: 1100px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 0 0 24px 24px;
}

/* On mobile, reduce margins */
@media (max-width: 768px) {
  .site-header-image {
    border-radius: 0;
  }
}


/* ================================
   Princess + Baby Pink Enhancements
   (pure CSS overrides; no logic changes)
=================================== */

:root{
  --pink1:#ffd6ea;
  --pink2:#ffeaf4;
  --lav1:#e9d7ff;
  --gold:#ffcf6a;
  --inkSoft:#3a2a3f;
}

body{
  color: var(--inkSoft);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(255,214,234,.95), transparent 62%),
    radial-gradient(1100px 600px at 90% -10%, rgba(233,215,255,.75), transparent 58%),
    linear-gradient(180deg, #fff1fa 0%, #ffffff 1400px);
  background-color:#fff7fd;
}

/* Subtle glitter overlay */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  opacity:.22;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 22%, rgba(255,255,255,.8) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 36%, rgba(255,255,255,.85) 0 1px, transparent 2px),
    radial-gradient(circle at 66% 52%, rgba(255,255,255,.8) 0 1px, transparent 2px),
    radial-gradient(circle at 22% 62%, rgba(255,255,255,.75) 0 1px, transparent 2px),
    radial-gradient(circle at 86% 72%, rgba(255,255,255,.75) 0 1px, transparent 2px);
  animation: twinkle 6s ease-in-out infinite alternate;
  mix-blend-mode: soft-light;
}
@keyframes twinkle{
  from{ opacity:.14; filter: blur(.2px); }
  to{ opacity:.26; filter: blur(.6px); }
}


/* Falling sparkles (non-obstructive) */
body::after{
  content:"";
  position: fixed;
  inset: -240px 0 0 0;
  pointer-events:none;
  z-index: 0;
  opacity:.16;
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.95) 0 1px, transparent 2px),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.85) 0 1px, transparent 2px),
    radial-gradient(circle at 35% 15%, rgba(255,255,255,.90) 0 1px, transparent 2px),
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.80) 0 1px, transparent 2px),
    radial-gradient(circle at 65% 20%, rgba(255,255,255,.85) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 35%, rgba(255,255,255,.90) 0 1px, transparent 2px),
    radial-gradient(circle at 90% 12%, rgba(255,255,255,.90) 0 1px, transparent 2px);
  background-size: 320px 320px;
  mix-blend-mode: soft-light;
  animation: sparkleFall 12s linear infinite;
  filter: blur(.15px);
}
@keyframes sparkleFall{
  from{ transform: translateY(0); }
  to{ transform: translateY(260px); }
}

/* Header feels like a banner */
.site-header{
  background: linear-gradient(180deg, var(--pink1), var(--pink2));
  border-bottom: 1px solid rgba(255,119,183,.22);
}
.site-header-image{
  max-width: 1200px;
  box-shadow: 0 16px 40px rgba(59,47,63,.12);
}

/* Softer, more “nursery” typography */
.title,.h2,.status-state,.month-label{
  font-family: ui-rounded, "Trebuchet MS", "Comic Sans MS", ui-sans-serif, system-ui;
}
.kicker{
  color: rgba(58,42,63,.62);
  letter-spacing: .18em;
}

/* Crown icon before section labels */
.hero-left .kicker::before,
#calendar .kicker::before{
  content:"";
  display:inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -3px;
  background: url("/assets/icons/crown.svg") no-repeat center / contain;
  filter: drop-shadow(0 2px 6px rgba(255,119,183,.25));
  opacity: .9;
}

/* Cards: more princessy borders & glow */
.card{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,119,183,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 18px 50px rgba(59,47,63,.10),
    0 1px 0 rgba(255,255,255,.9) inset;
}

.hero{
  position: relative;
  overflow: hidden;
}
.hero::after{
  content:"";
  position:absolute;
  inset:-80px -60px auto auto;
  width:220px;
  height:220px;
  background: radial-gradient(circle, rgba(255,214,234,.75), transparent 60%);
  transform: rotate(18deg);
  pointer-events:none;
}

/* Make the big status feel more “storybook” */
.status-state{
  text-shadow: 0 6px 18px rgba(59,47,63,.10);
}
.status-msg{
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,214,234,.30);
  border: 1px dashed rgba(255,119,183,.25);
}

/* Graph container */
.graph{
  background: linear-gradient(180deg, rgba(255,214,234,.40), rgba(255,255,255,0));
  border: 1px dashed rgba(255,119,183,.32);
  box-shadow: 0 10px 22px rgba(59,47,63,.08);
}

/* Buttons look like candy */
.btn{
  background: linear-gradient(180deg, rgba(255,214,234,.95), rgba(255,234,244,.65));
  border: 1px solid rgba(255,119,183,.28);
  box-shadow: 0 10px 18px rgba(59,47,63,.08);
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }

/* Calendar: more “cute” */
.calendar{ gap: 10px; }
.day{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,119,183,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 18px rgba(59,47,63,.06);
}
.day.has{
  background: rgba(255,214,234,.45);
  border-color: rgba(255,119,183,.32);
}
.day.has:hover{
  background: rgba(255,214,234,.70);
  transform: translateY(-1px);
}
.day .n{ font-size: 18px; }
.day .spark{ opacity:.85; }

/* Legend dots a touch softer */
.dot{ box-shadow: 0 4px 10px rgba(59,47,63,.08); }

/* Mobile spacing: keep it airy */
@media (max-width: 480px){
  .wrap{ padding-left: 12px; padding-right: 12px; }
  .card{ padding: 16px; }
  .status-state{ font-size: 38px; }
  .calendar{ gap: 8px; }
}


#calendar.card{ background: rgba(255,255,255,.70); }




/* ================================
   Background: smoother + pinker
=================================== */
body{
  background: linear-gradient(180deg,
    #ffe0f0 0%,
    #fff1f8 35%,
    #ffe9f5 70%,
    #ffe0f0 100%);
  background-color: #fff1f8;
}

/* ================================
   Touch sparkle trail canvas
=================================== */
#sparkleTrail{position:fixed;inset:0;width:100%;height:100%;z-index:60;pointer-events:none;}

#sparkleCapture{pointer-events:auto;touch-action:none;}

/* Day view navigation controls */
.day-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.btn.btn-small{
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1;
}
.day-picker{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,119,183,.28);
  background: rgba(255,255,255,.75);
  color: rgba(58,42,63,.90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 18px rgba(59,47,63,.08);
}
.day-picker:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,119,183,.20), 0 10px 18px rgba(59,47,63,.08);
}
@media (max-width: 480px){
  .day-controls{ justify-content:flex-start; }
  .day-picker{ width: 160px; }
}


/* ================================
   Navigation polish
=================================== */
a.btn, a.btn:visited{
  color: rgba(58,42,63,.92);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
a.btn:hover{ text-decoration: none; }

.site-header-link{
  display:block;
  width:100%;
  max-width: 1200px;
  margin: 0 auto;
}
.site-header-link:focus{
  outline: none;
}
.site-header-link:focus-visible{
  box-shadow: 0 0 0 5px rgba(255,119,183,.25);
  border-radius: 28px;
}

.day-title{
  cursor: pointer;
  user-select: none;
}
.day-title:hover{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Currently wearing card */
.diaper-card{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.diaper-name{
  font-size:24px;
  font-weight:850;
  margin-top:6px;
}
.diaper-notes{
  font-size:13px;
  color: var(--muted);
}
.diaper-updated{
  font-size:11px;
  color: var(--muted);
}
.diaper-form{
  margin-top:8px;
  padding:12px;
  border-radius:16px;
  border:1px dashed rgba(255,119,183,.25);
  background: rgba(255,214,234,.22);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.field span{
  display:block;
  font-size:12px;
  color: var(--muted);
  margin-bottom:4px;
}
.field input,
.field textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,119,183,.28);
  background: rgba(255,255,255,.82);
  color: rgba(58,42,63,.95);
  font-family: inherit;
  box-shadow: 0 8px 16px rgba(59,47,63,.06);
}
.field textarea{ resize: vertical; min-height:70px; }
.field.checkbox{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color: var(--muted);
}
.field.checkbox input{ width:auto; box-shadow:none; }
.form-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.btn-ghost{
  background: rgba(255,255,255,.6);
}
.form-msg{
  font-size:12px;
  color: var(--muted);
}