:root {
  --ink: #1d2330;
  --muted: #7a7e88;
  --line: #e9e8e3;
  --paper: #fff;
  --canvas: #f7f7f4;
  --navy: #29324c;
  --blue: #dfeef8;
  --apricot: #f7e7d6;
  --plum: #6b557d;
  --lilac: #eee8f5;
}

* { box-sizing: border-box; }
html { max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; }
body {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--canvas);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 244px 1fr; }
.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  padding: 30px 22px 22px; background: #f0f0ed; border-right: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; margin: 0 11px 42px; color: var(--navy); text-decoration: none; font-size: 20px; font-weight: 780; letter-spacing: -.5px; }
.brand-mark { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 11px 11px 11px 4px; background: var(--navy); color: white; font-family: Georgia, serif; font-size: 20px; font-style: italic; box-shadow: inset 0 0 0 1px #ffffff24; }
.main-nav { display: flex; flex-direction: column; gap: 7px; }
.nav-item { display: flex; align-items: center; gap: 13px; padding: 11px 13px; border-radius: 12px; color: #6d7078; text-decoration: none; font-size: 14px; font-weight: 590; }
.nav-item span { display: grid; place-items: center; width: 20px; height: 20px; color: #92949a; font-size: 19px; line-height: 1; }
.nav-item:hover { background: #fff8; color: var(--ink); }
.nav-item.active { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px #2424240c; }
.nav-item.active span { color: var(--plum); }
.sidebar-foot { margin-top: auto; padding-top: 20px; border-top: 1px solid #ddddd8; }
.profile-row { display: flex; align-items: center; gap: 10px; padding: 5px; }
.profile-row > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.profile-row b { font-size: 13px; }
.profile-row small { color: var(--muted); font-size: 11px; }
.icon-button { border: 0; background: transparent; cursor: pointer; color: #83868d; padding: 8px; border-radius: 10px; }
.icon-button:hover { background: #fff; }

.main { min-width: 0; max-width: 100%; overflow-x: clip; }
.topbar { height: 77px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(24px, 5vw, 72px); border-bottom: 1px solid var(--line); background: #fafaf8d9; backdrop-filter: blur(15px); position: sticky; top: 0; z-index: 10; }
.family-switcher { min-width: 0; overflow: hidden; border: 0; background: none; cursor: pointer; font-size: 14px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.family-switcher span { padding-left: 6px; color: var(--muted); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.notification { position: relative; font-size: 21px; }
.notification i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #df7a69; right: 6px; top: 6px; }
.mobile-settings { display: none; }
.mobile-settings[hidden] { display: none; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 39px; padding: 0 17px; border: 0; border-radius: 11px; background: var(--navy); color: white; cursor: pointer; font-size: 13px; font-weight: 680; box-shadow: 0 3px 8px #222a4140; }
.primary-button:hover { background: #37415e; transform: translateY(-1px); }
.primary-button span { font-size: 18px; font-weight: 400; }
.add-icon { position: relative; width: 18px; height: 18px; flex: 0 0 18px; display: block; font-size: 0; line-height: 0; }
.add-icon::before, .add-icon::after { content: ''; position: absolute; left: 50%; top: 50%; border-radius: 2px; background: currentColor; transform: translate(-50%, -50%); }
.add-icon::before { width: 12px; height: 2px; }
.add-icon::after { width: 2px; height: 12px; }
.add-avatar .add-icon, .day-add .add-icon { width: 14px; height: 14px; flex-basis: 14px; margin: auto; }
.add-avatar .add-icon::before, .day-add .add-icon::before { width: 10px; }
.add-avatar .add-icon::after, .day-add .add-icon::after { height: 10px; }
.new-goal-card > .add-icon { width: 25px; height: 25px; flex-basis: 25px; }
.new-goal-card > .add-icon::before { width: 16px; }
.new-goal-card > .add-icon::after { height: 16px; }

.content { width: 100%; max-width: 1240px; margin: 0 auto; padding: 50px clamp(24px, 5vw, 72px) 70px; }
.welcome-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.eyebrow { margin: 0 0 8px; color: #9a7d64; font-size: 10px; font-weight: 760; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 9px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(32px, 4vw, 46px); font-weight: 500; letter-spacing: -1.5px; line-height: 1.08; }
.lede { margin-bottom: 0; color: var(--muted); font-size: 14px; }
.welcome-row > div, .page-head > div { min-width: 0; }
.family-stack { display: flex; padding-right: 8px; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; margin-right: -8px; border: 2px solid var(--canvas); border-radius: 50%; font-size: 10px; font-weight: 750; }
.family-stack .avatar { width: 39px; height: 39px; }
.avatar-plum { background: #dcd0e6; color: #614873; }
.avatar-coral { background: #f5d5ca; color: #9c5946; }
.avatar-mint { background: #cae5d9; color: #3d7460; }
.avatar-sun { background: #f5e2a9; color: #8a6b24; }
.add-avatar { border: 2px solid var(--canvas); background: white; color: #8e9095; cursor: pointer; font-size: 16px; }

.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.stat-card { min-height: 102px; display: flex; align-items: center; gap: 14px; position: relative; overflow: hidden; padding: 20px; border: 1px solid #ffffffaa; border-radius: 17px; }
.stat-card::after { content: ''; position: absolute; width: 80px; height: 80px; right: -20px; top: -24px; border-radius: 50%; background: #fff4; }
.stat-blue { background: var(--blue); }
.stat-apricot { background: var(--apricot); }
.stat-lilac { background: var(--lilac); }
.stat-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #fff8; color: var(--plum); font-size: 20px; }
.stat-card > span:nth-child(2) { display: flex; flex-direction: column; gap: 7px; }
.stat-card small { color: #656a75; font-size: 11px; font-weight: 630; }
.stat-card strong { font-family: Georgia, serif; font-size: 23px; font-weight: 500; }
.stat-card em { color: #737680; font-family: Inter, sans-serif; font-size: 11px; font-style: normal; font-weight: 560; }
.mini-progress { position: absolute; left: 20px; right: 20px; bottom: 14px; height: 3px; overflow: hidden; border-radius: 3px; background: #fff9; }
.mini-progress i { display: block; width: 74%; height: 100%; background: #8a729f; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(280px, .8fr); gap: 18px; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 2px 8px #29292408; }
.today-panel { min-height: 480px; padding: 26px 27px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 21px; }
.panel-head h2, .goal-card h2 { margin: 0; font-family: Georgia, serif; font-size: 23px; font-weight: 500; letter-spacing: -.3px; }
.panel-head .eyebrow { margin-bottom: 5px; }
.text-button { padding: 7px; border: 0; background: transparent; color: #806792; cursor: pointer; font-size: 11px; font-weight: 670; }
.text-button:hover { color: #543b68; }
.event-row { display: grid; grid-template-columns: 48px 3px 1fr auto; align-items: center; gap: 14px; margin-bottom: 20px; padding: 14px 14px 14px 0; border-radius: 12px; background: #faf7fc; }
.event-row time, .task-row time { color: #8a8d94; font-size: 11px; font-variant-numeric: tabular-nums; }
.event-line { align-self: stretch; border-radius: 2px; background: #c1a9d4; }
.event-copy, .task-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.event-copy b, .task-copy b { overflow-wrap: anywhere; font-size: 13px; font-weight: 660; }
.event-copy small, .task-copy small { color: var(--muted); font-size: 10px; }
.task-list { border-top: 1px solid #efeee9; }
.task-row { width: 100%; display: grid; grid-template-columns: 48px 25px 1fr auto; align-items: center; gap: 14px; min-height: 70px; padding: 8px 5px 8px 0; border: 0; border-bottom: 1px solid #efeee9; background: transparent; cursor: pointer; }
.task-row:hover { background: #fafaf7; }
.check { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #c9c9c4; border-radius: 7px; color: white; font-size: 13px; }
.task-row.is-done .check { border-color: #6b8f7c; background: #6b8f7c; }
.task-row.is-done .task-copy b { color: #999b9e; text-decoration: line-through; }
.points { padding: 5px 8px; border-radius: 7px; background: #edf4e7; color: #5c7950; font-size: 10px; font-weight: 700; }
.privacy-lock { margin-right: 5px; font-size: .78em; text-decoration: none; }

.right-rail { display: flex; flex-direction: column; gap: 18px; }
.approval-card { padding: 21px; }
.panel-head.compact { justify-content: flex-start; margin-bottom: 17px; }
.panel-head.compact h2 { font-size: 19px; }
.count-badge { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 7px; background: #f2d9d2; color: #965d50; font-size: 10px; font-weight: 750; }
.approval-item { padding: 14px; border-radius: 13px; background: #faf9f6; }
.approval-title { display: flex; align-items: center; gap: 11px; }
.approval-title > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.approval-title b { font-size: 12px; }
.approval-title small { color: var(--muted); font-size: 10px; }
.approval-actions { display: flex; gap: 7px; margin-top: 13px; }
.approve, .decline { height: 31px; border-radius: 8px; cursor: pointer; font-size: 10px; font-weight: 680; }
.approve { flex: 1; border: 0; background: #dfece6; color: #466b5c; }
.decline { width: 34px; border: 1px solid #e4e1dc; background: white; color: #9a7c75; font-size: 16px; }
.text-button.full { width: 100%; padding-top: 15px; }
.goal-card { position: relative; overflow: hidden; min-height: 218px; padding: 23px; border-radius: 18px; background: var(--navy); color: white; box-shadow: 0 8px 26px #2a324433; }
.goal-card::after { content: ''; position: absolute; width: 160px; height: 160px; right: -70px; bottom: -75px; border: 1px solid #ffffff1a; border-radius: 50%; box-shadow: 0 0 0 28px #ffffff08, 0 0 0 55px #ffffff08; }
.goal-card .eyebrow { color: #d2bedb; }
.goal-card h2 { margin-bottom: 8px; }
.goal-card p:not(.eyebrow) { color: #c7cad4; font-size: 11px; }
.goal-card p b { color: white; }
.goal-emoji { position: absolute; right: 20px; top: 18px; font-size: 27px; filter: saturate(.7); }
.goal-progress { height: 5px; margin: 20px 0 16px; overflow: hidden; border-radius: 5px; background: #ffffff22; }
.goal-progress i { display: block; width: 74%; height: 100%; border-radius: inherit; background: #d7b6a4; }
.goal-people { display: flex; align-items: center; }
.goal-people .avatar { width: 27px; height: 27px; border-color: var(--navy); font-size: 8px; }
.goal-people small { margin-left: auto; color: #ccd0db; font-size: 10px; }
.toast { position: fixed; z-index: 60; right: 24px; bottom: 24px; padding: 13px 17px; border-radius: 12px; background: #21283b; color: white; box-shadow: 0 12px 35px #1d23304a; font-size: 12px; font-weight: 650; }
.toast[hidden] { display: none; }

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 82px 1fr; }
  .sidebar { padding: 26px 12px 18px; align-items: center; }
  .brand { margin: 0 0 42px; }
  .brand > span:last-child { display: none; }
  .main-nav { width: 100%; align-items: center; }
  .nav-item { justify-content: center; width: 48px; padding: 12px; font-size: 0; }
  .nav-item span { font-size: 20px; }
  .profile-row > span:nth-child(2), .profile-row .icon-button { display: none; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid .stat-card:last-child { grid-column: span 2; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .right-rail { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .app-shell { display: block; padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  .sidebar { position: fixed; z-index: 20; top: auto; bottom: 0; width: 100%; height: calc(66px + env(safe-area-inset-bottom)); flex-direction: row; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--line); background: #f8f8f5f2; backdrop-filter: blur(14px); }
  .brand, .sidebar-foot { display: none; }
  .main-nav { width: 100%; flex-direction: row; justify-content: space-around; }
  .nav-item { width: 50px; height: 48px; padding: 0; }
  .nav-item.active { box-shadow: none; background: white; }
  .topbar { height: calc(64px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 17px 0; }
  .family-switcher { max-width: calc(100vw - 180px); }
  .header-actions { gap: 5px; }
  .mobile-settings { width: 42px; height: 42px; display: grid; place-items: center; font-size: 17px; }
  .content { padding: 30px 16px 42px; }
  .welcome-row { align-items: flex-start; }
  .family-stack { display: none; }
  .header-actions > .primary-button { width: 42px; padding: 0; font-size: 0; }
  .header-actions > .primary-button span { font-size: 20px; }
  .stats-grid { display: grid; grid-template-columns: 1fr; overflow: visible; margin-right: 0; padding-right: 0; }
  .stat-card { min-width: 0; }
  .stats-grid .stat-card:last-child { grid-column: auto; }
  .today-panel { padding: 21px 16px; }
  .right-rail { display: flex; }
  .task-row { grid-template-columns: 39px 24px 1fr auto; gap: 9px; }
  .event-row { grid-template-columns: 39px 3px 1fr; gap: 9px; }
  .event-row .avatar { display: none; }
  .panel-head .text-button { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .primary-button, .task-row, .nav-item { transition: .18s ease; }
  .stat-card, .panel { animation: rise .45s ease both; }
  .stat-card:nth-child(2) { animation-delay: .05s; }
  .stat-card:nth-child(3) { animation-delay: .1s; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* Full local application surfaces */
.bare-button { border: 0; background: transparent; cursor: pointer; text-align: left; }
.brand.bare-button { padding: 0; }
.nav-item { width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left; }
.stat-card { width: 100%; cursor: pointer; text-align: left; }
.stat-card:hover { filter: saturate(1.08); transform: translateY(-1px); }
.content { min-height: calc(100vh - 77px); }
.schedule-list { display: flex; flex-direction: column; }
.task-row { position: relative; grid-template-columns: 48px 25px minmax(0, 1fr) minmax(32px, auto) auto 28px; }
.task-row.is-pending .check { border-color: #d1aa69; background: #f2d8a5; color: #8f691e; font-size: 23px; line-height: 6px; }
.task-hit { position: absolute; z-index: 1; inset: 0 42px 0 0; border: 0; background: transparent; cursor: pointer; }
.task-avatar { width: 29px; height: 29px; margin: 0; border-color: white; }
.task-assignee-stack { display: flex; align-items: center; min-width: 29px; }
.task-assignee-stack .task-avatar { margin-right: -8px; }
.task-assignee-stack .task-avatar:last-of-type { margin-right: 0; }
.task-assignee-stack > i { min-width: 25px; height: 25px; display: grid; place-items: center; margin-left: 3px; border-radius: 50%; background: #ece9ef; color: #6e6078; font-size: 8px; font-style: normal; font-weight: 750; }
.open-avatar { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #eeede9; color: #767981; font-size: 13px; font-weight: 700; }
.row-menu { position: relative; z-index: 2; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #a0a1a4; cursor: pointer; font-size: 11px; }
.row-menu:hover { background: #f0efeb; color: #4f5360; }
.event-row { position: relative; grid-template-columns: 48px 3px minmax(0, 1fr) 32px 28px; }
.event-row .avatar { margin: 0; border-color: #faf7fc; }
.event-menu { margin-right: -8px; }
.quiet-copy { margin: 6px 0 3px; padding: 18px 10px; color: var(--muted); font-size: 11px; text-align: center; }
.approval-list { display: flex; flex-direction: column; gap: 9px; }
.card-cover { position: absolute; z-index: 2; inset: 0; border: 0; background: transparent; cursor: pointer; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 30px; }
.page-head h1 { margin-bottom: 9px; }
.page-head .primary-button { margin-bottom: 3px; }
.scope-filter { width: fit-content; max-width: 100%; display: flex; align-items: center; gap: 5px; margin: -14px 0 17px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: #efeee9; }
.scope-filter-button { min-height: 34px; padding: 0 13px; border: 0; border-radius: 9px; background: transparent; color: #747780; cursor: pointer; font-size: 12px; font-weight: 680; white-space: nowrap; }
.scope-filter-button:hover { color: var(--ink); }
.scope-filter-button.active { background: white; color: var(--ink); box-shadow: 0 1px 4px #29292412; }
.view-enter { animation: viewEnter .3s ease both; }
@keyframes viewEnter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.calendar-panel { overflow: hidden; }
.calendar-toolbar { min-height: 76px; display: flex; align-items: center; justify-content: center; gap: 20px; padding: 17px 22px; border-bottom: 1px solid var(--line); }
.calendar-toolbar > div { min-width: 250px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.calendar-toolbar strong { font-family: Georgia, serif; font-size: 18px; font-weight: 500; }
.round-button { width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 50%; background: white; cursor: pointer; color: #777b84; }
.round-button:hover { background: #f5f4f0; }
.today-link { padding: 0; border: 0; background: transparent; color: #806792; cursor: pointer; font-size: 10px; font-weight: 700; }
.week-grid { display: grid; grid-template-columns: repeat(7, minmax(112px, 1fr)); min-height: 520px; overflow-x: auto; }
.day-column { min-width: 112px; border-right: 1px solid #efeee9; background: #fff; }
.day-column:last-child { border-right: 0; }
.day-column.today-column { background: #fbfafc; }
.day-column header { min-height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-bottom: 1px solid #efeee9; }
.day-column header small { color: #8a8c92; font-size: 9px; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; }
.day-column header strong { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; font-family: Georgia, serif; font-size: 16px; font-weight: 500; }
.today-column header strong { background: var(--navy); color: white; }
.day-items { display: flex; flex-direction: column; gap: 7px; padding: 10px 7px; }
.calendar-item { position: relative; min-height: 73px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 9px; overflow: hidden; border: 0; border-radius: 10px; cursor: pointer; text-align: left; }
.calendar-item:hover { filter: brightness(.98); transform: translateY(-1px); }
.calendar-item time { color: #737680; font-size: 8px; font-weight: 720; }
.calendar-item b { display: -webkit-box; overflow: hidden; font-size: 10px; font-weight: 690; line-height: 1.32; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.calendar-item small { margin-top: auto; font-size: 8px; font-weight: 730; }
.calendar-event { background: #f0e8f6; color: #654d75; }
.calendar-task { background: #e5f0f6; color: #426b83; }
.calendar-task.private-task { background: #eee9f5; color: #624f73; box-shadow: inset 0 0 0 1px #d8cce2; }
.calendar-task.complete { background: #e3eee2; color: #52705a; box-shadow: inset 0 0 0 1px #cddfc9; opacity: .82; }
.calendar-task.complete b { text-decoration: line-through; }
.day-add { width: 100%; min-height: 30px; border: 1px dashed transparent; border-radius: 8px; background: transparent; color: #babbbd; cursor: pointer; }
.day-add:hover { border-color: #d9d6ce; background: #faf9f6; color: #656973; }
.calendar-legend { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 15px; border-top: 1px solid var(--line); color: #7c7f86; font-size: 9px; }
.calendar-legend span { display: flex; align-items: center; gap: 6px; }
.calendar-legend i { width: 8px; height: 8px; border-radius: 3px; }
.legend-event { background: #cbb3da; }.legend-task { background: #a8ccdf; }.legend-done { background: #bcc9b5; }

.expense-summary { margin-bottom: 18px; overflow: hidden; }
.expense-summary-head { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 20px; border-bottom: 1px solid var(--line); }
.expense-summary-head h2 { margin: 4px 0 0; font-family: Georgia, serif; font-size: 20px; font-weight: 500; }
.expense-summary-head > div:last-child { display: flex; align-items: center; gap: 8px; }
.expense-summary-head .today-link { min-width: 92px; }
.expense-summary-head .today-link:disabled { opacity: .38; cursor: default; }
.expense-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--line); }
.expense-totals > .quiet-copy { margin: 0; padding: 22px; background: white; }
.expense-total { min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 7px 12px; padding: 17px 20px; background: white; }
.expense-total > small { padding: 3px 6px; border-radius: 6px; background: #eee9f2; color: #715c80; font-size: 9px; font-weight: 760; }
.expense-total > strong { min-width: 0; overflow: hidden; font-family: Georgia, serif; font-size: 21px; font-weight: 500; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.expense-total > span { grid-column: 1 / -1; color: var(--muted); font-size: 10px; }
.expense-total > span b { color: #52715e; font-weight: 720; }

.list-panel { overflow: hidden; }
.list-toolbar { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 22px; border-bottom: 1px solid var(--line); }
.filter-tabs { display: flex; align-items: center; gap: 4px; }
.filter-tab { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border: 0; border-radius: 9px; background: transparent; color: #7b7e86; cursor: pointer; font-size: 10px; font-weight: 680; }
.filter-tab span { min-width: 18px; padding: 2px 5px; border-radius: 6px; background: #efeee9; color: #888b91; font-size: 8px; }
.filter-tab.active { background: var(--navy); color: white; }
.filter-tab.active span { background: #ffffff25; color: white; }
.search-box { width: min(230px, 35%); height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; background: #fbfbf9; color: #9a9b9f; }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 10px; }
.task-table-head, .task-table-row { display: grid; grid-template-columns: 115px minmax(210px, 1.4fr) minmax(145px, .8fr) 145px 58px 30px; align-items: center; gap: 16px; padding: 0 22px; }
.task-table-head { min-height: 43px; border-bottom: 1px solid #efeee9; color: #999b9f; font-size: 8px; font-weight: 730; letter-spacing: .07em; text-transform: uppercase; }
.task-table-row { min-height: 76px; border-bottom: 1px solid #efeee9; }
.task-table-row:last-child { border-bottom: 0; }
.task-table-row:hover { background: #fbfbf8; }
.date-cell, .title-cell { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.date-cell b, .title-cell b, .assignee-cell b { font-size: 11px; font-weight: 680; }
.date-cell small, .title-cell small { max-width: 100%; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.title-cell { width: 100%; padding: 10px 0; border: 0; background: transparent; cursor: pointer; text-align: left; }
.assignee-cell { display: flex; align-items: center; gap: 10px; }
.assignee-cell .avatar { width: 29px; height: 29px; margin: 0; border-color: white; }
.status-pill { display: inline-flex; padding: 6px 8px; border-radius: 8px; font-size: 8px; font-style: normal; font-weight: 730; white-space: nowrap; }
.task-status-button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 9px 5px 6px; border: 0; border-radius: 9px; cursor: pointer; font-size: 9px; font-weight: 730; white-space: nowrap; }
.task-status-button:hover { filter: brightness(.96); transform: translateY(-1px); }
.task-status-button i { width: 19px; height: 19px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 6px; background: #fff7; font-size: 11px; font-style: normal; line-height: 1; }
.task-status-button.status-pending i { font-size: 20px; line-height: 5px; }
.status-scheduled { background: #edf1f5; color: #607384; }.status-pending { background: #f7e9d0; color: #8d671d; }.status-done { background: #e4eee7; color: #52715e; }
.points-cell { color: #607e55; font-size: 10px; }
.empty-state { display: flex; flex-direction: column; align-items: center; padding: 55px 20px; text-align: center; }
.empty-state > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: #f0eef3; color: #765f88; font-size: 23px; }
.empty-state h3 { margin: 15px 0 7px; font-family: Georgia, serif; font-size: 19px; font-weight: 500; }
.empty-state p { max-width: 320px; margin-bottom: 17px; color: var(--muted); font-size: 10px; line-height: 1.55; }

.goal-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-bottom: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--line); }
.goal-summary > div { display: flex; flex-direction: column; gap: 9px; padding: 18px 21px; background: white; }
.goal-summary small { color: var(--muted); font-size: 9px; font-weight: 660; }
.goal-summary strong { font-family: Georgia, serif; font-size: 22px; font-weight: 500; }
.goal-summary em { color: var(--muted); font-family: Inter, sans-serif; font-size: 9px; font-style: normal; }
.goals-grid { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 16px; }
.goal-tile, .new-goal-card { min-height: 285px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.goal-tile { display: flex; flex-direction: column; }
.goal-tile-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.goal-big-emoji { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: #f5f1e9; font-size: 25px; }
.goal-type { color: #8e749d; font-size: 8px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.goal-tile h2, .member-card h2 { margin: 7px 0 22px; font-family: Georgia, serif; font-size: 21px; font-weight: 500; }
.goal-numbers { display: flex; align-items: baseline; gap: 5px; }
.goal-numbers b { font-family: Georgia, serif; font-size: 19px; font-weight: 500; }
.goal-numbers span { color: var(--muted); font-size: 9px; }
.goal-numbers em { margin-left: auto; color: #806792; font-size: 9px; font-style: normal; font-weight: 750; }
.tile-progress { height: 5px; margin: 10px 0 18px; overflow: hidden; border-radius: 5px; background: #eeeeda; }
.tile-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8f799f, #d1a98f); }
.goal-tile-actions { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.goal-tile-actions .text-button:disabled { opacity: .35; cursor: not-allowed; }
.secondary-button, .danger-button { min-height: 36px; padding: 0 13px; border: 1px solid var(--line); border-radius: 9px; background: white; cursor: pointer; font-size: 9px; font-weight: 690; }
.secondary-button:hover { background: #f5f4f0; }
.danger-button { border-color: #efd8d2; background: #fff8f6; color: #9a594c; }
.new-goal-card { display: flex; flex-direction: column; align-items: center; justify-content: center; border-style: dashed; background: transparent; color: #85878c; cursor: pointer; text-align: center; }
.new-goal-card:hover { border-color: #b9a8c3; background: #faf8fc; color: #675676; }
.new-goal-card > span { font-size: 25px; }.new-goal-card b { margin: 12px 0 7px; font-family: Georgia, serif; font-size: 18px; font-weight: 500; }.new-goal-card small { max-width: 185px; font-size: 9px; line-height: 1.5; }
.goal-tile.redeemed { opacity: .7; }
.redeemed-note { margin-top: auto; padding: 9px; border-radius: 9px; background: #e6efe9; color: #52735f; font-size: 9px; font-weight: 700; text-align: center; }

.family-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .7fr); gap: 18px; }
.member-grid { display: grid; grid-template-columns: repeat(2, minmax(230px, 1fr)); gap: 14px; }
.member-grid > .quiet-copy { grid-column: 1 / -1; }
.member-card { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.member-card-top { display: flex; align-items: flex-start; }
.large-avatar { width: 48px; height: 48px; margin: 0 10px 0 0; border: 0; font-size: 12px; }
.role-badge { padding: 5px 7px; border-radius: 7px; background: #f0efeb; color: #73767f; font-size: 8px; font-weight: 690; }
.member-card-top .row-menu { margin-left: auto; }
.member-card h2 { margin-bottom: 10px; }
.member-balance { display: flex; align-items: baseline; gap: 5px; padding-bottom: 18px; border-bottom: 1px solid #efeee9; }
.member-balance strong { font-family: Georgia, serif; font-size: 25px; font-weight: 500; }
.member-balance small { color: var(--muted); font-size: 9px; }
.member-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 15px; }
.member-meta span { color: var(--muted); font-size: 8px; }.member-meta span b { color: var(--ink); }
.member-meta button { padding: 0; border: 0; background: transparent; color: #806792; cursor: pointer; font-size: 8px; font-weight: 700; }
.activity-panel { padding: 21px; }
.activity-panel .panel-head h2 { font-size: 19px; }
.activity-list { display: flex; flex-direction: column; }
.activity-item { display: grid; grid-template-columns: 9px 1fr; gap: 10px; padding: 13px 0; border-bottom: 1px solid #efeee9; }
.activity-item:last-child { border-bottom: 0; }
.activity-dot { width: 8px; height: 8px; margin-top: 3px; border-radius: 50%; }
.activity-item div { display: flex; flex-direction: column; gap: 4px; }
.activity-item b { font-size: 9px; line-height: 1.35; }.activity-item small { color: #8b8e94; font-size: 8px; }.activity-item time { grid-column: 2; color: #acaeb2; font-size: 7px; }

.modal-backdrop { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 20px; overscroll-behavior: contain; background: #202536a8; backdrop-filter: blur(5px); }
.modal-backdrop[hidden] { display: none; }
.modal { position: relative; width: min(590px, 100%); min-width: 0; max-width: 100%; max-height: min(800px, calc(100vh - 40px)); max-height: min(800px, calc(100dvh - 40px)); display: flex; flex-direction: column; overflow: hidden; padding: 30px; border-radius: 20px; background: #fbfbf8; box-shadow: 0 25px 80px #1015255c; }
#modalBody { width: 100%; min-width: 0; max-width: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
#modalActions { flex: 0 0 auto; }
#modalActions:empty { display: none; }
.modal-close { position: absolute; right: 20px; top: 18px; width: 34px; height: 34px; border: 0; border-radius: 10px; background: #efeee9; color: #777a82; cursor: pointer; font-size: 19px; }
.modal h2 { margin: 0 45px 7px 0; font-family: Georgia, serif; font-size: 27px; font-weight: 500; }
.modal-copy { margin-bottom: 23px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.editor-form { width: 100%; min-width: 0; max-width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.task-step { display: contents; }
.task-stepper, .task-step-next, .task-step-back { display: none; }
.field { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.field-wide { grid-column: 1 / -1; }
.field > span { color: #6e7179; font-size: 9px; font-weight: 700; }
.field input, .field select, .field textarea { display: block; width: 100%; min-width: 0; max-width: 100%; border: 1px solid #deddd8; border-radius: 10px; outline: 0; background: white; color: var(--ink); font-size: 11px; }
.field input, .field select { height: 41px; padding: 0 12px; }
.field textarea { padding: 11px 12px; resize: vertical; line-height: 1.45; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #9179a0; box-shadow: 0 0 0 3px #8b719c16; }
.field select:disabled { background: #f1f0ed; color: #73767d; cursor: not-allowed; }
.money-fields { width: 100%; min-width: 0; max-width: 100%; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(110px, .65fr); gap: 15px; }
.assignee-picker { min-width: 0; margin: 0; overflow: hidden; border: 1px solid #deddd8; border-radius: 11px; background: white; }
.assignee-picker summary { min-height: 47px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px; cursor: pointer; list-style: none; }
.assignee-picker summary::-webkit-details-marker { display: none; }
.assignee-picker summary > span { color: #6e7179; font-size: 9px; font-weight: 700; }
.assignee-picker summary > b { min-width: 0; overflow: hidden; font-size: 12px; font-weight: 680; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.assignee-picker summary > i { color: #8b8e94; font-size: 15px; font-style: normal; transition: transform .16s ease; }
.assignee-picker[open] summary > i { transform: rotate(180deg); }
.assignee-picker[data-private="true"] summary { cursor: default; }
.assignee-picker[data-private="true"] summary > i { visibility: hidden; }
.assignee-picker[data-private="true"] .assignee-options,
.assignee-picker[data-private="true"] > small { display: none; }
.assignee-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 10px 10px; }
.assignee-choice { position: relative; min-width: 0; min-height: 40px; display: flex; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid #deddd8; border-radius: 10px; background: white; cursor: pointer; }
.assignee-choice:has(input:checked) { border-color: #9a82aa; background: #f5f1f7; box-shadow: inset 0 0 0 1px #9a82aa24; }
.assignee-choice:has(input:checked)::after { content: '✓'; margin-left: auto; color: #765887; font-size: 12px; font-weight: 800; }
.assignee-choice:has(input:focus-visible) { outline: 3px solid #8b719c33; outline-offset: 1px; }
.assignee-choice:has(input:disabled) { cursor: not-allowed; opacity: .62; }
.assignee-choice:has(input:checked:disabled) { opacity: 1; }
.assignee-choice input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.assignee-choice .avatar, .assignee-choice .open-avatar { flex: 0 0 auto; width: 25px; height: 25px; margin: 0; border: 0; }
.assignee-choice b { min-width: 0; overflow: hidden; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.assignee-picker > small { display: block; padding: 0 12px 10px; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.privacy-note { margin: 0; padding: 12px 14px; border: 1px solid #d9cee2; border-radius: 11px; background: #f4f0f7; color: #665570; font-size: .78rem; line-height: 1.45; }
.privacy-note[hidden] { display: none; }
.recurrence-mark { margin-right: 5px; color: #806792; text-decoration: none; }
.attachment-mark { margin-right: 5px; color: #617894; font-size: .92em; text-decoration: none; }
.task-copy[data-view-attachment], .event-copy[data-view-attachment] { position: relative; z-index: 2; cursor: pointer; }
.attachment-field { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.attachment-label { color: #6e7179; font-size: 9px; font-weight: 700; }
.attachment-control { width: 100%; min-width: 0; max-width: 100%; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 13px; padding: 11px; overflow: hidden; border: 1px solid #deddd8; border-radius: 12px; background: white; }
.attachment-preview { width: 92px; height: 72px; display: grid; place-items: center; overflow: hidden; border-radius: 9px; background: #efeee9; color: #92949a; font-size: 25px; }
.attachment-preview img { width: 100%; height: 100%; object-fit: cover; }
.attachment-copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.attachment-copy > b, .attachment-copy > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-copy > b { font-size: 11px; }.attachment-copy > small { color: var(--muted); font-size: 9px; }
.attachment-copy > div { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; }
.attachment-choose { min-height: 31px; display: inline-flex; align-items: center; padding: 0 11px; font-size: 9px; }
.attachment-choose input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.attachment-remove { padding: 5px 0; color: #a15f54; }
.attachment-viewer { min-height: 260px; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: #efeee9; }
.attachment-viewer img { display: block; width: 100%; max-height: min(65vh, 680px); object-fit: contain; }
.attachment-viewer:has(img:not([hidden])) .attachment-viewer-loading { display: none; }
.attachment-viewer-loading { color: var(--muted); font-size: 11px; }
.recurrence-note { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #d8cce2; border-radius: 11px; background: #f4f0f7; }
.recurrence-note > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #e9e0ef; color: #745b84; font-size: 18px; }
.recurrence-note > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.recurrence-note b { font-size: 12px; }.recurrence-note small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.emoji-field { grid-column: span 1; }.emoji-field input { font-size: 20px; }
.form-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.record-type-field { padding: 11px 12px; border: 1px solid #deddd8; border-radius: 12px; background: #f4f1f6; }
.record-type-field > span { color: #675573; }
.record-type-field select { border-color: #d5c9dc; background: #fff; font-weight: 680; }
.danger-link { justify-self: start; padding: 6px 0; border: 0; background: transparent; color: #ad6052; cursor: pointer; font-size: 9px; font-weight: 680; }
.type-chooser { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.type-chooser button { min-height: 120px; display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; align-items: center; gap: 4px 12px; padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: white; cursor: pointer; text-align: left; }
.type-chooser button:hover { border-color: #c8b8d1; background: #fcf9fd; }
.type-chooser button > span { grid-row: span 2; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #f0ebf4; color: #735b84; font-size: 20px; }
.type-chooser b { align-self: end; font-size: 11px; }.type-chooser small { align-self: start; color: var(--muted); font-size: 8px; }
.settings-card { display: flex; align-items: center; gap: 13px; padding: 15px; border: 1px solid #d7e7dc; border-radius: 13px; background: #eef6f1; }
.settings-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: #d4e7da; color: #4e765d; }
.settings-card div { display: flex; flex-direction: column; gap: 3px; }.settings-card b { font-size: 10px; }.settings-card small { color: #6e8576; font-size: 8px; }
.settings-name { margin-top: 17px; }
.settings-actions { display: flex; gap: 8px; margin-top: 18px; }
.settings-hint { margin: 18px 0 0; padding-top: 15px; border-top: 1px solid var(--line); color: #96989d; font-size: 8px; line-height: 1.55; }
.theme-picker { margin: 0 0 14px; padding: 0; border: 0; }
.theme-picker legend { margin-bottom: 9px; color: #6e7179; font-size: 13px; font-weight: 720; }
.theme-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.theme-option { position: relative; min-width: 0; min-height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 9px; border: 1px solid #deddd8; border-radius: 12px; background: white; cursor: pointer; text-align: center; }
.theme-option:hover { border-color: #c8b8d1; background: #fcf9fd; }
.theme-option:has(input:checked) { border-color: #9179a0; background: #f4f0f7; box-shadow: inset 0 0 0 1px #9179a033; }
.theme-option:has(input:focus-visible) { outline: 3px solid #8b719c33; outline-offset: 2px; }
.theme-option input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.theme-option span { color: #735b84; font-size: 19px; line-height: 1; }
.theme-option b { overflow: hidden; font-size: 13px; font-weight: 690; text-overflow: ellipsis; white-space: nowrap; }
.theme-picker > small { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.modal-open { overflow: hidden; }
.noscript { margin: 40px; font-family: sans-serif; }

@media (max-width: 1040px) {
  .goals-grid { grid-template-columns: repeat(2, 1fr); }
  .task-table-head, .task-table-row { grid-template-columns: 95px minmax(180px, 1.4fr) minmax(120px, .8fr) 120px 45px 28px; gap: 10px; padding-left: 16px; padding-right: 16px; }
  .family-layout { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .page-head { align-items: flex-start; }
  .list-toolbar { align-items: stretch; flex-direction: column; }
  .filter-tabs { flex-wrap: wrap; overflow: visible; }
  .filter-tab { flex: 1 1 90px; justify-content: center; }
  .search-box { width: 100%; }
  .task-table-head { display: none; }
  .task-table { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px; }
  .task-table-row { position: relative; min-height: 180px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 13px; }
  .task-table-row .row-menu { position: absolute; right: 10px; top: 10px; }
  .task-table-row .title-cell { order: -1; padding-right: 25px; }
  .assignee-cell { margin-top: auto; }
  .points-cell { position: absolute; right: 15px; bottom: 18px; }
  .goal-summary { grid-template-columns: 1fr; }
  .goals-grid { grid-template-columns: 1fr 1fr; }
  .member-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .task-row { grid-template-columns: 39px 24px minmax(0, 1fr) auto 27px; }
  .task-row .task-assignee-stack, .task-row .open-avatar { display: none; }
  .event-row { grid-template-columns: 39px 3px minmax(0, 1fr) 28px; }
  .event-row .event-menu { display: block; }
  .page-head { margin-bottom: 22px; }
  .scope-filter { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -8px; }
  .scope-filter-button { width: 100%; min-height: 40px; padding: 0 8px; font-size: 13px; }
  .page-head .primary-button { width: 42px; padding: 0; font-size: 0; }
  .page-head .primary-button span { font-size: 20px; }
  .calendar-panel { margin-left: -16px; margin-right: -16px; border-left: 0; border-right: 0; border-radius: 0; }
  .calendar-toolbar { gap: 10px; padding: 14px 10px; }
  .calendar-toolbar > div { min-width: 0; flex: 1; }
  .calendar-toolbar strong { font-size: 16px; white-space: nowrap; }
  .round-button { flex: 0 0 auto; width: 40px; height: 40px; }
  .week-grid { grid-template-columns: repeat(7, minmax(124px, 1fr)); overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .day-column { scroll-snap-align: start; }
  .calendar-legend { flex-wrap: wrap; gap: 8px 16px; }
  .expense-summary-head { align-items: stretch; flex-direction: column; gap: 12px; padding: 15px 16px; }
  .expense-summary-head > div:last-child { justify-content: space-between; }
  .expense-summary-head .today-link { flex: 1; }
  .expense-totals { grid-template-columns: 1fr; }
  .expense-total { padding: 15px 16px; }
  .list-toolbar { padding: 14px 16px; }
  .task-table { grid-template-columns: 1fr; }
  .task-table-row { min-height: 164px; }
  .task-table-row .task-status-button { max-width: calc(100% - 70px); }
  .assignee-cell { min-width: 0; max-width: 100%; }
  .assignee-cell b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .goals-grid, .member-grid { grid-template-columns: 1fr; }
  .goal-summary { display: grid; overflow: hidden; }
  .goal-summary > div { min-width: 0; }
  .modal-backdrop { align-items: end; padding: 0; }
  .modal { width: 100%; max-height: 94vh; max-height: 94dvh; padding: 22px 20px 0; border-radius: 20px 20px 0 0; }
  #modalBody { padding-bottom: calc(20px + env(safe-area-inset-bottom)); scrollbar-gutter: auto; }
  #modalActions { margin: 0 -20px; }
  .modal h2 { font-size: 24px; }
  .modal-copy { margin-bottom: 18px; font-size: 12px; }
  .editor-form { grid-template-columns: minmax(0, 1fr); }
  .modal:has(.task-editor-form) .modal-copy { margin-bottom: 12px; }
  .task-stepper { width: 100%; min-width: 0; display: flex; align-items: center; gap: 5px; margin: 0 0 16px; color: var(--muted); }
  .task-stepper > span { min-width: 0; display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 680; line-height: 1.15; }
  .task-stepper > span i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #e8e7e3; color: #777a82; font-size: 11px; font-style: normal; }
  .task-stepper > span.active { color: var(--ink); }
  .task-stepper > span.active i { background: var(--navy); color: white; }
  .task-stepper > b { min-width: 8px; height: 1px; flex: 1; background: var(--line); }
  .task-step { width: 100%; min-width: 0; max-width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .task-editor-form[data-task-step="1"] [data-task-step-panel="2"],
  .task-editor-form[data-task-step="2"] [data-task-step-panel="1"] { display: none; }
  .field-wide, .emoji-field { grid-column: 1; }
  .field > span, .assignee-picker summary > span { font-size: 12px; }
  .field input, .field select { min-width: 0; height: 46px; font-size: 16px; }
  .field textarea { min-width: 0; font-size: 16px; }
  .attachment-control { grid-template-columns: 82px minmax(0, 1fr); }
  .attachment-preview { width: 82px; height: 72px; }
  .assignee-picker summary { min-height: 46px; }
  .assignee-picker summary > b { font-size: 14px; }
  .assignee-choice { min-height: 43px; }
  .assignee-choice b { font-size: 13px; }
  .recurrence-note { grid-template-columns: 34px minmax(0, 1fr); }
  .recurrence-note .text-button { grid-column: 1 / -1; min-height: 40px; border: 1px solid var(--line); border-radius: 9px; }
  .form-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 0; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fbfbf8f5; box-shadow: 0 -10px 24px #29324c12; backdrop-filter: blur(12px); }
  .form-actions.has-danger { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .form-actions > span:empty { display: none; }
  .form-actions.has-danger .danger-link { grid-column: 1 / -1; min-height: 34px; padding: 0 8px; font-size: 13px; }
  .form-actions .secondary-button, .form-actions .primary-button { width: 100%; min-height: 46px; padding: 0 12px; font-size: 14px; }
  #modalActions[data-task-wizard-step="1"] .task-save,
  #modalActions[data-task-wizard-step="1"] .task-step-back,
  #modalActions[data-task-wizard-step="1"] .task-delete,
  #modalActions[data-task-wizard-step="2"] .task-cancel,
  #modalActions[data-task-wizard-step="2"] .task-step-next { display: none; }
  #modalActions[data-task-wizard-step="1"] .task-cancel,
  #modalActions[data-task-wizard-step="1"] .task-step-next,
  #modalActions[data-task-wizard-step="2"] .task-step-back,
  #modalActions[data-task-wizard-step="2"] .task-save { display: block; }
  #modalActions[data-task-wizard-step="1"] .task-form-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #modalActions[data-task-wizard-step="2"] .task-form-actions:not(.has-danger) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .type-chooser { grid-template-columns: 1fr; }
  .type-chooser button { min-height: 90px; }
  .assignee-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toast { left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); text-align: center; }
}

.setup-screen {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 5vh auto 0;
  padding: clamp(32px, 6vw, 64px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: white;
  box-shadow: 0 18px 60px #252a3820;
  text-align: center;
}
.setup-mark, .onboarding-mark { display: grid; place-items: center; border-radius: 18px 18px 18px 5px; background: var(--navy); color: white; font-family: Georgia, serif; font-style: italic; }
.setup-mark { width: 60px; height: 60px; margin-bottom: 25px; font-size: 35px; }
.setup-screen h1 { margin-bottom: 14px; }
.setup-screen > p:not(.eyebrow) { max-width: 560px; margin-bottom: 30px; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.setup-screen > .primary-button { min-height: 44px; margin: 27px 0 8px; padding: 0 22px; font-size: .9rem; }
.setup-screen > .text-button { font-size: .85rem; }
.setup-points { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--line); text-align: left; }
.setup-points > span { display: flex; flex-direction: column; gap: 6px; padding: 17px; background: #fafaf8; }
.setup-points b { font-size: .9rem; }.setup-points small { color: var(--muted); font-size: .78rem; line-height: 1.45; }
.onboarding-mark { width: 44px; height: 44px; margin-bottom: 20px; font-size: 26px; }
.onboarding-form .field > span { font-size: .82rem; }
.onboarding-form .field input { min-height: 46px; font-size: .95rem; }
.onboarding-note { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid #dce8df; border-radius: 12px; background: #f1f7f3; }
.onboarding-note > span { font-size: 18px; }
.onboarding-note p { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.onboarding-note b { font-size: .86rem; }.onboarding-note small { color: #65776a; font-size: .78rem; line-height: 1.45; }
.backup-card { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.backup-card > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #eee9f2; color: #715c80; font-size: 18px; }
.backup-card > div { display: flex; flex: 1; flex-direction: column; gap: 3px; }
.backup-card b { font-size: .86rem; }.backup-card small { color: var(--muted); font-size: .76rem; }
.backup-card .text-button { font-size: .78rem; }
.settings-actions { flex-wrap: wrap; }
.settings-actions button { min-height: 40px; font-size: .8rem; }
.settings-hint { font-size: .78rem; }

@media (max-width: 640px) {
  .setup-screen { margin-top: 0; padding: 30px 20px; border-radius: 18px; }
  .setup-points { grid-template-columns: 1fr; }
  .onboarding-form .field input, .onboarding-form .field select { font-size: 16px; }
  .onboarding-actions { grid-template-columns: 1fr; }
  .onboarding-actions > * { width: 100%; }
  .settings-card, .backup-card { align-items: flex-start; flex-wrap: wrap; }
  .settings-card > div, .backup-card > div { min-width: 0; }
  .backup-card .text-button { width: 100%; text-align: center; }
  .settings-actions { display: grid; grid-template-columns: 1fr; }
}

/* Device-local color theme */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f3f1f6;
  --muted: #a9acb7;
  --line: #373b49;
  --paper: #20242f;
  --canvas: #141720;
  --navy: #465372;
  --blue: #24394a;
  --apricot: #49382e;
  --plum: #c4a6d5;
  --lilac: #3b3147;
}

[data-theme="dark"] .sidebar { background: #191c25; }
[data-theme="dark"] .brand { color: #f0edf4; }
[data-theme="dark"] .brand-mark { background: #596684; }
[data-theme="dark"] .nav-item { color: #aeb1bb; }
[data-theme="dark"] .nav-item span { color: #8f93a0; }
[data-theme="dark"] .nav-item:hover,
[data-theme="dark"] .icon-button:hover { background: #2a2e3a; color: #f3f1f6; }
[data-theme="dark"] .nav-item.active { background: #292d39; color: #fff; }
[data-theme="dark"] .sidebar-foot { border-color: #343844; }
[data-theme="dark"] .topbar { background: #191c25e8; }
[data-theme="dark"] .family-switcher { color: #f3f1f6; }
[data-theme="dark"] .primary-button { background: #566583; box-shadow: 0 4px 14px #090b1166; }
[data-theme="dark"] .primary-button:hover { background: #657594; }
[data-theme="dark"] .eyebrow { color: #d0aa86; }
[data-theme="dark"] .text-button { color: #c7a8d8; }
[data-theme="dark"] .text-button:hover { color: #e0c5ed; }
[data-theme="dark"] .stat-card { border-color: #ffffff12; }
[data-theme="dark"] .stat-card::after { background: #ffffff08; }
[data-theme="dark"] .stat-icon { background: #ffffff12; color: #d4bce0; }
[data-theme="dark"] .stat-card small,
[data-theme="dark"] .stat-card em { color: #b6b9c3; }
[data-theme="dark"] .mini-progress { background: #ffffff18; }
[data-theme="dark"] .add-avatar { background: #2a2e39; color: #c6c9d1; }
[data-theme="dark"] .task-avatar,
[data-theme="dark"] .assignee-cell .avatar,
[data-theme="dark"] .event-row .avatar { border-color: #292d38; }
[data-theme="dark"] .panel { box-shadow: 0 3px 14px #080a0f33; }
[data-theme="dark"] .event-row { background: #292531; }
[data-theme="dark"] .event-line { background: #9577a9; }
[data-theme="dark"] .task-list,
[data-theme="dark"] .task-row,
[data-theme="dark"] .task-table-head,
[data-theme="dark"] .task-table-row,
[data-theme="dark"] .activity-item,
[data-theme="dark"] .member-balance { border-color: var(--line); }
[data-theme="dark"] .task-row:hover,
[data-theme="dark"] .task-table-row:hover { background: #252934; }
[data-theme="dark"] .check { border-color: #686d79; }
[data-theme="dark"] .task-row.is-done .task-copy b { color: #8f939e; }
[data-theme="dark"] .points { background: #263a30; color: #9fc7a7; }
[data-theme="dark"] .approval-item { background: #272a34; }
[data-theme="dark"] .count-badge { background: #4a302e; color: #e2aaa1; }
[data-theme="dark"] .approve { background: #294136; color: #b4ddc6; }
[data-theme="dark"] .decline { border-color: var(--line); background: #272b36; color: #d8a49b; }
[data-theme="dark"] .goal-card { background: #303952; }
[data-theme="dark"] .goal-card p:not(.eyebrow),
[data-theme="dark"] .goal-people small { color: #c9cbd4; }
[data-theme="dark"] .toast { background: #3b4257; box-shadow: 0 12px 35px #05070b80; }

[data-theme="dark"] .open-avatar,
[data-theme="dark"] .task-assignee-stack > i { background: #343844; color: #c2c5ce; }
[data-theme="dark"] .row-menu { color: #9da1ad; }
[data-theme="dark"] .row-menu:hover { background: #303440; color: #fff; }
[data-theme="dark"] .scope-filter { background: #292d37; }
[data-theme="dark"] .scope-filter-button { color: #b6b9c2; }
[data-theme="dark"] .scope-filter-button.active { background: #3a404d; color: #fff; box-shadow: 0 1px 5px #080a0f66; }
[data-theme="dark"] .round-button { border-color: var(--line); background: #282c37; color: #c6c8d0; }
[data-theme="dark"] .round-button:hover { background: #333845; }
[data-theme="dark"] .day-column { border-color: var(--line); background: var(--paper); }
[data-theme="dark"] .day-column.today-column { background: #252833; }
[data-theme="dark"] .day-column header { border-color: var(--line); }
[data-theme="dark"] .calendar-event { background: #3c3048; color: #d8bfe5; }
[data-theme="dark"] .calendar-task { background: #293f4e; color: #b5d7e8; }
[data-theme="dark"] .calendar-task.private-task { background: #3a3045; color: #d7c3e2; box-shadow: inset 0 0 0 1px #584764; }
[data-theme="dark"] .calendar-task.complete { background: #293d31; color: #b5d6bc; box-shadow: inset 0 0 0 1px #405b47; }
[data-theme="dark"] .day-add:hover { border-color: #565b67; background: #292d38; color: #d5d7dd; }
[data-theme="dark"] .calendar-legend { border-color: var(--line); }
[data-theme="dark"] .legend-event { background: #9f7db4; }
[data-theme="dark"] .legend-task { background: #6fa1ba; }
[data-theme="dark"] .legend-done { background: #759a7d; }
[data-theme="dark"] .expense-totals { background: var(--line); }
[data-theme="dark"] .expense-totals > .quiet-copy,
[data-theme="dark"] .expense-total { background: var(--paper); }
[data-theme="dark"] .expense-total > small { background: #352f3e; color: #cfb5dc; }
[data-theme="dark"] .expense-total > span b { color: #aad0b4; }

[data-theme="dark"] .filter-tab { color: #b5b8c1; }
[data-theme="dark"] .filter-tab span { background: #30343f; color: #b6b9c2; }
[data-theme="dark"] .filter-tab.active { background: #566583; color: #fff; }
[data-theme="dark"] .search-box { border-color: var(--line); background: #1b1f29; color: #969aa6; }
[data-theme="dark"] .status-scheduled { background: #303744; color: #bdc8d3; }
[data-theme="dark"] .status-pending { background: #483a25; color: #e4bd72; }
[data-theme="dark"] .status-done { background: #2b4134; color: #aad0b4; }
[data-theme="dark"] .empty-state > span { background: #332d3c; color: #c5a8d4; }
[data-theme="dark"] .goal-summary { background: var(--line); }
[data-theme="dark"] .goal-summary > div,
[data-theme="dark"] .goal-tile,
[data-theme="dark"] .member-card { background: var(--paper); }
[data-theme="dark"] .goal-big-emoji { background: #34303a; }
[data-theme="dark"] .tile-progress { background: #383a32; }
[data-theme="dark"] .secondary-button { border-color: var(--line); background: #282c37; color: #eceaf0; }
[data-theme="dark"] .secondary-button:hover { background: #333845; }
[data-theme="dark"] .danger-button { border-color: #65443e; background: #382724; color: #e3a398; }
[data-theme="dark"] .new-goal-card { border-color: #424653; color: #b2b5bf; }
[data-theme="dark"] .new-goal-card:hover { border-color: #826d8e; background: #26222c; color: #d3bddf; }
[data-theme="dark"] .redeemed-note { background: #293e32; color: #acd1b6; }
[data-theme="dark"] .role-badge { background: #30343f; color: #bec1ca; }

[data-theme="dark"] .modal { background: #1d212b; box-shadow: 0 25px 80px #05070ba6; }
[data-theme="dark"] .modal-close { background: #30343f; color: #c3c6cf; }
[data-theme="dark"] .field > span,
[data-theme="dark"] .assignee-picker summary > span,
[data-theme="dark"] .theme-picker legend { color: #bfc1c9; }
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea { border-color: #414653; background: #171a22; color: #f3f1f6; }
[data-theme="dark"] .field input:focus,
[data-theme="dark"] .field select:focus,
[data-theme="dark"] .field textarea:focus { border-color: #aa8fba; box-shadow: 0 0 0 3px #aa8fba24; }
[data-theme="dark"] .field select:disabled { background: #292d37; color: #9da0aa; }
[data-theme="dark"] .assignee-picker { border-color: #414653; background: #242832; }
[data-theme="dark"] .assignee-picker summary > i { color: #aeb1bb; }
[data-theme="dark"] .assignee-choice { border-color: #414653; background: #242832; }
[data-theme="dark"] .assignee-choice:has(input:checked) { border-color: #a489b4; background: #352e3e; }
[data-theme="dark"] .assignee-choice:has(input:checked)::after { color: #d0b6dd; }
[data-theme="dark"] .privacy-note { border-color: #594965; background: #302939; color: #d8c4e1; }
[data-theme="dark"] .recurrence-mark { color: #c7a8d8; }
[data-theme="dark"] .attachment-mark { color: #a9c2dc; }
[data-theme="dark"] .attachment-control { border-color: #414653; background: #242832; }
[data-theme="dark"] .attachment-preview,
[data-theme="dark"] .attachment-viewer { background: #171a22; color: #9da0aa; }
[data-theme="dark"] .attachment-label { color: #bfc1c9; }
[data-theme="dark"] .recurrence-note { border-color: #594965; background: #302939; }
[data-theme="dark"] .recurrence-note > span { background: #403549; color: #d4bbe0; }
[data-theme="dark"] .record-type-field { border-color: #4c4156; background: #2c2733; }
[data-theme="dark"] .record-type-field > span { color: #d0b7dc; }
[data-theme="dark"] .record-type-field select { border-color: #5a4c64; background: #1b1e27; }
[data-theme="dark"] .form-actions { border-color: var(--line); background: #1d212bf2; box-shadow: 0 -10px 24px #090b113d; }
[data-theme="dark"] .task-stepper > span i { background: #30343f; color: #b6b9c2; }
[data-theme="dark"] .task-stepper > span.active i { background: #566583; color: white; }
[data-theme="dark"] .danger-link { color: #e29b90; }
[data-theme="dark"] .type-chooser button { border-color: var(--line); background: #242832; }
[data-theme="dark"] .type-chooser button:hover { border-color: #765f83; background: #2c2632; }
[data-theme="dark"] .type-chooser button > span { background: #352e3e; color: #d3b8df; }

[data-theme="dark"] .theme-option { border-color: #414653; background: #242832; }
[data-theme="dark"] .theme-option:hover { border-color: #786584; background: #2c2733; }
[data-theme="dark"] .theme-option:has(input:checked) { border-color: #aa8fba; background: #352e3e; box-shadow: inset 0 0 0 1px #aa8fba33; }
[data-theme="dark"] .theme-option span { color: #d4bbe0; }
[data-theme="dark"] .settings-card { border-color: #3e5948; background: #23342a; }
[data-theme="dark"] .settings-icon { background: #304b39; color: #abd0b5; }
[data-theme="dark"] .settings-card small { color: #a9c1b0; }
[data-theme="dark"] .backup-card { border-color: var(--line); background: #242832; }
[data-theme="dark"] .backup-card > span { background: #352f3e; color: #cfb5dc; }
[data-theme="dark"] .setup-screen { border-color: var(--line); background: var(--paper); box-shadow: 0 18px 60px #05070b66; }
[data-theme="dark"] .setup-points { border-color: var(--line); background: var(--line); }
[data-theme="dark"] .setup-points > span { background: #252934; }
[data-theme="dark"] .onboarding-note { border-color: #3c5646; background: #24342a; }
[data-theme="dark"] .onboarding-note small { color: #aac0b1; }

@media (max-width: 640px) {
  [data-theme="dark"] .sidebar { background: #191c25f2; }
}