:root { color-scheme: light; }
* { box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  background: #f6f6f6;
  color: #222;
}
.page-shell { max-width: 1200px; margin: 0 auto; padding: 2rem; }
h1 { margin: 0; }
h2 { margin-top: 0; }
.app-brand-header { display: flex; align-items: center; gap: .9rem; margin-bottom: .8rem; }
.app-brand-logo { width: 64px; height: 64px; object-fit: contain; flex: 0 0 64px; }
.subtitle, .hint, .footnote { color: #555; }
.subtitle { margin: .15rem 0 0; }
.top-nav { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin: 1rem 0; }
.nav-button, button, .button-link {
  border: 1px solid #aaa;
  border-radius: 6px;
  padding: .55rem .8rem;
  background: #fff;
  color: #222;
  font: inherit;
  cursor: pointer;
}
.nav-button.active { font-weight: 700; }
.nav-button:disabled { opacity: .45; cursor: default; }
.prototype-label { margin-left: auto; color: #666; font-size: .9rem; }
.cards { display: flex; gap: .75rem; margin: 1.25rem 0; flex-wrap: wrap; }
.forecast-summary-cards { display: grid; grid-template-columns: repeat(4, minmax(190px, 1fr)); }
.card, .form-card {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: .85rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.card strong { display: block; font-size: 1.4rem; margin-top: .25rem; }
.card small { display: block; color: #666; line-height: 1.35; margin-top: .3rem; }
.summary-card-title { font-weight: 700; }
.privacy-card { background: #eef8ee; }
.form-card { margin: 1rem 0; }
details summary { cursor: pointer; font-weight: 700; font-size: 1.15rem; }
.collapsible-content { margin-top: 1rem; }
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: .8rem; align-items: end; }
label { display: block; font-weight: 600; margin-bottom: .25rem; }
input {
  width: 100%;
  border: 1px solid #aaa;
  border-radius: 5px;
  padding: .5rem;
  font: inherit;
  background: #fff;
}
.checkbox-row { margin-top: .8rem; }
.checkbox-row label { display: inline-flex; align-items: center; gap: .35rem; font-weight: 400; }
.checkbox-row input { width: auto; }
.inline-form { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(150px, 220px) auto; gap: .7rem; align-items: end; }
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid #ddd; border-radius: 8px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .65rem; border-bottom: 1px solid #e4e4e4; text-align: left; vertical-align: middle; }
th { background: #f0f0f0; }
.positive { color: #166534; }
.negative { color: #9b1c1c; }
.actions { white-space: nowrap; }
.delete-button { border-color: #c77; }
.notice { background: #fff8d8; border: 1px solid #e0c86a; border-radius: 6px; padding: .7rem; margin: .8rem 0; }
.section-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-top: 1.3rem; }
.section-heading h2 { margin: 0; }
.footnote { font-size: .9rem; margin-top: 1rem; }
@media (max-width: 850px) {
  .forecast-summary-cards { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}
@media (max-width: 600px) {
  .page-shell { padding: 1rem; }
  .app-brand-logo { width: 52px; height: 52px; flex-basis: 52px; }
  .form-grid, .inline-form { grid-template-columns: 1fr; }
  .prototype-label { width: 100%; margin-left: 0; }
}

/* Prototype 0.2 additions */
.error-notice { border-color: #c77 !important; background: #fff0f0 !important; }
.actions { display: flex; gap: .4rem; }
.button-cell { display: flex; gap: .45rem; align-items: end; }
.manager-card summary { font-size: 1.25rem; }
.manager-add-form { display: flex; gap: .6rem; max-width: 560px; margin-bottom: 1rem; }
.manager-inline-form { display: flex; gap: .4rem; align-items: center; min-width: 260px; }
.manager-inline-form input, .manager-inline-form select { min-width: 150px; }
select { border: 1px solid #aaa; border-radius: 5px; padding: .5rem; font: inherit; background: #fff; }
@media (max-width: 700px) {
  .manager-add-form, .manager-inline-form { flex-direction: column; align-items: stretch; min-width: 180px; }
}

/* Prototype 0.4 repeating items */
.recurring-card { border-color:#cfd8cf; }
.recurring-form-grid { grid-template-columns: repeat(4, minmax(150px,1fr)); }
.recurring-table-wrap { margin-top:1rem; }
.check-now-row { margin-top:1rem; }
[hidden] { display:none !important; }
@media (max-width:850px){.recurring-form-grid{grid-template-columns:repeat(2,minmax(150px,1fr));}}
@media (max-width:600px){.recurring-form-grid{grid-template-columns:1fr;}}

.recurring-badge{display:inline-block;margin-left:.35rem;padding:.08rem .35rem;border:1px solid #bbb;border-radius:999px;font-size:.72rem;color:#555;background:#f7f7f7;}


/* Prototype 0.6 budgets */
.budgets-section { border-color:#d7d4c7; }
.budget-inner-card { box-shadow:none; background:#fafafa; }
.budget-cards { display:grid; grid-template-columns:repeat(3,minmax(180px,1fr)); }
.budget-mini-row { display:grid; grid-template-columns:minmax(80px,1fr) auto; gap:.15rem .5rem; padding:.28rem 0; border-bottom:1px solid #eee; font-size:.86rem; }
.budget-mini-total { font-weight:700; border-top:1px solid #ccc; border-bottom:0; margin-top:.25rem; padding-top:.45rem; }
.budget-status { display:inline-block; font-size:.78rem; border-radius:999px; padding:.08rem .38rem; background:#f2f2f2; }
.budget-watch { background:#fff5cc; }
.budget-warning { background:#ffe0b8; }
.budget-over { background:#ffe0e0; }
@media(max-width:900px){.forecast-summary-cards{grid-template-columns:repeat(2,minmax(210px,1fr));}.budget-cards{grid-template-columns:1fr;}}
@media(max-width:600px){.forecast-summary-cards{grid-template-columns:1fr;}}


/* Prototype 0.7: separate browser-side views */
.app-view[hidden] { display: none !important; }
.top-nav { align-items: center; flex-wrap: wrap; }
.top-nav .prototype-label { margin-left: auto; }
.nav-button.active { font-weight: 700; background: #fff; border-color: #999; }
.manager-card { margin-top: 0; }
@media (max-width: 760px) {
  .top-nav .prototype-label { width: 100%; margin-left: 0; margin-top: .35rem; }
}


/* Prototype 0.8 reports */
.report-question-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:.75rem;margin:1rem 0 1.2rem}.report-question-card{text-align:left;padding:1rem;display:flex;flex-direction:column;gap:.3rem;background:#fff}.report-question-card strong{font-size:1rem}.report-question-card span{color:#666;font-size:.9rem}.report-question-card.active{border-color:#777;box-shadow:0 0 0 1px #aaa inset}.report-controls{box-shadow:none}.chart-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:1rem;margin:1rem 0}.chart-card{background:#fff;border:1px solid #ddd;border-radius:8px;padding:1rem}.report-bar-row{display:grid;grid-template-columns:minmax(120px,1fr) minmax(140px,3fr) auto;gap:.6rem;align-items:center;margin:.55rem 0}.report-bar-track{height:14px;background:#eee;border-radius:999px;overflow:hidden}.report-bar-fill{height:100%;background:#888;border-radius:999px}.report-note{background:#f7f7f7;border-left:4px solid #aaa;padding:.75rem 1rem}.form-actions{margin-top:1rem}.what-if-new-row input,.what-if-new-row select{min-width:120px}@media(max-width:760px){.report-question-grid,.chart-grid{grid-template-columns:1fr}.report-bar-row{grid-template-columns:1fr}.report-bar-track{width:100%}}
@media print{.top-nav,.report-question-grid,.report-controls,#print-report,.footnote{display:none!important}.page-shell{max-width:none;padding:0}.app-view[hidden]{display:none!important}}

.category-check-grid{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:.35rem .8rem;margin-top:.5rem}.category-check-label{font-weight:400;display:flex;align-items:center;gap:.35rem}.category-check-label input{width:auto}@media(max-width:700px){.category-check-grid{grid-template-columns:1fr 1fr}}


/* Prototype 0.9: Welcome/Setup + Settings */
.setup-progress{padding:14px 20px;margin-bottom:18px;display:flex;gap:22px;flex-wrap:wrap;background:#fff;border:1px solid #d9dde3;border-radius:10px}.setup-progress span{color:#777}.setup-progress span.current{font-weight:700;color:#205a96}.setup-added-list{margin:1rem 0}.setup-added-list ul{margin:.5rem 0 1rem}.muted-card{background:#fafafa}.settings-view h3,.setup-view h3{margin-top:0}.setup-step .form-actions{margin-top:18px}.setup-next-row{border-top:1px solid #e4e6e9;padding-top:18px;margin-top:22px}

.table-sort-button{background:none;border:0;padding:0;color:inherit;font:inherit;font-weight:700;cursor:pointer}.transaction-filter-form .form-actions{align-self:end}.history-view .actions,.all-transactions-view .actions{white-space:nowrap}.source-label{white-space:nowrap}


/* Transaction state cues */
tbody tr.cleared-row > td { background: #e8f5e9; }
tbody tr.cleared-row:hover > td { background: #dff0e2; }
tbody tr.highlight > td { background: #fff7d6; font-weight: 600; }
tbody tr.highlight > td:first-child { border-left: 5px solid #d8a600; }
tbody tr.highlight:hover > td { background: #fff1b8; }
.inline-transaction-editor td { padding: 0.8rem; }
.inline-edit-card { margin: 0; padding: 0.8rem; border: 1px solid #d7d7d7; border-radius: 8px; background: #fafafa; }
.inline-edit-card .form-grid { margin-bottom: 0.4rem; }
.inline-edit-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

/* Prototype 0.14 — visual parity / polish pass */
body {
  background: #f6f6f6;
  color: #222;
  line-height: 1.35;
}
.page-shell {
  max-width: 1600px;
  margin: 0 auto;
  padding: 1.6rem 2rem 2rem;
}
.app-brand-header {
  gap: .9rem;
  margin-bottom: .15rem;
}
.app-brand-logo {
  width: 64px;
  height: 64px;
  flex-basis: 64px;
}
.app-brand-header h1 {
  font-size: 2rem;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.subtitle {
  margin: .1rem 0 0;
  color: #555;
  font-size: .98rem;
}
.top-nav {
  display: flex;
  gap: .35rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 1rem 0 1.25rem;
  padding: .5rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.top-nav .nav-button,
.top-nav #export-csv {
  width: auto;
  padding: .35rem .55rem;
  border: 1px solid #c7d9ee;
  border-radius: 5px;
  background: #eef4fb;
  color: #24598f;
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.2;
}
.top-nav .nav-button:hover,
.top-nav #export-csv:hover {
  background: #dbeafb;
  color: #123d66;
}
.top-nav .nav-button.active {
  background: #dbeafb;
  color: #123d66;
  border-color: #a9c6e5;
  font-weight: 800;
  box-shadow: none;
}
.cards { margin: 1.1rem 0; }
.forecast-summary-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(210px, 1fr)) minmax(500px, 1.65fr);
  align-items: stretch;
  gap: .75rem;
}
.forecast-summary-cards .card { min-width: 0; }
.card, .form-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: .85rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.summary-card-title {
  font-weight: 700;
  font-size: 1.08rem;
  margin-bottom: .35rem;
}
.card strong {
  font-size: 1.42rem;
  margin-top: .15rem;
  font-variant-numeric: tabular-nums;
}
.card small {
  display: block;
  margin-top: .25rem;
  color: #666;
  line-height: 1.3;
}
.forecast-summary-cards .card small { max-width: 25ch; }
.forecast-summary-cards .budget-summary-card > small { max-width: 42ch; }
.budget-summary-card .budget-mini-list { gap: .16rem; }
.budget-mini-row {
  grid-template-columns: minmax(115px,1fr) auto auto;
  gap: .15rem .5rem;
  padding: .18rem 0;
  font-size: .84rem;
  align-items: center;
}
.budget-mini-row > .budget-status {
  grid-column: auto;
  white-space: nowrap;
}
.budget-mini-row strong {
  display: inline;
  font-size: .84rem;
  margin: 0;
  text-align: right;
  white-space: nowrap;
}
.budget-mini-total { padding-top: .35rem; }
.budget-status {
  font-weight: 800;
  border: 1px solid #b9e2c0;
  background: #e8f5e9;
  color: #146c2e;
}
.budget-watch { background:#fff7d6; color:#725600; border-color:#ead47a; }
.budget-warning { background:#ffe8cc; color:#8a4b00; border-color:#e3b06f; }
.budget-over { background:#fde2e2; color:#9d1c1c; border-color:#e5a4a4; }

/* Current My Money Center-style collapsible form */
details.form-card {
  padding: 0;
  overflow: hidden;
  margin: 1.15rem 0 1rem;
}
details.form-card summary {
  list-style: none;
  padding: .8rem 1rem;
  font-size: 1.18rem;
  font-weight: 800;
}
details.form-card summary::-webkit-details-marker { display:none; }
details.form-card summary::before {
  content: "▶";
  display: inline-block;
  margin-right: .5rem;
  font-size: .9em;
  transition: transform .15s ease;
}
details.form-card[open] summary::before { transform: rotate(90deg); }
details.form-card .collapsible-content { padding: 0 1rem 1rem; }
.form-grid {
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  gap: .75rem .85rem;
}
label { font-size: .94rem; }
input, select {
  border-color: #bbb;
  padding: .48rem .52rem;
}
.checkbox-row { display:flex; gap:1rem; align-items:center; margin-top:.55rem; }
.checkbox-row label { margin:0; font-weight:500; }
button, .button-link {
  border: 0;
  border-radius: 5px;
  padding: .6rem 1rem;
  background: #2f6fb3;
  color: #fff;
  font-weight: 700;
}
button:hover, .button-link:hover { background:#24598f; }
button.secondary { background:#666; color:#fff; border:0; }
button.secondary:hover { background:#444; }
.delete-button {
  background:#9d1c1c;
  color:#fff;
  border:0;
  padding:.35rem .6rem;
  font-size:.84rem;
}
.delete-button:hover { background:#751313; }

/* Forecast register */
.forecast-dev-controls { display:none; }
.table-wrap {
  border: 0;
  border-radius: 0;
  overflow-x: auto;
  background: transparent;
}
table {
  width: 100%;
  border-collapse: collapse;
  background:#fff;
  border:1px solid #ddd;
}
th, td {
  padding: .58rem .65rem;
  border-bottom:1px solid #eee;
  text-align:left;
  vertical-align:middle;
}
th {
  background:#efefef;
  font-size:.91rem;
  font-weight:800;
  white-space:nowrap;
}
td { font-size:.93rem; }
td.positive, td.negative {
  font-weight:700;
  min-width:6.3rem;
  font-variant-numeric:tabular-nums;
}
.positive { color:#146c2e; }
.negative { color:#a00000; }
.recurring-badge {
  margin-left:.4rem;
  padding:.1rem .35rem;
  border:0;
  background:#e7f0fb;
  color:#205a96;
  font-size:.72rem;
  font-weight:700;
  vertical-align:middle;
}
.actions { gap:.3rem; }
table button, table .button-link {
  width:auto;
  min-height:0;
  padding:.35rem .58rem;
  font-size:.82rem;
  line-height:1.15;
  white-space:nowrap;
}
table .edit-button,
table button.edit-button { background:#666; color:#fff; border:0; }
table .edit-button:hover,
table button.edit-button:hover { background:#444; }
tbody tr.cleared-row > td { background:#e8f5e9; }
tbody tr.cleared-row:hover > td { background:#dff0e2; }
tbody tr.highlight > td { background:#fff7d6; font-weight:600; }
tbody tr.highlight > td:first-child { border-left:5px solid #d8a600; }
tbody tr.highlight:hover > td { background:#fff1b8; }
.notice {
  background:#fff7d6;
  border:1px solid #e0c86a;
  border-radius:6px;
  padding:.65rem .8rem;
  margin:.75rem 0;
}
.error-notice { background:#fdeeee !important; border-color:#d78d8d !important; }
.footnote, .app-footer {
  color:#777;
  font-size:.82rem;
}
.app-footer {
  margin-top:2rem;
  padding:.8rem 0 0;
  border-top:1px solid #ddd;
}

/* Keep utility and secondary views comfortable with the same visual language */
.section-heading { margin-top:1rem; }
.section-heading h2 { font-size:1.55rem; }
.manager-card, .budgets-section, .safe-spending-section, .report-controls { margin-top:0; }
.report-question-card { border:1px solid #c7d9ee; }
.report-question-card.active { background:#eef4fb; border-color:#8fb4da; }

@media (max-width: 1500px) {
  .forecast-summary-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .forecast-summary-cards .budget-summary-card { grid-column:1 / -1; }
}
@media (max-width: 900px) {
  .page-shell { padding:1.2rem; }
  .forecast-summary-cards { grid-template-columns:1fr; }
  .forecast-summary-cards .budget-summary-card { grid-column:auto; }
  .budget-mini-row { grid-template-columns:minmax(110px,1fr) auto auto; }
}
@media (max-width: 700px) {
  .budget-mini-row { grid-template-columns:minmax(110px,1fr) auto; }
  .budget-mini-row > .budget-status { grid-column:1 / -1; justify-self:start; }
  .budget-mini-total > span:last-child { grid-column:1 / -1; }
}
@media (max-width: 650px) {
  .app-brand-logo { width:52px; height:52px; flex-basis:52px; }
  .app-brand-header h1 { font-size:1.65rem; }
  .page-shell { padding:.9rem; }
}


/* Prototype 0.16 parity + layout fixes */
.settings-account-grid {
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(340px,1fr) minmax(190px,.55fr);
  gap:.85rem 1rem;
  align-items:start;
}
.settings-account-grid > div {
  align-self:start;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.settings-account-grid label { min-height:1.3em; }
.settings-account-grid .hint { margin:.55rem 0 0; }

.report-question-grid { grid-template-columns:repeat(6,minmax(150px,1fr)); gap:.75rem; }
.report-question-card, button.report-question-card {
  background:#fff;
  color:#205a96;
  border:1px solid #d5d5d5;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  border-radius:8px;
  padding:1rem;
  min-height:145px;
  font-weight:400;
}
.report-question-card strong { color:#205a96; font-size:1.05rem; line-height:1.25; }
.report-question-card span { color:#444; font-size:.92rem; line-height:1.3; }
.report-question-card:hover, button.report-question-card:hover { background:#f8fbff; color:#205a96; }
.report-question-card.active, button.report-question-card.active {
  background:#eaf3fd;
  color:#205a96;
  border-color:#75a9d8;
  box-shadow:0 0 0 1px #b6d2ec inset;
}

.safe-spend-dialog {
  width:min(900px,calc(100vw - 2rem));
  max-width:900px;
  border:0;
  border-radius:12px;
  padding:1.4rem;
  box-shadow:0 12px 45px rgba(0,0,0,.35);
  color:#222;
}
.safe-spend-dialog::backdrop { background:rgba(0,0,0,.38); }
.safe-spend-dialog h2 { margin:0 0 .8rem; }
.safe-modal-cards { display:grid; grid-template-columns:repeat(2,minmax(240px,1fr)); gap:.75rem; margin:.8rem 0; }
.safe-spend-modal-actions { display:flex; gap:.6rem; margin-top:1rem; flex-wrap:wrap; }

/* Full Safe Spending page: don't let the controls collapse into skinny columns. */
.safe-spending-section { padding:1.15rem 1.25rem; }
.safe-spending-section #safe-spending-settings-form > .checkbox-row { margin:.9rem 0 1rem; }
.safe-spending-section #safe-spending-settings-form > .form-grid {
  display:grid;
  grid-template-columns:minmax(320px,1fr) minmax(260px,1fr);
  gap:1rem 1.25rem;
  align-items:start;
}
.safe-spending-section #safe-spending-settings-form > .form-grid > div { align-self:start; }
.safe-spending-section #safe-spending-settings-form .button-cell {
  grid-column:1 / -1;
  align-items:center;
  margin-top:.15rem;
}
.safe-spending-section #safe-spending-settings-form .button-cell button { width:auto; }
.safe-spending-section .safe-category-choices { grid-column:1 / -1 !important; margin-top:.15rem; }
.safe-spending-section .safe-category-choices > label { font-size:1rem; margin-top:.2rem; }
.safe-spending-section .safe-spending-cards {
  display:grid;
  grid-template-columns:repeat(4,minmax(180px,1fr));
  gap:.75rem;
}
.safe-spending-section .safe-explanation { margin-top:1rem; }

@media(max-width:1200px){
  .report-question-grid{grid-template-columns:repeat(3,minmax(180px,1fr));}
  .settings-account-grid{grid-template-columns:1fr 1fr;}
  .settings-account-grid>div:last-child{grid-column:auto;}
  .safe-modal-cards{grid-template-columns:repeat(2,1fr);}
  .safe-spending-section .safe-spending-cards{grid-template-columns:repeat(2,minmax(180px,1fr));}
}
@media(max-width:800px){
  .safe-spending-section #safe-spending-settings-form > .form-grid{grid-template-columns:1fr;}
  .safe-spending-section #safe-spending-settings-form .button-cell,
  .safe-spending-section .safe-category-choices{grid-column:1 !important;}
}
@media(max-width:700px){
  .report-question-grid,.settings-account-grid,.safe-modal-cards,.safe-spending-section .safe-spending-cards{grid-template-columns:1fr;}
}


/* Prototype 0.17 parity sweep */
.budget-explainer{margin:.7rem 0 .8rem;padding:.8rem 1rem}.budget-explainer p{margin:.15rem 0}.budget-print-row{margin:.2rem 0 .8rem}.manager-explainer{margin:.2rem 0 1rem}.manager-explainer p{margin:.25rem 0}.status-active,.status-inactive{display:inline-block;padding:.12rem .42rem;border-radius:999px;font-size:.78rem;font-weight:700}.status-active{background:#e8f5e9;color:#226b2c}.status-inactive{background:#eee;color:#666}.inactive-manager-row{opacity:.72;background:#fafafa}.manager-card table th,.manager-card table td{vertical-align:middle}.manager-card .manager-inline-form{display:flex;gap:.4rem;align-items:center}.manager-card .manager-inline-form input,.manager-card .manager-inline-form select{min-width:0}.recurring-card .checkbox-row{margin-top:.55rem}.screen-only{display:block}@media print{.screen-only,.top-nav,.actions,.manager-inline-form,.budget-inner-card{display:none!important}}


/* 0.18 report chart parity */
.pie-chart-layout{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.pie-chart{width:180px;height:180px;flex:0 0 auto}.chart-legend{display:grid;gap:.35rem;min-width:0;flex:1 1 220px}.chart-legend-row{display:grid;grid-template-columns:auto minmax(90px,1fr) auto;gap:.45rem;align-items:center;font-size:.9rem}.chart-legend-row strong{font-size:.85rem;white-space:nowrap;font-variant-numeric:tabular-nums}.chart-swatch{display:inline-block;width:.8rem;height:.8rem;border-radius:999px;border:1px solid rgba(0,0,0,.15)}.bar-chart-wrap{overflow-x:auto;padding-bottom:.5rem}.bar-chart{min-width:640px;height:340px}.bar-chart text{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;fill:#555;font-size:12px}.bar-chart .bar{fill:#2f6fb3}.bar-chart .grid-line{stroke:#e6e6e6;stroke-width:1}@media print{.bar-chart-wrap{overflow:visible}.bar-chart{min-width:0;width:100%;height:auto}.pie-chart{width:160px;height:160px}}@media(max-width:760px){.pie-chart-layout{align-items:flex-start}.chart-legend-row{grid-template-columns:auto 1fr}.chart-legend-row strong{grid-column:2}}

/* 0.19 Start Over confirmation */
.confirm-dialog {
  width: min(620px, calc(100vw - 2rem));
  border: 0;
  border-radius: 12px;
  padding: 1.4rem;
  box-shadow: 0 14px 48px rgba(0,0,0,.3);
}
.confirm-dialog::backdrop { background: rgba(0,0,0,.45); }
.confirm-dialog h2 { margin-top: 0; }
.confirm-dialog input { width: 100%; margin-top: .45rem; }


/* 0.20.4 compact parity sweep: match desktop My Money Center density and recurring structure */
/* Keep Forecast's approved sizing intact; compact the utility/management views. */
.history-view, .all-transactions-view, .manager-card, .recurring-view,
.safe-spending-section, .settings-section, .budgets-section, .reports-view {
  font-size: .92rem;
}
.history-view .section-heading h2, .all-transactions-view .section-heading h2,
.manager-card .section-heading h2, .recurring-view .section-heading h2,
.safe-spending-section .section-heading h2, .settings-section .section-heading h2,
.budgets-section .section-heading h2 { font-size: 1.42rem; }

/* Search/filter forms: desktop-like compact fields and side-by-side actions. */
.history-view .form-card, .all-transactions-view .form-card { padding: .9rem 1rem; }
.history-view .form-card h3, .all-transactions-view .form-card h3 { font-size: 1.18rem; margin: 0 0 .75rem; }
.transaction-filter-form .form-grid {
  grid-template-columns: minmax(210px,1.15fr) repeat(2,minmax(150px,.9fr)) minmax(135px,.75fr) minmax(155px,.8fr) auto;
  gap: .55rem .7rem;
  align-items: end;
}
.transaction-filter-form label { font-size: .86rem; margin-bottom: .18rem; }
.transaction-filter-form input, .transaction-filter-form select { padding: .4rem .46rem; font-size: .9rem; }
.transaction-filter-form .form-actions {
  display:flex; gap:.38rem; align-items:end; margin:0; white-space:nowrap;
}
.transaction-filter-form .form-actions button { padding:.48rem .68rem; font-size:.88rem; }
.history-view table th, .history-view table td,
.all-transactions-view table th, .all-transactions-view table td { padding:.46rem .55rem; }
.history-view table th, .all-transactions-view table th { font-size:.84rem; }
.history-view table td, .all-transactions-view table td { font-size:.87rem; }
.history-view .source-label, .all-transactions-view .source-label { font-size:.69rem; padding:.06rem .28rem; }

/* Manager pages: less oversized and closer to the desktop table density. */
.manager-card { padding:.9rem 1rem; }
.manager-card .manager-explainer { margin:.1rem 0 .75rem; }
.manager-card .manager-explainer p { margin:.15rem 0; line-height:1.35; }
.manager-card .manager-add-form { max-width:none; margin:.55rem 0 .8rem; align-items:stretch; }
.manager-card .manager-add-form input { max-width:440px; padding:.42rem .5rem; font-size:.9rem; }
.manager-card .manager-add-form button { padding:.46rem .7rem; font-size:.88rem; }
.manager-card table th, .manager-card table td { padding:.42rem .5rem; }
.manager-card table th { font-size:.82rem; }
.manager-card table td { font-size:.86rem; }
.manager-card .manager-inline-form { gap:.3rem; min-width:0; }
.manager-card .manager-inline-form input,
.manager-card .manager-inline-form select { padding:.35rem .42rem; font-size:.86rem; }
.manager-card .manager-inline-form button { padding:.38rem .55rem; font-size:.8rem; }
.status-active,.status-inactive { font-size:.7rem; padding:.08rem .34rem; }

/* Safe Spending modal: same 2x2 structure, but lighter/smaller like desktop. */
.safe-spend-dialog { max-width:800px; padding:1.2rem; font-size:.9rem; }
.safe-spend-dialog h2 { font-size:1.55rem; margin-bottom:.65rem; }
.safe-modal-cards { gap:.6rem; margin:.65rem 0; }
.safe-spend-dialog .card { padding:.75rem .8rem; }
.safe-spend-dialog .summary-card-title { font-size:.95rem; }
.safe-spend-dialog .card strong { font-size:1.3rem; }
.safe-spend-dialog .card small { font-size:.8rem; line-height:1.3; }
.safe-spend-dialog p { margin:.65rem 0; }
.safe-spend-modal-actions { gap:.4rem; margin-top:.8rem; }
.safe-spend-modal-actions button, .safe-spend-modal-actions .button-link { padding:.48rem .7rem; font-size:.86rem; }

/* Repeating: disclosure controls only the Add form; list remains visible. */
.recurring-view > details.recurring-card { margin:.65rem 0 .8rem; }
.recurring-view > details.recurring-card summary { font-size:1.1rem; padding:.7rem .9rem; }
.recurring-view > details.recurring-card .collapsible-content { padding:0 .9rem .85rem; }
.recurring-view .recurring-form-grid {
  grid-template-columns: repeat(7,minmax(120px,1fr));
  gap:.55rem .65rem;
  align-items:start;
}
.recurring-view .recurring-form-grid label { font-size:.84rem; line-height:1.15; }
.recurring-view .recurring-form-grid input,
.recurring-view .recurring-form-grid select { padding:.4rem .45rem; font-size:.88rem; }
.recurring-view .recurring-form-grid .hint { font-size:.76rem; margin:.25rem 0 0; line-height:1.25; }
.recurring-view .checkbox-row { font-size:.86rem; flex-wrap:wrap; }
.recurring-view .checkbox-row .hint { font-size:.8rem; margin:0; }
.recurring-note { margin:.75rem 0; padding:.65rem .8rem; line-height:1.3; }
.recurring-table-wrap { margin-top:.85rem; }
.recurring-view table th, .recurring-view table td { padding:.45rem .5rem; }
.recurring-view table th { font-size:.8rem; white-space:normal; line-height:1.15; }
.recurring-view table td { font-size:.85rem; }
.recurring-view .check-now-row { margin-top:.65rem; }
.recurring-view .check-now-row button { padding:.45rem .7rem; font-size:.85rem; }

@media(max-width:1250px){
  .transaction-filter-form .form-grid{grid-template-columns:repeat(3,minmax(160px,1fr));}
  .transaction-filter-form .form-actions{align-self:end;}
  .recurring-view .recurring-form-grid{grid-template-columns:repeat(4,minmax(150px,1fr));}
}
@media(max-width:760px){
  .transaction-filter-form .form-grid,.recurring-view .recurring-form-grid{grid-template-columns:1fr 1fr;}
  .transaction-filter-form .form-actions{grid-column:1/-1;}
}
@media(max-width:520px){
  .transaction-filter-form .form-grid,.recurring-view .recurring-form-grid{grid-template-columns:1fr;}
}

/* 0.20.5: keep repeating-form controls inside their grid columns. */
.recurring-view .recurring-form-grid > div { min-width: 0; }
.recurring-view .recurring-form-grid input,
.recurring-view .recurring-form-grid select { width: 100%; min-width: 0; }

/* 0.20.6: align repeating-form controls even when labels wrap. */
.recurring-view .recurring-form-grid > div > label {
  display: block;
  min-height: 2.15em;
  margin-bottom: .2rem;
}


/* 0.21 final polish: dismissible notices and browser Help */
.notice { display:flex; align-items:center; gap:.75rem; }
.notice[hidden] { display:none !important; }
.notice #status-message { flex:1; min-width:0; }
.notice-close { flex:0 0 auto; border:0; background:transparent; color:#555; font-size:1.35rem; line-height:1; padding:.1rem .35rem; border-radius:4px; cursor:pointer; }
.notice-close:hover { background:rgba(0,0,0,.08); color:#222; }
.error-notice .notice-close { color:#8b2020; }

.help-view > .subtitle { margin-top:-.25rem; }
.help-intro { margin:.8rem 0 1rem; padding:1rem 1.15rem; }
.help-intro p { margin:.2rem 0 .7rem; }
.help-intro p:last-child { margin-bottom:.2rem; }
.help-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:1rem; align-items:start; }
.help-toc { position:sticky; top:.75rem; border:1px solid #ddd; border-radius:7px; background:#fff; padding:.85rem; }
.help-toc-nav { display:flex; flex-direction:column; gap:.28rem; margin-top:.55rem; }
.help-toc-nav a { color:#165a96; text-decoration:none; padding:.2rem .15rem; }
.help-toc-nav a:hover { text-decoration:underline; }
.help-content { min-width:0; }
.help-section { background:#fff; border:1px solid #ddd; border-radius:7px; padding:1rem 1.15rem; margin:0 0 1rem; scroll-margin-top:1rem; }
.help-section h3 { margin:.05rem 0 .75rem; font-size:1.3rem; }
.help-section h4 { margin:1rem 0 .35rem; font-size:1.05rem; }
.help-section p { margin:.5rem 0; }
.help-section ul { margin:.55rem 0 .7rem 1.35rem; }
.help-note { background:#f5f8fb; border-left:4px solid #86a9c8; padding:.7rem .85rem; margin:.8rem 0; }
.help-table th:first-child { width:55%; }
.help-back-link { border:0; background:transparent; color:#165a96; padding:.35rem 0 0; font-size:.9rem; cursor:pointer; }
.help-back-link:hover { text-decoration:underline; }
@media (max-width: 850px) { .help-layout { grid-template-columns:1fr; } .help-toc { position:static; } }


/* 1.0.1: keep table cells as table cells on smaller screens.  The old global
   .actions {display:flex} made row borders look broken and could distort the
   action hit area when a wide table overflowed. */
td.actions { display: table-cell; white-space: nowrap; }
td.actions > button, td.actions > .button-link, td.actions > form { display: inline-block; vertical-align: middle; }
td.actions > * + * { margin-left: .3rem; }
.recurring-view .recurring-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.recurring-view .recurring-table-wrap table { min-width: 1080px; }
@media (max-width: 900px) {
  .recurring-view .recurring-table-wrap table { min-width: 1040px; }
  .recurring-view td.actions { min-width: 118px; }
}


/* 1.0.2: first-backup prompt after Welcome setup. */
.setup-first-backup { margin:1rem 0; }
.setup-first-backup p { margin:.45rem 0; }
.setup-first-backup .form-actions { margin:.65rem 0 .2rem; }
.backup-success { margin:.55rem 0 0; font-weight:700; color:#226b2c; }


/* Repeating edit parity: edit one item on a dedicated view, like desktop My Money Center. */
.recurring-edit-heading-wrap { display: none; }
.recurring-view.recurring-edit-mode .recurring-edit-heading-wrap { display: block; margin: 0 0 0.75rem; }
.recurring-view.recurring-edit-mode .recurring-edit-heading-wrap h2 { margin: 0; font-size: 1.65rem; }
.recurring-view.recurring-edit-mode > .recurring-note,
.recurring-view.recurring-edit-mode > .recurring-table-wrap,
.recurring-view.recurring-edit-mode > .check-now-row { display: none !important; }
.recurring-view.recurring-edit-mode > details.recurring-card > summary { display: none; }
.recurring-view.recurring-edit-mode > details.recurring-card { border: 0; box-shadow: none; padding-top: 0; }
.recurring-view.recurring-edit-mode > details.recurring-card .collapsible-content { padding-top: 0; }

/* 1.0.8: keep Edit Transaction Save/Cancel buttons from touching */
.transaction-edit-view .form-actions {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  flex-wrap: wrap;
}

/* 1.0.11: tables fit normally on wide screens and scroll only when they
   genuinely need more room.  Do not use max-content here: that forced wide
   tables offscreen even when the browser window had enough space. */
.table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.table-wrap > table {
  width: 100%;
}
.table-wrap th,
.table-wrap td {
  box-sizing: border-box;
}

/* Each management/register table gets enough room to remain readable.  When
   the browser is narrower than this, .table-wrap provides horizontal scroll. */
.forecast-table-wrap > table { min-width: 900px; }
.history-table-wrap > table,
.all-table-wrap > table { min-width: 1240px; }
.budget-table-wrap > table { min-width: 900px; }
.category-table-wrap > table { min-width: 1180px; }
.name-table-wrap > table { min-width: 1080px; }
.recurring-table-wrap > table { min-width: 1080px; }

/* Management controls stay aligned because the table, not each individual row,
   owns the column widths. */
.category-table-wrap .manager-inline-form,
.name-table-wrap .manager-inline-form {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
}
.category-table-wrap .manager-inline-form input,
.name-table-wrap .manager-inline-form input,
.category-table-wrap .manager-inline-form select,
.name-table-wrap .manager-inline-form select {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.category-table-wrap .manager-inline-form button,
.name-table-wrap .manager-inline-form button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.table-wrap td.actions,
.table-wrap th:last-child {
  white-space: nowrap;
}


/* Transaction pagination */
.transaction-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin: .65rem 0;
}
.pagination-summary { font-weight: 700; }
.pagination-buttons { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; }
.pagination-buttons .compact-button { padding: .35rem .55rem; min-width: 0; }
.pagination-buttons .current-page { border-color: #222; box-shadow: inset 0 0 0 1px #222; font-weight: 800; }
.pagination-buttons button:disabled { opacity: .45; cursor: default; }
.pagination-ellipsis { padding: 0 .15rem; }
.page-size-choice { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.page-size-choice select { width: auto; min-width: 4.25rem; padding: .3rem 1.7rem .3rem .45rem; }


/* 1.0.12 nav refinement: visible Backup & Restore + compact utility icons */
.nav-utility-group {
  display: inline-flex;
  gap: .28rem;
  align-items: center;
  margin-left: 0;
}
.top-nav .nav-icon,
.top-nav #export-csv.nav-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.05rem;
  padding: 0;
  overflow: visible;
}
.top-nav .nav-icon svg {
  width: 1.08rem;
  height: 1.08rem;
  fill: currentColor;
  pointer-events: none;
}
.top-nav .nav-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 50;
  left: 50%;
  top: calc(100% + .5rem);
  transform: translateX(-50%) translateY(-2px);
  padding: .32rem .48rem;
  border-radius: 4px;
  background: #222;
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
.top-nav .nav-icon::before {
  content: "";
  position: absolute;
  z-index: 51;
  left: 50%;
  top: calc(100% + .23rem);
  transform: translateX(-50%);
  border: .28rem solid transparent;
  border-bottom-color: #222;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}
.top-nav .nav-icon:hover::after,
.top-nav .nav-icon:focus-visible::after,
.top-nav .nav-icon:hover::before,
.top-nav .nav-icon:focus-visible::before {
  opacity: 1;
}
.top-nav .nav-icon:hover::after,
.top-nav .nav-icon:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}
.backup-vs-export p { margin-bottom: 0; }

@media (max-width: 760px) {
  .nav-utility-group { margin-left: 0; }
}


/* 1.0.12 nav one-line refinement */
.top-nav {
  gap: .38rem;
}

.top-nav .nav-button {
  padding-left: .58rem;
  padding-right: .58rem;
}

.top-nav .nav-icon,
.top-nav #export-csv.nav-icon {
  width: 2rem;
  height: 2.05rem;
  padding-left: 0;
  padding-right: 0;
}

/* Keep the compact utility icons beside Backup & Restore whenever width allows. */
.nav-utility-group {
  margin-left: 0;
  flex: 0 0 auto;
}


/* 1.0.12 one-line nav refinement, pass 2 */
.top-nav {
  gap: .22rem;
}

.top-nav .nav-button {
  padding-left: .44rem;
  padding-right: .44rem;
}

.nav-utility-group {
  gap: .18rem;
}

.top-nav .nav-icon,
.top-nav #export-csv.nav-icon {
  width: 1.82rem;
  min-width: 1.82rem;
  height: 2.05rem;
  padding-left: 0;
  padding-right: 0;
}

.top-nav .nav-icon svg {
  width: 1rem;
  height: 1rem;
}


/* Hidden-development Credit Card Planner */
.cc-planner-view { max-width: 1100px; margin: 0 auto; }
.cc-step-progress { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; margin:0 0 1rem; }
.cc-step-pill { border:1px solid var(--border, #d7d7d7); border-radius:999px; padding:.35rem .7rem; background:#fff; color:#666; }
.cc-step-pill.active { font-weight:700; color:inherit; background:#f0f0f0; }
.cc-step-arrow { color:#888; }
.cc-step-panel { margin-top:0; }
.cc-card-list { display:grid; gap:.8rem; margin:1rem 0; }
.cc-card-entry { border:1px solid #ddd; border-radius:12px; padding:1rem; background:#fff; }
.cc-card-fields { display:grid; grid-template-columns:1.2fr repeat(4,1fr) auto; gap:.7rem; align-items:end; }
.cc-card-fields > div { min-width:0; }
.cc-card-fields label { min-height:1.35em; }
.cc-card-fields input { width:100%; }
.cc-card-status { margin:.75rem 0 0; padding:.7rem .8rem; border-radius:9px; background:#f3f3f3; font-size:.92rem; }
.cc-step-actions { display:flex; justify-content:flex-end; gap:.7rem; margin-top:1rem; flex-wrap:wrap; }
.cc-step-actions.split { justify-content:space-between; }
.cc-neutral-box { background:#f1f1f1; border:1px solid #d4d4d4; border-radius:11px; padding:1rem; margin:.9rem 0; }
.cc-neutral-box p:last-child { margin-bottom:0; }
.cc-plan-grid { margin-top:.7rem; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
.cc-plan-grid > div { min-width:0; }
.cc-plan-grid label { min-height:2.5em; display:flex; align-items:flex-end; }
.cc-plan-grid input { width:100%; }
.cc-goal-fieldset { border:0; padding:0; margin:1rem 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; }
.cc-goal-fieldset legend { font-weight:700; margin-bottom:.6rem; grid-column:1 / -1; }
.cc-goal-choice { display:block; border:1px solid #ddd; border-radius:10px; padding:.85rem; margin:0; background:#fff; min-width:0; }
.cc-goal-choice input { width:auto; margin:0 .45rem 0 0; vertical-align:middle; }
.cc-goal-choice span { display:block; color:#666; font-size:.9rem; margin:.3rem 0 0 1.55rem; }
.cc-now-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.7rem; margin-top:1rem; }
.cc-now-card, .cc-month-card { background:#f3f3f3; border-radius:10px; padding:.9rem; }
.cc-progress-note { margin-top:.8rem; }
.cc-math-box { border:1px solid #ddd; border-radius:10px; padding:1rem; margin-top:.7rem; background:#fff; font-size:.92rem; }
.cc-math-link { display:inline-block; margin-top:.7rem; color:#2f6fb3; font-weight:600; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.cc-math-link:hover { color:#24598f; }
.cc-future-zone { background:#eef5fb; border:1px solid #cbddea; }
.cc-result-summary { border:1px solid #ddd; border-radius:10px; padding:1rem; background:#fff; margin:1rem 0; }
.cc-month-page { display:grid; gap:.8rem; }
.cc-month-block { border:1px solid #ddd; border-radius:11px; padding:1rem; background:#fff; }
.cc-month-block h4 { margin:.1rem 0 .7rem; }
.cc-month-card + .cc-month-card { margin-top:.6rem; }
.cc-card-line { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.cc-page-controls { display:flex; align-items:center; gap:.55rem; margin:1rem 0 .65rem; flex-wrap:wrap; }
.cc-page-controls label { margin:0; }
.cc-page-controls select { width:auto; min-width:180px; }
.cc-pager { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:1rem 0; }
.cc-planner-view button.secondary { background:#2f6fb3; color:#fff; border:0; }
.cc-planner-view button.secondary:hover { background:#24598f; }
.cc-planner-view button:disabled { opacity:.45; cursor:default; }
@media (max-width: 850px) {
  .cc-card-fields { grid-template-columns:1fr 1fr; }
  .cc-goal-fieldset { grid-template-columns:1fr; }
  .cc-card-fields .cc-remove-wrap { grid-column:1 / -1; }
  .cc-now-grid { grid-template-columns:1fr; }
}
@media (max-width: 520px) {
  .cc-card-fields { grid-template-columns:1fr; }
  .cc-plan-grid { grid-template-columns:1fr; }
  .cc-plan-grid label { min-height:0; }
  .cc-step-actions, .cc-step-actions.split { justify-content:stretch; }
  .cc-step-actions button { width:100%; }
}

/* Credit Card Planner final pre-scenario cleanup */
.cc-planner-view .cc-add-card-button { background:#eaf3fb; color:#24598f; border:1px solid #9fc3e6; }
.cc-planner-view .cc-add-card-button:hover { background:#dcecf9; color:#1f4f80; }
.cc-card-entry.cc-card-invalid { border-color:#b44747; background:#fffafa; }
.cc-card-entry input::placeholder { color:#8a8a8a; opacity:1; }

.cc-planner-save-box { margin-bottom: 1rem; }
.cc-save-actions { display:flex; gap:.65rem; flex-wrap:wrap; margin-top:.65rem; }
#cc-save-status:not(:empty) { margin-top:.55rem; }


/* Planning navigation dropdown */
.nav-dropdown { position: relative; flex: 0 0 auto; }
.nav-dropdown > summary { list-style: none; cursor: pointer; user-select: none; }
.nav-dropdown > summary::marker { content: ""; }
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-caret { margin-left: .16rem; font-size: .72em; }
.nav-dropdown[open] > summary .nav-caret { display: inline-block; transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute;
  z-index: 1000;
  top: calc(100% + .35rem);
  left: 0;
  min-width: 13.5rem;
  padding: .35rem;
  background: #fff;
  border: 1px solid #c7d9ee;
  border-radius: 7px;
  box-shadow: 0 4px 14px rgba(0,0,0,.14);
}
.nav-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: .5rem .65rem;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #24598f;
  font-size: .88rem;
  font-weight: 600;
}
.nav-dropdown-item:hover, .nav-dropdown-item:focus-visible, .nav-dropdown-item.active {
  background: #dbeafb;
  color: #123d66;
}

.recurring-inactive-row { margin-top:.85rem; }
.recurring-inactive-row button { padding:.42rem .68rem; font-size:.84rem; }


/* 1.0.17 appearance toggle + dark mode */
.appearance-setting-row { display:flex; justify-content:space-between; align-items:center; gap:1.25rem; }
.appearance-setting-row p { margin:.35rem 0 0; }
.theme-switch { display:inline-flex; align-items:center; gap:.55rem; margin:0; cursor:pointer; font-weight:700; flex:0 0 auto; }
.theme-switch input { position:absolute; opacity:0; pointer-events:none; }
.theme-switch-track { width:3rem; height:1.65rem; border-radius:999px; padding:.18rem; background:#c9cdd2; border:1px solid #a9adb2; transition:background .18s ease,border-color .18s ease; }
.theme-switch-thumb { display:block; width:1.18rem; height:1.18rem; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.28); transition:transform .18s ease; }
.theme-switch input:checked + .theme-switch-track { background:#2f6fb3; border-color:#24598f; }
.theme-switch input:checked + .theme-switch-track .theme-switch-thumb { transform:translateX(1.3rem); }
.theme-switch input:focus-visible + .theme-switch-track { outline:3px solid rgba(47,111,179,.35); outline-offset:2px; }
.theme-choice-label { min-width:2.5rem; text-align:center; }
@media(max-width:600px){.appearance-setting-row{align-items:flex-start;flex-direction:column}.theme-switch{align-self:flex-start}}

html[data-theme="dark"] { color-scheme:dark; }
html[data-theme="dark"] body { background:#17191d; color:#e7e9ec; }
html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .hint,
html[data-theme="dark"] .footnote,
html[data-theme="dark"] .card small,
html[data-theme="dark"] .prototype-label,
html[data-theme="dark"] .report-question-card span,
html[data-theme="dark"] .recurring-badge,
html[data-theme="dark"] .cc-goal-choice span,
html[data-theme="dark"] .cc-step-pill { color:#b9bec6; }
html[data-theme="dark"] .card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .report-question-card,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .setup-progress,
html[data-theme="dark"] .cc-card-entry,
html[data-theme="dark"] .cc-goal-choice,
html[data-theme="dark"] .cc-math-box,
html[data-theme="dark"] .cc-result-summary,
html[data-theme="dark"] .cc-month-block { background:#22252a; border-color:#3c4148; box-shadow:0 1px 3px rgba(0,0,0,.35); }
html[data-theme="dark"] .muted-card,
html[data-theme="dark"] .budget-inner-card,
html[data-theme="dark"] .inline-edit-card,
html[data-theme="dark"] .report-note,
html[data-theme="dark"] .cc-card-status,
html[data-theme="dark"] .cc-now-card,
html[data-theme="dark"] .cc-month-card,
html[data-theme="dark"] .cc-neutral-box { background:#292d33; border-color:#444a52; }
html[data-theme="dark"] .privacy-card { background:#203329; border-color:#355340; }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { background:#181a1e; color:#f0f1f3; border-color:#555c65; }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .cc-card-entry input::placeholder { color:#9299a3; }
html[data-theme="dark"] .nav-button { background:#25292f; color:#e7e9ec; border-color:#555c65; }
html[data-theme="dark"] .nav-button.active { background:#30353c; border-color:#747b85; }
html[data-theme="dark"] .table-sort-button { background:none; border:0; }
html[data-theme="dark"] th { background:#2d3137; }
html[data-theme="dark"] th,
html[data-theme="dark"] td { border-bottom-color:#3b4047; }
html[data-theme="dark"] .notice { background:#3c351c; color:#f2e7b6; border-color:#776a31; }
html[data-theme="dark"] .error-notice { background:#3a2222 !important; border-color:#9e5656 !important; }
html[data-theme="dark"] .danger-card { background:#322224; border-color:#704247; }
html[data-theme="dark"] .positive { color:#79d58b; }
html[data-theme="dark"] .negative { color:#ff9292; }
html[data-theme="dark"] tbody tr.cleared-row > td { background:#1f3828; }
html[data-theme="dark"] tbody tr.cleared-row:hover > td { background:#264631; }
html[data-theme="dark"] tbody tr.highlight > td { background:#463c19; }
html[data-theme="dark"] tbody tr.highlight:hover > td { background:#55491c; }
html[data-theme="dark"] .budget-watch { background:#4a401b; }
html[data-theme="dark"] .budget-warning { background:#51361f; }
html[data-theme="dark"] .budget-over { background:#4a2528; }
html[data-theme="dark"] .budget-status { background:#343941; }
html[data-theme="dark"] .report-bar-track { background:#3a3f46; }
html[data-theme="dark"] .report-bar-fill { background:#8e969f; }
html[data-theme="dark"] .nav-dropdown-menu { background:#22252a; border-color:#45515f; box-shadow:0 4px 14px rgba(0,0,0,.45); }
html[data-theme="dark"] .nav-dropdown-item { color:#9ec9f4; }
html[data-theme="dark"] .nav-dropdown-item:hover,
html[data-theme="dark"] .nav-dropdown-item:focus-visible,
html[data-theme="dark"] .nav-dropdown-item.active { background:#2d4054; color:#d7eaff; }
html[data-theme="dark"] .top-nav .nav-icon::after { background:#e7e9ec; color:#17191d; }
html[data-theme="dark"] .top-nav .nav-icon::before { border-bottom-color:#e7e9ec; }
html[data-theme="dark"] .cc-step-pill { background:#24282e; border-color:#444a52; }
html[data-theme="dark"] .cc-step-pill.active { background:#343941; color:#f0f1f3; }
html[data-theme="dark"] .cc-future-zone { background:#203044; border-color:#405f80; }
html[data-theme="dark"] .cc-planner-view .cc-add-card-button { background:#263b50; color:#b9dcff; border-color:#476d94; }
html[data-theme="dark"] .cc-planner-view .cc-add-card-button:hover { background:#304a63; color:#d6eaff; }
html[data-theme="dark"] .cc-card-entry.cc-card-invalid { border-color:#a95b5b; background:#382326; }
html[data-theme="dark"] a,
html[data-theme="dark"] .cc-math-link { color:#86bff7; }
html[data-theme="dark"] .cc-math-link:hover { color:#b8d9fb; }
html[data-theme="dark"] .theme-switch-track { background:#4a5058; border-color:#646b74; }

html[data-theme="dark"] table { background:#22252a; border-color:#3c4148; }
html[data-theme="dark"] .help-toc,
html[data-theme="dark"] .help-section { background:#22252a; border-color:#3c4148; }
html[data-theme="dark"] .help-note { background:#293641; border-left-color:#6485a3; }
html[data-theme="dark"] .help-toc-nav a,
html[data-theme="dark"] .help-back-link { color:#86bff7; }
html[data-theme="dark"] .report-question-card.active { background:#293b4e; border-color:#668caf; }
html[data-theme="dark"] .report-question-card:hover,
html[data-theme="dark"] button.report-question-card:hover { background:#2b3744; color:#b9dcff; }
html[data-theme="dark"] .status-active { background:#24412d; color:#8ddb9b; }
html[data-theme="dark"] .status-inactive { background:#343941; color:#b9bec6; }
html[data-theme="dark"] .inactive-manager-row { background:#202328; }
html[data-theme="dark"] .setup-progress span.current { color:#8fc5fb; }
html[data-theme="dark"] .recurring-badge { background:#293b4e; color:#a9d2fa; }
html[data-theme="dark"] .pagination-buttons .current-page { border-color:#d5d9df; box-shadow:inset 0 0 0 1px #d5d9df; }
html[data-theme="dark"] .notice-close { color:#d2c995; }
html[data-theme="dark"] .notice-close:hover { background:rgba(255,255,255,.09); color:#fff3be; }
html[data-theme="dark"] .error-notice .notice-close { color:#ffaaaa; }
html[data-theme="dark"] .app-footer { border-top-color:#3c4148; }
html[data-theme="dark"] .safe-spend-dialog,
html[data-theme="dark"] .confirm-dialog { background:#22252a; color:#e7e9ec; }
html[data-theme="dark"] .report-question-card strong { color:#9ec9f4; }
html[data-theme="dark"] .report-question-card span { color:#b9bec6; }
html[data-theme="dark"] .bar-chart text { fill:#b9bec6; }
html[data-theme="dark"] .bar-chart .grid-line { stroke:#41464e; }


/* 1.0.17 dark-mode polish: intuitive theme switch + navigation contrast */
html[data-theme="dark"] .top-nav {
  background:#22252a;
  border-color:#3c4148;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}
html[data-theme="dark"] .top-nav .nav-button,
html[data-theme="dark"] .top-nav #export-csv {
  background:#25292f;
  color:#e7e9ec;
  border-color:#555c65;
}
html[data-theme="dark"] .top-nav .nav-button:hover,
html[data-theme="dark"] .top-nav .nav-button:focus-visible,
html[data-theme="dark"] .top-nav #export-csv:hover,
html[data-theme="dark"] .top-nav #export-csv:focus-visible {
  background:#343941;
  color:#ffffff;
  border-color:#7b838e;
}
html[data-theme="dark"] .top-nav .nav-button.active,
html[data-theme="dark"] .top-nav .nav-button.active:hover,
html[data-theme="dark"] .top-nav .nav-button.active:focus-visible {
  background:#30353c;
  color:#ffffff;
  border-color:#747b85;
}
html[data-theme="dark"] .top-nav .nav-button:focus-visible,
html[data-theme="dark"] .top-nav #export-csv:focus-visible {
  outline:2px solid #8fc5fb;
  outline-offset:2px;
}