:root {
  --p-bg: #ffffff; --p-surface: #f4f4f4; --p-ink: #111111; --p-muted: #6b6b6b;
  --p-accent: #1a4be0; --p-accent-ink: #ffffff; --p-action: #1a4be0; --p-action-ink: #ffffff;
  --p-inv-bg: #111111; --p-inv-surface: #1e1e1e; --p-inv-ink: #ffffff; --p-inv-muted: #9a9a9a;
  --p-inv-accent: #ffffff; --p-inv-accent-ink: #111111; --p-inv-action: #ffffff; --p-inv-action-ink: #111111;
  --font-display: "Instrument Sans", system-ui, sans-serif;
  --font-text: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;
  --display-weight: 500;
  --display-tracking: -0.028em;
  --display-tracking-xl: -0.036em;
  --display-stretch: 96%;
  --ly-scale: 1.04;
}
.app-body { background: var(--p-bg); color: var(--p-ink); min-height: 100vh; }
.demo-banner {
  background: var(--p-surface); color: var(--p-muted);
  text-align: center; padding: 10px 16px; font-size: 14px;
  border-bottom: 1px solid color-mix(in oklab, var(--p-ink) 8%, transparent);
}
.demo-banner strong { color: var(--p-ink); font-family: var(--font-mono); letter-spacing: 0.08em; }
.app-nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklab, var(--p-bg) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(12px);
  border-bottom: 1px solid color-mix(in oklab, var(--p-ink) 8%, transparent);
}
.app-nav__bar {
  display: flex; align-items: center; gap: 24px; min-height: 64px;
}
.app-nav__logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking); color: var(--p-ink); text-decoration: none;
}
.app-nav__links { display: flex; gap: 20px; flex: 1; }
.app-nav__links a { color: var(--p-muted); text-decoration: none; font-size: 15px; }
.app-nav__links a:hover { color: var(--p-ink); }
.app-nav__actions { display: flex; align-items: center; gap: 12px; }
.app-nav__email { font-size: 13px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-main { padding: 48px 0 96px; }
.auth-card {
  max-width: 440px; margin: 48px auto;
  padding: 40px; border-radius: var(--r-xl, 28px);
  background: var(--p-surface);
}
.auth-card.wide { max-width: 560px; }
.auth-card h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: var(--display-tracking); margin: 8px 0 12px; }
.stack-form { display: grid; gap: 16px; margin-top: 28px; }
.field { display: grid; gap: 8px; font-size: 14px; }
.field span, .field legend { color: var(--p-muted); font-weight: 500; }
.field input, .field select, .field textarea {
  appearance: none; width: 100%; padding: 14px 16px;
  border-radius: var(--r-md, 16px); border: 1px solid color-mix(in oklab, var(--p-ink) 12%, transparent);
  background: var(--p-bg); color: var(--p-ink); font: inherit; font-size: 16px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid color-mix(in oklab, var(--p-accent) 45%, transparent); outline-offset: 1px;
}
.radio, .check-row, .toggle-row { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.page-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.page-head h1 { font-size: clamp(32px, 5vw, 48px); letter-spacing: var(--display-tracking); margin: 4px 0; }
.nudge {
  background: color-mix(in oklab, var(--p-accent) 10%, var(--p-surface));
  color: var(--p-ink); padding: 14px 18px; border-radius: var(--r-md, 16px); margin-bottom: 24px;
}
.kid-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.kid-card {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center;
  padding: 20px; border-radius: var(--r-lg, 22px); background: var(--p-surface);
}
.kid-card__pic, .avatar-fallback {
  width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  background: var(--p-bg); display: grid; place-items: center; font-size: 22px;
}
.kid-card__pic img { width: 100%; height: 100%; object-fit: cover; }
.split-panels { display: grid; gap: 32px; grid-template-columns: minmax(280px, 380px) 1fr; align-items: start; }
@media (max-width: 900px) { .split-panels { grid-template-columns: 1fr; } }
.panel-form { padding: 28px; border-radius: var(--r-xl, 28px); background: var(--p-surface); }
.art-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.art-card { border-radius: var(--r-lg, 22px); overflow: hidden; background: var(--p-surface); display: flex; flex-direction: column; }
.art-card__img { display: block; aspect-ratio: 1; overflow: hidden; background: #fff; }
.art-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.art-card:hover .art-card__img img { transform: scale(1.03); }
.art-card__body { padding: 16px 18px 20px; display: grid; gap: 8px; }
.share-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.share-page { max-width: 720px; margin: 0 auto; }
.share-page h1 { font-size: clamp(32px, 5vw, 48px); letter-spacing: var(--display-tracking); margin: 8px 0 12px; }
.share-figure { margin: 32px 0; border-radius: var(--r-xl, 28px); overflow: hidden; background: var(--p-surface); }
.share-figure img { width: 100%; display: block; }
.share-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin: 28px 0; }
.share-tile { margin: 0; border-radius: var(--r-lg, 22px); overflow: hidden; background: var(--p-surface); }
.share-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.share-tile figcaption { padding: 10px 12px; }
.btn--sm { padding: 8px 14px; font-size: 14px; }
.muted { color: var(--p-muted); }
.card { background: var(--p-surface); }

/* ---- Mobile polish (phone-first app pages) ---- */
.wrap { width: min(1120px, calc(100% - 32px)); margin-inline: auto; }
@media (max-width: 480px) {
  .wrap { width: min(1120px, calc(100% - 24px)); }
  .app-nav__bar { gap: 12px; min-height: 56px; flex-wrap: wrap; padding: 8px 0; }
  .app-nav__links { gap: 14px; flex: 1 1 auto; }
  .app-nav__email { display: none; }
  .app-main { padding: 28px 0 72px; }
  .auth-card { margin: 16px auto; padding: 24px 20px; max-width: 100%; }
  .auth-card.wide { max-width: 100%; }
  .stack-form .btn,
  .panel-form .btn,
  .auth-card .btn { width: 100%; justify-content: center; min-height: 48px; }
  .btn--sm { min-height: 44px; padding: 10px 14px; }
  .page-head { align-items: stretch; }
  .page-head .btn { width: 100%; justify-content: center; min-height: 48px; }
  .kid-card { grid-template-columns: 56px 1fr; }
  .kid-card .btn { grid-column: 1 / -1; width: 100%; justify-content: center; min-height: 44px; }
  .kid-card__pic, .avatar-fallback { width: 56px; height: 56px; }
  .share-btns { flex-direction: column; }
  .share-btns .btn { width: 100%; justify-content: center; min-height: 44px; }
  .share-grid { grid-template-columns: 1fr; }
  .art-grid { grid-template-columns: 1fr; }
  .radio, .check-row, .toggle-row { min-height: 44px; }
  fieldset.field { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
}
.empty-state {
  display: grid; gap: 12px; justify-items: start;
  padding: 20px; border-radius: var(--r-lg, 22px); background: var(--p-surface);
}
.empty-state__thumb {
  width: 72px; height: 72px; border-radius: 18px; object-fit: cover;
  background: #fff;
}
.share-tile figcaption {
  display: grid; gap: 4px; padding: 10px 12px;
}
.share-tile__desc { display: block; font-size: 14px; color: var(--p-ink); line-height: 1.35; }
.share-hint { margin-top: 8px; max-width: 42ch; }
.gal-edit { margin-top: 8px; }
.gal-edit summary { cursor: pointer; color: var(--p-accent); list-style: none; min-height: 40px; display: flex; align-items: center; }
.gal-edit__form { margin-top: 12px; }
.inline-toggle { margin: 0; }
.app-body { overflow-x: clip; }