/* ==========================================================================
   ChoreTracker — Modernized UI
   Warm, layered, mobile-first
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Primary (teal) */
  --c-primary: #0d9488;
  --c-primary-hover: #0f766e;
  --c-primary-50: #f0fdfa;
  --c-primary-100: #ccfbf1;
  --c-primary-rgb: 13, 148, 136;

  /* Accent (warm coral) */
  --c-accent: #e85d04;
  --c-accent-hover: #c2410c;
  --c-accent-light: #fff7ed;

  /* Semantic */
  --c-success: #16a34a;
  --c-success-light: #dcfce7;
  --c-warning: #d97706;
  --c-warning-light: #fef3c7;
  --c-danger: #dc2626;
  --c-danger-hover: #b91c1c;
  --c-danger-light: #fee2e2;

  /* Surfaces (warm stone) */
  --c-bg: #faf8f6;
  --c-surface: #f3f0ed;
  --c-card: #ffffff;
  --c-text: #1c1917;
  --c-text-2: #57534e;
  --c-text-3: #a8a29e;
  --c-border: #e7e5e4;
  --c-border-light: #f0eeec;

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    system-ui, Roboto, "Helvetica Neue", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji";
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    system-ui, sans-serif;
  --fs-2xs: 0.625rem;
  --fs-xs: 0.6875rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.3125rem;
  --fs-2xl: 1.625rem;
  --fs-3xl: 2rem;

  /* Spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* Radii */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
  --r-xl: 20px; --r-2xl: 24px; --r-full: 9999px;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(28,25,23,.03);
  --sh-sm: 0 1px 3px rgba(28,25,23,.05), 0 1px 2px rgba(28,25,23,.03);
  --sh-md: 0 4px 12px -2px rgba(28,25,23,.08), 0 2px 4px rgba(28,25,23,.03);
  --sh-lg: 0 12px 28px -6px rgba(28,25,23,.12), 0 4px 10px rgba(28,25,23,.04);
  --sh-xl: 0 24px 48px -12px rgba(28,25,23,.16);
  --sh-glow: 0 0 0 4px rgba(var(--c-primary-rgb), .10);
  --sh-card: 0 1px 3px rgba(28,25,23,.04), 0 0 0 1px rgba(28,25,23,.03);
  --sh-card-hover: 0 8px 24px -4px rgba(28,25,23,.1), 0 0 0 1px rgba(var(--c-primary-rgb),.12);

  /* Motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --dur-fast: .15s;
  --dur-base: .2s;
  --dur-slow: .3s;

  /* Layout */
  --sidebar-w: 260px;
  --nav-h: 64px;
  --page-max: 700px;
  --content-max: 960px;
}


/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  min-height: 100vh; min-height: 100dvh;
  overflow-x: hidden;
}
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; }
button,input,select,textarea { font:inherit; color:inherit; border:none; outline:none; background:none; }
button { cursor:pointer; -webkit-tap-highlight-color:transparent; }
h1,h2,h3,h4 { font-family:var(--font-display); line-height:1.2; font-weight:700; letter-spacing:-.02em; }
h1 { font-size:var(--fs-2xl); }
h2 { font-size:var(--fs-xl); }
h3 { font-size:var(--fs-lg); }

::selection { background:var(--c-primary-100); color:var(--c-primary-hover); }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--c-border); border-radius:var(--r-full); }
* { scrollbar-width:thin; scrollbar-color:var(--c-border) transparent; }


/* --------------------------------------------------------------------------
   3. App Shell
   -------------------------------------------------------------------------- */
.app-container { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }

.main-content {
  flex:1;
  padding: var(--s-5) var(--s-5) calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + var(--s-8));
  max-width: var(--content-max);
  width: 100%; margin: 0 auto;
}


/* --------------------------------------------------------------------------
   4. Sidebar (Desktop)
   -------------------------------------------------------------------------- */
.sidebar {
  display:none; position:fixed; top:0; left:0; width:var(--sidebar-w); height:100vh;
  background: var(--c-card); border-right:1px solid var(--c-border-light);
  flex-direction:column; z-index:100; overflow-y:auto;
}

.sidebar-logo {
  display:flex; align-items:center; gap:var(--s-3);
  padding: var(--s-6) var(--s-5);
}
.sidebar-logo .logo-icon {
  width:38px; height:38px; border-radius:var(--r-md);
  background: linear-gradient(135deg, var(--c-primary) 0%, #2dd4bf 100%);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
  box-shadow: 0 2px 8px rgba(var(--c-primary-rgb),.25);
}
.sidebar-logo .logo-text {
  font-family:var(--font-display); font-size:var(--fs-lg); font-weight:800;
  color:var(--c-text); letter-spacing:-.02em;
}

.sidebar-nav { padding:var(--s-3); flex:1; }

.sidebar .nav-item {
  display:flex; align-items:center; gap:var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius:var(--r-md);
  font-size:var(--fs-base); font-weight:500; color:var(--c-text-2);
  transition: all var(--dur-fast) var(--ease); margin-bottom:2px;
}
.sidebar .nav-item svg { flex-shrink:0; opacity:.7; transition:opacity var(--dur-fast); }
.sidebar .nav-item:hover { background:var(--c-surface); color:var(--c-text); }
.sidebar .nav-item:hover svg { opacity:1; }
.sidebar .nav-item.active {
  background: var(--c-primary-50); color:var(--c-primary); font-weight:600;
}
.sidebar .nav-item.active svg { opacity:1; stroke:var(--c-primary); }

/* Sidebar — Kids section */
.sidebar-section-label {
  font-size:var(--fs-2xs); font-weight:600; color:var(--c-text-3);
  text-transform:uppercase; letter-spacing:.06em;
  padding:var(--s-5) var(--s-4) var(--s-2); margin-top:var(--s-1);
}

.nav-child-item {
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-2) var(--s-4); border-radius:var(--r-md);
  font-size:var(--fs-sm); font-weight:500; color:var(--c-text-2);
  transition:all var(--dur-fast) var(--ease); margin-bottom:1px;
}
.nav-child-item:hover { background:var(--c-surface); color:var(--c-text); }
.nav-child-item.active { background:var(--c-primary-50); color:var(--c-primary); font-weight:600; }

.nav-child-avatar {
  width:26px; height:26px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; flex-shrink:0;
}

.sidebar-footer {
  padding:var(--s-4) var(--s-5); border-top:1px solid var(--c-border-light);
  font-size:var(--fs-2xs); color:var(--c-text-3); letter-spacing:.02em;
}


/* --------------------------------------------------------------------------
   5. Bottom Nav (Mobile)
   -------------------------------------------------------------------------- */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom,0px));
  padding-bottom: env(safe-area-inset-bottom,0px);
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top:1px solid rgba(231,229,228,.6);
  display:flex; align-items:stretch; justify-content:space-around;
  z-index:100;
}

.bottom-nav .nav-item {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; flex:1; min-width:0;
  color:var(--c-text-3); font-size:var(--fs-2xs); font-weight:500;
  transition: color var(--dur-fast); position:relative;
  padding: var(--s-2) 0;
}
.bottom-nav .nav-item svg { width:24px; height:24px; transition:transform var(--dur-fast) var(--ease); }
.bottom-nav .nav-item span { margin-top:1px; }
.bottom-nav .nav-item:hover { color:var(--c-text-2); }
.bottom-nav .nav-item.active { color:var(--c-primary); font-weight:600; }
.bottom-nav .nav-item.active svg { transform:scale(1.08); }
.bottom-nav .nav-item.active::after {
  content:""; position:absolute; top:4px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%;
  background:var(--c-primary);
}
.bottom-nav .nav-item:active { transform:scale(.95); }


/* --------------------------------------------------------------------------
   6. View Container
   -------------------------------------------------------------------------- */
.view-page { max-width:var(--page-max); margin:0 auto; padding:0 0 var(--s-8); }

.view-header {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-3); margin-bottom:var(--s-6);
}
.view-title {
  font-family:var(--font-display); font-size:var(--fs-2xl); font-weight:800;
  color:var(--c-text); letter-spacing:-.03em;
}
.section-title {
  font-family:var(--font-display); font-size:var(--fs-lg); font-weight:700;
  color:var(--c-text); margin-bottom:var(--s-3);
}
.section-header {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-2); margin-bottom:var(--s-3);
}


/* --------------------------------------------------------------------------
   7. Back Button
   -------------------------------------------------------------------------- */
.back-btn {
  display:inline-flex; align-items:center; gap:var(--s-1);
  padding:var(--s-2) var(--s-1); margin-bottom:var(--s-4);
  font-size:var(--fs-sm); font-weight:600; color:var(--c-primary);
  border-radius:var(--r-sm); transition:color var(--dur-fast);
}
.back-btn:hover { color:var(--c-primary-hover); }
.back-btn svg { flex-shrink:0; }


/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  min-height:44px; padding:var(--s-3) var(--s-5);
  border-radius:var(--r-md); font-size:var(--fs-base); font-weight:600; line-height:1;
  white-space:nowrap; transition:all var(--dur-fast) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn:active:not(:disabled) { transform:scale(.97); }
.btn:disabled { opacity:.45; cursor:not-allowed; }

.btn-primary {
  background: linear-gradient(135deg, var(--c-primary) 0%, #14b8a6 100%);
  color:#fff; box-shadow:0 2px 8px rgba(var(--c-primary-rgb),.25);
}
.btn-primary:hover:not(:disabled) {
  box-shadow:0 4px 16px rgba(var(--c-primary-rgb),.3);
  filter:brightness(1.05);
}
.btn-accent {
  background: linear-gradient(135deg, var(--c-accent) 0%, #f97316 100%);
  color:#fff; box-shadow:0 2px 8px rgba(232,93,4,.2);
}
.btn-secondary {
  background:var(--c-card); color:var(--c-text-2);
  box-shadow: var(--sh-sm); border:1px solid var(--c-border);
}
.btn-secondary:hover:not(:disabled) { background:var(--c-surface); color:var(--c-text); border-color:var(--c-text-3); }

.btn-danger { background:var(--c-danger); color:#fff; }
.btn-danger:hover:not(:disabled) { background:var(--c-danger-hover); }

.btn-ghost { background:transparent; color:var(--c-text-2); }
.btn-ghost:hover:not(:disabled) { background:var(--c-surface); color:var(--c-text); }

.btn-sm { min-height:36px; padding:var(--s-2) var(--s-3); font-size:var(--fs-sm); border-radius:var(--r-sm); }
.btn-icon { width:40px; height:40px; min-height:unset; padding:0; border-radius:var(--r-md); color:var(--c-text-3); }
.btn-icon:hover { background:var(--c-surface); color:var(--c-text); }


/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */
.card {
  background:var(--c-card); border-radius:var(--r-xl); padding:var(--s-5);
  box-shadow:var(--sh-card);
  transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.card:hover { box-shadow:var(--sh-card-hover); }

.card-grid { display:grid; grid-template-columns:1fr; gap:var(--s-4); }


/* --------------------------------------------------------------------------
   10. Dashboard — Welcome
   -------------------------------------------------------------------------- */
.dash-welcome {
  background: linear-gradient(135deg, var(--c-primary-50) 0%, var(--c-bg) 100%);
  border-radius: var(--r-xl); padding:var(--s-6) var(--s-5);
  margin-bottom:var(--s-5);
}
.dash-welcome h1 { margin:0 0 4px; }
.dash-welcome .dash-date { color:var(--c-text-2); font-size:var(--fs-sm); margin:0; }


/* --------------------------------------------------------------------------
   11. Dashboard — Stats
   -------------------------------------------------------------------------- */
.dash-stats {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:var(--s-3); margin-bottom:var(--s-6);
}
.dash-stat {
  background:var(--c-card); border-radius:var(--r-lg);
  padding:var(--s-4) var(--s-4);
  box-shadow:var(--sh-card);
  position:relative; overflow:hidden;
}
.dash-stat::before {
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.dash-stat.stat-kids::before    { background:var(--c-primary); }
.dash-stat.stat-chores::before  { background:var(--c-accent); }
.dash-stat.stat-done::before    { background:var(--c-success); }
.dash-stat.stat-pending::before { background:var(--c-warning); }

.dash-stat-icon {
  width:36px; height:36px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; margin-bottom:var(--s-2);
}
.dash-stat-value {
  font-family:var(--font-display); font-size:var(--fs-2xl);
  font-weight:800; line-height:1; color:var(--c-text);
}
.dash-stat-label { font-size:var(--fs-xs); color:var(--c-text-2); margin-top:2px; font-weight:500; }

.bg-teal   { background:var(--c-primary-100); }
.bg-orange { background:var(--c-accent-light); }
.bg-green  { background:var(--c-success-light); }
.bg-amber  { background:var(--c-warning-light); }


/* --------------------------------------------------------------------------
   12. Dashboard — Chore Row
   -------------------------------------------------------------------------- */
.dash-chore {
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-3) var(--s-4);
  background:var(--c-card); border-radius:var(--r-lg);
  box-shadow:var(--sh-xs);
  transition: box-shadow var(--dur-fast), transform var(--dur-fast);
}
.dash-chore:hover { box-shadow:var(--sh-md); transform:translateY(-1px); }
.dash-chore + .dash-chore { margin-top:var(--s-2); }

.dash-chore-toggle {
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  border:2px solid var(--c-border); background:transparent;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all var(--dur-fast); padding:0;
}
.dash-chore-toggle:hover { border-color:var(--c-primary); background:var(--c-primary-100); }

.dash-chore-avatar {
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; font-weight:700; flex-shrink:0;
}
.dash-chore-name { font-size:var(--fs-xs); color:var(--c-text-3); max-width:60px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-chore-title { flex:1; font-weight:500; font-size:var(--fs-base); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.badge {
  font-size:var(--fs-xs); font-weight:600; padding:3px 10px; border-radius:var(--r-full);
  white-space:nowrap; background:var(--c-surface); color:var(--c-text-2);
}
.badge-teal  { background:var(--c-primary-100); color:var(--c-primary); }
.badge-amber { background:var(--c-warning-light); color:var(--c-warning); }


/* --------------------------------------------------------------------------
   13. Dashboard — Child Progress
   -------------------------------------------------------------------------- */
.dash-child {
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-3) var(--s-4);
  background:var(--c-card); border-radius:var(--r-lg);
  box-shadow:var(--sh-xs); cursor:pointer;
  transition: box-shadow var(--dur-fast), transform var(--dur-fast);
}
.dash-child:hover { box-shadow:var(--sh-md); transform:translateY(-1px); }
.dash-child + .dash-child { margin-top:var(--s-2); }

.dash-child-avatar {
  width:38px; height:38px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; font-weight:700; color:#fff; flex-shrink:0;
}
.dash-child-name { font-weight:600; font-size:var(--fs-base); flex-shrink:0; min-width:50px; }

.progress-track {
  flex:1; height:8px; background:var(--c-surface);
  border-radius:var(--r-full); overflow:hidden; min-width:50px;
}
.progress-fill { height:100%; border-radius:var(--r-full); transition:width .5s var(--ease); }
.progress-fill-green { background:linear-gradient(90deg,#16a34a,#4ade80); }
.progress-fill-teal  { background:linear-gradient(90deg,var(--c-primary),#2dd4bf); }
.progress-fill-amber { background:linear-gradient(90deg,#d97706,#fbbf24); }

.dash-child-frac { font-size:var(--fs-xs); color:var(--c-text-3); white-space:nowrap; }
.dash-child-pct  { font-size:var(--fs-sm); font-weight:700; color:var(--c-text); min-width:36px; text-align:right; }


/* --------------------------------------------------------------------------
   14. Dashboard — Quick Actions
   -------------------------------------------------------------------------- */
.dash-actions { display:flex; gap:var(--s-3); margin-bottom:var(--s-6); }
.dash-action-btn {
  flex:1; display:flex; align-items:center; justify-content:center; gap:var(--s-2);
  padding:var(--s-3) var(--s-4);
  background:var(--c-card); border-radius:var(--r-lg);
  box-shadow:var(--sh-xs);
  font-size:var(--fs-sm); font-weight:500; color:var(--c-text-2);
  cursor:pointer; transition:all var(--dur-fast);
}
.dash-action-btn:hover { box-shadow:var(--sh-md); color:var(--c-primary); transform:translateY(-1px); }


/* --------------------------------------------------------------------------
   15. Dashboard — Onboarding
   -------------------------------------------------------------------------- */
.dash-onboarding {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:65vh; text-align:center; padding:var(--s-8) var(--s-5);
}
.dash-onboarding-emoji { font-size:2.5rem; margin-bottom:var(--s-6); }
.dash-onboarding h1 { font-size:var(--fs-2xl); margin-bottom:var(--s-3); }
.dash-onboarding p { color:var(--c-text-2); max-width:300px; margin-bottom:var(--s-6); font-size:var(--fs-base); line-height:1.6; }
.dash-onboarding .btn-primary {
  padding:var(--s-4) var(--s-8); font-size:var(--fs-md);
  border-radius:var(--r-lg);
}
.dash-onboarding .demo-link { margin-top:var(--s-5); font-size:var(--fs-sm); color:var(--c-text-3); }
.dash-onboarding .demo-link a { color:var(--c-primary); text-decoration:underline; cursor:pointer; }

.dash-celebration {
  text-align:center; padding:var(--s-8) var(--s-5);
  background:var(--c-card); border-radius:var(--r-xl);
  box-shadow:var(--sh-card);
}
.dash-celebration-emoji { font-size:3rem; margin-bottom:var(--s-3); }


/* --------------------------------------------------------------------------
   16. Child Cards
   -------------------------------------------------------------------------- */
.child-card {
  background:var(--c-card); border-radius:var(--r-xl);
  padding:var(--s-6) var(--s-5);
  display:flex; flex-direction:column; align-items:center; gap:var(--s-3);
  cursor:pointer; box-shadow:var(--sh-card);
  transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.child-card:hover { box-shadow:var(--sh-card-hover); transform:translateY(-3px); }
.child-card:active { transform:scale(.98); }

.child-card-name { font-weight:700; font-size:var(--fs-md); color:var(--c-text); }
.child-card-age  { font-size:var(--fs-sm); color:var(--c-text-2); }
.child-card-chores { font-size:var(--fs-xs); color:var(--c-text-3); margin-bottom:var(--s-1); }


/* --------------------------------------------------------------------------
   17. Avatar
   -------------------------------------------------------------------------- */
.avatar { border-radius:var(--r-lg); display:flex; align-items:center; justify-content:center; line-height:1; flex-shrink:0; }
.avatar-round { border-radius:50%; }
.avatar-sm { width:28px; height:28px; font-size:14px; border-radius:var(--r-sm); }
.avatar-md { width:42px; height:42px; font-size:22px; }
.avatar-lg { width:56px; height:56px; font-size:30px; }
.avatar-xl { width:80px; height:80px; font-size:44px; border-radius:var(--r-xl); }


/* --------------------------------------------------------------------------
   18. Progress Bar
   -------------------------------------------------------------------------- */
.progress-bar-mini { width:100%; height:6px; background:var(--c-surface); border-radius:var(--r-full); overflow:hidden; }
.progress-bar-mini-fill { height:100%; border-radius:var(--r-full); background:linear-gradient(90deg,var(--c-primary),#2dd4bf); transition:width .4s var(--ease); }


/* --------------------------------------------------------------------------
   19. Child Detail — Mini Stats
   -------------------------------------------------------------------------- */
.mini-stats { display:flex; gap:var(--s-3); flex-wrap:wrap; margin-bottom:var(--s-6); }
.mini-stat {
  flex:1; min-width:0; background:var(--c-card); border-radius:var(--r-lg);
  padding:var(--s-4); text-align:center; box-shadow:var(--sh-xs);
}
.mini-stat-value { font-family:var(--font-display); font-size:var(--fs-xl); font-weight:800; color:var(--c-text); }
.mini-stat-label { font-size:var(--fs-xs); color:var(--c-text-2); margin-top:2px; }


/* --------------------------------------------------------------------------
   20. Child Detail — Chore List
   -------------------------------------------------------------------------- */
.detail-chore-list { background:var(--c-card); border-radius:var(--r-xl); box-shadow:var(--sh-card); overflow:hidden; }

.detail-chore-item {
  display:flex; align-items:flex-start; gap:var(--s-3);
  padding:var(--s-4); border-bottom:1px solid var(--c-border-light);
  transition:background var(--dur-fast);
}
.detail-chore-item:last-child { border-bottom:none; }
.detail-chore-item:hover { background:var(--c-surface); }

.detail-chore-check {
  width:24px; height:24px; border-radius:50%;
  border:2px solid var(--c-border); background:var(--c-card);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; padding:0; margin-top:1px;
  cursor:pointer; transition:all var(--dur-fast); color:#fff;
}
.detail-chore-check:hover { border-color:var(--c-primary); box-shadow:var(--sh-glow); }
.detail-chore-check.checked { background:var(--c-success); border-color:var(--c-success); }

.detail-chore-body { flex:1; min-width:0; }
.detail-chore-title { font-weight:600; font-size:var(--fs-base); color:var(--c-text); }
.detail-chore-title.done { text-decoration:line-through; color:var(--c-text-3); }
.detail-chore-desc { font-size:var(--fs-xs); color:var(--c-text-3); margin-top:3px; }

.detail-chore-delete {
  background:none; border:none; color:var(--c-text-3); padding:var(--s-2);
  cursor:pointer; flex-shrink:0; border-radius:var(--r-sm);
  transition:all var(--dur-fast);
}
.detail-chore-delete:hover { color:var(--c-danger); background:var(--c-danger-light); }


/* --------------------------------------------------------------------------
   21. Forms
   -------------------------------------------------------------------------- */
.form-group { margin-bottom:var(--s-5); }
.form-label {
  display:block; font-size:var(--fs-xs); font-weight:600;
  color:var(--c-text-2); text-transform:uppercase; letter-spacing:.05em;
  margin-bottom:var(--s-2);
}
.form-input,.form-select {
  width:100%; height:48px; padding:0 var(--s-4);
  background:var(--c-card); border:1.5px solid var(--c-border);
  border-radius:var(--r-md); font-size:var(--fs-base); color:var(--c-text);
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.form-input::placeholder { color:var(--c-text-3); }
.form-input:focus,.form-select:focus {
  border-color:var(--c-primary); box-shadow:var(--sh-glow);
}
textarea.form-input { height:auto; min-height:96px; padding:var(--s-3) var(--s-4); resize:vertical; line-height:1.6; }

.avatar-picker {
  display:flex; gap:var(--s-2); overflow-x:auto; padding:var(--s-1) 0;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.avatar-picker::-webkit-scrollbar { display:none; }
.avatar-picker-item {
  width:46px; height:46px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center; font-size:22px;
  background:var(--c-surface); border:2.5px solid transparent;
  cursor:pointer; flex-shrink:0;
  transition:border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}
.avatar-picker-item:hover { transform:scale(1.08); background:var(--c-card); box-shadow:var(--sh-sm); }
.avatar-picker-item.selected {
  border-color:var(--c-primary); background:var(--c-primary-50);
  box-shadow:var(--sh-glow); transform:scale(1.08);
}

.color-picker { display:flex; gap:var(--s-2); flex-wrap:wrap; padding:var(--s-1) 0; }
.color-picker-item {
  width:36px; height:36px; border-radius:50%;
  cursor:pointer; border:3px solid transparent;
  transition:transform var(--dur-fast), box-shadow var(--dur-fast);
}
.color-picker-item:hover { transform:scale(1.15); }
.color-picker-item.selected {
  box-shadow:0 0 0 2.5px var(--c-card), 0 0 0 5px currentColor;
  transform:scale(1.1);
}


/* --------------------------------------------------------------------------
   22. Modal / Confirm
   -------------------------------------------------------------------------- */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(28,25,23,.35); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  z-index:200; animation:fadeIn .15s ease; padding:var(--s-5);
}
.confirm-dialog {
  background:var(--c-card); border-radius:var(--r-2xl);
  padding:var(--s-8) var(--s-6); width:100%; max-width:340px;
  text-align:center; animation:scaleIn .2s var(--ease);
  box-shadow:var(--sh-xl);
}
.confirm-dialog .confirm-icon {
  width:56px; height:56px; border-radius:var(--r-lg);
  background:var(--c-warning-light);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto var(--s-4);
}
.confirm-dialog .confirm-message {
  font-size:var(--fs-base); color:var(--c-text-2); line-height:1.5; margin-bottom:var(--s-6);
}
.confirm-dialog .confirm-actions { display:flex; gap:var(--s-3); }
.confirm-dialog .confirm-actions .btn { flex:1; }


/* --------------------------------------------------------------------------
   23. Toast
   -------------------------------------------------------------------------- */
.toast-container {
  position:fixed; top:var(--s-4); left:50%; transform:translateX(-50%);
  z-index:300; display:flex; flex-direction:column; gap:var(--s-2);
  width:calc(100% - var(--s-8)); max-width:380px; pointer-events:none;
}
.toast {
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-3) var(--s-4);
  background:var(--c-card); border-radius:var(--r-lg);
  box-shadow:var(--sh-lg); pointer-events:auto;
  animation:toastIn .3s var(--ease), toastOut .25s ease 3.5s forwards;
}
.toast .toast-icon {
  width:24px; height:24px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.toast .toast-icon.success { background:var(--c-success-light); }
.toast .toast-icon.error   { background:var(--c-danger-light); }
.toast .toast-icon.info    { background:var(--c-primary-100); }
.toast .toast-message { flex:1; font-size:var(--fs-sm); font-weight:500; color:var(--c-text); line-height:1.4; }


/* --------------------------------------------------------------------------
   24. Empty State
   -------------------------------------------------------------------------- */
.empty-state {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:var(--s-16) var(--s-6); text-align:center;
}
.empty-state-emoji { font-size:3.5rem; margin-bottom:var(--s-4); line-height:1; }
.empty-state-title { font-family:var(--font-display); font-size:var(--fs-xl); font-weight:700; color:var(--c-text); margin-bottom:var(--s-2); }
.empty-state-desc { font-size:var(--fs-sm); color:var(--c-text-2); max-width:260px; line-height:1.6; margin-bottom:var(--s-6); }


/* --------------------------------------------------------------------------
   25. Recurrence Badge
   -------------------------------------------------------------------------- */
.recurrence-badge {
  display:inline-flex; align-items:center;
  padding:3px 10px; border-radius:var(--r-full);
  font-size:var(--fs-xs); font-weight:600; white-space:nowrap;
  background:var(--c-surface); color:var(--c-text-2);
}


/* --------------------------------------------------------------------------
   26. Keyframes
   -------------------------------------------------------------------------- */
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{transform:translateY(16px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes scaleIn { from{transform:scale(.94);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes fadeSlideIn { from{transform:translateY(8px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes toastIn { from{transform:translateY(-100%);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes toastOut { from{opacity:1} to{transform:translateY(-40px);opacity:0} }
@keyframes checkPop { 0%{transform:scale(1)} 40%{transform:scale(1.2)} 100%{transform:scale(1)} }

.fade-in  { animation:fadeIn .3s ease; }
.slide-up { animation:slideUp .3s var(--ease); }


/* --------------------------------------------------------------------------
   27. Utility
   -------------------------------------------------------------------------- */
.text-center  { text-align:center; }
.text-primary { color:var(--c-primary); }
.text-secondary { color:var(--c-text-2); }
.text-success { color:var(--c-success); }
.text-danger  { color:var(--c-danger); }
.mt-1{margin-top:4px} .mt-2{margin-top:8px} .mt-3{margin-top:12px} .mt-4{margin-top:16px}
.mb-1{margin-bottom:4px} .mb-2{margin-bottom:8px} .mb-3{margin-bottom:12px} .mb-4{margin-bottom:16px}
.mx-auto { margin-left:auto; margin-right:auto; }
.flex{display:flex} .flex-col{flex-direction:column} .items-center{align-items:center}
.justify-between{justify-content:space-between} .gap-2{gap:8px} .gap-3{gap:12px} .gap-4{gap:16px}
.flex-1{flex:1} .hidden{display:none} .w-full{width:100%}
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }


/* --------------------------------------------------------------------------
   28. Responsive — Tablet
   -------------------------------------------------------------------------- */
@media (min-width:640px) {
  .card-grid { grid-template-columns:repeat(2,1fr); }
  .dash-stats { grid-template-columns:repeat(4,1fr); }
}

/* --------------------------------------------------------------------------
   29. Responsive — Desktop
   -------------------------------------------------------------------------- */
@media (min-width:768px) {
  .app-container { flex-direction:row; }
  .sidebar { display:flex; }
  .bottom-nav { display:none; }
  .main-content {
    margin-left:var(--sidebar-w);
    padding:var(--s-8) var(--s-10); padding-bottom:var(--s-8);
  }
  .toast-container { left:auto; right:var(--s-6); transform:none; top:var(--s-6); }
}
@media (min-width:1024px) {
  .card-grid { grid-template-columns:repeat(3,1fr); }
}


/* --------------------------------------------------------------------------
   30. Reduced Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}


/* --------------------------------------------------------------------------
   31. Chores View
   -------------------------------------------------------------------------- */
.chores-page { max-width:var(--page-max); margin:0 auto; padding:0 0 var(--s-10); }
.chores-header { display:flex; align-items:center; gap:var(--s-3); margin-bottom:var(--s-6); }
.chores-header-text { flex:1; }
.chores-header h1 { font-family:var(--font-display); font-size:var(--fs-2xl); font-weight:800; color:var(--c-text); margin:0; letter-spacing:-.03em; }
.chores-header .subtitle { font-size:var(--fs-sm); color:var(--c-text-2); margin-top:2px; }

.chores-back-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:var(--r-md);
  background:var(--c-card); color:var(--c-text-2); cursor:pointer;
  box-shadow:var(--sh-xs); transition:all var(--dur-fast); flex-shrink:0;
}
.chores-back-btn:hover { box-shadow:var(--sh-sm); color:var(--c-text); }
.chores-back-btn:focus-visible { outline:2px solid var(--c-primary); outline-offset:2px; }

.chore-form { display:flex; flex-direction:column; gap:var(--s-3); }
.chore-field label { display:block; font-size:var(--fs-xs); font-weight:600; color:var(--c-text-2); margin-bottom:4px; text-transform:uppercase; letter-spacing:.05em; }
.chore-field input[type="text"],.chore-field textarea,.chore-field input[type="date"] {
  width:100%; padding:10px 14px; border:1.5px solid var(--c-border); border-radius:var(--r-md);
  font-size:var(--fs-base); color:var(--c-text); background:var(--c-card);
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast); box-sizing:border-box; font-family:inherit;
}
.chore-field input:focus,.chore-field textarea:focus { outline:none; border-color:var(--c-primary); box-shadow:var(--sh-glow); }
.chore-field textarea { resize:vertical; min-height:56px; }
.chore-field .field-error { color:var(--c-danger); font-size:var(--fs-xs); margin-top:3px; display:none; }
.chore-field.has-error input,.chore-field.has-error textarea { border-color:var(--c-danger); }
.chore-field.has-error .field-error { display:block; }

.recurrence-section-label { font-size:var(--fs-xs); font-weight:600; color:var(--c-text-2); margin-bottom:6px; text-transform:uppercase; letter-spacing:.05em; }
.recurrence-grid { display:flex; flex-wrap:wrap; gap:var(--s-2); }

.recurrence-card {
  position:relative; display:flex; align-items:center; gap:var(--s-2);
  padding:8px 14px; border-radius:var(--r-full);
  background:var(--c-card); box-shadow:var(--sh-xs);
  cursor:pointer; transition:all .15s var(--ease); user-select:none; white-space:nowrap;
}
.recurrence-card:hover { box-shadow:var(--sh-sm); }
.recurrence-card:focus-visible { outline:2px solid var(--c-primary); outline-offset:2px; }
.recurrence-card.selected { box-shadow:var(--sh-sm); }
.recurrence-card .rc-icon { font-size:1rem; flex-shrink:0; }
.recurrence-card.selected .rc-icon { transform:scale(1.1); }
.recurrence-card .rc-label { font-size:var(--fs-sm); font-weight:600; color:var(--c-text); }
.recurrence-card .rc-desc { display:none; }
.recurrence-card .rc-check {
  width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.5); transition:all .15s var(--ease); color:#fff; flex-shrink:0;
}
.recurrence-card .rc-check svg { width:10px; height:10px; }
.recurrence-card.selected .rc-check { opacity:1; transform:scale(1); }

.recurrence-message { font-size:var(--fs-xs); color:var(--c-text-3); margin-top:var(--s-1); min-height:1.2em; }
.recurrence-message span { display:inline-block; animation:recurrenceFadeIn .2s ease forwards; }
@keyframes recurrenceFadeIn { from{opacity:0;transform:translateY(3px)} to{opacity:1;transform:translateY(0)} }

.due-date-note { font-size:var(--fs-xs); color:var(--c-primary); background:var(--c-primary-50); border-radius:var(--r-sm); padding:var(--s-2) var(--s-3); margin-top:var(--s-1); }

.quick-add-section { margin-bottom:0; }
.quick-add-label { font-size:var(--fs-2xs); font-weight:600; color:var(--c-text-3); margin-bottom:var(--s-1); text-transform:uppercase; letter-spacing:.05em; }
.quick-add-chips { display:flex; flex-wrap:wrap; gap:6px; }
.quick-add-chip {
  display:inline-flex; align-items:center; gap:3px; padding:5px 10px;
  border-radius:var(--r-full); background:var(--c-card); box-shadow:var(--sh-xs);
  font-size:var(--fs-xs); color:var(--c-text-2); cursor:pointer;
  transition:all var(--dur-fast); white-space:nowrap;
}
.quick-add-chip:hover { box-shadow:var(--sh-sm); color:var(--c-primary); }
.quick-add-chip:focus-visible { outline:2px solid var(--c-primary); outline-offset:2px; }

.chore-form-actions { display:flex; gap:var(--s-3); margin-top:var(--s-2); }
.chore-btn { flex:1; padding:12px 16px; border-radius:var(--r-md); font-size:var(--fs-base); font-weight:600; border:none; cursor:pointer; transition:all var(--dur-fast); font-family:inherit; }
.chore-btn:focus-visible { outline:2px solid var(--c-primary); outline-offset:2px; }
.chore-btn-secondary { background:var(--c-surface); color:var(--c-text-2); }
.chore-btn-secondary:hover { background:var(--c-border); }
.chore-btn-primary { background:linear-gradient(135deg,var(--c-primary),#14b8a6); color:#fff; box-shadow:0 2px 8px rgba(var(--c-primary-rgb),.2); }
.chore-btn-primary:hover { box-shadow:0 4px 16px rgba(var(--c-primary-rgb),.3); filter:brightness(1.05); }

.chores-stats { display:flex; gap:var(--s-2); font-size:var(--fs-sm); color:var(--c-text-2); margin-bottom:var(--s-4); flex-wrap:wrap; }
.chores-stats span { white-space:nowrap; }
.chores-stats .stat-sep { color:var(--c-border); }

.chores-filter-bar { display:flex; gap:var(--s-2); margin-bottom:var(--s-5); flex-wrap:wrap; }
.chores-filter-pill {
  padding:8px 16px; border-radius:var(--r-full); font-size:var(--fs-sm); font-weight:500;
  background:var(--c-card); color:var(--c-text-2); cursor:pointer;
  box-shadow:var(--sh-xs); transition:all var(--dur-fast); white-space:nowrap;
}
.chores-filter-pill:hover { box-shadow:var(--sh-sm); color:var(--c-text); }
.chores-filter-pill:focus-visible { outline:2px solid var(--c-primary); outline-offset:2px; }
.chores-filter-pill.active {
  background:linear-gradient(135deg,var(--c-primary),#14b8a6); color:#fff;
  box-shadow:0 2px 8px rgba(var(--c-primary-rgb),.25);
}

.chore-child-section { margin-bottom:var(--s-6); }
.chore-child-header { display:flex; align-items:center; gap:var(--s-3); margin-bottom:var(--s-3); }
.chore-child-avatar {
  width:34px; height:34px; border-radius:var(--r-md); background:var(--c-primary-100);
  color:var(--c-primary); display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.875rem; flex-shrink:0;
}
.chore-child-name { font-size:var(--fs-md); font-weight:700; color:var(--c-text); }

.chore-item {
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-3) var(--s-4); border-radius:var(--r-lg);
  margin-bottom:var(--s-2); background:var(--c-card); box-shadow:var(--sh-xs);
  transition:all var(--dur-fast);
}
.chore-item:hover { box-shadow:var(--sh-md); transform:translateY(-1px); }

.chore-checkbox { position:relative; width:24px; height:24px; flex-shrink:0; cursor:pointer; }
.chore-checkbox input { position:absolute; opacity:0; width:100%; height:100%; cursor:pointer; margin:0; }
.chore-checkbox .cb-circle {
  width:24px; height:24px; border-radius:50%; border:2px solid var(--c-border);
  display:flex; align-items:center; justify-content:center;
  transition:all .2s var(--ease); background:var(--c-card); pointer-events:none;
}
.chore-checkbox input:checked + .cb-circle { background:var(--c-success); border-color:var(--c-success); color:#fff; animation:checkPop .3s var(--ease); }
.chore-checkbox input:focus-visible + .cb-circle { box-shadow:0 0 0 3px rgba(22,163,74,.2); }

.chore-item-body { flex:1; min-width:0; }
.chore-item-title { font-size:var(--fs-base); font-weight:500; color:var(--c-text); }
.chore-item-title.completed { text-decoration:line-through; color:var(--c-text-3); }
.chore-badge { display:inline-block; font-size:var(--fs-xs); font-weight:600; padding:3px 10px; border-radius:var(--r-full); margin-top:3px; }

.chore-item-actions { display:flex; gap:4px; flex-shrink:0; }
.chore-action-btn {
  width:34px; height:34px; border-radius:var(--r-sm); border:none; background:transparent;
  color:var(--c-text-3); cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:all var(--dur-fast);
}
.chore-action-btn:hover { background:var(--c-surface); color:var(--c-text-2); }
.chore-action-btn.delete:hover { background:var(--c-danger-light); color:var(--c-danger); }
.chore-action-btn:focus-visible { outline:2px solid var(--c-primary); outline-offset:2px; }

.chores-empty { text-align:center; padding:var(--s-12) var(--s-6); }
.chores-empty .empty-icon { font-size:3rem; margin-bottom:var(--s-3); }
.chores-empty .empty-title { font-family:var(--font-display); font-size:var(--fs-lg); font-weight:700; color:var(--c-text); margin-bottom:var(--s-1); }
.chores-empty .empty-desc { font-size:var(--fs-sm); color:var(--c-text-3); }


/* --------------------------------------------------------------------------
   32. Dark Mode
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme:dark) {
  :root {
    --c-bg:#0c0a09; --c-surface:#1c1917; --c-card:#1c1917;
    --c-text:#fafaf9; --c-text-2:#a8a29e; --c-text-3:#78716c;
    --c-border:#292524; --c-border-light:#1f1d1b;
    --c-primary-50:rgba(13,148,136,.08); --c-primary-100:rgba(13,148,136,.15);
    --c-accent-light:rgba(232,93,4,.12);
    --c-success-light:rgba(22,163,74,.12); --c-warning-light:rgba(217,119,6,.12); --c-danger-light:rgba(220,38,38,.12);
    --sh-xs:0 1px 2px rgba(0,0,0,.15); --sh-sm:0 1px 3px rgba(0,0,0,.2);
    --sh-md:0 4px 12px rgba(0,0,0,.25); --sh-lg:0 12px 28px rgba(0,0,0,.3);
    --sh-xl:0 24px 48px rgba(0,0,0,.4);
    --sh-card:0 1px 3px rgba(0,0,0,.15), 0 0 0 1px rgba(255,255,255,.03);
    --sh-card-hover:0 8px 24px rgba(0,0,0,.25), 0 0 0 1px rgba(var(--c-primary-rgb),.15);
  }
  .bottom-nav { background:rgba(28,25,23,.85); border-top-color:rgba(41,37,36,.6); }
  .modal-overlay { background:rgba(0,0,0,.5); }
}


/* --------------------------------------------------------------------------
   33. Focus
   -------------------------------------------------------------------------- */
:focus-visible { outline:2px solid var(--c-primary); outline-offset:2px; }
button:focus:not(:focus-visible),a:focus:not(:focus-visible),input:focus:not(:focus-visible),select:focus:not(:focus-visible) { outline:none; }


/* --------------------------------------------------------------------------
   34. Print
   -------------------------------------------------------------------------- */
@media print {
  .sidebar,.bottom-nav,.toast-container,.modal-overlay { display:none!important; }
  .main-content { margin-left:0!important; padding:0!important; }
  body { background:#fff; color:#000; }
}