:root {
      --bg: #0f1419;
      --panel: #1a2332;
      --muted: #8b9cb3;
      --text: #e8eef7;
      --accent: #3d9cf5;
      --good: #34c759;
      --warn: #ff9f0a;
      --border: #2a3545;
      --font: "Segoe UI", system-ui, sans-serif;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: var(--font);
      background: var(--bg);
      color: var(--text);
      line-height: 1.45;
      min-height: 100vh;
    }
    header {
      padding: 1.25rem 1.5rem;
      border-bottom: 1px solid var(--border);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 1rem;
      justify-content: space-between;
    }
    h1 { font-size: 1.25rem; font-weight: 600; margin: 0; }
    .sub { color: var(--muted); font-size: 0.85rem; }
    button {
      background: var(--accent);
      color: #fff;
      border: none;
      padding: 0.5rem 1rem;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
    }
    button:hover { filter: brightness(1.08); }
    button:disabled { opacity: 0.5; cursor: not-allowed; }
    main { padding: 1.25rem 1.5rem 2rem; max-width: 1400px; margin: 0 auto; }
    .grid { display: grid; gap: 1rem; }
    @media (min-width: 900px) {
      .kpis { grid-template-columns: repeat(6, 1fr); }
      .two { grid-template-columns: 1fr 1fr; }
    }
    .stack-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
    .kpis { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    .card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 1rem 1.1rem;
    }
    .card h2 {
      margin: 0 0 0.75rem;
      font-size: 0.95rem;
      color: var(--muted);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .big { font-size: 1.65rem; font-weight: 700; }
    .bar-wrap {
      height: 10px;
      background: var(--border);
      border-radius: 6px;
      overflow: hidden;
      margin-top: 0.5rem;
    }
    .bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--good)); border-radius: 6px; transition: width 0.4s ease; }
    .chart-box { position: relative; height: 200px; }
    .chart-box.chart-box-mix { min-height: 200px; }
    .chart-box.chart-box-sm { height: 140px; }
    .chart-box.chart-box-nw-history {
      height: 260px;
    }
    .chart-box.cf-income-stacked { margin-bottom: 0.75rem; }
    /* Inline canvas in flex/grid krijgt anders soms 0×0 — Chart.js blijft dan “leeg”. */
    .chart-box > canvas {
      display: block;
      width: 100%;
      height: 100%;
    }
    .chart-fallback {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0.75rem;
      color: var(--muted);
      font-size: 0.82rem;
      line-height: 1.35;
      pointer-events: none;
    }
    .card.card--tight { padding: 0.75rem 1rem; }
    .card.card--tight h2 { margin-bottom: 0.45rem; }
    .kapitaal-cf-full {
      grid-template-columns: 1fr;
      width: 100%;
    }
    .kapitaal-cf-row {
      display: grid;
      gap: 1rem;
      grid-template-columns: 1fr;
      min-width: 0;
      width: 100%;
    }
    @media (min-width: 900px) {
      .kapitaal-cf-row {
        grid-template-columns: 1fr 1fr;
      }
    }
    .sub-h3 { margin: 0.75rem 0 0.25rem; font-size: 0.78rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
    .hypotheek-stack-block + .hypotheek-stack-block { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--border); }
    table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
    th, td { text-align: left; padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--border); }
    th { color: var(--muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; }
    tr:hover td { background: rgba(255,255,255,0.02); }
    .num { text-align: right; font-variant-numeric: tabular-nums; }
    tr.inv-parent td { font-weight: 600; }
    tr.inv-detail td { color: var(--muted); font-size: 0.84rem; font-weight: 400; }
    tr.inv-detail td:first-child { padding-left: 0.6rem; }
    tr.inv-excluded td { color: #7d8fa3; }
    tr.inv-excluded td:first-child {
      box-shadow: inset 3px 0 0 var(--warn);
      padding-left: 0.55rem;
    }
    .badge {
      display: inline-block;
      padding: 0.12rem 0.45rem;
      border-radius: 999px;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      white-space: nowrap;
    }
    .badge-active { background: rgba(52, 199, 89, 0.22); color: var(--good); }
    .badge-inactive { background: rgba(139, 156, 179, 0.15); color: var(--muted); }
    .pension-emp-total { font-size: 1.45rem; font-weight: 700; margin: 0.35rem 0 0.75rem; }
    .pension-emp-table { font-size: 0.84rem; }
    .pension-emp-table-werknemer td:nth-child(3) { color: var(--muted); font-size: 0.8rem; }
    .pension-emp-status-col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
    .pension-emp-inline {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.3rem 0.45rem;
      line-height: 1.35;
    }
    .pension-emp-inline .pension-sep {
      color: var(--muted);
      font-weight: 400;
      user-select: none;
    }
    .pension-emp-inline .sub { font-size: 0.8rem; }
    .pension-stack-block {
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px solid var(--border);
    }
    .pension-stack-block:first-child {
      margin-top: 0;
      padding-top: 0;
      border-top: none;
    }
    .pl-pos { color: var(--good); font-weight: 600; }
    .pl-neg { color: #ff6b6b; font-weight: 600; }
    .err { color: #ff6b6b; padding: 1rem; }
    .scroll { max-height: 320px; overflow: auto; }
    a { color: var(--accent); }
    .wl-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
    .wl-table th, .wl-table td { padding: 0.35rem 0.5rem; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .wl-table th { font-weight: 600; color: #9aa; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
    .wl-badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; }
    .wl-badge.green { background: rgba(40,180,100,0.2); color: #5ee298; border: 1px solid #2d9e6d; }
    .wl-badge.yellow { background: rgba(230,180,40,0.18); color: #f0c84a; border: 1px solid #c29a2c; }
    .wl-badge.hold { background: rgba(120,140,160,0.15); color: #9fb; border: 1px solid #5a6a7a; }
    .wl-badge.error { background: rgba(200,60,60,0.18); color: #ff8080; border: 1px solid #a33; }
    .wl-badge.trim { background: rgba(220,70,70,0.22); color: #ff8888; border: 1px solid #c44; font-weight: 700; }
    .wl-badge.trim-y { background: rgba(235,140,50,0.2); color: #f5a050; border: 1px solid #c87020; }
    .wl-badge.stop { background: rgba(180,30,30,0.3); color: #ffb0b0; border: 1px solid #a22; font-weight: 700; }
    .wl-section-title { font-size: 0.82rem; font-weight: 600; color: #bcd; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.5rem; }
    .tabs { display: flex; gap: 0.25rem; border-bottom: 2px solid var(--border); margin: 0 1.5rem; padding-top: 0.5rem; }
    .tab-btn { background: transparent; color: var(--muted); border: none; padding: 0.6rem 1.2rem; font-size: 0.95rem; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; font-weight: 600; }
    .tab-btn:hover { color: var(--text); }
    .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
    .tab-panel { display: none; }
    .tab-panel.active { display: block; }
    .tx-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
    .tx-table th, .tx-table td { padding: 0.3rem 0.5rem; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .tx-table th { color: #9aa; font-size: 0.72rem; text-transform: uppercase; position: sticky; top: 0; background: var(--panel); }
    .tx-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
    .tx-action-buy { color: #5ee298; font-weight: 600; }
    .tx-action-sell { color: #ff9b6b; font-weight: 600; }
    .tx-action-rsu_vest { color: #7cb2ff; font-weight: 600; }
    .tx-action-espp_purchase { color: #c090ff; font-weight: 600; }
    .tax-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
    .tax-box { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 0.9rem 1rem; }
    .tax-box .year { font-size: 0.75rem; color: #9aa; text-transform: uppercase; letter-spacing: 0.05em; }
    .tax-box .amt { font-size: 1.4rem; font-weight: 700; margin: 0.3rem 0; }
    .tax-box .detail { font-size: 0.78rem; color: #bcd; line-height: 1.5; }
    .tax-box.highlight { border-color: var(--accent); background: rgba(61,156,245,0.08); }
    .tax-table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 0.5rem; max-height: 600px; overflow-y: auto; }
    .filter-bar { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.75rem; }
    .filter-bar select, .filter-bar input { background: var(--panel); border: 1px solid var(--border); color: var(--text); padding: 0.3rem 0.6rem; border-radius: 6px; font-size: 0.85rem; }
    .wl-ticker { font-weight: 700; font-size: 0.98rem; }
    .wl-thesis { color: #bcd; font-size: 0.78rem; margin-top: 0.15rem; line-height: 1.35; }
    .wl-num { font-variant-numeric: tabular-nums; }
    .wl-pos { color: var(--good); }
    .wl-neg { color: #ff6b6b; }
    .wl-meta { font-size: 0.75rem; color: #9aa; margin: 0 0 0.6rem 0; }

    /* --- Watchlist column widths (R-card improvement 2026-05-05) --- */
    .wl-table { table-layout: fixed; }
    .wl-col-ticker   { width: 42%; }      /* widest — room for thesis text */
    .wl-col-num      { width: 11%; }      /* default for numeric cols */
    .wl-table .wl-col-num:nth-of-type(2) { width: 8%; }   /* Spot — narrower */
    .wl-table .wl-col-num:nth-of-type(3) { width: 8%; }   /* PE / P&L — narrower */
    .wl-col-triggers { width: 17%; }      /* entry triggers — 2 levels */
    .wl-table-trim .wl-col-triggers { width: 21%; }  /* trims have 3 levels (Y/R/stop) */
    .wl-table td { word-wrap: break-word; overflow-wrap: anywhere; }
    .wl-table td:nth-child(5) {           /* Entry/Trim triggers column */
      white-space: nowrap;                /* keep "🟡 ≤$180" on one line */
      font-variant-numeric: tabular-nums;
    }
    .wl-table td:nth-child(5) .wl-thesis {
      white-space: normal;                /* distance hints may wrap */
    }
    .wl-thesis { word-break: break-word; }



    /* --- Investments lifetime banner (2026-05-05) --- */
    .inv-lifetime-banner {
      display: flex;
      flex-wrap: wrap;
      gap: 1.25rem;
      padding: 0.6rem 0.9rem;
      margin-bottom: 0.7rem;
      background: rgba(255,255,255,0.035);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      font-size: 0.88rem;
      align-items: baseline;
    }
    .inv-lifetime-banner .ilb-label { color: #9aa; }
    .inv-lifetime-banner .ilb-value { font-weight: 600; }
    .inv-lifetime-banner .ilb-total { font-size: 1rem; }
    .inv-lifetime-banner .ilb-pos { color: var(--good); }
    .inv-lifetime-banner .ilb-neg { color: #ff6b6b; }
    .inv-lifetime-banner .ilb-sep { opacity: 0.35; }