@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800;900&display=swap');

/* ════════════════════════════════════════════════════
   TOKENS — light theme, matches Bentura Solutions brand
   ════════════════════════════════════════════════════ */
:root {
  /* Surfaces — warm cream palette */
  --bg:  #FAF8F2;
  --s1:  #FFFFFF;  /* cards */
  --s2:  #F4F1E8;  /* inputs, nested */
  --s3:  #EDE9DE;  /* hover, depth */
  --s4:  #E8E2D4;  /* matches logo pale square */
  --s5:  #D9D2C0;  /* deepest neutral */

  /* Brand */
  --accent:     #F0C944;
  --accent-dim: rgba(240,201,68,.15);
  --accent-dk:  #D4B020;

  /* Semantic */
  --green:  #3a9d6e;
  --red:    #d04848;
  --blue:   #4a7fc8;
  --amber:  #d99020;

  /* Text — warm charcoal hierarchy on cream */
  --t1: #1F1B14;   /* primary    (18:1 on --bg, AAA) */
  --t2: #5A5345;   /* secondary  (7:1  on --bg, AAA) */
  --t3: #8B826E;   /* muted      (4.5:1 on --bg, AA) */

  /* Borders — dark-tinted for light theme */
  --b1: rgba(0,0,0,.06);  /* subtle structural */
  --b2: rgba(0,0,0,.12);  /* visible */
  --b3: rgba(0,0,0,.22);  /* strong */

  /* Input border */
  --input-bg:     #FFFFFF;
  --input-border: rgba(0,0,0,.18);
  --input-focus:  var(--accent);

  /* Shape — crisp, not bubbly */
  --r:    10px;
  --r-sm:  8px;
  --r-xs:  5px;
  --r-pill: 999px;

  /* Space */
  --s-1:4px; --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:20px;--s-6:24px; --s-7:28px; --s-8:32px;

  /* Shadow — subtle on light backgrounds */
  --sh1: 0 1px 2px  rgba(31,27,20,.08);
  --sh2: 0 4px 12px rgba(31,27,20,.10);
  --sh3: 0 10px 30px rgba(31,27,20,.12);

  /* Type scale */
  --fs-xs:   0.75rem;   /* 12px — micro labels, helper text */
  --fs-sm:   0.875rem;  /* 14px — secondary text */
  --fs-base: 1rem;      /* 16px — body */
  --fs-md:   1.125rem;  /* 18px — section labels */
  --fs-lg:   1.375rem;  /* 22px — card titles, KPI values */
  --fs-xl:   1.75rem;   /* 28px — page titles */

  /* Transition */
  --ease: .14s ease;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
button { cursor:pointer; font-family:inherit; }

/* ════════════════════════════════════════════════════
   APP SHELL
   ════════════════════════════════════════════════════ */
#nbm-app {
  font-family:'Heebo',sans-serif;
  background:var(--bg);
  min-height:100vh;
  color:var(--t1);
  direction:rtl;
  font-size:var(--fs-base);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* ════════════════════════════════════════════════════
   NAV
   ════════════════════════════════════════════════════ */
.nbm-nav {
  background:var(--s1);
  border-bottom:1px solid var(--b3);
  position:sticky; top:0; z-index:200;
}
.nbm-nav-inner {
  max-width:1200px; margin:0 auto;
  padding:0 28px; height:52px;
  display:flex; align-items:center; gap:16px;
}

.nbm-install-btn {
  display:none; /* shown by app.js only when installable, on touch devices */
  align-items:center; gap:6px;
  flex-shrink:0; margin-left:20px;
  background:var(--accent); color:#1a1200;
  border:1px solid var(--accent-dk);
  border-radius:var(--r-xs);
  font-family:'Heebo',sans-serif;
  font-size:.78rem; font-weight:800;
  padding:6px 14px; cursor:pointer; white-space:nowrap;
  box-shadow:var(--sh1);
  transition:background var(--ease), transform .1s;
}
.nbm-install-btn:hover  { background:var(--accent-dk); transform:translateY(-1px); }
.nbm-install-btn:active { transform:none; }
.nbm-install-ico { font-size:.95rem; line-height:1; }

/* Tabs — pill group */
.nbm-tabs {
  display:flex; gap:1px; flex:0 0 auto;
  background:var(--s2);
  border:1px solid var(--b2);
  border-radius:var(--r-xs);
  padding:3px;
}
.nbm-tab {
  font-size:.78rem; font-weight:600;
  color:var(--t3); background:none; border:none;
  padding:5px 14px; border-radius:4px;
  transition:all var(--ease); white-space:nowrap; letter-spacing:.01em;
}
.nbm-tab:hover { color:var(--t2); background:var(--s3); }
.nbm-tab.active {
  background:var(--accent); color:#1a1200; font-weight:800;
}

/* Month selector */
.nbm-month-ctrl {
  margin-right:auto; /* RTL: pushes to left side */
  display:flex; align-items:center; gap:6px;
  background:var(--s2); border:1px solid var(--b2);
  border-radius:var(--r-xs); padding:4px 10px;
  flex-shrink:0;
  position:relative; /* anchor for the month picker popover */
}
.nbm-month-arrow {
  background:none; border:none; color:var(--t3);
  font-size:1.1rem; line-height:1; padding:1px 3px;
  transition:color var(--ease); border-radius:3px;
  display:flex; align-items:center; cursor:pointer;
}
.nbm-month-arrow:hover { color:var(--accent); }
.nbm-month-title {
  font-size:.82rem; font-weight:700; color:var(--t1);
  min-width:108px; text-align:center;
  background:none; border:none; cursor:pointer;
  font-family:inherit; padding:2px 4px; border-radius:3px;
  transition:color var(--ease);
}
.nbm-month-title:hover { color:var(--accent); }

/* Month / year picker popover */
.nbm-month-picker {
  position:absolute; top:calc(100% + 6px); left:50%;
  transform:translateX(-50%);
  z-index:50;
  background:var(--s1); border:1px solid var(--b3);
  border-radius:var(--r-sm); padding:10px;
  box-shadow:0 12px 32px rgba(0,0,0,.55);
  width:236px;
}
.nbm-month-picker.hidden { display:none; }
.nbm-mp-yearbar {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px;
}
.nbm-mp-yarrow {
  background:none; border:none; color:var(--t2);
  font-size:1.1rem; line-height:1; cursor:pointer;
  padding:2px 8px; border-radius:3px; transition:color var(--ease);
}
.nbm-mp-yarrow:hover { color:var(--accent); }
.nbm-mp-year {
  font-size:.9rem; font-weight:800; color:var(--t1);
}
.nbm-mp-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:5px;
}
.nbm-mp-month {
  background:var(--s2); border:1px solid var(--b1);
  color:var(--t2); font-family:inherit;
  font-size:.72rem; font-weight:600;
  padding:7px 4px; border-radius:var(--r-xs);
  cursor:pointer; transition:all var(--ease);
}
.nbm-mp-month:hover {
  border-color:var(--accent); color:var(--t1);
}
.nbm-mp-month.today {
  border-color:var(--b3); color:var(--t1);
}
.nbm-mp-month.selected {
  background:var(--accent); border-color:var(--accent);
  color:#1a1505; font-weight:800;
}

/* Save status pill */
.nbm-save-status {
  font-size:.7rem; font-weight:700;
  padding:3px 10px; border-radius:var(--r-pill);
  white-space:nowrap; transition:all .25s ease;
  min-width:52px; text-align:center; flex-shrink:0;
}
.nbm-save-status:empty { display:none; }
.nbm-save-status.saving { color:var(--amber); background:rgba(245,166,35,.12); border:1px solid rgba(245,166,35,.25); }
.nbm-save-status.saved  { color:var(--green); background:rgba(62,201,138,.1);  border:1px solid rgba(62,201,138,.22); }
.nbm-save-status.error  { color:var(--red);   background:rgba(240,108,108,.1); border:1px solid rgba(240,108,108,.25); }

/* ════════════════════════════════════════════════════
   BODY & PANELS
   ════════════════════════════════════════════════════ */
.nbm-body { max-width:1200px; margin:0 auto; padding:20px 28px 80px; }
.nbm-panel { display:none; }
.nbm-panel.active { display:block; animation:fade-in .16s ease; }
@keyframes fade-in { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

/* ════════════════════════════════════════════════════
   KPI STRIP
   Three equal cards, balance is wider and featured
   ════════════════════════════════════════════════════ */
.nbm-kpi-strip {
  display:grid;
  grid-template-columns:1fr 1fr 1.3fr;
  gap:10px;
  margin-bottom:18px;
}
.nbm-kpi-card {
  background:var(--s1);
  border:1px solid var(--b2);
  border-radius:var(--r);
  padding:18px 20px;
}
.nbm-kpi-label {
  font-size:var(--fs-xs); font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--t2); margin-bottom:8px;
}
.nbm-kpi-main { display:flex; flex-direction:column; gap:2px; }
.nbm-kpi-planned {
  font-size:var(--fs-sm); font-weight:500; color:var(--t2);
  margin-bottom:2px;
}
.nbm-kpi-actual {
  font-size:1.8rem; font-weight:900; letter-spacing:-.04em;
  line-height:1; color:var(--t1);
}
.nbm-kpi-actual.c-pos { color:#B8860B; }
.nbm-kpi-actual.c-neg { color:#CE4F2C; }
.nbm-kpi-delta {
  margin-top:6px; font-size:var(--fs-sm); font-weight:600;
  color:var(--t2); min-height:14px;
}
.nbm-kpi-delta.pos { color:#B8860B; }
.nbm-kpi-delta.neg { color:#CE4F2C; }
.nbm-kpi-delta.zero{ color:var(--t3); }

/* Balance — featured with accent left-border (RTL = right) */
.nbm-kpi-balance {
  background:linear-gradient(160deg, var(--s1) 0%, var(--s4) 100%);
  border-left:3px solid var(--accent);
  padding-right:18px; /* compensate */
}
.nbm-kpi-balance-row { display:flex; gap:20px; margin-top:10px; }
.nbm-kpi-balance-block { flex:1; }
.nbm-kpi-sub { font-size:var(--fs-xs); color:var(--t2); font-weight:600; margin-bottom:3px; text-transform:uppercase; letter-spacing:.06em; }
.nbm-kpi-balance-num {
  font-size:2.1rem; font-weight:900; letter-spacing:-.045em; line-height:1;
  color:var(--t1);
}
.nbm-kpi-balance-num.pos { color:#B8860B; }
.nbm-kpi-balance-num.neg { color:#CE4F2C; }
.nbm-kpi-balance-sep { width:1px; background:var(--b2); flex-shrink:0; align-self:stretch; }
/* Aliases for JS compatibility */
.nbm-kpi-arrow { display:none; }  /* hide the → arrow entirely */

/* ════════════════════════════════════════════════════
   CARD
   ════════════════════════════════════════════════════ */
.nbm-card {
  background:var(--s1);
  border:1px solid var(--b1);
  border-radius:var(--r);
  padding:20px;
  margin-bottom:16px;
}
.nbm-card-head {
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:12px; margin-bottom:16px;
  border-bottom:1px solid var(--b2);
}
.nbm-card-title {
  font-size:var(--fs-md); font-weight:800; color:var(--t1);
}

/* Column legend — right side of card header */
.nbm-col-legend { display:flex; align-items:center; gap:16px; }
.nbm-legend-item {
  font-size:var(--fs-xs); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; display:flex; align-items:center; gap:4px;
  color:var(--t2);
}
.nbm-legend-item::before {
  content:''; width:7px; height:7px; border-radius:2px; display:inline-block;
}
.nbm-legend-planned::before { background:var(--blue); }
.nbm-legend-planned { color:var(--blue); }
.nbm-legend-actual::before  { background:var(--green); }
.nbm-legend-actual  { color:var(--green); }
.nbm-legend-bar::before     { background:var(--b2); }
.nbm-legend-bar     { color:var(--t3); }

/* ════════════════════════════════════════════════════
   SECTION HEADERS — clear visual anchor
   ════════════════════════════════════════════════════ */
/* Each category is its own contained block, so it's clear where one
   category ends and the next begins. */
.nbm-section {
  margin-bottom:16px;
  max-width:820px;
  background:var(--s1);
  border:1px solid var(--b2);
  border-radius:var(--r-sm);
  padding:10px 14px 8px;
}
.nbm-section:last-child { margin-bottom:0; }
/* colored left edge keys the block to its category colour */
.nbm-section.sec-income   { border-inline-start:3px solid var(--green); }
.nbm-section.sec-fixed    { border-inline-start:3px solid var(--blue); }
.nbm-section.sec-variable { border-inline-start:3px solid var(--amber); }
.nbm-section.sec-surprise { border-inline-start:3px solid var(--red); }

.nbm-section-hdr {
  display:flex; align-items:center; gap:10px;
  padding:4px 2px 12px;
  border-bottom:1px solid var(--b2);
  margin-bottom:6px;
}
.nbm-section-dot {
  width:10px; height:10px; border-radius:50%; flex-shrink:0;
  box-shadow:0 0 0 2px var(--bg);  /* tiny halo so it doesn't blend with card */
}
.dot-income   { background:var(--green); }
.dot-fixed    { background:var(--blue); }
.dot-variable { background:var(--amber); }
.dot-surprise { background:var(--red); }
.nbm-section-label {
  font-size:var(--fs-md); font-weight:800;
  letter-spacing:.01em; color:var(--t1);
}
.nbm-section-total {
  margin-right:auto; /* RTL: push to left */
  font-size:var(--fs-sm); color:var(--t2); font-weight:600;
}

/* ── Budget category collapse ── */
.nbm-section-hdr { cursor:pointer; }
.nbm-section-chev { color:var(--accent-dk); font-size:var(--fs-md); line-height:1; flex:none; transition:transform .18s ease; }
.nbm-section:not(.collapsed) .nbm-section-chev { transform:rotate(180deg); }
.nbm-section.collapsed > .nbm-row,
.nbm-section.collapsed > .nbm-add-row { display:none; }
.nbm-section.collapsed .nbm-section-hdr { border-bottom:none; margin-bottom:0; padding-bottom:4px; }

/* ════════════════════════════════════════════════════
   BUDGET ROWS
   Grid: [label] [86px planned] [86px actual] [150px progress] [156px actions]
   ════════════════════════════════════════════════════ */
.nbm-row {
  display:grid;
  grid-template-columns: minmax(140px,1fr) 86px 86px 150px 156px;
  align-items:center;
  gap:10px;
  padding:7px 6px;
  border-radius:var(--r-xs);
  transition:background var(--ease);
}
.nbm-row:nth-child(even) { background:rgba(255,255,255,.013); }
.nbm-row:not(.hdr):not(.total):hover { background:var(--s3) !important; }

/* Column header row */
.nbm-row.hdr {
  padding:6px 6px 10px;
  border-bottom:1px solid var(--b2);
  margin-bottom:4px;
  background:transparent !important;
}
.nbm-row.hdr > div {
  font-size:var(--fs-xs); font-weight:700; color:var(--t2);
  text-transform:uppercase; letter-spacing:.06em;
}
.nbm-row.hdr > div:nth-child(2) { color:var(--blue); text-align:left; direction:ltr; }
.nbm-row.hdr > div:nth-child(3) { color:var(--green); text-align:left; direction:ltr; }

/* Total row */
.nbm-row.total {
  border-top:1px solid var(--b2);
  margin-top:4px; padding-top:10px;
  background:transparent !important; font-weight:700;
}

/* Label cell */
.nbm-label-cell { display:flex; align-items:center; gap:6px; min-width:0; }
.nbm-drag-handle {
  color:var(--t3); cursor:grab; font-size:.95rem;
  flex-shrink:0; opacity:0; transition:opacity var(--ease); user-select:none;
}
.pro-user .nbm-row:hover .nbm-drag-handle { opacity:1; }
.nbm-label-text {
  font-size:.82rem; color:var(--t1); font-weight:500;
  flex:1; min-width:0; word-break:break-word; white-space:normal; line-height:1.35;
  cursor:text; padding:2px 4px; border-radius:3px;
  transition:background var(--ease);
}
.nbm-label-text:hover { background:var(--s3); }
.nbm-label-input {
  font-family:'Heebo',sans-serif; font-size:.82rem;
  color:var(--t1); background:var(--s3);
  border:1px solid var(--accent); border-radius:var(--r-xs);
  padding:2px 6px; outline:none; width:100%; flex:1;
}
/* The .nbm-cat-inline <select> was removed from the row template in v6.6.8 —
   recategorize is drag-only now. These rules are kept harmlessly in case any
   older cached HTML still includes the element; they style it compactly. */
.nbm-cat-inline {
  font-size:.65rem; background:var(--s3);
  border:1px solid var(--b2); color:var(--t3);
  border-radius:var(--r-pill); padding:1px 8px;
  outline:none; flex:0 0 auto;
  max-width:130px; width:auto;
  display:none;
}
.nbm-label-cell.editing .nbm-cat-inline { display:inline-block; }
.nbm-label-cell.editing .nbm-label-text { display:none; }
.nbm-label-cell:not(.editing) .nbm-label-input { display:none; }

/* Number inputs — clearly visible */
.nbm-cell-input {
  width:100%;
  background:var(--input-bg);
  border:1px solid var(--input-border);
  border-radius:var(--r-xs);
  color:var(--t1);
  font-family:'Heebo',sans-serif; font-size:.875rem; font-weight:700;
  padding:5px 8px; text-align:left; direction:ltr; outline:none;
  transition:border-color var(--ease), box-shadow var(--ease);
  -moz-appearance:textfield;
}
.nbm-cell-input::-webkit-inner-spin-button,
.nbm-cell-input::-webkit-outer-spin-button { -webkit-appearance:none; }
.nbm-cell-input:hover  { border-color:var(--b3); }
.nbm-cell-input:focus  {
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(245,208,50,.18);
}
.nbm-cell-input.planned { color:var(--blue); }
.nbm-cell-input.actual  { color:var(--green); }
.nbm-cell-input.actual.over { color:var(--red) !important; }
.nbm-cell-input.saving { opacity:.35; }

/* Progress cell */
.nbm-progress-cell {
  display:flex; align-items:center; gap:10px; padding:0 3px;
}
.nbm-progress-track {
  flex:1; min-width:0; height:5px; border-radius:3px;
  background:var(--s4); overflow:hidden;
}
.nbm-progress-fill {
  height:100%; border-radius:3px;
  transition:width .45s ease, background .3s ease;
}
.nbm-progress-pct {
  font-size:.65rem; font-weight:700;
  min-width:42px; width:42px;
  text-align:left; direction:ltr; flex-shrink:0;
  white-space:nowrap;
}
.nbm-progress-pct.ok   { color:var(--green); }
.nbm-progress-pct.warn { color:var(--amber); }
.nbm-progress-pct.over { color:var(--red); }
.nbm-total-progress { display:flex; align-items:center; gap:7px; }

/* Actions: delete icon only */
.nbm-row-actions { display:flex; align-items:center; gap:4px; justify-content:flex-end; min-width:0; overflow:hidden; }

/* Quick-add — compact pill; opens the "log a new amount" dialog */
.nbm-quickadd-btn {
  font-size:var(--fs-xs); font-weight:700;
  padding:4px 12px; border-radius:var(--r-pill);
  border:1px solid rgba(58,157,110,.4);
  background:rgba(58,157,110,.08); color:var(--green);
  cursor:pointer; transition:all var(--ease); white-space:nowrap; line-height:1.5;
  flex-shrink:0;
}
.nbm-quickadd-btn:hover { background:rgba(58,157,110,.16); border-color:var(--green); }

/* Delete — icon only, no text */
.nbm-del-btn {
  width:28px; height:28px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none;
  border-radius:var(--r-xs); color:var(--t3); font-size:1rem; line-height:1;
  transition:all var(--ease);
  opacity:0;
}
.nbm-row:hover .nbm-del-btn { opacity:1; }
.nbm-del-btn:hover {
  background:rgba(240,108,108,.12);
  color:var(--red); opacity:1;
}

/* Sortable */
.nbm-row.sortable-ghost  { opacity:.2; background:rgba(245,208,50,.05) !important; }
.nbm-row.sortable-chosen { background:var(--s3) !important; }

/* Num cell (totals display) */
.nbm-num-cell { font-size:.875rem; font-weight:700; padding:0 3px; display:block; }
.nbm-num-cell.planned { color:var(--blue); }
.nbm-num-cell.actual  { color:var(--green); }
.nbm-num-cell.actual.over { color:var(--red); }

/* Add button — brand-yellow filled, becomes the obvious primary action */
.nbm-add-row { padding:8px 6px 4px; }
.nbm-add-btn {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--accent); border:1px solid var(--accent-dk);
  color:var(--t1); border-radius:var(--r-xs);
  font-family:'Heebo',sans-serif; font-size:var(--fs-sm); font-weight:700;
  padding:7px 14px; transition:all var(--ease);
  box-shadow:var(--sh1);
}
.nbm-add-btn:hover {
  background:var(--accent-dk); border-color:var(--accent-dk);
  color:var(--t1); transform:translateY(-1px); box-shadow:var(--sh2);
}

/* ════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════ */
.nbm-btn-primary {
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent); color:#1a1200;
  border:none; border-radius:var(--r-xs);
  font-family:'Heebo',sans-serif; font-size:.82rem; font-weight:800;
  padding:9px 22px; text-decoration:none; cursor:pointer;
  transition:background var(--ease), transform .1s;
}
.nbm-btn-primary:hover  { background:var(--accent-dk); transform:translateY(-1px); }
.nbm-btn-primary:active { transform:none; }

/* Danger modifier — used on destructive confirm buttons in modals.
   Wins over .nbm-btn-primary's gold via specificity (.nbm-btn-primary.nbm-danger). */
.nbm-btn-primary.nbm-danger {
  background:var(--red); color:#fff;
}
.nbm-btn-primary.nbm-danger:hover {
  background:#b53636;
}

.nbm-btn-accent {
  background:var(--accent); color:#1a1200; border:none;
  border-radius:var(--r-xs); font-family:'Heebo',sans-serif;
  font-size:.82rem; font-weight:800; padding:9px 22px;
  text-decoration:none; display:inline-flex; align-items:center; cursor:pointer;
  transition:background var(--ease);
}
.nbm-btn-accent:hover { background:var(--accent-dk); }

.nbm-btn-accent-sm {
  background:var(--accent); color:#1a1200; border:none;
  border-radius:var(--r-xs); font-family:'Heebo',sans-serif;
  font-size:.7rem; font-weight:800; padding:4px 11px;
  white-space:nowrap; transition:background var(--ease); cursor:pointer;
}
.nbm-btn-accent-sm:hover { background:var(--accent-dk); }

.nbm-btn-ghost {
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--b2);
  color:var(--t2); border-radius:var(--r-xs);
  font-family:'Heebo',sans-serif; font-size:.82rem; font-weight:600;
  padding:9px 22px; cursor:pointer; transition:all var(--ease);
}
.nbm-btn-ghost:hover { border-color:var(--b3); color:var(--t1); background:var(--s2); }

/* ════════════════════════════════════════════════════
   PRO TEASER
   ════════════════════════════════════════════════════ */
.nbm-pro-teaser {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 16px;
  background:var(--s1); border:1px solid var(--b2);
  border-radius:var(--r); margin-bottom:12px;
  font-size:.72rem; color:var(--t2);
}
.nbm-pro-teaser.hidden { display:none; }
.nbm-pro-badge-inline {
  background:var(--accent); color:#1a1200;
  font-size:.6rem; font-weight:800; padding:1px 6px; border-radius:var(--r-pill);
}
.nbm-alert-bell {
  background:rgba(240,108,108,.1); border:1px solid rgba(240,108,108,.3);
  color:var(--red); border-radius:var(--r-pill);
  font-size:.7rem; font-weight:700; padding:2px 9px;
  cursor:pointer; font-family:'Heebo',sans-serif;
}

/* ════════════════════════════════════════════════════
   CHARTS
   ════════════════════════════════════════════════════ */
.nbm-charts-grid-2 {
  display:grid; grid-template-columns:1fr 1fr;
  gap:14px; margin-bottom:14px; align-items:start;
}
.nbm-chart-wrap {
  height:250px; margin-top:14px;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.nbm-chart-wrap canvas { max-width:100%; max-height:100%; }
.nbm-chart-wrap.tall { height:200px; }
.nbm-health-card { min-height:300px; }

/* Locked / teaser */
.nbm-pro-locked-card { position:relative; overflow:hidden; }
.nbm-blur-content { filter:blur(5px); pointer-events:none; user-select:none; }
.nbm-charts-blurred { filter:blur(5px); -webkit-filter:blur(5px); pointer-events:none; user-select:none; }
.nbm-lock-overlay {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(12,10,6,.7); backdrop-filter:blur(2px); gap:8px;
}
.nbm-lock-badge {
  background:var(--accent); color:#1a1200;
  font-size:.7rem; font-weight:800; padding:2px 10px; border-radius:var(--r-pill);
}
.nbm-lock-overlay p { font-size:.82rem; font-weight:600; color:var(--t1); }
.nbm-teaser-grade {
  width:56px; height:56px; border-radius:50%;
  border:2px solid var(--green); display:flex; align-items:center;
  justify-content:center; font-size:1.5rem; font-weight:800; color:var(--green);
  margin:0 auto 12px;
}
.nbm-teaser-bar { height:5px; background:var(--green); border-radius:2px; opacity:.5; max-width:200px; margin:0 auto; }

/* Upgrade CTA */
.nbm-upgrade-cta {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:18px 20px;
  background:var(--s1); border:1px solid var(--b2);
  border-top:2px solid var(--accent); border-radius:var(--r); margin-bottom:14px;
}
.nbm-upgrade-cta-title { font-size:.875rem; font-weight:800; color:var(--t1); margin-bottom:2px; }
.nbm-upgrade-cta-sub   { font-size:.72rem; color:var(--t3); }

/* Health insights */
.nbm-health-insight {
  padding:10px 12px; background:var(--s2);
  border-right:2px solid; border-radius:var(--r-xs); margin-bottom:8px;
}
.nbm-health-insight:last-child { margin-bottom:0; }
.nbm-health-insight-label {
  font-size:.63rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--t3); margin-bottom:3px;
}
.nbm-health-insight-text { font-size:.8rem; color:var(--t1); line-height:1.55; }

/* Forecast */
.nbm-forecast-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:14px; }
.nbm-fc-kpi { background:var(--s2); border-radius:var(--r-sm); padding:12px; text-align:center; }
.nbm-fc-kpi-label { font-size:.65rem; color:var(--t3); text-transform:uppercase; letter-spacing:.07em; margin-bottom:5px; }
.nbm-fc-kpi-val   { font-size:1.15rem; font-weight:800; }
.nbm-forecast-bar-track {
  height:8px; background:var(--s4); border-radius:4px;
  overflow:hidden; margin-top:6px; position:relative;
}
.nbm-forecast-bar-actual { height:100%; border-radius:4px; background:var(--green); transition:width .45s ease; }
.nbm-forecast-bar-projected { height:100%; position:absolute; top:0; left:0; border-radius:4px; opacity:.4; transition:width .45s ease; }

/* ════════════════════════════════════════════════════
   HISTORY TAB
   ════════════════════════════════════════════════════ */
.nbm-hist-bars { display:flex; align-items:flex-end; gap:4px; }

.nbm-trend-sentence {
  font-size:.8rem; color:var(--t2); line-height:1.65;
  padding:10px 14px; background:var(--s2);
  border-left:2px solid var(--accent); border-radius:var(--r-xs); margin-bottom:14px;
}
.nbm-progress-narrative { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.nbm-prog-stat {
  background:var(--s2); border:1px solid var(--b1);
  border-radius:var(--r-sm); padding:10px 14px; flex:1; min-width:120px;
}
.nbm-prog-stat-label { font-size:.65rem; color:var(--t3); text-transform:uppercase; letter-spacing:.07em; margin-bottom:3px; }
.nbm-prog-stat-val   { font-size:1.05rem; font-weight:800; }
.nbm-prog-trend-up   { color:var(--green); }
.nbm-prog-trend-down { color:var(--red); }
.nbm-prog-trend-flat { color:var(--t3); }

.nbm-hist-tbl { width:100%; border-collapse:collapse; font-size:.82rem; }
.nbm-hist-tbl thead th {
  padding:6px 10px; font-size:.65rem; font-weight:700; color:var(--t3);
  text-transform:uppercase; letter-spacing:.07em;
  border-bottom:1px solid var(--b2); text-align:right;
}
.nbm-hist-tbl thead th:not(:first-child) { text-align:left; direction:ltr; }
.nbm-hist-tbl tbody td {
  padding:9px 10px; border-bottom:1px solid var(--b1); vertical-align:middle;
}
.nbm-hist-tbl tbody tr:hover { background:var(--s2); }
.nbm-hist-tbl tbody tr:nth-child(even) { background:rgba(255,255,255,.012); }
.nbm-hist-tbl .num { direction:ltr; text-align:left; font-weight:700; }
.nbm-hist-tbl .pos { color:var(--green); }
.nbm-hist-tbl .neg { color:var(--red); }

/* History limit badge + export */
.nbm-history-limit {
  font-size:.65rem; color:var(--t3); background:var(--s2);
  border:1px solid var(--b1); border-radius:var(--r-pill); padding:2px 9px;
}
.nbm-history-limit.hidden { display:none; }
.nbm-export-btn {
  display:inline-flex; align-items:center; gap:4px;
  background:var(--s2); border:1px solid var(--b2);
  color:var(--t2); border-radius:var(--r-xs);
  font-family:'Heebo',sans-serif; font-size:.7rem; font-weight:600;
  padding:5px 12px; cursor:pointer; transition:all var(--ease);
}
.nbm-export-btn:hover { border-color:var(--green); color:var(--green); }
.nbm-export-locked:hover { border-color:var(--b3); color:var(--t2); }

/* ════════════════════════════════════════════════════
   SETTINGS
   ════════════════════════════════════════════════════ */
.nbm-notif-option {
  display:flex; align-items:center; gap:12px;
  background:var(--s2); border:1px solid var(--b2);
  border-radius:var(--r-sm); padding:12px 14px;
  cursor:pointer; transition:all var(--ease); margin-bottom:6px;
}
.nbm-notif-option:hover { border-color:var(--b3); }
.nbm-notif-active { border-color:var(--accent) !important; background:rgba(245,208,50,.06) !important; }
.nbm-notif-icon { font-size:1.2rem; flex-shrink:0; }
.nbm-notif-text { flex:1; }
.nbm-notif-label { font-size:.82rem; font-weight:700; color:var(--t1); margin-bottom:2px; }
.nbm-notif-desc  { font-size:.7rem; color:var(--t3); line-height:1.4; }
.nbm-notif-radio {
  width:18px; height:18px; border-radius:50%;
  border:1.5px solid var(--b2); flex-shrink:0;
  transition:all var(--ease); position:relative;
}
.nbm-notif-radio.active { border-color:var(--accent); background:var(--accent); }
.nbm-notif-radio.active::after {
  content:''; position:absolute; inset:4px; border-radius:50%; background:var(--bg);
}
.nbm-notif-locked { opacity:.5; cursor:not-allowed !important; }
.nbm-notif-locked:hover { border-color:var(--b2) !important; background:var(--s2) !important; }
.nbm-notif-pro-badge {
  font-size:.62rem; font-weight:700;
  background:rgba(245,208,50,.08); border:1px solid rgba(245,208,50,.2);
  color:var(--accent); padding:1px 7px; border-radius:var(--r-pill); flex-shrink:0;
}
.nbm-notif-free-banner {
  background:rgba(245,208,50,.06); border:1px solid rgba(245,208,50,.15);
  border-radius:var(--r-xs); padding:9px 12px;
  font-size:.72rem; color:var(--t2); margin-bottom:12px;
}
.nbm-smart-toggle {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; background:var(--s2); border-radius:var(--r-xs);
  padding:10px 12px; font-size:.82rem; border:1px solid var(--b1); margin-bottom:4px;
}
.nbm-toggle-switch { position:relative; width:34px; height:19px; flex-shrink:0; }
.nbm-toggle-switch input { opacity:0; width:0; height:0; }
.nbm-toggle-slider {
  position:absolute; inset:0; background:var(--s4);
  border-radius:19px; cursor:pointer; transition:background var(--ease);
}
.nbm-toggle-slider::before {
  content:''; position:absolute; width:13px; height:13px;
  left:3px; top:3px; background:#fff; border-radius:50%;
  transition:transform var(--ease);
}
.nbm-toggle-switch input:checked + .nbm-toggle-slider { background:var(--accent); }
.nbm-toggle-switch input:checked + .nbm-toggle-slider::before { transform:translateX(15px); }

/* Account */
.nbm-account-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 0; border-bottom:1px solid var(--b1); font-size:.82rem;
}
.nbm-account-row:last-child { border-bottom:none; }
.nbm-account-label { color:var(--t3); font-weight:600; }
.nbm-account-val   { color:var(--t1); font-weight:500; }
.nbm-account-link {
  font-size:.82rem; color:var(--t2); text-decoration:none;
  display:flex; align-items:center; gap:5px; padding:5px 0;
  transition:color var(--ease);
}
.nbm-account-link:hover { color:var(--t1); }
.nbm-upgrade-link { color:var(--accent) !important; font-weight:700; }

/* ════════════════════════════════════════════════════
   PRO FEATURES
   ════════════════════════════════════════════════════ */

/* Coach banner */
.nbm-coach-banner {
  display:flex; align-items:flex-start;
  background:var(--s1); border:1px solid var(--b2); border-right:2px solid var(--accent);
  border-radius:var(--r); padding:12px 16px; margin-bottom:14px;
}
.nbm-coach-banner.hidden { display:none; }
.nbm-coach-teaser { border-right-color:var(--t3); opacity:.8; }
.nbm-coach-banner-inner { display:flex; align-items:flex-start; gap:10px; width:100%; }
.nbm-coach-avatar { font-size:1.4rem; flex-shrink:0; line-height:1; }
.nbm-coach-text { flex:1; min-width:0; }
.nbm-coach-from {
  font-size:.72rem; font-weight:800; color:var(--t2);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:3px;
}
.nbm-coach-content { font-size:.82rem; color:var(--t1); line-height:1.55; }
.nbm-blur-text { filter:blur(3.5px); user-select:none; pointer-events:none; color:var(--t2); }
.nbm-coach-close {
  background:none; border:none; color:var(--t3);
  cursor:pointer; padding:2px; flex-shrink:0; transition:color var(--ease); font-size:.85rem;
}
.nbm-coach-close:hover { color:var(--t1); }

/* Goals */
.nbm-goal-item {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; background:var(--s2);
  border:1px solid var(--b1); border-radius:var(--r-sm); margin-bottom:8px;
  transition:border-color var(--ease);
}
.nbm-goal-item:hover { border-color:var(--b2); }
.nbm-goal-color-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.nbm-goal-info { flex:1; min-width:0; }
.nbm-goal-name {
  font-size:.82rem; font-weight:700; color:var(--t1);
  margin-bottom:5px; display:flex; align-items:center; gap:7px; flex-wrap:wrap;
}
.nbm-goal-date-tag { font-size:.63rem; color:var(--t3); font-weight:400; }
.nbm-goal-bar-wrap { display:flex; align-items:center; gap:8px; }
.nbm-goal-track { flex:1; height:5px; background:var(--s4); border-radius:2px; overflow:hidden; }
.nbm-goal-fill  { height:100%; border-radius:2px; transition:width .45s ease; }
.nbm-goal-pct   { font-size:.65rem; font-weight:700; min-width:30px; text-align:left; direction:ltr; }
.nbm-goal-amounts { font-size:.68rem; color:var(--t3); margin-top:4px; }
.nbm-goal-amounts strong { color:var(--t2); }
.nbm-goal-actions { display:flex; gap:5px; flex-shrink:0; }
.nbm-goal-btn {
  background:none; border:1px solid var(--b2); color:var(--t3);
  border-radius:var(--r-xs); font-size:.68rem; padding:3px 9px;
  cursor:pointer; transition:all var(--ease);
}
.nbm-goal-btn:hover { border-color:var(--accent); color:var(--accent); }
.nbm-goal-btn.del:hover { border-color:var(--red); color:var(--red); }
.nbm-goal-done { color:var(--green); font-size:.68rem; font-weight:700; }

.nbm-goals-teaser-row { padding:4px 8px; }
.nbm-goals-teaser-row .nbm-goal-bar-wrap {
  display:flex; align-items:center; gap:8px;
  font-size:.82rem; color:var(--t2);
}

/* Budget alerts */
.nbm-alert-row {
  display:flex; align-items:center; gap:8px;
  background:rgba(240,108,108,.08); border:1px solid rgba(240,108,108,.22);
  border-radius:var(--r-xs); padding:8px 12px;
  font-size:.8rem; color:var(--t1);
  animation:slide-in .25s ease;
}
@keyframes slide-in { from{opacity:0;transform:translateX(6px)} to{opacity:1;transform:none} }
.nbm-alert-icon { font-size:1rem; flex-shrink:0; }
.nbm-alert-text { flex:1; }
.nbm-alert-text strong { color:var(--red); }

/* ════════════════════════════════════════════════════
   MODALS
   ════════════════════════════════════════════════════ */
.nbm-modal {
  position:fixed; inset:0; z-index:600;
  background:rgba(0,0,0,.7); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.nbm-modal.hidden { display:none; }
.nbm-modal-box {
  background:var(--s1); border:1px solid var(--b3);
  border-radius:var(--r); padding:24px;
  width:100%; max-width:380px;
  box-shadow:var(--sh3); animation:fade-in .16s ease;
}
.nbm-modal-title { font-size:1rem; font-weight:800; margin-bottom:18px; }
.nbm-modal-footer { display:flex; gap:8px; }

.nbm-field-label {
  display:block; font-size:.65rem; font-weight:700;
  color:var(--t2); margin-bottom:5px;
  text-transform:uppercase; letter-spacing:.06em;
}
.nbm-input {
  width:100%; background:var(--input-bg); border:1px solid var(--input-border);
  border-radius:var(--r-xs); color:var(--t1);
  font-family:'Heebo',sans-serif; font-size:.82rem;
  padding:9px 12px; outline:none; transition:border-color var(--ease), box-shadow var(--ease);
}
.nbm-input:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(245,208,50,.16);
}
textarea.nbm-input { resize:vertical; min-height:76px; }

/* ════════════════════════════════════════════════════
   LOADING & EMPTY STATES
   ════════════════════════════════════════════════════ */
.nbm-loading { opacity:.4; pointer-events:none; transition:opacity .2s ease; }
.nbm-skeleton {
  background:linear-gradient(90deg,var(--s3) 25%,var(--s4) 50%,var(--s3) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:var(--r-xs); display:inline-block;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.nbm-skeleton-row {
  display:grid;
  grid-template-columns:minmax(140px,1fr) 86px 86px 150px 156px;
  gap:10px; padding:8px 6px;
}
.nbm-skeleton-cell { height:26px; border-radius:var(--r-xs); }
.nbm-skeleton-label { width:65%; }
.nbm-skeleton-num   { width:100%; }

.nbm-empty-state {
  text-align:center; padding:40px 20px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.nbm-empty-icon  { font-size:2rem; opacity:.35; }
.nbm-empty-title { font-size:.875rem; font-weight:700; color:var(--t2); }
.nbm-empty-sub   { font-size:.78rem; color:var(--t3); max-width:260px; line-height:1.55; }
.nbm-hist-empty  { text-align:center; padding:40px; color:var(--t3); font-size:.82rem; }

/* ════════════════════════════════════════════════════
   UTILITY
   ════════════════════════════════════════════════════ */
.nbm-label-upper { font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:var(--t2); }
.nbm-body-sm { font-size:.82rem; color:var(--t2); line-height:1.6; }
.nbm-caption { font-size:.7rem; color:var(--t3); }
.nbm-section-title { font-size:.875rem; font-weight:700; color:var(--t1); }
.hidden { display:none !important; }

/* ════════════════════════════════════════════════════
   TOAST
   ════════════════════════════════════════════════════ */
#nbm-toast {
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(14px);
  background:var(--s2); border:1px solid var(--b3);
  border-radius:var(--r-sm); padding:9px 22px;
  font-size:.82rem; font-weight:600;
  box-shadow:var(--sh3); z-index:9999;
  opacity:0; pointer-events:none;
  transition:transform .2s ease, opacity .2s ease; white-space:nowrap;
}
#nbm-toast.show { transform:translateX(-50%) translateY(0); opacity:1; }
#nbm-toast.ok  { border-color:rgba(62,201,138,.4); color:var(--green); }
#nbm-toast.err { border-color:rgba(240,108,108,.4); color:var(--red); }

.nbm-login-prompt { font-family:'Heebo',sans-serif; text-align:center; padding:80px 20px; color:var(--t2); }
.nbm-login-prompt a { color:var(--accent); text-decoration:none; font-weight:700; }

/* ════════════════════════════════════════════════════
   RESPONSIVE — 520px: mobile card layout
   ════════════════════════════════════════════════════ */
@media(max-width:520px) {
  .nbm-row.hdr { display:none !important; }
  .nbm-row:not(.total):not(.hdr) {
    display:flex !important; flex-direction:column !important;
    gap:10px !important; padding:12px !important;
    background:var(--s2) !important; border:1px solid var(--b1) !important;
    border-radius:var(--r-sm) !important; margin-bottom:6px !important;
    /* Suppress the long-press text-selection/callout on iOS */
    -webkit-user-select:none; user-select:none;
    -webkit-touch-callout:none;
  }
  /* Inputs must remain selectable/editable */
  .nbm-row .nbm-cell-input,
  .nbm-row .nbm-label-input {
    -webkit-user-select:auto; user-select:auto;
    -webkit-touch-callout:default;
  }
  .nbm-row.total {
    display:grid !important; grid-template-columns:1fr auto auto !important;
    gap:6px !important;
  }
  .nbm-row.total > :nth-child(4),
  .nbm-row.total > :nth-child(5) { display:none !important; }
  .nbm-mobile-inputs { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .nbm-mobile-input-wrap { display:flex; flex-direction:column; gap:3px; }
  .nbm-mobile-input-label { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
  .nbm-mobile-input-label.planned { color:var(--blue); }
  .nbm-mobile-input-label.actual  { color:var(--green); }
  .nbm-mobile-actions { display:flex; align-items:center; justify-content:flex-end; gap:7px; }
  .nbm-add-btn { width:100%; justify-content:center; padding:10px; }
  .nbm-kpi-strip { grid-template-columns:1fr; gap:6px; }

  /* ── Mobile default view: keep it calm ── */
  .nbm-del-btn { display:none; }     /* hidden until edit mode */
  .nbm-drag-handle { display:none; } /* drag belongs to Phase 2; hide for now */
  .nbm-label-text { padding:6px 4px; font-size:.92rem; }

  /* Rename input — 16px+ to prevent iOS auto-zoom; full row width; stacked
     above the category picker so they don't squeeze each other off-screen */
  .nbm-label-cell.editing {
    flex-direction:column; align-items:stretch; gap:6px;
  }
  .nbm-label-input {
    font-size:16px !important;   /* iOS won't zoom on focus when ≥16px */
    padding:10px 12px;
    width:100%;
    background:var(--s1);
    border-width:2px;
  }
  .nbm-cat-inline {
    font-size:var(--fs-xs); padding:6px 10px;
    width:100%; max-width:100%;
    background:var(--s2);
  }

  /* ── Mobile edit mode: triggered by long-press on a field row ── */
  .nbm-section.editing-mode .nbm-row:not(.total):not(.hdr) {
    animation: nbm-shake .42s ease-in-out infinite;
    border-color: var(--accent) !important;
    /* Tight padding — the row is much smaller in edit mode */
    padding:8px 10px !important;
    gap:6px !important;
    flex-direction:row !important;
    align-items:center;
    cursor:grab;
    /* DO NOT set touch-action:none here — it blocks page scroll in edit
       mode. Sortable.js uses a delay-based gesture detection (see app.js)
       so a quick swipe still scrolls; only a held press initiates drag. */
  }
  /* Hide everything except the label and the delete button while editing */
  .nbm-section.editing-mode .nbm-mobile-inputs,
  .nbm-section.editing-mode .nbm-progress-cell,
  .nbm-section.editing-mode .nbm-quickadd-btn {
    display:none !important;
  }

  /* During an active drag, fade all rows EXCEPT the one being moved.
     Sortable.js puts `.sortable-chosen` on the dragged element. We dim every
     other field row and the section backgrounds so the chosen row is the
     visual centerpiece. */
  body:has(.sortable-chosen) .nbm-row[data-uid]:not(.sortable-chosen):not(.sortable-ghost) {
    opacity:.35;
    transition:opacity .15s ease;
  }
  body:has(.sortable-chosen) .nbm-section-hdr,
  body:has(.sortable-chosen) .nbm-edit-done-bar {
    opacity:.45;
  }
  /* Lift the chosen row visually — strong shadow + slight scale */
  .nbm-row[data-uid].sortable-chosen {
    background:var(--s1) !important;
    box-shadow:0 10px 24px rgba(31,27,20,.18);
    transform:scale(1.02);
    z-index:5;
    position:relative;
    animation:none !important; /* stop shake during drag — cleaner */
  }
  /* Label cell becomes the main content of the row */
  .nbm-section.editing-mode .nbm-label-cell {
    flex:1 1 auto; min-width:0;
  }
  /* Mobile actions stay on the (visually) far-left edge in RTL */
  .nbm-section.editing-mode .nbm-mobile-actions {
    flex:0 0 auto;
    margin-inline-start:auto; /* RTL: pushes the X to the visual left */
  }
  .nbm-section.editing-mode .nbm-del-btn {
    display:flex; opacity:1; width:30px; height:30px; font-size:1.2rem;
    background:rgba(240,108,108,.12); color:var(--red);
    border:1px solid rgba(240,108,108,.25);
    flex-shrink:0;
  }
  .nbm-section.editing-mode .nbm-label-text {
    background:var(--s3); border:1px dashed var(--accent);
    border-radius:var(--r-xs); padding:8px 10px;
    font-size:1rem; font-weight:600;
    display:flex; align-items:center; width:100%;
  }
  .nbm-section.editing-mode .nbm-label-text::after {
    content:"\270E";
    margin-inline-start:auto; padding-inline-start:8px;
    color:var(--accent); font-size:.95rem; flex-shrink:0;
  }

  /* Section-level Done bar, injected by JS */
  .nbm-edit-done-bar {
    display:none;
    align-items:center; justify-content:space-between;
    padding:8px 10px; margin-bottom:8px;
    background:var(--accent); color:#000;
    border-radius:var(--r-xs); font-weight:700; font-size:.85rem;
  }
  .nbm-section.editing-mode .nbm-edit-done-bar { display:flex; }
  .nbm-edit-done-btn {
    background:#000; color:var(--accent);
    border:none; padding:6px 14px; border-radius:var(--r-pill);
    font-weight:700; font-size:.8rem; cursor:pointer;
  }
}

/* Shake keyframes — outside media query so it can be reused */
@keyframes nbm-shake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  20%      { transform: translateX(-1px) rotate(-.35deg); }
  40%      { transform: translateX(1px) rotate(.35deg); }
  60%      { transform: translateX(-1px) rotate(-.25deg); }
  80%      { transform: translateX(1px) rotate(.25deg); }
}
@media (prefers-reduced-motion: reduce) {
  .nbm-section.editing-mode .nbm-row { animation: none !important; }
}

/* ════════════════════════════════════════════════════
   521–700px: compact table (2 data cols, no progress)
   ════════════════════════════════════════════════════ */
@media(min-width:521px) and (max-width:700px) {
  .nbm-row { grid-template-columns:1fr 80px 80px; }
  .nbm-row > :nth-child(4),
  .nbm-row > :nth-child(5) { display:none !important; }
}

/* ════════════════════════════════════════════════════
   ≤700px: navigation wrap
   ════════════════════════════════════════════════════ */
@media(max-width:700px) {
  .nbm-nav-inner { flex-wrap:wrap; height:auto; padding:8px 14px; gap:8px; }
  .nbm-install-btn { margin-left:0; }
  .nbm-tabs { order:3; width:100%; }
  .nbm-tab { font-size:.72rem; padding:6px 10px; }
  .nbm-month-ctrl { order:2; margin-right:auto; }
  .nbm-save-status { order:2; }
  .nbm-body { padding:14px 12px 60px; }
  .nbm-card { padding:16px; }
  .nbm-kpi-balance-num { font-size:1.7rem; }
  .nbm-upgrade-cta { flex-direction:column; align-items:flex-start; }
  .nbm-forecast-grid { grid-template-columns:1fr 1fr; }
  #tab-settings > div { grid-template-columns:1fr !important; }
  .nbm-legend-bar { display:none; }
}

/* ════════════════════════════════════════════════════
   ≤960px: KPI stack, single-col charts
   ════════════════════════════════════════════════════ */
@media(max-width:960px) {
  .nbm-kpi-strip { grid-template-columns:1fr; gap:6px; }
  .nbm-kpi-balance { border-left:none; border-top:2px solid var(--accent); }
  .nbm-kpi-balance-num { font-size:1.85rem; }
  .nbm-charts-grid-2 { grid-template-columns:1fr; }
  .nbm-forecast-grid { grid-template-columns:1fr 1fr; }
}

/* Alerts list */
.nbm-alerts-list {
  display:flex; flex-direction:column; gap:6px; margin-bottom:14px;
}

/* ════════════════════════════════════════════════════
   MONTH LOCK — free users, non-current months
   ════════════════════════════════════════════════════ */
.nbm-month-lock-banner {
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(90deg, rgba(245,208,50,.06), transparent);
  border:1px solid rgba(245,208,50,.2);
  border-right:2px solid var(--accent);
  border-radius:var(--r-xs);
  padding:10px 14px;
  margin-bottom:14px;
  animation:fade-in .2s ease;
}
.nbm-lock-icon { font-size:1.1rem; flex-shrink:0; }
.nbm-lock-message { flex:1; font-size:.8rem; color:var(--t2); line-height:1.4; }
.nbm-lock-message strong { color:var(--t1); }
.nbm-lock-sub { display:block; font-size:.72rem; color:var(--t3); margin-top:2px; }

/* Locked inputs — dimmed, cursor not-allowed */
.nbm-cell-input.nbm-locked-input {
  opacity:.45;
  cursor:not-allowed;
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
.nbm-cell-input.nbm-locked-input:hover {
  border-color:transparent !important;
  background:transparent !important;
}

/* Hidden action buttons in locked state */
.nbm-hidden-action {
  display:none !important;
}

/* ════════════════════════════════════════════════════
   GUIDE CARD + ONBOARDING + VALIDATION
   ════════════════════════════════════════════════════ */

/* Guide card steps */
.nbm-guide-step {
  display:flex; align-items:flex-start; gap:8px;
  font-size:.8rem; color:var(--t2); line-height:1.4;
  transition:color var(--ease);
}
.nbm-guide-check {
  font-size:.85rem; flex-shrink:0; line-height:1.4;
  color:var(--t3); width:14px; text-align:center;
}
.nbm-guide-step.done { color:var(--t3); }
.nbm-guide-step.done .nbm-guide-check { color:var(--green); }

/* Onboarding step dots */
.nbm-ob-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--b2); transition:background var(--ease);
}
.nbm-ob-dot.active { background:var(--accent); }

/* Validation warning on input */
.nbm-cell-input.val-warn {
  border-color:var(--amber) !important;
  box-shadow:0 0 0 2px rgba(245,166,35,.15) !important;
}
.nbm-val-warning {
  font-size:.68rem; color:var(--amber); font-weight:600;
  padding:3px 6px; line-height:1.4; display:block;
  animation:fade-in .2s ease;
}
.nbm-val-error {
  font-size:.68rem; color:var(--red); font-weight:600;
  padding:3px 6px; line-height:1.4; display:block;
}

/* Structural imbalance banner */
.nbm-imbalance-banner {
  display:flex; align-items:center; gap:10px;
  background:rgba(245,166,35,.08); border:1px solid rgba(245,166,35,.25);
  border-right:2px solid var(--amber);
  border-radius:var(--r-xs); padding:10px 14px;
  font-size:.8rem; color:var(--t1);
  margin-bottom:12px;
  animation:fade-in .25s ease;
}
.nbm-imbalance-banner strong { color:var(--amber); }

/* Empty income nudge */
.nbm-income-nudge {
  font-size:.75rem; color:var(--t3); font-style:italic;
  padding:6px 10px; display:block;
}

/* Subscription plan badges */
.nbm-plan-badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:.75rem; font-weight:700; padding:3px 10px;
  border-radius:var(--r-pill);
}
.nbm-plan-badge.free  { background:var(--s3); border:1px solid var(--b2); color:var(--t2); }
.nbm-plan-badge.pro   { background:rgba(245,208,50,.12); border:1px solid rgba(245,208,50,.3); color:var(--accent); }
.nbm-plan-badge.trial { background:rgba(109,165,245,.1); border:1px solid rgba(109,165,245,.3); color:var(--blue); }

/* Sub action buttons */
.nbm-sub-action {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.8rem; font-weight:600; padding:8px 16px;
  border-radius:var(--r-xs); text-decoration:none;
  cursor:pointer; transition:all var(--ease); border:1px solid;
}
.nbm-sub-action.manage {
  background:var(--s2); border-color:var(--b2); color:var(--t2);
}
.nbm-sub-action.manage:hover { border-color:var(--b3); color:var(--t1); }
.nbm-sub-action.upgrade {
  background:var(--accent); border-color:var(--accent); color:#1a1200; font-weight:800;
}
.nbm-sub-action.upgrade:hover { background:var(--accent-dk); }
.nbm-sub-action.cancel {
  background:none; border-color:var(--b1); color:var(--t3); font-size:.72rem;
}
.nbm-sub-action.cancel:hover { border-color:var(--red); color:var(--red); }

/* ── Missing utility classes ── */
.nbm-ob-step {
  display:flex; flex-direction:column; gap:10px;
}
.nbm-color-swatch {
  flex-shrink:0; transition:border-color var(--ease);
}
.nbm-color-swatch:hover { opacity:.85; }
.nbm-pro-teaser-text {
  display:flex; align-items:center; gap:8px;
  font-size:.82rem; color:var(--t2); flex:1;
}

/* ═══════════════════════════════════════════════════
   CHESS UI — "promote your piece" upgrade motif
   v6.3.3 (Session 3 redesign)

   Pawn = Free state; Queen = Pro destination. Replaces the inconsistent ⭐
   usage across the app. The upgrade card is the one prominent CTA pattern.
   Gold is reserved for it; everywhere else, upgrade hints stay quiet.
   ══════════════════════════════════════════════════ */

/* ── Chess icons ──
   Uses CSS mask so the SVG inherits currentColor cleanly. */
.nbm-chess {
  display:inline-block; vertical-align:middle;
  width:1em; height:1em;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
  background:currentColor;
}
.nbm-chess-pawn  { -webkit-mask-image:url('../img/pawn.svg');  mask-image:url('../img/pawn.svg'); }
.nbm-chess-queen { -webkit-mask-image:url('../img/queen.svg'); mask-image:url('../img/queen.svg'); }
.nbm-chess-sm    { width:.9em;  height:.9em; }
.nbm-chess-md    { width:1.2em; height:1.2em; }
.nbm-chess-lg    { width:1.8em; height:1.8em; }
.nbm-chess-xl    { width:2.6em; height:2.6em; }

/* The signature glyph: pawn → queen, used in the modal header etc. */
.nbm-promote {
  display:inline-flex; align-items:center; gap:.4em;
  vertical-align:middle; line-height:1;
}
.nbm-promote .nbm-chess-pawn  { color:var(--t3); }
.nbm-promote .nbm-chess-queen { color:var(--accent); }
.nbm-promote-arrow { color:var(--t3); font-size:.8em; opacity:.7; transform:scaleX(-1); }

/* ── Pro badge — small "Pro" pill, now with queen icon ── */
/* Overrides the earlier .nbm-pro-badge-inline so the queen prefixes the label. */
.nbm-pro-badge-inline {
  display:inline-flex; align-items:center; gap:4px;
  background:var(--accent); color:#1a1200;
  font-size:.6rem; font-weight:800;
  padding:2px 8px; border-radius:var(--r-pill);
  line-height:1.4;
}
.nbm-pro-badge-inline::before {
  content:''; display:inline-block; width:.85em; height:.85em;
  -webkit-mask:url('../img/queen.svg') no-repeat center / contain;
          mask:url('../img/queen.svg') no-repeat center / contain;
  background:currentColor;
}

/* Lock badge on Pro-locked cards — also queen */
.nbm-lock-badge {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--accent); color:#1a1200;
  font-size:.7rem; font-weight:800;
  padding:3px 11px; border-radius:var(--r-pill);
  line-height:1.4;
}
.nbm-lock-badge::before {
  content:''; display:inline-block; width:.95em; height:.95em;
  -webkit-mask:url('../img/queen.svg') no-repeat center / contain;
          mask:url('../img/queen.svg') no-repeat center / contain;
  background:currentColor;
}

/* ── Upgrade card — the ONE prominent CTA pattern ──
   Used wherever we nudge a free user to upgrade. Gold-edged, generous
   space, weighty type, faint checker pattern in the background. */
.nbm-upgrade-card {
  position:relative;
  display:flex; align-items:center; gap:20px;
  padding:22px 24px;
  background:
    radial-gradient(circle at calc(100% - 60px) 50%, rgba(245,208,50,.10), transparent 55%),
    linear-gradient(180deg, var(--s2) 0%, var(--s1) 100%);
  border:1px solid rgba(245,208,50,.28);
  border-radius:var(--r);
  margin:18px 0;
  overflow:hidden;
}
.nbm-upgrade-card::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(45deg, rgba(245,208,50,.045) 25%, transparent 25%, transparent 75%, rgba(245,208,50,.045) 75%),
    linear-gradient(45deg, rgba(245,208,50,.045) 25%, transparent 25%, transparent 75%, rgba(245,208,50,.045) 75%);
  background-size:32px 32px;
  background-position:0 0, 16px 16px;
  pointer-events:none; opacity:.55;
}
.nbm-upgrade-card > * { position:relative; z-index:1; }
.nbm-upgrade-card-icon {
  width:64px; height:64px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(245,208,50,.10);
  border:1px solid rgba(245,208,50,.3);
  border-radius:50%;
  color:var(--accent);
}
.nbm-upgrade-card-icon .nbm-chess { width:36px; height:36px; }
.nbm-upgrade-card-body  { flex:1; min-width:0; }
.nbm-upgrade-card-title { font-size:1.05rem; font-weight:800; color:var(--t1); margin-bottom:4px; letter-spacing:-.01em; }
.nbm-upgrade-card-sub   { font-size:.78rem; color:var(--t2); line-height:1.5; }
.nbm-upgrade-card-btn {
  flex-shrink:0;
  display:inline-flex; align-items:center; gap:7px;
  background:var(--accent); color:#1a1200;
  border:none; border-radius:var(--r-xs);
  font-family:'Heebo',sans-serif;
  font-size:.9rem; font-weight:800;
  padding:12px 22px; cursor:pointer;
  transition:transform .1s ease, background var(--ease), box-shadow var(--ease);
  box-shadow:0 2px 8px rgba(245,208,50,.22);
  white-space:nowrap;
}
.nbm-upgrade-card-btn:hover  { background:var(--accent-dk); transform:translateY(-1px); box-shadow:0 4px 14px rgba(245,208,50,.38); }
.nbm-upgrade-card-btn:active { transform:none; }
.nbm-upgrade-card-btn::after {
  content:''; display:inline-block; width:1em; height:1em;
  -webkit-mask:url('../img/queen.svg') no-repeat center / contain;
          mask:url('../img/queen.svg') no-repeat center / contain;
  background:currentColor;
}

/* Compact upgrade prompt — small inline "read message" / "discover more"
   teaser buttons on coach-note + goals + similar surfaces. Pawn watermark
   in the rest of the card; the button itself is a quiet gold pill. */
.nbm-upgrade-inline {
  display:inline-flex; align-items:center; gap:6px;
  background:transparent;
  border:1px solid rgba(245,208,50,.4);
  color:var(--accent);
  font-family:'Heebo',sans-serif;
  font-size:.72rem; font-weight:700;
  padding:5px 12px; border-radius:var(--r-pill);
  cursor:pointer; transition:all var(--ease);
  white-space:nowrap;
}
.nbm-upgrade-inline:hover {
  background:rgba(245,208,50,.10);
  border-color:var(--accent);
}
.nbm-upgrade-inline::before {
  content:''; display:inline-block; width:.95em; height:.95em;
  -webkit-mask:url('../img/queen.svg') no-repeat center / contain;
          mask:url('../img/queen.svg') no-repeat center / contain;
  background:currentColor;
}

/* ── Subscription section upgrade button (Settings tab) ──
   Override of the earlier .nbm-sub-action.upgrade with class-based styling
   (replaces the v6.3.0 inline-styled gold button). */
.nbm-sub-action.upgrade {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
  background:var(--accent); color:#1a1200;
  border:1px solid var(--accent);
  font-size:1rem; font-weight:800;
  padding:14px 20px; border-radius:var(--r-sm);
  box-shadow:0 3px 12px rgba(245,208,50,.3);
  transition:all var(--ease);
}
.nbm-sub-action.upgrade:hover {
  background:var(--accent-dk); border-color:var(--accent-dk);
  transform:translateY(-1px);
  box-shadow:0 5px 16px rgba(245,208,50,.42);
}
.nbm-sub-action.upgrade::before {
  content:''; display:inline-block; width:1.15em; height:1.15em;
  -webkit-mask:url('../img/queen.svg') no-repeat center / contain;
          mask:url('../img/queen.svg') no-repeat center / contain;
  background:currentColor;
}

/* ── Upgrade modal — faint checker backdrop + queen in title ── */
#nbm-upgrade-modal .nbm-modal-box {
  position:relative;
  border-color:rgba(245,208,50,.32);
  overflow:hidden;
}
#nbm-upgrade-modal .nbm-modal-box::before {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background-image:
    linear-gradient(45deg, rgba(245,208,50,.04) 25%, transparent 25%, transparent 75%, rgba(245,208,50,.04) 75%),
    linear-gradient(45deg, rgba(245,208,50,.04) 25%, transparent 25%, transparent 75%, rgba(245,208,50,.04) 75%);
  background-size:28px 28px;
  background-position:0 0, 14px 14px;
  opacity:.7;
}
#nbm-upgrade-modal .nbm-modal-box > * { position:relative; z-index:1; }
#nbm-upgrade-modal .nbm-modal-title {
  display:flex; align-items:center; justify-content:center; gap:8px;
}
#nbm-upgrade-modal .nbm-modal-title::before {
  content:''; display:inline-block; width:1.3em; height:1.3em;
  -webkit-mask:url('../img/queen.svg') no-repeat center / contain;
          mask:url('../img/queen.svg') no-repeat center / contain;
  background:var(--accent);
}

/* Pawn watermark behind locked-card overlays — subtle reinforcement */
.nbm-pro-locked-card .nbm-lock-overlay::after {
  content:'';
  position:absolute;
  width:80px; height:80px;
  bottom:-15px; left:-15px;
  -webkit-mask:url('../img/pawn.svg') no-repeat center / contain;
          mask:url('../img/pawn.svg') no-repeat center / contain;
  background:var(--t1);
  opacity:.04;
  pointer-events:none;
}

/* Mobile: stack the upgrade card */
@media (max-width:520px) {
  .nbm-upgrade-card {
    flex-direction:column; align-items:stretch; text-align:center;
    gap:14px; padding:20px 18px;
  }
  .nbm-upgrade-card-icon { margin:0 auto; }
  .nbm-upgrade-card-btn  { width:100%; justify-content:center; }
}

/* Click-anywhere upsell triggers — whole locked cards / banners are clickable.
   Templates flag elements with class .nbm-upsell-trigger + data-upsell-* attrs.
   The JS delegate handler reads the data attrs and opens the upgrade modal. */
.nbm-upsell-trigger {
  cursor:pointer;
  transition:transform .12s var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.nbm-upsell-trigger:hover {
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(245,208,50,.15);
  border-color:rgba(245,208,50,.55);
}
.nbm-upsell-trigger:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
}
/* On lock-overlay cards, intensify the gold tint of the badge on hover */
.nbm-pro-locked-card.nbm-upsell-trigger:hover .nbm-lock-badge {
  box-shadow:0 0 0 3px rgba(245,208,50,.18);
}

/* ── Sub-block lock (used for the partner section inside the merged reminders
   card). Visually softer than .nbm-pro-locked-card — it's a sub-section, not
   a standalone card. Same gold accent + click affordance. */
.nbm-pro-locked-sub {
  position:relative;
  padding:14px;
  border:1px solid rgba(245,208,50,.25);
  background:rgba(245,208,50,.04);
  border-radius:var(--r-xs);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.nbm-pro-locked-sub:hover {
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(245,208,50,.15);
  border-color:rgba(245,208,50,.55);
}
.nbm-pro-locked-sub:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.nbm-sub-lock-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed rgba(245,208,50,.3);
}
.nbm-sub-lock-cta {
  font-size:.78rem;
  color:var(--accent-dk, var(--accent));
  font-weight:700;
}

/* ── Extended-access onboarding tour overlay (Pass 1 mechanics — polish next pass).
   The tour fades the page, optionally cuts a "spotlight" hole around a target
   element, and shows a tooltip card above/below the highlighted element. */
.nbm-ext-tour-overlay {
  position:fixed; inset:0;
  background:rgba(15,15,15,.55);
  z-index:9990;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.nbm-ext-tour-overlay.show {
  opacity:1;
  pointer-events:auto;
}
.nbm-ext-tour-spotlight {
  position:fixed;
  border-radius:10px;
  box-shadow:0 0 0 4px rgba(245,208,50,.55), 0 0 0 9999px rgba(15,15,15,.55);
  transition:all .3s ease;
  pointer-events:none;
  z-index:9991;
}
.nbm-ext-tour-card {
  position:fixed;
  z-index:9992;
  background:var(--s1, #fff);
  color:var(--t1, #1f1b14);
  max-width:380px;
  border-radius:var(--r-md, 12px);
  padding:18px 20px;
  box-shadow:0 24px 60px rgba(15,15,15,.35);
  border:1px solid rgba(245,208,50,.4);
}
.nbm-ext-tour-card .nbm-ext-tour-title {
  font-weight:800;
  font-size:1.05rem;
  margin:0 0 8px;
}
.nbm-ext-tour-card .nbm-ext-tour-body {
  font-size:.88rem;
  line-height:1.55;
  color:var(--t2, #4a4438);
  margin:0 0 14px;
}
.nbm-ext-tour-card .nbm-ext-tour-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.nbm-ext-tour-card .nbm-ext-tour-progress {
  font-size:.72rem;
  color:var(--t3, #88806b);
  /* Force LTR so "2 / 4" doesn't bidi-flip to "4 / 2" inside the RTL card. */
  direction:ltr;
  unicode-bidi:isolate;
}
.nbm-ext-tour-card .nbm-ext-tour-buttons {
  display:flex; gap:8px;
}
.nbm-ext-tour-card .nbm-ext-tour-just-changed {
  display:inline-block;
  background:rgba(245,208,50,.18);
  color:var(--accent-dk, #8a6f10);
  font-size:.7rem;
  font-weight:700;
  padding:2px 8px;
  border-radius:999px;
  margin-bottom:8px;
}

/* Tab-switch announcement inside the tour card — tells the user the view
   just moved to a different tab so step 2 doesn't feel teleported. */
.nbm-ext-tour-card .nbm-ext-tour-tab-badge {
  display:block;
  font-size:.74rem;
  font-weight:700;
  color:var(--t2, #4a4438);
  margin-bottom:8px;
}

/* Brief pulse on the tab button when the tour switches tabs, so the eye is
   drawn to where the view moved. */
@keyframes nbm-ext-tab-pulse-kf {
  0%   { box-shadow:0 0 0 0 rgba(245,208,50,.6); }
  70%  { box-shadow:0 0 0 8px rgba(245,208,50,0); }
  100% { box-shadow:0 0 0 0 rgba(245,208,50,0); }
}
.nbm-tab.nbm-ext-tab-pulse {
  animation:nbm-ext-tab-pulse-kf .8s ease-out 2;
  border-radius:8px;
}

/* ── New-user welcome tour: frozen Pro mockup ──
   During the settings steps the welcome tour reveals the Pro versions of the
   partner block + reminder options as a visual teaser, then lays this
   transparent blocker over the whole reminders card so none of those controls
   can be interacted with. It sits above the page but BELOW the tour card
   (z-index 9992) and the spotlight ring, so the card's buttons still work and
   the spotlighted area still reads as highlighted. Pointer events are caught
   and discarded here. */
.nbm-welcome-mockup-blocker {
  position:absolute;
  z-index:9991;
  background:transparent;
  cursor:default;
}
/* While shown as a mockup, the Pro partng block reads as a preview, not an
   editable form: dim it slightly and kill the text cursor so it's clearly a
   teaser. (Interaction is already blocked by the overlay above.) */
.nbm-welcome-mockup,
.nbm-welcome-mockup * {
  cursor:default !important;
}

/* ════════════════════════════════════════════════════
   BUDGET TAB — MOBILE DENSITY PASS (v6.6.30)
   Compact KPI summary + tighter cards so the budget table
   is reachable with far less scrolling on phones. Appended
   last on purpose: these win over the earlier ≤520 / ≤960
   responsive blocks by source order, without editing them.
   ════════════════════════════════════════════════════ */

/* Tablet / small window: 2-up KPI instead of one tall stack */
@media (max-width:960px) {
  .nbm-kpi-strip { grid-template-columns:1fr 1fr; gap:10px; }
  .nbm-kpi-balance { grid-column:1 / -1; }
}

/* Phone: compact KPI cards (income+expense share a row, balance full width)
   plus a denser table so more rows are visible at once. */
@media (max-width:520px) {
  .nbm-kpi-strip { grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
  .nbm-kpi-card { padding:11px 13px; }
  .nbm-kpi-label { font-size:.6rem; margin-bottom:4px; }
  .nbm-kpi-planned { font-size:.72rem; margin-bottom:1px; }
  .nbm-kpi-actual { font-size:1.35rem; }
  .nbm-kpi-delta { font-size:.7rem; margin-top:3px; min-height:0; }
  .nbm-kpi-balance { grid-column:1 / -1; }
  .nbm-kpi-balance-row { margin-top:6px; gap:14px; }
  .nbm-kpi-sub { margin-bottom:2px; }
  .nbm-kpi-balance-num { font-size:1.45rem; }

  /* Tighter cards + field rows. The editing-mode row rules are more specific
     (.nbm-section.editing-mode .nbm-row…) so long-press edit mode is untouched. */
  .nbm-card { padding:14px; margin-bottom:12px; }
  .nbm-row:not(.total):not(.hdr) { padding:10px !important; gap:8px !important; }
  .nbm-label-text { padding:3px 4px; font-size:.9rem; }
  .nbm-section { padding:8px 12px 6px; }
}

/* ═══════════════════════════════════════════════════
   BUDGET ROW — COMPACT MOBILE (v6.6.55)
   The 4-line stack (name / inputs / progress / action) was tall: only
   ~2-3 spend rows fit on a phone. This collapses it — the "+ רישום" log
   button moves up beside the inputs as a compact gold pill (still the
   obvious primary action), and the progress bar carries the %. Roughly
   doubles rows-per-screen. Mobile only, edit mode excluded; the desktop
   grid row is untouched. Appended last so it wins by source order.
   ═══════════════════════════════════════════════════ */
@media (max-width:520px) {
  .nbm-section:not(.editing-mode) .nbm-row:not(.total):not(.hdr) {
    display:grid !important;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "label  label"
      "inputs inputs"
      "prog   action";
    align-items:center;
    column-gap:9px !important;
    row-gap:7px !important;
    padding:9px 11px !important;
    margin-bottom:7px !important;
  }
  .nbm-section:not(.editing-mode) .nbm-label-cell     { grid-area:label; }
  .nbm-section:not(.editing-mode) .nbm-mobile-inputs  { grid-area:inputs; }
  .nbm-section:not(.editing-mode) .nbm-mobile-actions { grid-area:action; align-self:center; justify-content:flex-start; }
  .nbm-section:not(.editing-mode) .nbm-progress-cell  { grid-area:prog; }

  /* Log action → compact gold pill */
  .nbm-section:not(.editing-mode) .nbm-mobile-actions .nbm-quickadd-btn {
    background:var(--accent) !important; color:#221c10 !important;
    border:none !important; border-radius:var(--r-pill) !important;
    padding:8px 14px !important; font-size:.78rem !important;
    font-weight:700 !important; line-height:1.2; box-shadow:none;
  }
  .nbm-section:not(.editing-mode) .nbm-mobile-actions .nbm-quickadd-btn:active { filter:brightness(.95); }
}

/* ════════════════════════════════════════════════════
   תובנות (INSIGHTS) TAB — v6.6.31
   Takeaways lead; the two cashflow donuts are combined into one
   compact "planned vs actual" card; charts are shorter on phones.
   Card order lives in templates/app.php; this is the styling.
   ════════════════════════════════════════════════════ */

/* Two compact cashflow donuts side by side in a single card (all widths) */
.nbm-cashflow-pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start; }
.nbm-cashflow-cap  { text-align:center; font-size:.72rem; font-weight:700; color:var(--t2);
                     text-transform:uppercase; letter-spacing:.04em; }
.nbm-chart-wrap.sm { height:200px; margin-top:6px; }

/* Health insights is now a full-width, content-driven card — drop the old
   fixed 300px min-height that left empty space when it stood alone. */
.nbm-health-card { min-height:0; }

@media (max-width:520px) {
  /* Shorter charts so the insights tab leads with takeaways, not scroll */
  .nbm-chart-wrap      { height:200px; }
  .nbm-chart-wrap.tall { height:190px; }
  .nbm-chart-wrap.sm   { height:168px; }
  .nbm-charts-grid-2   { gap:12px; }
}

/* ════════════════════════════════════════════════════
   היסטוריה (HISTORY) TAB — v6.6.32
   Planned columns dropped everywhere. Phone & tablet show income / expense /
   balance; desktop (>=1200px) shows income / fixed / variable / surprise /
   balance. The expenses bar chart became a labelled cashflow-balance line.
   ════════════════════════════════════════════════════ */

/* Heading above the cashflow-balance line chart */
.nbm-hist-chart-title {
  font-size:.78rem; font-weight:700; color:var(--t2);
  margin:2px 0 8px; text-align:center;
  text-transform:uppercase; letter-spacing:.04em;
}
/* Chart sits in a .nbm-chart-wrap too; this wins by source order for height +
   adds the divider that the old bar chart used to carry. */
.nbm-hist-chart-wrap { height:200px; margin-bottom:16px;
  padding-bottom:16px; border-bottom:1px solid var(--b2); }

/* Responsive P&L columns. Mobile-first: phone + tablet show the single combined
   expense column and hide the 3 category columns. Desktop (>=1200px) flips it. */
.nbm-hist-tbl .col-cat       { display:none; }
.nbm-hist-tbl .col-exp-total { display:table-cell; }
@media (min-width:1200px) {
  .nbm-hist-tbl .col-cat       { display:table-cell; }
  .nbm-hist-tbl .col-exp-total { display:none; }
}

@media (max-width:520px) {
  .nbm-hist-chart-wrap { height:180px; }
}

/* ════════════════════════════════════════════════════
   NEGATIVE-NUMBER BIDI FIX — v6.6.33
   #nbm-app is dir:rtl, so a standalone value like "−₪500" let the minus drift
   to the visual RIGHT. Forcing LTR on the elements that hold a PURE number
   puts the minus back on the left. text-align is pinned to each element's
   existing alignment so nothing moves. The planned / delta KPIs are excluded
   on purpose: they mix Hebrew words with the number and always use Math.abs(),
   so they never render a minus and must stay RTL. The history table .num,
   the progress % and the goal % already carry this fix.
   ════════════════════════════════════════════════════ */
.nbm-kpi-balance-num,
.nbm-kpi-actual,
.nbm-num-cell {
  direction:ltr;
  unicode-bidi:isolate;
  text-align:right;   /* preserve the RTL-start (right) alignment */
}
.nbm-fc-kpi-val {     /* forecast values stay centered (inherits .nbm-fc-kpi) */
  direction:ltr;
  unicode-bidi:isolate;
}

/* iOS first-visit hint — a small card that slides up from the bottom with a
   tail pointing down at Safari's Share button. Shown once until dismissed.
   Lives on <body> (outside #nbm-app), so it sets its own dir/colors. */
.nbm-ios-hint {
  position:fixed; left:50%; z-index:9995;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  transform:translate(-50%, 160%); opacity:0;
  width:calc(100% - 28px); max-width:380px;
  background:var(--s1); border:1px solid var(--b3);
  border-radius:var(--r, 14px); box-shadow:0 16px 40px rgba(31,27,20,.28);
  padding:14px 16px;
  transition:transform .32s ease, opacity .32s ease;
}
.nbm-ios-hint.show { transform:translate(-50%, 0); opacity:1; }
.nbm-ios-hint-row { display:flex; align-items:center; gap:12px; cursor:pointer; }
.nbm-ios-hint-ico { font-size:1.5rem; flex-shrink:0; line-height:1; }
.nbm-ios-hint-txt { display:flex; flex-direction:column; gap:3px; }
.nbm-ios-hint-txt strong { font-size:.9rem; font-weight:800; color:var(--t1); }
.nbm-ios-hint-txt span   { font-size:.78rem; line-height:1.45; color:var(--t2); }
.nbm-ios-hint-x {
  position:absolute; top:6px; left:8px;
  background:none; border:none; cursor:pointer;
  font-size:1.2rem; line-height:1; padding:4px; color:var(--t3);
}
.nbm-ios-hint-x:hover { color:var(--t1); }
/* downward tail toward the Share button in Safari's bottom toolbar */
.nbm-ios-hint::after {
  content:''; position:absolute; left:50%; bottom:-9px; transform:translateX(-50%);
  width:0; height:0;
  border-left:9px solid transparent; border-right:9px solid transparent;
  border-top:9px solid var(--s1);
}

/* ════════════════════════════════════════════════════
   INSTALLMENT DEALS — עסקת תשלומים
   A small flag on any field whose deal covers the viewed month. For the
   CURRENT month the payment is already in the real cell, so the flag is just
   a marker (blue). For a FUTURE month the payment isn't written yet, so the
   flag shows the projected amount in grey (.future).
   ════════════════════════════════════════════════════ */
.nbm-inst-flag {
  display:inline-flex; align-items:center;
  font-size:.6rem; font-weight:700; line-height:1.4;
  color:var(--blue); background:rgba(74,127,200,.1);
  border:1px solid rgba(74,127,200,.28);
  padding:1px 7px; border-radius:var(--r-pill);
  white-space:nowrap; flex-shrink:0;
}
.nbm-inst-flag.future {
  color:var(--t3); background:rgba(0,0,0,.04);
  border-color:var(--b2); font-weight:600;
}

/* ══════════════════════════════════════════════
   OVERVIEW (budget-vs-actual bars + net cashflow)
   Compact replacement for the old KPI cards. Slim bars: fill = actual,
   marker = budget, so over/under reads at a glance. Income is never red.
   Net cashflow is coloured by beating the plan, not by its sign.
   ══════════════════════════════════════════════ */
.nbm-overview{
  display:flex; flex-direction:column; gap:11px;
  background:var(--s2); border:1px solid var(--b2);
  border-radius:var(--r-sm); padding:12px 14px; margin-bottom:14px;
}
.nbm-ov-bar{ display:flex; align-items:center; gap:10px; }
.nbm-ov-name{ font-size:.76rem; font-weight:700; color:var(--t2); width:46px; flex-shrink:0; }
.nbm-ov-val{ font-size:.92rem; font-weight:800; color:var(--t1); min-width:60px; flex-shrink:0; text-align:left; white-space:nowrap; }
.nbm-ov-track{
  position:relative; flex:1; height:10px; border-radius:999px; background:var(--s4);
}
.nbm-ov-fill{
  position:absolute; inset-inline-start:0; top:0; height:100%;
  border-radius:999px; background:var(--blue);
  transition:width .4s var(--ease), background .25s var(--ease);
}
.nbm-ov-marker{
  position:absolute; top:-3px; height:16px; width:2px;
  background:var(--t1); border-radius:1px;
}
.nbm-ov-cash{
  display:flex; align-items:baseline; gap:8px;
  border-top:1px solid var(--b2); padding-top:10px;
}
.nbm-ov-cash-label{ font-size:.78rem; font-weight:700; color:var(--t2); }
.nbm-ov-cash-val{ font-size:1.1rem; font-weight:800; }
.nbm-ov-cash-note{ font-size:.7rem; font-weight:600; margin-inline-start:auto; }

/* ── Budget suggestion (trigger + modal list) ── */
.nbm-suggest-row{ display:flex; justify-content:flex-start; margin:-6px 0 12px; }
.nbm-suggest-btn{
  background:none; border:1px dashed var(--b3); color:var(--t2);
  font-size:.74rem; font-weight:700; padding:6px 12px;
  border-radius:var(--r-pill); cursor:pointer; font-family:inherit;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.nbm-suggest-btn:hover{ color:var(--t1); border-color:var(--t3); }
.nbm-suggest-btn:disabled{ opacity:.5; cursor:wait; }
.nbm-sg-list{ display:flex; flex-direction:column; max-height:46vh; overflow-y:auto; }
.nbm-sg-row{
  display:flex; align-items:center; gap:8px; padding:8px 6px;
  border-bottom:1px solid var(--b2); cursor:pointer; font-size:.82rem;
}
.nbm-sg-row:last-child{ border-bottom:none; }
.nbm-sg-row.info{ opacity:.55; cursor:default; }
.nbm-sg-check{ width:15px; height:15px; accent-color:var(--blue); flex-shrink:0; cursor:pointer; }
.nbm-sg-label{
  color:var(--t1); font-weight:600; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.nbm-sg-reason{ color:var(--t3); font-size:.66rem; margin-inline-start:auto; flex-shrink:0; }
.nbm-sg-amt{ color:var(--t1); font-weight:800; flex-shrink:0; min-width:64px; text-align:left; }

/* ===== BEITI CALCULATORS (מחשבונים tab) v6.6.59 =====
   Scoped under #tab-tools, with !important on the props the host theme forces on
   <button> (background/color/border/display/padding). The theme uses !important
   and out-specifies bare classes — that is why the first cut rendered as black
   billboards. Light cream tokens throughout. */
#tab-tools .nbm-calc-card{ background:var(--s1); border:1px solid var(--b1); border-radius:var(--r); margin-bottom:var(--s-3); overflow:hidden; box-shadow:var(--sh1); }
#tab-tools .nbm-calc-head{ display:flex !important; width:100%; box-sizing:border-box; align-items:center; justify-content:space-between; gap:var(--s-3); margin:0 !important; padding:15px 16px !important; cursor:pointer; background:transparent !important; color:var(--t1) !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; text-align:right; text-transform:none !important; font-family:Heebo,sans-serif !important; font-size:var(--fs-md) !important; font-weight:600 !important; line-height:1.3 !important; min-height:0 !important; }
#tab-tools .nbm-calc-head:hover{ background:var(--s2) !important; }
#tab-tools .nbm-calc-card.open .nbm-calc-head{ border-bottom:1px solid var(--b1) !important; }
#tab-tools .nbm-calc-title{ color:var(--t1); }
#tab-tools .nbm-calc-chev{ color:var(--accent-dk); font-size:var(--fs-md); line-height:1; transition:transform var(--ease); }
#tab-tools .nbm-calc-card.open .nbm-calc-chev{ transform:rotate(180deg); }
#tab-tools .nbm-calc-body{ display:none; padding:var(--s-4); }
#tab-tools .nbm-calc-card.open .nbm-calc-body{ display:block; }
#tab-tools .nbm-calc-intro{ font-size:var(--fs-sm); color:var(--t3); margin:0 0 var(--s-4); line-height:1.55; }
#tab-tools .nbm-calc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); }
#tab-tools .nbm-calc-field{ display:flex; flex-direction:column; gap:6px; font-size:var(--fs-sm); color:var(--t2); }
#tab-tools .nbm-calc-extra{ margin-top:var(--s-4); }
#tab-tools .nbm-calc-input{ width:100%; box-sizing:border-box; padding:11px 12px !important; background:var(--input-bg) !important; border:1px solid var(--input-border) !important; border-radius:var(--r-sm) !important; color:var(--t1) !important; font-family:Heebo,sans-serif !important; font-size:var(--fs-base) !important; text-align:right; }
#tab-tools .nbm-calc-input:focus{ outline:none !important; border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-dim) !important; }
#tab-tools .nbm-calc-input::placeholder{ color:var(--t3); opacity:.65; }
#tab-tools select.nbm-calc-input{ cursor:pointer; min-height:44px; }
#tab-tools .nbm-calc-rows{ display:flex; flex-direction:column; gap:var(--s-3); }
#tab-tools .nbm-calc-row{ background:var(--s2); border-radius:var(--r-sm); padding:var(--s-3); }
#tab-tools .nbm-calc-row-top{ display:flex; gap:var(--s-2); margin-bottom:var(--s-2); }
#tab-tools .nbm-calc-row-top .nbm-calc-input{ flex:1; }
#tab-tools .nbm-calc-row-bot{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--s-2); }
#tab-tools .nbm-calc-row-bot2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-2); }
#tab-tools .nbm-calc-debt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-2); }
#tab-tools .nbm-calc-debt-grid .nbm-calc-field{ font-size:var(--fs-xs); }
#tab-tools .nbm-calc-output{ scroll-margin-top:80px; }
#tab-tools .nbm-calc-del{ flex:0 0 auto; width:40px; display:flex !important; align-items:center; justify-content:center; margin:0 !important; padding:0 !important; cursor:pointer; background:transparent !important; color:var(--red) !important; border:1px solid var(--b2) !important; border-radius:var(--r-sm) !important; box-shadow:none !important; font-size:1.3rem !important; line-height:1 !important; }
#tab-tools .nbm-calc-add{ display:inline-block !important; margin:var(--s-3) 0 0 !important; padding:9px 16px !important; cursor:pointer; background:transparent !important; color:var(--t2) !important; border:1px dashed var(--b3) !important; border-radius:var(--r-sm) !important; box-shadow:none !important; font-family:Heebo,sans-serif !important; font-size:var(--fs-sm) !important; font-weight:500 !important; text-transform:none !important; }
#tab-tools .nbm-calc-add:disabled{ opacity:.4; cursor:default; }
#tab-tools .nbm-calc-go{ display:block !important; width:100%; box-sizing:border-box; margin:var(--s-5) 0 0 !important; padding:13px !important; cursor:pointer; text-align:center; background:var(--accent) !important; color:#1a1200 !important; border:0 !important; border-radius:var(--r-sm) !important; box-shadow:var(--sh1) !important; font-family:Heebo,sans-serif !important; font-size:var(--fs-base) !important; font-weight:700 !important; text-transform:none !important; }
#tab-tools .nbm-calc-go:hover{ background:var(--accent-dk) !important; }
#tab-tools .nbm-sb-savings{ margin-top:var(--s-5); background:rgba(242,197,0,0.10); border-radius:var(--r-sm); padding:13px 15px; font-size:var(--fs-base); color:var(--t1); line-height:1.6; }
#tab-tools .nbm-sv-amt{ color:#B8860B; font-weight:700; }
#tab-tools .nbm-course{ margin-top:var(--s-5); background:rgba(242,197,0,0.07); border:1px solid rgba(242,197,0,0.55); border-radius:var(--r-sm); padding:18px 16px; }
#tab-tools .nbm-course-pitch{ margin:0 0 14px; font-size:var(--fs-sm); color:var(--t2); line-height:1.7; }
#tab-tools .nbm-course-btn{ display:inline-block !important; width:auto !important; margin:0 !important; padding:12px 24px !important; cursor:pointer; background:#F2C500 !important; color:#282828 !important; border:0 !important; border-radius:var(--r-sm) !important; box-shadow:var(--sh1) !important; font-family:Heebo,sans-serif !important; font-size:var(--fs-base) !important; font-weight:700 !important; text-transform:none !important; }
#tab-tools .nbm-course-btn:hover{ background:#D9B200 !important; }
#tab-tools .nbm-course-btn:disabled{ opacity:.6; cursor:default; }
#tab-tools .nbm-course-err{ margin:10px 0 0; font-size:var(--fs-sm); color:var(--red); }
#tab-tools .nbm-course-success{ margin-top:4px; background:rgba(242,197,0,0.10); border:1px solid rgba(242,197,0,0.55); border-radius:var(--r-sm); padding:16px; font-size:var(--fs-sm); color:var(--t1); line-height:1.7; text-align:center; }
#tab-tools .nbm-course-form{ display:none !important; }
#tab-tools .nbm-calc-output{ margin-top:var(--s-5); }
#tab-tools .nbm-calc-kpis{ display:flex; flex-wrap:wrap; gap:var(--s-2); }
#tab-tools .nbm-calc-kpi{ flex:1 1 calc(50% - var(--s-2)); display:flex; flex-direction:column; gap:3px; background:var(--s2); border-radius:var(--r-sm); padding:var(--s-3); }
#tab-tools .nbm-calc-kpi.full{ flex-basis:100%; }
#tab-tools .nbm-calc-kpi-l{ font-size:var(--fs-xs); color:var(--t3); }
#tab-tools .nbm-calc-kpi-v{ font-size:var(--fs-md); font-weight:700; color:var(--t1); }
#tab-tools .nbm-calc-kpi-v.big{ font-size:var(--fs-lg); color:#B8860B; }
#tab-tools .nbm-calc-kpi-v.pos{ color:#B8860B; }
#tab-tools .nbm-calc-chart-wrap{ position:relative; height:220px; margin-top:var(--s-4); }
#tab-tools .nbm-calc-note{ font-size:var(--fs-sm); color:var(--t2); margin:var(--s-2) 0 0; line-height:1.6; background:var(--s2); border-radius:var(--r-sm); padding:var(--s-3); }
#tab-tools .nbm-calc-table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
#tab-tools .nbm-calc-table th{ color:var(--t3); font-weight:500; text-align:left; padding:7px 8px; border-bottom:1px solid var(--b1); }
#tab-tools .nbm-calc-table th:first-child{ text-align:right; }
#tab-tools .nbm-calc-table td{ padding:9px 8px; text-align:left; color:var(--t1); border-bottom:1px solid var(--b1); }
#tab-tools .nbm-calc-table td:first-child{ text-align:right; color:var(--t2); font-weight:600; }

/* ── Collapse override for mobile ─ the card layout sets row display with !important,
   so the collapse hide needs to outrank it here (v6.6.73). ── */
@media(max-width:520px){
  .nbm-section.collapsed > .nbm-row:not(.total):not(.hdr),
  .nbm-section.collapsed > .nbm-row.total,
  .nbm-section.collapsed > .nbm-add-row { display:none !important; }
}

/* ── Mortgage calculator (v7.1.3) ─ chunky sliders + track-mix bar ── */
.nbm-mtg-field { margin-bottom:18px; }
.nbm-mtg-lab { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px; }
.nbm-mtg-lab > span { font-size:.85rem; font-weight:700; color:var(--t1); }
.nbm-mtg-lab .nbm-mtg-num { max-width:150px; text-align:center; font-weight:800; }
.nbm-mtg-range { -webkit-appearance:none; appearance:none; width:100%; height:10px; border-radius:6px;
  background:#EDE6D3; outline:none; cursor:pointer; margin:2px 0 5px; }
.nbm-mtg-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:26px; height:26px;
  border-radius:50%; background:#fff; border:4px solid #F2C500; box-shadow:0 1px 4px rgba(0,0,0,.28); cursor:pointer; }
.nbm-mtg-range::-moz-range-thumb { width:26px; height:26px; border-radius:50%; background:#fff;
  border:4px solid #F2C500; box-shadow:0 1px 4px rgba(0,0,0,.28); cursor:pointer; }
.nbm-mtg-range::-moz-range-track { height:10px; border-radius:6px; background:transparent; }
.nbm-mtg-minmax { display:flex; justify-content:space-between; font-size:.68rem; color:var(--t3); }
.nbm-mtg-mix-title { font-weight:800; font-size:.9rem; color:var(--t1); margin:16px 0 6px; }
.nbm-mtg-bar { display:flex; height:14px; border-radius:7px; overflow:hidden; margin-bottom:12px; }
.nbm-mtg-bar > div { flex:1; }
.nbm-mtg-seg1 { background:#F2C500; }
.nbm-mtg-seg2 { background:#8E7D5A; }
.nbm-mtg-seg3 { background:#CE4F2C; }
.nbm-mtg-leg { display:flex; flex-direction:column; gap:8px; }
.nbm-mtg-leg-row { display:flex; align-items:center; justify-content:space-between; font-size:.8rem; color:var(--t1); }
.nbm-mtg-leg-row .r { display:flex; align-items:center; gap:8px; font-weight:600; }
.nbm-mtg-dot { width:11px; height:11px; border-radius:50%; display:inline-block; flex:0 0 auto; }
.nbm-mtg-leg-row .p { font-weight:800; }

/* v7.5.3 — ledger-derived read-only actual on the budget tab */
.nbm-actual-cell{
  display:block; width:100%; box-sizing:border-box;
  font-family:'Heebo',sans-serif; font-size:.875rem; font-weight:700;
  color:var(--green); direction:ltr; text-align:center;
  padding:5px 8px; cursor:pointer;
  background:var(--s2); border:1px solid var(--b2); border-radius:var(--r-xs);
}
.nbm-actual-cell:hover{ border-color:var(--accent); }
.nbm-actual-cell.over{ color:var(--red); }

/* v7.5.5 — long-press wiggle-to-delete on ledger cards */
.nbm-led-card.armed{ animation: nbm-shake .42s ease-in-out infinite; background:var(--s2); }
.nbm-led-del-badge{
  display:inline-block; margin-top:9px;
  background:var(--red); color:#fff; border:none; border-radius:8px;
  font-family:'Heebo',sans-serif; font-weight:800; font-size:.78rem;
  padding:7px 16px; cursor:pointer;
}
.nbm-cell-input.planned{ text-align:center; }

/* ── compound calc: surplus auto-fill button + result states ── */
.nbm-calc-surplus{
  display:block; width:100%; margin:10px 0 0;
  background:#fbf4d6; color:#5c5220; border:1px solid #f0e2a8;
  font-family:inherit; font-size:.9rem; font-weight:700;
  padding:11px 12px; border-radius:11px; cursor:pointer;
}
.nbm-calc-surplus:hover{ background:#f8edc0; }
.nbm-calc-surplus:disabled{ opacity:.6; cursor:default; }
.nbm-surplus-msg{ margin-top:10px; }
.nbm-surplus-card{ border-radius:12px; padding:13px 14px; font-size:.85rem; line-height:1.6; }
.nbm-surplus-card p{ margin:0 0 8px; }
.nbm-surplus-card p:last-child{ margin-bottom:0; }
.nbm-surplus-card.info{ background:var(--s2,#f4efe0); border:1px solid var(--b2,#e2dccb); color:#5c5544; }
.nbm-surplus-card.warn{ background:#fdeee6; border:1px solid #f4c9b3; color:#7a3d20; }
.nbm-surplus-card.good{ background:#eaf6ec; border:1px solid #bfe3c6; color:#1f5b2e; }
.nbm-surplus-card .nbm-surplus-fine{ font-size:.72rem; opacity:.82; }
.nbm-surplus-card .nbm-surplus-course{ font-weight:700; margin-top:4px; }
.nbm-surplus-cta{
  display:inline-block; margin-top:4px; text-decoration:none;
  background:#17140d; color:#F0C944; font-weight:700; font-size:.82rem;
  padding:9px 14px; border-radius:9px;
}
.nbm-surplus-cta:hover{ opacity:.92; }

/* ── v7.17.0: two-column notification frequency (email | push) ── */
.nbm-notif-split{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.nbm-notif-col{ min-width:0; }
.nbm-notif-col-title{ font-size:.9rem; font-weight:700; margin:0 0 10px; color:var(--t2); }
@media (max-width:560px){ .nbm-notif-split{ grid-template-columns:1fr; gap:24px; } }