@import "./tokens.css";

.splash,
.locked-state {
  min-height: 70dvh;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  gap: 12px;
  padding: 40px 24px;
}
.splash-mark {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(141,225,208,.28), rgba(188,165,255,.25));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  font-size: 34px;
  font-weight: 850;
}
.splash h1,
.locked-state h1 {
  margin: 0;
  font-size: 30px;
}
.splash p,
.locked-state p {
  max-width: 320px;
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.page-header {
  display: flex;
  align-items: center;
  min-height: 50px;
  gap: 10px;
  margin-bottom: 8px;
}
.page-header-main {
  flex: 1;
  min-width: 0;
}
.page-title {
  margin: 0;
  font-size: clamp(28px, 7vw, 36px);
  line-height: 1.05;
  font-weight: 820;
  letter-spacing: -.035em;
}
.page-subtitle {
  color: var(--muted);
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.35;
}
.brand-line {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 0;
}
.brand-line h1 {
  font-size: 30px;
  line-height: 1;
  margin: 0;
  font-weight: 850;
  letter-spacing: -.04em;
}
.brand-heart {
  color: var(--peach);
  font-size: 24px;
}
.header-actions {
  display: flex;
  gap: 8px;
}
.icon-button,
.back-button {
  appearance: none;
  border: 1px solid var(--stroke);
  background:
    linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.icon-button .icon {
  width: 20px;
  height: 20px;
  color: #d9e1e1;
}
.back-button {
  border: 0;
  background: transparent;
  width: 38px;
}
.back-button .icon {
  width: 26px;
  height: 26px;
}
.card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.09);
  background:
    radial-gradient(circle at 18% 0%, rgba(141,225,208,.055), transparent 38%),
    linear-gradient(155deg, rgba(255,255,255,.065), rgba(255,255,255,.018)),
    rgba(13, 25, 29, .93);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 16px 38px rgba(0,0,0,.17);
}
.card + .card {
  margin-top: 12px;
}
.glass {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.hero-card {
  min-height: 126px;
  display: grid;
  grid-template-columns: 48% 1fr;
  align-items: stretch;
  margin-bottom: 10px;
  border-color: rgba(141,225,208,.13);
  background:
    linear-gradient(90deg, rgba(13,43,43,.38), rgba(23,26,42,.58)),
    var(--hero-image, none) center/cover no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 18px 42px rgba(0,0,0,.20),
    0 0 36px rgba(77,167,151,.06);
}
.hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6,15,17,.08) 0 38%, rgba(7,12,15,.38) 62%, rgba(12,15,25,.14));
  pointer-events: none;
}
.hero-art {
  min-height: 126px;
  background: var(--hero-image, url("./assets/illustrations/baby-hero.svg")) center/cover no-repeat;
  position: relative;
  z-index: 1;
}
.hero-copy {
  z-index: 2;
  position: relative;
  align-self: center;
  padding: 14px 14px 14px 6px;
}
.hero-name {
  font-size: 24px;
  font-weight: 820;
  letter-spacing: -.03em;
}
.hero-age {
  font-size: 18px;
  font-weight: 760;
  margin-top: 4px;
}
.hero-caption {
  color: #b8c3c4;
  margin-top: 5px;
  font-size: 13px;
}
.hero-mini {
  min-height: 118px;
  grid-template-columns: 42% 1fr;
}
.hero-mini .hero-art {
  min-height: 118px;
}
.hero-mini .hero-name {
  font-size: 24px;
}
.section {
  margin-top: 14px;
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.section-title {
  margin: 0;
  font-size: 22px;
  font-weight: 790;
  letter-spacing: -.025em;
}
.section-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 5px 0;
  font-size: 13px;
}
.chevron {
  opacity: .8;
  font-size: 24px;
  line-height: 1;
}
.icon {
  --icon: none;
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: var(--icon) center/contain no-repeat;
  mask: var(--icon) center/contain no-repeat;
}
.icon-sm { width: 18px; height: 18px; }
.icon-lg { width: 30px; height: 30px; }
.icon-xl { width: 40px; height: 40px; }

.accent-peach { --accent: var(--peach); --accent-dark: rgba(255,170,161,.18); color: var(--peach); }
.accent-lavender { --accent: var(--lavender); --accent-dark: rgba(188,165,255,.18); color: var(--lavender); }
.accent-mint { --accent: var(--mint); --accent-dark: rgba(141,225,208,.16); color: var(--mint); }
.accent-gold { --accent: var(--gold); --accent-dark: rgba(255,212,121,.16); color: var(--gold); }
.accent-blue { --accent: var(--blue); --accent-dark: rgba(150,201,255,.16); color: var(--blue); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.stat-ring-card {
  min-width: 0;
  padding: 8px 4px 10px;
  text-align: center;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.045);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.014));
}
.ring {
  --progress: 72;
  --ring-color: var(--mint);
  position: relative;
  width: 58px;
  aspect-ratio: 1;
  margin: 0 auto 7px;
  border-radius: 50%;
  background: conic-gradient(var(--ring-color) calc(var(--progress) * 1%), rgba(255,255,255,.10) 0);
  display: grid;
  place-items: center;
}
.ring::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: #152025;
}
.ring > * {
  position: relative;
  z-index: 1;
}
.stat-value {
  font-size: 17px;
  font-weight: 820;
  line-height: 1.1;
  color: var(--text);
  white-space: nowrap;
}
.stat-label {
  color: #c5cccd;
  font-size: 11px;
  line-height: 1.25;
  margin-top: 4px;
}
.stat-sub {
  color: var(--muted-2);
  font-size: 10px;
  margin-top: 3px;
}
.today-card {
  padding: 12px;
}
.today-title-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.today-title {
  font-size: 24px;
  font-weight: 820;
}
.date-muted {
  color: var(--muted);
  font-size: 13px;
}
.pill-button,
.segmented button,
.filter-chip,
.badge {
  border-radius: 999px;
}
.pill-button {
  appearance: none;
  border: 1px solid var(--stroke-strong);
  background: rgba(255,255,255,.055);
  color: var(--text);
  min-height: 40px;
  padding: 0 14px;
}
.insight-card {
  min-height: 104px;
  padding: 18px 52px 18px 18px;
  background:
    linear-gradient(90deg, rgba(100,77,34,.34), rgba(24,50,52,.56)),
    url("./assets/illustrations/health-landscape.svg") center/cover no-repeat;
}
.today-insight {
  background:
    linear-gradient(90deg, rgba(8,24,28,.90) 0%, rgba(18,38,43,.68) 48%, rgba(38,34,61,.22) 100%),
    url("./assets/illustrations/moon-clouds.svg") center/cover no-repeat;
}
.today-insight p {
  max-width: 64%;
}
.insight-card h3 {
  margin: 0 0 5px;
  font-size: 20px;
}
.insight-card p {
  margin: 0;
  max-width: 78%;
  color: #ccd2d2;
  font-size: 13px;
  line-height: 1.38;
}
.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.quick-action {
  appearance: none;
  border: 1px solid var(--stroke);
  border-radius: 21px;
  padding: 12px 5px 11px;
  min-height: 84px;
  background:
    linear-gradient(145deg, var(--accent-dark, rgba(255,255,255,.05)), rgba(255,255,255,.018));
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
}
.quick-icon,
.list-icon,
.tile-icon {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--accent, var(--mint)) 26%, transparent), transparent 62%),
    color-mix(in srgb, var(--accent, var(--mint)) 13%, rgba(255,255,255,.04));
  color: var(--accent, var(--mint));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, var(--mint)) 28%, transparent);
}
.quick-label {
  color: var(--text);
  font-size: 11px;
  font-weight: 710;
}
.timeline-card {
  padding: 14px;
}
.timeline {
  position: relative;
  display: grid;
  gap: 10px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(var(--lavender), var(--mint), var(--gold));
  opacity: .45;
}
.timeline-item {
  display: grid;
  grid-template-columns: 20px 54px 1fr auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.timeline-dot {
  width: 18px;
  height: 18px;
  border: 3px solid var(--accent, var(--mint));
  background: #102023;
  border-radius: 50%;
  z-index: 1;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, var(--mint)) 11%, transparent);
}
.timeline-time {
  font-size: 13px;
  font-weight: 720;
}
.timeline-body {
  min-width: 0;
}
.timeline-body strong {
  display: block;
  font-size: 14px;
}
.timeline-body small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}
.family-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
}
.family-copy { flex: 1; }
.family-copy strong { display: block; }
.family-copy span { color: var(--muted); font-size: 12px; }
.avatars { display: flex; }
.avatar {
  width: 38px;
  height: 38px;
  margin-left: -8px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #182023;
  border: 2px solid #17272a;
}
.avatar:first-child { margin-left: 0; }
.avatar.mom { background: var(--peach); }
.avatar.dad { background: var(--mint); }
.avatar.grandma { background: var(--lavender); }

.tabbar {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, var(--max-app-width));
  min-height: calc(var(--tabbar-height) + var(--safe-bottom));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 6px max(6px, var(--safe-right)) calc(6px + var(--safe-bottom)) max(6px, var(--safe-left));
  border: 0;
  border-top: 1px solid var(--stroke);
  border-radius: 24px 24px 0 0;
  background: rgba(9, 17, 20, .94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 -12px 34px rgba(0,0,0,.26);
}
.tab-item {
  appearance: none;
  border: 0;
  background: transparent;
  color: #9da8aa;
  border-radius: 21px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 50px;
  padding: 4px 1px;
  position: relative;
  transition: transform .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}
.tab-item .icon { width: 24px; height: 24px; }
.tab-item span:last-child {
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}
.tab-item.active {
  color: var(--gold);
  background: radial-gradient(circle at 50% 38%, rgba(255,212,121,.22), rgba(67,117,104,.14) 70%);
}
.tab-item:active,
.quick-action:active,
.action-tile:active,
.pill-button:active,
.icon-button:active {
  transform: scale(.97);
}

.tab-item.active::after {
  content: "";
  position: absolute;
  bottom: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.action-tile {
  appearance: none;
  border: 1px solid var(--stroke);
  min-height: 112px;
  padding: 14px;
  border-radius: 24px;
  background: linear-gradient(145deg, var(--accent-dark, rgba(255,255,255,.05)), rgba(255,255,255,.025));
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.action-tile strong { display: block; color: var(--text); font-size: 15px; }
.action-tile small { display: block; color: var(--muted); line-height: 1.3; margin-top: 4px; font-size: 11px; }
.last-record {
  padding: 15px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  align-items: center;
}
.last-record strong { display: block; }
.last-record span { color: var(--muted); font-size: 12px; }
.template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
}
.template-chip {
  appearance: none;
  border: 1px solid var(--stroke);
  min-height: 66px;
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  padding: 9px;
  text-align: left;
  display: flex;
  gap: 8px;
  align-items: center;
}
.template-chip span:last-child { font-size: 11px; line-height: 1.25; }

.week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.day-cell {
  border-radius: 18px;
  padding: 9px 1px;
  text-align: center;
  color: var(--muted);
}
.day-cell strong {
  display: block;
  font-size: 15px;
  color: var(--text);
  margin-top: 4px;
}
.day-cell.active {
  background: linear-gradient(180deg, rgba(141,225,208,.18), rgba(141,225,208,.06));
  box-shadow: inset 0 0 0 1px rgba(141,225,208,.36);
}
.day-dots {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 5px;
}
.day-dots i {
  width: 4px; height: 4px; border-radius: 50%; background: var(--peach);
}
.day-dots i:nth-child(2) { background: var(--mint); }
.day-dots i:nth-child(3) { background: var(--gold); }
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.filter-chip {
  appearance: none;
  border: 1px solid var(--stroke);
  padding: 9px 12px;
  background: rgba(255,255,255,.035);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
}
.filter-chip.active {
  color: var(--gold);
  border-color: rgba(255,212,121,.42);
  background: rgba(255,212,121,.10);
}
.event-list {
  position: relative;
  display: grid;
  gap: 9px;
}
.event-list::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 26px;
  bottom: 26px;
  width: 2px;
  background: linear-gradient(var(--peach), var(--mint), var(--gold), var(--lavender), var(--blue));
  opacity: .4;
}
.event-row {
  --accent: var(--mint);
  display: grid;
  grid-template-columns: 28px 48px 1fr auto;
  align-items: center;
  gap: 8px;
}
.event-node {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  background: #101b1e;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 11%, transparent);
  z-index: 1;
}
.event-time { font-size: 12px; font-weight: 760; }
.event-card {
  border-radius: 19px;
  padding: 12px;
  min-width: 0;
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 12%, transparent), rgba(255,255,255,.025));
  border: 1px solid var(--stroke);
}
.event-card strong { display:block; font-size: 14px; }
.event-card small { display:block; color:var(--muted); margin-top:3px; font-size:11px; }

.segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 4px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.035);
  border-radius: 999px;
}
.segmented button {
  appearance: none;
  min-height: 38px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
}
.segmented button.active {
  background: rgba(141,225,208,.12);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(141,225,208,.2);
}
.metric-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 6px;
}
.metric {
  min-width: 0;
  text-align: center;
}
.metric .ring { width: 56px; }
.metric strong {
  display: block;
  font-size: 14px;
  white-space: nowrap;
}
.metric small {
  display:block;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.25;
  margin-top: 3px;
}
.chart-card {
  padding: 14px;
}
.chart-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 12px;
}
.chart-title { font-weight: 780; }
.chart-value { font-size: 26px; font-weight: 840; letter-spacing: -.03em; }
.chart-sub { color: var(--muted); font-size: 11px; }
.spark-bars {
  height: 110px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: 8px;
  padding: 7px 4px 0;
}
.spark-bar {
  --h: 50%;
  height: var(--h);
  min-height: 12px;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent, var(--lavender)) 92%, white 8%), color-mix(in srgb, var(--accent, var(--lavender)) 42%, transparent));
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent, var(--lavender)) 15%, transparent);
  position: relative;
}
.spark-labels {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  text-align: center;
  color: var(--muted);
  font-size: 9px;
  margin-top: 5px;
}
.line-chart {
  width: 100%;
  height: 120px;
  overflow: visible;
}
.line-chart .grid { stroke: rgba(255,255,255,.08); stroke-width: 1; }
.line-chart .area { fill: rgba(255,170,161,.08); }
.line-chart .line { fill: none; stroke: var(--peach); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.line-chart .dot { fill: var(--peach); }

.profile-stats {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  margin-top:8px;
}
.profile-stat {
  padding:10px 4px;
  text-align:center;
  border-radius:16px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--stroke);
}
.profile-stat strong{display:block;font-size:14px}
.profile-stat small{color:var(--muted);font-size:9px}
.settings-list {
  display:grid;
}
.settings-row {
  appearance:none;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:transparent;
  padding:12px 3px;
  display:grid;
  grid-template-columns:42px 1fr auto;
  align-items:center;
  gap:11px;
  text-align:left;
}
.settings-row:last-child{border-bottom:0}
.settings-row strong{display:block;font-size:14px}
.settings-row small{display:block;color:var(--muted);margin-top:2px;font-size:11px}

.family-row {
  display:grid;
  grid-template-columns:44px 1fr auto;
  align-items:center;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.family-row:last-child{border-bottom:0}
.family-row strong{display:block}
.family-row small{color:var(--muted)}
.permission{font-size:11px;color:#c9cfcf;text-align:right}

.detail-tabs {
  margin: 10px 0 12px;
}
.feature-card {
  padding:16px;
  min-height:130px;
  background:
    linear-gradient(90deg, rgba(25,55,56,.75), rgba(30,29,49,.4)),
    var(--feature-art, none) right center/cover no-repeat;
}
.feature-card h2{margin:0 0 5px;font-size:20px}
.feature-card .big{font-size:30px;font-weight:850;letter-spacing:-.04em}
.feature-card p{color:var(--muted);margin:5px 0 0;max-width:62%;font-size:12px;line-height:1.35}

.three-actions {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.mini-action {
  appearance:none;
  min-height:84px;
  border:1px solid var(--stroke);
  border-radius:18px;
  background:linear-gradient(145deg,var(--accent-dark),rgba(255,255,255,.02));
  display:grid;
  place-items:center;
  align-content:center;
  gap:7px;
  padding:8px;
  text-align:center;
}
.mini-action strong{color:var(--text);font-size:11px}
.records {
  display:grid;
}
.record-row {
  display:grid;
  grid-template-columns:36px 50px 1fr auto;
  gap:8px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.record-row:last-child{border-bottom:0}
.record-row strong{display:block;font-size:13px}
.record-row small{display:block;color:var(--muted);font-size:10px;margin-top:2px}

.sleep-hero {
  min-height:170px;
  padding:18px;
  background:
    linear-gradient(90deg, rgba(39,39,69,.82), rgba(35,36,61,.2)),
    url("./assets/illustrations/sleeping-baby.svg") right/cover no-repeat;
}
.sleep-hero h2{font-size:24px;margin:0 0 8px}
.sleep-hero p{margin:4px 0;color:#d4d5de}
.sleep-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:10px;
}
.primary-button,
.secondary-button {
  min-height:54px;
  border-radius:18px;
  border:1px solid var(--stroke);
  font-weight:760;
}
.primary-button{
  background:linear-gradient(135deg,#a47ae4,#8d69d4);
  color:white;
}
.secondary-button{background:rgba(255,255,255,.055)}

.health-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.health-tile {
  border-radius:20px;
  border:1px solid var(--stroke);
  padding:13px;
  min-height:104px;
  background:linear-gradient(145deg,var(--accent-dark),rgba(255,255,255,.02));
}
.health-tile strong{display:block;color:var(--text);font-size:19px}
.health-tile span{display:block;color:#c8cecf;font-size:12px;margin-top:4px}
.health-tile small{color:var(--muted);font-size:10px}

.progress-hero {
  display:grid;
  grid-template-columns:96px 1fr;
  gap:14px;
  align-items:center;
  padding:16px;
}
.progress-ring {
  --progress: 50;
  width:90px;
  aspect-ratio:1;
  border-radius:50%;
  background:conic-gradient(var(--mint) calc(var(--progress)*1%),rgba(255,255,255,.09) 0);
  display:grid;
  place-items:center;
}
.progress-ring::before{
  content:"";
  position:absolute;
}
.progress-inner{
  width:70px;height:70px;border-radius:50%;
  background:#132024;
  display:grid;place-items:center;text-align:center;
  font-weight:820;font-size:13px;
}
.progress-copy h2{font-size:18px;margin:0}
.progress-copy p{font-size:12px;color:var(--muted);line-height:1.4;margin:5px 0 0}

.task-list{display:grid;gap:9px}
.task-row{
  display:grid;
  grid-template-columns:28px 48px 1fr auto;
  gap:9px;
  align-items:center;
  padding:12px;
}
.task-check{
  width:24px;height:24px;border:2px solid var(--muted);border-radius:50%;
  display:grid;place-items:center;
}
.task-check.done{background:var(--ok);border-color:var(--ok);color:#12322a}
.task-row strong{display:block;font-size:13px}
.task-row p{margin:3px 0;color:var(--muted);font-size:11px}
.tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.badge{
  display:inline-flex;align-items:center;
  min-height:24px;padding:0 8px;
  border:1px solid var(--stroke);
  color:#c5cccd;background:rgba(255,255,255,.035);
  font-size:9px;
}
.badge.done{color:var(--ok);border-color:rgba(134,224,187,.35);background:rgba(134,224,187,.09)}
.badge.warn{color:var(--gold);border-color:rgba(255,212,121,.35);background:rgba(255,212,121,.09)}
.badge.hold{color:var(--lavender);border-color:rgba(188,165,255,.35);background:rgba(188,165,255,.09)}

.vaccine-summary {
  padding:15px;
}
.vaccine-stats {
  display:grid;
  grid-template-columns:100px 1fr;
  gap:14px;
  align-items:center;
}
.status-list{display:grid;gap:6px}
.status-line{display:flex;justify-content:space-between;color:#d6dada;font-size:12px}
.status-line i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;background:var(--accent)}
.vaccine-row{
  display:grid;
  grid-template-columns:44px 1fr auto;
  gap:10px;
  align-items:center;
  padding:11px;
}
.vaccine-row strong{display:block;font-size:13px}
.vaccine-row small{display:block;color:var(--muted);font-size:10px;margin-top:2px}

.sheet-backdrop {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.56);
  z-index:49;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.sheet {
  position:fixed;
  z-index:50;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:min(100%,var(--max-app-width));
  max-height:calc(var(--app-viewport-height) - var(--safe-top) - 12px);
  overflow-y:auto;
  overflow-x:hidden;
  padding:8px 16px calc(var(--safe-bottom) + 18px);
  border-radius:30px 30px 0 0;
  border:1px solid var(--stroke-strong);
  background:#111d20;
  box-shadow:0 -24px 70px rgba(0,0,0,.45);
  animation:sheet-up .28s var(--ease);
}
@keyframes sheet-up {
  from{transform:translate(-50%,100%)}
  to{transform:translate(-50%,0)}
}
.sheet-handle {
  width:44px;height:5px;border-radius:99px;background:rgba(255,255,255,.2);
  margin:2px auto 14px;
}
.sheet h2{margin:0 0 5px;font-size:24px}
.sheet p{color:var(--muted);font-size:13px;line-height:1.4}
.form-grid{display:grid;gap:10px;margin-top:14px}
.form-field{display:grid;gap:6px}
.form-field label{font-size:11px;color:var(--muted)}
.form-field input,
.form-field textarea,
.form-field select{
  width:100%;
  min-height:48px;
  border-radius:15px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.045);
  color:var(--text);
  padding:10px 12px;
  outline:none;
}
.form-field textarea{min-height:86px;resize:vertical}
.sheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}

.toast {
  position:fixed;
  z-index:60;
  left:50%;
  bottom:calc(var(--tabbar-height) + var(--safe-bottom) + 14px);
  transform:translateX(-50%);
  width:min(calc(100% - 40px),420px);
  background:rgba(17,29,32,.96);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:12px 14px;
  box-shadow:var(--shadow);
  text-align:center;
  font-size:12px;
}

@media (max-width: 380px) {
  :root { --page-pad: 12px; }
  .stat-grid { gap:4px; }
  .ring { width:56px; }
  .quick-grid { gap:5px; }
  .quick-label { font-size:10px; }
  .metric-strip { gap:2px; }
  .metric .ring { width:50px; }
  .action-tile { min-height:104px; padding:11px; grid-template-columns:42px 1fr auto; }
  .template-grid { grid-template-columns:1fr 1fr; }
}

@media (min-width: 521px) {
  body {
    background: #020607;
  }
  .app-shell {
    box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 90px rgba(19,109,103,.12);
  }
}