@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');

:root {
  --canvas: #f5f2ed;
  --card: #fffdf9;
  --ink: #202820;
  --muted: #7a8279;
  --soft-muted: #a5aaa2;
  --line: #e8e4dc;
  --purple: #7564db;
  --purple-dark: #5b4cb5;
  --purple-soft: #eeeafd;
  --orange: #e98b50;
  --orange-soft: #fff0e4;
  --green: #5d9b71;
  --green-soft: #eaf5eb;
  --yellow: #f3c962;
  --shadow: 0 18px 50px rgba(66, 58, 42, .07);
  font-family: 'Noto Sans SC', 'DM Sans', sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 90% 0%, rgba(229, 218, 255, .45), transparent 26rem),
    var(--canvas);
}

button, input, select { font: inherit; }
button { cursor: pointer; }

.app-shell { min-height: 100vh; }

.topbar {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 34px;
}

.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.brand strong { display: block; font-size: 16px; letter-spacing: .03em; }
.brand small { display: block; color: #9a9c95; font: 600 8px/1.4 'DM Sans', sans-serif; letter-spacing: .18em; }
.brand-mark { position: relative; display: inline-flex; align-items: flex-end; gap: 3px; width: 26px; height: 26px; padding: 3px; border-radius: 9px; background: var(--purple); transform: rotate(-8deg); }
.brand-mark span { width: 5px; border-radius: 4px; background: #fff; display: block; }
.brand-mark span:nth-child(1) { height: 8px; opacity: .75; }
.brand-mark span:nth-child(2) { height: 14px; }
.brand-mark span:nth-child(3) { height: 19px; opacity: .85; }
.topbar-actions { display: flex; align-items: center; gap: 13px; }
.demo-badge { padding: 6px 10px; border: 1px solid #ded9f8; border-radius: 999px; color: var(--purple); background: rgba(255,255,255,.52); font-size: 11px; font-weight: 600; }
.avatar-button { width: 36px; height: 36px; border: 0; border-radius: 50%; color: #fff; background: var(--ink); font-size: 12px; font-weight: 700; }

.page-content { max-width: 1172px; margin: 0 auto; padding: 44px 28px 32px; }
.intro-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 35px; }
.eyebrow, .section-kicker { margin: 0 0 9px; color: var(--orange); font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 520px; margin-bottom: 11px; font-size: clamp(31px, 4vw, 47px); line-height: 1.14; letter-spacing: -.055em; font-weight: 800; }
h1 em { color: var(--purple); font-style: normal; }
.intro-copy { margin-bottom: 0; color: var(--muted); font-size: 14px; }
.date-switcher { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; position: relative; }
.icon-button, .date-button { height: 40px; border: 1px solid var(--line); background: rgba(255,253,249,.66); color: var(--ink); }
.icon-button { width: 40px; border-radius: 12px; font-size: 20px; line-height: 1; }
.icon-button:hover, .date-button:hover { border-color: #c9c2ed; background: #fff; }
.date-button { display: flex; align-items: center; gap: 15px; padding: 0 14px; border-radius: 12px; font-size: 13px; font-weight: 700; }
.calendar-icon { width: 15px; height: 15px; flex: 0 0 15px; color: var(--purple); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.calendar-popover { position: absolute; z-index: 20; top: 48px; right: 47px; width: 252px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,253,249,.98); box-shadow: 0 18px 45px rgba(44, 39, 63, .16); }
.calendar-popover[hidden] { display: none; }
.calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; color: var(--ink); }
.calendar-header strong { font-size: 14px; letter-spacing: .02em; }
.calendar-nav { width: 28px; height: 28px; border: 0; border-radius: 8px; color: var(--purple); background: transparent; font-size: 23px; line-height: 1; cursor: pointer; }
.calendar-nav:hover { background: var(--purple-soft); }
.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px 2px; text-align: center; }
.calendar-weekdays { margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.calendar-day { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 9px; color: var(--ink); background: transparent; font: inherit; font-size: 12px; cursor: pointer; }
.calendar-day:not(.is-empty):hover { color: var(--purple); background: var(--purple-soft); }
.calendar-day.is-empty { cursor: default; }
.calendar-day.is-today { box-shadow: inset 0 0 0 1px #d7d0f8; }
.calendar-day.is-selected { color: #fff; background: var(--purple); box-shadow: none; }
.calendar-footer { display: flex; justify-content: flex-end; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.calendar-footer button { padding: 4px 7px; border: 0; color: var(--purple); background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }
.calendar-footer button:hover { color: var(--ink); }

.photo-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, .72fr); min-height: 245px; margin-bottom: 17px; overflow: hidden; background: #f2f0ff; border-color: #e3dfff; }
.photo-feature-copy { display: flex; flex-direction: column; justify-content: center; padding: 31px 34px; }
.photo-feature-copy .section-kicker { margin-bottom: 10px; color: var(--purple); }
.photo-feature-copy h2 { max-width: 440px; margin-bottom: 11px; font-size: clamp(23px, 3vw, 32px); line-height: 1.22; letter-spacing: -.05em; }
.photo-feature-copy p:not(.section-kicker) { max-width: 390px; margin: 0; color: #6f6c80; font-size: 13px; line-height: 1.8; }
.photo-feature-image { min-height: 245px; margin: 0; }
.photo-feature-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.48fr) minmax(300px, .82fr); gap: 17px; margin-bottom: 17px; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.48fr) minmax(300px, .82fr); gap: 17px; }
.side-column { display: grid; gap: 17px; align-content: start; }
.card { position: relative; overflow: hidden; border: 1px solid rgba(231, 226, 216, .95); border-radius: 22px; background: rgba(255,253,249,.93); box-shadow: var(--shadow); }
.progress-card, .reminder-card { min-height: 264px; padding: 29px 31px; }
.card-heading, .section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; }
.card h2, .section-heading h2 { margin-bottom: 0; font-size: 20px; line-height: 1.3; letter-spacing: -.035em; }
.status-pill { padding: 7px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.status-pill.warning { color: #a96733; background: var(--orange-soft); }
.status-pill.success { color: #4d825e; background: var(--green-soft); }
.status-pill.neutral { color: #777b78; background: #f0f0ec; }
.progress-layout { display: flex; align-items: center; gap: 27px; margin: 21px 0 20px; }
.progress-ring { flex: 0 0 126px; width: 126px; height: 126px; padding: 10px; border-radius: 50%; background: conic-gradient(var(--purple) 0deg, var(--purple) 270deg, #eeece9 270deg, #eeece9 360deg); transform: rotate(-30deg); }
.progress-ring-inner { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 100%; border-radius: 50%; background: var(--card); transform: rotate(30deg); }
.progress-ring-inner strong { font: 700 31px/1 'DM Sans', sans-serif; letter-spacing: -.07em; }
.progress-ring-inner span { margin-top: 4px; color: var(--soft-muted); font-size: 11px; }
.progress-copy { min-width: 0; }
.progress-main { margin-bottom: 8px; color: var(--muted); font-size: 13px; }
.progress-main strong { color: var(--ink); font: 700 27px/1 'DM Sans', sans-serif; letter-spacing: -.06em; }
.progress-sub { margin-bottom: 15px; color: var(--muted); font-size: 12px; }
.progress-sub strong { color: var(--ink); }
.remaining-note { display: inline-block; padding: 7px 10px; border-radius: 8px; color: #a96733; background: var(--orange-soft); font-size: 11px; font-weight: 600; }
.progress-track { height: 7px; overflow: hidden; border-radius: 99px; background: #efede9; }
.progress-track span { display: block; width: 75%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8576e8, var(--purple)); transition: width .35s ease; }
.progress-footer { display: flex; justify-content: space-between; margin-top: 12px; color: var(--soft-muted); font-size: 11px; }

.reminder-card { display: flex; align-items: center; background: #ece9ff; border-color: #e2ddff; }
.reminder-content { position: relative; z-index: 1; max-width: 255px; }
.reminder-card .section-kicker { color: var(--purple); }
.reminder-card h2 { max-width: 225px; margin-bottom: 11px; font-size: 24px; }
.reminder-card p:not(.section-kicker) { margin-bottom: 19px; color: #686675; font-size: 12px; line-height: 1.8; }
.text-button { padding: 0; border: 0; color: var(--purple-dark); background: transparent; font-size: 12px; font-weight: 800; }
.text-button span { display: inline-block; margin-left: 5px; font-size: 16px; transition: transform .2s; }
.text-button:hover span { transform: translate(3px, -2px); }
.sun-orbit { position: absolute; right: 23px; top: 27px; width: 135px; height: 135px; border: 1px solid rgba(117,100,219,.2); border-radius: 50%; transform: rotate(-27deg); }
.sun-orbit::before, .sun-orbit::after { position: absolute; content: ''; border: 1px solid rgba(117,100,219,.18); border-radius: 50%; }
.sun-orbit::before { inset: 13px -15px; transform: rotate(52deg); }
.sun-orbit::after { inset: -14px 16px; transform: rotate(52deg); }
.sun { position: absolute; left: 49px; top: 49px; width: 36px; height: 36px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 10px rgba(243,201,98,.17), 0 6px 22px rgba(243,173,56,.28); }
.orbit-dot { position: absolute; right: -3px; top: 24px; width: 8px; height: 8px; border-radius: 50%; background: var(--purple); }
.leaf-shape { position: absolute; bottom: -47px; width: 102px; height: 105px; border-radius: 100% 0 100% 0; background: rgba(127,115,220,.14); transform: rotate(21deg); }
.leaf-one { right: 63px; }
.leaf-two { right: 4px; bottom: -70px; width: 119px; height: 119px; opacity: .7; transform: rotate(46deg); }

.activities-card, .week-card, .insight-card { padding: 27px 29px; }
.activities-card { min-height: 410px; }
.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 17px; border-radius: 11px; font-size: 12px; font-weight: 800; transition: transform .2s, box-shadow .2s, background .2s; }
.primary-button { border: 1px solid var(--purple); color: #fff; background: var(--purple); box-shadow: 0 7px 15px rgba(117,100,219,.18); }
.primary-button:hover { background: var(--purple-dark); transform: translateY(-1px); box-shadow: 0 9px 18px rgba(117,100,219,.23); }
.primary-button span { margin-right: 5px; font-size: 16px; font-weight: 400; }
.primary-button.compact { min-height: 37px; padding: 0 13px; }
.secondary-button { border: 1px solid var(--line); color: var(--ink); background: #fff; }
.secondary-button:hover { border-color: #c7c1e8; background: var(--purple-soft); }
.activity-list { margin-top: 24px; }
.activity-row { display: grid; grid-template-columns: 39px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 70px; border-top: 1px solid #f0ede8; }
.activity-row:first-child { border-top: 0; }
.activity-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; font-size: 17px; }
.activity-icon.walk { color: #be7646; background: #fff0e2; }
.activity-icon.play { color: #5f91c4; background: #e9f2fc; }
.activity-icon.bike { color: #5d9b71; background: #e8f5eb; }
.activity-icon.ball { color: #ac70b0; background: #f7eafb; }
.activity-details { min-width: 0; }
.activity-name { margin-bottom: 4px; overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.activity-meta { margin: 0; overflow: hidden; color: var(--soft-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.activity-duration { color: var(--ink); font: 700 16px/1 'DM Sans', sans-serif; white-space: nowrap; }
.activity-duration small { margin-left: 3px; color: var(--soft-muted); font: 400 10px 'Noto Sans SC', sans-serif; }
.delete-activity { width: 24px; height: 24px; border: 0; border-radius: 7px; color: #b0b1aa; background: transparent; font-size: 18px; line-height: 1; opacity: 0; }
.activity-row:hover .delete-activity, .delete-activity:focus { opacity: 1; }
.delete-activity:hover { color: #c86d55; background: #fff0ed; }
.empty-state { padding: 40px 12px 24px; text-align: center; }
.empty-icon { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 50%; color: var(--purple); background: var(--purple-soft); font-size: 22px; }
.empty-state h3 { margin-bottom: 7px; font-size: 16px; }
.empty-state p { margin-bottom: 17px; color: var(--muted); font-size: 12px; }

.compact-heading { align-items: center; }
.compact-heading h2 { font-size: 17px; }
.trend-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; color: var(--green); background: var(--green-soft); font-size: 17px; }
.week-summary { display: flex; gap: 42px; margin: 26px 0 23px; }
.week-summary div { display: flex; align-items: baseline; gap: 5px; }
.week-summary strong { font: 700 27px/1 'DM Sans', sans-serif; letter-spacing: -.07em; }
.week-summary span { color: var(--soft-muted); font-size: 10px; }
.week-bars { display: flex; align-items: flex-end; justify-content: space-between; height: 112px; gap: 9px; padding: 0 3px 21px; border-bottom: 1px solid var(--line); }
.week-day { position: relative; display: flex; flex: 1; align-items: center; flex-direction: column; justify-content: flex-end; height: 100%; gap: 7px; }
.week-bar-track { display: flex; align-items: flex-end; width: 100%; max-width: 24px; height: 76px; border-radius: 7px 7px 4px 4px; background: #f1efea; }
.week-bar { width: 100%; min-height: 5px; border-radius: 7px 7px 4px 4px; background: #d1cbf5; transition: height .35s; }
.week-day.active .week-bar { background: var(--purple); }
.week-day.today .week-bar-track { outline: 2px solid #e5e0ff; outline-offset: 3px; }
.week-day span { position: absolute; bottom: -20px; color: var(--soft-muted); font-size: 10px; }
.week-day.today span { color: var(--purple); font-weight: 800; }
.week-legend { display: flex; align-items: center; gap: 6px; margin-top: 19px; color: var(--soft-muted); font-size: 10px; }
.week-legend strong { color: var(--ink); }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--purple); }
.insight-card { display: flex; align-items: flex-start; gap: 15px; min-height: 122px; background: #fffbec; border-color: #f7eed2; box-shadow: none; }
.insight-icon { display: grid; flex: 0 0 35px; place-items: center; width: 35px; height: 35px; border-radius: 11px; color: #c38d2b; background: #ffefb8; font-size: 17px; }
.insight-card .section-kicker { color: #c38d2b; margin-bottom: 7px; }
.insight-card h2 { margin-bottom: 7px; font-size: 14px; }
.insight-card p:not(.section-kicker) { margin: 0; color: #8c8270; font-size: 11px; line-height: 1.65; }
.page-footer { display: flex; justify-content: space-between; margin-top: 19px; padding: 0 4px; color: #a0a39d; font-size: 10px; }
.page-footer button { padding: 0; border: 0; color: var(--purple); background: transparent; font-size: 10px; }

.modal-backdrop { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(32, 40, 32, .32); backdrop-filter: blur(5px); }
.modal-backdrop[hidden] { display: none; }
.modal { width: min(100%, 480px); padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 24px 80px rgba(40, 35, 25, .2); }
.small-modal { width: min(100%, 400px); }
.modal-header { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.modal-header h2 { margin: 0; font-size: 23px; letter-spacing: -.04em; }
.close-button { width: 30px; height: 30px; border: 0; border-radius: 9px; color: var(--muted); background: #f1efeb; font-size: 23px; line-height: 1; }
.close-button:hover { color: var(--ink); background: var(--purple-soft); }
form { display: grid; gap: 16px; }
label { display: grid; gap: 7px; color: #6f756c; font-size: 11px; font-weight: 700; }
input, select { width: 100%; height: 43px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; outline: none; color: var(--ink); background: #fff; font-size: 13px; }
input:focus, select:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(117,100,219,.11); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quick-minutes { display: flex; flex-wrap: wrap; gap: 7px; margin-top: -3px; }
.quick-minutes button { padding: 7px 10px; border: 1px solid #e2def6; border-radius: 8px; color: var(--purple-dark); background: var(--purple-soft); font-size: 10px; }
.quick-minutes button:hover { border-color: var(--purple); }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 8px; }
.toast { position: fixed; z-index: 20; left: 50%; bottom: 25px; padding: 10px 15px; border-radius: 10px; color: #fff; background: var(--ink); box-shadow: 0 10px 25px rgba(32,40,32,.18); font-size: 12px; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 760px) {
  .topbar { height: 66px; padding: 0 18px; }
  .page-content { padding: 31px 16px 24px; }
  .intro-row { display: block; margin-bottom: 24px; }
  h1 { font-size: 35px; }
  .intro-copy { font-size: 13px; line-height: 1.7; }
  .date-switcher { margin-top: 21px; justify-content: flex-start; }
  .photo-feature { grid-template-columns: 1fr; }
  .photo-feature-copy { min-height: 170px; padding: 25px 21px; }
  .photo-feature-image { min-height: 240px; }
  .dashboard-grid, .content-grid { grid-template-columns: 1fr; }
  .progress-card, .reminder-card { min-height: 0; padding: 24px 21px; }
  .progress-layout { gap: 20px; }
  .progress-ring { flex-basis: 112px; width: 112px; height: 112px; }
  .reminder-card { min-height: 233px; }
  .activities-card, .week-card, .insight-card { padding: 23px 20px; }
  .side-column { grid-template-columns: 1fr; }
  .delete-activity { opacity: 1; }
}

@media (max-width: 410px) {
  .demo-badge { display: none; }
  .card-heading, .section-heading { align-items: flex-start; }
  .progress-layout { gap: 13px; }
  .progress-ring { flex-basis: 101px; width: 101px; height: 101px; padding: 8px; }
  .progress-ring-inner strong { font-size: 27px; }
  .progress-main strong { font-size: 23px; }
  .remaining-note { font-size: 10px; }
  .activity-row { grid-template-columns: 35px minmax(0, 1fr) auto 22px; gap: 8px; }
  .activity-icon { width: 33px; height: 33px; }
  .activity-duration { font-size: 14px; }
  .primary-button.compact { padding: 0 9px; }
}