/* Fi-Plan — dark-first glass UI. Tokens first, then layout, components, pages. */

:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg-base: #15111c;
  --bg-deep: #0f0c14;
  --surface-low: rgba(255,255,255,0.045);
  --surface: rgba(255,255,255,0.08);
  --surface-strong: rgba(255,255,255,0.14);
  --surface-input: rgba(255,255,255,0.05);
  --surface-input-hover: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);
  --border-faint: rgba(255,255,255,0.06);
  --text: #F5F2F8;
  --text-dim: rgba(245,242,248,0.66);
  --text-faint: rgba(245,242,248,0.44);
  /* Accent: fris paars. (--cream is de naam van het accent-token, historisch.) */
  --cream: #C69CE0;
  --cream-100: #EEDFF8;
  --cream-200: #DBBDEE;
  --cream-dim: rgba(198,156,224,0.18);
  --cream-faint: rgba(198,156,224,0.08);
  --cream-muted: rgba(198,156,224,0.55);
  --accent-rgb: 198,156,224;
  --btn-grad: linear-gradient(135deg, #B07BE0 0%, #8A4FC4 55%, #6B2FA3 100%);
  --btn-grad-hover: linear-gradient(135deg, #BC8CE8 0%, #955BCE 55%, #7538AE 100%);
  --btn-text: #FFFFFF;
  --violet: #8B6CFF; --violet-soft: #A794FF;
  --rose: #FF7CB1; --rose-soft: #FFA6C9;
  --mint: #3DDDA1; --mint-soft: #7CF4C5;
  --sage: #9BC8A0; --sage-bg: rgba(155,200,160,0.12);
  --red: #FF6B7A; --red-bg: rgba(255,107,122,0.12);
  --amber: #F0B562;
  --shadow-soft: 0 14px 50px -20px rgba(0,0,0,0.45);
  --shadow-glass: 0 1px 0 0 rgba(255,255,255,0.10) inset, 0 14px 50px -20px rgba(0,0,0,0.45);
  --selection-bg: #C69CE0; --selection-fg: #1A1024;
  /* Aliases used by app.js (charts) and legacy component rules */
  --bg: var(--bg-base);
  --surface-1: #1E1826;
  --surface-2: rgba(255,255,255,0.06);
  --text-primary: var(--text);
  --text-secondary: var(--text-dim);
  --text-muted: var(--text-faint);
  --series-1: #C69CE0; --series-2: #FF7CB1; --series-3: #3DDDA1; --series-4: #F0B562;
  --series-5: #8B6CFF; --series-6: #9BC8A0; --series-7: #7FD3F0; --series-8: #FF6B7A;
  --good: #9BC8A0; --warn: #F0B562; --serious: #FF6B7A; --info: #C69CE0;
  --radius: 16px; --radius-sm: 12px;
  --font: 'Barlow', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg-base: #F7F5FA;
  --bg-deep: #EEE9F4;
  --surface-low: rgba(255,255,255,0.72);
  --surface: rgba(255,255,255,0.92);
  --surface-strong: #FFFFFF;
  --surface-input: #FFFFFF;
  --surface-input-hover: #FFFFFF;
  --border: rgba(45,20,70,0.13);
  --border-strong: rgba(45,20,70,0.26);
  --border-faint: rgba(45,20,70,0.07);
  --text: #221532;
  --text-dim: rgba(34,21,50,0.76);
  --text-faint: rgba(34,21,50,0.52);
  --cream: #4F1C70;
  --cream-100: #3A1253;
  --cream-200: #5F2C84;
  --cream-dim: rgba(79,28,112,0.14);
  --cream-faint: rgba(79,28,112,0.07);
  --cream-muted: rgba(79,28,112,0.55);
  --accent-rgb: 79,28,112;
  --btn-grad: linear-gradient(135deg, #7A3FB0 0%, #5E2689 55%, #4F1C70 100%);
  --btn-grad-hover: linear-gradient(135deg, #8749BE 0%, #6A2E98 55%, #58217D 100%);
  --btn-text: #FFFFFF;
  --violet: #5C42C8; --violet-soft: #7C5CFF;
  --rose: #D8558E; --rose-soft: #FF7CB1;
  --mint: #1F9E72; --mint-soft: #3DDDA1;
  --sage: #3E8A5A; --sage-bg: rgba(155,200,160,0.18);
  --red: #C04050; --red-bg: rgba(255,107,122,0.14);
  --amber: #A8761F;
  --shadow-soft: 0 12px 40px -16px rgba(60,30,90,0.18);
  --shadow-glass: 0 1px 0 0 rgba(255,255,255,0.85) inset, 0 14px 40px -16px rgba(60,30,90,0.16);
  --selection-bg: #4F1C70; --selection-fg: #FFFFFF;
  --bg: var(--bg-base);
  --surface-1: #FFFFFF;
  --surface-2: rgba(45,20,70,0.05);
  --series-1: #4F1C70; --series-2: #EB6834; --series-3: #1BAF7A; --series-4: #EDA100;
  --series-5: #7C5CFF; --series-6: #3E8A5A; --series-7: #1E88B8; --series-8: #E34948;
  --good: #3E8A5A; --warn: #A8761F; --serious: #C04050; --info: #4F1C70;
}

/* ---------------------------------------------------------------- base */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
html { background: var(--bg-base); }
body {
  background: var(--bg-base); color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.45;
  letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11", "rlig";
  transition: background-color .3s ease, color .3s ease;
}
::selection { background: var(--selection-bg); color: var(--selection-fg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: content-box; border: 2px solid transparent; }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

.aurora { position: fixed; inset: 0; z-index: -10; overflow: hidden; pointer-events: none; background: var(--bg-base); }
.aurora::before {
  content: ''; position: absolute; inset: -10%;
  background:
    radial-gradient(900px 700px at 8% 12%, rgba(124,92,255,0.26), transparent 65%),
    radial-gradient(820px 620px at 92% 5%, rgba(255,124,177,0.20), transparent 65%),
    radial-gradient(880px 720px at 70% 95%, rgba(79,28,112,0.45), transparent 65%),
    radial-gradient(700px 580px at 25% 100%, rgba(61,221,161,0.12), transparent 65%);
}
:root[data-theme="light"] .aurora::before {
  background:
    radial-gradient(900px 700px at 8% 12%, rgba(124,92,255,0.14), transparent 65%),
    radial-gradient(820px 620px at 92% 5%, rgba(255,124,177,0.14), transparent 65%),
    radial-gradient(880px 720px at 70% 95%, rgba(79,28,112,0.14), transparent 65%),
    radial-gradient(700px 580px at 25% 100%, rgba(61,221,161,0.10), transparent 65%);
}

a { color: var(--cream); text-decoration: none; }
a:hover { color: var(--cream-100); text-decoration: underline; text-underline-offset: 3px; }
h1 { font-size: 30px; margin: 0 0 4px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
h2 { font-size: 15px; margin: 0 0 12px; font-weight: 600; letter-spacing: -0.02em; }
h3 { font-size: 10px; margin: 0 0 8px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .12em; }
p { margin: 0 0 8px; }
code { font-family: var(--mono); font-size: 12px; background: var(--surface); padding: 1px 6px; border-radius: 6px; border: 1px solid var(--border-faint); }
.muted { color: var(--text-faint); }
.secondary { color: var(--text-dim); }
.small { font-size: 12px; }
.mono { font-variant-numeric: tabular-nums; }
.good-text { color: var(--mint); }
.bad-text { color: var(--red); }

/* ---------------------------------------------------------------- shell */
#app { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
body.unauth #app { grid-template-columns: minmax(0, 1fr); }
body.unauth .sidebar { display: none; }
.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 22px; padding: 26px 16px 18px;
  background: linear-gradient(180deg, var(--surface-low), transparent); border-right: 1px solid var(--border-faint);
  backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
}
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 24px; letter-spacing: -0.03em; padding: 0 4px; color: var(--text); text-decoration: none; }
.brand:hover { text-decoration: none; color: var(--text); }
.brand img { flex: none; }
.brand small { display: block; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; margin-top: 2px; }
.project-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); margin-bottom: 8px; display: block; }
.project-switch select { width: 100%; font-size: 12px; padding: 10px 12px; }
nav { display: flex; flex-direction: column; gap: 3px; flex: 1; overflow: auto; }
.nav-label { font-size: 10px; font-weight: 600; color: var(--text-faint); letter-spacing: .12em; padding: 16px 12px 6px; }
.nav-label:first-child { padding-top: 0; }
nav a {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; color: var(--text-dim); text-decoration: none;
  font-weight: 500; font-size: 13px; letter-spacing: -0.015em; border: 1px solid transparent; transition: all .2s ease;
}
nav a svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; transition: transform .2s ease, color .2s ease; }
nav a:hover { background: rgba(255,255,255,0.04); color: var(--text); border-color: rgba(255,255,255,0.06); text-decoration: none; }
nav a:hover svg { transform: scale(1.1); color: var(--cream); }
nav a.active { color: var(--cream); background: linear-gradient(90deg, var(--cream-dim), var(--cream-faint)); border-color: rgba(var(--accent-rgb),0.30); }
nav a.active::after { content: ''; margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--cream); }
nav a .badge { margin-left: auto; }
nav .sep { height: 1px; background: var(--border-faint); margin: 8px 6px; }
.sidebar-foot { border-top: 1px solid var(--border-faint); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.sidebar-foot .row { justify-content: space-between; }
#user-name { font-size: 12px; font-weight: 600; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#save-state { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }

main { padding: 36px 40px 70px; max-width: 1640px; width: 100%; margin: 0 auto; min-width: 0; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.page-head .sub { color: var(--text-faint); font-size: 13px; margin-top: 6px; max-width: 760px; }

/* stagger */
main > * { animation: fadeUp 240ms cubic-bezier(0.22, 1, 0.36, 1) backwards; }
main > *:nth-child(2) { animation-delay: 35ms; } main > *:nth-child(3) { animation-delay: 60ms; } main > *:nth-child(4) { animation-delay: 85ms; } main > *:nth-child(5) { animation-delay: 110ms; }
.grid > * { animation: fadeUp 260ms cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.grid > *:nth-child(2) { animation-delay: 30ms; } .grid > *:nth-child(3) { animation-delay: 55ms; } .grid > *:nth-child(4) { animation-delay: 80ms; } .grid > *:nth-child(5) { animation-delay: 105ms; } .grid > *:nth-child(6) { animation-delay: 130ms; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- layout */
.grid { display: grid; gap: 16px; align-items: start; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid.c5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.span2 { grid-column: span 2; min-width: 0; }
.span3 { grid-column: span 3; min-width: 0; }
.card {
  position: relative; min-width: 0; overflow-x: auto; padding: 20px 22px; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), var(--surface-low)); border: 1px solid var(--border); box-shadow: var(--shadow-glass);
  backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  transition: border-color .2s ease, transform .2s ease;
}
.card.flat { box-shadow: none; }
.card .card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 8px; }
.card .card-head h2 { margin: 0; }
.card h2 { font-size: 14px; }

/* ---------------------------------------------------------------- stats */
.stat { display: flex; flex-direction: column; gap: 4px; padding: 18px 18px; }
.stat .label { color: var(--text-faint); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
.stat .value { font-size: clamp(22px, 1.9vw, 30px); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin: 4px 0; line-height: 1.1; }
.stat .delta { font-size: 11px; color: var(--text-faint); line-height: 1.5; }
.stat .delta.good { color: var(--sage); }
.stat .delta.warn { color: var(--amber); }
.stat .delta.bad { color: var(--red); }
.overview-stats { gap: 12px; align-items: stretch; }
.overview-stats .stat:first-child { border-color: rgba(var(--accent-rgb),0.40); }
.meter { height: 6px; background: var(--surface); border-radius: 3px; overflow: hidden; margin-top: 8px; }
.meter > i { display: block; height: 100%; background: var(--btn-grad); border-radius: 3px; }

/* ---------------------------------------------------------------- charts */
.chart { position: relative; height: 260px; }
.chart.tall { height: 340px; }
.chart.short { height: 180px; }
canvas { width: 100% !important; }
.chart-description { color: var(--text-faint); font-size: 11px; margin: -3px 0 16px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); margin-top: 8px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* ---------------------------------------------------------------- forms */
label { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); margin-bottom: 6px; }
input[type=text], input[type=number], input[type=password], input[type=date], input[type=month], input[type=file], select, textarea {
  width: 100%; background: var(--surface-input); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; font: inherit; font-size: 14px;
  font-variant-numeric: tabular-nums; outline: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
input::placeholder { color: var(--text-faint); }
input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus { border-color: rgba(var(--accent-rgb),0.55); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.12); background-color: var(--surface-input-hover); }   /* alleen de kleur: de shorthand zou het pijltje van een select wissen */
select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-faint) 50%), linear-gradient(135deg, var(--text-faint) 50%, transparent 50%); background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
select option { background: var(--bg-deep); color: var(--text); }
:root[data-theme="light"] select option { background: #fff; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--cream); }
input[type=file] { padding: 7px 8px; font-size: 13px; color: var(--text-dim, var(--text-faint)); cursor: pointer; }
input[type=file]::file-selector-button { font: inherit; font-size: 12px; font-weight: 600; margin-right: 12px; padding: 5px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: transparent; color: var(--text); cursor: pointer; }
hr.sep { border: 0; height: 1px; background: var(--border-faint); margin: 18px 0; }
textarea { min-height: 120px; font-family: var(--mono); font-size: 12px; }
.field { margin-bottom: 12px; min-width: 0; }
/* Velden naast elkaar staan op één lijn, ook als een label over twee regels loopt: het label vult de ruimte en de tekst zakt naar het veld. */
.fields > .field { display: flex; flex-direction: column; margin-bottom: 0; }
.fields > .field > label { flex: 1 0 auto; display: flex; align-items: flex-end; }
.field .hint { font-size: 11px; color: var(--text-faint); margin-top: 4px; }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 14px; }
.input-wrap { position: relative; }
.input-wrap .unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 12px; pointer-events: none; }
.input-wrap input { padding-right: 34px; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-input); cursor: pointer; user-select: none; text-align: left; color: var(--text); font: inherit; width: 100%; transition: border-color .2s ease, background .2s ease; }
.toggle:hover { border-color: var(--border-strong); }
.toggle span.t { font-weight: 500; letter-spacing: -0.01em; }
.toggle small { display: block; color: var(--text-faint); font-weight: 400; font-size: 11px; }
.toggle.on { border-color: rgba(var(--accent-rgb),0.40); background: var(--cream-faint); }
.switch { width: 36px; height: 20px; border-radius: 10px; background: var(--border-strong); position: relative; flex: none; transition: background .15s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.toggle.on .switch { background: var(--btn-grad); }
.toggle.on .switch::after { left: 18px; background: #FFFFFF; }
.toggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--radius-sm); padding: 9px 16px; min-height: 38px;
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; text-decoration: none; user-select: none; transform: translateZ(0); transition: all .15s ease-out;
  color: var(--btn-text); background: var(--btn-grad);
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.18) inset, 0 4px 14px -8px rgba(0,0,0,0.35);
}
.btn:hover { transform: translateY(-1px); text-decoration: none; color: var(--btn-text); background: var(--btn-grad-hover); box-shadow: 0 1px 0 0 rgba(255,255,255,0.22) inset, 0 6px 16px -8px rgba(0,0,0,0.4); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.ghost { color: var(--text); background: var(--surface); border: 1px solid var(--border); box-shadow: none; }
.btn.ghost:hover { background: linear-gradient(135deg, rgba(var(--accent-rgb),0.14), rgba(var(--accent-rgb),0.06)), var(--surface); border-color: rgba(var(--accent-rgb),0.50); box-shadow: none; color: var(--text); }
.btn.danger { color: var(--red); background: var(--red-bg); border: 1px solid rgba(255,107,122,0.32); box-shadow: none; }
.btn.danger:hover { background: rgba(255,107,122,0.18); border-color: rgba(255,107,122,0.55); color: var(--red); }
.btn.small { padding: 5px 11px; font-size: 12px; min-height: 30px; }
.btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.btn .spin { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.icon-btn { background: transparent; border: 0; color: var(--text-faint); cursor: pointer; padding: 5px; border-radius: 8px; transition: all .15s ease; }
.icon-btn:hover { background: var(--red-bg); color: var(--red); }
.icon-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

/* ---------------------------------------------------------------- tables */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); font-weight: 600; padding: 8px 8px; border-bottom: 1px solid var(--border-faint); white-space: nowrap; }
td { padding: 7px 8px; border-bottom: 1px solid var(--border-faint); vertical-align: middle; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
tr.total td { font-weight: 600; border-top: 2px solid var(--border); }
table input, table select { padding: 7px 10px; font-size: 13px; }
table input[type=text] { min-width: 120px; }
table input[type=number] { min-width: 88px; }
table select { min-width: 100px; }
td.act { width: 36px; text-align: right; white-space: nowrap; }
td.bad { color: var(--red); }
/* Automatische regels (hypotheek uit de woningmodule): tekst lijnt uit met de invoervelden erboven en eronder */
tr.auto-row td:not(.act) { padding: 12px 19px; color: var(--text-dim); }
tr.auto-row td:first-child { color: var(--text); }
tr.auto-row .badge { margin-left: 6px; }
.warn-text { color: var(--amber); }
/* Rapport: altijd licht, opgemaakt als document en afdrukbaar als PDF */
.rapport-keuzes { margin-bottom: 20px; }
.rapport-vinkjes { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 4px 0 12px; font-size: 13px; }
.rapport-vinkjes label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.rapport { background: #fff; color: #1b1524; border: 1px solid var(--border); border-radius: 18px; padding: clamp(20px, 4vw, 48px); max-width: 1000px; margin: 0 auto; }
.rapport-kop { display: flex; align-items: center; gap: 20px; padding-bottom: 20px; margin-bottom: 8px; border-bottom: 2px solid #4a1d78; }
.rapport-kop h1 { font-size: 26px; letter-spacing: -0.03em; margin: 0; }
.rapport-kop p { margin: 4px 0 0; font-size: 13px; color: #6b6478; }
.rapport-sectie { padding-top: 26px; break-inside: avoid-page; }
.rapport-sectie h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: #4a1d78; margin: 0 0 12px; }
.rapport-sectie h3 { font-size: 13px; margin: 18px 0 6px; text-transform: none; letter-spacing: 0; color: #1b1524; }
.rapport table { font-size: 13px; }
.rapport td small { display: block; font-size: 11px; color: #8a8496; }
.rapport tr.totaal td { font-weight: 600; border-top: 1px solid #cfc9da; }
.rapport tr.telt-niet td { color: #8a8496; }
.rapport ul { margin: 12px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; color: #4d4759; }
.rapport-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.rapport-stats div { border: 1px solid #e4e0ec; border-radius: 12px; padding: 12px; }
.rapport-stats span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: #8a8496; font-weight: 600; }
.rapport-stats b { display: block; margin-top: 4px; font-size: 17px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rapport-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; margin-bottom: 12px; }
.rapport-voet { margin-top: 32px; padding-top: 14px; border-top: 1px solid #e4e0ec; font-size: 11px; color: #8a8496; line-height: 1.6; }
@media (max-width: 760px) { .rapport-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rapport-twee { grid-template-columns: 1fr; } }
@page { size: A4; margin: 14mm; }
@media print {
  html, body { background: #fff !important; }
  .sidebar, #mobile-nav, .rapport-keuzes, .mfa-banner, #app-error, #menu-toggle { display: none !important; }
  #app { display: block !important; }
  main { padding: 0 !important; max-width: none !important; }
  .rapport { border: 0; border-radius: 0; padding: 0; max-width: none; }
  .rapport-sectie { break-inside: avoid-page; }
  .rapport table { break-inside: auto; } .rapport tr { break-inside: avoid; }
  .rapport .chart { height: 240px; break-inside: avoid; }
  .rapport * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* Toeslagen */
.toeslag .badge svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.toeslag ul { margin: 8px 0 0; padding-left: 18px; color: var(--text-dim); font-size: 13px; line-height: 1.6; }
.toeslag ul.vragen a { font-weight: 600; }
.toeslag.mogelijk_recht { border-color: rgba(var(--accent-rgb), 0.35); }
/* Hoe is dit berekend? */
.uitleg-knop { background: none; border: 0; padding: 0; margin-left: 6px; color: var(--text-faint); cursor: pointer; vertical-align: -3px; line-height: 0; border-radius: 50%; }
.uitleg-knop:hover, .uitleg-knop:focus-visible { color: var(--cream); }
.uitleg-knop svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.uitleg table { margin-bottom: 8px; }
.uitleg tr.telt-niet td { color: var(--text-faint); }
.uitleg tr.totaal td { font-weight: 600; border-top: 1px solid var(--border-strong); }
.uitleg h3 { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); margin: 18px 0 6px; }
.uitleg ul { margin: 0; padding-left: 18px; color: var(--text-dim); font-size: 13px; line-height: 1.6; }
/* Dashboard: signalen beknopt, de volledige tekst staat op de pagina Signalen */
.signalen-kort .tekst { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.signalen-kort .bron { display: none; }
/* Koersgrafiek: zoomen en schuiven */
/* Samenvatting links, periodeknoppen vast rechtsboven: de knoppen verspringen niet als de tekst langer wordt, en de
   gereserveerde hoogte (twee regels) houdt ook de grafiek op zijn plek. */
.tracker-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tracker-kop > p { flex: 1 1 0; min-width: 0; margin: 0; min-height: 3.2em; line-height: 1.6; }
.tracker-tools { gap: 12px; flex: none; flex-wrap: nowrap; justify-content: flex-end; margin-left: auto; }
.tracker-tools .tracker-ranges { flex-wrap: nowrap; }
@media (max-width: 760px) { .tracker-kop { flex-direction: column-reverse; align-items: stretch; gap: 10px; } .tracker-kop > p { min-height: 0; flex: none; } }
.tracker-chart canvas { touch-action: pan-y; }
.tracker-chart canvas.zoomed { cursor: grab; }
.tracker-chart canvas.sleept { cursor: grabbing; }
.tracker-hint { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.tracker-stijl { display: flex; gap: 4px; margin-left: auto; }
.tracker-stijl .icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tracker-stijl .icon-btn rect { fill: currentColor; stroke: none; }
.tracker-stijl .icon-btn:hover { background: var(--surface-strong); color: var(--text); }
.tracker-stijl .icon-btn.active { background: var(--cream-dim); color: var(--cream); border-color: var(--cream-muted); }
html[data-i18n="pending"] body { visibility: hidden; }   /* Engels: wacht op het woordenboek, geen flits Nederlands */
/* Verwachte groei */
.groei-tabel td small { display: block; font-size: 11px; color: var(--text-faint); font-weight: 400; margin-top: 2px; }
.groei-tabel td { padding-top: 10px; padding-bottom: 10px; white-space: nowrap; }
.groei-tabel tr.totaal td { border-top: 1px solid var(--border-strong); border-bottom: 0; font-weight: 600; }
.groei-tabel.posities td:first-child { display: flex; align-items: center; gap: 10px; white-space: normal; }
.groei-tabel.posities .avatar { width: 28px; height: 28px; border-radius: 9px; font-size: 10px; }
.groei .portfolio-details { margin: 8px 0 0; }

/* ---------------------------------------------------------------- signals, badges, kv */
.signal { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-faint); }
.signal:last-child { border-bottom: 0; }
.signal .ico { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; }
.signal .ico svg { width: 13px; height: 13px; stroke: #FFFFFF; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.signal.let_op .ico { background: var(--amber); }
.signal.kans .ico { background: var(--mint); }
.signal.info .ico { background: var(--cream); }
.signal .titel { font-weight: 600; font-size: 13px; margin-bottom: 3px; letter-spacing: -0.01em; }
.signal .tekst { color: var(--text-dim); font-size: 12px; line-height: 1.6; }
.signal .bron { font-size: 10px; color: var(--text-faint); margin-top: 4px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; padding: 3px 9px; border-radius: 999px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cream); background: var(--cream-dim); border: 1px solid rgba(var(--accent-rgb),0.34); }
.badge.warn { color: var(--amber); background: rgba(233,184,114,0.14); border-color: rgba(233,184,114,0.36); }
.badge.good { color: var(--sage); background: var(--sage-bg); border-color: rgba(155,200,160,0.34); }
.badge.info { color: var(--violet-soft); background: rgba(124,92,255,0.12); border-color: rgba(124,92,255,0.34); }
.badge.red { color: var(--red); background: var(--red-bg); border-color: rgba(255,107,122,0.34); }
.badge.muted { color: var(--text-dim); background: var(--surface-low); border-color: var(--border); }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 5px 16px; font-variant-numeric: tabular-nums; }
.kv .k { color: var(--text-dim); font-size: 13px; }
.kv .v { text-align: right; font-weight: 500; }
.kv .v.good { color: var(--sage); }
.kv .v.bad { color: var(--red); }
.kv .total { font-weight: 650; border-top: 1px solid var(--border); padding-top: 6px; margin-top: 3px; }
.kv .total.k { color: var(--text); }

/* ---------------------------------------------------------------- misc components */
.empty { padding: 40px; text-align: center; color: var(--text-faint); }
.empty.start { padding: 48px 24px; }
.empty.start h2 { font-size: 22px; letter-spacing: -0.03em; color: var(--text); margin-bottom: 8px; }
.empty.start p { max-width: 460px; margin: 0 auto 18px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-faint); margin-bottom: 14px; }
.tabs button { background: transparent; border: 0; padding: 8px 12px; font: inherit; color: var(--text-dim); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; }
.tabs button.active { color: var(--text); border-color: var(--cream); }
.md h1 { font-size: 24px; }
.md h2 { font-size: 16px; margin-top: 24px; }
.md h3 { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--text); margin-top: 16px; }
.md ul { padding-left: 18px; }
.md li { margin-bottom: 5px; color: var(--text-dim); }
.md p { color: var(--text-dim); }
.steps { display: flex; gap: 6px; margin-bottom: 10px; }
.steps span { flex: 1; height: 4px; border-radius: 2px; background: var(--surface); transition: background .3s ease; }
.steps span.done { background: var(--btn-grad); }
.flow { display: grid; grid-template-columns: 1fr 40px 1fr 40px 1fr; align-items: center; gap: 6px; }
.flow .box { background: var(--surface); border: 1px solid var(--border-faint); border-radius: 12px; padding: 8px 12px; font-size: 12px; color: var(--text-dim); }
.flow .box b { display: block; font-variant-numeric: tabular-nums; color: var(--text); font-size: 14px; }
.flow .arrow { text-align: center; color: var(--text-faint); }
.pill-row { display: flex; gap: 6px; flex-wrap: wrap; }
.pill { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: 12px; font-weight: 500; color: var(--text-dim); transition: all .15s ease; }
.pill:hover { border-color: rgba(var(--accent-rgb),0.5); color: var(--text); }
.pill.active { color: #FFFFFF; background: var(--btn-grad); border-color: transparent; box-shadow: none; }
.section-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 12px; }
.section-heading h2 { font-size: 10px; margin: 0; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); }
.type-badge { display: inline-flex; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; border: 1px solid; }
.type-badge.etf, .type-badge.aandeel { color: var(--violet-soft); border-color: rgba(124,92,255,0.4); background: rgba(124,92,255,0.12); }
.type-badge.crypto { color: var(--amber); border-color: rgba(233,184,114,0.4); background: rgba(233,184,114,0.12); }
.gradient-text { background: linear-gradient(135deg, var(--text) 0%, var(--cream) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* time buckets */
.bucket { border: 1px solid var(--border); border-radius: 14px; padding: 14px; background: var(--surface-low); min-width: 0; overflow-x: auto; }
.bucket .bh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-weight: 600; gap: 8px; }
.bucket .fields { grid-template-columns: minmax(0, 1fr) 96px 96px !important; max-width: 520px; }
.bucket table input[type=text] { width: 100%; min-width: 110px; }
.bucket table input[type=number] { min-width: 84px; width: 100%; }
.bucket table th:nth-child(2), .bucket table td:nth-child(2) { width: 130px; }
.bucket table th:nth-child(3), .bucket table td:nth-child(3) { width: 110px; }
.bucket table th:nth-child(4), .bucket table td:nth-child(4) { width: 70px; text-align: center; }
.bucket td, .bucket th { padding: 6px 5px; }
.bucket td.act { width: 30px; }
.buckets-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 10px; }
@media (min-width: 1700px) { .buckets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- overview hero */
.overview-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; overflow: hidden; margin-bottom: 22px; padding: 20px 28px; border-radius: 18px;
  background: linear-gradient(180deg, var(--surface), var(--surface-low)); border: 1px solid var(--border); box-shadow: var(--shadow-glass);
  backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
}
.overview-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(600px 260px at 85% 0%, rgba(var(--accent-rgb),0.20), transparent 60%), radial-gradient(400px 220px at 0% 100%, rgba(124,92,255,0.16), transparent 60%); }
.overview-hero > * { position: relative; }
.eyebrow { font-size: 10px; letter-spacing: .14em; color: var(--cream); font-weight: 600; text-transform: uppercase; }
.overview-hero h2 { font-size: clamp(20px, 1.9vw, 26px); font-weight: 600; line-height: 1.2; letter-spacing: -0.025em; margin: 6px 0 0; }
.overview-hero p { font-size: 13px; line-height: 1.7; color: var(--text-dim); max-width: 460px; }
.overview-hero .hero-button { margin: 0; padding: 9px 16px; font-size: 13px; gap: 12px; flex: none; }
.hero-button span { font-size: 18px; line-height: 1; }
.hero-progress { position: relative; display: flex; align-items: center; gap: 28px; min-width: 0; }
.hero-progress-inner { position: relative; display: flex; align-items: center; gap: 16px; }
.hero-fire { display: flex; flex-direction: column; gap: 6px; min-width: 190px; }
.hero-fire span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--text-faint); }
.hero-progress-inner > span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--text-faint); }
.hero-progress-inner strong { font-size: 40px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; background: linear-gradient(135deg, var(--text) 0%, var(--cream) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-progress-inner small { font-size: 11px; color: var(--text-dim); }
.hero-progress .meter { width: 100%; margin: 0; }
.hero-orbit { display: none; }

/* ---------------------------------------------------------------- auth */
.auth-wrap { min-height: calc(100vh - 120px); display: grid; place-items: center; padding: 24px 0; }
.auth-card { width: 100%; max-width: 440px; padding: 34px 34px 30px; overflow: visible; }
.auth-brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 24px; letter-spacing: -0.03em; margin-bottom: 26px; }
.auth-brand small { display: block; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; margin-top: 2px; }
.auth-card h1 { font-size: 28px; margin-bottom: 6px; }
.auth-card > p { font-size: 13px; margin-bottom: 22px; }
.auth-form .field { margin-bottom: 14px; }
.auth-error { color: var(--red); background: var(--red-bg); border: 1px solid rgba(255,107,122,0.34); border-radius: 10px; padding: 9px 12px; font-size: 12px; margin-bottom: 14px; }
.auth-submit { width: 100%; margin-top: 4px; }

/* ---------------------------------------------------------------- wizard */
.wizard { max-width: 980px; }
.wiz-labels { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.wiz-labels span { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.wiz-labels span.done { color: var(--text-dim); }
.wiz-labels span.active { color: var(--cream); }
.wiz-title { font-size: 22px; letter-spacing: -0.03em; margin-bottom: 4px; }
.wiz-sub { margin-bottom: 18px; font-size: 13px; }
.wiz-nav { margin-top: 20px; }

/* ---------------------------------------------------------------- vermogen: tabs, balans, portfolio-blok */
.tabs { display: inline-flex; gap: 4px; padding: 4px; margin: -8px 0 22px; border-radius: 999px; background: var(--surface-low); border: 1px solid var(--border); max-width: 100%; }
.tabs a { padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-dim); text-decoration: none; white-space: nowrap; transition: color .15s ease, background .15s ease; }
.tabs a:hover { color: var(--text); }
.tabs a.active { color: #FFFFFF; background: var(--btn-grad); }
.vm-total { font-size: clamp(28px, 2.6vw, 38px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; font-variant-numeric: tabular-nums; margin: 2px 0 12px; }
.vm-sum { margin-left: 8px; font-weight: 500; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.vm-leeg { padding: 4px 0 2px; max-width: 620px; }
.balans .r { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; padding: 9px 0; border-top: 1px solid var(--border-faint); color: inherit; text-decoration: none; font-size: 13px; }
.balans .r > span:first-child { color: var(--text-dim); }
.balans a.r:hover > span:first-child { color: var(--cream); }
.balans a.r > span:first-child::after { content: ' ›'; color: var(--text-faint); }
.balans .r b { font-weight: 600; font-variant-numeric: tabular-nums; }
.balans .r b.bad { color: var(--red); }
.balans .share { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: var(--surface); overflow: hidden; }
.balans .share i { display: block; height: 100%; background: var(--btn-grad); }
.balans .share.neg i { background: var(--red); }
.vm-list { display: flex; flex-direction: column; }
.vm-pos { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 6px; border-top: 1px solid var(--border-faint); color: inherit; text-decoration: none; border-radius: 10px; }
.vm-pos:first-child { border-top: 0; }
.vm-pos:hover b { color: var(--cream); }
.vm-pos .txt { min-width: 0; display: grid; }
.vm-pos .txt b { font-weight: 600; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-pos small { font-size: 11px; color: var(--text-faint); }
.vm-pos .n { text-align: right; display: grid; font-variant-numeric: tabular-nums; }
.vm-pos .n .up { color: var(--mint); } .vm-pos .n .down { color: var(--red); }
td.chk, th.chk { text-align: center; width: 56px; }
@media (max-width: 640px) { table.vm th, table.vm td { padding-left: 4px; padding-right: 4px; } table.vm input[type=text] { min-width: 92px; } table.vm input[type=number] { min-width: 76px; } table.vm select { min-width: 72px; } table.vm input, table.vm select { padding-left: 8px; padding-right: 8px; } }
details.meer { margin-top: 12px; border-top: 1px solid var(--border-faint); padding-top: 10px; }
details.meer summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-dim); list-style: none; }
details.meer summary::-webkit-details-marker { display: none; }
details.meer summary::before { content: '+ '; color: var(--cream); }
details.meer[open] summary::before { content: '− '; }
details.meer[open] summary { margin-bottom: 10px; }

/* ---------------------------------------------------------------- portfolio */
.pf-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: center; margin-bottom: 16px; padding: 28px 30px; }
.pf-hero .label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--text-faint); }
.pf-hero .total { font-size: clamp(36px, 4vw, 56px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; margin: 6px 0 8px; }
.pf-hero .change { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 8px; }
.pf-hero .change .badge { text-transform: none; letter-spacing: 0; font-size: 12px; padding: 3px 10px; }
.pf-hero .change.up { color: var(--mint); }
.pf-hero .change.down { color: var(--red); }
.pf-hero .change.up .badge { color: var(--mint); background: rgba(61,221,161,0.12); border-color: rgba(61,221,161,0.34); }
.pf-hero .change.down .badge { color: var(--red); background: var(--red-bg); border-color: rgba(255,107,122,0.34); }
.pf-hero .meta { font-size: 11px; color: var(--text-faint); margin-top: 10px; }
.pf-split { display: grid; gap: 10px; }
.pf-split .seg { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 14px; border-radius: 12px; background: var(--surface-low); border: 1px solid var(--border-faint); }
.pf-split .seg b { font-variant-numeric: tabular-nums; }
.pf-split .seg small { color: var(--text-faint); font-size: 11px; grid-column: 1 / -1; }
.pf-split .bar { height: 6px; border-radius: 3px; background: var(--surface); overflow: hidden; display: flex; grid-column: 1 / -1; margin-top: 4px; }
.pf-split .bar i { display: block; height: 100%; }
.holdings { display: flex; flex-direction: column; }
.holding { display: grid; grid-template-columns: minmax(180px, 1.6fr) repeat(5, minmax(80px, 1fr)) 34px; gap: 10px; align-items: center; padding: 11px 6px; border-bottom: 1px solid var(--border-faint); font-variant-numeric: tabular-nums; }
.holding:last-child { border-bottom: 0; }
.holding.head { padding: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); font-weight: 600; }
.holding .id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.holding .avatar { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-size: 12px; letter-spacing: .02em; flex: none; background: var(--cream-dim); color: var(--cream); border: 1px solid rgba(var(--accent-rgb),0.3); }
.holding .avatar.crypto { background: rgba(233,184,114,0.14); color: var(--amber); border-color: rgba(233,184,114,0.35); }
.holding .avatar.etf, .holding .avatar.aandeel { background: rgba(124,92,255,0.14); color: var(--violet-soft); border-color: rgba(124,92,255,0.35); }
.holding .name { font-weight: 600; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.holding .sym { font-size: 11px; color: var(--text-faint); display: flex; gap: 8px; align-items: center; }
.holding .n { text-align: right; }
.holding .n small { display: block; font-size: 11px; color: var(--text-faint); }
.holding .n input { text-align: right; min-width: 0; width: 100%; padding: 6px 8px; }
.holding .up { color: var(--mint); font-weight: 600; }
.holding .down { color: var(--red); font-weight: 600; }
.holding .share { height: 4px; background: var(--surface); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.holding .share i { display: block; height: 100%; background: var(--btn-grad); }
.pf-add { margin-top: 14px; padding: 14px; border-radius: 14px; border: 1px dashed var(--border-strong); background: var(--surface-low); }
.pf-add .fields { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr auto; align-items: end; }
.pf-add .field { margin-bottom: 0; }
.pf-results { position: relative; }
.pf-results ul { list-style: none; margin: 0; padding: 4px; position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); max-height: 240px; overflow: auto; background: var(--bg-deep); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-soft); }
:root[data-theme="light"] .pf-results ul { background: #fff; }
.pf-results li { padding: 8px 10px; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.pf-results li:hover, .pf-results li.active { background: var(--cream-dim); }
.pf-results li small { color: var(--text-faint); }
.pf-proj { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pf-proj .box { padding: 12px 14px; border-radius: 12px; background: var(--surface-low); border: 1px solid var(--border-faint); }
.pf-proj .box span { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.pf-proj .box b { font-size: 20px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

/* BV structuur */
.bv-structure { display: flex; flex-direction: column; align-items: center; gap: 0; padding-top: 4px; }
.bv-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: flex-start; width: 100%; }
.bv-box { flex: 1 1 270px; max-width: 350px; min-width: 0; padding: 16px 18px 14px; border-radius: 16px; background: var(--surface-low); border: 1px solid var(--border); font: inherit; color: var(--text); text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 12px; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.bv-box:hover, .bv-box:focus-visible { border-color: rgba(var(--accent-rgb),0.55); transform: translateY(-1px); outline: none; }
.bv-box.rol-holding { border-color: rgba(var(--accent-rgb),0.45); background: var(--cream-faint); flex: 0 1 380px; max-width: 380px; }
.bv-box .bv-naam { font-size: 15px; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bv-box .row.between { gap: 10px; flex-wrap: nowrap; }
.bv-cijfers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.bv-cijfers span, .bv-totaal span { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--text-faint); margin-bottom: 3px; }
.bv-cijfers b { display: block; font-size: 16px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bv-cijfers small { display: block; color: var(--text-faint); font-size: 11px; line-height: 1.4; margin-top: 2px; }
.bv-box .bv-edit { font-size: 11px; font-weight: 600; color: var(--text-faint); align-self: flex-end; opacity: 0; transition: opacity .15s ease; margin-top: -6px; }
.bv-box:hover .bv-edit, .bv-box:focus-visible .bv-edit { opacity: 1; color: var(--cream); }
.bv-box.leeg { align-items: center; justify-content: center; flex-direction: row; gap: 8px; border-style: dashed; color: var(--text-dim); min-height: 96px; font-size: 13px; font-weight: 600; }
.bv-box.leeg svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.bv-totaal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-faint); }
.bv-totaal b { font-size: 17px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hyp-check em.bad { color: var(--red); font-style: normal; }
@media (max-width: 760px) { .bv-totaal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bv-link { width: 2px; height: 26px; background: linear-gradient(180deg, rgba(var(--accent-rgb),0.6), rgba(var(--accent-rgb),0.1)); }
.holding .avatar.edelmetaal { background: var(--cream-dim); color: var(--cream); border-color: rgba(var(--accent-rgb),0.35); }
.type-badge.edelmetaal { color: var(--cream); border-color: rgba(var(--accent-rgb),0.4); background: var(--cream-dim); }

/* ---------------------------------------------------------------- a11y, errors, mobile */
:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 30; top: -60px; left: 16px; background: var(--surface-strong); padding: 12px 20px; border-radius: 10px; }
.skip-link:focus { top: 12px; }
.app-error { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 40; width: min(560px, calc(100% - 32px)); padding: 16px 18px; border: 1px solid rgba(255,107,122,0.4); background: var(--bg-deep); border-radius: 14px; box-shadow: var(--shadow-soft); color: var(--text); animation: fadeUp .2s ease backwards; }
:root[data-theme="light"] .app-error { background: #fff; }
.app-error .btn { margin-left: 12px; }
.menu-toggle { display: none; }
@media (max-width: 1200px) { main { padding: 28px 24px 48px; } #app { grid-template-columns: 225px minmax(0, 1fr); } .overview-hero { padding: 28px; } .overview-stats.c5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.c4, .grid.c5 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid.c3 { grid-template-columns: 1fr; } .span3 { grid-column: span 2; } .holding { grid-template-columns: minmax(160px, 1.6fr) repeat(5, minmax(70px, 1fr)) 30px; } }
@media (min-width: 801px) and (max-height: 850px) { .sidebar { padding-top: 18px; gap: 14px; } nav a { padding-top: 6px; padding-bottom: 6px; } .nav-label { padding-top: 10px; } }
@media (max-width: 800px) {
  #app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: grid; grid-template-columns: 1fr auto; padding: 14px 18px; gap: 12px; height: auto; position: static; border-right: 0; border-bottom: 1px solid var(--border-faint); }
  .brand { font-size: 21px; }
  .brand img { width: 34px; height: 34px; }
  .menu-toggle { display: inline-flex; align-self: center; }
  .project-switch { grid-column: 1 / -1; }
  .project-label { display: none; }
  .sidebar nav, .sidebar-foot { display: none; }
  .sidebar.menu-open nav { display: flex; grid-column: 1 / -1; }
  .sidebar.menu-open .sidebar-foot { display: flex; grid-column: 1 / -1; }
  main { padding: 22px 18px 40px; }
  .page-head { gap: 12px; margin-bottom: 18px; }
  h1 { font-size: 24px; }
  .grid.c2, .span2, .span3 { grid-template-columns: 1fr; grid-column: span 1; }
  .overview-hero { grid-template-columns: 1fr; padding: 24px; gap: 20px; }
  .overview-hero h2 { font-size: 22px; }
  .desktop-break { display: none; }
  .hero-progress { padding-top: 16px; border-top: 1px solid var(--border-faint); flex-wrap: wrap; gap: 16px; }
  .hero-orbit { display: none; }
  .hero-progress-inner { max-width: none; }
  .hero-progress-inner strong { font-size: 34px; }
  .overview-stats.c5, .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-stats .stat:last-child { grid-column: 1 / -1; }
  .flow { grid-template-columns: 1fr; }
  .flow .arrow { transform: rotate(90deg); }
  .pf-hero { grid-template-columns: 1fr; padding: 22px; }
  .holdings { overflow-x: auto; }
  .holding { min-width: 640px; }
  .pf-add .fields { grid-template-columns: 1fr 1fr; }
  .auth-card { padding: 26px 22px; }
}
@media (max-width: 480px) {
  main { padding: 18px 16px 40px; }
  .card { padding: 16px; }
  .grid.c4, .overview-stats.c5 { grid-template-columns: 1fr; }
  .pf-proj { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------------------------------------------------------------- wizard als fullscreen overlay */
.wizard-overlay {
  position: fixed; inset: 0; z-index: 60; overflow: auto; padding: 40px 24px 60px;
  display: grid; place-items: start center;
  background: color-mix(in srgb, var(--bg-base) 55%, transparent);
  backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  animation: fadeIn .22s ease-out both;
}
.wizard-panel { width: 100%; max-width: 1020px; padding: 30px 34px 34px; animation: fadeUp .3s cubic-bezier(.22,1,.36,1) both; }
.wizard-panel .wizard { max-width: none; }
.wiz-head .page-head { margin-bottom: 20px; }
.wiz-head .auth-brand { margin-bottom: 18px; }
.under-wizard { filter: blur(6px) saturate(.8); opacity: .55; pointer-events: none; user-select: none; }
body.wizard-open .sidebar { filter: blur(6px); opacity: .6; pointer-events: none; }
body.wizard-first .sidebar { display: none; }
body.wizard-first #app { grid-template-columns: minmax(0, 1fr); }
body.wizard-first .wizard-overlay { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; padding-top: clamp(24px, 6vh, 72px); }
body.wizard-first .wizard-panel { max-width: 940px; }
@media (max-width: 800px) {
  .wizard-overlay { padding: 12px 10px 40px; }
  .wizard-panel { padding: 20px 16px 22px; }
  body.wizard-open .sidebar { display: none; }
  body.wizard-open #app { grid-template-columns: minmax(0, 1fr); }
}


/* ---------------------------------------------------------------- versie, banner, valuta */
.sidebar-foot .version { font-size: 10px; letter-spacing: .04em; margin-top: 2px; }
.valuta-note { margin: -14px 0 16px; }
.mfa-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 18px; border-radius: 12px; border: 1px solid rgba(var(--accent-rgb),0.35); background: var(--cream-faint); font-size: 13px; }
.mfa-banner > svg { width: 18px; height: 18px; stroke: var(--cream); fill: none; stroke-width: 2; stroke-linecap: round; flex: none; }
.mfa-banner > span:first-of-type { flex: 1; min-width: 200px; color: var(--text-dim); }
.mfa-banner.urgent { border-color: rgba(240,181,98,0.5); background: rgba(240,181,98,0.10); }
.mfa-banner.urgent > svg { stroke: var(--amber); }

/* ---------------------------------------------------------------- auth uitbreidingen */
.auth-brand { text-decoration: none; color: var(--text); }
.auth-brand:hover { text-decoration: none; color: var(--text); }
.auth-card.wide { max-width: 760px; }
.auth-card.enroll { max-width: 860px; }
.auth-alt { margin-top: 16px; text-align: center; }
.auth-or { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--border-faint); }
.auth-form.alt { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-faint); }
.btn.big { padding: 12px 20px; font-size: 14px; min-height: 44px; }
.code-input { text-align: center; font-family: var(--mono); font-size: 22px; letter-spacing: .4em; padding: 10px 12px; }
.sec-card { margin: 0; }
.sec-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 8px; }
.sec-opt { padding: 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-low); display: flex; flex-direction: column; gap: 10px; }
.sec-opt.rec { border-color: rgba(var(--accent-rgb),0.45); background: var(--cream-faint); }
.sec-opt-head { display: flex; align-items: center; gap: 12px; }
.sec-opt-head .ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--cream-dim); color: var(--cream); flex: none; }
.sec-opt-head .ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sec-opt-head b { display: block; font-size: 15px; letter-spacing: -0.01em; }
.sec-opt-head .badge { margin-top: 3px; }
.sec-opt p { margin: 0; font-size: 12.5px; }
.sec-opt .row { margin-top: auto; }
.pk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pk-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border-faint); }
.pk-list li > span { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pk-list li svg { width: 16px; height: 16px; stroke: var(--cream); fill: none; stroke-width: 1.8; stroke-linecap: round; flex: none; }
.pk-list li b { font-size: 13px; }
.pk-list li small { display: block; color: var(--text-faint); font-size: 11px; }
.sec-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-faint); }
.totp-setup { display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: start; }
.totp-setup .qr { padding: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--border); }
.totp-setup .qr svg { width: 100%; height: auto; display: block; }
.totp-setup h3 { text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--text); }
.totp-setup details { margin: 6px 0 14px; color: var(--text-faint); }
.totp-setup .secret { display: block; margin-top: 6px; word-break: break-all; font-size: 12px; }
.codes-box h3 { text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--text); }
.codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 14px 0 16px; }
.codes code { display: block; text-align: center; padding: 10px 8px; font-size: 14px; letter-spacing: .06em; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
@media (max-width: 640px) { .totp-setup { grid-template-columns: 1fr; } .totp-setup .qr { max-width: 220px; } }

/* ---------------------------------------------------------------- landing */
body.landing main { max-width: none; padding: 0; margin: 0; }
.landing { min-height: 100vh; display: flex; flex-direction: column; }
.land-nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px clamp(16px, 4vw, 48px); border-bottom: 1px solid var(--border-faint); background: color-mix(in srgb, var(--bg-base) 70%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); }
.land-nav .brand { font-size: 20px; gap: 9px; }
.land-nav nav { display: flex; flex-direction: row; flex: none; gap: 4px; overflow: visible; }
.land-nav nav a { color: var(--text-dim); font-weight: 600; font-size: 13px; padding: 8px 12px; border-radius: 10px; text-decoration: none; letter-spacing: -0.01em; }
.land-nav nav a:hover { color: var(--text); background: var(--surface); }
.land-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(24px, 5vw, 72px); align-items: center; padding: clamp(48px, 9vh, 120px) clamp(16px, 4vw, 48px) clamp(40px, 7vh, 90px); max-width: 1400px; margin: 0 auto; width: 100%; }
.land-hero h1 { font-size: clamp(38px, 5.4vw, 74px); line-height: 0.98; letter-spacing: -0.04em; margin: 18px 0 20px; }
.gradient-text { background: linear-gradient(135deg, var(--cream) 0%, var(--rose) 55%, var(--violet) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.land-hero .lead { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--text-dim); max-width: 600px; }
.land-hero .cta { margin-top: 26px; gap: 12px; }
.land-hero .cta .btn span { margin-left: 4px; }
.land-note { margin-top: 18px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.land-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.show-card { padding: 16px 18px; }
.show-card.main { grid-column: 1 / -1; }
.show-card .label { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.show-card .big { font-size: clamp(30px, 3vw, 44px); font-weight: 600; letter-spacing: -0.04em; margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.show-card .mid { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; margin: 4px 0 6px; font-variant-numeric: tabular-nums; }
.show-card .mid.up { color: var(--mint); }
.show-card small { color: var(--text-faint); font-size: 11px; }
.show-card .spark { display: flex; align-items: flex-end; gap: 6px; height: 64px; margin-top: 14px; }
.show-card .spark i { flex: 1; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--cream), rgba(var(--accent-rgb),0.25)); }
.show-card .alloc { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin: 6px 0 6px; }
.show-card .alloc i:nth-child(1) { background: var(--violet); }
.show-card .alloc i:nth-child(2) { background: var(--amber); }
.show-card .alloc i:nth-child(3) { background: var(--cream); }
.show-card .sig { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; }
.show-card .sig .ico { width: 24px; height: 24px; border-radius: 7px; background: var(--good); display: grid; place-items: center; flex: none; }
.show-card .sig .ico svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2.4; stroke-linecap: round; }
.show-card .sig b { display: block; font-size: 13px; }
.land-section { max-width: 1400px; margin: 0 auto; width: 100%; padding: clamp(28px, 5vh, 64px) clamp(16px, 4vw, 48px); }
.land-section h2 { font-size: clamp(26px, 3vw, 40px); letter-spacing: -0.035em; line-height: 1.1; margin: 10px 0 24px; }
.feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.feat { padding: 22px; }
.feat .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--cream-dim); color: var(--cream); margin-bottom: 14px; }
.feat .ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feat h3, .step h3 { text-transform: none; letter-spacing: -0.02em; font-size: 17px; color: var(--text); margin-bottom: 8px; }
.feat p, .step p { color: var(--text-dim); font-size: 13.5px; line-height: 1.6; margin: 0; }
.steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.step { padding: 22px; }
.step .num { font-family: var(--mono); color: var(--cream); font-size: 13px; display: block; margin-bottom: 16px; }
.land-secure { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px; padding: 30px; align-items: center; }
.land-secure h2 { margin-bottom: 12px; }
.land-secure .check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.land-secure .check li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--surface-low); border: 1px solid var(--border-faint); font-size: 13.5px; }
.land-secure .check svg { width: 16px; height: 16px; stroke: var(--mint); fill: none; stroke-width: 2.4; stroke-linecap: round; flex: none; }
.land-foot { margin-top: auto; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 22px clamp(16px, 4vw, 48px); border-top: 1px solid var(--border-faint); font-size: 12px; color: var(--text-dim); }
@media (max-width: 960px) { .land-hero { grid-template-columns: 1fr; } .feat-grid, .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .land-secure { grid-template-columns: 1fr; } .land-nav nav { display: none; } }
@media (max-width: 600px) { .feat-grid, .steps-grid, .land-showcase { grid-template-columns: 1fr; } .land-nav .btn.small:not(:last-child) { display: none; } }

/* ---------------------------------------------------------------- portfolio: guided flow */
.pf-overlay { z-index: 70; }
.pf-modal { max-width: 720px; padding: 26px 28px 28px; }
.pf-modal .wiz-labels { margin-bottom: 18px; }
.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cat-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cat { text-align: left; font: inherit; color: var(--text); cursor: pointer; padding: 18px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-low); display: flex; flex-direction: column; gap: 6px; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.cat:hover { border-color: rgba(var(--accent-rgb),0.45); background: var(--surface); transform: translateY(-1px); }
.cat.active { border-color: rgba(var(--accent-rgb),0.6); background: var(--cream-faint); }
.cat .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--cream-dim); color: var(--cream); margin-bottom: 6px; }
.cat .ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cat .avatar { margin-bottom: 6px; }
.cat b { font-size: 15px; letter-spacing: -0.01em; }
.cat small { color: var(--text-faint); font-size: 12px; line-height: 1.5; }
.pf-search { position: relative; margin-bottom: 12px; }
.pf-search .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }
.pf-search .ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; display: block; }
.pf-search input { padding: 14px 14px 14px 44px; font-size: 16px; border-radius: 14px; }
.pf-modal .pf-results { position: static; min-height: 120px; max-height: 340px; overflow: auto; border-radius: 14px; border: 1px solid var(--border-faint); background: var(--surface-low); }
.pf-modal .pf-results ul { position: static; list-style: none; margin: 0; padding: 6px; background: transparent; border: 0; box-shadow: none; max-height: none; display: flex; flex-direction: column; gap: 2px; }
.pf-modal .pf-results li { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.pf-modal .pf-results li:hover, .pf-modal .pf-results li.active { background: var(--cream-dim); }
.pf-modal .pf-results .txt { min-width: 0; }
.pf-modal .pf-results .txt b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-modal .pf-results .txt small { color: var(--text-faint); font-size: 11px; }
.pf-hint { padding: 22px 16px; color: var(--text-faint); font-size: 13px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 10px; }
.pf-hint .spin { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; }
.avatar { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-size: 12px; letter-spacing: .02em; flex: none; background: var(--cream-dim); color: var(--cream); border: 1px solid rgba(var(--accent-rgb),0.35); }
.avatar.crypto { background: rgba(233,184,114,0.14); color: var(--amber); border-color: rgba(233,184,114,0.35); }
.avatar.etf, .avatar.aandeel { background: rgba(124,92,255,0.14); color: var(--violet-soft); border-color: rgba(124,92,255,0.35); }
.avatar.edelmetaal { background: var(--cream-dim); color: var(--cream); }
/* Logo over de initialen heen; die blijven zichtbaar tot het logo er is, of als het ontbreekt */
.avatar, .holding .avatar { position: relative; overflow: hidden; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px; border-radius: inherit; }
.avatar img.nieuw { animation: logoIn .2s ease; }   /* alleen de eerste keer; bij hertekenen staat het logo er direct */
@keyframes logoIn { from { opacity: 0; } }
.avatar.has-logo, .holding .avatar.has-logo { color: transparent; background: #fff; border-color: var(--border); }
.avatar.crypto.has-logo, .holding .avatar.crypto.has-logo { background: transparent; border-color: transparent; }
.avatar.crypto img { padding: 3px; }
.avatar.has-logo.logo-licht, .holding .avatar.has-logo.logo-licht { background: #1B1524; border-color: transparent; }   /* wit logo: donkere tegel */
/* Edelmetaal: een bolletje in de kleur van het metaal, in beide thema's gelijk */
.avatar.bol, .holding .avatar.bol { border-radius: 50%; border: 0; font-size: 11px; letter-spacing: .04em; color: rgba(40,28,8,0.72); text-shadow: 0 1px 0 rgba(255,255,255,0.35);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.22), inset 0 2px 3px rgba(255,255,255,0.55), 0 2px 6px -2px rgba(0,0,0,0.35); }
.avatar.bol.goud, .holding .avatar.bol.goud { background: radial-gradient(circle at 32% 28%, #FFF3C4 0%, #F2CB5B 32%, #C9962A 68%, #8A6112 100%); }
.avatar.bol.zilver, .holding .avatar.bol.zilver { background: radial-gradient(circle at 32% 28%, #FFFFFF 0%, #DCE0E6 34%, #A4ABB6 70%, #6E7683 100%); color: rgba(24,28,36,0.72); }
.avatar.bol.platina, .holding .avatar.bol.platina { background: radial-gradient(circle at 32% 28%, #F7FAFB 0%, #CBD6DA 34%, #8FA0A8 70%, #566870 100%); color: rgba(18,30,36,0.74); }
.type-badge { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-dim); background: var(--surface); }
.type-badge.crypto { color: var(--amber); border-color: rgba(233,184,114,0.4); background: rgba(233,184,114,0.10); }
.type-badge.etf, .type-badge.aandeel { color: var(--violet-soft); border-color: rgba(124,92,255,0.4); background: rgba(124,92,255,0.10); }
.pf-selected { display: grid; grid-template-columns: auto 1fr auto auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(var(--accent-rgb),0.35); background: var(--cream-faint); margin-bottom: 16px; }
.pf-selected .txt { min-width: 0; }
.pf-selected .txt b { display: block; font-size: 15px; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-selected .txt small { color: var(--text-faint); font-size: 11px; display: flex; gap: 8px; align-items: center; }
.pf-selected .price { text-align: right; font-variant-numeric: tabular-nums; }
.pf-selected .price b { display: block; font-size: 16px; }
.pf-selected .price small { color: var(--text-faint); font-size: 11px; }
.pf-selected .up { color: var(--mint); }
.pf-selected .down { color: var(--red); }
.pf-qty { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.pf-total { display: flex; align-items: baseline; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--surface-low); border: 1px solid var(--border-faint); margin: 4px 0 14px; }
.pf-total span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--text-faint); }
.pf-total b { font-size: 24px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pf-total small { color: var(--text-faint); font-size: 11px; margin-left: auto; }
.pf-recurring { display: grid; gap: 12px; }
.pf-recurring .toggle { width: 100%; }
.holding .act { display: flex; gap: 2px; justify-content: flex-end; }
.holding { grid-template-columns: minmax(180px, 1.6fr) repeat(5, minmax(80px, 1fr)) 64px; }
.holding .id[role=button] { cursor: pointer; border-radius: 10px; }
.holding .id[role=button]:hover .name { color: var(--cream); }
/* transacties per positie */
.tx-link { background: none; border: 0; padding: 0; font: inherit; font-size: 11px; font-weight: 600; color: var(--cream); cursor: pointer; }
.tx-link:hover { text-decoration: underline; }
.holding .n .tx-link { display: block; margin: 3px 0 0 auto; }
.tx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.tx-stat { padding: 12px 14px; border-radius: 12px; background: var(--surface-low); border: 1px solid var(--border-faint); min-width: 0; font-variant-numeric: tabular-nums; }
.tx-stat span { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; margin-bottom: 4px; }
.tx-stat b { display: block; font-size: 17px; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-stat small { display: block; font-size: 11px; color: var(--text-faint); }
.pf-modal .up { color: var(--mint); }
.pf-modal .down { color: var(--red); }
.tx-note { margin: 0 0 8px; }
.tx-head { margin-top: 14px; }
.tx-list { display: flex; flex-direction: column; max-height: min(46vh, 420px); overflow: auto; margin: 0 -6px; }
.tx-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto 28px; gap: 12px; align-items: center; padding: 10px 6px; border-top: 1px solid var(--border-faint); border-radius: 10px; cursor: pointer; font-variant-numeric: tabular-nums; }
.tx-row:first-child { border-top: 0; }
.tx-row:hover { background: var(--surface-low); }
.tx-row .txt { min-width: 0; display: grid; gap: 1px; }
.tx-row .txt b { font-weight: 600; letter-spacing: -0.01em; }
.tx-row small { font-size: 11px; color: var(--text-faint); }
.tx-row .txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-row .n { text-align: right; display: grid; gap: 1px; }
.tx-row .n small.up { color: var(--mint); }
.tx-row .n small.down { color: var(--red); }
.tx-badge { justify-self: start; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid; }
.tx-badge.koop { color: var(--mint); border-color: rgba(61,221,161,0.34); background: rgba(61,221,161,0.12); }
.tx-badge.verkoop { color: var(--red); border-color: rgba(255,107,122,0.34); background: var(--red-bg); }
.tx-soort { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 16px; border-radius: 999px; background: var(--surface-low); border: 1px solid var(--border); }
.tx-soort button { font: inherit; font-size: 13px; font-weight: 600; padding: 7px 20px; border-radius: 999px; border: 0; background: transparent; color: var(--text-dim); cursor: pointer; }
.tx-soort button:hover { color: var(--text); }
.tx-soort button.active.koop { color: var(--mint); background: rgba(61,221,161,0.14); }
.tx-soort button.active.verkoop { color: var(--red); background: var(--red-bg); }
#tx-koers-hint .spin { width: 10px; height: 10px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; vertical-align: -1px; }
@media (max-width: 640px) { .cat-grid, .cat-grid.three { grid-template-columns: 1fr; } .pf-selected { grid-template-columns: auto 1fr; } .pf-selected .price { grid-column: 1 / -1; text-align: left; } .pf-modal { padding: 18px 16px; } .tx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tx-row { grid-template-columns: minmax(0, 1fr) auto 28px; } .tx-row .tx-badge { grid-column: 1 / -1; } }

/* FiPlan: a working preview, using the workspace card and stat components. */
.landing-new .land-hero { padding-top:90px; padding-bottom:80px; grid-template-columns:1.2fr .8fr; }
.landing-new .land-hero h1 { font-size:clamp(52px,6.5vw,94px); line-height:1.02; letter-spacing:-.045em; }
.landing-new .land-hero .lead { max-width:550px; }
.live-dot { display:inline-block; width:7px; height:7px; background:var(--mint); border-radius:50%; margin-right:8px; box-shadow:0 0 16px var(--mint); }
.hero-art { position:relative; overflow:hidden; padding:40px 32px 24px; border:1px solid var(--border); border-radius:28px; background:linear-gradient(145deg,var(--surface),var(--bg-base)); min-height:380px; display:flex; flex-direction:column; justify-content:space-between; }
.hero-orbit-art { position:absolute; width:340px; height:340px; border:1px solid var(--border-strong); border-radius:50%; right:-160px; top:-80px; box-shadow:0 0 0 40px var(--surface-low),0 0 0 80px var(--surface-low); pointer-events:none; animation:orbit-drift 7s ease-in-out 2; }
.hero-balance { margin:40px 0 28px; z-index:1; }
.hero-balance small { color:var(--text-dim); display:block; margin-bottom:12px; }
.hero-balance strong { font-size:clamp(32px,3vw,46px); line-height:1.1; letter-spacing:-.03em; }
.hero-chips { display:flex; flex-wrap:wrap; gap:8px; z-index:1; }
.hero-chips span { display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--border); border-radius:30px; background:var(--surface-low); font-size:12px; }
.hero-chips svg,.demo-sidebar svg,.demo-insight svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; flex-shrink:0; }
.hero-try { margin-top:32px; border-top:1px solid var(--border); padding-top:18px; color:var(--text-dim); display:flex; justify-content:space-between; text-decoration:none; }
.preview-intro { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.preview-intro p { color:var(--text-dim); line-height:1.6; }
.demo-section { scroll-margin-top:85px; }
.demo-window { border:1px solid var(--border-strong); border-radius:20px; overflow:hidden; background:var(--bg-base); box-shadow:0 32px 100px #0003; }
.demo-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 22px; background:var(--surface-low); border-bottom:1px solid var(--border); font-size:12px; }
.demo-topbar>span:first-child { display:flex; gap:6px; }
.demo-topbar i { width:7px; height:7px; background:var(--border-strong); border-radius:50%; }
.demo-layout { display:grid; grid-template-columns:230px minmax(0,1fr); }
.demo-sidebar { padding:28px 18px; border-right:1px solid var(--border); background:var(--surface-low); }
.demo-workspace { display:flex; gap:12px; align-items:center; font-weight:700; margin-bottom:32px; color:var(--cream); }
.demo-workspace>span { font-size:13px; color:var(--text); }
.demo-workspace small { display:block; font-size:11px; color:var(--text-dim); font-weight:400; margin-top:5px; }
.demo-sidebar button { display:flex; align-items:center; gap:10px; width:100%; padding:14px 12px; margin:4px 0; background:transparent; border:1px solid transparent; border-radius:10px; color:var(--text-dim); font:inherit; font-size:14px; cursor:pointer; }
.demo-sidebar button span { margin-left:auto; }
.demo-sidebar button[aria-pressed=true] { background:var(--cream-dim); color:var(--cream); border-color:var(--border-strong); }
.demo-sidebar p { font-size:12px; line-height:1.7; color:var(--text-dim); margin:70px 10px 0; }
.demo-body { padding:30px; min-width:0; }
#demo-panel { min-height:410px; }
.demo-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; }
.demo-heading h3 { margin:8px 0 0; font-size:27px; letter-spacing:-.025em; text-transform:none; color:var(--text); }
.demo-stats { margin-bottom:18px; }
.demo-flow { margin:16px 0; }
.demo-flow>div:first-child { display:flex; justify-content:space-between; font-size:14px; margin-bottom:8px; }
.demo-track { background:var(--surface); height:8px; border-radius:8px; overflow:hidden; }
.demo-track i { display:block; height:100%; border-radius:8px; transition:width .3s ease; }
.demo-track .rose { background:var(--rose); }.demo-track .violet { background:var(--violet); }.demo-track .mint { background:var(--mint); }
.demo-insight { display:flex; gap:12px; padding:14px 0 0; color:var(--text-dim); font-size:13px; align-items:center; }
.demo-insight p { margin:0; line-height:1.6; }
.demo-controls { margin-top:22px; border-top:1px solid var(--border); padding-top:22px; }
.demo-controls[hidden] { display:none; }
.demo-controls label { display:flex; justify-content:space-between; align-items:center; font-size:14px; }
.demo-controls output { color:var(--cream); font-weight:700; font-size:19px; }
.demo-controls input { width:100%; margin:20px 0 10px; padding:0; height:20px; accent-color:var(--violet); cursor:pointer; }
.demo-controls>div { display:flex; justify-content:space-between; font-size:11px; color:var(--text-dim); }
.demo-caption { text-align:center; color:var(--text-dim); font-size:12px; margin-top:18px; }
.demo-graph svg { width:100%; height:auto; max-height:240px; }
.demo-graph .row { justify-content:space-between; font-size:13px; }
.demo-graph strong { font-size:26px; color:var(--cream); }
.demo-grid { stroke:var(--border); stroke-width:1; }
.demo-line { stroke:var(--violet); stroke-width:3; fill:none; stroke-linejoin:round; }
.demo-paid { stroke:var(--mint); stroke-width:2; stroke-dasharray:5 5; fill:none; }
.demo-graph text { fill:var(--text-dim); font-size:12px; }
.demo-legend { display:flex; flex-wrap:wrap; justify-content:space-between; font-size:11px; gap:10px; color:var(--text-dim); }
.demo-scenarios { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.demo-scenarios [aria-pressed=true] { background:var(--cream-dim); border-color:var(--cream); }
.demo-compare { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0; }
.demo-compare>div { padding:16px; background:var(--surface-low); border-radius:10px; }
.demo-compare small { color:var(--cream); }.demo-compare p { line-height:1.6; margin-bottom:0; }
.land-final { text-align:center; padding-bottom:85px; }.land-final .btn { margin-top:16px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@keyframes orbit-drift { 50% { transform:translate(-10px,20px); } }
@media(max-width:960px) { .landing-new .land-hero { grid-template-columns:1fr; padding-top:55px; }.hero-art { display:none; }.preview-intro { display:block; }.demo-layout { grid-template-columns:180px minmax(0,1fr); }.demo-body { padding:22px; }.demo-workspace { font-size:0; }.demo-sidebar { padding:24px 10px; } }
@media(max-width:600px) { .demo-layout { grid-template-columns:1fr; }.demo-sidebar { border-right:0; border-bottom:1px solid var(--border); padding:10px; }.demo-sidebar [role=group] { display:flex; gap:4px; }.demo-sidebar button { justify-content:center; padding:10px 5px; font-size:12px; gap:5px; }.demo-sidebar button span,.demo-workspace,.demo-sidebar p { display:none; }.demo-body { padding:18px 14px; }.demo-topbar { padding:12px; }.demo-topbar>span:first-child { display:none; }.demo-stats,.demo-compare { grid-template-columns:1fr 1fr; }.demo-stats .stat { padding:14px; }.demo-heading h3 { font-size:24px; }.demo-topbar .badge { font-size:10px; }.landing-new .land-hero h1 { font-size:55px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
.plan-shortcuts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:20px; }
.plan-shortcuts a { padding:18px; border:1px solid var(--border); background:var(--surface-low); border-radius:14px; text-decoration:none; font-size:12px; color:var(--text-dim); }
.plan-shortcuts strong { display:block; color:var(--text); font-size:17px; margin:6px 0; }
.fiscal-note { margin-bottom:20px; }.fiscal-note p { color:var(--text-dim); line-height:1.6; }
@media(max-width:650px) { .plan-shortcuts { grid-template-columns:1fr; } }

/* Keep the price action on the same baseline as the wealth/portfolio switch. */
.vm-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:24px; }
.vm-toolbar .tabs { margin-bottom:0; min-width:0; }
.vm-toolbar .pf-refresh { flex:0 0 42px; width:42px; height:42px; margin-left:auto; border:1px solid var(--border); border-radius:50%; }
.pf-refresh svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.pf-refresh[aria-busy=true] svg { animation:price-refresh 1s linear infinite; }
@keyframes price-refresh { to { transform:rotate(360deg); } }
@media(max-width:420px) { .vm-toolbar { gap:8px; }.vm-toolbar .tabs a { padding:9px 10px; font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .pf-refresh[aria-busy=true] svg { animation:none; } }

/* ---------------------------------------------------------------- hypotheek: leningdelen */
.kv .v.warn { color: var(--amber); }
.hyp-deel { padding: 16px 0; border-top: 1px solid var(--border-faint); }
.hyp-deel:first-of-type { border-top: 0; padding-top: 4px; }
.hyp-cijfers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 14px 0 12px; }
.hyp-cijfers span { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--text-faint); margin-bottom: 4px; }
.hyp-cijfers b { display: block; font-size: 17px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hyp-cijfers small { display: block; color: var(--text-faint); font-size: 11px; line-height: 1.45; margin-top: 2px; }
.hyp-bar { height: 6px; border-radius: 3px; background: var(--surface); overflow: hidden; margin-bottom: 6px; }
.hyp-bar i { display: block; height: 100%; border-radius: 3px; background: var(--series-1, var(--cream)); }
.hyp-check { flex-wrap: wrap; margin-top: 8px; }
.hyp-check small { margin-left: 0; flex-basis: 100%; line-height: 1.5; }
@media (max-width: 760px) { .hyp-cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Asset tracker and shared review flows */
.tracker-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:20px 0; }
.tracker-stats .value { font-size:clamp(24px,2.5vw,36px); font-variant-numeric:tabular-nums; }
.tracker-history { margin-bottom:24px; }
.tracker-history .card-head { align-items:center; }
.tracker-history select { max-width:320px; }
.tracker-chart { height:300px; margin:18px 0; }
.tracker-ranges { display:flex; gap:4px; flex-wrap:wrap; }
.tracker-ranges .active { background:var(--cream-dim); color:var(--cream); border-color:var(--cream-muted); }
.tracker-toolbar { display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.tracker-toolbar input { flex:1; min-width:160px; }
.tracker-toolbar select { width:auto; }
.holding[hidden], [hidden] { display:none !important; }
.tracker-layout .holdings { overflow-x:auto; }
.tracker-layout .holding { min-width:760px; }
.tracker-layout > .span2 { grid-column:auto; }
@media (max-width:680px) { .tracker-stats { grid-template-columns:1fr; gap:10px; } .tracker-chart { height:230px; } .tracker-history .card-head { align-items:stretch; flex-direction:column; gap:12px; } .tracker-history select { width:100%; max-width:none; } .tracker-toolbar select { flex:1; min-width:0; } }
.grid.c3.tracker-layout { grid-template-columns:minmax(0,1fr) 280px; }
.tracker-toolbar input[type="search"] { background:var(--surface-input); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; font:inherit; }
@media (max-width:1200px) { .grid.c3.tracker-layout { grid-template-columns:minmax(0,1fr); } }

/* One compact asset row, with transactions in the detail view. */
.asset-category + .asset-category { margin-top:22px; }
.asset-category-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; color:var(--text-secondary); font-size:12px; }
.asset-category-head h3 { margin:0; font-size:12px; font-weight:600; }
.tracker-layout .holding.asset-compact, .pf-pagina .holding.asset-compact { display:grid; grid-template-columns:36px minmax(0,1fr) auto 14px; min-width:0; width:100%; gap:12px; align-items:center; padding:14px 0; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; color:var(--text); font:inherit; text-align:left; cursor:pointer; }
.tracker-layout .holding.asset-compact:hover, .pf-pagina .holding.asset-compact:hover { background:var(--surface-low); }
.asset-compact:focus-visible { outline:2px solid var(--cream); outline-offset:3px; }
.asset-name, .asset-value { display:flex; flex-direction:column; gap:4px; min-width:0; }
.asset-name strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.asset-compact small { font-size:11px; color:var(--text-secondary); }
.asset-value { text-align:right; font-variant-numeric:tabular-nums; }
.asset-value strong { font-size:14px; }
.asset-value .up { color:var(--mint); } .asset-value .down { color:var(--red); }
.asset-chevron { color:var(--text-secondary); font-size:22px; }
@media (max-width:680px) { .tracker-layout .holding.asset-compact, .pf-pagina .holding.asset-compact { grid-template-columns:32px minmax(0,1fr) auto 10px; gap:8px; padding:14px 0; } .asset-name strong, .asset-value strong { font-size:13px; } }

/* Progressive detail: the everyday view stays short. */
.portfolio-details { margin:12px 0 18px; }
.portfolio-details > summary { display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; list-style:none; font-size:13px; font-weight:600; color:var(--text-secondary); }
.portfolio-details > summary::-webkit-details-marker { display:none; }
.portfolio-details > summary::after { content:'+'; margin-left:auto; font-size:20px; }
.portfolio-details[open] > summary::after { content:'−'; }
.portfolio-details.card { margin:0; }
.portfolio-details.card > .card { padding:16px 0 0; background:none; border:0; box-shadow:none; }
.portfolio-details.card > .card > .card-head { display:none; }
.pf-split.portfolio-details { display:block; margin:0; }
.pf-split.portfolio-details[open] .seg { margin-top:10px; }
.tracker-stats { margin-top:6px; }
.table-scroll { max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain; }
.skip-link:not(:focus-visible) { top:0; transform:translateY(-200%); }
body:has(.wizard-overlay) { overflow:hidden; }
@media (max-width:800px) {
  .btn, .btn.small, .icon-btn, .tx-link, .tx-soort button, nav a, details.meer > summary { min-height:44px; }
  .icon-btn { min-width:44px; display:inline-grid; place-items:center; }
  input:not([type=checkbox]):not([type=radio]), select, textarea, .project-switch select, .tracker-toolbar input[type=search] { font-size:16px; min-height:44px; }
  .sidebar:not(.menu-open) .sidebar-foot { display:block; grid-column:1 / -1; padding:0; border:0; }
  .sidebar:not(.menu-open) .sidebar-foot > .row:first-child,
  .sidebar:not(.menu-open) .sidebar-foot #theme-toggle,
  .sidebar:not(.menu-open) .sidebar-foot .version { display:none; }
  .sidebar:not(.menu-open) .sidebar-foot .row { justify-content:flex-end; margin:0; }
  .sidebar { gap:8px; }
  .pf-hero { gap:6px; padding:18px; }
  .tracker-history { padding:16px; }
  .tracker-ranges { gap:2px; }
  .tracker-ranges .btn { min-width:44px; padding:6px; }
  .tracker-history .card-head { align-items:stretch; }
  .tracker-toolbar { display:grid; grid-template-columns:1fr 1fr; }
  .tracker-toolbar input { grid-column:1 / -1; min-width:0; width:100%; }
  .tracker-toolbar select { width:100%; min-width:0; }
  .mobile-records, .mobile-records tbody { display:block; width:100%; }
  .mobile-records thead { display:none; }
  .mobile-records tbody tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 16px; border-top:1px solid var(--border); padding:16px 0; }
  .mobile-records tbody td { display:block; border:0; padding:0; text-align:left; min-width:0; overflow-wrap:anywhere; }
  .mobile-records td::before { content:attr(data-label); display:block; font-size:11px; font-weight:500; color:var(--text-secondary); margin-bottom:4px; }
  .mobile-records td:first-child { grid-column:1 / -1; font-weight:600; }
  .mobile-records td.act { display:flex; grid-column:1 / -1; justify-content:flex-end; gap:8px; }
  .mobile-records td.act::before { display:none; }
  .mobile-records td[colspan] { grid-column:1 / -1; }
}
@media (max-width:640px) {
  .wizard-overlay { padding:0; overscroll-behavior:contain; }
  .wizard-overlay .wizard-panel { border-radius:0; border:0; min-height:100dvh; max-height:100dvh; overflow-y:auto; padding:20px 16px max(20px,env(safe-area-inset-bottom)); }
  .pf-modal .fields { grid-template-columns:minmax(0,1fr); }
  .wizard-panel .wiz-nav { position:sticky; bottom:-20px; z-index:2; background:var(--surface-1); border-top:1px solid var(--border); margin:20px -16px -20px; padding:12px 16px max(12px,env(safe-area-inset-bottom)); }
  .wizard-panel .wiz-nav > .row { flex-wrap:wrap; justify-content:flex-end; }
  .wizard-panel .wiz-nav .btn { flex-shrink:0; }
  .tx-row { grid-template-columns:minmax(0,1fr) 18px; padding:14px 4px; }
  .tx-row .tx-badge, .tx-row .txt, .tx-row .n { grid-column:1; text-align:left; }
  .tx-row .txt small { white-space:normal; }
  .tx-row .asset-chevron { grid-column:2; grid-row:1 / span 3; }
}
.mobile-nav { display:none; }
@media (max-width:800px) {
  .mobile-nav { position:fixed; inset:auto 0 0; z-index:40; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; padding:8px 10px max(8px,env(safe-area-inset-bottom)); background:var(--surface-1); border-top:1px solid var(--border); }
  .mobile-nav a { display:flex; align-items:center; justify-content:center; min-height:44px; border-radius:10px; color:var(--text-secondary); font-size:12px; text-decoration:none; }
  .mobile-nav a[aria-current=page] { color:var(--cream); background:var(--cream-dim); font-weight:600; }
  body:not(.unauth) main { padding-bottom:calc(90px + env(safe-area-inset-bottom)); }
  body.unauth .mobile-nav, body:has(.wizard-overlay) .mobile-nav, body:has(input:focus, textarea:focus, select:focus) .mobile-nav { display:none; }
}
.pf-modal:has(#tx-save) .pf-selected .price,
.pf-modal:has(#tx-save) #tx-edit-pos { display:none; }
@media (max-width:640px) {
  .wizard-overlay { background:var(--surface-1); backdrop-filter:none; animation:none; }
  .wizard-overlay .wizard-panel { background:var(--surface-1); animation:none; }
  .wizard-panel .wiz-nav { gap:8px; }
  .wizard-panel .wiz-nav .btn { padding-left:10px; padding-right:10px; }
}
.app-error { z-index:80; }
@media (max-width:800px) { .app-error { bottom:calc(76px + env(safe-area-inset-bottom)); } }
/* portfolio-hero: inleg per asset en projectie compact naast het totaal */
.pf-side { display:grid; gap:10px; min-width:0; }
.pf-mini { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.pf-mini .box { padding:9px 12px; border-radius:12px; background:var(--surface-low); border:1px solid var(--border-faint); min-width:0; }
.pf-mini .box span { display:block; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); font-weight:600; }
.pf-mini .box b { display:block; font-size:15px; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-monthly { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.inleg-chip { display:inline-flex; align-items:center; gap:5px; font:inherit; font-size:11px; font-weight:500; font-variant-numeric:tabular-nums; padding:3px 9px; border-radius:999px; color:var(--cream); background:var(--cream-dim); border:1px solid rgba(var(--accent-rgb),0.34); white-space:nowrap; }
button.inleg-chip { cursor:pointer; min-height:26px; }
button.inleg-chip:hover { border-color:rgba(var(--accent-rgb),0.6); }
.inleg-chip.los { color:var(--text-dim); background:var(--surface-low); border-color:var(--border); }
.inleg-chip.los button { background:none; border:0; padding:0 0 0 2px; font:inherit; font-size:14px; line-height:1; color:inherit; cursor:pointer; }
.asset-compact .inleg-chip { padding:1px 7px; font-size:10px; margin-left:4px; }
.pf-hero { padding:22px 26px; }
.pf-hero .total { font-size:clamp(30px,3.2vw,44px); }
@media (max-width:680px) { .pf-mini .box { padding:8px 10px; } .pf-mini .box b { font-size:13px; } button.inleg-chip { min-height:32px; } }
.pf-res { font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; margin-top:6px; }
.pf-res.up { color:var(--mint); } .pf-res.down { color:var(--red); }
.pf-res .muted { font-weight:400; color:var(--text-faint); }
.pf-more.portfolio-details { margin:0; }
.pf-hero { align-items:start; }
/* sidebar-voet: minimaal, met iconen */
.sidebar-foot { gap:6px; padding-top:12px; }
.foot-user { gap:8px; justify-content:flex-start; flex-wrap:nowrap; }
.foot-avatar { width:26px; height:26px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700; color:var(--cream); background:var(--cream-dim); border:1px solid rgba(var(--accent-rgb),0.3); }
.foot-user #user-name { flex:1; min-width:0; font-size:13px; color:var(--text); }
.foot-btn { width:30px; height:30px; flex:none; display:grid; place-items:center; padding:0; border:0; border-radius:9px; background:transparent; color:var(--text-faint); cursor:pointer; transition:background .15s ease, color .15s ease; }
.foot-btn:hover { background:var(--surface); color:var(--text); }
.foot-btn:focus-visible { outline:2px solid var(--cream); outline-offset:2px; }
.foot-btn svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
:root[data-theme="light"] .foot-btn .ico-sun, :root:not([data-theme="light"]) .foot-btn .ico-moon { display:none; }
/* Landingspagina: themaknop als icoon */
.land-icoon { padding: 8px 10px; }
.land-icoon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
:root[data-theme="light"] .land-icoon .ico-sun, :root:not([data-theme="light"]) .land-icoon .ico-moon { display: none; }
/* FAQ */
.faq { text-align: center; }
.faq h2 { margin-bottom: 8px; }
.faq-sub { color: var(--text-dim); max-width: 560px; margin: 0 auto 28px; font-size: 15px; line-height: 1.6; }
.faq-zoek { position: relative; max-width: 620px; margin: 0 auto; }
.faq-zoek svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; fill: none; stroke: var(--text-faint); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.faq-zoek input { width: 100%; padding: 14px 64px 14px 44px; font-size: 15px; border-radius: 16px; }
.faq-zoek kbd { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 600 11px var(--font); color: var(--text-faint); border: 1px solid var(--border); background: var(--surface-low); border-radius: 8px; padding: 3px 7px; pointer-events: none; }
.faq-pillen { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 28px 0 32px; }
.faq-pil { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-low); color: var(--text-dim); font: 600 13px var(--font); cursor: pointer; transition: all .15s ease; }
.faq-pil span { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.faq-pil:hover { color: var(--text); border-color: var(--border-strong); }
.faq-pil.active { background: var(--cream-dim); color: var(--cream); border-color: var(--cream-muted); }
.faq-pil.active span { color: inherit; opacity: .75; }
.faq-lijst { max-width: 760px; margin: 0 auto; text-align: left; }
.faq-item { border-bottom: 1px solid var(--border-faint); }
.faq-item h3 { margin: 0; font-size: inherit; }
.faq-item button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 4px; background: none; border: 0; color: var(--text); font: 600 16px var(--font); letter-spacing: -0.01em; text-align: left; cursor: pointer; }
.faq-item button:hover { color: var(--cream); }
.faq-item button svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; color: var(--text-faint); transition: transform .2s ease; }
.faq-item.open button svg { transform: rotate(180deg); }
.faq-antwoord { padding: 0 40px 20px 4px; animation: fadeUp .2s ease backwards; }
.faq-antwoord p { color: var(--text-dim); font-size: 15px; line-height: 1.7; margin: 0; }
.faq-antwoord small { display: inline-block; margin-top: 10px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--text-faint); }
.faq mark { background: rgba(var(--accent-rgb), 0.25); color: var(--text); border-radius: 3px; padding: 1px 2px; }
.faq-status, .faq-leeg { text-align: center; color: var(--text-dim); font-size: 14px; margin: 0 0 12px; }
@media (max-width: 650px) { .faq-zoek kbd { display: none; } .faq-zoek input { padding-right: 16px; } .faq-antwoord { padding-right: 4px; } .faq-pillen { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 4px; } .faq-pil { flex: none; } }
.foot-status { padding-left:2px; }
#save-state { display:inline-flex; align-items:center; gap:7px; font-size:10px; letter-spacing:.06em; }
#save-state::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--mint); flex:none; }
#save-state[data-state="bezig"]::before { background:var(--amber); }
#save-state[data-state="fout"]::before { background:var(--red); }
.sidebar-foot .version { margin:0; }
@media (max-width:800px) { .foot-btn { width:44px; height:44px; } }
/* Een grafiekkaart naast een hogere kaart vult de rij, zodat er geen lege ruimte onder de grafiek blijft. */
.card.fill-chart { display:flex; flex-direction:column; }
.card.fill-chart .chart { flex:1 1 auto; height:auto; min-height:340px; }
.card.fill-chart .chart canvas { position:absolute; inset:0; }
.card.fill-chart { align-self:stretch; }
/* pop-ups buiten de pagina (modal, bevestig, vraag) */
.app-modal { z-index:90; place-items:center; }
.app-modal .pf-modal { max-width:520px; }
.app-modal .pf-modal.wide { max-width:860px; }
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.modal-head .wiz-title { margin:0 0 8px; }
.app-modal .wiz-sub { margin-bottom:16px; }
.app-modal textarea { width:100%; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; }
@media (max-width:680px) { .app-modal { place-items:start center; } }
/* profielfoto */
.profiel { display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:start; }
.profiel-foto { width:72px; height:72px; border-radius:50%; overflow:hidden; display:grid; place-items:center; font-size:26px; font-weight:700; color:var(--cream); background:var(--cream-dim); border:1px solid rgba(var(--accent-rgb),0.3); }
.profiel-foto img, .foot-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.foot-avatar { overflow:hidden; }
.profiel p { margin:4px 0 10px; }
/* BV-boekjaren */
.bvj-cta { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 14px; margin-bottom:6px; border-radius:14px; border:1px solid rgba(var(--accent-rgb),0.35); background:var(--cream-faint); font-size:13px; }
.bvj-cta .btn { flex:none; }
.bvj-over { display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--text-dim); grid-column:1 / -1; cursor:pointer; }
.bvj-over input { margin-top:3px; flex:none; }
.bvj-row .tx-badge { font-size:11px; letter-spacing:.04em; }
.app-modal .hyp-check em.bad { color:var(--red); font-style:normal; }
@media (max-width:680px) { .bvj-cta { flex-direction:column; align-items:stretch; } }
.aannames.portfolio-details { padding-top:6px; padding-bottom:6px; }
.aannames[open] { padding-bottom:20px; }
.aannames > summary small { font-weight:400; margin-left:8px; }
@media (max-width:680px) { .aannames > summary small { display:block; margin:2px 0 0; } }

/* ---------------------------------------------------------------- rekenmachine bij bedragvelden */
.calc-wrap { display: block; }
.input-wrap.has-calc input { padding-right: 58px; }
.calc-wrap.has-calc input { padding-right: 34px; }
.calc-btn { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text-faint); cursor: pointer; opacity: 0; transition: opacity .15s ease, color .15s ease, background .15s ease; }
.calc-wrap .calc-btn { right: 6px; }
.calc-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.has-calc:focus-within .calc-btn, .has-calc:hover .calc-btn { opacity: 1; }
.calc-btn:hover { color: var(--cream); background: var(--cream-faint); }
@media (hover: none) { .calc-btn { opacity: .8; } }
td .calc-wrap input { min-width: 90px; }
.calc #calc-som { font-family: var(--mono); font-size: 18px; padding: 12px 14px; }
.calc-uit { min-height: 28px; margin: 8px 2px 12px; font-size: 20px; font-weight: 600; color: var(--text); text-align: right; }
.calc-uit.fout { font-size: 13px; font-weight: 400; color: var(--text-faint); }
.calc-toetsen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.calc-toets { padding: 12px 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-input); color: var(--text); font: inherit; font-size: 17px; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.calc-toets:hover { border-color: var(--border-strong); background: var(--surface-input-hover); }
.calc-toets.op { color: var(--cream); background: var(--cream-faint); }

/* ---------------------------------------------------------------- alimentatie berekenen */
.toggle-check { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text); cursor: pointer; }
.ali-uitkomst { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 6px 0 18px; }
.ali-uitkomst > div { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-input); }
.ali-uitkomst span { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); }
.ali-uitkomst b { display: block; font-size: 26px; margin: 4px 0 2px; }
.ali-uitkomst small { color: var(--text-faint); }
.pf-modal h3 { font-size: 14px; margin: 18px 0 8px; }
.pf-modal ul.warn-text { margin: 12px 0 0 18px; }
.auto-regels { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.auto-regels > li { padding: 10px 12px; border: 1px solid var(--border-faint); border-radius: var(--radius-sm); }
.auto-regels ul { margin: 6px 0 0 16px; padding: 0; }
.auto-regels .badge { margin-left: 6px; vertical-align: 1px; }
.ali-partner-over { margin-top: 14px; display: grid; gap: 10px; }
.bron-tabel td { vertical-align: top; padding: 6px 8px 6px 0; }
.signal-actie { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 600; }
.sessie-lijst { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 8px; }
.sessie-lijst li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-faint); border-radius: var(--radius-sm); }
.sessie-lijst small { display: block; color: var(--text-faint); margin-top: 2px; }

/* ---------------------------------------------------------------- portfolio (P01–P06) */
.pf-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 4px 0 16px; }
.pf-tabs { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; max-width: 100%; }
.pf-tabs::-webkit-scrollbar { display: none; }
.pf-acties { gap: 8px; align-items: center; }
select.compact { width: auto; padding: 7px 30px 7px 10px; font-size: 13px; }
.pf-prive.active { color: var(--cream); background: var(--cream-faint); }
.pf-prive:hover { color: var(--cream); background: var(--cream-faint); }
.pf-pagina { display: grid; gap: 16px; }
.pf-hoofd { display: grid; gap: 6px; }
.pf-totaal { font-size: clamp(30px, 6vw, 44px); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pf-resultaat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; min-height: 44px; }
.pf-resultaat b { font-size: 18px; font-variant-numeric: tabular-nums; }
.pf-resultaat small { flex-basis: 100%; }
.pf-resultaat .up, .up { color: var(--mint); }
.pf-resultaat .down, .down { color: var(--red); }
.skelet { display: inline-block; width: 160px; height: 18px; border-radius: 6px; background: linear-gradient(90deg, var(--surface) 25%, var(--surface-input-hover) 50%, var(--surface) 75%); background-size: 200% 100%; animation: skelet 1.2s linear infinite; }
@keyframes skelet { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skelet { animation: none; } }
.pf-grafiek-kop { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.pf-periodes { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-periodes .btn { min-height: 36px; min-width: 44px; }
.pf-eigen { gap: 8px; align-items: center; margin-top: 8px; }
.pf-eigen input { width: auto; }
.pf-grafiek .chart.laden { opacity: .5; }
.tracker-chart canvas { touch-action: pan-y; }   /* zoomen blokkeert verticaal scrollen op mobiel niet */
a.holding { color: inherit; text-decoration: none; }
a.holding:focus-visible, .tx-row:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.bijdrage-tabel td.balk { width: 35%; }
.bijdrage-tabel .balk i { display: block; height: 8px; border-radius: 4px; }
.bijdrage-tabel .balk i.up { background: var(--mint); }
.bijdrage-tabel .balk i.down { background: var(--red); margin-left: auto; }
.pf-terug { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.pf-detail-kop h1 { font-size: 22px; margin: 0; }
.pf-detail-acties { margin-top: 12px; gap: 8px; }
.stip { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: 0; }
.pf-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 12px; }
@media (max-width: 640px) { .pf-toolbar { flex-direction: column; align-items: stretch; } .pf-acties { justify-content: flex-end; } }
.pf-tabs { border-bottom: 0; margin: 0; }
.pf-pagina .holding.asset-compact:last-child { border-bottom: 0; }
@media (max-width: 640px) { .pf-periodes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .pf-periodes::-webkit-scrollbar { display: none; } .pf-periodes .btn { flex: none; } }