/* === phase2b-consolidation === */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}


.evolution-chart-sub,
.behavior-hero-sub,
.subscriptions-mini-support,
.subscriptions-mini-foot,
.achievements-section-sub {
  display:none;
}

#insightGrid .logic-kicker{
  letter-spacing:0.04em;
}

/* ══════════════════════════════════════════════════════
   ACHIEVEMENTS TAB — v729
   ══════════════════════════════════════════════════════ */

/* Notification pill — teal/green, distinct from orange Usage pill */
.achievements-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emerald);
  margin-left: 5px;
  vertical-align: middle;
  font-size: 0;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(16,185,129,0.2);
}

/* Achievements tab layout */


/* ── Check-in card ── */
.checkin-card {
  position: relative;
  overflow: hidden;
}
.checkin-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--emerald);
}
.checkin-card-head {
  padding: 12px 16px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.checkin-card-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--accent-text);
}
.checkin-period-badge {
  font-size: 0.63rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--emerald-14);
  border: 1px solid var(--emerald-22);
  color: var(--green-800);
}
.checkin-status-line {
  padding: 0 16px 10px;
  font-size: 0.80rem;
  font-weight: 700;
  color: var(--accent-text);
}
.checkin-status-line.state-on-track  { color: var(--green-900); }
.checkin-status-line.state-warning   { color: var(--red-900); }
.checkin-status-line.state-overspend { color: var(--red-800); }

.checkin-footer {
  padding: 10px 16px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--line);
}
.checkin-cta-btn {
  flex: 1;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(16,185,129,0.4);
  background: var(--emerald-14);
  color: var(--green-800);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 130ms, border-color 130ms;
}
.checkin-cta-btn:hover {
  background: rgba(16,185,129,0.18);
  border-color: rgba(16,185,129,0.6);
}


/* ── Achievements placeholder ── */
.achievements-section {
  overflow: hidden;
  position: relative;
}
.achievements-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(99,102,241,0.5);
}
.achievements-section-head {
  padding: 10px 14px 8px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.achievements-section-head h4 {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-text);
}
.achievements-section-sub {
  font-size: 0.63rem;
  color: var(--muted);
}

/* ══════════════════════════════════════════════════════
   BADGE SYSTEM — v759
   ══════════════════════════════════════════════════════ */

.badge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  padding: 10px 12px 0;
  border-top: 1px solid var(--line);
}

.badge-tile {
  padding: 9px 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: default;
  transition: border-color 130ms, background 130ms, transform 140ms ease, box-shadow 140ms ease;
  position: relative;
  overflow: hidden;
}


.badge-tile.badge-completed { background: rgba(16,185,129,0.04); border-color: var(--emerald-22); }

.badge-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.badge-tile.badge-completed .badge-icon-wrap { background: rgba(16,185,129,0.12); }

.badge-name {
  font-size: 0.60rem;
  font-weight: 700;
  color: var(--accent-text);
  text-align: center;
  line-height: 1.25;
}


.badge-prog-wrap {
  width: 100%;
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.badge-prog-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--amber);
  transition: width 400ms ease;
}
.badge-tile.badge-completed .badge-prog-fill { background: var(--emerald); }

.badge-meta-label {
  font-size: 0.56rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.2;
}
.badge-delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(239,68,68,0.18);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--red-700);
  opacity: 0.9;
  transition: opacity 0.15s, color 0.15s, background 0.15s, border-color 0.15s, transform 0.12s;
  padding: 0;
  border-radius: 999px;
  line-height: 1;
  z-index: 3;
}
.badge-tile:hover .badge-delete-btn,
.badge-delete-btn:focus-visible { opacity: 1; }
.badge-delete-btn:hover {
  color: var(--red-800);
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.28);
  transform: scale(1.04);
}

/* ── Custom badge modal overlay ── */
.cbm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15,23,42,0.45);
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.cbm-overlay.cbm-open { display: flex; }
.cbm-overlay[data-modal-kind="custom-target"] {
  overflow-y: auto;
  align-items: flex-start;
}

.cbm-modal.custom-target-builder-modal {
  width: min(100%, 540px);
  max-height: min(86vh, 780px);
  margin: 28px auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.cbm-modal.custom-target-builder-modal .cbm-header,
.cbm-modal.custom-target-builder-modal .cbm-footer {
  position: sticky;
  background: var(--panel);
  z-index: 1;
}
.cbm-modal.custom-target-builder-modal .cbm-header {
  top: 0;
}
.cbm-modal.custom-target-builder-modal .cbm-footer {
  bottom: 0;
}

.custom-target-builder-modal select:disabled {
  background: var(--panel-2);
  color: var(--muted);
  cursor: not-allowed;
}
.custom-target-icon-group {
  margin-bottom: 2px;
}
@media (max-width: 640px) {
  .cbm-overlay[data-modal-kind="custom-target"] {
    padding: 10px;
  }
  .cbm-modal.custom-target-builder-modal {
    width: 100%;
    max-height: calc(100vh - 20px);
    margin: 0 auto;
  }
}

.cbm-modal {
  background: var(--panel);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 24px 60px rgba(15,23,42,0.18);
  overflow: hidden;
  position: relative;
}

.cbm-header {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.cbm-title { font-size: 0.88rem; font-weight: 700; color: var(--accent-text); margin-bottom: 2px; }
.cbm-sub { font-size: 0.68rem; color: var(--muted); }
.cbm-close-btn {
  background: none; border: none; cursor: pointer;
  font-size: 1.0rem; color: var(--muted); line-height: 1; padding: 2px 4px;
  border-radius: 5px; transition: background 110ms, color 110ms;
}
.cbm-close-btn:hover { background: var(--panel-2); color: var(--accent-text); }
.completed-badges-modal-title-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.completed-badges-modal-title-row .inline-info-wrap {
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.completed-badges-modal-title-row .inline-info-trigger {
  margin: 0;
}
.completed-badges-modal-head .cbm-sub {
  display: none;
}

.cbm-body { padding: 14px 18px; }

.cbm-input-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.cbm-input-group label { font-size: 0.63rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.cbm-input-row { display: flex; align-items: center; gap: 7px; }
.cbm-input-row input[type=number], .cbm-input-row input[type=text] {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--card-border);
  border-radius: 7px;
  font: inherit;
  font-size: 0.76rem;
  color: var(--accent-text);
  background: var(--panel);
  outline: none;
  transition: border-color 120ms;
}
.cbm-input-row input:focus { border-color: var(--indigo-700); }
.cbm-input-row select {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--card-border);
  border-radius: 7px;
  font: inherit;
  font-size: 0.76rem;
  color: var(--accent-text);
  background: var(--panel);
  outline: none;
  transition: border-color 120ms;
}
.cbm-input-row select:focus { border-color: var(--indigo-700); }
.cbm-unit { font-size: 0.68rem; color: var(--muted); font-weight: 600; }

.custom-target-config-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.custom-target-config-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}
.custom-target-config-item.is-hidden { opacity: 0.72; }
.custom-target-config-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.custom-target-config-title {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.custom-target-config-copy {
  display: grid;
  gap: 2px;
}
.custom-target-config-name {
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--accent-text);
}
.custom-target-config-meta {
  font-size: 0.62rem;
  color: var(--muted);
  line-height: 1.4;
}
.custom-target-config-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.custom-target-visibility {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.63rem;
  color: var(--muted);
  font-weight: 600;
}
.custom-target-delete-btn {
  padding: 5px 8px;
  border-radius: 7px;
  border: 1px solid rgba(239,68,68,0.18);
  background: rgba(239,68,68,0.06);
  color: var(--red-700);
  font: inherit;
  font-size: 0.64rem;
  font-weight: 700;
  cursor: pointer;
}
.custom-target-delete-btn:hover {
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.28);
}
.custom-target-slot-note {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-size: 0.63rem;
  color: var(--muted);
  line-height: 1.4;
}
.custom-target-preview-block {
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 4px;
}
.custom-target-preview-label {
  font-size: 0.60rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.custom-target-inline-help {
  font-size: 0.62rem;
  color: var(--muted);
  line-height: 1.4;
}

.cbm-preview-text {
  font-size: 0.65rem;
  color: var(--muted);
  padding: 6px 9px;
  background: var(--panel-2);
  border-radius: 6px;
  margin-top: 5px;
  line-height: 1.4;
}

.cbm-icon-picker { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.cbm-icon-btn {
  width: 30px; height: 30px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-2);
  cursor: pointer;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 110ms, background 110ms;
}
.cbm-icon-btn:hover { background: var(--accent-surface); border-color: var(--accent-border); }
.cbm-icon-btn.cbm-icon-sel { border-color: var(--indigo-700); background: rgba(99,102,241,0.08); }

.cbm-error { font-size: 0.63rem; color: var(--tone-bad-text); margin-top: 4px; }

.cbm-footer {
  padding: 10px 18px 14px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cbm-btn-ghost {
  padding: 7px 14px; border-radius: 7px;
  border: 1px solid var(--line);
  background: transparent; font: inherit;
  font-size: 0.70rem; font-weight: 600;
  color: var(--muted); cursor: pointer;
  transition: background 110ms, color 110ms;
}
.cbm-btn-ghost:hover { background: var(--panel-2); color: var(--accent-text); }
.cbm-btn-primary {
  padding: 7px 16px; border-radius: 7px;
  border: none; background: var(--blue-600);
  font: inherit; font-size: 0.72rem; font-weight: 700;
  color: var(--white); cursor: pointer;
  transition: background 110ms;
}
.cbm-btn-primary:hover { background: var(--blue-600); }
.cbm-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }


.momentum-block {
  position: relative;
  overflow: hidden;
}
.momentum-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--mb-accent, #5e17eb);
}
.momentum-block.mb-cash  { --mb-accent: var(--emerald); }
.momentum-block.mb-budget { --mb-accent: var(--indigo-700); }
.momentum-block.mb-goal  { --mb-accent: var(--amber); }

.momentum-block-title {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
}
.momentum-block-primary {
  font-size: 1.0rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--accent-text);
  line-height: 1.1;
  margin-bottom: 2px;
}
.momentum-block-primary.val-good  { color: var(--green-900); }
.momentum-block-primary.val-warn  { color: var(--red-900); }
.momentum-block-primary.val-bad   { color: var(--red-800); }

.momentum-block-rows {
  display: grid;
  gap: 2px;
  margin-top: 6px;
}
.momentum-block-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.momentum-block-row-label {
  font-size: 0.60rem;
  color: var(--muted);
  font-weight: 500;
}
.momentum-block-row-val {
  font-size: 0.65rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--accent-text);
}

/* ── Momentum card (v753): streak dots + XP/level bar ── */
.ach-momentum-stats{ padding:0 12px 6px; }
.momentum-unit{
  font-size:0.62rem;
  font-weight:600;
  color:var(--muted);
  font-family:var(--font-mono);
  margin-left:1px;
}
.streak-dots{
  display:flex;
  gap:5px;
  margin-top:8px;
  flex-wrap:wrap;
}
.streak-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--line);
  border:1px solid rgba(100,116,139,0.22);
}
.streak-dot.is-on{
  background:var(--emerald);
  border-color:var(--emerald);
}
.streak-xp{
  padding:2px 14px 14px;
}
.streak-xp-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}
.streak-xp-level{
  font-size:0.82rem;
  font-weight:800;
  color:var(--accent-text);
}
.streak-xp-next{
  font-size:0.64rem;
  font-weight:600;
  color:var(--muted);
}
.streak-xp-track{
  height:10px;
  border-radius:999px;
  background:var(--line);
  overflow:hidden;
  margin:8px 0 6px;
}
.streak-xp-track span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--emerald), #16a34a);
}
.streak-xp-foot{
  font-size:0.60rem;
  color:var(--muted);
  font-weight:600;
}

.momentum-state-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: 5px;
  border: 1px solid;
}
.momentum-state-chip.chip-stable   { background: var(--tone-good-bg, #f0fdf4);    border-color: var(--tone-good-border, rgba(34,197,94,0.25));    color: var(--tone-good-text, #166534); }
.momentum-state-chip.chip-tight    { background: var(--tone-warn-bg, #fffbeb);    border-color: var(--tone-warn-border, rgba(245,158,11,0.3));    color: var(--tone-warn-text, #92400e); }
.momentum-state-chip.chip-critical { background: var(--tone-bad-bg, #fef2f2);     border-color: var(--tone-bad-border, rgba(239,68,68,0.25));     color: var(--tone-bad-text, #991b1b);  }
.momentum-state-chip.chip-ahead    { background: var(--tone-good-bg, #f0fdf4);    border-color: var(--tone-good-border, rgba(34,197,94,0.25));    color: var(--tone-good-text, #166534); }
.momentum-state-chip.chip-on-pace  { background: var(--tone-neutral-bg, #f8fafc); border-color: var(--tone-neutral-border, rgba(71,85,105,0.2));  color: var(--tone-neutral-text, #5e17eb); }
.momentum-state-chip.chip-behind   { background: var(--tone-warn-bg, #fffbeb);    border-color: var(--tone-warn-border, rgba(245,158,11,0.3));    color: var(--tone-warn-text, #92400e); }
.momentum-state-chip.chip-improving { background: var(--tone-good-bg, #f0fdf4);  border-color: var(--tone-good-border, rgba(34,197,94,0.25));    color: var(--tone-good-text, #166534); }
.momentum-state-chip.chip-worsening { background: var(--tone-bad-bg, #fef2f2);   border-color: var(--tone-bad-border, rgba(239,68,68,0.25));     color: var(--tone-bad-text, #991b1b); }
.momentum-state-chip.chip-neutral   { background: var(--panel-2); border-color: var(--line); color: var(--muted); }

/* What changed insights */
.micro-insight-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-size: 0.68rem;
  color: var(--accent-text);
  line-height: 1.4;
}
.micro-insight-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--indigo-700);
  flex-shrink: 0;
  margin-top: 4px;
}
.micro-insights-section {
  display: grid;
  gap: 4px;
}

/* ── Cadence dropdown selector ── */
.checkin-cadence-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.checkin-cadence-select {
  width: auto;
  padding: 5px 24px 5px 8px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--panel);
  font: inherit;
  font-size: 0.72rem;
  color: var(--accent-text);
  cursor: pointer;
  max-width: fit-content;
}

/* ── Undo check-in button ── */
.checkin-undo-btn {
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: transparent;
  font: inherit;
  font-size: 0.63rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background 110ms, color 110ms, border-color 110ms;
}
.checkin-undo-btn:hover {
  background: var(--panel-2);
  color: var(--accent-text);
  border-color: rgba(99,102,241,0.3);
}


/* ── Mode selector label ── */
.checkin-mode-label {
  font-size: 0.67rem;
  font-weight: 600;
  color: var(--muted);
}

/* ── Closed-period chip variants ── */
.momentum-state-chip.chip-ended-positive { background: var(--tone-good-bg,#f0fdf4); border-color: var(--tone-good-border,rgba(34,197,94,0.25)); color: var(--tone-good-text,#166534); }
.momentum-state-chip.chip-ended-zero     { background: var(--panel-2); border-color: var(--line); color: var(--muted); }
.momentum-state-chip.chip-overspent      { background: var(--tone-bad-bg,#fef2f2); border-color: var(--tone-bad-border,rgba(239,68,68,0.25)); color: var(--tone-bad-text,#991b1b); }
.momentum-state-chip.chip-under-plan     { background: var(--tone-good-bg,#f0fdf4); border-color: var(--tone-good-border,rgba(34,197,94,0.25)); color: var(--tone-good-text,#166534); }
.momentum-state-chip.chip-on-plan        { background: var(--panel-2); border-color: var(--line); color: var(--muted); }
.momentum-state-chip.chip-over-plan      { background: var(--tone-bad-bg,#fef2f2); border-color: var(--tone-bad-border,rgba(239,68,68,0.25)); color: var(--tone-bad-text,#991b1b); }

/* ── Inline completion confirmation panel ── */
.checkin-confirm-panel {
  border-radius: 10px;
  border: 1px solid rgba(16,185,129,0.25);
  background: linear-gradient(180deg, rgba(16,185,129,0.04) 0%, rgba(16,185,129,0.01) 100%), var(--panel);
  padding: 12px 14px 14px;
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.checkin-confirm-panel-title {
  font-size: 0.70rem;
  font-weight: 700;
  color: var(--accent-text);
  margin-bottom: 2px;
}
.checkin-confirm-list {
  display: grid;
  gap: 4px;
}
.checkin-confirm-item {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
}
.checkin-confirm-checkbox {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 1.5px solid rgba(16,185,129,0.45);
  background: var(--white);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.58rem;
  color: var(--white);
  font-weight: 700;
  transition: background 120ms, border-color 120ms;
}
.checkin-confirm-item.is-checked .checkin-confirm-checkbox {
  background: var(--emerald);
  border-color: var(--emerald);
}
.checkin-confirm-item-label {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--accent-text);
}
.checkin-confirm-item.is-checked .checkin-confirm-item-label {
  color: var(--muted);
}
.checkin-confirm-btn {
  width: 100%;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(16,185,129,0.4);
  background: var(--emerald-14);
  color: var(--green-800);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 130ms;
}
.checkin-confirm-btn:hover:not(:disabled) { background: rgba(16,185,129,0.18); }
.checkin-confirm-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════
   CHECK-IN CONTROL ROW + META + REQUIRED TOGGLE (v750)
   ══════════════════════════════════════════════════════ */

/* Cadence selector (left) + overdue badge & required toggle (right), one row */
.checkin-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}
.checkin-control-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.checkin-overdue-badge {
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--red-bg, #fef2f2);
  border: 1px solid var(--red-border, rgba(239,68,68,0.30));
  color: var(--red-800, #991b1b);
  white-space: nowrap;
}

/* Required toggle (reminder-only enforcement) */
.checkin-mandatory-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.checkin-mandatory-label {
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--muted);
}
.checkin-mandatory-toggle.is-on .checkin-mandatory-label {
  color: var(--green-800, #065f46);
}
.checkin-mandatory-switch {
  position: relative;
  width: 30px;
  height: 17px;
  flex-shrink: 0;
  display: inline-block;
}
.checkin-mandatory-switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.checkin-mandatory-switch .checkin-mandatory-knob {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--line);
  border: 1px solid rgba(100,116,139,0.25);
  transition: background 140ms;
  pointer-events: none;
}
.checkin-mandatory-switch .checkin-mandatory-knob::after {
  content: '';
  position: absolute;
  top: 1px; left: 1px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--white, #fff);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: transform 140ms;
}
.checkin-mandatory-switch input:checked + .checkin-mandatory-knob {
  background: var(--emerald);
  border-color: var(--emerald);
}
.checkin-mandatory-switch input:checked + .checkin-mandatory-knob::after {
  transform: translateX(13px);
}

/* Last check-in / Next due meta row */
.checkin-meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
}
.checkin-meta-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.checkin-meta-key {
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.checkin-meta-val {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--accent-text);
}
.checkin-meta-val.is-open {
  color: var(--green-800, #065f46);
}

/* ══════════════════════════════════════════════════════
   ACHIEVEMENTS v5 — Weekly + History Tree CSS
   ══════════════════════════════════════════════════════ */

/* Cadence lock / status area */
.checkin-cadence-locked-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  border: 1px solid;
}
.checkin-cadence-locked-label.lock-weekly {
  background: rgba(16,185,129,0.09);
  border-color: rgba(16,185,129,0.28);
  color: var(--green-800);
}
.checkin-cadence-locked-label.lock-monthly {
  background: rgba(99,102,241,0.08);
  border-color: rgba(99,102,241,0.28);
  color: var(--indigo-600);
}

/* Lock message box */
.checkin-lock-message {
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.4;
}
.checkin-lock-message strong { color: var(--accent-text); }

/* Weekly check-in card header */
.weekly-checkin-card {
  position: relative;
  overflow: hidden;
}
.weekly-checkin-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--emerald);
}
.weekly-checkin-card.is-locked {
  border-color: var(--line);
  background: var(--panel);
  opacity: 0.7;
}
.weekly-checkin-card.is-locked::before { background: var(--muted); }
.weekly-checkin-card.is-completed {
  border-color: rgba(16,185,129,0.3);
  background: linear-gradient(180deg, rgba(16,185,129,0.04) 0%, transparent 100%), var(--panel);
}

.weekly-card-head {
  padding: 11px 14px 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.weekly-card-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-text);
}
.weekly-card-seq {
  font-size: 0.63rem;
  color: var(--muted);
  font-weight: 500;
  margin-top: 1px;
}
.weekly-card-due {
  padding: 0 14px 8px;
  font-size: 0.70rem;
  color: var(--muted);
  font-weight: 500;
}
.weekly-card-due strong { color: var(--accent-text); }

/* History tree */
.history-tree {
  display: grid;
  gap: 6px;
}

.history-year-group {
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.history-year-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 13px;
  cursor: pointer;
  user-select: none;
  gap: 8px;
}
.history-year-header:hover { background: var(--panel-2); }
.history-year-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-text);
}
.history-year-meta {
  font-size: 0.62rem;
  color: var(--muted);
  font-weight: 500;
}
.history-year-chevron {
  font-size: 0.55rem;
  color: var(--muted);
  transition: transform 150ms;
}
.history-year-group.is-expanded .history-year-chevron { transform: rotate(180deg); }
.history-year-body {
  border-top: 1px solid var(--line);
  display: none;
}
.history-year-group.is-expanded .history-year-body { display: block; }

/* Month row */
.history-month-row {
  border-bottom: 1px solid var(--line);
}
.history-month-row:last-child { border-bottom: none; }
.history-month-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
}
.history-month-header:hover { background: var(--panel-2); }
.history-month-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-text);
  flex: 1;
  min-width: 0;
}
.history-month-badge {
  font-size: 0.58rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
}
.history-month-badge.badge-weekly {
  background: rgba(16,185,129,0.09);
  border-color: rgba(16,185,129,0.25);
  color: var(--green-800);
}
.history-month-badge.badge-monthly {
  background: rgba(99,102,241,0.08);
  border-color: rgba(99,102,241,0.22);
  color: var(--indigo-600);
}
.history-month-chevron {
  font-size: 0.55rem;
  color: var(--muted);
  transition: transform 150ms;
  flex-shrink: 0;
}
.history-month-row.is-expanded .history-month-chevron { transform: rotate(180deg); }
.history-month-body {
  display: none;
  padding: 6px 12px 10px 24px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
}
.history-month-row.is-expanded .history-month-body { display: block; }

/* Monthly summary inside expanded month */
.history-monthly-summary {
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  margin-bottom: 6px;
}
.history-monthly-summary-label {
  font-size: 0.60rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 3px;
}
.history-monthly-summary-text {
  font-size: 0.70rem;
  font-weight: 600;
  color: var(--accent-text);
  line-height: 1.4;
}

/* Weekly subgroup */
.history-weekly-subgroup {
  border-radius: 8px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--panel);
}
.history-weekly-subgroup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  cursor: pointer;
  user-select: none;
  background: var(--panel);
  gap: 6px;
}
.history-weekly-subgroup-header:hover { background: var(--panel-2); }
.history-weekly-subgroup-label {
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.history-weekly-subgroup-chevron {
  font-size: 0.50rem;
  color: var(--muted);
  transition: transform 150ms;
}
.history-weekly-subgroup.is-expanded .history-weekly-subgroup-chevron { transform: rotate(180deg); }
.history-weekly-subgroup-body {
  display: none;
  border-top: 1px solid var(--line);
}
.history-weekly-subgroup.is-expanded .history-weekly-subgroup-body { display: block; }

/* Weekly history entry row */
.history-weekly-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
}
.history-weekly-entry:last-child { border-bottom: none; }
.history-weekly-entry-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
}
.history-weekly-entry-meta {
  flex: 1;
  min-width: 0;
}
.history-weekly-entry-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--accent-text);
}
.history-weekly-entry-sub {
  font-size: 0.60rem;
  color: var(--muted);
  margin-top: 1px;
}

/* Empty state for monthly-only month weekly section */
.history-weekly-empty {
  padding: 8px 10px;
  font-size: 0.64rem;
  color: var(--muted);
  font-style: italic;
}

/* ══════════════════════════════════════════════════════
   FINANCIAL PROGRESS ENGINE — v749
   ══════════════════════════════════════════════════════ */

/*
  Fixed heights derived from maximum content analysis:

  Check-in card max (confirmation panel fully open):
    weekly-card-head ~50px + due ~21px + status-line ~38px
    + confirm-panel: margin 10 + padding 26 + title 15 + 4×item 76 + gaps 24 + btn 30 = 181px
    Total ≈ 290px → 300px (with breathing room)

  KPI block max (title + primary + 2 rows + chip + padding):
    22 + 17 + 23 + 28 + 20 = 110px → 120px (with breathing room)

  FPE card max (header + 3 delta blocks + goal block + meta + action + gaps):
    28(pad) + 28(header) + 56(delta) + 110(goal) + 24(meta) + 22(action) + 50(gaps) = 318px → 330px
*/

/* ── Achievements canonical layout (clean rebuild) ── */


.ach-kpi-row {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.ach-kpi-row > .momentum-block{
  min-width:0;
}

.checkin-cadence-inline {
  padding:10px 14px 8px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.weekly-checkin-card .checkin-cadence-inline,
.checkin-card .checkin-card-head,
.weekly-checkin-card .weekly-card-head {
  padding-top:10px;
}
.checkin-lock-message.checkin-lock-card {
  padding:0;
  overflow:hidden;
}
.checkin-lock-message.checkin-lock-card .checkin-lock-message-body {
  padding:12px 14px 14px;
}


@media (max-width: 720px) {
  .ach-kpi-row { grid-template-columns:1fr; }
}
/* Card shell — visual shell now handled by canonical 3D Achievements adoption. */
.financial-progress-card {
  position: relative;
  overflow: hidden;
  padding: 14px;
  display: grid;
  gap: 10px;
}
.financial-progress-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}

/* State variants */
.financial-progress-card.state-progress::before { background: var(--emerald); }
.financial-progress-card.state-drift::before { background: var(--amber); }
.financial-progress-card.state-stable::before { background: var(--purple); }

/* Top meta row */
.fp-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 24px;
}
.fp-top-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.fp-top-title-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-text);
  line-height: 1.2;
}
.fp-top-title.state-progress .fp-top-title-label { color: var(--green-900); }
.fp-top-title.state-drift .fp-top-title-label { color: var(--red-900); }
.fp-top-title.state-stable .fp-top-title-label { color: var(--accent-text); }
.fp-top-title-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--purple);
  box-shadow: 0 0 0 2px rgba(111,135,154,0.16);
}
.fp-top-title.state-progress .fp-top-title-indicator {
  background: var(--emerald);
  box-shadow: 0 0 0 2px rgba(16,185,129,0.18);
}
.fp-top-title.state-drift .fp-top-title-indicator {
  background: var(--amber);
  box-shadow: 0 0 0 2px rgba(245,158,11,0.18);
}
.fp-top-title.state-stable .fp-top-title-indicator {
  background: var(--purple);
  box-shadow: 0 0 0 2px rgba(111,135,154,0.16);
}

/* Delta row */
.fp-delta-row {
  display: grid;
  grid-template-columns: repeat(var(--fp-delta-cols, 3), 1fr);
  gap: 6px;
}
.fp-delta-block {
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  padding: 9px 10px;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fp-delta-label {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  line-height: 1;
}
.fp-delta-value {
  font-size: 0.92rem;
  font-weight: 700;
  font-family: var(--font-mono);
  line-height: 1.15;
}
.fp-delta-value.fp-pos { color: var(--green-900); }
.fp-delta-value.fp-neg { color: var(--red-800); }
.fp-delta-value.fp-warn { color: var(--red-900); }

/* Goal block */
.fp-goal-block {
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 12px;
  display: grid;
  gap: 8px;
}
.fp-goal-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}
.fp-goal-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fp-goal-eyebrow {
  font-size: 0.56rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}
.fp-goal-name {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--accent-text);
  line-height: 1.2;
}
.fp-goal-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid;
}
.fp-goal-chip.chip-ahead  { background: var(--emerald-14); border-color: rgba(16,185,129,0.28); color: var(--green-800); }
.fp-goal-chip.chip-on-track { background: var(--panel-2); border-color: var(--line); color: var(--muted); }
.fp-goal-chip.chip-behind { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.28); color: var(--red-900); }

/* Progress bar */
.fp-goal-bar-wrap {
  position: relative;
  height: 14px;
  display: flex;
  align-items: center;
}
.fp-goal-bar {
  position: absolute;
  left: 0; right: 0;
  height: 10px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.fp-goal-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 400ms ease;
  min-width: 4px;
}
.fp-goal-chip.chip-ahead  ~ .fp-goal-bar-wrap .fp-goal-fill,
.fp-goal-fill.fill-ahead  { background: var(--emerald); }
.fp-goal-fill.fill-on-track { background: var(--indigo-700); }
.fp-goal-fill.fill-behind { background: var(--amber); }

.fp-goal-marker {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 14px;
  background: var(--accent-text);
  border-radius: 1px;
  opacity: 0.55;
  transform: translateX(-1px);
  pointer-events: none;
}

.fp-goal-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.fp-goal-meta-val {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--muted);
}
.fp-goal-meta-val strong { color: var(--accent-text); }

/* Meta row */
.fp-meta-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}
.fp-benchmark-chip,
.fp-highlight-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 0.60rem;
  font-weight: 700;
  border: 1px solid;
  white-space: nowrap;
}
.fp-benchmark-chip {
  background: var(--panel-2);
  border-color: var(--line);
  color: var(--muted);
}
.fp-benchmark-chip.rank-top {
  background: var(--emerald-10);
  border-color: var(--emerald-22);
  color: var(--green-800);
}
.fp-benchmark-chip.rank-bottom {
  background: rgba(239,68,68,0.07);
  border-color: rgba(239,68,68,0.20);
  color: var(--red-800);
}
.fp-highlight-chip {
  background: rgba(99,102,241,0.08);
  border-color: rgba(99,102,241,0.22);
  color: var(--indigo-600);
}

/* ══════════════════════════════════════════════════════
   BEHAVIOR LAYER — v726
   ══════════════════════════════════════════════════════ */

/* Modal soft-friction warning (Add flow only) */
.usage-modal-friction {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fffbeb;
  border: 1px solid rgba(245,158,11,0.28);
  font-size: 0.70rem;
  color: var(--red-900);
  font-weight: 500;
  line-height: 1.4;
}
.usage-modal-friction-icon { flex-shrink: 0; font-size: 0.78rem; margin-top: 1px; }

/* Annualized cost inline in modal */
.usage-modal-annual-hint {
  font-size: 0.66rem;
  color: var(--muted);
  font-weight: 500;
  margin-top: 3px;
  font-family: var(--font-mono);
  min-height: 1em;
}

/* ══════════════════════════════════════════════════════
   INTELLIGENCE LAYER — v727
   ══════════════════════════════════════════════════════ */

/* Drift arrow on forecast plan tile */
.forecast-drift-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  margin-left: 5px;
  vertical-align: middle;
  flex-shrink: 0;
}
.forecast-drift-arrow.improving {
  background: var(--tone-good-bg, #f0fdf4);
  color: var(--tone-good-text, #166534);
  border: 1px solid var(--tone-good-border, rgba(34,197,94,0.22));
}
.forecast-drift-arrow.worsening {
  background: var(--tone-bad-bg, #fef2f2);
  color: var(--tone-bad-text, #991b1b);
  border: 1px solid var(--tone-bad-border, rgba(239,68,68,0.22));
}
.forecast-drift-arrow.stable {
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--line);
}

/* Spending growth chip in behavior card */
.intel-growth-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 7px;
  font-size: 0.68rem;
  font-weight: 600;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.22);
  color: var(--red-900);
  margin-top: 6px;
  width: fit-content;
}
.intel-growth-chip.good {
  background: var(--tone-good-bg, #f0fdf4);
  border-color: var(--tone-good-border, rgba(34,197,94,0.22));
  color: var(--tone-good-text, #166534);
}

/* Behavioral insight kicker line */
.intel-behavior-kicker {
  font-size: 0.63rem;
  color: var(--muted);
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid var(--line);
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════
   VALUE SCORE SYSTEM — v728
   ══════════════════════════════════════════════════════ */

/* Value Score badge on cards */
.usage-vs-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 7px;
  font-size: 0.68rem;
  font-weight: 700;
  border: 1px solid;
  white-space: nowrap;
}
.usage-vs-badge.vs-high {
  background: var(--tone-good-bg, #f0fdf4);
  border-color: var(--tone-good-border, rgba(34,197,94,0.25));
  color: var(--tone-good-text, #166534);
}
.usage-vs-badge.vs-moderate {
  background: var(--tone-neutral-bg, #f8fafc);
  border-color: var(--tone-neutral-border, rgba(71,85,105,0.2));
  color: var(--tone-neutral-text, #5e17eb);
}
.usage-vs-badge.vs-low {
  background: var(--tone-warn-bg, #fffbeb);
  border-color: var(--tone-warn-border, rgba(245,158,11,0.3));
  color: var(--tone-warn-text, #92400e);
}
.usage-vs-badge.vs-waste {
  background: var(--tone-bad-bg, #fef2f2);
  border-color: var(--tone-bad-border, rgba(239,68,68,0.25));
  color: var(--tone-bad-text, #991b1b);
}
.usage-vs-number {
  font-family: var(--font-mono);
  font-size: 0.72rem;
}
.usage-vs-sep {
  opacity: 0.4;
  font-weight: 400;
}
.usage-vs-label {
  font-weight: 600;
}

/* Review badge — Waste-tier only */
.usage-review-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 0.60rem;
  font-weight: 600;
  background: rgba(239,68,68,0.07);
  border: 1px solid rgba(239,68,68,0.18);
  color: var(--red-800);
  letter-spacing: 0.02em;
}

/* KPI Summary Row */
.usage-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  width: 100%;
  align-items: stretch;
}
@media (max-width: 1040px) {
  .usage-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .usage-kpi-row {
    grid-template-columns: 1fr;
  }
}
.usage-kpi-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 12px;
  min-height: 72px;
  position: relative;
  overflow: hidden;
}
.usage-kpi-label {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--muted);
}
.usage-kpi-value {
  font-size: 0.80rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--accent-text);
  line-height: 1.2;
}
.usage-kpi-value.kpi-warn { color: var(--red-900); }
.usage-kpi-value.kpi-bad  { color: var(--red-800); }
.usage-kpi-sub {
  font-size: 0.60rem;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.2;
}
@media (max-width: 480px) {
  .usage-kpi-row { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   USAGE TAB — Phase 1
   ══════════════════════════════════════════════════════ */

/* Notification pill on tab button */
.usage-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: #d97706;
  color: var(--white);
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1;
  margin-left: 5px;
  vertical-align: middle;
}

/* Usage layout */


.usage-card,
.usage-card > * {
  min-width: 0;
}
.usage-card-header {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 12px 14px 8px;
}
@media (max-width: 760px) {
  .usage-card-header {
    grid-template-columns: 1fr;
  }
  .usage-card-badges {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* Usage item card — visual shell now handled by canonical 3D Usage adoption. */
.usage-card {
  overflow: hidden;
  position: relative;
  transition: border-color 140ms, box-shadow 140ms, background 180ms ease, transform 140ms ease;
}
.usage-card.is-due,
.usage-card.warn-strong,
.usage-card.warn-medium,
.usage-card.warn-soft {
  /* state styling is applied in the scoped 3D layer */
}

/* Category-tinted card header */
.usage-card-header {
  background: var(--usage-card-tint, transparent);
  transition: background 200ms ease;
}

/* Colour dot inside category pill */
.usage-cat-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 4px;
  flex-shrink: 0;
  vertical-align: middle;
  position: relative;
  top: -1px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}

.usage-card-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 10px;
  padding: 12px 14px 8px;
}
.usage-card-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--accent-text);
  line-height: 1.2;
  min-height: 2.1em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.usage-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 3px;
}
.usage-meta-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.63rem;
  font-weight: 600;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.usage-meta-pill.checkin-weekly {
  background: rgba(59,130,246,0.10);
  border-color: rgba(59,130,246,0.24);
  color: #1d4ed8;
}
.usage-meta-pill.checkin-monthly {
  background: var(--emerald-14);
  border-color: rgba(16,185,129,0.24);
  color: #047857;
}
.usage-meta-pill.checkin-daily {
  background: rgba(124,58,237,0.10);
  border-color: rgba(124,58,237,0.24);
  color: #6d28d9;
}

.usage-card-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}


.usage-warning-msg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.61rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 6px;
}
.usage-warning-msg.soft { background: #fefce8; color: #854d0e; }
.usage-warning-msg.medium { background: var(--surface-warn-soft); color: var(--expense-cat-cta); }
.usage-warning-msg.strong { background: #fee2e2; color: var(--red-800); }

.usage-card-body {
  padding: 8px 14px 10px;
  display: grid;
  gap: 8px;
}
.usage-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--usage-card-surface, var(--panel-2));
  border: 1px solid var(--usage-card-surface-border, var(--line));
  align-items: center;
}
.usage-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.usage-stat-label {
  font-size: 0.59rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
}
.usage-stat-value {
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--accent-text);
}
.usage-stat-value.muted { font-family: var(--font-ui); color: var(--muted); font-weight: 500; }

/* Check-in controls */
.usage-checkin {
  border-top: 1px solid var(--usage-card-surface-border, var(--line));
  padding: 10px 14px 12px;
  display: grid;
  gap: 7px;
  background: var(--usage-card-surface-soft, transparent);
}
.usage-checkin-prompt {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-text);
}
.usage-checkin-btns {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.usage-response-btn {
  flex: 1;
  min-width: 60px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  background: var(--white);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 120ms, border-color 120ms, color 120ms, box-shadow 120ms;
  color: var(--accent-text);
}
.usage-response-btn:hover { background: var(--accent-surface); border-color: var(--accent-border-strong); }
.usage-response-btn.selected-yes { background: var(--tone-good-bg); border-color: var(--tone-good-border); color: var(--tone-good-text); }
.usage-response-btn.selected-little { background: var(--tone-neutral-bg); border-color: var(--tone-neutral-border); color: var(--tone-neutral-text); }
.usage-response-btn.selected-no { background: var(--tone-bad-bg); border-color: var(--tone-bad-border); color: var(--tone-bad-text); }

/* Usage count chips */
/* ── Count row: label + quick-chips (1,2,3) + free input ── */
.usage-count-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  flex-wrap: nowrap; /* keep chips + input on one line */
}
.usage-count-label {
  font-size: 0.62rem;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 2px;
}
.usage-count-chip {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--muted);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1.4;
  transition: background 110ms, border-color 110ms, color 110ms, opacity 110ms;
}
.usage-count-chip:hover:not([disabled]) { background: var(--accent-surface); color: var(--accent-text); border-color: var(--accent-border-strong); }
.usage-count-chip.selected { background: var(--timeline-fill); color: var(--white); border-color: var(--timeline-fill); }
.usage-count-chip[disabled] { opacity: 0.38; cursor: not-allowed; pointer-events: none; }
/* Input field gets same highlight border as selected chip when active */
.usage-count-field.selected {
  border-color: var(--timeline-fill);
  color: var(--timeline-fill);
  font-weight: 700;
}

/* Card actions */
.usage-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px 10px;
}
.usage-action-btn {
  padding: 4px 9px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: transparent;
  font: inherit;
  font-size: 0.63rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
  transition: background 110ms, color 110ms;
}
.usage-action-btn:hover { background: var(--accent-surface); color: var(--accent-text); }
.usage-action-btn.danger:hover { background: rgba(239,68,68,0.07); color: #c0392b; border-color: rgba(239,68,68,0.25); }

/* Empty state */
.usage-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--muted);
}
.usage-empty-icon { font-size: 2rem; margin-bottom: 10px; }
.usage-empty-title { font-size: 0.9rem; font-weight: 700; color: var(--accent-text); margin-bottom: 5px; }
.usage-empty-sub { font-size: 0.76rem; }

/* Usage tile grid */
.usage-list {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.usage-tile-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.usage-tile-grid .usage-card {
  height: 100%;
  min-height: 292px;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
}
@media (max-width: 1240px) {
  .usage-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 780px) {
  .usage-tile-grid {
    grid-template-columns: 1fr;
  }
}

/* Add/edit form modal */
.usage-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.45);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.usage-modal-overlay.is-hidden { display: none; }
.usage-modal-card {
  background: var(--panel);
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(15,23,42,0.18);
  width: min(440px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  display: grid;
  gap: 0;
}
.usage-modal-head {
  padding: 14px 16px 10px;
  background: linear-gradient(180deg, #f5f8fa 0%, #eef3f6 100%);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.usage-modal-head h4 { margin: 0; font-size: 0.86rem; font-weight: 700; color: var(--accent-text); }
.usage-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background 110ms, color 110ms;
}
.usage-modal-close:hover { background: var(--accent-surface); color: var(--accent-text); }
.usage-modal-body {
  padding: 14px 16px;
  display: grid;
  gap: 10px;
}
.usage-form-row {
  display: grid;
  gap: 4px;
}
.usage-form-label {
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.usage-form-input,
.usage-form-select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 0.78rem;
  background: var(--white);
  color: var(--text);
  transition: border-color 130ms, box-shadow 130ms;
}
.usage-form-input:focus,
.usage-form-select:focus {
  outline: none;
  border-color: var(--accent-border-strong);
  box-shadow: 0 0 0 2px var(--slate-10);
}
.usage-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 640px) {
  .usage-form-row-2 {
    grid-template-columns: 1fr;
  }
}
.usage-modal-foot {
  padding: 10px 16px 14px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  border-top: 1px solid var(--line);
}
.usage-btn-cancel {
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
  transition: background 110ms;
}
.usage-btn-cancel:hover { background: var(--panel-2); }
.usage-btn-save {
  padding: 7px 16px;
  border-radius: 8px;
  border: 1px solid rgba(71,85,105,0.3);
  background: var(--accent-surface);
  color: var(--accent-text);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 110ms;
}
.usage-btn-save:hover { background: var(--accent-surface-hover); }

/* Count: free numeric input replacing chips */
/* compact free-entry field + disabled state */
.usage-count-field {
  width: 34px;
  max-width: 34px;
  flex: 0 0 34px;       /* never grow, never shrink */
  padding: 3px 4px;
  border: 1px solid var(--line);
  border-radius: 999px; /* match chip pill shape */
  font: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  font-family: var(--font-mono);
  background: var(--white);
  color: var(--accent-text);
  text-align: center;
  line-height: 1.4;
  transition: border-color 130ms, box-shadow 130ms, opacity 110ms;
  /* hide browser number spinners */
  -moz-appearance: textfield;
}
.usage-count-field::-webkit-outer-spin-button,
.usage-count-field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.usage-count-field:focus {
  outline: none;
  border-color: var(--accent-border-strong);
  box-shadow: 0 0 0 2px var(--slate-10);
}
.usage-count-field[disabled] { opacity: 0.38; cursor: not-allowed; background: var(--panel-2); }

/* ── Phase 2a: Track usage toggle in Subscriptions table ── */
.sub-track-usage-cell {
  white-space: nowrap;
  vertical-align: middle;
}
.sub-track-usage-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
}
/* Toggle switch — reuses cv-toggle pattern from card visibility */
.sub-track-toggle {
  position: relative;
  display: inline-flex;
  width: 30px;
  height: 17px;
  flex-shrink: 0;
  cursor: pointer;
}
.sub-track-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.sub-track-track {
  position: absolute;
  inset: 0;
  background: var(--line);
  border-radius: 999px;
  transition: background 160ms ease;
}
.sub-track-toggle input:checked + .sub-track-track {
  background: var(--timeline-fill);
}
.sub-track-track::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  transition: transform 160ms ease;
}
.sub-track-toggle input:checked + .sub-track-track::after {
  transform: translateX(13px);
}
/* Frequency selector — compact, inline */
.sub-track-freq-select {
  padding: 2px 5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 0.65rem;
  font-weight: 600;
  background: var(--white);
  color: var(--accent-text);
  cursor: pointer;
  transition: border-color 120ms;
}
.sub-track-freq-select:focus {
  outline: none;
  border-color: var(--accent-border-strong);
}
/* Linked-item indicator on usage card */
.usage-linked-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 600;
  background: rgba(108,135,157,0.10);
  border: 1px solid rgba(108,135,157,0.22);
  color: var(--muted);
  white-space: nowrap;
}

/* Usage KPI board */
.usage-kpi-board {
  display: grid;
  gap: 0;
  width: 100%;
  margin: 0 0 12px;
  min-width: 0;
}

/* Usage overview panel — visual shell now handled by canonical 3D Usage adoption. */
.usage-insights-panel {
  overflow: hidden;
  position: relative;
  min-width: 0;
}
.usage-insights-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  min-width: 0;
}
.usage-insight-col {
  padding: 12px 13px 13px;
  border-right: 1px solid var(--line);
  min-width: 0;
}
.usage-insight-col:last-child { border-right: none; }
.usage-insight-col-title {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--accent-text);
  margin-bottom: 8px;
}
.usage-insight-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 0;
  border-top: 1px solid rgba(65,83,100,0.08);
}
.usage-insight-entry:first-of-type {
  border-top: none;
}
.usage-insight-entry-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.69rem;
  color: var(--accent-text);
}
.usage-insight-entry-val {
  flex-shrink: 0;
  font-size: 0.67rem;
  font-weight: 700;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
.usage-insight-entry.is-placeholder .usage-insight-entry-name,
.usage-insight-entry.is-placeholder .usage-insight-entry-val {
  color: var(--muted);
}
@media (max-width: 980px) {
  .usage-insights-grid { grid-template-columns: 1fr; }
  .usage-insight-col {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .usage-insight-col:last-child { border-bottom: none; }
}

/* ══════════════════════════════════════════════════════
   BADGE SYSTEM — v800 replacement styles
   ══════════════════════════════════════════════════════ */
.badge-system-stack{
  display:grid;
  gap:12px;
}
.badge-grid-seq{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  padding:12px;
  border-top:1px solid var(--line);
}
@media (max-width: 640px){
  .badge-grid-seq{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.badge-actions-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

/* Canonical feature action button — shared origin for main tab actions */
.feature-action-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:34px;
  padding:9px 17px;
  border-radius:10px;
  border:1px solid rgba(99,102,241,0.24);
  background:rgba(99,102,241,0.08);
  color:var(--indigo-600);
  font:inherit;
  font-size:.78rem;
  font-weight:800;
  line-height:1.2;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:0 1px 0 rgba(255,255,255,0.7), 0 4px 10px rgba(99,102,241,0.05);
  transition:background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.feature-action-btn:hover{
  background:rgba(99,102,241,0.14);
  border-color:rgba(99,102,241,0.34);
  color:#3730a3;
  box-shadow:0 1px 0 rgba(255,255,255,0.75), 0 7px 16px rgba(99,102,241,0.10);
  transform:translateY(-1px);
}
.feature-action-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(99,102,241,0.18), 0 7px 16px rgba(99,102,241,0.10);
}
.feature-action-btn:active{ transform:translateY(1px); }
.feature-action-btn:disabled{ opacity:.48; cursor:not-allowed; pointer-events:none; transform:none; }
.feature-action-btn.is-primary{
  border-color:var(--accent);
  background: var(--blue-600);
  color:var(--white);
  box-shadow:0 9px 18px rgba(47,64,80,0.16), inset 0 1px 0 rgba(255,255,255,0.18);
}
.feature-action-btn.is-primary:hover{ background: var(--blue-600); border-color:var(--accent-text); color:var(--white); }
.feature-action-btn.is-danger{
  border-color:rgba(220,38,38,0.56);
  background:var(--red-600);
  color:var(--white);
  box-shadow:0 9px 18px rgba(220,38,38,0.18), inset 0 1px 0 rgba(255,255,255,0.18);
}
.feature-action-btn.is-danger:hover{ background:var(--red-700); border-color:var(--red-700); color:var(--white); }
.badge-empty-slot-custom{
  background:linear-gradient(180deg, rgba(148,163,184,0.08) 0%, rgba(148,163,184,0.03) 100%), var(--panel-2);
}
.badge-empty-slot-custom .badge-empty-icon{
  background:rgba(148,163,184,0.08);
  color:var(--muted);
}

.badge-tile-seq .badge-icon-wrap,
.badge-empty-slot .badge-empty-icon{
  margin:0 auto;
}

.badge-active-now 
.badge-seq-desc{
  font-size:0.56rem;
  color:var(--muted);
  text-align:center;
  line-height:1.28;
  min-height:24px;
}
.badge-empty-slot{
  justify-content:center;
  gap:5px;
  min-height:132px;
  opacity:0.62;
  border-style:dashed;
}
.badge-empty-icon{
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--panel);
  border:1px dashed var(--line);
  font-size:0.9rem;
  color:var(--muted);
}
.completed-badges-section .achievements-section-head{
  align-items:center;
}
.completed-badges-empty{
  padding:18px 14px;
  border-top:1px solid var(--line);
  font-size:0.67rem;
  color:var(--muted);
}

.badge-pending-note{
  margin:10px 12px 0;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(245,158,11,0.26);
  background:rgba(245,158,11,0.08);
  color:var(--red-900);
  font-size:0.68rem;
  font-weight:600;
  line-height:1.4;
}
.badge-system-pending .badge-grid-seq{
  filter:blur(2.4px);
  opacity:0.5;
  pointer-events:none;
  user-select:none;
}
.badge-system-pending .badge-actions-row .feature-action-btn{
  opacity:0.5;
  pointer-events:none;
}
.badge-grid-seq .badge-tile{
  padding:24px 8px 8px;
  min-height:132px;
  gap:5px;
}
.badge-grid-seq .badge-name{
  font-size:0.58rem;
  line-height:1.2;
}
.badge-grid-seq .badge-meta-label{
  font-size:0.54rem;
  line-height:1.25;
}
.badge-grid-seq .badge-icon-wrap,
.badge-grid-seq .badge-empty-icon{
  width:28px;
  height:28px;
  font-size:13px;
}
.completed-badge-list{
  display:grid;
  gap:0;
  border-top:1px solid var(--line);
}
.completed-badge-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
}
.completed-badge-row:last-child{ border-bottom:none; }
.completed-badge-icon{
  width:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--emerald-14);
  font-size:0.95rem;
}
.completed-badge-title{
  font-size:0.72rem;
  font-weight:700;
  color:var(--accent-text);
}
.completed-badge-sub{
  font-size:0.61rem;
  color:var(--muted);
  margin-top:2px;
}

.completed-badge-copy{
  flex:1;
  min-width:0;
}
.completed-badges-all-btn{
  border:1px solid var(--line);
  background:transparent;
  color:var(--accent-text);
  border-radius:999px;
  padding:4px 10px;
  font:inherit;
  font-size:0.62rem;
  font-weight:700;
  cursor:pointer;
  transition:background 0.14s,border-color 0.14s,color 0.14s;
}
.completed-badges-all-btn:hover{
  background:var(--panel-2);
  border-color:var(--accent-border, rgba(99,102,241,0.24));
}
.completed-badges-all-btn:focus-visible{
  outline:2px solid rgba(99,102,241,0.25);
  outline-offset:2px;
}
.completed-badge-row.is-highlight{
  background:linear-gradient(180deg, rgba(99,102,241,0.035) 0%, rgba(99,102,241,0.01) 100%);
}
.completed-badge-modal-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:10px;
  max-height:min(62vh, 540px);
  overflow:auto;
  border-top:1px solid var(--line);
  padding:12px 2px 2px;
}
.completed-badge-modal-tile{
  border:1px solid var(--line);
  background:var(--panel-2);
  border-radius:10px;
  padding:10px 12px;
  display:grid;
  grid-template-columns:32px 1fr;
  gap:10px;
  align-items:start;
}
.completed-badge-modal-tile-icon{
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--emerald-14);
  font-size:1rem;
}
.completed-badge-modal-tile-title{
  font-size:0.68rem;
  font-weight:700;
  color:var(--accent-text);
  line-height:1.3;
}
.completed-badge-modal-tile-sub{
  font-size:0.6rem;
  color:var(--muted);
  margin-top:3px;
  line-height:1.35;
}
.completed-badge-modal-empty{
  padding:18px 0 4px;
  font-size:0.68rem;
  color:var(--muted);
}
/* Combined Achievements modal: two labelled sections (Recent + Completed) */
/* Keep the modal within the viewport: header + footer pinned, body scrolls.
   (Base .cbm-modal is overflow:hidden with no max-height, so without this a
   tall modal grows past the centered overlay and clips both close buttons.) */
.cbm-modal.achievements-modal{
  width:min(560px, calc(100vw - 32px));
  max-width:560px;
  max-height:min(88vh, 760px);
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
}
.achievements-modal .badge-config-body{
  overflow-y:auto;
  min-height:0;
}
/* One scroll region only — let the completed grid flow inside the body */
.achievements-modal .completed-badge-modal-grid{
  max-height:none;
  overflow:visible;
}
.achievements-modal .cbm-section + .cbm-section{
  margin-top:16px;
}
.achievements-modal .cbm-section-head{
  font-size:0.74rem;
  font-weight:800;
  color:var(--accent-text);
  letter-spacing:0.01em;
  margin-bottom:8px;
}
.achievements-modal .cbm-recent-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:8px;
}
/* Compact recent tiles in the modal: a single row (icon · copy · XP),
   not the large main-page card. */
.achievements-modal .phase4-achievement-recent-card{
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  min-height:0;
  padding:9px 11px;
  gap:10px;
  border-radius:10px;
  background:var(--panel-2);
}
.achievements-modal .phase4-achievement-recent-icon{
  width:30px;
  height:30px;
  font-size:0.85rem;
}
.achievements-modal .phase4-achievement-recent-title{
  font-size:0.70rem;
}
.achievements-modal .phase4-achievement-recent-sub{
  font-size:0.60rem;
  margin-top:2px;
}
.achievements-modal .phase4-achievement-xp{
  grid-column:auto;
  justify-self:end;
  align-self:center;
  padding:2px 7px;
  font-size:0.58rem;
}

/* Check-in History modal — same in-frame + single-scroll treatment */
.cbm-modal.checkin-history-modal{
  width:min(560px, calc(100vw - 32px));
  max-width:560px;
  max-height:min(88vh, 760px);
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
}
.checkin-history-modal .cbm-history-body{
  overflow-y:auto;
  min-height:0;
  padding:12px 14px;
}
.badge-config-body{
  padding:14px 18px;
  display:grid;
  gap:10px;
}
.badge-config-list{
  display:grid;
  gap:8px;
}
.badge-config-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 11px;
  border-radius:10px;
  background:var(--panel-2);
  border:1px solid var(--line);
  cursor:pointer;
}
.badge-config-item.is-selected{
  border-color:rgba(99,102,241,0.24);
  background:rgba(99,102,241,0.06);
}
.badge-config-check{
  margin-top:2px;
}
.badge-config-main{
  flex:1;
  min-width:0;
}
.badge-config-top{
  display:flex;
  align-items:center;
  gap:7px;
}
.badge-config-icon{ font-size:0.9rem; }
.badge-config-name{
  font-size:0.72rem;
  font-weight:700;
  color:var(--accent-text);
}
.badge-config-order{
  margin-left:auto;
  font-size:0.58rem;
  font-weight:700;
  color:var(--indigo-600);
}
.badge-config-desc{
  margin-top:4px;
  font-size:0.62rem;
  color:var(--muted);
  line-height:1.35;
}

/* Reintroduced category tinting for readability */


/* Refined category tile tinting */

/* Left side (Income - green) */


/* Right side (Savings & Investments - blue) */


.expense-tile-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:6px;
}
.expense-progress{
  display:grid;
  gap:6px;
}
.expense-progress-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:0.74rem;
  color:var(--muted);
  font-weight:600;
}
.expense-progress-row strong{
  color:var(--accent-text);
}
.expense-progress-bar{
  height:10px;
  border-radius:999px;
  background:var(--slate-18);
  overflow:hidden;
  position:relative;
}
.expense-progress-fill{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(22,163,74,0.78), rgba(34,197,94,0.58));
}
.expense-progress-fill.is-over{
  background:linear-gradient(90deg, rgba(244,114,182,0.82), rgba(190,24,93,0.76));
}

.expense-empty-state{
  padding:18px 16px;
  color:var(--muted);
  font-size:0.72rem;
}
.expense-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.42);
  backdrop-filter:blur(2px);
  z-index:9997;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:16px;
}
.expense-modal{
  width:min(560px, 100%);
  max-height:calc(100vh - 32px);
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  border-radius:22px;
  border:1px solid var(--card-border);
  background:var(--panel);
  box-shadow:0 28px 60px rgba(15,23,42,0.22);
  overflow:hidden;
}
.expense-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
}
.expense-modal-title-wrap{
  min-width:0;
}
.expense-modal-title{
  font-size:1.35rem;
  font-weight:800;
  color:var(--accent-text);
  line-height:1.15;
}
.expense-modal-sub{
  margin-top:4px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.expense-modal-hero{
  padding:16px;
  border-bottom:1px solid var(--line);
  display:grid;
  gap:10px;
}
.expense-modal-hero-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.expense-hero-block{
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--panel-2);
  padding:10px 12px;
}
.expense-hero-label{
  font-size:0.62rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--muted);
  font-weight:700;
}
.expense-hero-value{
  margin-top:5px;
  font-size:1.02rem;
  font-weight:700;
  font-family:var(--font-mono);
  color:var(--accent-text);
}
.expense-modal-body{
  padding:16px;
  overflow-y:auto;
  overflow-x:hidden;
  min-height:0;
  display:grid;
  gap:14px;
  align-content:start;
}
.expense-editor-card{
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel);
  padding:14px;
  display:grid;
  gap:12px;
}
.expense-editor-grid{
  display:grid;
  grid-template-columns:140px 1fr auto;
  gap:10px;
  align-items:center;
}
.expense-editor-grid .filter-dropdown{
  min-width:180px;
}

.expense-selected-editor .expense-editor-grid:last-of-type .check-wrap{
  min-width:0;
  justify-self:start;
}
.expense-log-card{
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel);
  overflow:hidden;
}
.expense-log-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
}
.expense-log-list{
  display:grid;
  align-content:start;
  grid-auto-rows:max-content;
  gap:8px;
  min-height:0;
  padding:2px 0;
}
.expense-log-list .tx-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:40px;
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel);
}
.expense-log-list .tx-item:last-child{
  border:1px solid var(--line);
}
 
.expense-log-list .tx-left{
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:10px;
}
.expense-log-list .tx-left strong{
  flex:0 0 auto;
  font-size:0.76rem;
  line-height:1.2;
  color:var(--accent-text);
  font-family:var(--font-mono);
}
.expense-log-list .tx-left small{
  min-width:0;
  display:block;
  font-size:0.64rem;
  line-height:1.25;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.expense-log-list .chip-remove{
  width:20px;
  height:20px;
  border:none;
  background:transparent;
  color:var(--red-600);
  cursor:pointer;
  font-size:1rem;
  font-weight:700;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.expense-log-list .chip-remove:hover{
  color:var(--red-700);
  background:rgba(239,68,68,0.08);
  border-radius:999px;
}
.expense-modal-foot{
  padding:14px 16px 16px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.expense-modal-close{
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--muted);
}

@media (max-width: 760px){
  .expense-modal-overlay{
    padding:0;
    align-items:stretch;
  }
  .expense-modal{
    width:100%;
    max-height:100vh;
    border-radius:0;
  }
  .expense-modal-hero-stats{
    grid-template-columns:1fr;
  }
  .expense-editor-grid{
    grid-template-columns:1fr;
  }
}

/* Income & Savings canonical board system */


/* Reusable category-tile icon shell — transparent, emoji-tuned, and safe for future surfaces */
.category-tile-icon-shell{
  --category-tile-icon-size:24px;
  --category-tile-icon-font-size:1.24rem;
  width:var(--category-tile-icon-size);
  height:var(--category-tile-icon-size);
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  justify-self:start;
  align-self:start;
  background:transparent;
  border:1px solid transparent;
  color:var(--accent-text);
  box-shadow:none;
  overflow:visible;
}
.category-tile-icon-shell[hidden]{
  display:none;
}
.category-tile-icon-shell > img,
.category-tile-icon-shell > svg,
.category-tile-icon-shell > i{
  width:20px;
  height:20px;
  display:block;
  flex:0 0 auto;
}
.category-tile-icon-shell > img,
.category-tile-icon-shell > svg{
  object-fit:contain;
}
.category-tile-icon-shell .category-icon-art{
  font-size:var(--category-tile-icon-font-size);
  line-height:1;
}


.cashflow-group-modal-centered .expense-modal-head,
.cashflow-group-modal-centered .expense-modal-foot{
  position:relative;
  z-index:2;
}
.cashflow-group-modal-centered .expense-modal-body{
  overflow:auto;
  min-height:0;
}


.cashflow-row-stack{
  display:grid;
  gap:12px;
}


/* Income & Savings layout scaffolding
   Visual card skin now comes from .ui-3d-panel + scoped adoption layers below. */


#incomeList, #savingsList{
  display:block;
}


/* Expenses tile board structure — visual styling handled by canonical 3D adoption. */


.expense-group-modal{
  max-width:980px;
}


/* Centered split modal for expense categories */
.expense-modal-overlay{
  justify-content:center;
}
.expense-group-modal-centered{
  width:min(1180px, calc(100vw - 40px));
  max-height:calc(100vh - 40px);
}
.expense-group-modal-centered .expense-modal-head,
.expense-group-modal-centered .expense-modal-foot{
  position:relative;
  z-index:2;
}
.expense-group-modal-centered .expense-modal-body{
  overflow:auto;
  min-height:0;
}
.expense-modal-subcopy{
  color:var(--muted);
  font-size:0.72rem;
  margin-top:6px;
}
.expense-group-modal-split{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-template-rows:minmax(0, 1fr) auto;
  grid-template-areas:
    "subcats log"
    "selected selected";
  gap:16px;
  align-items:stretch;
  min-height:0;
  overflow:visible;
}
.expense-modal-left,
.expense-modal-right{
  min-height:0;
  display:contents;
}
.expense-left-panel-card{
  grid-area:subcats;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  padding:14px;
  display:grid;
  grid-template-rows:auto minmax(0, 1fr);
  gap:12px;
  min-height:0;
}
.expense-panel-label{
  font-size:0.62rem;
  font-weight:800;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.expense-subcat-list{
  display:grid;
  gap:10px;
  min-height:0;
  overflow:auto;
  padding-right:2px;
}
.expense-subcat-tile{
  width:100%;
  text-align:left;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel-2);
  padding:10px 12px;
  display:grid;
  gap:6px;
  cursor:pointer;
  transition:border-color 130ms ease, box-shadow 130ms ease, transform 130ms ease, background 130ms ease;
}
.expense-subcat-tile:hover{
  transform:translateY(-1px);
  border-color:rgba(99,102,241,0.24);
  box-shadow:0 8px 18px var(--overlay-06);
}
.expense-subcat-tile.is-active{
  border-color:rgba(99,102,241,0.28);
  background:rgba(99,102,241,0.06);
  box-shadow:0 10px 22px rgba(99,102,241,0.10);
}
.expense-subcat-tile-head,
.expense-subcat-meta,
.expense-subcat-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.expense-subcat-tile-head{
  align-items:flex-start;
}
.expense-tile-meta-inline{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0;
}
.expense-subcat-name{
  font-size:0.82rem;
  font-weight:800;
  color:var(--accent-text);
}
.expense-subcat-amount{
  font-size:0.8rem;
  font-family:var(--font-mono);
  font-weight:700;
  color:var(--accent-text);
}
.expense-subcat-meta,
.expense-subcat-foot{
  font-size:0.65rem;
  color:var(--muted);
}
.expense-subcat-open{
  font-weight:700;
  color:var(--accent-text);
}
.expense-subcat-progress .expense-progress-bar{
  height:8px;
}
.expense-selected-editor{
  grid-area:selected;
  border-radius:18px;
}
.expense-selected-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.expense-selected-title{
  font-size:0.95rem;
  font-weight:800;
  color:var(--accent-text);
  margin-top:4px;
}
.expense-selected-chip{
  padding:6px 10px;
  border-radius:999px;
  background:var(--panel-2);
  border:1px solid var(--line);
  font-size:0.65rem;
  color:var(--muted);
  font-weight:700;
}
.expense-selected-kpis{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.expense-selected-kpis div{
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel-2);
  padding:10px 12px;
  display:grid;
  gap:3px;
}
.expense-selected-kpis span{
  font-size:0.58rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
}
.expense-selected-kpis strong{
  font-size:0.84rem;
  font-weight:800;
  color:var(--accent-text);
  font-family:var(--font-mono);
}
.expense-log-card-large{
  grid-area:log;
  height:100%;
  min-height:0;
  display:grid;
  grid-template-rows:auto 1fr;
}
.expense-log-sub{
  margin-top:4px;
  font-size:0.68rem;
}
.expense-log-card-large .expense-log-list{
  overflow:auto;
  min-height:0;
  max-height:100%;
}

.expense-subcat-tile{
  padding:10px 12px;
  gap:6px;
}
.expense-subcat-tile-head{
  align-items:flex-start;
}
.expense-subcat-title-line{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.expense-tile-meta-inline{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin:0;
}
.expense-subcat-title-line .expense-subcat-name{
  flex:0 0 auto;
}
.expense-subcat-meta,
.expense-subcat-foot{
  font-size:0.64rem;
}

.expense-subcat-title-line{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.expense-tile-meta-inline{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin:0;
}
.expense-subcat-title-line .expense-subcat-name{
  flex:0 0 auto;
}

.expense-subcat-title-line{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.expense-subcat-title-line .expense-tile-meta-inline{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin:0;
}

.expense-selected-editor .expense-editor-row-inline .expense-inline-note-wrap .note-ac-chips{
  position:absolute;
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  pointer-events:none;
}
.expense-selected-editor .expense-editor-row-inline .expense-inline-note-wrap .note-ac-chips .note-ac-chip{
  pointer-events:auto;
}
/* Expenses popup visual hierarchy refresh */
.expense-group-modal-centered{
  border:1px solid rgba(148,163,184,0.28);
  box-shadow:0 28px 64px rgba(15,23,42,0.18);
}
.expense-group-modal-centered .expense-modal-head{
  background:linear-gradient(180deg, rgba(241,245,249,0.92) 0%, rgba(248,250,252,0.84) 100%);
  border-bottom:1px solid var(--slate-22);
}
.expense-group-modal-centered .expense-modal-title{
  color:var(--accent-text);
}
.expense-group-modal-centered .expense-modal-subcopy{
  color:var(--accent-text);
}

.expense-group-modal-centered .expense-modal-hero{
  background:linear-gradient(180deg, var(--surface-light-96) 0%, rgba(241,245,249,0.78) 100%);
  border-bottom:1px solid var(--slate-18);
}
.expense-group-modal-centered .expense-hero-block{
  background:var(--white);
  border:1px solid rgba(148,163,184,0.24);
  box-shadow:0 1px 2px rgba(15,23,42,0.03);
}
.expense-group-modal-centered .expense-hero-label{
  color:var(--accent-text);
}
.expense-group-modal-centered .expense-hero-value{
  color:var(--accent-text);
}

.expense-left-panel-card,
.expense-log-card-large,
.expense-selected-editor{
  position:relative;
  border:1px solid rgba(148,163,184,0.24);
  box-shadow:0 8px 22px rgba(15,23,42,0.04);
}

.expense-left-panel-card{
  background:linear-gradient(180deg, rgba(248,250,252,0.95) 0%, rgba(241,245,249,0.72) 100%);
}
.expense-log-card-large{
  background:linear-gradient(180deg, var(--white-98) 0%, rgba(248,250,252,0.82) 100%);
}
.expense-selected-editor{
  background:linear-gradient(180deg, rgba(239,246,255,0.72) 0%, var(--surface-light-96) 100%);
}

.expense-left-panel-card::before,
.expense-log-card-large::before,
.expense-selected-editor::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
}
.expense-left-panel-card::before{
  background:#94a3b8;
}
.expense-log-card-large::before{
  background:var(--planned-border);
}
.expense-selected-editor::before{
  background:#60a5fa;
}

.expense-panel-label{
  color:var(--accent-text);
}
.expense-log-head{
  background:var(--white-72);
  border-bottom:1px solid var(--slate-18);
}
.expense-log-head strong,
.expense-selected-title,
.expense-subcat-name{
  color:var(--accent-text);
}

.expense-subcat-list{
  padding-right:4px;
}
.expense-subcat-tile{
  background:var(--white);
  border:1px solid var(--slate-22);
  box-shadow:0 1px 2px rgba(15,23,42,0.03);
}
.expense-subcat-tile:hover{
  border-color:rgba(96,165,250,0.36);
  box-shadow:0 10px 18px var(--overlay-06);
}
.expense-subcat-tile.is-active{
  background:linear-gradient(180deg, rgba(239,246,255,0.98) 0%, rgba(248,250,252,1) 100%);
  border-color:rgba(96,165,250,0.42);
  box-shadow:0 10px 22px rgba(96,165,250,0.12);
}
.expense-subcat-meta,
.expense-subcat-foot,
.expense-log-sub{
  color:var(--accent-text);
}

.expense-selected-kpis div{
  background:var(--white);
  border:1px solid rgba(148,163,184,0.2);
}
.expense-selected-kpis span{
  color:var(--accent-text);
}
.expense-selected-kpis strong{
  color:var(--accent-text);
}

.expense-log-list .tx-item{
  background:var(--white);
  border:1px solid var(--slate-18);
}
.expense-log-card-large .expense-log-list .expense-empty-state,
.expense-log-card-large .expense-log-list .empty{
  background:var(--white);
  border:1px dashed rgba(148,163,184,0.28);
  color:var(--accent-text);
}

.expense-selected-editor .expense-editor-row-inline .expense-inline-add:hover{
  background:rgba(241,245,249,0.9);
}
.expense-selected-editor .check-wrap{
  background:var(--white-82);
  border:1px solid var(--slate-18);
  border-radius:8px;
  padding:7px 10px;
}

.expense-group-modal-centered .ghost-btn,
.expense-group-modal-centered .tiny-btn{
  border-color:rgba(148,163,184,0.28);
  background:var(--white);
}
.expense-group-modal-centered .ghost-btn:hover,
.expense-group-modal-centered .tiny-btn:hover{
  background:rgba(241,245,249,0.94);
}
.expense-selected-editor .expense-editor-row-inline .expense-inline-note-wrap .note-ac-chips{
  left:0;
  right:auto;
  top:calc(100% + 4px);
  max-width:100%;
  z-index:1200;
}

@media (max-width: 980px){
  .expense-group-modal-centered{
    width:min(100vw - 20px, 980px);
  }
  .expense-group-modal-centered .expense-modal-body{
    overflow:auto;
  }
  .expense-group-modal-split{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    grid-template-areas:
      "subcats"
      "selected"
      "log";
    overflow:visible;
  }
  .expense-modal-left,
  .expense-modal-right{
    display:grid;
    gap:14px;
  }
  .expense-left-panel-card,
  .expense-log-card-large{
    min-height:auto;
  }
  .expense-subcat-list{
    max-height:260px;
  }
  .expense-log-card-large .expense-log-list{
    max-height:320px;
  }
}
@media (max-width: 760px){
  .expense-group-modal-centered{
    width:100%;
    max-height:100vh;
    border-radius:0;
  }
  .expense-modal-overlay{
    padding:0;
    align-items:stretch;
  }
  .expense-selected-kpis,
  .expense-editor-grid{
    grid-template-columns:1fr;
  }
}

/* Fix panel divider lines overflow */
.expense-left-panel-card,
.expense-log-card-large,
.expense-selected-editor{
  margin-left:4px;
  margin-right:4px;
}

.expense-left-panel-card::before,
.expense-log-card-large::before,
.expense-selected-editor::before{
  left:6px;
  right:6px;
  border-radius:2px;
}

.expense-selected-editor .expense-progress,
.expense-selected-editor .expense-progress-bar{
  display:none;
}

[data-debug-dump],[data-code-dump]{display:none;}
/* Fix panel divider lines overflow */
.expense-left-panel-card,
.expense-log-card-large,
.expense-selected-editor{
  margin-left:4px;
  margin-right:4px;
}

.expense-left-panel-card::before,
.expense-log-card-large::before,
.expense-selected-editor::before{
  left:6px;
  right:6px;
  border-radius:2px;
}

/* consolidated from expense-special-pill-inline-fix */
/* Keep special funded tiles inline with title */
.expense-subcat-tile-head{
  align-items:flex-start;
}
.expense-subcat-title-line{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
  overflow:hidden;
}
.expense-subcat-title-line .expense-subcat-name{
  flex:0 1 auto;
  min-width:0;
  white-space:nowrap;
}
.expense-subcat-title-line .expense-tile-meta-inline{
  flex:0 1 auto;
  min-width:0;
  display:inline-flex;
  align-items:center;
  gap:5px;
  flex-wrap:nowrap;
  overflow:hidden;
}
.expense-subcat-title-line .expense-tile-meta-inline .linked-funding{
  max-width:190px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


#expensesSection,
#subscriptionsSectionCompact,
#usageSectionCompact{
  border-radius:18px;
  overflow:hidden;
}
#expensesSection > .section-header,
#subscriptionsSectionCompact > .section-header,
#usageSectionCompact > .section-header{
  margin:0;
  border-radius:0;
}
/* Suppress hover effects on static (non-interactive) section headers */


/* Unified static section headers: Expenses / Subscriptions / Usage */
#expensesSection > .section-header,
#subscriptionsSectionCompact > .section-header,
#usageSectionCompact > .section-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  padding:16px 18px 12px;
}


#usageSectionCompact > .section-header{
  background:transparent;
}
#usageSectionCompact > .section-header .focus-head{
  background:transparent;
  border:0;
}


/* ══════════════════════════════════════════════════════
   BUDGET ALLOCATION — Focus Rows
   Canonical layout for the Overview allocation module.
   Keeps key planning data visible while secondary fields live in
   the reusable viewport-bound Details popover.
   ══════════════════════════════════════════════════════ */
.overview-allocation-card{
  padding:10px;
  overflow:visible;
}
.overview-allocation-card .allocation-section{
  display:grid;
  gap:10px;
}
.overview-allocation-card .allocation-section > .section-header{
  min-height:0;
  width:100%;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0;
  padding:9px 12px;
  border:0;
  border-bottom:1px solid rgba(111,135,154,0.16);
  border-radius:8px 8px 0 0;
  background:linear-gradient(180deg, rgba(245,248,250,0.96) 0%, rgba(238,243,246,0.96) 100%);
  cursor:default;
}
.overview-allocation-card .allocation-section > .section-header .focus-head{
  display:flex;
  align-items:center;
  min-height:0;
  padding:0;
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.overview-allocation-card .allocation-section > .section-header h3{
  margin:0;
  color:var(--accent-text);
  font-size:0.86rem;
  font-weight:850;
  line-height:1.2;
}
.overview-allocation-card #budgetOverview{
  min-width:0;
  padding:0 2px 2px;
}
.overview-allocation-card .alloc-grid,
.overview-allocation-card .alloc-focus-wrap{
  display:grid;
  gap:8px;
}

.overview-allocation-card .alloc-focus-wrap{
  border:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
.alloc-top-row{
  display:grid;
  grid-template-columns:minmax(220px,auto) minmax(220px,1fr);
  gap:12px;
  align-items:center;
  padding:0 8px;
}
.overview-allocation-card .alloc-top-row .available-funds-wrap{min-width:0;}
.overview-allocation-card .alloc-top-row .alloc-progress{margin:0;align-self:center;}
.overview-allocation-card .alloc-top-row .alloc-progress-head{margin-bottom:4px;}
.alloc-focus-list{display:grid;gap:6px;padding:0 8px 2px;}
.alloc-focus-row{
  --alloc-row-accent:#5e17eb;
  position:relative;
  display:grid;
  grid-template-columns:minmax(150px,1.05fr) minmax(74px,0.44fr) minmax(190px,1.36fr) minmax(84px,0.58fr) minmax(70px,0.42fr);
  gap:8px;
  align-items:center;
  min-height:54px;
  padding:8px 10px 8px 12px;
  border:1px solid rgba(111,135,154,0.18);
  border-radius:14px;
  background:rgba(255,255,255,0.70);
  box-shadow:0 5px 16px rgba(15,23,42,0.035);
  overflow:visible;
  transition:border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.alloc-focus-row::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 999px 999px 0;background:var(--alloc-row-accent);opacity:0.7;}
.alloc-focus-row:hover{border-color:rgba(111,135,154,0.30);background:var(--white-86);box-shadow:0 8px 22px rgba(15,23,42,0.055);}
.alloc-focus-row.is-over{--alloc-row-accent:var(--red-600);}
.alloc-focus-row.is-low{--alloc-row-accent:var(--amber);}
.alloc-focus-row.is-good{--alloc-row-accent:var(--emerald);}
.alloc-focus-row.is-savings{--alloc-row-accent:var(--indigo-700);}
.alloc-focus-category{min-width:0;display:grid;gap:3px;}
.alloc-focus-title-row{min-width:0;display:flex;align-items:center;gap:5px;}
.alloc-focus-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:0.73rem;font-weight:900;color:var(--accent-text);line-height:1.15;}
.alloc-focus-source{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:0.55rem;font-weight:650;color:var(--muted);line-height:1.2;}
.alloc-focus-target{min-width:0;display:flex;align-items:center;justify-content:center;}
.alloc-focus-row .pill-soft{justify-content:center;min-width:58px;padding:4px 8px;border-radius:999px;background:rgba(99,102,241,0.06);border-color:rgba(99,102,241,0.18);font-family:var(--font-mono);font-size:0.62rem;font-weight:900;}
.alloc-focus-row .target-edit{justify-content:center;gap:4px;}
.alloc-focus-row .target-input{max-width:58px;height:28px;border-radius:9px;text-align:center;font-family:var(--font-mono);font-size:0.68rem;font-weight:900;}
.alloc-focus-row .pct-symbol{font-size:0.62rem;font-weight:900;color:var(--muted);}
.alloc-focus-current{min-width:0;display:grid;gap:5px;}
.alloc-focus-current-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.alloc-focus-current-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono);font-size:0.69rem;font-weight:900;color:var(--accent-text);line-height:1.1;}
.alloc-focus-current-value .expense-negative{color:var(--red-600);}
.alloc-focus-current-value .income-positive{color:#087a3d;}
.alloc-focus-pct{flex:0 0 auto;min-width:38px;text-align:center;padding:2px 6px;border-radius:999px;background:rgba(15,23,42,0.045);font-family:var(--font-mono);font-size:0.58rem;font-weight:900;color:#087a3d;}
.alloc-focus-pct.over{color:var(--red-600);background:rgba(239,68,68,0.08);}
.alloc-focus-pct.low{color:var(--amber-warn);background:rgba(245,158,11,0.09);}
.alloc-focus-bar{height:8px;border-radius:999px;background:rgba(15,23,42,0.09);overflow:hidden;}
.alloc-focus-fill{height:100%;border-radius:999px;transition:width 400ms ease;}
.alloc-focus-remaining{display:flex;align-items:center;justify-content:center;min-height:28px;padding:5px 8px;border-radius:10px;border:1px solid var(--overlay-06);background:rgba(15,23,42,0.045);color:var(--accent-text);font-family:var(--font-mono);font-size:0.64rem;font-weight:900;white-space:nowrap;}
.alloc-focus-remaining.good-budget,.alloc-focus-remaining.value-positive{background:rgba(16,185,129,0.09);border-color:rgba(16,185,129,0.14);color:#087a3d;}
.alloc-focus-remaining.remaining-low{background:rgba(245,158,11,0.10);border-color:rgba(245,158,11,0.16);color:var(--amber-warn);}
.alloc-focus-remaining.remaining-negative{background:rgba(239,68,68,0.10);border-color:rgba(239,68,68,0.16);color:var(--red-600);}
.alloc-focus-details{position:relative;min-width:0;}
.alloc-focus-details > summary{list-style:none;}
.alloc-focus-details > summary::-webkit-details-marker{display:none;}
.alloc-focus-details-btn{width:100%;min-height:30px;display:inline-flex;align-items:center;justify-content:center;gap:4px;border:1px solid rgba(111,135,154,0.22);border-radius:10px;background:rgba(248,250,252,0.85);color:var(--accent-text);font:inherit;font-size:0.59rem;font-weight:850;line-height:1.05;text-align:center;cursor:pointer;transition:background 120ms ease,border-color 120ms ease;padding:4px 6px;box-sizing:border-box;}
.alloc-focus-details-btn:hover,.alloc-focus-details[open] .alloc-focus-details-btn,
.alloc-focus-details[data-alloc-detail-open="true"] .alloc-focus-details-btn{background:var(--accent-surface);border-color:var(--accent-border);}
.alloc-focus-details-label{display:block;min-width:0;text-align:center;line-height:1.05;}
.alloc-focus-details-btn::after{content:'⌄';flex:0 0 auto;font-size:0.54rem;line-height:1;color:var(--muted);transform:none;}
.alloc-focus-details[open] .alloc-focus-details-btn::after{content:'⌃';}
.alloc-focus-panel{position:fixed;z-index:1350;width:min(360px,calc(100vw - 24px));max-width:min(360px,calc(100vw - 24px));display:grid;gap:8px;padding:10px;border:1px solid rgba(111,135,154,0.20);border-radius:14px;background:var(--white-98);box-shadow:0 18px 44px rgba(15,23,42,0.16);overflow:auto;scrollbar-gutter:stable;}
.alloc-focus-panel::before{content:none;}
.alloc-focus-panel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.alloc-focus-panel-item{min-width:0;display:grid;gap:4px;padding:8px 9px;border:1px solid rgba(111,135,154,0.14);border-radius:11px;background:rgba(248,250,252,0.72);}
.alloc-focus-panel-label{font-size:0.52rem;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:0.07em;line-height:1;}
.alloc-focus-panel-value{font-family:var(--font-mono);font-size:0.68rem;font-weight:900;color:var(--accent-text);white-space:nowrap;}
.alloc-focus-splitwise-block{display:grid;gap:5px;}
.alloc-focus-splitwise-block .splitwise-toggle{width:100%;min-height:30px;border-radius:10px;}

@media (max-width:1180px){
  .alloc-focus-row{grid-template-columns:minmax(140px,1.1fr) minmax(70px,0.48fr) minmax(170px,1.3fr) minmax(82px,0.62fr) minmax(66px,0.45fr);gap:8px;}
  .alloc-focus-title{font-size:0.69rem;}
  .alloc-focus-current-value{font-size:0.64rem;}
}
@media (max-width:760px){
  .alloc-top-row{grid-template-columns:1fr;padding:0 6px;}
  .alloc-focus-list{padding:0 6px 2px;}
  .alloc-focus-row{grid-template-columns:1fr auto;grid-template-areas:'category remaining' 'current current' 'target details';align-items:center;}
  .alloc-focus-category{grid-area:category;}
  .alloc-focus-target{grid-area:target;justify-content:flex-start;}
  .alloc-focus-current{grid-area:current;}
  .alloc-focus-remaining{grid-area:remaining;}
  .alloc-focus-details{grid-area:details;}
}

/* v1176 — Budget Allocation Total Target alignment.
   Uses the same five-column grid as allocation rows:
   Category / Target / Current actual-vs-allocation / Splitwise / Remaining. */
.alloc-focus-total{
  display:grid;
  grid-template-columns:minmax(150px,1.05fr) minmax(74px,0.44fr) minmax(190px,1.36fr) minmax(84px,0.58fr) minmax(70px,0.42fr);
  gap:8px;
  align-items:center;
  padding:9px 10px 9px 12px;
  border-radius:12px;
  background:rgba(15,23,42,0.055);
  border:1px solid rgba(15,23,42,0.10);
  font-weight:900;
  font-family:var(--font-mono);
  font-size:0.64rem;
}
.alloc-focus-total-label{
  min-width:0;
  font-family:var(--font-sans);
  font-size:0.68rem;
  color:var(--accent-text);
}
.alloc-focus-total-target{
  justify-self:center;
  text-align:center;
  white-space:nowrap;
}
.alloc-focus-total-current{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.alloc-focus-total-divider{
  color:var(--muted);
  font-weight:800;
}
.alloc-focus-total-splitwise,
.alloc-focus-total-remaining{
  justify-self:center;
  text-align:center;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.alloc-focus-total-remaining{
  justify-self:end;
  text-align:right;
}
@media (max-width:1180px){
  .alloc-focus-total{
    grid-template-columns:minmax(140px,1.1fr) minmax(70px,0.48fr) minmax(170px,1.3fr) minmax(82px,0.62fr) minmax(66px,0.45fr);
    gap:8px;
  }
}
@media (max-width:760px){
  .alloc-focus-total{
    grid-template-columns:1fr 1fr;
  }
  .alloc-focus-total-label{
    grid-column:1/-1;
  }
  .alloc-focus-total-target,
  .alloc-focus-total-current,
  .alloc-focus-total-splitwise,
  .alloc-focus-total-remaining{
    justify-self:stretch;
    text-align:right;
  }
}

/* Available Funds pill — canonical 3D rebuild */
.available-funds-wrap{
  display:inline-flex;
  align-items:center;
  gap:8px;
  max-width:100%;
}
.available-funds-wrap .inline-info-wrap{
  flex:0 0 auto;
}
.available-funds-banner{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:0;
  min-width:300px;
  max-width:360px;
  width:auto;
  min-height:48px;
  padding:0;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(59,130,246,0.28);
  background:
    radial-gradient(circle at 16% 0%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.38) 30%, transparent 56%),
    linear-gradient(145deg, rgba(224,242,254,0.98) 0%, rgba(191,219,254,0.92) 43%, rgba(147,197,253,0.42) 100%);
  box-shadow:
    0 10px 24px rgba(37,99,235,0.12),
    0 3px 8px var(--overlay-08),
    inset 0 1px 0 var(--white-92),
    inset 0 -1px 0 rgba(37,99,235,0.13);
  transform:none;
  transition:transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.available-funds-banner:hover{
  transform:translateY(-1px);
  border-color:rgba(37,99,235,0.38);
  box-shadow:
    0 13px 28px rgba(37,99,235,0.16),
    0 5px 11px rgba(15,23,42,0.10),
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(37,99,235,0.16);
}
.available-funds-banner .label,
.available-funds-banner .value{
  display:flex;
  align-items:center;
  min-height:48px;
  box-sizing:border-box;
  line-height:1.2;
}
.available-funds-banner .label{
  padding:0 16px;
  color:#3b526f;
  font-size:0.76rem;
  font-weight:800;
  letter-spacing:0.01em;
  background:linear-gradient(180deg, rgba(255,255,255,0.44), rgba(255,255,255,0.12));
  border-right:1px solid rgba(37,99,235,0.18);
  text-shadow:0 1px 0 var(--white-72);
}
.available-funds-banner .value{
  justify-content:flex-end;
  padding:0 17px;
  color:#1e3a5f;
  font-size:1.02rem;
  font-weight:900;
  font-family:var(--font-mono);
  letter-spacing:-0.01em;
  text-shadow:0 1px 0 rgba(255,255,255,0.78);
}

#cashflowModalRoot .cashflow-modal.cashflow-kind-income .expense-modal-body,
#cashflowModalRoot .cashflow-modal.cashflow-kind-savings .expense-modal-body {
  border-top: 1px solid var(--line);
}
#cashflowModalRoot .cashflow-modal.cashflow-kind-income .cashflow-row-stack,
#cashflowModalRoot .cashflow-modal.cashflow-kind-savings .cashflow-row-stack {
  gap: 14px;
}
#cashflowModalRoot .cashflow-modal.cashflow-kind-income .row-inline-stats.cashflow-inline-stats,
#cashflowModalRoot .cashflow-modal.cashflow-kind-savings .row-inline-stats.cashflow-inline-stats {
  width: 190px;
  display: grid;
  gap: 5px;
  justify-content: stretch;
  text-align: right;
}
#cashflowModalRoot .cashflow-modal.cashflow-kind-income .cashflow-statline,
#cashflowModalRoot .cashflow-modal.cashflow-kind-savings .cashflow-statline {
  display: grid;
  grid-template-columns: 62px minmax(88px, 1fr);
  align-items: baseline;
  column-gap: 10px;
}
#cashflowModalRoot .cashflow-modal.cashflow-kind-income .cashflow-statline span,
#cashflowModalRoot .cashflow-modal.cashflow-kind-savings .cashflow-statline span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-align: right;
}
#cashflowModalRoot .cashflow-modal.cashflow-kind-income .cashflow-statline strong,
#cashflowModalRoot .cashflow-modal.cashflow-kind-savings .cashflow-statline strong {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 800;
  text-align: right;
}
@media (max-width: 860px) {
  #cashflowModalRoot .cashflow-modal.cashflow-kind-income .compact-manual .row-top-inline,
  #cashflowModalRoot .cashflow-modal.cashflow-kind-savings .compact-manual .row-top-inline {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  #cashflowModalRoot .cashflow-modal.cashflow-kind-income .row-inline-stats.cashflow-inline-stats,
  #cashflowModalRoot .cashflow-modal.cashflow-kind-savings .row-inline-stats.cashflow-inline-stats {
    width: 100%;
  }
}

/* v1138 — Unified category tile CTA buttons.
   Scope: Income, Savings/Investment, and Expenses category tiles.
   UI-only: no logic, maths, data, or interaction behaviour changed. */


/* v1310 — Smart Insights workspace shell.
   Removed the retired Overview Analytics modal shell while preserving the
   canonical #insightGrid card surface used by drag/drop and ordering. */
.smart-insights-card-body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: visible;
  padding: 14px 16px 16px;
  background:
    radial-gradient(circle at 88% 0%, rgba(99,102,241,0.08), transparent 34%),
    linear-gradient(180deg, var(--surface-light-96), rgba(241,245,249,0.92));
}

.smart-insights-card-body #insightGrid {
  display: grid;
  gap: 16px;
}

@media (max-width: 760px) {
  .smart-insights-card-body {
    padding: 10px;
  }
  .overview-allocation-card .allocation-section > .section-header {
    align-items: flex-start;
  }
}

.smart-insights-open-btn:focus-visible{
  outline:2px solid rgba(99,102,241,0.6);
  outline-offset:2px;
}


/* v1315 — Smart Insights reset tooltip visible + edge-safe */
.smart-insights-workspace-v2 {
  padding-top: 0;
}
.smart-insights-grid-head {
  align-items: flex-end;
  overflow: visible;
}
.smart-insights-reset-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  align-self: flex-end;
  overflow: visible;
  z-index: 20;
}
.smart-insights-reset-order-inline {
  min-height: 28px;
  white-space: nowrap;
}
.smart-insights-reset-tooltip {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(360px, calc(100vw - 48px));
  max-width: calc(100vw - 48px);
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(15,23,42,0.94);
  color: #fff;
  box-shadow: 0 14px 34px rgba(15,23,42,0.18);
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
}
.smart-insights-reset-tooltip::before {
  content: '';
  position: absolute;
  right: 18px;
  top: -6px;
  width: 10px;
  height: 10px;
  background: rgba(15,23,42,0.94);
  transform: rotate(45deg);
  border-left: 1px solid rgba(15,23,42,0.14);
  border-top: 1px solid rgba(15,23,42,0.14);
}
.smart-insights-reset-control:hover .smart-insights-reset-tooltip,
.smart-insights-reset-control:focus-within .smart-insights-reset-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (max-width: 640px) {
  .smart-insights-grid-head {
    align-items: flex-start;
  }
  .smart-insights-reset-control {
    align-self: flex-start;
    justify-content: flex-start;
  }
  .smart-insights-reset-tooltip {
    right: auto;
    left: 0;
    width: min(320px, calc(100vw - 32px));
  }
  .smart-insights-reset-tooltip::before {
    right: auto;
    left: 18px;
  }
}


/* Financial Goals tab + workspace v1206 — scoped feature styles only. */

.financial-goals-manager-modal::before,
.financial-goals-history-modal::before { background:var(--emerald); }


.financial-goals-history-btn,
.financial-goals-workspace-primary-btn {
  min-height:34px;
  padding:9px 17px;
  border-radius:10px;
  font:inherit;
  font-size:.78rem;
  font-weight:800;
  cursor:pointer;
  transition:background 120ms,border-color 120ms,transform 120ms;
}
.financial-goals-history-btn { border:1px solid rgba(245,158,11,.34); background:rgba(245,158,11,.08); color:var(--red-900); }
.financial-goals-history-btn:hover { background:rgba(245,158,11,.15); border-color:rgba(245,158,11,.48); transform:translateY(-1px); }
.financial-goals-workspace-primary-btn { font-size:.78rem; }


.financial-goals-state-pill { display:inline-flex; align-items:center; max-width:100%; border-radius:999px; padding:4px 9px; font-size:.66rem; font-weight:800; border:1px solid var(--line); background:var(--panel); color:var(--muted); }
.financial-goals-state-pill.state-active { background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.38); color:var(--red-900); }
.financial-goals-state-pill.state-lagging { background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.32); color:var(--red-800); }
.financial-goals-state-pill.state-complete { background:rgba(16,185,129,.13); border-color:rgba(16,185,129,.34); color:var(--green-800); }
.financial-goals-progress { height:7px; border-radius:999px; background:var(--line); overflow:hidden; margin-top:7px; }
.financial-goals-progress-fill { height:100%; border-radius:999px; background:var(--amber); min-width:3px; }
.financial-goals-progress-fill.lagging { background:var(--red-error); }
.financial-goals-progress-fill.complete { background:var(--emerald); }

.financial-goals-manager-overlay.cbm-open,
.financial-goals-history-overlay.cbm-open { display:flex; }
.financial-goals-manager-overlay,
.financial-goals-history-overlay { align-items:center; justify-content:center; padding:18px; overflow:hidden; }
.financial-goals-manager-modal,
.financial-goals-history-modal { width:min(1180px,calc(100vw - 36px)); max-width:1180px; max-height:calc(100vh - 36px); display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; position:relative; overflow:hidden; }
.financial-goals-history-modal { width:min(860px,calc(100vw - 36px)); max-width:860px; grid-template-rows:auto minmax(0,1fr) auto; }
.financial-goals-manager-modal::before,
.financial-goals-history-modal::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; }
.financial-goals-manager-body,
.financial-goals-history-body { overflow:auto; padding:16px 18px 18px; background:linear-gradient(180deg,rgba(16,185,129,.025),rgba(59,130,246,.025)); }
.financial-goals-workspace-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:12px 18px; border-bottom:1px solid var(--line); background:var(--panel); }
.financial-goals-workspace-stat { border:1px solid var(--line); border-radius:12px; background:var(--panel-2); padding:9px 11px; min-width:0; }
.financial-goals-workspace-stat-label { font-size:.56rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
.financial-goals-workspace-stat-value { font-size:.86rem; font-family:var(--font-mono); font-weight:800; color:var(--accent-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.financial-goals-workspace-card { display:grid; gap:12px; }
.fg-workspace-empty { border:1px dashed rgba(16,185,129,.34); border-radius:14px; background:rgba(16,185,129,.045); padding:22px; text-align:center; color:var(--muted); font-size:.78rem; line-height:1.45; }
.fg-goal-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.fg-goal-card { border:1px solid rgba(245,158,11,.34); border-top:3px solid var(--amber); border-radius:16px; background:linear-gradient(135deg,rgba(245,158,11,.07),rgba(59,130,246,.025)),var(--panel); box-shadow:var(--shadow); padding:13px; display:grid; gap:11px; min-width:0; }
.fg-goal-card.state-lagging { border-color:rgba(239,68,68,.32); border-top-color:var(--red-error); background:linear-gradient(135deg,rgba(239,68,68,.055),rgba(59,130,246,.025)),var(--panel); }
.fg-goal-card.state-complete { border-color:rgba(16,185,129,.32); border-top-color:var(--emerald); background:linear-gradient(135deg,rgba(16,185,129,.06),rgba(59,130,246,.025)),var(--panel); }
.fg-goal-card.is-draft { border-style:dashed; border-color:rgba(99,102,241,.35); border-top-color:var(--indigo-700); background:linear-gradient(135deg,rgba(99,102,241,.07),rgba(59,130,246,.025)),var(--panel); }
.fg-goal-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.fg-goal-title-block { min-width:0; display:grid; gap:3px; }
.fg-goal-title-row { display:flex; align-items:center; gap:8px; min-width:0; flex-wrap:wrap; }
.fg-goal-title { font-size:.9rem; font-weight:800; color:var(--accent-text); line-height:1.2; }
.fg-goal-source { font-size:.66rem; color:var(--muted); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fg-goal-card-actions { display:flex; align-items:center; gap:7px; flex-shrink:0; }
.fg-goal-delete { width:30px; height:30px; border-radius:10px; border:1px solid rgba(239,68,68,.22); background:rgba(239,68,68,.06); color:var(--red-800); font:inherit; font-weight:800; cursor:pointer; }
.fg-goal-delete:hover { background:rgba(239,68,68,.12); }
.fg-goal-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.fg-goal-metric { border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.62); padding:8px 9px; min-width:0; }
.fg-goal-metric-label { font-size:.54rem; font-weight:800; letter-spacing:.055em; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
.fg-goal-metric-value { font-size:.74rem; font-family:var(--font-mono); font-weight:800; color:var(--accent-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Financial Goals workspace — scoped card form alignment and keyword flow. */
.fg-goal-card,
.fg-goal-card * { box-sizing:border-box; }
.fg-goal-card { overflow:hidden; }
.fg-goal-form-grid {
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1.34fr) minmax(0,.86fr) minmax(72px,.48fr);
  column-gap:8px;
  row-gap:10px;
  align-items:start;
  width:100%;
  max-width:100%;
  min-width:0;
}
.fg-goal-form-grid > .fg-goal-field { min-width:0; max-width:100%; overflow:hidden; }
.fg-goal-field { display:grid; grid-template-rows:14px 34px; gap:5px; min-width:0; align-content:start; }
.fg-goal-field label {
  display:flex;
  align-items:end;
  min-width:0;
  height:14px;
  font-size:.58rem;
  line-height:1;
  font-weight:800;
  letter-spacing:.055em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fg-goal-field input,
.fg-goal-field select,
.fg-goal-keyword-entry input {
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  min-width:0;
  height:34px;
  border:1px solid var(--card-border);
  border-radius:8px;
  background:var(--panel);
  color:var(--accent-text);
  font:inherit;
  font-size:.73rem;
  line-height:1.1;
  padding:7px 9px;
}
.fg-goal-field select { padding-right:22px; text-overflow:ellipsis; }
.fg-goal-form-grid > .fg-goal-field:nth-child(4) input {
  text-align:right;
  padding-inline:6px;
  font-family:var(--font-mono);
  font-size:.70rem;
}
.fg-goal-field input:focus,
.fg-goal-field select:focus,
.fg-goal-keyword-entry input:focus { outline:none; border-color:rgba(16,185,129,.5); box-shadow:0 0 0 3px rgba(16,185,129,.10); }
.fg-goal-field.fg-goal-keywords { grid-column:1 / -1; grid-template-rows:auto; gap:6px; overflow:hidden; }
.fg-goal-keyword-box { display:grid; gap:7px; min-width:0; max-width:100%; overflow:hidden; }
.fg-goal-keyword-chips {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  min-height:34px;
  align-items:center;
  padding:7px 8px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel-2);
  min-width:0;
  max-width:100%;
  overflow:hidden;
}
.goal-keyword-chip { border:1px solid rgba(16,185,129,.26); background:rgba(16,185,129,.09); color:var(--green-800); border-radius:999px; padding:4px 8px; font:inherit; font-size:.66rem; font-weight:700; display:inline-flex; align-items:center; gap:6px; cursor:pointer; max-width:100%; }
.goal-keyword-chip span { font-size:.78rem; line-height:1; }
.goal-keyword-empty { font-size:.66rem; color:var(--muted); }
.fg-goal-keyword-entry {
  display:grid;
  grid-template-columns:minmax(0,1fr) 44px;
  gap:6px;
  align-items:center;
  min-width:0;
  max-width:100%;
  overflow:hidden;
}
.fg-goal-keyword-entry input { height:32px; font-size:.72rem; padding:7px 9px; }
.fg-goal-keyword-entry .tiny-btn {
  width:44px;
  min-width:44px;
  height:32px;
  padding:0;
  border-radius:8px;
  align-self:stretch;
  justify-content:center;
}
.fg-goal-sub { display:block; margin-top:-2px; font-size:.66rem; color:var(--muted); line-height:1.35; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.fg-goal-confirm-row { display:flex; align-items:center; justify-content:flex-end; gap:8px; border-top:1px solid var(--line); padding-top:11px; margin-top:2px; }
.fg-goal-confirm-note { margin-right:auto; font-size:.66rem; color:var(--muted); line-height:1.35; min-width:0; }
.fg-goal-confirm-btn { border:none; border-radius:9px; background: var(--blue-600); color:var(--white); font:inherit; font-size:.74rem; font-weight:800; padding:8px 16px; cursor:pointer; white-space:nowrap; }
.fg-goal-confirm-btn:hover { background: var(--blue-600); }
.fg-goal-cancel-draft { border:1px solid var(--line); border-radius:9px; background:transparent; color:var(--muted); font:inherit; font-size:.72rem; font-weight:700; padding:7px 12px; cursor:pointer; white-space:nowrap; }
@media (max-width:1040px){
  .fg-goal-form-grid { grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); }
  .fg-goal-field.fg-goal-keywords { grid-column:1 / -1; }
}
@media (max-width:760px){
  .fg-goal-form-grid { grid-template-columns:1fr; }
}
.financial-goals-history-list { display:grid; gap:9px; }
.financial-goals-history-item { border:1px solid rgba(16,185,129,.24); border-radius:13px; background:var(--panel); padding:11px 12px; display:grid; gap:6px; }
.financial-goals-history-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.financial-goals-history-title { font-size:.8rem; font-weight:800; color:var(--accent-text); }
.financial-goals-history-meta { font-size:.63rem; color:var(--muted); margin-top:2px; }
.financial-goals-history-amounts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.financial-goals-history-empty { border:1px dashed var(--line); border-radius:14px; background:var(--panel); padding:22px; text-align:center; font-size:.76rem; color:var(--muted); }
@media (max-width:1080px){
  
  .fg-goal-grid { grid-template-columns:1fr; }
  
  .financial-goals-workspace-strip,
  .financial-goals-history-amounts { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px){
  
  .financial-goals-workspace-strip,
  .fg-goal-metrics,
  .fg-goal-form-grid,
  .financial-goals-history-amounts { grid-template-columns:1fr; }
  .financial-goals-manager-overlay,
  .financial-goals-history-overlay { padding:10px; }
  .financial-goals-manager-modal,
  .financial-goals-history-modal { width:100%; max-height:calc(100vh - 20px); }
}

/* CC matching expense categorisation — scoped to Credit Card Manager only */
.cc-match-charge-row{grid-template-columns:18px 86px minmax(260px,1fr) 88px 28px minmax(140px,.55fr) minmax(140px,.55fr);}
.cc-match-cat-select,.cc-match-sub-select{min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--accent-text);font:inherit;font-size:.66rem;padding:5px 7px;}
@media (max-width:1100px){.cc-match-charge-row{grid-template-columns:18px 76px minmax(180px,1fr) 78px 28px}.cc-match-cat-select,.cc-match-sub-select{grid-column:3 / -1;}}

/* v1256: canonical Overview Analytics button color */
.smart-insights-open-btn{
  background:var(--red-600);
  color:var(--white);
  border-color:var(--red-700);
}
.smart-insights-open-btn:hover{
  background:var(--red-700);
  color:var(--white);
  border-color:var(--red-800);
}

.tx-source-icon{display:inline-block;margin-right:2px;line-height:1;vertical-align:-0.05em;}

/* === card-visibility-ui === */
/* ── Card Visibility Customiser ── */


/* Popover */
.card-visibility-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 500;
  background: var(--panel, #fbfcfd);
  border: 1px solid var(--card-border, #b8c8d6);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15,23,42,0.13);
  padding: 10px;
  width: 256px;
  display: none;
  max-height: 82vh;
  overflow-y: auto;
}
.card-visibility-popover.is-open { display: block; }

.cvp-head {
  font-size: 0.67rem;
  font-weight: 700;
  color: var(--muted, #627181);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 4px 7px;
  border-bottom: 1px solid var(--line, #cfd8e1);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cvp-reset-btn {
  font-size: 0.67rem;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  opacity: 0.7;
}
.cvp-reset-btn:hover { opacity: 1; color: var(--accent-text); }

/* Groups */
.cvp-group { margin-bottom: 3px; }
.cvp-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border-radius: 8px;
  background: var(--panel-2, #f2f5f7);
  border: 1px solid var(--line, #cfd8e1);
  margin-bottom: 1px;
  cursor: pointer;
  user-select: none;
}
.cvp-group-chevron {
  width: 10px; height: 10px;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 140ms ease;
}
.cvp-group.is-open .cvp-group-chevron { transform: rotate(90deg); }
.cvp-group-title {
  font-size: 0.71rem;
  font-weight: 700;
  color: var(--accent-text, #2f4050);
  flex: 1;
}
.cvp-group-count {
  font-size: 0.63rem;
  color: var(--muted);
  background: var(--line);
  border-radius: 999px;
  padding: 1px 6px;
  font-weight: 600;
}
.cvp-group-items {
  display: none;
  padding: 1px 0 2px 8px;
}
.cvp-group.is-open .cvp-group-items { display: block; }

/* Individual item row */
.cvp-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 5px;
  border-radius: 7px;
  transition: background 100ms ease;
}
.cvp-item:hover { background: var(--accent-surface, #edf2f6); }
.cvp-item-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text, #16202a);
  flex: 1;
  cursor: pointer;
  line-height: 1.3;
}
.cvp-item-label.is-hidden {
  color: var(--muted, #627181);
  text-decoration: line-through;
  text-decoration-color: rgba(98,113,129,0.4);
}

/* Toggle switch */
.cv-toggle {
  position: relative;
  width: 28px; height: 16px;
  flex-shrink: 0; cursor: pointer;
}
.cv-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.cv-toggle-track {
  position: absolute; inset: 0;
  background: var(--line, #cfd8e1);
  border-radius: 999px;
  transition: background 160ms ease;
}
.cv-toggle input:checked + .cv-toggle-track { background: var(--timeline-fill, #6c879d); }
.cv-toggle-track::after {
  content: '';
  position: absolute;
  left: 2px; top: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  transition: transform 160ms ease;
}
.cv-toggle input:checked + .cv-toggle-track::after { transform: translateX(12px); }

/* Anchor */
.customize-cards-anchor { position: relative; }

/* ── KPI row: page-level drag-to-reorder ── */
#summaryCards .card[draggable]{
  cursor: grab;
  transition: opacity 120ms ease, box-shadow 180ms ease, transform 160ms ease;
}
#summaryCards .card[draggable]:active{ cursor: grabbing; }
#summaryCards .card.kpi-dragging{
  opacity: 0.38;
  box-shadow: none;
  transform: scale(0.97);
}
#summaryCards .card.kpi-drop-target{
  box-shadow: 0 0 0 2px var(--timeline-fill, #6c879d), var(--shadow);
}

/* ── D upgrade: wider popover ── */
.card-visibility-popover {
  width: 300px;
}

/* Drag handle */
.cvp-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  flex-shrink: 0;
  cursor: grab;
  color: var(--line, #cfd8e1);
  border-radius: 4px;
  transition: color 120ms ease, background 120ms ease;
  touch-action: none;
  user-select: none;
}
.cvp-drag-handle:hover { color: var(--muted, #627181); background: rgba(0,0,0,0.04); }
.cvp-drag-handle:active { cursor: grabbing; }
.cvp-drag-handle svg { display: block; pointer-events: none; }

/* Drag states */
.cvp-item.is-dragging {
  opacity: 0.4;
  background: var(--accent-surface, #edf2f6);
}
.cvp-item.drag-over-above {
  box-shadow: inset 0 2px 0 0 var(--timeline-fill, #6c879d);
}
.cvp-item.drag-over-below {
  box-shadow: inset 0 -2px 0 0 var(--timeline-fill, #6c879d);
}

/* Reorder footnote */
.cvp-footer-note {
  font-size: 0.63rem;
  color: var(--muted, #627181);
  text-align: center;
  padding: 6px 4px 2px;
  border-top: 1px solid var(--line, #cfd8e1);
  margin-top: 4px;
  opacity: 0.8;
}

/* Fix panel divider lines overflow */
.expense-left-panel-card,
.expense-log-card-large,
.expense-selected-editor{
  margin-left:4px;
  margin-right:4px;
}

.expense-left-panel-card::before,
.expense-log-card-large::before,
.expense-selected-editor::before{
  left:6px;
  right:6px;
  border-radius:2px;
}

:root {
  /* === Phase 1 — Design Token Foundation === */
  --bg: #f5f4f0;
  --panel: #ffffff;
  --panel-2: #f8f7f4;
  --line: rgba(0,0,0,0.08);
  --accent: #0f172a;
  --accent-text: #0f172a;        /* keep old name as alias */
  --muted: #64748b;
  --hint: #94a3b8;
  --emerald: #10b981;
  --emerald-bg: rgba(16,185,129,0.08);
  --emerald-border: rgba(16,185,129,0.22);
  --emerald-14: rgba(16,185,129,0.14);
  --amber: #f59e0b;
  --amber-bg: rgba(245,158,11,0.09);
  --amber-border: rgba(245,158,11,0.28);
  --amber-text: #92400e;
  --red-bg: #fef2f2;
  --red-border: rgba(239,68,68,0.25);
  --red-text: #991b1b;
  --indigo: #6366f1;
  --blue-600: #2563eb;
  --green-800: #166534;
  --green-900: #14532d;
  --red-700: #b91c1c;
  --red-800: #991b1b;
  --red-900: #7f1d1d;
  --font: "Geist", sans-serif;
  --font-mono: "Geist Mono", monospace;
  --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --card-border: var(--line);

  /* === Aliases for backward compatibility === */
  --text: #0f172a;               /* old --text → now same as --accent */
  --warn-soft: #fef3c7;
  --accent-soft: rgba(15,23,42,0.06);
  --accent-border: rgba(15,23,42,0.12);
  --accent-border-strong: rgba(15,23,42,0.24);
  --accent-surface: #f1f5f9;
  --accent-surface-hover: #e2e8f0;
  --card-border-hover: rgba(15,23,42,0.16);
  --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.10);
  --surface-error-soft: #fef2f2;
  --surface-light: #f8fafc;
  --surface-light-96: rgba(248,250,252,0.96);
  --surface-success-soft: #eefbf2;
  --surface-warn-soft: #fff7ed;
  --emerald-10: rgba(16,185,129,0.08);
  --emerald-22: rgba(16,185,129,0.22);
  --green-600: #16a34a;
  --green-700: #15803d;
  --red-600: #dc2626;
  --red-error: #ef4444;
  --indigo-600: #4338ca;
  --indigo-700: #6366f1;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;
  --violet-700: #7c3aed;
  --violet-800: #5b21b6;
  --purple: #5e17eb;
  --sky-700: #0284c7;
  --sky-900: #075985;
  --amber-warn: #b45309;
  --white: #ffffff;
  --white-0: rgba(255,255,255,0);
  --white-58: rgba(255,255,255,0.58);
  --white-62: rgba(255,255,255,0.62);
  --white-72: rgba(255,255,255,0.72);
  --white-78: rgba(255,255,255,.78);
  --white-82: rgba(255,255,255,0.82);
  --white-86: rgba(255,255,255,0.86);
  --white-92: rgba(255,255,255,0.92);
  --white-98: rgba(255,255,255,0.98);
  --overlay-06: rgba(15,23,42,0.06);
  --overlay-07: rgba(15,23,42,0.07);
  --overlay-08: rgba(15,23,42,0.08);
  --slate-10: rgba(71,85,105,0.10);
  --slate-18: rgba(148,163,184,0.18);
  --slate-22: rgba(148,163,184,0.22);
  --slate-glass: rgba(99,102,241,0.08);
  --timeline-track: rgba(0,0,0,0.08);
  --timeline-fill: #64748b;
  --savings-surface: rgba(99,102,241,0.06);
  --forecast-tile-status-bg: #f8f7f4;
  --forecast-tile-status-border: rgba(0,0,0,0.08);
  --forecast-tile-status-text: #64748b;
  --forecast-tile-live-bg: rgba(16,185,129,0.05);
  --forecast-tile-live-border: rgba(16,185,129,0.18);
  --forecast-tile-live-text: #166534;
  --forecast-tile-plan-bg: rgba(99,102,241,0.05);
  --forecast-tile-plan-border: rgba(99,102,241,0.16);
  --forecast-tile-plan-text: #4338ca;
  --forecast-tile-structure-bg: rgba(245,158,11,0.05);
  --forecast-tile-structure-border: rgba(245,158,11,0.18);
  --forecast-tile-structure-text: #92400e;
  --tone-good-bg: rgba(16,185,129,0.07);
  --tone-good-border: rgba(16,185,129,0.22);
  --tone-good-text: #166534;
  --tone-warn-bg: rgba(245,158,11,0.08);
  --tone-warn-border: rgba(245,158,11,0.24);
  --tone-warn-text: #92400e;
  --tone-bad-bg: rgba(239,68,68,0.07);
  --tone-bad-border: rgba(239,68,68,0.22);
  --tone-bad-text: #991b1b;
  --tone-neutral-bg: rgba(15,23,42,0.04);
  --tone-neutral-border: rgba(15,23,42,0.10);
  --tone-neutral-text: #64748b;
}

/* ══════════════════════════════════════════════════════
   DARK MODE — token remap
   Activated by <html data-theme="dark"> from the toggle script.
   Strategy: redefine every design token used across the app so the
   bulk of components dark-mode for free. Then handle a handful of
   hardcoded glass / white surfaces below.
   ══════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  color-scheme: dark;

  /* Core surfaces */
  --bg: #0b0f1a;
  --panel: #141a2a;
  --panel-2: #1a2236;
  --line: rgba(255,255,255,0.10);

  /* Text */
  --accent: #e6edf7;
  --accent-text: #e6edf7;
  --text: #e6edf7;
  --muted: #94a3b8;
  --hint: #64748b;

  /* Accent tints — keep brand hues but use lighter text colors so they pop on dark */
  --emerald: #34d399;
  --emerald-bg: rgba(52,211,153,0.12);
  --emerald-border: rgba(52,211,153,0.32);
  --emerald-14: rgba(52,211,153,0.16);
  --emerald-10: rgba(52,211,153,0.12);
  --emerald-22: rgba(52,211,153,0.30);

  --amber: #fbbf24;
  --amber-bg: rgba(251,191,36,0.12);
  --amber-border: rgba(251,191,36,0.36);
  --amber-text: #fcd34d;
  --amber-warn: #fcd34d;
  --warn-soft: rgba(251,191,36,0.14);

  --red-bg: rgba(239,68,68,0.14);
  --red-border: rgba(239,68,68,0.36);
  --red-text: #fca5a5;
  --red-600: #f87171;
  --red-700: #fca5a5;
  --red-800: #fca5a5;
  --red-900: #fecaca;
  --red-error: #f87171;

  --green-600: #34d399;
  --green-700: #6ee7b7;
  --green-800: #6ee7b7;
  --green-900: #a7f3d0;

  --indigo: #818cf8;
  --indigo-600: #a5b4fc;
  --indigo-700: #818cf8;
  --blue-600: #60a5fa;
  --blue-800: #93c5fd;
  --blue-900: #bfdbfe;
  --violet-700: #a78bfa;
  --violet-800: #c4b5fd;
  --purple: #a78bfa;
  --sky-700: #38bdf8;
  --sky-900: #7dd3fc;

  /* Aliases driving accent-coloured surfaces */
  --accent-soft: rgba(255,255,255,0.06);
  --accent-border: rgba(255,255,255,0.14);
  --accent-border-strong: rgba(255,255,255,0.26);
  --accent-surface: #1f2940;
  --accent-surface-hover: #28324c;
  --card-border: var(--line);
  --card-border-hover: rgba(255,255,255,0.20);
  --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.40);

  /* Soft surface variants (info / warn / error / success) */
  --surface-error-soft: rgba(239,68,68,0.10);
  --surface-light: #1a2236;
  --surface-light-96: rgba(26,34,54,0.96);
  --surface-success-soft: rgba(52,211,153,0.10);
  --surface-warn-soft: rgba(251,191,36,0.10);

  /* Shadow needs to be darker, not lighter, on dark backgrounds */
  --shadow: 0 1px 3px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.30);

  /* White-opacity tokens are used all over as "soft glass" backgrounds.
     Remap to dark-glass equivalents. */
  --white: #141a2a;
  --white-0: rgba(20,26,42,0);
  --white-58: rgba(20,26,42,0.58);
  --white-62: rgba(20,26,42,0.62);
  --white-72: rgba(20,26,42,0.72);
  --white-78: rgba(20,26,42,0.78);
  --white-82: rgba(20,26,42,0.82);
  --white-86: rgba(20,26,42,0.86);
  --white-92: rgba(20,26,42,0.92);
  --white-98: rgba(20,26,42,0.98);

  /* Overlay scrims (used over content for modals etc.) */
  --overlay-06: rgba(255,255,255,0.06);
  --overlay-07: rgba(255,255,255,0.07);
  --overlay-08: rgba(255,255,255,0.08);

  --slate-10: rgba(148,163,184,0.10);
  --slate-18: rgba(148,163,184,0.18);
  --slate-22: rgba(148,163,184,0.26);
  --slate-glass: rgba(129,140,248,0.14);

  --timeline-track: rgba(255,255,255,0.10);
  --timeline-fill: #94a3b8;
  --savings-surface: rgba(129,140,248,0.10);

  /* Forecast tile variants */
  --forecast-tile-status-bg: #1a2236;
  --forecast-tile-status-border: rgba(255,255,255,0.10);
  --forecast-tile-status-text: #94a3b8;
  --forecast-tile-live-bg: rgba(52,211,153,0.10);
  --forecast-tile-live-border: rgba(52,211,153,0.26);
  --forecast-tile-live-text: #6ee7b7;
  --forecast-tile-plan-bg: rgba(129,140,248,0.10);
  --forecast-tile-plan-border: rgba(129,140,248,0.26);
  --forecast-tile-plan-text: #a5b4fc;
  --forecast-tile-structure-bg: rgba(251,191,36,0.10);
  --forecast-tile-structure-border: rgba(251,191,36,0.26);
  --forecast-tile-structure-text: #fcd34d;

  /* Tone tokens */
  --tone-good-bg: rgba(52,211,153,0.12);
  --tone-good-border: rgba(52,211,153,0.30);
  --tone-good-text: #6ee7b7;
  --tone-warn-bg: rgba(251,191,36,0.12);
  --tone-warn-border: rgba(251,191,36,0.30);
  --tone-warn-text: #fcd34d;
  --tone-bad-bg: rgba(239,68,68,0.12);
  --tone-bad-border: rgba(239,68,68,0.30);
  --tone-bad-text: #fca5a5;
  --tone-neutral-bg: rgba(255,255,255,0.04);
  --tone-neutral-border: rgba(255,255,255,0.12);
  --tone-neutral-text: #94a3b8;
}

/* ── Body / app background ── */
html[data-theme="dark"] body {
  background: var(--bg);
  color: var(--accent-text);
}

/* ── Sidebar — already dark; just deepen it slightly so it reads as
   distinct from the main canvas ── */
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .veyra-sidebar {
  background: #060912;
}

/* ── Form controls — native inputs need their own colour scheme ── */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: var(--panel-2);
  color: var(--accent-text);
  border-color: var(--line);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--hint); }

/* ── Patch hardcoded white-ish surfaces that don't flow through tokens ── */
html[data-theme="dark"] .cbm-overlay { background: rgba(0,0,0,0.65); }
html[data-theme="dark"] .badge-delete-btn {
  background: rgba(20,26,42,0.85);
  border-color: rgba(248,113,113,0.32);
  color: var(--red-700);
}
html[data-theme="dark"] .badge-delete-btn:hover {
  background: rgba(239,68,68,0.18);
  border-color: rgba(248,113,113,0.50);
}

/* Inputs that explicitly set white bg */
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"] {
  background: var(--panel) !important;
}

/* Charts / SVG — give chart text a readable colour by default */
html[data-theme="dark"] svg text { fill: var(--accent-text); }
html[data-theme="dark"] svg .axis-line,
html[data-theme="dark"] svg .grid-line,
html[data-theme="dark"] svg [stroke="#e2e8f0"],
html[data-theme="dark"] svg [stroke="#f1f5f9"] { stroke: var(--line); }

/* Scrollbars (WebKit) */
html[data-theme="dark"] ::-webkit-scrollbar { background: transparent; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,0.22);
  border-radius: 8px;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(148,163,184,0.34);
}

/* ── The theme toggle button itself ── */
.theme-toggle-btn {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 10000;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--accent-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(15,23,42,0.18);
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}
.theme-toggle-btn:hover {
  transform: translateY(-1px);
  border-color: var(--card-border-hover);
  box-shadow: 0 10px 24px rgba(15,23,42,0.22);
}
.theme-toggle-btn:active { transform: translateY(0); }
.theme-toggle-btn .theme-toggle-icon-dark { display: none; }
.theme-toggle-btn .theme-toggle-icon-light { display: inline; }
html[data-theme="dark"] .theme-toggle-btn .theme-toggle-icon-dark { display: inline; }
html[data-theme="dark"] .theme-toggle-btn .theme-toggle-icon-light { display: none; }
html[data-theme="dark"] .theme-toggle-btn {
  box-shadow: 0 6px 18px rgba(0,0,0,0.50);
}

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: var(--font);
      font-size: 15px;
      line-height: 1.5;
      background: var(--bg);
      color: var(--accent);
    }
    .app {
      display: grid;
      grid-template-columns: 200px 1fr;
      min-height: 100vh;
      max-width: 1920px;
      margin: 0 auto;
    }
    .sidebar {
      background: #0c0f1a;
      color: #e2e8f0;
      padding: 14px 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
    }

    /* ── Brand lockup ── */
    .brand {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 4px 4px 12px;
      border-bottom: 0.5px solid rgba(255,255,255,0.08);
      margin-bottom: 6px;
    }
    .brand h1 { font-size: 0.88rem; margin: 0; color: #f1f5f9; font-weight: 600; letter-spacing: -0.01em; }
    .brand p { display: none; }

    /* ── Month list ── */
    .month-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
      overflow: auto;
      flex: 1;
      padding: 10px;
      margin: 4px 0 10px;
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(37, 99, 235, 0.16) 0%, rgba(59, 130, 246, 0.10) 100%);
      border: 1px solid var(--slate-22);
      box-shadow: 0 14px 30px rgba(2, 8, 23, 0.18), inset 0 1px 0 rgba(255,255,255,0.06);
      scrollbar-gutter: stable;
    }
    .month-btn {
      width: 100%;
      text-align: left;
      border: 1px solid transparent;
      background: rgba(15, 23, 42, 0.16);
      color: #d7e4f3;
      padding: 9px 10px;
      border-radius: 10px;
      cursor: pointer;
      font-size: 0.80rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
    }
    .month-btn:hover {
      background: rgba(59, 130, 246, 0.18);
      border-color: rgba(147, 197, 253, 0.24);
      color: #eff6ff;
      transform: translateY(-1px);
      box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
    }
    .month-btn.active {
      background: linear-gradient(180deg, rgba(96, 165, 250, 0.34) 0%, rgba(59, 130, 246, 0.24) 100%);
      border-color: rgba(191, 219, 254, 0.42);
      color: #f8fbff;
      font-weight: 700;
      box-shadow: 0 12px 22px rgba(30, 64, 175, 0.18);
    }
    .month-btn.active::after {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #dbeafe;
      display: block;
      flex-shrink: 0;
      box-shadow: 0 0 0 4px rgba(191, 219, 254, 0.12);
    }

    /* ── Sidebar section divider ── */
    .side-divider {
      height: 1px; background: rgba(148,163,184,0.16); margin: 8px 0;
    }

    /* ── Side actions ── */
    .side-actions { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
    .side-actions button {
      border: none; background: transparent;
      color: var(--purple); padding: 6px 9px; border-radius: 7px;
      cursor: pointer; font-size: 0.78rem; font-weight: 500;
      display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
      transition: background 120ms ease, color 120ms ease;
    }
    .side-actions button:hover { background: rgba(255,255,255,0.05); color: #94a3b8; }
    .side-actions button:disabled { opacity: 0.35; cursor: not-allowed; }
    .side-actions button .btn-icon { font-size: 12px; width: 14px; text-align: center; flex-shrink: 0; }

    /* Primary sidebar action */
    .primary {
      background: rgba(71,85,105,0.16);
      color: var(--planned-border);
      border: 0.5px solid rgba(71,85,105,0.30);
      margin-bottom: 4px;
    }
    .primary:hover { background: rgba(71,85,105,0.26); color: #e2e8f0; }

    /* Danger button */
    .danger {
      color: rgba(239,68,68,0.7);
    }
    .danger:hover { background: rgba(239,68,68,0.08); color: #f87171; }

    
/* Secondary sidebar buttons (same as base, alias kept for JS compat) */
    .secondary { /* inherits from .side-actions button */ }
    .main { padding: 8px; display: grid; gap: 6px; min-width: 0; align-content: start; }
    
    .title { padding: 0 2px; }
    .title h2,
    .title p { display: none; }
    .title h2 { margin: 0; font-size: 1rem; }
    .title p { margin: 0; color: var(--muted); font-size: 0.72rem; }
    .summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
    .card { background: linear-gradient(180deg, rgba(252,253,253,0.98) 0%, rgba(248,250,251,0.98) 100%); border: 1px solid var(--card-border); border-radius: 12px; box-shadow: var(--shadow); padding: 8px; min-width: 0; transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease; }
    .kpi-label { color: var(--muted); margin-bottom: 2px; }
    .kpi-value { }
    .kpi-foot { margin-top: 2px; color: var(--muted); }
    
    
    .section-details { display: grid; gap: 0; }
    .section-details > summary { list-style: none; cursor: pointer; }
    .section-details > summary::-webkit-details-marker { display: none; }
    .section-header {
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
      padding: 10px 12px;
      background: linear-gradient(180deg, #f5f8fa 0%, #eef3f6 100%);
      border-bottom: 1px solid rgba(65,83,100,0.12);
      border-radius: 12px 12px 0 0;
    
  padding-top: 12px;
}
    
    .alloc-grid { display: grid; gap: 8px; }
    .label-with-inline-info{
      display:inline-flex;
      align-items:center;
      gap:6px;
    }
    .inline-info-wrap{
      position:relative;
      display:inline-flex;
      align-items:center;
      flex:0 0 auto;
    }
    .inline-info-trigger{
      width:18px;
      height:18px;
      border-radius:999px;
      border:1px solid rgba(73,95,117,0.22);
      background:rgba(255,255,255,0.9);
      color:var(--muted);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:0.62rem;
      font-weight:800;
      line-height:1;
      cursor:pointer;
      box-shadow:0 1px 2px var(--overlay-08);
      transition:background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
    }
    .inline-info-trigger:hover,
    .inline-info-wrap[data-open="true"] .inline-info-trigger,
    .inline-info-wrap:focus-within .inline-info-trigger{
      background:var(--forecast-tile-live-bg);
      border-color:rgba(88,120,154,0.32);
      color:var(--forecast-tile-live-text);
      box-shadow:0 6px 16px rgba(61,85,110,0.12);
      transform:translateY(-1px);
    }
    .inline-info-tooltip{
      position:fixed;
      left:-9999px;
      top:-9999px;
      z-index:20000;
      width:min(260px, calc(100vw - 16px));
      max-width:min(260px, calc(100vw - 16px));
      padding:10px 12px;
      border-radius:12px;
      border:1px solid rgba(73,95,117,0.18);
      background:rgba(248,250,252,0.98);
      color:#5f6875;
      font-size:10px;
      line-height:1.45;
      font-style:italic;
      font-weight:400;
      box-shadow:0 16px 36px rgba(15,23,42,0.16);
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:opacity 60ms ease, visibility 60ms ease;
      backdrop-filter:blur(10px);
    }
    .inline-info-tooltip.is-visible{
      opacity:1;
      visibility:visible;
    }
    .inline-info-wrap.is-visible .inline-info-trigger,
    .inline-info-wrap:focus-within .inline-info-trigger{
      background:var(--forecast-tile-live-bg);
      border-color:rgba(88,120,154,0.32);
      color:var(--forecast-tile-live-text);
      box-shadow:0 6px 16px rgba(61,85,110,0.12);
      transform:translateY(-1px);
    }
    .info-tooltip-list{
      margin:0;
      padding-left:16px;
      display:grid;
      gap:6px;
    }
    .info-tooltip-list li{
      margin:0;
    }
    .advisor-change-chip-row{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      margin-top:0;
      flex-wrap:nowrap;
      flex:0 1 auto;
      min-width:0;
      justify-self:center;
    }
    .advisor-change-chip{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:58px;
      padding:5px 10px;
      border-radius:999px;
      font-size:0.72rem;
      font-weight:700;
      line-height:1;
      border:1px solid rgba(73,95,117,0.18);
      background:rgba(245,247,250,0.92);
      color:#46576a;
      box-shadow:inset 0 1px 0 var(--white-82);
    }
    .advisor-change-chip.current{
      background:rgba(231,236,242,0.96);
      color:#495769;
      border-color:var(--tone-neutral-border);
    }
    .advisor-change-chip.increase{
      background:var(--tone-good-bg);
      color:var(--tone-good-text);
      border-color:var(--tone-good-border);
    }
    .advisor-change-chip.decrease{
      background:var(--tone-bad-bg);
      color:var(--tone-bad-text);
      border-color:var(--tone-bad-border);
    }
    .advisor-change-arrow{
      color:#758596;
      font-size:0.82rem;
      font-weight:700;
      line-height:1;
    }
    .advisor-item-head{
      align-items:center;
    }
    .advisor-percent-block{
      min-width:98px;
    }
    
    
    
    
    
    
    .target-input {
      width: 52px; border: 1px solid var(--line); border-radius: 8px; padding: 3px 5px;
      text-align: right; font: inherit; background: #fdfefe;
    }
    .target-edit {
      display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end;
    }
    .target-edit .pct-symbol { color: var(--muted); font-size: 0.72rem; }
    .target-input[disabled] { background: #f3f4f6; color: #6b7280; }
    .pill-soft {
      display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 0.66rem;
      border: 1px solid var(--line); background: var(--surface-light); color: var(--muted);
    }
    
    
    
    

    .splitwise-details { position: relative; display: block; width: 100%; min-width: 0; }
    .splitwise-toggle {
      cursor: pointer; list-style: none; font-weight: 600; font-size: 0.64rem;
      font-family: var(--font-mono); letter-spacing: -0.02em;
      display: inline-flex; align-items: center; justify-content: center; gap: 3px;
      width: 100%; max-width: 100%; min-width: 0;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      padding: 3px 6px;
      border: 0.5px solid rgba(71,85,105,0.22); border-radius: 6px;
      background: rgba(71,85,105,0.08); color: var(--accent);
      transition: background 140ms ease, border-color 140ms ease;
      box-sizing: border-box;
    }
    .splitwise-toggle:hover { background: rgba(71,85,105,0.12); border-color: rgba(71,85,105,0.28); }
    .splitwise-toggle::-webkit-details-marker { display:none; }

    .splitwise-panel {
      position: fixed;
      z-index: 1400;
      width: min(360px, calc(100vw - 24px));
      max-width: min(360px, calc(100vw - 24px));
      max-height: calc(100vh - 24px);
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(15,23,42,0.13), 0 2px 6px var(--overlay-07);
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      overflow: hidden;
    }
    .splitwise-form {
      display: grid;
      grid-template-columns: minmax(0,1fr) auto;
      gap: 6px;
      padding: 10px;
      background: var(--surface-light);
      border-bottom: 1px solid var(--line);
    }
    .splitwise-form input {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 7px;
      padding: 5px 8px;
      font: inherit;
      font-size: 0.72rem;
      text-align: right;
      background: var(--white);
      transition: border-color 140ms ease, box-shadow 140ms ease;
    }
    .splitwise-form input:focus {
      outline: none;
      border-color: rgba(71,85,105,0.45);
      box-shadow: 0 0 0 2px var(--slate-10);
    }
    .splitwise-form .ghost-btn {
      background: var(--slate-10);
      border: 0.5px solid rgba(71,85,105,0.3);
      color: var(--purple);
      font-weight: 600;
      font-size: 0.7rem;
      border-radius: 7px;
      padding: 5px 10px;
      cursor: pointer;
      transition: background 140ms ease;
    }
    .splitwise-form .ghost-btn:hover { background: rgba(71,85,105,0.18); }
    .splitwise-entries-list {
      display: grid;
      gap: 4px;
      padding: 6px 8px 8px;
      overflow: auto;
      align-content: start;
      scrollbar-gutter: stable;
    }
    .splitwise-empty {
      color: var(--muted);
      font-size: 0.67rem;
      padding: 14px 10px;
      text-align: center;
      font-style: italic;
    }
    .splitwise-entry-chip {
      display: grid;
      grid-template-columns: minmax(0,1fr) 20px;
      align-items: center;
      gap: 6px;
      background: var(--surface-light);
      border: 1px solid #edf2f7;
      border-radius: 8px;
      padding: 6px 8px;
      width: 100%;
    }
    .splitwise-panel .chip-remove {
      width: 20px; height: 20px;
      border-radius: 5px;
      border: 1px solid rgba(239,68,68,0.2);
      background: rgba(239,68,68,0.07);
      color: var(--red-error);
      cursor: pointer;
      font-size: 0.8rem;
      display: flex; align-items: center; justify-content: center;
      transition: background 120ms ease, border-color 120ms ease;
      padding: 0;
      flex: 0 0 auto;
    }
    .splitwise-panel .chip-remove:hover {
      background: rgba(239,68,68,0.16);
      border-color: rgba(239,68,68,0.4);
    }
    .splitwise-entry-main {
      display: grid;
      grid-template-columns: auto minmax(0,1fr);
      align-items: center;
      gap: 6px;
      min-width: 0;
    }
    .splitwise-entry-text {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      flex-wrap: wrap;
    }
    .splitwise-entry-amount {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      white-space: nowrap;
    }
    .splitwise-entry-amount.receivable,
    .splitwise-toggle.receivable { color:var(--green-700); }
    .splitwise-entry-amount.payable,
    .splitwise-toggle.payable { color:var(--red-700); }
    .splitwise-entry-meta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      color: var(--muted);
      font-size: 0.62rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .splitwise-entry-sep {
      color: #94a3b8;
      flex: 0 0 auto;
    }
    .splitwise-entry-status {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 20px;
      height: 20px;
      border-radius: 6px;
      font-size: 0.64rem;
      font-weight: 700;
      color: var(--white);
      flex-shrink: 0;
    }
    .splitwise-entry-status.receivable { background:var(--green-700); }
    .splitwise-entry-status.payable { background:var(--red-700); }
    .muted { color: var(--muted); font-size: 0.68rem; }
    .row-item { border: 1px solid var(--line); border-radius: 7px; padding: 6px; background: var(--panel-2); }
    .row-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: start; }
    .row-top-inline { align-items: center; }
    .row-name { font-weight: 700; font-size: var(--t-body); }
    .row-meta { color: var(--muted); font-size: var(--t-support); margin-top: 1px; }
    .row-inline-stats {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
      font-size: 0.68rem; text-align: right;
    }
    .row-inline-stats strong { font-size: 0.74rem; }
    .row-item.compact-manual .row-controls { margin-top: 4px; }
    .row-item.compact-manual .tx-list { margin-top: 5px; }
    .pill {
      display: inline-flex; align-items: center; gap: 4px; font-size: 0.58rem; padding: 1px 6px; border-radius: 999px;
      background: var(--slate-10); color: var(--purple); font-weight: 600; margin-right: 4px; margin-top: 2px;
      border: 0.5px solid rgba(71,85,105,0.3);
    }
    .pill.fixed { background: rgba(245,158,11,0.1); color: var(--amber-warn); border-color: rgba(245,158,11,0.35); }
    .pill.variable { background: var(--slate-10); color: var(--purple); border-color: rgba(71,85,105,0.3); }
    .pill.linked-funding { background: rgba(202,138,4,0.16); color: #854d0e; border-color: rgba(161,98,7,0.34); }
    .expense-link-coverage,
    .row-link-coverage {
      display: inline-block;
      margin-top: 2px;
      margin-left: 2px;
      color: #854d0e;
      font-size: 0.58rem;
      font-weight: 600;
    }
    .row-amounts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 5px; font-size: var(--t-label); }
    .row-amounts strong { font-size: var(--t-body); }
    .row-controls { display: grid; grid-template-columns: 84px minmax(0,1fr) auto auto; gap: 5px; margin-top: 6px; align-items: center; }
    input[type="number"], input[type="text"] {
      width: 100%; padding: 5px 6px; border: 1px solid var(--line); border-radius: 6px; background: white; font-size: var(--t-label);
    }
    .ghost-btn, .tiny-btn {
      border: 0.5px solid var(--line); background: white; color: var(--text); cursor: pointer; border-radius: 7px; padding: 5px 8px; font-weight: 500; font-size: var(--t-label);
      white-space: nowrap; transition: background 120ms ease, border-color 120ms ease;
    }
    .ghost-btn:hover, .tiny-btn:hover { background: #f1f5f9; border-color: #c0ccd9; }
    .tiny-btn { padding: 4px 7px; }
    .check-wrap {
      display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--text); background: white; border: 1px solid var(--line);
      border-radius: 6px; padding: 5px 7px; min-height: 26px; font-size: var(--t-support);
      white-space: nowrap;
    }
    .tx-list { margin-top: 6px; display: grid; gap: 4px; }
    .tx-item {
      display: flex; justify-content: space-between; gap: 6px; padding: 5px 6px; border-radius: 6px; background: white; border: 1px solid var(--line); font-size: var(--t-support);
    }
    .tx-left small { color: var(--muted); display: block; margin-top: 2px; }
    
    .empty { color: var(--muted); font-style: italic; padding: 3px 0 1px; font-size: var(--t-support); }
    
    details.compact-section[open] { background: linear-gradient(180deg, rgba(252,253,253,0.98) 0%, rgba(248,250,251,0.98) 100%); }
    
    
    
    
    
    details.expense-group { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow: visible; }
    .expense-group-summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 8px; background:var(--surface-light); }
    .expense-group-summary::-webkit-details-marker { display:none; }
    
    .expense-name { font-weight: 600; font-size: var(--t-label); }
    .expense-sub { color: var(--muted); font-size: var(--t-eyebrow); margin-top: 1px; }
    .expense-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .planned-input { width: 84px; text-align: right; font-size: var(--t-support); padding: 4px 5px; border: 1px solid var(--line); border-radius: 5px; background: white; }
    .expense-center { text-align: center; }
    .expense-actions { display: grid; grid-template-columns: 64px minmax(92px,0.9fr) minmax(132px,1fr) auto auto; gap: 4px; align-items: center; }
    
    .expense-cadence-control{ min-width:0; width:100%; display:block; }
    .expense-cadence-control .control-label{ display:none; }
    .expense-cadence-control .filter-dropdown{ width:100%; }
    .expense-cadence-control .evolution-select-summary{ min-height:30px; padding:6px 28px 6px 10px; border-radius:10px; font-size:var(--t-eyebrow); box-shadow:none; }
    .expense-cadence-control .evolution-select-menu{ left:0; right:auto; min-width:176px; max-width:min(240px, calc(100vw - 48px)); z-index:12; }
    .expense-cadence-control .evolution-select-list{ gap:4px; max-height:200px; }
    .expense-cadence-control .evolution-select-actions .ghost-btn,
    .expense-cadence-control .evolution-select-actions .tiny-btn{ min-width:58px; }
    
    
    
    .expense-chip {
      display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-light);
      padding: 3px 5px; max-width: 100%; width: fit-content;
    }
    .expense-chip strong { font-size: var(--t-label); color: var(--text); }
    .expense-cadence-chip {
      display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 999px;
      border: 1px solid var(--line); background: var(--surface-light); color: var(--muted); font-size: var(--t-eyebrow); font-weight: 700;
      white-space: nowrap;
    }
    .expense-cadence-chip.oneoff { background: var(--surface-error-soft); color: var(--red-700); border-color: #fecaca; }
    .expense-cadence-chip.monthly { background: #eef5ff; color: var(--forecast-tile-live-text); border-color: var(--forecast-tile-live-border); }
    .expense-cadence-chip.semimonthly { background: var(--savings-surface); color: var(--forecast-tile-plan-text); border-color: var(--forecast-tile-plan-border); }
    .chip-remove {
      border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 0; font-size: 0.8rem; line-height: 1;
    }

    
    .log-details { min-width: 0; position: relative; display: inline-block; }
    .log-details.is-open .log-toggle { background: rgba(71,85,105,0.12); border-color: rgba(71,85,105,0.38); color: var(--purple); }
    .log-toggle {
      cursor: pointer; list-style: none; font-weight: 600; font-size: 0.64rem;
      font-family: var(--font-ui); color: var(--accent);
      display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
      padding: 3px 7px; border: 0.5px solid rgba(71,85,105,0.22); border-radius: 6px;
      background: rgba(71,85,105,0.05);
      transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
    }
    .log-toggle:hover { background: var(--slate-10); border-color: rgba(71,85,105,0.28); }
    .log-toggle::-webkit-details-marker { display:none; }
    .log-panel {
      position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
      min-width: 240px; max-width: 300px; max-height: 240px; overflow: auto;
      background: var(--white); border: 1px solid var(--line); border-radius: 12px;
      box-shadow: 0 8px 24px rgba(15,23,42,0.13), 0 2px 6px var(--overlay-07);
      padding: 6px 8px; display: grid; gap: 4px;
    }
    .log-empty {
      position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
      min-width: 160px; padding: 10px 12px;
      background: var(--white); border: 1px solid var(--line);
      border-radius: 12px; box-shadow: 0 8px 24px rgba(15,23,42,0.13);
      font-size: 0.65rem; color: var(--muted); font-style: italic;
      text-align: center;
    }

    

/* Evolution charts */
.evolution-card .focus-head{
  margin-bottom:8px;
}
.evolution-card-body{
  display:grid;
  gap:14px;
}
.evolution-chart-stack{
  display:grid;
  gap:14px;
}
.evolution-chart-block{
  border:1px solid var(--card-border);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(248,250,251,0.98) 100%);
  box-shadow:0 12px 30px rgba(15,23,42,0.05);
  padding:14px 14px 12px;
  display:grid;
  gap:10px;
}
.evolution-chart-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.evolution-chart-title{
  font-size:0.72rem;
  font-weight:800;
  color:var(--text);
}
.evolution-chart-title strong{
  font-size:1.02rem;
  margin-left:6px;
}
.evolution-chart-sub{
  margin-top:3px;
  font-size:0.66rem;
  color:var(--muted);
}
.evolution-chart-control{
  min-width:154px;
  width:154px;
  display:grid;
  gap:4px;
}
.evolution-chart-control .control-label{
  font-size:0.56rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-weight:800;
  text-align:left;
}
.filter-dropdown{
  position:relative;
}
.evolution-select-summary{
  width:100%;
  min-height:32px;
  padding:7px 32px 7px 10px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--white);
  font:inherit;
  font-size:0.66rem;
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  box-shadow:0 6px 18px rgba(15,23,42,0.04);
  cursor:pointer;
  position:relative;
  appearance:none;
}
.evolution-select-summary::after{
  content:'';
  position:absolute;
  right:12px;
  top:50%;
  width:8px;
  height:8px;
  border-right:2px solid var(--purple);
  border-bottom:2px solid var(--purple);
  transform:translateY(-65%) rotate(45deg);
  transition:transform 140ms ease;
}
.filter-dropdown.is-open > .evolution-select-summary::after{
  transform:translateY(-35%) rotate(-135deg);
}
.evolution-select-menu{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  z-index:8;
  min-width:100%;
  padding:8px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--white);
  box-shadow:0 16px 40px rgba(15,23,42,0.12);
}
.evolution-select-list{
  display:grid;
  gap:5px;
  max-height:180px;
  overflow:auto;
}
.evolution-select-actions{
  display:flex;
  justify-content:flex-end;
  gap:6px;
  padding-top:8px;
  margin-top:8px;
  border-top:1px solid rgba(111,135,154,0.14);
}
.evolution-select-actions .ghost-btn,
.evolution-select-actions .tiny-btn{
  min-width:64px;
}
.evolution-select-option{
  display:flex;
  align-items:center;
  gap:7px;
  padding:5px 6px;
  border-radius:9px;
  font-size:0.65rem;
  color:var(--text);
  cursor:pointer;
}
.evolution-select-option:hover{
  background:#f8fbfe;
}
.evolution-select-option input{
  margin:0;
}
.evolution-chart-canvas{
  width:100%;
  position:relative;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(244,248,252,0.92) 0%, var(--white-86) 100%);
  box-shadow:inset 0 1px 0 var(--white-82);
}
.evolution-svg{
  width:100%;
  height:auto;
  display:block;
}
.evolution-series,
.evolution-legend-item{
  transition:opacity 180ms ease, transform 180ms ease, filter 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.evolution-series{
  transform-origin:50% 50%;
  animation:evolutionSeriesIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.evolution-series.is-dimmed{
  opacity:0.2;
}
.evolution-series.is-active{
  filter:drop-shadow(0 10px 22px rgba(15,23,42,0.12));
}
.evolution-series-point{
  pointer-events:none;
  transition:transform 180ms ease, r 180ms ease, filter 180ms ease;
  transform-origin:center;
}
.evolution-series.is-active .evolution-series-point{
  filter:drop-shadow(0 2px 6px rgba(15,23,42,0.16));
}
@keyframes evolutionSeriesIn{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
.evolution-chart-tooltip{
  position:absolute;
  top:0;
  left:0;
  z-index:12;
  min-width:140px;
  max-width:220px;
  padding:10px 11px;
  border-radius:12px;
  border:1px solid rgba(66,84,102,0.16);
  background:rgba(22,28,36,0.96);
  color:#f8fbff;
  box-shadow:0 18px 40px rgba(15,23,42,0.22);
  pointer-events:none;
  opacity:0;
  transform:translate(-9999px, -9999px);
  transition:opacity 120ms ease;
}
.evolution-chart-tooltip.is-visible{
  opacity:1;
}
.evolution-chart-tooltip-month{
  font-size:0.54rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(226,232,240,0.86);
  margin-bottom:6px;
}
.evolution-chart-tooltip-row{
  display:flex;
  align-items:center;
  gap:7px;
}
.evolution-chart-tooltip-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  flex:0 0 8px;
}
.evolution-chart-tooltip-label{
  flex:1 1 auto;
  min-width:0;
  font-size:0.7rem;
  font-weight:700;
  color:#f8fbff;
}
.evolution-chart-tooltip-value{
  font-size:0.7rem;
  font-weight:800;
  color:var(--white);
}
.evolution-empty{
  min-height:140px;
  display:grid;
  place-items:center;
  border:1px dashed rgba(111,135,154,0.28);
  border-radius:14px;
  color:var(--muted);
  font-size:0.68rem;
  background:rgba(255,255,255,0.55);
}
.evolution-legend{
  display:grid;
  grid-template-rows:repeat(2, minmax(0, auto));
  grid-auto-flow:column;
  grid-auto-columns:minmax(0, 1fr);
  gap:8px 8px;
  align-items:start;
  min-height:76px;
}
.evolution-legend-item{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  min-width:0;
  width:100%;
  padding:6px 8px;
  border-radius:999px;
  border:1px solid rgba(111,135,154,0.18);
  background:var(--white-92);
  font-size:clamp(0.54rem, 0.34rem + 0.42vw, 0.67rem);
  font-weight:700;
  line-height:1.05;
  color:#425466;
}
.evolution-legend-item span:last-child{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.evolution-legend-swatch{
  width:10px;
  height:10px;
  border-radius:999px;
  flex:0 0 10px;
}
@media (max-width: 720px){
  .evolution-legend{
    grid-auto-flow:row;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    grid-template-rows:none;
    min-height:0;
  }
}

/* Subscriptions */

.subscriptions-controls-card,
.subscriptions-table-card,
.subscription-stat-card{
  min-width:0;
}
.subscriptions-controls-card,
.subscriptions-table-card{
  padding:12px;
}
.subscriptions-table-card{
  overflow:hidden;
}

.subscriptions-table-eyebrow,
.subscription-stat-label{
  font-size:0.58rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#6b7c8f;
}

.subscriptions-table-title{
  margin:0;
  font-size:0.96rem;
  line-height:1.1;
  letter-spacing:-0.02em;
  color:#1c2733;
}

.subscriptions-table-copy,
.subscription-stat-support,
.subscription-note{
  color:var(--muted);
  font-size:0.61rem;
  line-height:1.4;
}
.subscriptions-controls-card{
  display:grid;
  grid-template-columns:repeat(2,minmax(180px,max-content)) minmax(260px,1fr);
  gap:10px 12px;
  align-items:end;
  position:relative;
  overflow:visible;
  z-index:2;
}
.subscriptions-controls-card .filter-dropdown{
  position:relative;
}
.subscriptions-controls-card .filter-dropdown.is-open{
  z-index:20;
}
.subscriptions-controls-card .filter-dropdown-menu{
  z-index:24;
}
.subscriptions-controls-stats{
  justify-self:end;
  width:min(100%,540px);
}
.subscriptions-stat-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  min-width:0;
}
.subscription-stat-card{
  padding:9px 10px;
  display:grid;
  gap:4px;
}
.subscription-stat-value{
  font-size:0.96rem;
  font-weight:780;
  line-height:1.1;
  letter-spacing:-0.02em;
  color:#1c2733;
}

.subscriptions-insight-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.subscriptions-insight-grid .insight-card,
.subscriptions-mini-card{
  min-width:0;
  min-height:100%;
}
.subscriptions-mini-card{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.subscriptions-mini-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.subscriptions-mini-kicker{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
}
.subscriptions-mini-value{
  font-size:28px;
  line-height:1.05;
  font-weight:800;
  color:var(--text);
}
.subscriptions-mini-support{
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.subscriptions-mini-list{display:grid;gap:8px;min-width:0;}
.subscriptions-mini-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;font-size:13px;min-width:0;}
.subscriptions-mini-row > *{min-width:0;}
.subscriptions-mini-row strong{color:var(--text);font-weight:700;}
.subscriptions-mini-foot{margin-top:auto;color:var(--muted);font-size:12px;line-height:1.45;}
.subscriptions-toolbar-group{
  display:grid;
  gap:4px;
  min-width:0;
}
.subscriptions-toolbar-group label,
.subscriptions-toolbar-group .control-label{
  font-size:0.62rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.04em;
  font-weight:700;
}
.filter-dropdown-summary{width:100%;}
.filter-dropdown-menu{display:none;}
.filter-dropdown.is-open .filter-dropdown-menu{display:flex;flex-direction:column;}
.filter-dropdown-panel{gap:8px;}
.filter-dropdown-list{display:grid;gap:5px;overflow:auto;}
.filter-dropdown-option{position:relative;display:flex;align-items:center;gap:8px;min-height:32px;padding:6px 8px;border-radius:10px;font-size:0.66rem;color:var(--text);cursor:pointer;transition:background 140ms ease, box-shadow 140ms ease, color 140ms ease;}
.filter-dropdown-option:hover{background:#f5f8fc;}
.filter-dropdown-option.is-selected{background:rgba(111,135,154,0.10);}
.filter-dropdown-option input{position:absolute;opacity:0;pointer-events:none;}
.filter-dropdown-option-indicator{width:14px;height:14px;border-radius:999px;border:1.5px solid rgba(111,135,154,0.55);background:var(--white);box-shadow:inset 0 0 0 3px var(--white);flex:0 0 14px;transition:border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;}
.filter-dropdown-option.is-selected .filter-dropdown-option-indicator{border-color:var(--filter-option-accent, #5e17eb);background:var(--filter-option-accent, #5e17eb);box-shadow:inset 0 0 0 3px var(--white);}
.filter-dropdown-option-label{flex:1 1 auto;min-width:0;}
.filter-dropdown-actions{display:flex;justify-content:flex-end;gap:6px;padding-top:8px;margin-top:2px;border-top:1px solid rgba(111,135,154,0.14);background:var(--white);position:sticky;bottom:0;}
.subscriptions-toolbar-group.filter-dropdown-control{min-width:0;width:100%;max-width:220px;}
.subscriptions-toolbar-group.filter-dropdown-control .filter-dropdown,
.subscriptions-toolbar-group.filter-dropdown-control .filter-dropdown-panel,
.subscriptions-toolbar-group.filter-dropdown-control .filter-dropdown-list,
.subscriptions-toolbar-group.filter-dropdown-control .filter-dropdown-menu{min-width:0;}
.subscriptions-table-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.subscriptions-title-row{display:flex;align-items:flex-end;gap:10px;min-width:0;}
.subscriptions-table-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.subscriptions-table-wrap{
  position:relative;
  overflow:auto;
  border:1px solid rgba(111,135,154,0.16);
  border-radius:12px;
  background:var(--white);
  max-width:100%;
  max-height:min(72vh, 760px);
  scrollbar-gutter: stable both-edges;
}
.subscriptions-table{
  width:max-content;
  min-width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
}
.subscriptions-table th:nth-child(1),
.subscriptions-table td:nth-child(1){ width:148px; min-width:148px; }
.subscriptions-table th:nth-child(2),
.subscriptions-table td:nth-child(2){ width:132px; min-width:132px; }
.subscriptions-table th:nth-child(3),
.subscriptions-table td:nth-child(3){ width:92px; min-width:92px; }
.subscriptions-table th:nth-child(4),
.subscriptions-table td:nth-child(4){ width:88px; min-width:88px; }
.subscriptions-table th:nth-child(5),
.subscriptions-table td:nth-child(5){ width:84px; min-width:84px; }
.subscriptions-table th:nth-child(6),
.subscriptions-table td:nth-child(6){ width:106px; min-width:106px; }
.subscriptions-table th:nth-child(n+7):nth-child(-n+18),
.subscriptions-table td:nth-child(n+7):nth-child(-n+18){ width:64px; min-width:64px; }
.subscriptions-table th:nth-last-child(2),
.subscriptions-table td:nth-last-child(2){ width:92px; min-width:92px; }
.subscriptions-table th:last-child,
.subscriptions-table td:last-child{ width:52px; min-width:52px; }
.subscriptions-table th,
.subscriptions-table td{
  padding:6px 6px;
  vertical-align:top;
  border-bottom:1px solid rgba(111,135,154,0.14);
}
.subscriptions-table thead th{
  position:sticky;
  top:0;
  z-index:3;
  background:#f8fbff;
  color:#607384;
  font-size:0.54rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-weight:800;
}
.subscriptions-table thead th:first-child,
.subscriptions-table tbody td:first-child{
  position:sticky;
  left:0;
}
.subscriptions-table thead th:first-child{
  z-index:5;
  background:#f8fbff;
  box-shadow:1px 0 0 rgba(111,135,154,0.14);
}
.subscriptions-table tbody td:first-child{
  z-index:2;
  box-shadow:1px 0 0 rgba(111,135,154,0.12);
}
.subscriptions-table thead th:not(:first-child){left:auto;}
.subscriptions-row td{
  background: color-mix(in srgb, var(--subscription-accent, #dbe6f3) 16%, white);
}
.subscriptions-row td:first-child{
  border-left:4px solid color-mix(in srgb, var(--subscription-accent, #9fb6d4) 68%, var(--purple));
}
.subscriptions-table tbody tr:last-child td{border-bottom:none;}
.subscriptions-table tbody tr:hover td{background: color-mix(in srgb, var(--subscription-accent, #dbe6f3) 24%, white);}
.subscriptions-table thead th.sticky-col-2,
.subscriptions-table thead th.sticky-col-3,
.subscriptions-table thead th.sticky-col-4,
.subscriptions-table thead th.sticky-col-5{
  position:sticky;
  top:0;
  left:auto;
  z-index:3;
}
.subscriptions-table tbody td.sticky-col-2,
.subscriptions-table tbody td.sticky-col-3,
.subscriptions-table tbody td.sticky-col-4,
.subscriptions-table tbody td.sticky-col-5{
  position:static;
  left:auto;
  z-index:auto;
}
.subscription-name-stack,.subscription-field-stack{display:grid;gap:3px;min-width:0;}
.subscription-row-meta{display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-width:0;}
.subscription-meta-chip{display:inline-flex;align-items:center;gap:3px;padding:1px 5px;border-radius:999px;background:#f4f7fb;border:1px solid rgba(111,135,154,0.16);color:#516273;font-size:0.52rem;font-weight:700;white-space:nowrap;}
.subscription-validation-note{color:var(--amber-warn);font-size:0.54rem;line-height:1.25;}
.subscription-notes-input,.subscription-meta-select,.subscription-name-input,.subscription-category-select,.subscription-cadence-select,.subscription-amount-input{width:100%;min-height:28px;padding:4px 6px;border:1px solid var(--line);border-radius:8px;background:var(--white);font:inherit;color:var(--text);}
.subscription-notes-input,.subscription-meta-select{font-size:0.56rem;}
.subscription-name-input,.subscription-category-select,.subscription-cadence-select,.subscription-amount-input{font-size:0.58rem;}
.subscription-amount-input{text-align:right;}
.subscription-field-invalid{border-color:#fdba74;background:var(--surface-warn-soft);}
.subscription-field-label{font-size:0.5rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:#6b7c8f;}
.subscriptions-table td:last-child{text-align:center;vertical-align:middle;}
.subscription-delete-btn.manage-icon-btn{margin-inline:auto;}
.subscription-status-btn,
.subscription-delete-btn,
.subscription-cell-btn{border:none;border-radius:9px;padding:6px 8px;font:inherit;font-size:0.58rem;font-weight:700;cursor:pointer;transition:transform .12s ease, box-shadow .12s ease, background .12s ease;}
@media (hover:hover){
  .subscription-status-btn:hover,.subscription-delete-btn:hover,.subscription-cell-btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(15,23,42,0.10);}
}
.subscription-status-btn.is-paused{background:#eef2f7;color:#5b6875;}
.subscription-cell-btn{width:100%;min-height:48px;display:grid;place-items:center;gap:1px;background:#f7fafc;color:#1f2a36;}
.subscription-cell-btn small{font-size:0.5rem;color:#6b7c8f;font-weight:700;}
.subscription-cell-btn.is-empty{background:var(--surface-light);color:#94a3b8;}
.subscription-cell-btn.is-due{background:var(--surface-warn-soft);color:var(--amber-warn);}
.subscription-cell-btn.is-paid{background:#ecfdf5;color:var(--green-600);}
.subscription-empty{padding:20px 14px;color:var(--muted);font-size:0.72rem;}
@media (max-width: 1180px){
  .subscriptions-controls-card{grid-template-columns:repeat(2,minmax(180px,1fr));}
  .subscriptions-controls-stats{grid-column:1 / -1;justify-self:stretch;width:100%;}
  .subscriptions-insight-grid{grid-template-columns:1fr;}
}
@media (max-width: 760px){
  .subscriptions-controls-card{grid-template-columns:1fr;}
  .subscriptions-toolbar-group.filter-dropdown-control{max-width:none;}
  .subscriptions-stat-grid{grid-template-columns:1fr;}
  .subscriptions-table-head{align-items:flex-start;}
}
#subscriptionsSectionCompact > .section-header{
  padding:16px 18px 12px;
}
#subscriptionsSectionCompact > .section-header .focus-head{
  background:transparent;
  border:0;
}
@media (max-width: 1180px){
  .subscriptions-table-head{
    flex-direction:column;
    align-items:stretch;
  }
  .subscriptions-stat-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  
}
@media (max-width: 1100px){
  .subscriptions-controls-card{
    flex-direction:column;
    align-items:stretch;
  }
  .subscriptions-toolbar-group{
    min-width:0;
  }
}
@media (max-width: 760px){
  .subscriptions-stat-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 1450px) { .summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media (max-width: 1200px) {
      .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      
      
    }
    @media (max-width: 860px) {
      .app { grid-template-columns: 1fr; }
      .sidebar { position: static; height: auto; }
      .summary { grid-template-columns: 1fr; }
      .row-controls, .expense-actions { grid-template-columns: 1fr; }
      
    }


.section-header > div:first-child{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height: 0;
}
.section-header h3{
  margin:0;
}

.row-controls input[data-splitwise-settle-amount]{
  width:84px;
  min-width:84px;
  max-width:none;
  text-align:right;
}

.compact-manual .row-top-inline > .row-controls{
  grid-template-columns:84px 150px 0;
  justify-content:start;
  margin-top:0;
}

.compact-manual .row-inline-stats{
  width:180px;
  justify-content:flex-end;
}

.compact-manual .row-top-inline > :first-child{
  min-width:0;
}

/* Log panel entry chips — row style instead of pill */
.log-panel{
  min-width: 300px;
  max-width: 388px;
  overflow-x: hidden;
}
.log-panel .expense-chip {
  display: grid;
  grid-template-columns: minmax(78px,auto) minmax(0,1fr) auto 20px;
  align-items: start;
  gap: 8px;
  background: var(--surface-light);
  border: 1px solid #edf2f7;
  border-radius: 8px;
  padding: 7px 8px;
  width: 100%;
}
.log-panel .expense-chip strong {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--text);
  padding-top: 1px;
}
.log-panel .expense-chip-note {
  min-width: 0;
  font-size: 0.65rem;
  color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.log-panel .expense-chip-pattern {
  justify-self: end;
  align-self: start;
}

.log-panel .chip-remove {
  width: 20px; height: 20px;
  border-radius: 5px;
  border: 1px solid rgba(239,68,68,0.2);
  background: rgba(239,68,68,0.07);
  color: var(--red-error);
  cursor: pointer;
  font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center;
  transition: background 120ms ease;
  padding: 0;
}
@media (max-width: 720px) {
  .log-panel{
    min-width: min(320px, calc(100vw - 24px));
    max-width: min(360px, calc(100vw - 24px));
  }
  .log-panel .expense-chip {
    grid-template-columns: minmax(74px,auto) minmax(0,1fr) 20px;
  }
  .log-panel .expense-chip-pattern {
    grid-column: 2;
    justify-self: start;
    margin-top: -2px;
  }
}
.log-panel .chip-remove:hover {
  background: rgba(239,68,68,0.16);
  border-color: rgba(239,68,68,0.4);
}


/* Section background tinting for readability */
#incomeList .row-item { background: #eefaf4; }        /* light green */
#expenseList .row-item { background: #fff3f3; }       /* light red */
#savingsList .row-item { background: #f3f6ff; }

/* Monthly progress bar */
.month-progress{
  margin: 3px 0 8px;
}
.month-progress-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.68rem;
  color:var(--muted);
  margin-bottom:4px;
}
.month-progress-track{
  width:100%;
  height:8px;
  border-radius:999px;
  background:var(--slate-22);
  box-shadow: inset 0 1px 2px rgba(15,23,42,0.05);
  overflow:hidden;
}
.month-progress-fill{
  height:100%;
  background:linear-gradient(90deg, #bfdbfe 0%, #60a5fa 45%, #1d4ed8 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.16) inset;
  border-radius:999px;
  transition: width 320ms ease;
}

/* Allocation warnings */


/* Darker checkbox style */
.check-wrap input[type="checkbox"]{
  accent-color:#4b5563;
}

/* Bold actuals when committed */
.expense-actual.committed{
  font-weight:700;
}

/* Space between sub-category cards in Income and Savings */
#incomeList .row-item,
#savingsList .row-item{
  margin-bottom: 10px;
}

/* Light indigo input boxes */
#incomeList input[type="number"],
#incomeList input[type="text"],
#savingsList input[type="number"],
#savingsList input[type="text"],
#expenseList input[type="number"],
#expenseList input[type="text"],
.planned-input,
.target-input,
.expense-chip{
  background:var(--editable-bg);
}

/* Softer editable input color */
:root{
  --editable-bg: #f1f5f8;   /* soft indigo tint */
  --editable-border: #c7d3dd;
  --planned-border: #cbd5e1;
}

/* Editable inputs (amount, notes etc.) */
#incomeList input[type="number"],
#incomeList input[type="text"],
#savingsList input[type="number"],
#savingsList input[type="text"],
#expenseList input[type="number"],
#expenseList input[type="text"]{
  background: var(--editable-bg);
  border: 1px solid var(--editable-border);
}

/* Planned / target inputs slightly stronger border */
.planned-input,
.target-input{
  background: var(--white);
  border: 1px solid var(--planned-border);
}

/* Calculated fields remain neutral */
.expense-actual{
  background: var(--white);
}

/* Value polarity tints */
.value-positive{
  background: var(--surface-success-soft);
  color: var(--green-900);
}
.value-negative{
  background: var(--surface-error-soft);
  color: var(--red-700);
}
.kpi-value.value-positive,
.kpi-value.value-negative,
.expense-actual.value-positive,
.expense-actual.value-negative{
  padding: 1px 4px;
  border-radius: 6px;
}

/* Semantic financial colors */
.income-positive{
  background:var(--surface-success-soft);
  color:var(--green-900);
  padding:1px 4px;
  border-radius:6px;
}
.expense-negative{
  background:var(--surface-error-soft);
  color:var(--red-700);
  padding:1px 4px;
  border-radius:6px;
}
.savings-positive{
  background:var(--surface-success-soft);
  color:var(--green-900);
  padding:1px 4px;
  border-radius:6px;
}

/* Allocation progress bars */

.alloc-current-fill{
  height:100%;
  border-radius:999px;
  background:var(--purple);
}
.alloc-current-fill.warn-80{
  background: linear-gradient(90deg, var(--purple) 0%, #8b5cf6 55%, var(--amber) 100%);
}
.alloc-current-fill.warn-100{
  background: linear-gradient(90deg, var(--purple) 0%, #8b5cf6 45%, var(--amber) 78%, var(--red-600) 100%);
}

/* Spending chart base utilities — canonical layout lives in overview-toprow-replacement-v3 */
.chart-empty{
  color:var(--muted);
  font-size:0.75rem;
  padding:12px 0;
}
.chart-legend-item.chart-clickable{
  cursor:pointer;
}
.temp-highlight{
  outline:2px solid var(--purple);
  outline-offset:2px;
  border-radius:8px;
}

/* Comparison strip */
.special-funding-form{
  display:grid;
  gap:10px;
}
.special-funding-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
}
.special-funding-field{
  display:grid;
  gap:4px;
}
.special-funding-field label{
  font-size:0.65rem;
  color:var(--muted);
}
.special-funding-field input[type="text"]{
  width:100%;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--white);
  font:inherit;
  font-size:0.72rem;
}
.special-funding-inline{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.special-funding-inline label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:0.72rem;
}
.special-funding-actions{
  display:flex;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
  padding-top:8px;
  border-top:1px solid var(--line);
}
.special-funding-actions .left,
.special-funding-actions .right{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.special-funding-status{
  margin:0 0 2px;
}
@media (max-width: 900px){
  .special-funding-grid{
    grid-template-columns: 1fr;
  }
}

/* Overall available-funds usage progress */
.alloc-progress{
  margin: 8px 0 10px;
}
.alloc-progress-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-size:0.72rem;
  margin-bottom:4px;
}
.alloc-progress-track{
  width:100%;
  height:10px;
  border-radius:999px;
  background:#dbe4f0;
  overflow:hidden;
}
.alloc-progress-fill{
  height:100%;
  border-radius:999px;
  background:var(--purple);
}
.alloc-progress-fill.warn-80{
  background: linear-gradient(90deg, var(--purple) 0%, #8b5cf6 55%, var(--amber) 100%);
}
.alloc-progress-fill.warn-100{
  background: linear-gradient(90deg, var(--purple) 0%, #8b5cf6 45%, var(--amber) 78%, var(--red-600) 100%);
}

/* Chart detail modal */
.chart-modal[hidden]{
  display:none;
}
.chart-modal{
  position:fixed;
  inset:0;
  z-index:1200;
}
.chart-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,0.38);
}
.chart-modal-card{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(560px, calc(100vw - 32px));
  max-height:min(80vh, 720px);
  overflow:auto;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 24px 60px rgba(15,23,42,0.22);
  padding:0;
}
.chart-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin:0;
  padding:14px 16px 10px;
}
.chart-modal-head h3{
  margin:0;
  font-size:1rem;
  line-height:1.2;
}
.chart-detail-list{
  display:grid;
  gap:6px;
  margin-top:10px;
}
.chart-detail-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface-light);
}
.chart-detail-row strong{
  white-space:nowrap;
}
.chart-detail-total{
  margin-top:8px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 10px;
  border-top:1px solid var(--line);
  font-weight:700;
}

/* Planned-only inputs for fixed expenses */
.planned-input{
  background: #eef4ff;
  border: 1px solid #9fb8e8;
}

/* App-style views */
.view-nav{
  display:flex;
  gap:8px;
  margin:8px 0 0;
}
.view-btn{
  border: 0.5px solid var(--line);
  background:var(--white);
  color:var(--text);
  border-radius:999px;
  padding:7px 14px;
  font:inherit;
  font-size:0.78rem;
  font-weight:500;
  cursor:pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease;
}
 .view-btn.active{
  background:linear-gradient(180deg, var(--accent) 0%, var(--accent-text) 100%);
  color:var(--white);
  border-color:var(--accent-text);
  box-shadow: 0 8px 18px rgba(47,64,80,0.18);
}
.view-page{
  display:none;
  padding-top:10px;
}
.view-page.active{
  display:block;
}


/* Overview layout refinements */
.view-nav{
  margin: 4px 0 0;
}
.view-page.active{
  padding-top: 2px;
}
#summaryCards.summary{
  margin-top: 2px;
}

/* Smaller note inputs */
input[placeholder="Required note"]{
  width: 40%;
  min-width: 120px;
}

/* Inline manual entry layout for income and savings */
.compact-manual .row-top-inline{
  display:grid;
  grid-template-columns: 150px minmax(260px, 1fr) 180px;
  gap:10px;
  align-items:center;
}
.compact-manual .inline-entry-controls{
  display:grid;
  grid-template-columns: 84px 160px;
  align-items:center;
  gap:6px;
  min-width:0;
  justify-content:start;
}
.compact-manual .inline-entry-controls input[data-input]{
  width:84px;
  min-width:84px;
}
.compact-manual .inline-entry-controls input[data-note]{
  width:160px;
  min-width:120px;
  flex:0 1 160px;
}
.compact-manual .hidden-add-btn{
  display:none;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"]{
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Tighten gap between tabs and KPI boxes */
.view-nav {
  margin-bottom: 4px;
}

/* Subtle overlap effect between nav and KPI area */
.view-nav{
  position: relative;
  z-index: 3;
  margin-bottom: 4px;
}
#summaryCards.summary{
  margin-top: -2px;
}
.view-btn{
  box-shadow: 0 2px 8px var(--overlay-06);
}


.section-header{
  padding-top: 6px;
  padding-bottom: 6px;

  padding-top: 12px;
}

/* Expense action field sizing */
.expense-actions input[data-note]{
  width: 100%;
  max-width: none;
}

/* Forecast and guidance */
.insight-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap:6px;
  margin: 6px 0 8px;
}
.insight-card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 8px 9px;
}
.insight-card h3{
  margin:0 0 4px;
  font-size:0.78rem;
}


.insight-main{
  margin-bottom:3px;
}


.behavior-hero{
  display:grid;
  gap:6px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(73,95,117,0.14);
  background:linear-gradient(180deg, rgba(247,249,251,0.96) 0%, rgba(242,246,249,0.96) 100%);
  margin-top:8px;
}
.behavior-hero-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.behavior-state-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 9px;
  border-radius:999px;
  font-size:0.66rem;
  font-weight:700;
  letter-spacing:0.01em;
}
.behavior-state-badge.good{
  background:var(--tone-good-bg);
  color:var(--tone-good-text);
  border-color:var(--tone-good-border);
}
.behavior-state-badge.warn{
  background:var(--tone-warn-bg);
  color:var(--tone-warn-text);
  border-color:var(--tone-warn-border);
}
.behavior-state-badge.bad{
  background:var(--tone-bad-bg);
  color:var(--tone-bad-text);
  border-color:var(--tone-bad-border);
}
.behavior-hero-main{
  font-size:0.84rem;
  font-weight:700;
  line-height:1.45;
  color:#233241;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  max-width:none;
}
.behavior-hero-sub{
  font-size:0.64rem;
  color:var(--muted);
}
.behavior-guidance-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:10px;
}
.behavior-guidance-tile{
  display:grid;
  gap:8px;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(73,95,117,0.14);
  background:var(--panel);
  min-height:156px;
  align-content:start;
}
.behavior-guidance-tile .tile-label{
  font-size:0.62rem;
  font-weight:800;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:#6b7b8c;
}
.behavior-guidance-tile .tile-copy{
  font-size:0.7rem;
  line-height:1.4;
  color:#2d3a47;
}
.behavior-guidance-tile.good{
  background:rgba(239,249,243,0.72);
  border-color:rgba(65,138,102,0.16);
}
.behavior-guidance-tile.warn{
  background:rgba(255,249,240,0.82);
  border-color:rgba(217,119,6,0.14);
}
.behavior-guidance-tile.bad{
  background:rgba(254,242,242,0.82);
  border-color:rgba(220,38,38,0.14);
}
.behavior-signal-strip{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-top:10px;
}
.behavior-signal-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:0.66rem;
  font-weight:700;
  line-height:1;
  border:1px solid var(--tone-neutral-border);
  background:var(--tone-neutral-bg);
  color:var(--tone-neutral-text);
}
.behavior-signal-chip.good{
  background:var(--tone-good-bg);
  color:var(--tone-good-text);
  border-color:var(--tone-good-border);
}
.behavior-signal-chip.warn{
  background:var(--tone-warn-bg);
  color:var(--tone-warn-text);
  border-color:var(--tone-warn-border);
}
.behavior-signal-chip.bad{
  background:var(--tone-bad-bg);
  color:var(--tone-bad-text);
  border-color:var(--tone-bad-border);
}
.behavior-signal-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:currentColor;
  opacity:0.9;
}

@media (max-width: 980px){
  .behavior-guidance-grid{
    grid-template-columns:1fr;
  }
}


@media (max-width: 1150px){
  .insight-grid{
    grid-template-columns:1fr;
  }
}

/* Unified forecast + burn visuals */
.insight-card .micro-bar{
  width:100%;
  height:8px;
  border-radius:999px;
  background:#dbe4f0;
  overflow:hidden;
  margin:6px 0 4px;
}
.insight-card .micro-fill{
  height:100%;
  border-radius:999px;
  background:var(--purple);
}
.insight-card .micro-fill.warn{
  background:var(--amber);
}
.insight-card .micro-fill.bad{
  background:var(--red-600);
}
.insight-detail{
  display:flex;
  justify-content:space-between;
  gap:8px;
  color:var(--muted);
}

/* Insights layout below chart */
.insight-grid{
  grid-template-columns: repeat(3, 1fr);
  max-width: 100%;
}
.insight-card{
  min-height: 80px;
}
.forecast-card{
  gap: 0;
}
.forecast-risk{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:fit-content;
  margin: 2px 0 8px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 700;
  border: 1px solid var(--line);
  background:var(--surface-light);
  color:var(--text);
}
.forecast-risk.good{ background:var(--surface-success-soft); border-color:#86efac; color:var(--green-900); }
.forecast-risk.watch{ background:var(--surface-warn-soft); border-color:#fdba74; color:var(--amber-warn); }
.forecast-risk.warn,
.forecast-risk.bad{ background:var(--surface-error-soft); border-color:#fca5a5; color:var(--red-700); }
.forecast-primary-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:6px;
  margin-top:8px;
  align-items:stretch;
}
.forecast-secondary-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:6px;
  margin-top:8px;
  align-items:stretch;
}
.forecast-metric{
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface-light);
  padding:6px 7px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:4px;
  min-height:118px;
  height:100%;
}
.forecast-metric-label{
  display:block;
  min-height:2.4em;
  font-size:0.6rem;
  line-height:1.2;
  color:var(--muted);
}
.forecast-metric strong{
  display:block;
  font-size:0.8rem;
  line-height:1.2;
  margin:2px 0 4px;
}
.forecast-metric small{
  display:block;
  min-height:3.6em;
  font-size:0.6rem;
  line-height:1.2;
  color:var(--muted);
}
.forecast-metric.theme-status{ background:var(--forecast-tile-status-bg); border-color:var(--forecast-tile-status-border); }
.forecast-metric.theme-status .forecast-metric-label{ color:var(--forecast-tile-status-text); }
.forecast-metric.theme-live{ background:var(--forecast-tile-live-bg); border-color:var(--forecast-tile-live-border); }
.forecast-metric.theme-live .forecast-metric-label{ color:var(--forecast-tile-live-text); }
.forecast-metric.theme-plan{ background:var(--forecast-tile-plan-bg); border-color:var(--forecast-tile-plan-border); }
.forecast-metric.theme-plan .forecast-metric-label{ color:var(--forecast-tile-plan-text); }
.forecast-metric.theme-structure{ background:var(--forecast-tile-structure-bg); border-color:var(--forecast-tile-structure-border); }
.forecast-metric.theme-structure .forecast-metric-label{ color:var(--forecast-tile-structure-text); }
.forecast-metric.good strong{ color:var(--green-900); }
.forecast-metric.bad strong{ color:var(--red-700); }
.forecast-metric.warn strong{ color:var(--amber-warn); }

@media (max-width: 1200px){
  .forecast-primary-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .forecast-secondary-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px){
  .forecast-primary-grid,
  .forecast-secondary-grid{ grid-template-columns:1fr; }
}
.forecast-driver-box{
  margin-top:8px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface-light);
  padding:6px 7px;
}
.forecast-driver-head{
  font-size:0.62rem;
  font-weight:700;
  color:var(--muted);
  margin-bottom:4px;
}
.forecast-driver-list{ display:grid; gap:4px; }

.forecast-driver-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 20ch;
  align-items:center;
  column-gap:10px;
}
.forecast-driver-label{
  color:var(--text);
  min-width:0;
}
.forecast-driver-value{
  display:grid;
  grid-template-columns:9ch 4ch 6ch;
  align-items:center;
  justify-items:end;
  column-gap:8px;
  width:20ch;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.forecast-driver-amount{
  display:block;
  width:9ch;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.forecast-driver-share{
  display:block;
  width:4ch;
  text-align:right;
  color:var(--muted);
  font-size:0.58rem;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.forecast-driver-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:6ch;
  min-width:6ch;
  padding:1px 5px;
  border-radius:999px;
  background:var(--slate-10);
  color:var(--purple);
  font-size:0.56rem;
  font-weight:700;
}
.forecast-driver-badge.is-empty{
  visibility:hidden;
}


.forecast-summary-note{
  margin-top:8px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(71,85,105,0.14);
  background:rgba(71,85,105,0.05);
  font-size:0.67rem;
  line-height:1.42;
  color:#556274;
}
.forecast-summary-note strong{
  color:var(--text);
  font-size:0.72rem;
  line-height:1.35;
}


/* Category trends */
.trends-card{
  margin-top:8px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:var(--shadow);
  padding:10px;
}
.trends-card h3{
  margin:0;
  font-size:0.82rem;
}
.trends-sub{
  font-size:0.66rem;
  color:var(--muted);
  margin:4px 0 8px;
  line-height:1.35;
}
.trends-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}
.trends-open-btn{
  border:1px solid rgba(71,85,105,0.22);
  background:rgba(71,85,105,0.07);
  color:var(--purple);
  border-radius:999px;
  padding:4px 9px;
  font:inherit;
  font-size:0.64rem;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
}
.trends-open-btn:hover{
  background:rgba(71,85,105,0.14);
}

.trend-insight-list,
.trend-modal-list{
  display:grid;
  gap:8px;
}
.trend-name{
  font-size:0.72rem;
  font-weight:600;
  line-height:1.2;
  min-width:0;
  overflow-wrap:anywhere;
}
.trend-bars{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:4px;
  align-items:end;
  height:28px;
  min-width:0;
}
.trend-bar-wrap{
  display:flex;
  align-items:end;
  height:28px;
  min-width:0;
}
.trend-bar{
  width:100%;
  min-height:2px;
  border-radius:4px 4px 2px 2px;
  background:var(--purple);
  opacity:0.9;
}
.trend-bar.prev{ opacity:0.7; }
.trend-bar.old{ opacity:0.45; }


.trend-month-labels-inline{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:4px;
}
.trend-insight-row{
  display:grid;
  grid-template-columns:minmax(150px, 0.95fr) minmax(0, 1.55fr) minmax(112px, 0.8fr);
  align-items:start;
  gap:10px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface-light);
  padding:9px 10px;
  cursor:pointer;
  transition:background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.trend-insight-row:hover{
  background:#f3f6ff;
  border-color:#e2e8f0;
}
.trend-insight-row.expanded{
  padding:10px 11px;
}
.trend-insight-top{
  display:grid;
  gap:6px;
  align-content:start;
  min-width:0;
}
.trend-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  max-width:100%;
  padding:2px 8px;
  border-radius:999px;
  font-size:0.62rem;
  font-weight:700;
  white-space:nowrap;
}
.trend-badge.risk{ background:var(--surface-error-soft); color:var(--red-700); }
.trend-badge.watch{ background:var(--surface-warn-soft); color:var(--amber-warn); }
.trend-badge.improving{ background:var(--surface-success-soft); color:var(--green-900); }
.trend-badge.stable{ background:#eef2ff; color:var(--purple); }
.trend-insight-metrics{
  display:grid;
  grid-template-columns:repeat(3, minmax(92px,1fr));
  gap:6px;
  min-width:0;
}
.trend-metric{
  padding:6px;
  border-radius:7px;
  background:var(--white);
  border:1px solid #e5e7eb;
  min-width:0;
}
.trend-metric-label{
  display:block;
  font-size:0.58rem;
  color:var(--muted);
  margin-bottom:2px;
}
.trend-metric strong{
  font-size:0.72rem;
  line-height:1.15;
  overflow-wrap:anywhere;
}
.trend-chart-stack{
  display:grid;
  gap:4px;
  align-content:end;
  min-width:0;
}
.trend-insight-note{
  grid-column:1 / -1;
  font-size:0.64rem;
  color:var(--muted);
  line-height:1.35;
}
.trend-insight-note .good{ color:var(--green-900); font-weight:700; }
.trend-insight-note .bad{ color:var(--red-700); font-weight:700; }
.trend-insight-note .warn{ color:var(--amber-warn); font-weight:700; }
.trend-bar-wrap.has-tooltip{
  position:relative;
  cursor:default;
}
.trend-bar-wrap.has-tooltip::after{
  content:attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translateX(-50%);
  background:rgba(15,23,42,0.96);
  color:var(--white);
  padding:6px 8px;
  border-radius:8px;
  font-size:0.58rem;
  line-height:1.3;
  white-space:normal;
  width:max-content;
  max-width:170px;
  text-align:center;
  box-shadow:0 8px 24px rgba(15,23,42,0.18);
  opacity:0;
  pointer-events:none;
  transition:opacity 120ms ease, transform 120ms ease;
  z-index:20;
}
.trend-bar-wrap.has-tooltip::before{
  content:'';
  position:absolute;
  left:50%;
  bottom:calc(100% + 2px);
  transform:translateX(-50%);
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid rgba(15,23,42,0.96);
  opacity:0;
  transition:opacity 120ms ease;
  pointer-events:none;
  z-index:20;
}
.trend-bar-wrap.has-tooltip:hover::after,
.trend-bar-wrap.has-tooltip:hover::before{ opacity:0.6; }
.trend-bar-wrap.has-tooltip:hover::after{ transform:translateX(-50%) translateY(-1px); }
.trend-modal-card,
#categoryTrendsModal .chart-modal-card{
  width:min(820px, calc(100vw - 32px));
}

/* Category trends inline card in Overview */
.trends-card.trends-card-inline{
  margin-top:8px;
  padding:8px 10px;
}
.trends-card-inline .trends-head{
  margin-bottom:6px;
}
.trends-card-inline .trends-head .focus-head{
  width:100%;
  padding:0;
}
.trends-card-inline .trends-head .focus-head h3{
  margin:0;
}
.trends-card-inline .trend-insight-list{
  gap:6px;
}
.trends-card-inline .trend-insight-row{
  grid-template-columns:minmax(138px, 0.95fr) minmax(0, 1.5fr) minmax(108px, 0.72fr);
  gap:8px;
  padding:8px 9px;
}
.trends-card-inline .trend-name{
  font-size:0.67rem;
}
.trends-card-inline .trend-badge{
  font-size:0.56rem;
  padding:2px 6px;
}
.trends-card-inline .trend-insight-metrics{
  grid-template-columns:repeat(3, minmax(84px,1fr));
  gap:5px;
}
.trends-card-inline .trend-metric{
  padding:5px 6px;
  border-radius:6px;
}
.trends-card-inline .trend-metric-label{
  font-size:0.54rem;
  margin-bottom:1px;
}
.trends-card-inline .trend-metric strong{
  font-size:0.64rem;
}
.trends-card-inline .trend-bars,
.trends-card-inline .trend-bar-wrap{
  height:22px;
}
.trends-card-inline .trend-month-labels-inline{
  font-size:0.52rem;
  gap:3px;
}
.trends-card-inline .trend-insight-note{
  font-size:0.61rem;
  line-height:1.28;
}
.trends-card-inline .trends-open-btn{
  padding:3px 8px;
  font-size:0.6rem;
}

@media (max-width: 1120px){
  .trends-card-inline .trend-insight-row{
    grid-template-columns:minmax(132px, 1fr) minmax(0, 1.4fr);
  }
  .trends-card-inline .trend-chart-stack{
    grid-column:1 / -1;
  }
}

@media (max-width: 920px){
  .trends-card-inline .trend-insight-row,
  .trend-insight-row{
    grid-template-columns:1fr;
  }
  .trends-card-inline .trend-chart-stack,
  .trend-chart-stack{
    align-content:start;
  }
}

@media (max-width: 700px){
  .trend-insight-metrics,
  .trends-card-inline .trend-insight-metrics{
    grid-template-columns:1fr;
  }
  .trends-head{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* Match category trend colours to expense category group colours */

.trend-insight-row[data-trend-group="Living Costs"] .trend-bar,
.trend-insight-row[data-trend-group="Multimedia"] .trend-bar{
  background:#8fb6ff;
}

.trend-insight-row[data-trend-group="Essentials"] .trend-bar,
.trend-insight-row[data-trend-group="Transport"] .trend-bar{
  background:#7fd39a;
}

.trend-insight-row[data-trend-group="Life-Upgrades"] .trend-bar,
.trend-insight-row[data-trend-group="Leasure"] .trend-bar{
  background:#f5b56b;
}

.trend-insight-row[data-trend-group="Fish and Chips Crypto"] .trend-bar{
  background:#b69cff;
}

.trend-insight-row[data-trend-group="Financial"] .trend-bar{
  background:#f4a3a3;
}

.trend-insight-row[data-trend-group]{
  position:relative;
  overflow:hidden;
}
.trend-insight-row[data-trend-group]::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  border-radius:9px 0 0 9px;
  background:var(--planned-border);
}
.trend-insight-row[data-trend-group="Living Costs"]::before,
.trend-insight-row[data-trend-group="Multimedia"]::before{
  background:#8fb6ff;
}
.trend-insight-row[data-trend-group="Essentials"]::before,
.trend-insight-row[data-trend-group="Transport"]::before{
  background:#7fd39a;
}
.trend-insight-row[data-trend-group="Life-Upgrades"]::before,
.trend-insight-row[data-trend-group="Leasure"]::before{
  background:#f5b56b;
}
.trend-insight-row[data-trend-group="Fish and Chips Crypto"]::before{
  background:#b69cff;
}
.trend-insight-row[data-trend-group="Financial"]::before{
  background:#f4a3a3;
}

/* Align bottom insight cards with main grid */
.insight-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:12px;
  align-items:stretch;
}
.insight-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* Hierarchy spacing system */
:root{
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
}

/* Page-level hierarchy */

.title{
  margin-bottom: 0;
}
.title h2,
.title p{
  display:none;
}
#monthProgress{
  margin-top: 0;
}
.view-nav{
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

/* Section-to-section rhythm */
.summary{
  margin-bottom: var(--space-3);
}
.grid-overview{
  margin-bottom: var(--space-3);
}
.insight-grid{
  margin-top: var(--space-3);
  align-items: stretch;
}

/* Card internals */
.card,
.chart-card,
.insight-card,
.trends-card{
  padding: var(--space-3);
}

.section-header{
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.section-header h3,
.chart-card h3,
.insight-card h3,
.trends-card h3{
  margin-bottom: var(--space-1);
}

/* Internal content spacing */

.trends-sub{
  margin-top: var(--space-1);
  margin-bottom: var(--space-2);
}

/* Operational page spacing */

.row-item,
.tx-item{
  margin-bottom: var(--space-1);
}

/* Cleaner visual separators */

.insight-card + .insight-card{
  position: relative;
}

/* Hover micro-interactions */
.view-btn,
.card,
.chart-card,
.insight-card,
.trends-card,
.expense-group-summary,
.section-header,
.available-funds-banner,
button{
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    opacity 160ms ease;
}

/* KPI cards */
#summaryCards .card:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}

/* Secondary analytic cards */

.insight-card:hover,
.trends-card:hover,
.chart-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
}

/* Tabs */
.view-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 10px var(--overlay-08);
}

/* Buttons */
button:hover{
  transform: translateY(-1px);
}

/* Section headers on operational pages — hover only on the pill, not the whole bar */

#expensesSection > .section-header .focus-head:hover,
#subscriptionsSectionCompact > .section-header .focus-head:hover,
#usageSectionCompact > .section-header .focus-head:hover{
  filter: brightness(0.96);
}

/* Expense category group headers */
.expense-group-summary:hover{
  box-shadow: inset 0 0 0 1px rgba(65, 83, 100, 0.18);
  filter: brightness(0.995);
}

/* Premium section identity */


#expensesSection > .section-header{
  background: linear-gradient(180deg, #f8f5f1 0%, #f1ece6 100%);
  border-bottom-color: rgba(139,125,112,0.26);
}
.focus-head-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}

#expensesSection > .section-header .focus-head,
#subscriptionsSectionCompact > .section-header .focus-head,
#usageSectionCompact > .section-header .focus-head{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:10px;
  box-shadow: inset 0 1px 0 var(--white-72);
}


#expensesSection > .section-header .focus-head{
  background: rgba(139,125,112,0.14);
  border: 1px solid rgba(139,125,112,0.18);
}

#expensesSection > .section-header h3,
#subscriptionsSectionCompact > .section-header h3,
#usageSectionCompact > .section-header h3{
  margin:0;
  color:#1d2a35;
}


/* Chart legend items */
.chart-legend-item{
  transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  border-radius: 8px;
}
.chart-legend-item:hover{
  background: rgba(65, 83, 100, 0.05);
  transform: translateX(1px);
}

/* Inputs */
input:hover{
  box-shadow: 0 0 0 2px rgba(65, 83, 100, 0.08);
}

/* Fix allocation row hover so Remaining cell matches the row */


/* Remaining value status styling */


/* Past month picker */
#pastMonthModal .chart-modal-card{
  width:min(420px, calc(100vw - 32px));
}

/* ─────────────────────────────────────────────────────────────────
   STRUCTURE MANAGEMENT MODALS — redesigned to match the dashboard
   ───────────────────────────────────────────────────────────────── */

/* Wider card for the two-column structure modals */
.expense-structure-modal-card {
  width: min(780px, calc(100vw - 32px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Wider modal layout keeps the same shared shell */
.expense-structure-modal-card .chart-modal-head {
  padding: 16px 20px 12px;
}

.expense-structure-modal-card .planner-sub {
  padding-left: 20px;
  padding-right: 20px;
}

.chart-modal-card .chart-modal-head,
.dictionary-card .dictionary-head {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--white) 0%, var(--surface-light) 100%);
}

.chart-modal-card .chart-modal-head .tiny-btn,
.dictionary-card .dictionary-head .ghost-btn {
  margin-left: auto;
  flex-shrink: 0;
}

.chart-modal-card .planner-sub {
  margin: 0;
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--line);
  background: #fcfdff;
}

.chart-modal-card > :not(.chart-modal-backdrop):not(.chart-modal-head):not(.planner-sub) {
  padding-left: 16px;
  padding-right: 16px;
}

.chart-modal-card .special-funding-form,
.chart-modal-card .chart-detail-list,
.chart-modal-card .trend-modal-list,
.chart-modal-card [style*="justify-content:flex-end"] {
  margin-top: 12px;
  margin-bottom: 16px;
}

/* Two-panel grid */
.expense-structure-grid {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Each panel */
.manage-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.manage-panel:first-child {
  border-right: 1px solid var(--line);
}

/* Panel sub-header */
.manage-subheader {
  padding: 11px 16px 9px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-light);
  flex-shrink: 0;
}

.manage-subheader h4 {
  margin: 0 0 1px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text);
}

.manage-subheader p {
  margin: 0;
  font-size: 0.65rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Scrollable list area */
.manage-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
  display: grid;
  gap: 4px;
  align-content: start;
  min-height: 180px;
  max-height: 320px;
}

/* Individual manage row */
.manage-item {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: start;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.manage-item.is-selectable{
  cursor:pointer;
}
.manage-item-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex-wrap:nowrap;
}

.manage-item:hover {
  background: #f6f8fa;
  border-color: #c0ccd9;
  box-shadow: 0 2px 6px var(--overlay-06);
}

.manage-item.active {
  background: var(--accent-soft);
  border-color: rgba(71,85,105,0.38);
  box-shadow: 0 0 0 2px rgba(71,85,105,0.12);
}

.manage-item.active .manage-item-meta {
  color: var(--purple);
}
.manage-item.is-custom-category{
  background:var(--surface-light);
  border-color:var(--line);
}
.manage-item.is-custom-category.active{
  background: var(--accent-soft);
  border-color: rgba(71,85,105,0.38);
  box-shadow: 0 0 0 2px rgba(71,85,105,0.12);
}

.manage-item.is-custom-category.active .manage-item-meta {
  color: var(--purple);
}

.manage-splitwise-setting{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:4px 7px;
  border-radius:8px;
  background:rgba(255,255,255,0.54);
  border:1px solid var(--line);
  max-width:100%;
}
.manage-splitwise-title{
  font-size:0.61rem;
  font-weight:850;
  color:var(--accent-text);
  white-space:nowrap;
}
.manage-splitwise-toggle{
  display:inline-flex;
  align-items:center;
  gap:4px;
  flex:0 0 auto;
  cursor:pointer;
  user-select:none;
  font-size:0.58rem;
  font-weight:850;
  color:var(--muted);
  line-height:1;
}
.manage-splitwise-toggle input{
  inline-size:13px;
  block-size:13px;
  accent-color:var(--accent);
  cursor:pointer;
  margin:0;
}
.alloc-focus-splitwise-hint{
  font-size:0.60rem;
  font-weight:700;
  color:var(--muted);
  margin-top:2px;
}
.alloc-focus-splitwise-hint.is-active{
  color:var(--accent);
}
.category-color-input{
  width:28px;
  height:28px;
  padding:2px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--white);
  cursor:pointer;
}
.category-color-reset{
  min-width:28px;
}

.manage-structure-category-row{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:10px;
  padding:10px;
}

.manage-structure-category-main{
  display:grid;
  gap:6px;
  min-width:0;
}

.manage-structure-category-header{
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  align-items:start;
  gap:10px;
  min-width:0;
}

.manage-structure-category-copy{
  display:grid;
  gap:4px;
  min-width:0;
}

.manage-structure-category-copy input[type="text"]{
  width:100%;
  min-width:0;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 10px;
}

.manage-category-icon-picker{
  position:relative;
  width:46px;
  height:40px;
  flex:0 0 auto;
}

.manage-category-icon-current{
  width:46px;
  height:40px;
  border-radius:12px;
  border:1px dashed rgba(111,135,154,0.28);
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent-text);
  transition:border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.manage-category-icon-current.is-empty{
  font-size:1.1rem;
  font-weight:700;
  color:var(--muted);
}

.manage-category-icon-picker:hover .manage-category-icon-current{
  border-color:rgba(71,85,105,0.35);
  background:rgba(255,255,255,0.45);
  box-shadow:0 4px 10px var(--overlay-06);
}

.manage-category-icon-select{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
  border:0;
}

.manage-category-icon-picker:focus-within .manage-category-icon-current{
  border-style:solid;
  border-color:rgba(59,130,246,0.42);
  box-shadow:0 0 0 3px rgba(59,130,246,0.10);
}

.manage-category-action-row{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  gap:6px;
  flex-wrap:wrap;
  max-width:104px;
}

.category-icon-art{
  --category-icon-size:1.14rem;
  --category-icon-x:0px;
  --category-icon-y:0px;
  --category-icon-scale:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.45em;
  height:1.45em;
  font-size:var(--category-icon-size);
  line-height:1;
  transform:translate(var(--category-icon-x), var(--category-icon-y)) scale(var(--category-icon-scale));
  transform-origin:center;
}
.category-icon-art.category-icon-emoji{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}

@media (max-width: 760px) {
  .manage-structure-category-row{
    grid-template-columns:minmax(0,1fr);
  }
  .manage-category-action-row{
    max-width:none;
    justify-content:flex-start;
  }
}

/* Main content column inside a row */
.manage-item-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

/* Inline three-column layout for expense sub-categories (name + type + planned) */
.manage-item-main.manage-inline.three {
  grid-template-columns: 1fr 90px 90px;
  gap: 6px;
  align-items: center;
}

/* Name input — always visible with a border so it reads as a distinct field */
.manage-item-main.manage-inline.three input[type="text"] {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  min-width: 0;
}

/* Dropdown and planned amount — distinct bordered look */
.manage-item-main.manage-inline.three select,
.manage-item-main.manage-inline.three input[type="number"] {
  background: #f4f6fb;
  border: 1px solid var(--line);
  border-radius: 6px;
  min-width: 0;
}

.manage-item-main.manage-inline.two {
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 6px;
  align-items: center;
}

.manage-item-main.manage-inline.two input[type="text"],
.manage-item-main.manage-inline.two select {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  min-width: 0;
}

.classification-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.58rem;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 600;
  margin-left: 4px;
  border: 0.5px solid transparent;
}
.classification-chip.savings {
  background: rgba(22,163,74,0.1);
  color: var(--green-700);
  border-color: rgba(22,163,74,0.2);
}
.classification-chip.investment {
  background: rgba(124,58,237,0.1);
  color: #6d28d9;
  border-color: rgba(124,58,237,0.2);
}

/* Subcategory rows: content | controls (auto-width to fit controls + delete) */
.manage-list .manage-item:not([data-expense-group-item]):not([data-income-group-item]):not([data-savings-group-item]) {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

/* Inputs inside manage items */
.manage-item input[type="text"],
.manage-item input[type="number"],
.manage-item select {
  width: 100%;
  padding: 4px 7px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  transition: background 120ms ease, border-color 120ms ease;
}

.manage-item input[type="text"]:hover,
.manage-item input[type="number"]:hover,
.manage-item select:hover {
  background: rgba(255,255,255,0.9);
  border-color: var(--line);
}

.manage-item input[type="text"]:focus,
.manage-item input[type="number"]:focus,
.manage-item select:focus {
  outline: none;
  background: var(--white);
  border-color: rgba(71,85,105,0.45);
  box-shadow: 0 0 0 2px var(--slate-10);
}

.manage-item input[type="number"]:disabled {
  color: var(--muted);
  background: transparent;
  cursor: not-allowed;
}

.manage-item select {
  font-weight: 500;
  font-size: 0.68rem;
  cursor: pointer;
  background: rgba(255,255,255,0.7);
  border-color: var(--line);
  padding: 4px 5px;
}

/* Sub-text under the name */
.manage-item-meta {
  font-size: 0.62rem;
  color: var(--muted);
  padding: 0 7px;
  line-height: 1;
}

/* Icon buttons (select / delete) */
.manage-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--surface-light);
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  padding: 0;
}

.manage-icon-btn:hover {
  background: var(--accent-soft);
  border-color: rgba(71,85,105,0.30);
  color: var(--purple);
  transform: none;
}

.manage-icon-btn.danger {
  color: var(--red-error);
  background: #fff5f5;
  border-color: rgba(239,68,68,0.2);
}

.manage-icon-btn.danger:hover {
  background: #fee2e2;
  border-color: rgba(239,68,68,0.45);
  color: var(--red-700);
}

/* Empty state */
.manage-empty {
  color: var(--muted);
  font-size: 0.68rem;
  font-style: italic;
  padding: 16px 8px;
  text-align: center;
  border: 1.5px dashed var(--line);
  border-radius: 8px;
  background: #fafbfd;
}

/* Footer action bar */
.manage-actions {
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--surface-light);
  flex-shrink: 0;
  display: flex;
  justify-content: flex-start;
}

/* Accent action button — canonical modal/sidebar action style */
.manage-actions .secondary,
.modal-accent-btn {
  border: 0.5px solid rgba(71,85,105,0.30);
  background: rgba(71,85,105,0.08);
  color: var(--purple);
  border-radius: 7px;
  padding: 5px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: auto;
  text-align: left;
}

.manage-actions .secondary:hover,
.modal-accent-btn:hover {
  background: rgba(71,85,105,0.14);
  color: #1f2937;
  transform: none;
}

/* Add "+" prefix to add buttons only */
.manage-actions .secondary::before {
  content: '+';
  font-size: 1rem;
  line-height: 1;
  font-weight: 400;
  opacity: 0.7;
}

/* Shared blue surface system for cards and modals */
.card,
.chart-card,
.insight-card,
.forecast-card,
.trends-card,
.planner-card,
.overview-chart-card,
.overview-allocation-card {
  border: 1px solid var(--card-border);
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.card:hover,
.chart-card:hover,
.insight-card:hover,
.forecast-card:hover,
.trends-card:hover,
.planner-card:hover,
.overview-chart-card:hover,
.overview-allocation-card:hover {
  border-color: var(--card-border-hover);
  box-shadow: var(--card-shadow-hover);
}

.section-header,
.focus-head,
.trends-head {
  color: var(--blue-900);
}

.manage-panel.is-active .manage-subheader,
.manage-item.active,
.manage-item.is-selected {
  background: var(--accent-surface);
  border-color: var(--accent-border-strong);
}

.chart-modal-card,
.dictionary-card {
  border-color: var(--card-border);
  box-shadow: 0 24px 60px rgba(17, 24, 39, 0.16);
}

.chart-modal-card .chart-modal-head,
.dictionary-card .dictionary-head {
  border-bottom: 1px solid rgba(203, 213, 225, 0.5);
  background: linear-gradient(180deg, var(--blue-800) 0%, var(--blue-900) 100%);
  color: var(--white);
}

.chart-modal-card .chart-modal-head h3,
.dictionary-card .dictionary-head h3 {
  color: inherit;
}

.chart-modal-card .chart-modal-head .tiny-btn,
.dictionary-card .dictionary-head .ghost-btn {
  border-color: rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.16);
  color: var(--white);
}

.chart-modal-card .chart-modal-head .tiny-btn:hover,
.dictionary-card .dictionary-head .ghost-btn:hover {
  background: rgba(255,255,255,0.24);
  border-color: rgba(255,255,255,0.34);
}

.chart-modal-card .planner-sub{
  border-bottom-color: var(--accent-border);
  background: linear-gradient(180deg, var(--surface-light) 0%, #f2f5f8 100%);
}

.modal-accent-btn,
.manage-actions .secondary,
.view-btn.active,
.month-btn.active {
  border-color: rgba(71, 85, 105, 0.30);
  background: var(--accent-surface);
  color: var(--accent-text);
}

.modal-accent-btn:hover,
.manage-actions .secondary:hover,
.view-btn.active:hover,
.month-btn.active:hover {
  background: var(--accent-surface-hover);
  color: var(--blue-900);
}

/* ── Typography: Geist + Geist Mono ── */
:root {
  --font-ui:   "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Code", monospace;
  --font-display: "Bricolage Grotesque", "Geist", ui-sans-serif, system-ui, sans-serif;
}

/* All numeric / financial values → Geist Mono */
.kpi-value,
.kpi-foot,
/* KPI values: slightly tighter tracking for large mono numbers */
.kpi-value {
  letter-spacing: -0.03em;
}

/* Sidebar brand name: heavier weight, tighter tracking */
.brand h1 {
  font-family: var(--font-ui);
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* Page-level headings */
.title h2,
.chart-card h3,
.insight-card h3,
.trends-card h3,
.planner-card h3,
.section-header h3,
.overview-allocation-card h3{
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* KPI labels: medium weight, open tracking */
.kpi-label {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Sidebar nav items */
.month-btn,
.side-actions button,
.view-btn {
  font-family: var(--font-ui);
  font-weight: 500;
}

/* Active sidebar item: bump to semibold */
.month-btn.active {
  font-weight: 700;
}

/* Pills and badges */
.pill, .pill-soft {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Category row names */
.row-name,
.expense-name,
.manage-item-main input[type="text"],
.manage-subheader h4 {
  font-family: var(--font-ui);
  font-weight: 700;
}

/* Muted / meta text */
.row-meta,
.expense-sub,
.manage-item-meta,
.manage-subheader p,
.planner-sub,
.muted,
.kpi-foot,
.manage-empty {
  font-family: var(--font-ui);
  font-weight: 400;
}

/* Modal headings */
.chart-modal-head h3,
.expense-structure-modal-card .chart-modal-head h3 {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Biggest Category Shift KPI */
.kpi-value.kpi-category{
  font-size: 0.92rem;
  line-height: 1.15;
  padding: 0 4px;
  word-break: break-word;
  color: var(--text);
}
#summaryCards .card.warn-80 .kpi-value.kpi-category{ color: var(--amber-warn); }
#summaryCards .card.warn-100 .kpi-value.kpi-category{ color: var(--red-600); }

/* Structured Smart Guidance */
.guidance-card{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:100%;
  min-height:0;
}
.guidance-card .focus-head{
  margin-bottom:8px;
}
.guidance-card .focus-head h3{
  margin:0;
  font-size:1rem;
  font-weight:800;
  color:var(--accent-text);
}
.guidance-top{
  display:grid;
  gap:8px;
}
.guidance-status-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.guidance-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  padding:4px 10px;
  border-radius:999px;
  font-size:0.66rem;
  font-weight:800;
  border:1px solid var(--tone-neutral-border);
  background:var(--tone-neutral-bg);
  color:var(--tone-neutral-text);
}
.guidance-status.good{
  background:var(--tone-good-bg);
  border-color:var(--tone-good-border);
  color:var(--tone-good-text);
}
.guidance-status.warn{
  background:var(--tone-warn-bg);
  border-color:var(--tone-warn-border);
  color:var(--tone-warn-text);
}
.guidance-status.bad{
  background:var(--tone-bad-bg);
  border-color:var(--tone-bad-border);
  color:var(--tone-bad-text);
}
.guidance-priority{
  color:#607181;
  text-align:right;
}
.guidance-hero{
  line-height:1.35;
  color:#223140;
}
.guidance-layout{
  display:flex;
  flex-direction:column;
  gap:9px;
  flex:1 1 auto;
  height:100%;
  min-height:0;
}
.guidance-main{
  display:grid;
  gap:9px;
  flex:1 1 auto;
}
.guidance-tile-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:7px;
}
.guidance-tile{
  display:grid;
  gap:4px;
  padding:7px 10px;
  border-radius:12px;
  border:1px solid rgba(73,95,117,0.14);
  background:var(--panel);
}
.guidance-tile .tile-label{
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:#6b7b8c;
}
.guidance-tile .tile-copy{
  line-height:1.45;
  color:#2d3a47;
}
.guidance-tile.good{
  background:var(--tone-good-bg);
  border-color:var(--tone-good-border);
}
.guidance-tile.warn{
  background:var(--tone-warn-bg);
  border-color:var(--tone-warn-border);
}
.guidance-tile.bad{
  background:var(--tone-bad-bg);
  border-color:var(--tone-bad-border);
}
.guidance-urgency{
  line-height:1.4;
}
.guidance-urgency strong{
  color:#2b3947;
}
.guidance-track-card{
  margin-top:auto;
  border:1px solid var(--tone-neutral-border);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(236,241,247,0.98) 0%, rgba(228,235,243,0.98) 100%);
  box-shadow:0 4px 10px var(--overlay-06), inset 0 1px 0 rgba(255,255,255,0.6);
  padding:12px 12px 10px;
  display:grid;
  gap:7px;
}
.guidance-track-label{
  font-size:0.62rem;
  color:#6b7b8c;
  text-transform:uppercase;
  letter-spacing:0.04em;
  font-weight:800;
}
.guidance-track-bar{
  width:100%;
  height:8px;
  border-radius:999px;
  background:#dbe4f0;
  overflow:hidden;
}
.guidance-track-fill{
  height:100%;
  border-radius:999px;
  background:var(--blue-600);
}
.guidance-track-fill.watch{ background:var(--amber); }
.guidance-track-fill.bad{ background:var(--red-600); }
.guidance-track-values{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}
.guidance-track-current{
  font-size:1rem;
  font-weight:800;
  color:var(--text);
}
.guidance-track-target{
  font-size:0.68rem;
  color:var(--muted);
  white-space:nowrap;
}
.guidance-track-note{
  margin-bottom:8px;
  font-size:0.64rem;
  color:var(--muted);
  line-height:1.4;
  margin-top:2px;
}
.guidance-track-state{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--tone-good-border);
  background:var(--tone-good-bg);
  color:var(--tone-good-text);
  font-size:0.62rem;
  font-weight:800;
}
.guidance-track-state.watch{
  border-color:var(--tone-warn-border);
  background:var(--tone-warn-bg);
  color:var(--tone-warn-text);
}
.guidance-track-state.bad{
  border-color:var(--tone-bad-border);
  background:var(--tone-bad-bg);
  color:var(--tone-bad-text);
}
.tone-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  padding:4px 10px;
  border-radius:999px;
  font-size:0.66rem;
  font-weight:800;
  border:1px solid var(--tone-neutral-border);
  background:var(--tone-neutral-bg);
  color:var(--tone-neutral-text);
}
.tone-chip.good,
.traffic-tone.good{
  background:var(--tone-good-bg);
  border-color:var(--tone-good-border);
  color:var(--tone-good-text);
}
.tone-chip.warn,
.traffic-tone.warn{
  background:var(--tone-warn-bg);
  border-color:var(--tone-warn-border);
  color:var(--tone-warn-text);
}
.tone-chip.bad,
.traffic-tone.bad{
  background:var(--tone-bad-bg);
  border-color:var(--tone-bad-border);
  color:var(--tone-bad-text);
}
@media (max-width: 980px){
  .guidance-tile-grid{
    grid-template-columns:1fr;
  }
}


/* Overview insight layout refresh */


.mix-list{
  display:grid;
  align-content:space-evenly;
  gap:10px;
  height:100%;
}
.mix-list{
  padding-top:4px;
}
.mix-row{
  display:grid;
  grid-template-columns:136px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}
.mix-label{
  font-size:0.72rem;
  font-weight:700;
  color:var(--text);
}
.mix-track{
  position:relative;
  width:100%;
  height:16px;
  border-radius:999px;
  background:#dbe4f0;
  overflow:hidden;
}
.mix-fill{
  position:absolute;
  inset:0 auto 0 0;
  height:100%;
  border-radius:999px;
  background:var(--purple);
}
.mix-fill.expenses{
  background:var(--amber);
}
.mix-fill.savings{
  background:#22c55e;
}
.mix-fill.investments{
  background:var(--purple);
}
.mix-value{
  min-width:126px;
  color:var(--text);
  font-size:0.72rem;
  font-variant-numeric:tabular-nums;
  text-align:right;
  white-space:nowrap;
}
.mix-value small{
  color:var(--muted);
  font-size:0.66rem;
  margin-left:6px;
}


.reallocation-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:0;
  height:100%;
}
.reallocation-top{
  display:grid;
  gap:7px;
}


.reallocation-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:max-content;
  padding:4px 9px;
  border-radius:999px;
  font-size:0.67rem;
  font-weight:700;
  border:1px solid rgba(37,99,235,0.18);
  background:rgba(37,99,235,0.08);
  color:var(--purple);
}
.reallocation-badge.good{
  border-color:rgba(22,163,74,0.18);
  background:rgba(22,163,74,0.08);
  color:var(--green-700);
}
.reallocation-badge.warn{
  border-color:rgba(217,119,6,0.2);
  background:rgba(217,119,6,0.09);
  color:var(--amber-warn);
}
.burn-state-badge.state-healthy,
.reallocation-badge.state-healthy{
  background:var(--surface-success-soft);
  border-color:#86efac;
  color:var(--green-900);
}
.burn-state-badge.state-stable,
.reallocation-badge.state-stable{
  background:#eef2ff;
  border-color:#e2e8f0;
  color:var(--purple);
}
.burn-state-badge.state-watch,
.reallocation-badge.state-watch{
  background:var(--surface-warn-soft);
  border-color:#fdba74;
  color:var(--amber-warn);
}
.burn-state-badge.state-pressure,
.reallocation-badge.state-pressure{
  background:#ffedd5;
  border-color:#fb923c;
  color:#c2410c;
}
.burn-state-badge.state-critical,
.reallocation-badge.state-critical{
  background:var(--surface-error-soft);
  border-color:#fca5a5;
  color:var(--red-700);
}
.reallocation-hero{
  font-size:0.92rem;
  font-weight:800;
  color:var(--text);
  line-height:1.28;
}

@media (max-width: 1150px){
  
  
  
  .mix-row{
    grid-template-columns:1fr;
    gap:5px;
  }
  .mix-value{
    text-align:left;
    min-width:0;
  }
  .mix-track{
    order:3;
  }
}

/* Smart Budget Guidance upgrade */
.guidance-card{
  display:grid;
  align-content:start;
}

.guidance-track-card{
  margin-top:10px;
  border-top:1px solid var(--line);
  padding-top:10px;
  border-left:0;
  border-right:0;
  border-bottom:0;
  border-radius:0;
  background:transparent;
  padding:10px 0 0;
  display:grid;
  gap:6px;
}
.guidance-track-label{
  font-size:0.62rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.04em;
  font-weight:700;
}
.guidance-track-bar{
  width:100%;
  height:8px;
  border-radius:999px;
  background:#dbe4f0;
  overflow:hidden;
}
.guidance-track-fill{
  height:100%;
  border-radius:999px;
  background:var(--green-600);
}
.guidance-track-fill.watch{ background:var(--amber); }
.guidance-track-fill.bad{ background:var(--red-600); }
.guidance-track-values{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}
.guidance-track-current{
  font-size:0.9rem;
  font-weight:800;
  color:var(--text);
}
.guidance-track-target{
  font-size:0.66rem;
  color:var(--muted);
  white-space:nowrap;
}
.guidance-track-note{
  margin-bottom:8px;
  font-size:0.63rem;
  color:var(--muted);
  line-height:1.35;
}
.guidance-track-state{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  padding:3px 7px;
  border-radius:999px;
  border:1px solid rgba(22,163,74,0.18);
  background:var(--surface-success-soft);
  color:var(--green-900);
  font-size:0.62rem;
  font-weight:700;
}
.guidance-track-state.watch{
  border-color:var(--tone-warn-border);
  background:var(--tone-warn-bg);
  color:var(--tone-warn-text);
}
.guidance-track-state.bad{
  border-color:rgba(220,38,38,0.2);
  background:var(--surface-error-soft);
  color:var(--red-700);
}

/* Note dictionary + required note UX */
.note-required{
  border-color:var(--amber);
  background:#fffbeb;
}
.note-required-hint{
  font-size:0.62rem;
  color:var(--amber-warn);
  margin-top:4px;
}
.note-ac-chips{
  position:absolute;
  top:calc(100% + 3px);
  left:0;
  z-index:400;
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  pointer-events:none; /* chips get their own pointer-events below */
}
.note-ac-chips:empty{ display:none; }
.note-ac-chip{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--accent-border-strong);
  background:var(--white);
  color:var(--accent-text);
  font:inherit;
  font-size:0.61rem;
  font-weight:600;
  cursor:pointer;
  pointer-events:all;
  white-space:nowrap;
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:0 2px 6px var(--overlay-08);
  transition:background 100ms, border-color 100ms;
  user-select:none;
}
.note-ac-chip:hover,
.note-ac-chip.is-focused{
  background:var(--accent-surface);
  border-color:var(--timeline-fill);
}
.note-ac-chip-tab{
  font-size:0.62rem;
  opacity:0.45;
  flex-shrink:0;
  font-weight:400;
}
/* Keep expense-actions input wrapper as positioning anchor */
.expense-actions{
  position:relative;
}
/* Same for inline-entry-controls in card view */
.inline-entry-controls{
  position:relative;
}
.dictionary-modal[hidden]{ display:none; }
.dictionary-modal{
  position:fixed;
  inset:0;
  z-index:1300;
}
.dictionary-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,0.38);
}
.dictionary-card{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(720px, calc(100vw - 32px));
  max-height:min(84vh, 760px);
  overflow:auto;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 24px 60px rgba(15,23,42,0.22);
  padding:0;
}
.dictionary-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin:0;
  padding:14px 16px 10px;
}
.dictionary-head h3{
  margin:0;
  font-size:1rem;
  line-height:1.2;
}
.dictionary-sub{
  color:var(--muted);
  font-size:0.68rem;
  margin-top:4px;
}
.dictionary-card > :not(.dictionary-backdrop):not(.dictionary-head) {
  padding-left:16px;
  padding-right:16px;
}

.dictionary-grid{
  display:grid;
  grid-template-columns: minmax(0,1.4fr) 160px auto;
  gap:8px;
  align-items:center;
}
.dictionary-grid input,
.dictionary-grid select{
  width:100%;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:7px;
  font:inherit;
  background:var(--white);
}
.dictionary-list{
  display:grid;
  gap:6px;
  margin-top:10px;
}
.dictionary-row{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) 140px auto;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface-light);
}
.dictionary-pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 7px;
  border-radius:999px;
  font-size:0.63rem;
  font-weight:700;
  border:1px solid var(--line);
  width:fit-content;
}
.dictionary-pill.repeatable{
  background:var(--surface-success-soft);
  color:var(--green-900);
  border-color:#86efac;
}
.dictionary-pill.oneoff{
  background:var(--surface-error-soft);
  color:var(--red-700);
  border-color:#fca5a5;
}
.dictionary-pill.neutral{
  background:var(--surface-light);
  color:var(--muted);
}
.dictionary-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:12px;
  font-size:0.66rem;
  color:var(--muted);
}

/* Dictionary suggestions */
.dictionary-section-title{
  margin:14px 0 6px;
  font-size:0.78rem;
  font-weight:700;
  color:var(--text);
}
.dictionary-suggestions{
  display:grid;
  gap:6px;
  margin-top:8px;
}
.dictionary-suggestion{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border:1px dashed var(--line);
  border-radius:8px;
  background:#fcfdff;
}
.dictionary-suggestion strong{
  font-size:0.72rem;
}
.dictionary-suggestion small{
  display:block;
  color:var(--muted);
  font-size:0.63rem;
  margin-top:2px;
}
.dictionary-suggestion .actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.dictionary-empty{
  color:var(--muted);
  font-size:0.66rem;
  padding:8px 0 2px;
}

.category-info{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  margin-left:6px;
  font-size:10px;
  font-weight:600;
  border-radius:50%;
  background:#e5e7eb;
  color:#374151;
  cursor:help;
}

/* hide helper text but keep for logic */
.category-cell small{
  display:none;
}


.section-subtotal.all-fixed-done{
  color:var(--green-700);
  border-color: rgba(21,128,61,0.22);
  background:var(--surface-success-soft);
}

/* Final overview insight overrides */


/* Budget Adjustment Advisor */
.advisor-list{
  display:grid;
  gap:10px;
  margin-top:8px;
}
.advisor-item{
  position:relative;
  border:1px solid var(--slate-22);
  border-radius:14px;
  background:linear-gradient(180deg,var(--white) 0%, var(--surface-light) 100%);
  padding:12px 12px 11px;
  display:grid;
  gap:7px;
  box-shadow:0 8px 20px rgba(15,23,42,0.05);
  overflow:hidden;
}
.advisor-item::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:var(--planned-border);
}
.advisor-item.raise::before{ background:var(--purple); }
.advisor-item.trim::before{ background:var(--red-600); }
.advisor-item.keep::before,
.advisor-item.watch::before{ background:var(--purple); }
.advisor-item-head{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:start;
}
.advisor-rank{
  min-width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#eef2ff;
  color:var(--purple);
  font-size:0.68rem;
  font-weight:800;
  letter-spacing:0.02em;
}
.advisor-item.trim .advisor-rank{
  background:var(--surface-error-soft);
  color:var(--red-700);
}
.advisor-item.keep .advisor-rank,
.advisor-item.watch .advisor-rank{
  background:#f1f5f9;
  color:var(--purple);
}
.advisor-percent-block{
  display:grid;
  gap:2px;
  min-width:0;
}
.advisor-percent{
  font-family:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size:1.18rem;
  line-height:1;
  font-weight:800;
  letter-spacing:-0.03em;
}
.advisor-item.raise .advisor-percent{ color:var(--purple); }
.advisor-item.trim .advisor-percent{ color:var(--red-700); }
.advisor-item.keep .advisor-percent,
.advisor-item.watch .advisor-percent{ color:var(--purple); }
.advisor-eur{
  font-size:0.62rem;
  color:var(--muted);
  letter-spacing:0.02em;
}
.advisor-confidence{
  align-self:start;
  font-size:0.60rem;
  color:var(--muted);
  white-space:nowrap;
  padding:4px 7px;
  border:1px solid var(--slate-22);
  border-radius:999px;
  background:var(--white);
}
.advisor-item-main{
  display:grid;
  gap:3px;
  padding-left:38px;
}
.advisor-action{
  font-size:0.84rem;
  font-weight:800;
  color:var(--text);
  line-height:1.15;
}
.advisor-category{
  font-size:0.68rem;
  color:var(--muted);
}
.advisor-item-meta{
  font-size:0.64rem;
  color:var(--muted);
  line-height:1.35;
  padding-left:38px;
}
.reallocation-card .advisor-item-head{
  display:grid;
  grid-template-columns:auto minmax(96px, auto) minmax(140px, 1fr) auto;
  align-items:center;
  column-gap:14px;
}
.reallocation-card .advisor-percent-block{
  min-width:98px;
}
.reallocation-card .advisor-head-center{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}
.reallocation-card .advisor-change-chip-row{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:0;
  flex-wrap:nowrap;
}
.reallocation-card .advisor-change-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:58px;
  padding:5px 10px;
  border-radius:999px;
}
.reallocation-card .advisor-confidence{
  justify-self:end;
  align-self:start;
  white-space:nowrap;
}
.reallocation-card .reallocation-hero.advisor-hero{
  font-size:1rem;
  line-height:1.15;
  font-weight:800;
  margin-top:2px;
}


/* v222 equal-height bottom cards */
.insight-grid{
  align-items: stretch;
}
.insight-grid > .insight-card{
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 430px;
}
.insight-grid > .insight-card > *{
  flex-shrink: 0;
}


/* Budget Adjustment Advisor card should fill height cleanly */
.insight-card .advisor-list{
  display:grid;
  gap:10px;
}

/* Behavior insights should also pin list to use height more evenly */


/* v223 enforce equal bottom-row card heights */
.burn-card,
.reallocation-card{
  display:flex;
  flex-direction:column;
  height:auto;
}


/* v224 hard lock equal row heights */
.insight-grid{
  align-items: stretch;
}
.insight-grid .insight-card.burn-card,
.insight-grid .insight-card.reallocation-card{
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  height:100%;
  align-self:stretch;
}

.insight-grid .insight-card.reallocation-card > .reallocation-top{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  min-height:0;
}


/* v225 align overview stacks + bottom row cards */
.insight-grid{
  align-items:stretch;
}

.burn-card,
.reallocation-card{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
}

/* v226 hard bottom-edge alignment for overview bottom cards */
.insight-grid{
  align-items:start;
}
.burn-card,
.reallocation-card{
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
}

/* v227 dynamic Burn Rate graphic */
.burn-card .focus-head{
  margin-bottom: 4px;
}


.burn-state-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:6px;
}
.burn-state-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 8px;
  border-radius:999px;
  font-size:0.64rem;
  font-weight:700;
  border:1px solid var(--line);
  background:var(--surface-light);
  color:var(--text);
}
.burn-state-badge.safe{
  background:#eef2ff;
  border-color:#e2e8f0;
  color:var(--purple);
}
.burn-state-badge.watch{
  background:var(--surface-warn-soft);
  border-color:#fdba74;
  color:var(--amber-warn);
}
.burn-state-badge.hot,
.burn-state-badge.overheat{
  background:var(--surface-error-soft);
  border-color:#fca5a5;
  color:var(--red-700);
}

@keyframes burnFlicker{
  0%,100%{ transform: translateY(0) scale(1); opacity:.95; }
  25%{ transform: translateY(-2px) scale(1.05,.96); opacity:.82; }
  50%{ transform: translateY(-4px) scale(.96,1.08); opacity:0.6; }
  75%{ transform: translateY(-1px) scale(1.04,.98); opacity:.88; }
}

/* v229 triangle burn graphic (clean) */
.burn-card .focus-head{
  margin-bottom: 4px;
}
.burn-triangle-wrap{
  margin: 10px 0 8px;
  display:grid;
  gap:8px;
}
.burn-triangle-rail{
  position:relative;
  height:84px;
  border-radius:14px;
  overflow:visible;
}
.burn-triangle-shell{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#eef3fb 0%,#e7edf7 100%);
  border:1px solid #d6dfec;
  clip-path: polygon(0 50%, 100% 10%, 100% 90%);
  border-radius:12px;
  box-shadow: inset 0 1px 2px var(--overlay-06);
}
.burn-triangle-fill{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:var(--burn-width, 40%);
  clip-path: polygon(0 50%, 100% 10%, 100% 90%);
  border-radius:12px;
  transition:width 260ms ease;
  overflow:visible;
}
.burn-triangle-fill.safe{
  background:linear-gradient(90deg,var(--purple) 0%, #7c8cff 100%);
}
.burn-triangle-fill.watch{
  background:linear-gradient(90deg,var(--purple) 0%, #8b5cf6 48%, var(--amber) 100%);
}
.burn-triangle-fill.hot{
  background:linear-gradient(90deg,var(--purple) 0%, #8b5cf6 38%, var(--amber) 72%, var(--red-error) 100%);
}
.burn-triangle-fill.overheat{
  background:linear-gradient(90deg,var(--purple) 0%, #8b5cf6 28%, var(--amber) 55%, var(--red-error) 82%, var(--red-700) 100%);
  filter:saturate(1.05);
}
.burn-triangle-fill::after{
  content:"";
  position:absolute;
  right:-12px;
  top:50%;
  transform:translateY(-50%);
  width:26px;
  height:26px;
  border-radius:50%;
  background:inherit;
  filter: blur(6px);
  opacity:.22;
}
.burn-triangle-ticks{
  position:absolute;
  inset:0;
  clip-path: polygon(0 50%, 100% 10%, 100% 90%);
  pointer-events:none;
}
.burn-triangle-ticks span{
  position:absolute;
  top:16px;
  bottom:16px;
  width:1px;
  background:rgba(255,255,255,0.65);
}
.burn-triangle-ticks span:nth-child(1){ left:25%; }
.burn-triangle-ticks span:nth-child(2){ left:50%; }
.burn-triangle-ticks span:nth-child(3){ left:75%; }

.burn-triangle-head{
  position:absolute;
  top:50%;
  left:var(--burn-width, 40%);
  transform:translate(-20%, -50%);
  width:34px;
  height:34px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,0.5), rgba(255,255,255,0.05) 40%, var(--white-0) 60%),
             radial-gradient(circle at 60% 55%, rgba(255,165,0,0.35), rgba(239,68,68,0.1) 60%, rgba(239,68,68,0) 78%);
  opacity:.55;
  pointer-events:none;
}
.burn-triangle-head.safe{ opacity:.18; }
.burn-triangle-head.watch{ opacity:.38; }
.burn-triangle-head.hot{ opacity:.62; }
.burn-triangle-head.overheat{ opacity:.9; }

/* Shared insight card layout system — clean replacement v3
   Replaces the previous shared insight-grid block.
   Preserves direct-child drag/drop, equal card sizing, and responsive wrapping
   without fixed visual order fighting the saved DOM order. */
#insightGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}

#insightGrid > .insight-card{
  width:100%;
  min-width:0;
  min-height:0;
  box-sizing:border-box;
  align-self:stretch;
  display:flex;
  flex-direction:column;
}

/* Keep default render order from DOM; when user custom order is saved,
   DOM order becomes the only placement authority. */
#insightGrid[data-ig-custom] > [data-insight-key]{
  order:initial;
}

#insightGrid .ig-combined-card,
#insightGrid .mix-behavior-card,
#insightGrid .burn-subs-card{
  padding:0;
  overflow:hidden;
}

#insightGrid .ig-sub-section{
  display:block;
  min-width:0;
  position:relative;
  overflow:hidden;
  padding:10px 10px 9px;
}

#insightGrid .ig-sub-section:first-child{
  padding-top:12px;
}

#insightGrid .ig-sub-section:first-child::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:rgba(99,102,241,0.6);
  display:block;
}

#insightGrid .ig-sub-section + .ig-sub-section{
  border-top:1px solid var(--line, #cfd8e1);
}

#insightGrid .ig-sub-section[data-sub-hidden="true"]{
  display:none;
}

#insightGrid .ig-sub-section[data-sub-hidden="true"] + .ig-sub-section{
  padding-top:12px;
  border-top:none;
}

#insightGrid .ig-sub-section[data-sub-hidden="true"] + .ig-sub-section::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:rgba(99,102,241,0.6);
  display:block;
}

#insightGrid [data-insight-key]{
  cursor:grab;
}
#insightGrid [data-insight-key]:active{ cursor:grabbing; }
#insightGrid .ig-dragging{
  opacity:0.35;
  box-shadow:none;
  transform:scale(0.97);
}
#insightGrid .ig-drop-target{
  box-shadow:0 0 0 2px var(--timeline-fill, #6c879d), var(--shadow);
  outline:none;
}

#insightGrid .guidance-layout,
#insightGrid .mix-list,
#insightGrid .reallocation-top,
#insightGrid .evolution-card-body{
  min-width:0;
}

#insightGrid .guidance-layout{
  height:auto;
}
#insightGrid .guidance-track-card{
  margin-top:9px;
}
#insightGrid .mix-behavior-card .mix-list{
  height:auto;
  align-content:start;
}

#insightGrid .insight-card,
#insightGrid .forecast-driver-box,
#insightGrid .forecast-metric,
#insightGrid .advisor-item,
#insightGrid .guidance-tile,
#insightGrid .reallocation-top > *,
#insightGrid .advisor-item-head,
#insightGrid .advisor-head-center,
#insightGrid .advisor-change-chip-row,
#insightGrid .advisor-change-chip,
#insightGrid .tile-copy{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Keep state pills on one line with stable spacing */
#insightGrid .burn-state-badge,
#insightGrid .reallocation-badge,
#insightGrid .subscription-burden-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  justify-self:start;
  align-self:start;
  flex:0 0 auto;
  width:fit-content;
  max-width:100%;
  min-width:0;
  white-space:nowrap;
  line-height:1;
  padding:4px 10px;
}

#insightGrid .focus-head{
  margin-bottom:8px;
}
#insightGrid .focus-head h3{
  font-size:0.82rem;
  font-weight:700;
  letter-spacing:0.01em;
}

#insightGrid .insight-card{
  transition:transform 160ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
  will-change:transform;
}
#insightGrid .insight-card:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px var(--overlay-08);
  border-color:#cfd8e3;
}

@media (max-width: 1320px){
  #insightGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}
}

@media (max-width: 980px){
  #insightGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}
}

#insightGrid .burn-card{
  justify-content:flex-start;
}
#insightGrid .burn-card .focus-head{
  margin-bottom: 6px;
}
#insightGrid .burn-card .insight-main{
  font-size: 1.08rem;
  line-height: 1.14;
  margin-bottom: 10px;
}
#insightGrid .burn-triangle-wrap{
  margin: 6px 0 12px;
  gap: 10px;
}
#insightGrid .burn-triangle-rail{
  height: 92px;
}
#insightGrid .burn-triangle-shell,
#insightGrid .burn-triangle-fill,
#insightGrid .burn-triangle-ticks{
  clip-path: polygon(0 50%, 100% 12%, 100% 88%);
}
#insightGrid .burn-triangle-target{
  position:absolute;
  top:18px;
  bottom:18px;
  left:calc(var(--target-width, 50%) - 1px);
  width:2px;
  border-radius:999px;
  background:rgba(255,255,255,0.9);
  box-shadow:0 0 0 1px var(--slate-10);
}
#insightGrid .burn-state-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
#insightGrid .burn-state-copy{
  flex:1 1 auto;
  min-width:0;
}
#insightGrid .burn-state-title{
  font-size:0.86rem;
  font-weight:750;
  line-height:1.22;
  color:var(--text);
  margin:0 0 4px;
}
#insightGrid .burn-state-body{
  font-size:0.69rem;
  line-height:1.42;
  color:#6b7787;
  margin:0;
}
#insightGrid .burn-stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
#insightGrid .burn-stat{
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface-light);
  padding:9px 10px 8px;
  display:grid;
  gap:3px;
  transition: transform 140ms ease, border-color 160ms ease, background-color 160ms ease;
}
#insightGrid .burn-stat:hover{
  transform:translateY(-1px);
  border-color:#cfd8e3;
  background:#fbfcfe;
}
#insightGrid .burn-stat-label{
  font-size:0.64rem;
  color:#6b7787;
}
#insightGrid .burn-stat-value{
  font-size:0.9rem;
  font-weight:750;
  line-height:1.1;
  color:var(--text);
}
#insightGrid .burn-stat-sub{
  font-size:0.62rem;
  color:#8793a4;
  line-height:1.3;
}
#insightGrid .burn-interpretation{
  margin-top:10px;
  border:1px solid rgba(71,85,105,0.16);
  background:rgba(71,85,105,0.05);
  border-radius:10px;
  padding:8px 10px;
  font-size:0.68rem;
  line-height:1.4;
  color:#556274;
}
#insightGrid .burn-interpretation strong{
  color:var(--text);
}


@media (max-width: 900px){
  #insightGrid .burn-stats{
    grid-template-columns:1fr;
  }
}

/* v232 Spending Room Left upgrade */


/* v233 dashboard-wide language unification */
#insightGrid .logic-kicker{
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a8798;
  margin-bottom: 5px;
}
#insightGrid .logic-kicker.inline{
  margin-bottom: 0;
}


#insightGrid .forecast-summary-note,
#insightGrid .burn-interpretation{
  border-radius: 10px;
}


#insightGrid .guidance-card #insightGrid .guidance-card .guidance-hero{
  margin-top: 2px;
}


#insightGrid .forecast-driver-box .logic-kicker,
#insightGrid .burn-state-copy .logic-kicker,
#insightGrid .reallocation-top .logic-kicker{
  margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   CANONICAL TYPE SYSTEM  (replaces all prior scattered type overrides)
   ───────────────────────────────────────────────────────────────────────
   Six tokens, three roles, two font families.

   Scale:
     --t-hero    1.08rem  800  Numbers the user came to read (KPI values, insight-main)
     --t-title   0.86rem  700  Card headings and section titles
     --t-body    0.74rem  500  Body copy, table cells, guidance copy
     --t-label   0.69rem  600  Field labels, stat labels, tile labels
     --t-support 0.63rem  400  kpi-foot, footnotes, support sentences
     --t-eyebrow 0.60rem  700  Kickers, uppercase category labels

   Colour roles (re-use existing vars):
     Primary data  → var(--text)   var(--text)
     Labels        → var(--text)   slightly muted via weight
     Support       → var(--muted)  #627181
     Eyebrows      → #7a8798

   Mono family (Geist Mono) → all financial numbers
   UI family (Geist) → everything else
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --t-hero:    1.08rem;
  --t-title:   0.86rem;
  --t-body:    0.74rem;
  --t-label:   0.69rem;
  --t-support: 0.63rem;
  --t-eyebrow: 0.60rem;
}

/* ── KPI cards ─────────────────────────────────────────────────────── */
#summaryCards .kpi-label{
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
  text-transform: none;
  line-height: 1.2;
  margin-bottom: 3px;
}
#summaryCards .kpi-value{
  font-size: var(--t-hero);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  background: none;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  margin: 2px 0;
  padding: 0;
  min-height: 0;
}
#summaryCards .kpi-foot{
  font-size: var(--t-support);
  font-weight: 400;
  color: var(--muted);
  line-height: 1.3;
  margin-top: 3px;
  text-align: center;
}
#summaryCards .kpi-value.kpi-category{
  font-size: 0.88rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  word-break: break-word;
}

/* ── Insight grid — card titles ─────────────────────────────────────── */
#insightGrid .focus-head h3,
#insightGrid .insight-card h3{
  font-size: var(--t-title);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: 8px;
}

/* ── Insight grid — eyebrow labels ─────────────────────────────────── */
#insightGrid .logic-kicker,
#insightGrid .guidance-track-label,
#insightGrid .forecast-metric-label{
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #7a8798;
}

/* ── Insight grid — primary data values ─────────────────────────────── */
#insightGrid .insight-main,
#insightGrid .guidance-track-current,
#insightGrid .reallocation-hero,
#insightGrid .mix-value{
  font-size: var(--t-hero);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

/* ── Insight grid — body copy ────────────────────────────────────────── */
#insightGrid .guidance-hero{
  font-size: var(--t-body);
  font-weight: 700;
  line-height: 1.4;
  color: #223140;
}
#insightGrid .guidance-urgency{
  font-size: var(--t-support);
  font-weight: 400;
  color: var(--muted);
  line-height: 1.4;
}
#insightGrid .guidance-urgency strong{
  font-weight: 600;
  color: var(--text);
}
#insightGrid .guidance-tile .tile-label{
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7b8c;
}
#insightGrid .guidance-tile .tile-copy{
  font-size: var(--t-label);
  font-weight: 500;
  line-height: 1.45;
  color: #2d3a47;
}
#insightGrid .guidance-priority{
  font-size: var(--t-support);
  font-weight: 600;
  color: #607181;
}

/* ── Insight grid — support / detail text ───────────────────────────── */
#insightGrid .forecast-metric small,
#insightGrid .guidance-track-note,
#insightGrid .insight-detail{
  font-size: var(--t-support);
  font-weight: 400;
  line-height: 1.35;
  color: #6d7888;
}
#insightGrid .insight-detail{
  font-size: var(--t-support);
}

/* ── Insight grid — body-level list items ───────────────────────────── */


#insightGrid .mix-label{
  font-size: var(--t-label);
  font-weight: 600;
}
#insightGrid .mix-value small{
  font-size: var(--t-support);
  color: #6d7888;
}

/* ── Insight grid — strong values in action blocks ──────────────────── */

#insightGrid .forecast-summary-note strong{
  font-size: var(--t-label);
  font-weight: 700;
  line-height: 1.35;
}


/* ── Planner cards ────────────────────────────────────────────────────── */
.planner-card h3{
  font-size: var(--t-title);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.planner-sub{
  font-size: var(--t-support);
  font-weight: 400;
  color: var(--muted);
  line-height: 1.4;
}

/* ── Subscription cards ──────────────────────────────────────────────── */

.subscriptions-table-title{
  font-size: var(--t-title);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.subscriptions-table-eyebrow,
.subscription-stat-label{
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.subscription-stat-value{
  font-size: var(--t-hero);
  font-weight: 800;
  letter-spacing: -0.025em;
}
.subscriptions-table-copy,
.subscription-stat-support,
.subscription-note{
  font-size: var(--t-support);
  font-weight: 400;
}

/* ── Section headers (income/savings/expenses tabs) ──────────────────── */

.section-header h3,
.focus-head h3{
  font-size: var(--t-title);
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* ── Responsive: scale hero down on narrower screens ─────────────────── */
@media (max-width: 1200px){
  :root{
    --t-hero: 1.0rem;
    --t-title: 0.84rem;
  }
}
@media (max-width: 1024px){
  :root{
    --t-hero: 0.96rem;
    --t-title: 0.82rem;
  }
}

#insightGrid .forecast-driver-row,
#insightGrid .mix-row,
#insightGrid .forecast-metric,
#insightGrid .advisor-item{
  border-radius:10px;
}


#insightGrid .forecast-metric{
  background:rgba(248,250,252,0.9);
  border:1px solid var(--slate-18);
  padding:8px 9px;
}

#insightGrid .forecast-driver-box,
#insightGrid .guidance-track-card{
  background:var(--white-62);
  border:1px solid var(--slate-18);
  border-radius:12px;
}

#insightGrid .guidance-track-card{
  padding:10px 12px 0;
  margin-top:12px;
}

#insightGrid .mix-row{
  grid-template-columns:minmax(78px,1fr) 1fr auto;
  gap:10px;
  padding:6px 2px;
}
#insightGrid .mix-label{
  font-weight:700;
}
#insightGrid .mix-value{
  font-size:0.92rem;
}
#insightGrid .mix-value small{
  font-size:0.70rem;
  color:#6d7888;
  font-weight:700;
}


#insightGrid .forecast-card .insight-main,
#insightGrid .reallocation-card .reallocation-hero{
  margin-bottom:6px;
}

#insightGrid .insight-detail{
  display:flex;
  justify-content:space-between;
  gap:10px;
}


#insightGrid .forecast-summary-note strong{
  font-size:0.72rem;
  line-height:1.35;
}

#insightGrid .guidance-track-bar,
#insightGrid .micro-bar{
  height:9px;
}

@media (max-width: 1200px){
  #insightGrid .insight-main,
  #insightGrid .guidance-track-current,
  #insightGrid .reallocation-hero,
  #insightGrid .mix-value{
    font-size:1rem;
  }
}

/* v256 state-tinted enhancement for Burn Rate + Spending Room Left */
#insightGrid .burn-card{
  position: relative;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

#insightGrid .burn-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  border-radius:10px 10px 0 0;
  opacity:0;
  transition: opacity 180ms ease, background-color 180ms ease;
}

#insightGrid .burn-card:has(.burn-state-badge.state-healthy){
  background: linear-gradient(180deg, rgba(22,163,74,0.055) 0%, rgba(255,255,255,0.96) 34%);
  border-color: rgba(22,163,74,0.16);
}
#insightGrid .burn-card:has(.burn-state-badge.state-healthy)::before{
  background:var(--green-600);
  opacity:.5;
}

#insightGrid .burn-card:has(.burn-state-badge.state-stable){
  background: linear-gradient(180deg, rgba(71,85,105,0.055) 0%, rgba(255,255,255,0.96) 34%);
  border-color: rgba(71,85,105,0.16);
}
#insightGrid .burn-card:has(.burn-state-badge.state-stable)::before{
  background:var(--purple);
  opacity:.48;
}

#insightGrid .burn-card:has(.burn-state-badge.state-watch){
  background: linear-gradient(180deg, rgba(245,158,11,0.07) 0%, rgba(255,255,255,0.965) 36%);
  border-color: rgba(245,158,11,0.18);
}
#insightGrid .burn-card:has(.burn-state-badge.state-watch)::before{
  background:var(--amber);
  opacity:.52;
}

#insightGrid .burn-card:has(.burn-state-badge.state-pressure){
  background: linear-gradient(180deg, rgba(249,115,22,0.075) 0%, rgba(255,255,255,0.97) 36%);
  border-color: rgba(249,115,22,0.2);
}
#insightGrid .burn-card:has(.burn-state-badge.state-pressure)::before{
  background:#f97316;
  opacity:.56;
}

#insightGrid .burn-card:has(.burn-state-badge.state-critical){
  background: linear-gradient(180deg, rgba(220,38,38,0.08) 0%, rgba(255,255,255,0.972) 38%);
  border-color: rgba(220,38,38,0.2);
}
#insightGrid .burn-card:has(.burn-state-badge.state-critical)::before{
  background:var(--red-600);
  opacity:.58;
}

#insightGrid .burn-card:has(.burn-state-badge.state-closed){
  background: linear-gradient(180deg, rgba(100,116,139,0.07) 0%, rgba(255,255,255,0.97) 36%);
  border-color: var(--slate-22);
}
#insightGrid .burn-card:has(.burn-state-badge.state-closed)::before{
  background:var(--purple);
  opacity:.48;
}

#insightGrid .burn-card,
#insightGrid .subscription-burden-card,
#insightGrid .evolution-card,
#insightGrid .reallocation-card{
  align-self: stretch;
  height: 100%;
  min-height: 0;
}

#insightGrid .burn-card,
#insightGrid .subscription-burden-card{
  display: flex;
  flex-direction: column;
}

.subscription-burden-card{
  position:relative;
  overflow:hidden;
  border-color: rgba(71,85,105,0.14);
  background: linear-gradient(180deg, rgba(238,242,255,0.84) 0%, var(--white-98) 34%, rgba(255,255,255,1) 100%);
}
.subscription-burden-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  border-radius:10px 10px 0 0;
  background: linear-gradient(90deg, #536879 0%, #8ea2b3 100%);
  opacity:.5;
}
.subscription-burden-top{
  display:grid;
  gap:8px;
}
.subscription-burden-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}
.subscription-burden-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:max-content;
  padding:4px 9px;
  border-radius:999px;
  font-size:0.67rem;
  font-weight:700;
  border:1px solid rgba(37,99,235,0.18);
  background:rgba(37,99,235,0.08);
  color:var(--accent-text);
}
.subscription-burden-badge.state-healthy{
  background:var(--surface-success-soft);
  border-color:#86efac;
  color:var(--green-900);
}
.subscription-burden-badge.state-stable{
  background:#eef2ff;
  border-color:#e2e8f0;
  color:var(--accent-text);
}
.subscription-burden-badge.state-watch{
  background:var(--surface-warn-soft);
  border-color:#fdba74;
  color:var(--amber-warn);
}
.subscription-burden-badge.state-pressure{
  background:#ffedd5;
  border-color:#fb923c;
  color:#c2410c;
}
.subscription-burden-badge.state-critical{
  background:var(--surface-error-soft);
  border-color:#fca5a5;
  color:var(--red-700);
}
.subscription-burden-badge.state-closed{
  background:var(--surface-light);
  border-color:var(--planned-border);
  color:var(--accent-text);
}
.subscription-burden-main{
  font-size:1.02rem;
  font-weight:780;
  line-height:1.2;
  letter-spacing:-0.02em;
  color:var(--text);
}
.subscription-burden-sub{
  font-size:0.69rem;
  line-height:1.42;
  color:#6b7787;
}
.subscription-burden-metrics{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:8px;
}
.subscription-burden-metric{
  border:1px solid #e6ebf1;
  border-radius:10px;
  background:var(--white);
  padding:8px;
  min-width:0;
}
.subscription-burden-metric span{
  display:block;
  font-size:0.61rem;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--accent-text);
  margin-bottom:4px;
}
.subscription-burden-metric strong{
  display:block;
  font-size:0.93rem;
  line-height:1.15;
  color:var(--text);
}
.subscription-burden-metric small{
  display:block;
  margin-top:4px;
  font-size:0.65rem;
  line-height:1.35;
  color:#6b7787;
}
.subscription-burden-footer{
  margin-top:auto;
  border-top:1px dashed rgba(148,163,184,0.3);
  padding-top:8px;
  font-size:0.7rem;
  color:var(--accent-text);
}
@media (max-width: 1150px){
  .subscription-burden-metrics{
    grid-template-columns:1fr;
  }
}

@media (max-width: 1150px){
  #insightGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}
  #insightGrid[data-ig-custom]{
    grid-template-areas: none;
  }
  .subscription-burden-metrics{
    grid-template-columns: 1fr;
  }
}

/* Overview hero card enhancements */
.overview-chart-card,
.overview-allocation-card{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(71,85,105,0.14);
  border-radius: 14px;
  box-shadow: 0 10px 28px var(--overlay-08), 0 2px 8px rgba(15,23,42,0.04);
}
.overview-chart-card{
  background: linear-gradient(180deg, rgba(238,242,255,0.92) 0%, var(--white-98) 30%, rgba(255,255,255,1) 100%);
}
.overview-allocation-card{
  background: linear-gradient(180deg, rgba(245,248,250,0.98) 0%, rgba(252,253,253,0.98) 34%, rgba(251,252,253,1) 100%);
}
.overview-chart-card::before,
.overview-allocation-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
}
.overview-chart-card::before{
  background: linear-gradient(90deg, #536879 0%, #8ea2b3 100%);
}
.overview-allocation-card::before{
  background: linear-gradient(90deg, #536879 0%, #9ab0bf 100%);
}
.overview-chart-card::after,
.overview-allocation-card::after{
  content:'';
  position:absolute;
  inset:auto -40px -60px auto;
  width:180px;
  height:180px;
  border-radius:50%;
  pointer-events:none;
  opacity:.45;
}
.overview-chart-card::after{
  background: radial-gradient(circle at center, var(--slate-10) 0%, rgba(71,85,105,0.0) 68%);
}
.overview-allocation-card::after{
  background: radial-gradient(circle at center, rgba(111,135,154,0.10) 0%, rgba(111,135,154,0.0) 68%);
}
.overview-chart-card .focus-head,
.overview-allocation-card .section-header{
  position:relative;
  z-index:1;

  padding-top: 12px;
}
.overview-chart-card .focus-head h3,
.overview-allocation-card .section-header h3{
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.overview-chart-card .focus-head::after,
.overview-allocation-card .section-header::after{
  content:none;
  display:none;
}
.overview-chart-card .chart-wrap,
.overview-allocation-card #budgetOverview{
  position:relative;
  z-index:1;
}


.overview-allocation-card .alloc-progress-track{
  background: var(--slate-22);
  box-shadow: inset 0 1px 2px rgba(15,23,42,0.05);
}
.overview-allocation-card .alloc-progress-fill{
  box-shadow: 0 0 0 1px rgba(255,255,255,0.16) inset;
}


/* Phase 3A canonical state system */
.state-healthy{ --state-accent:var(--green-900); --state-soft:var(--surface-success-soft); }
.state-stable{ --state-accent:var(--purple); --state-soft:#eef2ff; }
.state-watch{ --state-accent:var(--amber-warn); --state-soft:var(--surface-warn-soft); }
.state-pressure{ --state-accent:#c2410c; --state-soft:var(--surface-warn-soft); }
.state-critical{ --state-accent:var(--red-700); --state-soft:var(--surface-error-soft); }
.state-closed{ --state-accent:var(--purple); --state-soft:var(--surface-light); }

.burn-state-badge,
.reallocation-badge{
  background: var(--state-soft);
  color: var(--state-accent);
  border-color: color-mix(in srgb, var(--state-accent) 20%, white);
}

/* Phase 3C planner cards aligned to dashboard grid system */
.planner-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
  margin-top: 10px;
}
.planner-card{
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 0;
  min-width: 0;
  min-height: 100%;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
}
.planner-card::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  pointer-events:none;
}

/* ── Category Pace Tile (.cpace-) — shell reused by the Smart Budget Guidance budget-watch bars ── */
.cpace-tile{
  border:1px solid var(--line);
  border-radius:10px;
  padding:7px 10px;
  background:var(--panel-2);
  display:grid;
  gap:3px;
}
.cpace-tile.cpace-over{
  background:rgba(196,112,93,0.05);
  border-color:rgba(196,112,93,0.18);
}
.cpace-tile.cpace-under{
  background:rgba(31,106,75,0.05);
  border-color:rgba(31,106,75,0.15);
}
.cpace-tile.cpace-empty{ opacity:0.65; }
.cpace-eyebrow{
  font-size:0.58rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--muted);
  margin-bottom:3px;
}
.cpace-cat-name{
  font-weight:500;
  text-transform:none;
  letter-spacing:0;
  color:var(--accent-text);
}
.cpace-row{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:6px;
  font-size:0.64rem;
  color:var(--muted);
  min-height:18px;
}
.cpace-val{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:1px;
}
.cpace-row strong{
  font-size:0.72rem;
  font-weight:700;
  font-family:"Geist Mono",monospace;
  color:var(--accent-text);
  white-space:nowrap;
}
.cpace-pos{ color:var(--tone-good-text); }
.cpace-neg{ color:var(--tone-bad-text); }
.cpace-delta{
  font-size:0.58rem;
  color:var(--muted);
  white-space:nowrap;
  font-family:"Geist Mono",monospace;
}
.cpace-sub{
  font-size:0.58rem;
  color:var(--muted);
  font-weight:400;
}
.cpace-narration{
  margin-top:4px;
  font-size:0.64rem;
  color:var(--accent-text);
  line-height:1.4;
  padding:5px 7px;
  border-radius:6px;
  background:rgba(65,83,100,0.05);
  border-left:2px solid var(--timeline-fill);
}
.cpace-note{
  font-size:0.62rem;
  color:var(--muted);
  font-style:italic;
  margin-top:3px;
}
.cpace-tile.cpace-simulator{
  background:var(--panel-2);
  border-color:var(--line);
}
.cpace-tile.cpace-guidance{
  background:rgba(65,83,100,0.04);
  border-color:rgba(65,83,100,0.10);
}


#planningToolsWrap .planner-grid,
.planner-grid{
  align-items: stretch;
}

#planningToolsWrap .planner-card,
.planner-grid .planner-card{
  align-self: stretch;
  height: 100%;
  min-height: 0;
}

.planner-card h3{
  margin:0;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--text);
}
.planner-sub{
  font-size: 0.68rem;
  line-height: 1.4;
  margin-bottom: 10px;
}


@media (max-width: 1150px){
  .planner-grid{
    grid-template-columns: 1fr;
  }
}

    
    
    .goal-keyword-chip{border:1px solid rgba(71,85,105,0.22);background:rgba(71,85,105,0.08);color:var(--purple);border-radius:999px;padding:4px 8px;font:inherit;font-size:0.66rem;display:inline-flex;align-items:center;gap:6px;cursor:pointer;}
    .goal-keyword-chip span{font-size:0.78rem;line-height:1;}
    .goal-keyword-chip:hover{background:rgba(71,85,105,0.14);}
    .goal-keyword-empty{font-size:0.66rem;color:var(--muted);}
    


.category-info{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  margin-left:6px;
  font-size:10px;
  font-weight:600;
  border-radius:50%;
  background:#e5e7eb;
  color:#374151;
  cursor:help;
}

/* hide helper text but keep for logic */
.category-cell small{
  display:none;
}


.section-subtotal.all-fixed-done{
  color:var(--green-700);
  border-color: rgba(21,128,61,0.22);
  background:var(--surface-success-soft);
}


.title {
  padding-inline: 2px;
}

.view-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}
.customize-cards-anchor {
  margin-left: auto;
}
.summary {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.grid-overview,
.insight-grid,
.planner-grid{
  width: 100%;
  min-width: 0;
}

.subscriptions-table-wrap{
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 1280px) {
  .app {
    grid-template-columns: 196px minmax(0, 1fr);
  }
  .main {
    padding-inline: 12px;
  }
  .summary {
    grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  }
}
@media (max-width: 980px) {
  .app {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 12px 10px;
  }
  .month-list {
    flex: initial;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
  }
  .month-btn {
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .side-actions {
    margin-top: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  .side-actions button {
    width: auto;
  }
  .main {
    padding: 10px 10px 16px;
  }
}
@media (max-width: 760px) {
  .summary {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
  
  .customize-cards-anchor {
    margin-left: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   USER GUIDE — v1215
   Reuses cbm-overlay / cbm-modal layout wrapper.
   ═══════════════════════════════════════════════════════════════ */

/* ── User Guide button ── */


/* ── Guide modal sizing ── */
.guide-modal {
  max-width: 520px;
  /* Fixed height so the modal never resizes when steps expand/collapse.
     The header, progress bar and footer are flex-shrink:0;
     guide-body fills the remainder and scrolls internally. */
  height: min(86vh, 640px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.guide-header { flex-shrink: 0; }
.guide-header-text { flex: 1; min-width: 0; }
.guide-progress-line { margin-top: 4px; }

/* ── Progress bar ── */
.guide-progress-bar-wrap {
  height: 3px;
  background: var(--line, rgba(100,116,139,0.15));
  flex-shrink: 0;
}
.guide-progress-bar {
  height: 100%;
  background: var(--emerald);
  transition: width 350ms ease;
  border-radius: 0 2px 2px 0;
}

/* ── Scrollable step list ── */
.guide-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Individual step ── */
.guide-step {
  border-radius: 10px;
  border: 1px solid var(--line, rgba(100,116,139,0.15));
  overflow: hidden;
  transition: border-color 150ms;
}
.guide-step.step-done { opacity: 0.65; }
.guide-step.step-open { border-color: rgba(99,102,241,0.35); }
/* Done + open: keep the dim but show the border and body */
.guide-step.step-done.step-open { opacity: 0.85; border-color: rgba(99,102,241,0.25); }

.guide-step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
  background: transparent;
  transition: background 110ms;
}
.guide-step-head:hover { background: var(--panel-2, #f8fafc); }

.guide-step-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--line, rgba(100,116,139,0.3));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--muted, #64748b);
  transition: background 200ms, border-color 200ms, color 200ms;
}
.guide-step.step-done .guide-step-num {
  background: var(--emerald);
  border-color: var(--emerald);
  color: var(--white);
  font-size: 0.72rem;
}
.guide-step.step-open .guide-step-num {
  background: rgba(99,102,241,0.1);
  border-color: var(--indigo-700);
  color: var(--indigo-600);
}

.guide-step-label {
  flex: 1;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--accent-text, #0f172a);
}
.guide-step.step-done .guide-step-label { color: var(--muted, #64748b); }
.guide-step-chevron {
  font-size: 0.62rem;
  color: var(--muted, #64748b);
  transition: transform 200ms;
}
.guide-step.step-open .guide-step-chevron { transform: rotate(180deg); }

/* ── Expanded step body ── */
.guide-step-body {
  display: none;
  padding: 0 12px 12px 44px;
  flex-direction: column;
  gap: 10px;
}
.guide-step.step-open .guide-step-body { display: flex; }
.guide-step.step-done.step-open .guide-step-body { display: flex; }
.guide-step-desc {
  font-size: 0.72rem;
  color: var(--muted, #64748b);
  line-height: 1.55;
}
.guide-step-desc strong { color: var(--accent-text, #0f172a); font-weight: 700; }

/* ── Tooltip-style highlight box (for Non-Cash Benefits, etc.) ── */
.guide-info-box {
  padding: 8px 11px;
  border-radius: 8px;
  background: rgba(99,102,241,0.06);
  border: 1px solid rgba(99,102,241,0.18);
  font-size: 0.68rem;
  color: var(--accent-text, #0f172a);
  line-height: 1.5;
}
.guide-info-box-label {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--indigo-600);
  margin-bottom: 4px;
}

/* ── Action button inside step ── */
.guide-step-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.guide-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: 7px;
  border: none;
  background: var(--purple);
  color: var(--white);
  font: inherit;
  font-size: 0.70rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 110ms;
}
.guide-action-btn:hover { background: #4c12c4; }
.guide-action-btn.secondary {
  background: transparent;
  border: 1px solid var(--line, rgba(100,116,139,0.2));
  color: var(--muted, #64748b);
}
.guide-action-btn.secondary:hover { background: var(--panel-2, #f8fafc); color: var(--accent-text, #0f172a); }

/* ── Mark-done manual link ── */
.guide-mark-done {
  font-size: 0.64rem;
  color: var(--muted, #64748b);
  text-decoration: underline;
  text-decoration-style: dotted;
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  padding: 0;
}
.guide-mark-done:hover { color: var(--accent-text, #0f172a); }
/* Subtle note shown on auto-completed steps */
.guide-auto-done-note {
  font-size: 0.62rem;
  color: var(--emerald);
  font-weight: 600;
}

/* ── All-done state ── */
.guide-all-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 18px;
  text-align: center;
}
.guide-all-done-emoji { font-size: 2.2rem; }
.guide-all-done-title { font-size: 0.9rem; font-weight: 800; color: var(--accent-text, #0f172a); }
.guide-all-done-sub { font-size: 0.72rem; color: var(--muted, #64748b); }

.guide-footer-note { font-size: 0.65rem; color: var(--muted, #64748b); }

@media (max-width: 600px) {
  .guide-modal { max-width: 100%; height: min(92vh, 640px); }
  .guide-step-body { padding-left: 12px; }
}

/* === overview-toprow-replacement-v3 === */
/* Clean replacement: Overview top row only */
.grid-overview{
  display:grid;
  grid-template-columns:minmax(0,0.94fr) minmax(0,1.06fr);
  gap:12px;
  align-items:stretch;
}
.grid-overview > .overview-chart-card,
.grid-overview > .overview-allocation-card{
  min-width:0;
  max-width:100%;
  height:100%;
}
.overview-chart-card,
.overview-allocation-card{
  margin-top:0;
  min-width:0;
}
/* Current Budget Distribution — canonical responsive shell layout */
.overview-chart-card{
  padding:0;
  display:grid;
  grid-template-rows:auto auto auto;
  gap:0;
  min-height:0;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(99,102,241,0.035) 0%, rgba(255,255,255,0.96) 100%), var(--panel);
}
.overview-chart-card .focus-head{
  margin:0;
  padding:14px 18px 12px;
  border-bottom:1px solid rgba(111,135,154,0.14);
}
.overview-chart-card .distribution-stage{
  min-width:0;
  height:clamp(300px, 41vh, 332px);
  display:grid;
  align-items:center;
  padding:6px 18px 4px;
  overflow:hidden;
}
.overview-chart-card .chart-wrap.compact-below{
  height:100%;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(230px,300px);
  gap:22px;
  align-items:center;
  min-width:0;
}
.overview-chart-card .distribution-chart-tile{
  min-width:0;
  min-height:0;
  height:100%;
  display:grid;
  place-items:center;
  padding:0;
  overflow:hidden;
}
.overview-chart-card #spendingPie{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  margin:0 auto;
  cursor:pointer;
  filter:drop-shadow(0 22px 26px rgba(15,23,42,0.12));
}
.overview-chart-card .distribution-legend-tile{
  min-width:0;
  width:100%;
  max-width:300px;
  max-height:100%;
  justify-self:end;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(4px,0.7vh,6px);
  align-content:center;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:hidden;
}
.overview-chart-card .distribution-legend-tile .chart-legend-item{
  display:grid;
  grid-template-columns:7px minmax(0,1fr) auto;
  grid-template-areas:"swatch label value";
  column-gap:7px;
  align-items:center;
  min-width:0;
  padding:clamp(5px,0.75vh,6px) 8px;
  min-height:clamp(28px,3.8vh,33px);
  border:1px solid rgba(111,135,154,0.11);
  border-radius:9px;
  background:rgba(255,255,255,0.64);
  box-shadow:0 1px 0 rgba(255,255,255,0.75), 0 4px 10px rgba(15,23,42,0.02);
}
.overview-chart-card .distribution-legend-tile .chart-legend-item:hover,
.overview-chart-card .distribution-legend-tile .chart-legend-item.is-active{
  background:rgba(255,255,255,0.94);
  border-color:rgba(99,102,241,0.20);
  box-shadow:0 1px 0 rgba(255,255,255,0.80), 0 8px 18px var(--overlay-06);
  transform:none;
}
.overview-chart-card .distribution-legend-tile .chart-swatch{
  grid-area:swatch;
  width:6px;
  height:clamp(17px,2.6vh,20px);
  border-radius:999px;
  border:1px solid rgba(15,23,42,0.05);
  align-self:center;
}
.overview-chart-card .distribution-legend-tile .chart-legend-label{
  grid-area:label;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:clamp(0.58rem,0.56vw,0.64rem);
  font-weight:850;
  color:var(--accent-text);
  line-height:1.1;
}
.overview-chart-card .distribution-legend-tile .chart-legend-value{
  grid-area:value;
  display:flex;
  justify-content:flex-end;
  align-items:baseline;
  gap:5px;
  min-width:0;
  white-space:nowrap;
  font-family:var(--font-mono);
  line-height:1.05;
}
.overview-chart-card .distribution-legend-tile .amount{
  min-width:0;
  text-align:right;
  font-size:clamp(0.56rem,0.54vw,0.61rem);
  font-weight:850;
}
.overview-chart-card .distribution-legend-tile .percent{
  min-width:0;
  text-align:right;
  font-size:clamp(0.50rem,0.50vw,0.55rem);
  font-weight:760;
  color:var(--muted);
}
.overview-chart-card .trends-card-inline{
  margin:0 14px 14px;
}

/* Budget Allocation card shell — canonical clipped accent + edge-aligned header. */
.overview-allocation-card{
  position:relative;
  display:grid;
  align-content:start;
  padding:0;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(99,102,241,0.045) 0%, rgba(99,102,241,0.012) 100%), var(--panel);
  border-color:rgba(99,102,241,0.18);
}
.overview-allocation-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(90deg, var(--indigo-700) 0%, #8b5cf6 100%);
}
.overview-allocation-card .section-details{
  display:grid;
  gap:0;
  height:100%;
  min-width:0;
}
.overview-allocation-card .allocation-section{
  min-width:0;
}
.overview-allocation-card .allocation-section > .section-header{
  pointer-events:none;
  position:relative;
  z-index:1;
  min-height:0;
  width:100%;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0;
  padding:14px 18px 12px;
  border:0;
  border-bottom:1px solid rgba(111,135,154,0.16);
  border-radius:0;
  background:linear-gradient(180deg, rgba(245,248,250,0.98) 0%, rgba(239,244,247,0.98) 100%);
}
.overview-allocation-card .allocation-section > .section-header::-webkit-details-marker{
  display:none;
}
.overview-allocation-card .allocation-section > .section-header::before,
.overview-allocation-card .allocation-section > .section-header::after{
  content:none;
}
.overview-allocation-card .allocation-section > .section-header .focus-head{
  display:flex;
  align-items:center;
  min-height:0;
  padding:0;
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.overview-allocation-card .allocation-section > .section-header h3{
  margin:0;
  font-size:0.86rem;
  font-weight:850;
  line-height:1.2;
  letter-spacing:-0.01em;
  color:var(--accent-text);
}
.overview-allocation-card #budgetOverview{
  min-width:0;
  padding:12px 18px 16px;
}
.overview-allocation-card .alloc-grid,
.overview-allocation-card .alloc-focus-wrap{
  display:grid;
  gap:8px;
}
@media (max-width: 760px){
  .overview-allocation-card .allocation-section > .section-header{
    padding:13px 14px 11px;
  }
  .overview-allocation-card #budgetOverview{
    padding:10px 12px 14px;
  }
}
@media (max-width: 1380px){
  .grid-overview{grid-template-columns:1fr;}
  .grid-overview > .overview-chart-card,
  .grid-overview > .overview-allocation-card{height:auto;}
}
@media (max-width: 760px){
  .overview-chart-card{min-height:auto;grid-template-rows:auto auto auto;}
  .overview-chart-card .distribution-stage{min-height:0;padding:12px 12px 16px;overflow:visible;}
  .overview-chart-card .chart-wrap.compact-below{grid-template-columns:1fr;gap:12px;}
  .overview-chart-card .distribution-chart-tile{min-height:260px;}
  .overview-chart-card .distribution-legend-tile{max-width:none;justify-self:stretch;overflow:visible;}
}

/* === expenses-popup-canonical-v8 === */
/* Canonical expenses popup layout + scrolling */
.expense-group-modal-centered{
  --expense-top-row-h: clamp(280px, 42vh, 420px);
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  width:min(1180px, calc(100vw - 32px));
  max-height:calc(100vh - 32px);
  overflow:hidden;
}
.expense-group-modal-centered .expense-modal-body{
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  padding-right:16px;
}
.expense-group-modal-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:var(--expense-top-row-h) auto;
  grid-template-areas:
    "subcats log"
    "selected selected";
  gap:16px;
  align-items:start;
  min-height:0;
}
.expense-modal-left,
.expense-modal-right{
  display:contents;
  min-height:0;
}
.expense-left-panel-card{
  grid-area:subcats;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  height:var(--expense-top-row-h);
  min-height:0;
  overflow:hidden;
}
.expense-log-card-large{
  grid-area:log;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  height:var(--expense-top-row-h);
  min-height:0;
  overflow:hidden;
}
.expense-selected-editor{
  grid-area:selected;
  min-width:0;
  overflow:visible;
}
.expense-subcat-list,
.expense-log-card-large .expense-log-list{
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
}
@media (max-width: 980px){
  .expense-group-modal-centered{
    width:min(100vw - 20px, 980px);
  }
  .expense-group-modal-split{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    grid-template-areas:
      "subcats"
      "log"
      "selected";
  }
  .expense-left-panel-card,
  .expense-log-card-large{
    height:auto;
    min-height:260px;
  }
  .expense-subcat-list,
  .expense-log-card-large .expense-log-list{
    max-height:min(42vh, 360px);
  }
}
@media (max-width: 760px){
  .expense-group-modal-centered{
    width:100%;
    max-height:100vh;
    border-radius:0;
  }
  .expense-modal-overlay{
    padding:0;
    align-items:stretch;
  }
}

/* === category-trends-action-alignment-clean-fix === */
#categoryTrends.trends-card-inline .trends-head {
  display: block;
  align-items: initial;
  justify-content: initial;
  flex-wrap: initial;
  gap: 0;
  margin: 0 0 8px 0;
}

#categoryTrends.trends-card-inline .focus-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 28px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#categoryTrends.trends-card-inline .focus-head > div:first-child {
  display: flex;
  align-items: center;
  min-height: 28px;
  min-width: 0;
}

#categoryTrends.trends-card-inline .focus-head h3,
#categoryTrends.trends-card-inline .focus-head .label-with-inline-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  margin: 0;
  line-height: 1;
}

#categoryTrends.trends-card-inline .focus-head-right {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  align-self: center;
  height: 28px;
  margin: 0;
  padding: 0;
}

#categoryTrends.trends-card-inline .trends-open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  height: 24px;
  min-height: 24px;
  margin: 0;
  padding: 0 10px;
  line-height: 1;
  transform: none;
}

/* === canonical-3d-panel-system === */
/* ══════════════════════════════════════════════════════
   CANONICAL 3D PANEL SYSTEM
   Reusable source for elevated dashboard cards.
   Apply .ui-3d-panel to any card that should use this treatment.
   ══════════════════════════════════════════════════════ */

.ui-3d-panel {
  --ui3d-top-a: #65a9ff;
  --ui3d-top-b: #7567ff;
  --ui3d-top-c: #274a78;
  --ui3d-border: rgba(74, 122, 178, 0.36);
  --ui3d-border-strong: rgba(74, 122, 178, 0.48);
  --ui3d-glow: rgba(83, 158, 240, 0.18);
  --ui3d-shadow: rgba(30, 64, 120, 0.16);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--ui3d-border);
  border-radius: 16px;
  background:
    radial-gradient(circle at 88% -16%, rgba(101,169,255,0.24) 0%, rgba(101,169,255,0.00) 38%),
    linear-gradient(145deg, var(--white-98) 0%, rgba(241,248,255,0.94) 42%, rgba(222,237,255,0.84) 100%);
  box-shadow:
    0 18px 36px var(--ui3d-shadow),
    0 7px 16px rgba(30, 64, 120, 0.09),
    inset 0 1px 0 var(--white-98),
    inset 0 -1px 0 var(--slate-glass);
}

.ui-3d-panel::before {
  content: "";
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ui3d-top-a) 0%, var(--ui3d-top-b) 54%, var(--ui3d-top-c) 100%);
  pointer-events: none;
}

.ui-3d-panel::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -64px;
  right: -76px;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: radial-gradient(circle, var(--ui3d-glow) 0%, rgba(83,158,240,0.00) 68%);
  pointer-events: none;
}

.ui-3d-panel > * {
  position: relative;
  z-index: 1;
}

/* Shared header treatment for cards using the 3D system */
.ui-3d-panel .focus-head,
.ui-3d-panel .section-header {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.76) 0%, rgba(229,241,255,0.48) 100%);
  border-bottom-color: rgba(74,122,178,0.20);
}

.ui-3d-panel h3 {
  color: #263a52;
  text-shadow: 0 1px 0 var(--white-86);
}

/* Budget overview adoption */
.budget-overview-panel.overview-chart-card,
.budget-overview-panel.overview-allocation-card {
  border-color: var(--ui3d-border);
}

.budget-overview-panel.overview-chart-card .focus-head {
  padding: 15px 18px 13px;
}

.budget-overview-panel.overview-allocation-card .allocation-section > .section-header {
  padding: 15px 18px 13px;
  border-bottom: 1px solid rgba(74,122,178,0.20);
}

.budget-overview-panel.overview-allocation-card::before {
  background: linear-gradient(90deg, var(--ui3d-top-a) 0%, var(--ui3d-top-b) 54%, var(--ui3d-top-c) 100%);
}

/* Give inner content a slight glass lift so the 3D card feel carries through. */
.budget-overview-panel #budgetOverview .alloc-focus-row{
  background: var(--white-72);
  border-color: rgba(74,122,178,0.16);
  box-shadow:
    0 1px 0 var(--white-82),
    0 6px 14px rgba(30,64,120,0.05);
}

/* === canonical-3d-kpi-adoption === */
/* ══════════════════════════════════════════════════════
   KPI CARDS — CANONICAL 3D ADOPTION
   Uses the shared .ui-3d-panel source. KPI-specific rules only define
   sizing and semantic color variables.
   ══════════════════════════════════════════════════════ */

#summaryCards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin-top: -2px;
}

#summaryCards .card.ui-3d-kpi {
  --ui3d-top-a: #8fa1b8;
  --ui3d-top-b: #5e17eb;
  --ui3d-top-c: #5e17eb;
  --ui3d-border: rgba(94, 23, 235, 0.28);
  --ui3d-shadow: rgba(94, 23, 235, 0.12);
  --ui3d-glow: rgba(94, 23, 235, 0.10);

  min-height: 68px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background:
    radial-gradient(circle at 88% -22%, var(--ui3d-glow) 0%, var(--white-0) 42%),
    linear-gradient(145deg, var(--white-98) 0%, rgba(247,250,252,0.95) 45%, rgba(235,241,248,0.88) 100%);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

#summaryCards .card.ui-3d-kpi:hover {
  transform: translateY(-1px);
  box-shadow:
    0 18px 34px var(--ui3d-shadow),
    0 7px 16px rgba(30,64,120,0.09),
    inset 0 1px 0 var(--white-98),
    inset 0 -1px 0 var(--slate-glass);
}

#summaryCards .card.ui-3d-kpi::before {
  height: 3px;
}

#summaryCards .card.ui-3d-kpi::after {
  top: -76px;
  right: -82px;
  width: 180px;
  height: 180px;
}

/* Preserve current semantic KPI coloring */
#summaryCards .card.ui-3d-kpi.warn-80 {
  --ui3d-top-a: #fbbf24;
  --ui3d-top-b: #f59e0b;
  --ui3d-top-c: #b45309;
  --ui3d-border: rgba(245, 158, 11, 0.34);
  --ui3d-shadow: rgba(180, 83, 9, 0.12);
  --ui3d-glow: rgba(245, 158, 11, 0.16);
}

#summaryCards .card.ui-3d-kpi.warn-100,
#summaryCards .card.ui-3d-kpi.negative-budget {
  --ui3d-top-a: #fb7185;
  --ui3d-top-b: #ef4444;
  --ui3d-top-c: #b91c1c;
  --ui3d-border: rgba(239, 68, 68, 0.32);
  --ui3d-shadow: rgba(185, 28, 28, 0.12);
  --ui3d-glow: rgba(239, 68, 68, 0.14);
}

#summaryCards .card.ui-3d-kpi .kpi-label {
  font-size: var(--t-label);
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--muted);
  text-transform: none;
  line-height: 1.2;
  margin-bottom: 2px;
  text-align: center;
}

#summaryCards .card.ui-3d-kpi .kpi-value {
  font-size: var(--t-hero);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  background: none;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  margin: 2px 0;
  padding: 0;
  min-height: 0;
  text-shadow: 0 1px 0 var(--white-86);
}

#summaryCards .card.ui-3d-kpi.warn-80 .kpi-value {
  color: var(--amber-warn);
}

#summaryCards .card.ui-3d-kpi.warn-100 .kpi-value,
#summaryCards .card.ui-3d-kpi.negative-budget .kpi-value {
  color: var(--red-600);
}

#summaryCards .card.ui-3d-kpi .kpi-foot {
  font-size: var(--t-support);
  font-weight: 400;
  color: var(--muted);
  line-height: 1.3;
  margin-top: 2px;
  text-align: center;
}

#summaryCards .card.ui-3d-kpi .kpi-value.kpi-category {
  font-size: 0.88rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  word-break: break-word;
}

/* === canonical-3d-income-savings-kpi-adoption === */
/* ══════════════════════════════════════════════════════
   INCOME & SAVINGS KPI CARDS — CANONICAL 3D ADOPTION
   Uses .ui-3d-panel as the shared 3D source for the three top cards.
   ══════════════════════════════════════════════════════ */

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


@media (max-width: 780px) {
  #incomeSavingsHero { grid-template-columns: 1fr; }
}

/* === expenses-modal-layer-clean-v1017 === */
/* Expenses modal layer — clean source.
   The modal remains in its original DOM so its close handlers work.
   During an open modal, the sticky header and decorative 3D rails are lowered/hidden
   instead of being allowed to paint over the fixed overlay. */

/* Base overlay: viewport-owned layer above app chrome. */
[data-view="expenses"] [data-expense-modal-overlay] {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  background: rgba(15,23,42,0.42);
  backdrop-filter: blur(2px);
  pointer-events: auto;
  overflow: auto;
}

[data-view="expenses"] [data-expense-modal-overlay] .expense-modal,
[data-view="expenses"] [data-expense-modal-overlay] .expense-group-modal-centered {
  position: relative;
  z-index: 2147483001;
  width: min(1180px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  margin: 0;
  transform: none;
  pointer-events: auto;
  overflow: hidden;
}

/* Make the app chrome participate as background while the modal is mounted.
   :has() is intentional here as a CSS backstop for any missed JS state sync. */


[data-view="expenses"] #expensesSection > .section-header,
[data-view="expenses"] #expensesSection > .section-header:hover,
[data-view="expenses"] #expensesSection > .section-header .focus-head,
[data-view="expenses"] #expensesSection > .section-header:hover .focus-head {
  background: transparent;
  filter: none;
  opacity: 1;
  box-shadow: none;
}

@media (max-width: 760px) {
  [data-view="expenses"] [data-expense-modal-overlay] {
    padding: 0;
    align-items: stretch;
  }
  [data-view="expenses"] [data-expense-modal-overlay] .expense-modal,
  [data-view="expenses"] [data-expense-modal-overlay] .expense-group-modal-centered {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
}

/* === canonical-3d-smart-insights-adoption === */
/* ══════════════════════════════════════════════════════
   SMART INSIGHTS — CANONICAL 3D ADOPTION
   Uses .ui-3d-panel as the single source of the elevated card style.
   This layer only sets Smart Insights sizing and semantic colors.
   ══════════════════════════════════════════════════════ */

#insightGrid > .insight-card.ui-3d-insight {
  --ui3d-top-a: #8fa1b8;
  --ui3d-top-b: #64748b;
  --ui3d-top-c: #334155;
  --ui3d-border: rgba(100, 116, 139, 0.30);
  --ui3d-shadow: rgba(51, 65, 85, 0.12);
  --ui3d-glow: rgba(100, 116, 139, 0.14);

  border-radius: 16px;
  border-color: var(--ui3d-border);
  background:
    radial-gradient(circle at 88% -18%, var(--ui3d-glow) 0%, var(--white-0) 42%),
    linear-gradient(145deg, var(--white-98) 0%, var(--surface-light-96) 46%, rgba(238,244,250,0.90) 100%);
  box-shadow:
    0 18px 34px var(--ui3d-shadow),
    0 7px 16px rgba(30,64,120,0.08),
    inset 0 1px 0 var(--white-98),
    inset 0 -1px 0 rgba(72,120,178,0.10);
}

#insightGrid > .insight-card.ui-3d-insight:hover {
  transform: translateY(-1px);
  box-shadow:
    0 21px 40px var(--ui3d-shadow),
    0 9px 20px rgba(30,64,120,0.10),
    inset 0 1px 0 var(--white-98),
    inset 0 -1px 0 var(--slate-glass);
}

#insightGrid > .insight-card.ui-3d-insight::before {
  content: "";
  height: 4px;
  background: linear-gradient(90deg, var(--ui3d-top-a) 0%, var(--ui3d-top-b) 54%, var(--ui3d-top-c) 100%);
  opacity: 1;
}

#insightGrid > .insight-card.ui-3d-insight::after {
  top: -74px;
  right: -82px;
  width: 210px;
  height: 210px;
}

#insightGrid > .forecast-card.ui-3d-insight {
  --ui3d-top-a: #86efac;
  --ui3d-top-b: #16a34a;
  --ui3d-top-c: #166534;
  --ui3d-border: rgba(22, 163, 74, 0.26);
  --ui3d-shadow: rgba(22, 101, 52, 0.12);
  --ui3d-glow: rgba(22, 163, 74, 0.14);
}

#insightGrid > .guidance-card.ui-3d-insight,
#insightGrid > .evolution-card.ui-3d-insight {
  --ui3d-top-a: #ffffff;
  --ui3d-top-b: #475569;
  --ui3d-top-c: #1f2937;
  --ui3d-border: rgba(71, 85, 105, 0.28);
  --ui3d-shadow: rgba(31, 41, 55, 0.12);
  --ui3d-glow: rgba(71, 85, 105, 0.13);
}

#insightGrid > .mix-behavior-card.ui-3d-insight {
  --ui3d-top-a: #c4b5fd;
  --ui3d-top-b: #8b5cf6;
  --ui3d-top-c: #475569;
  --ui3d-border: rgba(139, 92, 246, 0.24);
  --ui3d-shadow: rgba(88, 28, 135, 0.11);
  --ui3d-glow: rgba(139, 92, 246, 0.13);
}

#insightGrid > .reallocation-card.ui-3d-insight {
  --ui3d-top-a: #fcd34d;
  --ui3d-top-b: #f59e0b;
  --ui3d-top-c: #b45309;
  --ui3d-border: rgba(245, 158, 11, 0.28);
  --ui3d-shadow: rgba(180, 83, 9, 0.12);
  --ui3d-glow: rgba(245, 158, 11, 0.15);
}

#insightGrid > .burn-subs-card.ui-3d-insight {
  --ui3d-top-a: #fb7185;
  --ui3d-top-b: #f97316;
  --ui3d-top-c: #b45309;
  --ui3d-border: rgba(249, 115, 22, 0.24);
  --ui3d-shadow: rgba(154, 52, 18, 0.11);
  --ui3d-glow: rgba(249, 115, 22, 0.14);
}

/* Clean text-first headers: no local title/header background panels. */
#insightGrid > .ui-3d-insight .focus-head,
#insightGrid > .ui-3d-insight .section-header {
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

#insightGrid .insight-main.income-positive,
#insightGrid .insight-main.value-positive,
#insightGrid .insight-main.value-negative,
#insightGrid .insight-detail .income-positive,
#insightGrid .insight-detail .value-positive,
#insightGrid .insight-detail .value-negative,
#insightGrid .burn-card .insight-main.income-positive,
#insightGrid .burn-card .insight-main.value-positive,
#insightGrid .burn-card .insight-main.value-negative,
#insightGrid .forecast-card .insight-main.income-positive,
#insightGrid .forecast-card .insight-main.value-positive,
#insightGrid .forecast-card .insight-main.value-negative {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

#insightGrid .insight-main.income-positive,
#insightGrid .insight-detail .income-positive,
#insightGrid .forecast-card .insight-main.income-positive {
  color: var(--green-900);
}

#insightGrid .insight-main.value-positive,
#insightGrid .insight-detail .value-positive {
  color: var(--green-900);
}

#insightGrid .insight-main.value-negative,
#insightGrid .insight-detail .value-negative,
#insightGrid .burn-card .insight-main.value-negative {
  color: var(--red-700);
}

/* Supporting text rows stay text-only, not cards/chips. */
#insightGrid .insight-detail,
#insightGrid .forecast-card .insight-detail,
#insightGrid .burn-card .insight-detail {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

/* Keep internal data tiles elevated; exclude title and primary text rows. */
#insightGrid > .ui-3d-insight .forecast-driver-box,
#insightGrid > .ui-3d-insight .forecast-metric,
#insightGrid > .ui-3d-insight .guidance-tile,
#insightGrid > .ui-3d-insight .guidance-track-card,
#insightGrid > .ui-3d-insight .advisor-item,
#insightGrid > .ui-3d-insight .forecast-summary-note,
#insightGrid > .ui-3d-insight .ig-sub-section {
  border-color: rgba(100,116,139,0.16);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.84),
    0 7px 16px rgba(30,64,120,0.045);
}

#insightGrid > .ui-3d-insight.ig-combined-card {
  padding: 0;
}

#insightGrid > .ui-3d-insight.ig-combined-card .ig-sub-section:first-child::before,
#insightGrid > .ui-3d-insight.ig-combined-card .ig-sub-section[data-sub-hidden="true"] + .ig-sub-section::before {
  background: linear-gradient(90deg, var(--ui3d-top-a) 0%, var(--ui3d-top-b) 54%, var(--ui3d-top-c) 100%);
  opacity: 0.95;
}

/* === canonical-3d-planning-tool-adoption === */
/* ══════════════════════════════════════════════════════
   PLANNING TOOL — CANONICAL 3D ADOPTION
   Uses .ui-3d-panel as the shared elevated card source.
   This layer only handles Planning Tool scoping, layout, and semantic color variables.
   ══════════════════════════════════════════════════════ */

/* Adopt the canonical 3D system for Planning Tool cards, including dynamic cards. */
#planningTool .card,
#planningTool .planner-card,
#planningTab .card,
#planningTab .planner-card{
  --ui3d-top-a: #93c5fd;
  --ui3d-top-b: #6366f1;
  --ui3d-top-c: #334155;
  --ui3d-border: rgba(99, 102, 241, 0.26);
  --ui3d-shadow: rgba(49, 46, 129, 0.12);
  --ui3d-glow: rgba(99, 102, 241, 0.14);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--ui3d-border);
  border-radius: 16px;
  background:
    radial-gradient(circle at 88% -18%, var(--ui3d-glow) 0%, var(--white-0) 42%),
    linear-gradient(145deg, var(--white-98) 0%, rgba(247,249,255,0.96) 46%, rgba(232,238,255,0.88) 100%);
  box-shadow:
    0 18px 34px var(--ui3d-shadow),
    0 7px 16px rgba(30,64,120,0.08),
    inset 0 1px 0 var(--white-98),
    inset 0 -1px 0 rgba(72,120,178,0.10);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

#planningTool .card:hover,
#planningTool .planner-card:hover,
#planningTab .card:hover,
#planningTab .planner-card:hover{
  transform: translateY(-1px);
  border-color: rgba(99, 102, 241, 0.38);
  box-shadow:
    0 21px 40px var(--ui3d-shadow),
    0 9px 20px rgba(30,64,120,0.10),
    inset 0 1px 0 var(--white-98),
    inset 0 -1px 0 var(--slate-glass);
}

#planningTool .card::before,
#planningTool .planner-card::before,
#planningTab .card::before,
#planningTab .planner-card::before{
  content: "";
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ui3d-top-a) 0%, var(--ui3d-top-b) 54%, var(--ui3d-top-c) 100%);
  opacity: 1;
  pointer-events: none;
}

#planningTool .card::after,
#planningTool .planner-card::after,
#planningTab .card::after,
#planningTab .planner-card::after{
  content: "";
  position: absolute;
  z-index: 0;
  top: -74px;
  right: -82px;
  width: 210px;
  height: 210px;
  border-radius: 999px;
  background: radial-gradient(circle, var(--ui3d-glow) 0%, var(--white-0) 68%);
  pointer-events: none;
}

#planningTool .card > *,
#planningTool .planner-card > *,
#planningTab .card > *,
#planningTab .planner-card > *{
  position: relative;
  z-index: 1;
}

/* Preserve Planning Tool semantic colors by mapping common state classes to 3D variables. */
#planningTool .is-positive,
#planningTool .positive,
#planningTool .good,
#planningTool .success,
#planningTab .is-positive,
#planningTab .positive,
#planningTab .good,
#planningTab .success{
  --ui3d-top-a: #86efac;
  --ui3d-top-b: #16a34a;
  --ui3d-top-c: #166534;
  --ui3d-border: rgba(22, 163, 74, 0.26);
  --ui3d-shadow: rgba(22, 101, 52, 0.12);
  --ui3d-glow: rgba(22, 163, 74, 0.14);
}

#planningTool .is-warning,
#planningTool .warning,
#planningTool .warn,
#planningTool .state-warning,
#planningTab .is-warning,
#planningTab .warning,
#planningTab .warn,
#planningTab .state-warning{
  --ui3d-top-a: #fcd34d;
  --ui3d-top-b: #f59e0b;
  --ui3d-top-c: #b45309;
  --ui3d-border: rgba(245, 158, 11, 0.28);
  --ui3d-shadow: rgba(180, 83, 9, 0.12);
  --ui3d-glow: rgba(245, 158, 11, 0.15);
}


#planningTool .negative,
#planningTool .danger,
#planningTool .bad,
#planningTab .negative,
#planningTab .danger,
#planningTab .bad{
  --ui3d-top-a: #fb7185;
  --ui3d-top-b: #ef4444;
  --ui3d-top-c: #b91c1c;
  --ui3d-border: rgba(239, 68, 68, 0.30);
  --ui3d-shadow: rgba(185, 28, 28, 0.12);
  --ui3d-glow: rgba(239, 68, 68, 0.14);
}


#planningTool .section-header,
#planningTool .focus-head,
#planningTab .section-header,
#planningTab .focus-head{
  background: transparent;
  border-bottom: 1px solid rgba(100,116,139,0.12);
  box-shadow: none;
}

/* Keep inner rows/cards subtle and compatible with the new shell. */


#planningTool h3,
#planningTool h4,
#planningTab h3,
#planningTab h4{
  color: #263a52;
  text-shadow: 0 1px 0 var(--white-86);
}



/* === kpi-source-color-replacement === */
/* KPI source color replacement — direct source selector, no layered child overrides */
#summaryCards .card {
  border-top-color: var(--purple);
  background: linear-gradient(145deg, rgba(94,23,235,0.10), rgba(94,23,235,0.035)), var(--panel);
  box-shadow: 0 10px 22px rgba(94,23,235,0.12), var(--shadow);
}

#summaryCards .card:hover {
  box-shadow: 0 14px 26px rgba(94,23,235,0.18), var(--shadow);
}

/* === expenses-title-pill-size-fix-v1018 === */
/* Expenses title pill sizing — keep the pill intrinsic to the title text.
   This is intentionally scoped to Expenses so other tab headers are untouched. */
[data-view="expenses"] #expensesSection > .section-header {
  align-items: flex-start;
}

[data-view="expenses"] #expensesSection > .section-header .focus-head{
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  width: fit-content;
  max-width: max-content;
  min-width: 0;
  inline-size: fit-content;
  align-self: flex-start;
  justify-self: start;
  padding: 6px 10px;
  box-sizing: border-box;
}

[data-view="expenses"] #expensesSection > .section-header .focus-head h3{
  display: inline-block;
  width: auto;
  max-width: none;
  margin: 0;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* === expenses-modal-text-color-clean-v1020 === */
[data-view="expenses"] [data-expense-modal-overlay] .expense-modal-title,
[data-view="expenses"] [data-expense-modal-overlay] .expense-modal-subcopy,
[data-view="expenses"] [data-expense-modal-overlay] .expense-hero-label,
[data-view="expenses"] [data-expense-modal-overlay] .expense-hero-value,
[data-view="expenses"] [data-expense-modal-overlay] .expense-panel-label,
[data-view="expenses"] [data-expense-modal-overlay] .expense-log-head strong,
[data-view="expenses"] [data-expense-modal-overlay] .expense-selected-title,
[data-view="expenses"] [data-expense-modal-overlay] .expense-subcat-name,
[data-view="expenses"] [data-expense-modal-overlay] .expense-subcat-meta,
[data-view="expenses"] [data-expense-modal-overlay] .expense-subcat-foot,
[data-view="expenses"] [data-expense-modal-overlay] .expense-log-sub,
[data-view="expenses"] [data-expense-modal-overlay] .expense-selected-kpis span,
[data-view="expenses"] [data-expense-modal-overlay] .expense-selected-kpis strong,
[data-view="expenses"] [data-expense-modal-overlay] .expense-empty-state,
[data-view="expenses"] [data-expense-modal-overlay] .empty {
  color: var(--accent-text);
}

/* === subscription-burden-text-clean-v1021 === */
#insightGrid .subscription-burden-card .subscription-burden-main,
#insightGrid .subscription-burden-card .subscription-burden-metric strong,
#insightGrid .subscription-burden-card .subscription-burden-metric span,
#insightGrid .subscription-burden-card .subscription-burden-footer,
#insightGrid .subscription-burden-card .subscription-burden-badge,
#insightGrid .subscription-burden-card .subscription-burden-badge.state-stable,
#insightGrid .subscription-burden-card .subscription-burden-badge.state-closed {
  color: var(--accent-text);
}
#insightGrid .subscription-burden-card .subscription-burden-sub,
#insightGrid .subscription-burden-card .subscription-burden-metric small {
  color: var(--muted);
}
#insightGrid .subscription-burden-card .subscription-burden-badge.state-healthy {
  color:var(--green-900);
}
#insightGrid .subscription-burden-card .subscription-burden-badge.state-watch {
  color:var(--amber-warn);
}
#insightGrid .subscription-burden-card .subscription-burden-badge.state-pressure {
  color:#c2410c;
}
#insightGrid .subscription-burden-card .subscription-burden-badge.state-critical {
  color:var(--red-700);
}

/* === canonical-3d-subscriptions-adoption-v1022 === */


[data-view="subscriptions"] #subscriptionsSectionCompact{
  background:transparent;
}


/* Subscription insight cards */
[data-view="subscriptions"] .subscriptions-insight-grid > .ui-3d-subscriptions-insight {
  --ui3d-top-a:#93c5fd;
  --ui3d-top-b:#3b82f6;
  --ui3d-top-c:#1d4ed8;
  --ui3d-border:rgba(59,130,246,0.24);
  --ui3d-border-strong:rgba(59,130,246,0.38);
  --ui3d-glow:rgba(59,130,246,0.13);
  --ui3d-shadow:rgba(29,78,216,0.10);

  border-radius:16px;
  border-color:var(--ui3d-border);
  padding:14px;
  min-height:100%;
  background:
    radial-gradient(circle at 88% -18%, var(--ui3d-glow) 0%, var(--white-0) 42%),
    linear-gradient(145deg, var(--white-98) 0%, var(--surface-light-96) 46%, rgba(231,241,255,0.86) 100%);
}

[data-view="subscriptions"] .subscriptions-insight-grid > .ui-3d-subscription-burden {
  --ui3d-top-a:#c4b5fd;
  --ui3d-top-b:#8b5cf6;
  --ui3d-top-c:#475569;
  --ui3d-border:rgba(139,92,246,0.24);
  --ui3d-glow:rgba(139,92,246,0.12);
  --ui3d-shadow:rgba(88,28,135,0.10);
}

[data-view="subscriptions"] .subscriptions-insight-grid > .ui-3d-subscription-mix {
  --ui3d-top-a:#a7f3d0;
  --ui3d-top-b:#10b981;
  --ui3d-top-c:#047857;
  --ui3d-border:rgba(16,185,129,0.24);
  --ui3d-glow:rgba(16,185,129,0.12);
  --ui3d-shadow:rgba(4,120,87,0.10);
}

[data-view="subscriptions"] .subscriptions-insight-grid > .ui-3d-subscription-next {
  --ui3d-top-a:#fcd34d;
  --ui3d-top-b:#f59e0b;
  --ui3d-top-c:#b45309;
  --ui3d-border:rgba(245,158,11,0.26);
  --ui3d-glow:rgba(245,158,11,0.13);
  --ui3d-shadow:rgba(180,83,9,0.11);
}

[data-view="subscriptions"] .subscriptions-insight-grid > .ui-3d-subscriptions-insight .focus-head,
[data-view="subscriptions"] .subscriptions-insight-grid > .ui-3d-subscriptions-insight .section-header {
  background:transparent;
  border-bottom:0;
  box-shadow:none;
  padding:0;
  margin-bottom:10px;
}

[data-view="subscriptions"] .subscriptions-insight-grid > .ui-3d-subscriptions-insight .subscriptions-mini-card,
[data-view="subscriptions"] .subscriptions-insight-grid > .ui-3d-subscriptions-insight .subscription-burden-top {
  background:transparent;
}

/* Controls and KPI cards */
[data-view="subscriptions"] .subscriptions-controls-card.ui-3d-subscriptions-controls {
  --ui3d-top-a:#bfdbfe;
  --ui3d-top-b:#60a5fa;
  --ui3d-top-c:#2563eb;
  --ui3d-border:rgba(96,165,250,0.24);
  --ui3d-glow:rgba(96,165,250,0.12);
  --ui3d-shadow:rgba(37,99,235,0.09);

  padding:12px;
  border-color:var(--ui3d-border);
  overflow:visible;
  background:
    radial-gradient(circle at 88% -18%, var(--ui3d-glow) 0%, var(--white-0) 42%),
    linear-gradient(145deg, var(--white-98) 0%, var(--surface-light-96) 46%, rgba(231,241,255,0.74) 100%);
}

[data-view="subscriptions"] .subscription-stat-card.ui-3d-subscription-stat {
  padding:10px 11px;
  border-color:rgba(96,165,250,0.20);
  background:
    radial-gradient(circle at 88% -18%, var(--ui3d-glow) 0%, var(--white-0) 42%),
    linear-gradient(145deg, var(--white-98) 0%, var(--surface-light-96) 52%, rgba(231,241,255,0.72) 100%);
  box-shadow:
    0 10px 22px rgba(30,64,120,0.08),
    inset 0 1px 0 var(--white-98);
}

[data-view="subscriptions"] .subscription-stat-card.ui-3d-subscription-stat.is-warning {
  --ui3d-top-a:#fcd34d;
  --ui3d-top-b:#f59e0b;
  --ui3d-top-c:#b45309;
  --ui3d-border:rgba(245,158,11,0.24);
  --ui3d-glow:rgba(245,158,11,0.10);
  --ui3d-shadow:rgba(180,83,9,0.08);
}

[data-view="subscriptions"] .subscription-stat-card.ui-3d-subscription-stat.is-positive {
  --ui3d-top-a:#a7f3d0;
  --ui3d-top-b:#10b981;
  --ui3d-top-c:#047857;
  --ui3d-border:rgba(16,185,129,0.22);
  --ui3d-glow:rgba(16,185,129,0.10);
  --ui3d-shadow:rgba(4,120,87,0.08);
}

[data-view="subscriptions"] .subscription-stat-card.ui-3d-subscription-stat.is-accent {
  --ui3d-top-a:#bfdbfe;
  --ui3d-top-b:#3b82f6;
  --ui3d-top-c:#1d4ed8;
  --ui3d-border:rgba(59,130,246,0.22);
  --ui3d-glow:rgba(59,130,246,0.10);
  --ui3d-shadow:rgba(29,78,216,0.08);
}

[data-view="subscriptions"] .subscription-stat-card.ui-3d-subscription-stat::before {
  height:3px;
}

[data-view="subscriptions"] .subscription-stat-label,
[data-view="subscriptions"] .subscription-stat-value {
  color:var(--accent-text);
}

/* Timeline table shell */
[data-view="subscriptions"] .subscriptions-table-card.ui-3d-subscriptions-table-card {
  --ui3d-top-a:#93c5fd;
  --ui3d-top-b:#64748b;
  --ui3d-top-c:#334155;
  --ui3d-border:rgba(100,116,139,0.22);
  --ui3d-border-strong:rgba(100,116,139,0.34);
  --ui3d-glow:rgba(100,116,139,0.11);
  --ui3d-shadow:rgba(51,65,85,0.09);

  padding:12px;
  border-color:var(--ui3d-border);
  background:
    radial-gradient(circle at 88% -18%, var(--ui3d-glow) 0%, var(--white-0) 42%),
    linear-gradient(145deg, var(--white-98) 0%, var(--surface-light-96) 48%, rgba(241,245,249,0.84) 100%);
}

[data-view="subscriptions"] .subscriptions-table-card.ui-3d-subscriptions-table-card .subscriptions-table-head {
  position:relative;
  z-index:1;
}

[data-view="subscriptions"] .subscriptions-table-wrap {
  border-color:rgba(100,116,139,0.18);
  background:rgba(255,255,255,0.74);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.84),
    inset 0 1px 2px rgba(30,64,120,0.04);
}

[data-view="subscriptions"] .subscriptions-table thead th {
  background:rgba(248,251,255,0.96);
}

[data-view="subscriptions"] .subscriptions-title-row,
[data-view="subscriptions"] .subscriptions-table-title,
[data-view="subscriptions"] .subscriptions-table-eyebrow {
  color:var(--accent-text);
}

[data-view="subscriptions"] #subscriptionsSectionCompact > .section-header,
[data-view="subscriptions"] #subscriptionsSectionCompact > .section-header:hover{
  background:transparent;
  filter:none;
  opacity:1;
  box-shadow:none;
}

[data-view="subscriptions"] .subscriptions-controls-card,
[data-view="subscriptions"] .subscriptions-table-card,
[data-view="subscriptions"] .subscription-stat-card,
[data-view="subscriptions"] .subscriptions-insight-grid > .insight-card {
  box-shadow:
    0 18px 36px var(--ui3d-shadow, rgba(30,64,120,0.10)),
    0 7px 16px rgba(30,64,120,0.07),
    inset 0 1px 0 var(--white-98),
    inset 0 -1px 0 rgba(72,120,178,0.10);
}


/* === canonical-3d-usage-adoption-v1023 === */


[data-view="usage"] #usageSectionCompact{
  background:transparent;
}


/* Usage KPI cards */
[data-view="usage"] .usage-kpi-cell.ui-3d-usage-kpi {
  padding:10px 12px;
  border-radius:16px;
  border-color:var(--ui3d-border, rgba(100,116,139,0.22));
  background:
    radial-gradient(circle at 88% -18%, var(--ui3d-glow, rgba(100,116,139,0.11)) 0%, var(--white-0) 42%),
    linear-gradient(145deg, var(--white-98) 0%, var(--surface-light-96) 52%, rgba(241,245,249,0.84) 100%);
  box-shadow:
    0 14px 28px var(--ui3d-shadow, rgba(30,64,120,0.09)),
    0 5px 12px rgba(30,64,120,0.06),
    inset 0 1px 0 var(--white-98),
    inset 0 -1px 0 rgba(72,120,178,0.08);
}

[data-view="usage"] .usage-kpi-cell.ui-3d-usage-kpi::before {
  height:3px;
}

[data-view="usage"] .usage-kpi-cell.ui-3d-usage-kpi.kpi-used {
  --ui3d-top-a:#a7f3d0;
  --ui3d-top-b:#10b981;
  --ui3d-top-c:#047857;
  --ui3d-border:rgba(16,185,129,0.22);
  --ui3d-glow:rgba(16,185,129,0.11);
  --ui3d-shadow:rgba(4,120,87,0.08);
}

[data-view="usage"] .usage-kpi-cell.ui-3d-usage-kpi.kpi-wasted {
  --ui3d-top-a:#fca5a5;
  --ui3d-top-b:#ef4444;
  --ui3d-top-c:#991b1b;
  --ui3d-border:rgba(239,68,68,0.22);
  --ui3d-glow:rgba(239,68,68,0.10);
  --ui3d-shadow:rgba(153,27,27,0.08);
}

[data-view="usage"] .usage-kpi-cell.ui-3d-usage-kpi.kpi-stacking {
  --ui3d-top-a:#fcd34d;
  --ui3d-top-b:#f59e0b;
  --ui3d-top-c:#b45309;
  --ui3d-border:rgba(245,158,11,0.24);
  --ui3d-glow:rgba(245,158,11,0.10);
  --ui3d-shadow:rgba(180,83,9,0.08);
}

/* Usage insight panel */
[data-view="usage"] .usage-insights-panel.ui-3d-usage-insights {
  --ui3d-top-a:#bfdbfe;
  --ui3d-top-b:#64748b;
  --ui3d-top-c:#334155;
  --ui3d-border:rgba(100,116,139,0.22);
  --ui3d-glow:rgba(100,116,139,0.11);
  --ui3d-shadow:rgba(51,65,85,0.09);

  border-radius:16px;
  border-color:var(--ui3d-border);
  background:
    radial-gradient(circle at 88% -18%, var(--ui3d-glow) 0%, var(--white-0) 42%),
    linear-gradient(145deg, var(--white-98) 0%, var(--surface-light-96) 48%, rgba(241,245,249,0.84) 100%);
}

[data-view="usage"] .usage-insights-panel.ui-3d-usage-insights::before {
  height:4px;
}

[data-view="usage"] .usage-insight-col {
  border-right-color:rgba(100,116,139,0.14);
}

/* Usage item cards — category color remains the source for each card. */
[data-view="usage"] .usage-card.ui-3d-usage-card {
  --ui3d-top-a:var(--usage-card-accent, #c4b5fd);
  --ui3d-top-b:var(--usage-card-accent, #8b5cf6);
  --ui3d-top-c:color-mix(in srgb, var(--usage-card-accent, #475569) 72%, #0f172a);
  --ui3d-border:var(--usage-card-border, rgba(139,92,246,0.24));
  --ui3d-border-strong:color-mix(in srgb, var(--usage-card-accent, #8b5cf6) 42%, rgba(15,23,42,0.12));
  --ui3d-glow:var(--usage-card-bg-top, rgba(139,92,246,0.12));
  --ui3d-shadow:color-mix(in srgb, var(--usage-card-accent, #8b5cf6) 18%, rgba(30,64,120,0.09));

  border-radius:16px;
  border-color:var(--ui3d-border);
  background:
    radial-gradient(circle at 88% -18%, var(--ui3d-glow) 0%, var(--white-0) 42%),
    linear-gradient(145deg, var(--white-98) 0%, var(--surface-light-96) 46%, var(--usage-card-bg-bottom, rgba(241,245,249,0.84)) 100%);
  box-shadow:
    0 16px 32px var(--ui3d-shadow),
    0 6px 14px rgba(30,64,120,0.07),
    inset 0 1px 0 var(--white-98),
    inset 0 -1px 0 rgba(72,120,178,0.09);
}

[data-view="usage"] .usage-card.ui-3d-usage-card:hover {
  transform:translateY(-1px);
  border-color:var(--ui3d-border-strong);
  box-shadow:
    0 19px 38px var(--ui3d-shadow),
    0 8px 18px rgba(30,64,120,0.09),
    inset 0 1px 0 var(--white-98),
    inset 0 -1px 0 rgba(72,120,178,0.11);
}

[data-view="usage"] .usage-card.ui-3d-usage-card::before {
  height:3px;
  background:linear-gradient(90deg, var(--ui3d-top-a) 0%, var(--ui3d-top-b) 54%, var(--ui3d-top-c) 100%);
}

[data-view="usage"] .usage-card.ui-3d-usage-card.is-due {
  --ui3d-top-a:#fcd34d;
  --ui3d-top-b:#d97706;
  --ui3d-top-c:#92400e;
  --ui3d-border:rgba(217,119,6,0.30);
  --ui3d-glow:rgba(217,119,6,0.12);
}

[data-view="usage"] .usage-card.ui-3d-usage-card.warn-strong {
  --ui3d-top-a:#fca5a5;
  --ui3d-top-b:#ef4444;
  --ui3d-top-c:#991b1b;
  --ui3d-border:rgba(239,68,68,0.30);
  --ui3d-glow:rgba(239,68,68,0.12);
}

[data-view="usage"] .usage-card.ui-3d-usage-card.warn-medium {
  --ui3d-top-a:#fcd34d;
  --ui3d-top-b:#f59e0b;
  --ui3d-top-c:#b45309;
  --ui3d-border:rgba(245,158,11,0.30);
  --ui3d-glow:rgba(245,158,11,0.12);
}

[data-view="usage"] .usage-card.ui-3d-usage-card.warn-soft {
  --ui3d-top-a:#fde68a;
  --ui3d-top-b:#eab308;
  --ui3d-top-c:#a16207;
  --ui3d-border:rgba(234,179,8,0.28);
  --ui3d-glow:rgba(234,179,8,0.11);
}

[data-view="usage"] .usage-card.ui-3d-usage-card .usage-card-header {
  background:rgba(255,255,255,0.44);
  border-bottom:1px solid rgba(100,116,139,0.10);
}

[data-view="usage"] .usage-card.ui-3d-usage-card .usage-checkin {
  background:var(--white-62);
  border-color:rgba(100,116,139,0.13);
  box-shadow:inset 0 1px 0 var(--white-86);
}

[data-view="usage"] .usage-empty.ui-3d-usage-empty {
  --ui3d-top-a:#c4b5fd;
  --ui3d-top-b:#8b5cf6;
  --ui3d-top-c:#475569;
  --ui3d-border:rgba(139,92,246,0.24);
  --ui3d-glow:rgba(139,92,246,0.12);
  --ui3d-shadow:rgba(88,28,135,0.10);
  border-radius:16px;
}

[data-view="usage"] #usageSectionCompact > .section-header,
[data-view="usage"] #usageSectionCompact > .section-header:hover{
  background:transparent;
  filter:none;
  opacity:1;
  box-shadow:none;
}

[data-view="usage"] .usage-insights-panel,
[data-view="usage"] .usage-kpi-cell,
[data-view="usage"] .usage-card{
  box-shadow:
    0 16px 32px var(--ui3d-shadow, rgba(30,64,120,0.09)),
    0 6px 14px rgba(30,64,120,0.06),
    inset 0 1px 0 var(--white-98),
    inset 0 -1px 0 rgba(72,120,178,0.08);
}


/* === canonical-3d-achievements-adoption-v1024 === */


/* Shared Achievements panel baseline */
[data-view="achievements"] .ui-3d-ach-section,
[data-view="achievements"] .ui-3d-ach-checkin,
[data-view="achievements"] .ui-3d-ach-kpi,
[data-view="achievements"] .ui-3d-ach-progress,
[data-view="achievements"] .ui-3d-ach-history-group,
[data-view="achievements"] .ui-3d-ach-badge {
  border-radius:16px;
  border-color:var(--ui3d-border, rgba(100,116,139,0.22));
  background:
    radial-gradient(circle at 88% -18%, var(--ui3d-glow, rgba(100,116,139,0.11)) 0%, var(--white-0) 42%),
    linear-gradient(145deg, var(--white-98) 0%, var(--surface-light-96) 48%, rgba(241,245,249,0.84) 100%);
  box-shadow:
    0 16px 32px var(--ui3d-shadow, rgba(30,64,120,0.09)),
    0 6px 14px rgba(30,64,120,0.06),
    inset 0 1px 0 var(--white-98),
    inset 0 -1px 0 rgba(72,120,178,0.08);
}

/* Check-in card */
[data-view="achievements"] .ui-3d-ach-checkin {
  --ui3d-top-a:#a7f3d0;
  --ui3d-top-b:#10b981;
  --ui3d-top-c:#047857;
  --ui3d-border:rgba(16,185,129,0.24);
  --ui3d-border-strong:rgba(16,185,129,0.38);
  --ui3d-glow:rgba(16,185,129,0.12);
  --ui3d-shadow:rgba(4,120,87,0.10);
}

[data-view="achievements"] .ui-3d-ach-checkin.is-locked {
  --ui3d-top-a:#cbd5e1;
  --ui3d-top-b:#94a3b8;
  --ui3d-top-c:#475569;
  --ui3d-border:rgba(100,116,139,0.20);
  --ui3d-glow:rgba(100,116,139,0.09);
  --ui3d-shadow:rgba(51,65,85,0.08);
}

[data-view="achievements"] .ui-3d-ach-checkin .checkin-cadence-inline,
[data-view="achievements"] .ui-3d-ach-checkin .checkin-card-head,
[data-view="achievements"] .ui-3d-ach-checkin .weekly-card-head {
  background:rgba(255,255,255,0.44);
  border-bottom:1px solid rgba(100,116,139,0.10);
}

[data-view="achievements"] .ui-3d-ach-checkin .checkin-footer,
[data-view="achievements"] .ui-3d-ach-checkin .checkin-confirm-panel,
[data-view="achievements"] .ui-3d-ach-checkin .checkin-lock-message-body {
  background:var(--white-58);
  border-color:rgba(100,116,139,0.13);
}

/* KPI blocks */
[data-view="achievements"] .ui-3d-ach-kpi {
  padding:10px 12px;
}

[data-view="achievements"] .ui-3d-ach-kpi.mb-cash {
  --ui3d-top-a:#a7f3d0;
  --ui3d-top-b:#10b981;
  --ui3d-top-c:#047857;
  --ui3d-border:rgba(16,185,129,0.22);
  --ui3d-glow:rgba(16,185,129,0.10);
  --ui3d-shadow:rgba(4,120,87,0.08);
}

[data-view="achievements"] .ui-3d-ach-kpi.mb-budget {
  --ui3d-top-a:#c4b5fd;
  --ui3d-top-b:#8b5cf6;
  --ui3d-top-c:#475569;
  --ui3d-border:rgba(139,92,246,0.22);
  --ui3d-glow:rgba(139,92,246,0.10);
  --ui3d-shadow:rgba(88,28,135,0.08);
}

[data-view="achievements"] .ui-3d-ach-kpi.mb-goal {
  --ui3d-top-a:#fcd34d;
  --ui3d-top-b:#f59e0b;
  --ui3d-top-c:#b45309;
  --ui3d-border:rgba(245,158,11,0.24);
  --ui3d-glow:rgba(245,158,11,0.10);
  --ui3d-shadow:rgba(180,83,9,0.08);
}

[data-view="achievements"] .ui-3d-ach-kpi::before,
[data-view="achievements"] .ui-3d-ach-progress::before,
[data-view="achievements"] .ui-3d-ach-section::before,
[data-view="achievements"] .ui-3d-ach-history-group::before,
[data-view="achievements"] .ui-3d-ach-badge::before {
  height:3px;
  background:linear-gradient(90deg, var(--ui3d-top-a, #93c5fd) 0%, var(--ui3d-top-b, #64748b) 54%, var(--ui3d-top-c, #334155) 100%);
  opacity:1;
}

/* Financial progress */
[data-view="achievements"] .ui-3d-ach-progress {
  --ui3d-top-a:#93c5fd;
  --ui3d-top-b:#3b82f6;
  --ui3d-top-c:#1d4ed8;
  --ui3d-border:rgba(59,130,246,0.24);
  --ui3d-glow:rgba(59,130,246,0.11);
  --ui3d-shadow:rgba(29,78,216,0.09);
}

[data-view="achievements"] .ui-3d-ach-progress.state-progress {
  --ui3d-top-a:#a7f3d0;
  --ui3d-top-b:#10b981;
  --ui3d-top-c:#047857;
  --ui3d-border:rgba(16,185,129,0.24);
  --ui3d-glow:rgba(16,185,129,0.11);
  --ui3d-shadow:rgba(4,120,87,0.09);
}

[data-view="achievements"] .ui-3d-ach-progress.state-drift {
  --ui3d-top-a:#fcd34d;
  --ui3d-top-b:#f59e0b;
  --ui3d-top-c:#b45309;
  --ui3d-border:rgba(245,158,11,0.26);
  --ui3d-glow:rgba(245,158,11,0.12);
  --ui3d-shadow:rgba(180,83,9,0.10);
}

[data-view="achievements"] .ui-3d-ach-progress .fp-delta-block,
[data-view="achievements"] .ui-3d-ach-progress .fp-goal-block {
  background:rgba(255,255,255,0.60);
  border-color:rgba(100,116,139,0.14);
  box-shadow:inset 0 1px 0 var(--white-86);
}

/* Targets, completed badges, and history */
[data-view="achievements"] .ui-3d-ach-targets {
  --ui3d-top-a:#c4b5fd;
  --ui3d-top-b:#8b5cf6;
  --ui3d-top-c:#475569;
  --ui3d-border:rgba(139,92,246,0.23);
  --ui3d-glow:rgba(139,92,246,0.11);
  --ui3d-shadow:rgba(88,28,135,0.09);
}

[data-view="achievements"] .ui-3d-ach-history {
  --ui3d-top-a:#bfdbfe;
  --ui3d-top-b:#64748b;
  --ui3d-top-c:#334155;
  --ui3d-border:rgba(100,116,139,0.22);
  --ui3d-glow:rgba(100,116,139,0.10);
  --ui3d-shadow:rgba(51,65,85,0.08);
}

[data-view="achievements"] .ui-3d-ach-section .achievements-section-head {
  background:rgba(255,255,255,0.46);
  border-bottom:1px solid rgba(100,116,139,0.11);
}

[data-view="achievements"] .ui-3d-ach-history-group {
  --ui3d-top-a:#bfdbfe;
  --ui3d-top-b:#94a3b8;
  --ui3d-top-c:#475569;
  --ui3d-border:rgba(100,116,139,0.18);
  --ui3d-glow:rgba(100,116,139,0.08);
  --ui3d-shadow:rgba(51,65,85,0.06);
}

/* Badge tiles keep completion semantics while adopting the 3D shell */
[data-view="achievements"] .ui-3d-ach-badge {
  --ui3d-top-a:#fcd34d;
  --ui3d-top-b:#f59e0b;
  --ui3d-top-c:#b45309;
  --ui3d-border:rgba(245,158,11,0.20);
  --ui3d-glow:rgba(245,158,11,0.08);
  --ui3d-shadow:rgba(180,83,9,0.07);
}

[data-view="achievements"] .ui-3d-ach-badge.badge-completed {
  --ui3d-top-a:#a7f3d0;
  --ui3d-top-b:#10b981;
  --ui3d-top-c:#047857;
  --ui3d-border:rgba(16,185,129,0.22);
  --ui3d-glow:rgba(16,185,129,0.09);
  --ui3d-shadow:rgba(4,120,87,0.07);
}


[data-view="achievements"] .ui-3d-ach-badge.badge-empty-slot-custom {
  --ui3d-top-a:#cbd5e1;
  --ui3d-top-b:#94a3b8;
  --ui3d-top-c:#64748b;
  --ui3d-border:rgba(100,116,139,0.16);
  --ui3d-glow:rgba(100,116,139,0.07);
  --ui3d-shadow:rgba(51,65,85,0.05);
}


[data-view="achievements"] .checkin-card,
[data-view="achievements"] .weekly-checkin-card,
[data-view="achievements"] .momentum-block,
[data-view="achievements"] .financial-progress-card,
[data-view="achievements"] .achievements-section,
[data-view="achievements"] .history-year-group,
[data-view="achievements"] .badge-tile {
  box-shadow:
    0 16px 32px var(--ui3d-shadow, rgba(30,64,120,0.09)),
    0 6px 14px rgba(30,64,120,0.06),
    inset 0 1px 0 var(--white-98),
    inset 0 -1px 0 rgba(72,120,178,0.08);
}

[data-view="achievements"] .checkin-card,
[data-view="achievements"] .weekly-checkin-card,
[data-view="achievements"] .momentum-block,
[data-view="achievements"] .financial-progress-card,
[data-view="achievements"] .achievements-section,
[data-view="achievements"] .history-year-group,
[data-view="achievements"] .badge-tile {
  background:
    radial-gradient(circle at 88% -18%, var(--ui3d-glow, rgba(100,116,139,0.11)) 0%, var(--white-0) 42%),
    linear-gradient(145deg, var(--white-98) 0%, var(--surface-light-96) 48%, rgba(241,245,249,0.84) 100%);
}


/* === cashflow-modal-portal-v1029 === */
/* Income & Savings modal portal.
   Rebuilt so the popup lives outside the 3D card stack and cannot be clipped by panel transforms. */

#cashflowModalRoot:empty {
  display: none;
}

#cashflowModalRoot .cashflow-modal-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  background: rgba(15,23,42,0.44);
  backdrop-filter: blur(2px);
  overflow: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
}

#cashflowModalRoot .cashflow-modal {
  position: relative;
  z-index: 2147483001;
  width: min(1180px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  margin: auto;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,0.30);
  background: var(--white);
  box-shadow: 0 32px 88px rgba(15,23,42,0.26);
  isolation: isolate;
}

#cashflowModalRoot .cashflow-modal .expense-modal-head,
#cashflowModalRoot .cashflow-modal .expense-modal-foot {
  position: relative;
  z-index: 4;
  background: linear-gradient(180deg, rgba(248,250,252,0.98) 0%, rgba(241,245,249,0.92) 100%);
  border-color: var(--slate-22);
}

#cashflowModalRoot .cashflow-modal .expense-modal-hero {
  position: relative;
  z-index: 3;
  background: var(--white);
}

#cashflowModalRoot .cashflow-modal .expense-modal-body {
  position: relative;
  z-index: 2;
  overflow: auto;
  min-height: 0;
  background: var(--white);
  scrollbar-gutter: stable both-edges;
}

#cashflowModalRoot .cashflow-modal input,
#cashflowModalRoot .cashflow-modal select,
#cashflowModalRoot .cashflow-modal textarea,
#cashflowModalRoot .cashflow-modal button {
  position: relative;
  z-index: 5;
  pointer-events: auto;
}

body.cashflow-modal-open {
  overflow: hidden;
}


/* Background 3D effects are paused while the portal is open to prevent repaint artifacts. */


#cashflowModalRoot .cashflow-modal .expense-modal-title,
#cashflowModalRoot .cashflow-modal .expense-modal-subcopy,
#cashflowModalRoot .cashflow-modal .expense-hero-label,
#cashflowModalRoot .cashflow-modal .expense-hero-value,
#cashflowModalRoot .cashflow-modal .expense-panel-label,
#cashflowModalRoot .cashflow-modal .expense-selected-title,
#cashflowModalRoot .cashflow-modal .expense-subcat-name,
#cashflowModalRoot .cashflow-modal .expense-subcat-meta,
#cashflowModalRoot .cashflow-modal .expense-subcat-foot {
  color: var(--accent-text);
}

@media (max-width: 760px) {
  #cashflowModalRoot .cashflow-modal-overlay {
    padding: 0;
    align-items: stretch;
  }
  #cashflowModalRoot .cashflow-modal {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
}

/* v1114 — Income & Savings input clarity: make positive cash-flow fields visibly editable without changing logic. */
#cashflowModalRoot .cashflow-modal.cashflow-kind-income .inline-entry-controls,
#cashflowModalRoot .cashflow-modal.cashflow-kind-savings .inline-entry-controls {
  padding: 8px;
  border: 1px solid var(--emerald-22);
  background: linear-gradient(180deg, rgba(236,253,245,0.90) 0%, rgba(240,253,244,0.58) 100%);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.80), 0 8px 18px var(--emerald-10);
}
#cashflowModalRoot .cashflow-modal.cashflow-kind-income .inline-entry-controls::before,
#cashflowModalRoot .cashflow-modal.cashflow-kind-savings .inline-entry-controls::before {
  content: 'Add cash-flow entry';
  position: absolute;
  left: 10px;
  top: -9px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(16,185,129,0.24);
  background: var(--white);
  color: #0f172a;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#cashflowModalRoot .cashflow-modal.cashflow-kind-income .inline-entry-controls input[data-input],
#cashflowModalRoot .cashflow-modal.cashflow-kind-income .inline-entry-controls input[data-note],
#cashflowModalRoot .cashflow-modal.cashflow-kind-savings .inline-entry-controls input[data-input],
#cashflowModalRoot .cashflow-modal.cashflow-kind-savings .inline-entry-controls input[data-note] {
  border: 1px solid rgba(16,185,129,0.38);
  background: var(--white);
  box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 0 0 3px rgba(16,185,129,0.055);
}
#cashflowModalRoot .cashflow-modal.cashflow-kind-income .inline-entry-controls input[data-input]:focus,
#cashflowModalRoot .cashflow-modal.cashflow-kind-income .inline-entry-controls input[data-note]:focus,
#cashflowModalRoot .cashflow-modal.cashflow-kind-savings .inline-entry-controls input[data-input]:focus,
#cashflowModalRoot .cashflow-modal.cashflow-kind-savings .inline-entry-controls input[data-note]:focus {
  border-color: rgba(5,150,105,0.78);
  box-shadow: 0 0 0 4px rgba(16,185,129,0.16);
  outline: none;
}
#cashflowModalRoot .cashflow-modal.cashflow-kind-income .inline-entry-controls input[data-input]::placeholder,
#cashflowModalRoot .cashflow-modal.cashflow-kind-income .inline-entry-controls input[data-note]::placeholder,
#cashflowModalRoot .cashflow-modal.cashflow-kind-savings .inline-entry-controls input[data-input]::placeholder,
#cashflowModalRoot .cashflow-modal.cashflow-kind-savings .inline-entry-controls input[data-note]::placeholder {
  color: rgba(4,120,87,0.62);
}

/* === achievements-target-card-rebuild-v1031 === */
[data-view="achievements"] #achBadgeSection .badge-grid-seq {
  align-items: stretch;
}

/* Target card shell */
[data-view="achievements"] #achBadgeSection .badge-tile-seq.badge-active-now {
  --ui3d-top-a: #a7f3d0;
  --ui3d-top-b: #10b981;
  --ui3d-top-c: #047857;
  --ui3d-border: rgba(16,185,129,0.28);
  --ui3d-glow: rgba(16,185,129,0.12);
  --ui3d-shadow: rgba(4,120,87,0.09);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 230px;
  padding: 44px 14px 16px;
  gap: 8px;
  overflow: hidden;
  border-color: var(--ui3d-border);
}

[data-view="achievements"] #achBadgeSection .badge-tile-seq.badge-active-now::before {
  background: linear-gradient(90deg, #a7f3d0 0%, var(--emerald) 54%, #047857 100%);
}

/* Dedicated fixed control row: Active now left, X right. */
[data-view="achievements"] #achBadgeSection .badge-target-card-controls {
  position: absolute;
  top: 9px;
  left: 10px;
  right: 10px;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}

[data-view="achievements"] #achBadgeSection .badge-status-chip {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: max-content;
  height: 20px;
  margin: 0;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(16,185,129,0.30);
  background: rgba(16,185,129,0.13);
  color: #047857;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 var(--white-82);
  pointer-events: none;
}

[data-view="achievements"] #achBadgeSection .badge-delete-btn {
  position: static;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(239,68,68,0.30);
  background: rgba(255,255,255,0.94);
  color: var(--red-600);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  opacity: 1;
  transform: none;
  box-shadow: 0 4px 10px rgba(185,28,28,0.10), inset 0 1px 0 rgba(255,255,255,0.96);
  pointer-events: auto;
  cursor: pointer;
}

[data-view="achievements"] #achBadgeSection .badge-tile-seq.badge-active-now .badge-icon-wrap {
  width: 56px;
  height: 56px;
  font-size: 28px;
  margin: 0 0 2px;
  background: var(--emerald-14);
}

[data-view="achievements"] #achBadgeSection .badge-tile-seq.badge-active-now .badge-name {
  font-size: 1.16rem;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--accent-text);
}

[data-view="achievements"] #achBadgeSection .badge-tile-seq.badge-active-now .badge-seq-desc {
  font-size: 0.64rem;
  line-height: 1.34;
  min-height: 32px;
  max-width: 18ch;
  color: var(--muted);
  margin: 0;
}

[data-view="achievements"] #achBadgeSection .badge-tile-seq.badge-active-now .badge-meta-label {
  font-size: 0.62rem;
  line-height: 1.32;
  color: var(--muted);
  margin: 0;
}

[data-view="achievements"] #achBadgeSection .badge-tile-seq.badge-active-now .badge-prog-wrap {
  margin-top: 2px;
  width: 100%;
  max-width: 160px;
}

[data-view="achievements"] #achBadgeSection .badge-tile-seq.badge-active-now .badge-prog-fill {
  background: var(--emerald);
}

/* Do not affect open slots except keeping them calm and untouched by the active-card controls. */
[data-view="achievements"] #achBadgeSection .badge-empty-slot-custom {
  --ui3d-top-a: #cbd5e1;
  --ui3d-top-b: #94a3b8;
  --ui3d-top-c: #64748b;
}

/* === achievements-target-x-interaction-v1032 === */
[data-view="achievements"] #achBadgeSection .badge-target-card-controls {
  pointer-events: none;
}
[data-view="achievements"] #achBadgeSection .badge-target-card-controls .badge-delete-btn {
  pointer-events: auto;
  cursor: pointer;
}

/* === usage-card-stats-background-clean-v1034 === */
[data-view="usage"] .usage-card.ui-3d-usage-card .usage-card-body {
  background: transparent;
}

[data-view="usage"] .usage-card.ui-3d-usage-card .usage-stats-row {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

[data-view="usage"] .usage-card.ui-3d-usage-card .usage-stat {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

/* === overview-legend-adaptive-rebuild-v1037 === */
/* Overview distribution legend rebuild.
   Legend tiles and typography scale down as category count increases, preventing overflow. */

#spendingLegend.distribution-legend-tile {
  --legend-tile-py: 7px;
  --legend-tile-px: 9px;
  --legend-tile-gap: 5px;
  --legend-swatch-w: 6px;
  --legend-swatch-h: 18px;
  --legend-label-size: 0.62rem;
  --legend-amount-size: 0.59rem;
  --legend-percent-size: 0.52rem;

  align-content: center;
  gap: var(--legend-tile-gap);
  min-height: 0;
  overflow: hidden;
}

#spendingLegend.distribution-legend-tile.legend-count-compact {
  --legend-tile-py: 5px;
  --legend-tile-px: 8px;
  --legend-tile-gap: 4px;
  --legend-swatch-h: 16px;
  --legend-label-size: 0.58rem;
  --legend-amount-size: 0.55rem;
  --legend-percent-size: 0.49rem;
}

#spendingLegend.distribution-legend-tile.legend-count-dense {
  --legend-tile-py: 4px;
  --legend-tile-px: 7px;
  --legend-tile-gap: 3px;
  --legend-swatch-w: 5px;
  --legend-swatch-h: 14px;
  --legend-label-size: 0.53rem;
  --legend-amount-size: 0.50rem;
  --legend-percent-size: 0.46rem;
}

#spendingLegend.distribution-legend-tile.legend-count-ultra {
  --legend-tile-py: 3px;
  --legend-tile-px: 6px;
  --legend-tile-gap: 2px;
  --legend-swatch-w: 4px;
  --legend-swatch-h: 12px;
  --legend-label-size: 0.49rem;
  --legend-amount-size: 0.47rem;
  --legend-percent-size: 0.43rem;
}

#spendingLegend.distribution-legend-tile .chart-legend-item {
  display: grid;
  grid-template-columns: var(--legend-swatch-w) minmax(0, 1fr) auto;
  grid-template-areas: "swatch label value";
  column-gap: 6px;
  align-items: center;
  min-width: 0;
  min-height: 0;
  padding: var(--legend-tile-py) var(--legend-tile-px);
  border-radius: 9px;
  background: rgba(255,255,255,0.60);
  border: 1px solid rgba(74,122,178,0.12);
  box-shadow: 0 1px 0 rgba(255,255,255,0.74), 0 4px 10px rgba(30,64,120,0.035);
  overflow: hidden;
}

#spendingLegend.distribution-legend-tile .chart-swatch {
  width: var(--legend-swatch-w);
  height: var(--legend-swatch-h);
}

#spendingLegend.distribution-legend-tile .chart-legend-label {
  font-size: var(--legend-label-size);
  line-height: 1.05;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#spendingLegend.distribution-legend-tile .chart-legend-value {
  gap: 4px;
  min-width: 0;
  line-height: 1;
}

#spendingLegend.distribution-legend-tile .amount {
  font-size: var(--legend-amount-size);
  line-height: 1;
}

#spendingLegend.distribution-legend-tile .percent {
  font-size: var(--legend-percent-size);
  line-height: 1;
}

#spendingLegend.distribution-legend-tile.legend-count-dense .chart-legend-value,
#spendingLegend.distribution-legend-tile.legend-count-ultra .chart-legend-value {
  gap: 2px;
}

#spendingLegend.distribution-legend-tile.legend-count-ultra .percent {
  display: none;
}

@media (max-width: 760px) {
  #spendingLegend.distribution-legend-tile {
    overflow: visible;
  }
}

/* === cashflow-entry-delete-clean-v1038 === */
/* Income & Savings popup entry delete — reuse the same red x treatment as Expenses. */
#cashflowModalRoot .cashflow-modal .tx-item {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
}

#cashflowModalRoot .cashflow-modal .chip-remove {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border: none;
  background: transparent;
  color: var(--red-600);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  pointer-events: auto;
  position: relative;
  z-index: 6;
}

#cashflowModalRoot .cashflow-modal .chip-remove:hover {
  color: var(--red-700);
  background: rgba(239,68,68,0.08);
}

/* === transaction-note-edit-v1263 === */
/* Transaction note editing: scoped to logged history rows only. */
.chip-edit-note {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--muted);
  cursor: pointer;
  border-radius: 999px;
  padding: 2px 7px;
  font: inherit;
  font-size: 0.60rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}
.chip-edit-note:hover {
  background: var(--accent-surface);
  border-color: var(--accent-border);
  color: var(--accent-text);
}
.expense-log-list .tx-item {
  grid-template-columns: minmax(0,1fr) auto auto;
}
.log-panel .expense-chip {
  grid-template-columns: minmax(78px,auto) minmax(0,1fr) auto auto 20px;
}
#cashflowModalRoot .cashflow-modal .tx-item {
  grid-template-columns: minmax(0,1fr) auto auto;
}
@media (max-width: 720px) {
  .log-panel .expense-chip {
    grid-template-columns: minmax(74px,auto) minmax(0,1fr) auto 20px;
  }
  .log-panel .expense-chip .chip-edit-note {
    grid-column: 3;
    grid-row: 1;
  }
  .log-panel .expense-chip .chip-remove {
    grid-column: 4;
    grid-row: 1;
  }
}

/* === veyra-logo-lockup === */
.brand.brand-logo-only{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:12px 8px 18px;
  margin-bottom:10px;
}
.veyra-brand-logo{
  display:flex;
  align-items:center;
  width:100%;
  max-width:168px;
  overflow:hidden;
}
.veyra-brand-svg{
  display:block;
  width:100%;
  height:auto;
  max-height:80px;
}

/* === shared-outstanding-icon-v1042 === */
/* Outstanding Shared Expenses — compact hover info icon only. */
.shared-outstanding-details {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 7px;
  vertical-align: middle;
}
.shared-outstanding-icon {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(185,28,28,0.34);
  background: rgba(239,68,68,0.10);
  color: var(--red-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 0.66rem;
  font-weight: 850;
  line-height: 1;
  cursor: default;
  box-shadow: 0 4px 10px rgba(185,28,28,0.10), inset 0 1px 0 var(--white-72);
}
.shared-outstanding-details:hover .shared-outstanding-icon,
.shared-outstanding-details:focus-within .shared-outstanding-icon {
  background: rgba(239,68,68,0.16);
  border-color: rgba(185,28,28,0.48);
}
.shared-outstanding-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: min(320px, calc(100vw - 28px));
  max-height: min(380px, calc(100vh - 120px));
  overflow: auto;
  z-index: 90;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,0.34);
  background: linear-gradient(145deg, rgba(255,255,255,0.97), rgba(248,250,252,0.95));
  box-shadow: 0 24px 54px rgba(15,23,42,0.16), inset 0 1px 0 rgba(255,255,255,0.9);
  gap: 9px;
}
.shared-outstanding-details:hover .shared-outstanding-panel,
.shared-outstanding-details:focus-within .shared-outstanding-panel {
  display: grid;
}
.shared-outstanding-panel::before {
  content: '';
  position: absolute;
  top: -6px;
  left: calc(50% - 6px);
  width: 12px;
  height: 12px;
  background: rgba(255,255,255,0.97);
  border-left: 1px solid rgba(148,163,184,0.28);
  border-top: 1px solid rgba(148,163,184,0.28);
  transform: rotate(45deg);
}
.shared-outstanding-panel-head { display: grid; gap: 2px; }
.shared-outstanding-panel-title { font-size: 0.74rem; font-weight: 850; color: var(--accent-text); }
.shared-outstanding-panel-sub { font-size: 0.60rem; color: var(--muted); font-weight: 650; }
.shared-outstanding-summary-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.shared-outstanding-stat { padding: 7px 8px; border-radius: 11px; border: 1px solid var(--line); background: rgba(255,255,255,0.66); display: grid; gap: 2px; }
.shared-outstanding-stat-label { font-size: 0.53rem; color: var(--muted); font-weight: 850; text-transform: uppercase; letter-spacing: 0.04em; }
.shared-outstanding-stat-value { font-size: 0.64rem; font-family: var(--font-mono); font-weight: 850; color: var(--accent-text); }
.shared-outstanding-stat-value.receivable { color: var(--green-700); }
.shared-outstanding-stat-value.payable { color: var(--red-700); }
.shared-outstanding-month-list { display: grid; gap: 8px; }
.shared-outstanding-month-group { display: grid; gap: 5px; }
.shared-outstanding-month-label { font-size: 0.59rem; font-weight: 850; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.shared-outstanding-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--white-72); }
.shared-outstanding-entry-main { min-width: 0; display: grid; gap: 1px; }
.shared-outstanding-entry-category { font-size: 0.66rem; font-weight: 780; color: var(--accent-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shared-outstanding-entry-meta { font-size: 0.57rem; color: var(--muted); font-weight: 650; }
.shared-outstanding-entry-amount { font-size: 0.66rem; font-family: var(--font-mono); font-weight: 850; white-space: nowrap; }
.shared-outstanding-entry-amount.receivable { color: var(--green-700); }
.shared-outstanding-entry-amount.payable { color: var(--red-700); }
@media (max-width: 640px) {
  .shared-outstanding-panel { left: auto; right: -8px; transform: none; }
  .shared-outstanding-panel::before { left: auto; right: 11px; }
  .shared-outstanding-summary-row { grid-template-columns: 1fr; }
}

/* === ui-3d-popovers-and-modals-v1039 === */
/* ══════════════════════════════════════════════════════
   UI-only 3D POPUP + MODAL ADOPTION — v1039
   Scope: Budget Allocation Details / Shared Expenses popovers,
   Manage Structure modals, Distribute Savings, Configure Work Benefits.
   No data logic, handlers, or form semantics are changed.
   ══════════════════════════════════════════════════════ */

/* Budget Allocation action button: keep text and arrow optically centered. */
.alloc-focus-details-btn{
  min-height:32px;
  display:inline-grid;
  grid-template-columns:minmax(0,1fr) 10px;
  align-items:center;
  justify-items:center;
  column-gap:4px;
  padding:5px 8px;
  line-height:1.05;
  border-color:rgba(74,122,178,0.22);
  background:linear-gradient(145deg, var(--white-98) 0%, rgba(241,248,255,0.90) 100%);
  box-shadow:inset 0 1px 0 var(--white-92), 0 4px 10px rgba(30,64,120,0.045);
}
.alloc-focus-details-label{
  display:block;
  width:100%;
  min-width:0;
  text-align:center;
  line-height:1.05;
}
.alloc-focus-details-btn::after{
  justify-self:end;
  align-self:center;
  line-height:1;
  margin-top:1px;
}
.alloc-focus-details-btn:hover,
.alloc-focus-details[open] .alloc-focus-details-btn,
.alloc-focus-details[data-alloc-detail-open="true"] .alloc-focus-details-btn{
  border-color:rgba(74,122,178,0.40);
  background:linear-gradient(145deg, rgba(255,255,255,1) 0%, rgba(229,241,255,0.96) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.96), 0 8px 18px rgba(30,64,120,0.08);
}

/* Shared 3D surface for the viewport-bound Budget Allocation popovers. */
.alloc-focus-panel,
.splitwise-panel{
  --ui3d-pop-top-a:#65a9ff;
  --ui3d-pop-top-b:#7567ff;
  --ui3d-pop-top-c:#274a78;
  position:fixed;
  isolation:isolate;
  border:1px solid rgba(74,122,178,0.34);
  border-radius:16px;
  background:
    radial-gradient(circle at 88% -20%, rgba(101,169,255,0.22) 0%, rgba(101,169,255,0.00) 42%),
    linear-gradient(145deg, rgba(255,255,255,0.99) 0%, rgba(241,248,255,0.96) 46%, rgba(226,239,255,0.90) 100%);
  box-shadow:
    0 22px 48px rgba(30,64,120,0.18),
    0 7px 18px rgba(30,64,120,0.10),
    inset 0 1px 0 var(--white-98),
    inset 0 -1px 0 var(--slate-glass);
  overflow:auto;
}
.alloc-focus-panel::before,
.splitwise-panel::before{
  content:"";
  position:absolute;
  z-index:2;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, var(--ui3d-pop-top-a) 0%, var(--ui3d-pop-top-b) 54%, var(--ui3d-pop-top-c) 100%);
  pointer-events:none;
}
.alloc-focus-panel::after,
.splitwise-panel::after{
  content:"";
  position:absolute;
  z-index:0;
  top:-70px;
  right:-76px;
  width:190px;
  height:190px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(83,158,240,0.18) 0%, rgba(83,158,240,0.00) 68%);
  pointer-events:none;
}
.alloc-focus-panel > *,
.splitwise-panel > *{
  position:relative;
  z-index:1;
}
.alloc-focus-panel-item,
.splitwise-form,
.splitwise-entry-chip,
.splitwise-empty{
  border-color:rgba(74,122,178,0.16);
  background:var(--white-72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.74);
}
.splitwise-form{
  border-bottom-color:rgba(74,122,178,0.18);
}
.splitwise-form input,
.alloc-focus-panel input{
  border-color:rgba(74,122,178,0.20);
  background:var(--white-92);
}

/* 3D modal shell for Manage Structures, Distribute Savings, and Work Benefits. */
#incomeStructureModal .expense-structure-modal-card,
#savingsStructureModal .expense-structure-modal-card,
#expenseStructureModal .expense-structure-modal-card,
#savingsBudgetModal .expense-structure-modal-card,
#specialFundingSourceModal .expense-structure-modal-card{
  --ui3d-modal-top-a:#65a9ff;
  --ui3d-modal-top-b:#7567ff;
  --ui3d-modal-top-c:#274a78;
  position:absolute;
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(74,122,178,0.36);
  border-radius:18px;
  background:
    radial-gradient(circle at 92% -14%, rgba(101,169,255,0.24) 0%, rgba(101,169,255,0.00) 38%),
    linear-gradient(145deg, rgba(255,255,255,0.99) 0%, rgba(241,248,255,0.96) 44%, rgba(222,237,255,0.88) 100%);
  box-shadow:
    0 30px 72px rgba(30,64,120,0.22),
    0 9px 24px rgba(30,64,120,0.12),
    inset 0 1px 0 var(--white-98),
    inset 0 -1px 0 var(--slate-glass);
}
#incomeStructureModal .expense-structure-modal-card::before,
#savingsStructureModal .expense-structure-modal-card::before,
#expenseStructureModal .expense-structure-modal-card::before,
#savingsBudgetModal .expense-structure-modal-card::before,
#specialFundingSourceModal .expense-structure-modal-card::before{
  content:"";
  position:absolute;
  z-index:4;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, var(--ui3d-modal-top-a) 0%, var(--ui3d-modal-top-b) 54%, var(--ui3d-modal-top-c) 100%);
  pointer-events:none;
}
#incomeStructureModal .expense-structure-modal-card::after,
#savingsStructureModal .expense-structure-modal-card::after,
#expenseStructureModal .expense-structure-modal-card::after,
#savingsBudgetModal .expense-structure-modal-card::after,
#specialFundingSourceModal .expense-structure-modal-card::after{
  content:"";
  position:absolute;
  z-index:0;
  top:-86px;
  right:-96px;
  width:260px;
  height:260px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(83,158,240,0.18) 0%, rgba(83,158,240,0.00) 68%);
  pointer-events:none;
}
#incomeStructureModal .expense-structure-modal-card > *,
#savingsStructureModal .expense-structure-modal-card > *,
#expenseStructureModal .expense-structure-modal-card > *,
#savingsBudgetModal .expense-structure-modal-card > *,
#specialFundingSourceModal .expense-structure-modal-card > *{
  position:relative;
  z-index:1;
}

#incomeStructureModal .chart-modal-head,
#savingsStructureModal .chart-modal-head,
#expenseStructureModal .chart-modal-head,
#savingsBudgetModal .chart-modal-head,
#specialFundingSourceModal .chart-modal-head{
  padding:18px 20px 13px;
  border-bottom:1px solid rgba(74,122,178,0.20);
  background:linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(229,241,255,0.50) 100%);
  color:#263a52;
}
#incomeStructureModal .chart-modal-head h3,
#savingsStructureModal .chart-modal-head h3,
#expenseStructureModal .chart-modal-head h3,
#savingsBudgetModal .chart-modal-head h3,
#specialFundingSourceModal .chart-modal-head h3{
  color:#263a52;
  text-shadow:0 1px 0 var(--white-86);
}
#incomeStructureModal .chart-modal-head .tiny-btn,
#savingsStructureModal .chart-modal-head .tiny-btn,
#expenseStructureModal .chart-modal-head .tiny-btn,
#savingsBudgetModal .chart-modal-head .tiny-btn,
#specialFundingSourceModal .chart-modal-head .tiny-btn{
  border-color:rgba(74,122,178,0.26);
  background:var(--white-72);
  color:#263a52;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.90), 0 5px 12px rgba(30,64,120,0.06);
}
#incomeStructureModal .chart-modal-head .tiny-btn:hover,
#savingsStructureModal .chart-modal-head .tiny-btn:hover,
#expenseStructureModal .chart-modal-head .tiny-btn:hover,
#savingsBudgetModal .chart-modal-head .tiny-btn:hover,
#specialFundingSourceModal .chart-modal-head .tiny-btn:hover{
  border-color:rgba(74,122,178,0.42);
  background:var(--white-92);
}

#incomeStructureModal .planner-sub,
#savingsStructureModal .planner-sub,
#expenseStructureModal .planner-sub,
#savingsBudgetModal .planner-sub,
#specialFundingSourceModal .planner-sub{
  border-bottom:1px solid rgba(74,122,178,0.18);
  background:rgba(255,255,255,0.54);
}
#incomeStructureModal .manage-panel,
#savingsStructureModal .manage-panel,
#expenseStructureModal .manage-panel,
#savingsBudgetModal .manage-panel,
#specialFundingSourceModal .special-funding-field,
#specialFundingSourceModal .special-funding-actions,
#savingsBudgetModal .manage-item{
  border-color:rgba(74,122,178,0.16);
  background:var(--white-62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.78), 0 8px 20px rgba(30,64,120,0.045);
}
#incomeStructureModal .manage-subheader,
#savingsStructureModal .manage-subheader,
#expenseStructureModal .manage-subheader{
  border-bottom-color:rgba(74,122,178,0.16);
  background:rgba(255,255,255,0.46);
}
#incomeStructureModal .manage-item,
#savingsStructureModal .manage-item,
#expenseStructureModal .manage-item{
  border-color:rgba(74,122,178,0.14);
  background:rgba(255,255,255,0.68);
}
#incomeStructureModal .manage-item:hover,
#savingsStructureModal .manage-item:hover,
#expenseStructureModal .manage-item:hover{
  border-color:rgba(74,122,178,0.30);
  background:var(--white-86);
}
#incomeStructureModal .manage-actions,
#savingsStructureModal .manage-actions,
#expenseStructureModal .manage-actions{
  border-top-color:rgba(74,122,178,0.16);
  background:rgba(255,255,255,0.42);
}

/* 3D modal shell extension: Usage Add App/Service + Achievements Create/Customize.
   UI-only: selectors target existing modal shells without changing handlers or form semantics. */
#usageModalOverlay .usage-modal-card,
#customTargetBuilderOverlay .cbm-modal.custom-target-builder-modal,
#badgeCustomizationOverlay .cbm-modal.badge-customize-modal{
  --ui3d-modal-top-a:#65a9ff;
  --ui3d-modal-top-b:#7567ff;
  --ui3d-modal-top-c:#274a78;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(74,122,178,0.36);
  border-radius:18px;
  background:
    radial-gradient(circle at 92% -14%, rgba(101,169,255,0.24) 0%, rgba(101,169,255,0.00) 38%),
    linear-gradient(145deg, rgba(255,255,255,0.99) 0%, rgba(241,248,255,0.96) 44%, rgba(222,237,255,0.88) 100%);
  box-shadow:
    0 30px 72px rgba(30,64,120,0.22),
    0 9px 24px rgba(30,64,120,0.12),
    inset 0 1px 0 var(--white-98),
    inset 0 -1px 0 var(--slate-glass);
}
#usageModalOverlay .usage-modal-card::before,
#customTargetBuilderOverlay .cbm-modal.custom-target-builder-modal::before,
#badgeCustomizationOverlay .cbm-modal.badge-customize-modal::before{
  content:"";
  position:absolute;
  z-index:4;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, var(--ui3d-modal-top-a) 0%, var(--ui3d-modal-top-b) 54%, var(--ui3d-modal-top-c) 100%);
  pointer-events:none;
}
#usageModalOverlay .usage-modal-card::after,
#customTargetBuilderOverlay .cbm-modal.custom-target-builder-modal::after,
#badgeCustomizationOverlay .cbm-modal.badge-customize-modal::after{
  content:"";
  position:absolute;
  z-index:0;
  top:-86px;
  right:-96px;
  width:260px;
  height:260px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(83,158,240,0.18) 0%, rgba(83,158,240,0.00) 68%);
  pointer-events:none;
}
#usageModalOverlay .usage-modal-card > *,
#customTargetBuilderOverlay .cbm-modal.custom-target-builder-modal > *,
#badgeCustomizationOverlay .cbm-modal.badge-customize-modal > *{
  position:relative;
  z-index:1;
}
#usageModalOverlay .usage-modal-head,
#customTargetBuilderOverlay .cbm-header,
#badgeCustomizationOverlay .cbm-header{
  padding:18px 20px 13px;
  border-bottom:1px solid rgba(74,122,178,0.20);
  background:linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(229,241,255,0.50) 100%);
  color:#263a52;
}
#usageModalOverlay .usage-modal-head h4,
#customTargetBuilderOverlay .cbm-title,
#badgeCustomizationOverlay .cbm-title{
  color:#263a52;
  font-weight:850;
  letter-spacing:-0.01em;
  text-shadow:0 1px 0 var(--white-86);
}
#customTargetBuilderOverlay .cbm-sub,
#badgeCustomizationOverlay .cbm-sub{ color:#5d7089; }
#usageModalOverlay .usage-modal-close,
#customTargetBuilderOverlay .cbm-close-btn,
#badgeCustomizationOverlay .cbm-close-btn{
  border:1px solid rgba(74,122,178,0.26);
  background:var(--white-72);
  color:#263a52;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.90), 0 5px 12px rgba(30,64,120,0.06);
}
#usageModalOverlay .usage-modal-close:hover,
#customTargetBuilderOverlay .cbm-close-btn:hover,
#badgeCustomizationOverlay .cbm-close-btn:hover{
  border-color:rgba(74,122,178,0.42);
  background:var(--white-92);
}
#usageModalOverlay .usage-modal-body,
#customTargetBuilderOverlay .custom-target-builder-body,
#badgeCustomizationOverlay .badge-config-body{
  background:rgba(255,255,255,0.34);
}
#usageModalOverlay .usage-form-row,
#customTargetBuilderOverlay .cbm-input-group,
#customTargetBuilderOverlay .custom-target-config-item,
#customTargetBuilderOverlay .custom-target-slot-note,
#badgeCustomizationOverlay .badge-config-item,
#badgeCustomizationOverlay .custom-target-config-item{
  border-color:rgba(74,122,178,0.16);
  background:var(--white-62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.78), 0 8px 20px rgba(30,64,120,0.045);
}
#usageModalOverlay .usage-form-row{
  padding:9px 10px;
  border:1px solid rgba(74,122,178,0.16);
  border-radius:11px;
}
#usageModalOverlay .usage-form-row-2 .usage-form-row{ min-width:0; }
#usageModalOverlay .usage-form-input,
#usageModalOverlay .usage-form-select,
#customTargetBuilderOverlay input[type="text"],
#customTargetBuilderOverlay input[type="number"],
#customTargetBuilderOverlay select,
#badgeCustomizationOverlay input[type="text"],
#badgeCustomizationOverlay input[type="number"],
#badgeCustomizationOverlay select{
  border-color:rgba(74,122,178,0.20);
  background:var(--white-92);
  box-shadow:inset 0 1px 0 var(--white-82);
}
#usageModalOverlay .usage-form-input:focus,
#usageModalOverlay .usage-form-select:focus,
#customTargetBuilderOverlay input:focus,
#customTargetBuilderOverlay select:focus,
#badgeCustomizationOverlay input:focus,
#badgeCustomizationOverlay select:focus{
  border-color:rgba(74,122,178,0.52);
  box-shadow:0 0 0 3px rgba(83,158,240,0.12), inset 0 1px 0 rgba(255,255,255,0.88);
}
#usageModalOverlay .usage-modal-foot,
#customTargetBuilderOverlay .cbm-footer,
#badgeCustomizationOverlay .cbm-footer{
  border-top:1px solid rgba(74,122,178,0.18);
  background:rgba(255,255,255,0.42);
}
#usageModalOverlay .usage-btn-cancel,
#usageModalOverlay .usage-btn-save,
#customTargetBuilderOverlay .cbm-btn-ghost,
#customTargetBuilderOverlay .cbm-btn-primary,
#badgeCustomizationOverlay .cbm-btn-ghost,
#badgeCustomizationOverlay .cbm-btn-primary{
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.75), 0 6px 14px rgba(30,64,120,0.07);
}


#badgeCustomizationOverlay .badge-config-item.is-selected{
  border-color:rgba(99,102,241,0.34);
  background:rgba(99,102,241,0.075);
}

/* Keep requested modals usable on small screens after the elevated shell. */
@media (max-width:760px){
  #incomeStructureModal .expense-structure-modal-card,
  #savingsStructureModal .expense-structure-modal-card,
  #expenseStructureModal .expense-structure-modal-card,
  #savingsBudgetModal .expense-structure-modal-card,
  #specialFundingSourceModal .expense-structure-modal-card,
  #usageModalOverlay .usage-modal-card,
  #customTargetBuilderOverlay .cbm-modal.custom-target-builder-modal,
  #badgeCustomizationOverlay .cbm-modal.badge-customize-modal{
    width:calc(100vw - 20px);
    max-height:calc(100vh - 20px);
    border-radius:16px;
  }
}

/* === canonical-3d-debt-adoption === */
/* ══════════════════════════════════════════════════════
   DEBT TAB — STABILIZED V1
   Standalone setup only. No cross-tab calculation mutations.
   ══════════════════════════════════════════════════════ */


 .debt-mock-card { border: 1px solid var(--line); background: var(--white-58); border-radius: 12px; padding: 12px; box-shadow: inset 0 1px 0 var(--white-82); }
 .debt-card-copy { font-size: 0.68rem; color: var(--muted); line-height: 1.45; margin-top: 4px; }
.debt-card-title { font-size: 0.82rem; font-weight: 850; color: var(--accent-text); margin-bottom: 7px; }
.debt-progress-shell { height: 12px; border-radius: 999px; background: var(--overlay-07); border: 1px solid var(--overlay-08); overflow: hidden; }
.debt-progress-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--sky-700), var(--emerald)); }
.debt-phase-chip { display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(2,132,199,0.22); background: rgba(2,132,199,0.08); color: var(--sky-900); font-size: 0.62rem; font-weight: 800; }
.debt-action-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.debt-action-row .feature-action-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.debt-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.debt-form-field { display: grid; gap: 4px; }
.debt-form-field label { font-size: 0.61rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.055em; }
.debt-form-field input, .debt-form-field select, .debt-form-field textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--card-border); border-radius: 9px; background: var(--panel); color: var(--accent-text); font: inherit; font-size: 0.74rem; outline: none; }
.debt-form-field textarea { min-height: 58px; resize: vertical; line-height: 1.35; }
.debt-form-field input:focus, .debt-form-field select:focus, .debt-form-field textarea:focus { border-color: rgba(2,132,199,0.55); box-shadow: 0 0 0 3px rgba(2,132,199,0.08); }
.debt-form-field.debt-full { grid-column: 1 / -1; }
.debt-early-conditions-block { grid-column: 1 / -1; display: grid; gap: 9px; padding: 12px; border-radius: 14px; border: 1px solid rgba(245,158,11,0.22); background: linear-gradient(180deg, rgba(255,251,235,0.64), var(--white-72)); }
.debt-early-conditions-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.debt-early-conditions-title { font-size: 0.76rem; font-weight: 900; color: var(--accent-text); line-height: 1.2; }
.debt-early-conditions-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 9px; }
.debt-penalty-pill { align-self: flex-start; display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(245,158,11,0.25); background: rgba(255,251,235,0.84); color: var(--red-900); font-size: 0.57rem; font-weight: 900; white-space: nowrap; }
.debt-penalty-summary { border-radius: 10px; border: 1px solid rgba(245,158,11,0.18); background: rgba(255,255,255,0.66); padding: 8px 10px; font-size: 0.64rem; color: var(--red-900); line-height: 1.42; font-weight: 650; }
@media (max-width: 720px) { .debt-early-conditions-grid { grid-template-columns: 1fr; } }
.debt-form-help { font-size: 0.63rem; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.debt-extra-check-list { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:6px; padding:8px; border:1px solid var(--card-border); border-radius:10px; background:rgba(255,255,255,0.55); max-height:150px; overflow:auto; }
.debt-extra-check { display:flex; align-items:center; gap:7px; padding:7px 8px; border-radius:8px; background:var(--white-58); border:1px solid var(--overlay-06); font-size:0.68rem; font-weight:700; color:var(--accent-text); cursor:pointer; }
.debt-extra-check input { width:auto; box-shadow:none; }
.debt-extra-check.is-disabled { opacity:0.55; cursor:not-allowed; }
@media (max-width: 720px) { .debt-extra-check-list { grid-template-columns: 1fr; } }
.debt-modal-note { margin-top: 10px; padding: 8px 10px; border-radius: 9px; background: rgba(2,132,199,0.07); border: 1px solid rgba(2,132,199,0.16); color: var(--sky-900); font-size: 0.66rem; line-height: 1.45; }
.debt-empty-state { padding: 14px; border-radius: 12px; border: 1px dashed rgba(2,132,199,0.28); background: rgba(2,132,199,0.05); color: var(--muted); font-size: 0.72rem; line-height: 1.45; }


.debt-progress-meta { display:flex; justify-content:space-between; gap:8px; margin-top:6px; font-size:0.62rem; color:var(--muted); font-weight:700; }
.debt-sim-output-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.debt-sim-result { border: 1px solid var(--overlay-07); background: rgba(255,255,255,0.55); border-radius: 10px; padding: 9px 10px; min-width: 0; }
.debt-sim-section { margin-top: 10px; border: 1px solid var(--overlay-07); background: rgba(255,255,255,0.44); border-radius: 12px; padding: 10px; display: grid; gap: 8px; }
.debt-sim-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.debt-sim-section-title { font-size:0.68rem; font-weight:850; color:var(--accent-text); }
.debt-sim-section-note { font-size:0.60rem; color:var(--muted); font-weight:650; text-align:right; }
.debt-sim-section .debt-sim-output-grid { margin-top: 0; }
.debt-balance-placeholder { min-height: 248px; }
.debt-balance-placeholder .debt-balance-svg-wrap { min-height: 190px; display:flex; align-items:center; justify-content:center; }
.debt-placeholder-copy { font-size:0.66rem; color:var(--muted); line-height:1.45; text-align:center; max-width:360px; padding: 12px; }

.debt-sim-label { font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.055em; font-weight: 850; color: var(--muted); margin-bottom: 4px; }
.debt-sim-value { font-size: 0.88rem; font-weight: 850; font-family: var(--font-mono); color: var(--accent-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.debt-sim-value.good { color: var(--green-900); }
.debt-sim-value.warn { color: var(--red-900); }
.debt-sim-value.bad { color: var(--red-800); }


.debt-sim-visual { display: grid; gap: 8px; margin-top: 10px; padding: 10px 11px; border-radius: 12px; border: 1px solid var(--overlay-07); background: rgba(255,255,255,0.48); }
.debt-sim-visual-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.debt-sim-visual-title { font-size: 0.68rem; font-weight: 850; color: var(--accent-text); }
.debt-sim-visual-note { font-size: 0.60rem; color: var(--muted); font-weight: 700; }
.debt-sim-bars { display: grid; gap: 7px; }
.debt-sim-bar-row { display: grid; gap: 4px; }
.debt-sim-bar-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 0.62rem; color: var(--muted); font-weight: 750; }
.debt-sim-bar-track { height: 10px; border-radius: 999px; background: var(--overlay-08); border: 1px solid var(--overlay-08); overflow: hidden; }
.debt-sim-bar-fill { height: 100%; min-width: 4px; border-radius: 999px; background: linear-gradient(90deg, #64748b, var(--sky-700)); transition: width 220ms ease; }
.debt-sim-bar-fill.after { background: linear-gradient(90deg, var(--sky-700), var(--emerald)); }
.debt-sim-bar-fill.placeholder { min-width:0; width:100%; opacity:0.28; background: linear-gradient(90deg, rgba(100,116,139,0.35), rgba(2,132,199,0.22)); }
.debt-sim-bar-fill.placeholder.after { background: linear-gradient(90deg, rgba(2,132,199,0.25), var(--emerald-22)); }

.debt-balance-chart { display: grid; gap: 8px; margin-top: 10px; padding: 10px 11px; border-radius: 12px; border: 1px solid var(--overlay-07); background: rgba(255,255,255,0.50); }
.debt-balance-chart-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.debt-balance-chart-title { font-size:0.68rem; font-weight:850; color:var(--accent-text); }
.debt-balance-chart-note { font-size:0.60rem; color:var(--muted); font-weight:700; }
.debt-balance-svg-wrap { position:relative; border-radius:10px; border:1px solid var(--overlay-07); background:linear-gradient(180deg, rgba(2,132,199,0.035), rgba(255,255,255,0.26)); overflow:hidden; }
.debt-balance-svg { display:block; width:100%; height:auto; }
.debt-balance-axis { stroke:rgba(15,23,42,0.12); stroke-width:1; }
.debt-balance-gridline { stroke:rgba(15,23,42,0.075); stroke-width:1; }
.debt-balance-line-normal { fill:none; stroke:#64748b; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.debt-balance-line-extra { fill:none; stroke:var(--emerald); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.debt-balance-area-extra { fill:var(--emerald-10); }
.debt-balance-legend { display:flex; gap:10px; flex-wrap:wrap; align-items:center; font-size:0.62rem; color:var(--muted); font-weight:750; }
.debt-balance-legend-item { display:inline-flex; align-items:center; gap:5px; }
.debt-balance-dot { width:8px; height:8px; border-radius:999px; background:#64748b; }
.debt-balance-dot.extra { background:var(--emerald); }
.debt-balance-caption { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:0.60rem; color:var(--muted); font-weight:700; }


/* Debt Phase 12 readability refactor */
.debt-sim-decision-card {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--overlay-08);
  background: linear-gradient(180deg, rgba(99,102,241,0.07), rgba(255,255,255,0.56));
  display: grid;
  gap: 5px;
}
.debt-sim-decision-card.good { background: linear-gradient(180deg, var(--emerald-14), var(--white-58)); border-color: var(--emerald-22); }
.debt-sim-decision-card.warn, .debt-sim-decision-card.is-empty { background: linear-gradient(180deg, rgba(245,158,11,0.10), var(--white-58)); border-color: rgba(245,158,11,0.24); }
.debt-sim-decision-card.bad { background: linear-gradient(180deg, rgba(239,68,68,0.09), var(--white-58)); border-color: rgba(239,68,68,0.22); }
.debt-sim-decision-eyebrow { font-size: 0.58rem; font-weight: 850; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.debt-sim-decision-title { font-size: 0.92rem; font-weight: 850; color: var(--accent-text); line-height: 1.2; }
.debt-sim-decision-copy { font-size: 0.72rem; color: var(--muted); line-height: 1.45; max-width: 760px; }
.debt-sim-primary-section { border-color: rgba(65,83,100,0.16); background: rgba(255,255,255,0.64); }
.debt-sim-output-grid-primary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.debt-sim-result-readable { min-height: 74px; display: grid; align-content: start; gap: 4px; }
.debt-sim-result-readable { position: relative; overflow: hidden; }
.debt-sim-result-readable::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background: rgba(100,116,139,0.32); }
.debt-sim-result-readable.good { background: linear-gradient(180deg, rgba(16,185,129,0.085), rgba(255,255,255,0.64)); border-color: rgba(16,185,129,0.24); }
.debt-sim-result-readable.good::before { background: var(--emerald); }
.debt-sim-result-readable.warn { background: linear-gradient(180deg, rgba(245,158,11,0.09), rgba(255,255,255,0.64)); border-color: rgba(245,158,11,0.25); }
.debt-sim-result-readable.warn::before { background: var(--amber); }
.debt-sim-result-readable.bad { background: linear-gradient(180deg, rgba(239,68,68,0.075), rgba(255,255,255,0.64)); border-color: rgba(239,68,68,0.23); }
.debt-sim-result-readable.bad::before { background: var(--red-error); }
.debt-sim-result-readable.neutral { background: linear-gradient(180deg, rgba(2,132,199,0.045), var(--white-62)); border-color: rgba(2,132,199,0.14); }
.debt-sim-result-readable.neutral::before { background: var(--sky-700); }
.debt-sim-primary-section { background: linear-gradient(180deg, rgba(2,132,199,0.055), rgba(255,255,255,0.48)); border-color: rgba(2,132,199,0.16); }
.debt-sim-details summary { cursor: pointer; font-size: 0.66rem; font-weight: 850; color: var(--sky-900); padding: 8px 10px; border-radius: 10px; background: rgba(2,132,199,0.06); border: 1px solid rgba(2,132,199,0.14); }
.debt-sim-details[open] summary { margin-bottom: 8px; }
.debt-bank-option-card.option-good { border-color: var(--emerald-22); background: rgba(16,185,129,0.055); }
.debt-bank-option-card.option-warn { border-color: rgba(245,158,11,0.22); background: rgba(245,158,11,0.055); }
.debt-bank-option-card.option-bad { border-color: rgba(239,68,68,0.20); background: rgba(239,68,68,0.045); }
.debt-sim-helper { font-size: 0.60rem; color: var(--muted); line-height: 1.35; font-weight: 500; }
.debt-action-plan {
  margin-top: 10px;
  display: grid;
  gap: 8px;
  padding: 11px 12px;
  border-radius: 13px;
  border: 1px solid var(--emerald-22);
  background: linear-gradient(180deg, var(--emerald-10), var(--white-58));
  position: relative;
  overflow: hidden;
}
.debt-action-plan::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--emerald); }
.debt-action-plan-title { font-size:0.72rem; font-weight:900; color:var(--green-800); }
.debt-action-plan-copy { font-size:0.70rem; color:var(--accent-text); line-height:1.45; font-weight:650; }
.debt-action-plan-copy strong { font-family:var(--font-mono); color:var(--green-800); }
.debt-sim-details { margin-top: 10px; }
.debt-sim-details > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,0.52); color: var(--muted); font-size: 0.64rem; font-weight: 800; }
.debt-sim-details > summary::-webkit-details-marker { display: none; }
.debt-sim-details > summary::before { content: '▾'; font-size: 0.56rem; transition: transform 120ms; }
.debt-sim-details:not([open]) > summary::before { transform: rotate(-90deg); }
.debt-bank-option-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.debt-bank-option-card { border: 1px solid var(--overlay-08); background: rgba(255,255,255,0.55); border-radius: 12px; padding: 10px 11px; display: grid; gap: 8px; }
.debt-bank-option-card.is-selected { border-color: rgba(16,185,129,0.32); background: rgba(16,185,129,0.07); box-shadow: inset 0 0 0 1px var(--emerald-14); }
.debt-bank-option-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.debt-bank-option-head strong { color: var(--accent-text); font-size: 0.70rem; }
.debt-bank-option-head span { color: var(--muted); font-size: 0.62rem; font-weight: 700; text-align:right; }
.debt-bank-option-body { display:grid; gap:4px; font-size:0.64rem; color:var(--muted); }
.debt-bank-option-body strong { color: var(--accent-text); }
.debt-bank-option-body strong.good { color:var(--green-900); }
.debt-bank-option-body strong.warn { color:var(--red-900); }
.debt-bank-option-body strong.bad { color:var(--red-800); }
@media (max-width: 820px) { .debt-sim-output-grid-primary, .debt-bank-option-stack { grid-template-columns: 1fr; } }


@media (max-width: 980px) {  .debt-sim-output-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {  .debt-form-grid, .debt-sim-output-grid{ grid-template-columns: 1fr; } }

/* === debt-phase16-readable-top-cards === */
/* Debt v1 top card readability rebuild */

[data-view="debt"] .debt-readable-card {
  display: grid;
  gap: 10px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.48));
  border-color: rgba(2,132,199,0.14);
}
[data-view="debt"] .debt-readable-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgba(2,132,199,0.42);
}
[data-view="debt"] .debt-readable-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  z-index: 1;
}
[data-view="debt"] .debt-readable-eyebrow {
  font-size: 0.57rem;
  font-weight: 850;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
[data-view="debt"] .debt-readable-title {
  font-size: 0.92rem;
  font-weight: 850;
  letter-spacing: -0.01em;
  color: var(--accent-text);
  line-height: 1.2;
}
[data-view="debt"] .debt-setup-focus,
[data-view="debt"] .debt-health-summary {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 10px;
  align-items: stretch;
  padding: 10px 11px;
  border-radius: 13px;
  border: 1px solid rgba(2,132,199,0.14);
  background: linear-gradient(180deg, rgba(2,132,199,0.065), rgba(255,255,255,0.52));
  position: relative;
  z-index: 1;
}
[data-view="debt"] .debt-setup-focus-label,
[data-view="debt"] .debt-health-summary-label {
  font-size: 0.58rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.065em;
  color: var(--muted);
  margin-bottom: 3px;
}
[data-view="debt"] .debt-setup-focus-value,
[data-view="debt"] .debt-health-summary-value {
  font-size: 1.15rem;
  font-family: var(--font-mono);
  font-weight: 850;
  color: var(--accent-text);
  line-height: 1.1;
}
[data-view="debt"] .debt-setup-source {
  display: grid;
  gap: 3px;
  align-content: center;
  font-size: 0.64rem;
  color: var(--muted);
  line-height: 1.35;
}
[data-view="debt"] .debt-setup-source strong {
  color: var(--accent-text);
  font-size: 0.72rem;
  font-weight: 850;
}
[data-view="debt"] .debt-health-summary-note {
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--muted);
  align-self: center;
}
[data-view="debt"] .debt-readable-grid {
  display: grid;
  gap: 8px;
  position: relative;
  z-index: 1;
}
[data-view="debt"] .debt-readable-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-view="debt"] .debt-readable-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-view="debt"] .debt-readable-tile {
  min-width: 0;
  position: relative;
  overflow: hidden;
  padding: 9px 10px 9px 12px;
  border-radius: 11px;
  border: 1px solid rgba(15,23,42,0.075);
  background: var(--white-58);
}
[data-view="debt"] .debt-readable-tile::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgba(100,116,139,0.30);
}
[data-view="debt"] .debt-readable-tile.good { background: linear-gradient(180deg, rgba(16,185,129,0.085), var(--white-62)); border-color: var(--emerald-22); }
[data-view="debt"] .debt-readable-tile.good::before { background: var(--emerald); }
[data-view="debt"] .debt-readable-tile.warn { background: linear-gradient(180deg, rgba(245,158,11,0.09), var(--white-62)); border-color: rgba(245,158,11,0.24); }
[data-view="debt"] .debt-readable-tile.warn::before { background: var(--amber); }
[data-view="debt"] .debt-readable-tile.bad { background: linear-gradient(180deg, rgba(239,68,68,0.075), var(--white-62)); border-color: rgba(239,68,68,0.22); }
[data-view="debt"] .debt-readable-tile.bad::before { background: var(--red-error); }
[data-view="debt"] .debt-readable-tile.neutral { background: linear-gradient(180deg, rgba(2,132,199,0.045), rgba(255,255,255,0.60)); border-color: rgba(2,132,199,0.13); }
[data-view="debt"] .debt-readable-tile.neutral::before { background: var(--sky-700); }
[data-view="debt"] .debt-readable-label {
  font-size: 0.55rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
[data-view="debt"] .debt-readable-value {
  font-size: 0.9rem;
  font-weight: 850;
  font-family: var(--font-mono);
  color: var(--accent-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-view="debt"] .debt-readable-helper {
  margin-top: 3px;
  font-size: 0.60rem;
  line-height: 1.35;
  color: var(--muted);
  font-weight: 550;
}


[data-view="debt"] .debt-health-card.is-good::before { background: var(--emerald); }
[data-view="debt"] .debt-health-card.is-warn::before { background: var(--amber); }
[data-view="debt"] .debt-health-card.is-bad::before { background: var(--red-error); }
[data-view="debt"] .debt-health-card.is-inactive::before,
[data-view="debt"] .debt-health-card.is-neutral::before { background: #64748b; }
[data-view="debt"] .debt-health-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.60rem;
  font-weight: 850;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--muted);
  white-space: nowrap;
}


[data-view="debt"] .debt-progress-block { position: relative; z-index: 1; }


[data-view="debt"] .debt-health-detail-grid { margin-top: 8px; }
[data-view="debt"] .debt-extra-source-card { grid-column: 1 / -1; }
@media (max-width: 980px) {
  [data-view="debt"] .debt-setup-focus,
  [data-view="debt"] .debt-health-summary,
  [data-view="debt"] .debt-readable-grid.three { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  [data-view="debt"] .debt-readable-grid.two { grid-template-columns: 1fr; }
}

/* Phase 17: stable top layout and always-visible Debt Health details */


[data-view="debt"] .debt-health-details-static {
  position: relative;
  z-index: 1;
  margin-top: 0;
}
[data-view="debt"] .debt-health-detail-grid {
  margin-top: 0;
}
[data-view="debt"] .debt-extra-source-card {
  grid-column: auto;
}


/* === debt-phase22-multi-debt-support === */
/* Phase 22: Multi-debt support — compact overview + modal details */


[data-view="debt"] #debtSubtotal.debt-header-subtotal-hidden { display:none; }


.debt-row-name { font-size:.76rem; font-weight:900; color:var(--accent-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.debt-row-name-btn { appearance:none; -webkit-appearance:none; border:0; background:transparent; padding:0; margin:0; font:inherit; font-weight:900; color:var(--accent-text); text-align:left; cursor:pointer; max-width:100%; justify-self:start; border-radius:6px; }
.debt-row-name-btn:hover { color:#0369a1; text-decoration:underline; text-underline-offset:2px; }
.debt-row-name-btn:focus-visible { outline:2px solid rgba(2,132,199,.36); outline-offset:2px; }


.debt-delete-action { width:30px; height:30px; border-radius:8px; align-self:center; }
.debt-small-action { padding:6px 10px; border-radius:8px; border:1px solid rgba(2,132,199,.22); background:rgba(2,132,199,.08); color:var(--sky-900); font:inherit; font-size:.62rem; font-weight:850; cursor:pointer; }
.debt-small-action:hover { background:rgba(2,132,199,.14); }
.debt-small-action-primary { background:rgba(16,185,129,.10); border-color:rgba(16,185,129,.32); color:var(--green-800); }
.debt-small-action-primary:hover { background:rgba(16,185,129,.16); }
.debt-simulation-modal { width:min(100%, 1120px); max-width:1120px; }
.debt-simulation-body { max-height:min(76vh, 840px); overflow-y:auto; background:linear-gradient(180deg, rgba(234,246,255,0.44), rgba(255,255,255,0.94)); }
.debt-simulation-body .debt-simulator-card { margin:0; }

.debt-detail-modal { width:min(100%, 1080px); max-width:1080px; }
.debt-detail-body { max-height:min(74vh, 820px); overflow-y:auto; display:grid; gap:12px; background:linear-gradient(180deg, rgba(234,246,255,0.44), rgba(255,255,255,0.94)); }
#debtDetailOverlay[data-view="debt"] .debt-readable-card,
#debtDetailOverlay[data-view="debt"] .debt-simulator-card,
#debtDetailOverlay[data-view="debt"] .debt-history-card { margin:0; }
#debtDetailOverlay[data-view="debt"] .debt-card-title,
#debtDetailOverlay[data-view="debt"] .debt-readable-title { line-height:1.15; }
#debtDetailOverlay[data-view="debt"] .debt-readable-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
#debtDetailOverlay[data-view="debt"] .debt-readable-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
#debtDetailOverlay[data-view="debt"] .debt-health-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }


/* === debt-phase22-detail-readability-refactor === */
#debtDetailOverlay[data-view="debt"] .debt-detail-modal { width: min(100%, 1120px); max-width: 1120px; }
#debtDetailOverlay[data-view="debt"] .debt-detail-body { background: linear-gradient(180deg, rgba(241,249,255,0.52), rgba(255,255,255,0.66)); }
#debtDetailOverlay[data-view="debt"] .debt-detail-readability-layout { display: grid; gap: 12px; }
#debtDetailOverlay[data-view="debt"] .debt-detail-hero { padding: 12px; }
#debtDetailOverlay[data-view="debt"] .debt-detail-identity-strip { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) auto; gap: 12px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid rgba(2,132,199,0.12); }
#debtDetailOverlay[data-view="debt"] .debt-detail-identity-title { color: var(--accent-text); font-weight: 900; font-size: 1rem; line-height: 1.12; }
#debtDetailOverlay[data-view="debt"] .debt-detail-identity-meta { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; min-width: 0; }
#debtDetailOverlay[data-view="debt"] .debt-detail-identity-meta span { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(2,132,199,0.14); background: rgba(255,255,255,0.52); color: var(--muted); font-size: 0.62rem; font-weight: 750; }
#debtDetailOverlay[data-view="debt"] .debt-detail-main-answer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: stretch; padding: 11px 12px; border-radius: 14px; border: 1px solid rgba(2,132,199,0.13); background: linear-gradient(180deg, rgba(2,132,199,0.06), var(--white-62)); }
#debtDetailOverlay[data-view="debt"] .debt-detail-main-answer p { margin: 4px 0 0; color: var(--muted); font-size: 0.68rem; line-height: 1.45; }
#debtDetailOverlay[data-view="debt"] .debt-detail-primary-tiles .debt-readable-value, #debtDetailOverlay[data-view="debt"] .debt-detail-activity-tiles .debt-readable-value, #debtDetailOverlay[data-view="debt"] .debt-detail-timeline-tiles .debt-readable-value, #debtDetailOverlay[data-view="debt"] .debt-detail-calc-grid .debt-readable-value { font-size: 0.84rem; }
#debtDetailOverlay[data-view="debt"] .debt-detail-activity-tiles, #debtDetailOverlay[data-view="debt"] .debt-detail-timeline-tiles { align-items: stretch; }
#debtDetailOverlay[data-view="debt"] .debt-detail-activity-tiles .debt-readable-tile, #debtDetailOverlay[data-view="debt"] .debt-detail-timeline-tiles .debt-readable-tile { min-height: 86px; display: flex; flex-direction: column; justify-content: center; }
#debtDetailOverlay[data-view="debt"] .debt-detail-action-row { justify-content: flex-start; flex-wrap: wrap; gap: 8px; margin-top:auto; }
#debtDetailOverlay[data-view="debt"] .debt-detail-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
#debtDetailOverlay[data-view="debt"] .debt-detail-mini-card { padding: 12px; align-content: start; }
#debtDetailOverlay[data-view="debt"] .debt-detail-mini-card .debt-detail-row-list { flex:0 0 auto; }
#debtDetailOverlay[data-view="debt"] .debt-detail-setup-summary,
#debtDetailOverlay[data-view="debt"] .debt-detail-extra-summary,
#debtDetailOverlay[data-view="debt"] .debt-detail-monthly-summary,
#debtDetailOverlay[data-view="debt"] .debt-detail-timeline-summary {
  background: linear-gradient(180deg, var(--surface-light-96), rgba(241,245,249,0.78));
  border-color: rgba(148,163,184,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.74);
}
#debtDetailOverlay[data-view="debt"] .debt-detail-setup-summary::before,
#debtDetailOverlay[data-view="debt"] .debt-detail-extra-summary::before {
  background: #0f6fa8;
  width: 4px;
  opacity: 0.95;
}
#debtDetailOverlay[data-view="debt"] .debt-detail-monthly-summary::before,
#debtDetailOverlay[data-view="debt"] .debt-detail-timeline-summary::before {
  background: rgba(2,132,199,0.46);
  width: 3px;
}
#debtDetailOverlay[data-view="debt"] .debt-detail-setup-summary .debt-detail-row-list > div,
#debtDetailOverlay[data-view="debt"] .debt-detail-extra-summary .debt-detail-row-list > div {
  background: rgba(255,255,255,0.76);
  border-color: var(--slate-18);
}
#debtDetailOverlay[data-view="debt"] .debt-detail-setup-summary .debt-readable-head,
#debtDetailOverlay[data-view="debt"] .debt-detail-extra-summary .debt-readable-head,
#debtDetailOverlay[data-view="debt"] .debt-detail-monthly-summary .debt-readable-head,
#debtDetailOverlay[data-view="debt"] .debt-detail-timeline-summary .debt-readable-head { margin-bottom: 10px; }
#debtDetailOverlay[data-view="debt"] .debt-detail-row-list { display: grid; gap: 7px; }
#debtDetailOverlay[data-view="debt"] .debt-detail-row-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; padding: 7px 9px; border-radius: 10px; border: 1px solid rgba(2,132,199,0.10); background: rgba(255,255,255,0.48); }
#debtDetailOverlay[data-view="debt"] .debt-detail-row-list span { color: var(--muted); font-size: 0.62rem; font-weight: 750; }
#debtDetailOverlay[data-view="debt"] .debt-detail-row-list strong { color: var(--accent-text); font-size: 0.70rem; font-weight: 850; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#debtDetailOverlay[data-view="debt"] .debt-detail-calc-details { position: relative; z-index: 1; }
#debtDetailOverlay[data-view="debt"] .debt-detail-calc-details > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(2,132,199,0.14); background: rgba(255,255,255,0.60); color: var(--sky-900); font-size: 0.64rem; font-weight: 850; }
#debtDetailOverlay[data-view="debt"] .debt-detail-calc-details > summary::-webkit-details-marker { display:none; }
#debtDetailOverlay[data-view="debt"] .debt-detail-calc-details > summary::before { content: '▾'; font-size: 0.56rem; transition: transform 120ms; }
#debtDetailOverlay[data-view="debt"] .debt-detail-calc-details:not([open]) > summary::before { transform: rotate(-90deg); }
#debtDetailOverlay[data-view="debt"] .debt-detail-calc-grid { margin-top: 9px; }
@media (max-width: 980px) { #debtDetailOverlay[data-view="debt"] .debt-detail-identity-strip, #debtDetailOverlay[data-view="debt"] .debt-detail-main-answer, #debtDetailOverlay[data-view="debt"] .debt-detail-two-col, #debtDetailOverlay[data-view="debt"] .debt-readable-grid.three { grid-template-columns: 1fr; } #debtDetailOverlay[data-view="debt"] .debt-detail-identity-meta { justify-content: flex-start; } }

/* === debt-phase22-4-details-grid-refinement === */
/* Phase 22.4 — Details modal grid refinement */
#debtDetailOverlay[data-view="debt"] .debt-detail-four-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:stretch; }
#debtDetailOverlay[data-view="debt"] .debt-detail-four-card-grid > .debt-detail-mini-card { min-height:230px; height:100%; display:flex; flex-direction:column; gap:10px; border-radius:16px; box-shadow:inset 0 1px 0 rgba(255,255,255,.82), 0 10px 24px rgba(15,23,42,.035); }
#debtDetailOverlay[data-view="debt"] .debt-detail-four-card-grid .debt-readable-head { min-height:34px; align-items:flex-start; }
#debtDetailOverlay[data-view="debt"] .debt-detail-setup-summary { background:linear-gradient(180deg, rgba(239,247,252,.98), rgba(226,238,247,.84)); border-color:rgba(14,116,144,.26); }
#debtDetailOverlay[data-view="debt"] .debt-detail-extra-summary { background:linear-gradient(180deg, rgba(239,248,255,.98), rgba(232,244,252,.84)); border-color:rgba(2,132,199,.24); }
#debtDetailOverlay[data-view="debt"] .debt-detail-monthly-summary { background:linear-gradient(180deg, rgba(255,251,235,.96), rgba(248,250,252,.86)); border-color:rgba(245,158,11,.24); }
#debtDetailOverlay[data-view="debt"] .debt-detail-timeline-summary { background:linear-gradient(180deg, rgba(240,253,244,.92), rgba(248,250,252,.88)); border-color:rgba(16,185,129,.22); }
#debtDetailOverlay[data-view="debt"] .debt-detail-setup-summary::before { background:var(--sky-900); width:5px; opacity:1; }
#debtDetailOverlay[data-view="debt"] .debt-detail-extra-summary::before { background:#0369a1; width:5px; opacity:.95; }
#debtDetailOverlay[data-view="debt"] .debt-detail-monthly-summary::before { background:#d97706; width:5px; opacity:.95; }
#debtDetailOverlay[data-view="debt"] .debt-detail-timeline-summary::before { background:#059669; width:5px; opacity:.95; }
#debtDetailOverlay[data-view="debt"] .debt-detail-four-card-grid .debt-detail-row-list > div,
#debtDetailOverlay[data-view="debt"] .debt-detail-four-card-grid .debt-readable-tile { background:rgba(255,255,255,.72); border-color:rgba(148,163,184,.18); }
#debtDetailOverlay[data-view="debt"] .debt-detail-monthly-summary .debt-readable-tile.warn,
#debtDetailOverlay[data-view="debt"] .debt-detail-timeline-summary .debt-readable-tile.warn { background:linear-gradient(180deg, rgba(255,251,235,.96), rgba(255,255,255,.72)); border-color:rgba(245,158,11,.30); }
#debtDetailOverlay[data-view="debt"] .debt-detail-monthly-summary .debt-readable-tile.good,
#debtDetailOverlay[data-view="debt"] .debt-detail-timeline-summary .debt-readable-tile.good { background:linear-gradient(180deg, rgba(236,253,245,.96), rgba(255,255,255,.72)); border-color:rgba(16,185,129,.30); }
#debtDetailOverlay[data-view="debt"] .debt-detail-monthly-summary .debt-readable-tile.neutral,
#debtDetailOverlay[data-view="debt"] .debt-detail-timeline-summary .debt-readable-tile.neutral { background:linear-gradient(180deg, rgba(240,249,255,.92), rgba(255,255,255,.72)); border-color:rgba(2,132,199,.18); }
#debtDetailOverlay[data-view="debt"] .debt-detail-setup-summary .debt-phase-chip,
#debtDetailOverlay[data-view="debt"] .debt-detail-extra-summary .debt-phase-chip { background:rgba(2,132,199,.10); border-color:rgba(2,132,199,.24); color:var(--sky-900); }
@media (max-width:980px){ #debtDetailOverlay[data-view="debt"] .debt-detail-four-card-grid{grid-template-columns:1fr;} #debtDetailOverlay[data-view="debt"] .debt-detail-four-card-grid > .debt-detail-mini-card{min-height:auto;} }

/* === debt-phase24-portfolio-analytics === */
.debt-analytics-modal{width:min(100%,1120px);max-width:1120px}.debt-analytics-body{max-height:min(76vh,840px);overflow-y:auto;background:linear-gradient(180deg,rgba(245,243,255,.50),rgba(255,255,255,.94))}.debt-analytics-layout{display:grid;gap:12px}.debt-analytics-grid{display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);gap:12px;align-items:start}.debt-analytics-col{display:grid;gap:12px;min-width:0}.debt-analytics-card{position:relative;overflow:hidden;padding:13px;border-radius:16px;border:1px solid rgba(148,163,184,.20);background:rgba(255,255,255,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 10px 24px rgba(15,23,42,.035)}.debt-analytics-card::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--da-accent,#94a3b8)}.debt-analytics-card.decision{--da-accent:var(--violet-700);background:linear-gradient(180deg,rgba(245,243,255,.78),var(--white-78));border-color:rgba(124,58,237,.20)}.debt-analytics-card.structure{--da-accent:var(--sky-700);background:linear-gradient(180deg,rgba(240,249,255,.72),var(--white-78))}.debt-analytics-card.good{--da-accent:var(--emerald);background:linear-gradient(180deg,rgba(240,253,244,.70),var(--white-78))}.debt-analytics-card.warn{--da-accent:var(--amber);background:linear-gradient(180deg,rgba(255,251,235,.72),rgba(255,255,255,.80))}.debt-analytics-eyebrow{font-size:.56rem;text-transform:uppercase;letter-spacing:.065em;font-weight:900;color:var(--muted);margin-bottom:4px}.debt-analytics-title{font-size:.92rem;font-weight:900;color:var(--accent-text);line-height:1.18}.debt-analytics-copy{font-size:.68rem;color:var(--muted);line-height:1.48;margin-top:5px}.debt-analytics-main-title{font-size:1.05rem;font-weight:950;color:#4c1d95;line-height:1.18}.debt-analytics-main-copy{font-size:.72rem;color:var(--violet-800);line-height:1.45;margin-top:6px}.debt-analytics-tile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}.debt-analytics-tile-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.debt-analytics-tile{border-radius:13px;border:1px solid rgba(148,163,184,.18);background:rgba(255,255,255,.68);padding:10px;min-width:0}.debt-analytics-tile.good{background:rgba(240,253,244,.72);border-color:rgba(16,185,129,.20)}.debt-analytics-tile.warn{background:rgba(255,251,235,.78);border-color:rgba(245,158,11,.22)}.debt-analytics-tile.decision{background:rgba(245,243,255,.78);border-color:rgba(124,58,237,.20)}.debt-analytics-tile-label{font-size:.55rem;text-transform:uppercase;letter-spacing:.055em;font-weight:900;color:var(--muted);margin-bottom:4px}.debt-analytics-tile-value{font-family:var(--font-mono);font-size:.86rem;font-weight:950;color:var(--accent-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.debt-analytics-tile-helper{font-size:.61rem;color:var(--muted);line-height:1.35;margin-top:3px}.debt-breakdown-list{display:grid;gap:8px;margin-top:10px}.debt-breakdown-row{display:grid;gap:5px}.debt-breakdown-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline}.debt-breakdown-name{font-size:.68rem;font-weight:850;color:var(--accent-text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.debt-breakdown-meta{font-size:.61rem;color:var(--muted);font-family:var(--font-mono);white-space:nowrap}.debt-breakdown-bar{height:9px;border-radius:999px;background:rgba(148,163,184,.16);overflow:hidden;border:1px solid rgba(148,163,184,.14)}.debt-breakdown-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#38bdf8,var(--violet-700));min-width:3px}.debt-analytics-suggestion-list{display:grid;gap:8px;margin-top:10px}.debt-analytics-suggestion{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:flex-start;padding:10px;border-radius:13px;border:1px solid rgba(124,58,237,.16);background:rgba(245,243,255,.58)}.debt-analytics-suggestion-icon{width:25px;height:25px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(124,58,237,.10);color:#4c1d95;font-size:.78rem;font-weight:900}.debt-analytics-suggestion-title{font-size:.72rem;font-weight:900;color:var(--accent-text);line-height:1.25}.debt-analytics-suggestion-copy{font-size:.64rem;color:var(--muted);line-height:1.42;margin-top:2px}.debt-strategy-table{display:grid;gap:7px;margin-top:10px}.debt-strategy-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:9px 10px;border-radius:12px;border:1px solid rgba(148,163,184,.16);background:rgba(255,255,255,.64)}.debt-strategy-row.highlight{background:rgba(240,253,244,.72);border-color:rgba(16,185,129,.22)}.debt-strategy-name{font-size:.68rem;font-weight:900;color:var(--accent-text)}.debt-strategy-meta{font-size:.61rem;color:var(--muted);margin-top:2px}.debt-strategy-val{font-size:.64rem;font-weight:900;font-family:var(--font-mono);color:var(--accent-text);white-space:nowrap}.debt-analytics-empty{padding:16px;border-radius:14px;border:1px dashed rgba(124,58,237,.24);background:rgba(245,243,255,.42);color:var(--muted);font-size:.72rem;line-height:1.5}@media(max-width:980px){.debt-analytics-grid{grid-template-columns:1fr}.debt-analytics-tile-grid{grid-template-columns:1fr}.debt-strategy-row{grid-template-columns:1fr}}

/* === debt-phase25-strategy-engine === */
/* Debt Phase 25 — Strategy Engine modal. Scoped to Debt; no calculation mutation. */

.debt-strategy-modal{width:min(100%,1160px);max-width:1160px}.debt-strategy-body{max-height:min(76vh,860px);overflow-y:auto;background:linear-gradient(180deg,rgba(240,253,244,.42),rgba(255,255,255,.96))}.debt-strategy-layout{display:grid;gap:12px}.debt-strategy-hero{position:relative;overflow:hidden;border-radius:16px;border:1px solid rgba(124,58,237,.20);background:linear-gradient(180deg,rgba(245,243,255,.78),rgba(255,255,255,.82));padding:14px 16px;box-shadow:0 12px 26px rgba(15,23,42,.04)}.debt-strategy-hero::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--violet-700)}.debt-strategy-eyebrow{font-size:.56rem;text-transform:uppercase;letter-spacing:.065em;font-weight:900;color:var(--muted);margin-bottom:4px}.debt-strategy-title{font-size:1.08rem;font-weight:950;color:#4c1d95;line-height:1.18}.debt-strategy-copy{font-size:.72rem;color:var(--violet-800);line-height:1.45;margin-top:6px;max-width:760px}.debt-strategy-grid{display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);gap:12px;align-items:start}.debt-strategy-col{display:grid;gap:12px;min-width:0}.debt-strategy-card{position:relative;overflow:hidden;padding:13px;border-radius:16px;border:1px solid rgba(148,163,184,.20);background:rgba(255,255,255,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 10px 24px rgba(15,23,42,.035)}.debt-strategy-card::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--ds-accent,#94a3b8)}.debt-strategy-card.structure{--ds-accent:var(--sky-700);background:linear-gradient(180deg,rgba(240,249,255,.72),var(--white-78))}.debt-strategy-card.good{--ds-accent:var(--emerald);background:linear-gradient(180deg,rgba(240,253,244,.70),var(--white-78))}.debt-strategy-card.warn{--ds-accent:var(--amber);background:linear-gradient(180deg,rgba(255,251,235,.72),rgba(255,255,255,.80))}.debt-strategy-card.decision{--ds-accent:var(--violet-700);background:linear-gradient(180deg,rgba(245,243,255,.76),rgba(255,255,255,.80))}.debt-strategy-card-title{font-size:.92rem;font-weight:950;color:var(--accent-text);line-height:1.18}.debt-strategy-card-copy{font-size:.67rem;color:var(--muted);line-height:1.48;margin-top:5px}.debt-strategy-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;margin-top:10px}.debt-strategy-input-row .debt-form-field{margin:0}.debt-strategy-input-row input{width:100%}.debt-strategy-comparison{display:grid;gap:8px;margin-top:10px}.debt-strategy-option{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:10px 11px;border-radius:14px;border:1px solid rgba(148,163,184,.18);background:rgba(255,255,255,.68)}.debt-strategy-option.recommended{background:rgba(240,253,244,.78);border-color:rgba(16,185,129,.25)}.debt-strategy-option.caution{background:rgba(255,251,235,.78);border-color:rgba(245,158,11,.24)}.debt-strategy-option-name{font-size:.72rem;font-weight:950;color:var(--accent-text)}.debt-strategy-option-meta{font-size:.62rem;color:var(--muted);line-height:1.35;margin-top:2px}.debt-strategy-option-val{font-size:.66rem;font-weight:950;font-family:var(--font-mono);color:var(--accent-text);white-space:nowrap;text-align:right}.debt-strategy-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:999px;font-size:.56rem;font-weight:900;border:1px solid rgba(148,163,184,.22);background:rgba(255,255,255,.72);color:var(--muted);margin-top:5px}.debt-strategy-chip.good{background:rgba(240,253,244,.88);border-color:rgba(16,185,129,.25);color:var(--green-900)}.debt-strategy-chip.warn{background:rgba(255,251,235,.88);border-color:rgba(245,158,11,.25);color:var(--red-900)}.debt-strategy-chip.decision{background:rgba(245,243,255,.88);border-color:rgba(124,58,237,.25);color:#4c1d95}.debt-strategy-tile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}.debt-strategy-tile{border-radius:13px;border:1px solid rgba(148,163,184,.16);background:rgba(255,255,255,.66);padding:10px;min-width:0}.debt-strategy-tile.good{background:rgba(240,253,244,.76);border-color:rgba(16,185,129,.20)}.debt-strategy-tile.warn{background:rgba(255,251,235,.82);border-color:rgba(245,158,11,.22)}.debt-strategy-tile.decision{background:rgba(245,243,255,.82);border-color:rgba(124,58,237,.22)}.debt-strategy-tile-label{font-size:.55rem;text-transform:uppercase;letter-spacing:.055em;font-weight:900;color:var(--muted);margin-bottom:4px}.debt-strategy-tile-value{font-family:var(--font-mono);font-size:.84rem;font-weight:950;color:var(--accent-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.debt-strategy-tile-helper{font-size:.61rem;color:var(--muted);line-height:1.35;margin-top:3px}.debt-restriction-list{display:grid;gap:8px;margin-top:10px}.debt-restriction-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px;border-radius:13px;border:1px solid rgba(245,158,11,.18);background:rgba(255,251,235,.70)}.debt-restriction-row.flexible{border-color:rgba(16,185,129,.18);background:rgba(240,253,244,.64)}.debt-restriction-name{font-size:.69rem;font-weight:900;color:var(--accent-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.debt-restriction-copy{font-size:.61rem;color:var(--muted);line-height:1.35;margin-top:2px}.debt-restriction-badge{font-size:.56rem;font-weight:900;border-radius:999px;padding:3px 7px;border:1px solid rgba(245,158,11,.25);color:var(--red-900);background:rgba(255,251,235,.9);white-space:nowrap}.debt-restriction-row.flexible .debt-restriction-badge{border-color:rgba(16,185,129,.25);color:var(--green-900);background:rgba(240,253,244,.9)}.debt-strategy-action-list{display:grid;gap:8px;margin-top:10px}.debt-strategy-action{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:flex-start;padding:10px;border-radius:13px;border:1px solid rgba(124,58,237,.16);background:rgba(245,243,255,.58)}.debt-strategy-action-icon{width:25px;height:25px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(124,58,237,.10);color:#4c1d95;font-size:.78rem;font-weight:900}.debt-strategy-action-title{font-size:.72rem;font-weight:950;color:var(--accent-text);line-height:1.25}.debt-strategy-action-copy{font-size:.64rem;color:var(--muted);line-height:1.42;margin-top:2px}.debt-strategy-empty{padding:16px;border-radius:14px;border:1px dashed rgba(124,58,237,.24);background:rgba(245,243,255,.42);color:var(--muted);font-size:.72rem;line-height:1.5}@media(max-width:980px){.debt-strategy-grid{grid-template-columns:1fr}.debt-strategy-option{grid-template-columns:1fr}.debt-strategy-tile-grid{grid-template-columns:1fr}.debt-strategy-input-row{grid-template-columns:1fr}}

/* === debt-phase27-behavioral-intelligence-clean === */
/* Phase 27 — Behavioral Intelligence (clean non-destructive layer) */
[data-view="debt"] .debt-bi-line,
#debtDetailOverlay[data-view="debt"] .debt-bi-line,
#debtSimulationOverlay[data-view="debt"] .debt-bi-line,
#debtPortfolioOverlay[data-view="debt"] .debt-bi-line { display:flex; align-items:flex-start; gap:8px; padding:8px 10px; border-radius:10px; border:1px solid var(--line); background:var(--panel-2); color:var(--accent-text); font-size:0.68rem; font-weight:600; line-height:1.42; }
[data-view="debt"] .debt-bi-line::before,
#debtDetailOverlay[data-view="debt"] .debt-bi-line::before,
#debtSimulationOverlay[data-view="debt"] .debt-bi-line::before,
#debtPortfolioOverlay[data-view="debt"] .debt-bi-line::before { content:'•'; width:16px; height:16px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 16px; margin-top:1px; font-size:0.72rem; line-height:1; color:var(--white); background:#64748b; }
[data-view="debt"] .debt-bi-line.bi-good, #debtDetailOverlay[data-view="debt"] .debt-bi-line.bi-good, #debtSimulationOverlay[data-view="debt"] .debt-bi-line.bi-good, #debtPortfolioOverlay[data-view="debt"] .debt-bi-line.bi-good { background:var(--emerald-10); border-color:var(--emerald-22); color:var(--green-800); }
[data-view="debt"] .debt-bi-line.bi-good::before, #debtDetailOverlay[data-view="debt"] .debt-bi-line.bi-good::before, #debtSimulationOverlay[data-view="debt"] .debt-bi-line.bi-good::before, #debtPortfolioOverlay[data-view="debt"] .debt-bi-line.bi-good::before { background:var(--emerald); content:'✓'; }
[data-view="debt"] .debt-bi-line.bi-warn, #debtDetailOverlay[data-view="debt"] .debt-bi-line.bi-warn, #debtSimulationOverlay[data-view="debt"] .debt-bi-line.bi-warn, #debtPortfolioOverlay[data-view="debt"] .debt-bi-line.bi-warn { background:rgba(245,158,11,0.10); border-color:rgba(245,158,11,0.28); color:var(--red-900); }
[data-view="debt"] .debt-bi-line.bi-warn::before, #debtDetailOverlay[data-view="debt"] .debt-bi-line.bi-warn::before, #debtSimulationOverlay[data-view="debt"] .debt-bi-line.bi-warn::before, #debtPortfolioOverlay[data-view="debt"] .debt-bi-line.bi-warn::before { background:var(--amber); content:'!'; }
[data-view="debt"] .debt-bi-line.bi-bad, #debtDetailOverlay[data-view="debt"] .debt-bi-line.bi-bad, #debtSimulationOverlay[data-view="debt"] .debt-bi-line.bi-bad, #debtPortfolioOverlay[data-view="debt"] .debt-bi-line.bi-bad { background:rgba(239,68,68,0.08); border-color:rgba(239,68,68,0.24); color:var(--red-800); }
[data-view="debt"] .debt-bi-line.bi-bad::before, #debtDetailOverlay[data-view="debt"] .debt-bi-line.bi-bad::before, #debtSimulationOverlay[data-view="debt"] .debt-bi-line.bi-bad::before, #debtPortfolioOverlay[data-view="debt"] .debt-bi-line.bi-bad::before { background:var(--red-error); content:'!'; }
[data-view="debt"] .debt-bi-line.bi-info, #debtDetailOverlay[data-view="debt"] .debt-bi-line.bi-info, #debtSimulationOverlay[data-view="debt"] .debt-bi-line.bi-info, #debtPortfolioOverlay[data-view="debt"] .debt-bi-line.bi-info { background:rgba(99,102,241,0.08); border-color:rgba(99,102,241,0.22); color:var(--indigo-600); }
[data-view="debt"] .debt-bi-line.bi-info::before, #debtDetailOverlay[data-view="debt"] .debt-bi-line.bi-info::before, #debtSimulationOverlay[data-view="debt"] .debt-bi-line.bi-info::before, #debtPortfolioOverlay[data-view="debt"] .debt-bi-line.bi-info::before { background:var(--indigo-700); content:'i'; }
[data-view="debt"] .debt-health-card > .debt-bi-line { margin:8px 0 0; }
#debtDetailOverlay[data-view="debt"] .debt-detail-hero > .debt-bi-line { margin:10px 0 0; }
#debtSimulationOverlay[data-view="debt"] .debt-sim-answer-panel > .debt-bi-line { margin:0 0 10px; }


/* === smart-insights-content-cleanup-v1310 === */
.smart-insights-card-body #insightGrid .forecast-driver-box {
  margin-top:10px;
  padding:9px 10px;
  border-radius:12px;
  background:rgba(255,255,255,0.68);
  border:1px solid var(--slate-22);
}

.smart-insights-card-body #insightGrid .forecast-driver-head {
  margin-bottom:6px;
  font-family:var(--font, inherit);
  font-size:0.62rem;
  font-weight:800;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.055em;
}

.smart-insights-card-body #insightGrid .forecast-driver-list {
  display:grid;
  gap:5px;
}

.smart-insights-card-body #insightGrid .forecast-driver-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(92px,auto) 44px 44px;
  column-gap:10px;
  align-items:center;
  min-height:24px;
  font-family:var(--font, inherit);
}

.smart-insights-card-body #insightGrid .forecast-driver-label {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--accent-text);
  font-size:0.72rem;
  font-weight:600;
}

.smart-insights-card-body #insightGrid .forecast-driver-value {
  display:contents;
  width:auto;
  font-family:var(--font-mono, monospace);
  font-variant-numeric:tabular-nums;
}

.smart-insights-card-body #insightGrid .forecast-driver-amount {
  width:auto;
  justify-self:end;
  text-align:right;
  color:var(--accent-text);
  font-size:0.72rem;
  font-weight:800;
  font-family:var(--font-mono, monospace);
}

.smart-insights-card-body #insightGrid .forecast-driver-share {
  width:auto;
  justify-self:end;
  text-align:right;
  color:var(--muted);
  font-size:0.62rem;
  font-weight:700;
  font-family:var(--font-mono, monospace);
}

.smart-insights-card-body #insightGrid .forecast-driver-badge {
  width:auto;
  min-width:38px;
  justify-self:end;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(99,102,241,0.10);
  border:1px solid rgba(99,102,241,0.18);
  color:var(--indigo-600);
  font-size:0.55rem;
  font-weight:800;
  line-height:1.1;
}

.smart-insights-card-body #insightGrid .forecast-driver-badge.is-empty {
  visibility:hidden;
}

/* The four lower forecast metrics now read as a stable 2x2 block instead of a cramped row. */
.smart-insights-card-body #insightGrid .forecast-secondary-grid {
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px;
}

.smart-insights-card-body #insightGrid .forecast-metric {
  min-height:86px;
  padding:8px 9px;
  border-radius:10px;
  justify-content:flex-start;
  gap:4px;
}

.smart-insights-card-body #insightGrid .forecast-secondary-grid .forecast-metric {
  min-height:92px;
}

.smart-insights-card-body #insightGrid .forecast-metric-label {
  min-height:0;
  font-family:var(--font, inherit);
  font-size:0.58rem;
  line-height:1.12;
  letter-spacing:0.045em;
  text-transform:uppercase;
  font-weight:800;
}

.smart-insights-card-body #insightGrid .forecast-metric strong {
  margin:2px 0;
  font-size:0.82rem;
  line-height:1.1;
  font-weight:850;
  font-family:var(--font-mono, monospace);
}

.smart-insights-card-body #insightGrid .forecast-metric small {
  min-height:0;
  font-family:var(--font, inherit);
  font-size:0.62rem;
  line-height:1.25;
  color:var(--muted);
}

/* Smart Budget Guidance: less prose, more scannable. */
.smart-insights-card-body #insightGrid .guidance-tile-grid {
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:8px;
}

.smart-insights-card-body #insightGrid .guidance-tile {
  padding:9px 10px;
  gap:6px;
  border-radius:12px;
  min-height:116px;
  align-content:start;
}

.smart-insights-card-body #insightGrid .guidance-tile .tile-label {
  font-family:var(--font, inherit);
  font-size:0.58rem;
  line-height:1.1;
  letter-spacing:0.055em;
  font-weight:850;
  color:var(--muted);
}

.smart-insights-card-body #insightGrid .guidance-tile .tile-copy {
  font-family:var(--font, inherit);
  font-size:0.70rem;
  line-height:1.32;
  font-weight:560;
  color:var(--accent-text);
}

.smart-insights-card-body #insightGrid .guidance-hero {
  font-size:0.80rem;
  line-height:1.35;
  font-weight:750;
}

@media (max-width:980px) {
  .smart-insights-card-body #insightGrid .guidance-tile-grid,
  .smart-insights-card-body #insightGrid .forecast-secondary-grid {
    grid-template-columns:1fr;
  }

  .smart-insights-card-body #insightGrid .forecast-driver-row {
    grid-template-columns:minmax(0,1fr) minmax(84px,auto) 38px 38px;
  }
}

/* === current-budget-header-alignment-v1176 === */
/* v1176 — Current Budget Allocation header now matches Budget Allocation header. */
[data-view="overview"] .overview-chart-card .overview-card-headline{
  min-height:0;
  width:100%;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px 0;
  padding:9px 12px;
  border:0;
  border-bottom:1px solid rgba(111,135,154,0.16);
  border-radius:8px 8px 0 0;
  background:transparent;
}

[data-view="overview"] .overview-chart-card .overview-card-headline .focus-head{
  display:flex;
  align-items:center;
  min-height:0;
  padding:0;
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

[data-view="overview"] .overview-chart-card .overview-card-headline .focus-head h3{
  margin:0;
  color:var(--accent-text);
  font-size:0.86rem;
  font-weight:850;
  line-height:1.2;
  white-space:nowrap;
}


[data-view="overview"] .overview-chart-card [data-view="overview"] .overview-chart-card [data-view="overview"] .overview-chart-card.ui-3d-panel{
  padding-top:0;
  overflow:hidden;
}

[data-view="overview"] .overview-chart-card .distribution-stage{
  padding:0 16px 14px;
}

/* === smart-insights-border-cleanup-v1310 === */


/* Forecast Why rows: border-only alignment polish, preserving their existing background. */
.smart-insights-card-body #insightGrid .forecast-driver-row{
  border:1px solid var(--slate-22);
  border-radius:10px;
}

/* Keep the Main pill border visually consistent without changing its fill. */
.smart-insights-card-body #insightGrid .forecast-driver-badge{
  border:1px solid rgba(99,102,241,0.20);
  border-radius:999px;
}

/* === smart-insights-text-fit-cleanup-v1310 === */
/* Monthly Forecast / Why / Live Drivers: give each row breathing room from the left border. */
.smart-insights-card-body #insightGrid .forecast-driver-list{
  gap:6px;
}

.smart-insights-card-body #insightGrid .forecast-driver-row{
  padding:6px 9px 6px 12px;
  box-sizing:border-box;
}

.smart-insights-card-body #insightGrid .forecast-driver-label{
  padding-left:2px;
}

/* Smart Budget Guidance: never clip the guidance copy. 
   Tiles are allowed to grow so the complete text remains visible. */
.smart-insights-card-body #insightGrid .guidance-tile-grid{
  align-items:stretch;
}

.smart-insights-card-body #insightGrid .guidance-tile{
  min-height:unset;
  height:auto;
  overflow:visible;
  align-content:start;
}

.smart-insights-card-body #insightGrid .guidance-tile .tile-copy{
  display:block;
  max-height:none;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:auto;
  font-size:0.68rem;
  line-height:1.32;
}

/* Allow the whole Smart Budget Guidance card to expand with its content. */
.smart-insights-card-body #insightGrid .guidance-card,
.smart-insights-card-body #insightGrid .guidance-layout,
.smart-insights-card-body #insightGrid .guidance-main{
  height:auto;
  min-height:0;
  overflow:visible;
}

/* On medium screens, stack guidance tiles before the text becomes cramped. */
@media (max-width:1180px){
  .smart-insights-card-body #insightGrid .guidance-tile-grid{
    grid-template-columns:1fr;
  }
}

/* === guidance-microcopy-cleanup-v1176 === */
/* v1176 — Smart Budget Guidance concise microcopy.
   Complete text remains visible, but copy is rewritten into short decision-focused signals. */
.smart-insights-card-body #insightGrid .guidance-tile{
  min-height:88px;
  padding:9px 10px;
}

.smart-insights-card-body #insightGrid .guidance-tile .tile-copy{
  font-size:0.72rem;
  line-height:1.28;
  font-weight:650;
  color:var(--accent-text);
}

/* === budget-allocation-popover-fit-v1176 === */
/* v1176 — Budget Allocation detail popover fit.
   Keeps Details / Manage Shared Expenses / Add Shared Expenses panels viewport-bound,
   compact, and sized to natural content to avoid unnecessary internal scrollbars. */
.alloc-focus-panel{
  width:min(340px, calc(100vw - 24px));
  max-width:min(340px, calc(100vw - 24px));
  overflow:visible;
  scrollbar-gutter:auto;
  padding:9px;
  gap:7px;
  box-sizing:border-box;
}

.alloc-focus-panel-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}

.alloc-focus-panel-item{
  padding:7px 8px;
  gap:3px;
}

.alloc-focus-panel-label{
  font-size:0.50rem;
  line-height:1;
}

.alloc-focus-panel-value{
  font-size:0.66rem;
  line-height:1.1;
}

.alloc-focus-splitwise-block{
  gap:5px;
}

.alloc-focus-splitwise-block .splitwise-toggle{
  min-height:28px;
  padding:5px 8px;
}

.alloc-focus-panel .splitwise-panel{
  max-height:min(360px, calc(100vh - 40px));
  overflow:auto;
}

/* Prevent the rightmost trigger column from forcing the panel outside of the card/page. */
.alloc-focus-details{
  min-width:0;
  justify-self:stretch;
}

.alloc-focus-details-btn{
  max-width:100%;
}

/* On narrow screens the detail panel can use more width, still viewport-bound. */
@media (max-width:760px){
  .alloc-focus-panel{
    width:min(420px, calc(100vw - 20px));
    max-width:min(420px, calc(100vw - 20px));
  }
}

/* === budget-allocation-lower-popovers-v1176 === */
/* v1176 — Budget Allocation lower-row popover placement.
   Lower rows open upward when needed and render above following sections/cards. */
.alloc-focus-details[open]{
  z-index:9996;
}

.alloc-focus-panel{
  z-index:9999;
}

.alloc-focus-panel[data-open-direction="up"]{
  transform-origin:bottom right;
}

.alloc-focus-panel[data-open-direction="down"]{
  transform-origin:top right;
}

/* Keep the allocation card from clipping fixed/floating detail panels. */
.overview-allocation-card,
.overview-allocation-card .allocation-section,
.overview-allocation-card .alloc-focus-wrap,
.overview-allocation-card .alloc-focus-list{
  overflow:visible;
}

/* === recurring-alignment-clean-v1176 === */
/* v1176 — Budget Allocation recurring note alignment.
   Targets the actual rendered note class only; removes the prior broad p-selector patch. */
.overview-allocation-card .alloc-subscription-note{
  margin:0;
  padding:0 8px;
  box-sizing:border-box;
  width:100%;
  max-width:none;
  line-height:1.35;
}

.overview-allocation-card .alloc-top-row + .alloc-subscription-note{
  margin-top:-2px;
}

@media (max-width:760px){
  .overview-allocation-card .alloc-subscription-note{
    padding:0 6px;
  }
}

/* === expense-popup-red-inputs-v1176 === */
/* v1176 — Expense popup input layout.
   Mirrors the Income/Savings entry-field treatment, using red tint for expense outflow fields.
   UI-only: no expense maths, validation, or transaction logic changed. */

.expense-selected-editor .expense-editor-row-inline .expense-inline-log,

.expense-selected-editor .expense-editor-row-inline .expense-inline-log::placeholder,
.expense-selected-editor .expense-editor-row-inline .expense-inline-note::placeholder{
  color:rgba(127,29,29,0.58);
}

.expense-selected-editor .expense-editor-row-inline .expense-inline-log:focus,
.expense-selected-editor .expense-editor-row-inline .expense-inline-note:focus{
  background:rgba(255,255,255,0.94);
  border-color:var(--red-error);
  outline:none;
  box-shadow:0 0 0 3px rgba(239,68,68,0.12), inset 0 0 0 1px rgba(239,68,68,0.08);
}

/* Keep the red controls visually grouped like the cash-flow inputs,
   without changing surrounding planned amount / cadence / buttons. */
.expense-selected-editor .expense-editor-row-inline .expense-inline-log,

/* === expense-entry-full-red-frame-v1176 === */
/* v1176 — Expense popup entry component clean rebuild.
   The amount, required note, cadence dropdown and Add Entry button all live inside one red framed entry component.
   UI-only: no expense maths, validation, data attributes, or transaction logic changed. */

.expense-selected-editor .expense-entry-controls{
  display:grid;
  grid-template-columns:110px minmax(0,1fr) auto;
  gap:10px;
  align-items:start;
}

.expense-selected-editor .expense-entry-controls > *{
  min-width:0;
}

.expense-selected-editor .expense-inline-planned{
  width:110px;
  min-width:110px;
  max-width:110px;
}

.expense-selected-editor .expense-inline-planned-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 10px;
  border:1px dashed var(--line);
  border-radius:10px;
  background:var(--panel-2);
  color:var(--muted);
  font-size:0.68rem;
  font-weight:700;
}

.expense-selected-editor .expense-inline-entry-controls{
  position:relative;
  display:grid;
  grid-template-columns:120px minmax(180px,1fr) 180px 120px;
  gap:7px;
  align-items:center;
  min-height:40px;
  padding:8px;
  border:1px solid rgba(239,68,68,0.24);
  background:linear-gradient(180deg, rgba(254,242,242,0.92) 0%, rgba(255,241,242,0.62) 100%);
  border-radius:12px;
  box-shadow:inset 0 1px 0 var(--white-82), 0 8px 18px rgba(239,68,68,0.07);
}

.expense-selected-editor .expense-inline-entry-controls::before{
  content:'Add expense entry';
  position:absolute;
  left:10px;
  top:-9px;
  padding:1px 7px;
  border-radius:999px;
  border:1px solid rgba(239,68,68,0.26);
  background:var(--white);
  color:#0f172a;
  font-size:0.56rem;
  font-weight:800;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

.expense-selected-editor .expense-inline-entry-controls input[data-input],
.expense-selected-editor .expense-inline-entry-controls input[data-note]{
  min-height:25px;
  height:25px;
  border:1px solid rgba(239,68,68,0.40);
  border-radius:6px;
  background:var(--white);
  color:var(--accent-text);
  box-shadow:0 1px 0 rgba(255,255,255,0.9), 0 0 0 3px rgba(239,68,68,0.055);
}

.expense-selected-editor .expense-inline-entry-controls input[data-input]:focus,
.expense-selected-editor .expense-inline-entry-controls input[data-note]:focus{
  border-color:rgba(220,38,38,0.78);
  box-shadow:0 0 0 4px rgba(239,68,68,0.15);
  outline:none;
}

.expense-selected-editor .expense-inline-entry-controls input[data-input]::placeholder,
.expense-selected-editor .expense-inline-entry-controls input[data-note]::placeholder{
  color:rgba(127,29,29,0.60);
}

.expense-selected-editor .expense-inline-note-wrap{
  position:relative;
  width:100%;
  min-width:0;
}

.expense-selected-editor .expense-inline-note{
  width:100%;
}

.expense-selected-editor .expense-inline-cadence{
  min-width:0;
  width:100%;
}

.expense-selected-editor .expense-inline-cadence .filter-dropdown{
  width:100%;
  min-width:0;
}

.expense-selected-editor .expense-inline-cadence .filter-dropdown-summary,
.expense-selected-editor .expense-inline-cadence button{
  min-height:25px;
}

.expense-selected-editor .expense-inline-add{
  width:120px;
  min-width:120px;
  min-height:25px;
  white-space:nowrap;
  align-self:center;
}

.expense-selected-editor .expense-inline-check{
  justify-self:start;
  align-self:center;
  white-space:nowrap;
  min-height:40px;
  display:inline-flex;
  align-items:center;
}

.expense-selected-editor .expense-inline-check-placeholder{
  width:1px;
  min-width:1px;
}

@media (max-width:1100px){
  .expense-selected-editor .expense-entry-controls{
    grid-template-columns:1fr;
  }
  .expense-selected-editor .expense-inline-planned{
    width:100%;
    min-width:0;
    max-width:none;
  }
  .expense-selected-editor .expense-inline-entry-controls{
    grid-template-columns:1fr 1fr;
  }
  .expense-selected-editor .expense-inline-add{
    width:100%;
    min-width:0;
  }
}

@media (max-width:700px){
  .expense-selected-editor .expense-inline-entry-controls{
    grid-template-columns:1fr;
  }
}

/* === expense-popup-tile-color-refinements-v1176 === */
/* v1176 — Expense category popup tile color refinements.
   Scoped to the Expenses modal only. UI colors only; no logic or data flow changed. */

/* 1) Top stat tiles: subtle differentiated color so Category Total / Budget / Entries read as summary KPIs. */
.expense-group-modal-centered .expense-modal-hero-stats .expense-hero-block:nth-child(1){
  background:linear-gradient(145deg, rgba(239,246,255,0.96), rgba(219,234,254,0.48));
  border-color:rgba(59,130,246,0.20);
  box-shadow:inset 0 1px 0 var(--white-86), 0 8px 18px rgba(59,130,246,0.055);
}
.expense-group-modal-centered .expense-modal-hero-stats .expense-hero-block:nth-child(2){
  background:linear-gradient(145deg, var(--tone-warn-bg), rgba(254,215,170,0.38));
  border-color:rgba(249,115,22,0.20);
  box-shadow:inset 0 1px 0 var(--white-86), 0 8px 18px rgba(249,115,22,0.055);
}
.expense-group-modal-centered .expense-modal-hero-stats .expense-hero-block:nth-child(3){
  background:linear-gradient(145deg, rgba(245,243,255,0.96), rgba(221,214,254,0.42));
  border-color:rgba(139,92,246,0.20);
  box-shadow:inset 0 1px 0 var(--white-86), 0 8px 18px rgba(139,92,246,0.055);
}

/* 2) Sub-Categories panel: warmer orange surface instead of neutral grey. */
.expense-group-modal-centered .expense-left-panel-card{
  background:linear-gradient(180deg, rgba(255,251,235,0.90), rgba(255,247,237,0.62));
  border-color:rgba(249,115,22,0.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.90), 0 10px 24px rgba(249,115,22,0.06);
}
.expense-group-modal-centered .expense-left-panel-card::before{
  background:linear-gradient(90deg, rgba(251,191,36,0.72), rgba(249,115,22,0.72));
}
.expense-group-modal-centered .expense-left-panel-card .expense-panel-label{
  color:var(--expense-cat-cta);
}

/* Keep sub-category tiles readable against the warmer panel. */
.expense-group-modal-centered .expense-left-panel-card .expense-subcat-tile{
  background:var(--slate-22);
  border-color:rgba(100,116,139,0.35);
}
.expense-group-modal-centered .expense-left-panel-card .expense-subcat-tile:hover{
  border-color:rgba(249,115,22,0.30);
  box-shadow:0 8px 18px rgba(249,115,22,0.08);
}
.expense-group-modal-centered .expense-left-panel-card .expense-subcat-tile.is-active{
  background:var(--white-92);
  border-color:rgba(100,116,139,0.55);
  box-shadow:0 10px 20px rgba(15,23,42,0.10);
}

/* 3) Selected Sub-Category: darker blue tile treatment. */
.expense-group-modal-centered .expense-selected-editor{
  background:linear-gradient(180deg, rgba(219,234,254,0.88), rgba(191,219,254,0.50));
  border-color:rgba(37,99,235,0.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.90), 0 12px 28px rgba(37,99,235,0.10);
}
.expense-group-modal-centered .expense-selected-editor::before{
  background:linear-gradient(90deg, rgba(96,165,250,0.80), rgba(29,78,216,0.80));
}
.expense-group-modal-centered .expense-selected-editor .expense-panel-label,
.expense-group-modal-centered .expense-selected-editor .expense-selected-title{
  color:#1e3a8a;
}
.expense-group-modal-centered .expense-selected-editor .expense-selected-chip{
  background:rgba(239,246,255,0.86);
  border-color:rgba(37,99,235,0.22);
  color:#1e3a8a;
}
.expense-group-modal-centered .expense-selected-editor .expense-selected-kpis div{
  background:var(--white-72);
  border-color:rgba(37,99,235,0.18);
}

/* === subcategory-accent-v1176 === */
/* Selected subcategory accent line */
.expense-group-modal-centered .expense-left-panel-card .expense-subcat-tile.is-active{
  position:relative;
}

/* === expense-subcategory-dynamic-accent-v1176 === */
.expense-group-modal-centered .expense-modal-hero-stats .expense-hero-block:nth-child(1){
  background:linear-gradient(145deg, rgba(239,246,255,0.96), rgba(219,234,254,0.42));
  border-color:rgba(59,130,246,0.18);
  box-shadow:inset 0 1px 0 var(--white-86), 0 8px 18px rgba(59,130,246,0.05);
}
.expense-group-modal-centered .expense-modal-hero-stats .expense-hero-block:nth-child(2){
  background:linear-gradient(145deg, rgba(248,250,252,0.98), rgba(226,232,240,0.48));
  border-color:rgba(100,116,139,0.18);
  box-shadow:inset 0 1px 0 var(--white-86), 0 8px 18px rgba(100,116,139,0.045);
}
.expense-group-modal-centered .expense-modal-hero-stats .expense-hero-block:nth-child(3){
  background:linear-gradient(145deg, rgba(245,243,255,0.96), rgba(221,214,254,0.36));
  border-color:rgba(139,92,246,0.18);
  box-shadow:inset 0 1px 0 var(--white-86), 0 8px 18px rgba(139,92,246,0.045);
}

.expense-group-modal-centered .expense-left-panel-card{
  background:linear-gradient(180deg, rgba(241,245,249,0.94), rgba(226,232,240,0.58));
  border-color:rgba(100,116,139,0.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.88), 0 10px 24px rgba(15,23,42,0.055);
}
.expense-group-modal-centered .expense-left-panel-card::before{
  background:linear-gradient(90deg, rgba(148,163,184,0.75), rgba(71,85,105,0.65));
}
.expense-group-modal-centered .expense-left-panel-card .expense-panel-label{
  color:#475569;
}

.expense-group-modal-centered .expense-left-panel-card .expense-subcat-tile{
  position:relative;
  background:rgba(203,213,225,0.34);
  border-color:rgba(100,116,139,0.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.70);
}

.expense-group-modal-centered .expense-left-panel-card .expense-subcat-tile.is-active{
  background:var(--white-92);
  border-color:var(--expense-subcat-accent-border, var(--expense-modal-cat-border, rgba(100,116,139,0.42)));
  box-shadow:0 10px 20px rgba(15,23,42,0.10), inset 0 1px 0 rgba(255,255,255,0.90);
}

.expense-group-modal-centered .expense-left-panel-card .expense-subcat-tile.is-active::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--expense-subcat-accent, var(--expense-modal-cat, #64748b));
  display:block;
}

.expense-group-modal-centered .expense-left-panel-card .expense-subcat-tile:hover{
  border-color:var(--expense-subcat-accent-border, var(--expense-modal-cat-border, rgba(100,116,139,0.32)));
  box-shadow:0 8px 18px rgba(15,23,42,0.075), inset 0 1px 0 rgba(255,255,255,0.78);
}

.expense-group-modal-centered .expense-selected-editor{
  background:linear-gradient(180deg, rgba(219,234,254,0.88), rgba(191,219,254,0.50));
  border-color:rgba(37,99,235,0.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.90), 0 12px 28px rgba(37,99,235,0.10);
}
.expense-group-modal-centered .expense-selected-editor::before{
  background:linear-gradient(90deg, rgba(96,165,250,0.80), rgba(29,78,216,0.80));
}
.expense-group-modal-centered .expense-selected-editor .expense-panel-label,
.expense-group-modal-centered .expense-selected-editor .expense-selected-title{
  color:#1e3a8a;
}
.expense-group-modal-centered .expense-selected-editor .expense-selected-chip{
  background:rgba(239,246,255,0.86);
  border-color:rgba(37,99,235,0.22);
  color:#1e3a8a;
}
.expense-group-modal-centered .expense-selected-editor .expense-selected-kpis div{
  background:var(--white-72);
  border-color:rgba(37,99,235,0.18);
}

/* === debt-analyze-portfolio-cleanup-v1176 === */
.debt-card-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.debt-card-title-row .inline-info-wrap{
  flex:0 0 auto;
  margin-top:1px;
}

.debt-strategy-table-clean{
  display:grid;
  gap:7px;
}

.debt-strategy-table-clean .debt-strategy-row{
  display:grid;
  grid-template-columns:minmax(116px,0.75fr) minmax(120px,1fr) minmax(78px,auto);
  gap:10px;
  align-items:center;
}

.debt-strategy-kind{
  min-width:0;
}

.debt-strategy-table-clean .debt-strategy-name,
.debt-strategy-table-clean .debt-strategy-meta{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.debt-strategy-table-clean .debt-strategy-debt{
  min-width:0;
  justify-self:stretch;
  text-align:left;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.debt-strategy-table-clean .debt-strategy-number{
  justify-self:end;
  min-width:78px;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.debt-main-answer-card .debt-analytics-main-copy{
  display:none;
}

.debt-main-answer-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:10px 11px;
  border-radius:14px;
  background:rgba(255,255,255,0.66);
  border:1px solid rgba(99,102,241,0.16);
}

.debt-main-answer-focus{
  margin-top:5px;
  font-size:0.66rem;
  font-weight:800;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.055em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.debt-main-answer-figure{
  min-width:70px;
  text-align:right;
  font-family:var(--font-mono);
  font-weight:900;
  font-size:1.05rem;
  color:var(--indigo-600);
  font-variant-numeric:tabular-nums;
}

.debt-main-answer-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:9px;
}

.debt-main-answer-chip{
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:7px;
  align-items:center;
  padding:8px 9px;
  border-radius:12px;
  background:var(--white-62);
  border:1px solid rgba(111,135,154,0.16);
}

.debt-main-answer-icon{
  width:22px;
  height:22px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:0.70rem;
  font-weight:900;
  background:rgba(99,102,241,0.10);
  color:var(--indigo-600);
}

.debt-main-answer-chip strong,
.debt-main-answer-chip small{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.debt-main-answer-chip strong{
  font-size:0.68rem;
  color:var(--accent-text);
}

.debt-main-answer-chip small{
  margin-top:2px;
  font-size:0.60rem;
  color:var(--muted);
  font-weight:750;
}

.debt-main-answer-chip.chip-good .debt-main-answer-icon{
  background:rgba(16,185,129,0.12);
  color:#047857;
}

.debt-main-answer-chip.chip-warn .debt-main-answer-icon,
.debt-main-answer-chip.chip-bad .debt-main-answer-icon{
  background:rgba(245,158,11,0.14);
  color:var(--amber-warn);
}

@media (max-width:760px){
  .debt-strategy-table-clean .debt-strategy-row{
    grid-template-columns:1fr;
    gap:4px;
  }
  .debt-strategy-table-clean .debt-strategy-number,
  .debt-strategy-table-clean .debt-strategy-debt{
    justify-self:start;
    text-align:left;
  }
  .debt-main-answer-grid{
    grid-template-columns:1fr;
  }
}

/* === debt-breakdown-start-marker-v1176 === */
/* v1176 — Portfolio Breakdown original-balance marker.
   Shows each debt's starting balance within the same bar so users can compare progress vs origin. */
.debt-breakdown-bar{
  position:relative;
  overflow:hidden;
}

.debt-breakdown-start-track{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  border-radius:999px;
  background:rgba(15,23,42,0.055);
  border-right:1px solid rgba(15,23,42,0.10);
  pointer-events:none;
}

.debt-breakdown-start-marker{
  position:absolute;
  top:-3px;
  bottom:-3px;
  width:2px;
  border-radius:999px;
  background:#0f172a;
  box-shadow:0 0 0 2px var(--white-82), 0 0 10px rgba(15,23,42,0.16);
  transform:translateX(-1px);
  pointer-events:none;
  z-index:3;
}

.debt-breakdown-fill{
  position:relative;
  z-index:2;
}

.debt-breakdown-legend{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
  font-size:0.58rem;
  color:var(--muted);
  font-weight:750;
}

.debt-breakdown-legend span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.debt-breakdown-legend i{
  width:14px;
  height:6px;
  border-radius:999px;
  display:inline-block;
}

.debt-breakdown-legend i.current{
  background:linear-gradient(90deg, var(--sky-700), var(--indigo-700));
}

.debt-breakdown-legend i.start{
  width:2px;
  height:12px;
  border-radius:999px;
  background:#0f172a;
}

/* === portfolio-breakdown-alignment-v1180 === */
/* v1180 — Portfolio Breakdown amount alignment.
   Separates current amount, original amount and cleared percentage into stable columns. */
.debt-breakdown-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(270px,auto);
  gap:12px;
  align-items:baseline;
}

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

.debt-breakdown-meta-grid{
  display:grid;
  grid-template-columns:minmax(74px,auto) 10px minmax(74px,auto) minmax(70px,auto);
  gap:5px;
  align-items:baseline;
  justify-content:end;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  text-align:right;
}

.debt-breakdown-current,
.debt-breakdown-original,
.debt-breakdown-cleared{
  justify-self:end;
}

.debt-breakdown-separator{
  justify-self:center;
  color:var(--muted);
}

.debt-breakdown-cleared{
  color:var(--muted);
}

@media (max-width:760px){
  .debt-breakdown-head{
    grid-template-columns:1fr;
    gap:4px;
  }
  .debt-breakdown-meta-grid{
    justify-content:start;
  }
}

/* === strategy-engine-noise-cleanup-v1180 === */
.debt-strategy-modal .cbm-sub,
.debt-strategy-card-copy{
  display:none;
}

.debt-strategy-option{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(92px,auto) minmax(48px,auto);
  gap:14px;
  align-items:center;
}

.debt-strategy-option-main{
  min-width:0;
  display:grid;
  gap:4px;
}

.debt-strategy-option-name,
.debt-strategy-option-main .debt-strategy-option-meta{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.debt-strategy-option .debt-strategy-chip{
  width:max-content;
  max-width:100%;
}

.debt-strategy-option-val{
  justify-self:end;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.debt-strategy-benefit{
  min-width:92px;
}

.debt-strategy-months{
  min-width:48px;
  color:var(--accent-text);
}

.debt-strategy-option-val .debt-strategy-option-meta{
  margin-top:2px;
}

/* No visible "time saved" label in Strategy Options; value remains. */
.debt-strategy-months .debt-strategy-option-meta{
  display:none;
}

.debt-strategy-tile-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

@media (max-width:760px){
  .debt-strategy-option{
    grid-template-columns:1fr;
  }
  .debt-strategy-option-val{
    justify-self:start;
    text-align:left;
  }
  .debt-strategy-tile-grid{
    grid-template-columns:1fr;
  }
}

/* === usage-workspace-clean-v1195 === */
/* Usage tab clean workspace rebuild v1195: green Usage Health accent, layout-only, keeps existing usage calculations and handlers. */


[data-view="usage"] .usage-summary-card.ui-3d-panel {
  --ui3d-top-a:#a7f3d0;
  --ui3d-top-b:#10b981;
  --ui3d-top-c:#047857;
  --ui3d-border:rgba(16,185,129,0.22);
  --ui3d-glow:rgba(16,185,129,0.10);
  --ui3d-shadow:rgba(4,120,87,0.08);
  border-radius:18px;
  padding:13px 14px 14px;
  overflow:hidden;
}
[data-view="usage"] .usage-summary-card.ui-3d-panel::before {
  height:4px;
}
.usage-summary-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.usage-summary-title {
  font-size:0.86rem;
  font-weight:800;
  color:var(--accent-text);
  letter-spacing:-0.01em;
}
.usage-summary-sub {
  font-size:0.66rem;
  color:var(--muted);
  margin-top:2px;
}
[data-view="usage"] .usage-kpi-board { margin:0; }
[data-view="usage"] .usage-kpi-row {
  display:grid;
  grid-template-columns:0.95fr repeat(3,minmax(0,1fr));
  gap:9px;
}
[data-view="usage"] .usage-kpi-cell.ui-3d-usage-kpi {
  min-width:0;
  padding:11px 12px 10px;
}
[data-view="usage"] .usage-kpi-cell.ui-3d-usage-kpi.kpi-howto {
  --ui3d-top-a:#bfdbfe;
  --ui3d-top-b:#3b82f6;
  --ui3d-top-c:#1d4ed8;
  --ui3d-border:rgba(59,130,246,0.22);
  --ui3d-glow:rgba(59,130,246,0.12);
  --ui3d-shadow:rgba(29,78,216,0.10);
}
[data-view="usage"] .usage-kpi-cell.kpi-howto .usage-kpi-label {
  color:var(--accent-text);
}
[data-view="usage"] .usage-howto-list {
  display:grid;
  gap:4px;
  margin-top:5px;
}
[data-view="usage"] .usage-howto-item {
  position:relative;
  padding-left:10px;
  font-size:0.66rem;
  line-height:1.28;
  font-weight:650;
  color:var(--text);
}
[data-view="usage"] .usage-howto-item::before {
  content:'';
  position:absolute;
  left:0;
  top:0.48em;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--green-600);
}

[data-view="usage"] .usage-kpi-label {
  font-size:0.61rem;
  letter-spacing:0.065em;
}
[data-view="usage"] .usage-kpi-value {
  font-size:1.02rem;
  line-height:1.15;
}
[data-view="usage"] .usage-kpi-sub {
  font-size:0.66rem;
}

[data-view="usage"] .usage-insights-panel.ui-3d-usage-insights {
  border-radius:18px;
  overflow:hidden;
}
[data-view="usage"] .usage-insights-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  padding:11px;
}
[data-view="usage"] .usage-insight-col.usage-insight-tile {
  position:relative;
  border-right:0;
  border:1px solid rgba(100,116,139,0.14);
  border-radius:14px;
  background:var(--white-62);
  padding:11px 12px 12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.88);
  overflow:hidden;
}
[data-view="usage"] .usage-insight-col.usage-insight-tile::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg,#94a3b8,#64748b);
}
[data-view="usage"] .usage-insight-col.insight-lowest-score::before { background:linear-gradient(90deg,#fca5a5,var(--red-error),var(--red-800)); }
[data-view="usage"] .usage-insight-col.insight-wasted-spend::before { background:linear-gradient(90deg,#fdba74,#f97316,#c2410c); }
[data-view="usage"] .usage-insight-col.insight-consider-cutting::before { background:linear-gradient(90deg,#fde68a,var(--amber),var(--red-900)); }
[data-view="usage"] .usage-insight-col-title {
  font-size:0.73rem;
  text-transform:uppercase;
  letter-spacing:0.055em;
  margin-bottom:7px;
}
[data-view="usage"] .usage-insight-entry {
  min-height:28px;
  padding:6px 0;
}
[data-view="usage"] .usage-insight-entry-name { font-size:0.72rem; font-weight:650; }
[data-view="usage"] .usage-insight-entry-val { font-size:0.70rem; }


/* Keep the add/edit usage form above the workspace modal when launched from a usage card. */
.usage-modal-overlay { z-index: 10080; }

.usage-manager-overlay.cbm-open {
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:18px;
}
.usage-manager-modal {
  width:min(96vw,1280px);
  max-width:1280px;
  max-height:calc(100vh - 36px);
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  border-radius:18px;
}
.usage-manager-header .cbm-sub { display:block; }
.usage-manager-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 18px;
  border-bottom:1px solid var(--line);
  background:var(--panel-2);
}
.usage-manager-count {
  font-size:0.66rem;
  font-weight:700;
  color:var(--muted);
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:999px;
  padding:4px 9px;
}
.usage-manager-body {
  overflow:auto;
  padding:14px 18px 18px;
  min-height:0;
}
.usage-manager-body .usage-list.usage-tile-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.usage-manager-body .usage-card.ui-3d-usage-card {
  margin:0;
}

[data-view="usage"] #usageTabLayout > .usage-list,
[data-view="usage"] #usageTabLayout > .usage-tile-grid {
  display:none;
}

@media (max-width:900px) {
  [data-view="usage"] .usage-kpi-row,
  [data-view="usage"] .usage-insights-grid,
  .usage-manager-body .usage-list.usage-tile-grid { grid-template-columns:1fr; }
  .usage-manager-overlay.cbm-open { padding:10px; align-items:flex-start; overflow:auto; }
  .usage-manager-modal { width:100%; max-height:none; }
  .usage-manager-body { overflow:visible; }
}

/* === usage-workspace-card-clean-v1192 === */
/* Usage workspace card refinement v1192 — presentation only. Keeps usage math, check-in logic, and edit/delete handlers unchanged. */
#usageManagerOverlay .usage-card.ui-3d-usage-card {
  border-color: var(--usage-card-border, rgba(139,92,246,0.24));
}

/* Preserve category as the primary card colour. Due/warning states no longer replace the category tint. */
#usageManagerOverlay .usage-card.ui-3d-usage-card.is-due,
#usageManagerOverlay .usage-card.ui-3d-usage-card.warn-strong,
#usageManagerOverlay .usage-card.ui-3d-usage-card.warn-medium,
#usageManagerOverlay .usage-card.ui-3d-usage-card.warn-soft {
  --ui3d-top-a: var(--usage-card-accent, #c4b5fd);
  --ui3d-top-b: var(--usage-card-accent, #8b5cf6);
  --ui3d-top-c: color-mix(in srgb, var(--usage-card-accent, #475569) 72%, #0f172a);
  --ui3d-border: var(--usage-card-border, rgba(139,92,246,0.24));
  --ui3d-glow: var(--usage-card-bg-top, rgba(139,92,246,0.12));
}

/* Check-in due is now a clear action highlight instead of a sorting rule. */
#usageManagerOverlay .usage-card.ui-3d-usage-card.is-due {
  border-color: rgba(220,38,38,0.58);
  box-shadow:
    0 0 0 2px rgba(220,38,38,0.16),
    0 16px 32px var(--ui3d-shadow),
    0 6px 14px rgba(30,64,120,0.07),
    inset 0 1px 0 var(--white-98),
    inset 0 -1px 0 rgba(72,120,178,0.09);
}
#usageManagerOverlay .usage-card.ui-3d-usage-card.is-due:hover {
  box-shadow:
    0 0 0 2px rgba(220,38,38,0.22),
    0 19px 38px var(--ui3d-shadow),
    0 8px 18px rgba(30,64,120,0.09),
    inset 0 1px 0 var(--white-98),
    inset 0 -1px 0 rgba(72,120,178,0.11);
}

#usageManagerOverlay .usage-due-pill {
  background: var(--red-600);
  border-color: var(--red-700);
  color: var(--white);
  box-shadow: 0 1px 4px rgba(220,38,38,0.22);
}


#usageManagerOverlay .usage-stats-row {
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px 12px;
  align-items:start;
}
#usageManagerOverlay .usage-stat-label {
  font-size:0.62rem;
  line-height:1.1;
}
#usageManagerOverlay .usage-stat-value {
  font-size:0.76rem;
  line-height:1.2;
}

@media (max-width: 1120px) {
  #usageManagerOverlay .usage-stats-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  #usageManagerOverlay .usage-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* === usage-checkin-undo-scroll-clean-v1193 === */
#usageManagerOverlay .usage-checkin-status-actions {
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-shrink:0;
}
#usageManagerOverlay .usage-checkin-period-state {
  font-size:0.6rem;
  color:var(--muted);
  font-weight:500;
  white-space:nowrap;
}
#usageManagerOverlay .usage-checkin-undo-btn {
  padding:3px 9px;
  border-color:rgba(99,102,241,0.28);
  color:var(--indigo-600);
  background:rgba(99,102,241,0.07);
}
#usageManagerOverlay .usage-checkin-undo-btn:hover {
  background:rgba(99,102,241,0.13);
  border-color:rgba(99,102,241,0.42);
  color:#312e81;
}

/* === veyra-nav-guided-cards === */
/* v1275 — guided workspace navigation, single-row balance rebuild.
   Presentation-only: content-aware group/card sizing, no tab logic changes. */

.view-nav.veyra-nav {
  flex: 1 1 100%;
  width: 100%;
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 4px;
  min-width: 0;
  align-items: stretch;
}
.veyra-nav-group {
  position: relative;
  min-width: 0;
  flex: 0 0 auto;
  padding: 10px;
  border: 1px solid rgba(111, 135, 154, 0.22);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.84) 0%, rgba(242,247,252,0.76) 100%);
  box-shadow: 0 12px 30px rgba(15,23,42,0.065);
  overflow: hidden;
}
.veyra-nav-group::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(94,23,235,0.09), rgba(37,99,235,0.045) 42%, rgba(16,185,129,0.045));
  opacity: .75;
}
.veyra-nav-group::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  top: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--veyra-nav-accent, linear-gradient(90deg, #5e17eb, #2563eb));
  opacity: .88;
}
.veyra-nav-group-insights {
  --veyra-nav-accent: linear-gradient(90deg, #5e17eb, #2563eb);
  flex-basis: 372px;
}
.veyra-nav-group-money {
  --veyra-nav-accent: linear-gradient(90deg, #10b981, #2563eb);
  flex-basis: 836px;
}
.veyra-nav-group-optimization {
  --veyra-nav-accent: linear-gradient(90deg, #f59e0b, #5e17eb);
  flex-basis: 420px;
}
.veyra-nav-group-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 2px 8px;
}
.veyra-nav-group-label {
  font-size: .56rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(47,64,80,0.72);
}
.veyra-nav-group-hint {
  font-size: .56rem;
  line-height: 1;
  font-weight: 700;
  color: rgba(81,98,115,0.58);
  white-space: nowrap;
}
.veyra-nav-group-items {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.veyra-nav .view-btn {
  position: relative;
  flex: 0 0 var(--nav-card-w, 176px);
  min-width: 0;
  width: var(--nav-card-w, 176px);
  min-height: 66px;
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border-radius: 15px;
  border: 1px solid rgba(111,135,154,0.24);
  background: rgba(255,255,255,0.80);
  color: var(--accent-text, #2f4050);
  box-shadow: 0 5px 15px rgba(15,23,42,0.055);
  text-align: left;
  transform: none;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, background 150ms ease;
}
.veyra-nav [data-view-btn="overview"] { --nav-card-w: 170px; }
.veyra-nav [data-view-btn="smart-insights"] { --nav-card-w: 206px; }
.veyra-nav [data-view-btn="achievements"] { --nav-card-w: 170px; }
.veyra-nav [data-view-btn="income-savings"] { --nav-card-w: 218px; }
.veyra-nav [data-view-btn="expenses"] { --nav-card-w: 190px; }
.veyra-nav [data-view-btn="debt"] { --nav-card-w: 158px; }
.veyra-nav [data-view-btn="financial-goals"] { --nav-card-w: 218px; }
.veyra-nav [data-view-btn="subscriptions"] { --nav-card-w: 206px; }
.veyra-nav [data-view-btn="usage"] { --nav-card-w: 172px; }
.veyra-nav .view-btn::after {
  content: '';
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 7px;
  height: 2px;
  border-radius: 999px;
  background: rgba(94,23,235,0.12);
  opacity: 0;
  transform: scaleX(.55);
  transform-origin: left center;
  transition: opacity 150ms ease, transform 150ms ease;
}
.veyra-nav .view-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(94,23,235,0.30);
  background: var(--white-98);
  box-shadow: 0 11px 24px rgba(15,23,42,0.10);
}
.veyra-nav .view-btn:hover::after { opacity: 1; transform: scaleX(1); }
.veyra-nav .view-btn.active,
.veyra-nav .view-btn.active:hover {
  color: var(--white);
  border-color: rgba(94,23,235,0.42);
  background: linear-gradient(135deg, var(--purple) 0%, var(--blue-600) 100%);
  box-shadow: 0 15px 32px rgba(37,99,235,0.25), 0 0 0 1px rgba(255,255,255,0.26) inset;
}
.veyra-nav .view-btn.active::after { opacity: 1; transform: scaleX(1); background: rgba(255,255,255,0.42); }
.veyra-nav .view-btn-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(94,23,235,0.085);
  font-size: .98rem;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(94,23,235,0.055);
}
.veyra-nav .view-btn.active .view-btn-icon { background: rgba(255,255,255,0.20); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16); }
.veyra-nav .view-btn-copy { display: grid; gap: 3px; min-width: 0; }
.veyra-nav .view-btn:has(.view-btn-status:not([style*="display:none"]):not([style*="display: none"]), .usage-pill:not([style*="display:none"]):not([style*="display: none"]), .achievements-pill:not([style*="display:none"]):not([style*="display: none"])) .view-btn-copy {
  padding-right: 70px;
}
.veyra-nav .view-btn-title,
.veyra-nav .view-btn-sub,
.veyra-nav .view-btn-meta { display: block; white-space: nowrap; }
.veyra-nav .view-btn-title {
  overflow: visible;
  text-overflow: clip;
  font-size: .72rem;
  line-height: 1.08;
  font-weight: 850;
  letter-spacing: -0.02em;
}
.veyra-nav .view-btn-sub,
.veyra-nav .view-btn-meta { overflow: hidden; text-overflow: ellipsis; }
.veyra-nav .view-btn-sub { font-size: .58rem; line-height: 1.15; font-weight: 680; color: rgba(81,98,115,0.82); }
.veyra-nav .view-btn-meta { font-size: .52rem; line-height: 1.1; font-weight: 650; color: rgba(81,98,115,0.58); }
.veyra-nav .view-btn.active .view-btn-sub { color: var(--white-82); }
.veyra-nav .view-btn.active .view-btn-meta { color: var(--white-62); }
.veyra-nav .view-btn-status,
.veyra-nav .usage-pill,
.veyra-nav .achievements-pill {
  position: absolute;
  right: 9px;
  top: 9px;
  width: auto;
  min-width: 18px;
  max-width: 78px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(111,135,154,0.18);
  background: var(--white-82);
  color: rgba(47,64,80,0.74);
  font-size: .48rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .015em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 5px 12px var(--overlay-07);
  pointer-events: none;
}
.veyra-nav .view-btn-status.status-good { background: rgba(16,185,129,0.12); border-color: var(--emerald-22); color: var(--green-800); }
.veyra-nav .view-btn-status.status-warn,
.veyra-nav .usage-pill { background: rgba(245,158,11,0.13); border-color: rgba(245,158,11,0.26); color: var(--red-900); }
.veyra-nav .view-btn-status.status-bad { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.22); color: var(--red-800); }
.veyra-nav .view-btn-status.status-neutral { background: rgba(100,116,139,0.10); border-color: rgba(100,116,139,0.18); color: rgba(47,64,80,0.68); }
.veyra-nav .achievements-pill { background: rgba(16,185,129,0.13); border-color: rgba(16,185,129,0.24); color: var(--green-800); font-size: 0; }
.veyra-nav .achievements-pill::after { content: 'Due'; font-size: .48rem; }
.veyra-nav .view-btn.active .view-btn-status,
.veyra-nav .view-btn.active .usage-pill,
.veyra-nav .view-btn.active .achievements-pill { background: rgba(255,255,255,0.20); border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.88); box-shadow: none; }
.sidebar-guide-btn,
.sidebar-customize-anchor,
.sidebar-customize-btn { width: 100%; }
.sidebar-customize-anchor { position: relative; }
.sidebar-customize-btn { justify-content: flex-start; }

/* Customise overview cards is rendered as a true viewport modal.
   It is moved to <body> on init so the sticky sidebar cannot clip or layer above it. */
.card-visibility-popover {
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  width: min(380px, calc(100vw - 32px));
  max-height: min(78vh, 720px);
  z-index: 30010;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(15,23,42,0.28);
}
.card-visibility-popover-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30000;
  display: none;
  background: rgba(15,23,42,0.34);
  backdrop-filter: blur(2px);
}
.card-visibility-popover-backdrop.is-open { display: block; }
body.cvp-modal-open { overflow: hidden; }

@media (max-width: 1560px) {
  .view-nav.veyra-nav { gap: 10px; }
  .veyra-nav-group { width: 100%; flex: 1 1 100%; min-width: 0; }
  .veyra-nav-group-items { flex-wrap: wrap; }
  .veyra-nav .view-btn { flex: 1 1 190px; width: auto; }
}
@media (max-width: 640px) {
  .view-nav.veyra-nav { gap: 8px; }
  .veyra-nav-group { padding: 8px; border-radius: 16px; }
  .veyra-nav-group-head { align-items: flex-start; flex-direction: column; gap: 3px; }
  .veyra-nav-group-hint { white-space: normal; line-height: 1.25; }
  .veyra-nav .view-btn { flex-basis: 100%; min-height: 58px; }
  .veyra-nav .view-btn-status,
  .veyra-nav .usage-pill,
  .veyra-nav .achievements-pill { top: 6px; right: 7px; height: 17px; max-width: 58px; }
}

/* === dropdown-keyboard-nav === */
/* Panels are hidden by default via .filter-dropdown-menu { display:none }.
   display:flex + flex-direction:column is set in the canonical rule above.
   These rules handle the open-state flex behaviour and fixed positioning. */
/* Fixed-position panels (cadence dropdowns) need overflow:hidden on the container
   so the internal list scrolls. For absolute-positioned panels this is not needed
   and would clip the panel itself. Applied via JS only for cadence dropdowns. */
.filter-dropdown.is-open .filter-dropdown-list,
.filter-dropdown.is-open .evolution-select-list {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
/* Actions bar stays pinned at the bottom, never scrolls away */
.filter-dropdown-actions,
.evolution-select-actions {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  background: var(--white);
  z-index: 1;
}
/* Visible focus ring on keyboard-navigated option rows */
.filter-dropdown-option:focus {
  outline: 2px solid var(--accent-border-strong, #8294a6);
  outline-offset: -2px;
  border-radius: 7px;
  background: var(--accent-surface, #edf2f6);
}
.filter-dropdown-option:focus:not(:focus-visible) {
  outline: none;
  background: inherit;
}

/* Fix panel divider lines overflow */
.expense-left-panel-card,
.expense-log-card-large,
.expense-selected-editor{
  margin-left:4px;
  margin-right:4px;
}

.expense-left-panel-card::before,
.expense-log-card-large::before,
.expense-selected-editor::before{
  left:6px;
  right:6px;
  border-radius:2px;
}

/* Phase 23.1 — Simulator semantic colour system
   Clean rebuild of the simulator presentation layer: neutral setup, green benefits,
   amber costs/tradeoffs, purple decision focus. Calculation logic is unchanged. */
[data-view="debt"] .debt-simulator-card {
  display:grid;
  gap:14px;
  border-color:rgba(2,132,199,0.16);
  background:linear-gradient(180deg, rgba(239,248,255,0.78), rgba(255,255,255,0.96));
}
[data-view="debt"] .debt-sim-card-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding-bottom:2px;
}
[data-view="debt"] .debt-sim-card-head .debt-card-title { margin-bottom:4px; }
[data-view="debt"] .debt-sim-rebuild-grid {
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(360px,.96fr);
  gap:14px;
  align-items:start;
}
[data-view="debt"] .debt-sim-workflow,
[data-view="debt"] .debt-sim-answer-column {
  display:grid;
  gap:12px;
  min-width:0;
  align-content:start;
}
[data-view="debt"] .debt-sim-panel {
  position:relative;
  overflow:hidden;
  border-radius:16px;
  border:1px solid var(--slate-18);
  background:rgba(255,255,255,0.74);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82), 0 10px 24px rgba(15,23,42,.035);
  padding:13px;
  display:grid;
  gap:11px;
}
[data-view="debt"] .debt-sim-panel::before {
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:5px;
  opacity:.92;
}
[data-view="debt"] .debt-sim-build-panel {
  background:linear-gradient(180deg, rgba(248,250,252,.92), var(--white-78));
  border-color:rgba(148,163,184,.22);
}
[data-view="debt"] .debt-sim-build-panel::before { background:#334155; }
[data-view="debt"] .debt-sim-chart-panel {
  background:linear-gradient(180deg, rgba(240,249,255,.82), var(--white-78));
  border-color:rgba(2,132,199,.18);
}
[data-view="debt"] .debt-sim-chart-panel::before { background:var(--sky-700); }
[data-view="debt"] .debt-sim-answer-panel {
  background:linear-gradient(180deg, rgba(250,245,255,.82), rgba(255,255,255,.80));
  border-color:rgba(139,92,246,.18);
}
[data-view="debt"] .debt-sim-answer-panel::before { background:var(--violet-700); }
[data-view="debt"] .debt-sim-panel-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  position:relative;
  z-index:1;
}
[data-view="debt"] .debt-sim-step-label {
  font-size:.56rem;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:3px;
}
[data-view="debt"] .debt-sim-panel-title {
  font-size:.82rem;
  font-weight:900;
  color:var(--accent-text);
  line-height:1.2;
}
[data-view="debt"] .debt-sim-step-chip {
  flex-shrink:0;
  font-size:.56rem;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.24);
  color:#334155;
  background:rgba(248,250,252,.82);
}
[data-view="debt"] .debt-sim-chart-panel .debt-sim-step-chip {
  border-color:rgba(2,132,199,.18);
  color:var(--sky-900);
  background:rgba(240,249,255,.82);
}
[data-view="debt"] .debt-sim-answer-panel .debt-sim-step-chip {
  border-color:rgba(139,92,246,.22);
  color:var(--violet-800);
  background:rgba(245,243,255,.88);
}
[data-view="debt"] .debt-sim-input-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  position:relative;
  z-index:1;
}
[data-view="debt"] .debt-sim-input-grid .debt-form-field { margin:0; min-width:0; }
[data-view="debt"] .debt-sim-input-grid .debt-form-field.debt-full { grid-column:1/-1; }
[data-view="debt"] .debt-sim-input-grid input,
[data-view="debt"] .debt-sim-input-grid select { min-height:38px; }
[data-view="debt"] .debt-sim-method-note {
  position:relative;
  z-index:1;
  display:flex;
  gap:9px;
  align-items:flex-start;
  padding:9px 10px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(248,250,252,.78);
  color:var(--muted);
  font-size:.66rem;
  line-height:1.42;
  font-weight:650;
}
[data-view="debt"] .debt-sim-method-note strong { color:#334155; }
[data-view="debt"] .debt-sim-method-icon {
  width:20px;
  height:20px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(51,65,85,.10);
  color:#334155;
  font-weight:900;
  flex-shrink:0;
}
[data-view="debt"] .debt-sim-panel .debt-sim-visual,
[data-view="debt"] .debt-sim-panel .debt-balance-chart {
  margin-top:0;
  background:rgba(255,255,255,.70);
  border-color:rgba(2,132,199,.16);
  position:relative;
  z-index:1;
}
[data-view="debt"] .debt-sim-visual,
[data-view="debt"] .debt-balance-chart { overflow:hidden; }
[data-view="debt"] .debt-sim-visual::before,
[data-view="debt"] .debt-balance-chart::before {
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:var(--sky-700);
}
[data-view="debt"] .debt-sim-bar-fill { background:linear-gradient(90deg,#94a3b8,#64748b); }
[data-view="debt"] .debt-sim-bar-fill.after { background:linear-gradient(90deg,var(--violet-700),var(--emerald)); }
[data-view="debt"] .debt-balance-line-normal { stroke:#94a3b8; }
[data-view="debt"] .debt-balance-line-extra { stroke:var(--violet-700); }
[data-view="debt"] .debt-balance-area-extra { fill:rgba(16,185,129,.10); }
[data-view="debt"] .debt-balance-dot.extra { background:var(--violet-700); }

[data-view="debt"] .debt-sim-answer-column .debt-sim-decision-card,
[data-view="debt"] .debt-sim-answer-column .debt-sim-section,
[data-view="debt"] .debt-sim-answer-column .debt-sim-details,
[data-view="debt"] .debt-sim-answer-column .debt-action-plan{ margin-top:0; }
[data-view="debt"] .hidden { display:none; }
[data-view="debt"] .debt-opportunity-toggle {
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:.66rem;
  font-weight:800;
  color:var(--violet-800);
  cursor:pointer;
  user-select:none;
}
[data-view="debt"] .debt-opportunity-toggle input { margin:0; }
[data-view="debt"] .sim-card.sim-card-decision {
  position:relative;
  overflow:hidden;
  display:grid;
  gap:9px;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid rgba(139,92,246,.24);
  background:linear-gradient(180deg,rgba(245,243,255,.92),var(--white-78));
}
[data-view="debt"] .sim-card.sim-card-decision::before {
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:var(--violet-700);
}
[data-view="debt"] .sim-input-row {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) 92px;
  gap:8px;
  align-items:center;
}
[data-view="debt"] .sim-input-row label {
  font-size:.62rem;
  font-weight:850;
  color:var(--muted);
}
[data-view="debt"] .sim-input-row input {
  min-height:32px;
  border-radius:9px;
  border:1px solid rgba(148,163,184,.26);
  background:rgba(255,255,255,.88);
  color:var(--accent-text);
  font:inherit;
  font-size:.68rem;
  font-weight:750;
  padding:6px 8px;
}
[data-view="debt"] .sim-main-answer {
  position:relative;
  z-index:1;
  font-size:.78rem;
  font-weight:900;
  color:#4c1d95;
  line-height:1.35;
}
[data-view="debt"] .sim-supporting {
  position:relative;
  z-index:1;
  padding:8px 9px;
  border-radius:10px;
  border:1px solid rgba(139,92,246,.14);
  background:rgba(255,255,255,.62);
  color:var(--muted);
  font-size:.64rem;
  line-height:1.5;
  font-weight:700;
}


[data-view="debt"] .debt-sim-answer-column .debt-sim-decision-card {
  position:relative;
  overflow:hidden;
  box-shadow:none;
  background:linear-gradient(180deg,rgba(245,243,255,.92),var(--white-78));
  border-color:rgba(139,92,246,.24);
}
[data-view="debt"] .debt-sim-answer-column .debt-sim-decision-card::before {
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:var(--violet-700);
}
[data-view="debt"] .debt-sim-answer-column .debt-sim-decision-card.good {
  background:linear-gradient(180deg,rgba(240,253,244,.90),var(--white-78));
  border-color:rgba(34,197,94,.26);
}
[data-view="debt"] .debt-sim-answer-column .debt-sim-decision-card.good::before { background:var(--green-600); }
[data-view="debt"] .debt-sim-answer-column .debt-sim-decision-card.warn,
[data-view="debt"] .debt-sim-answer-column .debt-sim-decision-card.is-empty {
  background:linear-gradient(180deg,rgba(255,251,235,.92),var(--white-78));
  border-color:rgba(245,158,11,.30);
}
[data-view="debt"] .debt-sim-answer-column .debt-sim-decision-card.warn::before,
[data-view="debt"] .debt-sim-answer-column .debt-sim-decision-card.is-empty::before { background:var(--amber); }
[data-view="debt"] .debt-sim-answer-column .debt-sim-decision-card.bad {
  background:linear-gradient(180deg,rgba(254,242,242,.90),var(--white-78));
  border-color:rgba(239,68,68,.26);
}
[data-view="debt"] .debt-sim-answer-column .debt-sim-decision-card.bad::before { background:var(--red-error); }
[data-view="debt"] .debt-sim-section {
  position:relative;
  overflow:hidden;
  border-color:rgba(148,163,184,.16);
  background:rgba(255,255,255,.70);
}
[data-view="debt"] .debt-sim-section::before {
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:#94a3b8;
}
[data-view="debt"] .debt-sim-section-impact {
  background:linear-gradient(180deg,rgba(240,253,244,.70),rgba(255,255,255,.76));
  border-color:rgba(34,197,94,.20);
}
[data-view="debt"] .debt-sim-section-impact::before { background:var(--green-600); }
[data-view="debt"] .debt-sim-section-support {
  background:linear-gradient(180deg,rgba(248,250,252,.88),rgba(255,255,255,.76));
  border-color:rgba(148,163,184,.18);
}
[data-view="debt"] .debt-sim-section-bank {
  background:linear-gradient(180deg,rgba(239,246,255,.92),rgba(245,243,255,.78));
  border-color:rgba(37,99,235,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.80), 0 10px 22px rgba(37,99,235,.06);
}
[data-view="debt"] .debt-sim-section-bank::before { background:linear-gradient(90deg,var(--blue-600),var(--violet-700)); }
[data-view="debt"] .debt-sim-answer-column .debt-sim-output-grid,
[data-view="debt"] .debt-sim-answer-column .debt-sim-output-grid-primary { grid-template-columns:repeat(2,minmax(0,1fr)); }
[data-view="debt"] .debt-sim-answer-column .debt-sim-output-grid-primary .debt-sim-result-readable:nth-child(3) { grid-column:1/-1; }
[data-view="debt"] .debt-sim-answer-column .debt-sim-result-readable {
  min-height:66px;
  padding:9px 10px 9px 12px;
  background:rgba(255,255,255,.72);
  border-color:rgba(148,163,184,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
}
[data-view="debt"] .debt-sim-result-readable.good {
  background:linear-gradient(180deg,rgba(240,253,244,.86),rgba(255,255,255,.70));
  border-color:rgba(34,197,94,.24);
}
[data-view="debt"] .debt-sim-result-readable.good::before { background:var(--green-600); }
[data-view="debt"] .debt-sim-result-readable.warn {
  background:linear-gradient(180deg,rgba(255,251,235,.90),rgba(255,255,255,.70));
  border-color:rgba(245,158,11,.28);
}
[data-view="debt"] .debt-sim-result-readable.warn::before { background:var(--amber); }
[data-view="debt"] .debt-sim-result-readable.bad {
  background:linear-gradient(180deg,rgba(254,242,242,.88),rgba(255,255,255,.70));
  border-color:rgba(239,68,68,.25);
}
[data-view="debt"] .debt-sim-result-readable.bad::before { background:var(--red-error); }
[data-view="debt"] .debt-sim-result-readable.neutral {
  background:linear-gradient(180deg,rgba(240,249,255,.86),rgba(255,255,255,.70));
  border-color:rgba(2,132,199,.18);
}
[data-view="debt"] .debt-sim-result-readable.neutral::before { background:var(--sky-700); }
[data-view="debt"] .debt-sim-answer-column .debt-bank-option-stack { grid-template-columns:repeat(2,minmax(0,1fr)); }
[data-view="debt"] .debt-sim-answer-column .debt-bank-option-card {
  min-height:96px;
  background:rgba(255,255,255,.76);
  position:relative;
  overflow:hidden;
}
[data-view="debt"] .debt-bank-option-card::before {
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:#94a3b8;
}
[data-view="debt"] .debt-bank-option-card.is-selected {
  border-color:rgba(124,58,237,.32);
  background:linear-gradient(180deg,rgba(245,243,255,.82),var(--white-78));
  box-shadow:inset 0 0 0 1px rgba(124,58,237,.10);
}
[data-view="debt"] .debt-bank-option-card.is-selected::before { background:var(--violet-700); }
[data-view="debt"] .debt-bank-option-card.option-good::before { background:var(--green-600); }
[data-view="debt"] .debt-bank-option-card.option-warn::before { background:var(--amber); }
[data-view="debt"] .debt-bank-option-card.option-bad::before { background:var(--red-error); }

[data-view="debt"] .debt-sim-details > summary {
  background:rgba(255,255,255,.74);
  border-color:rgba(124,58,237,.18);
  color:var(--violet-800);
}
[data-view="debt"] .debt-sim-answer-column .debt-action-plan {
  border-color:rgba(124,58,237,.18);
  background:linear-gradient(180deg, rgba(245,243,255,.78), var(--white-78));
}
[data-view="debt"] .debt-sim-answer-column .debt-action-plan::before { background:var(--violet-700); }
[data-view="debt"] .debt-action-plan-title { color:var(--violet-800); }
[data-view="debt"] .debt-action-plan-copy strong{ color:var(--violet-800); }
@media (max-width:1120px) { [data-view="debt"] .debt-sim-rebuild-grid { grid-template-columns:1fr; } }
@media (max-width:720px) {
  [data-view="debt"] .debt-sim-card-head { flex-direction:column; }
  [data-view="debt"] .debt-sim-input-grid,
  [data-view="debt"] .debt-sim-answer-column .debt-sim-output-grid,
  [data-view="debt"] .debt-sim-answer-column .debt-sim-output-grid-primary,
  [data-view="debt"] .debt-sim-answer-column .debt-bank-option-stack { grid-template-columns:1fr; }
  [data-view="debt"] .debt-sim-answer-column .debt-sim-output-grid-primary .debt-sim-result-readable:nth-child(3) { grid-column:auto; }
}

/* Phase 21 clean rebuild: Debt timeline / history */

[data-view="debt"] .debt-history-card {
  display: grid;
  gap: 12px;
}
[data-view="debt"] .debt-history-card .debt-readable-head {
  align-items: center;
}
[data-view="debt"] .debt-history-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
[data-view="debt"] .debt-history-chart {
  display: grid;
  gap: 8px;
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid var(--overlay-07);
  background: rgba(255,255,255,0.48);
  min-height: 286px;
}
[data-view="debt"] .debt-history-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
[data-view="debt"] .debt-history-chart-title {
  font-size: 0.72rem;
  font-weight: 850;
  color: var(--accent-text);
}
[data-view="debt"] .debt-history-chart-note {
  font-size: 0.60rem;
  color: var(--muted);
  font-weight: 700;
  text-align: right;
}
[data-view="debt"] .debt-history-insight {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--overlay-08);
  background: var(--panel-2);
}
[data-view="debt"] .debt-history-insight strong {
  font-size: 0.72rem;
  color: var(--accent-text);
}
[data-view="debt"] .debt-history-insight span {
  font-size: 0.64rem;
  color: var(--muted);
  line-height: 1.4;
}


[data-view="debt"] .debt-history-svg-wrap {
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-view="debt"] .debt-history-svg {
  width: 100%;
  height: auto;
  max-height: 210px;
}
[data-view="debt"] .debt-history-axis,
[data-view="debt"] .debt-history-gridline {
  stroke: rgba(15,23,42,0.13);
  stroke-width: 1;
}
[data-view="debt"] .debt-history-gridline {
  stroke-dasharray: 4 5;
}
[data-view="debt"] .debt-history-line-baseline {
  fill: none;
  stroke: rgba(100,116,139,0.70);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 6 6;
}
[data-view="debt"] .debt-history-line-actual {
  fill: none;
  stroke: var(--sky-700);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[data-view="debt"] .debt-history-extra-dot {
  fill: var(--emerald);
  stroke: var(--white);
  stroke-width: 2;
}
[data-view="debt"] .debt-history-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.62rem;
  color: var(--muted);
  font-weight: 750;
}
[data-view="debt"] .debt-history-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
[data-view="debt"] .debt-history-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--sky-700);
}
[data-view="debt"] .debt-history-dot.baseline { background: #64748b; }
[data-view="debt"] .debt-history-dot.extra { background: var(--emerald); }
[data-view="debt"] .debt-history-caption {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.62rem;
  color: var(--muted);
  font-weight: 700;
}
[data-view="debt"] .debt-history-action-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--overlay-07);
  background: rgba(255,255,255,0.46);
  font-size: 0.66rem;
  color: var(--muted);
  font-weight: 700;
}
[data-view="debt"] .debt-history-open-btn {
  white-space: nowrap;
}
[data-modal-kind="debt-history"] .debt-history-modal {
  width: min(96vw, 980px);
  max-width: 980px;
  max-height: min(88vh, 820px);
}
[data-modal-kind="debt-history"] .debt-history-modal-body {
  overflow-y: auto;
  max-height: min(70vh, 620px);
}
.debt-history-modal-table {
  display: grid;
  gap: 7px;
}
.debt-history-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.05fr) repeat(3, minmax(118px, 1fr)) minmax(116px, 0.85fr);
  gap: 12px;
  align-items: center;
  padding: 8px 11px;
  border-radius: 10px;
  border: 1px solid var(--overlay-07);
  background: var(--white-58);
}
.debt-history-row.is-header {
  background: rgba(248,250,252,0.92);
  border-color: var(--overlay-06);
  padding-top: 6px;
  padding-bottom: 6px;
  position: sticky;
  top: -14px;
  z-index: 2;
  backdrop-filter: blur(6px);
}
.debt-history-cell {
  min-width: 0;
  font-size: 0.66rem;
  color: var(--muted);
  font-weight: 700;
}
.debt-history-cell:not(:first-child) {
  text-align: right;
}
.debt-history-row.is-header .debt-history-cell {
  font-size: 0.56rem;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  font-weight: 850;
}
.debt-history-cell strong {
  display: block;
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.debt-history-cell:first-child strong {
  font-family: inherit;
}
.debt-history-chip {
  display: inline-flex;
  justify-content: center;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 850;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--muted);
}
.debt-history-chip.good { background: var(--emerald-14); border-color: rgba(16,185,129,0.24); color: var(--green-800); }
.debt-history-chip.warn { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.26); color: var(--red-900); }
.debt-history-chip.neutral { background: rgba(2,132,199,0.07); border-color: rgba(2,132,199,0.16); color: var(--sky-900); }
@media (max-width: 760px) {
  [data-view="debt"] .debt-history-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .debt-history-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .debt-history-cell:not(:first-child) { text-align: left; }
  .debt-history-row.is-header { display: none; }
}
@media (max-width: 620px) {
  [data-view="debt"] .debt-history-summary { grid-template-columns: 1fr; }
  [data-view="debt"] .debt-history-chart-head,
  [data-view="debt"] .debt-history-action-strip { flex-direction: column; align-items: flex-start; }
  [data-view="debt"] .debt-history-chart-note { text-align: left; }
}

/* v1118 — Income & Savings modal refinement: neutral rows, constrained stats, clean values.
   Replaces the prior v1117 modal polish block instead of layering overrides. */
#cashflowModalRoot .cashflow-modal.cashflow-kind-income .row-item.compact-manual,
#cashflowModalRoot .cashflow-modal.cashflow-kind-savings .row-item.compact-manual {
  background: linear-gradient(180deg, var(--white-72), rgba(246,250,247,0.92)), #f7faf6;
  border-color: rgba(148,163,184,0.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.84), 0 8px 20px rgba(15,23,42,0.035);
}
#cashflowModalRoot .cashflow-modal.cashflow-kind-income .row-item.compact-manual:hover,
#cashflowModalRoot .cashflow-modal.cashflow-kind-savings .row-item.compact-manual:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.80), rgba(240,249,244,0.96)), #f4faf6;
  border-color: var(--emerald-22);
}
#cashflowModalRoot .cashflow-modal.cashflow-kind-income .compact-manual .row-top-inline,
#cashflowModalRoot .cashflow-modal.cashflow-kind-savings .compact-manual .row-top-inline {
  grid-template-columns: minmax(130px, 170px) minmax(280px, 1fr) minmax(118px, 136px);
  gap: 12px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
#cashflowModalRoot .cashflow-modal.cashflow-kind-income .row-inline-stats.cashflow-inline-stats,
#cashflowModalRoot .cashflow-modal.cashflow-kind-savings .row-inline-stats.cashflow-inline-stats {
  width: 100%;
  min-width: 0;
  max-width: 136px;
  justify-self: end;
  display: grid;
  gap: 7px;
  box-sizing: border-box;
  overflow: hidden;
}
#cashflowModalRoot .cashflow-modal.cashflow-kind-income .cashflow-statline,
#cashflowModalRoot .cashflow-modal.cashflow-kind-savings .cashflow-statline {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 7px;
  align-items: center;
  min-width: 0;
}
#cashflowModalRoot .cashflow-modal.cashflow-kind-income .cashflow-statline span,
#cashflowModalRoot .cashflow-modal.cashflow-kind-savings .cashflow-statline span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  color: #64748b;
}
#cashflowModalRoot .cashflow-modal.cashflow-kind-income .cashflow-statline strong,
#cashflowModalRoot .cashflow-modal.cashflow-kind-savings .cashflow-statline strong {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  background: transparent;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}
#cashflowModalRoot .cashflow-modal.cashflow-kind-income .cashflow-statline strong.income-positive,
#cashflowModalRoot .cashflow-modal.cashflow-kind-savings .cashflow-statline strong.savings-positive {
  color: var(--green-900);
}
@media (max-width: 860px) {
  #cashflowModalRoot .cashflow-modal.cashflow-kind-income .compact-manual .row-top-inline,
  #cashflowModalRoot .cashflow-modal.cashflow-kind-savings .compact-manual .row-top-inline {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  #cashflowModalRoot .cashflow-modal.cashflow-kind-income .row-inline-stats.cashflow-inline-stats,
  #cashflowModalRoot .cashflow-modal.cashflow-kind-savings .row-inline-stats.cashflow-inline-stats {
    max-width: none;
    justify-self: stretch;
  }
}

/* === subscriptions-manager-modal-clean-v1186 === */
/* v1186 — Subscription Manager clean modal fit.
   UI-only: no subscription state, calculation, filter, sort, usage tracking, or month-state logic changed.
   Consolidates v1181-v1185 modal overrides and removes the inherited parent/body scroll layer. */
.subscriptions-manager-overlay.cbm-overlay{
  padding:12px 16px;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.subscriptions-manager-modal.cbm-modal{
  width:min(1880px, calc(100vw - 32px));
  max-width:none;
  max-height:calc(100vh - 24px);
  display:grid;
  grid-template-rows:auto auto auto;
  overflow:hidden;
}
.subscriptions-manager-header,
.subscriptions-manager-footer{
  background:var(--panel);
  position:relative;
  z-index:80;
  flex-shrink:0;
}
.subscriptions-manager-header.cbm-header{
  padding:12px 16px 10px;
}
.subscriptions-manager-footer.cbm-footer{
  padding:8px 16px 10px;
}
.subscriptions-manager-body.cbm-body{
  overflow:visible;
  min-height:0;
  padding:10px 16px 10px;
}
.subscriptions-manager-shell{
  display:grid;
  gap:10px;
  min-width:0;
}
.subscriptions-manager-toolbar{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:12px;
  min-width:0;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel-2);
}
.subscriptions-manager-toolbar-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
  min-width:0;
}
.subscriptions-manager-toolbar #addSubscriptionBtn{
  align-self:flex-start;
  white-space:nowrap;
}
.subscriptions-manager-modal .subscriptions-controls-card,
.subscriptions-manager-modal .subscriptions-table-card{
  margin:0;
}
.subscriptions-manager-modal .subscriptions-controls-card{
  position:relative;
  z-index:70;
  overflow:visible;
  padding:9px 12px;
  gap:8px 10px;
}
.subscriptions-manager-modal .subscriptions-controls-card .filter-dropdown.is-open,
.subscriptions-manager-modal .subscriptions-controls-card .filter-dropdown-menu{
  z-index:9999;
}
.subscriptions-manager-modal .subscriptions-controls-card .filter-dropdown-menu{
  max-height:240px;
}
.subscriptions-manager-modal .subscriptions-table-card{
  position:relative;
  z-index:1;
  padding:9px 12px 10px;
  overflow:hidden;
}
.subscriptions-manager-modal .subscriptions-table-head{
  margin-bottom:6px;
}
.subscriptions-manager-modal .subscriptions-table-title{
  font-size:0.86rem;
}
.subscriptions-manager-modal .subscriptions-table-eyebrow,
.subscriptions-manager-modal .subscription-stat-label{
  font-size:0.50rem;
  letter-spacing:0.07em;
}
.subscriptions-manager-modal .subscription-stat-card{
  padding:7px 9px;
  gap:2px;
}
.subscriptions-manager-modal .subscription-stat-value{
  font-size:0.86rem;
}
.subscriptions-manager-modal .subscriptions-table-wrap{
  max-height:none;
  overflow-x:hidden;
  overflow-y:visible;
  scrollbar-gutter:auto;
}
.subscriptions-manager-modal .subscriptions-table{
  width:100%;
  min-width:0;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
}
.subscriptions-manager-modal .subscriptions-table th,
.subscriptions-manager-modal .subscriptions-table td{
  box-sizing:border-box;
  padding:4px 3px;
}
.subscriptions-manager-modal .subscriptions-table thead th{
  position:static;
  font-size:0.45rem;
  letter-spacing:0.035em;
  line-height:1.15;
}
.subscriptions-manager-modal .subscriptions-table thead th:first-child,
.subscriptions-manager-modal .subscriptions-table tbody td:first-child{
  position:static;
  left:auto;
  box-shadow:none;
}
.subscriptions-manager-modal .subscriptions-table th:nth-child(1),
.subscriptions-manager-modal .subscriptions-table td:nth-child(1){ width:120px; min-width:0; }
.subscriptions-manager-modal .subscriptions-table th:nth-child(2),
.subscriptions-manager-modal .subscriptions-table td:nth-child(2){ width:112px; min-width:0; }
.subscriptions-manager-modal .subscriptions-table th:nth-child(3),
.subscriptions-manager-modal .subscriptions-table td:nth-child(3){ width:82px; min-width:0; }
.subscriptions-manager-modal .subscriptions-table th:nth-child(4),
.subscriptions-manager-modal .subscriptions-table td:nth-child(4){ width:70px; min-width:0; }
.subscriptions-manager-modal .subscriptions-table th:nth-child(5),
.subscriptions-manager-modal .subscriptions-table td:nth-child(5){ width:54px; min-width:0; }
.subscriptions-manager-modal .subscriptions-table th:nth-child(6),
.subscriptions-manager-modal .subscriptions-table td:nth-child(6){ width:78px; min-width:0; }
.subscriptions-manager-modal .subscriptions-table th:nth-child(n+7):nth-child(-n+18),
.subscriptions-manager-modal .subscriptions-table td:nth-child(n+7):nth-child(-n+18){ width:44px; min-width:0; }
.subscriptions-manager-modal .subscriptions-table th:nth-last-child(2),
.subscriptions-manager-modal .subscriptions-table td:nth-last-child(2){ width:72px; min-width:0; }
.subscriptions-manager-modal .subscriptions-table th:last-child,
.subscriptions-manager-modal .subscriptions-table td:last-child{ width:36px; min-width:0; }
.subscriptions-manager-modal .subscription-name-stack,
.subscriptions-manager-modal .subscription-field-stack{
  gap:2px;
}
.subscriptions-manager-modal .subscription-notes-input,
.subscriptions-manager-modal .subscription-meta-select,
.subscriptions-manager-modal .subscription-name-input,
.subscriptions-manager-modal .subscription-category-select,
.subscriptions-manager-modal .subscription-cadence-select,
.subscriptions-manager-modal .subscription-amount-input{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  min-height:22px;
  padding:2px 5px;
  border-radius:6px;
  line-height:1.15;
}
.subscriptions-manager-modal .subscription-notes-input,
.subscriptions-manager-modal .subscription-meta-select{
  font-size:0.48rem;
}
.subscriptions-manager-modal .subscription-name-input,
.subscriptions-manager-modal .subscription-category-select,
.subscriptions-manager-modal .subscription-cadence-select,
.subscriptions-manager-modal .subscription-amount-input{
  font-size:0.50rem;
}
.subscriptions-manager-modal .subscription-field-label{
  font-size:0.43rem;
  line-height:1;
}
.subscriptions-manager-modal .subscription-row-meta{
  gap:3px;
}
.subscriptions-manager-modal .subscription-meta-chip{
  font-size:0.41rem;
  padding:1px 3px;
  line-height:1.2;
}
.subscriptions-manager-modal .subscription-status-btn,
.subscriptions-manager-modal .subscription-delete-btn,
.subscriptions-manager-modal .subscription-cell-btn{
  border-radius:7px;
  padding:4px 4px;
  font-size:0.47rem;
}
.subscriptions-manager-modal .subscription-cell-btn{
  min-height:34px;
}
.subscriptions-manager-modal .subscription-cell-btn small,
.subscriptions-manager-modal .subscription-validation-note,
.subscriptions-manager-modal .subscription-note{
  font-size:0.40rem;
  line-height:1.15;
}
.subscriptions-manager-modal .subscription-delete-btn.manage-icon-btn{
  width:28px;
  height:28px;
  min-width:28px;
  padding:0;
}
.subscriptions-manager-modal .sub-track-usage-wrap{
  gap:3px;
}
.subscriptions-manager-modal .sub-track-freq-select{
  max-width:68px;
  min-width:0;
  height:24px;
  font-size:0.48rem;
  padding:2px 4px;
}
@media (max-height:900px){
  .subscriptions-manager-overlay.cbm-overlay{padding:8px 12px;}
  .subscriptions-manager-modal.cbm-modal{width:min(1900px, calc(100vw - 24px));max-height:calc(100vh - 16px);}
  .subscriptions-manager-header.cbm-header{padding:9px 14px 8px;}
  .subscriptions-manager-footer.cbm-footer{padding:6px 14px 8px;}
  .subscriptions-manager-body.cbm-body{padding:8px 14px;}
  .subscriptions-manager-shell{gap:8px;}
  .subscriptions-manager-toolbar{padding:8px 10px;}
  .subscriptions-manager-modal .subscriptions-controls-card{padding:7px 10px;}
  .subscriptions-manager-modal .subscriptions-table-card{padding:7px 10px 8px;}
  .subscriptions-manager-modal .subscription-cell-btn{min-height:30px;}
  .subscriptions-manager-modal .subscription-notes-input,
  .subscriptions-manager-modal .subscription-meta-select,
  .subscriptions-manager-modal .subscription-name-input,
  .subscriptions-manager-modal .subscription-category-select,
  .subscriptions-manager-modal .subscription-cadence-select,
  .subscriptions-manager-modal .subscription-amount-input{min-height:20px;}
}
@media (max-width:1180px){
  .subscriptions-manager-overlay.cbm-overlay{overflow:auto;align-items:flex-start;}
  .subscriptions-manager-modal.cbm-modal{width:100%;max-height:none;}
  .subscriptions-manager-body.cbm-body{overflow:visible;}
  .subscriptions-manager-modal .subscriptions-table-wrap{overflow-x:auto;}
  .subscriptions-manager-modal .subscriptions-table{width:max-content;min-width:100%;}
}
@media (max-width:760px){
  .subscriptions-manager-overlay.cbm-overlay{padding:10px;}
  .subscriptions-manager-toolbar{align-items:stretch;flex-direction:column;}
  .subscriptions-manager-toolbar #addSubscriptionBtn{width:100%;}
}

/* === subscriptions-manager-entry-polish-v1188 === */
/* v1188 — Subscription Manager entry readability pass.
   UI-only: preserves subscription logic and the v1187 column alignment while making row text genuinely readable. */
.subscriptions-manager-modal .subscriptions-table-wrap{
  overflow-x:hidden;
  overflow-y:visible;
}
.subscriptions-manager-modal .subscriptions-table{
  width:100%;
  min-width:0;
  table-layout:fixed;
}
/* Column widths remain aligned with the current grid; amount is tightened to free text space. */
.subscriptions-manager-modal .subscriptions-table th:nth-child(1),
.subscriptions-manager-modal .subscriptions-table td:nth-child(1){ width:124px; }
.subscriptions-manager-modal .subscriptions-table th:nth-child(2),
.subscriptions-manager-modal .subscriptions-table td:nth-child(2){ width:118px; }
.subscriptions-manager-modal .subscriptions-table th:nth-child(3),
.subscriptions-manager-modal .subscriptions-table td:nth-child(3){ width:86px; }
.subscriptions-manager-modal .subscriptions-table th:nth-child(4),
.subscriptions-manager-modal .subscriptions-table td:nth-child(4){ width:48px; }
.subscriptions-manager-modal .subscriptions-table th:nth-child(5),
.subscriptions-manager-modal .subscriptions-table td:nth-child(5){ width:52px; }
.subscriptions-manager-modal .subscriptions-table th:nth-child(6),
.subscriptions-manager-modal .subscriptions-table td:nth-child(6){ width:76px; }
.subscriptions-manager-modal .subscriptions-table th:nth-child(n+7):nth-child(-n+18),
.subscriptions-manager-modal .subscriptions-table td:nth-child(n+7):nth-child(-n+18){ width:44px; }
.subscriptions-manager-modal .subscriptions-table th:nth-last-child(2),
.subscriptions-manager-modal .subscriptions-table td:nth-last-child(2){ width:70px; }
.subscriptions-manager-modal .subscriptions-table th:last-child,
.subscriptions-manager-modal .subscriptions-table td:last-child{ width:34px; }
.subscriptions-manager-modal .subscriptions-table th,
.subscriptions-manager-modal .subscriptions-table td{
  padding-left:3px;
  padding-right:3px;
}
.subscriptions-manager-modal .subscriptions-table thead th{
  text-align:center;
  vertical-align:bottom;
}
.subscriptions-manager-modal .subscriptions-table thead th:nth-child(1),
.subscriptions-manager-modal .subscriptions-table thead th:nth-child(2),
.subscriptions-manager-modal .subscriptions-table thead th:nth-child(3){
  text-align:left;
  padding-left:7px;
}
.subscriptions-manager-modal .subscriptions-table thead th:nth-child(4){
  text-align:right;
  padding-right:8px;
}
.subscriptions-manager-modal .subscriptions-table thead th:nth-child(5),
.subscriptions-manager-modal .subscriptions-table thead th:nth-child(6),
.subscriptions-manager-modal .subscriptions-table thead th:nth-last-child(2),
.subscriptions-manager-modal .subscriptions-table thead th:last-child{
  text-align:center;
}
.subscriptions-manager-modal .subscriptions-table td:nth-child(4){ text-align:right; }
.subscriptions-manager-modal .subscriptions-table td:nth-child(5),
.subscriptions-manager-modal .subscriptions-table td:nth-child(6),
.subscriptions-manager-modal .subscriptions-table td:nth-child(n+7):nth-child(-n+18),
.subscriptions-manager-modal .subscriptions-table td:nth-last-child(2),
.subscriptions-manager-modal .subscriptions-table td:last-child{
  text-align:center;
}
/* Real font-size increase for editable subscription entry text only. Paid/Due/month cells stay compact. */
.subscriptions-manager-modal .subscription-name-input,
.subscriptions-manager-modal .subscription-category-select,
.subscriptions-manager-modal .subscription-cadence-select,
.subscriptions-manager-modal .subscription-amount-input{
  font-size:0.66rem;
  line-height:1.2;
}
.subscriptions-manager-modal .subscription-notes-input,
.subscriptions-manager-modal .subscription-meta-select{
  font-size:0.58rem;
  line-height:1.18;
}
.subscriptions-manager-modal .subscription-field-label{
  font-size:0.50rem;
  line-height:1;
}
.subscriptions-manager-modal .subscription-meta-chip{
  font-size:0.46rem;
  line-height:1.1;
}
.subscriptions-manager-modal .subscription-name-stack,
.subscriptions-manager-modal .subscription-field-stack{
  align-content:start;
  gap:2px;
}
.subscriptions-manager-modal .subscription-notes-input,
.subscriptions-manager-modal .subscription-meta-select,
.subscriptions-manager-modal .subscription-name-input,
.subscriptions-manager-modal .subscription-category-select,
.subscriptions-manager-modal .subscription-cadence-select,
.subscriptions-manager-modal .subscription-amount-input{
  min-height:23px;
  padding-top:2px;
  padding-bottom:2px;
}
.subscriptions-manager-modal .subscription-amount-input{
  width:50px;
  max-width:50px;
  justify-self:end;
  padding-left:3px;
  padding-right:4px;
}
.subscriptions-manager-modal .subscription-field-stack:has(.subscription-amount-input){
  justify-items:end;
}
.subscriptions-manager-modal .subscription-field-stack:has(.subscription-amount-input) .subscription-field-label{
  width:50px;
  text-align:right;
}
.subscriptions-manager-modal .sub-track-freq-select{
  font-size:0.56rem;
  line-height:1.15;
}
/* Preserve compact state/month labels exactly so row height does not expand unnecessarily. */
.subscriptions-manager-modal .subscription-status-btn,
.subscriptions-manager-modal .subscription-cell-btn,
.subscriptions-manager-modal .subscription-cell-btn small,
.subscriptions-manager-modal .subscription-validation-note,
.subscriptions-manager-modal .subscription-note{
  font-size:0.47rem;
}
@media (max-height:900px){
  .subscriptions-manager-modal .subscription-notes-input,
  .subscriptions-manager-modal .subscription-meta-select,
  .subscriptions-manager-modal .subscription-name-input,
  .subscriptions-manager-modal .subscription-category-select,
  .subscriptions-manager-modal .subscription-cadence-select,
  .subscriptions-manager-modal .subscription-amount-input{ min-height:22px; }
}
@media (max-width:1180px){
  .subscriptions-manager-modal .subscriptions-table-wrap{overflow-x:auto;}
  .subscriptions-manager-modal .subscriptions-table{width:max-content;min-width:100%;}
}

/* === subscriptions-manager-state-headers-v1189 === */
/* v1189 — Subscription Manager table readability refinement.
   Scope: presentation only. Keeps subscription data, handlers, cadence, month-cell states, and layout logic unchanged. */
.subscriptions-manager-modal .subscriptions-table thead th{
  font-size:0.62rem;
  line-height:1.12;
  font-weight:800;
  letter-spacing:0.055em;
  color:#40556a;
  text-transform:uppercase;
  padding-top:6px;
  padding-bottom:6px;
}
.subscriptions-manager-modal .subscriptions-table thead th:nth-child(n+7):nth-child(-n+18){
  font-size:0.60rem;
  letter-spacing:0.045em;
}
.subscriptions-manager-modal .subscription-status-btn{
  min-width:42px;
  border-radius:999px;
  padding:4px 8px;
  font-size:0.54rem;
  line-height:1.05;
  font-weight:800;
  letter-spacing:0.01em;
  border:1px solid rgba(22,101,52,0.28);
  background:linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%);
  color:#14532d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.78), 0 1px 2px var(--overlay-08);
}
.subscriptions-manager-modal .subscription-status-btn.is-paused{
  border-color:rgba(180,83,9,0.32);
  background:linear-gradient(180deg, var(--warn-soft) 0%, #fde68a 100%);
  color:#78350f;
}
.subscriptions-manager-modal .subscription-status-btn:focus-visible{
  outline:2px solid rgba(37,99,235,0.45);
  outline-offset:2px;
}
@media (max-height:900px){
  .subscriptions-manager-modal .subscriptions-table thead th{
    font-size:0.60rem;
    padding-top:5px;
    padding-bottom:5px;
  }
  .subscriptions-manager-modal .subscriptions-table thead th:nth-child(n+7):nth-child(-n+18){
    font-size:0.58rem;
  }
  .subscriptions-manager-modal .subscription-status-btn{
    padding-top:3px;
    padding-bottom:3px;
  }
}

/* === csv-import-styles-v1251 === */
/* ═══════════════════════════════════════════════════════════════
   CSV Bank Import — consolidated styles v1251
   (fixed flex shell: header/account/footer stay compact; body owns scroll)
   ═══════════════════════════════════════════════════════════════ */

/* ── Overlay & modal shell ── */
.csv-import-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(15,23,42,0.52);
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow: hidden;          /* modal owns the viewport; row/table areas scroll internally */
}
.csv-import-overlay.csv-open { display: flex; }

.csv-import-modal {
  background: var(--panel, #fff);
  border: 1px solid var(--card-border, rgba(100,116,139,0.18));
  border-radius: 16px;
  width: 100%;
  max-width: min(1460px, calc(100vw - 24px));
  height: calc(100vh - 48px);
  max-height: calc(100vh - 48px);
  margin: 0 auto;
  box-shadow: 0 28px 72px rgba(15,23,42,0.22);
  overflow: hidden;          /* clips the border-radius */
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ── Header ── */
.csv-import-header {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line, rgba(100,116,139,0.15));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.csv-import-title { font-size: 1rem; font-weight: 800; color: var(--accent-text, #0f172a); }
.csv-import-sub   { font-size: 0.72rem; color: var(--muted, #64748b); margin-top: 3px; }
.csv-import-close {
  background: none; border: none; font-size: 1.3rem; cursor: pointer;
  color: var(--muted, #64748b); padding: 0 4px; line-height: 1; flex-shrink: 0;
}
.csv-import-close:hover { color: var(--accent-text, #0f172a); }

/* ── Body ── */
.csv-import-body {
  padding: 16px 22px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Summary stats strip ── */
.csv-import-summary { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.csv-import-stat {
  flex: 1; min-width: 100px; padding: 9px 12px;
  border-radius: 10px; background: var(--panel-2, #f8fafc);
  border: 1px solid var(--line, rgba(100,116,139,0.15));
}
.csv-import-stat-label {
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 700; color: var(--muted, #64748b); margin-bottom: 3px;
}
.csv-import-stat-value {
  font-size: 0.92rem; font-weight: 700;
  font-family: var(--font-mono, monospace); color: var(--accent-text, #0f172a);
}
.csv-import-stat-value.val-warn { color: var(--red-900); }
.csv-import-stat-value.val-good { color: var(--green-900); }

/* ── Review table wrapper: ALWAYS scrollable horizontally ── */
.csv-review-table-wrap {
  overflow: auto;            /* vertical scroll is scoped to the transaction rows/table area */
  min-height: 0;
  border-radius: 10px;
  border: 1px solid var(--line, rgba(100,116,139,0.15));
  -webkit-overflow-scrolling: touch;  /* smooth scroll on iOS */
}
.csv-review-table {
  width: 100%;
  min-width: 1260px;          /* keeps type / category / sub-category / pattern columns aligned */
  border-collapse: collapse;
  font-size: 0.72rem;
  table-layout: fixed;       /* predictable column widths */
}

/* ── Column widths (fixed layout) ── */
.csv-review-table col.c-date   { width: 92px; }
.csv-review-table col.c-desc   { width: 200px; }
.csv-review-table col.c-amt    { width: 72px; }
.csv-review-table col.c-month  { width: 90px; }
.csv-review-table col.c-type   { width: 150px; }
.csv-review-table col.c-cat    { width: 160px; }
.csv-review-table col.c-sub    { width: 170px; }
.csv-review-table col.c-cad    { width: 150px; }
.csv-review-table col.c-status { width: 110px; }
.csv-review-table col.c-skip   { width: 62px; }

/* ── Table rows & cells ── */
.csv-review-table thead th {
  padding: 8px 10px; text-align: left;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted, #64748b); background: var(--panel-2, #f8fafc);
  border-bottom: 1px solid var(--line, rgba(100,116,139,0.15));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  position: sticky;
  top: 0;
  z-index: 2;
}
.csv-review-table tbody tr { border-bottom: 1px solid var(--line, rgba(100,116,139,0.10)); }
.csv-review-table tbody tr:last-child { border-bottom: none; }
.csv-review-table tbody tr.row-skip { opacity: 0.45; }
.csv-review-table tbody tr.row-dup  { background: rgba(245,158,11,0.05); }
.csv-review-table td {
  padding: 7px 10px; vertical-align: middle; color: var(--accent-text, #0f172a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Specific cell types ── */
.csv-review-date {
  font-family: var(--font-mono, monospace); font-size: 0.68rem;
  color: var(--muted, #64748b); white-space: nowrap;
}
/* Description: clipped with tooltip via title="" attribute */
.csv-review-desc {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: default;           /* indicates hoverable */
  position: relative;
}
.csv-review-amount {
  font-family: var(--font-mono, monospace); font-weight: 700;
  text-align: right; white-space: nowrap;
}
.csv-review-amount.positive { color: var(--green-900); }
.csv-review-amount.negative { color: var(--red-800); }

/* ── Badges ── */
.csv-review-badge {
  display: inline-flex; align-items: center; padding: 2px 6px;
  border-radius: 4px; font-size: 0.58rem; font-weight: 700; white-space: nowrap;
}
.csv-review-badge.auto   { background: rgba(16,185,129,0.12); color: var(--green-800); border: 1px solid rgba(16,185,129,0.25); }
.csv-review-badge.manual { background: rgba(99,102,241,0.10); color: var(--indigo-600); border: 1px solid rgba(99,102,241,0.2); }
.csv-review-badge.dup    { background: rgba(245,158,11,0.12); color: var(--red-900); border: 1px solid rgba(245,158,11,0.25); }
/* Credit-specific badge reuse: Income=auto (green), Reimbursement=manual (purple), Skipped=dup (amber) */

.csv-review-table td.csv-control-cell,
.csv-review-table td:has(> select),
.csv-review-table td:has(> button.csv-skip-btn) {
  overflow: visible;
  text-overflow: clip;
}
.csv-cat-select,
.csv-subcat-select,
.csv-savings-group-select,
.csv-savings-sub-select,
.csv-cadence-select,
.csv-credit-type-select,
.csv-target-type-select,
.csv-income-group-select,
.csv-income-sub-select,
.csv-map-sel {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.68rem;
  line-height: 1.25;
  padding: 4px 26px 4px 7px;
  border-radius: 6px;
  border: 1px solid var(--line, rgba(100,116,139,0.2));
  background-color: var(--panel, #fff);
  color: var(--accent-text, #0f172a);
  outline: none;
}
.csv-cadence-select,
.csv-credit-type-select,
.csv-target-type-select {
  font-size: 0.66rem;
}
.csv-cat-select:focus,
.csv-subcat-select:focus,
.csv-savings-group-select:focus,
.csv-savings-sub-select:focus,
.csv-cadence-select:focus,
.csv-credit-type-select:focus,
.csv-target-type-select:focus,
.csv-income-group-select:focus,
.csv-income-sub-select:focus,
.csv-map-sel:focus {
  border-color: rgba(65,83,100,0.38);
  box-shadow: 0 0 0 2px rgba(65,83,100,0.08);
}
.csv-skip-btn {
  background: none; border: 1px solid var(--line, rgba(100,116,139,0.2));
  border-radius: 6px; font: inherit; font-size: 0.62rem;
  padding: 2px 6px; cursor: pointer; color: var(--muted, #64748b); width: 100%;
}
.csv-skip-btn:hover  { background: var(--panel-2, #f8fafc); }
.csv-skip-btn.active { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.3); color: var(--red-800); }

/* ── Month group divider row ── */
.csv-month-group-row td {
  background: var(--panel-2, #f8fafc); font-size: 0.65rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted, #64748b);
  padding: 5px 10px; border-top: 1px solid var(--line, rgba(100,116,139,0.15));
}

/* ── Section headers (Expenses / Credits) ── */
.csv-section-head {
  font-size: 0.78rem; font-weight: 800; color: var(--accent-text, #0f172a);
  margin: 4px 0 6px; padding-bottom: 5px;
  border-bottom: 1px solid var(--line, rgba(100,116,139,0.15));
}
.csv-section-note { font-size: 0.68rem; color: var(--muted, #64748b); margin-bottom: 8px; line-height: 1.5; }

/* ── Footer ── */
.csv-import-footer {
  padding: 12px 22px 16px; border-top: 1px solid var(--line, rgba(100,116,139,0.15));
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.csv-import-msg { font-size: 0.7rem; color: var(--muted, #64748b); }
.csv-import-footer-btns { display: flex; gap: 8px; }
.csv-commit-btn {
  padding: 8px 20px; border-radius: 9px; border: none;
  background: var(--purple); color: var(--white); font: inherit; font-size: 0.76rem; font-weight: 700;
  cursor: pointer; transition: background 120ms;
}
.csv-commit-btn:hover    { background: #4c12c4; }
.csv-commit-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.csv-cancel-btn {
  padding: 8px 16px; border-radius: 9px;
  border: 1px solid var(--line, rgba(100,116,139,0.2)); background: transparent;
  font: inherit; font-size: 0.76rem; font-weight: 600;
  color: var(--muted, #64748b); cursor: pointer;
}
.csv-cancel-btn:hover { background: var(--panel-2, #f8fafc); }

/* ── Review top bar ── */
.csv-review-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.csv-format-badge  { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 5px; font-size: 0.64rem; font-weight: 700; background: rgba(94,23,235,0.10); border: 1px solid rgba(94,23,235,0.2); color: var(--indigo-600); }
.csv-remap-btn     { background: none; border: 1px solid var(--line, rgba(100,116,139,0.2)); border-radius: 7px; font: inherit; font-size: 0.68rem; font-weight: 600; padding: 4px 10px; cursor: pointer; color: var(--muted, #64748b); }
.csv-remap-btn:hover { background: var(--panel-2, #f8fafc); }

/* ── Column mapping UI ── */
.csv-mapping-ui { display: grid; gap: 14px; }
.csv-mapping-banner {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
  border-radius: 10px; background: rgba(245,158,11,0.07); border: 1px solid rgba(245,158,11,0.25);
}
.csv-mapping-icon  { font-size: 1.4rem; flex-shrink: 0; }
.csv-mapping-title { font-size: 0.82rem; font-weight: 800; color: var(--red-900); margin-bottom: 3px; }
.csv-mapping-sub   { font-size: 0.70rem; color: #78350f; line-height: 1.45; }
.csv-mapping-grid  { display: grid; gap: 8px; }
.csv-mapping-row   {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  background: var(--panel-2, #f8fafc); border: 1px solid var(--line, rgba(100,116,139,0.15));
}
.csv-mapping-label { font-size: 0.74rem; font-weight: 700; color: var(--accent-text, #0f172a); display: flex; flex-direction: column; gap: 2px; }
.csv-mapping-help  { font-size: 0.62rem; font-weight: 500; color: var(--muted, #64748b); }
.csv-req           { color: var(--red-600); }
.csv-map-sel {
  font: inherit; font-size: 0.70rem; padding: 5px 8px;
  border-radius: 7px; border: 1px solid var(--line, rgba(100,116,139,0.2));
  background: var(--panel, #fff); color: var(--accent-text, #0f172a);
  min-width: 200px; max-width: 260px;
}
.csv-mapping-preview-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #64748b); }
.csv-mapping-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.csv-map-apply-btn {
  padding: 9px 20px; border-radius: 9px; border: none;
  background: var(--purple); color: var(--white); font: inherit; font-size: 0.76rem; font-weight: 700;
  cursor: pointer; transition: background 120ms;
}
.csv-map-apply-btn:hover { background: #4c12c4; }
.csv-map-save-label { font-size: 0.70rem; color: var(--muted, #64748b); display: flex; align-items: center; gap: 6px; cursor: pointer; }

/* ── Collapsible section heads ── */
.csv-collapsible-head {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.csv-collapsible-head:hover { opacity: 0.82; }
.csv-chevron { font-size: 0.7rem; color: var(--muted, #64748b); flex-shrink: 0; }
.csv-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 0.6rem;
  font-weight: 700;
  background: var(--panel-2, #f8fafc);
  border: 1px solid var(--line, rgba(100,116,139,0.2));
  color: var(--muted, #64748b);
}
.csv-section-body { margin-bottom: 0; min-height: 0; display: flex; flex-direction: column; }
.csv-empty-section {
  flex: 1 1 auto;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border: 1px dashed var(--line, rgba(100,116,139,0.22));
  border-radius: 10px;
  background: var(--panel-2, #f8fafc);
  color: var(--muted, #64748b);
  font-size: 0.72rem;
  text-align: center;
  line-height: 1.45;
}
.csv-review-sections {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.csv-review-sections .csv-section-head { flex: 0 0 auto; margin-bottom: 0; }
.csv-review-sections .csv-section-note { flex: 0 0 auto; }
.csv-review-sections .csv-review-table-wrap { flex: 1 1 auto; }
.csv-review-sections.csv-open-sections-1 .csv-review-table-wrap { max-height: clamp(220px, calc(100dvh - 355px), 540px); }
.csv-review-sections.csv-open-sections-2 .csv-review-table-wrap { max-height: clamp(150px, calc((100dvh - 430px) / 2), 300px); }
.csv-review-sections.csv-open-sections-0 { display: flex; }

/* ── Filter pills ── */
.csv-filter-pills {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-left: auto;        /* push pills to the right of the heading */
}
.csv-filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 20px;
  font: inherit;
  font-size: 0.62rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--line, rgba(100,116,139,0.2));
  background: var(--panel-2, #f8fafc);
  color: var(--muted, #64748b);
  transition: background 100ms, color 100ms, border-color 100ms;
  white-space: nowrap;
}
.csv-filter-pill:hover { background: var(--panel, #fff); border-color: rgba(94,23,235,0.3); color: var(--indigo-600); }
.csv-filter-pill.active { background: rgba(94,23,235,0.10); border-color: rgba(94,23,235,0.3); color: var(--indigo-600); font-weight: 700; }

/* ── Responsive: narrow screens keep scrolling ── */
@media (max-width: 700px) {
  .csv-import-overlay { padding: 0; }
  .csv-import-modal { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .csv-import-body    { padding: 10px 12px; }
  .csv-mapping-row    { grid-template-columns: 1fr; }
  .csv-map-sel        { min-width: 0; width: 100%; max-width: none; }
  .csv-mapping-actions { flex-direction: column; align-items: flex-start; }
  .csv-filter-pills   { margin-left: 0; margin-top: 6px; }
  .csv-review-sections.csv-open-sections-1 .csv-review-table-wrap { max-height: clamp(210px, calc(100dvh - 330px), 520px); }
  .csv-review-sections.csv-open-sections-2 .csv-review-table-wrap { max-height: clamp(140px, calc((100dvh - 400px) / 2), 260px); }
}

/* === csv-import-history-clean-v1226 === */
.csv-import-history-list{display:grid;gap:8px;padding:4px 0 8px;overflow:auto;flex:1 1 auto;min-height:0;align-content:start;}
.csv-import-history-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);}
.csv-import-history-main{min-width:0;display:grid;gap:3px;}
.csv-import-history-title{font-size:0.76rem;font-weight:700;color:var(--accent-text);}
.csv-import-history-meta{font-size:0.64rem;color:var(--muted);line-height:1.35;}
.csv-import-history-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.csv-import-history-actions .csv-skip-btn{border-color:rgba(239,68,68,0.22);color:var(--red-800);background:rgba(239,68,68,0.06);}
@media (max-width:700px){.csv-import-history-item{align-items:flex-start;flex-direction:column}.csv-import-history-actions{width:100%;justify-content:flex-end}}

/* === multi-account-cc-styles-v1242 === */
/* ── Account-source bar in CSV header ── */
.csv-account-bar{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 22px;border-bottom:1px solid var(--line,rgba(100,116,139,.15));background:var(--panel-2,#f8fafc);flex-wrap:wrap;}
.csv-account-bar label{font-size:.69rem;font-weight:800;color:var(--muted,#64748b);letter-spacing:.04em;text-transform:uppercase;flex-shrink:0;}
.csv-account-select{font:inherit;font-size:.74rem;font-weight:700;color:var(--accent-text,#0f172a);background:var(--panel,#fff);border:1px solid var(--line,rgba(100,116,139,.22));border-radius:8px;padding:4px 10px;cursor:pointer;flex:0 1 280px;min-width:180px;max-width:280px;}
.csv-account-new-btn{font:inherit;font-size:.68rem;font-weight:800;padding:4px 10px;border-radius:8px;border:1px dashed rgba(100,116,139,.35);background:transparent;color:var(--muted,#64748b);cursor:pointer;flex-shrink:0;transition:border-color 120ms,color 120ms;}
.csv-account-new-btn:hover{border-color:rgba(59,130,246,.5);color:var(--blue-600);}
.csv-account-manage-btn{font:inherit;font-size:.68rem;font-weight:800;padding:4px 10px;border-radius:8px;border:1px solid var(--line,rgba(100,116,139,.22));background:var(--panel,#fff);color:var(--muted,#64748b);cursor:pointer;flex-shrink:0;transition:border-color 120ms,color 120ms,background 120ms;}
.csv-account-manage-btn:hover:not(:disabled){border-color:rgba(59,130,246,.45);color:var(--blue-600);background:var(--panel-2,#f8fafc);}
.csv-account-manage-btn.csv-danger{border-color:rgba(239,68,68,.22);color:var(--red-800);background:rgba(239,68,68,.04);}
.csv-account-manage-btn.csv-danger:hover:not(:disabled){background:rgba(239,68,68,.10);}
.csv-account-manage-btn:disabled{opacity:.42;cursor:not-allowed;}
.csv-import-history-filter-note{font-size:.66rem;color:var(--muted,#64748b);margin:2px 0 8px;}

/* ── CC Repayment type badge on CSV rows ── */
.cc-repay-marker{display:inline-flex;align-items:center;gap:4px;font-size:.62rem;font-weight:700;padding:2px 7px;border-radius:99px;background:rgba(3,105,161,.1);color:#0369a1;border:1px solid rgba(3,105,161,.22);text-transform:uppercase;letter-spacing:.03em;}

/* ══════════════════════════════════════════════════════════
   CREDIT CARD MANAGER MODAL
   ══════════════════════════════════════════════════════════ */
.cc-overlay{display:none;position:fixed;inset:0;z-index:11000;background:rgba(15,23,42,.55);align-items:center;justify-content:center;padding:24px 16px;}
.cc-overlay.cc-open{display:flex;}
.cc-modal{background:var(--panel,#fff);border:1px solid var(--card-border,rgba(100,116,139,.18));border-radius:16px;width:100%;max-width:min(1740px,calc(100vw - 24px));height:calc(100vh - 48px);max-height:calc(100vh - 48px);display:flex;flex-direction:column;box-shadow:0 28px 72px rgba(15,23,42,.22);overflow:hidden;}
.cc-header{padding:18px 22px 14px;border-bottom:1px solid var(--line,rgba(100,116,139,.15));display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.cc-header-text .cc-title{font-size:1rem;font-weight:800;color:var(--accent-text,#0f172a);}
.cc-header-text .cc-sub{font-size:.72rem;color:var(--muted,#64748b);margin-top:3px;}
.cc-close-btn{background:none;border:none;font-size:1.4rem;line-height:1;cursor:pointer;color:var(--muted,#64748b);padding:2px 6px;border-radius:6px;transition:color 120ms;}
.cc-close-btn:hover{color:var(--accent-text,#0f172a);}
.cc-tabs{display:flex;border-bottom:1px solid var(--line,rgba(100,116,139,.15));padding:0 22px;gap:0;}
.cc-tab{padding:10px 16px;font:inherit;font-size:.78rem;font-weight:700;color:var(--muted,#64748b);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;margin-bottom:-1px;transition:color 120ms,border-color 120ms;}
.cc-tab.cc-active{color:var(--blue-600);border-bottom-color:var(--blue-600);}
.cc-tab:hover:not(.cc-active){color:var(--accent-text,#0f172a);}
.cc-body{padding:18px 22px;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;}
.cc-panel{display:none;}
.cc-panel.cc-panel-active{display:flex;flex-direction:column;flex:1;min-height:0;}

/* card list */
.cc-card-list{display:grid;gap:10px;align-content:start;overflow-y:auto;flex:1;min-height:0;}
.cc-card-item{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line,rgba(100,116,139,.18));border-radius:12px;background:var(--panel,#fff);}
.cc-card-chip{width:36px;height:24px;border-radius:5px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.55rem;font-weight:800;color:var(--white);letter-spacing:.03em;}
.cc-card-info{flex:1;min-width:0;}
.cc-card-name{font-size:.84rem;font-weight:700;color:var(--accent-text,#0f172a);}
.cc-card-meta{font-size:.68rem;color:var(--muted,#64748b);margin-top:2px;}
.cc-card-balance{font-size:.86rem;font-weight:800;font-family:var(--font-mono,'Geist Mono',monospace);color:var(--accent-text,#0f172a);flex-shrink:0;}
.cc-card-balance.bal-red{color:var(--red-600);}
.cc-card-actions{display:flex;gap:6px;flex-shrink:0;}
.cc-card-btn{font:inherit;font-size:.68rem;font-weight:700;padding:4px 10px;border-radius:7px;cursor:pointer;border:1px solid var(--line,rgba(100,116,139,.22));background:var(--panel-2,#f8fafc);color:var(--accent-text,#0f172a);transition:background 110ms,border-color 110ms;}
.cc-card-btn:hover{background:var(--panel,#fff);border-color:rgba(59,130,246,.35);}
.cc-card-btn.cc-danger{border-color:rgba(239,68,68,.25);color:var(--red-800);background:rgba(239,68,68,.06);}
.cc-card-btn.cc-danger:hover{background:rgba(239,68,68,.12);}

/* add card form */
.cc-add-form{display:grid;gap:10px;margin-top:12px;padding:14px;border:1px dashed rgba(100,116,139,.3);border-radius:12px;background:var(--panel-2,#f8fafc);}
.cc-add-form.cc-hidden{display:none;}
.cc-form-row{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;}
.cc-form-field{display:grid;gap:4px;flex:1;min-width:130px;}
.cc-form-field label{font-size:.66rem;font-weight:700;color:var(--muted,#64748b);text-transform:uppercase;letter-spacing:.04em;}
.cc-form-input{font:inherit;font-size:.8rem;color:var(--accent-text,#0f172a);background:var(--panel,#fff);border:1px solid var(--line,rgba(100,116,139,.22));border-radius:8px;padding:7px 10px;}
.cc-form-input:focus{outline:2px solid rgba(59,130,246,.4);}
.cc-color-swatch-row{display:flex;gap:6px;flex-wrap:wrap;}
.cc-swatch{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform 100ms;}
.cc-swatch.cc-swatch-sel{border-color:#1e293b;transform:scale(1.15);}
.cc-form-btns{display:flex;gap:8px;margin-top:4px;}
.cc-save-btn{font:inherit;font-size:.76rem;font-weight:700;padding:7px 16px;border-radius:8px;cursor:pointer;background:var(--blue-600);color:var(--white);border:none;transition:background 120ms;}
.cc-save-btn:hover{background:#1d4ed8;}
.cc-cancel-form-btn{font:inherit;font-size:.76rem;font-weight:600;padding:7px 14px;border-radius:8px;cursor:pointer;background:transparent;color:var(--muted,#64748b);border:1px solid var(--line,rgba(100,116,139,.22));}

/* charges panel */
.cc-charges-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px;}
.cc-charges-select{font:inherit;font-size:.78rem;font-weight:600;color:var(--accent-text,#0f172a);background:var(--panel,#fff);border:1px solid var(--line,rgba(100,116,139,.22));border-radius:8px;padding:6px 10px;cursor:pointer;}
.cc-toolbar-btn{font:inherit;font-size:.74rem;font-weight:700;padding:6px 14px;border-radius:8px;cursor:pointer;background:rgba(37,99,235,.1);color:#1d4ed8;border:1px solid rgba(37,99,235,.25);transition:background 110ms;}
.cc-toolbar-btn:hover{background:rgba(37,99,235,.18);}
.cc-toolbar-btn.cc-secondary{background:var(--panel-2,#f8fafc);color:var(--accent-text,#0f172a);border-color:var(--line,rgba(100,116,139,.22));}
.cc-toolbar-btn.cc-secondary:hover{background:var(--panel,#fff);}

/* statement upload zone */
.cc-upload-zone{border:2px dashed rgba(100,116,139,.3);border-radius:12px;padding:20px;text-align:center;cursor:pointer;transition:border-color 140ms,background 140ms;background:var(--panel-2,#f8fafc);margin-bottom:14px;}
.cc-upload-zone:hover,.cc-upload-zone.drag-over{border-color:rgba(37,99,235,.5);background:rgba(37,99,235,.04);}
.cc-upload-zone-icon{font-size:1.8rem;margin-bottom:6px;}
.cc-upload-zone-label{font-size:.8rem;font-weight:700;color:var(--accent-text,#0f172a);margin-bottom:3px;}
.cc-upload-zone-sub{font-size:.68rem;color:var(--muted,#64748b);line-height:1.4;}
.cc-upload-zone input[type=file]{display:none;}

/* parsing progress */
.cc-parse-progress{padding:14px;border-radius:10px;background:rgba(37,99,235,.07);border:1px solid rgba(37,99,235,.18);font-size:.76rem;color:#1d4ed8;display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.cc-parse-spinner{width:16px;height:16px;border:2px solid rgba(37,99,235,.25);border-top-color:var(--blue-600);border-radius:50%;animation:cc-spin .7s linear infinite;flex-shrink:0;}
@keyframes cc-spin{to{transform:rotate(360deg);}}
.cc-charge-del{font:inherit;font-size:.65rem;font-weight:700;background:none;border:none;color:var(--muted,#64748b);cursor:pointer;padding:2px 6px;border-radius:5px;transition:color 110ms;flex-shrink:0;}
.cc-charge-del:hover{color:var(--red-600);}

/* charge entry form */
.cc-charge-form{padding:14px;border:1px dashed rgba(100,116,139,.28);border-radius:12px;background:var(--panel-2,#f8fafc);margin-bottom:14px;}
.cc-charge-form.cc-hidden{display:none;}

/* repayments panel */
.cc-repayment-info{flex-shrink:0;padding:12px 14px;border-radius:10px;background:rgba(245,158,11,.07);border:1px solid rgba(245,158,11,.22);font-size:.74rem;color:var(--red-900);line-height:1.55;margin-bottom:14px;}
.cc-repayment-info strong{font-weight:700;}
.cc-repayment-list{display:grid;gap:8px;}
.cc-repayment-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line,rgba(100,116,139,.18));border-radius:10px;background:var(--panel,#fff);}
.cc-repayment-date{font-size:.66rem;color:var(--muted,#64748b);flex-shrink:0;}
.cc-repayment-desc{flex:1;font-size:.78rem;font-weight:600;color:var(--accent-text,#0f172a);}
.cc-repayment-amt{font-size:.82rem;font-weight:700;font-family:var(--font-mono,'Geist Mono',monospace);color:#0369a1;}
.cc-repayment-actions{display:flex;gap:6px;align-items:center;flex-shrink:0;}
.cc-repayment-actions select{font:inherit;font-size:.68rem;padding:4px 7px;border:1px solid var(--line,rgba(100,116,139,.22));border-radius:7px;background:var(--panel,#fff);}
.cc-repayment-actions button{font:inherit;font-size:.65rem;font-weight:700;padding:4px 8px;border-radius:7px;cursor:pointer;border:1px solid var(--line,rgba(100,116,139,.22));background:var(--panel-2,#f8fafc);color:var(--accent-text,#0f172a);}
.cc-repayment-actions button:hover{border-color:rgba(37,99,235,.35);background:var(--panel,#fff);}

/* unified matching workspace */
.cc-match-workspace{display:grid;grid-template-columns:minmax(520px,.95fr) minmax(760px,1.45fr);gap:16px;align-items:stretch;flex:1;min-height:0;}
.cc-match-pane{border:1px solid var(--line,rgba(100,116,139,.18));border-radius:12px;background:var(--panel,#fff);overflow:hidden;display:flex;flex-direction:column;}
.cc-match-pane-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line,rgba(100,116,139,.12));}
.cc-match-pane-title{font-size:.76rem;font-weight:800;color:var(--accent-text,#0f172a);}
.cc-match-pane-sub{font-size:.62rem;color:var(--muted,#64748b);margin-top:2px;line-height:1.35;}
.cc-match-pane-body{padding:10px 12px;display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;overflow-y:auto;}
.cc-match-repay-card{border:1px solid var(--line,rgba(100,116,139,.18));border-radius:10px;padding:9px 10px;background:var(--panel-2,#f8fafc);cursor:pointer;display:grid;gap:6px;}
.cc-match-repay-card.is-selected{border-color:rgba(37,99,235,.45);background:rgba(37,99,235,.06);}
.cc-match-repay-card.is-matched{border-color:rgba(16,185,129,.24);background:rgba(16,185,129,.04);}
.cc-match-repay-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;}
.cc-match-repay-top>div:first-child{min-width:0;flex:1;}
.cc-match-repay-title{font-size:.72rem;font-weight:800;color:var(--accent-text,#0f172a);line-height:1.3;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.cc-match-repay-title .cc-repay-marker{flex:0 0 auto;}
.cc-match-repay-meta{font-size:.62rem;color:var(--muted,#64748b);line-height:1.35;}
.cc-match-repay-amt{font-size:.82rem;font-weight:800;font-family:var(--font-mono,'Geist Mono',monospace);color:#0369a1;white-space:nowrap;}
.cc-match-card-select{font:inherit;font-size:.65rem;padding:4px 7px;border:1px solid var(--line,rgba(100,116,139,.22));border-radius:7px;background:var(--panel,#fff);max-width:170px;}
.cc-match-summary{padding:9px 10px;border:1px solid rgba(37,99,235,.18);border-radius:10px;background:rgba(37,99,235,.05);font-size:.7rem;color:var(--accent-text,#0f172a);display:flex;align-items:center;justify-content:space-between;gap:10px;}
.cc-match-charge-list{display:grid;gap:6px;overflow-y:auto;padding-right:4px;}
.cc-match-charge-row{display:grid;grid-template-columns:20px 86px minmax(520px,1fr) auto auto;gap:10px;align-items:center;padding:7px 8px;border:1px solid var(--line,rgba(100,116,139,.18));border-radius:9px;background:var(--panel,#fff);font-size:.68rem;}
.cc-match-charge-row.is-linked{background:rgba(16,185,129,.05);border-color:rgba(16,185,129,.24);}
.cc-match-charge-desc{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:var(--accent-text,#0f172a);}
.cc-match-charge-date{font-family:var(--font-mono,'Geist Mono',monospace);color:var(--muted,#64748b);font-size:.62rem;}
.cc-match-charge-amt{font-family:var(--font-mono,'Geist Mono',monospace);font-weight:800;color:var(--red-600);white-space:nowrap;}
.cc-match-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:8px;position:sticky;bottom:0;background:var(--panel,#fff);padding-top:8px;border-top:1px solid var(--line,rgba(100,116,139,.10));}
.cc-history-list{display:grid;gap:10px;align-content:start;overflow-y:auto;flex:1;min-height:0;}
.cc-history-item{border:1px solid var(--line,rgba(100,116,139,.18));border-radius:12px;background:var(--panel,#fff);padding:0;overflow:hidden;display:grid;}
.cc-history-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:11px 12px;cursor:pointer;}
.cc-history-head:hover{background:var(--panel-2,#f8fafc);}
.cc-history-head-main{min-width:0;flex:1;}
.cc-history-title{font-size:.76rem;font-weight:800;color:var(--accent-text,#0f172a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cc-history-meta{font-size:.62rem;color:var(--muted,#64748b);line-height:1.35;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cc-history-amount{font-family:var(--font-mono,'Geist Mono',monospace);font-weight:800;color:#0369a1;white-space:nowrap;padding-left:12px;}
.cc-history-detail{display:none;padding:0 12px 11px;gap:8px;border-top:1px solid var(--line,rgba(100,116,139,.10));background:var(--panel,#fff);}
.cc-history-item.is-expanded .cc-history-detail{display:grid;}
.cc-history-charge{display:grid;grid-template-columns:86px minmax(520px,1fr) auto;gap:8px;align-items:center;padding:6px 8px;border-radius:8px;background:var(--panel-2,#f8fafc);font-size:.67rem;}
@media (max-width: 860px){.cc-match-workspace{grid-template-columns:1fr}.cc-match-charge-row{grid-template-columns:20px 70px minmax(0,1fr) auto}.cc-match-charge-row .cc-charge-del{display:none}}

/* pattern learn strip */
.cc-pattern-strip{padding:10px 14px;border-radius:10px;background:rgba(124,58,237,.07);border:1px solid rgba(124,58,237,.18);font-size:.72rem;color:var(--violet-800);margin-bottom:14px;display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;}
.cc-pattern-strip strong{font-weight:700;}
.cc-pattern-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;background:rgba(124,58,237,.12);border:1px solid rgba(124,58,237,.22);font-size:.65rem;font-weight:700;color:var(--violet-800);}
.cc-pattern-tag-del{background:none;border:none;cursor:pointer;color:var(--violet-700);font-size:.7rem;padding:0 2px;line-height:1;}
.cc-pattern-add-row{display:flex;gap:6px;align-items:center;width:100%;margin-top:6px;}
.cc-pattern-input{font:inherit;font-size:.74rem;flex:1;padding:5px 9px;border:1px solid rgba(124,58,237,.3);border-radius:7px;background:var(--panel,#fff);color:var(--accent-text,#0f172a);}
.cc-pattern-add-btn{font:inherit;font-size:.72rem;font-weight:700;padding:5px 11px;border-radius:7px;background:rgba(124,58,237,.12);color:var(--violet-800);border:1px solid rgba(124,58,237,.3);cursor:pointer;}

/* match results info box */
.cc-match-result{padding:10px 14px;border-radius:10px;font-size:.73rem;line-height:1.5;margin-top:10px;}
.cc-match-result.matched{background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.25);color:var(--green-800);}
.cc-match-result.partial{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.25);color:var(--red-900);}

/* empty state */
.cc-empty{text-align:center;padding:32px 16px;color:var(--muted,#64748b);font-size:.78rem;line-height:1.55;}
.cc-empty-icon{font-size:2rem;margin-bottom:8px;}

/* footer */
.cc-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 22px 16px;border-top:1px solid var(--line,rgba(100,116,139,.15));}
.cc-footer-close{font:inherit;font-size:.76rem;font-weight:700;padding:8px 18px;border-radius:8px;cursor:pointer;background:var(--panel-2,#f8fafc);border:1px solid var(--line,rgba(100,116,139,.22));color:var(--accent-text,#0f172a);}
.cc-footer-close:hover{background:var(--panel,#fff);}

/* Overview widget */
.cc-overview-widget{margin:0 0 10px;}
.cc-overview-inner{border:1px solid var(--line,rgba(100,116,139,.18));border-radius:12px;background:var(--panel,#fff);overflow:hidden;}
.cc-overview-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 8px;border-bottom:1px solid var(--line,rgba(100,116,139,.12));}
.cc-overview-head-label{font-size:.72rem;font-weight:800;color:var(--muted,#64748b);text-transform:uppercase;letter-spacing:.05em;}
.cc-overview-head-total{font-size:.76rem;font-weight:700;color:var(--red-600);font-family:var(--font-mono,'Geist Mono',monospace);}
.cc-overview-rows{padding:6px 14px 10px;display:grid;gap:5px;}
.cc-overview-row{display:flex;align-items:center;gap:8px;font-size:.74rem;}
.cc-overview-swatch{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.cc-overview-row-name{flex:1;color:var(--accent-text,#0f172a);font-weight:600;}
.cc-overview-row-amt{font-family:var(--font-mono,'Geist Mono',monospace);font-weight:700;}
.cc-overview-row-amt.amt-executed{color:var(--red-600);}
.cc-overview-row-amt.amt-pending{color:#d97706;}
.cc-overview-open-btn{display:block;width:calc(100% - 28px);margin:0 14px 10px;font:inherit;font-size:.7rem;font-weight:700;padding:6px 12px;border-radius:8px;cursor:pointer;text-align:center;background:rgba(37,99,235,.08);color:#1d4ed8;border:1px solid rgba(37,99,235,.2);transition:background 110ms;}
.cc-overview-open-btn:hover{background:rgba(37,99,235,.15);}

/* statement import preview table */
.cc-preview-table{width:100%;border-collapse:collapse;font-size:.72rem;margin-top:10px;}
.cc-preview-table th{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted,#64748b);padding:5px 8px;border-bottom:1px solid var(--line,rgba(100,116,139,.18));text-align:left;}
.cc-preview-table td{padding:5px 8px;border-bottom:1px solid var(--line,rgba(100,116,139,.1));vertical-align:middle;}
.cc-preview-table tr:last-child td{border-bottom:none;}
.cc-preview-table .td-amt{text-align:right;font-family:var(--font-mono,'Geist Mono',monospace);font-weight:700;color:var(--red-600);}

.cc-preview-table tr.cc-row-removed td{opacity:.35;text-decoration:line-through;pointer-events:none;}
.cc-prev-remove:hover{color:var(--red-600);background:rgba(239,68,68,.08);}
.cc-preview-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}

@media (max-width:600px){
  .cc-modal{height:100dvh;max-height:100dvh;border-radius:0;}
  .cc-body{padding:12px 14px;}
  .cc-header{padding:14px 16px 12px;}
  .cc-tabs{padding:0 14px;}
  .cc-footer{padding:10px 14px 14px;}
  .cc-charges-toolbar{flex-direction:column;align-items:stretch;}
}


/* === Phase 2 — Veyra full layout shell rebuild === */
.app.veyra-shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh;max-width:none;margin:0;background:var(--bg);position:relative;}
.veyra-sidebar{background:var(--panel);color:var(--accent);border-right:1px solid var(--line);padding:16px 12px 12px;display:flex;flex-direction:column;gap:10px;position:sticky;top:0;height:100vh;overflow:visible;z-index:40;}
.sidebar-brand{padding:0 6px 12px;border-bottom:1px solid var(--line);margin-bottom:0;display:block;}
.sidebar-brand-logo .brand{padding:0;margin:0;border:0;background:transparent;box-shadow:none;display:block;}
.sidebar-brand-logo .veyra-brand-logo{width:148px;max-width:100%;display:block;}
.sidebar-brand-logo .veyra-brand-svg{display:block;width:148px;height:auto;}
.sidebar-month-block{position:relative;z-index:55;}
.month-selector{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);cursor:pointer;color:var(--accent);font:inherit;text-align:left;}
.month-selector:hover{border-color:rgba(16,185,129,.28);background:#fff;}
.month-selector-copy{display:grid;gap:1px;min-width:0;}
.month-selector-kicker{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);}
.month-selector-label{font-size:.78rem;font-weight:800;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.month-selector-arrow{font-size:.75rem;color:var(--muted);transition:transform 140ms ease;}
body.month-popover-open .month-selector-arrow{transform:rotate(180deg);}
.month-popover{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.06);padding:8px;max-height:360px;overflow:auto;}
body.month-popover-open .month-popover{display:block;}
.month-popover-head{font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding:4px 6px 8px;}
.month-popover .month-list{display:grid;gap:4px;margin:0;}
.month-popover .month-list button,.month-popover .month-list .month-btn{width:100%;text-align:left;border:1px solid transparent;background:transparent;color:var(--accent);border-radius:8px;padding:8px 9px;font:inherit;font-size:.76rem;font-weight:650;cursor:pointer;}
.month-popover .month-list button:hover,.month-popover .month-list .month-btn:hover{background:var(--panel-2);}
.month-popover .month-list button.active,.month-popover .month-list .active{background:var(--emerald-bg);border-color:var(--emerald-border);color:var(--green-800);}
.sidebar-nav-wrap{min-height:0;overflow:auto;padding-right:2px;display:grid;gap:10px;}

.veyra-sidebar .view-nav{display:grid;gap:12px;padding:0;margin:0;background:transparent;border:0;box-shadow:none;}
.veyra-sidebar .veyra-nav-group{display:grid;gap:5px;}
.veyra-sidebar .veyra-nav-group-head{display:grid;gap:1px;padding:0 4px 2px;}
.veyra-sidebar .veyra-nav-group-label{font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}
.veyra-sidebar .veyra-nav-group-hint{font-size:.60rem;color:var(--hint);font-weight:600;}
.veyra-sidebar .veyra-nav-group-items{display:grid;gap:3px;}
.veyra-sidebar .view-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 9px;border-radius:10px;border:1px solid transparent;background:transparent;box-shadow:none;color:var(--accent);font:inherit;cursor:pointer;text-align:left;transition:background 120ms,border-color 120ms;}
.veyra-sidebar .view-btn:hover{background:var(--panel-2);}
.veyra-sidebar .view-btn.active{background:var(--emerald-bg);border-color:var(--emerald-border);}
.veyra-sidebar .view-btn-icon{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:.92rem;flex:0 0 auto;}
.veyra-sidebar .view-btn-copy{display:grid;gap:0;min-width:0;flex:1;}
.veyra-sidebar .view-btn-title{font-size:.78rem;font-weight:750;color:var(--accent);line-height:1.2;}
.veyra-sidebar .view-btn.active .view-btn-title{color:var(--green-800);}
.veyra-sidebar .view-btn-sub{font-size:.63rem;font-weight:650;color:var(--muted);line-height:1.2;}
.veyra-sidebar .view-btn-meta{display:none;}
.veyra-sidebar .usage-pill,.veyra-sidebar .achievements-pill{margin-left:auto;}
.tools-drawer-trigger,.context-tools-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);background:var(--panel-2);color:var(--accent);border-radius:10px;padding:9px 10px;font:inherit;font-size:.74rem;font-weight:800;cursor:pointer;}
.tools-drawer-trigger{margin-top:auto;width:100%;}
.tools-drawer-trigger:hover,.context-tools-btn:hover{background:#fff;border-color:rgba(99,102,241,.25);}

/* Phase 2: tools panel overlays the main view, adjacent to the sidebar. It must not push dashboard content. */
.app.veyra-shell{grid-template-columns:240px 0 minmax(0,1fr);}
body.tools-drawer-open .app.veyra-shell{grid-template-columns:240px 0 minmax(0,1fr);}
.tools-drawer{position:fixed;left:240px;top:0;bottom:0;height:100vh;width:360px;max-width:calc(100vw - 240px);min-width:0;overflow:hidden;background:var(--panel);border-right:1px solid var(--line);box-shadow:0 12px 32px rgba(0,0,0,.10),0 4px 12px rgba(0,0,0,.06);z-index:45;display:flex;flex-direction:column;transform:translateX(-100%);opacity:0;pointer-events:none;transition:transform 180ms ease,opacity 120ms ease;}
body.tools-drawer-open .tools-drawer{transform:translateX(0);opacity:1;pointer-events:auto;}
.tools-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line);min-width:320px;}
.tools-drawer-title{font-size:.92rem;font-weight:800;color:var(--accent);}
.tools-drawer-sub{font-size:.64rem;font-weight:600;color:var(--muted);}
.tools-drawer-close{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);font-size:1rem;line-height:1;cursor:pointer;border-radius:8px;padding:0;}
.tools-drawer-close:hover{background:#fff;color:var(--accent);}
.tools-drawer-body.side-actions{display:flex;flex-direction:column;gap:6px;margin:0;padding:14px 18px 20px;overflow:auto;min-width:320px;}
.tools-drawer-body.side-actions button{width:100%;display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;border:1px solid var(--line);background:var(--panel-2);color:var(--accent);font:inherit;font-size:.74rem;font-weight:700;cursor:pointer;white-space:nowrap;}
.tools-drawer-body.side-actions button:hover{background:#fff;border-color:rgba(99,102,241,.25);color:var(--accent);}
.tools-drawer-body.side-actions button.danger,.tools-drawer-body.side-actions .danger{border-color:var(--red-border);background:var(--red-bg);color:var(--red-text);}
.tools-drawer-body .side-divider{height:1px;background:var(--line);margin:6px 0;}
.tools-drawer-body .customize-cards-anchor{position:relative;}
.tools-drawer-body .card-visibility-popover{left:0;right:auto;top:calc(100% + 6px);z-index:80;}
.veyra-main{grid-column:3;min-width:0;display:flex;flex-direction:column;overflow:visible;padding:0;align-content:initial;gap:0;}
.context-bar{position:sticky;top:0;z-index:35;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:10px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;}
.context-bar-left,.context-bar-right{display:flex;align-items:center;gap:14px;min-width:0;}
.context-bar-title-wrap{display:grid;gap:0;min-width:0;}
.context-bar-kicker{font-size:.58rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);}
.context-bar-month{font-size:.92rem;font-weight:850;color:var(--accent);letter-spacing:-.02em;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.context-bar-divider{width:1px;height:18px;background:var(--line);}
.context-bar-stat{font-size:.75rem;font-weight:700;color:var(--muted);white-space:nowrap;}
.context-bar-right #monthProgress{margin:0;}
.veyra-content{padding:20px 24px 44px;display:flex;flex-direction:column;gap:16px;overflow:visible;min-width:0;}
.mobile-menu-btn{display:none;border:1px solid var(--line);background:var(--panel-2);border-radius:9px;padding:7px 9px;font:inherit;font-weight:800;color:var(--accent);cursor:pointer;}
.mobile-scrim{display:none;}

/* Prototype 3 compact grouped sidebar reset. */
.app.veyra-shell .veyra-sidebar .view-nav.veyra-nav{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;gap:14px!important;margin:0!important;padding:0!important;width:100%!important;max-width:none!important;min-width:0!important;background:transparent!important;border:0!important;box-shadow:none!important;align-items:stretch!important;}
.app.veyra-shell .veyra-sidebar .veyra-nav-group{position:relative!important;display:flex!important;flex-direction:column!important;gap:2px!important;flex:0 0 auto!important;width:100%!important;min-width:0!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;}
.app.veyra-shell .veyra-sidebar .veyra-nav-group::before,.app.veyra-shell .veyra-sidebar .veyra-nav-group::after,.app.veyra-shell .veyra-sidebar .view-btn::after{content:none!important;display:none!important;}
.app.veyra-shell .veyra-sidebar .veyra-nav-group-head{position:relative!important;display:block!important;margin:0 0 2px!important;padding:0 8px 4px!important;}
.app.veyra-shell .veyra-sidebar .veyra-nav-group-label{font-size:.58rem!important;line-height:1.1!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.08em!important;color:var(--accent)!important;}
.app.veyra-shell .veyra-sidebar .veyra-nav-group-hint{display:block!important;margin-top:1px!important;font-size:.62rem!important;line-height:1.2!important;font-weight:500!important;color:var(--hint)!important;white-space:normal!important;}
.app.veyra-shell .veyra-sidebar .veyra-nav-group-items{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:2px!important;}
.app.veyra-shell .veyra-sidebar .view-nav.veyra-nav .view-btn{position:relative!important;display:flex!important;grid-template-columns:none!important;align-items:center!important;justify-content:space-between!important;gap:9px!important;flex:0 0 auto!important;width:100%!important;min-width:0!important;min-height:0!important;padding:8px 10px!important;border-radius:8px!important;border:1px solid transparent!important;background:transparent!important;box-shadow:none!important;color:var(--accent)!important;transform:none!important;text-align:left!important;font:inherit!important;cursor:pointer!important;}
.app.veyra-shell .veyra-sidebar .view-nav.veyra-nav .view-btn:hover{transform:none!important;background:var(--panel-2)!important;border-color:transparent!important;box-shadow:none!important;}
.app.veyra-shell .veyra-sidebar .view-nav.veyra-nav .view-btn.active,.app.veyra-shell .veyra-sidebar .view-nav.veyra-nav .view-btn.active:hover{background:var(--emerald-bg)!important;border-color:transparent!important;color:var(--accent)!important;box-shadow:none!important;}
.app.veyra-shell .veyra-sidebar .view-nav.veyra-nav .view-btn-icon{width:18px!important;height:18px!important;flex:0 0 auto!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;font-size:.95rem!important;}
.app.veyra-shell .veyra-sidebar .view-nav.veyra-nav .view-btn-copy{display:grid!important;gap:0!important;min-width:0!important;flex:1 1 auto!important;}
.app.veyra-shell .veyra-sidebar .view-nav.veyra-nav .view-btn-title{display:block!important;font-size:.80rem!important;line-height:1.2!important;font-weight:700!important;color:var(--accent)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.app.veyra-shell .veyra-sidebar .view-nav.veyra-nav .view-btn.active .view-btn-title{color:var(--green-800)!important;}
.app.veyra-shell .veyra-sidebar .view-nav.veyra-nav .view-btn-sub{display:block!important;font-size:.62rem!important;line-height:1.2!important;font-weight:600!important;color:var(--muted)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.app.veyra-shell .veyra-sidebar .view-nav.veyra-nav .view-btn-meta{display:none!important;}
.app.veyra-shell .veyra-sidebar .usage-pill,.app.veyra-shell .veyra-sidebar .achievements-pill{flex:0 0 auto!important;margin-left:auto!important;box-shadow:none!important;}

@media (max-width: 860px){
  .app.veyra-shell{grid-template-columns:1fr;}
  body.tools-drawer-open .app.veyra-shell{grid-template-columns:1fr;}
  .veyra-sidebar{position:fixed;left:0;top:0;bottom:0;width:268px;transform:translateX(-105%);transition:transform 180ms ease;box-shadow:0 12px 32px rgba(0,0,0,.10),0 4px 12px rgba(0,0,0,.06);z-index:80;}
  body.mobile-nav-open .veyra-sidebar{transform:translateX(0);}
  body.tools-drawer-open .veyra-sidebar{transform:translateX(-105%)!important;}
  .veyra-main{grid-column:1;}
  .mobile-menu-btn{display:inline-flex;}
  .context-bar{padding:9px 12px;}
  .context-bar-divider,.context-bar-stat{display:none;}
  .context-tools-btn{padding:8px 10px;}
  .veyra-content{padding:14px 12px 34px;}
  .tools-drawer{position:fixed;left:0;top:0;bottom:0;grid-column:auto;height:100vh;width:min(360px,94vw);max-width:94vw;transform:translateX(-105%);opacity:0;pointer-events:none;transition:transform 180ms ease,opacity 120ms ease;z-index:120;border-right:1px solid var(--line);box-shadow:0 12px 32px rgba(0,0,0,.10),0 4px 12px rgba(0,0,0,.06);}
  body.tools-drawer-open .tools-drawer{width:min(360px,94vw);transform:translateX(0);opacity:1;pointer-events:auto;}
  .mobile-scrim{display:block;position:fixed;inset:0;background:rgba(15,23,42,.32);z-index:70;opacity:0;pointer-events:none;transition:opacity 160ms ease;}
  body.mobile-nav-open .mobile-scrim,body.tools-drawer-open .mobile-scrim{opacity:1;pointer-events:auto;}
}
@media (max-width: 560px){.context-bar-right #monthProgress{display:none}.context-bar-month{max-width:46vw}.context-tools-btn{font-size:0;gap:0}.context-tools-btn::before{content:'⚙';font-size:.85rem}}


/* === Phase 3 Overview clean layout — Prototype 4 production surface ===
   This replaces the older Phase 3 structural/refined/v3/v4 override blocks.
   Goal: one authoritative Overview layout, no guessed fixed heights, no clipped
   allocation/trends content, and clean vertical rhythm between sections. */

/* Context bar action */
.context-bar-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.context-analytics-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border-radius:9px;
  border:1px solid var(--line-strong, rgba(0,0,0,.14));
  background:var(--panel-2);
  color:var(--accent);
  font-family:var(--font);
  font-size:.74rem;
  font-weight:750;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transition:background 140ms ease,color 140ms ease,border-color 140ms ease,transform 140ms ease;
}
.context-analytics-btn:hover{
  background:var(--accent);
  color:var(--panel);
  border-color:var(--accent);
  transform:translateY(-1px);
}

/* Financial state banner */
.status-banner{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin:0;
  padding:14px 18px;
  border-radius:14px;
  border:1px solid var(--emerald-border);
  background:linear-gradient(135deg, rgba(16,185,129,.055), rgba(16,185,129,.018));
  box-shadow:var(--shadow);
  overflow:hidden;
}
.status-banner::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--emerald);
}
.status-banner.state-warning{
  border-color:var(--amber-border);
  background:linear-gradient(135deg, rgba(245,158,11,.085), rgba(245,158,11,.025));
}
.status-banner.state-warning::before{background:var(--amber);}
.status-banner.state-overspending{
  border-color:var(--red-border);
  background:linear-gradient(135deg, rgba(239,68,68,.085), rgba(239,68,68,.025));
}
.status-banner.state-overspending::before{background:var(--red, #ef4444);}
.status-banner-icon{
  flex:0 0 auto;
  margin-top:1px;
  font-size:1.36rem;
  line-height:1;
}
.status-banner-body{flex:1;min-width:0;}
.status-banner-title{
  margin:0 0 3px;
  color:var(--green-800);
  font-size:.95rem;
  font-weight:800;
  line-height:1.25;
}
.status-banner-sub{
  color:var(--green-900);
  opacity:.78;
  font-size:.78rem;
  font-weight:500;
  line-height:1.35;
}
.status-banner.state-warning .status-banner-title,
.status-banner.state-warning .status-banner-sub{color:var(--amber-text);}
.status-banner.state-overspending .status-banner-title,
.status-banner.state-overspending .status-banner-sub{color:var(--red-text);}

/* KPI area: Bank Account hero + compact secondary tiles */
#summaryCards.summary{
  display:grid;
  grid-template-columns:minmax(280px, 1.35fr) minmax(180px, 1fr) minmax(180px, 1fr);
  grid-template-rows:repeat(2, minmax(102px, auto));
  gap:16px;
  align-items:stretch;
  margin:0;
}
#summaryCards [data-kpi-key]{cursor:grab;}
#summaryCards .hero-kpi{
  grid-row:1 / span 2;
  min-height:220px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:9px;
  position:relative;
  padding:24px 26px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  box-shadow:var(--shadow);
  overflow:hidden;
}
#summaryCards .hero-kpi::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:var(--emerald);
}
#summaryCards .hero-kpi.warn-80::before{background:var(--amber);}
#summaryCards .hero-kpi.warn-100::before,
#summaryCards .hero-kpi.negative-budget::before{background:var(--red, #ef4444);}
#summaryCards .hero-kpi .kpi-label,
#summaryCards .hero-kpi-eyebrow{
  color:var(--muted);
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
#summaryCards .hero-kpi .kpi-value,
#summaryCards .hero-kpi-value{
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:3rem;
  font-weight:850;
  letter-spacing:-.045em;
  line-height:1;
}
#summaryCards .hero-kpi .kpi-foot,
#summaryCards .hero-kpi-foot{
  color:var(--muted);
  font-size:.82rem;
  font-weight:500;
  line-height:1.38;
}
#summaryCards .kpi-card{
  min-height:102px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  padding:14px 15px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  box-shadow:var(--shadow);
  transition:transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
#summaryCards .kpi-card:hover{
  transform:translateY(-1px);
  border-color:var(--line-strong, rgba(0,0,0,.14));
}
#summaryCards .kpi-card .kpi-label,
#summaryCards .kpi-card-label{
  color:var(--muted);
  font-size:.61rem;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
#summaryCards .kpi-card .kpi-value,
#summaryCards .kpi-card-value{
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:1.18rem;
  font-weight:800;
  line-height:1.18;
  letter-spacing:-.025em;
}
#summaryCards .kpi-card .kpi-foot,
#summaryCards .kpi-card-foot{
  color:var(--muted);
  font-size:.66rem;
  font-weight:500;
  line-height:1.35;
}
#summaryCards .kpi-value.kpi-category{font-family:var(--font);font-size:.95rem;}
#summaryCards .value-negative,
#summaryCards .expense-negative{color:var(--red-text)!important;}
#summaryCards .income-positive,
#summaryCards .value-positive{color:var(--green-800)!important;}

/* Inline Smart Insights: separate section with clean breathing room */
.inline-smart-insights{
  display:block;
  margin:32px 0 38px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  clear:both;
}
.inline-analytics-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px;
}
.inline-analytics-section-title{
  color:var(--muted);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.inline-analytics-view-all{
  padding:0;
  border:0;
  background:transparent;
  color:var(--blue, var(--blue-600,#2563eb));
  font-family:var(--font);
  font-size:.72rem;
  font-weight:700;
  cursor:pointer;
}
.inline-analytics-view-all:hover{text-decoration:underline;}
.inline-analytics{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}
.insight-card.inline-insight-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:132px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel);
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform 140ms ease,border-color 140ms ease,box-shadow 140ms ease;
}
.insight-card.inline-insight-card:hover{
  transform:translateY(-1px);
  border-color:var(--line-strong, rgba(0,0,0,.14));
}
.insight-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.insight-card-label{
  color:var(--muted);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.insight-card-status{
  flex:0 0 auto;
  padding:2px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel-2);
  color:var(--muted);
  font-size:.58rem;
  font-weight:800;
  white-space:nowrap;
}
.insight-card-status.ok{background:var(--emerald-bg);border-color:var(--emerald-border);color:var(--green-800);}
.insight-card-status.warn{background:var(--amber-bg);border-color:var(--amber-border);color:var(--amber-text);}
.insight-card-status.bad{background:var(--red-bg);border-color:var(--red-border);color:var(--red-text);}
.insight-card-value{
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:1.32rem;
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.025em;
}
.insight-card-detail{
  color:var(--muted);
  font-size:.74rem;
  line-height:1.42;
}
.insight-card-detail strong{color:var(--accent);font-weight:700;}
.burn-pace-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}

/* Allocation section: one clean grid, equal-height cards, no clipped content */
.grid-overview{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:24px;
  align-items:stretch;
  margin:0;
}
.current-allocation-card.chart-card,
.current-allocation-card.ui-3d-panel,
.overview-allocation-card.alloc-list-card,
.alloc-list-card.overview-allocation-card{
  display:flex;
  flex-direction:column;
  height:auto;
  min-height:max(760px, calc(260px + (var(--allocation-row-count, 3) * 78px)));
  max-height:none;
  padding:22px 24px 24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  box-shadow:var(--shadow);
  overflow:visible;
  box-sizing:border-box;
}
.current-allocation-card::before,
.current-allocation-card::after,
.overview-allocation-card::before,
.overview-allocation-card::after{display:none!important;}

.allocation-head-simple,
.overview-allocation-card .allocation-section > .section-header{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0 0 18px;
  padding:0;
  border:0;
  background:transparent;
}
.allocation-title,
.allocation-head-simple h3,
.overview-allocation-card .allocation-section > .section-header h3{
  margin:0;
  color:var(--accent);
  font-size:1.02rem;
  font-weight:850;
  line-height:1.2;
  letter-spacing:-.015em;
}
.allocation-head-info{
  flex:0 0 auto;
  color:var(--muted);
  font-size:.72rem;
  font-weight:600;
  white-space:nowrap;
}

/* Current Budget Allocation chart + trends */
.current-allocation-card .distribution-stage,
.current-allocation-card .distribution-chart-tile,
.current-allocation-card .distribution-legend-tile{
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
.current-allocation-card .chart-wrap{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:26px;
  align-items:start;
  min-height:320px;
  margin:0 0 22px;
  overflow:visible;
}
.current-allocation-card .distribution-chart-tile{
  display:flex;
  align-items:center;
  justify-content:center;
  width:300px;
  min-width:300px;
  height:300px;
}
.current-allocation-card #spendingPie{
  width:280px!important;
  height:280px!important;
  max-width:280px!important;
  max-height:280px!important;
}
.current-allocation-card .chart-legend{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
  align-self:start;
}

.current-allocation-card .chart-legend > *{
  padding:7px 0;
  border-bottom:1px dashed var(--line);
  font-size:.8rem;
  line-height:1.25;
}
.current-allocation-card .trends-card-inline,
.current-allocation-card #categoryTrends{
  flex:0 0 auto;
  display:block;
  height:auto;
  min-height:0;
  max-height:none;
  margin:0;
  padding:18px 0 0;
  border:0;
  border-top:1px solid var(--line);
  background:transparent;
  box-shadow:none;
  overflow:visible;
}


/* Category Trends rebuilt correctly: compact explanation, protected left content */
.current-allocation-card .trends-card-inline{
  flex:0 0 auto;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
}

.current-allocation-card .trends-card-inline .trend-insight-list{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
}

.current-allocation-card .trends-card-inline .trend-insight-row{
  display:grid !important;
  grid-template-columns:minmax(116px, .75fr) minmax(250px, 1.45fr) minmax(110px, .65fr) minmax(180px, .9fr) !important;
  align-items:center !important;
  column-gap:10px !important;
  row-gap:6px !important;
  min-height:74px !important;
  height:auto !important;
  padding:9px 10px !important;
  border:1px solid var(--line) !important;
  border-radius:10px !important;
  background:var(--panel-2) !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

.current-allocation-card .trends-card-inline .trend-insight-row > *{
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}


.current-allocation-card .trends-card-inline .trend-insight-metrics{
  grid-column:2 !important;
  display:grid !important;
  grid-template-columns:repeat(3, minmax(72px, 1fr)) !important;
  gap:6px !important;
  min-width:0 !important;
}


.current-allocation-card .trends-card-inline .trend-insight-note{
  display:block !important;
  max-width:100% !important;
  color:var(--muted) !important;
  font-size:.64rem !important;
  line-height:1.32 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  -webkit-line-clamp:unset !important;
}

.current-allocation-card .trends-card-inline .trend-insight-note strong{
  color:var(--green-900);
  font-weight:850;
}

.current-allocation-card .trends-card-inline .trend-metric{
  min-width:0 !important;
  padding:7px 8px !important;
  border-radius:7px !important;
}


@media (max-width: 1500px){
  .current-allocation-card .trends-card-inline .trend-insight-row{
    grid-template-columns:minmax(102px, .7fr) minmax(230px, 1.45fr) minmax(96px, .55fr) minmax(150px, .75fr) !important;
    column-gap:8px !important;
    padding:9px 8px !important;
  }
  .current-allocation-card .trends-card-inline .trend-insight-note{
    font-size:.60rem !important;
  }
}

@media (max-width: 1250px){
  .current-allocation-card .trends-card-inline .trend-insight-row{
    grid-template-columns:minmax(100px, .8fr) minmax(220px, 1.6fr) minmax(130px, .9fr) !important;
  }
  
}

@media (max-width: 760px){
  .current-allocation-card .trends-card-inline .trend-insight-row{
    grid-template-columns:1fr !important;
  }
  
  .current-allocation-card .trends-card-inline .trend-insight-metrics{
    grid-column:auto !important;
  }
}

/* Budget Allocation list */
.overview-allocation-card .allocation-section,
.overview-allocation-card #budgetOverview,
.overview-allocation-card .alloc-grid{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow:visible;
}
.overview-allocation-card .alloc-top-row{
  flex:0 0 auto;
  display:grid;
  gap:14px;
  margin:0;
}
.overview-allocation-card .available-funds-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}
.overview-allocation-card .available-funds-banner{
  display:flex;
  align-items:center;
  gap:7px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:.78rem;
}
.overview-allocation-card .available-funds-banner .label{
  color:inherit;
  font:inherit;
  letter-spacing:0;
  text-transform:none;
}
.overview-allocation-card .available-funds-banner .value{
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:.78rem;
  font-weight:800;
}
.overview-allocation-card .alloc-progress{
  margin:0;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel-2);
}
.overview-allocation-card .alloc-progress-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 7px;
  color:var(--muted);
  font-size:.72rem;
  font-weight:650;
}
.overview-allocation-card .alloc-progress-head strong{
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:.76rem;
  font-weight:800;
  white-space:nowrap;
}
.overview-allocation-card .alloc-progress-track{
  height:6px;
  border-radius:999px;
  background:var(--line);
  overflow:hidden;
}
.overview-allocation-card .alloc-progress-fill{
  height:100%;
  border-radius:999px;
  background:var(--emerald);
}
.overview-allocation-card .alloc-focus-wrap{
  flex:1 1 auto;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  overflow:visible;
}
.overview-allocation-card .alloc-focus-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  height:auto;
  min-height:0;
  max-height:none;
  padding:0;
  overflow:visible;
}
.overview-allocation-card .alloc-focus-row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(132px,1.1fr) 72px minmax(150px,.95fr) minmax(82px,auto) minmax(96px,auto);
  gap:10px;
  align-items:center;
  min-height:64px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel-2);
  overflow:visible;
}
.overview-allocation-card .alloc-focus-row.is-over{background:rgba(239,68,68,.045);border-color:var(--red-border);}
.overview-allocation-card .alloc-focus-row.is-low{background:var(--amber-bg);border-color:var(--amber-border);}
.overview-allocation-card .alloc-focus-category{
  grid-column:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.overview-allocation-card .alloc-focus-target{
  grid-column:2;
  justify-self:start;
}
.overview-allocation-card .alloc-focus-current{
  grid-column:3;
  min-width:0;
}
.overview-allocation-card .alloc-focus-details{
  grid-column:4;
  justify-self:end;
  align-self:center;
  position:relative;
  min-width:0;
}
.overview-allocation-card .alloc-focus-remaining{
  grid-column:5;
  justify-self:end;
  text-align:right;
  min-width:92px;
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:.78rem;
  font-weight:850;
  line-height:1.15;
  white-space:nowrap;
}
.overview-allocation-card .alloc-focus-remaining.remaining-negative{color:var(--red-text);}
.overview-allocation-card .alloc-focus-remaining.remaining-low{color:var(--amber-text);}
.overview-allocation-card .alloc-focus-title{
  color:var(--accent);
  font-size:.78rem;
  font-weight:800;
  line-height:1.18;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.overview-allocation-card .alloc-focus-source,
.overview-allocation-card .alloc-focus-splitwise-hint{
  color:var(--muted);
  font-size:.61rem;
  line-height:1.2;
}
.overview-allocation-card .alloc-focus-current-top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  color:var(--muted);
  font-size:.66rem;
}
.overview-allocation-card .alloc-focus-current-value{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.70rem;
}
.overview-allocation-card .alloc-focus-pct{
  flex:0 0 auto;
  color:var(--muted);
  font-family:var(--font-mono);
  font-weight:800;
}
.overview-allocation-card .alloc-focus-bar{
  height:5px;
  margin-top:5px;
  border-radius:999px;
  background:var(--line);
  overflow:hidden;
}
.overview-allocation-card .alloc-focus-fill{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--emerald);
}
.overview-allocation-card .alloc-focus-fill.warn-80{background:var(--amber);}
.overview-allocation-card .alloc-focus-fill.warn-100{background:var(--red, #ef4444);}
.overview-allocation-card .target-edit{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.overview-allocation-card .target-input{
  width:58px;
  height:28px;
  border-radius:8px;
  text-align:center;
  font-family:var(--font-mono);
  font-size:.66rem;
  font-weight:800;
}
.overview-allocation-card .pill-soft{
  justify-content:center;
  min-width:58px;
  padding:4px 8px;
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:.62rem;
  font-weight:850;
}
.overview-allocation-card .alloc-focus-details-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:78px;
  max-width:104px;
  min-height:30px;
  padding:0 9px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--panel);
  color:var(--accent);
  font:inherit;
  font-size:.68rem;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
}
.overview-allocation-card .alloc-focus-details-btn::-webkit-details-marker{display:none;}
.overview-allocation-card .alloc-focus-details-label{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.overview-allocation-card .alloc-focus-panel{
  position:absolute;
  z-index:20;
  right:0;
  top:calc(100% + 8px);
  width:min(360px, calc(100vw - 48px));
  padding:12px;
  border:1px solid var(--line-strong, rgba(0,0,0,.14));
  border-radius:12px;
  background:var(--panel);
  box-shadow:var(--shadow-lg, 0 12px 32px rgba(0,0,0,.10));
}
.overview-allocation-card .alloc-focus-total{display:none;}
.overview-allocation-card .alloc-focus-toggle{
  align-self:center;
  flex:0 0 auto;
  margin:6px auto 0;
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel);
  color:var(--accent);
  font:inherit;
  font-size:.72rem;
  font-weight:800;
  cursor:pointer;
}


/* Budget Allocation action-column rebuild: Details + Remaining stay on one line */
.overview-allocation-card .available-funds-banner,
.overview-allocation-card .available-funds-wrap > :first-child{
  border:1px solid rgba(16,185,129,.28) !important;
  background:linear-gradient(135deg, rgba(16,185,129,.10), rgba(16,185,129,.035)) !important;
  color:var(--green-900) !important;
  border-radius:14px !important;
  box-shadow:0 8px 20px rgba(16,185,129,.08) !important;
}

.overview-allocation-card .available-funds-banner .label,
.overview-allocation-card .available-funds-wrap > :first-child .label{
  color:var(--green-900) !important;
  font-weight:750 !important;
}

.overview-allocation-card .available-funds-banner .value,
.overview-allocation-card .available-funds-wrap > :first-child .value{
  color:var(--green-900) !important;
  font-weight:900 !important;
}

.overview-allocation-card .alloc-focus-row{
  display:grid !important;
  grid-template-columns:minmax(170px, 1.08fr) 72px minmax(190px, 1fr) 116px 124px !important;
  grid-template-areas:"category target current details remaining" !important;
  align-items:center !important;
  column-gap:12px !important;
  row-gap:0 !important;
  min-height:70px !important;
}

.overview-allocation-card .alloc-focus-category{ grid-area:category !important; min-width:0 !important; }
.overview-allocation-card .alloc-focus-target{ grid-area:target !important; min-width:0 !important; }
.overview-allocation-card .alloc-focus-current{ grid-area:current !important; min-width:0 !important; }
.overview-allocation-card .alloc-focus-details{
  grid-area:details !important;
  position:relative !important;
  min-width:0 !important;
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.overview-allocation-card .alloc-focus-remaining{
  grid-area:remaining !important;
  width:100% !important;
  min-width:0 !important;
  height:34px !important;
  padding:0 11px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:12px !important;
  box-sizing:border-box !important;
  white-space:nowrap !important;
}

/* Direct-child fallback: protects rows where legacy markup/order differs. */
.overview-allocation-card .alloc-focus-row > details,
.overview-allocation-card .alloc-focus-row > .alloc-focus-details{
  grid-column:4 !important;
  grid-row:1 !important;
  align-self:center !important;
}
.overview-allocation-card .alloc-focus-row > .alloc-focus-remaining,
.overview-allocation-card .alloc-focus-row > [class*="remaining"]{
  grid-column:5 !important;
  grid-row:1 !important;
  align-self:center !important;
}

.overview-allocation-card .alloc-focus-details-btn,
.overview-allocation-card .alloc-focus-row summary.alloc-focus-details-btn{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:34px !important;
  padding:0 11px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  text-align:center !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}

.overview-allocation-card .alloc-focus-details-label{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

@media (max-width: 1100px){
  .overview-allocation-card .alloc-focus-row{
    grid-template-columns:minmax(0,1fr) minmax(150px,1fr) 108px 112px !important;
    grid-template-areas:
      "category current details remaining" !important;
  }
  .overview-allocation-card .alloc-focus-target{ display:none !important; }
}

@media (max-width: 760px){
  .overview-allocation-card .alloc-focus-row{
    grid-template-columns:minmax(0,1fr) 104px 104px !important;
    grid-template-areas:
      "category details remaining"
      "current current current" !important;
    row-gap:8px !important;
  }
}

/* Responsive */
@media (max-width:1400px){
  .grid-overview{grid-template-columns:1fr;gap:22px;}
  .current-allocation-card.chart-card,
  .current-allocation-card.ui-3d-panel,
  .overview-allocation-card.alloc-list-card,
  .alloc-list-card.overview-allocation-card{
    min-height:0;
  }
}
@media (max-width:900px){
  #summaryCards.summary{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
  }
  #summaryCards .hero-kpi{grid-column:1 / -1;grid-row:auto;min-height:190px;}
  .inline-analytics{grid-template-columns:1fr;}
  .inline-smart-insights{margin:24px 0 30px;}
  .current-allocation-card .chart-wrap{
    grid-template-columns:1fr;
    gap:18px;
    min-height:0;
  }
  .current-allocation-card .distribution-chart-tile{
    width:100%;
    min-width:0;
    height:auto;
    min-height:280px;
  }
  .overview-allocation-card .alloc-focus-row{
    grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:
      "category details remaining"
      "current current current";
    gap:8px 10px;
  }
  .overview-allocation-card .alloc-focus-category{grid-area:category;}
  .overview-allocation-card .alloc-focus-details{grid-area:details;}
  .overview-allocation-card .alloc-focus-remaining{grid-area:remaining;min-width:88px;}
  .overview-allocation-card .alloc-focus-current{grid-area:current;}
  .overview-allocation-card .alloc-focus-target{display:none;}
}
@media (max-width:560px){
  #summaryCards.summary{grid-template-columns:1fr;}
  .current-allocation-card.chart-card,
  .current-allocation-card.ui-3d-panel,
  .overview-allocation-card.alloc-list-card,
  .alloc-list-card.overview-allocation-card{
    padding:18px 16px 20px;
    border-radius:16px;
  }
  
  .allocation-head-simple,
  .overview-allocation-card .allocation-section > .section-header{
    align-items:flex-start;
    flex-direction:column;
    gap:6px;
  }
}
/* === end Phase 3 Overview clean layout === */


/* === Phase 4A — Expenses clean page rebuild === */
.phase4-expenses-page{
  flex-direction:column;
  gap:20px;
  padding:20px 24px 28px;
  overflow:visible !important;
}

.phase4-expenses-page.active{
  display:flex !important;
}


.phase4-expense-list-root{
  display:block;
  overflow:visible !important;
}

.phase4-expenses-view{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.phase4-expense-hero{
  display:grid;
  grid-template-columns:minmax(260px,1.25fr) repeat(3, minmax(160px,.8fr));
  gap:16px;
  align-items:stretch;
}

.phase4-expense-hero-card{
  position:relative;
  min-height:132px;
  padding:20px 22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.phase4-expense-hero-card.primary{
  min-height:154px;
  background:linear-gradient(135deg, rgba(16,185,129,.075), rgba(255,255,255,.88));
}

.phase4-expense-hero-card.primary::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:var(--emerald);
}

.phase4-expense-label{
  color:var(--muted);
  font-size:.64rem;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.phase4-expense-value{
  margin-top:14px;
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:2.35rem;
  font-weight:900;
  line-height:1;
  letter-spacing:-.045em;
}

.phase4-expense-hero-card:not(.primary) .phase4-expense-value{
  font-size:1.28rem;
  margin-top:13px;
}

.phase4-expense-sub{
  margin-top:8px;
  color:var(--muted);
  font-size:.74rem;
  font-weight:550;
  line-height:1.36;
}

.phase4-expense-board{
  padding:22px 24px 24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  box-shadow:var(--shadow);
  overflow:visible;
}

.phase4-expense-board-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.phase4-expense-board-title{
  margin:0;
  color:var(--accent);
  font-size:1.08rem;
  font-weight:900;
  letter-spacing:-.02em;
}

.phase4-expense-board-sub{
  margin-top:3px;
  color:var(--muted);
  font-size:.74rem;
  line-height:1.35;
}


.phase4-expense-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(255px, 1fr));
  gap:16px;
  overflow:visible;
}

.phase4-expense-tile{
  --expense-cat-cta: var(--emerald);
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  min-height:176px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(135deg, var(--expense-cat-soft, rgba(16,185,129,.08)), rgba(255,255,255,.92));
  box-shadow:var(--shadow);
  color:var(--accent);
  text-align:left;
  cursor:pointer;
  overflow:hidden;
  transition:transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.phase4-expense-tile::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--expense-cat-cta);
}

.phase4-expense-tile:hover{
  transform:translateY(-2px);
  border-color:var(--ui3d-border-strong, var(--line-strong));
  box-shadow:0 12px 28px rgba(15,23,42,.09);
}

.phase4-expense-tile.is-alert{
  background:linear-gradient(135deg, rgba(239,68,68,.075), rgba(255,255,255,.94));
}

.phase4-expense-tile-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.phase4-expense-title-wrap{
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.phase4-expense-title-copy{min-width:0;}

.phase4-expense-kicker{
  color:var(--muted);
  font-size:.58rem;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.phase4-expense-name{
  margin-top:2px;
  color:var(--accent);
  font-size:.9rem;
  font-weight:900;
  line-height:1.18;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.phase4-expense-count{
  flex:0 0 auto;
  color:var(--muted);
  font-size:.62rem;
  font-weight:750;
  text-align:right;
  line-height:1.3;
  white-space:nowrap;
}

.phase4-expense-main{
  margin-top:2px;
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:1.45rem;
  font-weight:900;
  letter-spacing:-.035em;
  line-height:1;
}

.phase4-expense-main.is-live{color:var(--red-text);}

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

.phase4-expense-stat{
  min-width:0;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.70);
}

.phase4-expense-stat-label{
  display:block;
  color:var(--muted);
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.phase4-expense-stat-value{
  display:block;
  margin-top:3px;
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:.76rem;
  font-weight:850;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.phase4-expense-progress{margin-top:auto;}

.phase4-expense-progress-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:7px;
  color:var(--muted);
  font-size:.64rem;
  font-weight:750;
}

.phase4-expense-progress-track{
  height:7px;
  border-radius:999px;
  background:var(--line);
  overflow:hidden;
}

.phase4-expense-progress-fill{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--expense-cat-cta);
}

.phase4-expense-progress-fill.is-over{background:var(--red, #ef4444);}

.phase4-expense-footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

.phase4-expense-cta{
  flex:0 0 auto;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel);
  color:var(--accent);
  font-size:.64rem;
  font-weight:850;
  white-space:nowrap;
}

@media (max-width: 1100px){
  .phase4-expense-hero{grid-template-columns:repeat(2, minmax(0,1fr));}
  .phase4-expense-hero-card.primary{grid-column:1 / -1;}
}

@media (max-width: 640px){
  .phase4-expenses-page{padding:16px 14px 22px;}
.phase4-expense-hero,
  .phase4-expense-grid{grid-template-columns:1fr;}
  .phase4-expense-board{padding:18px 16px 20px;}
  .phase4-expense-board-head{flex-direction:column; align-items:flex-start;}
}
/* === end Phase 4A — Expenses clean page rebuild === */


/* === Phase 4B — Income & Savings clean page rebuild === */
.phase4-income-savings-page{
  flex-direction:column;
  gap:20px;
  padding:20px 24px 28px;
  overflow:visible !important;
}
.phase4-income-savings-page.active{display:flex !important;}
.phase4-money-section{
  padding:22px 24px 24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  box-shadow:var(--shadow);
  overflow:visible;
}
.phase4-money-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.phase4-money-section-head h3{
  margin:0;
  color:var(--accent);
  font-size:1.08rem;
  font-weight:900;
  letter-spacing:-.02em;
}
.phase4-money-section-head p{
  margin:3px 0 0;
  color:var(--muted);
  font-size:.74rem;
  line-height:1.35;
}
.phase4-money-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.phase4-cashflow-board{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(255px, 1fr));
  gap:16px;
}
.phase4-money-tile{
  --money-accent:var(--emerald);
  --money-soft:rgba(16,185,129,.10);
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:172px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(135deg, var(--money-soft), rgba(255,255,255,.92));
  box-shadow:var(--shadow);
  color:var(--accent);
  overflow:hidden;
}
.phase4-money-tile::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--money-accent);
}
.phase4-money-tile-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.phase4-money-title-wrap{
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.phase4-money-kicker{
  color:var(--muted);
  font-size:.58rem;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.phase4-money-name{
  margin-top:2px;
  color:var(--accent);
  font-size:.9rem;
  font-weight:900;
  line-height:1.18;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.phase4-money-type{
  flex:0 0 auto;
  padding:4px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.70);
  color:var(--muted);
  font-size:.58rem;
  font-weight:850;
  white-space:nowrap;
}
.phase4-money-main{
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:1.45rem;
  font-weight:900;
  letter-spacing:-.035em;
  line-height:1;
}
.phase4-money-main.is-positive{color:var(--green-800);}
.phase4-money-meta{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px;
}
.phase4-money-stat{
  min-width:0;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.70);
}
.phase4-money-stat-label{
  display:block;
  color:var(--muted);
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.phase4-money-stat-value{
  display:block;
  margin-top:3px;
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:.76rem;
  font-weight:850;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.phase4-money-footer{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--muted);
  font-size:.66rem;
  font-weight:700;
}
.phase4-money-cta{
  flex:0 0 auto;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel);
  color:var(--accent);
  font-size:.64rem;
  font-weight:850;
  white-space:nowrap;
}
.phase4-empty-board{
  padding:20px;
  border:1px dashed var(--line-strong, rgba(0,0,0,.14));
  border-radius:14px;
  background:var(--panel-2);
  color:var(--muted);
  font-size:.78rem;
  font-weight:650;
}
@media (max-width:760px){
  .phase4-income-savings-page{padding:16px 14px 22px;}
  .phase4-money-section{padding:18px 16px 20px;}
  .phase4-money-section-head{flex-direction:column;align-items:flex-start;}
  .phase4-money-actions{width:100%;}
  .phase4-money-actions .feature-action-btn,
  .phase4-money-section-head > .feature-action-btn{width:100%;}
  .phase4-cashflow-board{grid-template-columns:1fr;}
}
/* === end Phase 4B — Income & Savings clean page rebuild === */


/* Phase 4B grouped category correction */

.phase4-money-tile .category-tile-icon-shell{
  flex:0 0 auto;
}

.phase4-money-progress{
  margin-top:auto;
}

.phase4-money-progress-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:7px;
  color:var(--muted);
  font-size:.64rem;
  font-weight:750;
}

.phase4-money-progress-track{
  height:7px;
  border-radius:999px;
  background:var(--line);
  overflow:hidden;
}

.phase4-money-progress-fill{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--money-accent);
}


/* Phase 4B v8 — corrected Income & Savings hero hierarchy */
.phase4-income-savings-page > .phase4-income-savings-hero-root{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}

.phase4-income-hero-clean{
  display:grid !important;
  width:100% !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:16px !important;
  align-items:stretch !important;
  margin:0 !important;
  padding:0 !important;
}

.phase4-income-kpi-card{
  position:relative !important;
  width:100% !important;
  min-width:0 !important;
  min-height:132px !important;
  padding:20px 22px !important;
  border:1px solid var(--line) !important;
  border-radius:18px !important;
  background:var(--panel) !important;
  box-shadow:var(--shadow) !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

.phase4-income-kpi-primary{
  min-height:154px !important;
  background:linear-gradient(135deg, rgba(16,185,129,.075), rgba(255,255,255,.90)) !important;
  border-color:rgba(16,185,129,.24) !important;
}

.phase4-income-kpi-primary::before{
  content:'' !important;
  position:absolute !important;
  inset:0 auto 0 0 !important;
  width:5px !important;
  background:var(--emerald) !important;
}

.phase4-income-kpi-secondary{
  background:var(--panel) !important;
  border-color:var(--line) !important;
}

.phase4-income-kpi-secondary::before{
  content:none !important;
  display:none !important;
}

.phase4-income-kpi-label{
  color:var(--muted) !important;
  font-size:.64rem !important;
  font-weight:850 !important;
  letter-spacing:.08em !important;
  line-height:1.2 !important;
  text-transform:uppercase !important;
}

.phase4-income-kpi-primary .phase4-income-kpi-value{
  margin-top:18px !important;
  color:var(--accent) !important;
  font-family:var(--font-mono) !important;
  font-size:2.35rem !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:-.045em !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.phase4-income-kpi-secondary .phase4-income-kpi-value{
  margin-top:18px !important;
  color:var(--accent) !important;
  font-family:var(--font-mono) !important;
  font-size:1.68rem !important;
  font-weight:800 !important;
  line-height:1.05 !important;
  letter-spacing:-.035em !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.phase4-income-kpi-sub{
  margin-top:10px !important;
  color:var(--muted) !important;
  font-size:.74rem !important;
  font-weight:550 !important;
  line-height:1.36 !important;
}

.phase4-income-rate-line{
  display:flex !important;
  align-items:baseline !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin-top:18px !important;
}

.phase4-income-rate-line .phase4-income-kpi-value{
  margin-top:0 !important;
}

.phase4-income-rate-end{
  color:var(--accent) !important;
  font-family:var(--font-mono) !important;
  font-size:.72rem !important;
  font-weight:800 !important;
  line-height:1 !important;
}

.phase4-income-rate-bar{
  height:7px !important;
  margin:10px 0 4px !important;
  border-radius:999px !important;
  background:var(--line) !important;
  overflow:hidden !important;
}

.phase4-income-rate-bar span{
  display:block !important;
  height:100% !important;
  border-radius:999px !important;
  background:var(--indigo, #6366f1) !important;
}

@media (max-width: 1100px){
  .phase4-income-hero-clean{
    grid-template-columns:1fr !important;
  }
}


/* === Phase 4C — Debt clean page rebuild === */
.phase4-debt-page{
  flex-direction:column;
  gap:20px;
  padding:20px 24px 28px;
  overflow:visible !important;
}

.phase4-debt-page.active{
  display:flex !important;
}

.phase4-debt-layout{
  display:flex;
  flex-direction:column;
  gap:20px;
  overflow:visible;
}

.phase4-debt-hero{
  display:grid;
  width:100%;
  grid-template-columns:minmax(260px,1.25fr) repeat(3, minmax(160px,.8fr));
  gap:16px;
  align-items:stretch;
}

.phase4-debt-kpi{
  position:relative;
  min-width:0;
  min-height:132px;
  padding:20px 22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  box-shadow:var(--shadow);
  overflow:hidden;
  box-sizing:border-box;
}

.phase4-debt-kpi.primary{
  min-height:154px;
  background:linear-gradient(135deg, rgba(2,132,199,.085), rgba(255,255,255,.90));
  border-color:rgba(2,132,199,.24);
}

.phase4-debt-kpi.primary::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:#0284c7;
}

.phase4-debt-kpi-label{
  color:var(--muted);
  font-size:.64rem;
  font-weight:850;
  letter-spacing:.08em;
  line-height:1.2;
  text-transform:uppercase;
}

.phase4-debt-kpi-value{
  margin-top:18px;
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:1.68rem;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.035em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.phase4-debt-kpi.primary .phase4-debt-kpi-value{
  font-size:2.35rem;
  font-weight:900;
  line-height:1;
  letter-spacing:-.045em;
}

.phase4-debt-kpi-sub{
  margin-top:10px;
  color:var(--muted);
  font-size:.74rem;
  font-weight:550;
  line-height:1.36;
}

.phase4-debt-board{
  padding:22px 24px 24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  box-shadow:var(--shadow);
  overflow:visible;
}

.phase4-debt-board-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.phase4-debt-board-title{
  margin:0;
  color:var(--accent);
  font-size:1.08rem;
  font-weight:900;
  letter-spacing:-.02em;
}

.phase4-debt-board-sub{
  margin-top:3px;
  color:var(--muted);
  font-size:.74rem;
  line-height:1.35;
}

.phase4-debt-board-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.phase4-debt-profile-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
  gap:16px;
  overflow:visible;
}

.phase4-debt-profile{
  --debt-accent:#0284c7;
  --debt-soft:rgba(2,132,199,.09);
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:218px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(135deg, var(--debt-soft), rgba(255,255,255,.93));
  box-shadow:var(--shadow);
  color:var(--accent);
  overflow:hidden;
  box-sizing:border-box;
}

.phase4-debt-profile::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--debt-accent);
}

.phase4-debt-profile.is-bad{
  --debt-accent:var(--red, #ef4444);
  --debt-soft:rgba(239,68,68,.075);
}

.phase4-debt-profile.is-warn{
  --debt-accent:var(--amber, #f59e0b);
  --debt-soft:rgba(245,158,11,.075);
}

.phase4-debt-profile.is-good{
  --debt-accent:var(--emerald);
  --debt-soft:rgba(16,185,129,.08);
}

.phase4-debt-profile-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.phase4-debt-profile-copy{
  min-width:0;
}

.phase4-debt-profile-kicker{
  color:var(--muted);
  font-size:.58rem;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.phase4-debt-profile-name{
  margin-top:2px;
  color:var(--accent);
  font-size:.94rem;
  font-weight:900;
  line-height:1.18;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.phase4-debt-profile-source{
  margin-top:3px;
  color:var(--muted);
  font-size:.66rem;
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.phase4-debt-status{
  flex:0 0 auto;
  padding:4px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:var(--muted);
  font-size:.58rem;
  font-weight:850;
  white-space:nowrap;
}

.phase4-debt-main{
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:1.45rem;
  font-weight:900;
  letter-spacing:-.035em;
  line-height:1;
}

.phase4-debt-meta{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}

.phase4-debt-stat{
  min-width:0;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.72);
}

.phase4-debt-stat-label{
  display:block;
  color:var(--muted);
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.phase4-debt-stat-value{
  display:block;
  margin-top:3px;
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:.74rem;
  font-weight:850;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.phase4-debt-progress{
  margin-top:auto;
}

.phase4-debt-progress-track{
  height:7px;
  border-radius:999px;
  background:var(--line);
  overflow:hidden;
}

.phase4-debt-progress-fill{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--debt-accent);
}

.phase4-debt-progress-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:7px;
  color:var(--muted);
  font-size:.64rem;
  font-weight:750;
}

.phase4-debt-profile-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  margin-top:2px;
}

.phase4-debt-profile-actions .debt-small-action,
.phase4-debt-profile-actions .manage-icon-btn{
  min-height:28px;
}

.phase4-debt-empty-state{
  padding:22px;
  border:1px dashed var(--line-strong, rgba(0,0,0,.14));
  border-radius:14px;
  background:var(--panel-2);
  color:var(--muted);
  font-size:.78rem;
  font-weight:650;
}

@media (max-width:1100px){
  .phase4-debt-hero{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .phase4-debt-kpi.primary{
    grid-column:1 / -1;
  }
}

@media (max-width:760px){
  .phase4-debt-page{
    padding:16px 14px 22px;
  }.phase4-debt-hero,
  .phase4-debt-profile-grid{
    grid-template-columns:1fr;
  }
  .phase4-debt-board{
    padding:18px 16px 20px;
  }
  .phase4-debt-board-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .phase4-debt-board-actions,
  .phase4-debt-board-actions .feature-action-btn{
    width:100%;
  }
}
/* === end Phase 4C — Debt clean page rebuild === */


/* === Phase 4D v3 — Financial Goals real-model clean layout === */
.phase4-goals-page{
  flex-direction:column;
  gap:20px;
  padding:20px 24px 28px;
  overflow:visible !important;
}

.phase4-goals-page.active{
  display:flex !important;
}


.phase4-goals-layout{
  display:flex;
  flex-direction:column;
  gap:20px;
  overflow:visible;
}

.phase4-goals-hero{
  display:grid;
  grid-template-columns:minmax(260px,1.25fr) repeat(3, minmax(160px,.8fr));
  gap:16px;
  align-items:stretch;
}

.phase4-goals-kpi{
  position:relative;
  min-height:132px;
  padding:20px 22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.phase4-goals-kpi.primary{
  min-height:154px;
  background:linear-gradient(135deg, rgba(124,58,237,.09), rgba(255,255,255,.92));
  border-color:rgba(124,58,237,.24);
}

.phase4-goals-kpi.primary::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:#7c3aed;
}

.phase4-goals-label{
  color:var(--muted);
  font-size:.64rem;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.phase4-goals-value{
  margin-top:18px;
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:1.68rem;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.035em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.phase4-goals-kpi.primary .phase4-goals-value{
  font-size:2.35rem;
  font-weight:900;
  line-height:1;
  letter-spacing:-.045em;
}

.phase4-goals-value.text-value{
  font-family:var(--font);
  font-size:1.08rem;
  font-weight:850;
  letter-spacing:-.02em;
}

.phase4-goals-sub{
  margin-top:10px;
  color:var(--muted);
  font-size:.74rem;
  line-height:1.36;
}

.phase4-goals-board{
  padding:22px 24px 24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  box-shadow:var(--shadow);
}

.phase4-goals-board-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.phase4-goals-board-title{
  margin:0;
  color:var(--accent);
  font-size:1.08rem;
  font-weight:900;
  letter-spacing:-.02em;
}

.phase4-goals-board-sub{
  margin-top:3px;
  color:var(--muted);
  font-size:.74rem;
  line-height:1.35;
}


.phase4-goals-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(310px,1fr));
  gap:16px;
}

.phase4-goal-card{
  --goal-accent:#7c3aed;
  --goal-soft:rgba(124,58,237,.09);
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:210px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(135deg, var(--goal-soft), rgba(255,255,255,.93));
  box-shadow:var(--shadow);
  overflow:hidden;
}

.phase4-goal-card::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--goal-accent);
}

.phase4-goal-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.phase4-goal-copy{
  min-width:0;
}

.phase4-goal-kicker{
  color:var(--muted);
  font-size:.58rem;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.phase4-goal-title{
  margin-top:2px;
  color:var(--accent);
  font-size:.96rem;
  font-weight:900;
  line-height:1.18;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.phase4-goal-source{
  margin-top:3px;
  color:var(--muted);
  font-size:.66rem;
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.phase4-goal-status{
  flex:0 0 auto;
  padding:4px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:var(--muted);
  font-size:.58rem;
  font-weight:850;
  white-space:nowrap;
}

.phase4-goal-main{
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:1.55rem;
  font-weight:900;
  letter-spacing:-.035em;
  line-height:1;
}

.phase4-goal-meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.phase4-goal-stat{
  min-width:0;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.72);
}

.phase4-goal-stat-label{
  display:block;
  color:var(--muted);
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.phase4-goal-stat-value{
  display:block;
  margin-top:3px;
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:.74rem;
  font-weight:850;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.phase4-goal-progress{
  margin-top:auto;
}

.phase4-goal-progress-row{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-bottom:7px;
  color:var(--muted);
  font-size:.64rem;
  font-weight:750;
}

.phase4-goal-progress-track{
  height:7px;
  border-radius:999px;
  background:var(--line);
  overflow:hidden;
}

.phase4-goal-progress-fill{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--goal-accent);
}

.phase4-goals-empty{
  padding:22px;
  border:1px dashed rgba(0,0,0,.14);
  border-radius:14px;
  background:var(--panel-2);
  color:var(--muted);
  font-size:.78rem;
  font-weight:650;
}

@media (max-width:1100px){
  .phase4-goals-hero{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .phase4-goals-kpi.primary{
    grid-column:1 / -1;
  }
}

@media (max-width:760px){
  .phase4-goals-page{
    padding:16px 14px 22px;
  }
  
  
  .phase4-goals-hero,
  .phase4-goals-grid{
    grid-template-columns:1fr;
  }
  .phase4-goals-board{
    padding:18px 16px 20px;
  }
  .phase4-goals-board-head{
    flex-direction:column;
  }
}
/* === end Phase 4D v3 === */


/* Phase 4D v4 — place Financial Goals actions in board header */
.phase4-goals-board-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  flex:0 0 auto;
}

.phase4-goals-board-actions .feature-action-btn,
.phase4-goals-board-actions button{
  min-height:34px;
}

@media (max-width:760px){
  .phase4-goals-board-actions,
  .phase4-goals-board-actions .feature-action-btn,
  .phase4-goals-board-actions button{
    width:100%;
  }
}


/* === Phase 4E — Subscriptions corrected metrics layout === */
.phase4-subscriptions-page{flex-direction:column;gap:20px;padding:20px 24px 28px;overflow:visible !important;}
.phase4-subscriptions-page.active{display:flex !important;}
.phase4-subscriptions-layout{display:flex;flex-direction:column;gap:20px;width:100%;overflow:visible;}
.phase4-sub-hero{display:grid;grid-template-columns:minmax(280px,1.25fr) repeat(2,minmax(190px,.9fr));gap:16px;align-items:stretch;}
.phase4-sub-kpi{position:relative;min-height:132px;padding:20px 22px;border:1px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:var(--shadow);overflow:hidden;box-sizing:border-box;}
.phase4-sub-kpi.primary{min-height:154px;background:linear-gradient(135deg,rgba(37,99,235,.09),rgba(255,255,255,.92));border-color:rgba(37,99,235,.24);}
.phase4-sub-kpi.primary::before{content:'';position:absolute;inset:0 auto 0 0;width:5px;background:#2563eb;}
.phase4-sub-kpi-label{color:var(--muted);font-size:.64rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase;}
.phase4-sub-kpi-value{margin-top:18px;color:var(--accent);font-family:var(--font-mono);font-size:1.68rem;font-weight:800;line-height:1.05;letter-spacing:-.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.phase4-sub-kpi.primary .phase4-sub-kpi-value{font-size:2.35rem;font-weight:900;line-height:1;letter-spacing:-.045em;}
.phase4-sub-kpi-main-row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-top:18px;}
.phase4-sub-kpi-main-row .phase4-sub-kpi-value{margin-top:0;min-width:0;}
.phase4-sub-kpi-due-mini{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:0 0 auto;padding-bottom:2px;text-align:right;}
.phase4-sub-kpi-due-mini strong{font-family:var(--font-mono);font-size:1.02rem;font-weight:850;color:#2563eb;line-height:1;letter-spacing:-.02em;white-space:nowrap;}
.phase4-sub-kpi-due-mini span{font-size:.60rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;}
@media (max-width:640px){.phase4-sub-kpi-main-row{align-items:flex-start;flex-direction:column;gap:8px}.phase4-sub-kpi-due-mini{align-items:flex-start;text-align:left}}
.phase4-sub-kpi-value.text-value{font-family:var(--font);font-size:1.18rem;font-weight:900;letter-spacing:-.02em;}
.phase4-sub-kpi-sub{margin-top:10px;color:var(--muted);font-size:.74rem;font-weight:550;line-height:1.36;}
.phase4-sub-burden-section{padding:0;border:0;background:transparent;}
.phase4-sub-burden-card{position:relative;padding:28px 36px 32px;border:1px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:var(--shadow);overflow:hidden;}
.phase4-sub-burden-card::before{content:'';position:absolute;inset:0 auto 0 0;width:5px;background:#2563eb;}
.phase4-sub-burden-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;}
.phase4-sub-section-kicker{color:var(--muted);font-size:.64rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase;}
.phase4-sub-burden-title{margin:14px 0 0;color:var(--accent);font-size:1.28rem;font-weight:900;letter-spacing:-.025em;}
.phase4-sub-burden-metric{display:flex;flex-direction:column;align-items:flex-end;gap:6px;color:#2563eb;}
.phase4-sub-burden-metric strong{font-family:var(--font-mono);font-size:2rem;font-weight:900;line-height:1;letter-spacing:-.04em;}
.phase4-sub-burden-metric span{color:var(--muted);font-size:.78rem;font-weight:800;}
.phase4-sub-burden-copy{margin-top:18px;color:var(--muted);font-size:.82rem;line-height:1.45;max-width:860px;}
.phase4-sub-burden-track{height:10px;margin-top:24px;border-radius:999px;background:var(--line);overflow:hidden;}
.phase4-sub-burden-track span{display:block;position:relative;height:100%;border-radius:999px;background:#2563eb;}
.phase4-sub-burden-track span em{position:absolute;right:0;top:50%;transform:translate(45%,-50%);padding:1px 8px;border-radius:999px;background:#3b82f6;color:white;font-style:normal;font-family:var(--font-mono);font-size:.68rem;font-weight:850;white-space:nowrap;}
.phase4-sub-burden-divider{height:1px;background:var(--line);margin:26px 0 18px;}
.phase4-sub-burden-foot{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;color:var(--muted);font-size:.82rem;line-height:1.55;}
.phase4-sub-burden-foot strong{color:var(--accent);font-weight:900;}
.phase4-sub-burden-foot > div:last-child{text-align:right;}
.phase4-sub-manager-cta{display:flex;justify-content:center;align-items:center;padding-top:28px;}
.phase4-sub-manager-cta .feature-action-btn{min-width:260px;min-height:44px;justify-content:center;font-size:.82rem;font-weight:900;box-shadow:0 14px 26px rgba(37,99,235,.18);}
@media (max-width:1100px){.phase4-sub-hero{grid-template-columns:1fr;}}
@media (max-width:760px){.phase4-subscriptions-page{padding:16px 14px 22px;}.phase4-sub-burden-card{padding:22px 20px 26px;}.phase4-sub-burden-head,.phase4-sub-burden-foot{flex-direction:column;}.phase4-sub-burden-metric{align-items:flex-start;}.phase4-sub-burden-foot > div:last-child{text-align:left;}.phase4-sub-manager-cta .feature-action-btn{width:100%;}}
/* === end Phase 4E — Subscriptions corrected metrics layout === */


/* === Phase 4F — Usage clean layout === */
.phase4-usage-page{
  flex-direction:column;
  gap:20px;
  padding:20px 24px 28px;
  overflow:visible !important;
}

.phase4-usage-page.active{
  display:flex !important;
}

.phase4-usage-layout{
  display:flex;
  flex-direction:column;
  gap:20px;
  width:100%;
  overflow:visible;
}

.phase4-usage-hero{
  display:grid;
  grid-template-columns:minmax(280px,1.25fr) repeat(3,minmax(180px,.82fr));
  gap:16px;
  align-items:stretch;
}

.phase4-usage-kpi{
  position:relative;
  min-height:132px;
  padding:20px 22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  box-shadow:var(--shadow);
  overflow:hidden;
  box-sizing:border-box;
}

.phase4-usage-kpi.primary{
  min-height:154px;
  background:linear-gradient(135deg, rgba(124,58,237,.09), rgba(255,255,255,.92));
  border-color:rgba(124,58,237,.24);
}

.phase4-usage-kpi.primary::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:#7c3aed;
}

.phase4-usage-kpi-label{
  color:var(--muted);
  font-size:.64rem;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.phase4-usage-kpi-value{
  margin-top:18px;
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:1.68rem;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.035em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.phase4-usage-kpi.primary .phase4-usage-kpi-value{
  font-size:2.35rem;
  font-weight:900;
  line-height:1;
  letter-spacing:-.045em;
}

.phase4-usage-kpi-sub{
  margin-top:10px;
  color:var(--muted);
  font-size:.74rem;
  font-weight:550;
  line-height:1.36;
}

.phase4-usage-board{
  padding:22px 24px 24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  box-shadow:var(--shadow);
  overflow:visible;
}

.phase4-usage-board-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.phase4-usage-board-title{
  margin:0;
  color:var(--accent);
  font-size:1.08rem;
  font-weight:900;
  letter-spacing:-.02em;
}

.phase4-usage-board-sub{
  margin-top:3px;
  color:var(--muted);
  font-size:.74rem;
  line-height:1.35;
}

.phase4-usage-board-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.phase4-usage-insight-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
}

.phase4-usage-insight{
  position:relative;
  min-height:122px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(135deg, rgba(124,58,237,.08), rgba(255,255,255,.94));
  box-shadow:var(--shadow);
  overflow:hidden;
}

.phase4-usage-insight::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:#7c3aed;
}

.phase4-usage-insight-label{
  color:var(--muted);
  font-size:.58rem;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.phase4-usage-insight-title{
  margin-top:8px;
  color:var(--accent);
  font-size:1rem;
  font-weight:900;
  line-height:1.18;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.phase4-usage-insight-sub{
  margin-top:7px;
  color:var(--muted);
  font-size:.74rem;
  line-height:1.35;
}

.phase4-usage-empty{
  padding:22px;
  border:1px dashed rgba(0,0,0,.14);
  border-radius:14px;
  background:var(--panel-2);
  color:var(--muted);
  font-size:.78rem;
  font-weight:650;
}

@media (max-width:1100px){
  .phase4-usage-hero{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .phase4-usage-page{
    padding:16px 14px 22px;
  }
  .phase4-usage-board{
    padding:18px 16px 20px;
  }
  .phase4-usage-board-head{
    flex-direction:column;
  }
  .phase4-usage-board-actions,
  .phase4-usage-board-actions .feature-action-btn{
    width:100%;
  }
}
/* === end Phase 4F — Usage clean layout === */


/* Phase 4F v2 — Usage How-to KPI tile */
.phase4-usage-kpi.howto{
  background:var(--panel);
}

.phase4-usage-howto-list{
  display:grid;
  gap:8px;
  margin-top:18px;
  color:var(--accent);
  font-size:.74rem;
  font-weight:750;
  line-height:1.35;
}

.phase4-usage-howto-list div{
  position:relative;
  padding-left:16px;
  color:var(--muted);
}

.phase4-usage-howto-list div::before{
  content:'';
  position:absolute;
  left:0;
  top:.55em;
  width:6px;
  height:6px;
  border-radius:999px;
  background:#7c3aed;
}


/* Phase 4F v3 — Expense Categories header buttons */
.phase4-expense-board-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  flex:0 0 auto;
}

.phase4-expense-board-actions .feature-action-btn{
  min-height:34px;
}

@media (max-width:760px){
  .phase4-expense-board-actions{
    width:100%;
    justify-content:stretch;
  }

  .phase4-expense-board-actions .feature-action-btn{
    flex:1 1 100%;
  }
}
/* end Phase 4F v3 — Expense Categories header buttons */


/* === Phase 4G — Achievements clean layout === */
.phase4-achievements-page{
  flex-direction:column;
  gap:20px;
  padding:20px 24px 28px;
  overflow:visible !important;
}

.phase4-achievements-page.active{
  display:flex !important;
}

.phase4-achievements-layout{
  display:flex;
  flex-direction:column;
  gap:20px;
  width:100%;
  overflow:visible;
}

.phase4-achievement-hero{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.phase4-achievement-kpi{
  position:relative;
  min-height:150px;
  padding:20px 22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.phase4-achievement-kpi.primary{
  background:linear-gradient(135deg, rgba(16,185,129,.09), rgba(255,255,255,.92));
  border-color:rgba(16,185,129,.24);
}

.phase4-achievement-kpi.primary::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:#16a34a;
}

.phase4-achievement-kpi.reward{
  background:linear-gradient(135deg, rgba(249,115,22,.08), rgba(255,255,255,.94));
}

.phase4-achievement-kpi-label{
  color:var(--muted);
  font-size:.64rem;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.phase4-achievement-kpi-value{
  margin-top:18px;
  color:#5e17eb;
  font-family:var(--font-mono);
  font-size:1.9rem;
  font-weight:900;
  line-height:1;
  letter-spacing:-.045em;
}

.phase4-achievement-kpi-value.text-value{
  font-family:var(--font);
  color:#166534;
  font-size:1.34rem;
  letter-spacing:-.025em;
}

.phase4-achievement-kpi.reward .phase4-achievement-kpi-value{
  color:#ea580c;
}

.phase4-achievement-kpi-sub{
  margin-top:10px;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.38;
}

.phase4-achievement-link{
  margin-top:18px;
  padding:0;
  border:0;
  background:transparent;
  color:#15803d;
  font:inherit;
  font-size:.74rem;
  font-weight:850;
  cursor:pointer;
}

.phase4-achievement-link.standalone{
  margin-top:0;
}

.phase4-achievement-main-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:20px;
  align-items:stretch;
}

.phase4-achievement-panel,
.phase4-achievement-insight-strip{
  padding:22px 24px 24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.phase4-achievement-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.phase4-achievement-panel-head h3{
  margin:0;
  color:var(--accent);
  font-size:1.12rem;
  font-weight:900;
  letter-spacing:-.025em;
}

.phase4-achievement-panel-head p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.35;
}

.phase4-achievement-help{
  display:grid;
  gap:8px;
  margin-top:16px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel-2);
  color:var(--muted);
  font-size:.75rem;
}

.phase4-achievement-help strong{
  color:var(--accent);
}

.phase4-achievement-progress-track{
  height:10px;
  border-radius:999px;
  background:var(--line);
  overflow:hidden;
  margin:28px 0 24px;
}

.phase4-achievement-progress-track span{
  display:block;
  height:100%;
  border-radius:999px;
  background:#16a34a;
}

.phase4-achievement-progress-meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.phase4-achievement-progress-meta > div{
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(135deg, rgba(16,185,129,.07), rgba(255,255,255,.9));
}

.phase4-achievement-progress-meta strong{
  display:block;
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:1rem;
}

.phase4-achievement-progress-meta span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:.72rem;
}

.phase4-achievement-recent-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.phase4-achievement-recent-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px;
  align-items:center;
  min-height:96px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(135deg, rgba(16,185,129,.06), rgba(255,255,255,.94));
  position:relative;
}

.phase4-achievement-recent-icon{
  width:44px;
  height:44px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(16,185,129,.12);
  font-size:1.1rem;
}

.phase4-achievement-recent-title{
  color:var(--accent);
  font-size:.84rem;
  font-weight:900;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.phase4-achievement-recent-sub{
  margin-top:4px;
  color:var(--muted);
  font-size:.70rem;
  line-height:1.3;
}

.phase4-achievement-xp{
  grid-column:1 / -1;
  justify-self:end;
  padding:3px 8px;
  border:1px solid rgba(16,185,129,.24);
  border-radius:999px;
  background:rgba(16,185,129,.08);
  color:#166534;
  font-size:.64rem;
  font-weight:850;
}

.phase4-achievement-empty{
  grid-column:1 / -1;
  padding:22px;
  border:1px dashed rgba(0,0,0,.14);
  border-radius:14px;
  background:var(--panel-2);
  color:var(--muted);
  font-size:.78rem;
  font-weight:650;
}

.phase4-achievement-targets-wrap{
  margin-top:18px;
}
/* When Targets is the only content in its section (Recent moved to modal),
   the flex-column gap already provides spacing — drop the extra offset. */
.phase4-achievement-targets-wrap.is-standalone{
  margin-top:0;
}

.phase4-achievement-targets-wrap .badge-system-stack{
  display:grid;
  gap:16px;
}

.phase4-achievement-targets-wrap .badge-grid{
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}

.phase4-achievement-insight-strip{
  display:flex;
  align-items:center;
  gap:14px;
  background:linear-gradient(135deg, rgba(16,185,129,.08), rgba(255,255,255,.95));
}

.phase4-achievement-insight-strip strong{
  color:#166534;
}

.phase4-achievement-insight-strip span{
  flex:1;
  color:var(--muted);
  font-size:.82rem;
}

.phase4-achievement-hidden-logic{
  display:grid;
  gap:16px;
}

.phase4-achievement-hidden-logic .achievements-section,
.phase4-achievement-hidden-logic .financial-progress-card{
  border-radius:18px;
}

#achCheckinPanel .checkin-card,
#achCheckinPanel .weekly-checkin-card,
#achCheckinPanel .checkin-lock-card{
  box-shadow:none;
  border-radius:16px;
}

@media (max-width:1180px){
  .phase4-achievement-hero,
  .phase4-achievement-recent-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .phase4-achievement-main-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:720px){
  .phase4-achievements-page{
    padding:16px 14px 22px;
  }
  .phase4-achievement-hero,
  .phase4-achievement-recent-grid,
  .phase4-achievement-progress-meta{
    grid-template-columns:1fr;
  }
  .phase4-achievement-panel,
  .phase4-achievement-insight-strip{
    padding:18px 16px 20px;
  }
  .phase4-achievement-insight-strip{
    flex-direction:column;
    align-items:flex-start;
  }
}
/* === end Phase 4G — Achievements clean layout === */


/* === v1292-smart-insights-phase1-tab === */
.phase4-smart-insights-page {
  min-width: 0;
}
.smart-insights-workspace {
  display: grid;
  gap: 14px;
}
.smart-insights-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  padding: 18px 20px;
  border-left: 5px solid var(--indigo-700);
}
.smart-insights-kicker {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.smart-insights-hero h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  color: var(--accent-text);
}
.smart-insights-hero p {
  margin: 0;
  max-width: 760px;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--muted);
}
.smart-insights-note {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--accent-surface);
  border: 1px solid var(--accent-border);
  color: var(--accent-text);
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}
.smart-insights-body {
  padding: 0;
  overflow: visible;
}
.phase4-smart-insights-page #insightGrid {
  margin-top: 0;
}
@media (max-width: 760px) {
  .smart-insights-hero {
    flex-direction: column;
  }
  .smart-insights-note {
    white-space: normal;
  }
}


/* v1302 — Adjustment Advisor empty-state body so engine-backed no-item states do not render blank. */
.reallocation-card .advisor-empty-state{
  margin-top:12px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--panel-2);
  display:grid;
  gap:6px;
}
.reallocation-card .advisor-empty-copy{
  font-size:0.74rem;
  font-weight:700;
  color:var(--accent-text);
  line-height:1.45;
}
.reallocation-card .advisor-empty-meta{
  font-size:0.66rem;
  color:var(--muted);
  line-height:1.45;
}

/* v1303 — visible Adjustment Advisor body fallback; prevents empty flex space when no ranked items exist. */
.reallocation-card .advisor-body{
  display:block;
  width:100%;
  margin-top:10px;
}
#insightGrid .reallocation-card .advisor-empty-state{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  min-height:72px;
}



/* === v1312 — Smart Insights final visual spacing + guidance accent clipping ===
   Keep card surfaces consistent while allowing internal content to size naturally. */
.smart-insights-card-body #insightGrid{
  align-items: stretch;
}

.smart-insights-card-body #insightGrid > .insight-card.ui-3d-panel.ui-3d-insight{
  overflow: hidden;
  position: relative;
}

/* v1311 allowed the guidance card itself to overflow so long text could expand,
   but that also lets the top accent escape the rounded card. Keep the card
   clipped and let only the inner layout/content size naturally. */
.smart-insights-card-body #insightGrid > .guidance-card.ui-3d-panel.ui-3d-insight{
  overflow: hidden !important;
}

.smart-insights-card-body #insightGrid > .guidance-card .guidance-layout,
.smart-insights-card-body #insightGrid > .guidance-card .guidance-main{
  height: auto;
  min-height: 0;
  overflow: visible;
}

.smart-insights-card-body #insightGrid > .guidance-card.ui-3d-panel.ui-3d-insight::before{
  left: 0;
  right: 0;
  border-radius: 16px 16px 0 0;
}

.smart-insights-card-body #insightGrid > .insight-card .focus-head{
  margin-bottom: 10px;
}

.smart-insights-card-body #insightGrid > .insight-card .insight-detail{
  line-height: 1.42;
}

.smart-insights-card-body .smart-insights-kpi-row,
.smart-insights-card-body .smart-insights-briefing{
  margin-bottom: 14px;
}

@media (min-width: 1181px){
  .smart-insights-card-body #insightGrid{
    gap: 18px;
  }
}

/* === v1319 — Veyra full logo subtitle visibility fix === */
.sidebar-brand{
  padding:0 6px 14px;
  min-height:86px;
  overflow:visible;
}
.sidebar-brand-logo .brand{
  overflow:visible !important;
  height:auto !important;
  min-height:0 !important;
}
.sidebar-brand-logo .veyra-brand-logo,
.veyra-brand-logo{
  width:168px;
  max-width:100%;
  display:block;
  overflow:visible !important;
  height:auto !important;
}
.sidebar-brand-logo .veyra-brand-svg,
.veyra-brand-svg{
  display:block;
  width:168px;
  max-width:100%;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}



/* v1322 — Shared Expenses panel hardening: contained layout, opaque surfaces, viewport-safe manager */
.alloc-focus-panel {
  width: min(430px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100vh - 24px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.alloc-focus-panel,
.alloc-focus-panel .splitwise-panel,
.alloc-focus-panel .splitwise-manager-head,
.alloc-focus-panel .splitwise-form,
.alloc-focus-panel .splitwise-entries-list,
.alloc-focus-panel .splitwise-entry-chip,
.alloc-focus-panel .splitwise-empty {
  background-color: #fff !important;
}
.alloc-focus-panel .splitwise-panel {
  contain: layout paint;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
.alloc-focus-panel .splitwise-manager-head {
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
}
.alloc-focus-panel .splitwise-manager-title,
.alloc-focus-panel .splitwise-manager-sub {
  min-width: 0;
  overflow-wrap: anywhere;
}
.alloc-focus-panel .splitwise-form {
  grid-template-columns: 62px minmax(0, 1fr) max-content !important;
  overflow: hidden;
  isolation: isolate;
}
.alloc-focus-panel .splitwise-form input {
  min-width: 0 !important;
  max-width: 100%;
  background: #fff !important;
  opacity: 1 !important;
  color: var(--accent-text);
  position: relative;
  z-index: 1;
}
.alloc-focus-panel .splitwise-form .ghost-btn {
  min-width: 88px;
  position: relative;
  z-index: 1;
  background: rgba(99,102,241,0.08) !important;
}
.alloc-focus-panel .splitwise-entries-list {
  max-height: min(240px, 34vh);
  min-height: 0;
  overscroll-behavior: contain;
  padding-right: 12px;
}
.alloc-focus-panel .splitwise-entry-chip {
  overflow: hidden;
  box-shadow: none;
}
.alloc-focus-panel .splitwise-entry-main {
  grid-template-columns: 22px minmax(0, 1fr) !important;
  overflow: hidden;
}
.alloc-focus-panel .splitwise-entry-text {
  display: grid !important;
  grid-template-columns: minmax(78px, max-content) minmax(0, 1fr) !important;
  align-items: center;
  gap: 7px;
  overflow: hidden;
}
.alloc-focus-panel .splitwise-entry-amount {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 112px;
}
.alloc-focus-panel .splitwise-entry-meta {
  display: block !important;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alloc-focus-panel .chip-remove {
  justify-self: end;
}
@media (max-width: 520px) {
  .alloc-focus-panel .splitwise-form {
    grid-template-columns: 1fr !important;
  }
  .alloc-focus-panel .splitwise-form .ghost-btn {
    width: 100%;
  }
  .alloc-focus-panel .splitwise-entry-text {
    grid-template-columns: 1fr !important;
    gap: 2px;
  }
  .alloc-focus-panel .splitwise-entry-amount {
    max-width: 100%;
  }
}



/* v1323 — Shared Expenses manager rebuild: viewport-safe, readable, no clipping */
.alloc-focus-panel[data-shared-manager-open="true"]{
  width:min(540px, calc(100vw - 32px)) !important;
  max-width:calc(100vw - 32px) !important;
  max-height:calc(100vh - 88px) !important;
  overflow:hidden !important;
  display:grid !important;
  grid-template-rows:auto minmax(0, 1fr);
  background:#fff !important;
  border:1px solid rgba(148,163,184,.32) !important;
  box-shadow:0 22px 60px rgba(15,23,42,.18), 0 1px 0 rgba(255,255,255,.9) inset !important;
}
.alloc-focus-panel[data-shared-manager-open="true"] .alloc-focus-panel-body{
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden !important;
  padding-bottom:12px;
}
.alloc-focus-panel[data-shared-manager-open="true"] .splitwise-panel{
  display:grid !important;
  grid-template-rows:auto auto minmax(0, 1fr);
  min-height:0;
  max-height:none !important;
  overflow:hidden !important;
  background:#fff !important;
}
.alloc-focus-panel[data-shared-manager-open="true"] .splitwise-manager-head{
  position:sticky;
  top:0;
  z-index:3;
  background:linear-gradient(145deg, #fff, #f4f9ff) !important;
}
.alloc-focus-panel[data-shared-manager-open="true"] .splitwise-form{
  position:sticky;
  top:0;
  z-index:2;
  grid-template-columns:64px minmax(120px, 1fr) max-content !important;
  background:#fff !important;
  border-bottom:1px solid rgba(148,163,184,.24);
}
.alloc-focus-panel[data-shared-manager-open="true"] .splitwise-form input{
  background:#fff !important;
  border:1px solid rgba(148,163,184,.45) !important;
  box-shadow:0 1px 2px rgba(15,23,42,.05) inset;
}
.alloc-focus-panel[data-shared-manager-open="true"] .splitwise-entries-list{
  display:grid !important;
  grid-auto-rows:minmax(38px, auto);
  gap:7px;
  min-height:0;
  max-height:min(300px, 42vh) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:10px 12px 12px !important;
  background:#fff !important;
}
.alloc-focus-panel[data-shared-manager-open="true"] .splitwise-entry-chip{
  min-height:38px;
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) 24px !important;
  align-items:center;
  gap:8px;
  overflow:hidden !important;
  background:#fff !important;
  border:1px solid rgba(203,213,225,.82) !important;
  border-radius:11px !important;
  padding:7px 8px !important;
}
.alloc-focus-panel[data-shared-manager-open="true"] .splitwise-entry-main{
  display:grid !important;
  grid-template-columns:22px minmax(0, 1fr) !important;
  align-items:center;
  gap:8px;
  min-width:0;
  overflow:hidden;
}
.alloc-focus-panel[data-shared-manager-open="true"] .splitwise-entry-text{
  display:flex !important;
  align-items:baseline;
  gap:8px;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
}
.alloc-focus-panel[data-shared-manager-open="true"] .splitwise-entry-amount{
  flex:0 0 auto;
  max-width:130px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.alloc-focus-panel[data-shared-manager-open="true"] .splitwise-entry-meta{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.alloc-focus-panel[data-shared-manager-open="true"] .chip-remove{
  width:22px !important;
  height:22px !important;
  justify-self:end;
}
@media (max-width:560px){
  .alloc-focus-panel[data-shared-manager-open="true"] .splitwise-form{
    grid-template-columns:1fr !important;
  }
  .alloc-focus-panel[data-shared-manager-open="true"] .splitwise-form .ghost-btn{
    width:100%;
  }
  .alloc-focus-panel[data-shared-manager-open="true"] .splitwise-entry-text{
    display:grid !important;
    gap:2px;
  }
}



/* v1324 — Budget Allocation detail summary strip replaces repetitive mini tiles */
.alloc-focus-panel .alloc-focus-summary-strip{
  display:grid;
  gap:8px;
  padding:10px 12px;
  border-radius:13px;
  border:1px solid rgba(111,135,154,0.16);
  background:linear-gradient(135deg, rgba(248,250,252,0.98), rgba(239,246,255,0.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.72);
}
.alloc-focus-panel .alloc-focus-summary-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}
.alloc-focus-panel .alloc-focus-summary-label{
  font-size:0.58rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.07em;
  color:var(--muted);
  min-width:0;
}
.alloc-focus-panel .alloc-focus-summary-value{
  font-family:var(--font-mono);
  font-size:0.78rem;
  font-weight:950;
  white-space:nowrap;
  color:var(--accent-text);
}
.alloc-focus-panel .alloc-focus-summary-value.receivable{color:var(--green-700);}
.alloc-focus-panel .alloc-focus-summary-value.payable{color:var(--red-700);}
.alloc-focus-panel .alloc-focus-summary-value.neutral{color:var(--muted);}
.alloc-focus-panel .alloc-focus-summary-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 10px;
  min-width:0;
  font-size:0.61rem;
  font-weight:650;
  color:var(--muted);
  line-height:1.35;
}
.alloc-focus-panel .alloc-focus-summary-meta strong{
  color:var(--accent-text);
  font-weight:850;
}
.alloc-focus-panel .alloc-focus-status-pill{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:0.58rem;
  font-weight:900;
  white-space:nowrap;
}
.alloc-focus-panel .alloc-focus-status-pill.good{background:rgba(16,185,129,0.10);border-color:rgba(16,185,129,0.22);color:var(--green-700);}
.alloc-focus-panel .alloc-focus-status-pill.warn{background:rgba(245,158,11,0.11);border-color:rgba(245,158,11,0.24);color:var(--amber-warn);}
.alloc-focus-panel .alloc-focus-status-pill.bad{background:rgba(239,68,68,0.10);border-color:rgba(239,68,68,0.24);color:var(--red-700);}
.alloc-focus-panel .alloc-focus-status-pill.neutral{background:rgba(15,23,42,0.045);border-color:rgba(111,135,154,0.18);color:var(--muted);}
.alloc-focus-panel[data-shared-manager-open="true"] .alloc-focus-summary-strip{
  flex:0 0 auto;
}
@media (max-width:640px){
  .alloc-focus-panel .alloc-focus-summary-main{align-items:flex-start;flex-direction:column;gap:4px;}
  .alloc-focus-panel .alloc-focus-status-pill{margin-left:0;}
}


/* v1326 — Shared Expenses direct manager + safe outside close */
.alloc-focus-panel .splitwise-panel-direct{
  display:grid !important;
  position:relative !important;
  width:100% !important;
  max-width:100% !important;
  background:rgba(255,255,255,0.98);
  border:1px solid rgba(111,135,154,0.18);
  border-radius:14px;
  overflow:hidden;
}
.alloc-focus-panel .splitwise-panel-direct .splitwise-entries-list{
  max-height:min(260px, 34vh);
  overflow:auto;
  padding-right:2px;
}
.alloc-focus-panel .splitwise-panel-direct .splitwise-form{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
}
@media (max-width: 560px){
  .alloc-focus-panel .splitwise-panel-direct .splitwise-form{grid-template-columns:1fr;}
}



/* v1327 — Shared Expenses entries readable + popover stays open while editing */
.alloc-focus-panel .splitwise-panel-direct{
  overflow:hidden !important;
}
.alloc-focus-panel .splitwise-panel-direct .splitwise-entries-list{
  display:grid !important;
  gap:8px !important;
  max-height:min(310px, 38vh) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:10px 12px 12px !important;
  background:#fff !important;
  border-top:1px solid rgba(148,163,184,.22);
  scrollbar-gutter:stable;
}
.alloc-focus-panel .splitwise-panel-direct .splitwise-entry-chip{
  min-height:46px !important;
  height:auto !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 28px !important;
  align-items:center !important;
  gap:10px !important;
  padding:9px 10px !important;
  overflow:hidden !important;
  border-radius:12px !important;
  background:#fff !important;
  border:1px solid rgba(203,213,225,.9) !important;
}
.alloc-focus-panel .splitwise-panel-direct .splitwise-entry-main{
  display:grid !important;
  grid-template-columns:24px minmax(0,1fr) !important;
  align-items:center !important;
  gap:9px !important;
  min-width:0 !important;
  overflow:hidden !important;
}
.alloc-focus-panel .splitwise-panel-direct .splitwise-entry-status{
  width:24px !important;
  height:24px !important;
  border-radius:8px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 24px !important;
  font-size:.72rem !important;
  line-height:1 !important;
}
.alloc-focus-panel .splitwise-panel-direct .splitwise-entry-text{
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:minmax(74px, max-content) minmax(0,1fr) !important;
  align-items:center !important;
  column-gap:10px !important;
  row-gap:2px !important;
  white-space:normal !important;
  overflow:hidden !important;
}
.alloc-focus-panel .splitwise-panel-direct .splitwise-entry-amount{
  min-width:0 !important;
  max-width:124px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:.78rem !important;
  line-height:1.2 !important;
}
.alloc-focus-panel .splitwise-panel-direct .splitwise-entry-meta{
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  color:var(--muted) !important;
  font-size:.66rem !important;
  line-height:1.2 !important;
}
.alloc-focus-panel .splitwise-panel-direct .splitwise-entry-sep{
  opacity:.55;
}
.alloc-focus-panel .splitwise-panel-direct .chip-remove{
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  justify-self:end !important;
  align-self:center !important;
}
.alloc-focus-panel .splitwise-panel-direct .splitwise-form{
  background:#fff !important;
  position:relative !important;
  z-index:2 !important;
}
@media (max-width:560px){
  .alloc-focus-panel .splitwise-panel-direct .splitwise-entry-text{
    grid-template-columns:1fr !important;
  }
  .alloc-focus-panel .splitwise-panel-direct .splitwise-entry-amount{
    max-width:100% !important;
  }
}



/* === v1329 Income & Savings category tile colors only ===
   Scope intentionally limited to the Income/Savings category tiles.
   Section headers, buttons, summary cards, progress bars, and surrounding panels keep the base UI styling. */
.phase4-income-board .phase4-money-tile{
  --money-accent:#059669 !important;
  --money-soft:rgba(5,150,105,.10) !important;
  border-color:rgba(5,150,105,.24) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(5,150,105,.10), transparent 42%),
    linear-gradient(135deg, rgba(236,253,245,.76), rgba(255,255,255,.96)) !important;
}
.phase4-savings-board .phase4-money-tile{
  --money-accent:#14b8a6 !important;
  --money-soft:rgba(20,184,166,.10) !important;
  border-color:rgba(20,184,166,.24) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(20,184,166,.10), transparent 42%),
    linear-gradient(135deg, rgba(240,253,250,.78), rgba(255,255,255,.96)) !important;
}
.phase4-income-board .phase4-money-tile::before{
  background:linear-gradient(180deg,#047857,#10b981) !important;
}
.phase4-savings-board .phase4-money-tile::before{
  background:linear-gradient(180deg,#0f766e,#5eead4) !important;
}
.phase4-income-board .phase4-money-tile .phase4-money-main,
.phase4-income-board .phase4-money-tile .phase4-money-main.is-positive{
  color:#065f46 !important;
}
.phase4-savings-board .phase4-money-tile .phase4-money-main{
  color:#0f766e !important;
}



/* === v1331 — Overview dark-mode usability pass ===
   Scope: Overview header, Current Budget Allocation, Category Trends,
   Budget Allocation shared-expense controls/popovers only. */
html[data-theme="dark"] .context-bar{
  background:rgba(8,12,22,0.96) !important;
  border-bottom:1px solid rgba(255,255,255,0.10) !important;
  box-shadow:0 12px 32px rgba(0,0,0,0.26) !important;
  color:var(--accent-text) !important;
}
html[data-theme="dark"] .context-bar-month,
html[data-theme="dark"] .context-bar-stat,
html[data-theme="dark"] .context-bar-kicker,
html[data-theme="dark"] .context-tools-btn{
  color:var(--accent-text) !important;
}
html[data-theme="dark"] .context-bar-kicker,
html[data-theme="dark"] .context-bar-stat{ color:var(--muted) !important; }
html[data-theme="dark"] .context-tools-btn{
  background:var(--panel-2) !important;
  border-color:var(--line) !important;
}
html[data-theme="dark"] .context-tools-btn:hover{
  background:var(--accent-surface-hover) !important;
  border-color:var(--accent-border-strong) !important;
}

/* Overview card headers that were still using light gradients. */
html[data-theme="dark"] [data-view="overview"] .overview-chart-card .overview-card-headline,
html[data-theme="dark"] [data-view="overview"] .overview-allocation-card .allocation-section > .section-header,
html[data-theme="dark"] .current-allocation-card .overview-card-headline,
html[data-theme="dark"] .overview-allocation-card .allocation-section > .section-header{
  background:linear-gradient(180deg, rgba(31,41,64,0.98) 0%, rgba(20,26,42,0.98) 100%) !important;
  border-bottom:1px solid rgba(255,255,255,0.10) !important;
  color:var(--accent-text) !important;
}
html[data-theme="dark"] [data-view="overview"] .overview-chart-card .overview-card-headline h3,
html[data-theme="dark"] [data-view="overview"] .overview-allocation-card .section-header h3,
html[data-theme="dark"] .allocation-head-info{
  color:var(--accent-text) !important;
}
html[data-theme="dark"] .allocation-head-info{ color:var(--muted) !important; }

/* Current Budget Allocation card readability. */
html[data-theme="dark"] .current-allocation-card,
html[data-theme="dark"] .overview-chart-card,
html[data-theme="dark"] .overview-allocation-card{
  background:linear-gradient(180deg, rgba(20,26,42,0.98) 0%, rgba(12,17,30,0.98) 100%) !important;
  border-color:rgba(255,255,255,0.12) !important;
  box-shadow:0 18px 42px rgba(0,0,0,0.34) !important;
}
html[data-theme="dark"] .current-allocation-card .distribution-legend-tile .chart-legend-item,
html[data-theme="dark"] .current-allocation-card .chart-legend > *,
html[data-theme="dark"] .overview-chart-card .distribution-legend-tile .chart-legend-item{
  background:rgba(26,34,54,0.78) !important;
  border-color:rgba(255,255,255,0.10) !important;
  color:var(--accent-text) !important;
  box-shadow:none !important;
}
html[data-theme="dark"] .current-allocation-card .chart-legend,
html[data-theme="dark"] .current-allocation-card .chart-legend *{
  color:var(--accent-text) !important;
}
html[data-theme="dark"] .current-allocation-card .chart-legend small,
html[data-theme="dark"] .current-allocation-card .chart-legend .muted{
  color:var(--muted) !important;
}

/* Category Trends header, rows, hover tooltip. */
html[data-theme="dark"] #categoryTrends.trends-card-inline,
html[data-theme="dark"] .current-allocation-card .trends-card-inline{
  border-top-color:rgba(255,255,255,0.10) !important;
  color:var(--accent-text) !important;
}
html[data-theme="dark"] #categoryTrends.trends-card-inline .trends-head,
html[data-theme="dark"] #categoryTrends.trends-card-inline .focus-head{
  background:transparent !important;
  color:var(--accent-text) !important;
}
html[data-theme="dark"] #categoryTrends.trends-card-inline h3,
html[data-theme="dark"] #categoryTrends.trends-card-inline .label-with-inline-info{
  color:var(--accent-text) !important;
}
html[data-theme="dark"] #categoryTrends .trends-open-btn{
  background:rgba(129,140,248,0.14) !important;
  border-color:rgba(129,140,248,0.30) !important;
  color:#c7d2fe !important;
}
html[data-theme="dark"] #categoryTrends .trends-open-btn:hover{
  background:rgba(129,140,248,0.22) !important;
  border-color:rgba(129,140,248,0.42) !important;
}
html[data-theme="dark"] #categoryTrends .trend-insight-row,
html[data-theme="dark"] .current-allocation-card .trends-card-inline .trend-insight-row,
html[data-theme="dark"] #categoryTrends .trend-metric{
  background:rgba(26,34,54,0.78) !important;
  border-color:rgba(255,255,255,0.10) !important;
  color:var(--accent-text) !important;
}
html[data-theme="dark"] #categoryTrends .trend-name,
html[data-theme="dark"] #categoryTrends .trend-metric-value,
html[data-theme="dark"] #categoryTrends .trend-insight-note strong{
  color:var(--accent-text) !important;
}
html[data-theme="dark"] #categoryTrends .trend-insight-note,
html[data-theme="dark"] #categoryTrends .trend-metric-label,
html[data-theme="dark"] #categoryTrends .trends-sub{
  color:var(--muted) !important;
}
html[data-theme="dark"] #categoryTrends .inline-info-tooltip,
html[data-theme="dark"] .trend-bar-wrap.has-tooltip::after{
  background:rgba(15,23,42,0.98) !important;
  color:#dbeafe !important;
  border-color:rgba(148,163,184,0.28) !important;
  box-shadow:0 18px 42px rgba(0,0,0,0.48) !important;
}
html[data-theme="dark"] .trend-bar-wrap.has-tooltip::before{
  border-top-color:rgba(15,23,42,0.98) !important;
}

/* Budget Allocation main card and controls. */
html[data-theme="dark"] .overview-allocation-card .available-funds-banner,
html[data-theme="dark"] .overview-allocation-card .alloc-progress,
html[data-theme="dark"] .overview-allocation-card .alloc-focus-row,
html[data-theme="dark"] .overview-allocation-card .alloc-focus-total,
html[data-theme="dark"] .overview-allocation-card .alloc-subscription-note,
html[data-theme="dark"] .overview-allocation-card .pill-soft,
html[data-theme="dark"] .overview-allocation-card .target-input{
  background:rgba(26,34,54,0.78) !important;
  border-color:rgba(255,255,255,0.10) !important;
  color:var(--accent-text) !important;
}
html[data-theme="dark"] .overview-allocation-card .available-funds-banner .label,
html[data-theme="dark"] .overview-allocation-card .alloc-progress-head span,
html[data-theme="dark"] .overview-allocation-card .alloc-focus-source,
html[data-theme="dark"] .overview-allocation-card .alloc-focus-panel-label,
html[data-theme="dark"] .overview-allocation-card .splitwise-manager-sub,
html[data-theme="dark"] .overview-allocation-card .splitwise-empty{
  color:var(--muted) !important;
}
html[data-theme="dark"] .overview-allocation-card .available-funds-banner .value,
html[data-theme="dark"] .overview-allocation-card .alloc-progress-head strong,
html[data-theme="dark"] .overview-allocation-card .alloc-focus-title,
html[data-theme="dark"] .overview-allocation-card .alloc-focus-current-value,
html[data-theme="dark"] .overview-allocation-card .alloc-focus-panel-value,
html[data-theme="dark"] .overview-allocation-card .splitwise-manager-title{
  color:var(--accent-text) !important;
}
html[data-theme="dark"] .overview-allocation-card .alloc-progress-track,
html[data-theme="dark"] .overview-allocation-card .alloc-focus-bar{
  background:rgba(255,255,255,0.08) !important;
  border-color:rgba(255,255,255,0.10) !important;
}
html[data-theme="dark"] .overview-allocation-card .alloc-focus-details-btn,
html[data-theme="dark"] .overview-allocation-card .alloc-focus-toggle{
  background:rgba(129,140,248,0.12) !important;
  border-color:rgba(129,140,248,0.28) !important;
  color:#c7d2fe !important;
  box-shadow:none !important;
}
html[data-theme="dark"] .overview-allocation-card .alloc-focus-details-btn:hover,
html[data-theme="dark"] .overview-allocation-card .alloc-focus-details[open] .alloc-focus-details-btn,
html[data-theme="dark"] .overview-allocation-card .alloc-focus-toggle:hover{
  background:rgba(129,140,248,0.20) !important;
  border-color:rgba(129,140,248,0.42) !important;
}

/* Shared Expenses dropdown + manager popover: overrides older hardcoded #fff hardening. */
html[data-theme="dark"] .alloc-focus-panel,
html[data-theme="dark"] .alloc-focus-panel .splitwise-panel,
html[data-theme="dark"] .alloc-focus-panel .splitwise-manager-head,
html[data-theme="dark"] .alloc-focus-panel .splitwise-form,
html[data-theme="dark"] .alloc-focus-panel .splitwise-entries-list,
html[data-theme="dark"] .alloc-focus-panel .splitwise-entry-chip,
html[data-theme="dark"] .alloc-focus-panel .splitwise-empty,
html[data-theme="dark"] .splitwise-panel{
  background-color:#141a2a !important;
  background:#141a2a !important;
  border-color:rgba(255,255,255,0.12) !important;
  color:var(--accent-text) !important;
}
html[data-theme="dark"] .alloc-focus-panel{
  box-shadow:0 22px 58px rgba(0,0,0,0.55) !important;
}
html[data-theme="dark"] .alloc-focus-panel .alloc-focus-summary-strip,
html[data-theme="dark"] .alloc-focus-panel .alloc-focus-panel-item,
html[data-theme="dark"] .alloc-focus-panel .splitwise-entry-chip{
  background:rgba(26,34,54,0.86) !important;
  border-color:rgba(255,255,255,0.10) !important;
}
html[data-theme="dark"] .alloc-focus-panel .splitwise-form input,
html[data-theme="dark"] .splitwise-form input{
  background:#1a2236 !important;
  color:var(--accent-text) !important;
  border-color:rgba(255,255,255,0.14) !important;
}
html[data-theme="dark"] .alloc-focus-panel .splitwise-form input::placeholder,
html[data-theme="dark"] .splitwise-form input::placeholder{
  color:var(--hint) !important;
}
html[data-theme="dark"] .alloc-focus-panel .splitwise-form .ghost-btn,
html[data-theme="dark"] .splitwise-form .ghost-btn{
  background:rgba(129,140,248,0.16) !important;
  border-color:rgba(129,140,248,0.34) !important;
  color:#c7d2fe !important;
}
html[data-theme="dark"] .alloc-focus-panel .splitwise-form .ghost-btn:hover,
html[data-theme="dark"] .splitwise-form .ghost-btn:hover{
  background:rgba(129,140,248,0.25) !important;
}
html[data-theme="dark"] .splitwise-toggle,
html[data-theme="dark"] .alloc-focus-splitwise-hint{
  background:rgba(26,34,54,0.78) !important;
  border-color:rgba(255,255,255,0.10) !important;
  color:var(--muted) !important;
}
html[data-theme="dark"] .splitwise-toggle:hover{
  background:rgba(31,41,64,0.92) !important;
  color:var(--accent-text) !important;
}


/* === Smart Insights Dark Mode Refinement v1332 === */
body.dark-mode .smart-insights-tab,
body.dark-mode .insights-section,
body.dark-mode .insight-card,
body.dark-mode .forecast-card,
body.dark-mode .behavior-card,
body.dark-mode .intelligence-card {
  background: linear-gradient(180deg, #111827 0%, #0f172a 100%) !important;
  color: #e5e7eb !important;
  border-color: rgba(148,163,184,0.22) !important;
}

body.dark-mode .smart-insights-tab h1,
body.dark-mode .smart-insights-tab h2,
body.dark-mode .smart-insights-tab h3,
body.dark-mode .smart-insights-tab h4,
body.dark-mode .smart-insights-tab h5,
body.dark-mode .smart-insights-tab .section-title,
body.dark-mode .smart-insights-tab .card-title,
body.dark-mode .smart-insights-tab .forecast-title,
body.dark-mode .smart-insights-tab .insight-title {
  color: #f8fafc !important;
}

body.dark-mode .smart-insights-tab p,
body.dark-mode .smart-insights-tab span,
body.dark-mode .smart-insights-tab label,
body.dark-mode .smart-insights-tab .muted,
body.dark-mode .smart-insights-tab .subtitle,
body.dark-mode .smart-insights-tab .forecast-sub,
body.dark-mode .smart-insights-tab .insight-sub {
  color: #cbd5e1 !important;
}

body.dark-mode .smart-insights-tab .chart-container,
body.dark-mode .smart-insights-tab canvas,
body.dark-mode .smart-insights-tab .graph-card {
  background: #0f172a !important;
  border-color: rgba(148,163,184,0.18) !important;
}

body.dark-mode .smart-insights-tab .info-tooltip,
body.dark-mode .smart-insights-tab .hover-popup,
body.dark-mode .smart-insights-tab .popover,
body.dark-mode .smart-insights-tab .tooltip-content {
  background: #111827 !important;
  color: #e5e7eb !important;
  border: 1px solid rgba(148,163,184,0.24) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,0.45) !important;
}

body.dark-mode .smart-insights-tab .hover-popup:hover,
body.dark-mode .smart-insights-tab .popover:hover,
body.dark-mode .smart-insights-tab .tooltip-content:hover {
  background: #172033 !important;
}

body.dark-mode .smart-insights-tab .dropdown-menu,
body.dark-mode .smart-insights-tab select,
body.dark-mode .smart-insights-tab option {
  background: #111827 !important;
  color: #e5e7eb !important;
  border-color: rgba(148,163,184,0.24) !important;
}

body.dark-mode .smart-insights-tab .metric-chip,
body.dark-mode .smart-insights-tab .insight-pill,
body.dark-mode .smart-insights-tab .forecast-pill {
  background: rgba(30,41,59,0.95) !important;
  color: #e2e8f0 !important;
  border-color: rgba(148,163,184,0.22) !important;
}

body.dark-mode .smart-insights-tab .table-row,
body.dark-mode .smart-insights-tab .forecast-row,
body.dark-mode .smart-insights-tab .insight-row {
  background: rgba(15,23,42,0.72) !important;
  border-color: rgba(148,163,184,0.14) !important;
}

body.dark-mode .smart-insights-tab input,
body.dark-mode .smart-insights-tab textarea {
  background: #0f172a !important;
  color: #f1f5f9 !important;
  border-color: rgba(148,163,184,0.22) !important;
}

body.dark-mode .smart-insights-tab .positive {
  color: #4ade80 !important;
}

body.dark-mode .smart-insights-tab .negative {
  color: #f87171 !important;
}



/* === current-budget-allocation-polish-v1177 === */
[data-view="overview"] .overview-chart-card .overview-card-headline .focus-head h3{
  font-size:0.98rem !important;
}

[data-view="overview"] .overview-chart-card .overview-card-body{
  padding-top:10px !important;
}

.current-allocation-card .trends-card-header,
.current-allocation-card .category-trends-header,
.current-allocation-card .trends-card-title-wrap{
  background:transparent !important;
  box-shadow:none !important;
}



/* final-category-trends-header-bg-removal */
.current-allocation-card .trends-card-inline,
.current-allocation-card .trends-card-inline .section-title-row,
.current-allocation-card .trends-card-inline .trends-header,
.current-allocation-card .trends-card-inline .card-header,
.current-allocation-card .trends-card-inline .category-trends-header,
.current-allocation-card .trends-card-inline .trend-insight-header{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}


/* === Expenses tab clarity rework — category rows without entry-count metric === */
.phase4-expense-category-list{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.phase4-expense-row-tile{
  min-height:0;
  padding:16px 18px 16px 20px;
  display:grid;
  grid-template-columns:minmax(220px,.95fr) minmax(280px,1.25fr) minmax(260px,1fr) auto;
  align-items:center;
  gap:16px;
  border-radius:18px;
  background:linear-gradient(135deg, var(--expense-cat-soft, rgba(16,185,129,.08)), rgba(255,255,255,.94));
}

.phase4-expense-row-tile .phase4-expense-tile-head{
  min-width:0;
  align-items:center;
  justify-content:flex-start;
}

.phase4-expense-row-tile .phase4-expense-title-wrap{
  align-items:center;
}

.phase4-expense-row-tile .phase4-expense-name{
  font-size:.96rem;
  white-space:normal;
}

.phase4-expense-status{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:auto;
  padding:5px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:var(--muted);
  font-size:.6rem;
  font-weight:850;
  white-space:nowrap;
}

.phase4-expense-status.is-active{
  border-color:rgba(16,185,129,.24);
  background:rgba(16,185,129,.09);
  color:var(--green-800);
}

.phase4-expense-status.is-over{
  border-color:rgba(239,68,68,.24);
  background:rgba(239,68,68,.08);
  color:var(--red-800);
}

.phase4-expense-row-main{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(150px,.8fr) minmax(220px,1.2fr);
  align-items:center;
  gap:14px;
}

.phase4-expense-total-block{
  min-width:0;
  display:grid;
  gap:4px;
}

.phase4-expense-total-label{
  color:var(--muted);
  font-size:.58rem;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.phase4-expense-row-tile .phase4-expense-main{
  margin:0;
  font-size:1.28rem;
  color:var(--accent);
}

.phase4-expense-row-tile .phase4-expense-main.is-live{
  color:var(--red-text);
}

.phase4-expense-meta-clean{
  grid-template-columns:repeat(2, minmax(0,1fr));
}

.phase4-expense-meta-clean .phase4-expense-stat.is-over{
  border-color:rgba(239,68,68,.22);
  background:rgba(239,68,68,.06);
}

.phase4-expense-meta-clean .phase4-expense-stat.is-over .phase4-expense-stat-value{
  color:var(--red-800);
}

.phase4-expense-row-tile .phase4-expense-progress{
  margin:0;
  min-width:0;
}

.phase4-expense-row-tile .phase4-expense-progress-row{
  font-size:.62rem;
}

.phase4-expense-row-tile .phase4-expense-footer{
  justify-content:flex-end;
}

.phase4-expense-row-tile .phase4-expense-cta{
  border-color:var(--ui3d-border, var(--line));
  background:var(--panel);
  color:var(--accent);
}

@media (max-width: 1180px){
  .phase4-expense-row-tile{
    grid-template-columns:minmax(220px,1fr) minmax(260px,1fr);
  }
  .phase4-expense-row-tile .phase4-expense-progress,
  .phase4-expense-row-tile .phase4-expense-footer{
    grid-column:auto;
  }
}

@media (max-width: 760px){
  .phase4-expense-row-tile{
    grid-template-columns:1fr;
    align-items:stretch;
    gap:14px;
  }
  .phase4-expense-row-main{
    grid-template-columns:1fr;
  }
  .phase4-expense-status{
    margin-left:0;
  }
  .phase4-expense-row-tile .phase4-expense-tile-head{
    justify-content:space-between;
  }
  .phase4-expense-row-tile .phase4-expense-footer{
    justify-content:flex-start;
  }
}
/* === end Expenses tab clarity rework === */

/* === v1334 — Income & Savings row layout redesign ===
   Replaces the category tile grid with a clearer table-style main view.
   Entries are intentionally removed from the main view; row details remain in the existing modal. */
.phase4-cashflow-board.phase4-cashflow-table{
  display:block;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel);
  box-shadow:0 10px 24px rgba(15,23,42,.045);
  overflow:hidden;
}
.phase4-cashflow-table-head{
  display:grid;
  grid-template-columns:minmax(260px,1.45fr) minmax(150px,.8fr) minmax(150px,.8fr) minmax(210px,1fr) minmax(160px,.7fr);
  align-items:center;
  gap:14px;
  padding:12px 18px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(248,250,252,.92), rgba(255,255,255,.72));
  color:var(--muted);
  font-size:.60rem;
  font-weight:900;
  letter-spacing:.075em;
  text-transform:uppercase;
}
.phase4-cashflow-table-body{
  display:grid;
}
.phase4-cashflow-row{
  --money-accent:var(--emerald);
  --money-soft:rgba(16,185,129,.10);
  display:grid;
  grid-template-columns:minmax(260px,1.45fr) minmax(150px,.8fr) minmax(150px,.8fr) minmax(210px,1fr) minmax(160px,.7fr);
  align-items:center;
  gap:14px;
  min-height:76px;
  padding:14px 18px;
  border:0;
  border-bottom:1px solid var(--line);
  background:linear-gradient(90deg, var(--money-soft), transparent 36%), var(--panel);
  color:var(--accent-text);
  cursor:pointer;
  text-align:left;
  transition:background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.phase4-cashflow-row:last-child{border-bottom:0;}
.phase4-cashflow-row:hover,
.phase4-cashflow-row:focus-visible{
  background:linear-gradient(90deg, var(--money-soft), rgba(255,255,255,.88) 42%), var(--panel);
  box-shadow:inset 4px 0 0 var(--money-accent), 0 8px 18px rgba(15,23,42,.045);
  outline:none;
}
.phase4-cashflow-row:focus-visible{box-shadow:inset 4px 0 0 var(--money-accent), 0 0 0 3px rgba(94,23,235,.14);}
.phase4-cashflow-cell{min-width:0;}
.phase4-cashflow-category-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.phase4-cashflow-row .category-tile-icon-shell{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border-color:rgba(16,185,129,.22);
  background:rgba(16,185,129,.10);
}
.phase4-cashflow-name{
  color:var(--accent-text);
  font-size:.84rem;
  font-weight:900;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.phase4-cashflow-row-sub{
  margin-top:3px;
  color:var(--muted);
  font-size:.66rem;
  font-weight:650;
  line-height:1.25;
}
.phase4-cashflow-amount{
  color:var(--accent-text);
  font-family:var(--font-mono);
  font-size:.93rem;
  font-weight:850;
  letter-spacing:-.02em;
  white-space:nowrap;
}
.phase4-cashflow-amount.is-actual{
  color:#047857;
  font-size:1.06rem;
  font-weight:950;
}
.phase4-cashflow-progress-label{
  display:flex;
  align-items:baseline;
  gap:5px;
  color:var(--muted);
  font-size:.68rem;
  font-weight:700;
}
.phase4-cashflow-progress-label strong{
  color:var(--money-accent);
  font-family:var(--font-mono);
  font-size:.92rem;
  font-weight:950;
}
.phase4-cashflow-progress-track{
  width:100%;
  max-width:180px;
  height:6px;
  margin-top:7px;
  border-radius:999px;
  background:rgba(148,163,184,.20);
  overflow:hidden;
}
.phase4-cashflow-progress-fill{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--money-accent);
  transition:width 220ms ease;
}
.phase4-cashflow-row.is-watch .phase4-cashflow-progress-label strong{color:#d97706;}
.phase4-cashflow-row.is-watch .phase4-cashflow-progress-fill{background:#f59e0b;}
.phase4-cashflow-row.is-low .phase4-cashflow-progress-label strong{color:#dc2626;}
.phase4-cashflow-row.is-low .phase4-cashflow-progress-fill{background:#ef4444;}
.phase4-cashflow-row.is-neutral .phase4-cashflow-progress-label strong{color:var(--muted);}
.phase4-cashflow-row.is-neutral .phase4-cashflow-progress-fill{background:rgba(148,163,184,.38);}
.phase4-cashflow-cell-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
.phase4-cashflow-add-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:7px 12px;
  border:1px solid rgba(16,185,129,.32);
  border-radius:9px;
  background:rgba(236,253,245,.72);
  color:#047857;
  font:inherit;
  font-size:.67rem;
  font-weight:850;
  white-space:nowrap;
  cursor:pointer;
}
.phase4-cashflow-add-btn:hover,
.phase4-cashflow-add-btn:focus-visible{
  background:rgba(209,250,229,.88);
  border-color:rgba(5,150,105,.44);
  outline:none;
}
.phase4-cashflow-more{
  color:var(--muted);
  font-size:1.08rem;
  line-height:1;
}
.phase4-cashflow-add-category{
  width:100%;
  min-height:48px;
  border:0;
  border-top:1px dashed rgba(148,163,184,.34);
  background:rgba(255,255,255,.50);
  color:#047857;
  font:inherit;
  font-size:.78rem;
  font-weight:900;
  cursor:pointer;
}
.phase4-cashflow-add-category:hover,
.phase4-cashflow-add-category:focus-visible{
  background:rgba(236,253,245,.70);
  outline:none;
}
.phase4-savings-board.phase4-cashflow-table .phase4-cashflow-amount.is-actual{
  color:#0f766e;
}
.phase4-savings-board.phase4-cashflow-table .phase4-cashflow-add-btn,
.phase4-savings-board.phase4-cashflow-table .phase4-cashflow-add-category{
  color:#0f766e;
  border-color:rgba(20,184,166,.32);
}
@media (max-width:1120px){
  .phase4-cashflow-table-head,
  .phase4-cashflow-row{
    grid-template-columns:minmax(220px,1.4fr) minmax(130px,.8fr) minmax(130px,.8fr) minmax(170px,1fr) minmax(130px,.7fr);
    gap:10px;
  }
}
@media (max-width:860px){
  .phase4-cashflow-table-head{display:none;}
  .phase4-cashflow-row{
    grid-template-columns:1fr;
    align-items:start;
    gap:10px;
    padding:16px;
  }
  .phase4-cashflow-cell-actual,
  .phase4-cashflow-cell-target,
  .phase4-cashflow-cell-progress{
    padding-left:50px;
  }
  .phase4-cashflow-cell-actions{
    justify-content:flex-start;
    padding-left:50px;
  }
  .phase4-cashflow-add-btn{min-width:150px;}
  .phase4-cashflow-progress-track{max-width:100%;}
}
@media (max-width:520px){
  .phase4-cashflow-cell-actual,
  .phase4-cashflow-cell-target,
  .phase4-cashflow-cell-progress,
  .phase4-cashflow-cell-actions{padding-left:0;}
  .phase4-cashflow-category-wrap{align-items:flex-start;}
  .phase4-cashflow-add-btn{width:100%;}
}
html[data-theme="dark"] .phase4-cashflow-board.phase4-cashflow-table{
  background:rgba(15,23,42,.96);
  border-color:rgba(148,163,184,.22);
  box-shadow:0 16px 36px rgba(0,0,0,.24);
}
html[data-theme="dark"] .phase4-cashflow-table-head{
  background:linear-gradient(180deg, rgba(30,41,59,.96), rgba(15,23,42,.90));
  border-color:rgba(148,163,184,.18);
}
html[data-theme="dark"] .phase4-cashflow-row{
  background:linear-gradient(90deg, rgba(16,185,129,.08), transparent 38%), rgba(15,23,42,.96);
  border-color:rgba(148,163,184,.14);
}
html[data-theme="dark"] .phase4-cashflow-row:hover,
html[data-theme="dark"] .phase4-cashflow-row:focus-visible{
  background:linear-gradient(90deg, rgba(16,185,129,.12), rgba(15,23,42,.98) 46%), rgba(15,23,42,.96);
}
html[data-theme="dark"] .phase4-cashflow-amount.is-actual{color:#86efac;}
html[data-theme="dark"] .phase4-savings-board.phase4-cashflow-table .phase4-cashflow-amount.is-actual{color:#5eead4;}
html[data-theme="dark"] .phase4-cashflow-add-btn{
  background:rgba(16,185,129,.10);
  border-color:rgba(16,185,129,.28);
  color:#86efac;
}
html[data-theme="dark"] .phase4-cashflow-add-category{
  background:rgba(15,23,42,.72);
  border-color:rgba(148,163,184,.20);
  color:#86efac;
}

/* ============================================================
   Budget Allocation v2 — card-based layout
   Scoped under .alloc-v2 wrapper to avoid impacting any other UI.
   ============================================================ */

.alloc-v2{
  --av2-radius-lg: 16px;
  --av2-radius-md: 12px;
  --av2-radius-sm: 10px;
  --av2-gap: 12px;
  --av2-card-bg: #ffffff;
  --av2-card-border: rgba(15,23,42,0.08);
  --av2-card-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 4px 14px rgba(15,23,42,0.05);
  --av2-text: #0f172a;
  --av2-text-muted: #6b7a90;
  --av2-text-label: #6b7a90;
  --av2-divider: rgba(15,23,42,0.08);

  /* status palette */
  --av2-good: #10b981;
  --av2-good-soft: rgba(16,185,129,0.10);
  --av2-good-border: rgba(16,185,129,0.22);
  --av2-low: #f59e0b;
  --av2-low-soft: rgba(245,158,11,0.10);
  --av2-low-border: rgba(245,158,11,0.24);
  --av2-over: #ef4444;
  --av2-over-soft: rgba(239,68,68,0.10);
  --av2-over-border: rgba(239,68,68,0.22);
  --av2-savings: #6366f1;
  --av2-savings-soft: rgba(99,102,241,0.10);
  --av2-savings-border: rgba(99,102,241,0.22);
  --av2-empty: #94a3b8;
  --av2-empty-soft: rgba(148,163,184,0.14);
  --av2-empty-border: rgba(148,163,184,0.22);

  display: grid;
  gap: 14px;
  padding: 4px 4px 2px;
}

/* Override container constraints from old .alloc-grid rules */
.overview-allocation-card .alloc-v2{
  width: 100%;
  min-width: 0;
}

/* ---------- Top row: Available funds + Used donut ---------- */
.alloc-v2-top-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  gap: var(--av2-gap);
  align-items: stretch;
}

.alloc-v2-hero-card{
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--av2-radius-lg);
  color: #ffffff;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,0.12) 0%, transparent 55%),
    linear-gradient(135deg, #065f46 0%, #047857 55%, #034d39 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 -1px 0 rgba(0,0,0,0.18) inset,
    0 10px 24px rgba(4,77,57,0.22);
  min-height: 92px;
  overflow: hidden;
}

.alloc-v2-hero-card::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.10);
  pointer-events: none;
}

.alloc-v2-hero-icon{
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.14);
  color: #ecfdf5;
  backdrop-filter: blur(4px);
}
.alloc-v2-hero-icon svg{ width: 24px; height: 24px; }

.alloc-v2-hero-text{
  min-width: 0;
  display: grid;
  gap: 2px;
}
.alloc-v2-hero-label{
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(236,253,245,0.86);
  letter-spacing: 0.01em;
}
.alloc-v2-hero-value{
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Used from available funds card */
.alloc-v2-used-card{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: var(--av2-radius-lg);
  background: var(--av2-card-bg);
  border: 1px solid var(--av2-card-border);
  box-shadow: var(--av2-card-shadow);
  min-height: 92px;
  min-width: 0;
}

.alloc-v2-used-donut-wrap{
  flex: 0 0 auto;
  position: relative;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
}
.alloc-v2-mini-donut{
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.alloc-v2-mini-donut-track{
  fill: none;
  stroke: rgba(15,23,42,0.10);
  stroke-width: 6;
}
.alloc-v2-mini-donut-fill{
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 420ms ease;
}
.alloc-v2-mini-donut.is-ok .alloc-v2-mini-donut-fill{ stroke: var(--av2-good); }
.alloc-v2-mini-donut.is-warn .alloc-v2-mini-donut-fill{ stroke: var(--av2-low); }
.alloc-v2-mini-donut.is-over .alloc-v2-mini-donut-fill{ stroke: var(--av2-over); }
.alloc-v2-used-donut-label{
  position: absolute;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--av2-text);
  letter-spacing: -0.01em;
}

.alloc-v2-used-body{
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 8px;
}
.alloc-v2-used-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.alloc-v2-used-title{
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--av2-text-muted);
}
.alloc-v2-used-amounts{
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--av2-text);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.alloc-v2-divider{
  color: var(--av2-text-muted);
  font-weight: 600;
  padding: 0 2px;
}
.alloc-v2-used-track{
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(15,23,42,0.07);
  overflow: hidden;
}
.alloc-v2-used-fill{
  height: 100%;
  border-radius: 999px;
  background: var(--av2-good);
  transition: width 420ms ease, background 240ms ease;
}
.alloc-v2-used-fill.is-warn{ background: var(--av2-low); }
.alloc-v2-used-fill.is-over{ background: var(--av2-over); }

/* ---------- Mid row: Shared expenses + Carry-forward summary ---------- */
.alloc-v2-mid-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--av2-gap);
}
.alloc-v2-summary-card{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--av2-radius-lg);
  background: var(--av2-card-bg);
  border: 1px solid var(--av2-card-border);
  box-shadow: var(--av2-card-shadow);
  min-height: 72px;
  min-width: 0;
}
.alloc-v2-summary-icon{
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}
.alloc-v2-summary-icon svg{ width: 22px; height: 22px; }
.alloc-v2-icon-tint-indigo{
  background: rgba(99,102,241,0.10);
  color: #4f46e5;
}
.alloc-v2-icon-tint-violet{
  background: rgba(139,92,246,0.10);
  color: #6d28d9;
}
.alloc-v2-summary-body{
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.alloc-v2-summary-label{
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--av2-text-muted);
}
.alloc-v2-summary-value{
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--av2-text);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.alloc-v2-summary-info{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Style the info trigger (renders inside .inline-info-wrap) to match the mockup's blue circle */
.alloc-v2-summary-info .inline-info-wrap{
  display: inline-flex;
}
.alloc-v2-summary-info .inline-info-trigger{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(59,130,246,0.10);
  color: #2563eb;
  border: 1px solid rgba(59,130,246,0.22);
  display: grid;
  place-items: center;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.alloc-v2-summary-info .inline-info-trigger:hover{
  background: rgba(59,130,246,0.16);
  border-color: rgba(59,130,246,0.36);
  transform: translateY(-1px);
}
.alloc-v2-summary-info .inline-info-icon{ width: 16px; height: 16px; }

/* Shared outstanding details: keep panel popup behavior, restyle the trigger */
.alloc-v2-summary-info .shared-outstanding-details{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(59,130,246,0.10);
  color: #2563eb;
  border: 1px solid rgba(59,130,246,0.22);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.alloc-v2-summary-info .shared-outstanding-details:hover,
.alloc-v2-summary-info .shared-outstanding-details:focus-visible{
  background: rgba(59,130,246,0.16);
  border-color: rgba(59,130,246,0.36);
  transform: translateY(-1px);
}
.alloc-v2-summary-info .shared-outstanding-icon{
  font-size: 0.86rem;
  font-weight: 800;
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1;
}

/* ---------- Subscription/recurring note ---------- */
.alloc-v2 .alloc-subscription-note{
  padding: 11px 14px;
  border-radius: var(--av2-radius-md);
  background: linear-gradient(180deg, rgba(254,243,199,0.55), rgba(254,243,199,0.32));
  border: 1px solid rgba(245,158,11,0.30);
  color: #78350f;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.alloc-v2 .alloc-subscription-note::before{
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, #ffffff 0 1.2px, transparent 1.6px),
    radial-gradient(circle at 50% 60%, #ffffff 0 2.2px, transparent 2.6px),
    #f59e0b;
}
.alloc-v2 .alloc-subscription-note strong{ font-weight: 800; }
.alloc-v2 .alloc-subscription-note.warn{
  background: linear-gradient(180deg, rgba(254,226,226,0.55), rgba(254,226,226,0.32));
  border-color: rgba(239,68,68,0.30);
  color: #7f1d1d;
}
.alloc-v2 .alloc-subscription-note.warn::before{ background:
  radial-gradient(circle at 50% 38%, #ffffff 0 1.2px, transparent 1.6px),
  radial-gradient(circle at 50% 60%, #ffffff 0 2.2px, transparent 2.6px),
  #ef4444; }

/* ---------- Category cards grid ---------- */
.alloc-v2-cards-wrap{
  display: grid;
  gap: 14px;
}
.alloc-v2-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--av2-gap);
}

.alloc-v2-card{
  --av2-card-accent: var(--av2-good);
  --av2-card-accent-soft: var(--av2-good-soft);
  --av2-card-accent-border: var(--av2-good-border);
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 12px;
  padding: 14px;
  border-radius: var(--av2-radius-lg);
  background: var(--av2-card-bg);
  border: 1px solid var(--av2-card-accent-border);
  box-shadow: var(--av2-card-shadow);
  min-width: 0;
  overflow: visible; /* allow popup panel to escape via position:fixed */
  /* NOTE: no `transform` here. A transform on this card establishes a
     containing block for the position:fixed .alloc-focus-panel inside it,
     which makes the JS-computed viewport coordinates wrong and causes the
     Details popup to jump/flicker on hover. Hover lift uses box-shadow only. */
  transition: box-shadow 160ms ease, border-color 160ms ease;
}
.alloc-v2-card::before{
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: var(--av2-card-accent);
  opacity: 0.8;
}
.alloc-v2-card:hover{
  box-shadow: 0 2px 4px rgba(15,23,42,0.06), 0 12px 26px rgba(15,23,42,0.09);
  border-color: var(--av2-card-accent);
}

.alloc-v2-card.is-good{
  --av2-card-accent: var(--av2-good);
  --av2-card-accent-soft: var(--av2-good-soft);
  --av2-card-accent-border: var(--av2-good-border);
}
.alloc-v2-card.is-low{
  --av2-card-accent: var(--av2-low);
  --av2-card-accent-soft: var(--av2-low-soft);
  --av2-card-accent-border: var(--av2-low-border);
}
.alloc-v2-card.is-over{
  --av2-card-accent: var(--av2-over);
  --av2-card-accent-soft: var(--av2-over-soft);
  --av2-card-accent-border: var(--av2-over-border);
}
.alloc-v2-card.is-savings{
  --av2-card-accent: var(--av2-savings);
  --av2-card-accent-soft: var(--av2-savings-soft);
  --av2-card-accent-border: var(--av2-savings-border);
}
.alloc-v2-card.is-empty{
  --av2-card-accent: var(--av2-empty);
  --av2-card-accent-soft: var(--av2-empty-soft);
  --av2-card-accent-border: var(--av2-empty-border);
}

/* Card head: icon + title block + locked pill */
.alloc-v2-card-head{
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 10px;
}
.alloc-v2-card-icon{
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--av2-card-accent-soft);
  color: var(--av2-card-accent);
  font-size: 1.15rem;
  line-height: 1;
}
.alloc-v2-card-icon-emoji{ font-size: 1.2rem; line-height: 1; }
.alloc-v2-card-icon-letter{
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.alloc-v2-card-title-wrap{
  min-width: 0;
  display: grid;
  gap: 2px;
  padding-top: 1px;
}
.alloc-v2-card-title{
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--av2-text);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alloc-v2-card-subtitle{
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--av2-text-muted);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alloc-v2-card-shared-hint{
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--av2-text-muted);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.alloc-v2-card-shared-hint strong{ font-weight: 800; }
.alloc-v2-card-shared-hint strong.receivable{ color: #047857; }
.alloc-v2-card-shared-hint strong.payable{ color: #b91c1c; }

/* Locked allocation pill (top-right) */
.alloc-v2-locked-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 9px;
  border-radius: 9px;
  background: rgba(15,23,42,0.04);
  border: 1px solid rgba(15,23,42,0.08);
  min-height: 36px;
}
.alloc-v2-locked-pill.is-editable{
  background: rgba(99,102,241,0.06);
  border-color: rgba(99,102,241,0.18);
}
.alloc-v2-locked-pill-label{
  font-size: 0.55rem;
  font-weight: 800;
  color: var(--av2-text-muted);
  letter-spacing: 0.06em;
  line-height: 1.05;
  text-transform: uppercase;
  white-space: nowrap;
}
.alloc-v2-locked-pill-value{
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--av2-text);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.alloc-v2-locked-pill-input{
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}
.alloc-v2-locked-pill-input .target-input-v2{
  width: 46px;
  height: 22px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0 4px;
  background: transparent;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--av2-text);
  text-align: right;
  letter-spacing: -0.01em;
}
.alloc-v2-locked-pill-input .target-input-v2:focus{
  outline: none;
  border-color: rgba(99,102,241,0.42);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.16);
}
.alloc-v2-locked-pill-input .target-input-v2:disabled{
  color: var(--av2-text);
  cursor: not-allowed;
}
.alloc-v2-locked-pill-input .target-input-v2::-webkit-outer-spin-button,
.alloc-v2-locked-pill-input .target-input-v2::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.alloc-v2-locked-pill-input .target-input-v2[type=number]{ -moz-appearance: textfield; }
.alloc-v2-pct-symbol{
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--av2-text-muted);
}
.alloc-v2-lock-icon{
  width: 12px;
  height: 12px;
  color: var(--av2-text-muted);
  flex: 0 0 auto;
}

/* Card progress: allocation line + current/allocated amounts (donut removed) */
.alloc-v2-card-progress{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.alloc-v2-card-donut-wrap{
  position: relative;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
}
.alloc-v2-card-donut{
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.alloc-v2-card-donut-track{
  fill: none;
  stroke: rgba(15,23,42,0.10);
  stroke-width: 6;
}
.alloc-v2-card-donut-fill{
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 420ms ease;
  stroke: var(--av2-card-accent);
}
/* On-card donut color tracks card state */
.alloc-v2-card-donut.is-ok .alloc-v2-card-donut-fill{ stroke: var(--av2-card-accent); }
.alloc-v2-card-donut.is-warn .alloc-v2-card-donut-fill{ stroke: var(--av2-low); }
.alloc-v2-card-donut.is-over .alloc-v2-card-donut-fill{ stroke: var(--av2-over); }
.alloc-v2-card-donut-text{
  position: absolute;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 1px;
}
.alloc-v2-card-donut-pct{
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--av2-text);
  letter-spacing: -0.02em;
  line-height: 1;
}
.alloc-v2-card-donut-lock{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.alloc-v2-card-donut-lock .alloc-v2-lock-icon{ width: 10px; height: 10px; }

.alloc-v2-card-amounts{
  min-width: 0;
  display: grid;
  gap: 7px;
}
.alloc-v2-card-amounts-row{
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}
.alloc-v2-card-amount-current,
.alloc-v2-card-amount-target{
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--av2-text);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.alloc-v2-card-amount-current.expense-negative{ color: #b91c1c; }
.alloc-v2-card-amount-current.income-positive{ color: #047857; }
.alloc-v2-card-pct{
  margin-left: auto;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--av2-text-muted);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.alloc-v2-card-pct.over{ color: var(--av2-over); }
.alloc-v2-card-pct.low{ color: var(--av2-low); }
.alloc-v2-card-bar{
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(15,23,42,0.08);
  overflow: hidden;
}
.alloc-v2-card-bar-fill{
  height: 100%;
  border-radius: 999px;
  background: var(--av2-low); /* default orange like mockup's living-costs */
  transition: width 420ms ease, background 240ms ease;
}
.alloc-v2-card .alloc-v2-card-bar-fill.warn-80{ background: var(--av2-low); }
.alloc-v2-card .alloc-v2-card-bar-fill.warn-100{ background: var(--av2-over); }
.alloc-v2-card.is-good .alloc-v2-card-bar-fill{ background: var(--av2-good); }
.alloc-v2-card.is-good .alloc-v2-card-bar-fill.warn-80{ background: var(--av2-low); }
.alloc-v2-card.is-good .alloc-v2-card-bar-fill.warn-100{ background: var(--av2-over); }
.alloc-v2-card.is-savings .alloc-v2-card-bar-fill{ background: var(--av2-savings); }
.alloc-v2-card.is-empty .alloc-v2-card-bar-fill{ background: var(--av2-empty); }

/* Card footer: remaining + details button */
.alloc-v2-card-footer{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--av2-divider);
}
.alloc-v2-card-footer-label{
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--av2-text-muted);
}
.alloc-v2-card-footer-value{
  justify-self: start;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 9px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(15,23,42,0.04);
  color: var(--av2-text);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.alloc-v2-card-footer-value.good-budget,
.alloc-v2-card-footer-value.value-positive{
  background: var(--av2-good-soft);
  border-color: var(--av2-good-border);
  color: #047857;
}
.alloc-v2-card-footer-value.remaining-low{
  background: var(--av2-low-soft);
  border-color: var(--av2-low-border);
  color: #b45309;
}
.alloc-v2-card-footer-value.remaining-negative{
  background: var(--av2-over-soft);
  border-color: var(--av2-over-border);
  color: #b91c1c;
}

/* Details button (replaces old summary visual) */
.alloc-v2 .alloc-v2-details{
  position: relative;
  min-width: 0;
  justify-self: end;
}
.alloc-v2 .alloc-v2-details > summary{
  list-style: none;
  cursor: pointer;
}
.alloc-v2 .alloc-v2-details > summary::-webkit-details-marker{ display: none; }
.alloc-v2-details-btn{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px 6px 12px;
  min-height: 32px;
  border-radius: 9px;
  border: 1px solid rgba(15,23,42,0.10);
  background: #ffffff;
  color: var(--av2-text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.alloc-v2-details-btn:hover{
  background: rgba(15,23,42,0.04);
  border-color: rgba(15,23,42,0.18);
}
.alloc-v2-details[open] .alloc-v2-details-btn{
  background: rgba(15,23,42,0.04);
  border-color: rgba(15,23,42,0.18);
  box-shadow: 0 0 0 3px rgba(15,23,42,0.04);
}
.alloc-v2-details-label{
  display: inline-block;
  line-height: 1;
}
.alloc-v2-details-caret{
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--av2-text-muted);
  line-height: 1;
  transform: translateY(-1px);
  transition: transform 160ms ease;
}
.alloc-v2-details[open] .alloc-v2-details-caret{ transform: rotate(90deg) translateX(-1px); }

/* Suppress the old ::after caret added by .alloc-focus-details-btn */
.alloc-v2 .alloc-focus-details-btn.alloc-v2-details-btn::after{ content: none; }

/* Popup panel: keep position:fixed (positioned by JS), update look */
.alloc-v2 .alloc-focus-panel{
  z-index: 1350;
  width: min(380px, calc(100vw - 24px));
  max-width: min(380px, calc(100vw - 24px));
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 22px 50px rgba(15,23,42,0.18);
  overflow: auto;
  scrollbar-gutter: stable;
}

/* ---------- Footer row ---------- */
.alloc-v2-footer-row{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding-top: 4px;
}
.alloc-v2-lock-note{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.22);
  color: #92400e;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
}
.alloc-v2-lock-note-icon{
  display: inline-flex;
  align-items: center;
  color: #b45309;
  flex: 0 0 auto;
}
.alloc-v2-lock-note-icon svg{ width: 14px; height: 14px; }

.alloc-v2-legend{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  justify-self: center;
}
.alloc-v2-legend-item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--av2-text-muted);
  white-space: nowrap;
}
.alloc-v2-legend-dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.alloc-v2-legend-item.is-good .alloc-v2-legend-dot{ background: var(--av2-good); }
.alloc-v2-legend-item.is-low .alloc-v2-legend-dot{ background: var(--av2-low); }
.alloc-v2-legend-item.is-over .alloc-v2-legend-dot{ background: var(--av2-over); }
.alloc-v2-legend-item.is-empty .alloc-v2-legend-dot{ background: var(--av2-empty); }

.alloc-v2-show-all-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  min-height: 38px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  color: #ffffff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(79,70,229,0.28);
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}
.alloc-v2-show-all-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 9px 22px rgba(79,70,229,0.34);
  filter: brightness(1.04);
}
.alloc-v2-show-all-btn:active{ transform: translateY(0); }
.alloc-v2-show-all-spacer{ width: 0; height: 0; }

/* Hide the legacy totals strip we left in the DOM for safety */
.alloc-v2 .alloc-v2-total-hidden{
  display: none !important;
}

/* Override the inherited .overview-allocation-card #budgetOverview padding for cleaner edges */
.overview-allocation-card #budgetOverview:has(.alloc-v2){
  padding: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  .alloc-v2-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px){
  .alloc-v2-top-row,
  .alloc-v2-mid-row{
    grid-template-columns: minmax(0, 1fr);
  }
  .alloc-v2-cards{ grid-template-columns: minmax(0, 1fr); }
  .alloc-v2-footer-row{
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
  }
  .alloc-v2-legend{ justify-self: start; }
  .alloc-v2-show-all-btn{ width: 100%; }
  .alloc-v2-hero-value{ font-size: 1.55rem; }
  .alloc-v2-used-amounts{ font-size: 0.92rem; }
}
@media (max-width: 480px){
  .alloc-v2-used-card{ flex-wrap: wrap; }
  .alloc-v2-card-head{ grid-template-columns: 36px minmax(0, 1fr) auto; gap: 8px; }
  .alloc-v2-card-icon{ width: 36px; height: 36px; }
  .alloc-v2-card-footer{ grid-template-columns: 1fr; gap: 8px; }
  .alloc-v2 .alloc-v2-details{ justify-self: stretch; }
  .alloc-v2-details-btn{ width: 100%; justify-content: center; }
}

/* ---------- Dark theme ---------- */
html[data-theme="dark"] .alloc-v2{
  --av2-card-bg: rgba(20,26,42,0.92);
  --av2-card-border: rgba(148,163,184,0.18);
  --av2-card-shadow: 0 1px 2px rgba(0,0,0,0.30), 0 6px 18px rgba(0,0,0,0.30);
  --av2-text: #e6edf7;
  --av2-text-muted: #94a3b8;
  --av2-text-label: #94a3b8;
  --av2-divider: rgba(148,163,184,0.18);

  --av2-good: #34d399;
  --av2-good-soft: rgba(52,211,153,0.14);
  --av2-good-border: rgba(52,211,153,0.30);
  --av2-low: #fbbf24;
  --av2-low-soft: rgba(251,191,36,0.14);
  --av2-low-border: rgba(251,191,36,0.30);
  --av2-over: #f87171;
  --av2-over-soft: rgba(248,113,113,0.14);
  --av2-over-border: rgba(248,113,113,0.30);
  --av2-savings: #818cf8;
  --av2-savings-soft: rgba(129,140,248,0.14);
  --av2-savings-border: rgba(129,140,248,0.30);
  --av2-empty: #94a3b8;
  --av2-empty-soft: rgba(148,163,184,0.16);
  --av2-empty-border: rgba(148,163,184,0.30);
}
html[data-theme="dark"] .alloc-v2-hero-card{
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,0.10) 0%, transparent 55%),
    linear-gradient(135deg, #064e3b 0%, #065f46 55%, #022c22 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 -1px 0 rgba(0,0,0,0.34) inset,
    0 10px 24px rgba(0,0,0,0.38);
}
html[data-theme="dark"] .alloc-v2-used-track{ background: rgba(148,163,184,0.16); }
html[data-theme="dark"] .alloc-v2-card-bar{ background: rgba(148,163,184,0.16); }
html[data-theme="dark"] .alloc-v2-mini-donut-track,
html[data-theme="dark"] .alloc-v2-card-donut-track{ stroke: rgba(148,163,184,0.22); }
html[data-theme="dark"] .alloc-v2-card-amount-current.expense-negative{ color: #fca5a5; }
html[data-theme="dark"] .alloc-v2-card-amount-current.income-positive{ color: #86efac; }
html[data-theme="dark"] .alloc-v2-card-shared-hint strong.receivable{ color: #86efac; }
html[data-theme="dark"] .alloc-v2-card-shared-hint strong.payable{ color: #fca5a5; }
html[data-theme="dark"] .alloc-v2-summary-info .inline-info-trigger,
html[data-theme="dark"] .alloc-v2-summary-info .shared-outstanding-details{
  background: rgba(96,165,250,0.16);
  color: #93c5fd;
  border-color: rgba(96,165,250,0.32);
}
html[data-theme="dark"] .alloc-v2-icon-tint-indigo{ background: rgba(129,140,248,0.18); color: #c7d2fe; }
html[data-theme="dark"] .alloc-v2-icon-tint-violet{ background: rgba(167,139,250,0.18); color: #ddd6fe; }
html[data-theme="dark"] .alloc-v2 .alloc-subscription-note{
  background: linear-gradient(180deg, rgba(120,53,15,0.34), rgba(120,53,15,0.16));
  border-color: rgba(251,191,36,0.34);
  color: #fcd34d;
}
html[data-theme="dark"] .alloc-v2 .alloc-subscription-note.warn{
  background: linear-gradient(180deg, rgba(127,29,29,0.34), rgba(127,29,29,0.16));
  border-color: rgba(248,113,113,0.34);
  color: #fca5a5;
}
html[data-theme="dark"] .alloc-v2-locked-pill{
  background: rgba(148,163,184,0.10);
  border-color: rgba(148,163,184,0.22);
}
html[data-theme="dark"] .alloc-v2-locked-pill.is-editable{
  background: rgba(129,140,248,0.14);
  border-color: rgba(129,140,248,0.28);
}
html[data-theme="dark"] .alloc-v2-locked-pill-input .target-input-v2:focus{
  background: rgba(15,23,42,0.92);
  border-color: rgba(129,140,248,0.50);
  box-shadow: 0 0 0 3px rgba(129,140,248,0.22);
}
html[data-theme="dark"] .alloc-v2-details-btn{
  background: rgba(20,26,42,0.92);
  border-color: rgba(148,163,184,0.24);
  color: #e6edf7;
}
html[data-theme="dark"] .alloc-v2-details-btn:hover,
html[data-theme="dark"] .alloc-v2-details[open] .alloc-v2-details-btn{
  background: rgba(148,163,184,0.10);
  border-color: rgba(148,163,184,0.36);
}
html[data-theme="dark"] .alloc-v2 .alloc-focus-panel{
  background: rgba(20,26,42,0.98);
  border-color: rgba(148,163,184,0.24);
  box-shadow: 0 24px 52px rgba(0,0,0,0.48);
}
html[data-theme="dark"] .alloc-v2-card-footer-value{
  background: rgba(148,163,184,0.10);
  border-color: rgba(148,163,184,0.22);
}
html[data-theme="dark"] .alloc-v2-card-footer-value.good-budget,
html[data-theme="dark"] .alloc-v2-card-footer-value.value-positive{
  background: rgba(52,211,153,0.14);
  border-color: rgba(52,211,153,0.34);
  color: #86efac;
}
html[data-theme="dark"] .alloc-v2-card-footer-value.remaining-low{
  background: rgba(251,191,36,0.14);
  border-color: rgba(251,191,36,0.34);
  color: #fcd34d;
}
html[data-theme="dark"] .alloc-v2-card-footer-value.remaining-negative{
  background: rgba(248,113,113,0.14);
  border-color: rgba(248,113,113,0.34);
  color: #fca5a5;
}
html[data-theme="dark"] .alloc-v2-lock-note{
  background: rgba(120,53,15,0.30);
  border-color: rgba(251,191,36,0.30);
  color: #fcd34d;
}
html[data-theme="dark"] .alloc-v2-lock-note-icon{ color: #fcd34d; }
html[data-theme="dark"] .alloc-v2-show-all-btn{
  background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
  box-shadow: 0 8px 22px rgba(79,70,229,0.36);
}

/* ============================================================
   Budget Allocation v2 — polish pass
   Fixes from first preview round:
   1. Footer "Remaining" pill visibility (it was being collapsed)
   2. Title block breathing room (Living Costs subtitle truncation)
   3. Locked-pill width + % symbol wrap fix
   4. Card amounts row alignment
   ============================================================ */

/* (1) Locked allocation pill — tighten so the % stays inline, and reduce label/value gap */
.alloc-v2-locked-pill{
  gap: 5px;
  padding: 4px 7px 4px 8px;
  flex: 0 0 auto;
  max-width: 130px;
}
.alloc-v2-locked-pill-label{
  font-size: 0.5rem;
  letter-spacing: 0.05em;
  line-height: 1.0;
}
.alloc-v2-locked-pill-input{
  gap: 0;
  align-items: center;
}
.alloc-v2-locked-pill-input .target-input-v2{
  width: 38px;
  height: 20px;
  padding: 0 2px;
  font-size: 0.78rem;
}
.alloc-v2-pct-symbol{
  font-size: 0.78rem;
  margin-left: 1px;
}
.alloc-v2-lock-icon{
  width: 11px;
  height: 11px;
}
/* Read-only (savings, fixed) locked-pill value gets a hair more breathing room */
.alloc-v2-locked-pill-value:not(.alloc-v2-locked-pill-input){
  font-size: 0.8rem;
  padding-left: 1px;
}

/* (2) Title block: ensure ellipsis kicks in cleanly, give it priority for space */
.alloc-v2-card-head{
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center; /* center icon vertically with the title block */
  gap: 11px;
}
.alloc-v2-card-title{
  font-size: 0.93rem;
}
.alloc-v2-card-subtitle{
  font-size: 0.71rem;
}
.alloc-v2-card-shared-hint{
  font-size: 0.71rem;
}
/* When a card has a shared-pending hint, give the title block top-align so it stacks nicely */
.alloc-v2-card-head:has(.alloc-v2-card-shared-hint){
  align-items: flex-start;
}

/* (3) Card padding tightening for narrower card widths */
.alloc-v2-card{
  padding: 13px 13px 13px 15px; /* extra left for the accent stripe */
  gap: 11px;
}

/* (4) Footer row layout — explicit columns so the Remaining chip is always visible */
.alloc-v2-card-footer{
  display: grid;
  grid-template-columns: auto auto 1fr; /* [label] [value chip] [details button at end] */
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--av2-divider);
}
.alloc-v2-card-footer-label{
  font-size: 0.76rem;
  color: var(--av2-text-muted);
  font-weight: 600;
  white-space: nowrap;
}
.alloc-v2-card-footer-value{
  /* Force visible chip in column 2 */
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  min-width: 64px;
  padding: 4px 11px;
  border-radius: 9px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(15,23,42,0.04);
  color: var(--av2-text);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex: 0 0 auto;
}
.alloc-v2 .alloc-v2-details{
  justify-self: end;
}

/* (5) Amounts row: prevent the % chip wrapping below the amounts */
.alloc-v2-card-amounts{
  min-width: 0;
}
.alloc-v2-card-amounts-row{
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: nowrap;
  min-width: 0;
}
.alloc-v2-card-amount-current,
.alloc-v2-card-amount-target{
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alloc-v2-card-pct{
  margin-left: auto;
  padding-left: 4px;
  flex: 0 0 auto;
}

/* (6) State refinement: remaining===0 → "near limit" (amber), remaining<0 → "over" (red)
   Done in JS classification — but also guarantee Living Costs at 100% gets amber bar
   even when state happens to be is-good. The JS already passes warn-80/100 via fillClass,
   so no CSS change needed here. */

/* (7) Cosmetic: shadow accent under hero card on hover */
.alloc-v2-hero-card{ transition: transform 160ms ease, box-shadow 160ms ease; }
.alloc-v2-hero-card:hover{
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 -1px 0 rgba(0,0,0,0.20) inset,
    0 14px 30px rgba(4,77,57,0.28);
}

/* (8) When a card has many narrow columns of long currency, allow currency to compact */
@media (max-width: 1240px){
  .alloc-v2-card-amount-current,
  .alloc-v2-card-amount-target{ font-size: 0.84rem; }
}

/* (9) Dark theme footer chip background fallback */
html[data-theme="dark"] .alloc-v2-card-footer-value{
  background: rgba(148,163,184,0.10);
  border-color: rgba(148,163,184,0.22);
  color: var(--av2-text);
}

/* ============================================================
   Budget Allocation v2 — neutralize legacy !important rules
   The legacy ".overview-allocation-card .alloc-focus-remaining" and
   ".alloc-focus-details" rules use grid-area:remaining/details with
   !important, designed for the old .alloc-focus-row template.
   Inside .alloc-v2 we have a different grid; neutralize them.
   ============================================================ */
.overview-allocation-card .alloc-v2 .alloc-focus-remaining{
  grid-area: auto !important;
  width: auto !important;
  height: auto !important;
  padding: 4px 11px !important;
  border-radius: 9px !important;
}
.overview-allocation-card .alloc-v2 .alloc-focus-details{
  grid-area: auto !important;
  width: auto !important;
  display: inline-block !important;
  position: relative !important;
}
.overview-allocation-card .alloc-v2 .alloc-focus-details > summary{
  display: inline-flex !important;
}

/* The legacy ".alloc-focus-details-btn" rule sets width:100% to fill the old grid cell.
   Inside a card-footer we want the button to size to its content. */
.alloc-v2 .alloc-focus-details-btn.alloc-v2-details-btn{
  width: auto;
}

/* The legacy fallback rule (line ~19608) forces .alloc-focus-row > details into grid-column:4.
   That selector requires .alloc-focus-row parent; we don't have one here, so it doesn't
   match — no override needed. */

/* ============================================================
   Budget Allocation v2 — locked-pill final polish
   ============================================================ */
.alloc-v2-locked-pill{
  max-width: none;
  padding: 4px 6px 4px 8px;
  gap: 4px;
  flex-wrap: nowrap;
  min-width: 0;
}
.alloc-v2-locked-pill-label{
  font-size: 0.48rem;
  letter-spacing: 0.04em;
  line-height: 1;
  flex: 0 0 auto;
}
.alloc-v2-locked-pill-value{
  display: inline-flex;
  align-items: baseline;
  flex: 0 0 auto;
}
.alloc-v2-locked-pill-input{
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  flex: 0 0 auto;
}
.alloc-v2-locked-pill-input .target-input-v2{
  width: 44px;       /* enough for "XX.XX" in monospace 0.76rem */
  height: 18px;
  padding: 0 1px;
  font-size: 0.76rem;
  text-align: right;
}
.alloc-v2-pct-symbol{
  font-size: 0.76rem;
  margin-left: 0;
  padding-left: 1px;
}
.alloc-v2-lock-icon{
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
}
/* Read-only value (savings, fixed costs): no input, just text */
.alloc-v2-locked-pill-value:not(.alloc-v2-locked-pill-input){
  font-size: 0.76rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Card head: prevent the lock pill from squashing the title block too narrow */
.alloc-v2-card-head{
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
}
.alloc-v2-card-icon{
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

/* Title block compaction */
.alloc-v2-card-title{
  font-size: 0.9rem;
}

/* Amounts row: monospace font tracks long currency cleanly */
.alloc-v2-card-amount-current,
.alloc-v2-card-amount-target{
  font-size: 0.84rem;
}

/* Shared-pending hint: don't truncate "Shared pending: €189.97" */
.alloc-v2-card-shared-hint{
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.3;
}


/* ============================================================
   Budget Allocation — minimal refinements requested
   Scope: .alloc-v2 only. No shared Income/Savings styles touched.
   - usage % moved to tile top-right
   - progress bar removed
   - allocation target remains in donut as LOCKED / ALLOCATE
   - dropdown panels stay above tiles
   ============================================================ */
.alloc-v2 .alloc-v2-card-head{
  grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px 11px;
}
.alloc-v2 .alloc-v2-card-head .alloc-v2-card-icon{
  grid-row: 1;
  grid-column: 1;
  align-self: start;
}
.alloc-v2 .alloc-v2-card-head .alloc-v2-card-title-wrap{
  grid-row: 1;
  grid-column: 2;
  align-self: center;
}
.alloc-v2 .alloc-v2-card-head .alloc-v2-card-usage-pct{
  grid-row: 1;
  grid-column: 3;
}
/* Subtitle + shared-pending hint flow full-width below, under the emoji. */
.alloc-v2 .alloc-v2-card-meta{
  grid-row: 2;
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.alloc-v2 .alloc-v2-card-meta:empty{
  display: none;
}
.alloc-v2 .alloc-v2-card-usage-pct{
  justify-self: end;
  align-self: start;
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.alloc-v2 .alloc-v2-card-usage-ring{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.alloc-v2 .alloc-v2-card-usage-ring-track{
  fill: none;
  stroke: rgba(15,23,42,0.10);
  stroke-width: 3;
}
.alloc-v2 .alloc-v2-card-usage-ring-fill{
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke: var(--av2-card-accent);
  transition: stroke-dashoffset 420ms ease;
}
.alloc-v2 .alloc-v2-card-usage-ring.is-ok .alloc-v2-card-usage-ring-fill{ stroke: var(--av2-card-accent); }
.alloc-v2 .alloc-v2-card-usage-ring.is-warn .alloc-v2-card-usage-ring-fill{ stroke: var(--av2-low); }
.alloc-v2 .alloc-v2-card-usage-ring.is-over .alloc-v2-card-usage-ring-fill{ stroke: var(--av2-over); }
.alloc-v2 .alloc-v2-card-usage-pct-value{
  position: relative;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.6rem;
  font-weight: 900;
  line-height: 1;
  color: var(--av2-text-muted);
  white-space: nowrap;
}
.alloc-v2 .alloc-v2-card-usage-pct.over .alloc-v2-card-usage-pct-value{ color: var(--av2-over); }
.alloc-v2 .alloc-v2-card-usage-pct.low .alloc-v2-card-usage-pct-value{ color: var(--av2-low); }
.alloc-v2 .alloc-v2-card-title{
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.14;
  max-width: 100%;
}
.alloc-v2 .alloc-v2-card-bar,
.alloc-v2 .alloc-v2-card-bar-fill{
  display: none !important;
}
.alloc-v2 .alloc-v2-card-amounts{
  gap: 5px;
}
/* Allocation target line sits above the current/allocated amounts. */
.alloc-v2 .alloc-v2-card-alloc-line{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
.alloc-v2 .alloc-v2-card-amounts-row{
  display: grid;
  grid-template-columns: minmax(0, auto) auto minmax(0, auto);
  align-items: baseline;
  justify-content: start;
  column-gap: 9px;
  min-width: 0;
}
.alloc-v2 .alloc-v2-card-amount-current,
.alloc-v2 .alloc-v2-card-amount-target{
  overflow: visible;
  text-overflow: clip;
  max-width: none;
  white-space: nowrap;
}
.alloc-v2 .alloc-v2-card-donut-text{
  width: 48px;
  line-height: 1;
  gap: 1px;
}
.alloc-v2 .alloc-v2-card-donut-state{
  display: inline-block;
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--av2-text-muted);
  text-transform: uppercase;
  line-height: 1;
}
.alloc-v2 .alloc-v2-card-donut-pct{
  display: inline-block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.78rem;
  font-weight: 900;
  color: var(--av2-text);
  letter-spacing: -0.01em;
  line-height: 1;
}
.alloc-v2 .alloc-v2-card-donut-input{
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-start;
  max-width: none;
  line-height: 1;
}
.alloc-v2 .alloc-v2-card-donut-input .target-input-v2{
  width: 42px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.78rem;
  font-weight: 900;
  color: var(--av2-text);
  text-align: right;
  line-height: 1;
}
.alloc-v2 .alloc-v2-card-donut-input .target-input-v2:focus{
  outline: none;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(99,102,241,0.18);
}
.alloc-v2 .alloc-v2-card-donut-input .target-input-v2:disabled{
  cursor: not-allowed;
  opacity: 1;
}
.alloc-v2 .alloc-v2-card-donut-input .target-input-v2::-webkit-outer-spin-button,
.alloc-v2 .alloc-v2-card-donut-input .target-input-v2::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.alloc-v2 .alloc-v2-card-donut-input .target-input-v2[type=number]{ -moz-appearance: textfield; }
.alloc-v2 .alloc-v2-card-donut-input .alloc-v2-pct-symbol{
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.74rem;
  font-weight: 900;
  color: var(--av2-text-muted);
  padding-left: 0;
}
.alloc-v2 .alloc-v2-card-donut-lock{
  margin-top: 0;
  align-self: center;
}
.alloc-v2 .alloc-v2-card-donut-lock .alloc-v2-lock-icon{
  width: 10px;
  height: 10px;
}
.alloc-v2 .alloc-focus-panel{
  z-index: 3000 !important;
}
.alloc-v2 .alloc-v2-details[open]{
  z-index: 3001;
}
@media (max-width: 1120px){
  .alloc-v2 .alloc-v2-card-amount-current,
  .alloc-v2 .alloc-v2-card-amount-target{ font-size: 0.78rem; }
}


/* veyra refinement: Budget Allocation cards
   - Remove the visible "Remaining" label from the card footer.
   - Cards in a row stay equal height (CSS grid stretch). The header is packed
     at the top, the footer pins to the bottom, and the flexible slack sits
     BETWEEN the header and the progress block so the LOCKED/% line and the
     current/allocated amounts sit just above the divider — aligned across
     every card regardless of how tall its header is. */
.alloc-v2 .alloc-v2-card{
  grid-template-rows: auto 1fr auto !important;
  align-items: stretch;
}
.alloc-v2 .alloc-v2-card-head{
  align-self: start;
}
.alloc-v2 .alloc-v2-card-progress{
  align-self: end;
  min-height: 0;
}
.alloc-v2 .alloc-v2-card-amounts,
.alloc-v2 .alloc-v2-card-amounts-row{
  align-self: end;
}
.alloc-v2 .alloc-v2-card-footer{
  align-self: end;
  grid-template-columns: 1fr !important;
  grid-template-areas: none !important;
  grid-auto-flow: row;
  align-items: stretch;
  gap: 8px;
}
/* Stacked footer: Remaining pill on top (left), action button full-width below.
   The footer children reuse legacy .alloc-focus-remaining / .alloc-focus-details
   class names, which older .overview-allocation-card rules pin to named grid
   areas with !important. Reset that placement here so they flow in one column. */
.alloc-v2 .alloc-v2-card-footer .alloc-v2-card-footer-value,
.overview-allocation-card .alloc-v2 .alloc-v2-card-footer .alloc-focus-remaining{
  grid-area: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: start !important;
  width: auto !important;
}
.alloc-v2 .alloc-v2-card-footer .alloc-v2-details,
.overview-allocation-card .alloc-v2 .alloc-v2-card-footer .alloc-focus-details{
  grid-area: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: stretch !important;
  width: 100% !important;
  display: block !important;
}
.alloc-v2 .alloc-v2-card-footer .alloc-v2-details > summary{
  width: 100%;
}
.alloc-v2 .alloc-v2-card-footer .alloc-v2-details-btn{
  width: 100%;
  justify-content: center;
}
.alloc-v2 .alloc-v2-card-footer-label{
  display: none !important;
}
@media (max-width: 760px){
  .alloc-v2 .alloc-v2-card{
    grid-template-rows: auto auto auto !important;
  }
  .alloc-v2 .alloc-v2-card-head{
    min-height: 0;
  }
}

/* ── Drag-to-reorder allocation cards ─────────────────────────────────────── */
.alloc-v2 .alloc-v2-card{
  /* room is already present; handle is absolutely positioned top-center */
}
.alloc-v2 .alloc-v2-card-drag-handle{
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: 30px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(15,23,42,0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  opacity: 0;
  transition: opacity 140ms ease, color 140ms ease, background 140ms ease;
}
.alloc-v2 .alloc-v2-card-drag-handle svg{ transform: rotate(90deg); }
.alloc-v2 .alloc-v2-card:hover .alloc-v2-card-drag-handle{ opacity: 1; }
.alloc-v2 .alloc-v2-card-drag-handle:hover{
  color: rgba(15,23,42,0.55);
  background: rgba(15,23,42,0.05);
}
.alloc-v2 .alloc-v2-card-drag-handle:active{ cursor: grabbing; }
/* Always show the handle on touch devices (no hover) */
@media (hover: none){
  .alloc-v2 .alloc-v2-card-drag-handle{ opacity: 0.6; }
}

.alloc-v2 .alloc-v2-card.alloc-is-dragging{
  opacity: 0.5;
  cursor: grabbing;
}
/* Drop indicators: a colored bar on the side where the card will land */
.alloc-v2 .alloc-v2-card.alloc-drag-over-before::after,
.alloc-v2 .alloc-v2-card.alloc-drag-over-after::after{
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 999px;
  background: var(--av2-card-accent, #6366f1);
  z-index: 5;
}
.alloc-v2 .alloc-v2-card.alloc-drag-over-before::after{ left: -7px; }
.alloc-v2 .alloc-v2-card.alloc-drag-over-after::after{ right: -7px; }


/* v1324 — Budget Allocation popover/tooltip containment fix. */
.alloc-focus-details[open],
.alloc-focus-details[open] .alloc-focus-details-btn{
  position:relative;
  z-index:10020;
}
.alloc-focus-panel{
  z-index:10030 !important;
}
.shared-outstanding-details{
  position:relative;
  z-index:10040;
}
.shared-outstanding-panel{
  z-index:10050 !important;
}


/* v1326 — Surgical Budget Allocation popup stability.
   Keeps native Details/Manage Shared panels on their original <details>/<summary> behavior,
   and only raises the shared-expenses hover panel above category tiles. */
.overview-allocation-card,
.overview-allocation-card .allocation-section,
.overview-allocation-card .alloc-v2,
.overview-allocation-card .alloc-v2-cards-wrap,
.overview-allocation-card .alloc-v2-cards,
.overview-allocation-card .alloc-v2-card{
  overflow: visible;
}
.alloc-v2 .alloc-focus-details[open]{
  z-index: 10020;
}
.alloc-v2 .alloc-focus-details[open] .alloc-focus-panel{
  z-index: 10030 !important;
}
.shared-outstanding-details{
  position: relative;
  z-index: 10040;
}
.shared-outstanding-panel{
  z-index: 10050 !important;
}

/* ============================================================
   Current Budget Allocation — modern UI rebuild v1400
   Scope: current allocation distribution, adaptive legend,
   inline category trends, and Category Trends modal.
   ============================================================ */
.current-allocation-card.overview-chart-card,
.grid-overview > .overview-chart-card.current-allocation-card,
[data-view="overview"] .overview-chart-card.current-allocation-card{
  --cba-accent:#5e17eb;
  --cba-blue:#60a5fa;
  --cba-green:#10b981;
  --cba-card-border:rgba(94,23,235,0.18);
  --cba-soft:rgba(94,23,235,0.075);
  position:relative;
  padding:0;
  overflow:hidden;
  border-color:var(--cba-card-border);
  background:
    radial-gradient(circle at 96% 0%, rgba(96,165,250,0.12), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.985), rgba(241,248,255,0.92));
  box-shadow:0 20px 50px rgba(30,64,120,0.12), 0 6px 18px rgba(30,64,120,0.07);
}
.current-allocation-card.overview-chart-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  z-index:4;
  background:linear-gradient(90deg, var(--cba-accent), var(--cba-blue), var(--cba-green));
}
.current-allocation-card .overview-card-headline,
.current-allocation-card.overview-chart-card .focus-head{
  padding:18px 22px 14px;
  border-bottom:1px solid rgba(15,23,42,0.075);
  background:transparent !important;
  box-shadow:none !important;
}
.current-allocation-card .distribution-stage{
  height:auto !important;
  min-height:0 !important;
  padding:22px 22px 0 !important;
  overflow:visible !important;
}
.current-allocation-card .chart-wrap.compact-below,
.current-allocation-card .chart-wrap{
  display:grid !important;
  grid-template-columns:minmax(260px,330px) minmax(0,1fr) !important;
  gap:30px !important;
  align-items:center !important;
  min-height:310px !important;
  margin:0 0 22px !important;
  overflow:visible !important;
}
.current-allocation-card .distribution-chart-tile{
  width:auto !important;
  min-width:0 !important;
  height:300px !important;
  min-height:300px !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(15,23,42,0.055) !important;
  border-radius:20px !important;
  background:linear-gradient(145deg, rgba(255,255,255,0.72), rgba(248,250,252,0.48)) !important;
  overflow:hidden !important;
}
.current-allocation-card #spendingPie{
  width:100% !important;
  height:100% !important;
  max-width:292px !important;
  max-height:292px !important;
  filter:drop-shadow(0 22px 26px rgba(30,64,120,0.16)) !important;
}
.current-allocation-card #spendingLegend.distribution-legend-tile{
  --legend-tile-py:9px;
  --legend-tile-px:10px;
  --legend-tile-gap:8px;
  --legend-swatch-w:8px;
  --legend-swatch-h:22px;
  --legend-label-size:0.73rem;
  --legend-amount-size:0.70rem;
  --legend-percent-size:0.62rem;
  align-self:stretch;
  align-content:start !important;
  padding-top:10px !important;
  gap:var(--legend-tile-gap) !important;
  max-width:none !important;
  overflow:hidden !important;
}
.current-allocation-card #spendingLegend.distribution-legend-tile::before{
  content:"Allocation breakdown";
  display:block;
  margin:0 0 2px;
  color:var(--muted);
  font-size:0.62rem;
  font-weight:900;
  letter-spacing:0.07em;
  text-transform:uppercase;
}
.current-allocation-card #spendingLegend.distribution-legend-tile.legend-count-compact{
  --legend-tile-py:7px;
  --legend-tile-gap:6px;
  --legend-swatch-h:18px;
  --legend-label-size:0.66rem;
  --legend-amount-size:0.63rem;
  --legend-percent-size:0.56rem;
}
.current-allocation-card #spendingLegend.distribution-legend-tile.legend-count-dense{
  --legend-tile-py:5px;
  --legend-tile-px:8px;
  --legend-tile-gap:4px;
  --legend-swatch-w:6px;
  --legend-swatch-h:15px;
  --legend-label-size:0.58rem;
  --legend-amount-size:0.55rem;
  --legend-percent-size:0.50rem;
}
.current-allocation-card #spendingLegend.distribution-legend-tile.legend-count-ultra{
  --legend-tile-py:4px;
  --legend-tile-px:7px;
  --legend-tile-gap:3px;
  --legend-swatch-w:5px;
  --legend-swatch-h:13px;
  --legend-label-size:0.52rem;
  --legend-amount-size:0.50rem;
  --legend-percent-size:0.46rem;
}
.current-allocation-card #spendingLegend.distribution-legend-tile .chart-legend-item{
  display:grid !important;
  grid-template-columns:var(--legend-swatch-w) minmax(0,1fr) auto !important;
  column-gap:10px !important;
  align-items:center !important;
  min-height:0 !important;
  padding:var(--legend-tile-py) var(--legend-tile-px) !important;
  border:1px solid rgba(15,23,42,0.07) !important;
  border-radius:13px !important;
  background:rgba(255,255,255,0.66) !important;
  box-shadow:0 1px 0 rgba(255,255,255,0.76), 0 5px 14px rgba(30,64,120,0.035) !important;
  transition:background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.current-allocation-card #spendingLegend.distribution-legend-tile .chart-legend-item:hover,
.current-allocation-card #spendingLegend.distribution-legend-tile .chart-legend-item.is-active{
  background:rgba(255,255,255,0.94) !important;
  border-color:rgba(94,23,235,0.22) !important;
  box-shadow:0 1px 0 rgba(255,255,255,0.86), 0 10px 22px rgba(30,64,120,0.08) !important;
  transform:translateY(-1px) !important;
}
.current-allocation-card #spendingLegend.distribution-legend-tile .chart-swatch{
  width:var(--legend-swatch-w) !important;
  height:var(--legend-swatch-h) !important;
  border-radius:999px !important;
}
.current-allocation-card #spendingLegend.distribution-legend-tile .chart-legend-label{
  font-size:var(--legend-label-size) !important;
  font-weight:850 !important;
  line-height:1.1 !important;
}
.current-allocation-card #spendingLegend.distribution-legend-tile .chart-legend-value{
  gap:8px !important;
  align-items:baseline !important;
}
.current-allocation-card #spendingLegend.distribution-legend-tile .amount{
  font-size:var(--legend-amount-size) !important;
  font-weight:850 !important;
}
.current-allocation-card #spendingLegend.distribution-legend-tile .percent{
  font-size:var(--legend-percent-size) !important;
  font-weight:780 !important;
}
.current-allocation-card #spendingLegend.distribution-legend-tile.legend-count-dense .chart-legend-value,
.current-allocation-card #spendingLegend.distribution-legend-tile.legend-count-ultra .chart-legend-value{ gap:4px !important; }
.current-allocation-card #spendingLegend.distribution-legend-tile.legend-count-ultra .percent{ display:none !important; }
.current-allocation-card #categoryTrends.trends-card-inline,
.current-allocation-card .trends-card-inline{
  margin:0 22px 22px !important;
  padding:20px 0 0 !important;
  border-top:1px solid rgba(15,23,42,0.08) !important;
  background:transparent !important;
  box-shadow:none !important;
}
.current-allocation-card #categoryTrends.trends-card-inline .trends-head-modern,
#categoryTrends.trends-card-inline .trends-head-modern{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:16px !important;
  margin:0 0 12px !important;
}
.current-allocation-card .trends-title-block{
  display:grid;
  gap:4px;
  min-width:0;
}
.current-allocation-card .trends-eyebrow{
  color:var(--cba-accent);
  font-size:0.62rem;
  font-weight:900;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.current-allocation-card .trends-title-row{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
}
.current-allocation-card .trends-title-row h3{
  margin:0;
  color:var(--accent-text);
  font-size:1.02rem;
  font-weight:900;
  letter-spacing:-0.025em;
  line-height:1.1;
}
.current-allocation-card .trends-title-block p{
  margin:0;
  max-width:640px;
  color:var(--muted);
  font-size:0.72rem;
  line-height:1.35;
}
.current-allocation-card #categoryTrends .trends-open-btn-modern,
#categoryTrends .trends-open-btn-modern{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:32px !important;
  height:32px !important;
  padding:0 13px !important;
  flex:0 0 auto !important;
  border-radius:999px !important;
  border:1px solid rgba(94,23,235,0.20) !important;
  background:rgba(94,23,235,0.08) !important;
  color:#4a11bd !important;
  font-size:0.70rem !important;
  font-weight:850 !important;
  line-height:1 !important;
  box-shadow:none !important;
}
.current-allocation-card #categoryTrends .trends-open-btn-modern:hover,
#categoryTrends .trends-open-btn-modern:hover{
  background:rgba(94,23,235,0.13) !important;
  border-color:rgba(94,23,235,0.30) !important;
  transform:translateY(-1px) !important;
}
.current-allocation-card .trends-card-inline .trend-insight-list{
  display:grid !important;
  gap:10px !important;
}
.current-allocation-card .trends-card-inline .trend-insight-row{
  display:grid !important;
  grid-template-columns:minmax(130px,0.95fr) minmax(0,1.35fr) minmax(150px,0.75fr) !important;
  align-items:center !important;
  gap:12px !important;
  min-height:0 !important;
  padding:13px !important;
  border:1px solid rgba(15,23,42,0.075) !important;
  border-radius:16px !important;
  background:rgba(255,255,255,0.70) !important;
  box-shadow:0 1px 0 rgba(255,255,255,0.72), 0 6px 16px rgba(30,64,120,0.035) !important;
  overflow:hidden !important;
}
.current-allocation-card .trends-card-inline .trend-insight-top{ min-width:0 !important; }
.current-allocation-card .trends-card-inline .trend-name{
  color:var(--accent-text) !important;
  font-size:0.78rem !important;
  font-weight:900 !important;
}
.current-allocation-card .trends-card-inline .trend-badge{
  margin-top:5px !important;
  border-radius:999px !important;
  padding:3px 8px !important;
  font-size:0.61rem !important;
  font-weight:850 !important;
}
.current-allocation-card .trends-card-inline .trend-insight-metrics{
  grid-column:auto !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:7px !important;
}
.current-allocation-card .trends-card-inline .trend-metric{
  min-width:0 !important;
  padding:8px !important;
  border-radius:11px !important;
  border:1px solid rgba(15,23,42,0.055) !important;
  background:rgba(248,250,252,0.88) !important;
}
.current-allocation-card .trends-card-inline .trend-metric-label{
  display:block !important;
  color:var(--muted) !important;
  font-size:0.56rem !important;
  font-weight:850 !important;
  letter-spacing:0.045em !important;
  text-transform:uppercase !important;
}
.current-allocation-card .trends-card-inline .trend-metric strong{
  font-family:var(--font-mono) !important;
  font-size:0.68rem !important;
  font-weight:850 !important;
}
.current-allocation-card .trends-card-inline .trend-chart-stack{
  min-width:0 !important;
}
.current-allocation-card .trends-card-inline .trend-bars{
  height:42px !important;
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:6px !important;
  align-items:end !important;
  padding:0 4px !important;
}
.current-allocation-card .trends-card-inline .trend-insight-note{
  grid-column:1 / -1 !important;
  color:var(--muted) !important;
  font-size:0.66rem !important;
  line-height:1.35 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}
.category-trends-modal-modern .chart-modal-card,
#categoryTrendsModal .trend-modal-card,
#categoryTrendsModal .chart-modal-card{
  width:min(860px, calc(100vw - 32px)) !important;
  max-height:min(82vh, 760px) !important;
  border-radius:24px !important;
  border:1px solid rgba(255,255,255,0.30) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(96,165,250,0.13), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.985), rgba(241,248,255,0.96)) !important;
  box-shadow:0 30px 80px rgba(15,23,42,0.28) !important;
  overflow:hidden !important;
}
#categoryTrendsModal .chart-modal-head,
#categoryTrendsModal .trend-modal-head,
#categoryTrendsModal .modal-head{
  padding:20px 22px !important;
  border-bottom:1px solid rgba(15,23,42,0.08) !important;
  background:transparent !important;
}
#categoryTrendsModal #categoryTrendsModalTitle{
  color:var(--accent-text) !important;
  font-size:1.05rem !important;
  font-weight:900 !important;
  letter-spacing:-0.025em !important;
}
#categoryTrendsModal #categoryTrendsModalMeta{
  color:var(--muted) !important;
  font-size:0.73rem !important;
  line-height:1.4 !important;
}
#categoryTrendsModal #categoryTrendsCloseBtn{
  width:44px !important;
  height:44px !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:14px !important;
  border:1px solid rgba(15,23,42,0.10) !important;
  background:rgba(255,255,255,0.92) !important;
  color:transparent !important;
  font-size:0 !important;
  line-height:1 !important;
  text-indent:0 !important;
  overflow:hidden !important;
  transition:all .18s ease !important;
}
#categoryTrendsModal #categoryTrendsCloseBtn::before{
  content:"×" !important;
  display:block !important;
  color:var(--accent-text) !important;
  font-size:24px !important;
  font-weight:300 !important;
  line-height:1 !important;
  text-indent:0 !important;
}
#categoryTrendsModal #categoryTrendsCloseBtn:hover{
  transform:translateY(-1px) !important;
  background:rgba(255,255,255,1) !important;
  box-shadow:0 8px 20px rgba(15,23,42,.10) !important;
}
#categoryTrendsModal .trend-modal-list,
#categoryTrendsModal #categoryTrendsModalList{
  display:grid !important;
  gap:10px !important;
  padding:18px !important;
  max-height:calc(min(82vh, 760px) - 108px) !important;
  overflow:auto !important;
}
#categoryTrendsModal .trend-insight-row.expanded,
#categoryTrendsModal .trend-insight-row{
  display:grid !important;
  grid-template-columns:minmax(145px,0.90fr) minmax(0,1.20fr) minmax(165px,0.80fr) !important;
  gap:12px !important;
  align-items:center !important;
  padding:13px !important;
  border:1px solid rgba(15,23,42,0.075) !important;
  border-radius:16px !important;
  background:rgba(255,255,255,0.72) !important;
  box-shadow:0 1px 0 rgba(255,255,255,0.74), 0 6px 16px rgba(30,64,120,0.04) !important;
}
#categoryTrendsModal .trend-insight-row .trend-insight-note{
  grid-column:1 / -1 !important;
}
html[data-theme="dark"] .current-allocation-card.overview-chart-card{
  --cba-card-border:rgba(129,140,248,0.26);
  background:
    radial-gradient(circle at 96% 0%, rgba(96,165,250,0.11), transparent 36%),
    linear-gradient(145deg, rgba(15,23,42,0.98), rgba(8,13,24,0.98)) !important;
  box-shadow:0 22px 55px rgba(0,0,0,0.36) !important;
}
html[data-theme="dark"] .current-allocation-card .overview-card-headline,
html[data-theme="dark"] .current-allocation-card.overview-chart-card .focus-head{
  border-bottom-color:rgba(148,163,184,0.16) !important;
}
html[data-theme="dark"] .current-allocation-card .distribution-chart-tile{
  background:linear-gradient(145deg, rgba(15,23,42,0.62), rgba(30,41,59,0.38)) !important;
  border-color:rgba(148,163,184,0.16) !important;
}
html[data-theme="dark"] .current-allocation-card #spendingLegend.distribution-legend-tile .chart-legend-item,
html[data-theme="dark"] .current-allocation-card .trends-card-inline .trend-insight-row,
html[data-theme="dark"] #categoryTrendsModal .trend-insight-row{
  background:rgba(15,23,42,0.74) !important;
  border-color:rgba(148,163,184,0.18) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.035), 0 8px 20px rgba(0,0,0,0.20) !important;
}
html[data-theme="dark"] .current-allocation-card #spendingLegend.distribution-legend-tile .chart-legend-item:hover,
html[data-theme="dark"] .current-allocation-card #spendingLegend.distribution-legend-tile .chart-legend-item.is-active,
html[data-theme="dark"] #categoryTrendsModal .trend-insight-row:hover{
  background:rgba(30,41,59,0.86) !important;
  border-color:rgba(147,197,253,0.30) !important;
}
html[data-theme="dark"] .current-allocation-card #categoryTrends.trends-card-inline,
html[data-theme="dark"] .current-allocation-card .trends-card-inline{
  border-top-color:rgba(148,163,184,0.16) !important;
}
html[data-theme="dark"] .current-allocation-card .trends-eyebrow{ color:#a78bfa !important; }
html[data-theme="dark"] .current-allocation-card #categoryTrends .trends-open-btn-modern,
html[data-theme="dark"] #categoryTrends .trends-open-btn-modern{
  background:rgba(129,140,248,0.14) !important;
  border-color:rgba(129,140,248,0.30) !important;
  color:#c7d2fe !important;
}
html[data-theme="dark"] .current-allocation-card .trends-card-inline .trend-metric,
html[data-theme="dark"] #categoryTrendsModal .trend-metric{
  background:rgba(15,23,42,0.76) !important;
  border-color:rgba(148,163,184,0.18) !important;
}
html[data-theme="dark"] #categoryTrendsModal .chart-modal-card,
html[data-theme="dark"] #categoryTrendsModal .trend-modal-card{
  border-color:rgba(148,163,184,0.24) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(96,165,250,0.10), transparent 34%),
    linear-gradient(145deg, rgba(15,23,42,0.985), rgba(5,8,16,0.985)) !important;
  box-shadow:0 30px 80px rgba(0,0,0,0.55) !important;
}
html[data-theme="dark"] #categoryTrendsModal .chart-modal-head,
html[data-theme="dark"] #categoryTrendsModal .trend-modal-head,
html[data-theme="dark"] #categoryTrendsModal .modal-head{
  border-bottom-color:rgba(148,163,184,0.18) !important;
}
html[data-theme="dark"] #categoryTrendsModal #categoryTrendsCloseBtn{
  background:rgba(15,23,42,0.88) !important;
  border-color:rgba(148,163,184,0.24) !important;
  color:#eaf1fb !important;
}
@media (max-width: 900px){
  .current-allocation-card .chart-wrap.compact-below,
  .current-allocation-card .chart-wrap{
    grid-template-columns:1fr !important;
    min-height:0 !important;
  }
  .current-allocation-card .distribution-chart-tile{ min-height:260px !important; height:260px !important; }
  .current-allocation-card #spendingLegend.distribution-legend-tile{ padding-top:0 !important; }
  .current-allocation-card .trends-card-inline .trend-insight-row,
  #categoryTrendsModal .trend-insight-row.expanded,
  #categoryTrendsModal .trend-insight-row{
    grid-template-columns:1fr !important;
  }
  .current-allocation-card .trends-card-inline .trend-insight-metrics,
  #categoryTrendsModal .trend-insight-metrics{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}
@media (max-width: 560px){
  .current-allocation-card .overview-card-headline,
  .current-allocation-card.overview-chart-card .focus-head,
  .current-allocation-card .distribution-stage,
  .current-allocation-card #categoryTrends.trends-card-inline,
  .current-allocation-card .trends-card-inline{ margin-left:0 !important; margin-right:0 !important; }
  .current-allocation-card .distribution-stage{ padding:16px 14px 0 !important; }
  .current-allocation-card #categoryTrends.trends-card-inline,
  .current-allocation-card .trends-card-inline{ margin:0 14px 16px !important; }
  .current-allocation-card #categoryTrends.trends-card-inline .trends-head-modern,
  #categoryTrends.trends-card-inline .trends-head-modern{ flex-direction:column !important; align-items:stretch !important; }
  .current-allocation-card #categoryTrends .trends-open-btn-modern,
  #categoryTrends .trends-open-btn-modern{ width:max-content !important; }
  .current-allocation-card .trends-card-inline .trend-insight-metrics,
  #categoryTrendsModal .trend-insight-metrics{ grid-template-columns:1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   ACHIEVEMENTS TAB — REDESIGN (v754)
   Hero momentum band + progress donut (new .ax-* classes) and an
   ID-scoped re-skin of the check-in card and targets grid so the
   overrides win over the view-scoped dark rules in smart-insights.css.
   ═══════════════════════════════════════════════════════════════════ */

.phase4-achievements-page{
  --ax-em:#10b981; --ax-em2:#059669; --ax-purple:#5e17eb; --ax-amber:#f59e0b;
  background-image:
    radial-gradient(1100px 540px at 8% -12%, rgba(16,185,129,.08), transparent 60%),
    radial-gradient(900px 480px at 110% -6%, rgba(94,23,235,.08), transparent 55%);
}

/* shared head bits (check-in + progress) */
.ax-head-txt{display:flex;align-items:center;gap:11px;}
.ax-icon-badge{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;font-size:1rem;
  background:linear-gradient(140deg,rgba(16,185,129,.18),rgba(16,185,129,.05));color:var(--ax-em2);border:1px solid rgba(16,185,129,.22);}
.ax-icon-badge.purple{background:linear-gradient(140deg,rgba(94,23,235,.18),rgba(94,23,235,.05));color:var(--ax-purple);border-color:rgba(94,23,235,.24);}

/* ── HERO MOMENTUM BAND ── */
.ax-hero{
  position:relative;overflow:hidden;border-radius:24px;padding:26px 28px;margin-bottom:2px;color:#fff;
  display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center;
  background:
    radial-gradient(700px 300px at 88% -40%, rgba(94,23,235,.55), transparent 60%),
    radial-gradient(560px 320px at 0% 120%, rgba(16,185,129,.42), transparent 60%),
    linear-gradient(135deg,#0c1830 0%,#0f3b33 52%,#15123a 100%);
  box-shadow:0 4px 8px rgba(15,23,42,.06), 0 30px 64px -18px rgba(15,23,42,.34);
}
.ax-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(160deg,rgba(255,255,255,.13),transparent 32%);}
.ax-hero > *{position:relative;z-index:1;}

.ax-ring{position:relative;width:128px;height:128px;display:grid;place-items:center;}
.ax-ring svg{position:absolute;inset:0;transform:rotate(-90deg);}
.ax-ring-track{fill:none;stroke:rgba(255,255,255,.14);stroke-width:11;}
.ax-ring-prog{fill:none;stroke:url(#axRingGrad);stroke-width:11;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(16,185,129,.6));}
.ax-ring-core{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1;}
.ax-ring-lv{font-size:.56rem;letter-spacing:.18em;font-weight:700;color:rgba(255,255,255,.6);}
.ax-ring-num{font-family:var(--font-display);font-weight:800;font-size:2.4rem;line-height:.9;margin:3px 0;}
.ax-ring-xp{font-size:.6rem;color:rgba(255,255,255,.62);}

.ax-streak{display:flex;flex-direction:column;gap:5px;min-width:0;}
.ax-streak-label{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62);font-weight:700;}
.ax-streak-row{display:flex;align-items:flex-end;gap:14px;}
.ax-streak-big{font-family:var(--font-display);font-weight:800;font-size:4.2rem;line-height:.82;letter-spacing:-.03em;
  background:linear-gradient(180deg,#fff,#cdeee0);-webkit-background-clip:text;background-clip:text;color:transparent;}
.ax-streak-unit{font-size:.92rem;color:rgba(255,255,255,.8);font-weight:600;margin-bottom:8px;}
.ax-flame{width:42px;height:54px;filter:drop-shadow(0 4px 14px rgba(245,158,11,.55));animation:axFlick 2.4s ease-in-out infinite;}
@keyframes axFlick{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-2px) scale(1.04);}}
.ax-streak-best{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:4px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:4px 11px;
  font-size:.68rem;font-weight:600;color:rgba(255,255,255,.92);}

.ax-cluster{display:flex;flex-direction:column;gap:12px;min-width:168px;}
.ax-mini{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:11px 13px;}
.ax-mini-label{font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:700;margin-bottom:6px;}
.ax-mini-val{font-family:var(--font-display);font-weight:700;font-size:1.1rem;}
.ax-mini-sub{font-size:.7rem;color:rgba(255,255,255,.55);font-weight:600;}
.ax-dots{display:flex;gap:5px;margin-top:8px;}
.ax-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.16);}
.ax-dot.on{background:linear-gradient(180deg,#34d399,#10b981);box-shadow:0 0 8px rgba(16,185,129,.7);}

.ax-xpbar-wrap{grid-column:1 / -1;margin-top:4px;}
.ax-xpbar-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px;flex-wrap:wrap;}
.ax-xpbar-top .l{font-size:.72rem;font-weight:600;color:rgba(255,255,255,.85);}
.ax-reward{font-size:.68rem;font-weight:700;color:#fde68a;}
.ax-xpbar{height:12px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;position:relative;}
.ax-xpbar span{position:absolute;inset:0 auto 0 0;border-radius:999px;
  background:linear-gradient(90deg,#10b981,#34d399 60%,#a7f3d0);box-shadow:0 0 14px rgba(16,185,129,.7);}

@media (max-width:860px){
  .ax-hero{grid-template-columns:1fr;text-align:center;justify-items:center;gap:20px;}
  .ax-streak-row{justify-content:center;}
  .ax-cluster{flex-direction:row;width:100%;justify-content:center;flex-wrap:wrap;}
}

/* ── PROGRESS DONUT CARD ── */
.ax-progress-card .ax-progress-body{display:flex;align-items:center;gap:18px;padding:6px 20px 4px;}
.ax-pring{position:relative;width:96px;height:96px;flex-shrink:0;}
.ax-pring svg{transform:rotate(-90deg);}
.ax-pring-track{fill:none;stroke:var(--line);stroke-width:9;}
.ax-pring-fill{fill:none;stroke:url(#axDonutGrad);stroke-width:9;stroke-linecap:round;}
.ax-pring-core{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;line-height:1;}
.ax-pring-core b{font-family:var(--font-display);font-size:1.3rem;font-weight:800;color:var(--accent-text);line-height:1;}
.ax-pring-core span{font-size:.54rem;color:var(--muted);font-weight:700;letter-spacing:.08em;line-height:1;}
.ax-pring-stats{display:grid;gap:9px;flex:1;}
.ax-rstat{display:flex;align-items:center;justify-content:space-between;font-size:.76rem;}
.ax-rstat .rl{color:var(--muted);font-weight:600;}
.ax-rstat .rv{font-family:var(--font-display);font-weight:700;color:var(--accent-text);}
.ax-recent{padding:14px 20px 18px;display:grid;gap:8px;}
.ax-recent-title{font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;}
.ax-rbadge{display:flex;align-items:center;gap:11px;padding:9px 11px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);}
.ax-ri{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:1rem;flex-shrink:0;
  background:linear-gradient(140deg,rgba(245,158,11,.2),rgba(245,158,11,.05));border:1px solid rgba(245,158,11,.26);}
.ax-rt{font-size:.74rem;font-weight:700;flex:1;min-width:0;color:var(--accent-text);}
.ax-rt small{display:block;font-weight:500;color:var(--muted);font-size:.64rem;margin-top:1px;}
.ax-rxp{font-size:.64rem;font-weight:800;color:var(--ax-em2);background:rgba(16,185,129,.12);border-radius:999px;padding:3px 8px;flex-shrink:0;}

/* ── CHECK-IN polish (id-scoped to win over dark rules) ── */
.phase4-achievements-page #achCheckinPanel .checkin-confirm-btn{
  background:linear-gradient(135deg,var(--ax-em),var(--ax-em2));color:#fff;border:none;font-weight:700;
  border-radius:12px;padding:11px 20px;box-shadow:0 14px 30px -12px rgba(16,185,129,.55);
}
.phase4-achievements-page #achCheckinPanel .checkin-confirm-btn:disabled{opacity:.45;box-shadow:none;}
.phase4-achievements-page #achCheckinPanel .checkin-confirm-item{border-radius:13px;}
.phase4-achievements-page #achCheckinPanel .checkin-confirm-item:hover{border-color:rgba(16,185,129,.4);}

/* ── TARGETS re-skin (id-scoped) ── */
#achBadgeSection .achievements-section-head h4{font-family:var(--font-display);font-weight:800;font-size:1.18rem;letter-spacing:-.01em;}
#achBadgeSection .badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;}
#achBadgeSection .badge-tile{
  position:relative;overflow:hidden;border-radius:18px;padding:18px 16px 16px;
  transition:transform .2s, box-shadow .2s;
}
#achBadgeSection .badge-tile.badge-active-now::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--ax-em),var(--ax-em2));
}
#achBadgeSection .badge-tile.badge-active-now:hover{transform:translateY(-4px);box-shadow:0 4px 10px rgba(15,23,42,.06),0 26px 54px -18px rgba(15,23,42,.26);}
#achBadgeSection .badge-icon-wrap{
  width:56px;height:56px;border-radius:17px;display:grid;place-items:center;font-size:1.6rem;margin-bottom:12px;
  background:radial-gradient(circle at 30% 25%,rgba(16,185,129,.2),rgba(16,185,129,.06));border:1px solid rgba(16,185,129,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
#achBadgeSection .badge-name{font-family:var(--font-display);font-weight:700;font-size:1rem;}
#achBadgeSection .badge-prog-fill{background:linear-gradient(90deg,var(--ax-em),var(--ax-em2));}
#achBadgeSection .badge-status-chip{
  background:rgba(16,185,129,.12);color:var(--ax-em2);border:1px solid rgba(16,185,129,.26);
  border-radius:999px;padding:3px 9px;font-size:.58rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
}
#achBadgeSection .badge-empty-slot{border:1.5px dashed var(--line);background:transparent;box-shadow:none;}
#achBadgeSection .badge-empty-slot::before{display:none;}
#achBadgeSection .badge-empty-slot .badge-icon-wrap{background:var(--panel-2);border-color:var(--line);color:var(--muted);box-shadow:none;}
#achBadgeSection .feature-action-btn.is-primary{
  background:linear-gradient(135deg,var(--ax-purple),#7c3aed);color:#fff;border:none;
  box-shadow:0 12px 28px -12px rgba(94,23,235,.55);
}

/* ═══════════════════════════════════════════════════════════════════
   OVERVIEW REDESIGN (v755) — hero band + KPI re-skin
   Hero renders into #finStateBanner (new .ov-* classes). The five KPI
   cards + drag-reorder stay; they get a light id-scoped re-skin.
   The two budget cards are intentionally untouched.
   ═══════════════════════════════════════════════════════════════════ */

.view-page[data-view="overview"]{
  background-image:
    radial-gradient(1100px 540px at 8% -12%, rgba(16,185,129,.08), transparent 60%),
    radial-gradient(900px 480px at 110% -6%, rgba(94,23,235,.08), transparent 55%);
}
#finStateBanner:empty{display:none;}

.ov-hero{
  position:relative;overflow:hidden;border-radius:24px;padding:24px 26px;margin-bottom:16px;color:#fff;
  display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;
  background:
    radial-gradient(700px 300px at 88% -40%, rgba(94,23,235,.5), transparent 60%),
    radial-gradient(560px 320px at 0% 120%, rgba(16,185,129,.4), transparent 60%),
    linear-gradient(135deg,#0c1830 0%,#0f3b33 52%,#15123a 100%);
  box-shadow:0 4px 8px rgba(15,23,42,.06), 0 30px 64px -18px rgba(15,23,42,.34);
}
.ov-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(160deg,rgba(255,255,255,.13),transparent 32%);}
.ov-hero > *{position:relative;z-index:1;}

.ov-ring{position:relative;width:122px;height:122px;display:grid;place-items:center;}
.ov-ring svg{position:absolute;inset:0;width:122px;height:122px;transform:rotate(-90deg);}
.ov-ring-track{fill:none;stroke:rgba(255,255,255,.14);stroke-width:11;}
.ov-ring-prog{fill:none;stroke:url(#ovRingGrad);stroke-width:11;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(16,185,129,.55));}
.ov-hero.ov-warning .ov-ring-prog{stroke:#fbbf24;filter:drop-shadow(0 0 8px rgba(245,158,11,.5));}
.ov-hero.ov-over .ov-ring-prog{stroke:#fb7185;filter:drop-shadow(0 0 8px rgba(244,63,94,.5));}
.ov-ring-core{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;}
.ov-ring-core b{font-family:var(--font-display);font-weight:800;font-size:1.9rem;}
.ov-ring-core span{font-size:.52rem;letter-spacing:.12em;font-weight:700;color:rgba(255,255,255,.6);margin-top:5px;}

.ov-headline{display:flex;flex-direction:column;gap:4px;min-width:0;}
.ov-label{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62);font-weight:700;}
.ov-big{font-family:var(--font-display);font-weight:800;font-size:3.4rem;line-height:.86;letter-spacing:-.03em;background:linear-gradient(180deg,#fff,#cdeee0);-webkit-background-clip:text;background-clip:text;color:transparent;}
.ov-ctx{font-size:.78rem;color:rgba(255,255,255,.7);}
.ov-pill{align-self:flex-start;margin-top:5px;border-radius:999px;padding:4px 12px;font-size:.68rem;font-weight:700;background:rgba(16,185,129,.22);border:1px solid rgba(16,185,129,.4);color:#a7f3d0;}
.ov-hero.ov-warning .ov-pill{background:rgba(245,158,11,.2);border-color:rgba(245,158,11,.4);color:#fcd34d;}
.ov-hero.ov-over .ov-pill{background:rgba(244,63,94,.2);border-color:rgba(244,63,94,.4);color:#fca5a5;}

.ov-cluster{display:flex;flex-direction:column;gap:11px;min-width:170px;}
.ov-mini{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:11px 13px;}
.ov-mini-l{font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:700;margin-bottom:6px;}
.ov-mrow{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;font-weight:600;margin:3px 0;color:rgba(255,255,255,.88);}
.ov-mrow .v{font-family:var(--font-display);font-weight:700;}
.ov-mrow .v.up{color:#86efac;}
.ov-mrow .v.down{color:#fca5a5;}

.ov-pace{grid-column:1 / -1;margin-top:2px;}
.ov-pace-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.72rem;color:rgba(255,255,255,.82);font-weight:600;margin-bottom:8px;}
.ov-pace-bar{height:11px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;}
.ov-pace-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#10b981,#34d399 70%,#a7f3d0);box-shadow:0 0 12px rgba(16,185,129,.6);}
.ov-hero.ov-warning .ov-pace-bar span{background:linear-gradient(90deg,#f59e0b,#fbbf24);}
.ov-hero.ov-over .ov-pace-bar span{background:linear-gradient(90deg,#e11d48,#fb7185);}

@media (max-width:880px){
  .ov-hero{grid-template-columns:1fr;text-align:center;justify-items:center;gap:18px;}
  .ov-headline{align-items:center;}
  .ov-cluster{flex-direction:row;width:100%;justify-content:center;flex-wrap:wrap;}
}

/* KPI cards re-skin (id-scoped; logic + drag-reorder untouched) */
/* Strong blue gradient fill to match the hero band — no top line, light text. */
#summaryCards .kpi-card, #summaryCards .hero-kpi{
  position:relative;overflow:hidden;border-radius:16px;padding-right:50px;color:#fff;
  border:1px solid rgba(56,189,248,.2);
  background:radial-gradient(440px 220px at 88% -35%, rgba(56,189,248,.26), transparent 60%), linear-gradient(140deg,#102a55 0%,#173a72 55%,#0d1f43 100%);
  box-shadow:0 2px 6px rgba(15,23,42,.12), 0 18px 40px -16px rgba(37,99,235,.45);
  transition:transform .18s, box-shadow .18s;
}
#summaryCards .hero-kpi{
  background:radial-gradient(520px 260px at 88% -35%, rgba(56,189,248,.32), transparent 60%), linear-gradient(140deg,#123160 0%,#1b4488 55%,#0e2348 100%);
}
#summaryCards .hero-kpi::before{display:none;}
#summaryCards .kpi-card::after, #summaryCards .hero-kpi::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(160deg,rgba(255,255,255,.1),transparent 34%);}
#summaryCards .kpi-card:hover, #summaryCards .hero-kpi:hover{transform:translateY(-3px);box-shadow:0 4px 10px rgba(15,23,42,.14),0 26px 54px -16px rgba(37,99,235,.55);}
/* legible text on the blue fill */
#summaryCards .kpi-label, #summaryCards .kpi-card-label, #summaryCards .hero-kpi-eyebrow{color:rgba(255,255,255,.62);}
#summaryCards .kpi-foot, #summaryCards .kpi-card-foot, #summaryCards .hero-kpi-foot{color:rgba(255,255,255,.6);}
#summaryCards .kpi-value, #summaryCards .hero-kpi-value{font-family:var(--font-display);font-weight:800;letter-spacing:-.01em;color:#fff;}
#summaryCards .income-positive, #summaryCards .value-positive{color:#86efac!important;}
#summaryCards .value-negative, #summaryCards .expense-negative{color:#fca5a5!important;}
#summaryCards .kpi-value.kpi-category{color:#fff!important;}
/* icon badge: glassy on blue */
#summaryCards .kpi-icon{
  position:absolute;top:13px;right:13px;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-size:.92rem;z-index:1;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
}
#summaryCards .hero-kpi .kpi-icon{width:34px;height:34px;font-size:1.05rem;}

/* Smart Insight tiles re-skin (id-scoped; accent reflects tone via :has) */
#overviewInlineInsights .inline-analytics-section-title{font-family:var(--font-display);font-weight:800;font-size:1.05rem;letter-spacing:-.01em;}
#overviewInlineInsights .inline-analytics{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
#overviewInlineInsights .inline-insight-card{
  position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:15px 16px 15px 18px;box-shadow:0 2px 4px rgba(15,23,42,.04),0 12px 28px -8px rgba(15,23,42,.12);
  transition:transform .18s, box-shadow .18s;
}
#overviewInlineInsights .inline-insight-card:hover{transform:translateY(-3px);box-shadow:0 4px 10px rgba(15,23,42,.06),0 22px 46px -18px rgba(15,23,42,.24);}
#overviewInlineInsights .insight-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
#overviewInlineInsights .insight-card-label{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;}
#overviewInlineInsights .insight-card-status{border-radius:999px;padding:3px 9px;font-size:.6rem;font-weight:800;letter-spacing:.02em;}
#overviewInlineInsights .insight-card-status.ok{background:rgba(16,185,129,.12);color:#059669;border:1px solid rgba(16,185,129,.24);}
#overviewInlineInsights .insight-card-status.warn{background:rgba(245,158,11,.14);color:#b45309;border:1px solid rgba(245,158,11,.28);}
#overviewInlineInsights .insight-card-status.bad{background:rgba(244,63,94,.14);color:#be123c;border:1px solid rgba(244,63,94,.28);}
#overviewInlineInsights .insight-card-value{font-family:var(--font-display);font-weight:800;font-size:1.55rem;letter-spacing:-.01em;color:var(--accent-text);}
#overviewInlineInsights .insight-card-value-sub{font-family:var(--font-ui);font-size:.7rem;color:var(--muted);font-weight:600;}
#overviewInlineInsights .insight-card-detail{font-size:.74rem;color:var(--muted);line-height:1.45;margin-top:6px;}
#overviewInlineInsights .burn-pace-row{display:flex;justify-content:space-between;font-size:.68rem;color:var(--muted);font-weight:600;}
#overviewInlineInsights .burn-pace-track{height:7px;border-radius:999px;background:var(--line);overflow:hidden;margin:3px 0 8px;}
#overviewInlineInsights .burn-pace-fill{display:block;height:100%;border-radius:999px;}
#overviewInlineInsights .burn-pace-fill.spent{width:var(--spent-width);background:linear-gradient(90deg,#10b981,#059669);}
#overviewInlineInsights .burn-pace-fill.time{width:var(--time-width);background:#94a3b8;}
@media (max-width:760px){ #overviewInlineInsights .inline-analytics{grid-template-columns:1fr;} }

/* ══════════════════════════════════════════════════════════════════════
   v756 · OVERVIEW ALLOCATION CARDS — SATURATED SHELL RE-SKIN
   Pure UI. Re-skins only the two outer shells (Current Budget Allocation +
   Budget Allocation) so they join the saturated hero/KPI tile family.
   Bodies stay light (light mode) / navy (dark mode) so all inner sub-tiles,
   dark text and semantic accents keep full contrast. No content/logic touched.
   Signature borrowed from the tiles: gradient base + radial corner glow +
   tinted border + colored glow shadow (no top bar, matching the KPI tiles).
   Scoped to .grid-overview children; .ui-3d-panel added for specificity.
   ────────────────────────────────────────────────────────────────────── */

/* — LIGHT MODE — cool/blue glass (left) — */
.grid-overview > .current-allocation-card.ui-3d-panel{
  background:
    radial-gradient(560px 300px at 96% -22%, rgba(56,189,248,0.30), rgba(56,189,248,0) 60%),
    radial-gradient(480px 330px at -6% 116%, rgba(94,23,235,0.12), rgba(94,23,235,0) 62%),
    linear-gradient(150deg, #eef3ff 0%, #e4edff 46%, #dbe6ff 100%) !important;
  border:1px solid rgba(56,189,248,0.40) !important;
  box-shadow:
    0 20px 46px -18px rgba(37,99,235,0.32),
    0 6px 16px rgba(30,64,120,0.10) !important;
}

/* — LIGHT MODE — warm/amber glass (right) — */
.grid-overview > .alloc-list-card.ui-3d-panel{
  background:
    radial-gradient(560px 300px at 96% -22%, rgba(245,158,11,0.28), rgba(245,158,11,0) 60%),
    radial-gradient(480px 330px at -6% 116%, rgba(234,88,12,0.10), rgba(234,88,12,0) 62%),
    linear-gradient(150deg, #fff5ea 0%, #ffeedd 46%, #ffe6d0 100%) !important;
  border:1px solid rgba(245,158,11,0.42) !important;
  box-shadow:
    0 20px 46px -18px rgba(234,88,12,0.28),
    0 6px 16px rgba(120,72,20,0.10) !important;
}

/* — DARK MODE — shared navy base, differentiated glow (matches tile system) — */
html[data-theme="dark"] .grid-overview > .current-allocation-card.ui-3d-panel{
  background:
    radial-gradient(560px 300px at 96% -22%, rgba(56,189,248,0.22), rgba(56,189,248,0) 60%),
    radial-gradient(480px 330px at -6% 116%, rgba(94,23,235,0.20), rgba(94,23,235,0) 62%),
    linear-gradient(150deg, #101b32 0%, #122139 52%, #0c1428 100%) !important;
  border:1px solid rgba(56,189,248,0.26) !important;
  box-shadow:
    0 20px 46px -18px rgba(0,0,0,0.60),
    0 0 30px -10px rgba(56,189,248,0.18) !important;
}

html[data-theme="dark"] .grid-overview > .alloc-list-card.ui-3d-panel{
  background:
    radial-gradient(560px 300px at 96% -22%, rgba(245,158,11,0.20), rgba(245,158,11,0) 60%),
    radial-gradient(480px 330px at -6% 116%, rgba(234,88,12,0.14), rgba(234,88,12,0) 62%),
    linear-gradient(150deg, #14182a 0%, #161a2c 52%, #0f1322 100%) !important;
  border:1px solid rgba(245,158,11,0.24) !important;
  box-shadow:
    0 20px 46px -18px rgba(0,0,0,0.60),
    0 0 30px -10px rgba(245,158,11,0.16) !important;
}
/* ── end v756 saturated shell re-skin ── */

/* ══════════════════════════════════════════════════════════════════════
   v757 · OVERVIEW ALLOCATION CARDS — INNER SURFACE HARMONISATION
   Follow-up to v756. The new saturated shells made the inner panels read as
   detached white islands. Here the neutral surfaces become frosted, hue-
   matched glass so each card's tint flows through them and they sit ON the
   card instead of floating above it. Semantic colour is preserved: green
   available-funds tile, usage rings, red/amber figures, lock/recurring
   notices, indigo "show all" button, category accent bars — all untouched.
   Pure UI. No content, values or logic changed. Scoped to the two cards.
   ────────────────────────────────────────────────────────────────────── */

/* ---------- RIGHT (Budget Allocation) — warm frosted glass ----------
   Retint the whole av2 tile system in one move via its own variables. */
.grid-overview > .alloc-list-card .alloc-v2{
  --av2-card-bg: rgba(255,250,243,0.55);
  --av2-card-border: rgba(245,158,11,0.22);
  --av2-card-shadow: 0 1px 2px rgba(120,72,20,0.04), 0 8px 18px rgba(234,88,12,0.06);
  --av2-divider: rgba(180,120,40,0.14);
}
/* Details buttons set #fff directly — frost them to match. */
.grid-overview > .alloc-list-card .alloc-v2 .alloc-v2-details-btn{
  background: rgba(255,250,243,0.62);
  border-color: rgba(245,158,11,0.24);
}
.grid-overview > .alloc-list-card .alloc-v2 .alloc-v2-details-btn:hover{
  background: rgba(255,247,236,0.85);
  border-color: rgba(245,158,11,0.40);
}

/* ---------- LEFT (Current Budget Allocation) — cool frosted glass ---------- */
/* Donut tile */
.grid-overview > .current-allocation-card .distribution-chart-tile{
  background: linear-gradient(145deg, rgba(255,255,255,0.58), rgba(231,240,255,0.30)) !important;
  border:1px solid rgba(56,189,248,0.18) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.45), 0 6px 16px rgba(30,64,120,0.05) !important;
}
/* Allocation breakdown rows */
.grid-overview > .current-allocation-card .distribution-legend-tile .chart-legend-item{
  background: rgba(255,255,255,0.50);
  border-color: rgba(56,189,248,0.16);
  box-shadow: 0 1px 0 rgba(255,255,255,0.40), 0 4px 10px rgba(30,64,120,0.03);
}
.grid-overview > .current-allocation-card .distribution-legend-tile .chart-legend-item:hover,
.grid-overview > .current-allocation-card .distribution-legend-tile .chart-legend-item.is-active{
  background: rgba(255,255,255,0.78);
  border-color: rgba(56,189,248,0.34);
  box-shadow: 0 1px 0 rgba(255,255,255,0.7), 0 8px 18px rgba(30,64,120,0.07);
}
/* Category Trends rows */
.grid-overview > .current-allocation-card .trends-card-inline .trend-insight-row{
  background: rgba(255,255,255,0.50) !important;
  border-color: rgba(56,189,248,0.16) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.40), 0 6px 16px rgba(30,64,120,0.04) !important;
}
/* ACTUAL / TARGET / PROJECTED metric boxes inside trend rows */
.grid-overview > .current-allocation-card .trend-metric{
  background: rgba(255,255,255,0.56);
  border-color: rgba(56,189,248,0.16);
}

/* ---------- DARK MODE — translucent so each card's glow shows through ---------- */
html[data-theme="dark"] .grid-overview > .alloc-list-card .alloc-v2{
  --av2-card-bg: rgba(34,28,20,0.50);
  --av2-card-border: rgba(245,158,11,0.20);
  --av2-card-shadow: 0 1px 2px rgba(0,0,0,0.30), 0 8px 18px rgba(0,0,0,0.26);
  --av2-divider: rgba(245,158,11,0.14);
}
html[data-theme="dark"] .grid-overview > .alloc-list-card .alloc-v2 .alloc-v2-details-btn{
  background: rgba(40,33,22,0.55);
  border-color: rgba(245,158,11,0.22);
}
html[data-theme="dark"] .grid-overview > .current-allocation-card .distribution-chart-tile{
  background: linear-gradient(145deg, rgba(26,38,62,0.55), rgba(16,27,50,0.40)) !important;
  border:1px solid rgba(56,189,248,0.20) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .grid-overview > .current-allocation-card .distribution-legend-tile .chart-legend-item{
  background: rgba(22,34,58,0.50) !important;
  border-color: rgba(56,189,248,0.18) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .grid-overview > .current-allocation-card .trends-card-inline .trend-insight-row{
  background: rgba(22,34,58,0.50) !important;
  border-color: rgba(56,189,248,0.16) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .grid-overview > .current-allocation-card .trend-metric{
  background: rgba(22,34,58,0.55) !important;
  border-color: rgba(56,189,248,0.16) !important;
}
/* ── end v757 inner surface harmonisation ── */