/* ---- Auth Banner ---- */
#auth-banner {
  background: color-mix(in srgb, var(--color-error) 10%, transparent);
  border: 1px solid var(--danger);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
  display: none;
  gap: 12px;
}

#auth-banner.show {
  display: flex;
}

#auth-email-input,
#auth-password-input {
  flex: 1;
}

.avatar-bubble {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(106, 92, 255, 0.22),
    rgba(52, 211, 153, 0.18)
  );
  border: 1px solid var(--border);
  font-size: 1.2rem;
  flex-shrink: 0;
}

.dashboard-score-card {
  min-width: 240px;
  border: 1px solid var(--border);
  background: var(--surface2);
  border-radius: 14px;
  padding: 12px 14px;
  display: grid;
  gap: 8px;
}

.dashboard-score-card.spotlight {
  position: relative;
  animation: dashboardCardGlow 3.8s ease-in-out infinite;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-brand) 12%, transparent);
}

.dashboard-score-card.admin {
  border-color: rgba(255, 214, 102, 0.35);
  background: linear-gradient(
    180deg,
    rgba(255, 214, 102, 0.08),
    rgba(255, 255, 255, 0.02)
  );
}

@keyframes dashboardCardGlow {
  0%,
  100% {
    transform: translateY(0);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--color-brand) 10%, transparent),
      0 10px 24px rgba(0, 0, 0, 0.18);
  }

  50% {
    transform: translateY(-2px);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--color-brand) 18%, transparent),
      0 14px 30px color-mix(in srgb, var(--color-brand) 14%, transparent);
  }
}

.dashboard-score-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dashboard-user-name {
  display: inline-block;
  min-width: 0;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-user-name.admin {
  font-weight: 800;
}

.dashboard-score-value {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text);
}

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

.dashboard-score-item {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.dashboard-score-item .label {
  color: var(--muted);
  font-size: 0.72rem;
  margin-bottom: 4px;
}

.dashboard-score-item .value {
  font-size: 1rem;
  font-weight: 700;
}

.dashboard-stat-link {
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.dashboard-stat-link:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--color-brand) 28%, transparent);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
}

.dashboard-stat-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-brand) 60%, transparent);
  outline-offset: 2px;
}

.dashboard-top-grid {
  display: grid;
  gap: 16px;
  margin-bottom: 22px;
}

.demo-hero {
  border: 1px solid color-mix(in srgb, var(--color-brand) 28%, transparent);
  background:
    radial-gradient(
      circle at top right,
      color-mix(in srgb, var(--color-success) 12%, transparent),
      transparent 38%
    ),
    radial-gradient(
      circle at bottom left,
      color-mix(in srgb, var(--color-brand) 16%, transparent),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-brand) 10%, transparent),
      rgba(255, 255, 255, 0.02)
    );
  border-radius: 18px;
  padding: 22px;
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
}

.demo-hero-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.demo-hero-title {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
  max-width: 700px;
}

.demo-hero-copy {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
  max-width: 620px;
}

.demo-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-brand) 30%, transparent);
  background: color-mix(in srgb, var(--color-brand) 10%, transparent);
  color: #ddd8ff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.demo-hero-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.demo-hero-stat {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.03);
}

.demo-hero-stat .label {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  margin-bottom: 6px;
}

.demo-hero-stat .value {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
}

.demo-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

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

.demo-mini-card {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.03);
}

.demo-mini-label {
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  margin-bottom: 4px;
}

.demo-mini-value {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
}

.demo-readonly-note {
  color: var(--muted);
  font-size: 0.8rem;
}

.leaderboard-card {
  border: 1px solid var(--border);
  background: var(--surface2);
  border-radius: 14px;
  padding: 14px;
  display: grid;
  gap: 12px;
}

.leaderboard-title {
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.leaderboard-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.leaderboard-header .leaderboard-title {
  flex: 0 0 auto;
}

.leaderboard-collapsed-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

.leaderboard-preview-item {
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.leaderboard-preview-item.gold {
  border-color: rgba(255, 214, 102, 0.2);
}

.leaderboard-preview-item.silver {
  border-color: rgba(203, 213, 225, 0.18);
}

.leaderboard-preview-item.bronze {
  border-color: rgba(212, 163, 115, 0.18);
}

.leaderboard-preview-item.me {
  border-color: rgba(110, 89, 255, 0.55);
  box-shadow:
    0 0 0 1px rgba(110, 89, 255, 0.22),
    0 0 18px rgba(110, 89, 255, 0.12);
  animation: leaderboardGlow 3.2s ease-in-out infinite;
}

.leaderboard-preview-item.you-tile {
  border-style: dashed;
  border-color: rgba(110, 89, 255, 0.4);
  background: rgba(110, 89, 255, 0.06);
}

.leaderboard-preview-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.leaderboard-preview-rank {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  min-width: 28px;
}

.leaderboard-preview-rank.gold {
  color: #ffd666;
}

.leaderboard-preview-rank.silver {
  color: #cbd5e1;
}

.leaderboard-preview-rank.bronze {
  color: #d4a373;
}

.leaderboard-preview-name {
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leaderboard-preview-score {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text);
  min-width: fit-content;
}

@keyframes leaderboardGlow {
  0%,
  100% {
    border-color: rgba(110, 89, 255, 0.45);
    box-shadow:
      0 0 0 1px rgba(110, 89, 255, 0.2),
      0 0 10px rgba(110, 89, 255, 0.08);
  }

  50% {
    border-color: rgba(110, 89, 255, 0.72);
    box-shadow:
      0 0 0 1px rgba(110, 89, 255, 0.26),
      0 0 18px rgba(110, 89, 255, 0.18);
  }
}

.leaderboard-header .btn {
  flex: 0 0 auto;
  margin-left: auto;
}

.leaderboard-mobile-surface {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

.leaderboard-list {
  display: grid;
  gap: 12px;
}

.leaderboard-podium {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.leaderboard-rest {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.leaderboard-row {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 14px;
  padding: 14px;
  display: grid;
  gap: 12px;
  width: 100%;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.leaderboard-row.me {
  border-color: color-mix(in srgb, var(--color-brand) 32%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-brand) 10%, transparent),
    rgba(255, 255, 255, 0.02)
  );
  box-shadow: 0 14px 30px color-mix(in srgb, var(--color-brand) 16%, transparent);
  transform: translateY(-2px);
}

.leaderboard-rank {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.leaderboard-rank.gold {
  color: #ffd666;
}

.leaderboard-rank.silver {
  color: #cbd5e1;
}

.leaderboard-rank.bronze {
  color: #d4a373;
}

.leaderboard-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.leaderboard-user-text {
  min-width: 0;
}

.leaderboard-user-name {
  font-size: 0.95rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-user-meta {
  color: var(--muted);
  font-size: 0.74rem;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leaderboard-score {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.leaderboard-row.compact {
  border-radius: 12px;
  padding: 10px 12px;
  gap: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.leaderboard-row.compact .leaderboard-rank {
  position: static;
  min-width: 34px;
  font-size: 0.78rem;
}

.leaderboard-row.compact .leaderboard-user {
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.leaderboard-row.compact .avatar-bubble {
  width: 30px;
  height: 30px;
  font-size: 0.95rem;
}

.leaderboard-row.compact .leaderboard-user-meta {
  display: none;
}

.leaderboard-row.compact .leaderboard-score {
  min-width: fit-content;
  margin-left: 10px;
}

.leaderboard-row.compact .leaderboard-score-value {
  font-size: 1rem;
}

.leaderboard-row.compact .leaderboard-score-label {
  display: none;
}

.leaderboard-score-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
}

.leaderboard-score-label {
  color: var(--muted);
  font-size: 0.72rem;
}

.table-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Accounts dashboard (Phase 2): compact toolbar that wraps on narrow
   viewports without any button stretching to full width. */
.accounts-card-header {
  flex-wrap: wrap;
  gap: 10px;
}
.accounts-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}
.accounts-toolbar .btn,
.accounts-toolbar select,
.accounts-toolbar input[type="month"] {
  flex: 0 0 auto;
  width: auto;
}
.accounts-toolbar__icon {
  min-width: 36px;
  padding-left: 8px;
  padding-right: 8px;
}
@media (max-width: 640px) {
  .accounts-toolbar {
    width: 100%;
    justify-content: flex-start;
  }
  /* On small screens the primary CTA earns its own line; secondary
     buttons wrap inline beside each other. */
  .accounts-toolbar #accounts-connect-btn {
    flex: 1 1 100%;
  }
}
.accounts-item-actions .btn {
  flex: 0 0 auto;
}

/* .summary-row defaults to `display: grid` (line ~7232) which ignores
   our flex-direction inline style and lays the bank row out in two
   columns. Force single-column stacking for Accounts-page rows. */
.summary-row.accounts-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px;
}
.accounts-item .summary-row__title {
  white-space: normal;
  overflow-wrap: anywhere;
}
.accounts-sub-list {
  margin: 8px 0 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.accounts-sub-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.85rem;
}
.accounts-sub-row__label {
  min-width: 0;
  flex: 1 1 140px;
  overflow-wrap: anywhere;
}
.accounts-sub-row__value {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}

.shopping-quick-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
}

.shopping-quick-toolbar input,
.shopping-quick-toolbar select {
  min-width: 0;
}

.shopping-quick-search {
  width: 260px;
  max-width: 100%;
}

.shopping-quick-store {
  min-width: 190px;
  max-width: 100%;
}

.shopping-current-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
}

.shopping-current-toolbar .toolbar-primary,
.shopping-current-toolbar .toolbar-secondary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
}

.shopping-current-filter,
.shopping-current-sort {
  min-width: 140px;
  max-width: 100%;
}

.shopping-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.shopping-page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.shopping-header-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 58px;
  padding: 8px 12px;
  border-radius: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.shopping-header-chip-count {
  font-weight: 800;
}

#inventory-add-card {
  display: none;
}

#inventory-add-card.inventory-add-open {
  display: block;
}

.inventory-add-details-toggle {
  margin-top: 10px;
  align-self: flex-start;
}

.inventory-add-details {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.inventory-add-details.show {
  display: grid;
}

.inventory-unit-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.inventory-unit-chip-row.single-row {
  flex-wrap: nowrap;
  overflow: hidden;
}

.inventory-unit-chip {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  padding: 7px 10px;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.inventory-unit-chip.active {
  border-color: color-mix(in srgb, var(--color-brand) 45%, transparent);
  background: color-mix(in srgb, var(--color-brand) 16%, transparent);
  color: var(--text);
}

.inventory-unit-chip.more-chip {
  margin-left: auto;
}

.shopping-summary-strip {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.55fr) minmax(
      0,
      0.9fr
    );
  gap: 10px;
  margin-bottom: 16px;
  align-items: stretch;
}

.shopping-summary-pill {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  cursor: default;
}

button.shopping-summary-pill {
  cursor: pointer;
}

button.shopping-summary-pill:hover {
  border-color: color-mix(in srgb, var(--color-brand) 35%, transparent);
  background: rgba(255, 255, 255, 0.035);
}

.shopping-summary-pill.is-active {
  border-color: color-mix(in srgb, var(--color-brand) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-brand) 16%, transparent) inset;
}

.shopping-summary-pill .value {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
  white-space: nowrap;
}

.shopping-summary-pill .value.accent {
  color: var(--accent);
}

.shopping-summary-pill .value.success {
  color: var(--success);
}

.shopping-summary-pill.shopping-summary-pill-open,
.shopping-summary-pill.shopping-summary-pill-purchased {
  grid-column: span 1;
}

.shopping-summary-pill.shopping-summary-pill-estimated {
  grid-column: span 1;
  justify-content: flex-start;
  padding-left: 16px;
  padding-right: 16px;
}

.table-toolbar label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.table-toolbar select {
  min-width: 150px;
}

.leaderboard-footer {
  color: var(--muted);
  font-size: 0.78rem;
}

.card-header-inline-stat {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  background: rgba(148, 163, 184, 0.18);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 999px;
  padding: 2px 10px;
  min-width: 26px;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.4;
}
.card-header-inline-stat:hover {
  background: rgba(148, 163, 184, 0.28);
}

.shopping-recs-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex: 0 0 auto;
}

#shopping-recommendations-card {
  margin-top: 14px;
}

.shopping-recommendations-summary {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 0;
  margin: 0 0 12px;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.shopping-recommendations-summary-title {
  font-size: 1rem;
  font-weight: 700;
  min-width: 0;
}

.shopping-recommendations-summary-count {
  margin-left: auto;
  flex: 0 0 auto;
  min-width: 36px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-brand) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-brand) 35%, transparent);
  color: #d9d6ff;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.shopping-section-collapsed .shopping-recommendations-summary {
  margin-bottom: 0;
}

.shopping-recs-body-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 10px;
}

#shopping-current-list-card .card-header {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.shopping-current-title-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 800;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
}

.shopping-current-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.shopping-current-total {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-brand) 6%, transparent);
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.shopping-current-total[hidden] {
  display: none;
}

.shopping-current-total .value {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}

@media (max-width: 640px) {
  .shopping-current-total {
    font-size: 0.72rem;
    padding: 4px 10px;
  }
  .shopping-current-total .value {
    font-size: 0.92rem;
  }
}

.shopping-sort-chip {
  min-width: 32px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.shopping-sort-chip.active {
  border-color: color-mix(in srgb, var(--color-brand) 45%, transparent);
  background: color-mix(in srgb, var(--color-brand) 14%, transparent);
  color: var(--text);
}

.shopping-section-collapsed .card-header {
  margin-bottom: 0;
}

.shopping-section-collapsed#shopping-quick-find-card
  .shopping-quick-toolbar {
  width: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
}

.shopping-section-collapsed#shopping-quick-find-card
  .shopping-quick-search,
.shopping-section-collapsed#shopping-quick-find-card
  .shopping-quick-store,
.shopping-section-collapsed#shopping-quick-find-card #shop-manual-toggle {
  display: none;
}

.shopping-section-collapsed#shopping-quick-find-card {
  display: none;
}

.shopping-section-collapsed#shopping-current-list-card
  #shopping-current-list-controls {
  display: none;
}

.card.compact-empty {
  padding: 10px 14px;
  margin-bottom: 0;
  border-radius: 12px;
  min-height: 64px;
  display: flex;
  align-items: center;
}

.card.dashboard-collapsed {
  padding: 10px 14px;
  margin-bottom: 0;
  border-radius: 12px;
  min-height: 64px;
  display: flex;
  align-items: center;
}

.card.compact-empty .card-header {
  margin-bottom: 0;
  min-height: 0;
  width: 100%;
}

.card.dashboard-collapsed .card-header {
  margin-bottom: 0;
  min-height: 0;
  width: 100%;
}

.card.compact-empty .card-title {
  font-size: 0.9rem;
}

.card.compact-empty .card-header-inline-stat {
  font-size: 0.9rem;
}

/* Dashboard alert cards (low-stock + recommendations) — Apple rule
 * is flat, no borders, no pulsing. Semantic signal lives on the count
 * number only; the card itself stays structurally identical to its
 * sibling so the dashboard reads as a consistent row. */
.card.low-stock-ok .card-header-inline-stat {
  color: var(--color-success);
}
.card.low-stock-warn .card-header-inline-stat {
  color: var(--color-warning);
}
.card.low-stock-critical .card-header-inline-stat {
  color: var(--color-error);
}
#dash-recs-card .card-header-inline-stat {
  color: var(--color-brand);
}

@keyframes lowStockPulseWarn {
  0%,
  100% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--color-warning) 10%, transparent),
      0 0 0 color-mix(in srgb, var(--color-warning) 0%, transparent);
  }

  50% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--color-warning) 18%, transparent),
      0 0 0 5px color-mix(in srgb, var(--color-warning) 8%, transparent);
  }
}

@keyframes lowStockPulseCritical {
  0%,
  100% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--color-error) 16%, transparent),
      0 0 0 color-mix(in srgb, var(--color-error) 0%, transparent);
  }

  50% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--color-error) 26%, transparent),
      0 0 0 6px color-mix(in srgb, var(--color-error) 12%, transparent);
  }
}

.contrib-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
  margin-bottom: 16px;
}

.contrib-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.contrib-stat {
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-radius: var(--radius-sm);
  border: none;
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
}

.contrib-stat-label {
  color: var(--color-text-muted);
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.contrib-stat-value {
  font-family: var(--font-display);
  font-size: var(--font-3xl);
  font-weight: var(--font-3xl-weight);
  letter-spacing: var(--font-3xl-tracking);
  line-height: var(--font-3xl-lh);
  color: var(--color-text-primary);
}

.contrib-stat-meta {
  margin-top: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-sm);
  line-height: var(--font-sm-lh);
  letter-spacing: var(--font-sm-tracking);
}

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

.contrib-list-item {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.shopping-quick-row {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.shopping-quick-row-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.shopping-quick-row-name {
  font-weight: 700;
  line-height: 1.25;
}

.shopping-quick-row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.shopping-quick-row-meta {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.contrib-list-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.contrib-points {
  font-weight: 800;
  color: var(--accent);
  white-space: nowrap;
}

.contrib-meta {
  color: var(--muted);
  font-size: 0.78rem;
}

.contrib-rule-list,
.contrib-note-list {
  display: grid;
  gap: 10px;
}

.contrib-rule-item,
.contrib-note-item {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.contrib-opportunity {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.contrib-opportunity-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.contrib-opportunity-count {
  color: var(--accent2);
  font-weight: 800;
  font-size: 0.82rem;
}

.person-modal {
  width: min(760px, 100%);
  max-height: min(86vh, 920px);
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  display: grid;
  gap: 16px;
}

.person-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.person-modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

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

.person-modal-stat {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.person-modal-list {
  display: grid;
  gap: 10px;
}

.person-modal-event {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  display: grid;
  gap: 6px;
}

.person-modal-event-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.person-modal-pill {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 0.72rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.refund-warning-pill {
  display: block !important;
  width: min(100%, calc(100vw - 48px));
  max-width: 100%;
  border-radius: 14px;
  padding: 8px 10px;
  white-space: normal !important;
  line-height: 1.35;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  box-sizing: border-box;
  overflow: hidden;
}

.person-modal-pill.pending {
  color: #ffd666;
  border-color: rgba(255, 214, 102, 0.35);
  background: rgba(255, 214, 102, 0.08);
}

.person-modal-pill.cancelled {
  color: #fda4af;
  border-color: rgba(244, 63, 94, 0.35);
  background: rgba(244, 63, 94, 0.08);
}

.person-modal-pill.validated,
.person-modal-pill.finalized {
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.08);
}

.helper-list {
  display: grid;
  gap: 14px;
}

.helper-store-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.helper-store-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.helper-store-title {
  font-size: 0.96rem;
  font-weight: 800;
}

.helper-item-list {
  display: grid;
  gap: 10px;
}

.helper-item {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.helper-item-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  min-width: 0;
  flex: 1;
}

.helper-item-name {
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.25;
}

.helper-item-meta {
  color: var(--muted);
  font-size: 0.76rem;
  margin-top: 2px;
  line-height: 1.3;
}

.helper-item-estimate {
  font-weight: 700;
  white-space: nowrap;
  color: var(--text);
  font-size: 0.88rem;
}

.helper-item-actions {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  align-items: center;
}

.shopping-mobile-store-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  padding: 14px;
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.shopping-mobile-store-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.shopping-mobile-store-title {
  font-size: 0.95rem;
  font-weight: 800;
  min-width: 0;
}

.shopping-mobile-item-list {
  display: grid;
  gap: 6px;
}

.shopping-mobile-item {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  display: grid;
  gap: 0;
  overflow: hidden;
}

.shopping-mobile-item-summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  min-width: 0;
}

.shopping-item-thumb {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
  cursor: pointer;
}

.shopping-item-thumb.placeholder {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 1rem;
}

.shopping-mobile-item-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}

.shopping-mobile-item-text {
  min-width: 0;
  flex: 1 1 auto;
}

.shopping-mobile-item-name {
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.25;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shopping-mobile-item-estimate {
  font-weight: 700;
  white-space: nowrap;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.shopping-mobile-item-chevron {
  color: var(--muted);
  font-size: 0.72rem;
  transition: transform 0.18s ease;
}

.shopping-mobile-item.expanded .shopping-mobile-item-chevron {
  transform: rotate(180deg);
}

.shopping-mobile-item-detail {
  display: none;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 8px 12px 10px;
}

.shopping-mobile-item.expanded .shopping-mobile-item-detail {
  display: grid;
  gap: 8px;
}

.shopping-mobile-item-meta {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
  min-width: 0;
}

.shopping-mobile-item-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.shopping-price-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  margin-top: 2px;
}

.shopping-price-editor label {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.shopping-price-editor input {
  width: 100%;
  min-width: 0;
}

.shopping-price-editor .btn {
  align-self: end;
  white-space: nowrap;
}

.shopping-item-actions-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.shopping-item-actions-row .btn {
  width: 100%;
  min-width: 0;
  justify-content: center;
  white-space: nowrap;
}

.shopping-item-actions-row .btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.shopping-rename-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
}

.shopping-rename-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}

.shopping-rename-btn:hover {
  color: #8f88ff;
}

.shopping-store-table td {
  vertical-align: top;
}

.shopping-store-table {
  width: 100%;
  table-layout: fixed;
}

.shopping-store-table .shopping-item-cell {
  min-width: 0;
}

.shopping-web-item-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.shopping-web-item-text {
  min-width: 0;
  flex: 1 1 auto;
}

.shopping-store-table .shopping-store-select {
  min-width: 120px;
  max-width: 150px;
  width: 100%;
}

.shopping-store-table .shopping-actions-cell {
  min-width: 112px;
}

.shopping-actions-stack {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.shopping-store-table .shopping-item-actions-row {
  min-width: 112px;
  grid-template-columns: repeat(3, minmax(52px, 1fr));
}

.shopping-store-table .shopping-item-actions-row .btn {
  padding: 6px 8px;
  font-size: 0.74rem;
}

.shopping-web-action-strip .btn {
  padding: 6px 8px;
  font-size: 0.74rem;
}

.shopping-more-menu {
  width: 100%;
}

.shopping-more-menu summary {
  list-style: none;
  width: 100%;
}

.shopping-more-menu summary::-webkit-details-marker {
  display: none;
}

.shopping-more-menu[open] summary {
  border-color: color-mix(in srgb, var(--color-brand) 42%, transparent);
  background: color-mix(in srgb, var(--color-brand) 12%, transparent);
}

.shopping-more-panel {
  min-width: 156px;
  display: grid;
  gap: 6px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--color-border, var(--border));
  background: var(--color-surface-elevated, var(--color-surface, rgba(20, 24, 36, 0.98)));
  color: var(--color-text-primary, var(--text));
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
  margin-top: 8px;
}

.shopping-more-panel .btn.btn-ghost {
  color: var(--color-text-primary, var(--text));
}

.shopping-more-panel .btn {
  width: 100%;
  justify-content: center;
}

.shopping-more-panel.mobile {
  right: 0;
  left: auto;
  min-width: 170px;
}

.shopping-more-panel.mobile-inline {
  position: static;
  min-width: 0;
  margin-top: 8px;
  width: 100%;
  box-shadow: none;
}

.shopping-more-panel.web-inline {
  position: static;
  min-width: 168px;
  width: 168px;
  box-shadow: none;
  margin-top: 0;
}

.image-lightbox-modal {
  width: min(1040px, 96vw);
  max-height: min(92vh, 980px);
  background: rgba(14, 18, 28, 0.98);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
  display: grid;
  gap: 12px;
}

.image-lightbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.image-lightbox-title {
  font-size: 1rem;
  font-weight: 800;
}

.image-lightbox-frame {
  display: grid;
  place-items: center;
  overflow: auto;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  min-height: 320px;
  max-height: calc(92vh - 120px);
}

.image-lightbox-frame img {
  display: block;
  max-width: 100%;
  max-height: calc(92vh - 150px);
  object-fit: contain;
  border-radius: 12px;
}

.shopping-store-table .shopping-rename-row {
  justify-content: flex-start;
  margin-top: 6px;
}

.shopping-web-edit-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 16px;
  margin-top: 8px;
  min-width: 0;
  width: 100%;
}

.shopping-web-edit-grid {
  display: grid;
  grid-template-columns:
    minmax(150px, 190px) minmax(104px, 116px) minmax(180px, 220px)
    minmax(120px, 132px);
  gap: 8px;
  align-items: end;
  flex: 0 0 auto;
  min-width: 0;
}

.shopping-web-edit-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.shopping-web-edit-field label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.shopping-web-edit-field input,
.shopping-web-edit-field select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  height: 36px;
}

.shopping-web-edit-field.compact-store select {
  min-width: 140px;
  max-width: 190px;
}

.shopping-web-edit-grid .btn {
  height: 36px;
  align-self: end;
  white-space: nowrap;
}

.shopping-web-action-strip {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-start;
}

.shopping-web-action-strip:empty {
  display: none;
}

.shopping-web-action-strip .btn {
  height: 36px;
  white-space: nowrap;
  flex: 0 0 auto;
}

.shopping-actions-stack {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.shopping-mobile-compact-grid {
  display: grid;
  grid-template-columns: minmax(130px, 1.4fr) minmax(96px, 108px) minmax(
      0,
      1fr
    );
  gap: 10px;
  align-items: end;
  margin-top: 10px;
}

.shopping-mobile-compact-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.shopping-mobile-compact-field label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.shopping-mobile-compact-field input,
.shopping-mobile-compact-field select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  height: 40px;
}

.shopping-mobile-compact-field.compact-store label {
  font-size: 0.95rem;
  line-height: 1;
}

.shopping-mobile-action-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: end;
  margin-top: 10px;
}

.shopping-mobile-action-grid .btn {
  height: 40px;
  white-space: nowrap;
}

.helper-section-label {
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin: 2px 0 8px;
}

.helper-header-card {
  border: 1px solid color-mix(in srgb, var(--color-brand) 25%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-brand) 12%, transparent),
    color-mix(in srgb, var(--color-brand) 3%, transparent)
  );
}

.helper-note {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.shopping-helper-mode #shopping-stats-row {
  display: none !important;
}

.shopping-helper-mode #shopping-current-list-card {
  padding: 16px;
}

.shopping-helper-mode #shopping-current-list-card .card-header {
  margin-bottom: 12px;
}

.helper-summary-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 12px 14px;
  margin-bottom: 14px;
}

.helper-summary-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
}

.helper-summary-stat {
  min-width: 0;
}

.helper-summary-label {
  color: var(--muted);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: 4px;
}

.helper-summary-value {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
}

.helper-summary-value.accent {
  color: var(--accent);
}

.helper-summary-value.success {
  color: var(--success);
}

.action-strip {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.action-icon-btn {
  min-width: 0;
  padding-inline: 10px;
}

.action-icon-btn .icon {
  font-size: 0.95rem;
  line-height: 1;
}

.action-icon-btn .label {
  line-height: 1;
}

.inventory-mobile-detail {
  display: none;
  padding: 0 14px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.inventory-mobile-card.expanded .inventory-mobile-detail {
  display: grid;
  gap: 10px;
}

.inventory-mobile-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.inventory-mobile-stat {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.inventory-mobile-stat-label {
  color: var(--muted);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.inventory-mobile-actions {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
}

.inventory-mobile-actions::-webkit-scrollbar {
  height: 4px;
}

.inventory-mobile-actions::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}

/* ---- Empty State ---- */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
}

.empty-state .icon {
  font-size: 3rem;
  margin-bottom: 12px;
}

/* ---- Spinner ---- */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

.spinner-sm {
  width: 12px;
  height: 12px;
  border-width: 2px;
  vertical-align: -2px;
  margin-right: 4px;
}

.btn.is-loading {
  opacity: 0.75;
  pointer-events: none;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes trustedDeviceExit {
  0% {
    opacity: 1;
    transform: perspective(900px) translateY(0) scale(1) rotateX(0deg)
      rotateZ(0deg);
    max-height: 220px;
    margin-bottom: 12px;
    filter: saturate(1);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
  }

  18% {
    opacity: 1;
    transform: perspective(900px) translateY(-3px) scale(1.01)
      rotateX(3deg) rotateZ(-0.6deg);
    filter: saturate(1.04);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.2);
  }

  100% {
    opacity: 0;
    transform: perspective(900px) translateY(-10px) translateX(34px)
      scale(0.94) rotateX(10deg) rotateZ(-4deg);
    max-height: 0;
    margin-bottom: 0;
    filter: saturate(0.9);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
  }
}

.trusted-device-card {
  overflow: hidden;
  transform-origin: center center;
  will-change:
    transform, opacity, max-height, margin-bottom, box-shadow, filter;
}

.trusted-device-card.is-revoking {
  pointer-events: none;
  animation: trustedDeviceExit 300ms cubic-bezier(0.22, 0.9, 0.24, 1)
    forwards;
}

.environment-backup-shell {
  display: grid;
  gap: 16px;
}

.environment-backup-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--color-brand) 18%, transparent);
  background:
    radial-gradient(
      circle at top right,
      color-mix(in srgb, var(--color-brand) 14%, transparent),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.025),
      rgba(255, 255, 255, 0.015)
    );
}

.environment-backup-hero-copy {
  min-width: 0;
  flex: 1;
}

.environment-backup-eyebrow {
  color: var(--accent2);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.environment-backup-hero-copy p {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.environment-backup-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(92px, 1fr));
  gap: 10px;
  min-width: 220px;
}

.environment-backup-hero-stat,
.environment-backup-stat {
  border-radius: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.environment-backup-hero-stat strong,
.environment-backup-stat strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}

.environment-backup-hero-stat span,
.environment-backup-stat span {
  color: var(--muted);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.environment-backup-restore-bar {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(220px, 0.9fr);
  gap: 14px;
  align-items: end;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
}

.environment-backup-card {
  margin-bottom: 12px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.015)
  );
}

.environment-backup-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

.environment-backup-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.environment-backup-card-title strong {
  font-size: 1rem;
  font-weight: 700;
}

.environment-backup-card-subtitle {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.environment-backup-filename {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-size: 0.76rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.environment-backup-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.environment-backup-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.environment-backup-report-card {
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.015)
  );
}

.environment-backup-report-title {
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: 12px;
}

/* ---- Recs ---- */
.rec-item {
  background: var(--surface2);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.rec-icon {
  font-size: 1.4rem;
}

.rec-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.rec-msg {
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 2px;
}

.rec-conf {
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 600;
  margin-top: 4px;
}

.rec-item.compact-dashboard {
  padding: 10px 12px;
  align-items: center;
  gap: 10px;
}

.rec-item.compact-dashboard .rec-icon {
  font-size: 1rem;
  flex: 0 0 auto;
}

.rec-compact-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.rec-compact-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rec-item.compact-dashboard .rec-name {
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rec-compact-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.rec-item.compact-dashboard .rec-detail {
  display: none;
  width: 100%;
  padding-top: 8px;
}

.rec-item.compact-dashboard.expanded {
  align-items: flex-start;
  flex-wrap: wrap;
}

.rec-item.compact-dashboard.expanded .rec-detail {
  display: block;
}

.rec-item.shopping-rec-row {
  padding: 10px 12px;
  align-items: center;
  gap: 10px;
}

.shopping-rec-main {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.shopping-rec-text {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.shopping-rec-text .rec-name {
  font-size: 0.9rem;
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shopping-rec-text .rec-msg {
  margin-top: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shopping-rec-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  margin-top: 0;
  flex: 0 0 auto;
}

.shopping-rec-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.shopping-rec-actions .btn {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .rec-item.shopping-rec-row {
    align-items: flex-start;
    flex-wrap: nowrap;
  }

  .shopping-rec-main {
    width: 100%;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .shopping-rec-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
  }

  .shopping-rec-text .rec-name,
  .shopping-rec-text .rec-msg {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    width: 100%;
  }

  .shopping-rec-meta {
    flex-wrap: wrap;
    margin-top: 4px;
    width: 100%;
  }

  .shopping-rec-actions {
    width: 100%;
    justify-content: flex-start;
    padding-left: 0;
  }
}

.month-chart {
  min-height: 100%;
  padding: 18px 18px 14px;
  border-radius: 5px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0)
  );
  border: 1px solid rgba(255, 255, 255, 0.04);
  overflow-x: auto;
}

.month-bars {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(72px, 1fr);
  align-items: end;
  gap: 18px;
  min-height: 220px;
  padding: 8px 6px 0;
  min-width: max-content;
}

.month-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.month-bar-value {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
}

.month-bar-track {
  width: min(56px, 100%);
  height: 190px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

.month-bar {
  width: 100%;
  min-height: 16px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.18),
      rgba(255, 255, 255, 0.02) 28%,
      rgba(0, 0, 0, 0.06)
    ),
    linear-gradient(180deg, #74b0ff, #4864d6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.month-bar.active {
  border-color: color-mix(in srgb, var(--color-brand) 70%, transparent);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--color-brand) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.month-bar-label {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
}

.month-bar-amount {
  color: var(--muted);
  font-size: 0.76rem;
  text-align: center;
  white-space: nowrap;
}

.month-drilldown {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.receipt-budget-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.receipt-budget-stat {
  display: grid;
  gap: 4px;
}

.receipt-budget-label {
  color: var(--muted);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.receipt-budget-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.receipt-budget-meta {
  color: var(--muted);
  font-size: 0.78rem;
}

.receipt-budget-progress {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
}

.receipt-budget-progress .progress-wrap {
  height: 8px;
}

@media (max-width: 900px) {
  .receipt-budget-strip {
    grid-template-columns: 1fr;
  }
}

.receipt-summary-grid {
  align-items: stretch !important;
}

.receipt-summary-grid,
.receipt-detail-grid {
  margin-bottom: 16px;
}

.receipt-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.68fr);
  gap: 16px;
  align-items: start;
}

.receipt-detail-grid.receipts-inline-mode {
  grid-template-columns: minmax(0, 1fr);
}

.receipt-detail-grid > .card,
#receipt-detail-body,
.receipt-detail-stack,
.receipt-detail-stack > * {
  min-width: 0;
}

.receipt-summary-grid > .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

@media (max-width: 1500px) {
  #page-receipts > .receipt-detail-grid {
    grid-template-columns: 1fr !important;
  }
}

.receipt-page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.receipt-page-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.receipt-filter-card.collapsed .receipt-filter-body {
  display: none;
}

.receipt-filter-store-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 10px;
}

.receipt-filter-store-block.desktop-only {
  display: none;
}

.receipt-summary-store-card.mobile-only {
  display: flex;
  flex-direction: column;
}

.receipt-filter-store-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.receipt-summary-tiles-compact .stat-card {
  min-height: 0;
}

.receipt-summary-tiles-compact .stat-label {
  margin-bottom: 4px;
}

.receipt-summary-tiles-compact .stat-sub {
  color: var(--muted);
}

.receipt-detail-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.receipt-detail-stats > .stat-card {
  min-width: 0;
  overflow: hidden;
}

.receipt-detail-stats .stat-value,
.receipt-detail-stats .stat-sub {
  min-width: 0;
}

.receipt-detail-stats .stat-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.receipt-detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.receipt-image-wrap {
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.receipt-image-wrap img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(72vh, 980px);
  object-fit: contain;
  background: #11141d;
}

.receipt-image-actions-note {
  color: var(--muted);
  font-size: 0.8rem;
}

.receipt-editor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.receipt-editor-main-field {
  min-width: 0;
}

.receipt-editor-main-field label {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.receipt-editor-main-field input:not([type="checkbox"]):not([type="radio"]),
.receipt-editor-main-field select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.receipt-editor-main-field input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.bill-service-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}

.bill-service-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-2);
  cursor: pointer;
  min-width: 0;
  transition: background 0.15s, border-color 0.15s;
}

.bill-service-type-pill:has(input:checked) {
  background: color-mix(in srgb, var(--color-brand) 12%, transparent);
  border-color: var(--color-brand);
}

.bill-service-type-pill span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bill-service-type-pill input[type="checkbox"] {
  flex: 0 0 auto;
}

.receipt-editor-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  flex-wrap: wrap;
}

.receipt-editor-toggle-row > label {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  flex: 0 0 auto;
}

.receipt-editor-toggle-hint {
  color: var(--muted);
  font-size: 0.78rem;
  flex: 1 1 100%;
  padding-left: 28px;
}

.bill-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.bill-action-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bill-action-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bill-action-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.bill-action-row > .inline-select,
.bill-action-row > input[type="date"] {
  flex: 1 1 auto;
  min-width: 0;
}

.bill-action-row > .btn {
  flex: 0 0 auto;
}

.bill-action-row--readonly .bill-action-value {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--fg);
  font-size: 0.9rem;
}

.receipts-by-store-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.receipts-by-store-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: none;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--fg);
  transition: background 0.15s;
}

.receipts-by-store-row:hover,
.receipts-by-store-row:focus-visible {
  background: var(--panel-2);
}

.receipts-by-store-row + .receipts-by-store-row,
.receipts-by-store-list li + li .receipts-by-store-row {
  border-top: 1px solid var(--border);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.receipts-by-store-name {
  font-weight: 600;
  font-size: 0.95rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.receipts-by-store-count {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  min-width: 24px;
  text-align: right;
}

.receipts-by-store-chevron {
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
}

.upload-section {
  margin-top: 18px;
  display: grid;
  gap: 8px;
}

.upload-section__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.upload-section__hint {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}

.upload-intent-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.upload-intent-btn {
  width: 100%;
  justify-content: center;
  padding: 10px 8px;
  font-weight: 600;
}

@media (max-width: 640px) {
  .upload-intent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.upload-model-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.upload-model-select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.batch-controls {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.batch-controls__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.batch-controls__select-all {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}

.batch-controls__select-all input {
  width: 18px;
  height: 18px;
}

.batch-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel-2, rgba(255, 255, 255, 0.02));
}

.batch-row {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}

.batch-row:last-child {
  border-bottom: none;
}

.batch-row__main {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.15s;
}

.batch-row--queued .batch-row__main {
  cursor: default;
}

.batch-row__main:hover {
  background: color-mix(in srgb, var(--color-brand) 4%, transparent);
}

.batch-row--queued .batch-row__main:hover {
  background: transparent;
}

.batch-row__chevron {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1;
  flex: 0 0 auto;
}

.batch-row--expanded {
  background: color-mix(in srgb, var(--color-brand) 4%, transparent);
}

.batch-row__detail {
  padding: 12px 16px 14px 56px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--color-brand) 3%, transparent);
  display: grid;
  gap: 8px;
  animation: batch-detail-fade 0.18s ease-out;
}

@keyframes batch-detail-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.batch-row__detail-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
}

.batch-row__detail-store {
  font-size: 1rem;
  color: var(--text);
}

.batch-row__detail-total {
  font-size: 1.05rem;
  color: var(--color-success, #2e9d6e);
  font-variant-numeric: tabular-nums;
}

.batch-row__detail--err .batch-row__detail-total,
.batch-row__detail--err .batch-row__detail-headline {
  color: var(--color-error, #d33);
}

.batch-row__detail--warn .batch-row__detail-headline {
  color: var(--color-warning, #d97706);
}

.batch-row__detail-meta {
  font-size: 0.78rem;
  color: var(--muted);
}

.batch-row__detail-warning {
  font-size: 0.78rem;
  color: var(--color-warning, #d97706);
  background: color-mix(in srgb, var(--color-warning, #d97706) 10%, transparent);
  padding: 6px 10px;
  border-radius: 8px;
}

.batch-row__items {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: 0.84rem;
}

.batch-row__items li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: baseline;
  color: var(--text);
}

.batch-row__item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.batch-row__item-qty {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.batch-row__item-price {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.batch-row__item-more {
  color: var(--muted);
  font-style: italic;
  grid-template-columns: 1fr !important;
}

.batch-row__detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.batch-row__check {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.batch-row__icon {
  font-size: 1.1rem;
  line-height: 1;
}

.batch-row__body {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.batch-row__name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.batch-row__meta {
  font-size: 0.76rem;
  color: var(--muted);
}

.batch-row__meta--err {
  color: var(--color-error, #d33);
}

.batch-row__progress {
  height: 4px;
  background: color-mix(in srgb, var(--color-brand) 12%, transparent);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}

.batch-row__progress-bar {
  height: 100%;
  background: var(--color-brand, #0071e3);
  border-radius: 2px;
  transition: width 0.4s ease;
}

.batch-row__badge {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  color: var(--muted);
  white-space: nowrap;
}

.batch-row__badge--ok {
  background: color-mix(in srgb, var(--color-success, #2e9d6e) 18%, transparent);
  color: var(--color-success, #2e9d6e);
}

.batch-row__badge--err {
  background: color-mix(in srgb, var(--color-error, #d33) 16%, transparent);
  color: var(--color-error, #d33);
}

.batch-row__badge--running {
  background: color-mix(in srgb, var(--color-brand) 18%, transparent);
  color: var(--color-brand);
}

.batch-row__badge--warn {
  background: color-mix(in srgb, var(--color-warning, #d97706) 16%, transparent);
  color: var(--color-warning, #d97706);
}

.batch-row--cancelled {
  opacity: 0.85;
}

.batch-row--done {
  opacity: 0.85;
}

.batch-row__remove {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 4px;
}

.batch-row__remove:hover {
  color: var(--color-error, #d33);
}

@media (max-width: 640px) {
  .batch-row__main {
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    padding: 8px 10px;
    gap: 8px;
  }
  .batch-row__remove {
    display: none;
  }
  .batch-row__name {
    font-size: 0.88rem;
  }
  .batch-row__detail {
    padding: 10px 12px 12px 38px;
  }
  .batch-row__items li {
    font-size: 0.82rem;
  }
}

@media (max-width: 640px) {
  #page-upload .drop-zone {
    min-height: 180px;
    padding: 20px 16px;
    gap: 6px;
  }
  #page-upload .drop-zone__icon { font-size: 1.6rem; }
  #page-upload .drop-zone__title { font-size: 0.95rem; }
  #page-upload .drop-zone__hint { font-size: 0.78rem; }

  #page-upload .card.card--padded-lg {
    padding: 14px;
  }

  #page-upload .upload-section {
    margin-top: 12px;
    gap: 6px;
  }

  #page-upload .upload-intent-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  #page-upload .upload-intent-btn {
    padding: 8px 4px;
    font-size: 0.8rem;
    font-weight: 600;
  }

  #page-upload .upload-section__hint {
    font-size: 0.75rem;
    line-height: 1.35;
  }

  #page-upload .upload-hint-desktop {
    display: none;
  }

  #page-upload #upload-ai-model-meta {
    display: none;
  }

  #page-upload .page-header p {
    display: none;
  }

  #page-shopping .shopping-summary-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 12px;
  }

  #page-shopping .shopping-summary-pill {
    padding: 8px 10px;
    border-radius: 10px;
  }

  #page-shopping .shopping-summary-pill .value {
    font-size: 0.85rem;
    font-weight: 700;
  }

  #page-shopping .shopping-summary-pill.shopping-summary-pill-estimated {
    padding-left: 10px;
    padding-right: 10px;
    justify-content: center;
  }

  #page-shopping .shopping-mobile-store-card {
    padding: 10px;
    margin-bottom: 10px;
    gap: 8px;
  }

  #page-shopping .shopping-mobile-item-summary {
    padding: 8px 10px;
  }

  #page-shopping .shopping-mobile-item-list {
    gap: 4px;
  }

  #page-shopping .shopping-item-thumb {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  #page-shopping .shopping-mobile-item-main {
    gap: 10px;
  }

  #page-shopping .shopping-mobile-item-name {
    font-size: 0.9rem;
  }

  #page-shopping .shopping-mobile-item-estimate {
    font-size: 0.85rem;
    gap: 6px;
  }

  #page-shopping .shopping-recommendations-summary {
    padding: 10px 12px;
  }

  .month-bars--compact {
    gap: 10px;
    min-height: 140px;
    padding: 4px 0 0;
  }

  .month-bars--compact .month-bar-track {
    height: 130px;
    width: min(40px, 100%);
  }

  .month-bars--compact .month-bar-value {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted);
  }

  .month-bars--compact .month-bar-label {
    font-size: 0.74rem;
    line-height: 1.2;
  }

  .month-bars--compact .month-bar-amount {
    font-size: 0.72rem;
  }

  .receipt-budget-strip--compact {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--panel-2, rgba(255, 255, 255, 0.02));
  }

  .receipt-budget-headline {
    display: grid;
    gap: 2px;
  }

  .receipt-budget-headline__month {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
  }

  .receipt-budget-headline__amount {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }

  .receipt-budget-headline__meta {
    font-size: 0.78rem;
    color: var(--muted);
  }

  .receipt-budget-progress__meta {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 0.76rem;
    margin-top: 4px;
  }

  #page-restaurant .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  #page-restaurant .stat-card {
    padding: 12px;
  }

  /* Dining budget compact rules now defined globally */

  .restaurant-review-header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap;
    gap: 8px;
  }

  .restaurant-review-toolbar {
    display: flex;
    gap: 6px;
    align-items: center;
  }

  .restaurant-period-select {
    padding: 7px 10px;
    font-size: 0.85rem;
    width: auto;
    min-width: 0;
  }

  .restaurant-refresh-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
  }

  #page-restaurant .receipt-summary-grid,
  #page-expenses .receipt-summary-grid {
    grid-template-columns: 1fr !important;
  }

  #page-expenses .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  #page-expenses .stat-card {
    padding: 12px;
  }
}

.dining-budget-card {
  padding: 14px;
}

.dining-budget-card .card-header {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px;
  gap: 8px;
}

.dining-budget-month-input {
  width: 140px !important;
  padding: 7px 10px;
  font-size: 0.85rem;
  max-width: 50%;
}

.dining-budget-target-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.dining-budget-target-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.dining-budget-target-field label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 700;
}

.dining-budget-target-field input {
  width: 100%;
  padding: 9px 12px;
  font-size: 0.95rem;
}

.dining-budget-summary {
  margin-top: 12px;
  display: grid;
  gap: 6px;
}

.dining-budget-summary__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.dining-budget-summary__amount {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.dining-budget-summary__cap {
  color: var(--muted);
  font-size: 0.85rem;
}

.dining-budget-summary__meta {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.76rem;
}

.receipt-editor-inline-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(82px, 0.72fr) minmax(
      64px,
      0.46fr
    );
  gap: 8px;
  align-items: end;
}

.receipt-editor-inline-field {
  min-width: 0;
}

.receipt-editor-inline-field label {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.receipt-editor-inline-field input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.receipt-mobile-list {
  display: grid;
  gap: 10px;
}

.receipt-item-card,
.receipt-editor-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.receipt-item-top,
.receipt-editor-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.receipt-item-name,
.receipt-editor-card-title {
  font-weight: 700;
  color: var(--text);
  min-width: 0;
}

.receipt-item-meta,
.receipt-editor-card-meta {
  color: var(--muted);
  font-size: 0.8rem;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.receipt-item-actions,
.receipt-editor-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.receipt-item-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
}

.receipt-item-grid .receipt-item-name {
  grid-column: 1 / -1;
}

.receipt-item-grid .receipt-item-meta {
  grid-column: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-wrap: nowrap;
}

.receipt-item-grid .receipt-item-actions {
  grid-column: 2;
  justify-content: flex-end;
  flex-wrap: nowrap;
  min-width: 0;
}

.receipt-item-grid .receipt-item-actions .inline-select {
  width: min(42vw, 156px);
  min-width: 0;
}

.receipt-editor-card-fields {
  display: grid;
  grid-template-columns: 1fr 96px 120px;
  gap: 10px;
  align-items: end;
}

.receipt-editor-card-overrides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.receipt-editor-card-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
}

.receipt-editor-card-summary .receipt-editor-card-title {
  grid-column: 1;
}

.receipt-editor-card-summary .receipt-editor-card-actions {
  grid-column: 2;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.receipt-editor-card-summary .receipt-editor-card-meta {
  grid-column: 1 / -1;
  margin-top: -2px;
}

.receipt-editor-card-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.receipt-editor-card-field label {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.receipt-editor-card-field input,
.receipt-editor-card-field select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 44px;
}

.receipt-editor-web-list {
  display: grid;
  gap: 12px;
}

.receipt-editor-web-row {
  display: grid;
  gap: 10px;
  align-items: end;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}

.receipt-editor-web-main {
  display: grid;
  grid-template-columns:
    minmax(220px, 2.2fr) minmax(72px, 0.56fr) minmax(104px, 0.8fr)
    minmax(110px, 0.82fr) minmax(170px, 1.15fr) minmax(170px, 1fr)
    minmax(190px, 1.1fr) minmax(102px, 0.68fr);
  gap: 10px;
  align-items: end;
  min-width: 0;
  width: 100%;
}

.receipt-editor-web-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.receipt-editor-web-field label {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.receipt-editor-web-field input,
.receipt-editor-web-field select,
.receipt-editor-web-row .btn {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  height: 40px;
}

.receipt-editor-web-row .btn {
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1480px) {
  .receipt-editor-web-main {
    grid-template-columns:
      minmax(180px, 2fr) minmax(68px, 0.52fr) minmax(96px, 0.74fr)
      minmax(98px, 0.72fr) minmax(148px, 1fr) minmax(148px, 0.9fr)
      minmax(168px, 1fr) minmax(96px, 0.62fr);
    gap: 10px;
  }
}

.mobile-data-list {
  display: grid;
  gap: 10px;
}

.mobile-data-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px;
  display: grid;
  gap: 8px;
}

.mobile-data-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.mobile-data-title {
  font-weight: 700;
  color: var(--text);
  min-width: 0;
}

.mobile-data-value {
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
}

.mobile-data-meta {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.mobile-data-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mobile-data-cell {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 8px 10px;
  min-width: 0;
}

.mobile-data-cell-label {
  color: var(--muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}

.mobile-data-cell-value {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
  word-break: break-word;
}

.mobile-action-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.receipt-compact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2, rgba(255, 255, 255, 0.02));
  overflow: hidden;
}

.receipt-compact-row {
  display: flex;
  align-items: stretch;
  position: relative;
  border-bottom: 1px solid var(--border);
}

.receipt-compact-row:last-child {
  border-bottom: none;
}

.receipt-compact-row-main {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "store value chevron"
    "meta  value chevron";
  align-items: center;
  gap: 2px 12px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
  transition: background 0.15s;
}

.receipt-compact-row-main:hover,
.receipt-compact-row-main:focus-visible {
  background: color-mix(in srgb, var(--color-brand) 4%, transparent);
}

.receipt-compact-row-store {
  grid-area: store;
  font-weight: 600;
  font-size: 0.95rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.receipt-compact-row-meta {
  grid-area: meta;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.receipt-compact-row-value {
  grid-area: value;
  font-weight: 700;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text);
}

.receipt-compact-row-chevron {
  grid-area: chevron;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
}

.receipt-compact-row-delete {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--color-error, #d33);
  font-size: 1.2rem;
  padding: 0 14px;
  cursor: pointer;
}

.summary-row-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2, rgba(255, 255, 255, 0.02));
  overflow: hidden;
}

.summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: transparent;
}

.summary-row:last-child {
  border-bottom: none;
}

.summary-row.is-tappable {
  cursor: pointer;
  border: none;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background 0.15s;
}

.summary-row.is-tappable:hover,
.summary-row.is-tappable:focus-visible {
  background: color-mix(in srgb, var(--color-brand) 4%, transparent);
}

.summary-row__chevron {
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
}

.summary-row__main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.summary-row__title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.summary-row__meta {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.summary-row__value {
  font-weight: 700;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text);
}

.summary-row-host {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
}

.summary-row-host:last-child {
  border-bottom: none;
}

.summary-row-host > .summary-row {
  flex: 1 1 auto;
  border-bottom: none;
}

.summary-row-delete {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--color-error, #d33);
  font-size: 1.2rem;
  padding: 0 14px;
  cursor: pointer;
}

.expense-detail {
  display: grid;
  gap: 12px;
}

.expense-detail__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.expense-detail__head-text {
  min-width: 0;
  flex: 1 1 auto;
}

.expense-detail__store {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.expense-detail__meta {
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 2px;
}

.expense-detail__totals {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--panel-2, rgba(255, 255, 255, 0.02));
  border: 1px solid var(--border);
}

.expense-detail__total-amount {
  font-size: 1.4rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--success, #2e9d6e);
}

.expense-detail__total-amount--refund {
  color: var(--warning, #d97706);
}

.expense-detail__total-meta {
  color: var(--muted);
  font-size: 0.78rem;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.month-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}

.month-chip {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2, rgba(255, 255, 255, 0.02));
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.month-chip:hover,
.month-chip:focus-visible {
  background: color-mix(in srgb, var(--color-brand) 5%, var(--panel-2, rgba(255, 255, 255, 0.02)));
}

.month-chip.is-pressing {
  transform: scale(0.96);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand) 30%, transparent);
}

.month-chip__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.month-chip__value {
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1.1;
}

.month-chip__meta {
  font-size: 0.7rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.quick-peek-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 22, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 200;
  display: grid;
  place-items: center;
  animation: quick-peek-fade 0.2s ease-out;
}

@keyframes quick-peek-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.quick-peek-card {
  background: var(--color-surface, var(--surface));
  color: var(--color-text-primary, var(--text));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px 22px;
  min-width: 220px;
  max-width: 80vw;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  animation: quick-peek-pop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: left;
}

@keyframes quick-peek-pop {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

.quick-peek-card h4 {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.quick-peek-card .quick-peek-amount {
  font-size: 1.6rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin: 0 0 6px;
}

.quick-peek-card .quick-peek-meta {
  font-size: 0.85rem;
  color: var(--muted);
}

.quick-peek-card {
  min-width: 260px;
  max-width: min(360px, 86vw);
}

.quick-peek-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.quick-peek-stat {
  display: grid;
  gap: 1px;
}

.quick-peek-stat__label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.quick-peek-stat__value {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.quick-peek-stat--up .quick-peek-stat__value {
  color: var(--color-error, #d33);
}

.quick-peek-stat--down .quick-peek-stat__value {
  color: var(--color-success, #2e9d6e);
}

.quick-peek-section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.quick-peek-section__label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 6px;
}

.quick-peek-merchants {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.quick-peek-merchants li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.88rem;
}

.quick-peek-merchant__name {
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-peek-merchant__amount {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 600;
}

.receipt-failed-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  margin-bottom: 8px;
  border: 1px solid color-mix(in srgb, var(--color-warning, #d97706) 28%, transparent);
  background: color-mix(in srgb, var(--color-warning, #d97706) 8%, transparent);
  border-radius: 10px;
  font-size: 0.82rem;
  color: var(--text);
}

.receipt-failed-banner > span {
  min-width: 0;
  flex: 1 1 auto;
}

.receipt-failed-banner__actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.budget-cat-row {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2, rgba(255, 255, 255, 0.02));
  overflow: hidden;
}

.budget-cat-row__summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

.budget-cat-row__summary::-webkit-details-marker {
  display: none;
}

.budget-cat-row__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.budget-cat-row__name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}

.budget-cat-row__spent {
  font-weight: 700;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.budget-cat-row__bar .progress-wrap {
  height: 4px;
  border-radius: 2px;
}

.budget-cat-row__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.76rem;
  color: var(--muted);
}

.budget-cat-row__detail {
  padding: 0 12px 12px;
  border-top: 1px solid var(--border);
}

.budget-action-bar {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px !important;
  cursor: default !important;
}

.budget-action-btn {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px !important;
  border-radius: 12px;
  width: 100%;
  min-height: 56px;
}

.budget-action-btn__icon {
  font-size: 1.15rem;
  line-height: 1;
}

.budget-action-btn__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.2;
}

.receipt-compact-row-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title right"
    "meta right";
  gap: 6px 10px;
  align-items: start;
}

.receipt-compact-row-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.receipt-compact-row-title {
  font-weight: 700;
  color: var(--text);
  min-width: 0;
  word-break: break-word;
}

.receipt-compact-row-value {
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  text-align: right;
}

.receipt-compact-row-meta {
  grid-area: meta;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.3;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.receipt-compact-row-title-wrap {
  grid-area: title;
  min-width: 0;
}

.receipt-compact-row-right {
  grid-area: right;
  display: grid;
  justify-items: end;
  gap: 6px;
  min-width: 0;
}

.receipt-compact-row-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mini-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.mini-link {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 0.74rem;
  line-height: 1.2;
  cursor: pointer;
}

.mini-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}

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

.filter-chip {
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.filter-chip.active {
  background: color-mix(in srgb, var(--color-brand) 16%, transparent);
  border-color: color-mix(in srgb, var(--color-brand) 50%, transparent);
  color: var(--text);
}

#receipt-summary-stores,
#receipt-summary-months {
  flex: 1;
}

@media (max-width: 900px) {
  .desktop-sidebar-toggle {
    display: none;
  }

  body.sidebar-collapsed .page-header {
    padding-left: 0;
  }

  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  }

  .sidebar.mobile-open {
    transform: translateX(0);
  }

  .main {
    margin-left: 0;
    padding: 18px;
    padding-top: 88px;
  }

  .mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    padding: 8px 14px;
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
  .mobile-title { color: var(--color-text-primary); }
  .mobile-title span { color: var(--color-brand); }

  .mobile-title {
    font-weight: 700;
    font-size: 0.95rem;
  }

  .mobile-title span {
    color: var(--accent);
  }

  .page-header h1 {
    font-size: 1.35rem;
  }

  .card {
    padding: 18px;
  }

  #auth-banner.show {
    flex-direction: column;
    align-items: stretch;
  }

  #auth-banner > span {
    align-self: flex-start;
  }

  #auth-banner > div > div:first-child {
    flex-direction: column;
    align-items: stretch !important;
  }

  .btn {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .main {
    padding: 14px;
    padding-top: 64px;
  }

  .page-header {
    margin-bottom: 14px;
  }

  .page-header h1 {
    font-size: 1.2rem;
    margin: 0;
  }

  .page-header p {
    font-size: 0.85rem;
    margin-top: 4px;
  }

  .page-header::before {
    display: none;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  #inventory-subtitle,
  #catalog-mode-note,
  #inv-window-note {
    display: none !important;
  }

  .inventory-page-controls {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px;
    gap: 6px;
    flex-wrap: nowrap;
  }

  .inventory-page-controls > #catalog-toggle-inventory,
  .inventory-page-controls > #catalog-toggle-products {
    width: 100%;
    padding: 8px 10px;
    font-size: 0.88rem;
  }

  #inventory-page-tools-toggle {
    display: inline-flex;
    width: 40px;
    min-width: 40px;
    height: 38px;
    padding: 0;
    justify-content: center;
    align-items: center;
  }

  #inventory-tools-toggle {
    display: none !important;
  }

  .form-grid,
  #page-receipts > .receipt-summary-grid,
  #page-receipts > .receipt-detail-grid,
  #page-restaurant > .receipt-summary-grid,
  #page-expenses > .receipt-summary-grid,
  #page-dashboard > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  .dashboard-alert-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "low recs"
      "shopping shopping"
      "receipts receipts";
    gap: 12px;
  }

  .dashboard-shopping-preview {
    display: none !important;
  }

  #dash-shopping-card.dashboard-shopping-preview-active
    .dashboard-shopping-preview {
    display: flex !important;
  }

  .dashboard-shopping-expanded-head {
    display: none !important;
  }

  .dashboard-alert-grid.dashboard-mobile-expanded {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "low"
      "recs"
      "shopping"
      "receipts";
  }

  .receipt-detail-stats {
    grid-template-columns: 1fr !important;
  }

  .receipt-editor-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 8px;
  }

  .receipt-bill-meta-panel .receipt-editor-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px 10px !important;
  }

  .receipt-bill-meta-panel .receipt-editor-main-field {
    grid-column: 1 / -1 !important;
  }

  .receipt-bill-meta-panel .receipt-editor-main-field.bill-field-half {
    grid-column: span 1 !important;
  }

  .receipt-bill-meta-panel .receipt-editor-main-field input,
  .receipt-bill-meta-panel .receipt-editor-main-field select {
    padding: 10px 12px;
    font-size: 0.95rem;
  }

  .receipt-bill-meta-panel .receipt-editor-main-field label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-bottom: 4px;
  }

  .receipt-bill-meta-panel .receipt-editor-toggle-row > label {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--fg);
    margin-bottom: 0;
  }

  .receipt-editor-header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap;
    gap: 8px;
  }

  .receipt-editor-save-btn {
    align-self: center;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .receipt-editor-inline-fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "date date"
      "time tax" !important;
    align-items: stretch !important;
    row-gap: 10px;
  }

  .receipt-editor-inline-field {
    min-width: 0;
    max-width: 100%;
  }

  .receipt-editor-inline-field input,
  .receipt-editor-inline-field select {
    max-width: 100%;
    width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
  }

  #page-receipts .receipt-editor-grid input,
  #page-receipts .receipt-editor-grid select,
  #page-receipts .receipt-editor-inline-field input {
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  #page-receipts .receipt-editor-grid input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    text-align: left;
  }

  #page-receipts .receipt-editor-main-field label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-bottom: 4px;
  }

  #page-receipts .receipt-editor-main-field input,
  #page-receipts .receipt-editor-main-field select {
    padding: 10px 12px;
    font-size: 0.95rem;
  }

  #page-receipts .receipt-editor-main-field {
    min-width: 0;
  }

  #page-receipts .receipt-editor-main-field.field-date-time {
    min-width: 0;
    overflow: hidden;
  }

  #page-receipts .receipt-editor-inline-fields {
    min-width: 0;
  }

  .receipt-editor-inline-fields > .receipt-editor-inline-field:nth-child(1) {
    grid-area: date;
  }

  .receipt-editor-inline-fields > .receipt-editor-inline-field:nth-child(2) {
    grid-area: time;
  }

  .receipt-editor-inline-fields > .receipt-editor-inline-field:nth-child(3) {
    grid-area: tax;
  }

  .receipt-editor-inline-field label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1.25em;
  }

  .receipt-editor-main-field.field-type,
  .receipt-editor-main-field.field-store {
    grid-column: 1 / -1;
  }

  .receipt-editor-main-field.field-default-domain,
  .receipt-editor-main-field.field-default-category {
    grid-column: 1 / -1;
  }

  .receipt-editor-main-field.field-date-time {
    grid-column: 1 / -1;
  }

  .receipt-editor-main-field.field-subtotal {
    grid-column: span 5;
  }

  .receipt-editor-main-field.field-tip {
    grid-column: span 2;
  }

  .receipt-editor-main-field.field-total {
    grid-column: span 5;
  }

  .receipt-editor-main-field.field-date-time > label {
    display: none;
  }

  .receipt-detail-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .receipt-detail-actions .btn {
    width: 100%;
  }

  .receipt-page-head {
    align-items: center;
  }

  .receipt-page-actions .btn {
    min-width: 38px;
    min-height: 38px;
    padding: 8px;
  }

  #receipt-filters-toggle {
    display: inline-flex;
  }

  .receipt-summary-store-card.mobile-only {
    display: none !important;
  }

  .receipt-filter-store-block.desktop-only {
    display: grid;
  }

  .receipt-filter-card {
    padding: 14px;
  }

  .receipt-filter-card .card-header {
    margin-bottom: 0;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap;
    gap: 8px;
  }

  .receipt-filter-card .form-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .receipt-filter-card .form-group.receipt-filter-store-group {
    grid-column: 1 / -1;
  }

  .receipt-filter-card .form-group label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-bottom: 2px;
  }

  .receipt-filter-card .form-group input,
  .receipt-filter-card .form-group select {
    max-width: 100%;
    box-sizing: border-box;
    padding: 9px 10px;
    font-size: 0.9rem;
  }

  .receipt-filter-store-head {
    display: grid;
    grid-template-columns: 1fr;
  }

  .receipt-summary-tiles-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }

  .receipt-summary-tiles-compact .stat-card {
    padding: 10px;
  }

  .receipt-summary-tiles-compact .stat-value {
    font-size: 1.02rem;
    line-height: 1.08;
    margin-top: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
  }

  .receipt-summary-tiles-compact .stat-sub {
    display: none;
  }

  #page-restaurant .stats-grid,
  #page-expenses .stats-grid {
    gap: 12px;
  }

  #page-restaurant .stat-card,
  #page-expenses .stat-card {
    padding: 16px;
  }

  #page-restaurant .stat-label,
  #page-expenses .stat-label {
    font-size: 0.72rem;
  }

  #page-restaurant .stat-value,
  #page-expenses .stat-value {
    font-size: 1.25rem;
    line-height: 1.1;
    margin-top: 4px;
  }

  #page-restaurant .stat-sub,
  #page-expenses .stat-sub {
    font-size: 0.74rem;
    line-height: 1.3;
  }

  .receipt-image-wrap {
    border-radius: 14px;
  }

  .receipt-image-wrap img {
    max-height: 42vh;
  }

  .receipt-editor-card-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }

  .receipt-editor-card-unit-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }

  .receipt-editor-card-overrides {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }

  .receipt-editor-card-fields .receipt-editor-card-field:first-child {
    grid-column: 1 / -1;
  }

  .receipt-editor-card-summary {
    gap: 6px 10px;
  }

  .receipt-editor-card-summary .receipt-editor-card-meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-data-grid {
    grid-template-columns: 1fr;
  }

  .leaderboard-list {
    grid-template-columns: 1fr;
  }

  .leaderboard-collapsed-preview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding-bottom: 2px;
    width: 100%;
    flex: 0 0 100%;
    order: 3;
    overflow: hidden;
  }

  .leaderboard-preview-item {
    min-width: 0;
    padding: 7px 9px;
    border-radius: 12px;
    gap: 0;
    justify-content: space-between;
  }

  .leaderboard-collapsed-preview.has-you-tile {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .leaderboard-preview-left {
    display: contents;
  }

  .leaderboard-preview-rank {
    min-width: 20px;
    font-size: 0.7rem;
  }

  .leaderboard-preview-name {
    display: none;
  }

  .leaderboard-preview-score {
    font-size: 0.82rem;
    line-height: 1;
  }

  .leaderboard-preview-item .avatar-bubble {
    width: 22px;
    height: 22px;
    font-size: 0.78rem;
    margin: 0 auto;
  }

  .leaderboard-preview-item.me {
    animation-duration: 2.8s;
  }

  .leaderboard-preview-item.you-tile .leaderboard-preview-rank {
    min-width: 0;
    text-align: left;
  }

  .leaderboard-header {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  #dashboard-subtitle {
    display: none;
  }

  .page-header {
    margin-bottom: 12px;
  }

  .page-header::before,
  .page-header h1 {
    display: none;
  }

  .page-header p {
    display: none !important;
  }

  .leaderboard-card.mobile-top-three-only {
    gap: 0;
    padding: 0;
    background: transparent;
    border: none;
    margin-bottom: 10px;
  }

  .leaderboard-card.mobile-top-three-only .leaderboard-title,
  .leaderboard-card.mobile-top-three-only .leaderboard-header .btn,
  .leaderboard-card.mobile-top-three-only .leaderboard-footer {
    display: none !important;
  }

  .leaderboard-card.mobile-top-three-only .leaderboard-header {
    display: block;
  }

  .leaderboard-card.mobile-top-three-only .leaderboard-collapsed-preview {
    padding: 0;
  }

  .leaderboard-header .leaderboard-title {
    flex: 1 1 auto;
    width: auto;
  }

  .leaderboard-header .btn {
    margin-left: auto;
    order: 2;
  }

  .demo-hero-grid {
    grid-template-columns: 1fr;
  }

  .demo-mini-grid {
    grid-template-columns: 1fr;
  }

  .contrib-grid {
    grid-template-columns: 1fr;
  }

  .person-modal-grid {
    grid-template-columns: 1fr 1fr;
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  #dash-low-stock-card .card-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  #dash-recs-card .card-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  #dash-shopping-card .card-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .dashboard-summary-card {
    min-height: 64px;
  }

  .dashboard-summary-card-body {
    font-size: 0.78rem;
    gap: 10px;
  }

  #dash-shopping-body {
    grid-template-columns: minmax(0, 1fr) auto auto auto auto;
    gap: 6px;
  }

  .dashboard-summary-card-body .dashboard-summary-sep {
    font-size: 0.82rem;
    opacity: 0.45;
  }

  .dashboard-summary-card-title {
    font-size: 0.95rem;
  }

  .dashboard-summary-card-count {
    font-size: 0.88rem;
    min-width: 22px;
  }

  .dashboard-summary-card-value {
    font-size: 0.92rem;
    justify-self: start;
  }

  .page-header {
    margin-bottom: 20px;
  }

  .upload-zone {
    padding: 32px 18px;
  }

  .shopping-page-head {
    align-items: center;
  }

  .shopping-page-actions .btn {
    min-width: 38px;
    min-height: 38px;
    padding: 8px;
  }

  .table-toolbar {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: stretch;
  }

  .table-toolbar label {
    display: none;
  }

  .table-toolbar select,
  .table-toolbar .btn {
    width: 100%;
  }

  #page-analytics .card-header,
  #page-restaurant .card-header,
  #page-expenses .card-header,
  #page-settings .card-header,
  #page-receipts .card-header {
    align-items: stretch;
  }

  #page-settings .form-grid {
    grid-template-columns: 1fr !important;
  }

  #page-settings .form-group > div[style*="display:flex"] {
    flex-wrap: wrap;
  }

  #page-settings .form-group > div[style*="display:flex"] .btn,
  #page-settings .card .btn {
    min-height: 40px;
  }

  #page-settings .trusted-device-card > div {
    gap: 10px !important;
  }

  #page-settings .trusted-device-card .btn {
    flex: 1 1 auto;
  }

  .environment-backup-hero {
    display: grid;
  }

  .environment-backup-hero-stats {
    min-width: 0;
  }

  .environment-backup-restore-bar {
    grid-template-columns: 1fr;
  }

  .environment-backup-card-top {
    flex-direction: column;
  }

  .environment-backup-card-actions .btn {
    flex: 1;
  }

  #page-settings .avatar-bubble {
    flex: 0 0 auto;
  }

  #page-restaurant .contrib-list-top,
  #page-expenses .contrib-list-top {
    flex-direction: column;
    align-items: stretch !important;
  }

  #page-restaurant .contrib-points,
  #page-expenses .contrib-points {
    align-self: flex-start;
  }

  #page-restaurant .mobile-action-row .btn,
  #page-expenses .mobile-action-row .btn,
  #page-settings .mobile-action-row .btn {
    flex: 1 1 140px;
  }

  #restaurant-top-items .mobile-data-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #expense-top-items .mobile-data-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #expense-detail-body .mobile-data-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shopping-quick-toolbar {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .shopping-section-collapsed#shopping-quick-find-card
    .shopping-quick-toolbar {
    width: auto;
    display: flex;
    grid-template-columns: none;
    gap: 0;
  }

  .shopping-quick-search,
  .shopping-quick-store {
    width: 100%;
    min-width: 0;
  }

  .shopping-quick-toolbar .btn {
    width: 100%;
  }

  .shopping-summary-strip {
    grid-template-columns: 0.8fr 0.8fr 1.15fr;
    gap: 8px;
    margin-bottom: 14px;
  }

  .shopping-summary-pill {
    padding: 8px 9px;
    border-radius: 12px;
  }

  .shopping-summary-pill .value {
    font-size: 0.84rem;
    letter-spacing: -0.01em;
  }

  .shopping-summary-pill.shopping-summary-pill-open .value,
  .shopping-summary-pill.shopping-summary-pill-purchased .value {
    font-size: 0.8rem;
  }

  .shopping-summary-strip {
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 2.16fr) minmax(
        0,
        0.62fr
      );
    gap: 7px;
  }

  .shopping-current-toolbar {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
  }

  .shopping-current-toolbar .toolbar-primary {
    width: 100%;
    display: flex;
    gap: 8px;
    grid-column: 1 / -1;
    justify-content: space-between;
  }

  .shopping-current-toolbar .toolbar-secondary {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    grid-column: 1 / -1;
  }

  .shopping-current-filter,
  .shopping-current-sort {
    width: 100%;
    min-width: 0;
  }

  .shopping-current-toolbar .btn {
    width: auto;
    min-width: 0;
    white-space: nowrap;
  }

  .shopping-current-toolbar .toolbar-secondary .btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .shopping-section-collapsed#shopping-current-list-card
    #shopping-current-list-controls {
    width: auto;
  }

  .shopping-section-collapsed#shopping-current-list-card
    #shopping-current-list-controls
    .toolbar-primary {
    width: auto;
    display: flex;
    gap: 0;
  }

  #shopping-stats-row {
    display: flex !important;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 14px;
  }

  #shopping-stats-row .shopping-summary-pill-open,
  #shopping-stats-row .shopping-summary-pill-purchased {
    flex: 0 0 auto;
    min-width: 0;
    min-width: 78px;
  }

  #shopping-stats-row .shopping-summary-pill-estimated {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    text-align: center;
  }

  #shopping-stats-row .stat-card {
    padding: 10px 10px 9px;
    min-height: 0;
  }

  #shopping-stats-row .stat-label {
    font-size: 0.58rem;
    line-height: 1.1;
  }

  #shopping-stats-row .stat-value {
    font-size: 1.15rem;
    margin-top: 5px;
    line-height: 1;
  }

  #shopping-stats-row .stat-sub {
    font-size: 0.64rem;
    margin-top: 3px;
    line-height: 1.15;
  }

  #toast {
    left: 14px;
    right: 14px;
    bottom: 14px;
    max-width: none;
  }

  .dashboard-score-card {
    width: 100%;
    min-width: 0;
    padding: 12px;
  }

  .dashboard-score-top {
    align-items: flex-start;
  }

  .dashboard-score-grid {
    gap: 8px;
  }

  .dashboard-score-item {
    padding: 8px;
  }

  #page-dashboard > .dashboard-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
    margin-bottom: 18px;
    width: 100%;
  }

  #page-dashboard > .dashboard-stats-grid .stat-card {
    padding: 10px;
    border-radius: 12px;
    min-height: 0;
  }

  #page-dashboard > .dashboard-stats-grid .stat-label {
    font-size: 0.6rem;
    letter-spacing: 0.05em;
  }

  #page-dashboard > .dashboard-stats-grid .stat-value {
    font-size: 1.2rem;
    margin-top: 3px;
    line-height: 1.05;
  }

  #page-dashboard > .dashboard-stats-grid .stat-sub {
    font-size: 0.62rem;
    margin-top: 2px;
    line-height: 1.2;
  }

  .dashboard-combo-stat {
    display: grid;
    gap: 6px;
  }

  .dashboard-combo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    align-items: start;
    border-radius: 10px;
    overflow: hidden;
  }

  .dashboard-combo-item {
    min-width: 0;
    text-align: center;
    padding: 2px 4px;
  }

  .dashboard-combo-item + .dashboard-combo-item {
    border-left: 1px solid rgba(255, 255, 255, 0.06);
  }

  .dashboard-combo-value {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
  }

  .dashboard-combo-item.low .dashboard-combo-value {
    color: var(--warning);
  }

  .dashboard-combo-item.products .dashboard-combo-value {
    color: var(--accent);
  }

  .dashboard-combo-item.inventory .dashboard-combo-value {
    color: var(--success);
  }

  .dashboard-combo-meta {
    margin-bottom: 6px;
    font-size: 0.56rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.15;
  }

  /* Budget card on mobile — stack vertically instead of three
     cramped columns (labels were truncating to "GROCE..." and
     deltas were layering on top of each other). One row per
     budget, full label + amount + delta legible. */
  .dashboard-budget-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .dashboard-budget-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 2px;
    padding: 0;
    border-left: none;
  }

  .dashboard-budget-item + .dashboard-budget-item {
    border-top: 1px solid var(--color-border, rgba(127, 127, 127, 0.18));
    padding-top: 10px;
  }

  .dashboard-budget-meta {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: none;
  }

  .dashboard-budget-meta-percent {
    margin-left: auto;
    font-size: 0.78rem;
  }

  .dashboard-budget-main {
    grid-column: 2;
    grid-row: 1;
    font-size: 1.05rem;
    line-height: 1.1;
    text-align: right;
    white-space: nowrap;
  }

  .dashboard-budget-sub {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
    font-size: 0.7rem;
    text-align: right;
  }

  .dashboard-budget-delta {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 0.72rem;
    margin-top: 0;
  }

  .shopping-mobile-store-card {
    margin-bottom: 12px;
    padding: 12px;
  }

  .shopping-mobile-item-summary {
    padding: 9px 10px;
  }

  .shopping-mobile-item-actions .btn {
    padding: 7px 10px;
    min-height: 0;
  }

  .shopping-item-actions-row .btn {
    padding: 7px 8px;
    font-size: 0.78rem;
  }

  .shopping-quick-row {
    padding: 9px 10px;
    gap: 5px;
  }

  .shopping-quick-row-top {
    gap: 8px;
  }

  .shopping-quick-row-name {
    font-size: 0.92rem;
  }

  .shopping-quick-row-actions {
    gap: 5px;
  }

  .shopping-quick-row-actions .btn {
    padding: 6px 9px;
    min-height: 0;
    font-size: 0.78rem;
  }

  .shopping-quick-row-meta {
    font-size: 0.74rem;
  }

  .month-bars {
    gap: 12px;
  }

  .month-bar-track {
    width: min(44px, 100%);
    height: 170px;
  }

  .helper-store-head,
  .helper-item-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .helper-item {
    align-items: stretch;
  }

  .helper-item-actions {
    justify-content: flex-start;
  }

  .action-strip {
    gap: 4px;
  }

  .action-icon-btn {
    padding-inline: 8px;
    min-width: 36px;
  }

  .action-icon-btn .label {
    display: none;
  }

  .inventory-mobile-detail {
    padding: 0 12px 11px;
  }

  .inventory-mobile-detail-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .helper-item-estimate {
    white-space: normal;
  }

  .helper-summary-row {
    gap: 8px;
  }

  .helper-summary-card {
    padding: 10px 12px;
  }

  #catalog-panel-inventory > .card:first-child #add-inv-form,
  #catalog-panel-inventory > .card:first-child .inventory-add-actions {
    display: none;
  }

  #catalog-panel-inventory
    > .card:first-child.inventory-add-open
    #add-inv-form,
  #catalog-panel-inventory
    > .card:first-child.inventory-add-open
    .inventory-add-actions {
    display: grid;
  }

  #catalog-panel-inventory > .card:first-child .card-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  #page-inventory .table-toolbar {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 138px);
    gap: 8px;
  }

  .filter-chip-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .filter-chip {
    width: 100%;
    text-align: center;
    padding: 8px 8px;
    font-size: 0.74rem;
  }

  .helper-summary-value {
    font-size: 1.05rem;
  }
}