:root {
  color-scheme: dark;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --border-radius-md: 6px;
  --border-radius-lg: 10px;
  --color-background-primary: #111214;
  --color-background-secondary: #1c1d1f;
  --color-text-primary: #e0e0e0;
  --color-text-secondary: #888888;
  --color-border-primary: #4a4a4a;
  --color-border-secondary: #2d2d2d;
  --color-border-tertiary: #222426;
  --color-background-success: #0a2e1c;
  --color-text-success: #4ade98;
  --color-background-danger: #2e0d0d;
  --color-text-danger: #f87171;
  --color-background-warning: #2e1d07;
  --color-text-warning: #fbbf24;
}
html, body { background: var(--color-background-primary); margin: 0; zoom: 1.1; }
* { box-sizing: border-box; }
.root { padding: 1rem 0; font-family: var(--font-sans); max-width: 960px; margin: 0 auto; color: var(--color-text-primary); }
.section-label { font-size: 14px; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 8px; }

/* Amount + mode controls */
.amount-row { display: flex; align-items: center; gap: 12px; margin-bottom: 1.25rem; }
.amount-row input[type=range] { flex: 1; }
.amount-display { font-size: 20px; font-weight: 500; min-width: 110px; text-align: right; }
.toggle-row { display: flex; gap: 8px; margin-bottom: 1.25rem; flex-wrap: wrap; }
.toggle-btn { padding: 5px 14px; font-size: 14px; border-radius: var(--border-radius-md); border: 0.5px solid var(--color-border-secondary); cursor: pointer; background: transparent; color: var(--color-text-secondary); }
.toggle-btn.active { background: var(--color-background-primary); color: var(--color-text-primary); border-color: var(--color-border-primary); font-weight: 500; }

/* Summary cards */
.grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 1.25rem; }
.metric-card { background: var(--color-background-secondary); border-radius: var(--border-radius-md); padding: 0.65rem 1rem; }
.metric-label { font-size: 14px; color: var(--color-text-secondary); margin: 0 0 3px; }
.metric-val { font-size: 17px; font-weight: 500; margin: 0; }
.metric-val.pos { color: var(--color-text-success); }
.metric-val.neg { color: var(--color-text-danger); }

/* Unified table */
.table-wrap { background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); overflow: hidden; }
.alloc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.alloc-table th { text-align: left; font-weight: 500; font-size: 14px; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 8px; border-bottom: 0.5px solid var(--color-border-tertiary); }
.alloc-table th.num { text-align: right; }
.alloc-table td { padding: 6px 8px; border-bottom: 0.5px solid var(--color-border-tertiary); vertical-align: middle; color: var(--color-text-primary); }
.alloc-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.alloc-table tr:last-child td { border-bottom: none; }
.alloc-table input[type=text] { width: 100%; padding: 4px 6px; font-size: 14px; border: 0.5px solid var(--color-border-secondary); border-radius: 4px; background: var(--color-background-primary); color: var(--color-text-primary); }
.alloc-table input[type=number] { width: 72px; text-align: right; padding: 4px 6px; font-size: 14px; border: 0.5px solid var(--color-border-secondary); border-radius: 4px; background: var(--color-background-primary); color: var(--color-text-primary); }
.alloc-table input:focus { outline: none; border-color: var(--color-border-primary); }
.alloc-table input:disabled { opacity: 0.4; cursor: not-allowed; }
input[type=number] {
  -webkit-appearance: textfield;
  -moz-appearance:    textfield;
  appearance:         textfield;
}

.bar-wrap { background: var(--color-border-tertiary); border-radius: 2px; height: 5px; min-width: 50px; overflow: hidden; }
.bar-fill { height: 5px; border-radius: 2px; }
.badge { display: inline-block; font-size: 14px; padding: 2px 7px; border-radius: 4px; font-weight: 500; white-space: nowrap; }
.badge-green  { background: var(--color-background-success); color: var(--color-text-success); }
.badge-amber  { background: var(--color-background-warning); color: var(--color-text-warning); }
.badge-red    { background: var(--color-background-danger);  color: var(--color-text-danger);  }
.badge-neutral{ background: var(--color-background-secondary); color: var(--color-text-secondary); }

/* Invest-this-month cell: fixed icon slot keeps amounts right-aligned across states */
.invest-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.invest-amt { font-variant-numeric: tabular-nums; }
.invest-amt.locked-amt { color: var(--color-text-primary); font-weight: 500; }
.icon-btn { flex: 0 0 18px; width: 18px; height: 18px; line-height: 18px; text-align: center; background: none; border: none; cursor: pointer; color: var(--color-text-secondary); font-size: 13px; padding: 0; }
.icon-btn:hover { color: var(--color-text-primary); }
.icon-btn.locked { color: var(--color-text-warning); }
.invest-input { width: 90px; text-align: right; padding: 4px 6px; font-size: 14px; border: 0.5px solid var(--color-border-secondary); border-radius: 4px; background: var(--color-background-primary); color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.invest-input:focus { outline: none; border-color: var(--color-border-primary); }
.invest-input.err { border-color: var(--color-text-danger); }
.lock-err { font-size: 12px; color: var(--color-text-danger); margin-top: 3px; text-align: right; }

.del-btn { background: none; border: none; cursor: pointer; color: var(--color-text-secondary); font-size: 16px; padding: 0 4px; line-height: 1; }
.del-btn:hover { color: var(--color-text-danger); }

.sum-row { display: flex; gap: 16px; margin: 10px 0 0; font-size: 14px; color: var(--color-text-secondary); align-items: center; flex-wrap: wrap; }
.sum-chip { display: flex; align-items: center; gap: 5px; }
.sum-val { font-weight: 500; font-size: 14px; }
.sum-val.warn { color: var(--color-text-danger); }
.sum-val.ok   { color: var(--color-text-success); }
.add-row-btn { margin-top: 10px; padding: 5px 14px; font-size: 14px; border-radius: var(--border-radius-md); border: 0.5px solid var(--color-border-secondary); cursor: pointer; background: transparent; color: var(--color-text-secondary); }
.modeNote { font-size: 14px; color: var(--color-text-secondary); margin: 10px 0 0; }