/* Prevent horizontal scrolling / swipe on mobile & PWA */
html, body {
    overflow-x: hidden !important;     /* Hide any horizontal overflow */
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
    touch-action: pan-y;               /* Allow vertical panning only */
}

/* Production rebuild pass:
   switch the child experience from theme-overrides to a tighter Chorbie UI system
   that matches the supplied lockups, card geometry and mobile screen references. */
.header-brand {
  max-width: calc(100% - 178px) !important;
}

.header-brand-lockup {
  display: block !important;
  width: clamp(198px, 44vw, 272px) !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 10px 18px rgba(102, 116, 190, 0.1)) !important;
}

.landing-screen .landing-brand-lockup {
  display: block !important;
  margin-bottom: 12px !important;
}

.landing-screen .landing-brand-lockup-img {
  display: block !important;
  width: min(100%, 320px) !important;
  height: auto !important;
  object-fit: contain !important;
}

.landing-screen .landing-char-chorbie-img {
  display: block !important;
  width: min(100%, 220px) !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 18px 26px rgba(67, 82, 152, 0.18)) !important;
}

.landing-screen .landing-brand-sub {
  margin: 0 0 18px !important;
  font-size: 0.96rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.child-dashboard-shell #child-tab-nav .tab-btn .tab-icon {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  line-height: 0 !important;
}

.child-dashboard-shell #child-tab-nav .tab-btn .tab-icon svg {
  width: 24px !important;
  height: 24px !important;
  overflow: visible !important;
}

.child-dashboard-shell .chores-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

.child-dashboard-shell .chores-section-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.child-dashboard-shell .chores-section-kicker {
  margin-bottom: 8px !important;
  font-size: 0.9rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #7b85a6 !important;
}

.child-dashboard-shell .chores-section-title {
  font-family: var(--font-family-display) !important;
  font-size: clamp(2rem, 1.8rem + 0.9vw, 2.55rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
  color: #17244f !important;
}

.child-dashboard-shell .pick-for-me-btn {
  min-width: 176px !important;
  height: 74px !important;
  padding: 0 24px !important;
  border: none !important;
  border-radius: 26px !important;
  background: linear-gradient(135deg, #5c4ef1 0%, #4d4ce8 72%, #6c4ef1 100%) !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  box-shadow: 0 18px 32px rgba(92, 78, 241, 0.24) !important;
}

.child-dashboard-shell .today-chore-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.child-dashboard-shell .today-chore-group-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 0 8px !important;
}

.child-dashboard-shell .today-chore-group-title {
  font-family: var(--font-family-display) !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: #1b2753 !important;
}

.child-dashboard-shell .today-chore-group-subtitle {
  margin-top: 4px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  color: #7a84a3 !important;
}

.child-dashboard-shell .today-chore-group-count {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 48px !important;
  height: 48px !important;
  padding: 0 10px !important;
  border-radius: 18px !important;
  border: 2px solid rgba(203, 211, 245, 0.96) !important;
  background: linear-gradient(180deg, rgba(251, 252, 255, 0.98), rgba(242, 246, 255, 0.98)) !important;
  color: #5160a6 !important;
  font-size: 1.12rem !important;
  font-weight: 900 !important;
}

.child-dashboard-shell .today-chore-group-count.is-bonus {
  color: #18a267 !important;
}

.child-dashboard-shell .today-chore-group-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

.child-dashboard-shell .chore-card {
  position: relative !important;
  padding: 22px 20px 20px !important;
  border-radius: 34px !important;
  border: 1px solid rgba(216, 222, 245, 0.96) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,255,0.96)) !important;
  box-shadow: 0 18px 36px rgba(150, 163, 214, 0.16), inset 0 1px 0 rgba(255,255,255,0.96) !important;
}

.child-dashboard-shell .chore-card-inner {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: start !important;
}

.child-dashboard-shell .chore-emoji-circle {
  width: 92px !important;
  height: 92px !important;
  border-radius: 28px !important;
  background: linear-gradient(180deg, #f6f8ff 0%, #eef3ff 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.98), 0 12px 28px rgba(177, 190, 232, 0.18) !important;
  font-size: 2.7rem !important;
}

.child-dashboard-shell .chore-info {
  min-width: 0 !important;
}

.child-dashboard-shell .chore-frequency-label {
  margin-bottom: 6px !important;
  font-size: 0.86rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  color: #8f98b4 !important;
}

.child-dashboard-shell .chore-title {
  font-family: var(--font-family-display) !important;
  font-size: clamp(1.65rem, 1.5rem + 0.6vw, 2rem) !important;
  font-weight: 800 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.05em !important;
  color: #16214a !important;
}

.child-dashboard-shell .chore-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px 14px !important;
  margin-top: 10px !important;
}

.child-dashboard-shell .chore-reward {
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  color: #6e7897 !important;
}

.child-dashboard-shell .chore-reward-money {
  color: #5f74b0 !important;
}

.child-dashboard-shell .chore-reward-xp {
  color: #4950b8 !important;
}

.child-dashboard-shell .support-plan-btn {
  top: 18px !important;
  right: 18px !important;
  width: 54px !important;
  height: 54px !important;
  border: none !important;
  border-radius: 20px !important;
  background: #9aa0ad !important;
  color: #ffffff !important;
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 20px rgba(154, 160, 173, 0.24) !important;
}

.child-dashboard-shell .chore-action-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  margin-top: 16px !important;
}

.child-dashboard-shell .done-btn {
  min-height: 72px !important;
  border: none !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, #67cb70 0%, #5fc66c 100%) !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  box-shadow: 0 16px 30px rgba(95, 198, 108, 0.22) !important;
}

.child-dashboard-shell .breakdown-btn,
.child-dashboard-shell .timer-start-btn {
  min-height: 52px !important;
  padding: 0 16px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(206, 212, 239, 0.96) !important;
  background: linear-gradient(180deg, rgba(252,253,255,0.98), rgba(245,248,255,0.96)) !important;
  color: #5c6684 !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.96) !important;
}

.child-dashboard-shell .status-chip {
  min-height: 52px !important;
  padding: 0 18px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(211, 219, 246, 0.94) !important;
  background: linear-gradient(180deg, rgba(251,252,255,0.98), rgba(244,247,255,0.96)) !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: #55617e !important;
}

.child-dashboard-shell .status-chip-approved {
  color: #19a264 !important;
}

.child-dashboard-shell .status-chip-pending {
  color: #6657d8 !important;
}

.child-dashboard-shell .status-chip-rejected {
  color: #cc5f6b !important;
}

.child-dashboard-shell .xp-shop-card,
.child-dashboard-shell .profile-card,
.child-dashboard-shell .messages-list,
.child-dashboard-shell .buddy-tab-greeting,
.child-dashboard-shell .calm-buddy-intro,
.child-dashboard-shell .calm-breathing-card,
.child-dashboard-shell .calm-grounding-card {
  border-radius: 32px !important;
}

.child-dashboard-shell .xp-shop-card .card-title,
.child-dashboard-shell .profile-card .card-title,
.child-dashboard-shell .calm-section-title {
  font-family: var(--font-family-display) !important;
  font-size: 1.24rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  color: #1b2851 !important;
}

.child-dashboard-shell .xp-shop-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.child-dashboard-shell .xp-shop-item {
  min-height: 244px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(219, 225, 245, 0.96) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,255,0.96)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.96), 0 14px 28px rgba(158, 170, 214, 0.14) !important;
}

.child-dashboard-shell .xp-shop-item-name {
  font-family: var(--font-family-display) !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: #1a2751 !important;
}

.child-dashboard-shell .xp-shop-item-desc,
.child-dashboard-shell .xp-shop-item-cost,
.child-dashboard-shell .profile-card-sub,
.child-dashboard-shell .message-text,
.child-dashboard-shell .calm-section-sub {
  font-weight: 700 !important;
  color: #74809d !important;
}

.child-dashboard-shell .buddy-tab-greeting,
.child-dashboard-shell .calm-buddy-intro {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 20px 22px !important;
  border: 1px solid rgba(217, 223, 245, 0.96) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,249,255,0.96)) !important;
  box-shadow: 0 16px 34px rgba(153, 167, 214, 0.16), inset 0 1px 0 rgba(255,255,255,0.96) !important;
}

.child-dashboard-shell .buddy-tab-img,
.child-dashboard-shell .calm-buddy-img,
.child-dashboard-shell .calm-breath-buddy-img {
  width: 82px !important;
  height: 82px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 10px 18px rgba(62, 74, 134, 0.16)) !important;
}

.child-dashboard-shell .buddy-tab-msg,
.child-dashboard-shell .calm-intro-msg {
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: #1d2952 !important;
}

.child-dashboard-shell .message-card {
  padding: 18px 18px 18px 20px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(218, 224, 245, 0.96) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,249,255,0.96)) !important;
  box-shadow: 0 12px 28px rgba(153, 167, 214, 0.12), inset 0 1px 0 rgba(255,255,255,0.96) !important;
}

.child-dashboard-shell .message-title {
  font-weight: 900 !important;
  color: #19244b !important;
}

@media (max-width: 760px) {
  .header-brand-lockup {
    width: min(64vw, 250px) !important;
  }

  .child-dashboard-shell .pick-for-me-btn {
    min-width: 0 !important;
    width: 100% !important;
    height: 60px !important;
  }

  .child-dashboard-shell .chores-section-header {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .child-dashboard-shell .xp-shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Extra safety for iOS Safari / PWAs */
body {
    -webkit-overflow-scrolling: touch; /* Smooth vertical scrolling */
}

/* Prevent any element from causing horizontal overflow */
* {
    box-sizing: border-box;            /* Helps with padding/margin issues */
    max-width: 100% !important;        /* Force child elements to stay inside */
}

/* Optional: Disable overscroll bounce that can cause horizontal drift */
html {
    overscroll-behavior-x: none;
}

/* ── CSS Custom Properties ──────────────────────────── */
:root {
  /* Backgrounds & Surfaces */
  --bg:
    radial-gradient(circle at 12% 10%, rgba(79,70,229,0.12), transparent 28%),
    radial-gradient(circle at 88% 16%, rgba(34,197,94,0.10), transparent 24%),
    linear-gradient(180deg, #f8fafc 0%, #eef3ff 46%, #f8fafc 100%);
  --surface: rgba(255, 255, 255, 0.84);
  --surface-2: #eef2ff;
  --surface-3: #e8eefc;

  /* Chorbie palette */
  --text: #10131a;
  --muted: #6b7280;
  --primary: #4f46e5;
  --primary-rgb: 79, 70, 229;
  --primary-hover: #3730a3;
  --primary-glow: rgba(79,70,229,0.28);
  --purple: #4f46e5;
  --purple-glow: rgba(79,70,229,0.22);
  --green: #22c55e;
  --green-glow: rgba(34,197,94,0.22);
  --amber: #facc15;
  --amber-glow: rgba(250,204,21,0.22);
  --red: #fb7185;
  --blue: #4f46e5;
  --pink: #fb7185;
  --pink-glow: rgba(251,113,133,0.18);
  --yellow: #facc15;
  --yellow-glow: rgba(250,204,21,0.35);
  --navy: #0f172a;
  --teal: #14b8a6;

  /* Semantic color aliases */
  --color-success: var(--green);
  --color-warning: var(--amber);
  --color-danger: var(--red);
  --color-info: var(--blue);

  /* Hero / XP gradients */
  --hero-gradient: linear-gradient(140deg, #0f172a 0%, #312e81 42%, #4f46e5 100%);
  --hero-shadow: rgba(15,23,42,0.20);
  --xp-bar-gradient: linear-gradient(90deg, #818cf8 0%, #4f46e5 58%, #22c55e 100%);

  /* Borders & text accents */
  --border: rgba(15,23,42,0.10);
  --border-strong: rgba(15,23,42,0.16);
  --text-strong: #111827;
  --text-muted-strong: #4f5969;
  --text-on-dark: #f8faff;
  --placeholder: #9ca3af; /* WCAG-AA compliant */
  --accent-money: #15803d;
  --accent-xp: #4f46e5;
  --accent-success: #166534;
  --accent-danger: #e11d48;
  --accent-link: #3730a3;
  --accent-on-strong: #ffffff;

  /* Typography */
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-family-display: 'Nunito', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
  --fs-display: clamp(1.75rem, 1.3rem + 1.7vw, 2.55rem);
  --fs-h1: clamp(1.45rem, 1.2rem + 1.15vw, 1.95rem);
  --fs-h2: clamp(1.22rem, 1.05rem + 0.8vw, 1.55rem);
  --fs-h3: clamp(1.06rem, 0.98rem + 0.35vw, 1.24rem);
  --fs-body-lg: 1rem;
  --fs-body: 0.95rem;
  --fs-body-sm: 0.875rem;
  --fs-caption: 0.78rem;
  --fs-micro: 0.72rem;
  --lh-tight: 1.15;
  --lh-body: 1.5;
  --lh-loose: 1.65;

  /* Shadows */
  --shadow: 0 12px 30px rgba(15,23,42,0.10), 0 24px 60px rgba(15,23,42,0.05);
  --shadow-lg: 0 20px 48px rgba(15,23,42,0.12), 0 30px 72px rgba(15,23,42,0.08);
  --shadow-sm: 0 4px 12px rgba(15,23,42,0.06), 0 10px 18px rgba(15,23,42,0.04);
  --shadow-purple: 0 12px 28px rgba(79,70,229,0.16);
  --shadow-green: 0 12px 28px rgba(34,197,94,0.14);
  --shadow-amber: 0 12px 28px rgba(250,204,21,0.14);

  /* Border Radius scale — matches iOS corner styles */
  --radius-xs: 8px;    /* Pills, small badges */
  --radius-sm: 12px;   /* Inputs, small cards, list rows */
  --radius-md: 16px;   /* Medium surfaces, photos */
  --radius: 22px;      /* Default card/card */
  --radius-lg: 26px;   /* Large sheets */
  --radius-xl: 32px;   /* Full-screen sheets / celebrations */
  --radius-pill: 999px;

  /* Spacing scale — 4px baseline grid */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* Z-index ladder — prevents magic-number wars */
  --z-background: -1;
  --z-base: 1;
  --z-sticky: 90;
  --z-header: 100;
  --z-fab: 90;
  --z-overlay: 400;
  --z-toast: 500;
  --z-modal: 2000;
  --z-game: 3000;
  --z-notification: 3500;
  --z-celebration: 9995;
  --z-photo-viewer: 9998;
  --z-critical: 9999;

  /* Motion — iOS-style spring easing tokens */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 350ms;
  --dur-overlay: 320ms;

  /* Safe-area insets — notch / home indicator aware */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Layout */
  --hit-target: 44px;
  --content-max: 430px;

  font-family: var(--font-family-base);
}

/* ── Reset & Base ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-family-base);
  background: var(--bg);
  min-height: 100dvh;
  color: var(--text);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(79,70,229,0.08) 0%, transparent 50%),
    radial-gradient(circle at 85% 75%, rgba(34,197,94,0.05) 0%, transparent 46%),
    radial-gradient(circle at 55% 10%, rgba(250,204,21,0.05) 0%, transparent 40%);
  animation: background-float 28s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
/* Disable expensive background animation and backdrop-filters during games */
body.game-active::before { animation-play-state: paused; display: none; }
body.game-active .mini-game-overlay { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
/* Remove HUD backdrop-blur during games — blur on overlapping elements forces GPU re-composite every frame */
body.game-active .game-hud-pill { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(0,0,0,0.65) !important; }
/* Promote canvas to its own GPU layer */
#dash-canvas, #sc-canvas { will-change: contents; }
@keyframes background-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    filter: hue-rotate(0deg);
  }
  25% {
    transform: translateY(-5px) rotate(0.5deg);
    filter: hue-rotate(5deg);
  }
  50% {
    transform: translateY(-10px) rotate(0deg);
    filter: hue-rotate(10deg);
  }
  75% {
    transform: translateY(-5px) rotate(-0.5deg);
    filter: hue-rotate(5deg);
  }
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ── App Header ──────────────────────────────────────── */
.app-header {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 6px 18px rgba(124,92,252,0.08);
  padding: calc(var(--safe-top) + 4px) calc(var(--space-5) + var(--safe-right)) 4px calc(var(--space-5) + var(--safe-left));
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}
.app-header .header-logo-img { width: 160px; height: auto; object-fit: contain; flex-shrink: 0; }
.app-header .header-actions { position: absolute; right: calc(var(--space-3) + var(--safe-right)); display: flex; align-items: center; gap: var(--space-2); top: 50%; transform: translateY(calc(-50% + var(--safe-top) / 2)); }

/* ── Container ───────────────────────────────────────── */
.container { max-width: 560px; margin: 0 auto; padding-left: calc(var(--space-5) + var(--safe-left)); padding-right: calc(var(--space-5) + var(--safe-right)); }
/* Use longhand so .container's left/right padding isn't clobbered */
.page-content { padding-top: var(--space-5); padding-bottom: calc(100px + var(--safe-bottom)); }

/* ── Cards ───────────────────────────────────────────── */
.card {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px; margin-bottom: 16px;
  border: 1px solid rgba(124,92,252,0.08);
  backdrop-filter: blur(10px);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover {
  box-shadow: var(--shadow-lg);
  border-color: rgba(124,92,252,0.16);
  transform: translateY(-1px);
}
.card-sm { padding: 14px 16px; border-radius: var(--radius-sm); }
.card-title { font-size: 1rem; font-weight: 800; color: var(--text); margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }

/* ── Buttons (iOS: 44px standard touch target) ─────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: inherit; font-weight: 700; font-size: 0.95rem;
  padding: 0 var(--space-5); min-height: var(--hit-target); height: 48px;
  border-radius: var(--radius-pill);
  border: none; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
  letter-spacing: -0.01em; white-space: nowrap;
  user-select: none;
}
.btn:active { transform: scale(0.96); filter: brightness(0.95); }
.btn-primary {
  background: linear-gradient(135deg, var(--primary), #a78bfa);
  color: #fff;
  box-shadow: 0 4px 14px rgba(124,92,252,0.35);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-hover), #9061f9);
  box-shadow: 0 8px 22px rgba(124,92,252,0.4);
  transform: translateY(-1px);
  filter: saturate(1.06);
}
.btn-full { width: 100%; }
.btn-ghost { background: transparent; color: var(--text); border: 1.5px solid var(--border-strong); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn-outline {
  background: transparent; color: var(--primary); border: 1.5px solid rgba(10,132,255,0.35);
}
.btn-outline:hover { background: rgba(10,132,255,0.08); border-color: var(--primary); }
.btn-secondary { background: var(--surface-2); color: var(--text); }
.btn-secondary:hover { background: var(--surface-3); }
.btn-danger { background: var(--red); color: #fff; box-shadow: 0 4px 14px rgba(255,69,58,0.3); }
.btn-danger:hover { filter: brightness(1.08); box-shadow: 0 6px 18px rgba(255,69,58,0.42); }
.btn-success { background: var(--green); color: #fff; box-shadow: 0 4px 14px rgba(52,199,89,0.35); }
.btn-success:hover { filter: brightness(1.08); box-shadow: 0 6px 18px rgba(52,199,89,0.42); }
.btn-purple { background: var(--purple); color: #fff; box-shadow: 0 4px 14px rgba(94,92,230,0.35); }
.btn-muted { background: transparent; color: var(--muted); border: 1.5px solid var(--border); }
.btn-muted:hover { color: var(--text); border-color: var(--text); }
.btn-sm { height: 36px; min-height: 36px; padding: 0 var(--space-4); font-size: 0.85rem; }
.btn-icon { width: var(--hit-target); height: var(--hit-target); min-height: var(--hit-target); padding: 0; border-radius: var(--radius-sm); font-size: 1.1rem; }

.btn:focus-visible,
.tab-btn:focus-visible,
.child-tab-btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(10,132,255,0.35);
  outline-offset: 2px;
}

/* ── Form Elements ───────────────────────────────────── */
.form-group { margin-bottom: var(--space-3); }
.form-group label {
  display: block; font-weight: 600; font-size: 0.85rem;
  color: var(--text-muted-strong);
  letter-spacing: -0.01em; margin-bottom: var(--space-2);
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%; height: 48px; padding: 0 var(--space-4);
  font-family: inherit; font-size: 1rem; font-weight: 500; color: var(--text);
  background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  appearance: none; -webkit-appearance: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(10,132,255,0.18); background: #fff;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--placeholder); font-weight: 500; }
.form-group textarea { height: auto; min-height: 80px; padding: var(--space-3) var(--space-4); resize: none; line-height: 1.4; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

/* ── Tab Navigation (iOS-style segmented control) ───────── */
.tab-nav {
  display: flex; background: var(--surface-2); border-radius: var(--radius-pill);
  padding: 4px; gap: 2px; margin-bottom: var(--space-5);
  border: 0.5px solid var(--border);
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.tab-nav::-webkit-scrollbar { display: none; }
.tab-btn {
  flex: 0 0 auto; min-width: var(--hit-target); height: var(--hit-target); padding: 0 12px;
  font-family: inherit; font-size: 0.85rem; font-weight: 600; color: var(--muted);
  background: transparent; border: none; border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  white-space: nowrap;
  display: flex; align-items: center; justify-content: center; gap: var(--space-1);
  position: relative;
}
.tab-btn .tab-label { display: none; font-size: 0.78rem; }
.tab-btn .tab-icon { font-size: 1.1rem; }
.tab-btn.active .tab-label { display: inline; }
.tab-btn.active {
  flex: 1 0 auto; padding: 0 14px;
  background: linear-gradient(135deg, var(--primary), #a78bfa); color: #fff; box-shadow: 0 4px 14px rgba(124,92,252,0.3);
}
.tab-btn .tab-badge {
  position: absolute; top: 4px; right: 4px; width: 16px; height: 16px;
  background: var(--red); color: #fff; font-size: 0.65rem; font-weight: 900;
  border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1;
}

/* ── Child-side Tab Navigation ───────────────────────── */
/* Designed for AUDHD kids: always-visible icon+label, equal-width, big tap targets */
.child-tabs {
  display: flex; background: var(--surface-2); border-radius: var(--radius-md);
  padding: 5px; gap: 3px; margin-bottom: var(--space-5);
  border: 0.5px solid var(--border);
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.child-tabs::-webkit-scrollbar { display: none; }
.child-tab-btn {
  flex: 1; min-width: 48px; height: 56px; padding: 0 var(--space-1);
  font-family: inherit; font-size: 0.82rem; font-weight: 700; color: var(--muted);
  background: transparent; border: none; border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  white-space: nowrap;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  position: relative;
}
/* Always show label — reduces "which tab is that?" cognitive load */
.child-tab-btn .tab-label { display: inline; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.01em; }
.child-tab-btn .tab-icon { font-size: 1.4rem; }
.child-tab-btn.active {
  background: linear-gradient(135deg, var(--primary), #a78bfa); color: #fff;
  box-shadow: 0 4px 14px rgba(124,92,252,0.3);
}
.child-tab-btn.active .tab-label { font-weight: 800; }
.child-tab-btn:hover:not(.active) {
  background: var(--surface-3); color: var(--primary);
}
.child-tab-btn:active:not(.active) { transform: scale(0.96); }
.child-tab-btn .tab-count {
  position: absolute; top: 5px; right: 5px; min-width: 18px; height: 18px;
  background: var(--red); color: #fff; font-size: 0.65rem; font-weight: 800;
  border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center;
  line-height: 1; padding: 0 4px;
  border: 1.5px solid var(--surface-2);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Child Hero ──────────────────────────────────────── */
.child-hero {
  background: var(--hero-gradient, linear-gradient(145deg, #312e81 0%, #6d28d9 45%, #be185d 100%));
  border-radius: var(--radius); padding: var(--space-6) var(--space-5) var(--space-5);
  color: #fff; margin-bottom: var(--space-5);
  position: relative; overflow: hidden;
  box-shadow: 0 12px 40px var(--hero-shadow, rgba(79,46,220,0.38)), inset 0 1px 0 rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.12);
}
/* Single subtle highlight — simpler, more iOS-like */
.child-hero::before {
  content: ''; position: absolute; top: -80px; right: -80px;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(255,255,255,0.14) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none;
}
.child-hero-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; position: relative; z-index: 1; }
.child-avatar {
  width: 70px; height: 70px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; flex-shrink: 0;
  border: 3px solid rgba(255,255,255,0.35);
  box-shadow: 0 0 0 6px rgba(255,255,255,0.08), 0 4px 16px rgba(0,0,0,0.2);
  animation: float 4s ease-in-out infinite;
}
.child-hero-info { flex: 1; }
.child-hero-greeting { font-size: 0.85rem; font-weight: 700; opacity: 0.92; margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.06em; }
.child-hero-name { font-size: 2rem; font-weight: 900; letter-spacing: -0.5px; line-height: 1.1; }
.level-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.2); border: 2px solid rgba(255,255,255,0.35);
  color: #fff; font-size: 0.78rem; font-weight: 800; padding: 4px 10px;
  border-radius: var(--radius-pill); backdrop-filter: blur(4px);
}

/* ── XP Bar ──────────────────────────────────────────── */
/* Thicker bar — progress is immediately visible at a glance */
.xp-bar-container {
  background: rgba(255,255,255,0.18); border-radius: var(--radius-pill);
  height: 14px; overflow: hidden; margin-bottom: 14px; position: relative; z-index: 1;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
.xp-bar-fill {
  height: 100%; background: var(--xp-bar-gradient, linear-gradient(90deg, #c4b5fd, #f9a8d4));
  border-radius: var(--radius-pill); width: var(--xp-pct, 0%);
  animation: xp-fill 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  box-shadow: 0 0 10px rgba(196,181,253,0.7);
}
.xp-label { font-size: 0.82rem; font-weight: 800; opacity: 0.9; margin-bottom: 8px; position: relative; z-index: 1; }

/* ── Stats Row ───────────────────────────────────────── */
/* Larger values and icons — kids can see their progress at a glance */
.stats-row { display: flex; gap: 10px; position: relative; z-index: 1; }
.stat {
  flex: 1;
  background: rgba(255,255,255,0.15);
  border-radius: 16px;
  padding: 14px 8px 12px;
  text-align: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.25);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: transform 0.15s ease, background 0.15s ease;
}
.stat:active { transform: scale(0.96); }
.stat-icon { font-size: 1.7rem; line-height: 1; }
.stat-value { font-size: 1.5rem; font-weight: 900; line-height: 1.1; }
/* No opacity — white text on gradient hero is readable at full opacity */
.stat-label { font-size: 0.68rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 1px; }
.stat-streak { border-bottom: 4px solid rgba(251,146,60,0.9); }
.stat-balance { border-bottom: 4px solid rgba(56,189,248,0.9); }
.stat-today   { border-bottom: 4px solid rgba(167,139,250,0.9); }

/* ── Progress Section ────────────────────────────────── */
.progress-section {
  background: var(--surface); border-radius: var(--radius); padding: 16px 20px;
  margin-bottom: 16px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 14px;
}
.progress-text { flex: 1; }
.progress-title { font-size: 0.85rem; font-weight: 800; color: var(--text-muted-strong); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.progress-count { font-size: 1.1rem; font-weight: 900; color: var(--text); }
.progress-dots { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; max-width: 120px; }
.progress-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--border); transition: all 0.3s; }
.progress-dot.done { background: var(--green); box-shadow: 0 0 6px rgba(16,185,129,0.5); animation: pop 0.35s ease; }

/* ── Chore Cards ─────────────────────────────────────── */
/* AUDHD-friendly: clear visual status, big tap targets, minimal text */
.chores-section { margin-bottom: 80px; }
.chores-section-title { font-size: 0.88rem; font-weight: 900; color: var(--text-muted-strong); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 12px; padding: 0 4px; }
.chore-card {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px; margin-bottom: 16px; border: 3px solid transparent;
  transition: all 0.25s; animation: slide-up 0.3s ease both; position: relative; overflow: hidden;
}
.chore-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.chore-card-inner { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.chore-emoji-circle {
  width: 90px; height: 90px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 3.25rem; flex-shrink: 0; transition: all 0.25s;
}
.chore-info { flex: 1; min-width: 0; }
/* Larger title — easier to read at a glance */
.chore-title { font-size: 1.25rem; font-weight: 900; color: var(--text); margin-bottom: 6px; word-break: break-word; line-height: 1.25; }
.chore-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chore-reward { font-size: 0.9rem; font-weight: 800; color: var(--text-muted-strong); display: flex; align-items: center; gap: 4px; }
.chore-reward-money { color: var(--amber); }
.chore-reward-xp { color: var(--purple); }

/* Status variants — stronger borders so state is unambiguous */
/* Use !important to beat the generic .chore-card override in the premium polish section */
.status-todo { border-color: rgba(124,92,252,0.4) !important; }
.status-todo .chore-emoji-circle { background: #f5f3ff; }
.status-pending { border-color: var(--amber) !important; background: linear-gradient(135deg, #fff 0%, #fffbf0 100%); }
.status-pending .chore-emoji-circle { background: #fffbeb; }
.status-pending::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(245,158,11,0.08) 50%, transparent 100%);
  background-size: 200% 100%; animation: shimmer 2s ease-in-out infinite;
  pointer-events: none; border-radius: inherit;
}
.status-approved { border-color: var(--green) !important; background: linear-gradient(135deg, #fff 0%, #f0fdf4 100%); }
.status-approved .chore-emoji-circle { background: #dcfce7; }
.status-rejected { border-color: var(--red) !important; background: linear-gradient(135deg, #fff 0%, #fff5f5 100%); }
.status-rejected .chore-emoji-circle { background: #fee2e2; }

/* Done button — the primary action, must be unmissable */
.done-btn {
  width: 100%; height: 64px; background: linear-gradient(135deg, var(--primary), #a78bfa); color: #fff;
  font-family: inherit; font-size: 1.15rem; font-weight: 800; border: none;
  border-radius: var(--radius); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
  letter-spacing: 0.01em; display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  box-shadow: 0 6px 20px rgba(124,92,252,0.4);
  animation: glow-pulse 2s ease-in-out infinite;
}
.done-btn:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(124,92,252,0.48); }
.done-btn:active { transform: scale(0.97); }

/* Status chips — short text, tall enough to be read easily */
.status-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 1rem; font-weight: 800; padding: 12px 16px;
  border-radius: var(--radius); width: 100%; justify-content: center;
  min-height: 54px;
}
.status-chip-pending { background: var(--chip-pending-bg, #fffbeb); color: var(--amber); border: 2px solid var(--chip-pending-border, rgba(245,158,11,0.4)); }
.status-chip-approved { background: var(--chip-approved-bg, #dcfce7); color: var(--green); border: 2px solid var(--chip-approved-border, rgba(16,185,129,0.4)); }
.status-chip-rejected { background: var(--chip-rejected-bg, #fee2e2); color: var(--red); border: 2px solid var(--chip-rejected-border, rgba(239,68,68,0.4)); }

/* ── Focus Mode FAB ──────────────────────────────────── */
.focus-mode-fab {
  position: fixed;
  bottom: calc(var(--space-6) + var(--safe-bottom));
  right: calc(var(--space-5) + var(--safe-right));
  width: 58px; height: 58px; background: var(--purple); color: #fff;
  border: none; border-radius: 50%; font-size: 1.5rem; cursor: pointer;
  box-shadow: 0 6px 20px rgba(139,92,246,0.45);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  z-index: var(--z-fab); animation: float 3s ease-in-out infinite;
}
.focus-mode-fab:hover { transform: scale(1.1); }
.focus-mode-fab:active { transform: scale(0.95); }
.focus-mode-fab.active { background: var(--primary); animation: glow-pulse 1.5s ease-in-out infinite; }

/* Focus mode styles */
.focus-mode .chore-card { display: none; }
.focus-mode .chore-card.focus-visible { display: block; }
.show-all-btn {
  width: 100%; margin: 12px 0; height: 46px; background: var(--surface);
  border: 2px dashed var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 0.88rem; font-weight: 800; color: var(--muted);
  cursor: pointer; transition: all 0.15s; -webkit-tap-highlight-color: transparent;
}
.show-all-btn:hover { border-color: var(--primary); color: var(--primary); }

/* ── Celebration ─────────────────────────────────────── */
.celebration-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: var(--z-celebration); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-overlay) var(--ease-out);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: calc(var(--space-5) + var(--safe-top)) calc(var(--space-5) + var(--safe-right)) calc(var(--space-5) + var(--safe-bottom)) calc(var(--space-5) + var(--safe-left));
}
.celebration-overlay.active { opacity: 1; pointer-events: all; }
.celebration-card {
  background: var(--surface); border-radius: var(--radius-xl); padding: 40px 32px;
  text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: celebration-pop var(--dur-slow) var(--ease-spring) forwards;
  max-width: 320px; width: 90%;
}
.celebration-emoji { font-size: 5rem; display: block; margin-bottom: 12px; animation: bounce-in 0.5s ease both 0.1s; }
.celebration-title {
  font-size: 1.8rem; font-weight: 900; margin-bottom: 8px;
  background: linear-gradient(135deg, var(--primary), #f472b6);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.celebration-subtitle { font-size: 1rem; font-weight: 700; color: var(--muted); }

/* ── Confetti ────────────────────────────────────────── */
#confetti-container { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-overlay); overflow: hidden; }
.confetti-piece {
  position: absolute; top: -20px; width: 10px; height: 10px; border-radius: 2px;
  animation: confetti-fall linear forwards;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.confetti-piece.confetti-star {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: confetti-fall-spin linear forwards;
}
.confetti-piece.confetti-heart {
  clip-path: path('M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z');
  background: none !important;
  color: var(--primary);
}
.confetti-piece.confetti-triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.confetti-piece.confetti-diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.confetti-piece.confetti-coin {
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  box-shadow: 0 0 8px rgba(255,215,0,0.6);
  animation: confetti-fall-bounce linear forwards;
}
.confetti-piece.confetti-spark {
  background: linear-gradient(45deg, var(--primary), var(--pink));
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  animation: confetti-fall-spark linear forwards;
}
.confetti-piece.confetti-gem {
  background: linear-gradient(135deg, var(--purple), var(--blue));
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: confetti-fall-gem linear forwards;
}

/* ── Toast ───────────────────────────────────────────── */
.toast {
  position: fixed; top: calc(80px + var(--safe-top)); left: 50%; transform: translateX(-50%);
  z-index: var(--z-toast); min-width: 260px; max-width: calc(100vw - 40px);
  padding: 14px 22px; background: var(--text); color: #fff;
  border-radius: var(--radius-pill); font-weight: 700; font-size: 0.88rem;
  text-align: center;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.08) inset;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: toast-entrance var(--dur-slow) var(--ease-spring) both;
  pointer-events: none;
}
.toast.hidden { display: none; }
.toast.success { background: linear-gradient(135deg, #059669, var(--green)); }
.toast.error { background: linear-gradient(135deg, #dc2626, var(--red)); }
.toast.info { background: linear-gradient(135deg, #7c3aed, var(--purple)); }
@keyframes toast-entrance {
  0% { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(0.92); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ── Notice ──────────────────────────────────────────── */
.notice {
  display: flex; align-items: center; gap: 10px;
  background: #eff6ff; border: 1.5px solid rgba(59,130,246,0.25); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 0.88rem; font-weight: 700; color: var(--blue);
  margin-bottom: 14px; animation: slide-up 0.3s ease both;
}
.notice-icon { font-size: 1.1rem; flex-shrink: 0; }

/* ── Push Prompt ─────────────────────────────────────── */
.push-prompt {
  background: linear-gradient(135deg, #f3e8ff, #e0e7ff); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 12px;
  animation: slide-up 0.3s ease both; border: 1.5px solid rgba(139,92,246,0.2);
}
/* When outside a container (login/setup) keep it from bleeding to edges */
#app > .push-prompt { margin-left: 20px; margin-right: 20px; }
.push-prompt-text { flex: 1; font-size: 0.85rem; font-weight: 700; color: #4c1d95; }
.push-prompt-actions { display: flex; gap: 6px; }

/* ── Setup / Login ───────────────────────────────────── */
.setup-screen {
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 20px 80px;
}
.setup-hero { text-align: center; margin-bottom: 20px; }
.setup-hero .big-emoji { font-size: 4rem; display: block; margin-bottom: 8px; animation: bounce-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.setup-hero h2 { font-size: 1.8rem; font-weight: 900; color: var(--text); margin-bottom: 8px; }
.setup-hero p { font-size: 1rem; color: var(--muted); font-weight: 600; }
.setup-card { width: 100%; max-width: 400px; }

.login-options { display: grid; gap: 12px; margin-bottom: 24px; }
.login-option-card {
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius);
  padding: 20px; cursor: pointer; transition: all 0.2s; text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.login-option-card:hover { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124,92,252,0.15); }
.login-option-emoji { font-size: 2.5rem; margin-bottom: 8px; }
.login-option-title { font-size: 1rem; font-weight: 800; color: var(--text); }
.login-option-subtitle { font-size: 0.8rem; font-weight: 600; color: var(--muted); margin-top: 2px; }

.child-select-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; margin-bottom: 16px; }
.child-select-btn {
  background: var(--surface-2); border: 2px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 8px; cursor: pointer; text-align: center; transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.child-select-btn:hover, .child-select-btn.selected { border-color: var(--primary); background: #fff8f5; }
.child-select-btn .child-sel-emoji { font-size: 2rem; margin-bottom: 4px; }
.child-select-btn .child-sel-name { font-size: 0.8rem; font-weight: 800; color: var(--text); }

/* PIN input */
.pin-display { display: flex; gap: 8px; justify-content: center; margin: 10px 0; }
.pin-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--border); transition: all 0.2s; }
.pin-dot.filled { background: var(--primary); box-shadow: 0 0 8px rgba(124,92,252,0.4); }
.pin-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 240px; margin: 14px auto 0; }
.pin-key {
  height: 60px; font-size: 1.3rem; font-weight: 800; background: var(--surface-2);
  border: 2px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
  transition: all 0.12s; display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; font-family: inherit; color: var(--text);
}
.pin-key:hover { background: var(--surface); border-color: var(--primary); }
.pin-key:active { transform: scale(0.94); background: #fff8f5; }
.pin-key.pin-clear { font-size: 1rem; color: var(--red); }
.pin-error { color: var(--red); font-weight: 700; font-size: 0.88rem; text-align: center; margin-top: 8px; animation: shake 0.4s ease; }

/* ── Parent Dashboard ────────────────────────────────── */
.parent-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 4px; margin-bottom: 16px; }
.parent-header h2 { font-size: 1.3rem; font-weight: 900; color: var(--text); letter-spacing: -0.02em; }

/* Approval cards */
.approval-card {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px; margin-bottom: 14px; border-left: 4px solid var(--amber);
  animation: slide-up 0.3s ease both;
  border: 1px solid rgba(245,158,11,0.12);
}
.approval-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.approval-emoji {
  width: 48px; height: 48px; background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; flex-shrink: 0; box-shadow: 0 2px 8px rgba(245,158,11,0.15);
}
.approval-info { flex: 1; }
.approval-chore-name { font-size: 1.02rem; font-weight: 800; color: var(--text); line-height: 1.3; }
.approval-child-name { font-size: 0.82rem; font-weight: 700; color: var(--muted); margin-top: 2px; }
.approval-reward { font-size: 0.82rem; font-weight: 800; color: var(--amber); margin-top: 3px; }
.approval-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.support-request-card {
  border-left-color: #34c759;
  border-color: rgba(52,199,89,0.18);
  background:
    radial-gradient(circle at 100% 0, rgba(52,199,89,0.12), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,255,249,0.98));
}

.support-request-note {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(52,199,89,0.08);
  border: 1px solid rgba(52,199,89,0.16);
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.45;
}

.support-request-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.support-request-action-grid > :last-child {
  grid-column: 1 / -1;
}

@media (max-width: 420px) {
  .support-request-action-grid {
    grid-template-columns: 1fr;
  }

  .support-request-action-grid > :last-child {
    grid-column: auto;
  }
}

.support-request-swap-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(214,224,236,0.9);
}

.support-request-swap-title {
  margin-bottom: 10px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text);
}

.support-request-swap-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.support-request-swap-btn {
  min-height: 42px;
  white-space: normal;
  text-align: left;
  justify-content: flex-start;
  line-height: 1.35;
}

/* Approval photo proof */
.approval-photo { margin: 8px 0 12px; border-radius: 12px; overflow: hidden; }
.approval-photo-img { width: 100%; max-height: 200px; object-fit: cover; border-radius: 12px; cursor: pointer; transition: transform 0.2s; border: 2px solid var(--border); }
.approval-photo-img:active { transform: scale(0.97); }
.approval-no-photo { margin: 4px 0 8px; text-align: center; }

/* Photo capture modal */
.photo-capture-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--space-5) + var(--safe-top)) calc(var(--space-5) + var(--safe-right)) calc(var(--space-5) + var(--safe-bottom)) calc(var(--space-5) + var(--safe-left));
  opacity: 0; transition: opacity var(--dur-overlay) var(--ease-out); pointer-events: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.photo-capture-overlay.active { opacity: 1; pointer-events: all; }
.photo-capture-modal {
  background: rgba(255,255,255,0.98); border-radius: var(--radius-lg); padding: var(--space-6);
  width: 100%; max-width: 400px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3); text-align: center;
  transform: translateY(20px) scale(0.96);
  transition: transform var(--dur-overlay) var(--ease-spring);
}
.photo-capture-overlay.active .photo-capture-modal { transform: translateY(0) scale(1); }
.photo-capture-header h3 { margin: 8px 0 4px; font-size: 1.2rem; font-weight: 900; color: var(--text); }
.photo-capture-header p { margin: 0 0 16px; font-size: 0.88rem; color: var(--muted); font-weight: 600; }
.photo-preview-area {
  background: var(--bg); border-radius: 16px; min-height: 180px; display: flex;
  align-items: center; justify-content: center; overflow: hidden; margin-bottom: 16px;
  border: 2px dashed var(--border);
}
.photo-placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.photo-preview-img { width: 100%; max-height: 300px; object-fit: contain; border-radius: 12px; }
.photo-capture-actions { display: flex; flex-direction: column; gap: 8px; }
.photo-take-btn { font-size: 1rem !important; padding: 14px !important; font-weight: 800 !important; }
.photo-submit-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.photo-skip-btn { background: transparent !important; color: var(--muted) !important; font-size: 0.85rem !important; }

.chore-delay-modal {
  max-width: 420px;
  text-align: left;
}

.chore-delay-option-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.chore-delay-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  background: var(--surface-2);
  color: var(--text);
  padding: 14px 16px;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}

.chore-delay-option:hover,
.chore-delay-option.selected {
  border-color: rgba(52,199,89,0.45);
  background: rgba(52,199,89,0.08);
  box-shadow: 0 10px 24px rgba(52,199,89,0.12);
}

.chore-delay-option:active {
  transform: scale(0.98);
}

.chore-delay-option-emoji {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(52,199,89,0.12);
  font-size: 1.2rem;
  flex-shrink: 0;
}

.chore-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(0,0,0,0.48);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--space-5) + var(--safe-top)) calc(var(--space-5) + var(--safe-right)) calc(var(--space-5) + var(--safe-bottom)) calc(var(--space-5) + var(--safe-left));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-overlay) var(--ease-out);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.chore-confirm-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.chore-confirm-modal {
  width: 100%;
  max-width: 380px;
  padding: 24px 22px;
  border-radius: 28px;
  background: rgba(255,255,255,0.98);
  box-shadow: 0 24px 60px rgba(0,0,0,0.24);
  text-align: center;
  transform: translateY(18px) scale(0.96);
  transition: transform var(--dur-overlay) var(--ease-spring);
}

.chore-confirm-overlay.active .chore-confirm-modal {
  transform: translateY(0) scale(1);
}

.chore-confirm-character {
  width: 88px;
  height: 88px;
  margin: 0 auto 12px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(10,132,255,0.10), rgba(94,92,230,0.10));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.chore-confirm-char-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.chore-confirm-char-fallback {
  font-size: 3rem;
  line-height: 1;
}

.chore-confirm-kicker {
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 6px;
}

.chore-confirm-modal h3 {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 8px;
}

.chore-confirm-modal p {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 18px;
}

.chore-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.chore-confirm-btn {
  min-height: 48px;
  font-weight: 900 !important;
}

/* Fullscreen photo viewer */
.photo-viewer-overlay {
  position: fixed; inset: 0; z-index: var(--z-photo-viewer); background: rgba(0,0,0,0.92);
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--space-5) + var(--safe-top)) calc(var(--space-5) + var(--safe-right)) calc(var(--space-5) + var(--safe-bottom)) calc(var(--space-5) + var(--safe-left));
  opacity: 0; transition: opacity var(--dur-overlay) var(--ease-out); cursor: pointer;
}
.photo-viewer-overlay.active { opacity: 1; }
.photo-viewer-img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: var(--radius-xs); }
.photo-viewer-close {
  position: absolute;
  top: calc(var(--space-4) + var(--safe-top));
  right: calc(var(--space-4) + var(--safe-right));
  width: var(--hit-target); height: var(--hit-target); border-radius: 50%;
  background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.2);
  color: #fff; font-size: 1.2rem; cursor: pointer;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.photo-viewer-close:hover { background: rgba(255,255,255,0.28); }
.photo-viewer-close:active { transform: scale(0.92); }

/* Activity feed */
.activity-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; font-weight: 600; color: var(--muted); }
.activity-item:last-child { border-bottom: none; }
.activity-item .activity-icon { font-size: 1.1rem; }

/* ── Chore Budget Overview ───────────────────────────── */
.budget-card { margin-bottom: 16px; }
.budget-table { display: flex; flex-direction: column; gap: 0; }
.budget-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--border);
  gap: 8px;
}
.budget-row:last-child { border-bottom: none; }
.budget-label { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.budget-avatar { font-size: 1.1rem; flex-shrink: 0; }
.budget-name { font-size: 0.9rem; font-weight: 800; color: var(--text); white-space: nowrap; }
.budget-count { font-size: 0.72rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.budget-amounts { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.budget-assigned-val { font-size: 0.88rem; font-weight: 800; color: var(--text); }
.budget-total-val { font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.budget-row-shared .budget-name { color: var(--primary); }
.budget-row-shared .budget-total-val { color: var(--primary); font-weight: 800; }
.budget-row-bonus .budget-name { color: var(--amber); }
.budget-row-bonus .budget-total-val { color: var(--amber); font-weight: 800; }
.budget-row-total { padding-top: 12px; margin-top: 4px; border-top: 2px solid var(--border) !important; border-bottom: none; }
.budget-row-total .budget-name { font-size: 0.88rem; font-weight: 900; color: var(--text); }
.budget-grand-total { font-size: 1.15rem; font-weight: 900; color: var(--primary); }
.chore-wk-val { color: var(--primary); font-weight: 800; }

/* ── Chore Group Headers ──────────────────────────────── */
.chore-group-header {
  font-size: 0.82rem; font-weight: 900; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 14px 4px 6px; display: flex; align-items: center; gap: 8px;
}
.chore-group-meta { font-weight: 700; color: var(--primary); text-transform: none; letter-spacing: 0; font-size: 0.8rem; margin-left: auto; }

/* Chore list item */
.chore-list-item {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  background: var(--surface-2); border-radius: var(--radius-sm); margin-bottom: 8px;
  border: 1.5px solid var(--border);
}
.chore-list-emoji { width: 44px; height: 44px; background: var(--surface); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.chore-list-info { flex: 1; }
.chore-list-title { font-size: 0.95rem; font-weight: 800; color: var(--text); }
.chore-list-meta { font-size: 0.78rem; font-weight: 600; color: var(--muted); margin-top: 2px; }
.chore-list-actions { display: flex; gap: 6px; }

/* Children cards */
.child-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.child-card-avatar { width: 56px; height: 56px; background: linear-gradient(135deg, #f3e8ff, #e0e7ff); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; flex-shrink: 0; }
.child-card-info { flex: 1; }
.child-card-name { font-size: 1rem; font-weight: 800; color: var(--text); }
.child-card-stats { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.child-stat-pill { font-size: 0.75rem; font-weight: 800; padding: 3px 8px; border-radius: var(--radius-pill); }
.pill-money { background: #fffbeb; color: var(--amber); }
.pill-xp { background: #f3e8ff; color: var(--purple); }
.pill-streak { background: #fff7ed; color: var(--primary); }
.child-card-actions { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }

/* ── Day Picker ──────────────────────────────────────── */
.day-picker { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.day-pill {
  height: 38px; padding: 0 10px; font-family: inherit; font-size: 0.78rem; font-weight: 800;
  color: var(--muted); background: var(--surface-2); border: 2px solid var(--border);
  border-radius: var(--radius-pill); cursor: pointer; transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.day-pill:hover { border-color: var(--primary); color: var(--primary); }
.day-pill.active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(124,92,252,0.35); }

/* ── Emoji Picker ────────────────────────────────────── */
.emoji-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; margin-top: 8px; }
.emoji-btn {
  width: 44px; height: 44px; font-size: 1.5rem; background: var(--surface-2);
  border: 2px solid transparent; border-radius: var(--radius-sm); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; -webkit-tap-highlight-color: transparent;
}
.emoji-btn:hover { background: #fff; border-color: var(--primary); transform: scale(1.1); }
.emoji-btn.selected { background: #fff8f5; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124,92,252,0.18); transform: scale(1.08); }

/* ── Settings (iOS grouped list) ────────────────────────── */
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 0.5px solid var(--border);
  min-height: var(--hit-target);
  gap: var(--space-3);
}
.settings-row:last-child { border-bottom: none; }
.settings-row-label { font-weight: 600; font-size: 0.95rem; color: var(--text); }
.settings-row-desc { font-size: 0.8rem; font-weight: 500; color: var(--muted); margin-top: 2px; line-height: 1.35; }
/* iOS-style toggle: 51x31 (per HIG) with 27x27 thumb */
.toggle {
  width: 51px; height: 31px; background: rgba(120,120,128,0.22);
  border-radius: var(--radius-pill); position: relative; cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
  flex-shrink: 0; border: none;
}
.toggle.on { background: var(--green); }
.toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px; background: #fff;
  border-radius: 50%;
  transition: transform var(--dur-base) var(--ease-soft-spring);
  box-shadow: 0 3px 8px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.1);
}
.toggle.on::after { transform: translateX(20px); }

/* ── Bonus Toggle Row ───────────────────────────────── */
.bonus-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; margin-bottom: 14px;
  background: var(--surface-2); border: 2px solid var(--border); border-radius: var(--radius-sm);
}
.bonus-toggle-label { font-weight: 800; font-size: 0.95rem; color: var(--text); }
.bonus-toggle-desc { font-size: 0.78rem; font-weight: 600; color: var(--muted); margin-top: 2px; }

/* ── Empty States ────────────────────────────────────── */
.empty-state {
  text-align: center; padding: 48px 24px; color: var(--muted);
  background: linear-gradient(180deg, rgba(124,92,252,0.03) 0%, transparent 100%);
  border-radius: var(--radius); border: 1.5px dashed rgba(124,92,252,0.12);
}
.empty-state-emoji { font-size: 3.2rem; margin-bottom: 14px; display: block; }
.empty-state-title { font-size: 1.05rem; font-weight: 800; margin-bottom: 6px; color: var(--text); }
.empty-state-text { font-size: 0.88rem; font-weight: 600; max-width: 280px; margin: 0 auto; line-height: 1.5; }

/* Section heading */
.section-heading { font-size: 0.82rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; margin: 20px 0 10px; display: flex; align-items: center; gap: 6px; }
.divider { height: 1px; background: var(--border); margin: 16px 0; }

/* All done card */
.all-done-card { background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(245,158,11,0.06)); border: 2px solid rgba(16,185,129,0.3); border-radius: var(--radius); padding: 28px; text-align: center; animation: bounce-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.all-done-emoji { font-size: 3.5rem; display: block; margin-bottom: 8px; }
.all-done-title { font-size: 1.2rem; font-weight: 900; color: var(--accent-success); margin-bottom: 4px; }
.all-done-sub { font-size: 0.88rem; font-weight: 700; color: var(--accent-success); }

/* Star particles */
.star-particle { position: absolute; pointer-events: none; font-size: 1.2rem; z-index: 200; animation: float-away 0.8s ease forwards; }
@keyframes float-away { 0% { opacity: 1; transform: scale(1) translateY(0); } 100% { opacity: 0; transform: scale(0.5) translateY(-60px) rotate(20deg); } }

/* ── Keyframe Animations ─────────────────────────────── */
@keyframes pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
@keyframes slide-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slide-down-in { from { opacity: 0; transform: translateX(-50%) translateY(-16px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes bounce-in { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
@keyframes confetti-fall { to { transform: translateY(110vh) rotate(720deg); opacity: 0; } }
@keyframes xp-fill { from { width: 0; } to { width: var(--xp-pct, 0%); } }
@keyframes shimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }
@keyframes glow-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(124,92,252,0.35); } 50% { box-shadow: 0 0 0 8px rgba(124,92,252,0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes celebration-pop { 0% { transform: scale(0) rotate(-10deg); } 60% { transform: scale(1.2) rotate(3deg); } 100% { transform: scale(1) rotate(0deg); } }

/* ── Character Buddy System ──────────────────────────── */

/* Buddy area — floating companion card */
.buddy-inline {
  position: fixed;
  bottom: calc(12px + var(--safe-bottom));
  left: calc(12px + var(--safe-left));
  right: calc(12px + var(--safe-right));
  z-index: var(--z-sticky);
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.buddy-inline:empty {
  padding: 0;
}
.buddy-inline .buddy-panel {
  pointer-events: all;
  opacity: 0;
  transform: translateY(30px) scale(0.92);
  animation: buddy-slide-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  max-width: 420px;
  width: 100%;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-radius: 22px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 12px 36px rgba(124,92,252,0.1);
  border: 1.5px solid rgba(124,92,252,0.08);
}
.buddy-inline.hiding .buddy-panel {
  animation: buddy-slide-out 0.35s ease forwards;
}
@keyframes buddy-slide-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes buddy-slide-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(20px) scale(0.92); }
}

.buddy-panel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px 14px 14px;
}
.buddy-panel-celebrate {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
}

.buddy-char { width: 80px; height: 80px; flex-shrink: 0; }
.buddy-char svg { width: 100%; height: 100%; display: block; }
.buddy-char-sm { width: 58px; height: 58px; flex-shrink: 0; }
.buddy-char-sm svg { width: 100%; height: 100%; display: block; }
.buddy-char-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.buddy-svg-fallback svg { width: 100%; height: 100%; display: block; }

.buddy-trio {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.buddy-bubble {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
  position: relative;
  background: linear-gradient(135deg, #f5f3ff, #fdf2f8);
  border: 1.5px solid rgba(124,92,252,0.1);
  border-radius: 18px;
  padding: 10px 14px;
  box-shadow: 0 2px 8px rgba(124,92,252,0.06);
}
.buddy-bubble::before,
.buddy-bubble::after {
  display: none;
}
/* Celebrate bubble: centred, no tail */
.buddy-panel-celebrate .buddy-bubble {
  border-radius: 18px;
  padding: 12px 18px;
}
.buddy-panel-celebrate .buddy-bubble::before,
.buddy-panel-celebrate .buddy-bubble::after {
  display: none;
}
.buddy-name {
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
}
.buddy-msg {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.45;
}
.buddy-celebrate-msg {
  font-size: 1.1rem;
  font-weight: 900;
  text-align: center;
  background: linear-gradient(135deg, var(--primary), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Bloop animations ─────────────────────────────────── */
@keyframes bloop-float {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  25% { transform: translateY(-6px) rotate(1deg) scale(1.02); }
  50% { transform: translateY(-12px) rotate(0deg) scale(1.04); }
  75% { transform: translateY(-6px) rotate(-1deg) scale(1.02); }
}
@keyframes bloop-idle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  10% { transform: translateY(-2px) rotate(0.5deg); }
  20% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-1px) rotate(-0.3deg); }
  40% { transform: translateY(0) rotate(0deg); }
  60% { transform: translateY(-1px) rotate(0.2deg); }
  70% { transform: translateY(0) rotate(0deg); }
  80% { transform: translateY(-0.5px) rotate(-0.1deg); }
  90% { transform: translateY(0) rotate(0deg); }
}
@keyframes bloop-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-15px) scale(1.1); }
}
.char-bloop svg {
  animation: bloop-float 2.4s ease-in-out infinite, bloop-idle 8s ease-in-out infinite 1s;
  transform-origin: center bottom;
}
.char-bloop.mood-curious svg {
  animation: bloop-float 1.9s ease-in-out infinite, bloop-idle 6s ease-in-out infinite 0.5s;
  filter: hue-rotate(30deg) saturate(1.25);
}
.char-bloop.mood-happy svg {
  animation: bloop-bounce 1.5s ease-in-out infinite, bloop-idle 5s ease-in-out infinite;
  filter: brightness(1.12) saturate(1.1);
}
.char-bloop.mood-surprised svg {
  animation: bloop-bounce 0.8s ease-in-out infinite, bloop-idle 4s ease-in-out infinite;
  filter: hue-rotate(160deg) saturate(1.3) brightness(1.1);
}
.char-bloop.mood-celebrate svg {
  animation: bloop-bounce 0.6s ease-in-out infinite, bloop-idle 3s ease-in-out infinite;
  filter: brightness(1.2) saturate(1.4) hue-rotate(45deg);
}

/* ── Mossy animations ─────────────────────────────────── */
@keyframes mossy-sway {
  0%, 100% { transform: rotate(-4deg) scale(1) translateY(0); }
  25% { transform: rotate(-2deg) scale(1.02) translateY(-3px); }
  50% { transform: rotate(4deg) scale(1.03) translateY(-6px); }
  75% { transform: rotate(2deg) scale(1.02) translateY(-3px); }
}
@keyframes mossy-glow {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 4px rgba(0,184,148,0.3)); }
  50% { filter: brightness(1.08) drop-shadow(0 0 12px rgba(0,184,148,0.55)); }
}
@keyframes mossy-idle {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  15% { transform: translateX(1px) rotate(0.5deg); }
  30% { transform: translateX(0) rotate(0deg); }
  45% { transform: translateX(-1px) rotate(-0.3deg); }
  60% { transform: translateX(0) rotate(0deg); }
  75% { transform: translateX(0.5px) rotate(0.2deg); }
  90% { transform: translateX(0) rotate(0deg); }
}
@keyframes mossy-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-12px) scale(1.08); }
}
.char-mossy svg {
  animation: mossy-sway 3.2s ease-in-out infinite,
             mossy-glow 3.2s ease-in-out infinite,
             mossy-idle 7s ease-in-out infinite 2s;
  transform-origin: center bottom;
}
.char-mossy.mood-curious svg {
  animation: mossy-sway 2.8s ease-in-out infinite,
             mossy-glow 2.8s ease-in-out infinite,
             mossy-idle 5s ease-in-out infinite 1s;
  filter: brightness(1.05) saturate(1.2);
}
.char-mossy.mood-happy svg {
  animation: mossy-bounce 1.8s ease-in-out infinite,
             mossy-glow 1.8s ease-in-out infinite,
             mossy-idle 4s ease-in-out infinite;
  filter: brightness(1.1) saturate(1.3);
}
.char-mossy.mood-surprised svg {
  animation: mossy-bounce 1.2s ease-in-out infinite,
             mossy-glow 1.2s ease-in-out infinite,
             mossy-idle 3s ease-in-out infinite;
  filter: brightness(1.15) saturate(1.4) hue-rotate(20deg);
}
.char-mossy.mood-celebrate svg {
  animation: mossy-bounce 0.8s ease-in-out infinite,
             mossy-glow 0.8s ease-in-out infinite,
             mossy-idle 2s ease-in-out infinite;
  filter: brightness(1.2) saturate(1.5) hue-rotate(40deg);
}

/* ── Zappo animations ─────────────────────────────────── */
@keyframes zappo-bounce {
  0%, 100% { transform: translateY(0) rotate(-4deg) scale(1); }
  20% { transform: translateY(-8px) rotate(2deg) scale(1.05); }
  40% { transform: translateY(-16px) rotate(4deg) scale(1.07); }
  60% { transform: translateY(-8px) rotate(-2deg) scale(1.05); }
  80% { transform: translateY(-4px) rotate(0deg) scale(1.02); }
}
@keyframes zappo-spark {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 5px rgba(253,203,110,0.4)); }
  50% { filter: brightness(1.18) drop-shadow(0 0 16px rgba(253,203,110,0.75)); }
}
@keyframes zappo-idle {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  12% { transform: translateX(2px) rotate(1deg); }
  25% { transform: translateX(0) rotate(0deg); }
  37% { transform: translateX(-1px) rotate(-0.5deg); }
  50% { transform: translateX(0) rotate(0deg); }
  62% { transform: translateX(1px) rotate(0.8deg); }
  75% { transform: translateX(0) rotate(0deg); }
  87% { transform: translateX(-0.5px) rotate(-0.2deg); }
}
@keyframes zappo-energy {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.1) rotate(5deg); }
}
.char-zappo svg {
  animation: zappo-bounce 1.3s ease-in-out infinite,
             zappo-spark 1.3s ease-in-out infinite,
             zappo-idle 5s ease-in-out infinite 1.5s;
  transform-origin: center bottom;
}
.char-zappo.mood-active svg {
  animation: zappo-bounce 0.9s ease-in-out infinite,
             zappo-spark 0.9s ease-in-out infinite,
             zappo-idle 3.5s ease-in-out infinite;
  filter: brightness(1.1) saturate(1.2);
}
.char-zappo.mood-alert svg {
  animation: zappo-energy 0.5s ease-in-out infinite,
             zappo-spark 0.65s ease-in-out infinite,
             zappo-idle 2.5s ease-in-out infinite;
  filter: brightness(1.2) saturate(1.4) hue-rotate(15deg);
}
.char-zappo.mood-celebrate svg {
  animation: zappo-energy 0.4s ease-in-out infinite,
             zappo-spark 0.4s ease-in-out infinite,
             zappo-idle 2s ease-in-out infinite;
  filter: brightness(1.3) saturate(1.6) hue-rotate(30deg);
}

/* ── Reduced Motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .xp-bar-fill { width: var(--xp-pct, 0%) !important; animation: none !important; }
  .buddy-inline { transition: none; }
}

/* ── Landing Page ────────────────────────────────────── */
.landing-screen {
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 20px 80px;
}
.landing-hero {
  text-align: center; margin-bottom: 20px;
}
.landing-characters {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 8px; margin-bottom: 20px;
}
.landing-char { animation: float 3.5s ease-in-out infinite; }
.landing-char:nth-child(2) { animation-delay: 0.5s; }
.landing-char:nth-child(3) { animation-delay: 1s; }
.landing-char-sm { width: 80px; height: 80px; }
.landing-char-lg { width: 110px; height: 110px; }
.landing-hero h2 {
  font-size: 1.9rem; font-weight: 900; color: var(--text);
  margin-bottom: 10px; line-height: 1.15;
  background: linear-gradient(135deg, var(--text) 0%, var(--primary) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.landing-hero p { font-size: 1rem; color: var(--muted); font-weight: 600; max-width: 300px; margin: 0 auto; }
.landing-features {
  display: grid; gap: 10px; width: 100%; max-width: 400px; margin-bottom: 32px;
}
.landing-feature {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border-radius: var(--radius-sm);
  padding: 14px 16px; box-shadow: var(--shadow);
  border: 1.5px solid var(--border);
}

/* ── Accessibility polish ───────────────────────────── */
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.tab-btn:focus-visible,
.child-tab-btn:focus-visible {
  outline: 3px solid rgba(10, 132, 255, 0.35);
  outline-offset: 2px;
}
.landing-feature-icon { font-size: 1.6rem; flex-shrink: 0; }
.landing-feature-text { font-size: 0.9rem; font-weight: 700; color: var(--text); }
.landing-feature-sub { font-size: 0.78rem; font-weight: 600; color: var(--muted); margin-top: 2px; }
.landing-actions {
  display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 400px;
}
.landing-footer { font-size: 0.78rem; color: var(--muted); font-weight: 600; text-align: center; margin-top: 24px; }

/* Family code display */
.family-code-display {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(135deg, #f3e8ff, #fce8e8);
  border-radius: var(--radius-sm); padding: 14px 18px;
  font-size: 1.5rem; font-weight: 900; letter-spacing: 0.1em;
  color: var(--text); border: 2px solid rgba(155,142,196,0.3);
  margin: 12px 0;
}
.family-code-label { font-size: 0.75rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 4px; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 480px) {
  .form-row { grid-template-columns: 1fr; }
  .approval-actions { grid-template-columns: 1fr; }
  .child-hero { padding: 20px 16px; }
  /* Keep avatar and name readable even on small phones */
  .child-avatar { width: 62px; height: 62px; font-size: 2rem; }
  .child-hero-name { font-size: 1.65rem; }
}
@media (min-width: 600px) {
  .container { padding: 0 28px; }
  .chore-card  { padding: 20px; }
}

/* ── Leaderboard ────────────────────────────────────── */
.leaderboard { padding: 14px 16px; }
.lb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  font-weight: 700; font-size: 0.9rem; color: var(--text);
  transition: background 0.15s;
}
.lb-row:not(:last-child) { border-bottom: 1px solid var(--border); }
.lb-medal { font-size: 1.6rem; width: 30px; text-align: center; flex-shrink: 0; }
.lb-name { font-weight: 800; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-current { background: rgba(124,92,252,0.1); border-radius: var(--radius-sm); border: 2px solid rgba(124,92,252,0.3); }

/* ── Badge Grid ─────────────────────────────────────── */
.badge-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
}
.badge-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 12px 6px; border-radius: var(--radius-sm);
  text-align: center; transition: all 0.2s;
}
.badge-emoji { font-size: 1.8rem; }
.badge-title { font-size: 0.7rem; font-weight: 800; color: var(--text); line-height: 1.2; }
.badge-earned {
  background: linear-gradient(135deg, #fffbeb, #f3e8ff);
  border: 2px solid rgba(245,158,11,0.3);
  box-shadow: 0 2px 8px rgba(245,158,11,0.15);
}
.badge-locked {
  background: var(--surface-2); border: 2px solid var(--border);
  opacity: 0.78; filter: grayscale(0.4);
}
.badge-locked .badge-emoji { filter: grayscale(0.7); opacity: 0.65; }
.badge-locked .badge-title { color: var(--text-muted-strong); }

/* ── Bonus Badge Chip ───────────────────────────────── */
.bonus-badge {
  display: inline-flex; align-items: center; gap: 2px;
  background: linear-gradient(135deg, #fffbeb, #fff5e0);
  color: var(--amber); font-size: 0.72rem; font-weight: 900;
  padding: 2px 8px; border-radius: var(--radius-pill);
  border: 1.5px solid rgba(245,158,11,0.35);
  vertical-align: middle; margin-left: 4px;
}

.bonus-badge.bonus-badge-gold {
  background: linear-gradient(135deg, #fff1b8, #ffe08a);
  color: #9a6500;
  border-color: rgba(255,191,0,0.36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.68);
}

.bonus-badge.bonus-badge-xp {
  background: linear-gradient(135deg, var(--primary), var(--purple));
  color: #fff;
  border-color: rgba(99,102,241,0.26);
}

/* ── Streak Fire Glow ───────────────────────────────── */
.streak-fire { display: inline; }
.streak-fire-glow {
  animation: fire-glow 1.5s ease-in-out infinite;
  border: 2px solid rgba(124,92,252,0.4);
}
@keyframes fire-glow {
  0%, 100% { box-shadow: 0 0 4px rgba(124,92,252,0.3), 0 0 8px rgba(245,158,11,0.2); }
  50% { box-shadow: 0 0 12px rgba(124,92,252,0.5), 0 0 20px rgba(245,158,11,0.35); }
}

/* ── Weekly Challenge Card ──────────────────────────── */
.weekly-challenge-card {
  background: linear-gradient(135deg, #f3e8ff 0%, #e8f4f8 50%, #fef3e8 100%) !important;
  border: 2px solid rgba(155,142,196,0.3);
}

/* ── Multi-Parent Login ─────────────────────────────── */
.parent-login-option { min-height: 80px; }

/* ── Celebration Epic ───────────────────────────────── */
.celebration-card-epic {
  padding: 48px 36px;
  background: linear-gradient(135deg, #fff 0%, #f3e8ff 50%, #fff5e0 100%);
}
.celebration-card-epic .celebration-emoji { font-size: 6rem; }
.celebration-level-title {
  font-size: 1.4rem; font-weight: 900; margin-top: 12px;
  background: linear-gradient(135deg, var(--primary), var(--purple), var(--amber));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ══════════════════════════════════════════════════════════
   ENHANCED ANIMATIONS — Gamification & Micro-interactions
   ══════════════════════════════════════════════════════════ */

/* ── A. Confetti improvements ───────────────────────── */
.confetti-circle { border-radius: 50%; }
.confetti-rect { border-radius: 2px; }
.confetti-star { border-radius: 0; background: none !important; line-height: 1; }
@keyframes confetti-fall {
  0% { transform: translateY(-20px) rotate(0deg) scale(1); opacity: 1; }
  25% { transform: translateY(27vh) rotate(calc(var(--spin, 360deg) * 0.25)) scale(1.1); }
  50% { transform: translateY(55vh) rotate(calc(var(--spin, 360deg) * 0.5)) scale(0.9); opacity: 0.9; }
  75% { transform: translateY(82vh) rotate(calc(var(--spin, 360deg) * 0.75)) scale(1.05); opacity: 0.6; }
  100% { transform: translateY(110vh) rotate(var(--spin, 720deg)) scale(0.8); opacity: 0; }
}

/* ── B. Floating +XP animation ──────────────────────── */
.floating-xp {
  position: absolute;
  pointer-events: none;
  z-index: 500;
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--purple);
  text-shadow: 0 2px 8px rgba(155,142,196,0.5);
  animation: float-xp 1.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  transform: translateX(-50%);
}
@keyframes float-xp {
  0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(0.7); }
  30% { opacity: 1; transform: translateX(-50%) translateY(-30px) scale(1.3); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-90px) scale(1); }
}

/* ── C. Floating gem/coin emoji animation ───────────── */
.floating-emoji {
  position: absolute;
  pointer-events: none;
  z-index: 500;
  font-size: 2rem;
  animation: float-emoji 1.3s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  transform: translateX(-50%);
}
@keyframes float-emoji {
  0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(0.5) rotate(0deg); }
  40% { opacity: 1; transform: translateX(-50%) translateY(-40px) scale(1.4) rotate(15deg); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-100px) scale(0.8) rotate(-10deg); }
}

/* ── D. Streak fire animation ───────────────────────── */
.streak-fire-glow {
  animation: streak-fire-pulse 1.5s ease-in-out infinite !important;
  border: 2px solid rgba(124,92,252,0.4) !important;
  position: relative;
}
@keyframes streak-fire-pulse {
  0%, 100% {
    box-shadow: 0 0 6px rgba(124,92,252,0.4), 0 0 12px rgba(245,158,11,0.2), inset 0 0 6px rgba(124,92,252,0.1);
    border-color: rgba(124,92,252,0.4);
  }
  50% {
    box-shadow: 0 0 16px rgba(124,92,252,0.6), 0 0 28px rgba(245,158,11,0.4), inset 0 0 12px rgba(124,92,252,0.2);
    border-color: rgba(245,158,11,0.6);
  }
}

/* ── E. Badge unlock celebration ────────────────────── */
.badge-starburst {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,158,11,0.5) 0%, rgba(245,158,11,0.15) 40%, transparent 70%);
  animation: starburst 1.5s ease-out forwards;
  pointer-events: none;
  z-index: 499;
}
@keyframes starburst {
  0% { transform: scale(0); opacity: 1; }
  50% { transform: scale(2.5); opacity: 0.8; }
  100% { transform: scale(4); opacity: 0; }
}
.badge-bounce-emoji {
  animation: badge-big-bounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both 0.1s !important;
  font-size: 5.5rem !important;
}
@keyframes badge-big-bounce {
  0% { transform: scale(0) rotate(-20deg); }
  50% { transform: scale(1.4) rotate(10deg); }
  70% { transform: scale(0.9) rotate(-5deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.badge-celebration-card {
  background: linear-gradient(135deg, #fff 0%, #fffbeb 40%, #f3e8ff 100%) !important;
  border: 2px solid rgba(245,158,11,0.4);
}

/* ── F. Level-up enhancements ───────────────────────── */
.screen-flash {
  position: fixed;
  inset: 0;
  background: white;
  z-index: 600;
  pointer-events: none;
  animation: screen-flash-anim 0.5s ease-out forwards;
}
@keyframes screen-flash-anim {
  0% { opacity: 0.9; }
  100% { opacity: 0; }
}
.celebration-card-glow {
  animation: celebration-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             celebration-glow-pulse 2s ease-in-out infinite 0.5s !important;
}
@keyframes celebration-glow-pulse {
  0%, 100% { box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 0 0 rgba(124,92,252,0.3); }
  50% { box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 30px 10px rgba(155,142,196,0.4); }
}

/* ── G. Chore card micro-animations ─────────────────── */
.chore-card {
  animation: chore-card-entrance 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}
@keyframes chore-card-entrance {
  0% { opacity: 0; transform: translateY(20px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.chore-card:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: var(--shadow-lg) !important;
}
.chore-card:active {
  transform: scale(0.98) !important;
}

/* Ready button pulsing glow */
.done-btn {
  animation: ready-btn-pulse 2s ease-in-out infinite !important;
}
@keyframes ready-btn-pulse {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(124,92,252,0.3), 0 0 0 0 rgba(124,92,252,0.25);
  }
  50% {
    box-shadow: 0 4px 16px rgba(124,92,252,0.45), 0 0 0 8px rgba(124,92,252,0);
  }
}

/* Done checkmark pop animation */
.status-chip-approved {
  animation: checkmark-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}
@keyframes checkmark-pop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── H. Character bounce & wobble ───────────────────── */
.buddy-char, .buddy-char-sm {
  animation: buddy-bounce-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes buddy-bounce-in {
  0% { transform: scale(0) translateY(20px); }
  60% { transform: scale(1.1) translateY(-4px); }
  100% { transform: scale(1) translateY(0); }
}
.buddy-char-img, .buddy-svg-fallback {
  animation: buddy-wobble 3s ease-in-out infinite;
}
@keyframes buddy-wobble {
  0%, 100% { transform: rotate(-2deg) scale(1); }
  25% { transform: rotate(2deg) scale(1.02); }
  50% { transform: rotate(-1deg) scale(1); }
  75% { transform: rotate(1.5deg) scale(1.01); }
}

/* ── I. Weekly challenge progress bar animation ─────── */
.weekly-challenge-card .xp-bar-fill {
  animation: wc-bar-fill 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
  transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes wc-bar-fill {
  from { width: 0; }
  to { width: var(--xp-pct, 0%); }
}

/* ── J. Leaderboard rank change arrow ───────────────── */
.lb-rank-up {
  display: inline-block;
  animation: rank-up-bounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  margin-left: 4px;
}
@keyframes rank-up-bounce {
  0% { transform: translateY(8px); opacity: 0; }
  50% { transform: translateY(-4px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ── Progress dots enhanced ─────────────────────────── */
.progress-dot.done {
  animation: dot-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}
@keyframes dot-pop {
  0% { transform: scale(0); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* ── Landing character bounce enhancement ───────────── */
.landing-char {
  animation: landing-bounce 3s ease-in-out infinite !important;
}
.landing-char:nth-child(1) { animation-delay: 0s !important; }
.landing-char:nth-child(2) { animation-delay: 0.4s !important; }
.landing-char:nth-child(3) { animation-delay: 0.8s !important; }
@keyframes landing-bounce {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  30% { transform: translateY(-10px) rotate(1deg); }
  60% { transform: translateY(-4px) rotate(0deg); }
}

/* ── All-done card extra celebration ────────────────── */
.all-done-card {
  animation: all-done-entrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}
@keyframes all-done-entrance {
  0% { transform: scale(0.5) rotate(-5deg); opacity: 0; }
  60% { transform: scale(1.05) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ── Child avatar bounce ────────────────────────────── */
.child-avatar {
  animation: avatar-float 4s ease-in-out infinite, avatar-entrance 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}
@keyframes avatar-entrance {
  0% { transform: scale(0) rotate(-10deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ── Hero stats entrance ────────────────────────────── */
.stats-row .stat {
  animation: stat-entrance 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.stats-row .stat:nth-child(1) { animation-delay: 0.1s; }
.stats-row .stat:nth-child(2) { animation-delay: 0.2s; }
.stats-row .stat:nth-child(3) { animation-delay: 0.3s; }
@keyframes stat-entrance {
  0% { transform: translateY(10px) scale(0.8); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ── XP bar shimmer effect ──────────────────────────── */
.xp-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
  animation: xp-shimmer 2s ease-in-out infinite;
  border-radius: inherit;
}
.xp-bar-fill { position: relative; overflow: hidden; }
@keyframes xp-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── Badge grid entrance ────────────────────────────── */
.badge-item {
  animation: badge-entrance 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.badge-item:nth-child(1) { animation-delay: 0.05s; }
.badge-item:nth-child(2) { animation-delay: 0.1s; }
.badge-item:nth-child(3) { animation-delay: 0.15s; }
.badge-item:nth-child(4) { animation-delay: 0.2s; }
.badge-item:nth-child(5) { animation-delay: 0.25s; }
.badge-item:nth-child(6) { animation-delay: 0.3s; }
.badge-item:nth-child(7) { animation-delay: 0.35s; }
.badge-item:nth-child(8) { animation-delay: 0.4s; }
@keyframes badge-entrance {
  0% { transform: scale(0) rotate(-10deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.badge-earned:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(245,158,11,0.3);
}

/* ── Leaderboard row entrance ───────────────────────── */
.lb-row {
  animation: lb-row-entrance 0.3s ease both;
}
.lb-row:nth-child(1) { animation-delay: 0.05s; }
.lb-row:nth-child(2) { animation-delay: 0.15s; }
.lb-row:nth-child(3) { animation-delay: 0.25s; }
@keyframes lb-row-entrance {
  0% { transform: translateX(-10px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* ── Approval card entrance ─────────────────────────── */
.approval-card {
  animation: approval-entrance 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}
@keyframes approval-entrance {
  0% { transform: translateX(-15px) scale(0.95); opacity: 0; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

/* ── Focus FAB pulse when active ────────────────────── */
.focus-mode-fab.active {
  animation: fab-active-pulse 1.2s ease-in-out infinite !important;
}
@keyframes fab-active-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 20px rgba(124,92,252,0.45); }
  50% { transform: scale(1.08); box-shadow: 0 8px 28px rgba(124,92,252,0.6); }
}

/* ── Buddy Picker (child profile) ───────────────────── */
.buddy-picker {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 6px;
}
.buddy-pick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 12px;
  border: 2.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--surface-2);
  min-width: 80px;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  user-select: none;
}
.buddy-pick-card:hover {
  border-color: var(--purple);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(155,142,196,0.25);
}
.buddy-pick-card.buddy-pick-selected {
  border-color: var(--primary);
  background: linear-gradient(135deg, rgba(124,92,252,0.08), rgba(155,142,196,0.12));
  box-shadow: 0 4px 14px rgba(124,92,252,0.25);
}

/* ── Undo button in activity rows ───────────────────── */
.activity-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 600;
}
.activity-item:last-child {
  border-bottom: none;
}

/* ── Amber button (for balance adjustments) ─────────── */
.btn-amber {
  background: var(--amber);
  color: #fff;
  box-shadow: 0 4px 14px rgba(245,164,74,0.35);
}
.btn-amber:hover { background: #e0923a; box-shadow: 0 6px 20px rgba(245,164,74,0.45); transform: translateY(-1px); }

/* ── Sanction card (parent side) ────────────────────── */
.sanction-card {
  border: 1.5px solid rgba(245,164,74,0.25);
  background: linear-gradient(135deg, var(--surface) 80%, rgba(245,164,74,0.05) 100%);
}

/* ── Sanction history item ──────────────────────────── */
.sanction-history-item {
  align-items: flex-start;
}

/* ── Child-side sanctions card ──────────────────────── */
.child-sanctions-card {
  border: 1.5px solid rgba(155,142,196,0.2);
  background: linear-gradient(135deg, var(--surface) 80%, rgba(155,142,196,0.05) 100%);
}
.child-sanction-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.child-sanction-item:last-child { border-bottom: none; }
.child-sanction-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.child-sanction-body { flex: 1; min-width: 0; }
.child-sanction-amount {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--muted);
}
.child-sanction-reason {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  margin-top: 2px;
}
.child-sanction-date {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════
   GAMIFICATION OVERHAUL — Part 2: ADHD/ASD Friendly UI
   ══════════════════════════════════════════════════════════ */

/* ── Balance Adjustment Form ────────────────────────── */
.adjustment-card {
  border: 1.5px solid rgba(155,142,196,0.25);
  background: linear-gradient(135deg, var(--surface) 80%, rgba(155,142,196,0.05) 100%);
}
.adj-type-toggle {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.adj-type-btn {
  flex: 1; height: 44px; border-radius: var(--radius-pill);
  font-family: inherit; font-weight: 800; font-size: 0.88rem;
  border: 2px solid var(--border); background: var(--surface-2);
  cursor: pointer; transition: all 0.15s;
}
.adj-type-btn.active.adj-type-add {
  background: var(--green); color: #fff; border-color: var(--green);
  box-shadow: 0 3px 10px rgba(126,200,164,0.4);
}
.adj-type-btn.active.adj-type-deduct {
  background: var(--amber); color: #fff; border-color: var(--amber);
  box-shadow: 0 3px 10px rgba(245,164,74,0.4);
}
.adj-type-btn.active.adj-value-cash {
  background: var(--green); color: #fff; border-color: var(--green);
  box-shadow: 0 3px 10px rgba(126,200,164,0.4);
}
.adj-type-btn.active.adj-value-xp {
  background: var(--purple); color: #fff; border-color: var(--purple);
  box-shadow: 0 3px 10px rgba(168,85,247,0.35);
}

/* ── Child Adjustment Card ──────────────────────────── */
.child-adj-card {
  border: 1.5px solid rgba(155,142,196,0.2);
  background: linear-gradient(135deg, var(--surface) 80%, rgba(126,200,164,0.05) 100%);
}
.child-adj-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.child-adj-item:last-child { border-bottom: none; }
.child-adj-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.child-adj-body { flex: 1; min-width: 0; }
.child-adj-amount { font-size: 0.9rem; font-weight: 800; }
.adj-amount-add { color: var(--green); }
.adj-amount-deduct { color: var(--amber); }
.child-adj-reason { font-size: 0.8rem; font-weight: 600; color: var(--muted); margin-top: 2px; }
.child-adj-date { font-size: 0.75rem; font-weight: 600; color: var(--muted); flex-shrink: 0; margin-top: 2px; }

/* ── Progress Ring SVG ──────────────────────────────── */
.progress-ring { display: block; }
.progress-ring-bg { }
.progress-ring-circle {
  transform-origin: center;
  animation: ring-fill-in 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes ring-fill-in {
  from { stroke-dasharray: 0 var(--ring-circ, 999); }
  to   { stroke-dasharray: var(--ring-dash, 0) var(--ring-gap, 999); }
}
.child-hero-ring {
  flex-shrink: 0;
  animation: avatar-entrance 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both 0.1s;
}

/* ── Enhanced Leaderboard ───────────────────────────── */
.leaderboard-enhanced {
  padding: 16px;
}
.leaderboard-awards {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px;
}
.award-chip {
  font-size: 0.72rem; font-weight: 800; padding: 4px 10px;
  border-radius: var(--radius-pill); white-space: nowrap;
}
.award-star {
  background: linear-gradient(135deg, #fffbeb, #fff5e0);
  color: var(--amber); border: 1.5px solid rgba(245,164,74,0.3);
}
.award-streak {
  background: linear-gradient(135deg, #fff5e0, #ffe8d6);
  color: var(--primary); border: 1.5px solid rgba(124,92,252,0.3);
}
.podium-wrap {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 6px; margin-bottom: 10px;
}
.podium-slot {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 8px 8px; border-radius: var(--radius-sm);
  min-width: 80px; text-align: center; border: 2px solid transparent;
  transition: all 0.2s;
}
.podium-empty { min-width: 80px; }
.podium-first {
  background: linear-gradient(135deg, #fffbeb, #fff5e0);
  border-color: rgba(245,164,74,0.4); padding-top: 18px;
  box-shadow: 0 4px 16px rgba(245,164,74,0.2);
  animation: podium-rise 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both 0.1s;
}
.podium-second {
  background: linear-gradient(135deg, #f8faff, #eff2ff);
  border-color: rgba(91,164,207,0.3);
  animation: podium-rise 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both 0.2s;
}
.podium-third {
  background: linear-gradient(135deg, #fff8f5, #fef3e8);
  border-color: rgba(124,92,252,0.25);
  animation: podium-rise 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both 0.3s;
}
.podium-me {
  outline: 3px solid var(--primary); outline-offset: 2px;
}
@keyframes podium-rise {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.podium-avatar { font-size: 2.2rem; line-height: 1; margin-bottom: 2px; }
.podium-medal  { font-size: 1.4rem; margin-bottom: 4px; }
.podium-name   { font-size: 0.75rem; font-weight: 800; color: var(--text); line-height: 1.2; }
.podium-xp     { font-size: 0.7rem; font-weight: 800; color: var(--purple); margin-top: 2px; }
.lb-context-msg {
  text-align: center; font-size: 0.82rem; font-weight: 800;
  padding: 8px 12px; border-radius: var(--radius-sm); margin-top: 8px;
}
.lb-context-lead {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  color: var(--green); border: 1.5px solid rgba(126,200,164,0.3);
}
.lb-context-chase {
  background: linear-gradient(135deg, #fff5e0, #fef3e8);
  color: var(--primary); border: 1.5px solid rgba(124,92,252,0.25);
}

/* ── Daily Goal Card ────────────────────────────────── */
.daily-goal-card {
  background: linear-gradient(135deg, #faf8ff, #f8fbff) !important;
  border: 1.5px solid rgba(155,142,196,0.2) !important;
}
.daily-goal-ring-wrap {
  flex-shrink: 0;
  animation: bounce-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both 0.2s;
}
.daily-goal-ring { display: block; }

/* ── Streak Heatmap ─────────────────────────────────── */
.streak-card {
  background: linear-gradient(135deg, #fff8f5, #fffbf5) !important;
  border: 1.5px solid rgba(124,92,252,0.15) !important;
}
.streak-heatmap {
  display: flex; gap: 6px; justify-content: space-between;
}
.streak-day {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; flex: 1;
}
.streak-day-label {
  font-size: 0.6rem; font-weight: 800; color: var(--muted);
  text-transform: uppercase;
}
.streak-day-dot {
  font-size: 1.1rem; line-height: 1;
}
.streak-day-empty .streak-day-dot { opacity: 0.3; font-size: 0.9rem; }
.streak-day-done  { }
.streak-day-partial { }
.streak-day-today .streak-day-label {
  color: var(--primary); font-weight: 900;
}

/* ── XP Levels Path ─────────────────────────────────── */
.xp-levels-card { }
.levels-path {
  display: flex; flex-direction: column; gap: 8px;
}
.level-node {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; border-radius: var(--radius-sm);
  border: 2px solid var(--border); transition: all 0.2s;
}
.level-node-done {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border-color: rgba(126,200,164,0.4);
  opacity: 0.8;
}
.level-node-current {
  background: linear-gradient(135deg, #fff5e0, #fef3e8);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124,92,252,0.15);
  animation: level-current-pulse 2s ease-in-out infinite;
}
@keyframes level-current-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(124,92,252,0.15); }
  50%       { box-shadow: 0 0 0 6px rgba(124,92,252,0.08); }
}
.level-node-locked {
  background: var(--surface-2); opacity: 0.65;
}
.level-node-emoji { font-size: 1.6rem; flex-shrink: 0; }
.level-node-info  { flex: 1; }
.level-node-num   { font-size: 0.7rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.level-node-title { font-size: 0.95rem; font-weight: 900; color: var(--text); }
.level-node-status { font-size: 0.75rem; font-weight: 700; margin-top: 2px; }
.level-status-done    { color: var(--green); }
.level-status-current { color: var(--primary); }
.level-status-next    { color: var(--purple); font-weight: 800; }
.level-status-locked  { color: var(--muted); }

/* ── Badge Collection Grid ──────────────────────────── */
.badge-collection {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}
.badge-item-lg {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 10px 6px; border-radius: var(--radius-sm);
  text-align: center; transition: all 0.2s; border: 2px solid transparent;
}
.badge-item-lg.badge-earned {
  background: linear-gradient(135deg, #fffbeb, #f3e8ff);
  border-color: rgba(245,158,11,0.3);
  box-shadow: 0 2px 8px rgba(245,158,11,0.15);
}
.badge-item-lg.badge-locked {
  background: var(--surface-2);
  border-color: var(--border);
  opacity: 0.7;
}
.badge-item-lg.badge-item-close {
  background: linear-gradient(135deg, #fffbeb, #fff5e0);
  border-color: rgba(245,164,74,0.4);
  animation: badge-near-pulse 1.8s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(245,164,74,0);
}
@keyframes badge-near-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(245,164,74,0.3); }
  50%       { box-shadow: 0 0 16px rgba(245,164,74,0.55); }
}
.badge-next {
  padding: 10px 14px;
  background: linear-gradient(135deg, #f3e8ff, #fef3e8);
  border-radius: var(--radius-sm);
  border: 2px solid rgba(155,142,196,0.3);
}

/* ── Milestone Rewards Path ─────────────────────────── */
.reward-path {
  display: flex; flex-direction: column; gap: 10px;
}
.reward-node {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  border: 2px solid var(--border); transition: all 0.2s;
}
.reward-claimed {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border-color: rgba(126,200,164,0.4);
}
.reward-locked {
  background: var(--surface-2); opacity: 0.8;
}
.reward-close {
  background: linear-gradient(135deg, #fffbeb, #fff5e0);
  border-color: rgba(245,164,74,0.4);
  animation: badge-near-pulse 2s ease-in-out infinite;
}
.reward-node-emoji { font-size: 1.8rem; flex-shrink: 0; }
.reward-node-info  { flex: 1; }
.reward-node-title { font-size: 0.92rem; font-weight: 900; color: var(--text); }
.reward-node-xp    { font-size: 0.75rem; font-weight: 700; color: var(--muted); margin-top: 2px; }
.reward-progress-bar-wrap {
  height: 6px; background: rgba(0,0,0,0.08);
  border-radius: 99px; overflow: hidden; margin-top: 6px;
}
.reward-progress-bar {
  height: 100%; background: linear-gradient(90deg, var(--purple), var(--primary));
  border-radius: 99px; transition: width 1s ease;
}

/* ── This week's star card ──────────────────────────── */
.week-star-card {
  background: linear-gradient(135deg, #fffbeb, #f3e8ff);
  border: 2px solid rgba(245,164,74,0.3);
}

/* ── Adj history item ───────────────────────────────── */
.adj-history-item { align-items: flex-start; }

/* ── Weekly Schedule View ────────────────────────────── */
.week-schedule-list { display: flex; flex-direction: column; gap: 8px; }
.dashboard-panel {
  border: 1.5px solid rgba(228, 192, 220, 0.9);
  box-shadow: 0 10px 28px rgba(98, 61, 124, 0.06);
}
.dashboard-panel-header { margin-bottom: 12px; }
.dashboard-panel-title { color: #7d1f57; }
.dashboard-panel-subtitle {
  font-size: 0.82rem;
  color: #9f4d7c;
  font-weight: 650;
}
.week-day-row {
  border-radius: 14px;
  border: 1.5px solid rgba(238, 205, 230, 0.9);
  padding: 11px 12px;
  background: linear-gradient(140deg, #fff9fe, #f9f3fd);
  transition: all 0.2s;
}
.week-day-today {
  border-color: rgba(177, 118, 214, 0.7);
  background: linear-gradient(135deg, rgba(124,92,252,0.11), rgba(234, 84, 162, 0.08));
  box-shadow: 0 4px 14px rgba(124,92,252,0.16);
}
.week-day-past { opacity: 0.78; }
.week-day-label {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap;
}
.week-day-name { font-weight: 900; font-size: 0.9rem; color: var(--text); min-width: 28px; }
.week-day-date { font-weight: 700; font-size: 0.82rem; color: var(--muted); }
.week-today-badge {
  background: var(--primary); color: #fff; font-size: 0.7rem; font-weight: 800;
  padding: 2px 8px; border-radius: var(--radius-pill);
}
.week-done-badge {
  background: var(--green); color: #fff; font-size: 0.7rem; font-weight: 800;
  padding: 2px 8px; border-radius: var(--radius-pill);
}
.week-day-potential-label {
  margin-left: auto;
  font-size: 0.74rem;
  font-weight: 800;
  color: #a06186;
  background: rgba(239, 219, 231, 0.9);
  border: 1px solid rgba(222, 184, 208, 0.9);
  padding: 2px 8px;
  border-radius: 999px;
}
.week-day-chores { display: flex; flex-direction: column; gap: 4px; }
.week-chore-chip {
  display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 700;
  padding: 7px 9px; border-radius: 10px;
  background: rgba(214, 190, 207, 0.18);
  color: #6d5870;
}
.week-chore-chip.week-chore-done { background: rgba(126,200,164,0.15); color: var(--green); }
.week-chore-chip.week-chore-pending { background: rgba(245,164,74,0.15); color: #b36b00; }
.week-chore-chip.week-chore-missed { opacity: 0.72; text-decoration: line-through; }
.week-chore-name { flex: 1; }
.week-chore-val { font-weight: 800; font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.week-chore-chip.week-chore-done .week-chore-val { color: var(--green); }
.week-free-day { font-size: 0.82rem; font-weight: 700; color: var(--muted); font-style: italic; }

/* ── Earning potential stats row ─────────────────────── */
.earning-potential-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.ep-stat {
  flex: 1;
  text-align: center;
  padding: 10px 6px 8px;
  background: linear-gradient(145deg, #fff9fd, #f8f1fb);
  border-radius: 14px;
  border: 1.5px solid rgba(226, 192, 220, 0.95);
}
.ep-stat-earned { border-color: rgba(126,200,164,0.45); }
.ep-stat-bonus {
  border-color: rgba(155,142,196,0.4);
  background: linear-gradient(145deg, rgba(155,142,196,0.12), rgba(226, 192, 220, 0.2));
}
.ep-stat-max { border-color: rgba(233, 92, 166, 0.35); }
.ep-stat-val, .ep-stat-value {
  font-size: 1.1rem; font-weight: 900; color: var(--text); display: block; line-height: 1.1;
}
.ep-stat-val.ep-green, .ep-stat-value.ep-green   { color: var(--green); }
.ep-stat-val.ep-purple, .ep-stat-value.ep-purple  { color: var(--purple); }
.ep-stat-val.ep-primary, .ep-stat-value.ep-primary{ color: var(--primary); }
.ep-stat-label {
  font-size: 0.7rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em; margin-top: 3px;
}
.ep-progress-track {
  height: 14px;
  background: rgba(144, 118, 142, 0.14);
  border-radius: 999px;
  overflow: hidden;
  margin: 12px 0 9px;
}
.ep-progress-fill-bar {
  height: 100%;
  background: linear-gradient(90deg, #22b985, #e84f9f);
  border-radius: 999px;
  transition: width 1s ease;
}
.ep-progress-message {
  font-size: 0.84rem;
  font-weight: 760;
  color: #9d4f7c;
  text-align: center;
}
.ep-progress-wrap { margin-top: 10px; }
.ep-progress-bar {
  height: 8px; border-radius: var(--radius-pill);
  background: var(--border); overflow: hidden;
}
.ep-progress-fill {
  height: 100%; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--primary), var(--purple));
  transition: width 0.6s ease;
}
.ep-progress-label {
  font-size: 0.75rem; font-weight: 700; color: var(--muted);
  text-align: right; margin-top: 4px;
}

/* ── Earnings simple cards (Today/Week) ───────────────── */
.earnings-simple-card {
  border: 1.5px solid var(--border);
  background: var(--surface);
  text-align: center;
}
.earnings-simple-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.earnings-simple-amount {
  font-size: 2.6rem;
  font-weight: 950;
  line-height: 1;
  color: var(--accent-success);
  margin-bottom: 2px;
}
.earnings-simple-available {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
}
.earnings-progress-wrap {
  margin: 14px 0 10px;
}
.earnings-progress-track {
  height: 12px;
  background: color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.earnings-progress-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--xp-bar-gradient);
  transition: width 0.8s cubic-bezier(0.34,1.56,0.64,1);
  min-width: 0;
}
.earnings-simple-note {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  margin-top: 4px;
}

/* ── Notifications FAB badge ─────────────────────────── */
.notif-fab { /* position: fixed inherited from .focus-mode-fab */ }
.notif-fab-badge {
  position: absolute; top: 4px; right: 4px;
  background: var(--primary); color: #fff;
  font-size: 0.6rem; font-weight: 900; line-height: 1;
  min-width: 16px; height: 16px; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px; pointer-events: none;
}

/* ── Notifications overlay (iOS bottom sheet pattern) ──── */
.notif-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: var(--z-notification); display: flex; align-items: flex-end; justify-content: center;
  animation: fade-in var(--dur-fast) var(--ease-out);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.notif-overlay-card {
  background: rgba(255,255,255,0.98);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%; max-width: 480px; max-height: 75dvh;
  display: flex; flex-direction: column;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.18);
  animation: slide-up var(--dur-overlay) var(--ease-spring);
  padding-bottom: var(--safe-bottom);
  position: relative;
}
/* Drag handle indicator (iOS sheet affordance) */
.notif-overlay-card::before {
  content: ''; position: absolute; top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 5px; background: var(--border-strong);
  border-radius: var(--radius-pill); pointer-events: none;
}
.notif-overlay-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5) var(--space-5) var(--space-3); border-bottom: 0.5px solid var(--border);
  flex-shrink: 0;
}
.notif-overlay-body {
  overflow-y: auto; padding: var(--space-3) var(--space-5) var(--space-6); flex: 1;
  -webkit-overflow-scrolling: touch;
}
@keyframes slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Notifications card ───────────────────────────────── */
.notif-card { border-left: 4px solid var(--purple); }
.notif-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.notif-item:last-child { border-bottom: none; padding-bottom: 0; }
.notif-item-new { background: rgba(155,142,196,0.07); border-radius: var(--radius-sm); padding: 10px 8px; margin: 0 -8px; }
.notif-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1; margin-top: 2px; }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-size: 0.88rem; font-weight: 800; color: var(--text); }
.notif-text  { font-size: 0.82rem; font-weight: 600; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.notif-time  { font-size: 0.72rem; font-weight: 700; color: var(--muted); margin-top: 4px; }

/* ── Confetti celebration for daily goal completion ─── */
@keyframes daily-goal-complete-ring {
  0%   { stroke: var(--primary); }
  50%  { stroke: var(--green); filter: drop-shadow(0 0 8px rgba(126,200,164,0.7)); }
  100% { stroke: var(--green); }
}


/* ── Payout Celebration Overlay ───────────────────────────────── */
#payout-celebration {
  position: fixed; inset: 0; z-index: var(--z-critical);
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-overlay) var(--ease-out);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: calc(var(--space-5) + var(--safe-top)) calc(var(--space-5) + var(--safe-right)) calc(var(--space-5) + var(--safe-bottom)) calc(var(--space-5) + var(--safe-left));
}
#payout-celebration.payout-cel-show {
  opacity: 1; pointer-events: all;
}
.payout-cel-inner {
  background: rgba(255,255,255,0.98);
  border-radius: var(--radius-xl);
  padding: 40px 28px 32px;
  text-align: center;
  max-width: 340px;
  width: 100%;
  transform: translateY(20px) scale(0.92);
  transition: transform var(--dur-overlay) var(--ease-spring);
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
#payout-celebration.payout-cel-show .payout-cel-inner {
  transform: translateY(0) scale(1);
}
.payout-cel-emoji {
  font-size: 4rem; line-height: 1; margin-bottom: 8px;
  animation: payout-bounce 0.6s 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes payout-bounce {
  from { transform: scale(0.5) rotate(-10deg); opacity:0; }
  to   { transform: scale(1) rotate(0deg);    opacity:1; }
}
.payout-cel-title {
  font-size: 2rem; font-weight: 900; letter-spacing: 0.04em;
  background: linear-gradient(135deg, var(--primary), var(--green));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
}
.payout-cel-amount {
  font-size: 3.5rem; font-weight: 900; color: var(--green);
  line-height: 1; margin-bottom: 12px;
  animation: payout-pop 0.5s 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes payout-pop {
  from { transform: scale(0.7); opacity:0; }
  to   { transform: scale(1);   opacity:1; }
}
.payout-cel-msg {
  font-size: 1rem; font-weight: 700; color: var(--muted);
  line-height: 1.5; margin-bottom: 24px;
}
.payout-cel-close {
  font-size: 1.1rem; padding: 14px 32px; width: 100%;
  animation: payout-fade-in 0.4s 0.9s both;
}
@keyframes payout-fade-in {
  from { opacity:0; transform: translateY(10px); }
  to   { opacity:1; transform: translateY(0); }
}

/* ── Combo System ─────────────────────────────────────────────── */
.combo-popup {
  position: absolute; z-index: var(--z-celebration); pointer-events: none;
  font-family: inherit; font-weight: 900; text-align: center;
  transform: translate(-50%, -100%) scale(0.5);
  animation: combo-in 0.5s var(--ease-spring) forwards;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.combo-hot  { font-size: 1.4rem; color: #f59e0b; }
.combo-epic { font-size: 1.8rem; color: #ef4444; }
.combo-legendary { font-size: 2.2rem; color: #a855f7; text-shadow: 0 0 20px rgba(168,85,247,0.6); }
.combo-x { letter-spacing: 0.06em; }
.combo-num { font-size: 120%; }
@keyframes combo-in {
  0%   { transform: translate(-50%,-100%) scale(0.5); opacity:0; }
  50%  { transform: translate(-50%,-100%) scale(1.3); opacity:1; }
  70%  { transform: translate(-50%,-100%) scale(0.95); }
  100% { transform: translate(-50%,-100%) scale(1) translateY(-20px); opacity:0; }
}

/* Screen shake for big combos */
.screen-shake { animation: shake 0.4s ease-in-out; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  10%     { transform: translateX(-4px) rotate(-0.5deg); }
  30%     { transform: translateX(4px) rotate(0.5deg); }
  50%     { transform: translateX(-3px); }
  70%     { transform: translateX(3px); }
  90%     { transform: translateX(-1px); }
}

/* ── Sticker Drop Overlay ─────────────────────────────────────── */
.sticker-drop-overlay {
  position: fixed; inset:0; z-index: var(--z-photo-viewer);
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,0.5);
  opacity:0; pointer-events:none;
  transition: opacity var(--dur-overlay) var(--ease-out);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: calc(var(--space-5) + var(--safe-top)) calc(var(--space-5) + var(--safe-right)) calc(var(--space-5) + var(--safe-bottom)) calc(var(--space-5) + var(--safe-left));
}
.sticker-drop-overlay.show { opacity:1; pointer-events:all; }
.sticker-drop-inner {
  background: rgba(255,255,255,0.98); border-radius: var(--radius-xl);
  padding: 32px 28px; text-align:center;
  transform: translateY(20px) scale(0.92) rotate(-3deg);
  transition: transform var(--dur-overlay) var(--ease-spring);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.sticker-drop-overlay.show .sticker-drop-inner { transform: translateY(0) scale(1) rotate(0); }
.sticker-drop-label {
  font-size:0.8rem; font-weight:900; letter-spacing:0.1em;
  color:var(--purple); text-transform:uppercase; margin-bottom:8px;
}
.sticker-drop-emoji {
  font-size: 5rem; line-height:1;
  animation: sticker-bounce 0.6s 0.2s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes sticker-bounce {
  from { transform: scale(0) rotate(-20deg); }
  to   { transform: scale(1) rotate(0); }
}
.sticker-drop-msg {
  font-size:0.85rem; font-weight:700; color:var(--muted); margin-top:8px;
}

/* ── Sticker Collection Grid ──────────────────────────────────── */
.sticker-grid {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.sticker-item {
  font-size: 3.5rem; width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: rgba(155, 142, 196, 0.05) 0px 0px 0px 3px, rgba(0, 0, 0, 0.15) 1px 5px 5px, rgba(0, 0, 0, 0.1) 0px 2px 4px;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s;
  cursor: default;
  position: relative;
  overflow: hidden;
}
.sticker-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 17px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 40%, transparent 70%);
  pointer-events: none;
}
.sticker-item::after {
  content: '';
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  background: rgba(255,255,255,0.95);
  border-radius: 0 0 24px 0;
  box-shadow:
    -3px 3px 6px rgba(0,0,0,0.15),
    inset -1px 1px 2px rgba(255,255,255,0.8);
  transform: perspective(40px) rotateX(35deg);
  pointer-events: none;
  border: 1px solid rgba(0,0,0,0.05);
}
.sticker-item:hover {
  transform: scale(1.15) rotate(-2deg);
  box-shadow:
    0 0 0 4px var(--primary),
    0 10px 24px rgba(0,0,0,0.2);
}

/* .mystery-bonus-popup removed — now uses showToast() */

/* ── Daily Login Bonus Overlay ────────────────────────────────── */
.daily-bonus-overlay {
  position:fixed; inset:0; z-index: var(--z-critical);
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,0.55);
  opacity:0; pointer-events:none;
  transition: opacity var(--dur-overlay) var(--ease-out);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: calc(var(--space-5) + var(--safe-top)) calc(var(--space-5) + var(--safe-right)) calc(var(--space-5) + var(--safe-bottom)) calc(var(--space-5) + var(--safe-left));
}
.daily-bonus-overlay.show { opacity:1; pointer-events:all; }
.daily-bonus-inner {
  background: rgba(255,255,255,0.98); border-radius: var(--radius-xl);
  padding: 36px 28px; text-align:center; max-width:300px; width:100%;
  transform: translateY(20px) scale(0.92);
  transition: transform var(--dur-overlay) var(--ease-spring);
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.daily-bonus-overlay.show .daily-bonus-inner { transform: translateY(0) scale(1); }
.daily-bonus-wave {
  font-size:3.5rem; line-height:1; margin-bottom:8px;
  animation: wave-hand 0.8s ease-in-out;
}
@keyframes wave-hand {
  0%,100% { transform: rotate(0); }
  25%     { transform: rotate(20deg); }
  50%     { transform: rotate(-10deg); }
  75%     { transform: rotate(15deg); }
}
.daily-bonus-title {
  font-size:1.3rem; font-weight:900; color:var(--text); margin-bottom:12px;
}
.daily-bonus-xp {
  font-size:3rem; font-weight:900; line-height:1;
  background: linear-gradient(135deg, var(--primary), var(--purple));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation: daily-xp-pop 0.5s 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes daily-xp-pop {
  from { transform: scale(0.5); opacity:0; }
  to   { transform: scale(1); opacity:1; }
}
.daily-bonus-label {
  font-size:0.85rem; font-weight:700; color:var(--muted); margin-top:4px; margin-bottom:8px;
}
.daily-bonus-streak {
  font-size:0.9rem; font-weight:800; color:var(--primary); margin-bottom:12px;
  animation: streak-glow 1.5s ease-in-out infinite alternate;
}
@keyframes streak-glow {
  from { text-shadow: 0 0 4px rgba(124,92,252,0.3); }
  to   { text-shadow: 0 0 12px rgba(124,92,252,0.6); }
}
.daily-bonus-close { width:100%; font-size:1rem; padding:12px; margin-top:8px; }

/* ── Enhanced Streak Fire ─────────────────────────────────────── */
.streak-fire-glow {
  animation: fire-pulse 1.5s ease-in-out infinite alternate !important;
}
@keyframes fire-pulse {
  from { filter: drop-shadow(0 0 4px rgba(124,92,252,0.3)); }
  to   { filter: drop-shadow(0 0 12px rgba(255,100,50,0.6)); }
}

/* ── Theme Picker ─────────────────────────────────────────────── */
.theme-picker {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px; margin-top: 8px;
}
.theme-pick-card {
  border: 2.5px solid var(--border); border-radius: var(--radius);
  padding: 0; text-align: center; cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  position: relative; overflow: hidden;
  background: var(--surface-2);
}
.theme-pick-card:active { transform: scale(0.95); }
.theme-pick-selected {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-glow), 0 6px 20px rgba(0,0,0,0.12);
  transform: scale(1.02);
}
.theme-pick-selected .theme-pick-check {
  opacity: 1; transform: scale(1);
}
.theme-pick-check {
  position: absolute; top: 6px; right: 6px;
  background: var(--primary); color: #fff; width: 22px; height: 22px;
  border-radius: 50%; font-size: 0.7rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0);
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  z-index: 2;
}
.theme-pick-preview {
  width: 100%; height: 44px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  position: relative;
}
.theme-pick-preview-bar {
  position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
}
.theme-pick-dots {
  display: flex; gap: 4px; align-items: center;
}
.theme-pick-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.5); }
.theme-pick-body {
  padding: 8px 10px 10px; display: flex; align-items: center; gap: 8px;
}
.theme-pick-emoji { font-size: 1.6rem; line-height: 1; }
.theme-pick-name { font-size: 0.78rem; font-weight: 800; color: var(--text); text-align: left; }

/* ── Enhanced Card Animations ─────────────────────────────────── */
.chore-card {
  animation: card-slide-in 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
.chore-card:nth-child(1) { animation-delay: 0s; }
.chore-card:nth-child(2) { animation-delay: 0.06s; }
.chore-card:nth-child(3) { animation-delay: 0.12s; }
.chore-card:nth-child(4) { animation-delay: 0.18s; }
.chore-card:nth-child(5) { animation-delay: 0.24s; }
.chore-card:nth-child(6) { animation-delay: 0.3s; }
@keyframes card-slide-in {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Bounce on done button hover */
.done-btn {
  transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.done-btn:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 6px 20px rgba(124,92,252,0.45) !important;
}
.done-btn:active {
  transform: scale(0.95) !important;
}

/* ── Stat Counter Animations ──────────────────────────────────── */
.stat-value {
  animation: stat-count-in 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes stat-count-in {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ── Card Hover Lift ──────────────────────────────────────────── */
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(124,92,252,0.1), 0 12px 30px rgba(0,0,0,0.06);
}

/* ── Badge Earned Sparkle ─────────────────────────────────────── */
.badge-earned {
  animation: badge-sparkle 3s ease-in-out infinite;
}
@keyframes badge-sparkle {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50%      { filter: drop-shadow(0 0 8px rgba(245,158,11,0.5)); }
}

/* ── Daily Goal Ring Pulse on 100% ────────────────────────────── */
.daily-goal-ring-complete {
  animation: goal-ring-celebrate 1.5s ease-in-out infinite;
}
@keyframes goal-ring-celebrate {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(16,185,129,0.3)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 16px rgba(16,185,129,0.6)); transform: scale(1.05); }
}

/* ── XP Bar Shimmer ───────────────────────────────────────────── */
.xp-progress-fill {
  position: relative; overflow: hidden;
}
.xp-progress-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: xp-shimmer 2s ease-in-out infinite;
}
@keyframes xp-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── Tab Switch Animation ─────────────────────────────────────── */
#child-tab-content {
  animation: tab-fade-in 0.3s ease both;
}
@keyframes tab-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Sticker Hover Wobble ─────────────────────────────────────── */
.sticker-item:hover {
  animation: sticker-wobble 0.5s ease-in-out;
}
@keyframes sticker-wobble {
  0%   { transform: scale(1.3) rotate(0deg); }
  25%  { transform: scale(1.3) rotate(10deg); }
  50%  { transform: scale(1.3) rotate(-8deg); }
  75%  { transform: scale(1.3) rotate(5deg); }
  100% { transform: scale(1.3) rotate(0deg); }
}

/* ── Floating Particle Ambient ────────────────────────────────── */
@keyframes ambient-float {
  0%   { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; }
}

/* ── Release polish pass: premium motion tuning ───────────────── */
:root {
  --motion-premium-fast: 180ms;
  --motion-premium-med: 280ms;
  --motion-premium-slow: 480ms;
  --ease-premium-ui: cubic-bezier(0.22, 1, 0.36, 1);
}

.app-header::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(124,92,252,0.2) 50%, transparent 100%);
  pointer-events: none;
}

.card,
.chore-card,
.landing-feature,
.login-option-card,
.child-select-btn,
.buddy-pick-card,
.tab-btn,
.child-tab-btn,
.btn,
.done-btn {
  transition:
    transform var(--motion-premium-med) var(--ease-premium-ui),
    box-shadow var(--motion-premium-med) var(--ease-premium-ui),
    border-color var(--motion-premium-fast) ease,
    background var(--motion-premium-med) ease,
    filter var(--motion-premium-fast) ease !important;
}

.card:hover,
.landing-feature:hover,
.login-option-card:hover,
.child-select-btn:hover,
.buddy-pick-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(124,92,252,0.1), 0 16px 36px rgba(0,0,0,0.06);
}

.chore-card {
  border-color: rgba(124,92,252,0.06);
}
.chore-card:hover {
  transform: translateY(-2px) scale(1.003) !important;
  border-color: rgba(124,92,252,0.15) !important;
  box-shadow: 0 8px 24px rgba(124,92,252,0.12), 0 16px 36px rgba(0,0,0,0.06) !important;
}

.done-btn {
  animation-duration: 2.6s !important;
}
.done-btn:hover {
  transform: translateY(-1px) scale(1.02) !important;
}

.tab-btn.active,
.child-tab-btn.active {
  box-shadow: 0 4px 14px rgba(124,92,252,0.3);
}

.child-hero {
  animation: hero-premium-breathe 6s ease-in-out infinite;
}
@keyframes hero-premium-breathe {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 8px 28px rgba(124,92,252,0.2);
  }
  50% {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(124,92,252,0.28);
  }
}

#child-tab-content,
#parent-tab-content {
  animation: tab-fade-premium var(--motion-premium-med) ease both;
}
@keyframes tab-fade-premium {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .child-hero,
  #child-tab-content,
  #parent-tab-content {
    animation: none !important;
  }
}

/* ── Mini-Game ────────────────────────────────────────────────── */
.mini-game-icon-wrap {
  font-size: 2.2rem; width: 52px; height: 52px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--purple));
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
  animation: mini-game-pulse 2s ease-in-out infinite;
  box-shadow: 0 4px 14px var(--primary-glow);
}
.mini-game-icon-wrap.played {
  background: var(--surface-2); box-shadow: none; animation: none; filter: grayscale(0.5);
}
@keyframes mini-game-pulse {
  0%,100% { transform: scale(1) rotate(0deg); }
  50%     { transform: scale(1.08) rotate(-3deg); }
}

/* Overlay */
.mini-game-overlay {
  position: fixed; inset: 0; z-index: var(--z-game);
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--space-5) + var(--safe-top)) calc(var(--space-5) + var(--safe-right)) calc(var(--space-5) + var(--safe-bottom)) calc(var(--space-5) + var(--safe-left));
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-overlay) var(--ease-out);
  /* will-change hints the GPU to promote this to its own compositing layer */
  will-change: opacity;
}
.mini-game-overlay.show { opacity: 1; pointer-events: all; touch-action: none; -webkit-overflow-scrolling: auto; overflow: hidden; }

.mini-game-inner {
  background: rgba(255,255,255,0.98); border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-4); width: 100%; max-width: 380px;
  transform: translateY(20px) scale(0.94);
  transition: transform var(--dur-overlay) var(--ease-spring);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.mini-game-inner.mg-dark {
  background: linear-gradient(180deg, #1a1040 0%, #2d1b69 40%, #1a1040 100%);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
}
.mini-game-overlay.show .mini-game-inner { transform: translateY(0) scale(1); }

.mini-game-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mini-game-title { font-size: 1.2rem; font-weight: 900; color: var(--text); }
.mini-game-meta { display: flex; align-items: center; gap: 8px; }
.mini-game-moves { font-size: 0.82rem; font-weight: 800; color: var(--muted); }
.mini-game-msg { font-size: 0.82rem; font-weight: 800; color: var(--green);
  animation: mini-msg-pop 0.4s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes mini-msg-pop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Card grid */
.mini-game-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-bottom: 12px;
}
.mg-card {
  aspect-ratio: 1; border-radius: 10px; cursor: pointer;
  perspective: 600px;
  transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
}
.mg-card:active:not(.matched) { transform: scale(0.9); }

.mgc-inner {
  width: 100%; height: 100%; position: relative;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
  border-radius: 10px;
}
.mg-card.flipped .mgc-inner,
.mg-card.matched .mgc-inner { transform: rotateY(180deg); }

.mgc-front, .mgc-back {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem;
}
.mgc-front {
  background: linear-gradient(135deg, rgba(168,85,247,0.4), rgba(255,106,122,0.3));
  color: rgba(255,255,255,0.5); font-size: 1.3rem;
  box-shadow: 0 4px 16px rgba(168,85,247,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.15);
}
.mgc-back {
  background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.15);
  transform: rotateY(180deg);
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}
.mg-card.matched .mgc-back {
  background: linear-gradient(135deg, rgba(16,185,129,0.2), rgba(16,185,129,0.08));
  border-color: var(--green);
  box-shadow: 0 0 16px rgba(16,185,129,0.3);
  animation: matched-bounce 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes matched-bounce {
  0%   { transform: rotateY(180deg) scale(0.8); }
  60%  { transform: rotateY(180deg) scale(1.15); }
  100% { transform: rotateY(180deg) scale(1); }
}
.mini-game-hint { font-size: 0.75rem; font-weight: 700; color: var(--muted); text-align: center; }

/* Win screen */
.mini-game-complete { text-align: center; padding: 32px 20px; }
.mini-game-win-emoji {
  font-size: 4rem; line-height: 1; margin-bottom: 10px;
  animation: win-bounce 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes win-bounce {
  from { transform: scale(0) rotate(-10deg); }
  to   { transform: scale(1) rotate(0); }
}
.mini-game-win-grade { font-size: 1.5rem; font-weight: 900; color: var(--text); margin-bottom: 12px; }
.mini-game-win-stats { font-size: 0.9rem; font-weight: 700; color: var(--muted); margin-bottom: 8px; line-height: 1.8; }
.mini-game-xp-reward {
  font-size: 1.3rem; font-weight: 900;
  background: linear-gradient(135deg, var(--primary), var(--purple));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: xp-reward-pop 0.5s 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes xp-reward-pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.mini-game-done-btn { width: 100%; font-size: 1rem; padding: 13px; margin-top: 16px; }

/* ── Game Launcher Card ─────────────────────────────────────── */
.games-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.game-slot {
  text-align: center; padding: 18px 10px; border-radius: var(--radius-sm);
  background: linear-gradient(145deg, #fff, var(--surface-3));
  border: 1.5px solid rgba(124,92,252,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 4px 16px rgba(124,92,252,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.game-slot:not(.game-played):active { transform: scale(0.96); }
.game-slot.game-played { opacity: 0.82; }
.game-slot-icon {
  font-size: 2.4rem; line-height: 1; margin-bottom: 6px;
}
.game-slot-pulse {
  display: inline-block;
  animation: game-icon-bob 2s ease-in-out infinite;
}
@keyframes game-icon-bob {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-4px) scale(1.08); }
}
.game-slot-name {
  font-size: 0.82rem; font-weight: 800; color: var(--text); margin-bottom: 8px;
}
.game-slot-btn { width: 100%; font-size: 0.85rem; }
.game-slot-done {
  font-size: 0.85rem; font-weight: 800; color: var(--green); padding: 6px 0;
}

/* ── Bubble Blast Game ──────────────────────────────────────── */
.bb-inner {
  width: 94%; max-width: 400px; height: 80vh; max-height: 600px;
  background: linear-gradient(180deg, #1a1040 0%, #2d1b69 40%, #1a1040 100%);
  border-radius: var(--radius); padding: 16px;
  display: flex; flex-direction: column;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
}
.mini-game-overlay.show .bb-inner { transform: scale(1) translateY(0); }

.bb-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
}
.bb-title {
  font-size: 1.3rem; font-weight: 900; color: #fff;
  text-shadow: 0 2px 8px rgba(168,85,247,0.5);
}
.bb-timer {
  font-size: 1.1rem; font-weight: 900; color: #ffd87c;
  transition: color 0.3s ease;
}
.bb-score-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; padding: 0 2px;
}
.bb-score { font-size: 1rem; font-weight: 900; color: #fff; }
.bb-combo {
  font-size: 1rem; font-weight: 900; color: #ff6a7a;
  text-shadow: 0 0 10px rgba(255,106,122,0.5);
}

.bb-arena {
  flex: 1; position: relative; overflow: hidden;
  border-radius: var(--radius-sm);
  background: radial-gradient(ellipse at center bottom, rgba(168,85,247,0.15) 0%, transparent 70%);
  border: 1px solid rgba(255,255,255,0.08);
}
.bb-start-msg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 900; color: rgba(255,255,255,0.5);
  animation: bb-start-pulse 1.5s ease-in-out infinite;
}
@keyframes bb-start-pulse {
  0%,100% { opacity: 0.5; transform: scale(1); }
  50%     { opacity: 1; transform: scale(1.05); }
}

.bb-bubble {
  position: absolute; bottom: -60px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), rgba(168,85,247,0.2) 60%, rgba(168,85,247,0.05));
  border: 2px solid rgba(255,255,255,0.2);
  box-shadow: 0 0 20px rgba(168,85,247,0.3), inset 0 -4px 8px rgba(0,0,0,0.1);
  transition: transform 0.1s ease;
  user-select: none;
  -webkit-user-select: none;
}
.bb-bubble:active { transform: scale(0.85) !important; }

.bb-golden {
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5), rgba(255,216,124,0.4) 60%, rgba(245,158,11,0.2));
  border-color: rgba(255,216,124,0.5);
  box-shadow: 0 0 24px rgba(255,216,124,0.5), inset 0 -4px 8px rgba(0,0,0,0.1);
}

.bb-bubble.bb-popped {
  animation: bubble-pop 0.28s ease-out forwards;
  pointer-events: none;
}
@keyframes bubble-pop {
  0%   { transform: scale(1); opacity: 1; }
  40%  { transform: scale(1.3); opacity: 0.8; }
  100% { transform: scale(0); opacity: 0; }
}

.bb-bubble.bb-missed {
  animation: bubble-fade 0.3s ease-out forwards;
  pointer-events: none;
}
@keyframes bubble-fade {
  to { opacity: 0; transform: scale(0.5); }
}

@keyframes bubble-float {
  0%   { transform: translateY(0) scale(0.3); opacity: 0; }
  10%  { transform: translateY(-5%) scale(1); opacity: 1; }
  90%  { transform: translateY(-85vh) scale(0.9); opacity: 0.8; }
  100% { transform: translateY(-95vh) scale(0.7); opacity: 0; }
}

.bb-point-float {
  position: absolute; pointer-events: none;
  font-size: 0.9rem; font-weight: 900; color: #ffd87c;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  animation: point-float-up 0.7s ease-out forwards;
}
@keyframes point-float-up {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  30%  { transform: translate(-50%, -80%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -160%) scale(0.8); opacity: 0; }
}

/* ── Enhanced Micro-Interactions ────────────────────────────── */
.card {
  animation: card-enter 0.35s ease both;
}
@keyframes card-enter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card:nth-child(2) { animation-delay: 0.05s; }
.card:nth-child(3) { animation-delay: 0.1s; }
.card:nth-child(4) { animation-delay: 0.15s; }
.card:nth-child(5) { animation-delay: 0.2s; }

/* XP gain sparkle */
@keyframes xp-sparkle {
  0%   { box-shadow: 0 0 0 0 rgba(255,216,124,0.6); }
  50%  { box-shadow: 0 0 20px 4px rgba(255,216,124,0.3); }
  100% { box-shadow: 0 0 0 0 rgba(255,216,124,0); }
}

/* Chore card completion shimmer */
.chore-card.done-true {
  position: relative; overflow: hidden;
}
.chore-card.done-true::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.15) 45%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.15) 55%, transparent 60%);
  animation: shimmer-across 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmer-across {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* Tab switch slide */
.child-tab-btn.active {
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
}

/* Badge pulse when close to earning */
.badge-item-close {
  animation: badge-almost 2s ease-in-out infinite;
}
@keyframes badge-almost {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.05); box-shadow: 0 0 12px rgba(245,158,11,0.3); }
}

/* Streak fire glow */
.hero-stat-val {
  transition: all 0.3s ease;
}

/* ── Full-Screen Celebration Overlay ─────────────────────────── */
.fullscreen-celeb {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0);
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease, background 0.5s ease;
}
.fullscreen-celeb.fc-show {
  opacity: 1; pointer-events: all;
  background: rgba(10,5,30,0.88);
}
.fc-fireworks {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.fc-content {
  position: relative; z-index: 2;
  text-align: center; padding: 32px 24px;
  max-width: 360px; width: 90%;
  transform: scale(0.7) translateY(40px);
  transition: transform 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
.fullscreen-celeb.fc-show .fc-content {
  transform: scale(1) translateY(0);
}
.fc-flash {
  position: absolute; inset: -100px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,216,124,0.3) 0%, transparent 70%);
  animation: fc-flash-pulse 2s ease-in-out infinite;
}
@keyframes fc-flash-pulse {
  0%,100% { opacity: 0.3; transform: scale(0.8); }
  50%     { opacity: 0.7; transform: scale(1.2); }
}
.fc-emoji {
  font-size: 6rem; line-height: 1; margin-bottom: 12px;
  animation: fc-emoji-entrance 0.8s cubic-bezier(0.34,1.56,0.64,1) both;
  filter: drop-shadow(0 4px 20px rgba(255,216,124,0.5));
}
@keyframes fc-emoji-entrance {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.3) rotate(5deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.fc-title {
  font-size: 2.5rem; font-weight: 900; letter-spacing: 0.05em; color: #fff;
  text-shadow: 0 4px 20px rgba(168,85,247,0.6);
  background: linear-gradient(135deg, #ffd87c, #ff6a7a, #a855f7);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: fc-title-in 0.6s 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes fc-title-in {
  from { transform: scale(0.5) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.fc-level {
  font-size: 2rem; font-weight: 900; color: #ffd87c;
  text-shadow: 0 2px 12px rgba(255,216,124,0.5);
  animation: fc-pop 0.5s 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes fc-pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.fc-level-name {
  font-size: 1.3rem; font-weight: 900; color: #fff;
  margin-top: 4px; margin-bottom: 8px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  animation: fc-pop 0.5s 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
}
.fc-child-name {
  font-size: 1.1rem; font-weight: 700; color: rgba(255,255,255,0.8);
  margin-bottom: 12px;
  animation: fc-pop 0.5s 0.7s cubic-bezier(0.34,1.56,0.64,1) both;
}
.fc-stars {
  font-size: 1.5rem; letter-spacing: 0.3em; margin-bottom: 20px;
  animation: fc-stars-spin 3s linear infinite;
}
@keyframes fc-stars-spin {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
.fc-close-btn {
  width: 100%; font-size: 1.1rem; padding: 14px;
  animation: fc-pop 0.5s 1s cubic-bezier(0.34,1.56,0.64,1) both;
  box-shadow: 0 6px 24px rgba(255,106,122,0.4);
}

/* ── Fireworks ──────────────────────────────────────────────── */
.firework {
  position: absolute; width: 4px; height: 4px;
}
.fw-particle {
  position: absolute; width: 6px; height: 6px;
  border-radius: 50%;
  animation: fw-burst 0.9s ease-out forwards;
  box-shadow: 0 0 6px 2px currentColor;
}
@keyframes fw-burst {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  20%  { opacity: 1; }
  100% { transform: translate(calc(cos(var(--angle)) * var(--dist)), calc(sin(var(--angle)) * var(--dist))) scale(0); opacity: 0; }
}

/* ── Pick for me ─────────────────────────────────────── */
.chores-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.chores-section-header .chores-section-title { margin-bottom: 0; }
.pick-for-me-btn {
  background: linear-gradient(135deg, var(--purple), var(--blue));
  color: #fff; border: none; border-radius: var(--radius-pill); padding: 8px 16px;
  font-family: inherit; font-size: 0.78rem; font-weight: 800; cursor: pointer;
  box-shadow: 0 4px 12px rgba(168,85,247,0.3); transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.pick-for-me-btn:active { transform: scale(0.95); }
.chore-picked {
  box-shadow: 0 0 0 3px var(--purple), 0 8px 24px rgba(168,85,247,0.3) !important;
  transform: scale(1.02);
  animation: chore-picked-pulse 1.5s ease-in-out 3 !important;
}
@keyframes chore-picked-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--purple), 0 8px 24px rgba(168,85,247,0.3); }
  50% { box-shadow: 0 0 0 5px var(--purple), 0 8px 28px rgba(168,85,247,0.45); }
}

/* ── Break it down (sub-steps) ──────────────────────── */
/* AUDHD-key feature: breaking tasks into small chunks reduces overwhelm */
/* Side-by-side: Ready and Break it down are equally prominent choices */
.chore-action-row { display: flex; flex-direction: row; gap: 10px; align-items: stretch; }
.chore-action-row .done-btn { flex: 1; }
.breakdown-btn {
  flex: 1;
  background: var(--surface-3); border: 2.5px solid rgba(168,85,247,0.35); border-radius: var(--radius);
  padding: 0 10px; height: 68px; font-family: inherit; font-size: 0.9rem; font-weight: 900;
  color: var(--purple); cursor: pointer; transition: all 0.2s; white-space: nowrap;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 10px rgba(168,85,247,0.12);
}
.breakdown-btn:hover { background: #f3e8ff; border-color: var(--purple); box-shadow: 0 4px 14px rgba(168,85,247,0.22); }
.breakdown-btn:active { transform: scale(0.97); }
.breakdown-steps {
  margin-top: 14px; padding-top: 14px; border-top: 2px dashed rgba(168,85,247,0.25);
  animation: slide-up 0.3s ease both;
}
.breakdown-header {
  font-size: 0.92rem; font-weight: 900; color: var(--purple); margin-bottom: 12px;
}
/* Steps are big enough to tap easily and read quickly */
.breakdown-step {
  display: flex; align-items: center; gap: 12px; padding: 14px 14px;
  background: var(--surface-2); border-radius: 14px; margin-bottom: 8px;
  cursor: pointer; transition: all 0.2s; -webkit-tap-highlight-color: transparent;
  border: 2px solid transparent;
}
.breakdown-step:has(.breakdown-check:checked) {
  background: rgba(16,185,129,0.08); text-decoration: line-through; color: var(--muted);
  border-color: rgba(16,185,129,0.2);
}
.breakdown-check {
  width: 28px; height: 28px; border-radius: 8px; accent-color: var(--green);
  flex-shrink: 0; cursor: pointer;
}
.breakdown-step-text { font-size: 1rem; font-weight: 700; color: var(--text); line-height: 1.3; }

/* ── Game XP Settings (parent) ───────────────────────── */
.game-xp-settings { padding: 0 4px; }
.game-xp-grid { display: flex; flex-direction: column; gap: 6px; }
.game-xp-row {
  display: flex; align-items: center; gap: 8px;
}
.game-xp-label { flex: 1; font-size: 0.82rem; font-weight: 700; color: var(--text); }
.game-xp-input {
  width: 60px; height: 36px; text-align: center; border: 1.5px solid var(--border);
  border-radius: 10px; font-family: inherit; font-size: 0.88rem; font-weight: 800;
  color: var(--purple); background: var(--surface-2);
}
.game-xp-unit { font-size: 0.75rem; font-weight: 700; color: var(--muted); width: 24px; }

/* ── Steps Builder (parent chore form) ───────────────── */
.steps-builder { display: flex; flex-direction: column; gap: 6px; }
.step-row {
  display: flex; align-items: center; gap: 8px;
  animation: slide-up 0.2s ease both;
}
.step-row-num {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--purple); color: #fff; font-size: 0.72rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.step-input {
  flex: 1; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 10px;
  font-family: inherit; font-size: 0.85rem; font-weight: 600;
}
.step-remove { padding: 4px 8px !important; font-size: 0.85rem !important; color: var(--muted) !important; }

/* ── Messages Tab ───────────────────────────────────── */
.buddy-tab-greeting {
  display: flex; align-items: center; gap: 14px; padding: 16px; margin-bottom: 16px;
  background: rgba(168,85,247,0.06); border-radius: 18px; border: 1.5px solid rgba(168,85,247,0.12);
}
.buddy-tab-img { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; }
.buddy-tab-msg { font-size: 0.92rem; font-weight: 700; color: var(--text); line-height: 1.4; }
.messages-list { display: flex; flex-direction: column; gap: 8px; }
.message-card {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
  background: var(--surface); border-radius: 16px; box-shadow: var(--shadow);
  border-left: 3px solid transparent;
  transition: all 0.2s; animation: slide-up 0.3s ease both;
}
.message-card-new {
  border-left-color: var(--primary);
  background: linear-gradient(135deg, rgba(124,92,252,0.04), var(--surface));
}
.message-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; }
.message-body { flex: 1; min-width: 0; }
.message-title { font-size: 0.88rem; font-weight: 800; color: var(--text); margin-bottom: 2px; }
.message-text { font-size: 0.82rem; font-weight: 600; color: var(--muted); line-height: 1.35; }
.message-time { font-size: 0.7rem; font-weight: 700; color: var(--muted); white-space: nowrap; flex-shrink: 0; }

/* Adjustment cards — visually distinct from message notifications */
.message-card-adj {
  background: var(--surface-2);
  border-left-color: var(--amber);
}
.message-card-adj.message-card-new {
  background: linear-gradient(135deg, rgba(245,158,11,0.06), var(--surface-2));
  border-left-color: var(--amber);
}
/* icon gets a subtle pill background so it reads as "data" not "chat" */
.message-card-adj .message-icon {
  background: rgba(245,158,11,0.12); border-radius: 10px;
  padding: 6px; font-size: 1.1rem; margin-top: 0;
}
.message-card-adj .message-title { font-size: 1rem; font-weight: 900; }

/* ── Calm Corner ────────────────────────────────────── */
.calm-corner { padding-bottom: 24px; }
.calm-buddy-intro {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; padding: 28px 20px; margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(126,200,164,0.12), rgba(168,85,247,0.08));
  border-radius: 24px; border: 1.5px solid rgba(126,200,164,0.2);
}
.calm-buddy-img {
  width: 120px; height: 120px; object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.1));
  animation: calm-buddy-float 4s ease-in-out infinite;
}
@keyframes calm-buddy-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.calm-intro-msg { font-size: 1.05rem; font-weight: 700; color: var(--text); line-height: 1.5; max-width: 320px; }
.calm-section-title { font-size: 1rem; font-weight: 900; color: var(--text); margin-bottom: 4px; }
.calm-section-sub { font-size: 0.82rem; font-weight: 600; color: var(--muted); margin-bottom: 16px; line-height: 1.4; }
.calm-breathing-card { margin-bottom: 16px; text-align: center; }
.calm-breath-container { position: relative; display: flex; align-items: center; justify-content: center; height: 220px; }
.calm-breath-circle {
  width: 140px; height: 140px; border-radius: 50%; cursor: pointer;
  background: linear-gradient(135deg, rgba(126,200,164,0.2), rgba(168,85,247,0.15));
  border: 3px solid rgba(126,200,164,0.4);
  display: flex; align-items: center; justify-content: center;
  transition: all 4s ease-in-out; -webkit-tap-highlight-color: transparent;
}
.calm-breath-circle.inhale {
  width: 200px; height: 200px;
  background: linear-gradient(135deg, rgba(126,200,164,0.35), rgba(168,85,247,0.25));
  border-color: rgba(126,200,164,0.7);
  box-shadow: 0 0 40px rgba(126,200,164,0.3);
}
.calm-breath-circle.exhale {
  width: 120px; height: 120px;
  background: linear-gradient(135deg, rgba(126,200,164,0.1), rgba(168,85,247,0.08));
  border-color: rgba(168,85,247,0.3);
}
.calm-breath-text {
  font-size: 0.92rem; font-weight: 800; color: var(--text);
  pointer-events: none; text-align: center;
}
.calm-breath-buddy { position: absolute; bottom: 4px; right: 12px; }
.calm-breath-buddy-img {
  width: 72px; height: 72px; object-fit: contain; opacity: 0.85;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.08));
  animation: calm-buddy-float 4s ease-in-out infinite;
  animation-delay: -2s;
}
.calm-breath-count { font-size: 0.82rem; font-weight: 700; color: var(--muted); margin-top: 8px; }

.calm-grounding-card { margin-bottom: 16px; }
.calm-grounding-steps { display: flex; flex-direction: column; gap: 8px; }
.calm-ground-step {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: var(--surface-2); border-radius: 14px; cursor: pointer;
  transition: all 0.25s; -webkit-tap-highlight-color: transparent;
}
.calm-ground-step.ground-done {
  background: rgba(16,185,129,0.1); border: 1.5px solid rgba(16,185,129,0.3);
}
.calm-ground-num {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  color: #fff; font-weight: 900; font-size: 1rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.calm-ground-step.ground-done .calm-ground-num {
  background: var(--green);
}
.calm-ground-text { flex: 1; font-size: 0.88rem; font-weight: 600; color: var(--text); }
.calm-ground-check { font-size: 1.1rem; flex-shrink: 0; }

.calm-affirmations-card { text-align: center; }
.calm-affirmation {
  font-size: 1.3rem; font-weight: 900; color: var(--purple); padding: 20px 0;
  transition: opacity 0.2s, transform 0.2s; line-height: 1.4;
}

/* ── Calm Sounds ─────────────────────────────────────── */
.calm-sounds-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0 10px;
}
.calm-sound-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 10px 4px;
  cursor: pointer;
  transition: all 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.calm-sound-btn:active { transform: scale(0.93); }
.calm-sound-btn.calm-sound-active {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.calm-sound-icon { font-size: 1.5rem; line-height: 1; }
.calm-sound-name { font-size: 0.62rem; font-weight: 800; color: var(--muted); text-align: center; }
.calm-sound-btn.calm-sound-active .calm-sound-name { color: var(--primary); }

.calm-sounds-nowplaying {
  display: flex; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border: 1.2px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 10px;
}
.calm-sounds-bars {
  display: flex; align-items: flex-end; gap: 2px; height: 18px; flex-shrink: 0;
}
.calm-sounds-bars span {
  display: block; width: 3px; border-radius: 3px;
  background: var(--primary);
  animation: sound-bar 0.8s ease-in-out infinite alternate;
}
.calm-sounds-bars span:nth-child(1) { height: 8px;  animation-delay: 0.0s; }
.calm-sounds-bars span:nth-child(2) { height: 14px; animation-delay: 0.15s; }
.calm-sounds-bars span:nth-child(3) { height: 10px; animation-delay: 0.3s; }
.calm-sounds-bars span:nth-child(4) { height: 16px; animation-delay: 0.1s; }
.calm-sounds-bars span:nth-child(5) { height: 6px;  animation-delay: 0.25s; }
@keyframes sound-bar {
  from { transform: scaleY(0.4); opacity: 0.6; }
  to   { transform: scaleY(1);   opacity: 1; }
}
.calm-sounds-playing-label {
  flex: 1; font-size: 0.78rem; font-weight: 800; color: var(--primary);
}
.calm-sounds-stop {
  background: none; border: 1.2px solid var(--border);
  border-radius: 8px; padding: 4px 10px;
  font-size: 0.7rem; font-weight: 800; color: var(--muted);
  cursor: pointer; flex-shrink: 0;
  transition: background 0.15s;
}
.calm-sounds-stop:active { background: var(--surface-2); }


/* Reduced motion override */
@media (prefers-reduced-motion: reduce) {
  .card, .bb-bubble, .game-slot-pulse, .badge-item-close, .chore-card.done-true::after,
  .fullscreen-celeb .fc-emoji, .fullscreen-celeb .fc-title, .fw-particle, .fc-flash,
  .fc-stars, .calm-breath-circle {
    animation: none !important;
  }
  .calm-breath-circle { transition-duration: 0.5s !important; }
}

/* ── 2026 Design System: Type scale + contrast ─────── */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-strong);
  font-family: var(--font-family-display);
  letter-spacing: -0.02em;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); line-height: 1.2; }
h3, h4 { font-size: var(--fs-h3); line-height: 1.24; }
p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); }
small { font-size: var(--fs-caption); line-height: 1.35; color: var(--text-muted-strong); }

.child-hero-name,
.landing-hero h2,
.setup-hero h2 {
  font-family: var(--font-family-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
}

.card-title,
.approval-chore-name,
.login-option-title,
.child-card-name {
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--text-strong);
}
/* Chore title: larger than --fs-h3 for child readability.
   Uses var(--text) (theme-aware) so it stays readable on both dark and light card surfaces. */
.chore-title {
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--text);
}

.form-group label,
.progress-title,
.section-heading,
.chores-section-title,
.chore-group-header {
  font-size: var(--fs-caption);
  color: var(--text-muted-strong);
}

.form-group input,
.form-group select,
.form-group textarea,
.btn {
  font-size: var(--fs-body);
}
/* Done button gets a larger size for AUDHD kids — clear tap target */
.done-btn { font-size: 1.2rem; }

.tab-btn,
.settings-row-desc,
.chore-list-meta,
.landing-feature-sub,
.activity-item {
  font-size: var(--fs-body-sm);
}
/* Child tab buttons: label size is set per sub-element (.tab-label/.tab-icon) */
.child-tab-btn { font-size: var(--fs-body-sm); }

/* Status chip larger for child view — text must be readable at a glance */
.status-chip { font-size: 1rem; }
.day-pill,
.bonus-badge,
.family-code-label,
.budget-count,
.stat-label {
  font-size: var(--fs-micro);
}

/* Semantic text colors for stronger contrast in all themes */
.chore-reward-money,
.approval-reward,
.bonus-badge,
.award-star {
  color: var(--accent-money);
}
.chore-reward-xp,
.award-streak,
.calm-affirmation {
  color: var(--accent-xp);
}
.status-chip-approved,
.adj-amount-add,
.all-done-title,
.all-done-sub {
  color: var(--accent-success);
}
.status-chip-rejected,
.pin-error {
  color: var(--accent-danger);
}
.notice,
.chore-wk-val,
.budget-row-shared .budget-name,
.budget-row-shared .budget-total-val {
  color: var(--accent-link);
}

.btn-primary,
.done-btn,
.tab-btn.active,
.child-tab-btn.active {
  color: var(--accent-on-strong);
}

/* Dark theme legibility tuning */
body.theme-dark .app-header {
  background: rgba(18, 24, 39, 0.8);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 10px 24px rgba(0,0,0,0.4);
}
body.theme-dark .card,
body.theme-dark .chore-card,
body.theme-dark .child-card,
body.theme-dark .approval-card,
body.theme-dark .landing-feature {
  border-color: color-mix(in srgb, var(--border) 75%, transparent);
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}
body.theme-dark .btn-ghost {
  border-color: color-mix(in srgb, var(--border) 85%, white 15%);
  color: var(--text-strong);
}
body.theme-dark .form-group input,
body.theme-dark .form-group select,
body.theme-dark .form-group textarea {
  background: color-mix(in srgb, var(--surface-2) 88%, black 12%);
}
body.theme-dark {
  --chip-pending-bg: rgba(245,158,11,0.15);
  --chip-pending-border: rgba(245,158,11,0.3);
  --chip-approved-bg: rgba(16,185,129,0.15);
  --chip-approved-border: rgba(16,185,129,0.3);
  --chip-rejected-bg: rgba(239,68,68,0.15);
  --chip-rejected-border: rgba(239,68,68,0.3);
}
body.theme-dark .all-done-card {
  background: color-mix(in srgb, var(--surface-2) 90%, var(--green) 10%);
  border-color: rgba(16,185,129,0.25);
}
body.theme-dark .statement-logo {
  background: #fff;
  padding: 4px;
}
body.theme-dark .emoji-btn:hover,
body.theme-dark .emoji-btn.selected { background: var(--surface-2); }
body.theme-dark .header-logo-img {
  filter: drop-shadow(0 0 1px rgba(255,255,255,0.3));
}
/* Theme-aware card backgrounds used via classes */
.card-bg-soft-green {
  background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(245,158,11,0.06));
  border: 2px solid rgba(126,200,164,0.4);
}
body.theme-dark .card-bg-soft-green {
  background: color-mix(in srgb, var(--surface-2) 90%, var(--green) 10%);
  border-color: rgba(16,185,129,0.2);
}
.card-bg-soft-purple {
  background: linear-gradient(135deg, rgba(124,92,252,0.04), rgba(99,102,241,0.06));
  border: 2px solid rgba(155,142,196,0.25);
}
body.theme-dark .card-bg-soft-purple {
  background: color-mix(in srgb, var(--surface-2) 90%, var(--purple) 10%);
  border-color: rgba(155,142,196,0.2);
}

/* ── Dark-theme chore card base text ────────────────────
   .chore-reward uses --text-muted-strong (#4e566f, dark) which is invisible
   on dark card surfaces — override to the theme-aware muted colour. */
body.theme-dark .chore-reward {
  color: var(--muted);
}

/* ── Dark-theme chore card legibility ────────────────────
   status-pending / approved / rejected force a light (#fff-based) background.
   In dark themes var(--text) is near-white so we need explicit dark text on
   these cards only. status-todo keeps var(--text) (light on dark surface). */
body.theme-dark .status-pending,
body.theme-dark .status-approved,
body.theme-dark .status-rejected {
  /* Keep the light gradient so status colour is still clear */
}
body.theme-dark .status-pending .chore-title,
body.theme-dark .status-approved .chore-title,
body.theme-dark .status-rejected .chore-title {
  color: #1a1d2e !important;
}
body.theme-dark .status-pending .chore-reward,
body.theme-dark .status-pending .chore-meta,
body.theme-dark .status-approved .chore-reward,
body.theme-dark .status-approved .chore-meta,
body.theme-dark .status-rejected .chore-reward,
body.theme-dark .status-rejected .chore-meta {
  color: #4e566f !important;
}
/* chore-reward-money / xp colours are bright enough to stay on light bg */

/* ── Dark-theme game slots ───────────────────────────────
   .game-slot hardcodes #fff as gradient start — invisible in dark themes.
   Replace with the dark surface so text stays readable. */
body.theme-dark .game-slot {
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--border) 80%, white 20%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* ── Child statement page ───────────────────────────── */
.statement-page-wrap { margin-bottom: 84px; }
.statement-top-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.statement-page {
  border: 1px solid var(--border);
  background: var(--surface);
}
.statement-header {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 10px;
}
.statement-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 10px;
}
.statement-title {
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: var(--text-strong);
}
.statement-subtitle {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 700;
}
.statement-meta {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
  font-size: 0.8rem;
  color: var(--text);
}
.statement-meta strong { color: var(--text-strong); }
.statement-tx-list { display: flex; flex-direction: column; gap: 0; }
.statement-tx-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}
.statement-tx-item:last-child { border-bottom: none; }
.statement-tx-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.statement-tx-body { flex: 1; min-width: 0; }
.statement-tx-desc { font-weight: 700; color: var(--text-strong); }
.statement-tx-date { font-size: 0.72rem; color: var(--muted); font-weight: 600; margin-top: 1px; }
.statement-tx-amounts { flex-shrink: 0; text-align: right; }
.statement-tx-in { color: var(--accent-success); font-weight: 800; }
.statement-tx-out { color: var(--accent-danger); font-weight: 800; }
.statement-tx-balance { font-size: 0.72rem; color: var(--muted); font-weight: 600; }
.statement-summary-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-weight: 800;
  color: var(--text-strong);
  font-size: 0.85rem;
}
.statement-summary-row .statement-tx-icon { opacity: 0.9; }
.statement-empty {
  text-align: center;
  color: var(--muted);
  font-style: italic;
  padding: 16px 0;
}

/* ── App Footer ────────────────────────────────────────── */
.app-footer {
  text-align: center;
  padding: var(--space-5) var(--space-4) calc(var(--space-7) + var(--safe-bottom));
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.01em;
}

/* ── Login option polish ───────────────────────────────── */
.login-option-card:active {
  transform: scale(0.97);
}
.parent-login-option {
  border-color: rgba(124,92,252,0.15);
  background: linear-gradient(135deg, var(--surface) 0%, rgba(124,92,252,0.03) 100%);
}
.child-login-option {
  border-color: rgba(16,185,129,0.15);
  background: linear-gradient(135deg, var(--surface) 0%, rgba(16,185,129,0.03) 100%);
}

/* ── Payout request card polish ────────────────────────── */
.payout-req-card {
  animation: slide-up 0.3s ease both;
}

/* ── All-done celebration card ─────────────────────────── */
.all-done-card {
  text-align: center;
  padding: 36px 24px;
  background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(245,158,11,0.06));
  border-radius: var(--radius);
  border: 2px solid rgba(16,185,129,0.2);
  box-shadow: 0 4px 20px rgba(16,185,129,0.1);
}
.all-done-emoji {
  font-size: 3rem;
  display: block;
  margin-bottom: 10px;
  animation: bounce-in 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
.all-done-title {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--green);
  margin-bottom: 6px;
}
.all-done-sub {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
}

/* ── Avatar Builder ────────────────────────────────────── */
.avatar-builder {
  margin-top: 8px;
}
.avatar-preview-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.avatar-preview {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  border: 3px solid var(--border);
  background: var(--surface-2);
}
.avatar-preview svg { display: block; }
.avatar-builder-sections {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.avatar-section-label {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 5px;
}
.avatar-option-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.avatar-color-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.avatar-color-btn:hover { transform: scale(1.12); }
.avatar-color-btn.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124,92,252,0.2);
  transform: scale(1.1);
}
.avatar-pill-btn {
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.avatar-pill-btn:hover { border-color: var(--primary); }
.avatar-pill-btn.selected {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.avatar-mode-toggle {
  display: flex;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  overflow: hidden;
  margin-bottom: 10px;
}
.avatar-mode-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  background: var(--surface);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.avatar-mode-btn.active {
  background: var(--primary);
  color: #fff;
}
.child-avatar-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.child-avatar-inline svg { display: block; }


/* ── AVATAR BUILDER V6 ENHANCEMENTS ────────────────────────────── */
.avatar-builder {
  margin-top: 8px;
}

.avatar-preview-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 12px;
  margin-bottom: 24px;
  min-height: 240px;
}

.avatar-preview {
  display: inline-block;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
  animation: avatar-entrance 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.avatar-preview img {
  display: block;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-builder-sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.avatar-section {
  padding: 16px;
  background: var(--surface-2);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.avatar-section-label {
  font-size: 11px;
  font-weight: 700;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  display: block;
}

.avatar-option-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.avatar-color-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #ddd;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.avatar-color-btn:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.avatar-color-btn.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124,92,252,0.3), 0 4px 12px rgba(124,92,252,0.2);
  transform: scale(1.12);
}

.avatar-pill-btn {
  padding: 8px 16px;
  border-radius: 20px;
  border: 2px solid #ddd;
  background: #fff;
  color: #333;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

.avatar-pill-btn:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.avatar-pill-btn.selected {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(124,92,252,0.3);
}

.avatar-variant-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1.5px solid #ddd;
  font-size: 14px;
  font-weight: 500;
  background: #fff;
  color: #333;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 20px;
  padding-right: 32px;
}

.avatar-variant-select:hover {
  border-color: var(--primary);
}

.avatar-variant-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124,92,252,0.1);
}

.avatar-mode-toggle {
  display: flex;
  border-radius: 20px;
  border: 2px solid #ddd;
  overflow: hidden;
  margin-bottom: 10px;
  background: #fff;
}

.avatar-mode-btn {
  flex: 1;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: #666;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  -webkit-tap-highlight-color: transparent;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.avatar-mode-btn:hover {
  color: var(--primary);
}

.avatar-mode-btn.active {
  background: var(--primary);
  color: #fff;
}

.child-avatar-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.child-avatar-inline img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Thumbnail Grid Styles */
.avatar-thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 12px;
  margin-top: 8px;
  overflow-y: auto;
  max-height: 200px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
}

.avatar-thumbnail-btn {
  position: relative;
  width: 48px;
  height: 48px;
  border: 2px solid #ddd;
  border-radius: 6px;
  padding: 0;
  background: #fff;
  cursor: pointer;
  transition: all 0.15s ease-out;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  font-size: 11px;
  font-weight: 600;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-thumbnail-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  border-color: var(--primary);
  background: #f9f9f9;
}

.avatar-thumbnail-btn.selected {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(124, 92, 252, 0.2), 0 2px 8px rgba(124, 92, 252, 0.15);
  transform: scale(1.05);
}

.avatar-thumbnail-btn img {
  display: none;
}

/* Fix avatar preview alignment */
.avatar-preview {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 180px !important;
  height: 180px !important;
}

.avatar-preview img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Smooth loading animation */
@keyframes avatar-entrance {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Podium Styles ─────────────────────────────────── */
.podium-wrap {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 12px; margin: 24px 0 16px; min-height: 180px;
}
.podium-slot {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 16px 8px; border-radius: 16px; background: var(--surface-2);
  border: 1.5px solid var(--border); position: relative;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.podium-first {
  order: 2; min-height: 180px; z-index: 3;
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border-color: rgba(217,119,6,0.3);
  box-shadow: 0 8px 24px rgba(217,119,6,0.15);
}
.podium-second { order: 1; min-height: 155px; z-index: 2; }
.podium-third { order: 3; min-height: 140px; z-index: 1; }
.podium-me { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(107,72,245,0.15); }

.podium-avatar { margin-bottom: 8px; position: relative; }
.podium-medal {
  position: absolute; top: -14px; right: -14px;
  font-size: 1.85rem; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));
  z-index: 10;
}
.podium-name { font-weight: 900; font-size: 0.85rem; color: var(--text-strong); margin-bottom: 4px; text-align: center; }
.podium-xp { font-size: 0.82rem; font-weight: 900; color: var(--accent-xp); line-height: 1.1; }
.podium-balance { font-size: 0.92rem; font-weight: 900; color: var(--accent-money); margin-bottom: 2px; line-height: 1.1; }

.leaderboard-enhanced { padding: 16px; }
.award-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  font-size: 0.75rem; font-weight: 800; margin-bottom: 8px;
}
.award-star { background: #fffbeb; color: #92400e; border: 1.5px solid #fde68a; }
.award-streak { background: #fff1f2; color: #9f1239; border: 1.5px solid #fecdd3; }

/* ── Podium inline award badges ─────────────────────────── */
.podium-badges {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.podium-badge {
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.podium-badge-star   { background: #fef9c3; color: #854d0e; border: 1.5px solid #fde047; }
.podium-badge-streak { background: #fff1f2; color: #9f1239; border: 1.5px solid #fecdd3; }

/* ── Pull to Refresh ───────────────────────────────── */
.pull-to-refresh {
  position: fixed; top: 0; left: 0; right: 0; height: 64px;
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
  transform: translateY(-64px);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.ptr-inner {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 8px 18px 8px 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.10);
  backdrop-filter: blur(10px);
}
.ptr-spinner {
  width: 28px; height: 28px; flex-shrink: 0;
}
.ptr-track {
  stroke: color-mix(in srgb, var(--primary) 18%, transparent);
}
.ptr-arc {
  stroke: var(--primary);
  transform-origin: center;
  transform: rotate(-90deg);
  transition: stroke-dasharray 0.1s linear;
}
.pull-to-refresh.ptr-loading .ptr-arc {
  animation: ptr-spin 0.8s linear infinite;
  stroke-dasharray: 40 61;
}
.ptr-label {
  font-size: 0.78rem; font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
}

@keyframes ptr-spin {
  from { transform: rotate(-90deg); }
  to   { transform: rotate(270deg); }
}

body.ptr-active { overscroll-behavior-y: contain; }

/* ════════════════════════════════════════════════════════════════ */
/* ── BLOOP v2.0 DESIGN OVERHAUL                               ── */
/* ════════════════════════════════════════════════════════════════ */

/* ── Default Bloop theme: Blue palette ───────────────────────── */
:root {
  --primary: #2563EB;
  --primary-hover: #1D4ED8;
  --primary-glow: rgba(37,99,235,0.32);
  --bg: linear-gradient(160deg,#EFF6FF 0%,#F0F9FF 40%,#EFF6FF 100%);
  --hero-gradient: linear-gradient(135deg,#1D4ED8 0%,#3B82F6 55%,#60A5FA 100%);
  --hero-shadow: rgba(37,99,235,0.28);
  --xp-bar-gradient: linear-gradient(90deg,#93C5FD,#3B82F6,#1D4ED8);
  --border: #BFDBFE;
  --surface-2: #EFF6FF;
}

/* ── App header: cleaner, white ──────────────────────────────── */
.app-header {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(37,99,235,0.10), 0 4px 16px rgba(37,99,235,0.06);
  padding: 4px 20px 4px;
  border-bottom: 2px solid rgba(37,99,235,0.08);
}

/* ── Redesigned Child Hero with Buddy ────────────────────────── */
.child-hero {
  background: var(--hero-gradient);
  border-radius: 24px;
  padding: 18px 18px 16px;
  color: #fff;
  margin-bottom: 16px;
  position: relative;
  overflow: visible;
  box-shadow: 0 14px 40px var(--hero-shadow), inset 0 1px 0 rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.15);
}

.hero-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.22);
  border: 1.5px solid rgba(255,255,255,0.38);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 0.85rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.01em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.child-hero-body {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.child-hero-info-col {
  flex: 1;
  min-width: 0;
}

.child-hero-greeting {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.8);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 2px;
}

.child-hero-name {
  font-size: 1.85rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 2px;
}

.child-hero-level {
  font-size: 0.82rem;
  font-weight: 800;
  color: rgba(255,255,255,0.88);
  margin-bottom: 0;
}

.xp-sub-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(255,255,255,0.72);
  margin-top: 5px;
  letter-spacing: 0.02em;
}

.child-hero-buddy-col {
  width: 110px;
  height: 110px;
  flex-shrink: 0;
  margin-bottom: -24px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: hero-buddy-float 4s ease-in-out infinite;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.22));
}

.hero-buddy-img {
  width: 110px;
  height: 110px;
  object-fit: contain;
}

@keyframes hero-buddy-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  40%       { transform: translateY(-7px) rotate(2deg); }
  70%       { transform: translateY(-3px) rotate(-1.5deg); }
}

/* ── Tabs: now below the hero ─────────────────────────────── */
.child-tabs {
  margin-top: 28px;
  margin-bottom: 18px;
  border-radius: 18px;
}

/* ── Full-screen Chore Celebration Overlay ────────────────── */
.chore-celebration-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.chore-celebration-overlay.show {
  opacity: 1;
  pointer-events: all;
}
.chore-celebration-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px 40px;
  width: 100%;
  max-width: 420px;
}
.chore-celebration-buddy {
  width: 210px;
  height: 210px;
  animation: celbud-pop 0.55s cubic-bezier(0.34,1.56,0.64,1) both;
  animation-delay: 0.08s;
}
.celebration-buddy-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.28));
}
@keyframes celbud-pop {
  from { transform: scale(0.25) translateY(60px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.chore-celebration-title {
  font-size: 2.6rem;
  font-weight: 900;
  color: #fff;
  text-align: center;
  margin-top: 12px;
  animation: celslide 0.4s ease both 0.32s;
  text-shadow: 0 2px 16px rgba(0,0,0,0.2);
}
.chore-celebration-chore {
  font-size: 1.05rem;
  font-weight: 800;
  color: rgba(255,255,255,0.88);
  text-align: center;
  margin-top: 4px;
  animation: celslide 0.4s ease both 0.42s;
}
.chore-celebration-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  text-align: center;
  margin-top: 6px;
  animation: celslide 0.4s ease both 0.5s;
}
@keyframes celslide {
  from { transform: translateY(18px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.chore-celebration-rewards {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  animation: celslide 0.4s ease both 0.56s;
}
.chore-celebration-badge {
  padding: 10px 26px;
  border-radius: 999px;
  font-size: 1.25rem;
  font-weight: 900;
}
.chore-celebration-badge.money-badge {
  background: rgba(255,255,255,0.92);
  color: #065f46;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.chore-celebration-continue {
  margin-top: 36px;
  width: 280px;
  height: 60px;
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  background: rgba(255,255,255,0.95) !important;
  color: var(--primary) !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.16) !important;
  animation: celslide 0.4s ease both 0.64s;
}
.chore-celebration-continue:active {
  transform: scale(0.96);
}

/* ── Parent Hero Banner ───────────────────────────────────── */
.parent-hero-banner {
  background: var(--hero-gradient);
  border-radius: 22px;
  padding: 18px 22px;
  margin-bottom: 18px;
  box-shadow: 0 8px 28px var(--hero-shadow);
}
.parent-hero-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}
.parent-hero-icon {
  font-size: 2rem;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.parent-hero-name {
  font-size: 1.25rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
}
.parent-hero-sub {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.78);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.parent-hero-badge {
  margin-left: auto;
  background: rgba(255,255,255,0.22);
  border: 2px solid rgba(255,255,255,0.45);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 900;
  border-radius: 999px;
  padding: 5px 14px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Tab content entrance animation (GSAP) ─────────────── */
.tab-fade-in {
  animation: tabFadeIn 0.25s ease both;
}
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Card entrance stagger ──────────────────────────────── */
.chore-card, .card {
  animation: cardEntrance 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes cardEntrance {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Stagger effect for chore cards */
.chore-card:nth-child(1) { animation-delay: 0.04s; }
.chore-card:nth-child(2) { animation-delay: 0.08s; }
.chore-card:nth-child(3) { animation-delay: 0.12s; }
.chore-card:nth-child(4) { animation-delay: 0.16s; }
.chore-card:nth-child(5) { animation-delay: 0.20s; }
.chore-card:nth-child(6) { animation-delay: 0.24s; }
.chore-card:nth-child(n+7) { animation-delay: 0.28s; }

/* ── Chore cards: mission-style refinements ─────────────── */
.chore-card {
  border-radius: 20px;
  border-width: 2.5px !important;
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s ease;
}
.chore-card:active {
  transform: scale(0.97);
}
.chore-frequency-label {
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
  opacity: 0.85;
}

/* ── Chore card: done button bolder ─────────────────────── */
.done-btn {
  font-size: 1.1rem !important;
  letter-spacing: 0.02em;
  border-radius: 16px !important;
}

/* ── Buttons: larger, bolder ────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, var(--primary), #60A5FA) !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-hover), #3B82F6) !important;
}

/* ── Dark theme: override default-blue vars back to dark ── */
body.theme-dark {
  --border: #24513f;
}

/* ── Canvas for confetti: sit on top ────────────────────── */
canvas.confetti-canvas {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 9998 !important;
}

/* ── Candy Pop: primary override for btn-primary ────────── */
body[data-theme="candy"] .btn-primary {
  background: linear-gradient(135deg, #DB2777, #f472b6) !important;
}

/* ── Dark Forest: primary override ─────────────────────── */
body[data-theme="darkforest"] .btn-primary {
  background: linear-gradient(135deg, #166534, #4ade80) !important;
}

/* ════════════════════════════════════════════════════════════════ */
/* ── MOOD CHECK-IN                                            ── */
/* ════════════════════════════════════════════════════════════════ */

.mood-checkin-card {
  text-align: center;
  padding: 20px 16px 18px;
  margin-bottom: 16px;
  border: 2px solid var(--border);
}
.mood-checkin-title {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 16px;
}
.mood-options {
  display: flex;
  justify-content: space-around;
  gap: 4px;
}
.mood-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 10px 8px;
  flex: 1;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.mood-btn:active {
  transform: scale(0.9);
}
.mood-btn:hover {
  border-color: var(--primary);
  background: var(--surface);
  transform: scale(1.05);
}
.mood-emoji  { font-size: 1.9rem; line-height: 1; }
.mood-label  { font-size: 0.6rem; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }

/* Done-row indicator */
.mood-done-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 9px 14px;
  margin-bottom: 14px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}
.mood-done-emoji { font-size: 1.3rem; }
.mood-done-text  { flex: 1; }
.mood-gentle-tag {
  background: rgba(34,197,94,0.12);
  color: #166534;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 900;
}

/* Gentle mode banner */
.gentle-mode-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(34,197,94,0.08), rgba(74,222,128,0.06));
  border: 1.5px solid rgba(34,197,94,0.25);
  border-radius: 18px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.gentle-banner-icon { font-size: 1.6rem; flex-shrink: 0; }
.gentle-banner-text { flex: 1; }
.gentle-banner-title { font-size: 0.95rem; font-weight: 900; color: var(--text); }
.gentle-banner-sub   { font-size: 0.78rem; font-weight: 700; color: var(--muted); margin-top: 2px; }
.gentle-show-all     { flex-shrink: 0; }
.gentle-hidden-note  {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  padding: 10px 0 4px;
}

/* ════════════════════════════════════════════════════════════════ */
/* ── VISUAL CHORE TIMER WIDGET                                ── */
/* ════════════════════════════════════════════════════════════════ */

.chore-timer-widget {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 890;
  pointer-events: all;
  animation: timer-slide-up 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes timer-slide-up {
  from { transform: translateX(-50%) translateY(80px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}

.timer-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--primary);
  border-radius: 999px;
  padding: 8px 16px 8px 10px;
  box-shadow: 0 8px 28px rgba(37,99,235,0.38), 0 2px 8px rgba(0,0,0,0.12);
  min-width: 220px;
  max-width: 320px;
}
.timer-pill-info  { flex: 1; min-width: 0; }
.timer-pill-time  { font-size: 0.92rem; font-weight: 900; color: #fff; line-height: 1.2; }
.timer-pill-chore { font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timer-pill-stop  {
  background: rgba(255,255,255,0.22);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 0.85rem;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.timer-pill-stop:active { background: rgba(255,255,255,0.38); }

/* Timer start button on chore cards */
.timer-start-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(37,99,235,0.08);
  border: 1.5px solid rgba(37,99,235,0.22);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--primary);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
  margin-top: 8px;
}
.timer-start-btn:active { transform: scale(0.94); background: rgba(37,99,235,0.14); }

.support-plan-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #8b919b;
  color: #fff;
  padding: 0;
  font-size: 0.98rem;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(15,23,42,0.14);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}

.support-plan-btn:hover {
  transform: translateY(-1px);
  background: #777f8b;
  box-shadow: 0 8px 18px rgba(15,23,42,0.18);
}

.support-plan-btn:active {
  transform: scale(0.98);
}

.chore-card-has-support .chore-card-inner {
  padding-right: 30px;
}

.support-plan-btn.is-pending,
.support-plan-btn:disabled {
  cursor: default;
  background: #a2a8b1;
  color: #fff;
  box-shadow: 0 4px 10px rgba(15,23,42,0.10);
  opacity: 0.9;
}

/* ════════════════════════════════════════════════════════════════ */
/* ── CHILD REMINDER SETTINGS (Parent Family Tab)              ── */
/* ════════════════════════════════════════════════════════════════ */

.reminder-section {
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 12px;
  margin-top: -8px;
}
.reminder-section-label {
  font-size: 0.78rem;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.reminder-times-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.reminder-none { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.reminder-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text);
}
.reminder-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.75rem;
  padding: 0 2px;
  line-height: 1;
}
.reminder-chip-remove:hover { color: var(--red); }
.reminder-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.reminder-time-input {
  flex: 1;
  height: 40px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  background: var(--surface);
}
.reminder-add-btn { flex-shrink: 0; }

/* ── Weekly XP Economy widget ────────────────────────────────── */
.xp-economy-card { border-left: 4px solid var(--primary); }
.xp-economy-total {
  font-size: 2rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 8px;
}
.xp-economy-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
}

/* ── Shop tier headings ───────────────────────────────────────── */
.shop-tier-group {}
.shop-tier-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 900;
  padding: 6px 0 8px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 8px;
}

/* ── Daily Quest card ─────────────────────────────────────────── */
.daily-quest-card {
  background: linear-gradient(135deg, rgba(var(--primary-rgb,99,91,255),0.07) 0%, transparent 100%);
  border-left: 4px solid var(--primary);
}
.daily-quest-done {
  border-left-color: var(--green);
  opacity: 0.85;
}
.daily-quest-bar-wrap {
  height: 6px;
  background: rgba(0,0,0,0.07);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 2px;
}
.daily-quest-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--purple));
  border-radius: 99px;
  transition: width 0.4s ease;
}

/* ── XP Shop — almost-there progress ────────────────────────── */
.xp-shop-almost { border-color: var(--amber) !important; }
.xp-shop-progress-wrap {
  width: 100%;
  height: 4px;
  background: rgba(0,0,0,0.07);
  border-radius: 99px;
  overflow: hidden;
  margin: 4px 0 2px;
}
.xp-shop-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--amber), var(--primary));
  border-radius: 99px;
}
.xp-shop-almost-label {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--amber);
  text-align: center;
}

/* ── XP Shop — parent management ─────────────────────────────── */
.shop-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.shop-item-row:last-child { border-bottom: none; }
.shop-item-emoji {
  font-size: 1.8rem;
  flex-shrink: 0;
  width: 40px;
  text-align: center;
}
.shop-item-info { flex: 1; min-width: 0; }
.shop-item-name {
  font-weight: 800;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-item-desc {
  font-size: 0.76rem;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-item-meta {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 700;
  margin-top: 2px;
}
.shop-xp-badge {
  background: var(--amber);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 99px;
  flex-shrink: 0;
}
.shop-item-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.shop-item-inactive .shop-item-name,
.shop-item-inactive .shop-item-desc { opacity: 0.45; }

/* ── XP Shop — child view ─────────────────────────────────────── */
.xp-shop-card { }
.xp-shop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
@media (min-width: 480px) {
  .xp-shop-grid { grid-template-columns: repeat(3, 1fr); }
}
.xp-shop-item {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.xp-shop-item:not(.xp-shop-cant-afford):hover {
  border-color: var(--primary);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.xp-shop-cant-afford {
  opacity: 0.55;
}
.xp-shop-item-emoji {
  font-size: 2rem;
  line-height: 1;
}
.xp-shop-item-name {
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
}
.xp-shop-item-desc {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.3;
}
.xp-shop-item-cost {
  font-size: 0.78rem;
  font-weight: 900;
  color: var(--amber);
  margin-top: 2px;
}
.xp-shop-item .btn { margin-top: 6px; width: 100%; }

/* ── Mystery Box — shop item styling ──────────────────────────── */
.xp-shop-mystery-box {
  background: linear-gradient(135deg, #1a0533 0%, #2d1b69 40%, #4a1a8a 70%, #6b21a8 100%) !important;
  color: #fff !important;
  border: 2px solid #a855f7 !important;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.3);
}
.xp-shop-mystery-box .xp-shop-item-name,
.xp-shop-mystery-box .xp-shop-item-desc { color: rgba(255,255,255,0.9) !important; }
.xp-shop-mystery-box .xp-shop-item-cost { color: #fbbf24 !important; }
.child-dashboard-shell .xp-shop-item.xp-shop-mystery-box {
  background: linear-gradient(135deg, #1a0533 0%, #2d1b69 40%, #4a1a8a 70%, #6b21a8 100%) !important;
  border-color: rgba(196, 132, 252, 0.78) !important;
}
.child-dashboard-shell .xp-shop-item.xp-shop-mystery-box .xp-shop-item-name,
.child-dashboard-shell .xp-shop-item.xp-shop-mystery-box .xp-shop-item-desc,
.child-dashboard-shell .xp-shop-item.xp-shop-mystery-box .xp-shop-item-cost {
  color: #fff !important;
}
.child-dashboard-shell .xp-shop-item.xp-shop-mystery-box .btn {
  color: #fff !important;
}

@keyframes mystery-box-wobble {
  0%, 100% { transform: rotate(0deg) scale(1); }
  15% { transform: rotate(-8deg) scale(1.05); }
  30% { transform: rotate(8deg) scale(1.08); }
  45% { transform: rotate(-5deg) scale(1.05); }
  60% { transform: rotate(5deg) scale(1.02); }
  75% { transform: rotate(-2deg) scale(1); }
}
@keyframes mystery-box-shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-6px) rotate(-5deg); }
  75% { transform: translateX(6px) rotate(5deg); }
}
@keyframes mystery-box-explode {
  0% { transform: scale(1); opacity: 1; }
  30% { transform: scale(1.5); opacity: 1; }
  100% { transform: scale(3); opacity: 0; }
}

.shop-choice-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.shop-choice-modal {
  width: min(420px, 100%);
  border-radius: 20px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.24);
}
.shop-choice-modal-title {
  font-size: 1rem;
  font-weight: 900;
  color: #1f2a45;
}
.shop-choice-modal-sub {
  margin-top: 4px;
  color: #5f6b86;
  font-size: 0.82rem;
  font-weight: 700;
}
.shop-choice-modal-list {
  margin: 12px 0;
  display: grid;
  gap: 8px;
}
.shop-choice-btn {
  text-align: left;
  border: 1px solid #dce3f5;
  border-radius: 12px;
  padding: 10px 12px;
  background: #f9fbff;
}
.shop-choice-btn strong {
  display: block;
  font-size: 0.9rem;
}
.shop-choice-btn span {
  display: block;
  margin-top: 2px;
  font-size: 0.76rem;
  color: #5f6b86;
  font-weight: 700;
}
.xp-convert-block {
  margin: 14px 0;
}
.xp-convert-readout {
  margin-top: 10px;
  font-size: 0.9rem;
  font-weight: 800;
  color: #1f2a45;
}
.shop-choice-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ── Mystery Box — full-screen reveal overlay ─────────────────── */
.mystery-box-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f0326 0%, #1a0533 30%, #2d1b69 60%, #4a1a8a 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mystery-box-overlay.show {
  opacity: 1;
  pointer-events: all;
}
.mystery-box-reveal-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px 40px;
  width: 100%;
  max-width: 420px;
}
.mystery-box-buddy {
  width: 160px;
  height: 160px;
  margin-bottom: 12px;
}
.mystery-box-buddy img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(168, 85, 247, 0.5));
}
.mystery-box-icon {
  font-size: 5rem;
  line-height: 1;
  margin-bottom: 20px;
  filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.6));
}
.mystery-box-label {
  font-size: 1.4rem;
  font-weight: 900;
  color: rgba(255,255,255,0.85);
  margin-bottom: 12px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.mystery-box-prize {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  background: rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.25);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  transform: scale(0.5);
  margin-bottom: 12px;
}
.mystery-box-prize-icon {
  font-size: 2.4rem;
}
.mystery-box-prize-text {
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.mystery-box-jackpot {
  font-size: 1.6rem;
  font-weight: 900;
  color: #fbbf24;
  text-shadow: 0 2px 16px rgba(251, 191, 36, 0.5);
  animation: jackpot-pulse 0.6s ease-in-out infinite alternate;
  margin-bottom: 8px;
}
@keyframes jackpot-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}
.mystery-box-continue {
  margin-top: 20px;
  padding: 12px 36px;
  font-size: 1.1rem;
  font-weight: 900;
  background: linear-gradient(135deg, #a855f7, #6366f1);
  color: #fff;
  border: none;
  border-radius: 14px;
  cursor: pointer;
}

/* ── XP Shop — redemption request card ───────────────────────── */
.redemption-req-card { border-left: 4px solid var(--purple); }

/* ── 2026 Shell Refresh ──────────────────────────────────────── */
html { color-scheme: light; }

body::before {
  animation: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(90,200,250,0.14) 0%, transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(10,132,255,0.12) 0%, transparent 30%),
    radial-gradient(circle at 52% 78%, rgba(94,92,230,0.10) 0%, transparent 32%);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-display);
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.skip-link {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 999;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--text);
  color: #fff;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-150%);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.skip-link:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.skip-link:focus:not(:focus-visible) {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-150%);
}

.app-header {
  background: rgba(248, 250, 255, 0.74);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: 0 1px 0 rgba(16,19,26,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.72);
  padding: calc(10px + env(safe-area-inset-top)) 20px 10px;
}

.app-header .header-logo-img {
  width: 172px;
}

.container {
  max-width: 820px;
}

.page-content {
  padding-top: 24px;
  padding-bottom: calc(110px + env(safe-area-inset-bottom));
}

.card,
.approval-card,
.chore-card {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255,255,255,0.76);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.card:hover {
  transform: translateY(-1px);
}

.btn {
  transition-property: transform, box-shadow, background-color, border-color, color, opacity;
}

.btn-primary {
  background: linear-gradient(180deg, #4aa3ff 0%, var(--primary) 100%);
  box-shadow: 0 12px 28px rgba(10,132,255,0.24);
}

.btn-primary:hover {
  background: linear-gradient(180deg, #3797ff 0%, var(--primary-hover) 100%);
  box-shadow: 0 16px 34px rgba(10,132,255,0.28);
}

.btn-ghost {
  background: rgba(255,255,255,0.54);
}

.btn-outline {
  border-color: rgba(22,32,42,0.12);
}

.form-group label {
  color: var(--text-muted-strong);
}

.form-group input,
.form-group select,
.form-group textarea {
  background: rgba(255,255,255,0.78);
  border-color: rgba(22,32,42,0.09);
}

.landing-screen,
.setup-screen {
  padding: 32px 20px 88px;
  gap: 18px;
}

.landing-hero-poster {
  width: 100%;
  max-width: 760px;
  padding: 30px 24px 24px;
  border-radius: 32px;
  border: 1px solid rgba(255,255,255,0.78);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.76), rgba(246,248,255,0.72)),
    radial-gradient(circle at top right, rgba(10,132,255,0.16), transparent 36%);
  box-shadow: 0 20px 48px rgba(16,19,26,0.10);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.landing-kicker {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(10,132,255,0.09);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.landing-hero h1,
.landing-hero h2 {
  font-size: clamp(2.2rem, 1.55rem + 2.5vw, 3.35rem);
  line-height: 0.95;
  margin-bottom: 12px;
  color: var(--text);
  background: none;
  -webkit-text-fill-color: initial;
}

.landing-hero p {
  max-width: 560px;
  margin: 0 auto;
  font-size: 1.02rem;
  color: var(--text-muted-strong);
}

.landing-highlight-row,
.landing-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 760px;
}

.landing-highlight-row {
  margin-top: 22px;
}

.landing-highlight,
.landing-proof-item {
  min-width: 0;
  text-align: left;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255,255,255,0.56);
  border: 1px solid rgba(255,255,255,0.72);
}

.landing-highlight strong,
.landing-proof-item strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--text);
}

.landing-highlight span,
.landing-proof-item span {
  display: block;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-muted-strong);
}

.landing-features {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 760px;
  margin-bottom: 8px;
}

.landing-feature {
  align-items: flex-start;
  height: 100%;
  background: rgba(255,255,255,0.58);
}

.landing-actions {
  max-width: 520px;
}

.landing-footer {
  max-width: 520px;
  font-size: 0.8rem;
  color: var(--text-muted-strong);
}

.setup-hero {
  max-width: 560px;
}

.setup-hero h2 {
  font-size: clamp(1.95rem, 1.35rem + 2.1vw, 2.7rem);
}

.setup-hero p {
  max-width: 420px;
  margin: 0 auto;
  color: var(--text-muted-strong);
}

.setup-card {
  max-width: 460px;
}

.login-options {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.login-option-card {
  width: 100%;
  text-align: left;
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 150px;
  transition-property: transform, border-color, box-shadow, background-color;
  background: rgba(255,255,255,0.58);
  border-color: rgba(255,255,255,0.76);
}

.login-option-card:hover,
.child-select-btn:hover {
  transform: translateY(-1px);
}

.child-select-grid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.child-select-btn {
  width: 100%;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.58);
  border-color: rgba(255,255,255,0.76);
}

.parent-hero-banner {
  padding: 22px;
  border-radius: 28px;
  box-shadow: 0 18px 40px rgba(16,19,26,0.16);
  overflow: hidden;
  position: relative;
}

.parent-hero-banner::after,
.child-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.16), transparent 44%);
  pointer-events: none;
}

.parent-hero-inner {
  align-items: flex-start;
}

.parent-hero-copy {
  margin-top: 10px;
  max-width: 480px;
  font-size: 0.84rem;
  line-height: 1.5;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
}

.parent-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.parent-summary-tile {
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.24);
}

.parent-summary-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}

.parent-summary-value {
  display: block;
  margin-top: 6px;
  font-size: 1.08rem;
  font-weight: 900;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.tab-nav,
.child-tabs {
  background: rgba(120, 120, 128, 0.12);
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow: 0 12px 26px rgba(16,19,26,0.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.child-tabs {
  padding: 6px;
}

.tab-btn,
.child-tab-btn {
  min-height: 48px;
  border-radius: 14px;
}

.tab-btn.active,
.child-tab-btn.active {
  background: rgba(255,255,255,0.92);
  box-shadow: 0 8px 16px rgba(16,19,26,0.08);
}

.child-hero {
  padding: 22px;
  border-radius: 28px;
  box-shadow: 0 20px 46px rgba(16,19,26,0.16);
}

.hero-pill {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.22);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.xp-sub-label,
.child-hero-level,
.child-hero-greeting {
  color: rgba(255,255,255,0.80);
}

.hero-buddy-img {
  width: 110px;
  height: 110px;
}

.app-footer {
  max-width: 640px;
  margin: 0 auto;
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
  color: var(--text-muted-strong);
}

.parent-overview-stack {
  display: grid;
  gap: 16px;
}

.parent-overview-head,
.parent-overview-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.parent-overview-head {
  margin-bottom: 18px;
}

.parent-section-kicker {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(10,132,255,0.10);
  color: var(--primary);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.parent-overview-copy {
  max-width: 560px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-muted-strong);
}

.parent-overview-badge {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(10,132,255,0.10);
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 800;
}

.parent-overview-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.parent-overview-kpi {
  padding: 16px;
  border-radius: 22px;
  background: rgba(255,255,255,0.52);
  border: 1px solid rgba(255,255,255,0.72);
}

.parent-overview-kpi-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.parent-overview-kpi-value {
  display: block;
  margin-top: 8px;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.parent-overview-kpi-sub {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-muted-strong);
}

.parent-overview-shortcuts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.parent-section-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.84), rgba(247,249,255,0.76)),
    radial-gradient(circle at top right, rgba(10,132,255,0.10), transparent 38%);
}

.parent-section-header {
  margin-bottom: 18px;
}

.parent-section-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.parent-section-stat {
  padding: 16px;
  border-radius: 22px;
  background: rgba(255,255,255,0.56);
  border: 1px solid rgba(255,255,255,0.76);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

.parent-section-stat-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.parent-section-stat-value {
  display: block;
  margin-top: 8px;
  font-size: 1.18rem;
  font-weight: 900;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.parent-section-stat-sub {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-muted-strong);
}

.parent-shortcut-btn {
  min-height: 52px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(255,255,255,0.74);
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.parent-kid-list,
.parent-activity-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.parent-kid-row,
.parent-activity-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(246,248,255,0.76);
  border: 1px solid rgba(255,255,255,0.74);
  text-align: left;
}

.parent-kid-avatar,
.parent-activity-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(10,132,255,0.10);
}

.parent-activity-icon {
  width: 38px;
  height: 38px;
}

.parent-kid-main,
.parent-activity-main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.parent-kid-main strong,
.parent-activity-main strong {
  font-size: 0.92rem;
  color: var(--text);
}

.parent-kid-main span,
.parent-activity-main span {
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--text-muted-strong);
}

.parent-kid-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 0.76rem;
  color: var(--muted);
  white-space: nowrap;
}

.parent-kid-meta strong,
.parent-activity-trailing {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.parent-shortcut-btn:hover,
.parent-kid-row:hover,
.parent-activity-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(16,19,26,0.08);
}

#app > .push-prompt {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.activity-item,
.parent-summary-value {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .landing-highlight-row,
  .landing-features,
  .landing-proof-grid,
  .parent-summary-grid,
  .parent-section-stat-grid,
  .parent-overview-kpi-grid,
  .parent-overview-shortcuts {
    grid-template-columns: 1fr;
  }

  .parent-hero-inner {
    flex-wrap: wrap;
  }

  .parent-hero-badge {
    margin-left: 0;
  }

  .parent-overview-head,
  .parent-overview-section-head {
    flex-direction: column;
  }
}

/* ── Final iOS-style app polish ─────────────────────── */
body:not(.theme-dark) {
  background:
    radial-gradient(circle at top, rgba(10,132,255,0.16), transparent 30%),
    linear-gradient(180deg, #f6f8fd 0%, #edf2fa 100%);
}

.tab-btn,
.child-tab-btn {
  color: var(--muted);
}

.tab-btn.active,
.tab-btn.active .tab-label,
.tab-btn.active .tab-icon,
.child-tab-btn.active,
.child-tab-btn.active .tab-label,
.child-tab-btn.active .tab-icon {
  color: var(--text);
}

.child-tab-btn.active .tab-count {
  background: rgba(10,132,255,0.14);
  color: var(--primary);
}

.card,
.setup-card,
.login-option-card,
.child-select-btn,
.chore-card,
.daily-goal-card,
.earnings-simple-card,
.mood-checkin-card,
.leaderboard-enhanced,
.week-schedule-card,
.parent-section-card,
.parent-tool-card,
.xp-control-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,250,255,0.86)) !important;
  border: 1px solid rgba(255,255,255,0.86) !important;
  box-shadow:
    0 18px 42px rgba(15,23,42,0.09),
    inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

.parent-hero {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.24), transparent 34%),
    linear-gradient(145deg, #4c81ff 0%, #699cff 52%, #88b8ff 100%);
  box-shadow: 0 24px 56px rgba(44, 77, 145, 0.24);
}

.parent-summary-tile {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}

.child-hero {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.24), transparent 34%),
    linear-gradient(145deg, #4b86ff 0%, #6fa7ff 52%, #97c4ff 100%);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 24px 54px rgba(44,77,145,0.22);
}

.hero-pill {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}

.dashboard-panel {
  border: 1px solid rgba(255,255,255,0.86);
  box-shadow:
    0 16px 38px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.72);
}

.dashboard-panel-title {
  color: var(--text);
}

.dashboard-panel-subtitle {
  color: var(--text-muted-strong);
  font-weight: 650;
}

.parent-tool-grid,
.xp-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.parent-tool-card,
.xp-control-card {
  padding: 20px;
  border-radius: 28px;
}

.parent-tool-card-wide,
.xp-control-card-wide {
  grid-column: 1 / -1;
}

.parent-tool-header,
.xp-control-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.xp-control-card-head-spread {
  align-items: center;
}

.parent-tool-copy {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-muted-strong);
  font-weight: 600;
}

.parent-tool-total,
.parent-status-pill,
.parent-inline-meta,
.week-schedule-summary-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.parent-tool-total,
.week-schedule-summary-pill {
  background: rgba(10,132,255,0.10);
  color: var(--primary);
}

.parent-status-pill {
  background: rgba(120,120,128,0.12);
  color: var(--muted);
}

.parent-status-pill.is-live {
  background: rgba(52,199,89,0.12);
  color: #24964b;
}

.parent-tool-note {
  margin-top: 12px;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--text-muted-strong);
  font-weight: 600;
}

.parent-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.parent-chip-grid span {
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(214,224,236,0.86);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
}

.parent-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.parent-field-grid-compact {
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
}

.parent-form-span-2 {
  grid-column: span 2;
}

.parent-form-span-3 {
  grid-column: 1 / -1;
}

.parent-form-narrow {
  max-width: 160px;
}

.parent-shop-form-grid {
  display: grid;
  grid-template-columns: 76px repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.parent-form-emoji-field input {
  text-align: center;
  font-size: 1.35rem;
  padding-left: 8px;
  padding-right: 8px;
}

.parent-settings-row {
  margin-bottom: 14px;
  padding-top: 0;
}

.parent-inline-label {
  margin-bottom: 10px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.parent-action-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.parent-action-row-split {
  justify-content: space-between;
}

.mystery-box-grid {
  margin-bottom: 14px;
}

.mystery-prize-list {
  display: grid;
  gap: 10px;
}

.mystery-prize-row {
  display: grid;
  grid-template-columns: 82px 90px minmax(0, 1fr) 78px auto;
  gap: 8px;
  align-items: end;
  padding: 12px;
  border-radius: 20px;
  background: rgba(247,250,255,0.86);
  border: 1px solid rgba(214,224,236,0.84);
}

.mystery-prize-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.mystery-prize-field span,
.xp-inline-field span,
.xp-pool-chip span {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.mystery-prize-row .mp-remove {
  align-self: center;
  min-height: 44px;
}

.mystery-empty-state {
  padding: 16px;
  border-radius: 20px;
  background: rgba(247,250,255,0.82);
  border: 1px dashed rgba(183,195,213,0.8);
  font-size: 0.8rem;
  color: var(--text-muted-strong);
  font-weight: 600;
}

.parent-shop-catalog-card .shop-item-card {
  background: rgba(255,255,255,0.92) !important;
}

.xp-pool-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.xp-pool-chip,
.xp-streak-row,
.xp-weekly-row,
.xp-game-summary {
  border-radius: 20px;
  background: rgba(247,250,255,0.84);
  border: 1px solid rgba(214,224,236,0.84);
}

.xp-pool-chip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}

.xp-pool-chip input {
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
}

.xp-streak-list,
.xp-weekly-list,
.xp-game-summary-list {
  display: grid;
  gap: 10px;
}

.xp-streak-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

.xp-inline-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.xp-weekly-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 122px;
  gap: 14px;
  align-items: center;
  padding: 14px;
}

.xp-weekly-main,
.xp-game-summary-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.xp-weekly-main strong,
.xp-game-summary-main strong {
  font-size: 0.88rem;
  color: var(--text);
}

.xp-weekly-main span,
.xp-game-summary-main span {
  margin-top: 4px;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--text-muted-strong);
}

.xp-inline-field-reward input {
  text-align: center;
}

.xp-game-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
}

.xp-game-summary-reward {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--primary);
}

.xp-game-summary.is-disabled {
  opacity: 0.58;
}

.week-schedule-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.week-schedule-list {
  display: grid;
  gap: 10px;
}

.week-flex-section {
  margin-bottom: 14px;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(214,224,236,0.82);
  background: rgba(246,249,255,0.9);
}

.week-flex-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.week-flex-title {
  font-size: 0.92rem;
  font-weight: 900;
  color: var(--text);
}

.week-flex-subtitle {
  margin-top: 2px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
}

.week-flex-list {
  display: grid;
  gap: 8px;
}

.week-day-row {
  padding: 16px;
  border-radius: 24px;
  background: rgba(249,251,255,0.88);
  border: 1px solid rgba(214,224,236,0.82);
}

.week-day-today {
  background: linear-gradient(180deg, rgba(232,242,255,0.96), rgba(247,251,255,0.92));
  border-color: rgba(10,132,255,0.26);
  box-shadow: 0 14px 28px rgba(10,132,255,0.10);
}

.week-day-complete {
  border-color: rgba(52,199,89,0.22);
}

.week-day-past:not(.week-day-today) {
  opacity: 0.82;
}

.week-day-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.week-day-label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.week-day-marker {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(10,132,255,0.28);
  box-shadow: 0 0 0 6px rgba(10,132,255,0.08);
}

.week-day-complete .week-day-marker {
  background: rgba(52,199,89,0.92);
  box-shadow: 0 0 0 6px rgba(52,199,89,0.10);
}

.week-day-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.week-day-name {
  font-weight: 900;
  font-size: 0.96rem;
  color: var(--text);
}

.week-day-date {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--muted);
}

.week-day-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.week-status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 0.7rem;
  font-weight: 800;
}

.week-status-pill-primary {
  background: rgba(10,132,255,0.12);
  color: var(--primary);
}

.week-status-pill-success {
  background: rgba(52,199,89,0.12);
  color: #24964b;
}

.week-day-potential-label {
  margin-left: 0;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(214,224,236,0.9);
  color: var(--text-muted-strong);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}

.week-day-chores {
  display: grid;
  gap: 8px;
}

.week-chore-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(218,227,238,0.88);
}

.week-chore-emoji {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,132,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
  font-size: 1.75rem;
}

.week-chore-status {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(120,120,128,0.12);
  color: var(--text-muted-strong);
  font-size: 0.96rem;
  font-weight: 900;
}

.week-chore-main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.week-chore-name {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text);
}

.week-chore-detail {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
}

.week-chore-val {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--text-muted-strong);
  white-space: nowrap;
}

.week-chore-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.week-chore-submit {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(180deg, var(--primary), var(--purple));
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  box-shadow: 0 12px 22px rgba(10,132,255,0.20);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.week-chore-submit:hover {
  filter: brightness(1.03);
  box-shadow: 0 14px 24px rgba(10,132,255,0.24);
}

.week-chore-submit:active {
  transform: scale(0.96);
}

.week-meta-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.week-meta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(214,224,236,0.96);
  color: var(--text-muted-strong);
  font-size: 0.7rem;
  font-weight: 800;
}

.week-meta-pill.is-primary {
  background: rgba(10,132,255,0.12);
  border-color: rgba(10,132,255,0.16);
  color: var(--primary);
}

.week-meta-pill.is-success {
  background: rgba(52,199,89,0.12);
  border-color: rgba(52,199,89,0.18);
  color: #24964b;
}

.week-meta-pill.is-warm {
  background: rgba(255,159,10,0.12);
  border-color: rgba(255,159,10,0.18);
  color: #bf6900;
}

.week-chore-item.is-approved .week-chore-status {
  background: rgba(52,199,89,0.14);
  color: #24964b;
}

.week-chore-item.is-approved .week-chore-val {
  color: #24964b;
}

.week-chore-item.is-pending .week-chore-status {
  background: rgba(255,159,10,0.14);
  color: #bf6900;
}

.week-chore-item.is-rejected .week-chore-status {
  background: rgba(255,69,58,0.14);
  color: #c9342d;
}

.week-chore-item.is-missed .week-chore-status {
  background: rgba(120,120,128,0.14);
  color: var(--muted);
}

.week-chore-item.is-missed .week-chore-name {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.week-chore-item.is-missed .week-chore-emoji {
  opacity: 0.65;
}

.week-chore-item-free .week-chore-status,
.week-chore-item.is-todo .week-chore-status {
  background: rgba(10,132,255,0.10);
  color: var(--primary);
}

.week-chore-item-free .week-chore-emoji {
  background: rgba(120,120,128,0.10);
}

@media (max-width: 720px) {
  .parent-tool-grid,
  .xp-control-grid,
  .xp-pool-grid {
    grid-template-columns: 1fr;
  }

  .parent-tool-header,
  .xp-control-card-head,
  .xp-control-card-head-spread,
  .week-schedule-header,
  .week-day-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .parent-field-grid,
  .parent-field-grid-compact,
  .parent-shop-form-grid,
  .xp-streak-row,
  .xp-weekly-row {
    grid-template-columns: 1fr;
  }

  .parent-form-span-2,
  .parent-form-span-3 {
    grid-column: auto;
  }

  .parent-action-row,
  .parent-action-row-split {
    flex-direction: column;
    align-items: stretch;
  }

  .parent-tool-total,
  .parent-status-pill,
  .parent-inline-meta,
  .week-schedule-summary-pill {
    white-space: normal;
  }

  .week-day-meta {
    justify-content: flex-start;
  }
}

@media (max-width: 520px) {
  .mystery-prize-row {
    grid-template-columns: 92px minmax(0, 1fr) 74px auto;
    grid-template-areas:
      "type amount weight remove"
      "label label label label";
  }

  .mystery-prize-field-type {
    grid-area: type;
  }

  .mystery-prize-field-amount {
    grid-area: amount;
  }

  .mystery-prize-field-weight {
    grid-area: weight;
  }

  .mystery-prize-field-label {
    grid-area: label;
  }

  .mystery-prize-row .mp-remove {
    grid-area: remove;
  }
}

/* ── Premium consistency pass ─────────────────────────────────── */
:root {
  --shell-gap: 18px;
  --panel-radius-premium: 30px;
  --card-radius-premium: 28px;
  --control-radius-premium: 18px;
  --soft-border-premium: rgba(214, 223, 236, 0.92);
  --soft-shadow-premium: 0 20px 44px rgba(15, 23, 42, 0.08), 0 6px 18px rgba(15, 23, 42, 0.04);
}

body:not(.theme-dark) {
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--primary-rgb, 10,132,255), 0.17), transparent 32%),
    radial-gradient(circle at 14% 80%, rgba(var(--primary-rgb, 10,132,255), 0.07), transparent 26%),
    linear-gradient(180deg, #fcfdff 0%, rgba(var(--primary-rgb, 10,132,255), 0.08) 100%) !important;
}

body::before {
  background:
    radial-gradient(circle at 10% 18%, rgba(var(--primary-rgb, 10,132,255), 0.08) 0%, transparent 30%),
    radial-gradient(circle at 90% 22%, rgba(var(--primary-rgb, 10,132,255), 0.06) 0%, transparent 28%),
    radial-gradient(circle at 52% 82%, rgba(var(--primary-rgb, 10,132,255), 0.05) 0%, transparent 34%) !important;
}

.app-header {
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(22px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.04) !important;
  box-shadow:
    0 1px 0 rgba(15,23,42,0.05),
    0 16px 32px rgba(15,23,42,0.04) !important;
  border-bottom: 1px solid rgba(225,231,241,0.92) !important;
}

.app-header .header-actions {
  right: 18px;
}

.app-header .btn-ghost {
  background: rgba(255,255,255,0.96) !important;
  border: 1.5px solid rgba(var(--primary-rgb, 10,132,255), 0.18) !important;
  color: var(--text) !important;
  box-shadow: 0 8px 20px rgba(15,23,42,0.05);
}

.app-header .btn-ghost:hover {
  background: #ffffff !important;
  box-shadow: 0 12px 24px rgba(15,23,42,0.07);
}

.container {
  padding-left: 18px;
  padding-right: 18px;
}

.page-content {
  padding-top: 22px;
  padding-bottom: calc(112px + env(safe-area-inset-bottom));
}

.card,
.approval-card,
.chore-card,
.login-option-card,
.child-select-btn,
.parent-overview-card,
.parent-overview-callout,
.parent-tool-card,
.xp-control-card,
.week-schedule-card,
.daily-goal-card,
.earnings-simple-card,
.mood-checkin-card,
.leaderboard-enhanced {
  border-radius: var(--card-radius-premium) !important;
  border: 1px solid rgba(255,255,255,0.92) !important;
  box-shadow:
    0 18px 44px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.84) !important;
}

.setup-screen {
  gap: 22px;
  padding: 28px 18px 84px;
}

.setup-card {
  max-width: 460px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}

#login-area.setup-card {
  max-width: 720px;
}

#login-area {
  display: grid;
  gap: 16px;
  width: 100%;
}

.setup-card > .card {
  width: 100%;
}

.setup-hero h2 {
  line-height: 0.98;
  margin-bottom: 8px;
}

.setup-hero p {
  max-width: 560px;
}

.login-options {
  gap: 14px;
  margin-bottom: 16px;
}

.login-option-card {
  min-height: 122px;
  padding: 20px 18px;
  justify-content: center;
  gap: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,255,0.92)) !important;
  border-color: rgba(255,255,255,0.92) !important;
}

.login-option-emoji {
  margin-bottom: 2px;
}

.parent-login-option {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(var(--primary-rgb, 10,132,255), 0.06)) !important;
}

.child-select-grid {
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
}

.child-select-btn {
  min-height: 132px;
  padding: 18px 12px;
  gap: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,255,0.92)) !important;
  border-color: rgba(255,255,255,0.92) !important;
}

.child-select-btn .child-sel-emoji {
  width: 52px;
  height: 52px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.child-select-btn .child-sel-name {
  font-size: 0.96rem;
}

#pin-entry-area .card {
  padding: 22px;
}

.tab-nav,
.child-tabs {
  background: rgba(255,255,255,0.62) !important;
  border: 1px solid rgba(255,255,255,0.88) !important;
  box-shadow: 0 14px 30px rgba(15,23,42,0.06) !important;
}

.tab-btn,
.child-tab-btn {
  border-radius: 18px;
}

.tab-btn.active,
.child-tab-btn.active {
  background: rgba(255,255,255,0.96) !important;
}

.child-hero {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.24), transparent 34%),
    var(--hero-gradient) !important;
  border-radius: var(--panel-radius-premium) !important;
  box-shadow:
    0 24px 56px rgba(var(--primary-rgb, 10,132,255), 0.22),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

.hero-pill {
  background: rgba(255,255,255,0.16) !important;
  border-color: rgba(255,255,255,0.26) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}

.parent-hero-banner {
  border-radius: var(--panel-radius-premium) !important;
  box-shadow:
    0 22px 52px rgba(15,23,42,0.12),
    inset 0 1px 0 rgba(255,255,255,0.16) !important;
}

.parent-tool-grid,
.xp-control-grid,
.parent-overview-stack,
.xp-streak-list,
.xp-weekly-list,
.xp-game-summary-list,
.mystery-prize-list,
.week-schedule-list {
  gap: var(--shell-gap);
}

.parent-tool-card,
.xp-control-card,
.parent-overview-kpi,
.parent-section-stat,
.parent-kid-row,
.parent-activity-row,
.week-day-row {
  border-radius: 24px !important;
}

.parent-tool-card,
.xp-control-card {
  padding: 22px;
}

.parent-tool-header,
.xp-control-card-head,
.xp-control-card-head-spread,
.week-schedule-header,
.week-day-header,
.parent-overview-head,
.parent-overview-section-head {
  gap: 16px;
}

.parent-overview-kpi-grid,
.parent-overview-shortcuts,
.parent-section-stat-grid,
.parent-summary-grid {
  gap: 14px;
}

.parent-tool-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.parent-tool-card select,
.parent-tool-card textarea,
.xp-control-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.xp-control-card select,
.xp-control-card textarea,
.game-xp-input,
.step-input {
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  border-radius: var(--control-radius-premium) !important;
  border: 1px solid var(--soft-border-premium) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248,250,255,0.94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.90),
    0 1px 2px rgba(15,23,42,0.03) !important;
  color: var(--text) !important;
  font-size: 0.98rem;
  font-weight: 700;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.parent-tool-card textarea,
.xp-control-card textarea {
  min-height: 110px;
  padding: 14px 16px;
}

.parent-tool-card input:focus,
.parent-tool-card select:focus,
.parent-tool-card textarea:focus,
.xp-control-card input:focus,
.xp-control-card select:focus,
.xp-control-card textarea:focus,
.game-xp-input:focus,
.step-input:focus {
  border-color: rgba(var(--primary-rgb, 10,132,255), 0.72) !important;
  box-shadow:
    0 0 0 4px rgba(var(--primary-rgb, 10,132,255), 0.14),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
  outline: none;
}

.parent-tool-card select,
.xp-control-card select {
  padding-right: 42px;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248,250,255,0.94)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23606c80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, right 14px center;
  background-size: 100% 100%, 12px 8px;
}

.mystery-prize-row {
  grid-template-columns: 104px minmax(0, 1fr) 88px 48px;
  grid-template-areas:
    "type amount weight remove"
    "label label label remove";
  align-items: start;
  gap: 12px;
  padding: 16px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(250,252,255,0.96), rgba(245,248,255,0.90)) !important;
  border: 1px solid rgba(224,231,241,0.92) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.82);
}

.mystery-prize-field-type { grid-area: type; }
.mystery-prize-field-amount { grid-area: amount; }
.mystery-prize-field-weight { grid-area: weight; }
.mystery-prize-field-label { grid-area: label; }

.mystery-prize-row .mp-remove {
  grid-area: remove;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 18px;
  align-self: start;
  justify-self: end;
  background: rgba(var(--primary-rgb, 10,132,255), 0.08) !important;
  border: 1px solid rgba(var(--primary-rgb, 10,132,255), 0.14) !important;
}

.xp-pool-grid {
  gap: 12px;
}

.xp-pool-chip,
.xp-streak-row,
.xp-weekly-row,
.xp-game-summary {
  border-radius: 22px;
  padding: 14px;
}

.xp-pool-chip {
  background:
    linear-gradient(180deg, rgba(250,252,255,0.96), rgba(245,248,255,0.92)) !important;
}

.xp-pool-chip input {
  text-align: center;
}

.game-xp-input {
  width: 78px;
  min-height: 42px;
  padding-left: 12px;
  padding-right: 12px;
}

.parent-inline-meta,
.parent-tool-total,
.parent-status-pill,
.week-schedule-summary-pill,
.parent-overview-badge,
.parent-section-kicker {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.child-tab-btn.active .tab-count,
.parent-overview-badge,
.parent-section-kicker,
.parent-tool-total,
.week-schedule-summary-pill,
.week-status-pill-primary {
  background: rgba(var(--primary-rgb, 10,132,255), 0.12) !important;
  color: var(--primary) !important;
}

.week-day-today {
  background: linear-gradient(180deg, rgba(var(--primary-rgb, 10,132,255), 0.14), rgba(255,255,255,0.94)) !important;
  border-color: rgba(var(--primary-rgb, 10,132,255), 0.24) !important;
  box-shadow: 0 14px 30px rgba(var(--primary-rgb, 10,132,255), 0.10) !important;
}

.week-day-marker,
.week-chore-item-free .week-chore-status,
.week-chore-item.is-todo .week-chore-status {
  background: rgba(var(--primary-rgb, 10,132,255), 0.12) !important;
  color: var(--primary) !important;
}

@media (max-width: 720px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .xp-pool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .login-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .setup-screen {
    padding-left: 16px;
    padding-right: 16px;
  }

  .mystery-prize-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 46px;
    grid-template-areas:
      "type amount remove"
      "weight weight remove"
      "label label label";
  }

  .xp-pool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .child-tabs {
    padding: 5px;
  }
}

/* ── Parent interaction and legacy cleanup ───────────────────── */
.tab-btn.active,
.tab-btn.active .tab-label,
.tab-btn.active .tab-icon,
.child-tab-btn.active,
.child-tab-btn.active .tab-label,
.child-tab-btn.active .tab-icon {
  color: var(--text) !important;
}

#parent-tab-content .btn,
.parent-shortcut-btn {
  border-radius: 18px !important;
}

#parent-tab-content .btn-sm {
  height: 42px;
  padding: 0 14px;
  font-size: 0.8rem;
}

#parent-tab-content .btn-primary,
#parent-tab-content .btn-success,
#parent-tab-content .btn-danger,
#parent-tab-content .btn-purple,
#parent-tab-content .btn-secondary,
#parent-tab-content .btn-ghost,
#parent-tab-content .btn-outline,
.parent-shortcut-btn {
  box-shadow:
    0 12px 24px rgba(24, 34, 61, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.14) !important;
}

#parent-tab-content .btn-ghost,
#parent-tab-content .btn-secondary,
#parent-tab-content .btn-outline,
.parent-shortcut-btn {
  background: linear-gradient(135deg, var(--primary), #a78bfa) !important;
  color: #fff !important;
  border: none !important;
}

#parent-tab-content .btn-ghost:hover,
#parent-tab-content .btn-secondary:hover,
#parent-tab-content .btn-outline:hover,
.parent-shortcut-btn:hover {
  background: linear-gradient(135deg, var(--primary-hover), #9061f9) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

#parent-tab-content .parent-filter-row .btn-secondary {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,248,255,0.94)) !important;
  color: var(--text) !important;
  border: 1px solid rgba(223, 231, 242, 0.96) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.94),
    0 8px 18px rgba(15,23,42,0.05) !important;
}

#parent-tab-content .parent-filter-row .btn-secondary:hover {
  background: linear-gradient(180deg, rgba(247,250,255,1), rgba(241,246,255,0.98)) !important;
  color: var(--text) !important;
}

#parent-tab-content .btn-ghost:disabled,
#parent-tab-content .btn-secondary:disabled,
#parent-tab-content .btn-outline:disabled,
#parent-tab-content .btn-success:disabled,
.parent-shortcut-btn:disabled {
  opacity: 0.48;
  box-shadow: none !important;
}

.parent-shortcut-btn {
  width: 100%;
  min-height: 52px;
  justify-content: center;
  letter-spacing: 0.01em;
}

#parent-tab-content .btn-danger,
#parent-tab-content .shop-delete-btn,
#parent-tab-content .mp-remove,
#parent-tab-content .step-remove,
#parent-tab-content #shop-cancel-btn,
#parent-tab-content #cancel-edit-btn,
#parent-tab-content #cancel-edit-child-btn,
#parent-tab-content #payout-cancel-btn,
#parent-tab-content [data-reject-redemption],
#parent-tab-content [data-reject-payout] {
  background: linear-gradient(135deg, var(--red), #ff6b5d) !important;
  color: #fff !important;
  border: none !important;
  box-shadow:
    0 12px 24px rgba(255, 69, 58, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

#parent-tab-content .btn-danger:hover,
#parent-tab-content .shop-delete-btn:hover,
#parent-tab-content .mp-remove:hover,
#parent-tab-content .step-remove:hover,
#parent-tab-content #shop-cancel-btn:hover,
#parent-tab-content #cancel-edit-btn:hover,
#parent-tab-content #cancel-edit-child-btn:hover,
#parent-tab-content #payout-cancel-btn:hover,
#parent-tab-content [data-reject-redemption]:hover,
#parent-tab-content [data-reject-payout]:hover {
  background: linear-gradient(135deg, #e43a30, #ff5c52) !important;
  color: #fff !important;
}

#parent-tab-content .activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 15px !important;
  border: 1px solid rgba(223, 231, 242, 0.96) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,249,255,0.94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.94),
    0 10px 22px rgba(15,23,42,0.05) !important;
  color: var(--text-muted-strong) !important;
}

#parent-tab-content .activity-item + .activity-item {
  margin-top: 10px;
}

.parent-history-list,
.payment-history-list,
.ledger-list {
  display: grid;
  gap: 10px;
}

.parent-history-row,
.ledger-entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 15px;
  border-radius: 22px;
  border: 1px solid rgba(223, 231, 242, 0.96);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,249,255,0.94));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.94),
    0 10px 22px rgba(15,23,42,0.05);
}

.parent-history-row-compact {
  padding: 12px 14px;
}

.parent-history-icon,
.ledger-entry-icon {
  width: 40px;
  height: 40px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--primary-rgb, 10,132,255), 0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
  font-size: 1rem;
}

.parent-history-main,
.ledger-entry-main {
  min-width: 0;
}

.parent-history-title,
.ledger-entry-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
}

.parent-history-meta,
.ledger-entry-meta {
  margin-top: 4px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-muted-strong);
}

.parent-history-side,
.ledger-entry-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  white-space: nowrap;
}

.parent-history-value {
  font-size: 0.86rem;
  font-weight: 900;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.parent-inline-action {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 14px !important;
  font-size: 0.74rem !important;
  line-height: 1;
}

.parent-history-empty {
  padding: 18px;
  border-radius: 22px;
  text-align: center;
  color: var(--text-muted-strong);
  font-size: 0.86rem;
  font-weight: 700;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.95), rgba(247,250,255,0.92));
  border: 1px solid rgba(223, 231, 242, 0.92);
}

.payment-history-group + .payment-history-group {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(224, 231, 241, 0.86);
}

.payment-child-card {
  margin-bottom: 12px;
}

.payment-mark-btn {
  min-width: 122px;
}

.payment-history-label {
  margin: 0 0 10px 8px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.parent-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.parent-filter-row-tight {
  margin-bottom: 14px;
}

.ledger-entry-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted-strong);
}

.ledger-entry-child-emoji {
  font-size: 0.95rem;
}

.ledger-entry-values {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.ledger-value {
  font-size: 0.8rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.ledger-value.is-positive {
  color: var(--accent-success);
}

.ledger-value.is-negative {
  color: var(--accent-danger);
}

.ledger-value.is-xp {
  color: var(--accent-xp);
}

.shop-item-card {
  padding: 16px !important;
}

.shop-item-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 0;
  border-bottom: none;
}

.shop-item-emoji {
  width: 56px;
  height: 56px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(241,246,255,0.92));
  border: 1px solid rgba(223, 231, 242, 0.96);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.94);
  font-size: 1.7rem;
}

.shop-item-info {
  display: grid;
  gap: 8px;
}

.shop-item-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.shop-item-name {
  font-size: 0.95rem;
  line-height: 1.2;
  white-space: normal;
}

.shop-item-desc {
  margin-top: 0;
  line-height: 1.4;
  white-space: normal;
}

.shop-item-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
}

.shop-xp-badge,
.shop-meta-chip,
.shop-item-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1;
}

.shop-xp-badge {
  background: linear-gradient(180deg, #ffbe47, #ff9f1f);
  color: #fff;
  box-shadow: 0 10px 18px rgba(255, 159, 31, 0.18);
}

.shop-meta-chip {
  background: rgba(var(--primary-rgb, 10,132,255), 0.08);
  color: var(--text-muted-strong);
  border: 1px solid rgba(var(--primary-rgb, 10,132,255), 0.14);
}

.shop-item-status-pill {
  background: rgba(15,23,42,0.06);
  color: var(--text-muted-strong);
  border: 1px solid rgba(181, 192, 208, 0.9);
}

.shop-item-actions {
  gap: 8px;
  align-self: center;
}

.shop-item-actions .btn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 16px !important;
}

.mystery-box-grid .parent-form-narrow,
.mystery-box-grid .parent-form-narrow input {
  max-width: 152px;
}

@media (max-width: 720px) {
  .parent-history-row,
  .ledger-entry {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
  }

  .parent-history-side,
  .ledger-entry-side {
    grid-column: 2;
    align-items: flex-start;
    white-space: normal;
  }

  .shop-item-row {
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: flex-start;
  }

  .shop-item-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    width: 100%;
  }

  .payment-child-card {
    gap: 10px;
  }

  .payment-child-card .child-card-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 520px) {
  .shop-item-name-row {
    flex-direction: column;
  }

  .mystery-box-grid .parent-form-narrow,
  .mystery-box-grid .parent-form-narrow input {
    max-width: none;
  }
}

/* ════════════════════════════════════════════════════════════════════
   iOS PRODUCTION POLISH LAYER
   Applied last so it wins cascade where needed. Addresses:
   - Native iOS look: SF system text, proper letter-spacing
   - Consistent focus / hover / active states on all interactive
   - Safe-area padding on viewport-covering overlays
   - Correctly sized touch targets
   - Removal of jarring pulse/bounce when element is not user-triggered
   - iOS-style list rows with chevron disclosure hints
   ═══════════════════════════════════════════════════════════════════ */

/* --- Typography: native iOS letter-spacing & weights --- */
body, .chore-title, .card-title, .child-hero-name,
.setup-hero h2, .landing-hero h2,
.parent-header h2, .approval-chore-name {
  letter-spacing: -0.015em;
}

/* --- Global interactive element polish --- */
button, [role="button"], a, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

button:not(:disabled), [role="button"]:not([aria-disabled="true"]) {
  touch-action: manipulation;
}

/* Ensure any interactive element meets 44px hit target unless it's an inline ghost */
.btn, .tab-btn, .child-tab-btn, .day-pill, .toggle, .pin-key,
.login-option-card, .child-select-btn, .emoji-btn, .btn-icon {
  min-height: var(--hit-target);
}
.emoji-btn, .btn-icon { min-width: var(--hit-target); }

/* --- Pressable feedback: consistent subtle scale on active --- */
.login-option-card:active,
.child-select-btn:active,
.settings-row:active,
.chore-list-item:active,
.activity-item:active,
.day-pill:active {
  transform: scale(0.98);
  transition: transform var(--dur-fast) var(--ease-out);
}

/* --- iOS-style focus ring (single source of truth) --- */
*:focus-visible {
  outline: 3px solid rgba(10,132,255,0.35);
  outline-offset: 2px;
  border-radius: inherit;
}

/* --- Overlays: universal safe-area + subtle glass backdrop --- */
.celebration-overlay,
.photo-capture-overlay,
.photo-viewer-overlay,
.mini-game-overlay,
.notif-overlay,
.sticker-drop-overlay,
.daily-bonus-overlay,
#payout-celebration,
.mystery-box-overlay {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* --- Cards: cleaner defaults --- */
.card {
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
}

/* --- iOS list pattern: subtle dividers, comfortable rows --- */
.settings-card .settings-row,
.chore-group .chore-list-item {
  -webkit-tap-highlight-color: transparent;
}

/* --- Pulse suppression: disable ambient pulses when user may be reading --- */
@media (prefers-reduced-motion: no-preference) {
  .done-btn { animation-duration: 3s; }
}
@media (prefers-reduced-motion: reduce) {
  .done-btn, .level-node-current, .streak-fire-glow,
  .daily-bonus-streak, .child-hero, .bb-start-msg,
  .badge-item-lg.badge-item-close, .mini-game-icon-wrap {
    animation: none !important;
  }
}

/* --- Sticky surfaces: native iOS translucent blur --- */
.app-header {
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
}

/* --- Status chips: consistent iOS rounded pill vibe --- */
.status-chip {
  letter-spacing: -0.01em;
  font-weight: 700;
}

/* --- Kill zoom on form focus for iOS (font-size must be ≥16px) --- */
@media (hover: none) and (pointer: coarse) {
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px;
  }
}

/* --- iOS-style disclosure indicator for navigable rows --- */
.disclosure-row {
  position: relative; padding-right: calc(var(--space-5) + 12px);
}
.disclosure-row::after {
  content: ''; position: absolute; right: var(--space-4); top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 8px; height: 8px;
  border-top: 2px solid var(--muted);
  border-right: 2px solid var(--muted);
  opacity: 0.6;
}

/* --- Remove jittery transitions on color/background changes --- */
.chore-card, .card, .approval-card, .child-card,
.login-option-card, .child-select-btn, .landing-feature {
  will-change: auto;
}

/* --- Buttons: iOS-native active feedback --- */
.btn:active,
.done-btn:active,
.focus-mode-fab:active,
.btn-icon:active {
  transition-duration: 80ms;
}

/* --- Compact mobile refinements --- */
@media (max-width: 380px) {
  .container { padding-left: calc(var(--space-4) + var(--safe-left)); padding-right: calc(var(--space-4) + var(--safe-right)); }
  .card { padding: var(--space-4); }
  .child-hero { padding: var(--space-5) var(--space-4); }
  .chore-card { padding: var(--space-4); }
}

/* --- Large screens: maintain iOS-like max width on iPad --- */
@media (min-width: 900px) {
  .container { max-width: 640px; }
}

/* --- Improve scroll inertia on all scrollable regions --- */
.notif-overlay-body,
.tab-nav,
.child-tabs,
.emoji-picker {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* --- Semi-transparent tab bar that responds to scroll (iOS 15+) --- */
.child-tabs, .tab-nav {
  background: rgba(244,246,251,0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
}

/* --- Suppress sticker-wobble continuous motion, only on hover --- */
.sticker-item:hover { animation: none; }
.sticker-item { transition: transform var(--dur-base) var(--ease-spring); }
.sticker-item:hover { transform: scale(1.1) rotate(-2deg); }

/* --- Chore card: cleaner status borders (no !important needed anymore) --- */
.chore-card.status-todo { border: 2px solid rgba(10,132,255,0.35); }
.chore-card.status-pending { border: 2px solid rgba(255,159,10,0.55); background: linear-gradient(135deg, #fff 0%, #fffbf0 100%); }
.chore-card.status-approved { border: 2px solid rgba(52,199,89,0.55); background: linear-gradient(135deg, #fff 0%, #f0fdf4 100%); }
.chore-card.status-rejected { border: 2px solid rgba(255,69,58,0.55); background: linear-gradient(135deg, #fff 0%, #fff5f5 100%); }

/* --- Buddy bubble: simpler, more iOS-like --- */
.buddy-bubble {
  letter-spacing: -0.01em;
}

/* --- Notice: softer iOS callout feel --- */
.notice {
  background: rgba(10,132,255,0.08);
  border: 0.5px solid rgba(10,132,255,0.22);
  color: var(--primary);
  letter-spacing: -0.01em;
}

/* --- Day picker: iOS segmented feel --- */
.day-pill { min-height: 38px; font-weight: 600; border-width: 1.5px; }
.day-pill.active { font-weight: 700; }

/* --- Toast: ensure above modals for critical feedback --- */
.toast { z-index: var(--z-critical); }

/* --- Consistent disabled state --- */
button:disabled, .btn:disabled, [aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; filter: grayscale(0.2);
}
button:disabled:active, .btn:disabled:active { transform: none; }

/* ─────────────────────────────────────────────────────────────
   Focused Mode (autism-friendly) — parent toggle, Space theme,
   Stats tab, reduced sensory treatment.
   ───────────────────────────────────────────────────────────── */

/* Parent settings: engagement mode toggle + theme picker */
.engagement-mode-toggle {
  display: flex;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  overflow: hidden;
  margin-bottom: 6px;
}
.engagement-mode-btn {
  flex: 1;
  padding: 10px 14px;
  border: none;
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.engagement-mode-btn.active {
  background: var(--primary);
  color: #fff;
}
.interest-theme-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.interest-theme-btn {
  padding: 10px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.interest-theme-btn:hover { border-color: var(--primary); }
.interest-theme-btn:active { transform: scale(0.97); }
.interest-theme-btn.active {
  border-color: transparent;
  background: linear-gradient(135deg, #3b2f87 0%, #6c5ce7 100%);
  color: #fff;
  box-shadow: 0 2px 10px rgba(108, 92, 231, 0.3);
}
.form-hint {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 4px;
}

/* Nova buddy colour hooks */
.char-nova svg { filter: drop-shadow(0 2px 6px rgba(108, 92, 231, 0.35)); }
.char-nova.mood-curious svg { transform: rotate(-3deg); transition: transform 0.3s var(--ease-out); }
.char-nova.mood-happy svg { transform: translateY(-2px); transition: transform 0.3s var(--ease-out); }
.char-nova.mood-alert svg { transform: scale(1.04); transition: transform 0.3s var(--ease-out); }

/* Page tint when Focused Mode is active — subtle cosmic backdrop */
.page-content.page-focused {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(108, 92, 231, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(0, 212, 255, 0.06) 0%, transparent 55%);
}
.child-hero.child-hero-focused {
  background: linear-gradient(135deg, #1e1b4b 0%, #3b2f87 55%, #6c5ce7 100%);
  color: #e8e6ff;
}
.child-hero.child-hero-focused .child-hero-greeting,
.child-hero.child-hero-focused .xp-sub-label {
  color: rgba(232, 230, 255, 0.85);
}
.child-hero.child-hero-focused .child-hero-name,
.child-hero.child-hero-focused .child-hero-level {
  color: #ffffff;
}
.child-hero.child-hero-focused .hero-pill {
  background: rgba(255, 255, 255, 0.12);
  color: #e8e6ff;
  border-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.child-hero.child-hero-focused .xp-bar-container {
  background: rgba(255, 255, 255, 0.12);
}
.child-hero.child-hero-focused .xp-bar-fill {
  background: linear-gradient(90deg, #00d4ff, #fde68a);
}

/* Celebration overlay in Focused Mode — calmer, cosmic palette */
.chore-celebration-overlay.is-focused {
  background: linear-gradient(135deg, #0a1a3a 0%, #3b2f87 60%, #6c5ce7 100%) !important;
}
.chore-celebration-overlay.is-focused .chore-celebration-title {
  letter-spacing: -0.01em;
}

/* ── Stats tab ─────────────────────────────────────────────── */
.stats-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.stats-section {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.stats-section-title {
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
}
.stats-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 0.5px solid rgba(0,0,0,0.04);
}
.stats-row:last-of-type { border-bottom: none; }
.stats-label {
  font-size: 0.82rem;
  color: var(--text-muted-strong);
  font-weight: 600;
}
.stats-value {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  text-align: right;
}
.stats-subhead {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  margin: 8px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.stats-note {
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
}
.stats-badge-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.stats-badge-emoji {
  font-size: 1.5rem;
  width: 36px;
  text-align: center;
}
.stats-badge-info { flex: 1; min-width: 0; }
.stats-badge-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}
.stats-badge-meta {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
}
.stats-badge-pct {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--primary);
  min-width: 42px;
  text-align: right;
}
.stats-sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.stats-sticker-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: var(--surface-muted, #f6f7fb);
}
.stats-sticker-cell.owned {
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.12), rgba(0, 212, 255, 0.08));
  border-color: rgba(108, 92, 231, 0.25);
}
.stats-sticker-cell.locked {
  color: rgba(0,0,0,0.2);
  background: rgba(0,0,0,0.03);
}
.stats-rules-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.stats-rules-list li {
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 6px 0;
  color: var(--text-muted-strong);
  border-bottom: 0.5px solid rgba(0,0,0,0.04);
}
.stats-rules-list li:last-of-type { border-bottom: none; }
.stats-rules-list strong { color: var(--text); font-weight: 700; }
.stats-levels {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stats-level-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  background: rgba(0,0,0,0.02);
  font-size: 0.82rem;
}
.stats-level-row.reached { background: rgba(10, 132, 255, 0.06); }
.stats-level-row.current {
  background: linear-gradient(90deg, rgba(108, 92, 231, 0.16), rgba(0, 212, 255, 0.08));
  font-weight: 700;
  border: 1px solid rgba(108, 92, 231, 0.3);
}
.stats-level-badge {
  font-weight: 700;
  min-width: 70px;
}
.stats-level-title {
  flex: 1;
  color: var(--text-muted-strong);
}
.stats-level-row.reached .stats-level-title,
.stats-level-row.current .stats-level-title {
  color: var(--text);
}
.stats-level-xp {
  font-weight: 700;
  color: var(--muted);
  font-size: 0.78rem;
}
.stats-level-row.reached .stats-level-xp { color: var(--primary); }

@media (prefers-reduced-motion: reduce) {
  .chore-celebration-overlay.is-focused,
  .child-hero.child-hero-focused {
    transition: none !important;
    animation: none !important;
  }
}

/* ── Constellation Builder ──────────────────────────────── */
.game-slot-cb .game-slot-meta {
  font-size: 0.64rem;
  font-weight: 800;
  color: var(--muted);
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.cb-inner {
  width: 100%;
  max-width: 520px;
  padding: 0;
  overflow: hidden;
  position: relative;
  border-radius: 22px;
  min-height: min(720px, 92vh);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #1a1040 0%, #0a0628 60%, #030014 100%);
  color: #fff;
}
.cb-header {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cb-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cb-close:hover { background: rgba(255,255,255,0.14); }
.cb-title { min-width: 0; }
.cb-eyebrow {
  font-size: 0.65rem;
  font-weight: 900;
  color: #ffd87c;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.cb-name {
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.15;
  margin-top: 2px;
}
.cb-sub {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255,255,255,0.65);
}
.cb-progress {
  text-align: right;
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 6px 10px;
  min-width: 70px;
}
.cb-progress-label {
  font-size: 0.58rem;
  font-weight: 800;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.cb-progress-value {
  font-size: 1.05rem;
  font-weight: 900;
  color: #ffd87c;
}
.cb-progress-value span { color: rgba(255,255,255,0.55); font-size: 0.8rem; }
.cb-stage {
  position: relative;
  flex: 1;
  min-height: 360px;
  overflow: hidden;
}
#cb-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.cb-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  pointer-events: none;
  white-space: nowrap;
  max-width: 90%;
}
.cb-hint b { color: #ffd87c; }
.cb-hint-nudge { animation: cb-hint-shake 0.4s ease-in-out; }
@keyframes cb-hint-shake {
  0%,100% { transform: translateX(-50%); }
  25% { transform: translateX(calc(-50% - 6px)); }
  75% { transform: translateX(calc(-50% + 6px)); }
}
.cb-footer {
  padding: 10px 16px 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.cb-segments {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cb-seg {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.55);
  font-size: 0.72rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cb-seg-current {
  border-color: #ffd87c;
  color: #ffd87c;
  box-shadow: 0 0 0 2px rgba(255,216,124,0.15);
  animation: cb-seg-pulse 1.4s ease-in-out infinite;
}
.cb-seg-done {
  background: rgba(255,216,124,0.12);
  border-color: rgba(255,216,124,0.35);
  color: #ffd87c;
}
@keyframes cb-seg-pulse {
  0%,100% { box-shadow: 0 0 0 2px rgba(255,216,124,0.15); }
  50% { box-shadow: 0 0 0 5px rgba(255,216,124,0.05); }
}
.cb-complete-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(circle at center, rgba(26,16,64,0.9), rgba(3,0,20,0.96));
  backdrop-filter: blur(2px);
  z-index: 40;
}
.cb-complete-card {
  max-width: 360px;
  text-align: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,216,124,0.25);
  border-radius: 22px;
  padding: 22px 20px 20px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
}
.cb-complete-emoji { font-size: 3.2rem; line-height: 1; }
.cb-complete-kicker {
  font-size: 0.68rem;
  font-weight: 900;
  color: #ffd87c;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: 6px;
}
.cb-complete-name {
  font-size: 1.6rem;
  font-weight: 900;
  color: #fff;
  margin: 4px 0 10px;
}
.cb-complete-fact {
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  margin-bottom: 16px;
}
.cb-complete-reward {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 16px;
}
.cb-reward-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 900;
}
.cb-reward-xp {
  background: rgba(168,85,247,0.18);
  color: #d9b3ff;
  border: 1px solid rgba(168,85,247,0.4);
}
.cb-reward-progress {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.16);
}
.cb-reward-quiet {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.12);
}
.cb-reward-legendary {
  background: linear-gradient(135deg, rgba(255,216,124,0.25), rgba(168,85,247,0.25));
  color: #ffd87c;
  border: 1px solid rgba(255,216,124,0.45);
}
.cb-complete-btn {
  width: 100%;
  padding: 12px 20px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 0.98rem;
  background: linear-gradient(135deg, #a855f7, #ffd87c);
  border: none;
}
@media (prefers-reduced-motion: reduce) {
  .cb-seg-current { animation: none !important; }
  .cb-hint-nudge { animation: none !important; }
}

/* ── Install Prompt Banner ───────────────────────────────── */
.install-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  max-width: 460px;
  margin: 0 auto;
  padding: 12px 14px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 16px 48px rgba(17, 24, 39, 0.18), 0 2px 8px rgba(17, 24, 39, 0.08);
  border: 1px solid rgba(17, 24, 39, 0.06);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1500;
  transform: translateY(calc(100% + 32px));
  opacity: 0;
  transition: transform 0.28s cubic-bezier(.22,.61,.36,1), opacity 0.28s ease;
}
.install-banner-in {
  transform: translateY(0);
  opacity: 1;
}
.install-banner-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #eef2f8, #dfe6f2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.install-banner-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.install-banner-body {
  flex: 1;
  min-width: 0;
}
.install-banner-title {
  font-size: 0.92rem;
  font-weight: 900;
  color: var(--text, #0f172a);
  line-height: 1.2;
}
.install-banner-sub {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted, #64748b);
  line-height: 1.35;
  margin-top: 2px;
}
.install-banner-sub b {
  color: var(--text, #0f172a);
  font-weight: 800;
}
.install-ios-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--primary, #5ba4cf);
  color: #fff;
  vertical-align: -5px;
  margin: 0 2px;
}
.install-ios-share svg { display: block; }
.install-banner-cta {
  flex-shrink: 0;
  padding: 9px 16px;
  border-radius: 12px;
  border: none;
  background: var(--primary, #5ba4cf);
  color: #fff;
  font-weight: 900;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(91, 164, 207, 0.35);
}
.install-banner-cta:hover { filter: brightness(1.05); }
.install-banner-cta:active { transform: translateY(1px); }
.install-banner-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(15, 23, 42, 0.06);
  color: var(--muted, #64748b);
  font-size: 0.85rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.install-banner-close:hover { background: rgba(15, 23, 42, 0.12); }
@media (prefers-reduced-motion: reduce) {
  .install-banner { transition: opacity 0.2s ease; transform: none; }
}

/* ═════════════════════════════════════════════════════════════════
   WeWard-Inspired Child Dashboard Pass (April 2026)
   Focus: kinetic progression surfaces, glass tab rail, strong CTA motion
   ═════════════════════════════════════════════════════════════════ */

.child-dashboard-shell {
  --ward-glow: rgba(var(--primary-rgb, 37,99,235), 0.26);
  --ward-glow-soft: rgba(var(--primary-rgb, 37,99,235), 0.14);
  position: relative;
  isolation: isolate;
}

.child-dashboard-shell::before {
  content: "";
  position: absolute;
  left: -14px;
  right: -14px;
  top: -76px;
  height: 250px;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(56% 74% at 14% 42%, rgba(var(--primary-rgb, 37,99,235), 0.22) 0%, transparent 70%),
    radial-gradient(44% 70% at 88% 22%, rgba(97, 176, 255, 0.17) 0%, transparent 72%);
  filter: blur(20px);
  animation: ward-shell-float 14s ease-in-out infinite;
}

@keyframes ward-shell-float {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.88; }
  50% { transform: translateY(-10px) scale(1.03); opacity: 1; }
}

.child-dashboard-shell .child-hero {
  position: relative;
  overflow: hidden;
  border-radius: 30px !important;
  padding: 24px 20px 18px !important;
  background:
    radial-gradient(circle at 14% 14%, rgba(255,255,255,0.30), transparent 34%),
    radial-gradient(circle at 90% 0%, rgba(255,255,255,0.20), transparent 36%),
    var(--hero-gradient) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  box-shadow:
    0 24px 58px var(--ward-glow),
    0 6px 20px rgba(15,23,42,0.15),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

.child-dashboard-shell .child-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.20), transparent 46%);
}

.child-dashboard-shell .hero-pills {
  gap: 9px;
  margin-bottom: 14px;
}

.child-dashboard-shell .hero-pill {
  background: rgba(255,255,255,0.20) !important;
  border: 1px solid rgba(255,255,255,0.42) !important;
  border-radius: 999px !important;
  padding: 6px 13px !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.02em;
  font-weight: 900 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}

.child-dashboard-shell .child-hero-body {
  align-items: center;
  gap: 10px;
}

.child-dashboard-shell .child-hero-greeting {
  font-size: 0.76rem !important;
  letter-spacing: 0.09em;
  color: rgba(255,255,255,0.78) !important;
}

.child-dashboard-shell .child-hero-name {
  margin-top: 1px;
  font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.05rem) !important;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.child-dashboard-shell .child-hero-level,
.child-dashboard-shell .xp-sub-label {
  color: rgba(255,255,255,0.82) !important;
}

.child-dashboard-shell .xp-bar-container {
  height: 13px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.26);
  background: rgba(255,255,255,0.18) !important;
  overflow: hidden;
}

.child-dashboard-shell .xp-bar-fill {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.16) inset,
    0 0 18px rgba(255,255,255,0.24);
}

.child-dashboard-shell .child-hero-buddy-col {
  --buddy-tilt-x: 0deg;
  --buddy-tilt-y: 0deg;
  --buddy-lift: 0px;
  width: 122px !important;
  height: 122px !important;
  margin-bottom: -12px !important;
  transform:
    translate3d(0, var(--buddy-lift), 0)
    rotateX(var(--buddy-tilt-x))
    rotateY(var(--buddy-tilt-y)) !important;
  transform-style: preserve-3d;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.child-dashboard-shell .hero-buddy-img {
  width: 122px !important;
  height: 122px !important;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.24));
  animation: ward-buddy-bob 4.6s ease-in-out infinite;
}

@keyframes ward-buddy-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-7px) scale(1.02); }
}

.child-dashboard-shell #child-tab-nav {
  position: relative;
  margin: 14px 0 18px !important;
  padding: 6px !important;
  gap: 6px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,0.92) !important;
  background: rgba(245,248,255,0.68) !important;
  backdrop-filter: blur(20px) saturate(1.45) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.45) !important;
  box-shadow: 0 18px 36px rgba(15,23,42,0.08) !important;
}

.child-dashboard-shell .child-tabs-indicator {
  position: absolute;
  top: 6px;
  left: 6px;
  bottom: 6px;
  width: 0;
  border-radius: 14px;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(140deg, #1f6fff 0%, #4f8dff 56%, #6ab0ff 100%);
  box-shadow:
    0 8px 20px rgba(44, 108, 255, 0.42),
    inset 0 1px 0 rgba(255,255,255,0.24);
  transition:
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
    width 300ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms ease;
}

.child-dashboard-shell .child-tabs-indicator.ready {
  opacity: 1;
}

.child-dashboard-shell #child-tab-nav .tab-btn {
  position: relative;
  z-index: 1;
  flex: 1 1 0 !important;
  min-width: 72px !important;
  min-height: 56px !important;
  padding: 6px 8px !important;
  border-radius: 14px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  white-space: nowrap;
  color: #465270 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition:
    color 180ms ease,
    transform 180ms ease,
    opacity 180ms ease;
}

.child-dashboard-shell #child-tab-nav .tab-btn:hover:not(.active) {
  color: #2f4f92 !important;
  transform: translateY(-1px);
}

.child-dashboard-shell #child-tab-nav .tab-btn.active {
  flex: 1 1 0 !important;
  padding: 6px 8px !important;
  color: #fff !important;
}

.child-dashboard-shell #child-tab-nav .tab-btn .tab-icon {
  font-size: 1.2rem !important;
  line-height: 1;
}

.child-dashboard-shell #child-tab-nav .tab-btn .tab-label {
  display: block !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.02em;
}

.child-dashboard-shell #child-tab-nav .tab-btn .tab-count {
  position: absolute;
  top: 6px;
  right: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.86);
  background: #ff5b6b;
  color: #fff;
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.child-dashboard-shell #child-tab-nav .tab-btn.active .tab-count {
  background: rgba(255,255,255,0.24);
  border-color: rgba(255,255,255,0.22);
  color: #fff;
}

.child-dashboard-shell #child-tab-content {
  display: grid;
  gap: 14px;
}

.child-dashboard-shell #child-tab-content > .card,
.child-dashboard-shell #child-tab-content > .week-schedule-card,
.child-dashboard-shell #child-tab-content > .weekly-challenge-card,
.child-dashboard-shell #child-tab-content > .chores-section,
.child-dashboard-shell #child-tab-content > .mood-done-row {
  margin-bottom: 0 !important;
}

.child-dashboard-shell .card,
.child-dashboard-shell .week-day-row,
.child-dashboard-shell .chore-card {
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,0.92) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(245,248,255,0.94)) !important;
  box-shadow:
    0 14px 30px rgba(15,23,42,0.08),
    0 2px 8px rgba(15,23,42,0.04) !important;
}

.child-dashboard-shell .chore-card {
  border-width: 1.5px !important;
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.child-dashboard-shell .chore-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 18px 36px rgba(15,23,42,0.10),
    0 4px 10px rgba(15,23,42,0.05) !important;
}

.child-dashboard-shell .chore-card.status-todo {
  border-color: rgba(var(--primary-rgb, 37,99,235), 0.38) !important;
}

.child-dashboard-shell .chore-card.status-pending {
  border-color: rgba(255,159,10,0.48) !important;
}

.child-dashboard-shell .chore-card.status-approved {
  border-color: rgba(34,197,94,0.45) !important;
}

.child-dashboard-shell .chore-card.status-rejected {
  border-color: rgba(255,69,58,0.45) !important;
}

.child-dashboard-shell .chore-card.chore-card-bonus {
  background:
    radial-gradient(circle at 86% 14%, rgba(255,204,92,0.28), transparent 30%),
    radial-gradient(circle at 14% 18%, rgba(255,255,255,0.76), transparent 24%),
    linear-gradient(180deg, rgba(255,252,244,0.99), rgba(255,245,216,0.96)) !important;
  box-shadow:
    0 18px 36px rgba(255,159,10,0.16),
    0 4px 12px rgba(15,23,42,0.05) !important;
}

.child-dashboard-shell .chore-card.chore-card-bonus .chore-emoji-circle {
  background: linear-gradient(135deg, rgba(255,244,200,0.98), rgba(255,229,158,0.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 10px 20px rgba(255,191,0,0.12);
}

.child-dashboard-shell .chore-card.chore-card-bonus .chore-frequency-label {
  color: #9a6500;
  background: rgba(255,191,0,0.12);
  border-color: rgba(255,191,0,0.20);
}

.child-dashboard-shell .chore-card.chore-card-bonus .chore-reward-money {
  color: #b06a00;
}

.child-dashboard-shell .chore-card.chore-card-bonus.status-todo {
  border-color: rgba(255,191,0,0.54) !important;
}

.child-dashboard-shell .chore-card.chore-card-bonus.status-pending {
  border-color: rgba(255,159,10,0.52) !important;
}

.child-dashboard-shell .chore-card.chore-card-bonus.status-approved {
  border-color: rgba(52,199,89,0.46) !important;
}

.child-dashboard-shell .chore-card.chore-card-bonus.status-rejected {
  border-color: rgba(255,69,58,0.46) !important;
}

.child-dashboard-shell .done-btn {
  position: relative;
  overflow: hidden;
  border-radius: 18px !important;
  height: 58px !important;
  background: linear-gradient(140deg, #1f6fff 0%, #4f8dff 56%, #6ab0ff 100%) !important;
  box-shadow:
    0 14px 28px rgba(var(--primary-rgb, 37,99,235), 0.44),
    inset 0 1px 0 rgba(255,255,255,0.24) !important;
  animation: ward-cta-pulse 2.4s ease-in-out infinite;
}

.child-dashboard-shell .done-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(108deg, transparent 18%, rgba(255,255,255,0.34) 44%, transparent 72%);
  transform: translateX(-140%);
  animation: ward-cta-shimmer 2.9s ease-in-out infinite;
}

@keyframes ward-cta-shimmer {
  0%, 22% { transform: translateX(-140%); }
  48%, 100% { transform: translateX(140%); }
}

@keyframes ward-cta-pulse {
  0%, 100% {
    box-shadow:
      0 14px 28px rgba(var(--primary-rgb, 37,99,235), 0.44),
      inset 0 1px 0 rgba(255,255,255,0.24);
  }
  50% {
    box-shadow:
      0 18px 30px rgba(var(--primary-rgb, 37,99,235), 0.50),
      0 0 0 8px rgba(var(--primary-rgb, 37,99,235), 0.08),
      inset 0 1px 0 rgba(255,255,255,0.24);
  }
}

.child-dashboard-shell .game-slot,
.child-dashboard-shell .mood-btn,
.child-dashboard-shell .week-day-row {
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease;
}

.child-dashboard-shell .game-slot:hover,
.child-dashboard-shell .mood-btn:hover,
.child-dashboard-shell .week-day-row:hover {
  transform: translateY(-2px);
}

@media (max-width: 520px) {
  .child-dashboard-shell .child-hero {
    padding: 20px 16px 14px !important;
  }

  .child-dashboard-shell .child-hero-buddy-col,
  .child-dashboard-shell .hero-buddy-img {
    width: 106px !important;
    height: 106px !important;
  }

  .child-dashboard-shell #child-tab-nav .tab-btn {
    min-height: 54px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .child-dashboard-shell::before,
  .child-dashboard-shell .hero-buddy-img,
  .child-dashboard-shell .done-btn,
  .child-dashboard-shell .done-btn::before {
    animation: none !important;
  }

  .child-dashboard-shell .child-tabs-indicator,
  .child-dashboard-shell #child-tab-nav .tab-btn,
  .child-dashboard-shell .chore-card,
  .child-dashboard-shell .game-slot,
  .child-dashboard-shell .mood-btn,
  .child-dashboard-shell .week-day-row {
    transition: none !important;
  }
}

/* ═════════════════════════════════════════════════════════════════
   Reward Magic Pass (April 2026)
   Focus: celebratory child progression, less rigid stacking
   ═════════════════════════════════════════════════════════════════ */

.child-dashboard-shell .child-spotlight-card {
  position: relative;
  overflow: hidden;
  padding: 22px 18px 18px !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 14% 16%, rgba(255,255,255,0.32), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(255,255,255,0.18), transparent 30%),
    linear-gradient(140deg, rgba(var(--primary-rgb, 37,99,235), 0.96) 0%, rgba(76, 127, 255, 0.94) 48%, rgba(108, 177, 255, 0.92) 100%) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow:
    0 24px 56px rgba(var(--primary-rgb, 37,99,235), 0.30),
    0 10px 26px rgba(15,23,42,0.16),
    inset 0 1px 0 rgba(255,255,255,0.24) !important;
}

.child-dashboard-shell .child-spotlight-card::before,
.child-dashboard-shell .child-spotlight-card::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0.9;
}

.child-dashboard-shell .child-spotlight-card::before {
  width: 170px;
  height: 170px;
  right: -54px;
  top: -62px;
  background: radial-gradient(circle, rgba(255,255,255,0.20), transparent 70%);
}

.child-dashboard-shell .child-spotlight-card::after {
  width: 120px;
  height: 120px;
  left: -36px;
  bottom: -42px;
  background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 72%);
}

.child-spotlight-top,
.child-spotlight-copy-col,
.child-spotlight-chip-row {
  position: relative;
  z-index: 1;
}

.child-spotlight-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.child-spotlight-copy-col {
  min-width: 0;
}

.child-spotlight-kicker {
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}

.child-spotlight-value {
  margin-top: 4px;
  font-size: clamp(2.4rem, 2rem + 1.7vw, 3.2rem);
  font-weight: 950;
  line-height: 0.95;
  letter-spacing: -0.06em;
  color: #fff;
}

.child-spotlight-sub,
.child-spotlight-copy {
  color: rgba(255,255,255,0.84);
}

.child-spotlight-sub {
  margin-top: 6px;
  font-size: 0.88rem;
  font-weight: 800;
}

.child-spotlight-progress-orb {
  width: 88px;
  height: 88px;
  border-radius: 28px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  text-align: center;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 14px 28px rgba(0,0,0,0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.child-spotlight-progress-orb strong {
  display: block;
  font-size: 1.45rem;
  font-weight: 950;
  color: #fff;
  line-height: 1;
}

.child-spotlight-progress-orb span {
  display: block;
  margin-top: 4px;
  font-size: 0.7rem;
  font-weight: 800;
  color: rgba(255,255,255,0.76);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.child-spotlight-track {
  position: relative;
  z-index: 1;
  height: 14px;
  margin-top: 16px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.22);
}

.child-spotlight-track-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fff9c4 0%, #ffffff 52%, #d9f0ff 100%);
  box-shadow: 0 0 16px rgba(255,255,255,0.26);
}

.child-spotlight-copy {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.45;
}

.child-spotlight-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.child-spotlight-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.child-spotlight-chip.is-primary {
  background: rgba(255,255,255,0.28);
}

.child-dashboard-shell .games-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(247,250,255,0.95)),
    linear-gradient(135deg, rgba(var(--primary-rgb, 37,99,235), 0.06), transparent 70%) !important;
}

.child-dashboard-shell .games-card-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.child-dashboard-shell .games-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.child-dashboard-shell .game-slot {
  position: relative;
  overflow: hidden;
  min-height: 150px;
  justify-content: flex-start;
  padding: 14px 12px 12px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(var(--primary-rgb, 37,99,235), 0.10), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(244,248,255,0.94)) !important;
  border: 1px solid rgba(223, 231, 242, 0.96) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.94),
    0 12px 24px rgba(15,23,42,0.06);
}

.child-dashboard-shell .game-slot.game-played {
  opacity: 1;
  background:
    linear-gradient(180deg, rgba(248,250,255,0.94), rgba(241,245,252,0.90)) !important;
}

.game-slot-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(var(--primary-rgb, 37,99,235), 0.10);
  color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb, 37,99,235), 0.18);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}

.child-dashboard-shell .game-slot-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--primary-rgb, 37,99,235), 0.10);
}

.child-dashboard-shell .game-slot-name {
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--text);
}

.child-dashboard-shell .game-slot-meta {
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
}

.game-slot-kicker {
  margin-bottom: 8px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(8, 89, 108, 0.76);
}

.child-dashboard-shell .game-slot-btn,
.child-dashboard-shell .game-slot-done {
  margin-top: auto;
}

.child-dashboard-shell .game-slot-btn {
  height: 42px;
  border-radius: 16px !important;
  font-size: 0.82rem !important;
}

.child-dashboard-shell .game-slot-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 14px;
  background: rgba(34,197,94,0.12);
  color: #14803d;
  font-size: 0.78rem;
  font-weight: 900;
}

.child-dashboard-shell .game-slot-flagship {
  grid-column: span 2;
  min-height: 176px;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.34), transparent 28%),
    radial-gradient(circle at 82% 16%, rgba(123, 244, 255, 0.34), transparent 24%),
    linear-gradient(135deg, rgba(12, 104, 130, 0.96), rgba(16, 150, 178, 0.94) 46%, rgba(255, 155, 107, 0.92)) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.26),
    0 18px 36px rgba(7, 27, 45, 0.22) !important;
}

.child-dashboard-shell .game-slot-flagship .game-slot-badge {
  background: rgba(255,255,255,0.16);
  color: #f8feff;
  border-color: rgba(255,255,255,0.28);
}

.child-dashboard-shell .game-slot-flagship .game-slot-kicker,
.child-dashboard-shell .game-slot-flagship .game-slot-name,
.child-dashboard-shell .game-slot-flagship .game-slot-meta {
  color: #f7fdff;
}

.child-dashboard-shell .game-slot-flagship .game-slot-meta {
  max-width: 210px;
  margin-bottom: 14px;
}

.child-dashboard-shell .game-slot-flagship .game-slot-icon {
  width: 68px;
  height: 68px;
  border-radius: 22px;
  background: rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}

.child-dashboard-shell .game-slot-flagship .game-slot-btn {
  margin-top: 0;
  background: linear-gradient(135deg, #fff2bb, #fffdf4) !important;
  color: #0e6a7a !important;
  border: none !important;
  box-shadow: 0 10px 20px rgba(10, 54, 70, 0.16);
}

.child-dashboard-shell .game-slot-flagship.game-played {
  background:
    linear-gradient(140deg, rgba(20, 82, 96, 0.96), rgba(18, 119, 142, 0.94)) !important;
}

.lagoon-legends-root {
  width: min(100%, 468px);
  margin: 0 auto;
}

.lagoon-legends-shell {
  padding: calc(14px + env(safe-area-inset-top, 0px)) 14px calc(18px + env(safe-area-inset-bottom, 0px));
  border-radius: 30px;
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.12), transparent 24%),
    linear-gradient(180deg, rgba(6, 20, 41, 0.98), rgba(10, 41, 73, 0.98) 46%, rgba(7, 23, 40, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 26px 60px rgba(0,0,0,0.42);
}

.lagoon-legends-shell-fallback {
  text-align: center;
}

.lagoon-legends-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.lagoon-legends-topcopy {
  min-width: 0;
}

.lagoon-legends-kicker {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(196, 241, 255, 0.74);
}

.lagoon-legends-title {
  margin-top: 4px;
  font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
  font-weight: 900;
  color: #f8fdff;
}

.lagoon-legends-subtitle {
  margin-top: 4px;
  max-width: 290px;
  font-size: 0.82rem;
  line-height: 1.45;
  font-weight: 700;
  color: rgba(217, 244, 255, 0.8);
}

.lagoon-legends-quit {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  color: #f8fdff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
}

.lagoon-legends-hud {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.lagoon-legends-stat {
  padding: 12px 10px 10px;
  border-radius: 18px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.lagoon-legends-stat span {
  display: block;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(208, 242, 255, 0.64);
}

.lagoon-legends-stat strong {
  display: block;
  margin-top: 5px;
  font-size: 1rem;
  font-weight: 900;
  color: #f9fdff;
}

.lagoon-legends-meter {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(7, 18, 30, 0.38);
  border: 1px solid rgba(255,255,255,0.08);
}

.lagoon-legends-meter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(208, 242, 255, 0.74);
}

.lagoon-legends-meter-track {
  margin-top: 10px;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
}

.lagoon-legends-meter-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f7d25b, #ff8d5d, #7ce6ff);
  box-shadow: 0 0 22px rgba(255, 181, 94, 0.35);
  transition: width 0.18s ease;
}

.lagoon-legends-powerups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.lagoon-legends-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  color: #f7fdff;
  font-size: 0.74rem;
  font-weight: 800;
}

.lagoon-legends-chip.is-fever {
  background: linear-gradient(135deg, rgba(255,214,105,0.24), rgba(255,140,92,0.22));
  color: #fffbe8;
}

.lagoon-legends-chip.is-muted {
  color: rgba(208, 242, 255, 0.74);
}

.lagoon-legends-stage-shell {
  margin-top: 14px;
  padding: 8px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 14px 30px rgba(0,0,0,0.22);
}

.lagoon-legends-stage {
  overflow: hidden;
  border-radius: 22px;
  min-height: min(72vh, 560px);
  background: linear-gradient(180deg, #10243f, #0a1630);
}

.lagoon-legends-stage canvas {
  display: block;
  width: 100% !important;
  height: auto !important;
}

.lagoon-legends-footer {
  margin-top: 12px;
}

.lagoon-legends-status {
  font-size: 0.84rem;
  font-weight: 900;
  color: #f7fdff;
}

.lagoon-legends-controls {
  margin-top: 6px;
  font-size: 0.76rem;
  line-height: 1.5;
  font-weight: 700;
  color: rgba(206, 242, 255, 0.74);
}

.lagoon-legends-result {
  width: min(100%, 430px);
  margin: 0 auto;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px));
  border-radius: 28px;
  text-align: center;
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.16), transparent 32%),
    linear-gradient(180deg, rgba(7, 35, 59, 0.98), rgba(17, 110, 129, 0.96) 48%, rgba(255, 149, 95, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 24px 60px rgba(0,0,0,0.32);
}

.lagoon-legends-result-kicker {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}

.lagoon-legends-result-title {
  margin-top: 8px;
  font-size: clamp(1.5rem, 3vw + 1rem, 2.2rem);
  font-weight: 900;
  color: #fffdf8;
}

.lagoon-legends-result-copy {
  margin-top: 8px;
  font-size: 0.88rem;
  line-height: 1.55;
  font-weight: 700;
  color: rgba(255,250,242,0.9);
}

.lagoon-legends-result-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.lagoon-legends-result-stat {
  padding: 14px 10px;
  border-radius: 18px;
  background: rgba(255,255,255,0.12);
  color: #ffffff;
}

.lagoon-legends-result-stat span {
  display: block;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}

.lagoon-legends-result-stat strong {
  display: block;
  margin-top: 6px;
  font-size: 1.18rem;
  font-weight: 900;
}

.lagoon-legends-done-btn {
  width: 100%;
  margin-top: 20px;
  min-height: 48px;
  border-radius: 18px !important;
  border: none !important;
  background: linear-gradient(135deg, #fff2bb, #fffef4) !important;
  color: #0e6a7a !important;
  font-size: 0.96rem !important;
  font-weight: 900 !important;
}

.child-dashboard-shell .game-slot-tide {
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,0.36), transparent 30%),
    radial-gradient(circle at 82% 14%, rgba(125, 211, 252, 0.32), transparent 24%),
    linear-gradient(135deg, rgba(8, 47, 73, 0.98), rgba(14, 165, 183, 0.94) 48%, rgba(250, 204, 21, 0.90)) !important;
}

.child-dashboard-shell .game-slot-tide .game-slot-btn {
  color: #083344 !important;
}

.child-dashboard-shell .game-slot-tide .tide-caster-launch-art {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 18%, rgba(255,255,255,0.78) 0 4px, transparent 5px),
    radial-gradient(circle at 70% 32%, rgba(186, 230, 253, 0.48) 0 8px, transparent 9px),
    radial-gradient(circle at 42% 96%, rgba(20, 184, 166, 0.46), transparent 44%),
    linear-gradient(145deg, rgba(49, 46, 129, 0.82), rgba(6, 182, 212, 0.74));
  font-size: 0;
}

.tide-caster-launch-art .tide-card-rod,
.tide-caster-launch-art .tide-card-line,
.tide-caster-launch-art .tide-card-reel,
.tide-caster-launch-art .tide-card-fish,
.tide-caster-launch-art .tide-card-fish-body,
.tide-caster-launch-art .tide-card-fish-tail,
.tide-caster-launch-art .tide-card-fish-eye,
.tide-caster-launch-art .tide-card-fish-fin,
.tide-caster-launch-art .tide-card-fish-scales,
.tide-caster-launch-art .tide-card-bubble {
  position: absolute;
  display: block;
}

.tide-caster-launch-art .tide-card-rod {
  left: 16px;
  top: 15px;
  width: 6px;
  height: 52px;
  border-radius: 999px;
  background: linear-gradient(180deg, #7c2d12, #f8b45f 42%, #3f2d1f);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.22), 7px -6px 0 -3px rgba(255,255,255,0.34);
  transform: rotate(24deg);
  transform-origin: bottom center;
}

.tide-caster-launch-art .tide-card-reel {
  left: 24px;
  top: 39px;
  width: 18px;
  height: 18px;
  border: 3px solid rgba(12, 18, 31, 0.86);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #f8fafc 0 3px, transparent 4px),
    linear-gradient(135deg, #475569, #0f172a);
  box-shadow: 0 4px 8px rgba(3, 7, 18, 0.24);
}

.tide-caster-launch-art .tide-card-line {
  left: 36px;
  top: 17px;
  width: 40px;
  height: 44px;
  border-top: 2px solid rgba(255,255,255,0.66);
  border-right: 2px solid rgba(255,255,255,0.66);
  border-radius: 0 42px 0 0;
  transform: rotate(-9deg);
}

.tide-caster-launch-art .tide-card-fish {
  right: 8px;
  bottom: 10px;
  width: 51px;
  height: 38px;
  filter: drop-shadow(0 8px 9px rgba(5, 18, 33, 0.28));
}

.tide-caster-launch-art .tide-card-fish-body {
  right: 5px;
  top: 7px;
  width: 36px;
  height: 25px;
  border-radius: 58% 44% 48% 55%;
  background:
    radial-gradient(circle at 78% 31%, #f8fafc 0 4px, transparent 5px),
    linear-gradient(100deg, rgba(255,255,255,0.58), transparent 28%),
    linear-gradient(145deg, #67e8f9 5%, #0ea5e9 48%, #2563eb 100%);
  box-shadow:
    inset -8px -5px 10px rgba(30, 64, 175, 0.38),
    inset 7px 6px 10px rgba(236, 254, 255, 0.48);
}

.tide-caster-launch-art .tide-card-fish-tail {
  left: 0;
  top: 10px;
  width: 22px;
  height: 20px;
  background: linear-gradient(135deg, #38bdf8, #2563eb);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 34% 50%);
  box-shadow: inset 5px 0 8px rgba(255,255,255,0.26);
}

.tide-caster-launch-art .tide-card-fish-eye {
  right: 11px;
  top: 13px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0f172a;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.86);
}

.tide-caster-launch-art .tide-card-fish-fin {
  right: 20px;
  top: 22px;
  width: 16px;
  height: 9px;
  border-radius: 90% 20% 90% 20%;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.94), rgba(14, 116, 144, 0.62));
  transform: rotate(-17deg);
}

.tide-caster-launch-art .tide-card-fish-scales {
  right: 18px;
  top: 11px;
  width: 17px;
  height: 14px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 3px 4px, rgba(255,255,255,0.58) 0 2px, transparent 3px),
    radial-gradient(circle at 10px 4px, rgba(255,255,255,0.48) 0 2px, transparent 3px),
    radial-gradient(circle at 6px 10px, rgba(255,255,255,0.48) 0 2px, transparent 3px),
    radial-gradient(circle at 14px 10px, rgba(255,255,255,0.38) 0 2px, transparent 3px);
}

.tide-caster-launch-art .tide-card-bubble {
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.18);
}

.tide-caster-launch-art .tide-card-bubble.one {
  right: 12px;
  top: 11px;
  width: 9px;
  height: 9px;
}

.tide-caster-launch-art .tide-card-bubble.two {
  right: 28px;
  top: 4px;
  width: 6px;
  height: 6px;
  opacity: 0.78;
}

.tide-caster-root {
  width: min(100%, 520px);
  margin: 0 auto;
  touch-action: none;
  overscroll-behavior: contain;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#tide-caster-overlay,
#tide-caster-overlay * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.tide-caster-root *,
.tide-caster-root button {
  touch-action: manipulation;
}

.tide-caster-root button,
.tide-caster-controlbar,
.tide-caster-controlbar * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  touch-action: none;
}

.tide-caster-root .tide-caster-action,
.tide-caster-root .tide-caster-reel,
.tide-caster-action,
.tide-caster-reel,
.tide-caster-action:not(:disabled),
.tide-caster-reel:not(:disabled) {
  touch-action: none;
}

.tide-caster-shell {
  width: 100%;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(14px + env(safe-area-inset-bottom, 0px));
  border-radius: 30px;
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,0.16), transparent 26%),
    linear-gradient(180deg, #082f49 0%, #064e5d 46%, #071f35 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 26px 60px rgba(0,0,0,0.42);
}

.tide-caster-stage {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(180deg, #7dd3fc 0%, #0e7490 42%, #083344 100%);
  touch-action: none;
  isolation: isolate;
}

.tide-caster-canvas,
.tide-caster-canvas canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.tide-caster-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), transparent 24%),
    radial-gradient(circle at center, transparent 42%, rgba(3,7,18,0.36) 100%);
  z-index: 1;
}

.tide-caster-hud {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 12px;
  right: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: start;
}

.tide-caster-brand,
.tide-caster-catch-pill,
.tide-caster-quit,
.tide-caster-meter,
.tide-caster-prize,
.tide-caster-depth {
  background: rgba(3, 20, 34, 0.72);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 12px 28px rgba(0,0,0,0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.tide-caster-brand,
.tide-caster-catch-pill {
  min-height: 54px;
  padding: 9px 12px;
  border-radius: 18px;
  color: #fff;
}

.tide-caster-brand > span,
.tide-caster-catch-pill > span,
.tide-caster-meter-head > span,
.tide-caster-result-stat > span {
  display: block;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(226, 251, 255, 0.72);
}

.tide-caster-brand strong,
.tide-caster-catch-pill strong,
.tide-caster-meter-head strong {
  display: block;
  margin-top: 4px;
  font-size: 0.92rem;
  font-weight: 900;
  color: #fffdf5;
}

.tide-caster-catch-pill strong span {
  display: inline;
}

.tide-caster-quit {
  min-height: 42px;
  padding: 0 13px;
  border: none;
  border-radius: 15px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
}

.tide-caster-meter {
  position: absolute;
  z-index: 3;
  left: 14px;
  right: 78px;
  bottom: 16px;
  padding: 10px 12px 12px;
  border-radius: 18px;
}

.tide-caster-meter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tide-caster-meter-track {
  position: relative;
  height: 14px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
}

.tide-caster-meter-zone {
  position: absolute;
  left: 20%;
  right: 18%;
  top: 0;
  bottom: 0;
  background: rgba(34,197,94,0.24);
  border-left: 1px solid rgba(255,255,255,0.34);
  border-right: 1px solid rgba(255,255,255,0.34);
}

.tide-caster-meter-fill {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #67e8f9 0%, #22c55e 46%, #facc15 72%, #fb7185 100%);
  transition: width 90ms linear;
}

.tide-caster-prize {
  position: absolute;
  z-index: 3;
  top: 84px;
  right: 14px;
  width: min(230px, calc(100% - 28px));
  padding: 10px 12px;
  border-radius: 18px;
  color: #fff;
}

.tide-caster-prize[hidden] {
  display: none;
}

.tide-caster-prize span,
.tide-caster-prize em {
  display: block;
  font-style: normal;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(226, 251, 255, 0.74);
}

.tide-caster-prize strong {
  display: block;
  margin-top: 4px;
  font-size: 0.94rem;
  font-weight: 950;
  line-height: 1.1;
  color: #fffdf5;
}

.tide-caster-prize em {
  margin-top: 5px;
  color: #fef3c7;
}

.tide-caster-prize.has-cash,
.tide-caster-prize.is-rare {
  border-color: rgba(254, 243, 199, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 12px 28px rgba(0,0,0,0.2),
    0 0 22px rgba(250, 204, 21, 0.12);
}

.tide-caster-depth {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: 16px;
  width: 42px;
  height: 134px;
  overflow: hidden;
  border-radius: 16px;
}

.tide-caster-depth-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: linear-gradient(180deg, #fff7ad 0%, #22c55e 100%);
  transition: height 120ms linear;
}

.tide-caster-start {
  position: absolute;
  z-index: 4;
  left: 24px;
  right: 24px;
  bottom: 96px;
  padding: 20px;
  border-radius: 24px;
  color: #fff;
  background: rgba(3, 20, 34, 0.78);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 18px 42px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.tide-caster-start-kicker,
.tide-caster-card-kicker,
.tide-caster-result-kicker {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(226, 251, 255, 0.76);
}

.tide-caster-start-title,
.tide-caster-result-title {
  margin-top: 8px;
  font-size: 1.55rem;
  font-weight: 950;
  line-height: 1.05;
  color: #fffdf5;
}

.tide-caster-start-copy,
.tide-caster-start-meta,
.tide-caster-result-copy,
.tide-caster-cap-note {
  margin-top: 9px;
  font-size: 0.86rem;
  line-height: 1.5;
  font-weight: 750;
  color: rgba(226, 251, 255, 0.82);
}

.tide-caster-primary,
.tide-caster-action,
.tide-caster-reel {
  border: none;
  border-radius: 18px;
  font-family: inherit;
  font-weight: 950;
  cursor: pointer;
}

.tide-caster-primary {
  width: 100%;
  min-height: 48px;
  margin-top: 18px;
  background: linear-gradient(135deg, #fef3c7, #facc15);
  color: #083344;
  box-shadow: 0 12px 26px rgba(0,0,0,0.18);
}

.tide-caster-controlbar {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 10px;
  margin-top: 12px;
}

.tide-caster-action,
.tide-caster-reel {
  min-height: 56px;
  color: #082f49;
  font-size: 0.96rem;
  background: linear-gradient(135deg, #e0f2fe, #67e8f9);
}

.tide-caster-reel {
  background: linear-gradient(135deg, #fef3c7, #fbbf24);
}

.tide-caster-action:disabled,
.tide-caster-reel:disabled {
  opacity: 0.58;
  cursor: default;
}

.tide-caster-card {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  width: min(82%, 330px);
  padding: 18px;
  border-radius: 24px;
  text-align: center;
  color: #fff;
  background: rgba(3, 20, 34, 0.82);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 20px 46px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.14);
  transform: translate(-50%, -44%) scale(0.92);
  opacity: 0;
  pointer-events: none;
  transition: transform 180ms ease, opacity 180ms ease;
}

.tide-caster-card.show {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.tide-caster-card-name {
  margin-top: 8px;
  font-size: 1.45rem;
  font-weight: 950;
}

.tide-caster-card-reward {
  margin-top: 8px;
  color: #fef3c7;
  font-weight: 950;
}

.tide-caster-result {
  width: min(100%, 440px);
  max-height: calc(100vh - 28px);
  overflow: auto;
  margin: 0 auto;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 22px calc(24px + env(safe-area-inset-bottom, 0px));
  border-radius: 28px;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,0.15), transparent 28%),
    linear-gradient(180deg, rgba(8, 47, 73, 0.98), rgba(14, 116, 144, 0.96) 52%, rgba(11, 31, 50, 0.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 24px 60px rgba(0,0,0,0.34);
}

.tide-caster-result-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.tide-caster-result-stat {
  padding: 12px 8px;
  border-radius: 18px;
  background: rgba(255,255,255,0.12);
}

.tide-caster-result-stat strong {
  display: block;
  margin-top: 6px;
  font-size: 1.05rem;
  font-weight: 950;
  color: #fffdf5;
}

.tide-caster-result-list {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.tide-caster-result-fish {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.10);
  font-size: 0.84rem;
  font-weight: 850;
}

.tide-caster-result-fish strong {
  color: #fef3c7;
  white-space: nowrap;
}

.tide-caster-done-btn {
  width: 100%;
  margin-top: 18px;
  min-height: 48px;
  border-radius: 18px !important;
  border: none !important;
  background: linear-gradient(135deg, #fef3c7, #facc15) !important;
  color: #083344 !important;
  font-weight: 950 !important;
}

.tide-caster-fallback {
  width: min(100%, 420px);
  margin: 0 auto;
  padding: 28px 22px;
  border-radius: 24px;
  text-align: center;
  background: #082f49;
  color: #fff;
}

.tide-caster-settings-grid {
  gap: 9px;
}

.tide-caster-settings-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.4fr) repeat(3, minmax(70px, 0.45fr));
  align-items: end;
}

.tide-caster-inline-field {
  display: grid;
  gap: 4px;
}

.tide-caster-inline-field span {
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 520px) {
  .tide-caster-shell {
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 24px;
  }

  .tide-caster-stage {
    min-height: 520px;
  }

  .tide-caster-hud {
    grid-template-columns: 1fr auto;
  }

  .tide-caster-brand {
    grid-column: 1;
    grid-row: 1;
  }

  .tide-caster-quit {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    min-width: 64px;
  }

  .tide-caster-catch-pill {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 42px;
  }

  .tide-caster-prize {
    top: 150px;
    left: 14px;
    right: 14px;
    width: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    align-items: center;
  }

  .tide-caster-prize[hidden] {
    display: none;
  }

  .tide-caster-prize strong {
    grid-column: 1;
  }

  .tide-caster-prize em {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
    align-self: center;
    text-align: right;
  }

  .tide-caster-meter {
    right: 68px;
  }

  .tide-caster-result-stats,
  .tide-caster-settings-row {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tide-caster-card,
  .tide-caster-meter-fill,
  .tide-caster-depth-fill {
    transition: none !important;
  }
}

.child-dashboard-shell .daily-quest-card,
.child-dashboard-shell .daily-goal-card,
.child-dashboard-shell .payout-balance-card,
.child-dashboard-shell .statement-entry-card,
.child-dashboard-shell .xp-shop-card,
.child-dashboard-shell .badge-collection-card,
.child-dashboard-shell .sticker-card,
.child-dashboard-shell .xp-levels-card {
  overflow: hidden;
}

.child-dashboard-shell .daily-quest-card {
  background:
    radial-gradient(circle at top right, rgba(255,159,10,0.12), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(255,248,240,0.94)) !important;
  border-color: rgba(255, 195, 98, 0.42) !important;
}

.child-dashboard-shell .daily-goal-card {
  background:
    radial-gradient(circle at top right, rgba(var(--primary-rgb, 37,99,235), 0.08), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(246,249,255,0.95)) !important;
}

.child-dashboard-shell .earnings-simple-card,
.child-dashboard-shell .week-schedule-card,
.child-dashboard-shell .weekly-challenge-card,
.child-dashboard-shell .streak-card {
  background:
    radial-gradient(circle at top right, rgba(var(--primary-rgb, 37,99,235), 0.07), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(247,250,255,0.95)) !important;
}

.child-dashboard-shell .earnings-simple-card {
  position: relative;
  overflow: hidden;
  text-align: left;
  padding: 20px 18px !important;
  border-radius: 28px !important;
  border-color: rgba(var(--primary-rgb, 37,99,235), 0.16) !important;
}

.child-dashboard-shell .earnings-simple-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 88% 14%, rgba(255,191,0,0.16), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,0.22), transparent 46%);
}

.child-dashboard-shell .earnings-simple-title,
.child-dashboard-shell .earnings-simple-amount,
.child-dashboard-shell .earnings-simple-available,
.child-dashboard-shell .earnings-progress-wrap,
.child-dashboard-shell .earnings-simple-note {
  position: relative;
  z-index: 1;
}

.child-dashboard-shell .earnings-simple-title {
  margin-bottom: 8px;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.child-dashboard-shell .earnings-simple-amount {
  font-size: clamp(2.45rem, 2rem + 1.4vw, 3rem);
  color: var(--text);
}

.child-dashboard-shell .earnings-simple-available {
  font-size: 0.88rem;
  color: var(--text-muted-strong);
}

.child-dashboard-shell .earnings-progress-track {
  height: 14px;
  background: rgba(var(--primary-rgb, 37,99,235), 0.10);
  border: 1px solid rgba(var(--primary-rgb, 37,99,235), 0.10);
}

.child-dashboard-shell .earnings-progress-fill {
  background: linear-gradient(90deg, #ffd45d 0%, #ffb300 18%, #55c1ff 100%);
  box-shadow: 0 0 18px rgba(85, 193, 255, 0.22);
}

.child-dashboard-shell .earnings-simple-note {
  color: var(--text-muted-strong);
}

.child-dashboard-shell .week-schedule-card {
  border-radius: 28px !important;
  border-color: rgba(var(--primary-rgb, 37,99,235), 0.14) !important;
}

.child-dashboard-shell .week-flex-section {
  border-radius: 24px;
  border-color: rgba(var(--primary-rgb, 37,99,235), 0.12);
  background:
    radial-gradient(circle at top right, rgba(var(--primary-rgb, 37,99,235), 0.05), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,248,255,0.94));
}

.child-dashboard-shell .week-schedule-header {
  align-items: flex-start;
  gap: 10px;
}

.child-dashboard-shell .week-schedule-summary-pill {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(var(--primary-rgb, 37,99,235), 0.10);
  border: 1px solid rgba(var(--primary-rgb, 37,99,235), 0.16);
  color: var(--primary);
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

.child-dashboard-shell .week-day-row {
  border-radius: 22px !important;
  border-color: rgba(var(--primary-rgb, 37,99,235), 0.10) !important;
  background:
    radial-gradient(circle at top right, rgba(var(--primary-rgb, 37,99,235), 0.05), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,249,255,0.94)) !important;
}

.child-dashboard-shell .week-day-row.week-day-today {
  border-color: rgba(var(--primary-rgb, 37,99,235), 0.24) !important;
  box-shadow:
    0 16px 28px rgba(15,23,42,0.08),
    0 0 0 4px rgba(var(--primary-rgb, 37,99,235), 0.06) !important;
}

.child-dashboard-shell .week-day-row.week-day-complete {
  background:
    radial-gradient(circle at top right, rgba(34,197,94,0.09), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(237,252,244,0.95)) !important;
  border-color: rgba(34,197,94,0.24) !important;
}

.child-dashboard-shell .week-day-marker {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #66b6ff 0%, #1f6fff 100%);
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 37,99,235), 0.10);
}

.child-dashboard-shell .week-day-name {
  font-weight: 900;
  color: var(--text);
}

.child-dashboard-shell .week-day-date,
.child-dashboard-shell .week-day-potential-label {
  color: var(--muted);
}

.child-dashboard-shell .week-status-pill {
  border-radius: 999px;
  border: 1px solid rgba(var(--primary-rgb, 37,99,235), 0.14);
  background: rgba(var(--primary-rgb, 37,99,235), 0.08);
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.68);
}

.child-dashboard-shell .week-status-pill-success {
  background: rgba(34,197,94,0.10);
  border-color: rgba(34,197,94,0.20);
  color: #15803d;
}

.child-dashboard-shell .week-chore-item {
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,0.96);
  background: rgba(255,255,255,0.76);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

.child-dashboard-shell .week-chore-emoji {
  background: rgba(var(--primary-rgb, 37,99,235), 0.10);
}

.child-dashboard-shell .week-chore-item.is-approved {
  border-color: rgba(34,197,94,0.18);
  background: rgba(236,252,244,0.84);
}

.child-dashboard-shell .week-chore-item.is-pending {
  border-color: rgba(245,158,11,0.18);
  background: rgba(255,247,237,0.88);
}

.child-dashboard-shell .week-chore-item.is-todo {
  border-color: rgba(var(--primary-rgb, 37,99,235), 0.14);
}

.child-dashboard-shell .week-meta-pill {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

.child-dashboard-shell .week-chore-submit {
  box-shadow: 0 14px 24px rgba(var(--primary-rgb, 37,99,235), 0.22);
}

.child-dashboard-shell .weekly-challenge-card {
  border-color: rgba(255,191,0,0.20) !important;
  background:
    radial-gradient(circle at top right, rgba(255,191,0,0.12), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(255,249,237,0.95)) !important;
}

.child-dashboard-shell .streak-card {
  border-color: rgba(255,159,10,0.18) !important;
  background:
    radial-gradient(circle at top right, rgba(255,159,10,0.10), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(255,248,240,0.95)) !important;
}

.child-dashboard-shell .chores-section {
  display: grid;
  gap: 12px;
}

.child-dashboard-shell .chores-section-header {
  align-items: flex-end;
}

.child-dashboard-shell .chores-section-kicker {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.child-dashboard-shell .chores-section-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--text);
}

.child-dashboard-shell .today-chore-group {
  display: grid;
  gap: 12px;
}

.child-dashboard-shell .today-chore-group-bonus {
  margin-top: 4px;
}

.child-dashboard-shell .today-chore-group-bonus .today-chore-group-title {
  color: #9a6500;
}

.child-dashboard-shell .today-chore-group-bonus .today-chore-group-subtitle {
  color: #a3741c;
}

.child-dashboard-shell .today-chore-group-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
}

.child-dashboard-shell .today-chore-group-copy {
  min-width: 0;
}

.child-dashboard-shell .today-chore-group-title {
  font-size: 0.92rem;
  font-weight: 900;
  color: var(--text);
}

.child-dashboard-shell .today-chore-group-subtitle {
  margin-top: 3px;
  font-size: 0.76rem;
  line-height: 1.45;
  font-weight: 700;
  color: var(--muted);
}

.child-dashboard-shell .today-chore-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(10,132,255,0.10);
  color: var(--primary);
  border: 1px solid rgba(10,132,255,0.12);
  font-size: 0.8rem;
  font-weight: 900;
  flex-shrink: 0;
}

.child-dashboard-shell .today-chore-group-count.is-bonus {
  background: rgba(255,191,0,0.16);
  border-color: rgba(255,191,0,0.22);
  color: #9a6500;
}

.child-dashboard-shell .today-chore-group-list {
  display: grid;
  gap: 14px;
}

.child-dashboard-shell .today-chore-group-list .chore-card {
  margin-bottom: 0 !important;
}

.child-dashboard-shell .payout-balance-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 16%, rgba(255,255,255,0.26), transparent 34%),
    radial-gradient(circle at 92% 12%, rgba(255,255,255,0.16), transparent 34%),
    linear-gradient(140deg, rgba(25,111,255,0.96) 0%, rgba(75,149,255,0.92) 48%, rgba(99,191,255,0.90) 100%) !important;
  border-color: rgba(255,255,255,0.22) !important;
  box-shadow:
    0 22px 52px rgba(var(--primary-rgb, 37,99,235), 0.26),
    0 8px 24px rgba(15,23,42,0.14) !important;
}

.child-dashboard-shell .payout-balance-card,
.child-dashboard-shell .payout-balance-card * {
  color: #fff !important;
}

.child-dashboard-shell .payout-balance-card .btn-success {
  background: linear-gradient(135deg, #34c759, #57d973) !important;
  box-shadow: 0 14px 28px rgba(52,199,89,0.32) !important;
}

.child-dashboard-shell .statement-entry-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(247,247,255,0.95)),
    linear-gradient(140deg, rgba(155,142,196,0.08), transparent 68%) !important;
}

.child-dashboard-shell .xp-shop-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248,250,255,0.95)),
    linear-gradient(140deg, rgba(255,159,10,0.06), transparent 72%) !important;
}

.child-dashboard-shell .xp-shop-item {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 14px 10px 12px;
  background:
    radial-gradient(circle at top right, rgba(var(--primary-rgb, 37,99,235), 0.08), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(247,250,255,0.95)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.94),
    0 12px 24px rgba(15,23,42,0.05);
}

.child-dashboard-shell .xp-shop-item::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent 46%);
}

.child-dashboard-shell .xp-shop-item > * {
  position: relative;
  z-index: 1;
}

.child-dashboard-shell .xp-shop-item-name {
  font-size: 0.86rem;
}

.child-dashboard-shell .xp-shop-item-cost {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,159,10,0.12);
  margin-top: 4px;
}

.child-dashboard-shell .badge-collection-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(250,247,255,0.96)),
    linear-gradient(140deg, rgba(155,142,196,0.08), transparent 72%) !important;
}

.child-dashboard-shell .sticker-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(255,249,252,0.96)),
    linear-gradient(140deg, rgba(255,45,85,0.06), transparent 72%) !important;
}

.child-dashboard-shell .xp-levels-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(247,250,255,0.96)),
    linear-gradient(140deg, rgba(var(--primary-rgb, 37,99,235), 0.06), transparent 72%) !important;
}

@media (max-width: 520px) {
  .child-spotlight-top {
    align-items: flex-start;
  }

  .child-spotlight-progress-orb {
    width: 78px;
    height: 78px;
    border-radius: 24px;
  }

  .child-dashboard-shell .games-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .child-dashboard-shell .game-slot {
    min-height: 142px;
  }

  .lagoon-legends-topbar {
    flex-direction: column;
  }

  .lagoon-legends-hud {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lagoon-legends-result-stats {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Parent + Auth Motion Layer (WeWard-inspired)
   ═══════════════════════════════════════════════════════════════════ */

.parent-dashboard-shell {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  padding-bottom: 20px;
  background:
    radial-gradient(140% 120% at -4% -10%, rgba(53, 139, 255, 0.14), transparent 56%),
    radial-gradient(130% 120% at 102% 0%, rgba(23, 203, 193, 0.12), transparent 52%),
    linear-gradient(180deg, #f6f9ff 0%, #eef4ff 100%);
}

.parent-dashboard-shell::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  top: -150px;
  right: -130px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 35% 35%, rgba(79, 164, 255, 0.28), rgba(79, 164, 255, 0) 70%);
  animation: parent-shell-glow 9.6s ease-in-out infinite;
}

@keyframes parent-shell-glow {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.72; }
  50% { transform: translate3d(-14px, 10px, 0) scale(1.06); opacity: 0.94; }
}

.parent-dashboard-shell .parent-hero-banner {
  border-radius: 28px !important;
  border: 1px solid rgba(255,255,255,0.64) !important;
  background:
    linear-gradient(136deg, #1c5fff 0%, #4286ff 52%, #56b8ff 100%) !important;
  color: #fff !important;
  box-shadow:
    0 24px 44px rgba(28, 95, 255, 0.32),
    inset 0 1px 0 rgba(255,255,255,0.28) !important;
}

.parent-dashboard-shell .parent-hero-name,
.parent-dashboard-shell .parent-hero-sub,
.parent-dashboard-shell .parent-hero-copy,
.parent-dashboard-shell .parent-summary-label,
.parent-dashboard-shell .parent-summary-value {
  color: #fff !important;
}

.parent-dashboard-shell .parent-hero-icon {
  border: 1px solid rgba(255,255,255,0.38) !important;
  background: rgba(255,255,255,0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
}

.parent-dashboard-shell .parent-hero-badge {
  border: 1px solid rgba(255,255,255,0.4) !important;
  background: rgba(255,255,255,0.16) !important;
}

.parent-dashboard-shell .parent-summary-grid {
  gap: 10px !important;
}

.parent-dashboard-shell .parent-summary-tile {
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.34) !important;
  background: rgba(255,255,255,0.14) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), background 220ms ease;
}

.parent-dashboard-shell .parent-summary-tile:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.2) !important;
}

.parent-dashboard-shell #parent-tab-nav {
  position: relative;
  margin: 14px 0 18px !important;
  padding: 6px !important;
  gap: 6px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,0.92) !important;
  background: rgba(246, 250, 255, 0.74) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.1) !important;
}

.parent-dashboard-shell .parent-tabs-indicator {
  position: absolute;
  top: 6px;
  left: 6px;
  bottom: 6px;
  width: 0;
  opacity: 0;
  border-radius: 14px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(140deg, #1f6fff 0%, #4f8dff 58%, #69bcff 100%);
  box-shadow:
    0 10px 24px rgba(43, 108, 255, 0.38),
    inset 0 1px 0 rgba(255,255,255,0.24);
  transition:
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
    width 300ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms ease;
}

.parent-dashboard-shell .parent-tabs-indicator.ready {
  opacity: 1;
}

.parent-dashboard-shell .tab-btn {
  position: relative;
  z-index: 1;
  min-height: 56px !important;
  border-radius: 14px !important;
  color: #415073 !important;
  background: transparent !important;
  transition:
    color 180ms ease,
    transform 180ms ease,
    opacity 180ms ease;
}

.parent-dashboard-shell .tab-btn:hover:not(.active) {
  color: #274d9f !important;
  transform: translateY(-1px);
}

.parent-dashboard-shell .tab-btn.active {
  color: #fff !important;
}

.parent-dashboard-shell .tab-btn .tab-label {
  font-size: 0.66rem !important;
  letter-spacing: 0.02em;
}

.parent-dashboard-shell .tab-btn .tab-badge {
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,69,58,0.95) !important;
  box-shadow: 0 6px 14px rgba(255,69,58,0.38);
}

.parent-dashboard-shell .card,
.parent-dashboard-shell .parent-overview-kpi,
.parent-dashboard-shell .parent-tool-card,
.parent-dashboard-shell .parent-kid-row,
.parent-dashboard-shell .parent-activity-row {
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,0.92) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(244, 248, 255, 0.95)) !important;
  box-shadow:
    0 16px 30px rgba(15, 23, 42, 0.08),
    0 2px 8px rgba(15, 23, 42, 0.05) !important;
}

.parent-dashboard-shell .parent-tool-card,
.parent-dashboard-shell .parent-kid-row,
.parent-dashboard-shell .parent-activity-row {
  transition:
    transform 210ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 210ms cubic-bezier(0.22, 1, 0.36, 1);
}

.parent-dashboard-shell .parent-tool-card:hover,
.parent-dashboard-shell .parent-kid-row:hover,
.parent-dashboard-shell .parent-activity-row:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 34px rgba(15, 23, 42, 0.1),
    0 4px 10px rgba(15, 23, 42, 0.05) !important;
}

.parent-dashboard-shell .parent-shortcut-btn {
  min-height: 52px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(76, 137, 255, 0.46) !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
  background: linear-gradient(136deg, #1f6fff 0%, #4a8bff 56%, #64b7ff 100%) !important;
  box-shadow:
    0 12px 24px rgba(43, 108, 255, 0.34),
    inset 0 1px 0 rgba(255,255,255,0.25) !important;
  transition:
    transform 190ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 190ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 190ms ease !important;
}

.parent-dashboard-shell .parent-shortcut-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow:
    0 16px 28px rgba(43, 108, 255, 0.4),
    inset 0 1px 0 rgba(255,255,255,0.25) !important;
}

.parent-dashboard-shell .parent-shortcut-btn:active {
  transform: translateY(0) scale(0.985);
}

.parent-dashboard-shell .parent-shortcut-btn:disabled {
  opacity: 0.55;
  box-shadow: none !important;
}

.onboarding-shell .parent-onboarding-hero .parent-hero-copy {
  max-width: 420px;
  color: rgba(255,255,255,0.9) !important;
}

.parent-onboarding-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 16px;
}

.onboarding-step-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(210, 221, 238, 0.96);
  background: rgba(255,255,255,0.86);
  color: #495574;
  font-size: 0.76rem;
  font-weight: 700;
}

.onboarding-step-pill.active {
  border-color: rgba(31,111,255,0.42);
  background: rgba(232, 241, 255, 0.98);
  color: #1b4d98;
}

.onboarding-step-pill.complete {
  border-color: rgba(34, 197, 94, 0.38);
  background: rgba(236, 252, 243, 0.98);
  color: #16603d;
}

.onboarding-step-dot {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.74rem;
  font-weight: 900;
  color: #294f95;
  background: rgba(31,111,255,0.14);
}

.onboarding-step-pill.complete .onboarding-step-dot {
  color: #16603d;
  background: rgba(34,197,94,0.16);
}

.parent-onboarding-card {
  border-radius: 24px !important;
}

.onboarding-step-card {
  display: grid;
  gap: 12px;
}

.onboarding-helper {
  color: var(--text-muted-strong);
  font-size: 0.84rem;
  line-height: 1.4;
  font-weight: 600;
}

.onboarding-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.onboarding-step-card input,
.onboarding-step-card select,
.onboarding-step-card textarea {
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  border: 1.5px solid rgba(196, 209, 230, 0.95);
  background: rgba(255,255,255,0.97);
  color: var(--text);
  font-size: 0.96rem;
  font-weight: 600;
  padding: 0 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.onboarding-step-card input::placeholder,
.onboarding-step-card textarea::placeholder {
  color: #8a96ae;
  font-weight: 600;
}

.onboarding-step-card input:focus,
.onboarding-step-card select:focus,
.onboarding-step-card textarea:focus {
  outline: none;
  border-color: rgba(31,111,255,0.55);
  box-shadow: 0 0 0 3px rgba(31,111,255,0.14);
  background: #fff;
}

.onboarding-form-grid > button {
  grid-column: 1 / -1;
}

.onboarding-form-grid-chores {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.onboarding-form-grid-chores #ob-chore-title {
  grid-column: span 2;
}

.onboarding-form-grid-chores #ob-add-chore {
  grid-column: span 3;
}

.onboarding-list {
  display: grid;
  gap: 8px;
}

.onboarding-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 54px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(218, 227, 241, 0.95);
  background: rgba(255,255,255,0.92);
}

.onboarding-list-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text);
}

.onboarding-list-emoji {
  font-size: 1.06rem;
}

.onboarding-list-meta {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.onboarding-empty {
  text-align: center;
  padding: 14px 10px;
  border-radius: 14px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  border: 1px dashed rgba(191, 202, 220, 0.9);
  background: rgba(249, 251, 255, 0.84);
}

.onboarding-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin-top: 4px;
}

.onboarding-actions-tight {
  margin-top: 0;
}

.onboarding-actions .btn {
  min-height: 50px !important;
  border-radius: 16px !important;
}

.onboarding-checklist {
  display: grid;
  gap: 10px;
}

.onboarding-check-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(217, 227, 241, 0.95);
  background: rgba(255,255,255,0.94);
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 700;
}

.landing-screen,
.setup-screen {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  background:
    radial-gradient(140% 100% at -10% -8%, rgba(76, 158, 255, 0.12), transparent 58%),
    radial-gradient(120% 120% at 108% 4%, rgba(32, 199, 181, 0.1), transparent 52%),
    linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
}

.landing-screen::before,
.setup-screen::before {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  top: -90px;
  right: -96px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 35% 35%, rgba(88, 171, 255, 0.2), rgba(88, 171, 255, 0) 72%);
  animation: auth-shell-float 8.8s ease-in-out infinite;
}

@keyframes auth-shell-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.62; }
  50% { transform: translate3d(-10px, 8px, 0) scale(1.06); opacity: 0.86; }
}

.setup-screen .setup-hero,
.landing-screen .landing-hero {
  border-radius: 26px !important;
  border: 1px solid rgba(255,255,255,0.64) !important;
  background:
    linear-gradient(136deg, #1c5fff 0%, #3f84ff 56%, #52b6ff 100%) !important;
  color: #fff !important;
  box-shadow:
    0 22px 40px rgba(28, 95, 255, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.26) !important;
}

.setup-screen .setup-hero h2,
.setup-screen .setup-hero p,
.landing-screen .landing-hero h1,
.landing-screen .landing-hero p,
.landing-screen .landing-kicker {
  color: #fff !important;
}

.setup-screen .setup-card .card,
.setup-screen #pin-entry-area .card,
.login-option-card,
.child-select-btn,
.landing-feature,
.landing-proof-item {
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,0.92) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(245,248,255,0.95)) !important;
  box-shadow:
    0 14px 28px rgba(15,23,42,0.08),
    0 2px 8px rgba(15,23,42,0.05) !important;
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 220ms ease !important;
}

.login-option-card:hover,
.child-select-btn:hover,
.landing-feature:hover,
.landing-proof-item:hover {
  transform: translateY(-2px);
  border-color: rgba(31,111,255,0.34) !important;
  box-shadow:
    0 18px 32px rgba(15,23,42,0.1),
    0 4px 10px rgba(15,23,42,0.05) !important;
}

.setup-screen .pin-display {
  border-radius: 16px;
  border: 1px solid rgba(205, 216, 234, 0.9);
  background: rgba(249, 252, 255, 0.96);
}

.setup-screen .pin-key {
  border-radius: 16px !important;
  border-color: rgba(204, 215, 234, 0.92) !important;
  background: rgba(255,255,255,0.96) !important;
}

.setup-screen .pin-key:active {
  transform: scale(0.96);
}

.setup-screen .btn-primary,
.landing-screen .btn-primary {
  border-radius: 18px !important;
  background: linear-gradient(136deg, #1f6fff 0%, #4a8bff 55%, #64b7ff 100%) !important;
  box-shadow:
    0 16px 28px rgba(43, 108, 255, 0.36),
    inset 0 1px 0 rgba(255,255,255,0.24) !important;
}

.landing-screen .landing-actions .btn {
  min-height: 56px !important;
}

@media (max-width: 640px) {
  .parent-onboarding-progress {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .onboarding-form-grid,
  .onboarding-form-grid-chores {
    grid-template-columns: 1fr;
  }

  .onboarding-form-grid-chores #ob-chore-title,
  .onboarding-form-grid-chores #ob-add-chore {
    grid-column: auto;
  }
}

@media (max-width: 520px) {
  .parent-dashboard-shell,
  .landing-screen,
  .setup-screen {
    border-radius: 24px;
  }

  .parent-dashboard-shell .parent-hero-banner,
  .setup-screen .setup-hero,
  .landing-screen .landing-hero {
    padding: 20px 16px !important;
    border-radius: 22px !important;
  }

  .parent-dashboard-shell .tab-btn {
    min-height: 54px !important;
  }

  .onboarding-step-pill {
    min-height: 42px;
    font-size: 0.73rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .parent-dashboard-shell::before,
  .landing-screen::before,
  .setup-screen::before {
    animation: none !important;
  }

  .parent-dashboard-shell .parent-tabs-indicator,
  .parent-dashboard-shell .tab-btn,
  .parent-dashboard-shell .parent-summary-tile,
  .parent-dashboard-shell .parent-tool-card,
  .setup-screen .setup-card .card,
  .setup-screen #pin-entry-area .card,
  .login-option-card,
  .child-select-btn,
  .landing-feature,
  .landing-proof-item {
    transition: none !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .onboarding-step-card input,
  .onboarding-step-card select,
  .onboarding-step-card textarea,
  .parent-dashboard-shell .form-group input,
  .parent-dashboard-shell .form-group select,
  .parent-dashboard-shell .form-group textarea {
    font-size: 16px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   WeWard Polish Pass 2 (April 2026)
   Goal: less rigid, more celebratory and kinetic
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --ward-aurora-a: rgba(31, 111, 255, 0.16);
  --ward-aurora-b: rgba(67, 178, 255, 0.13);
  --ward-aurora-c: rgba(53, 212, 191, 0.11);
  --ward-sheen: linear-gradient(108deg, transparent 8%, rgba(255,255,255,0.54) 42%, transparent 74%);
  --ward-celebrate-gold: #f7b500;
  --ward-celebrate-mint: #1bcf8b;
}

.parent-dashboard-shell,
.child-dashboard-shell {
  --ward-drift-y: 0px;
  transform: translate3d(0, var(--ward-drift-y), 0);
}

.parent-dashboard-shell::after,
.child-dashboard-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(54% 42% at 11% 8%, var(--ward-aurora-a) 0%, transparent 68%),
    radial-gradient(46% 52% at 88% 13%, var(--ward-aurora-b) 0%, transparent 70%),
    radial-gradient(32% 34% at 58% 2%, var(--ward-aurora-c) 0%, transparent 75%);
  opacity: 0.82;
  animation: ward-aurora-drift 14s ease-in-out infinite;
}

@keyframes ward-aurora-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.74; }
  50% { transform: translate3d(0, -8px, 0) scale(1.03); opacity: 0.96; }
}

.parent-dashboard-shell .parent-hero-banner,
.child-dashboard-shell .child-hero {
  position: relative;
  overflow: hidden;
}

.parent-dashboard-shell .parent-hero-banner::before,
.child-dashboard-shell .child-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), transparent 44%);
  opacity: 0.78;
}

.parent-dashboard-shell .parent-summary-tile,
.parent-dashboard-shell .parent-tool-card,
.parent-dashboard-shell .parent-kid-row,
.parent-dashboard-shell .parent-activity-row,
.child-dashboard-shell .card,
.child-dashboard-shell .chore-card {
  position: relative;
  overflow: hidden;
}

.parent-dashboard-shell .parent-summary-tile::after,
.parent-dashboard-shell .parent-tool-card::after,
.child-dashboard-shell .card::after,
.child-dashboard-shell .chore-card::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -62%;
  width: 42%;
  pointer-events: none;
  opacity: 0;
  background: var(--ward-sheen);
  transform: skewX(-18deg);
}

.parent-dashboard-shell .parent-summary-tile:hover::after,
.parent-dashboard-shell .parent-tool-card:hover::after,
.child-dashboard-shell .card:hover::after,
.child-dashboard-shell .chore-card:hover::after {
  opacity: 1;
  animation: ward-sheen-sweep 680ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes ward-sheen-sweep {
  from { left: -62%; }
  to { left: 126%; }
}

.parent-dashboard-shell .parent-summary-tile {
  animation: ward-kpi-breathe 5.8s ease-in-out infinite;
}

.parent-dashboard-shell .parent-summary-tile:nth-child(2) { animation-delay: 0.45s; }
.parent-dashboard-shell .parent-summary-tile:nth-child(3) { animation-delay: 0.9s; }
.parent-dashboard-shell .parent-summary-tile:nth-child(4) { animation-delay: 1.35s; }

@keyframes ward-kpi-breathe {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow:
      0 16px 30px rgba(15, 23, 42, 0.08),
      0 2px 8px rgba(15, 23, 42, 0.05);
  }
  50% {
    transform: translateY(-2px) scale(1.01);
    box-shadow:
      0 20px 34px rgba(15, 23, 42, 0.10),
      0 4px 12px rgba(15, 23, 42, 0.06);
  }
}

.parent-dashboard-shell .parent-shortcut-btn,
.child-dashboard-shell .done-btn {
  position: relative;
  overflow: hidden;
  border-color: rgba(87, 152, 255, 0.48) !important;
}

.parent-dashboard-shell .parent-shortcut-btn::before,
.child-dashboard-shell .done-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(108deg, transparent 20%, rgba(255,255,255,0.36) 44%, transparent 76%);
  transform: translateX(-138%);
  animation: ward-cta-sheen 3.1s ease-in-out infinite;
}

@keyframes ward-cta-sheen {
  0%, 26% { transform: translateX(-138%); }
  56%, 100% { transform: translateX(138%); }
}

.parent-dashboard-shell .parent-shortcut-btn {
  box-shadow:
    0 15px 30px rgba(32, 107, 255, 0.42),
    0 0 0 0 rgba(32, 107, 255, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.25) !important;
  animation: ward-parent-cta-pulse 2.8s ease-in-out infinite;
}

@keyframes ward-parent-cta-pulse {
  0%, 100% {
    box-shadow:
      0 15px 30px rgba(32, 107, 255, 0.42),
      0 0 0 0 rgba(32, 107, 255, 0.22),
      inset 0 1px 0 rgba(255,255,255,0.25);
  }
  50% {
    box-shadow:
      0 18px 34px rgba(32, 107, 255, 0.47),
      0 0 0 9px rgba(32, 107, 255, 0.08),
      inset 0 1px 0 rgba(255,255,255,0.25);
  }
}

.child-dashboard-shell .chore-card.status-approved {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(235, 252, 245, 0.96)) !important;
  border-color: rgba(27, 207, 139, 0.48) !important;
}

.child-dashboard-shell .chore-card.status-pending {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(255, 247, 232, 0.95)) !important;
  border-color: rgba(247, 181, 0, 0.42) !important;
}

.child-dashboard-shell .chore-card.status-approved .chore-value {
  color: #139f65 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

.child-dashboard-shell .child-tabs-indicator,
.parent-dashboard-shell .parent-tabs-indicator {
  filter: saturate(1.08) brightness(1.03);
}

.chore-celebration-overlay {
  backdrop-filter: blur(8px) saturate(1.15);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
}

.chore-celebration-overlay::before,
.chore-celebration-overlay::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 34% 34%, rgba(255,255,255,0.44), transparent 70%);
  animation: ward-celebration-glow 4.4s ease-in-out infinite;
}

.chore-celebration-overlay::before {
  left: -72px;
  top: -56px;
}

.chore-celebration-overlay::after {
  right: -74px;
  bottom: -58px;
  animation-delay: 1.2s;
}

@keyframes ward-celebration-glow {
  0%, 100% { transform: scale(1) translateY(0); opacity: 0.64; }
  50% { transform: scale(1.08) translateY(-6px); opacity: 0.95; }
}

.chore-celebration-continue {
  border: 1px solid rgba(255,255,255,0.72) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,0.2),
    0 0 0 0 rgba(255,255,255,0.28) !important;
  animation: ward-continue-bounce 2.6s ease-in-out infinite;
}

@keyframes ward-continue-bounce {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow:
      0 12px 28px rgba(0,0,0,0.2),
      0 0 0 0 rgba(255,255,255,0.28);
  }
  50% {
    transform: translateY(-2px) scale(1.01);
    box-shadow:
      0 14px 30px rgba(0,0,0,0.22),
      0 0 0 8px rgba(255,255,255,0.12);
  }
}

@media (max-width: 520px) {
  .parent-dashboard-shell .parent-shortcut-btn,
  .child-dashboard-shell .done-btn {
    min-height: 56px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .parent-dashboard-shell::after,
  .child-dashboard-shell::after,
  .parent-dashboard-shell .parent-summary-tile,
  .parent-dashboard-shell .parent-shortcut-btn,
  .child-dashboard-shell .done-btn,
  .parent-dashboard-shell .parent-shortcut-btn::before,
  .child-dashboard-shell .done-btn::before,
  .chore-celebration-overlay::before,
  .chore-celebration-overlay::after,
  .chore-celebration-continue {
    animation: none !important;
  }

  .parent-dashboard-shell .parent-summary-tile::after,
  .parent-dashboard-shell .parent-tool-card::after,
  .child-dashboard-shell .card::after,
  .child-dashboard-shell .chore-card::after {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════ */
/* ── Chorbie Refresh                                           ── */
/* ════════════════════════════════════════════════════════════════ */

.container {
  max-width: min(var(--content-max), calc(100vw - 32px));
}

.page-content {
  padding-top: 20px;
}

.app-header {
  min-height: 98px;
  padding: calc(14px + env(safe-area-inset-top)) 20px 14px;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(79,70,229,0.08);
  box-shadow: 0 10px 28px rgba(15,23,42,0.05);
  backdrop-filter: blur(18px);
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100% - 132px);
}

.header-brand-mark {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 20px;
  object-fit: cover;
  box-shadow: 0 16px 28px rgba(15,23,42,0.12);
}

.header-brand-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}

.header-brand-wordmark {
  display: inline-flex;
  align-items: flex-end;
  width: fit-content;
  font-family: var(--font-family-display);
  font-size: clamp(2.05rem, 1.55rem + 1.65vw, 2.95rem);
  font-weight: 800;
  letter-spacing: -0.065em;
  line-height: 0.88;
  color: #1f246d;
}

.header-brand-wordmark-primary {
  color: #1f246d;
}

.header-brand-wordmark-accent {
  background: linear-gradient(90deg, #22c55e 0%, #2cc5be 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.header-brand-wordmark-star {
  margin-left: 4px;
  font-size: 0.42em;
  line-height: 1;
  color: #facc15;
  text-shadow: 0 4px 12px rgba(250, 204, 21, 0.32);
  transform: translateY(-0.82em);
}

.header-brand-tagline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28em;
  font-size: 0.78rem;
  font-weight: 800;
  color: #1f246d;
  letter-spacing: -0.02em;
}

.header-brand-tagline-accent {
  color: #22c55e;
}

.header-brand-tagline-primary {
  color: #4f46e5;
}

.app-header .header-actions {
  top: calc(50% + 2px);
}

.app-header .btn-ghost {
  min-width: 108px;
  height: 52px;
  border-radius: 18px;
  border-color: rgba(79,70,229,0.16);
  background: rgba(255,255,255,0.92);
  color: #111827;
  font-size: 1rem;
  font-weight: 800;
}

.app-header .btn-ghost:hover {
  background: rgba(79,70,229,0.08);
  border-color: rgba(79,70,229,0.2);
}

.landing-screen,
.setup-screen,
.parent-dashboard-shell,
.child-dashboard-shell {
  background:
    radial-gradient(circle at 12% 0%, rgba(79,70,229,0.08), transparent 28%),
    radial-gradient(circle at 100% 14%, rgba(34,197,94,0.07), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(248,250,252,0.94));
}

.landing-screen::before,
.setup-screen::before,
.child-dashboard-shell::before,
.parent-dashboard-shell::before {
  opacity: 0.84;
}

.landing-screen .landing-hero,
.setup-screen .setup-hero,
.parent-dashboard-shell .parent-hero-banner,
.child-dashboard-shell .child-hero,
.child-dashboard-shell .child-spotlight-card {
  background: linear-gradient(145deg, #0f172a 0%, #312e81 40%, #4f46e5 100%) !important;
  box-shadow: 0 24px 56px rgba(15,23,42,0.18) !important;
}

.landing-screen .landing-hero {
  padding-top: 28px !important;
}

.landing-kicker,
.parent-section-kicker,
.child-spotlight-kicker {
  background: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.82) !important;
}

.landing-feature,
.landing-proof-item,
.login-option-card,
.child-select-btn,
.child-dashboard-shell .card,
.child-dashboard-shell .chore-card,
.child-dashboard-shell .week-day-row,
.child-dashboard-shell .mood-done-row,
.parent-dashboard-shell .card,
.parent-dashboard-shell .parent-summary-tile,
.parent-dashboard-shell .parent-tool-card,
.parent-dashboard-shell .parent-kid-row,
.parent-dashboard-shell .parent-activity-row {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.94)) !important;
  border: 1px solid rgba(226,232,240,0.9) !important;
  box-shadow: 0 12px 30px rgba(15,23,42,0.08), 0 2px 8px rgba(15,23,42,0.04) !important;
}

.landing-feature:hover,
.landing-proof-item:hover,
.login-option-card:hover,
.child-select-btn:hover,
.parent-dashboard-shell .parent-summary-tile:hover,
.parent-dashboard-shell .parent-tool-card:hover,
.parent-dashboard-shell .parent-kid-row:hover,
.parent-dashboard-shell .parent-activity-row:hover,
.child-dashboard-shell .chore-card:hover {
  border-color: rgba(79,70,229,0.22) !important;
  box-shadow: 0 16px 36px rgba(15,23,42,0.1), 0 4px 10px rgba(15,23,42,0.05) !important;
}

.btn {
  border-radius: 16px !important;
}

.btn-primary,
.child-dashboard-shell .done-btn,
.parent-dashboard-shell .parent-shortcut-btn {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 52%, #22c55e 100%) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(79,70,229,0.24) !important;
}

.btn-primary:hover,
.child-dashboard-shell .done-btn:hover,
.parent-dashboard-shell .parent-shortcut-btn:hover {
  box-shadow: 0 18px 34px rgba(79,70,229,0.28) !important;
}

.btn-secondary,
.btn-success {
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
  color: #fff !important;
}

.btn-ghost,
.btn-outline {
  background: rgba(255,255,255,0.82);
  border-color: rgba(79,70,229,0.16);
  color: var(--primary);
}

.parent-dashboard-shell #parent-tab-nav,
.child-dashboard-shell #child-tab-nav {
  background: rgba(255,255,255,0.88) !important;
  border: 1px solid rgba(226,232,240,0.9) !important;
  box-shadow: 0 12px 26px rgba(15,23,42,0.08) !important;
}

.parent-dashboard-shell .parent-tabs-indicator,
.child-dashboard-shell .child-tabs-indicator {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 60%, #22c55e 100%) !important;
  box-shadow: 0 10px 20px rgba(79,70,229,0.26) !important;
}

.parent-dashboard-shell .tab-btn,
.child-dashboard-shell #child-tab-nav .tab-btn {
  color: #64748b !important;
}

.parent-dashboard-shell .tab-btn.active,
.child-dashboard-shell #child-tab-nav .tab-btn.active {
  color: #ffffff !important;
}

.child-dashboard-shell .child-hero {
  border-radius: 28px !important;
  padding: 22px 18px 18px !important;
}

.child-dashboard-shell .hero-pill {
  background: rgba(255,255,255,0.16) !important;
  border-color: rgba(255,255,255,0.22) !important;
}

.child-dashboard-shell .child-hero-greeting,
.child-dashboard-shell .child-hero-level,
.child-dashboard-shell .xp-sub-label,
.parent-dashboard-shell .parent-hero-copy,
.parent-dashboard-shell .parent-summary-label {
  color: rgba(255,255,255,0.78) !important;
}

.child-dashboard-shell .child-hero-name,
.parent-dashboard-shell .parent-hero-name,
.parent-dashboard-shell .parent-summary-value {
  color: #ffffff !important;
}

.child-dashboard-shell .child-spotlight-card {
  position: relative;
  overflow: hidden;
}

.child-dashboard-shell .child-spotlight-chip,
.child-dashboard-shell .child-spotlight-chip.is-primary {
  background: rgba(255,255,255,0.14) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.16);
}

.child-dashboard-shell .child-spotlight-track {
  background: rgba(255,255,255,0.16) !important;
}

.child-dashboard-shell .child-spotlight-track-fill,
.xp-bar-fill {
  background: linear-gradient(90deg, #a5b4fc 0%, #facc15 38%, #22c55e 100%) !important;
}

.child-dashboard-shell .mood-btn,
.child-dashboard-shell .game-slot,
.child-dashboard-shell .xp-shop-item,
.child-dashboard-shell .badge-item-lg,
.child-dashboard-shell .sticker-item {
  border-radius: 18px !important;
}

.child-dashboard-shell .chore-frequency-label {
  background: rgba(79,70,229,0.08);
  border: 1px solid rgba(79,70,229,0.1);
  color: var(--primary);
  display: inline-flex;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
}

.child-dashboard-shell .chore-emoji-circle {
  background: linear-gradient(135deg, rgba(79,70,229,0.08), rgba(34,197,94,0.12));
  color: var(--primary);
}

.child-dashboard-shell .status-chip-pending {
  background: rgba(250,204,21,0.12);
  color: #9a6700;
}

.child-dashboard-shell .status-chip-approved {
  background: rgba(34,197,94,0.12);
  color: #166534;
}

.child-dashboard-shell .status-chip-rejected {
  background: rgba(251,113,133,0.12);
  color: #be123c;
}

.leaderboard-enhanced,
.leaderboard {
  border-radius: 24px !important;
}

.podium-rank,
.podium-xp {
  color: var(--primary) !important;
}

.podium-balance,
.statement-tx-in,
.balance-positive {
  color: var(--green) !important;
}

.settings-row,
.message-card {
  border-color: rgba(226,232,240,0.9) !important;
}

.profile-card-sub {
  margin: 4px 0 14px;
  font-size: 0.84rem;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.45;
}

.profile-preference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.child-task-filter-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.child-task-filter-btn {
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,0.92);
  background: rgba(248,250,252,0.96);
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.child-task-filter-btn.active {
  border-color: rgba(79,70,229,0.22);
  background: linear-gradient(135deg, rgba(79,70,229,0.10), rgba(34,197,94,0.10));
  color: var(--primary);
  box-shadow: 0 10px 18px rgba(79,70,229,0.08);
}

.child-task-list {
  display: grid;
  gap: 10px;
}

.profile-pref-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 108px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,0.92);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.94));
  box-shadow: 0 10px 22px rgba(15,23,42,0.06);
  color: var(--text);
  text-align: left;
}

.profile-pref-card.active {
  border-color: rgba(79,70,229,0.24);
  background: linear-gradient(180deg, rgba(238,242,255,0.98), rgba(255,255,255,0.96));
  box-shadow: 0 14px 28px rgba(79,70,229,0.12);
}

.profile-pref-icon {
  font-size: 1.2rem;
  line-height: 1;
}

.profile-pref-name {
  font-size: 0.88rem;
  font-weight: 800;
}

.profile-pref-desc {
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--muted);
  font-weight: 600;
}

.child-theme-lock-note {
  margin-top: 10px;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--muted);
  font-weight: 600;
}

.app-footer {
  max-width: var(--content-max);
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
}

body.pref-large-text {
  font-size: 18px;
}

body.pref-large-text .tab-label,
body.pref-large-text .settings-row-desc,
body.pref-large-text .landing-proof-item span,
body.pref-large-text .landing-feature-sub {
  font-size: 0.84rem !important;
}

body.pref-calm-mode::before,
body.pref-calm-mode .child-dashboard-shell::before,
body.pref-calm-mode .parent-dashboard-shell::before,
body.pref-calm-mode .landing-screen::before,
body.pref-calm-mode .setup-screen::before {
  opacity: 0.42 !important;
  filter: blur(14px) !important;
}

body.pref-calm-mode .card,
body.pref-calm-mode .chore-card,
body.pref-calm-mode .parent-summary-tile,
body.pref-calm-mode .parent-tool-card,
body.pref-calm-mode .parent-kid-row,
body.pref-calm-mode .parent-activity-row {
  box-shadow: 0 10px 22px rgba(15,23,42,0.06), 0 2px 8px rgba(15,23,42,0.03) !important;
}

body.pref-reduce-motion *,
body.pref-reduce-motion *::before,
body.pref-reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

@media (max-width: 520px) {
  .app-header {
    min-height: 90px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .header-brand {
    gap: 12px;
    max-width: calc(100% - 132px);
  }

  .header-brand-mark {
    width: 52px;
    height: 52px;
    border-radius: 18px;
  }

  .header-brand-wordmark {
    font-size: 2.25rem;
  }

  .header-brand-tagline {
    display: none;
  }

  .app-header .btn-ghost {
    min-width: 98px;
    height: 48px;
    padding: 0 16px;
    font-size: 0.95rem;
  }

  .profile-preference-grid {
    grid-template-columns: 1fr;
  }
}

/* Recovery pass: unify the child dashboard with the Chorbie brief and
   neutralize the conflicting dashboard/theme layers above. */

.toast {
  top: auto !important;
  bottom: calc(18px + var(--safe-bottom)) !important;
  min-width: 0 !important;
  max-width: min(340px, calc(100vw - 28px)) !important;
  padding: 12px 18px !important;
  border-radius: 24px !important;
  line-height: 1.35;
  box-shadow: 0 18px 36px rgba(15,23,42,0.18), 0 0 0 1px rgba(255,255,255,0.12) inset !important;
  animation: toast-rise 220ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

@keyframes toast-rise {
  0% { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.96); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.child-dashboard-shell .child-hero {
  padding: 24px 18px 20px !important;
  border-radius: 30px !important;
  background: linear-gradient(145deg, #2d327d 0%, #484fd0 58%, #4a63e0 100%) !important;
  box-shadow: 0 22px 48px rgba(49, 46, 129, 0.24) !important;
}

.child-dashboard-shell .hero-pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.child-dashboard-shell .hero-pill {
  min-width: 0 !important;
  min-height: 48px;
  justify-content: center;
  padding: 0 10px;
  text-align: center;
  font-size: 0.88rem;
  line-height: 1.15;
  white-space: nowrap;
}

.child-dashboard-shell .child-hero-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 16px;
  align-items: center;
}

.child-dashboard-shell .child-hero-greeting {
  font-size: 0.92rem !important;
}

.child-dashboard-shell .child-hero-name {
  font-size: clamp(2.3rem, 2rem + 2vw, 3.05rem) !important;
}

.child-dashboard-shell .child-hero-level {
  max-width: 18ch;
  font-size: 0.98rem !important;
  line-height: 1.25;
}

.child-dashboard-shell .xp-bar-container {
  margin-top: 12px !important;
}

.child-dashboard-shell .xp-sub-label {
  margin-top: 10px;
  font-size: 0.92rem;
}

.child-dashboard-shell .child-hero-buddy-col {
  width: 112px;
  height: 112px;
  padding: 10px;
  border-radius: 28px;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 18px 32px rgba(15,23,42,0.18), inset 0 1px 0 rgba(255,255,255,0.92);
}

.child-dashboard-shell .hero-buddy-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.child-dashboard-shell #child-tab-nav {
  margin: 16px 0 18px !important;
  padding: 7px !important;
  gap: 6px !important;
  overflow-x: auto;
  scrollbar-width: none;
}

.child-dashboard-shell #child-tab-nav::-webkit-scrollbar {
  display: none;
}

.child-dashboard-shell #child-tab-nav .tab-btn {
  min-width: 0 !important;
  padding: 6px 6px !important;
  gap: 4px;
}

.child-dashboard-shell #child-tab-nav .tab-btn .tab-icon {
  font-size: 1.22rem !important;
}

.child-dashboard-shell #child-tab-nav .tab-btn .tab-label {
  font-size: 0.62rem !important;
  letter-spacing: 0 !important;
}

.child-dashboard-shell .mood-checkin-card {
  padding: 24px 18px !important;
  border-radius: 30px !important;
}

.child-dashboard-shell .mood-checkin-title {
  text-align: center;
  font-size: 1.06rem;
  font-weight: 900;
}

.child-dashboard-shell .mood-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.child-dashboard-shell .mood-btn {
  min-height: 112px;
  padding: 14px 8px;
  background: linear-gradient(180deg, rgba(248,250,255,0.98), rgba(239,244,253,0.98)) !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.96), 0 10px 22px rgba(148,163,184,0.16) !important;
}

.child-dashboard-shell .mood-emoji {
  font-size: 1.95rem;
}

.child-dashboard-shell .mood-label {
  font-size: 0.68rem !important;
  letter-spacing: 0.06em;
  color: #667085 !important;
}

.child-dashboard-shell .child-spotlight-card {
  padding: 24px 20px 20px !important;
  border-radius: 32px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(244,248,255,0.95) 100%) !important;
  border: 1px solid rgba(214,223,238,0.96) !important;
  box-shadow: 0 18px 44px rgba(148,163,184,0.18), inset 0 1px 0 rgba(255,255,255,0.88) !important;
}

.child-dashboard-shell .child-spotlight-card::before {
  width: 190px;
  height: 190px;
  right: -72px;
  top: -82px;
  background: radial-gradient(circle, rgba(99,102,241,0.16), transparent 72%);
}

.child-dashboard-shell .child-spotlight-card::after {
  width: 140px;
  height: 140px;
  left: -42px;
  bottom: -44px;
  background: radial-gradient(circle, rgba(34,197,94,0.12), transparent 74%);
}

.child-dashboard-shell .child-spotlight-kicker {
  background: none !important;
  color: #65708a !important;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}

.child-dashboard-shell .child-spotlight-value {
  color: #111a3f !important;
  font-size: clamp(2.6rem, 2.1rem + 2vw, 3.45rem);
}

.child-dashboard-shell .child-spotlight-sub,
.child-dashboard-shell .child-spotlight-copy {
  color: #5c6780 !important;
}

.child-dashboard-shell .child-spotlight-progress-orb {
  background: linear-gradient(180deg, #ffffff 0%, #eef3ff 100%);
  border: 1px solid rgba(196,206,224,0.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.96), 0 16px 30px rgba(79,70,229,0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.child-dashboard-shell .child-spotlight-progress-orb strong {
  color: #312e81;
}

.child-dashboard-shell .child-spotlight-progress-orb span {
  color: #667085;
}

.child-dashboard-shell .child-spotlight-track {
  height: 12px;
  background: rgba(226,232,240,0.96) !important;
  border: none !important;
  box-shadow: inset 0 1px 3px rgba(148,163,184,0.22);
}

.child-dashboard-shell .child-spotlight-track-fill {
  background: linear-gradient(90deg, #4f46e5 0%, #6c72ef 42%, #22c55e 100%) !important;
  box-shadow: 0 0 18px rgba(79,70,229,0.16);
}

.child-dashboard-shell .child-spotlight-chip-row {
  gap: 10px;
}

.child-dashboard-shell .child-spotlight-chip {
  background: rgba(79,70,229,0.08) !important;
  border: 1px solid rgba(79,70,229,0.12) !important;
  color: #3f4a5f !important;
}

.child-dashboard-shell .child-spotlight-chip.is-primary {
  background: linear-gradient(135deg, rgba(79,70,229,0.12), rgba(34,197,94,0.12)) !important;
  color: #312e81 !important;
}

.child-dashboard-shell .games-card,
.child-dashboard-shell .chores-section {
  border-radius: 30px !important;
  padding: 22px 18px !important;
}

.child-dashboard-shell .games-row {
  gap: 12px !important;
}

.child-dashboard-shell .game-slot {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,249,255,0.96)) !important;
  border: 1px solid rgba(214,223,238,0.96) !important;
  box-shadow: 0 12px 24px rgba(148,163,184,0.14) !important;
}

.child-dashboard-shell .game-slot-flagship {
  background: linear-gradient(145deg, #23275f 0%, #4f46e5 56%, #1fc495 100%) !important;
  border: none !important;
  box-shadow: 0 18px 36px rgba(79,70,229,0.24) !important;
}

.child-dashboard-shell .game-slot-flagship .game-slot-badge,
.child-dashboard-shell .game-slot-flagship .game-slot-kicker,
.child-dashboard-shell .game-slot-flagship .game-slot-name,
.child-dashboard-shell .game-slot-flagship .game-slot-meta {
  color: #ffffff !important;
}

.child-dashboard-shell .game-slot-flagship .game-slot-btn {
  background: rgba(255,255,255,0.94) !important;
  color: #292e72 !important;
  box-shadow: none !important;
}

.child-dashboard-shell .chores-section-title {
  font-size: 1.12rem;
}

.child-dashboard-shell .today-chore-group-title {
  color: #111827;
}

.child-dashboard-shell .today-chore-group-subtitle {
  color: #667085;
}

@media (max-width: 520px) {
  .toast {
    max-width: calc(100vw - 24px) !important;
    bottom: calc(14px + var(--safe-bottom)) !important;
  }

  .child-dashboard-shell .hero-pill {
    min-height: 46px;
    padding: 0 6px;
    font-size: 0.8rem;
  }

  .child-dashboard-shell .child-hero-body {
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 14px;
  }

  .child-dashboard-shell .child-hero-buddy-col {
    width: 96px;
    height: 96px;
    border-radius: 24px;
  }

  .child-dashboard-shell #child-tab-nav .tab-btn {
    min-height: 54px !important;
    padding: 6px 4px !important;
  }

  .child-dashboard-shell #child-tab-nav .tab-btn .tab-label {
    font-size: 0.57rem !important;
  }

  .child-dashboard-shell .mood-btn {
    min-height: 102px;
    padding: 12px 6px;
  }

  .child-dashboard-shell .mood-label {
    font-size: 0.63rem !important;
  }
}

/* Final landing brief pass: make Chorbie the dominant brand moment and
   neutralize the stacked refresh layers above with one coherent hero. */
.landing-screen {
  padding: 24px 20px 88px !important;
  gap: 18px !important;
}

.landing-screen .landing-hero.landing-hero-poster {
  position: relative;
  width: calc(100% + 40px);
  max-width: none !important;
  margin: -24px -20px 0 !important;
  padding: 28px 20px 24px !important;
  border-radius: 0 0 34px 34px !important;
  border: none !important;
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,0.16), transparent 26%),
    radial-gradient(circle at 82% 20%, rgba(98, 208, 255, 0.22), transparent 28%),
    linear-gradient(152deg, #131a4a 0%, #273487 44%, #2f65d8 74%, #3cc6b3 100%) !important;
  box-shadow: 0 30px 72px rgba(19, 26, 74, 0.26) !important;
  overflow: hidden;
  text-align: left;
}

.landing-screen .landing-hero.landing-hero-poster::before,
.landing-screen .landing-hero.landing-hero-poster::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.landing-screen .landing-hero.landing-hero-poster::before {
  width: 320px;
  height: 320px;
  top: -150px;
  right: -86px;
  background: radial-gradient(circle, rgba(255,255,255,0.24), rgba(255,255,255,0) 72%);
}

.landing-screen .landing-hero.landing-hero-poster::after {
  width: 280px;
  height: 280px;
  left: -118px;
  bottom: -164px;
  background: radial-gradient(circle, rgba(89, 244, 214, 0.24), rgba(89, 244, 214, 0) 72%);
}

.landing-screen .landing-kicker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  margin-bottom: 18px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.9) !important;
  letter-spacing: 0.08em;
}

.landing-screen .landing-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.landing-screen .landing-hero-copy {
  max-width: 30rem;
}

.landing-screen .landing-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.landing-screen .landing-brand-mark {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 16px;
  object-fit: contain;
  background: rgba(255,255,255,0.18);
  padding: 4px;
  box-shadow: 0 14px 26px rgba(8, 15, 40, 0.18);
}

.landing-screen .landing-brand-text {
  min-width: 0;
}

.landing-screen .landing-brand-name {
  font-family: var(--font-family-display);
  font-size: clamp(2rem, 1.4rem + 2.3vw, 3rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.05em;
  color: #ffffff;
}

.landing-screen .landing-brand-sub {
  margin: 0 0 18px !important;
  font-size: 0.88rem;
  line-height: 1.4;
  color: #ffffff !important;
  font-weight: 700;
}

.landing-screen .landing-hero h1 {
  max-width: 11ch;
  margin: 0 0 14px;
  font-size: clamp(2.35rem, 1.7rem + 2.8vw, 4.15rem);
  line-height: 0.92;
  letter-spacing: -0.06em;
  color: #ffffff !important;
}

.landing-screen .landing-hero p {
  max-width: 34ch;
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(229, 237, 255, 0.88) !important;
}

.landing-screen .landing-actions {
  width: 100%;
  max-width: 360px;
  margin: 20px 0 12px;
}

.landing-screen .landing-actions .btn {
  flex: 1 1 0;
  width: auto;
  min-height: 54px !important;
  border-radius: 18px !important;
}

.landing-screen .landing-actions .btn-primary {
  background: linear-gradient(135deg, #ffffff 0%, #eef4ff 100%) !important;
  color: #1f2c77 !important;
  box-shadow: 0 18px 34px rgba(8, 15, 40, 0.24) !important;
}

.landing-screen .landing-actions .btn-ghost {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #ffffff !important;
}

.landing-screen .landing-hero-note {
  max-width: 34ch;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(229, 237, 255, 0.72);
  font-weight: 700;
}

.landing-screen .landing-character-stage {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-screen .landing-character-main {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.landing-screen .landing-char-xl {
  width: 220px;
  height: 220px;
  animation: landing-chorbie-float 6.2s ease-in-out infinite !important;
}

.landing-screen .landing-char-chorbie {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px !important;
  height: 220px !important;
  overflow: visible;
  box-shadow: none;
}

.landing-screen .landing-char-chorbie .buddy-char-img,
.landing-screen .landing-char-chorbie .buddy-svg-fallback {
  width: 100%;
  height: 100%;
}

.landing-screen .landing-char-chorbie .buddy-char-img {
  transform: translateY(4px) scale(1.06);
  transform-origin: center bottom;
  filter:
    drop-shadow(0 16px 30px rgba(8, 15, 40, 0.18))
    drop-shadow(0 0 44px rgba(152, 235, 255, 0.26));
}

.landing-screen .landing-character-caption {
  max-width: 20ch;
  font-size: 0.84rem;
  line-height: 1.45;
  color: rgba(229, 237, 255, 0.84);
  font-weight: 700;
}

.landing-screen .landing-character-side {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 1;
}

.landing-screen .landing-character-side .landing-char {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  padding: 12px;
  border-radius: 30px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 34px rgba(8, 15, 40, 0.16);
  animation: landing-side-float 7.5s ease-in-out infinite !important;
}

.landing-screen .landing-character-side-mossy {
  left: 4px;
  top: 34px;
}

.landing-screen .landing-character-side-zappo {
  right: 0;
  bottom: 22px;
}

.landing-screen .landing-character-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.landing-screen .landing-character-chip-primary {
  background: rgba(255,255,255,0.2);
  box-shadow: 0 10px 22px rgba(8, 15, 40, 0.18);
}

.landing-screen .landing-highlight-row {
  position: relative;
  z-index: 1;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.16);
}

.landing-screen .landing-highlight-row,
.landing-screen .landing-features,
.landing-screen .landing-proof-grid {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.landing-screen .landing-highlight,
.landing-screen .landing-feature,
.landing-screen .landing-proof-item {
  min-width: 0;
  border-radius: 20px !important;
  box-shadow: none !important;
}

.landing-screen .landing-highlight {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}

.landing-screen .landing-highlight strong {
  color: #ffffff !important;
}

.landing-screen .landing-highlight span {
  color: rgba(229, 237, 255, 0.8) !important;
}

.landing-screen .landing-features,
.landing-screen .landing-proof-grid {
  max-width: none !important;
}

.landing-screen .landing-feature,
.landing-screen .landing-proof-item {
  padding: 16px 18px !important;
  background: rgba(255,255,255,0.78) !important;
  border: 1px solid rgba(209, 219, 236, 0.82) !important;
}

.landing-screen .landing-feature-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(79,70,229,0.1), rgba(34,197,94,0.14));
}

@keyframes landing-chorbie-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1.25deg); }
  50% { transform: translate3d(0, -10px, 0) rotate(1.25deg); }
}

@keyframes landing-side-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -6px, 0); }
}

.landing-screen .landing-feature-text,
.landing-screen .landing-proof-item strong {
  font-size: 0.92rem;
}

.landing-screen .landing-feature-sub,
.landing-screen .landing-proof-item span {
  font-size: 0.81rem;
  line-height: 1.5;
}

.landing-screen .landing-footer {
  margin-top: 4px;
  color: #5f6b82;
  font-weight: 700;
}

.child-dashboard-shell .child-hero-buddy-col {
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,0.96), rgba(226,232,255,0.82) 52%, rgba(255,255,255,0.2) 100%) !important;
  box-shadow:
    0 18px 34px rgba(15,23,42,0.18),
    inset 0 1px 0 rgba(255,255,255,0.94) !important;
}

.child-dashboard-shell .hero-buddy-img[src*="logo.png"],
.buddy-char .buddy-char-img[src*="logo.png"] {
  transform: translateY(4px) scale(1.03);
  transform-origin: center bottom;
}

@media (min-width: 760px) {
  .landing-screen .landing-hero.landing-hero-poster {
    padding: 38px 34px 30px !important;
  }

  .landing-screen .landing-hero-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: center;
    gap: 20px;
  }

  .landing-screen .landing-actions {
    flex-direction: row;
    max-width: 440px;
  }

  .landing-screen .landing-highlight-row,
  .landing-screen .landing-features,
  .landing-screen .landing-proof-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .landing-screen {
    padding: 20px 16px 84px !important;
  }

  .landing-screen .landing-hero.landing-hero-poster {
    width: calc(100% + 32px);
    margin: -20px -16px 0 !important;
    padding: 24px 16px 20px !important;
    border-radius: 0 0 30px 30px !important;
  }

  .landing-screen .landing-brand-lockup {
    gap: 10px;
    margin-bottom: 14px;
  }

  .landing-screen .landing-brand-mark {
    width: 46px;
    height: 46px;
  }

  .landing-screen .landing-brand-name {
    font-size: 2.2rem;
  }

  .landing-screen .landing-character-stage {
    min-height: 286px;
  }

  .landing-screen .landing-char-xl,
  .landing-screen .landing-char-chorbie {
    width: 188px !important;
    height: 188px !important;
  }

  .landing-screen .landing-character-side .landing-char {
    width: 92px;
    height: 92px;
    padding: 10px;
  }

  .landing-screen .landing-character-side-mossy {
    left: 0;
    top: 24px;
  }

  .landing-screen .landing-character-side-zappo {
    right: 0;
    bottom: 10px;
  }
}

/* Final Chorbie brand-alignment pass:
   match the supplied lavender/indigo app screens and remove the leftover
   kinetic theme layers that were pulling the UI away from the actual brief. */
.app-header {
  min-height: 104px !important;
  padding: calc(18px + env(safe-area-inset-top)) 18px 16px !important;
  background: rgba(255,255,255,0.98) !important;
  border-bottom: 1px solid rgba(219, 221, 245, 0.96) !important;
  box-shadow: 0 1px 0 rgba(228, 231, 249, 0.92), 0 20px 42px rgba(102, 116, 190, 0.06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.header-brand {
  gap: 16px !important;
  max-width: calc(100% - 182px) !important;
}

.header-brand-mark {
  width: 72px !important;
  height: 72px !important;
  border-radius: 24px !important;
  object-fit: contain !important;
  box-shadow: 0 12px 26px rgba(99, 112, 181, 0.12) !important;
}

.header-brand-wordmark-image {
  display: block !important;
  width: min(100%, 244px) !important;
  height: auto !important;
  object-fit: contain !important;
  transform: translateY(1px) !important;
}

.header-brand-copy {
  gap: 6px !important;
}

.header-brand-wordmark {
  font-family: var(--font-family-display) !important;
  font-size: clamp(2.5rem, 2.08rem + 1.45vw, 3.35rem) !important;
  font-weight: 800 !important;
  line-height: 0.9 !important;
  letter-spacing: -0.085em !important;
  color: #262f8b !important;
  white-space: nowrap !important;
}

.header-brand-wordmark-primary {
  color: #262f8b !important;
}

.header-brand-wordmark-accent {
  background: linear-gradient(180deg, #22c55e 0%, #56c6a5 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.header-brand-wordmark-star {
  margin-left: 6px !important;
  font-size: 0.4em !important;
  color: #facc15 !important;
  text-shadow: none !important;
  transform: translateY(-0.78em) !important;
}

.header-brand-tagline {
  gap: 0.25em !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  color: #202b73 !important;
  letter-spacing: -0.02em !important;
}

.header-brand-tagline-accent {
  color: #22c55e !important;
}

.header-brand-tagline-primary {
  color: #4f46e5 !important;
}

.app-header .header-actions {
  top: calc(50% + 1px) !important;
  right: calc(18px + var(--safe-right)) !important;
}

.app-header .btn-ghost {
  min-width: 146px !important;
  height: 62px !important;
  padding: 0 26px !important;
  border-radius: 28px !important;
  border: 2px solid rgba(214, 212, 250, 0.95) !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 1.02rem !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 26px rgba(121, 129, 182, 0.08) !important;
}

.app-header .btn-ghost:hover {
  background: #ffffff !important;
  border-color: rgba(202, 199, 248, 0.95) !important;
  transform: none !important;
}

.child-dashboard-shell {
  --chorbie-surface-border: rgba(219, 224, 246, 0.94);
  --chorbie-card-shadow: 0 18px 40px rgba(156, 172, 220, 0.16), inset 0 1px 0 rgba(255,255,255,0.9);
  position: relative;
  padding-top: 18px !important;
  background: linear-gradient(180deg, rgba(252, 253, 255, 0.96) 0%, rgba(244, 248, 255, 0.98) 100%) !important;
  border-radius: 34px !important;
  isolation: isolate;
}

.child-dashboard-shell::before,
.child-dashboard-shell::after {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
  z-index: -1 !important;
  animation: none !important;
}

.child-dashboard-shell::before {
  left: -38px !important;
  right: -38px !important;
  top: 110px !important;
  bottom: 0 !important;
  height: auto !important;
  background:
    radial-gradient(48% 34% at 7% 30%, rgba(171, 191, 255, 0.56) 0%, transparent 72%),
    radial-gradient(42% 30% at 94% 38%, rgba(200, 235, 255, 0.6) 0%, transparent 72%),
    radial-gradient(36% 22% at 50% 16%, rgba(225, 228, 255, 0.48) 0%, transparent 76%) !important;
  filter: blur(34px) !important;
  opacity: 0.92 !important;
}

.child-dashboard-shell::after {
  inset: auto -24px -46px !important;
  top: 52% !important;
  background:
    radial-gradient(38% 28% at 10% 80%, rgba(182, 204, 255, 0.36) 0%, transparent 72%),
    radial-gradient(34% 26% at 92% 86%, rgba(203, 237, 255, 0.34) 0%, transparent 72%) !important;
  opacity: 0.72 !important;
  transform: none !important;
}

.child-dashboard-shell .card::after,
.child-dashboard-shell .chore-card::after,
.child-dashboard-shell .done-btn::before,
.child-dashboard-shell .hero-buddy-img,
.child-dashboard-shell .child-hero,
.child-dashboard-shell .child-spotlight-card,
.child-dashboard-shell::before,
.child-dashboard-shell::after {
  animation: none !important;
}

.child-dashboard-shell .card:hover::after,
.child-dashboard-shell .chore-card:hover::after {
  opacity: 0 !important;
}

.child-dashboard-shell .card,
.child-dashboard-shell .chore-card,
.child-dashboard-shell .week-day-row,
.child-dashboard-shell .mood-done-row,
.child-dashboard-shell .games-card,
.child-dashboard-shell .daily-quest-card,
.child-dashboard-shell .daily-goal-card,
.child-dashboard-shell .leaderboard-enhanced {
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,250,255,0.96)) !important;
  border: 1px solid var(--chorbie-surface-border) !important;
  box-shadow: var(--chorbie-card-shadow) !important;
}

.child-dashboard-shell .child-hero {
  padding: 26px 28px 24px !important;
  border-radius: 42px !important;
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.08) 36%, transparent 38%),
    linear-gradient(180deg, #6571d8 0%, #5965d6 42%, #4f5bd3 100%) !important;
  border: 1px solid rgba(205, 209, 255, 0.36) !important;
  box-shadow:
    0 26px 58px rgba(95, 109, 214, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.24) !important;
  overflow: hidden;
}

.child-dashboard-shell .child-hero::before {
  content: "" !important;
  position: absolute !important;
  width: 460px !important;
  height: 460px !important;
  left: -170px !important;
  top: -92px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.09) 44%, transparent 58%) !important;
  opacity: 1 !important;
}

.child-dashboard-shell .child-hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), transparent 44%) !important;
  pointer-events: none !important;
}

.child-dashboard-shell .hero-pills {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 22px !important;
}

.child-dashboard-shell .hero-pill {
  min-height: 68px !important;
  justify-content: center !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.12) !important;
  border: 2px solid rgba(255,255,255,0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18) !important;
  color: #ffffff !important;
  font-size: 0.98rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.child-dashboard-shell .child-hero-body {
  grid-template-columns: minmax(0, 1fr) 168px !important;
  gap: 18px !important;
  align-items: center !important;
}

.child-dashboard-shell .child-hero-greeting {
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  color: rgba(255,255,255,0.72) !important;
}

.child-dashboard-shell .child-hero-name {
  margin-top: 4px !important;
  font-family: var(--font-family-display) !important;
  font-size: clamp(3.2rem, 2.65rem + 2.2vw, 4.5rem) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.07em !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

.child-dashboard-shell .child-hero-level {
  max-width: 20ch !important;
  margin-top: 8px !important;
  font-size: 1.04rem !important;
  line-height: 1.22 !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.78) !important;
}

.child-dashboard-shell .xp-bar-container {
  margin-top: 16px !important;
  height: 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  background: rgba(255,255,255,0.14) !important;
  box-shadow: inset 0 2px 4px rgba(20, 31, 91, 0.16) !important;
}

.child-dashboard-shell .xp-bar-fill {
  background: linear-gradient(90deg, #facc15 0%, #d6e87b 22%, #22c55e 100%) !important;
  box-shadow:
    0 0 12px rgba(250, 204, 21, 0.18),
    inset 0 0 0 1px rgba(255,255,255,0.28) !important;
}

.child-dashboard-shell .xp-bar-fill::after {
  display: none !important;
}

.child-dashboard-shell .xp-sub-label {
  margin-top: 14px !important;
  font-size: 0.98rem !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.74) !important;
}

.child-dashboard-shell .child-hero-buddy-col {
  width: 168px !important;
  height: 168px !important;
  margin: 0 !important;
  padding: 18px !important;
  border-radius: 38px !important;
  background: linear-gradient(180deg, #eef3f9 0%, #dae4f0 100%) !important;
  border: 1px solid rgba(255,255,255,0.52) !important;
  box-shadow:
    0 18px 36px rgba(50, 61, 122, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.88) !important;
  transform: none !important;
  will-change: auto !important;
}

.child-dashboard-shell .hero-buddy-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 14px rgba(31, 42, 88, 0.16)) !important;
  transform: none !important;
}

.child-dashboard-shell .hero-buddy-img[src*="logo.png"],
.buddy-char .buddy-char-img[src*="logo.png"] {
  transform: none !important;
}

.child-dashboard-shell #child-tab-nav {
  margin: 18px 0 16px !important;
  padding: 14px 12px !important;
  gap: 2px !important;
  border-radius: 34px !important;
  border: 1px solid rgba(223, 228, 247, 0.96) !important;
  background: rgba(255,255,255,0.78) !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
  box-shadow: 0 18px 36px rgba(134, 152, 204, 0.14) !important;
}

.child-dashboard-shell .child-tabs-indicator {
  top: 12px !important;
  left: 12px !important;
  bottom: 12px !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #5b54f0 0%, #5c60f1 68%, #28c58e 100%) !important;
  box-shadow: 0 14px 28px rgba(91, 84, 240, 0.22) !important;
  filter: none !important;
}

.child-dashboard-shell #child-tab-nav .tab-btn {
  min-width: 0 !important;
  min-height: 92px !important;
  padding: 10px 8px !important;
  gap: 8px !important;
  color: #707a92 !important;
  transform: none !important;
}

.child-dashboard-shell #child-tab-nav .tab-btn:hover:not(.active) {
  color: #57627d !important;
  transform: none !important;
}

.child-dashboard-shell #child-tab-nav .tab-btn.active {
  color: #152042 !important;
}

.child-dashboard-shell #child-tab-nav .tab-btn .tab-icon {
  font-size: 1.65rem !important;
}

.child-dashboard-shell #child-tab-nav .tab-btn .tab-label {
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.child-dashboard-shell #child-tab-nav .tab-btn .tab-count {
  top: 12px !important;
  right: 14px !important;
  min-width: 20px !important;
  height: 20px !important;
  background: #f16f79 !important;
  border-color: rgba(255,255,255,0.98) !important;
  box-shadow: none !important;
}

.child-dashboard-shell #child-tab-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.child-dashboard-shell .mood-checkin-card,
.child-dashboard-shell .mood-done-row,
.child-dashboard-shell .gentle-mode-banner {
  order: 1;
}

.child-dashboard-shell .child-spotlight-card {
  order: 2;
}

.child-dashboard-shell .chores-section {
  order: 3;
}

.child-dashboard-shell .games-card {
  order: 4;
}

.child-dashboard-shell .daily-quest-card {
  order: 5;
}

.child-dashboard-shell .daily-goal-card {
  order: 6;
}

.child-dashboard-shell .leaderboard-enhanced {
  order: 7;
}

.child-dashboard-shell .mood-checkin-card {
  padding: 22px 18px 18px !important;
  border-radius: 30px !important;
}

.child-dashboard-shell .mood-checkin-title {
  font-size: 1.02rem !important;
  font-weight: 900 !important;
  color: #1a2751 !important;
}

.child-dashboard-shell .mood-options {
  gap: 10px !important;
}

.child-dashboard-shell .mood-btn {
  min-height: 96px !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(252,253,255,0.98), rgba(245,248,255,0.96)) !important;
  border: 1px solid rgba(221, 227, 245, 0.96) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.96), 0 10px 24px rgba(147, 163, 210, 0.12) !important;
  transform: none !important;
}

.child-dashboard-shell .mood-btn:hover {
  transform: none !important;
}

.child-dashboard-shell .mood-label {
  font-size: 0.68rem !important;
  color: #66708c !important;
}

.child-dashboard-shell .mood-done-row {
  min-height: 94px !important;
  padding: 18px 22px !important;
  border-radius: 30px !important;
  gap: 14px !important;
  font-size: 1.02rem !important;
  font-weight: 800 !important;
}

.child-dashboard-shell .mood-done-emoji {
  font-size: 2rem !important;
}

.child-dashboard-shell .mood-done-text {
  color: #1a2751 !important;
}

.child-dashboard-shell .mood-done-text strong {
  color: #182345 !important;
}

.child-dashboard-shell .mood-gentle-tag {
  border: 1px solid rgba(34,197,94,0.16) !important;
}

.child-dashboard-shell .child-spotlight-card {
  padding: 26px 24px 24px !important;
  border-radius: 36px !important;
  background: linear-gradient(180deg, rgba(245,247,255,0.98) 0%, rgba(238,243,255,0.96) 100%) !important;
  border: 1px solid rgba(212, 217, 244, 0.98) !important;
  box-shadow: 0 20px 44px rgba(160, 173, 220, 0.18), inset 0 1px 0 rgba(255,255,255,0.94) !important;
}

.child-dashboard-shell .child-spotlight-card::before {
  width: 220px !important;
  height: 220px !important;
  right: -84px !important;
  top: -94px !important;
  background: radial-gradient(circle, rgba(213, 220, 255, 0.42), transparent 72%) !important;
}

.child-dashboard-shell .child-spotlight-card::after {
  width: 180px !important;
  height: 180px !important;
  left: -70px !important;
  bottom: -80px !important;
  background: radial-gradient(circle, rgba(196, 230, 255, 0.36), transparent 72%) !important;
}

.child-dashboard-shell .child-spotlight-top,
.child-dashboard-shell .child-spotlight-copy-col,
.child-dashboard-shell .child-spotlight-chip-row {
  z-index: 1 !important;
}

.child-dashboard-shell .child-spotlight-top {
  align-items: flex-start !important;
  gap: 18px !important;
}

.child-dashboard-shell .child-spotlight-kicker {
  color: #697594 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.1em !important;
}

.child-dashboard-shell .child-spotlight-value {
  color: #1d2a63 !important;
  font-family: var(--font-family-display) !important;
  font-size: clamp(3.15rem, 2.7rem + 1.8vw, 4.2rem) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.06em !important;
}

.child-dashboard-shell .child-spotlight-sub {
  color: #6a7594 !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
}

.child-dashboard-shell .child-spotlight-progress-orb {
  width: 128px !important;
  height: 128px !important;
  padding: 0 !important;
  border-radius: 38px !important;
  background: linear-gradient(180deg, #ffffff 0%, #eff3fb 100%) !important;
  border: 1.5px solid rgba(189, 202, 229, 0.9) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.94), 0 14px 26px rgba(133, 149, 196, 0.12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.child-dashboard-shell .child-spotlight-progress-orb strong {
  font-size: 3rem !important;
  line-height: 1 !important;
  color: #3a4197 !important;
}

.child-dashboard-shell .child-spotlight-progress-orb span {
  font-size: 0.96rem !important;
  font-weight: 800 !important;
  color: #67728f !important;
}

.child-dashboard-shell .child-spotlight-track {
  height: 18px !important;
  border-radius: 999px !important;
  background: rgba(216, 223, 241, 0.9) !important;
  box-shadow: inset 0 2px 4px rgba(129, 146, 188, 0.14) !important;
  border: none !important;
}

.child-dashboard-shell .child-spotlight-track-fill {
  background: linear-gradient(90deg, #e5e8f5 0%, #cfd7ee 100%) !important;
  box-shadow: none !important;
}

.child-dashboard-shell .child-spotlight-copy {
  margin-top: 18px !important;
  color: #66728f !important;
  font-size: 1rem !important;
  line-height: 1.48 !important;
  font-weight: 700 !important;
}

.child-dashboard-shell .child-spotlight-chip-row {
  gap: 12px !important;
  margin-top: 18px !important;
}

.child-dashboard-shell .child-spotlight-chip {
  min-height: 48px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(243,244,255,0.96), rgba(237,240,255,0.96)) !important;
  border: 1px solid rgba(205, 211, 244, 0.92) !important;
  color: #495571 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.94) !important;
}

.child-dashboard-shell .child-spotlight-chip.is-primary {
  background: linear-gradient(90deg, rgba(241,242,255,0.98) 0%, rgba(235,245,255,0.98) 58%, rgba(232,251,238,0.98) 100%) !important;
  border-color: rgba(198, 205, 240, 0.94) !important;
  color: #3a4298 !important;
}

.child-dashboard-shell .chores-section {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.child-dashboard-shell .chores-section-header {
  align-items: end !important;
  margin-bottom: 6px !important;
  padding: 0 2px !important;
}

.child-dashboard-shell .chores-section-kicker {
  color: #7984a0 !important;
}

.child-dashboard-shell .chores-section-title {
  color: #1a2751 !important;
  font-size: 1.22rem !important;
}

.child-dashboard-shell .today-chore-group {
  padding: 16px !important;
  border-radius: 30px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,250,255,0.96)) !important;
  border: 1px solid var(--chorbie-surface-border) !important;
  box-shadow: var(--chorbie-card-shadow) !important;
}

.child-dashboard-shell .today-chore-group-list {
  display: grid !important;
  gap: 10px !important;
}

.child-dashboard-shell .today-chore-group-title {
  color: #1a2751 !important;
}

.child-dashboard-shell .today-chore-group-subtitle {
  color: #74809a !important;
}

.child-dashboard-shell .today-chore-group-count {
  min-width: 34px !important;
  min-height: 34px !important;
  background: linear-gradient(180deg, rgba(244,246,255,0.98), rgba(237,240,255,0.98)) !important;
  border: 1px solid rgba(206, 211, 244, 0.92) !important;
  color: #4c57a3 !important;
}

.child-dashboard-shell .chore-card {
  padding: 14px !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  border: 1px solid rgba(221, 226, 246, 0.98) !important;
  box-shadow: 0 10px 22px rgba(145, 160, 208, 0.11) !important;
  transform: none !important;
}

.child-dashboard-shell .chore-card:hover {
  transform: none !important;
  box-shadow: 0 10px 22px rgba(145, 160, 208, 0.11) !important;
}

.child-dashboard-shell .chore-card.status-todo,
.child-dashboard-shell .chore-card.status-pending,
.child-dashboard-shell .chore-card.status-approved,
.child-dashboard-shell .chore-card.status-rejected {
  border-color: rgba(221, 226, 246, 0.98) !important;
}

.child-dashboard-shell .chore-card.chore-card-bonus {
  background: linear-gradient(180deg, rgba(255,254,248,0.98), rgba(253,248,235,0.97)) !important;
  border-color: rgba(244, 214, 133, 0.66) !important;
  box-shadow: 0 12px 26px rgba(230, 190, 78, 0.14) !important;
}

.child-dashboard-shell .chore-emoji-circle {
  width: 46px !important;
  height: 46px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #f0eeff, #eef5ff) !important;
  color: #5951de !important;
  box-shadow: none !important;
}

.child-dashboard-shell .chore-card.chore-card-bonus .chore-emoji-circle {
  background: linear-gradient(135deg, #fff6d9, #fff0bd) !important;
}

.child-dashboard-shell .chore-frequency-label {
  display: inline-flex !important;
  width: auto !important;
  padding: 0 !important;
  margin-bottom: 4px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: #7a86a2 !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
}

.child-dashboard-shell .chore-title {
  color: #1a2751 !important;
}

.child-dashboard-shell .chore-meta {
  color: #68738e !important;
}

.child-dashboard-shell .chore-reward-money {
  color: #6f7893 !important;
}

.child-dashboard-shell .chore-reward-xp {
  color: #4c57a3 !important;
}

.child-dashboard-shell .done-btn {
  height: 48px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #18bf73 0%, #22c55e 100%) !important;
  border: none !important;
  box-shadow: 0 12px 24px rgba(34, 197, 94, 0.18) !important;
}

.child-dashboard-shell .status-chip-pending,
.child-dashboard-shell .status-chip-approved,
.child-dashboard-shell .status-chip-rejected {
  border-radius: 999px !important;
}

@media (max-width: 640px) {
  .header-brand {
    gap: 12px !important;
    max-width: calc(100% - 132px) !important;
  }

  .header-brand-mark {
    width: 58px !important;
    height: 58px !important;
  }

  .header-brand-wordmark-image {
    width: min(100%, 196px) !important;
  }

  .header-brand-wordmark {
    font-size: 2.16rem !important;
  }

  .header-brand-tagline {
    font-size: 0.72rem !important;
  }

  .app-header .btn-ghost {
    min-width: 104px !important;
    height: 52px !important;
    padding: 0 14px !important;
    font-size: 0.9rem !important;
  }

  .child-dashboard-shell .child-hero {
    padding: 24px 18px 22px !important;
    border-radius: 36px !important;
  }

  .child-dashboard-shell .hero-pills {
    gap: 10px !important;
  }

  .child-dashboard-shell .hero-pill {
    min-height: 58px !important;
    padding: 0 8px !important;
    font-size: 0.88rem !important;
  }

  .child-dashboard-shell .child-hero-body {
    grid-template-columns: minmax(0, 1fr) 132px !important;
    gap: 14px !important;
  }

  .child-dashboard-shell .child-hero-name {
    font-size: clamp(2.7rem, 2.3rem + 1.9vw, 3.45rem) !important;
  }

  .child-dashboard-shell .child-hero-level {
    max-width: 22ch !important;
    font-size: 0.96rem !important;
  }

  .child-dashboard-shell .child-hero-buddy-col {
    width: 132px !important;
    height: 132px !important;
    padding: 14px !important;
    border-radius: 30px !important;
  }

  .child-dashboard-shell #child-tab-nav {
    padding: 12px 10px !important;
    border-radius: 30px !important;
  }

  .child-dashboard-shell .child-tabs-indicator {
    top: 10px !important;
    left: 10px !important;
    bottom: 10px !important;
  }

  .child-dashboard-shell #child-tab-nav .tab-btn {
    min-height: 82px !important;
    gap: 6px !important;
  }

  .child-dashboard-shell #child-tab-nav .tab-btn .tab-icon {
    font-size: 1.48rem !important;
  }

  .child-dashboard-shell #child-tab-nav .tab-btn .tab-label {
    font-size: 0.7rem !important;
  }

  .child-dashboard-shell .mood-done-row {
    min-height: 82px !important;
    padding: 16px 18px !important;
  }

  .child-dashboard-shell .child-spotlight-card {
    padding: 22px 18px 20px !important;
    border-radius: 30px !important;
  }

  .child-dashboard-shell .child-spotlight-progress-orb {
    width: 112px !important;
    height: 112px !important;
    border-radius: 32px !important;
  }

  .child-dashboard-shell .child-spotlight-progress-orb strong {
    font-size: 2.4rem !important;
  }

  .child-dashboard-shell .child-spotlight-chip {
    min-height: 44px !important;
    padding: 0 14px !important;
  }
}

/* Final sprite-sheet fidelity fixes */
.header-brand {
  gap: 10px !important;
  max-width: calc(100% - 164px) !important;
}

.header-brand-mark {
  width: 68px !important;
  height: 68px !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 20px rgba(99, 112, 181, 0.1) !important;
}

.header-brand-wordmark-image {
  width: min(100%, 204px) !important;
  transform: translateY(0) !important;
}

.child-dashboard-shell .payout-balance-card {
  position: relative !important;
  overflow: hidden !important;
  padding: 22px 18px !important;
  border-radius: 32px !important;
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,0.22) 0%, transparent 34%),
    linear-gradient(135deg, #20c96c 0%, #28c975 44%, #35d3b4 100%) !important;
  border: 1px solid rgba(166, 242, 196, 0.68) !important;
  box-shadow:
    0 18px 38px rgba(37, 194, 117, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

.child-dashboard-shell .payout-balance-card::after {
  content: "" !important;
  position: absolute !important;
  right: 18px !important;
  top: 16px !important;
  width: 74px !important;
  height: 62px !important;
  background: url("./img/cash-stack.png") center/contain no-repeat !important;
  opacity: 0.94 !important;
  pointer-events: none !important;
}

.child-dashboard-shell .payout-balance-card,
.child-dashboard-shell .payout-balance-card * {
  color: #ffffff !important;
}

.child-dashboard-shell .payout-balance-card .btn-success {
  background: #ffffff !important;
  color: #1fb868 !important;
  box-shadow: 0 12px 24px rgba(17, 133, 70, 0.16) !important;
}

.child-dashboard-shell .payout-balance-card #request-payout-btn {
  border-radius: 999px !important;
  font-weight: 900 !important;
}

@media (max-width: 640px) {
  .header-brand {
    gap: 8px !important;
    max-width: calc(100% - 148px) !important;
  }

  .header-brand-mark {
    width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
  }

  .header-brand-wordmark-image {
    width: min(100%, 172px) !important;
  }

  .child-dashboard-shell .payout-balance-card::after {
    right: 14px !important;
    top: 14px !important;
    width: 64px !important;
    height: 54px !important;
  }
}

/* Final Chorbie child-shell cleanup:
   remove the leftover stacked overrides, use the correct mascot tile,
   and bring header/nav/cards back toward the supplied mobile UI plan. */
.app-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-content: stretch !important;
  column-gap: 12px !important;
  min-height: 92px !important;
  padding: calc(16px + env(safe-area-inset-top)) 16px 12px !important;
  background: rgba(255,255,255,0.99) !important;
  border-bottom: 1px solid rgba(224, 228, 246, 0.96) !important;
  box-shadow: 0 1px 0 rgba(228, 232, 248, 0.9), 0 12px 28px rgba(104, 117, 181, 0.06) !important;
}

.header-brand {
  width: 100% !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 12px !important;
  max-width: none !important;
}

.header-brand-mark {
  width: 56px !important;
  height: 56px !important;
  padding: 4px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(226, 232, 244, 0.96) !important;
  background: #ffffff !important;
  object-fit: contain !important;
  box-shadow: 0 10px 22px rgba(136, 149, 199, 0.14) !important;
  flex: 0 0 auto !important;
}

.header-brand-wordmark-image {
  display: block !important;
  width: min(100%, 172px) !important;
  height: auto !important;
  min-width: 0 !important;
  object-fit: contain !important;
}

.app-header .header-actions {
  position: static !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.app-header .btn-ghost {
  min-width: 94px !important;
  height: 46px !important;
  padding: 0 18px !important;
  border-radius: 24px !important;
  border: 2px solid rgba(214, 212, 250, 0.95) !important;
  font-size: 0.9rem !important;
  box-shadow: none !important;
}

.child-dashboard-shell {
  padding-top: 12px !important;
}

.child-dashboard-shell .child-hero {
  padding: 26px 22px 22px !important;
  border-radius: 38px !important;
  box-shadow: 0 20px 40px rgba(86, 100, 176, 0.2) !important;
  animation: none !important;
}

.child-dashboard-shell .hero-pills {
  gap: 12px !important;
}

.child-dashboard-shell .hero-pill {
  min-height: 60px !important;
  padding: 0 10px !important;
  border-radius: 22px !important;
  font-size: 0.88rem !important;
}

.child-dashboard-shell .child-hero-body {
  grid-template-columns: minmax(0, 1fr) 126px !important;
  gap: 16px !important;
  align-items: center !important;
}

.child-dashboard-shell .child-hero-greeting {
  font-size: 0.8rem !important;
  letter-spacing: 0.12em !important;
}

.child-dashboard-shell .child-hero-name {
  font-size: clamp(3rem, 2.7rem + 1.6vw, 3.65rem) !important;
  line-height: 0.92 !important;
}

.child-dashboard-shell .child-hero-level {
  display: grid !important;
  gap: 2px !important;
  max-width: 19ch !important;
  font-size: 0.98rem !important;
  line-height: 1.16 !important;
}

.child-dashboard-shell .child-hero-rank {
  font-weight: 800 !important;
  color: rgba(255, 255, 255, 0.94) !important;
}

.child-dashboard-shell .xp-bar-container {
  height: 14px !important;
  border-radius: 999px !important;
}

.child-dashboard-shell .child-hero-buddy-col {
  width: 126px !important;
  height: 126px !important;
  padding: 14px !important;
  border-radius: 30px !important;
  background: linear-gradient(180deg, #f8fbff 0%, #e9eff7 100%) !important;
  border: 1px solid rgba(255,255,255,0.74) !important;
  box-shadow: 0 16px 32px rgba(44, 57, 114, 0.16), inset 0 1px 0 rgba(255,255,255,0.94) !important;
}

.child-dashboard-shell .hero-buddy-img {
  object-position: center center !important;
}

.child-dashboard-shell #child-tab-nav {
  overflow: hidden !important;
  margin: 16px 0 12px !important;
  padding: 10px !important;
  gap: 6px !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,0.94) !important;
  box-shadow: 0 16px 30px rgba(139, 154, 203, 0.14) !important;
}

.child-dashboard-shell .child-tabs-indicator {
  top: 10px !important;
  left: 10px !important;
  bottom: 10px !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #5b54f0 0%, #5a5ef0 62%, #33c59b 100%) !important;
  box-shadow: 0 14px 26px rgba(91, 84, 240, 0.2) !important;
}

.child-dashboard-shell #child-tab-nav .tab-btn,
.child-dashboard-shell #child-tab-nav .tab-btn.active {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 74px !important;
  padding: 8px 4px !important;
  gap: 6px !important;
  color: #77809b !important;
  transform: none !important;
}

.child-dashboard-shell #child-tab-nav .tab-btn.active {
  color: #151f47 !important;
}

.child-dashboard-shell #child-tab-nav .tab-btn .tab-icon {
  width: 24px !important;
  height: 24px !important;
  font-size: 1.35rem !important;
}

.child-dashboard-shell #child-tab-nav .tab-btn .tab-icon svg {
  width: 24px !important;
  height: 24px !important;
}

.child-dashboard-shell #child-tab-nav .tab-btn .tab-label {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  text-align: center !important;
}

.child-dashboard-shell .mood-checkin-card,
.child-dashboard-shell .mood-done-row,
.child-dashboard-shell .child-spotlight-card,
.child-dashboard-shell .today-chore-group,
.child-dashboard-shell .calm-buddy-intro,
.child-dashboard-shell .calm-breathing-card,
.child-dashboard-shell .calm-grounding-card,
.child-dashboard-shell .calm-affirmations-card,
.child-dashboard-shell .calm-sounds-card,
.child-dashboard-shell .profile-card {
  border-radius: 32px !important;
}

.child-dashboard-shell .mood-checkin-card {
  padding: 24px 20px !important;
}

.child-dashboard-shell .mood-checkin-title {
  font-size: 1.18rem !important;
  margin-bottom: 16px !important;
}

.child-dashboard-shell .mood-options {
  gap: 12px !important;
}

.child-dashboard-shell .mood-btn {
  min-height: 118px !important;
  padding: 16px 8px !important;
  border-radius: 24px !important;
}

.child-dashboard-shell .mood-label {
  font-size: 0.72rem !important;
  line-height: 1.14 !important;
}

.child-dashboard-shell .mood-done-row {
  min-height: 88px !important;
}

.child-dashboard-shell .child-spotlight-card {
  padding: 28px 22px 22px !important;
}

.child-dashboard-shell .child-spotlight-top {
  align-items: flex-start !important;
  gap: 18px !important;
}

.child-dashboard-shell .child-spotlight-value {
  font-size: clamp(3rem, 2.65rem + 2vw, 4rem) !important;
}

.child-dashboard-shell .child-spotlight-progress-orb {
  width: 124px !important;
  height: 124px !important;
  border-radius: 36px !important;
}

.child-dashboard-shell .child-spotlight-track-fill {
  background: linear-gradient(90deg, #5853f0 0%, #7267f4 55%, #59cb93 100%) !important;
}

.child-dashboard-shell .child-spotlight-copy {
  margin-top: 16px !important;
  font-size: 0.98rem !important;
}

.child-dashboard-shell .child-spotlight-chip-row {
  margin-top: 16px !important;
}

.child-dashboard-shell .chores-section-header {
  align-items: flex-end !important;
  margin-bottom: 10px !important;
}

.child-dashboard-shell .pick-for-me-btn {
  min-width: 0 !important;
  width: min(100%, 280px) !important;
  height: 64px !important;
  border-radius: 24px !important;
  font-size: 0.94rem !important;
}

.child-dashboard-shell .today-chore-group {
  padding: 26px 20px 20px !important;
  gap: 18px !important;
}

.child-dashboard-shell .today-chore-group-count {
  min-width: 56px !important;
  min-height: 56px !important;
  border-radius: 20px !important;
}

.child-dashboard-shell .today-chore-group-list {
  gap: 12px !important;
}

.child-dashboard-shell .chore-card {
  padding: 18px !important;
  border-radius: 26px !important;
  animation: none !important;
}

.child-dashboard-shell .chore-card-inner {
  grid-template-columns: 72px minmax(0, 1fr) !important;
  gap: 16px !important;
}

.child-dashboard-shell .chore-emoji-circle {
  width: 72px !important;
  height: 72px !important;
  border-radius: 20px !important;
  font-size: 2.35rem !important;
}

.child-dashboard-shell .chore-frequency-label {
  margin-bottom: 6px !important;
  font-size: 0.78rem !important;
}

.child-dashboard-shell .chore-title {
  font-size: clamp(1.18rem, 1.08rem + 0.7vw, 1.52rem) !important;
  line-height: 1.1 !important;
}

.child-dashboard-shell .chore-meta {
  gap: 8px 12px !important;
  margin-top: 10px !important;
}

.child-dashboard-shell .chore-card-has-support .chore-info {
  padding-right: 70px !important;
}

.child-dashboard-shell .support-plan-btn {
  top: 18px !important;
  right: 18px !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 18px !important;
}

.child-dashboard-shell .chore-action-row {
  gap: 12px !important;
  margin-top: 14px !important;
}

.child-dashboard-shell .done-btn,
.child-dashboard-shell .breakdown-btn,
.child-dashboard-shell .timer-start-btn {
  min-height: 58px !important;
  border-radius: 20px !important;
  font-size: 0.95rem !important;
}

.child-dashboard-shell .done-btn {
  animation: none !important;
}

.child-dashboard-shell .card:hover,
.child-dashboard-shell .chore-card:hover,
.child-dashboard-shell .mood-btn:hover,
.child-dashboard-shell #child-tab-nav .tab-btn:hover {
  transform: none !important;
}

.buddy-tab-greeting {
  padding: 18px 18px 16px !important;
  border-radius: 26px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,247,255,0.96)) !important;
  border: 1px solid rgba(221, 226, 244, 0.96) !important;
  box-shadow: 0 14px 28px rgba(146, 160, 206, 0.12) !important;
}

.buddy-tab-img {
  width: 56px !important;
  height: 56px !important;
}

.buddy-tab-msg {
  font-size: 0.96rem !important;
}

.calm-corner {
  padding-bottom: 12px !important;
}

.calm-buddy-intro {
  gap: 14px !important;
  padding: 30px 20px 24px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(244,248,255,0.96) 100%) !important;
  border: 1px solid rgba(223, 229, 246, 0.94) !important;
  box-shadow: 0 18px 36px rgba(146, 161, 207, 0.14) !important;
}

.calm-buddy-img {
  width: 136px !important;
  height: 136px !important;
  animation: none !important;
}

.calm-intro-msg {
  max-width: 24ch !important;
  font-size: 1rem !important;
  line-height: 1.35 !important;
}

.calm-breathing-card,
.calm-grounding-card,
.calm-affirmations-card,
.calm-sounds-card {
  padding: 24px 20px !important;
}

.calm-breath-container {
  height: 196px !important;
}

.calm-breath-circle {
  width: 160px !important;
  height: 160px !important;
  background: linear-gradient(180deg, rgba(248, 250, 255, 0.98), rgba(237, 242, 255, 0.96)) !important;
  border: 4px solid rgba(91, 197, 144, 0.2) !important;
}

.calm-breath-circle.inhale {
  width: 204px !important;
  height: 204px !important;
  border-color: rgba(91, 197, 144, 0.36) !important;
  box-shadow: 0 0 0 12px rgba(91, 197, 144, 0.08) !important;
}

.calm-breath-circle.exhale {
  width: 132px !important;
  height: 132px !important;
}

.calm-breath-buddy {
  display: none !important;
}

.buddy-inline {
  left: calc(16px + var(--safe-left)) !important;
  right: calc(16px + var(--safe-right)) !important;
}

.buddy-inline .buddy-panel {
  max-width: 520px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(224, 229, 245, 0.96) !important;
  background: rgba(255,255,255,0.98) !important;
  box-shadow: 0 18px 36px rgba(142, 156, 203, 0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.buddy-panel {
  gap: 16px !important;
  padding: 16px !important;
}

.buddy-panel-celebrate {
  padding: 18px 20px !important;
}

.buddy-char {
  width: 92px !important;
  height: 92px !important;
}

.buddy-char-sm,
.buddy-trio {
  display: none !important;
}

.buddy-bubble {
  padding: 16px 18px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(223, 228, 246, 0.94) !important;
  background: linear-gradient(180deg, rgba(252,252,255,0.98), rgba(247,243,255,0.98)) !important;
}

.buddy-name {
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
}

.buddy-msg,
.buddy-celebrate-msg {
  font-size: 1rem !important;
  line-height: 1.28 !important;
}

.landing-screen .landing-character-stage {
  justify-content: center !important;
}

@media (max-width: 640px) {
  .app-header {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .header-brand {
    gap: 10px !important;
  }

  .header-brand-mark {
    width: 52px !important;
    height: 52px !important;
    border-radius: 18px !important;
    padding: 4px !important;
  }

  .header-brand-wordmark-image {
    width: min(100%, 152px) !important;
  }

  .app-header .btn-ghost {
    min-width: 88px !important;
    height: 44px !important;
    padding: 0 15px !important;
    font-size: 0.86rem !important;
  }

  .child-dashboard-shell .child-hero {
    padding: 24px 18px 20px !important;
  }

  .child-dashboard-shell .child-hero-body {
    grid-template-columns: minmax(0, 1fr) 118px !important;
    gap: 14px !important;
  }

  .child-dashboard-shell .child-hero-buddy-col {
    width: 118px !important;
    height: 118px !important;
    padding: 12px !important;
  }

  .child-dashboard-shell #child-tab-nav .tab-btn,
  .child-dashboard-shell #child-tab-nav .tab-btn.active {
    min-height: 70px !important;
    padding: 8px 2px !important;
  }

  .child-dashboard-shell #child-tab-nav .tab-btn .tab-label {
    font-size: 0.64rem !important;
  }

  .child-dashboard-shell .mood-btn {
    min-height: 108px !important;
  }

  .child-dashboard-shell .child-spotlight-progress-orb {
    width: 112px !important;
    height: 112px !important;
  }

  .child-dashboard-shell .today-chore-group {
    padding: 22px 18px 18px !important;
  }

  .child-dashboard-shell .chore-card {
    padding: 16px !important;
  }

  .child-dashboard-shell .chore-card-inner {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .child-dashboard-shell .chore-emoji-circle {
    width: 64px !important;
    height: 64px !important;
    border-radius: 18px !important;
    font-size: 2rem !important;
  }

  .child-dashboard-shell .support-plan-btn {
    width: 48px !important;
    height: 48px !important;
    font-size: 1.35rem !important;
  }

  .child-dashboard-shell .pick-for-me-btn {
    width: 100% !important;
  }

  .buddy-char {
    width: 80px !important;
    height: 80px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Chorbie UI Fidelity Pass (April 2026)
   Source assets: provided sprite sheet export + updated asset map
   ═══════════════════════════════════════════════════════════════════ */

.ui-asset-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  object-fit: contain;
  vertical-align: -0.12em;
}

.app-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 70 !important;
  min-height: 70px !important;
  padding: max(0px, calc(env(safe-area-inset-top) - 1px)) 16px 8px !important;
  box-shadow: 0 1px 0 rgba(224, 230, 248, 0.92), 0 10px 24px rgba(112, 123, 182, 0.06) !important;
}

.child-shell-active .app-header {
  min-height: 66px !important;
  padding: max(0px, calc(env(safe-area-inset-top) - 6px)) 16px 9px !important;
  box-shadow: 0 10px 24px rgba(112, 123, 182, 0.08) !important;
}

.header-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  gap: 0 !important;
  min-width: 0 !important;
}

.header-brand-logo-image {
  display: block !important;
  width: min(100%, 220px) !important;
  height: auto !important;
  object-fit: contain !important;
}

.header-brand-mark {
  width: 58px !important;
  height: 58px !important;
  padding: 0 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(223, 228, 244, 0.96) !important;
  background: #ffffff !important;
  box-shadow: 0 8px 18px rgba(121, 138, 196, 0.1) !important;
}

.header-brand-wordmark-image {
  display: block !important;
  width: min(100%, 194px) !important;
}

.app-header .header-actions:empty {
  display: none !important;
}

.child-shell-active .header-actions {
  display: none !important;
}

.app-header .btn-ghost {
  min-width: 96px !important;
  height: 46px !important;
  border-radius: 24px !important;
  font-size: 0.9rem !important;
}

.child-dashboard-shell.page-content {
  padding-top: 10px !important;
}

.child-dashboard-shell {
  padding-top: 0 !important;
  padding-bottom: 166px !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.child-dashboard-shell::before,
.child-dashboard-shell::after {
  content: none !important;
  display: none !important;
  background: none !important;
  filter: none !important;
  opacity: 0 !important;
}

.child-dashboard-shell .child-hero {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  border: none !important;
  overflow: hidden !important;
  box-shadow: 0 18px 34px rgba(86, 100, 176, 0.18) !important;
}

#child-nav-portal {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(4px + env(safe-area-inset-bottom)) !important;
  padding: 0 16px !important;
  z-index: 85 !important;
  pointer-events: none !important;
}

.child-nav-mount {
  width: min(100%, 560px) !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.child-nav-mount::before,
.child-nav-mount::after {
  display: none !important;
}

.child-dashboard-shell #child-tab-nav {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  z-index: auto !important;
  margin: 0 !important;
  padding: 8px 7px !important;
  gap: 8px !important;
  border-radius: 30px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(220, 226, 244, 0.98) !important;
  box-shadow: 0 18px 40px rgba(141, 156, 204, 0.2) !important;
  align-items: stretch !important;
  pointer-events: auto !important;
}

.child-dashboard-shell .child-tabs-indicator {
  display: none !important;
}

.child-dashboard-shell #child-tab-nav .tab-btn,
.child-dashboard-shell #child-tab-nav .tab-btn.active {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 72px !important;
  padding: 10px 4px !important;
  gap: 4px !important;
  border-radius: 24px !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  place-items: center !important;
  align-content: center !important;
  color: #7983a4 !important;
}

.child-dashboard-shell #child-tab-nav .tab-btn.active {
  background: linear-gradient(135deg, #5b54f0 0%, #605ef0 60%, #43c59b 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 30px rgba(91, 84, 240, 0.24) !important;
}

.child-dashboard-shell #child-tab-nav .tab-btn.active .tab-label,
.child-dashboard-shell #child-tab-nav .tab-btn.active .tab-icon,
.child-dashboard-shell #child-tab-nav .tab-btn.active .tab-icon svg {
  color: #ffffff !important;
  stroke: currentColor !important;
}

.child-dashboard-shell #child-tab-nav .tab-btn.active .tab-icon svg * {
  stroke: currentColor !important;
}

.child-dashboard-shell #child-tab-nav .tab-btn .tab-icon {
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.child-dashboard-shell #child-tab-nav .tab-btn .tab-icon svg {
  width: 26px !important;
  height: 26px !important;
}

.child-dashboard-shell #child-tab-nav .tab-btn .tab-icon .tab-icon-asset {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
}

.child-dashboard-shell #child-tab-nav .tab-btn.active .tab-icon .tab-icon-asset {
  filter: brightness(0) invert(1) !important;
}

.child-dashboard-shell #child-tab-nav .tab-btn .tab-label {
  font-size: 0.66rem !important;
  line-height: 1.05 !important;
}

.buddy-inline {
  bottom: calc(102px + var(--safe-bottom)) !important;
}

#app.child-app-shell {
  overflow-x: clip !important;
}

.child-dashboard-shell .child-hero-buddy-col {
  padding: 8px !important;
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 244, 0.98) !important;
  box-shadow: 0 14px 28px rgba(44, 57, 114, 0.12), inset 0 1px 0 rgba(255,255,255,0.98) !important;
}

.child-dashboard-shell .hero-buddy-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.child-dashboard-shell .buddy-tab-img {
  width: 92px !important;
  height: 92px !important;
  flex: 0 0 auto !important;
  object-fit: contain !important;
}

.child-dashboard-shell .mood-checkin-card {
  padding: 24px 18px 20px !important;
  overflow: hidden !important;
}

.child-dashboard-shell .mood-checkin-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-align: center !important;
  font-size: 1.04rem !important;
  line-height: 1.22 !important;
}

.child-dashboard-shell .mood-checkin-cloud {
  font-size: 1.18rem;
  line-height: 1;
}

.child-dashboard-shell .mood-checkin-title-icon {
  width: 24px;
  height: 24px;
}

.child-dashboard-shell .mood-options {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.child-dashboard-shell .mood-btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 110px !important;
  padding: 12px 4px 10px !important;
  gap: 8px !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  place-items: center !important;
  align-content: center !important;
  overflow: hidden !important;
  border-radius: 28px !important;
}

.child-dashboard-shell .mood-emoji {
  font-size: 1.95rem !important;
  line-height: 1 !important;
}

.child-dashboard-shell .mood-label {
  max-width: none !important;
  margin: 0 auto !important;
  font-size: clamp(0.5rem, 1.7vw, 0.62rem) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.05em !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
  text-wrap: balance;
}

.child-dashboard-shell .child-spotlight-card {
  padding: 26px 20px 22px !important;
}

.child-dashboard-shell .child-spotlight-progress-orb {
  width: 124px !important;
  height: 150px !important;
  padding: 16px 12px 14px !important;
  border-radius: 32px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(243,247,255,0.98) 100%) !important;
  border: 1.5px solid rgba(202, 210, 239, 0.92) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.94), 0 14px 28px rgba(18, 23, 48, 0.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

.child-dashboard-shell .child-spotlight-progress-orb strong {
  font-size: 3.2rem !important;
  line-height: 0.9 !important;
  color: #4f47cf !important;
}

.child-dashboard-shell .child-spotlight-progress-orb span {
  margin-top: 0 !important;
  font-size: 0.94rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: #7380a7 !important;
}

.child-dashboard-shell .child-spotlight-track {
  height: 15px !important;
  margin-top: 16px !important;
  background: rgba(225, 231, 247, 0.92) !important;
  border: none !important;
}

.child-dashboard-shell .child-spotlight-track-fill {
  background: linear-gradient(90deg, #5954ef 0%, #6d65f3 42%, #63cb90 100%) !important;
  box-shadow: 0 0 16px rgba(88, 84, 239, 0.22) !important;
}

.child-dashboard-shell .child-spotlight-chip-row {
  gap: 10px !important;
}

.child-dashboard-shell .child-spotlight-chip {
  gap: 8px !important;
}

.child-dashboard-shell .child-spotlight-chip-icon {
  width: 18px;
  height: 18px;
}

.child-dashboard-shell .hero-pill-icon {
  width: 15px;
  height: 15px;
  object-fit: contain;
}

.child-dashboard-shell .chores-section {
  gap: 18px !important;
}

.child-dashboard-shell .chores-section-header {
  display: grid !important;
  gap: 10px !important;
  align-items: stretch !important;
  justify-items: end !important;
}

.child-dashboard-shell .chores-section-copy {
  margin-left: auto !important;
  display: grid !important;
  gap: 4px !important;
  text-align: right !important;
}

.child-dashboard-shell .chores-section-kicker {
  margin-bottom: 6px !important;
  font-size: 0.84rem !important;
}

.child-dashboard-shell .chores-section-title {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  font-size: 1.46rem !important;
}

.child-dashboard-shell .chores-section-title-icon {
  width: 20px;
  height: 20px;
}

.child-dashboard-shell .pick-for-me-btn {
  width: 100% !important;
  height: 64px !important;
  border-radius: 24px !important;
  font-size: 1.02rem !important;
}

.child-dashboard-shell .today-chore-group {
  padding: 24px 18px 18px !important;
}

.child-dashboard-shell .today-chore-group-header {
  align-items: flex-start !important;
}

.child-dashboard-shell .today-chore-group-title {
  font-size: 1.02rem !important;
}

.child-dashboard-shell .today-chore-group-subtitle {
  max-width: 22ch !important;
}

.child-dashboard-shell .today-chore-group-count {
  min-width: 64px !important;
  min-height: 64px !important;
  border-radius: 22px !important;
  font-size: 1.1rem !important;
}

.child-dashboard-shell .chore-card {
  padding: 18px !important;
  border-radius: 26px !important;
}

.child-dashboard-shell .chore-card-inner {
  grid-template-columns: 72px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

.child-dashboard-shell .chore-info {
  min-width: 0 !important;
}

.child-dashboard-shell .chore-card-has-support .chore-info {
  padding-right: 60px !important;
}

.child-dashboard-shell .support-plan-btn {
  top: 16px !important;
  right: 16px !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 14px !important;
  font-size: 1.18rem !important;
  background: #a6acbb !important;
  box-shadow: none !important;
}

.child-dashboard-shell .chore-title {
  padding-right: 6px !important;
}

.child-dashboard-shell .chore-meta {
  gap: 10px 12px !important;
}

.child-dashboard-shell .chore-reward {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.child-dashboard-shell .chore-reward-icon {
  width: 18px;
  height: 18px;
}

.child-dashboard-shell .chore-action-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.child-dashboard-shell .done-btn,
.child-dashboard-shell .breakdown-btn,
.child-dashboard-shell .timer-start-btn {
  min-height: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.child-dashboard-shell .payout-balance-card {
  margin-bottom: 16px !important;
  padding: 24px 20px 22px !important;
  text-align: center !important;
}

.child-dashboard-shell .payout-balance-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
}

.child-dashboard-shell .payout-balance-copy {
  min-width: 0 !important;
}

.child-dashboard-shell .payout-balance-kicker {
  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
}

.child-dashboard-shell .payout-balance-value {
  margin-top: 10px;
  font-size: clamp(3.3rem, 2.8rem + 2vw, 4.6rem);
  font-weight: 950;
  line-height: 0.92;
  color: #fff;
}

.child-dashboard-shell .payout-balance-art {
  width: 82px !important;
  height: 68px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.child-dashboard-shell .payout-balance-art-icon {
  width: 82px !important;
  height: 62px !important;
  object-fit: contain !important;
}

.child-dashboard-shell .payout-request-btn {
  width: 100% !important;
  min-height: 64px !important;
  margin-top: 18px !important;
  border-radius: 999px !important;
  border: none !important;
  background: #fff !important;
  color: #59c67a !important;
  box-shadow: 0 18px 34px rgba(58, 183, 116, 0.22) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  font-size: 1.06rem !important;
  font-weight: 900 !important;
}

.child-dashboard-shell .payout-request-btn span {
  color: inherit !important;
}

.child-dashboard-shell .payout-request-icon {
  width: 34px;
  height: 26px;
}

.child-dashboard-shell .payout-balance-note,
.child-dashboard-shell .payout-empty-copy {
  margin-top: 14px;
  font-size: 0.92rem;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
}

.child-dashboard-shell .payout-status-pill {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.24);
  font-size: 0.88rem;
  font-weight: 800;
  color: #fff;
}

.child-dashboard-shell .payout-amount-panel {
  margin-top: 18px;
  padding: 16px;
  border-radius: 24px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.24);
  text-align: left;
}

.child-dashboard-shell .payout-amount-title {
  font-size: 0.9rem;
  font-weight: 900;
  color: #fff;
}

.child-dashboard-shell .payout-amount-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.child-dashboard-shell .payout-amount-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 54px;
  margin-top: 12px;
  padding: 0 14px;
  border-radius: 18px;
  background: #fff;
  color: #172047;
  font-size: 1rem;
  font-weight: 900;
}

.child-dashboard-shell .payout-amount-input-row input {
  flex: 1 1 auto;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  color: inherit;
  min-width: 0;
}

.child-dashboard-shell .payout-amount-submit {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 12px;
}

.child-dashboard-shell .statement-entry-card {
  margin-bottom: 16px !important;
  padding: 18px !important;
}

.child-dashboard-shell .statement-entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.child-dashboard-shell .statement-entry-title,
.child-dashboard-shell .xp-shop-title,
.child-dashboard-shell .leaderboard-card-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.child-dashboard-shell .statement-entry-title {
  font-size: 0.98rem;
  font-weight: 900;
  color: var(--text);
}

.child-dashboard-shell .statement-entry-title-icon,
.child-dashboard-shell .xp-shop-title-icon,
.child-dashboard-shell .leaderboard-card-title-icon {
  width: 24px;
  height: 24px;
}

.child-dashboard-shell .statement-entry-copy {
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 700;
}

.child-dashboard-shell .xp-shop-balance-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 14px;
}

.child-dashboard-shell .xp-shop-balance-icon {
  width: 18px;
  height: 18px;
}

.child-dashboard-shell .xp-shop-redeem-icon {
  width: 18px;
  height: 18px;
}

.child-dashboard-shell .leaderboard-enhanced {
  border-radius: 30px !important;
  padding: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248,247,255,0.96)) !important;
}

.child-dashboard-shell .podium-wrap {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: end !important;
}

.child-dashboard-shell .podium-slot {
  padding: 12px 8px 10px !important;
  border-radius: 22px !important;
  background: #f5f7ff !important;
  border: 1px solid rgba(223, 229, 246, 0.96) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

.child-dashboard-shell .podium-first {
  background: linear-gradient(180deg, #ffe49a 0%, #ffd45b 100%) !important;
  border-color: rgba(242, 188, 66, 0.34) !important;
}

.child-dashboard-shell .podium-second {
  background: linear-gradient(180deg, #eef1f8 0%, #d9deeb 100%) !important;
}

.child-dashboard-shell .podium-third {
  background: linear-gradient(180deg, #f7d0aa 0%, #e7aa74 100%) !important;
  border-color: rgba(198, 131, 74, 0.28) !important;
}

.child-dashboard-shell .podium-name,
.child-dashboard-shell .podium-balance,
.child-dashboard-shell .podium-xp {
  color: #16224d !important;
}

.child-dashboard-shell .lb-row {
  margin-top: 8px !important;
  padding: 10px 12px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(223, 229, 246, 0.94) !important;
  background: rgba(245, 243, 255, 0.96) !important;
}

.child-dashboard-shell .lb-row:not(:last-child) {
  border-bottom: 1px solid rgba(223, 229, 246, 0.94) !important;
}

.child-dashboard-shell .lb-context-msg {
  margin-top: 12px !important;
  text-align: center !important;
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
  color: var(--muted) !important;
}

.child-dashboard-shell .profile-screen {
  display: grid;
  gap: 16px;
}

.child-dashboard-shell .profile-hero-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 16px !important;
  border-radius: 30px !important;
  background: linear-gradient(180deg, #4338ca 0%, #5a4bf0 100%) !important;
  color: #fff !important;
}

.child-dashboard-shell .profile-hero-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.18);
  overflow: hidden;
}

.child-dashboard-shell .profile-hero-icon {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.child-dashboard-shell .profile-hero-name {
  font-size: 1.4rem;
  font-weight: 900;
  color: #fff;
}

.child-dashboard-shell .profile-hero-sub {
  margin-top: 4px;
  font-size: 0.86rem;
  font-weight: 700;
  color: rgba(255,255,255,0.82);
}

.child-dashboard-shell .profile-hero-gear {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.18);
  opacity: 0.95;
}

.child-dashboard-shell .profile-card {
  padding: 16px !important;
}

.child-dashboard-shell .profile-row-stack {
  display: grid;
  gap: 10px;
}

.child-dashboard-shell .profile-nav-row {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  border-radius: 20px;
  border: 1px solid rgba(224, 230, 246, 0.98);
  background: rgba(255,255,255,0.96);
  color: var(--text);
  font: inherit;
  text-align: left;
}

.child-dashboard-shell .profile-nav-row.is-open {
  border-color: rgba(91,84,240,0.22);
  background: linear-gradient(180deg, rgba(247,246,255,0.98), rgba(255,255,255,0.98));
}

.child-dashboard-shell .profile-nav-row-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.child-dashboard-shell .profile-nav-row-copy {
  display: grid;
  gap: 2px;
}

.child-dashboard-shell .profile-nav-row-copy strong {
  font-size: 0.96rem;
  font-weight: 900;
  color: var(--text);
}

.child-dashboard-shell .profile-nav-row-copy small {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--muted);
}

.child-dashboard-shell .profile-nav-row-chevron {
  font-size: 1.2rem;
  color: #8a92b2;
  transform: rotate(0deg);
  transition: transform 180ms ease;
}

.child-dashboard-shell .profile-nav-row.is-open .profile-nav-row-chevron {
  transform: rotate(90deg);
}

.child-dashboard-shell .profile-panel {
  display: none;
  padding: 4px 2px 6px;
}

.child-dashboard-shell .profile-panel.is-open {
  display: block;
}

.child-dashboard-shell .profile-pref-list {
  display: grid;
  gap: 10px;
}

.child-dashboard-shell .profile-pref-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  border-radius: 18px;
  border: 1px solid rgba(224, 230, 246, 0.98);
  background: rgba(255,255,255,0.96);
  font: inherit;
  text-align: left;
}

.child-dashboard-shell .profile-pref-row.active {
  border-color: rgba(91,84,240,0.24);
  background: linear-gradient(180deg, rgba(247,246,255,0.98), rgba(255,255,255,0.98));
}

.child-dashboard-shell .profile-pref-row-copy {
  display: grid;
  gap: 2px;
}

.child-dashboard-shell .profile-pref-row-copy strong {
  font-size: 0.92rem;
  font-weight: 900;
  color: var(--text);
}

.child-dashboard-shell .profile-pref-row-copy small {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--muted);
}

.child-dashboard-shell .profile-pref-row-state {
  min-width: 48px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(91,84,240,0.1);
  color: #5b54f0;
  font-size: 0.78rem;
  font-weight: 900;
}

.child-dashboard-shell .profile-about-copy {
  padding: 8px 2px 2px;
  font-size: 0.86rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--muted);
}

.child-dashboard-shell .profile-logout-btn {
  width: 100%;
  margin-top: 14px;
  min-height: 54px;
  border-radius: 20px;
  border: none;
  background: transparent;
  color: #e64646;
  font: inherit;
  font-size: 0.96rem;
  font-weight: 900;
}

.child-dashboard-shell .settings-row.is-compact {
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(224, 230, 246, 0.98);
}

@media (max-width: 640px) {
  .app-header {
    padding-top: max(0px, calc(env(safe-area-inset-top) - 2px)) !important;
  }

  .header-brand {
    gap: 0 !important;
  }

  .header-brand-logo-image {
    width: min(100%, 200px) !important;
  }

  .app-header .btn-ghost {
    min-width: 88px !important;
    height: 42px !important;
    padding: 0 14px !important;
  }

  .child-dashboard-shell #child-tab-nav {
    width: 100% !important;
    padding: 8px 5px !important;
    gap: 5px !important;
  }

  .child-dashboard-shell #child-tab-nav .tab-btn,
  .child-dashboard-shell #child-tab-nav .tab-btn.active {
    min-height: 68px !important;
  }

  .child-dashboard-shell #child-tab-nav .tab-btn .tab-label {
    font-size: 0.6rem !important;
  }

  .buddy-inline {
    left: calc(14px + var(--safe-left)) !important;
    right: calc(14px + var(--safe-right)) !important;
  }

  .child-dashboard-shell .mood-label {
    font-size: 0.5rem !important;
  }

  .child-dashboard-shell .child-spotlight-progress-orb {
    width: 110px !important;
    height: 138px !important;
    padding: 14px 10px 12px !important;
  }

  .child-dashboard-shell .child-spotlight-progress-orb strong {
    font-size: 2.6rem !important;
  }

  .child-dashboard-shell .today-chore-group {
    padding: 22px 16px 16px !important;
  }

  .child-dashboard-shell .support-plan-btn {
    width: 36px !important;
    height: 36px !important;
  }
}

/* Chorbie final auth + parent + contrast pass */
.setup-screen.setup-screen-login {
  padding: 12px 0 18px !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.setup-screen.setup-screen-login::before {
  content: none !important;
  display: none !important;
}

.setup-screen .setup-hero.setup-hero-branded {
  display: grid !important;
  gap: 12px !important;
  justify-items: center !important;
  text-align: center !important;
  padding: 24px 20px 22px !important;
  border: none !important;
  background: linear-gradient(145deg, #3b34cf 0%, #514def 58%, #66c7a3 100%) !important;
  box-shadow: 0 24px 46px rgba(65, 73, 177, 0.2) !important;
}

.setup-hero-brand {
  display: grid;
  gap: 12px;
  justify-items: center;
}

.setup-hero-logo {
  width: min(100%, 238px);
  height: auto;
  display: block;
}

.setup-hero-buddy {
  width: 112px;
  height: 112px;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(33, 49, 109, 0.22));
}

.setup-hero-kicker {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.9);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.setup-hero-family {
  font-size: 0.8rem;
  font-weight: 800;
  color: rgba(255,255,255,0.84);
}

.pin-display {
  width: min(100%, 320px) !important;
  min-height: 72px !important;
  margin: 16px auto 0 !important;
  padding: 0 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  border-radius: 22px !important;
}

.pin-dot {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  border-radius: 999px !important;
  background: #d9e1f0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

.pin-dot.filled {
  background: linear-gradient(135deg, #5b54f0 0%, #6b63f2 55%, #49c39f 100%) !important;
  box-shadow: 0 0 0 5px rgba(91, 84, 240, 0.1), 0 6px 12px rgba(91, 84, 240, 0.18) !important;
}

.pin-keypad {
  width: min(100%, 320px) !important;
  max-width: none !important;
  gap: 10px !important;
  margin: 16px auto 0 !important;
}

.pin-key {
  min-height: 60px !important;
  border-radius: 18px !important;
  font-size: 1.35rem !important;
}

.setup-screen .pin-display {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.98), 0 10px 22px rgba(121, 138, 196, 0.08) !important;
}

.app-header .header-actions {
  gap: 8px !important;
}

.setup-screen #login-area.setup-card,
.setup-screen #login-area {
  max-width: 540px !important;
  padding: 22px 18px !important;
  border-radius: 28px !important;
}

.login-section {
  display: grid;
  gap: 12px;
}

.login-section + .login-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(224, 231, 246, 0.98);
}

.login-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.login-section-kicker {
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6f7ba1;
}

.login-section-note {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}

.login-option-card {
  min-height: 122px !important;
  padding: 16px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
}

.login-option-art {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(248,250,255,0.98), rgba(239,244,255,0.96));
  border: 1px solid rgba(223, 229, 246, 0.96);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.96);
}

.login-option-art-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.login-option-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.child-select-grid {
  gap: 12px !important;
}

.child-select-btn {
  min-height: 120px !important;
  padding: 16px 10px !important;
  border-radius: 22px !important;
}

.child-sel-avatar {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(248,250,255,0.98), rgba(239,244,255,0.96));
  border: 1px solid rgba(223, 229, 246, 0.96);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.96);
}

.parent-dashboard-shell {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-bottom: 32px !important;
}

.parent-dashboard-shell::before,
.parent-dashboard-shell::after {
  content: none !important;
  display: none !important;
  background: none !important;
  filter: none !important;
  opacity: 0 !important;
}

.parent-dashboard-shell .parent-hero-banner {
  padding: 24px 22px !important;
  border-radius: 34px !important;
  border: none !important;
  background: linear-gradient(145deg, #3430c6 0%, #4c4ee8 58%, #61c6a1 100%) !important;
  box-shadow: 0 22px 42px rgba(70, 80, 173, 0.18) !important;
}

.parent-dashboard-shell .parent-hero-inner {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 14px !important;
}

.parent-dashboard-shell .parent-hero-icon {
  width: 72px !important;
  height: 72px !important;
  padding: 0 !important;
  border-radius: 22px !important;
  display: grid !important;
  place-items: center !important;
  background: #ffffff !important;
  border: 1px solid rgba(221, 229, 244, 0.98) !important;
  box-shadow: 0 14px 28px rgba(31, 45, 101, 0.16), inset 0 1px 0 rgba(255,255,255,0.98) !important;
  overflow: hidden !important;
}

.parent-dashboard-shell .parent-hero-mark {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.parent-dashboard-shell .parent-hero-name {
  font-size: clamp(1.8rem, 1.5rem + 1vw, 2.3rem) !important;
  line-height: 0.94 !important;
  color: #ffffff !important;
}

.parent-dashboard-shell .parent-hero-sub {
  margin-top: 6px !important;
  color: rgba(255,255,255,0.82) !important;
}

.parent-dashboard-shell .parent-hero-copy {
  margin-top: 12px !important;
  max-width: 34ch !important;
  color: rgba(255,255,255,0.92) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
}

.parent-dashboard-shell .parent-hero-badge {
  align-self: start !important;
  background: rgba(255,255,255,0.16) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

.parent-dashboard-shell .parent-summary-grid {
  gap: 10px !important;
  margin-top: 18px !important;
}

.parent-dashboard-shell .parent-summary-tile {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,247,255,0.97)) !important;
  border: 1px solid rgba(209, 217, 241, 0.94) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.96), 0 10px 20px rgba(27, 37, 84, 0.08) !important;
}

.parent-dashboard-shell .parent-summary-label {
  color: #7380a7 !important;
}

.parent-dashboard-shell .parent-summary-value {
  color: #17224a !important;
}

.parent-dashboard-shell #parent-tab-nav {
  margin: 16px 0 18px !important;
  padding: 8px 7px !important;
  gap: 8px !important;
  border-radius: 30px !important;
  background: rgba(255,255,255,0.98) !important;
  border: 1px solid rgba(220, 226, 244, 0.98) !important;
  box-shadow: 0 18px 40px rgba(141, 156, 204, 0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.parent-dashboard-shell .parent-tabs-indicator {
  display: none !important;
}

.parent-dashboard-shell .tab-btn,
.parent-dashboard-shell .tab-btn.active {
  min-height: 72px !important;
  padding: 10px 8px !important;
  gap: 4px !important;
  border-radius: 24px !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  place-items: center !important;
  align-content: center !important;
  background: transparent !important;
  color: #7983a4 !important;
}

.parent-dashboard-shell .tab-btn.active {
  background: linear-gradient(135deg, #5b54f0 0%, #605ef0 60%, #43c59b 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 30px rgba(91, 84, 240, 0.24) !important;
}

.parent-dashboard-shell .tab-btn.active .tab-label,
.parent-dashboard-shell .tab-btn.active .tab-icon,
.parent-dashboard-shell .tab-btn.active .tab-icon svg {
  color: #ffffff !important;
  stroke: currentColor !important;
}

.parent-dashboard-shell .tab-btn.active .tab-icon svg * {
  stroke: currentColor !important;
}

.parent-dashboard-shell .tab-btn .tab-icon {
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.parent-dashboard-shell .tab-btn .tab-icon svg {
  width: 24px !important;
  height: 24px !important;
}

.parent-dashboard-shell .tab-btn .tab-label {
  font-size: 0.66rem !important;
  line-height: 1.05 !important;
}

.parent-dashboard-shell .card,
.parent-dashboard-shell .parent-overview-callout,
.parent-dashboard-shell .parent-overview-card,
.parent-dashboard-shell .parent-section-card,
.parent-dashboard-shell .parent-tool-card,
.parent-dashboard-shell .parent-overview-kpi,
.parent-dashboard-shell .parent-section-stat,
.parent-dashboard-shell .parent-kid-row,
.parent-dashboard-shell .parent-activity-row {
  border-radius: 28px !important;
  border: 1px solid rgba(223, 229, 246, 0.98) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(246,249,255,0.96)) !important;
  box-shadow: 0 18px 36px rgba(140, 154, 199, 0.14), inset 0 1px 0 rgba(255,255,255,0.94) !important;
}

.parent-dashboard-shell .parent-overview-callout,
.parent-dashboard-shell .parent-overview-card,
.parent-dashboard-shell .parent-section-card,
.parent-dashboard-shell .parent-tool-card {
  padding: 22px 20px !important;
}

.parent-dashboard-shell .parent-overview-kpi,
.parent-dashboard-shell .parent-section-stat {
  padding: 16px !important;
}

.parent-dashboard-shell .parent-section-kicker,
.parent-dashboard-shell .parent-overview-badge,
.parent-dashboard-shell .parent-tool-copy,
.parent-dashboard-shell .parent-overview-copy,
.parent-dashboard-shell .parent-overview-kpi-label,
.parent-dashboard-shell .parent-overview-kpi-sub,
.parent-dashboard-shell .parent-section-stat-label,
.parent-dashboard-shell .parent-section-stat-sub,
.parent-dashboard-shell .parent-kid-main span,
.parent-dashboard-shell .parent-activity-main span,
.parent-dashboard-shell .parent-kid-meta {
  color: #7581a6 !important;
}

.parent-dashboard-shell .parent-overview-kpi-value,
.parent-dashboard-shell .parent-section-stat-value,
.parent-dashboard-shell .parent-kid-main strong,
.parent-dashboard-shell .parent-activity-main strong,
.parent-dashboard-shell .parent-kid-meta strong,
.parent-dashboard-shell .parent-activity-trailing,
.parent-dashboard-shell .card-title {
  color: #16224d !important;
}

.parent-dashboard-shell .parent-overview-kpi,
.parent-dashboard-shell .parent-section-stat,
.parent-dashboard-shell .parent-kid-row,
.parent-dashboard-shell .parent-activity-row {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.96) !important;
}

.child-dashboard-shell .payout-balance-note,
.child-dashboard-shell .payout-empty-copy,
.child-dashboard-shell .payout-status-pill {
  color: rgba(255,255,255,0.96) !important;
}

.child-dashboard-shell .payout-amount-panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(237, 249, 241, 0.18)) !important;
  border: 1px solid rgba(214, 243, 224, 0.34) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

.child-dashboard-shell .payout-amount-title {
  color: #f5fffa !important;
}

.child-dashboard-shell .payout-amount-actions .btn-outline,
.child-dashboard-shell #payout-cancel-btn {
  background: rgba(255,255,255,0.94) !important;
  border: 1px solid rgba(190, 225, 201, 0.98) !important;
  color: #40617a !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.96) !important;
}

.child-dashboard-shell .payout-amount-actions .btn-outline:hover,
.child-dashboard-shell #payout-cancel-btn:hover {
  color: #23395b !important;
  border-color: rgba(166, 207, 179, 0.98) !important;
}

.child-dashboard-shell #payout-confirm-btn {
  background: linear-gradient(135deg, #28b265 0%, #5bd282 100%) !important;
  color: #ffffff !important;
  border: none !important;
}

.child-dashboard-shell .payout-amount-input-row {
  border: 1px solid rgba(198, 225, 207, 0.94) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.98) !important;
}

.child-dashboard-shell .calm-buddy-art {
  width: 136px;
  height: 136px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,248,255,0.96));
  border: 1px solid rgba(223, 229, 246, 0.96);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.96), 0 10px 22px rgba(146, 161, 207, 0.12);
}

.child-dashboard-shell .calm-buddy-art-small {
  width: 112px;
  height: 112px;
  border-radius: 26px;
}

.child-dashboard-shell .calm-buddy-img {
  width: 118px !important;
  height: 118px !important;
}

.child-dashboard-shell .calm-breath-buddy-img {
  width: 94px !important;
  height: 94px !important;
}

.toggle {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 52px !important;
  min-width: 52px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  border: 1px solid rgba(209, 218, 241, 0.98) !important;
  background: linear-gradient(180deg, rgba(230, 236, 249, 0.96), rgba(215, 223, 244, 0.94)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.94), inset 0 -1px 1px rgba(135, 148, 186, 0.14) !important;
  transition:
    background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out) !important;
}

.toggle.on {
  background: linear-gradient(135deg, #22c55e 0%, #34d399 100%) !important;
  border-color: rgba(56, 212, 147, 0.88) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 10px 18px rgba(52, 211, 153, 0.18) !important;
}

.toggle::after {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%) !important;
  box-shadow: 0 6px 14px rgba(28, 38, 80, 0.18), 0 1px 2px rgba(28, 38, 80, 0.12) !important;
  transition: transform var(--dur-base) var(--ease-soft-spring) !important;
}

.toggle.on::after {
  transform: translateX(22px) !important;
}

.toggle:focus-visible {
  outline: 3px solid rgba(91, 84, 240, 0.24) !important;
  outline-offset: 2px !important;
}

.parent-reports-stack {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.parent-reports-periods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border-radius: 22px;
  border: 1px solid rgba(214, 223, 246, 0.96);
  background: rgba(255,255,255,0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.96);
}

.parent-report-period-btn {
  min-width: 0;
  min-height: 58px;
  padding: 10px 14px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: #687397;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  transition:
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.parent-report-period-btn span {
  font-size: 0.86rem;
  line-height: 1.1;
  font-weight: 900;
  color: inherit;
}

.parent-report-period-btn small {
  font-size: 0.68rem;
  line-height: 1.2;
  font-weight: 800;
  color: inherit;
  opacity: 0.72;
}

.parent-report-period-btn:hover {
  transform: translateY(-1px);
  background: rgba(76, 137, 255, 0.08);
}

.parent-report-period-btn.active {
  background: linear-gradient(135deg, #2f73ff 0%, #5b96ff 56%, #69bdff 100%);
  color: #fff;
  box-shadow:
    0 14px 26px rgba(47, 115, 255, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.24);
}

.parent-report-card {
  display: grid;
  gap: 18px;
}

.parent-report-card-head,
.parent-report-child,
.parent-report-section-head,
.parent-report-history-row {
  display: flex;
  align-items: center;
}

.parent-report-card-head {
  justify-content: space-between;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.parent-report-child {
  min-width: 0;
  gap: 12px;
}

.parent-report-avatar {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,0.98), rgba(255,255,255,0.28) 42%, transparent 70%),
    linear-gradient(135deg, rgba(76,137,255,0.18), rgba(34,197,94,0.12));
  border: 1px solid rgba(221, 229, 248, 0.98);
  font-size: 1.85rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
}

.parent-report-avatar img {
  width: 100% !important;
  height: 100% !important;
}

.parent-report-child-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.parent-report-child-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #16224d;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.15;
}

.parent-report-child-main span,
.parent-report-earned span,
.parent-report-section-head p,
.parent-report-metric-label,
.parent-report-metric-sub,
.parent-report-chip span,
.parent-report-history-row small,
.parent-report-mood-chip small {
  color: #7581a6;
}

.parent-report-earned {
  flex-shrink: 0;
  min-width: 96px;
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.18);
  text-align: right;
}

.parent-report-earned strong {
  display: block;
  color: #16824a;
  font-size: 1.05rem;
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.parent-report-earned span {
  display: block;
  margin-top: 4px;
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.parent-report-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: 16px;
  align-items: start;
  position: relative;
  z-index: 1;
}

.parent-report-section {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(221, 229, 248, 0.92);
}

.parent-report-section-primary {
  grid-row: span 2;
}

.parent-report-section-head {
  justify-content: space-between;
  gap: 12px;
}

.parent-report-section-head h3 {
  margin: 0;
  color: #16224d;
  font-size: 0.92rem;
  line-height: 1.2;
  font-weight: 950;
}

.parent-report-section-head p {
  margin: 4px 0 0;
  font-size: 0.76rem;
  line-height: 1.35;
  font-weight: 700;
}

.parent-report-section-pill {
  flex-shrink: 0;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.10);
  color: #16824a;
  font-size: 0.76rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.parent-report-metric-grid,
.parent-report-mood-summary {
  display: grid;
  gap: 10px;
}

.parent-report-metric-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.parent-report-mood-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.parent-report-metric {
  min-width: 0;
  min-height: 92px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(221, 229, 248, 0.96);
  background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(248,250,255,0.78));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
}

.parent-report-metric-label,
.parent-report-metric-sub {
  font-weight: 850;
}

.parent-report-metric-label {
  font-size: 0.68rem;
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.parent-report-metric-value {
  margin-top: 10px;
  color: #16224d;
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.parent-report-metric-sub {
  margin-top: 6px;
  font-size: 0.72rem;
  line-height: 1.25;
}

.parent-report-metric.is-green {
  background: linear-gradient(180deg, rgba(236,253,245,0.96), rgba(255,255,255,0.76));
  border-color: rgba(34, 197, 94, 0.22);
}

.parent-report-metric.is-green .parent-report-metric-value {
  color: #16824a;
}

.parent-report-metric.is-red {
  background: linear-gradient(180deg, rgba(255,241,242,0.98), rgba(255,255,255,0.78));
  border-color: rgba(251, 113, 133, 0.22);
}

.parent-report-metric.is-red .parent-report-metric-value {
  color: #d94c62;
}

.parent-report-metric.is-amber {
  background: linear-gradient(180deg, rgba(255,247,237,0.98), rgba(255,255,255,0.78));
  border-color: rgba(245, 158, 11, 0.22);
}

.parent-report-metric.is-amber .parent-report-metric-value {
  color: #c7770d;
}

.parent-report-metric.is-purple {
  background: linear-gradient(180deg, rgba(245,243,255,0.98), rgba(255,255,255,0.78));
  border-color: rgba(124, 58, 237, 0.18);
}

.parent-report-metric.is-purple .parent-report-metric-value {
  color: #6750d8;
}

.parent-report-metric.is-blue {
  background: linear-gradient(180deg, rgba(239,246,255,0.98), rgba(255,255,255,0.78));
  border-color: rgba(37, 99, 235, 0.18);
}

.parent-report-metric.is-blue .parent-report-metric-value {
  color: #2f73ff;
}

.parent-report-chip-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.parent-report-chip-list-calm {
  margin-top: 2px;
}

.parent-report-chip {
  min-width: 0;
  min-height: 58px;
  padding: 9px 10px;
  border-radius: 16px;
  border: 1px solid rgba(221, 229, 248, 0.92);
  background: rgba(255,255,255,0.74);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

.parent-report-chip strong {
  color: #16224d;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.parent-report-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.7rem;
  line-height: 1.15;
  font-weight: 800;
}

.parent-report-chip.is-aqua {
  border-color: rgba(20, 184, 166, 0.20);
  background: rgba(240, 253, 250, 0.82);
}

.parent-report-chip.is-blue {
  border-color: rgba(59, 130, 246, 0.18);
  background: rgba(239, 246, 255, 0.82);
}

.parent-report-chip.is-purple {
  border-color: rgba(124, 58, 237, 0.18);
  background: rgba(245, 243, 255, 0.82);
}

.parent-report-chip.is-amber {
  border-color: rgba(245, 158, 11, 0.18);
  background: rgba(255, 251, 235, 0.84);
}

.parent-report-chip.is-green {
  border-color: rgba(34, 197, 94, 0.18);
  background: rgba(240, 253, 244, 0.82);
}

.parent-report-trend,
.parent-report-note {
  padding: 11px 12px;
  border-radius: 16px;
  border: 1px solid rgba(221, 229, 248, 0.92);
  background: rgba(255,255,255,0.72);
  color: #687397;
  font-size: 0.76rem;
  line-height: 1.35;
  font-weight: 800;
}

.parent-report-trend.is-up {
  color: #16824a;
  border-color: rgba(34, 197, 94, 0.20);
  background: rgba(240, 253, 244, 0.78);
}

.parent-report-trend.is-down {
  color: #d94c62;
  border-color: rgba(251, 113, 133, 0.20);
  background: rgba(255, 241, 242, 0.78);
}

.parent-report-trend.is-stable {
  color: #2f73ff;
  border-color: rgba(47, 115, 255, 0.18);
  background: rgba(239, 246, 255, 0.78);
}

.parent-report-mood-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.parent-report-mood-chip {
  min-height: 36px;
  padding: 7px 9px;
  border-radius: 14px;
  border: 1px solid rgba(221, 229, 248, 0.92);
  background: rgba(255,255,255,0.72);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.parent-report-mood-chip span {
  font-size: 1rem;
  line-height: 1;
}

.parent-report-mood-chip small,
.parent-report-history-row small {
  font-size: 0.7rem;
  line-height: 1.2;
  font-weight: 800;
}

.parent-report-history summary {
  cursor: pointer;
  color: #16224d;
  font-size: 0.78rem;
  font-weight: 900;
}

.parent-report-history-list {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.parent-report-history-row {
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(246, 248, 255, 0.76);
  border: 1px solid rgba(221, 229, 248, 0.78);
}

.parent-report-history-row span {
  min-width: 0;
  color: #24315f;
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.25;
}

.parent-report-reminder {
  width: 100%;
  min-height: 44px;
  margin-top: 2px;
}

@media (max-width: 820px) {
  .parent-report-layout {
    grid-template-columns: 1fr;
  }

  .parent-report-section-primary {
    grid-row: auto;
  }
}

@media (max-width: 560px) {
  .parent-reports-periods {
    gap: 6px;
    padding: 5px;
  }

  .parent-report-period-btn {
    min-height: 54px;
    padding: 8px 6px;
    text-align: center;
    align-items: center;
  }

  .parent-report-period-btn span {
    font-size: 0.78rem;
  }

  .parent-report-period-btn small {
    font-size: 0.62rem;
  }

  .parent-report-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .parent-report-earned {
    width: 100%;
    text-align: left;
  }

  .parent-report-mood-summary,
  .parent-report-chip-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .setup-screen .setup-hero.setup-hero-branded {
    padding: 22px 18px 20px !important;
  }

  .setup-hero-logo {
    width: min(100%, 214px);
  }

  .parent-dashboard-shell .parent-hero-inner {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  .parent-dashboard-shell .parent-hero-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .parent-dashboard-shell .parent-summary-grid,
  .parent-dashboard-shell .parent-overview-kpi-grid,
  .parent-dashboard-shell .parent-section-stat-grid,
  .parent-dashboard-shell .parent-overview-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}