:root {
  --void: #0B0B0C;
  --surface: #161618;
  --raised: #1C1C1F;
  --ink: #F5F5F7;
  --muted: #A1A1A6;
  --hairline: #2C2C2E;
  --accent: #0A84FF;
  --money: #FF9F0A;
  --success: #30D158;
  --security: #8E8E93;
  --frost: rgba(28, 28, 31, 0.72);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabbar-h: 64px;
  --mini-h: 56px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--void);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}

body { min-height: 100dvh; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; }

.app {
  max-width: 720px;
  margin: 0 auto;
  min-height: 100dvh;
  position: relative;
  padding-bottom: calc(var(--tabbar-h) + var(--mini-h) + 80px + var(--safe-bottom));
}

.scroll {
  padding: 12px 20px 24px;
}

/* —— Hero —— */
.hero { margin-bottom: 20px; padding-top: 8px; }
.hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.large-title {
  font-size: clamp(32px, 8vw, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.cal-chip {
  flex-shrink: 0;
  margin-top: 6px;
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cal-chip span { color: var(--accent); }
.hero-line {
  margin-top: 10px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.35;
}
.day-strip {
  display: flex;
  gap: 6px;
  margin: 16px -20px 0;
  padding: 0 20px 4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 20px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.day-strip::-webkit-scrollbar { display: none; }
.day {
  flex: 0 0 52px;
  min-height: 64px;
  scroll-snap-align: start;
  text-align: center;
  padding: 8px 2px 6px;
  border-radius: 14px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.day.on {
  background: var(--surface);
  border-color: var(--hairline);
}
.day .d { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; }
.day.is-today .d { color: var(--accent); font-weight: 600; }
.day .n { font-size: 17px; font-weight: 600; margin-top: 4px; }
.day.on .n { color: var(--accent); }
.day .dot { width: 5px; height: 5px; border-radius: 50%; margin: 5px auto 0; background: transparent; }
.day .dot.calm { background: var(--muted); opacity: 0.7; }
.day .dot.amber { background: var(--money); }
.day:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.cal-chip { min-height: 44px; cursor: pointer; }
.cal-chip.jump { border-color: var(--accent); color: var(--accent); }

/* —— Day agenda —— */
.day-agenda { margin-top: 14px; }
.day-agenda:empty { display: none; }
.ag-h { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 6px; }
.ag-sub { font-size: 13px; font-weight: 600; color: var(--muted); margin: 14px 0 6px; }
.ag-count { font-size: 14px; color: var(--muted); margin: 0 0 8px; }
.ag-count:empty { display: none; }
.ag-quiet { font-size: 14px; color: var(--muted); margin: 0 0 4px; }
.ag-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
}
.ag-dot { flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--success); }
.ag-dot.t-attention, .ag-dot.t-due { background: var(--money); }
.ag-dot.t-watching { background: var(--muted); }
.ag-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ag-title { font-size: 15px; font-weight: 600; }
.ag-meta { font-size: 12px; color: var(--muted); }
.ag-next { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--success); text-align: right; max-width: 38%; }
.ag-next.t-attention, .ag-next.t-due { color: var(--money); }
.ag-next.t-watching { color: var(--muted); }
.ag-empty { margin-top: 4px; }
.ag-back { margin-top: 8px; min-height: 44px; width: 100%; }
#panel-home.day-mode .today-only { display: none !important; }

/* —— Sticky search —— */
.sticky-search {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(11, 11, 12, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 8px 0 4px;
  margin: 0 -4px;
  padding-left: 4px;
  padding-right: 4px;
}
.search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 12px 14px;
}
.search .icon { color: var(--muted); font-size: 14px; line-height: 1; }
.search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  font-size: 15px;
}
.search input::placeholder { color: var(--muted); }
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 20px;
}
.chip {
  font-size: 13px;
  color: var(--muted);
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 7px 12px;
  cursor: pointer;
}
.chip.on {
  color: var(--ink);
  border-color: var(--accent);
  background: rgba(10, 132, 255, 0.12);
}

/* —— Shelves —— */
.shelf { margin-bottom: 28px; }
.shelf-h {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 10px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  background: var(--raised);
}
.icon-wrap.human { color: var(--accent); }
.icon-wrap.money { color: var(--money); background: rgba(255, 159, 10, 0.12); }
.icon-wrap.security { color: var(--security); }
.icon-wrap.ok { color: var(--success); background: rgba(48, 209, 88, 0.12); }
.card-body { flex: 1; min-width: 0; }
.card-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.card-meta {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.35;
}
.cta {
  display: inline-block;
  margin-top: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
}
.cta.ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--hairline);
  padding: 9px 13px;
}
.banner {
  background: linear-gradient(180deg, #1a1610 0%, var(--surface) 100%);
  border: 1px solid rgba(255, 159, 10, 0.35);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 10px;
}
.banner-kicker {
  font-size: 12px;
  font-weight: 600;
  color: var(--money);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.banner-title { font-size: 17px; font-weight: 600; }
.banner-meta { font-size: 13px; color: var(--muted); margin-top: 4px; }
.cal-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cal-pill {
  flex: 1;
  min-width: 140px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 12px;
}
.cal-pill .when { font-size: 12px; color: var(--muted); }
.cal-pill .what { font-size: 14px; font-weight: 600; margin-top: 4px; line-height: 1.25; }

/* —— Frost mini-bar —— */
.mini {
  position: fixed;
  left: max(12px, calc(50% - 360px + 12px));
  right: max(12px, calc(50% - 360px + 12px));
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 8px);
  max-width: 696px;
  margin: 0 auto;
  background: var(--frost);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 40;
}
.mini-art {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0A84FF, #5E5CE6);
  flex-shrink: 0;
}
.mini-txt { flex: 1; min-width: 0; }
.mini-txt .t {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-txt .s { font-size: 12px; color: var(--muted); margin-top: 2px; }
.mini-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--money);
  flex-shrink: 0;
}

/* —— Tab bar —— */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding: 8px 12px calc(16px + var(--safe-bottom));
  background: rgba(11, 11, 12, 0.94);
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: center;
  gap: 0;
  align-items: flex-start;
  z-index: 50;
  max-width: 720px;
  margin: 0 auto;
}
.tab {
  text-align: center;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  width: 72px;
  background: none;
  border: none;
  padding: 0;
}
.tab.on { color: var(--accent); }
.tab .glyph { font-size: 18px; display: block; margin-bottom: 2px; line-height: 1; }

/* —— Login gate —— */
.gate-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 28px 40px;
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
}
.gate-mark {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: linear-gradient(145deg, #1C1C1F, #0B0B0C);
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
}
.gate-page h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-top: 28px;
}
.gate-page .lede {
  font-size: 15px;
  color: var(--muted);
  margin-top: 10px;
  line-height: 1.4;
  max-width: 280px;
}
.gate-form {
  width: 100%;
  max-width: 280px;
  margin-top: 36px;
  text-align: left;
}
.gate-form label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}
.gate-form input[type="password"],
.gate-form input[type="text"] {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 14px 16px;
  color: var(--ink);
  font-size: 16px;
  outline: none;
}
.gate-form input:focus { border-color: var(--accent); }
.unlock {
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  margin-top: 16px;
}
.unlock:disabled { opacity: 0.5; cursor: not-allowed; }
.gate-err {
  margin-top: 12px;
  font-size: 13px;
  color: #ff453a;
  min-height: 1.2em;
}
.gate-note {
  font-size: 12px;
  color: #555;
  margin-top: 20px;
  line-height: 1.4;
}

/* —— Panel stubs —— */
.panel { display: none; }
.panel.on { display: block; }
.panel-empty {
  padding: 48px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}
.panel-empty h2 {
  color: var(--ink);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 8px;
}

.sample-badge {
  font-size: 11px;
  color: #666;
  text-align: center;
  padding: 8px 12px 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  /* Optional 768 polish — phone 375 remains source of truth */
  .app { max-width: 1000px; }
  .tabbar { max-width: 1000px; }
  .scroll { padding: 20px 28px calc(var(--tabbar-h) + var(--mini-h) + 56px + var(--safe-bottom)); }

  /* Frost mini-bar: ~520 centered */
  .mini {
    left: max(12px, calc(50% - 260px));
    right: max(12px, calc(50% - 260px));
    max-width: 520px;
  }

  /* Hero + search + chips full width; Decide | Money+Coming up two-col */
  #panel-home .scroll {
    display: grid;
    grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr); /* ~58 / 42 */
    column-gap: 20px;
    align-items: start;
  }
  #panel-home .hero,
  #panel-home .day-agenda,
  #panel-home .sticky-search,
  #panel-home .chips {
    grid-column: 1 / -1;
  }
  #panel-home .day-agenda { max-width: 640px; }
  .day-strip { margin: 16px -28px 0; padding: 0 28px 4px; scroll-padding-inline: 28px; }
  #panel-home .scroll > .shelf:has(#decide-list) {
    grid-column: 1;
  }
  #panel-home .scroll > .shelf:has(#money-shelf),
  #panel-home .scroll > .shelf:has(#coming-up) {
    grid-column: 2;
  }

  .cal-row { display: grid; grid-template-columns: 1fr 1fr; }
  .cal-pill { min-width: 0; }

  /* Sheets / modals max ~480 centered (base also 480; phone stays full-bleed) */
  .sheet {
    max-width: 480px;
  }
}

/* —— Tappable affordances —— */
.tap {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, opacity 0.12s ease, background 0.12s ease;
}
.tap:active,
.card.tap:active,
.cal-pill.tap:active,
.banner.tap:active,
.mini.tap:active,
.cal-chip.tap:active {
  opacity: 0.85;
  transform: scale(0.985);
}
.card.tap,
.banner.tap,
.cal-pill.tap {
  cursor: pointer;
}
.day:active { opacity: 0.8; }
.cta:active { opacity: 0.9; }

/* —— Panel hint —— */
.panel-hint {
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.4;
}

/* —— Toast —— */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + var(--mini-h) + 20px + var(--safe-bottom));
  transform: translateX(-50%) translateY(12px);
  max-width: min(340px, calc(100vw - 32px));
  background: var(--raised);
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  text-align: center;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* —— Bottom sheet —— */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 90;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.sheet-backdrop.show { opacity: 1; }
.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  padding: 10px 20px calc(20px + var(--safe-bottom));
  z-index: 100;
  transform: translateY(110%);
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.2, 1);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
  max-height: min(70vh, 520px);
  overflow-y: auto;
}
.sheet.show { transform: translateY(0); }
.sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--hairline);
  margin: 4px auto 14px;
}
.sheet-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.sheet-body {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: 12px;
}
.sheet-stub {
  font-size: 11px;
  color: #666;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.sheet-close {
  width: 100%;
  background: var(--raised);
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  border-radius: 14px;
  padding: 14px;
}
.sheet-close:active { opacity: 0.85; }

[hidden] { display: none !important; }

/* Expand v1.1 — dual CTAs + watching */
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.card-actions .cta { margin-top: 0; }
.card-meta.why { color: var(--muted); opacity: 0.92; }
.icon-wrap.watching { color: var(--muted); background: rgba(142, 142, 147, 0.16); }
.watch-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.chip.watch {
  background: rgba(255, 159, 10, 0.1);
  border-color: rgba(255, 159, 10, 0.35);
  color: var(--ink);
}


/* —— Empty states —— */
.empty-state {
  margin: 12px 0 8px;
  padding: 28px 18px;
  border-radius: 16px;
  background: var(--raised);
  border: 1px solid var(--hairline);
  text-align: center;
}
.empty-state .empty-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.empty-state .empty-meta {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

/* Money loading (calm, no spinner farm) */
.empty-state.is-loading .empty-title { color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .empty-state.is-loading { animation: hq-pulse 1.6s ease-in-out infinite; }
}
@keyframes hq-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

/* Money status line (bills first pass) */
.status-line { margin-top: 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; color: var(--muted); }
.status-line.s-attention { color: var(--money); }
.status-line.s-watching { color: var(--muted); }
.status-line.s-ok { color: var(--success); }

/* Money · Recurring (calm, compact) */
.recurring { margin-top: 10px; border-radius: 16px; background: var(--raised); border: 1px solid var(--hairline); overflow: hidden; }
.recurring-sum { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; min-height: 44px; cursor: pointer; }
.recurring-sum::-webkit-details-marker { display: none; }
.recurring-sum::after { content: "›"; color: var(--muted); font-size: 18px; transition: transform 0.2s ease; }
.recurring[open] .recurring-sum::after { transform: rotate(90deg); }
.recurring-h { font-size: 15px; font-weight: 600; }
.recurring-count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--success); }
.recurring-rows { border-top: 1px solid var(--hairline); }
.rec-row { display: grid; grid-template-columns: 8px 1fr; column-gap: 12px; row-gap: 2px; align-items: center; padding: 10px 16px; min-height: 44px; }
.rec-row + .rec-row { border-top: 1px solid var(--hairline); }
.rec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); opacity: 0.8; grid-row: span 2; }
.rec-title { font-size: 14px; font-weight: 600; }
.rec-meta { font-size: 12px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .recurring-sum::after { transition: none; } }

/* DD money critique v1 */
.money-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: -2px 0 4px; }
.money-counts { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.ag-dot.t-done { background: var(--muted); opacity: 0.5; }
.ag-next.t-done { color: var(--muted); }
.ag-row.is-done .ag-title { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(142,142,147,0.6); }

/* —— Audit pass v1 —— */
.chip { min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; }
.cta { min-height: 44px; }
.sheet-close { min-height: 48px; }
.dt-status { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; color: var(--success); background: rgba(48, 209, 88, 0.12); }
.dt-status.t-attention, .dt-status.t-due { color: var(--money); background: rgba(255, 159, 10, 0.14); }
.dt-status.t-watching, .dt-status.t-done { color: var(--muted); background: rgba(142, 142, 147, 0.16); }
.dt-meta { font-size: 15px; color: var(--ink); line-height: 1.45; margin: 0 0 6px; }
.dt-extra { font-size: 13px; color: var(--muted); margin: 0 0 4px; }
.dt-cta { display: block; width: 100%; margin-top: 14px; }
.dt-foot { font-size: 12px; color: var(--muted); margin: 12px 0 4px; }
.nu-row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 4px; border-bottom: 1px solid var(--hairline); }
.nu-row:last-child { border-bottom: none; }
.nu-when { flex: 0 0 56px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; }
.nu-title { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nu-dot { flex: 0 0 6px; height: 6px; border-radius: 50%; background: var(--success); }
.nu-dot.t-attention, .nu-dot.t-due { background: var(--money); }
.nu-dot.t-watching { background: var(--muted); }
#decide-list .card.tap { cursor: pointer; }

/* —— Stop & Evaluate pass (v2) —— */
html { -webkit-text-size-adjust: 100%; }
.panel-title { margin: 8px 0 14px; }
.cal-chip.static { cursor: default; background: transparent; border-color: transparent; color: var(--muted); padding-right: 0; }
.cal-chip.jump { background: rgba(10,132,255,0.14); border-color: transparent; color: var(--accent); min-width: 72px; justify-content: center; }
.updated-line { font-size: 12px; color: var(--muted); margin-top: 4px; opacity: 0.85; }
.updated-line:empty { display: none; }
.strip-month { font-size: 13px; font-weight: 600; color: var(--ink); margin-top: 14px; min-height: 16px; }
.day-strip { margin-top: 8px; gap: 6px; scroll-snap-type: x mandatory; }
.day { flex: 0 0 calc((100% - 36px) / 7); min-height: 66px; padding: 7px 0 6px; scroll-snap-align: none; border-radius: 12px; }
.day.week-start { scroll-snap-align: start; }
.day .n { width: 30px; height: 30px; line-height: 30px; margin: 3px auto 0; border-radius: 50%; font-size: 16px; }
.day.on { background: transparent; border-color: transparent; }
.day.on .n { color: var(--ink); box-shadow: inset 0 0 0 2px var(--accent); }
.day.is-today .n { background: var(--accent); color: #fff; box-shadow: none; }
.day.is-today .d { color: var(--accent); }
.day .d.mo { color: var(--accent); font-weight: 700; }
.day.past { opacity: 0.42; }
.dot-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; color: var(--muted); margin-top: 8px; }
.dot-legend .lg { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.dot-legend .lg.amber { background: var(--money); }
.dot-legend .lg.calm { background: var(--muted); margin-left: 8px; }
#panel-home.day-mode .dot-legend { display: none; }
.ag-row.tap, .nu-row.tap, .res-row { cursor: pointer; }
button.ag-row, button.nu-row, button.res-row { width: 100%; text-align: left; font: inherit; color: inherit; }
button.nu-row { background: none; border: none; border-bottom: 1px solid var(--hairline); }
.nu-list { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 2px 10px; }
.nu-list:empty { display: none; }
.nu-rel { flex-shrink: 0; font-size: 12px; color: var(--muted); }
.source-note { font-size: 12px; color: var(--muted); margin-top: 10px; opacity: 0.8; }
.ag-empty-next { margin-top: 12px; }
.card.fading, .ag-row.fading { opacity: 0; transform: scale(0.98); transition: opacity 0.2s ease, transform 0.2s ease; }
a.cta { text-align: center; line-height: 24px; }
.see-all { width: 100%; margin-top: 2px; }
.shelf-empty { font-size: 14px; color: var(--muted); padding: 6px 0 4px; }
/* Mini-bar */
.mini { transition: transform 0.25s ease, opacity 0.25s ease; }
.mini.gone { transform: translateY(160%); opacity: 0; pointer-events: none; }
body.no-mini .toast { bottom: calc(var(--tabbar-h) + 16px + var(--safe-bottom)); }
.app { padding-bottom: calc(var(--tabbar-h) + var(--mini-h) + 40px + var(--safe-bottom)); }
body.no-mini .app { padding-bottom: calc(var(--tabbar-h) + 32px + var(--safe-bottom)); }
/* Tabs */
.tabbar { height: calc(var(--tabbar-h) + var(--safe-bottom)); padding: 0 8px var(--safe-bottom); align-items: stretch; }
.tab { flex: 1; width: auto; height: var(--tabbar-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; }
.tab svg.glyph { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin: 0; }
.tab[data-tab="more"] svg.glyph circle { fill: currentColor; stroke: none; }
.tab:active { opacity: 0.7; }
/* Toast */
.toast { display: flex; align-items: center; gap: 14px; text-align: left; }
.toast-btn { background: none; border: none; color: var(--accent); font-weight: 600; font-size: 14px; min-height: 36px; padding: 0 4px; }
/* Sheet */
.sheet { padding-top: 0; overscroll-behavior: contain; touch-action: pan-y; max-height: min(78vh, 600px); }
.sheet.dragging { transition: none; }
.sheet-grab { padding: 10px 0 6px; margin: 0 -20px; cursor: grab; touch-action: none; }
.sheet-handle { margin: 0 auto; width: 40px; height: 5px; background: #48484a; }
.sheet-x { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%; border: none; background: transparent; color: var(--muted); font-size: 15px; display: flex; align-items: center; justify-content: center; }
.sheet-x::before { content: ""; position: absolute; width: 30px; height: 30px; border-radius: 50%; background: var(--raised); z-index: -1; }
.sheet-x { z-index: 1; isolation: isolate; }
.sheet-title { padding-right: 44px; margin-top: 6px; outline: none; }
.sheet-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.sheet-actions .cta { margin-top: 0; width: 100%; min-height: 50px; font-size: 16px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.sheet-actions .cta.danger { background: #ff453a; }
.facts { border-top: 1px solid var(--hairline); margin: 6px 0 14px; }
.fact { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hairline); font-size: 15px; }
.fact .k { color: var(--muted); flex-shrink: 0; }
.fact .v { color: var(--ink); text-align: right; }
body.sheet-open { overflow: hidden; }
/* Search */
#search-form { margin-bottom: 4px; }
#search-chips { margin: 12px 0 14px; }
.res-group { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 14px 0 8px; }
.res-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; margin-bottom: 8px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; }
.res-row .icon-wrap { width: 32px; height: 32px; border-radius: 10px; font-size: 15px; }
.recent-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; background: none; border: none; border-bottom: 1px solid var(--hairline); color: var(--ink); font: inherit; font-size: 15px; text-align: left; padding: 0 4px; }
.recent-row .icon { color: var(--muted); }
.search-empty { color: var(--muted); font-size: 14px; line-height: 1.45; padding: 18px 4px; }
.search-empty strong { color: var(--ink); display: block; font-size: 16px; margin-bottom: 4px; }
/* Touch feedback */
.tap:active, .res-row:active, .nu-row:active, .recent-row:active, .ag-row.tap:active { transform: scale(0.97); opacity: 0.8; }
.cta:active, .chip:active, .day:active { transform: scale(0.97); opacity: 0.8; }
.money-foot { font-size: 12px; color: var(--muted); margin-top: 12px; }
@media (min-width: 768px) {
  .day { flex-basis: calc((100% - 36px) / 7); max-width: 84px; }
  #panel-home .dot-legend { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .mini, .sheet, .card.fading { transition: none; } }

.day-strip { margin: 8px 0 0; padding: 0 0 4px; scroll-padding-inline: 0; }
@media (min-width: 768px) { .day-strip { margin: 8px 0 0; padding: 0 0 4px; scroll-padding-inline: 0; } }

/* —— dd3 audit fixes —— */
/* 1. Toast Undo: 44px tap target without a taller toast (negative margins eat the extra height). */
.toast { padding-top: 8px; padding-bottom: 8px; min-height: 44px; }
.toast > span { padding: 4px 0; }
.toast-btn { min-height: 44px; min-width: 44px; padding: 0 10px; margin: -8px -10px -8px 0; border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* 3. Amount in sheets */
.fact .v .amt { font-variant-numeric: tabular-nums; }
.fact .v .amt-q { font-size: 12px; color: var(--muted); margin-left: 2px; }
/* 4. Home dedupe note */
.shelf-note { font-size: 13px; color: var(--muted); margin: 2px 0 8px; }
/* 5. Recent searches: row + remove X */
.recent-item { display: flex; align-items: center; border-bottom: 1px solid var(--hairline); }
.recent-item .recent-row { flex: 1; min-width: 0; border-bottom: none; }
.recent-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-x { flex: 0 0 44px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 50%; color: var(--muted); font-size: 13px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease, opacity 0.12s ease; }
.recent-x:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* 6. Pressed states (same pattern as .tap/.cta; the touchstart listener enables :active on iOS) */
.recurring-sum, .sheet-x, .toast-btn, .cal-chip.jump { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; transition: transform 0.12s ease, opacity 0.12s ease; }
.recurring-sum:active, .recurring-sum.is-pressed,
.sheet-x:active, .sheet-x.is-pressed,
.toast-btn:active, .toast-btn.is-pressed,
.cal-chip.jump:active, .cal-chip.jump.is-pressed,
.recent-x:active, .recent-x.is-pressed { transform: scale(0.97); opacity: 0.8; }
/* 7. Active tab icon goes filled; inactive stays outline */
.tab.on svg.glyph { fill: currentColor; }
.tab.on[data-tab="home"] svg.glyph path { stroke-width: 1.4; }
.tab.on[data-tab="search"] svg.glyph { stroke-width: 2.4; }
.tab.on[data-tab="search"] svg.glyph circle { fill: currentColor; fill-opacity: 0.28; }
.tab.on[data-tab="money"] svg.glyph circle { fill: #0B0B0C; stroke: #0B0B0C; stroke-width: 0.5; }
.tab.on[data-tab="more"] svg.glyph circle { stroke: currentColor; stroke-width: 1.4; }
/* 8. Week-snap filler days before today: out of range */
.day.out, .day.past.out { opacity: 0.22; pointer-events: none; cursor: default; }
.day.out:active { transform: none; opacity: 0.22; }
.day.out .dot { background: transparent !important; }
.day.out .d { color: var(--muted); }

/* DD polish: pressed lift so the press reads on dark surfaces (+6% white overlay) */
.tap:active, .res-row:active, .nu-row:active, .recent-row:active, .cta:active, .chip:active,
.day:not(.out):active, .tab:active, .sheet-close:active,
.recurring-sum:active, .recurring-sum.is-pressed, .sheet-x:active, .sheet-x.is-pressed,
.toast-btn:active, .toast-btn.is-pressed, .cal-chip.jump:active, .cal-chip.jump.is-pressed,
.recent-x:active, .recent-x.is-pressed { box-shadow: inset 0 0 0 999px rgba(255,255,255,0.06); }