:root{
  /* Color roles (light) */
  --bg: #ffffff;
  --bg-elev: #f6f8fa;
  --text: #0b1220;
  --muted: #5b667a;
  --border: #d6d9e0;
  --primary: #0b5cff;
  --primary-contrast: #ffffff;
  --danger: #c81e1e;
  --success: #127f46;
  --warn: #a05a00;

  /* Tokens */
  --radius: 14px;
  --shadow: 0 2px 10px rgba(0,0,0,.06);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;

  /* Type scale */
  --fs-0: .875rem;
  --fs-1: 1rem;
  --fs-2: 1.125rem;
  --fs-3: 1.25rem;
  --fs-4: 1.5rem;
  --fs-5: 1.875rem;
  --fw-semibold: 600;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0f17;
    --bg-elev: #111827;
    --text: #e6eaf2;
    --muted: #a3acc2;
    --border: #263042;
    --primary: #4c8dff;
    --primary-contrast: #0a0d14;
    --danger: #ff5757;
    --success: #3dcf89;
    --warn: #ffb156;
  }
}

/* Theme override */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
html, body{
  background: var(--bg);
  color: var(--text);
}

*{ box-sizing: border-box; }
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
a{ color: var(--primary); text-decoration: none; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible{
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Skip link */
.skip-link{ position:fixed; left:0; top:0; transform:translateX(-200%); width:auto; height:auto; overflow:hidden; z-index:1000; }
.skip-link:focus{ transform:none; padding: var(--space-2) var(--space-3); border-radius: 8px; background: var(--bg-elev); box-shadow: var(--shadow); }

/* Header */
.app-header{
  display:grid; gap: var(--space-4);
  grid-template-columns: 1fr;
  padding: var(--space-5);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
  background: var(--bg);
  backdrop-filter: blur(6px);
}
.brand{ display:flex; align-items:center; gap: var(--space-3);}
.logo{ display:inline-grid; place-items:center; width:2rem; height:2rem; border-radius: .6rem; background: var(--primary); color: var(--primary-contrast); font-weight: 700; }
.title{ font-size: var(--fs-4); margin: 0; letter-spacing: .2px; }

.header-stats{
  display:flex; gap: var(--space-4); flex-wrap:wrap;
}
.stat{ display:flex; gap:.5rem; align-items:baseline; }
.stat-label{ color: var(--muted); font-size: var(--fs-0); }
.stat-value{ font-weight: var(--fw-semibold); }

.toolbar{
  display:flex; gap: var(--space-4); flex-wrap:wrap; align-items:center;
}
.control{ display:flex; gap:.5rem; align-items:center; }
select, input[type="number"], input[type="text"]{
  appearance: none;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .5rem .75rem;
  font-size: var(--fs-1);
  color: var(--text);
}
select{ padding-right: 2rem; }

/* Layout */
.layout{
  display:grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  padding: var(--space-5);
}
@media (min-width: 768px){
  .layout{ grid-template-columns: 1fr 2fr; align-items:start; }
}
.panel{
  background: transparent;
}
.panel h2{ font-size: var(--fs-3); margin: 0 0 var(--space-3); }

/* Cards */
.card{
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-5);
}

/* Form */
fieldset{
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
legend{ padding: 0 var(--space-2); color: var(--muted); }
.field{ display:grid; gap:.25rem; margin-bottom: var(--space-3); }
.field-grid{ display:grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 560px){ .field-grid{ grid-template-columns: 1fr 1fr; } }
.hint{ color: var(--muted); font-size: var(--fs-0); margin: .25rem 0 0; }

.table-head, .row{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr 2rem;
  gap: var(--space-2);
  align-items:center;
}
.table-head{
  font-size: var(--fs-0);
  color: var(--muted);
  padding: 0 var(--space-1) var(--space-2);
}
.rows{ display:grid; gap: var(--space-2); }
.row input, .row select{ width:100%; }
.row .remove{
  background: transparent; border: none; color: var(--danger); font-size: var(--fs-3); line-height:1;
}
.row-actions{ margin-top: var(--space-3); }

.btn{
  border: 1px solid var(--border);
  background: var(--bg-elev);
  padding: .6rem .9rem;
  border-radius: 10px;
  cursor: pointer;
}
.btn:hover{ filter: brightness(0.98); }
.btn.primary{
  background: var(--primary);
  color: var(--primary-contrast);
  border-color: transparent;
}
.btn.danger{
  border-color: var(--danger);
  color: var(--danger);
}
.actions{ display:flex; gap: var(--space-3); flex-wrap:wrap; }

/* Results */
.summary-grid{
  display:grid; gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.summary-grid .value{ font-weight: var(--fw-semibold); }
.summary-grid .dti{ grid-column: span 2; }
@media (min-width: 768px){
  .summary-grid{ grid-template-columns: repeat(5, minmax(0,1fr)); }
  .summary-grid .dti{ grid-column: auto; }
}

.badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding: .3rem .6rem; border-radius: 999px; font-weight: var(--fw-semibold);
  background: var(--bg); border: 1px solid var(--border);
}
.badge.good{ background: color-mix(in srgb, var(--success) 12%, transparent); border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
.badge.warn{ background: color-mix(in srgb, var(--warn) 12%, transparent); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); }
.badge.risk{ background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }

.plans-grid{
  display:grid; gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .plans-grid{ grid-template-columns: repeat(3, 1fr); }
}
.plan{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-4);
  background: var(--bg);
  display:grid; gap: var(--space-3);
}
.plan h4{ margin: 0; font-size: var(--fs-2); }
.plan .meta{ color: var(--muted); font-size: var(--fs-0); }
.plan .kv{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.plan .kv div{ background: var(--bg-elev); border:1px solid var(--border); padding: .5rem; border-radius: 8px; }
.plan .status{ font-size: var(--fs-0); }
.plan.infeasible{ opacity: .7; }

.proj-table{
  overflow:auto;
}
.proj-table table{
  width:100%; border-collapse: collapse;
}
.proj-table th, .proj-table td{
  text-align:left; border-bottom:1px solid var(--border);
  padding: .6rem .4rem;
  white-space: nowrap;
}

/* Footer */
.app-footer{
  padding: var(--space-5);
  border-top: 1px solid var(--border);
  color: var(--muted);
}


/* --- Minimal alignment normalization for grid rows without changing look --- */
.table-head, .row { text-align: center; }
.row .label { text-align: start; }
.row { align-items: center; }

/* Utilities */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* RTL support */
html[dir="rtl"] .table-head, 
html[dir="rtl"] .row,
html[dir="rtl"] .summary-grid,
html[dir="rtl"] .plans-grid,
html[dir="rtl"] .field-grid{
  direction: rtl;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}


@media print{
  .toolbar, .actions, .row-actions, 
  .app-header{ position: static; border-bottom: none; }
  .layout{ display:block; }
  .panel{ break-inside: avoid; box-shadow: none; background: #fff; }
  .card{ box-shadow: none; background:#fff; }
}


/* Goals layout tidy (non-intrusive, scoped to #goals) */
#goals .table-head,
#goals .row {
  grid-template-columns: 2.5fr 1fr 1fr 1fr 3.5rem;
}
#goals input[type="number"] { text-align: right; }
#goals input[type="date"] { min-width: 14ch; }
#goals select { min-width: 9ch; }
#goals .actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
#goals .actions .btn {
  padding: 0 var(--space-2);
  min-width: auto;
}

/* Responsive wrap: stack Type/Debt/Actions on small screens */
@media (max-width: 900px) {
  #goals .table-head,
  #goals .row { grid-template-columns: 2fr 1fr; }
}


/* --- Alignment hardening for Goals table (header & rows) --- */
#goals .table-head,
#goals .row {
  grid-template-columns: 2.5fr 1fr 1fr 1fr 3.5rem;
}
#goals .table-head > span { white-space: nowrap; }


/* Explicit variable overrides so theme select works regardless of OS preference */
html[data-theme="light"]{
  --bg: #ffffff;
  --bg-elev: #f6f8fa;
  --text: #0b1220;
  --muted: #5b667a;
  --border: #d6d9e0;
  --primary: #0b5cff;
  --primary-contrast: #ffffff;
  --danger: #c81e1e;
  --success: #127f46;
  --warn: #a05a00;
}
html[data-theme="dark"]{
  --bg: #0a0d14;
  --bg-elev: #121a28;
  --text: #e6eaf2;
  --muted: #a3acc2;
  --border: #263042;
  --primary: #4c8dff;
  --primary-contrast: #0a0d14;
  --danger: #ff5757;
  --success: #3dcf89;
  --warn: #ffb156;
}


/* === Accessibility & State Enhancements (audit) === */
*:focus-visible{
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}
.btn:disabled,
.btn[aria-disabled="true"]{
  opacity: .55;
  cursor: not-allowed;
  filter: saturate(.6);
}
.btn.is-loading{
  position: relative;
  pointer-events: none;
}
.btn.is-loading::after{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin{ to{ transform: rotate(1turn); } }

.sub{ color: var(--muted); font-size: .9rem; margin-top: .25rem; }
.hint{ color: var(--muted); font-size: .85rem; }
.formula{ margin-top: .25rem; font-variant-numeric: tabular-nums; }

.empty-state{
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--space-3); padding: var(--space-3);
  border: 1px dashed var(--border); border-radius: 12px; color: var(--muted);
}
.empty-state .actions .btn{ margin-left: var(--space-2); }


/* =======================
   Mobile-only optimizations
   (Desktop unchanged)
   ======================= */
@media (max-width: 560px){

  /* 1) Global rhythm & touch targets */
  html, body { font-size: 16px; }
  .btn, button, select, input { min-height: 44px; }
  .btn { width: 100%; }

  /* 2) Sticky toolbar for fast actions */
  .toolbar{
    position: sticky; top: 0; z-index: 20;
    background: var(--bg); border-bottom: 1px solid var(--border);
    padding: var(--space-2) var(--space-3);
    display: grid; gap: var(--space-2);
    grid-template-columns: 1fr 1fr;
  }
  .toolbar .control, .toolbar .btn{ width: 100%; }
  .toolbar .control span{ font-size: .85rem; color: var(--muted); }
  #printBtn, #importCsvBtn, #exportCsvBtn{ grid-column: 1 / -1; }

  /* 3) Header KPIs: 2×2 grid for scanability */
  .header-stats{
    display: grid; gap: var(--space-2);
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .header-stats .stat-label{ font-size: .85rem; color: var(--muted); }
  .header-stats .stat-value, .header-stats .badge{ font-size: 1.05rem; }

  /* 4) Main layout: single column, tighter cards */
  .layout{ display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
  .panel, .card{ padding: var(--space-3); border-radius: 12px; }
  .card .sub { font-size: .85rem; }

  /* 5) Forms & fields: single-column, full-width inputs */
  .field-grid{ grid-template-columns: 1fr !important; }
  .field input[type="number"],
  .field input[type="text"],
  .field input[type="date"],
  .field select{ width: 100%; }

  input[type="range"]{ height: 34px; }
  input[type="range"]::-webkit-slider-thumb{ width: 28px; height: 28px; }
  input[type="range"]::-moz-range-thumb{ width: 28px; height: 28px; }

  /* 6) Data sections (Expenses / Debts / Goals) */
  .table-head{ display: none; }
  .rows{ display: grid; gap: var(--space-2); }
  .rows .row{
    display: grid; gap: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--border);
    border-radius: 12px; background: var(--bg-elev);
    box-shadow: var(--shadow);
  }
  .row .actions{ display: flex; gap: var(--space-2); }
  .row .actions .btn{ flex: 1; }

  .row-actions{
    display: grid; gap: var(--space-2);
    grid-template-columns: 1fr 1fr;
  }
  .row-actions .btn{ width: 100%; }
  @supports (grid-auto-flow: dense){
    .row-actions{ grid-auto-flow: row dense; }
  }

  /* 7) Summary grid: 2 columns for compact scan */
  .summary-grid{
    display: grid; gap: var(--space-2);
    grid-template-columns: 1fr 1fr;
  }
  .summary-grid .label{ font-size: .85rem; color: var(--muted); }
  .summary-grid .value{ font-variant-numeric: tabular-nums; }

  /* 8) Horizon card subtitle */
  .card h3 + .sub{ margin-top: .25rem; line-height: 1.3; }

  /* 9) CSV Map dialog: full-width sheet on mobile */
  #csvMapCard[role="dialog"]{
    position: fixed !important;
    inset: auto var(--space-2) var(--space-2) var(--space-2);
    left: var(--space-2); right: var(--space-2);
    top: auto; max-width: none;
  }
  #csvMapCard .actions{ display:flex; gap: var(--space-2); }
  #csvMapCard .actions .btn{ flex: 1; }

  /* 10) Footer: tighter */
  .app-footer{ padding: var(--space-3); }
}

.quick-chips{ margin-top: var(--space-2); display:flex; flex-wrap:wrap; gap:.5rem; }
.quick-chips .chip{ font:inherit; border:1px solid var(--border,#d6d9e0); background:var(--bg-elev,#f6f8fa); padding:.25rem .5rem; border-radius:999px; cursor:pointer; }
.pack-select{ margin-left:.5rem; }
.panel .panel-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.panel .panel-title{ font-size: var(--fs-2,1.125rem); margin:0; }
.panel .panel-actions .control{ display:flex; align-items:center; gap:.5rem; }

.horizon-controls{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; margin:.25rem 0 .5rem 0; }
.horizon-controls .chips{ display:flex; gap:.25rem; flex-wrap:wrap; }
.horizon-controls .chip{ border:1px solid var(--border,#d6d9e0); background:var(--bg-elev,#f6f8fa); padding:.25rem .5rem; border-radius:999px; cursor:pointer; font:inherit; }
.horizon-controls .chip[aria-pressed="true"]{ outline:2px solid var(--primary,#0b5cff); }
.proj-table tr.active{ background: var(--bg-elev,#f6f8fa); }

.delta-chip{ display:inline-block; margin-inline: .25rem; color: var(--muted,#5b667a); }
.summary-inline{ display:inline-flex; gap:.5rem; align-items:center; flex-wrap:wrap; }

.list-inline{ display:flex; flex-wrap:wrap; gap:.75rem 1.25rem; }
.list-inline .item{ white-space:nowrap; }

output{
  display:inline-block;
  min-width: 5ch;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .5rem .75rem;
  font-size: var(--fs-1);
  color: var(--text);
}





/* Sticky header for projections table */
#projections table thead th{
  position: sticky;
  top: 0;
  background: var(--bg-elev);
  z-index: 1;
}

@media print{
  footer small::after{ content: " · " attr(data-print-ts); }
}


/* --- Print polish v2 --- */
@media print{
  *{ -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body{ background:#fff !important; color:#0b1220 !important; }
  .layout{ display:block !important; }
  .panel, .card{ box-shadow:none !important; background:#fff !important; width:100% !important; max-width:100% !important; }
  .toolbar, .actions, .row-actions, .panel-head .panel-actions{ display:none !important; }
  thead{ display: table-header-group; }
  tr, img, svg{ page-break-inside: avoid; break-inside: avoid; }
  .panel, .card{ page-break-inside: avoid; break-inside: avoid; }
  h2, h3, .panel-head{ page-break-after: avoid; break-after: avoid; }
  footer.app-footer{ display:block !important; }
  footer small::after{ content: " · " attr(data-print-ts) " · Page " counter(page); }
}
@page{ size: A4; margin: 14mm 14mm 16mm 14mm; }

/* Brand logo sizing — matches header rhythm */
.app-header .brand .logo{
  height: 28px;
  width: auto;
  margin-inline-end: var(--space-3);
  filter: var(--logo-filter, none);
}
/* Prefer a white-looking mark on dark backgrounds without changing brand colors in light */
html[data-theme="dark"] .brand .logo{
  /* If your SVG is dark-only, this makes it visible. Remove if your mark is already light. */
  filter: var(--logo-filter, invert(1) brightness(1.1));
}
/* Print: ensure logo is visible and crisp */
@media print{
  .app-header .brand .logo{ height: 22px; filter: none; }
}

/* Quick Wins: print hide controls */
@media print{
  .toolbar, .actions, .row-actions, .quick-chips, .control, .template-controls{ display: none !important; }
}

/* Quick Wins: rows overflow */
.rows{ overflow:auto; }
.row > *{ min-width: 10ch; }

/* Quick Wins: summary numeric alignment */
.summary-grid .value{ text-align: end; }

/* --- Summary v2 --- */
.kpi-row{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.kpi .kpi-label{ color: var(--muted); font-size: var(--fs-0); }
.kpi .kpi-value{ font-weight: var(--fw-semibold); font-size: var(--fs-3); }
.kpi .kpi-sub{ color: var(--muted); font-size: var(--fs-0); margin-top: .25rem; letter-spacing:.02em; }

@media (min-width: 900px){
  .kpi-row{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

.score-panel{
  display:grid; grid-template-columns: 1fr; gap: var(--space-6);
  align-items:center;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-5);
}
@media (min-width: 900px){
  .score-panel{ grid-template-columns: 320px 1fr; }
}

.score-circle{
  --size: 120px;
  width: var(--size); height: var(--size);
  border-radius: 50%;
  display:grid; place-items:center;
  background: radial-gradient(closest-side, var(--bg-elev) 79%, transparent 80% 100%), conic-gradient(var(--score-color, var(--primary)) 0deg, color-mix(in srgb, var(--score-color, var(--primary)) 12%, transparent) 0);
  box-shadow: inset 0 0 0 8px color-mix(in srgb, var(--primary) 12%, transparent);
  margin: 0 auto;
}
.score-circle span{ font-weight: var(--fw-bold); font-size: var(--fs-4); }

.metric{ display:flex; align-items:center; justify-content:space-between; padding: .5rem 0; }
.metric .metric-label{ color: var(--muted); }
.metric .metric-value{ font-weight: var(--fw-semibold); }

.donut-row{
  display:grid; grid-template-columns: 1fr; gap: var(--space-6);
}
@media (min-width: 900px){
  .donut-row{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.donut-card{ display:grid; justify-items:center; gap:.5rem; }
.donut{
  --size: 140px;
  width: var(--size); height: var(--size);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--bg-elev) 74%, transparent 75% 100%), conic-gradient(var(--primary) 0deg, color-mix(in srgb, var(--primary) 10%, transparent) 0);
  position: relative;
}
.donut-center{
  position:absolute; inset:0; display:grid; place-items:center;
  font-weight: var(--fw-semibold);
}
.donut-label{ color: var(--muted); }

/* --- Fix: prevent horizontal scroller in input rows --- */
fieldset .rows{ overflow-x: hidden; }
.row{ align-items: center; }
.row > *{ min-width: 0; } /* allow inputs to shrink inside grid */

/* Legends under donuts */
.donut-legend{
  display:flex;
  gap: 1.25rem;
  justify-content:center;
  align-items:center;
  margin-top: .25rem;
  color: var(--muted);
  font-size: var(--fs-0);
}
.legend-item{ display:flex; align-items:center; gap:.35rem; white-space:nowrap; }
.legend-item i.key{
  width:.75rem; height:.75rem; border-radius:999px; display:inline-block;
  background: var(--border);
}
.legend-item i.key-primary{ background: var(--primary); }
.legend-item i.key-rest{ background: color-mix(in srgb, var(--primary) 12%, var(--bg-elev)); }
.legend-item span:last-child{ color: var(--text); font-variation-settings: 'wght' 550; }

.score-caption{
  text-align:center;
  margin-top:.5rem;
  color: var(--muted);
  font-size: var(--fs-0);
}

/* --- Report print styles --- */
#reportRoot{ display:none; }
@media print{
  body{ background:white; }
  header, nav, #tools, .tools, main, footer{ display:none !important; }
  #reportRoot{ display:block !important; }
  .report{ font: 400 12pt system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #111; }
  .report h1{ font-size: 20pt; margin: 0 0 2mm; }
  .report h2{ font-size: 14pt; margin: 10mm 0 3mm; }
  .report h3{ font-size: 12pt; margin: 6mm 0 3mm; }
  .report .muted{ color:#666; }
  .report .grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4mm; }
  .report .grid-4{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 4mm; }
  .report .kpi{ border: 1px solid #ddd; border-radius: 6px; padding: 4mm; }
  .report .kpi .label{ color:#555; font-size:10pt; }
  .report .kpi .value{ font-weight:600; font-size: 14pt; }
  .report .row{ display:flex; gap:6mm; align-items:center; }
  .report .badge{ display:inline-block; padding:2mm 3mm; border-radius: 12px; border:1px solid #ddd; font-size:10pt; }
  .report table{ width:100%; border-collapse:collapse; }
  .report th, .report td{ padding:3mm; border-bottom:1px solid #eee; text-align:left; }
  .report .right{ text-align:right; }
  .page{ page-break-after: always; }
  .no-break{ page-break-inside: avoid; }
  @page{ margin: 14mm 14mm 16mm 14mm; }
  .donut-print{ --size:28mm; width:var(--size); height:var(--size); border-radius:50%; 
    background: radial-gradient(closest-side, #fff 70%, transparent 71% 100%), 
                conic-gradient(#4f8cff var(--deg), #e6eefb 0);
    display:grid; place-items:center; font-weight:600; }
  .legend{ display:flex; gap:6mm; margin-top:2mm; color:#555; font-size:10pt; }
  .legend .key{ width:10px; height:10px; display:inline-block; border-radius:999px; margin-right:2mm; }
  .key-primary{ background:#4f8cff; } .key-rest{ background:#e6eefb; }
  .encouragement{ margin-top:2mm; color:#444; font-size:10.5pt; }
}

@media print{
  .page-footer{
    position: fixed;
    bottom: 6mm; left: 14mm; right: 14mm;
    display:flex; justify-content: space-between; align-items:center;
    color:#666; font-size:10pt;
  }
  .page-num::after{ content: "Page " counter(page) " of " counter(pages); }
}

@media print{
  .plan-card{ border:1px solid #ddd; border-radius:6px; padding:4mm; margin:0 0 6mm 0; page-break-inside: avoid; }
  .plan-head{ display:flex; gap:6mm; align-items:center; justify-content:space-between; margin-bottom:2mm; }
  .plan-title{ font-weight:600; font-size:12pt; }
  .plan-badges{ display:flex; gap:4mm; align-items:center; }
  .plan-badge{ border:1px solid #ddd; border-radius:12px; padding:1mm 3mm; font-size:9.5pt; }
  .plan-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:3mm; margin-top:2mm; }
  .kv .label{ color:#555; font-size:9.5pt; }
  .kv .value{ font-weight:600; font-size:11pt; }
  .forecast{ margin-top:3mm; }
  .forecast table{ width:100%; border-collapse:collapse; }
  .forecast th, .forecast td{ padding:2.5mm; border-bottom:1px solid #eee; text-align:left; font-size:10.5pt; }
  .forecast .right{ text-align:right; }
}

@media print{
  .horizon-tbl{ font-size: 9.5pt; table-layout: fixed; }
  .horizon-tbl .small{ font-size: 8.8pt; color:#555; }
  .horizon-tbl th, .horizon-tbl td{ padding: 2.5mm; }
}

@media print{
  .report table th, .report table td{ word-wrap: break-word; overflow-wrap: anywhere; }
}

.hidden-soft{ display:none !important; }
@media print{
  .hidden-print{ display:none !important; }
}


/* PATCH v6 — table/grid primitives (non-breaking) */
.table{ display:grid; gap: var(--space-2); }
.table-head{ display:grid; }
.table-row{ display:grid; gap: var(--space-2); align-items:center; }
.table-row .right{ text-align:right; }