/* nuchtr v2, components.css (M1a). Hoofdstuk 5 van de ontwerpspecificatie, met toestanden.
   Klassen: .dvj-<component>__<deel>, modifiers is-<toestand> en --<variant>. Geen inline kleuren. */

/* ---------- Gedeelde kleine delen ---------- */

/* Status-stippen (2.7) */
.dvj-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--ink-4); flex: 0 0 auto; }
.dvj-dot--ok { background: var(--pos); }
.dvj-dot--live { background: var(--live); }
.dvj-dot--err { background: var(--neg); }
.dvj-dot--ink { background: var(--ink); }
.dvj-dot--6 { width: 6px; height: 6px; }
.dvj-dot--4 { width: 4px; height: 4px; }
.dvj-dot.is-pulse { animation: dot-pulse 1.2s ease-in-out infinite; }
.dvj-dot.is-pulse3 { animation: dot-pulse 800ms ease-in-out 3; }
@keyframes dot-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }

/* Dunne balken (voortgang, drempel) */
.dvj-bar { position: relative; height: 6px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.dvj-bar--2 { height: 2px; } .dvj-bar--4 { height: 4px; }
.dvj-bar__fill { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--ink); border-radius: 999px; transform-origin: left center; transition: width 600ms var(--ease), background-color 200ms; }
.dvj-bar__fill--pos { background: var(--pos); } .dvj-bar__fill--neg { background: var(--neg); } .dvj-bar__fill--warn { background: var(--warn); } .dvj-bar__fill--gold { background: var(--gold); } .dvj-bar__fill--ink2 { background: var(--ink-2); }
.dvj-bar__goal { position: absolute; top: -2px; bottom: -2px; left: var(--g, 50%); border-left: 1px dashed var(--ink); opacity: .9; }
.dvj-bar.is-first .dvj-bar__fill { animation: bar-grow 900ms var(--ease) both; }
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- 5.26 Knoppen ---------- */
.dvj-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-md); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; color: var(--ink); border: 1px solid transparent; transition: transform 150ms var(--ease), box-shadow 150ms var(--ease), background-color 150ms, border-color 150ms, color 150ms, opacity 150ms; user-select: none; -webkit-user-select: none; }
.dvj-btn .ic { width: 16px; height: 16px; }
.dvj-btn--primary { background: var(--accent); color: var(--accent-ink); }
.dvj-btn--secondary { background: transparent; border-color: var(--line-2); color: var(--ink); }
.dvj-btn--text { background: transparent; color: var(--ink-2); padding: 0 8px; }
.dvj-btn--danger { background: var(--neg-fill); color: var(--neg); }
.dvj-btn--icon { width: 36px; height: 36px; padding: 0; border-radius: var(--r-md); color: var(--ink-2); }
.dvj-btn--login { background: var(--accent); color: var(--accent-ink); height: 44px; } /* nuchtr: zwart-wit, ook op login, registreren en betaalmuur */
.dvj-btn--sm { height: 36px; padding: 0 14px; }
.dvj-btn--xs { height: 28px; padding: 0 10px; font-size: 12px; border-radius: var(--r-xs); }
.dvj-btn--block { width: 100%; }
.dvj-btn--accent-square { width: 22px; height: 22px; padding: 0; border-radius: 6px; background: var(--accent); color: var(--accent-ink); }
@media (hover: hover) {
  .dvj-btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
  .dvj-btn--secondary:not(:disabled):hover { background: var(--panel-2); }
  .dvj-btn--text:not(:disabled):hover { color: var(--ink); box-shadow: none; transform: none; }
  .dvj-btn--icon:not(:disabled):hover { background: var(--panel-2); color: var(--ink); box-shadow: none; }
}
.dvj-btn:not(:disabled):active { transform: translateY(0); transition-duration: 80ms; box-shadow: none; }
.dvj-btn:disabled { opacity: .4; }
.dvj-btn.is-loading { color: transparent !important; pointer-events: none; }
.dvj-btn.is-loading .dvj-btn__spin { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.dvj-btn--primary.is-loading .dvj-btn__spin { color: var(--accent-ink); }
.dvj-btn--secondary.is-loading .dvj-btn__spin, .dvj-btn--text.is-loading .dvj-btn__spin { color: var(--ink); }
.dvj-btn.is-ready { animation: fade-swap 200ms var(--ease); }
@media (max-width: 767px) { .dvj-btn { height: 44px; } .dvj-btn--sm { height: 40px; } .dvj-btn--icon { height: 36px; width: 36px; } .dvj-btn--xs { height: 32px; } }
.dvj-btnrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- 5.26 Inputs ---------- */
.dvj-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dvj-field__label { font-size: 12px; font-weight: 500; color: var(--ink-2); display: flex; justify-content: space-between; align-items: center; }
.dvj-field__wrap { position: relative; display: flex; align-items: center; height: 40px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 12px; gap: 8px; transition: border-color 150ms, box-shadow 150ms; }
.dvj-field__wrap:hover { border-color: var(--line-3); }
.dvj-field__wrap:focus-within { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.dvj-field.is-error .dvj-field__wrap { border-color: var(--neg); }
.dvj-field__input { flex: 1 1 auto; min-width: 0; height: 100%; font-size: 14px; color: var(--ink); background: transparent; }
.dvj-field__input.num { text-align: right; }
.dvj-field__input[type="number"]::-webkit-outer-spin-button, .dvj-field__input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
.dvj-field__prefix, .dvj-field__suffix { color: var(--ink-3); font-size: 13px; font-weight: 500; flex: 0 0 auto; }
.dvj-field__error { font-size: 12px; color: var(--neg); }
.dvj-field__hint { font-size: 12px; color: var(--ink-3); }
.dvj-field--textarea .dvj-field__wrap { height: auto; padding: 10px 12px; }
.dvj-field__textarea { width: 100%; min-height: 60px; resize: none; font-size: 14px; line-height: 1.5; }
.dvj-field--select .dvj-field__wrap { padding-right: 36px; }
.dvj-field__select { appearance: none; -webkit-appearance: none; flex: 1 1 auto; height: 100%; font-size: 14px; color: var(--ink); background: transparent; cursor: pointer; }
.dvj-field__select option { background: var(--bg-2); color: var(--ink); }
.dvj-field__chev { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--ink-3); pointer-events: none; }
.dvj-field__toggle { color: var(--ink-3); width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; }
.dvj-field__toggle:hover { color: var(--ink); }
@media (max-width: 767px) { .dvj-field__wrap { height: 44px; } .dvj-field__input, .dvj-field__select, .dvj-field__textarea { font-size: 16px; } }
.dvj-form-row { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 12px; }
@media (max-width: 767px) { .dvj-form-row { grid-template-columns: repeat(min(var(--cols, 2), 2), minmax(0, 1fr)); } }

/* Switch */
.dvj-switch { position: relative; display: inline-flex; align-items: center; width: 36px; height: 20px; border-radius: 999px; background: var(--panel-3); border: 1px solid var(--line); transition: background-color 160ms var(--ease); flex: 0 0 auto; }
.dvj-switch__knob { position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 999px; background: var(--ink-2); transition: transform 160ms var(--ease), background-color 160ms; }
.dvj-switch.is-on { background: var(--accent); border-color: var(--accent); }
.dvj-switch.is-on .dvj-switch__knob { transform: translateX(16px); background: var(--accent-ink); }
.dvj-switch:disabled { opacity: .4; }
.dvj-switchrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; font-size: 14px; }
.dvj-switchrow__text { display: flex; flex-direction: column; min-width: 0; }
.dvj-switchrow__sub { font-size: 12px; color: var(--ink-3); }

/* Slider 0 tot 10 */
.dvj-slider { position: relative; padding: 28px 0 8px; }
.dvj-slider__track { position: relative; height: 4px; border-radius: 999px; background: var(--panel-3); }
.dvj-slider__fill { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--ink); border-radius: 999px; }
.dvj-slider__ticks { position: absolute; left: 0; right: 0; top: 50%; display: flex; justify-content: space-between; transform: translateY(-50%); pointer-events: none; }
.dvj-slider__tick { width: 1px; height: 8px; background: var(--ink-4); }
.dvj-slider__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.dvj-slider__knob { position: absolute; top: 50%; left: var(--w, 0%); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 999px; background: var(--ink); box-shadow: 0 0 0 1px var(--bg); pointer-events: none; transition: left 120ms var(--ease); }
.dvj-slider__value { position: absolute; top: 0; left: var(--w, 0%); transform: translateX(-50%); font-size: 24px; font-weight: 600; line-height: 1; transition: left 120ms var(--ease); }
.dvj-slider__hint { margin-top: 10px; font-size: 13px; color: var(--ink-2); min-height: 18px; }
.dvj-slider__hint.is-neg { color: var(--neg); }
.dvj-slider:focus-within .dvj-slider__knob { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }

/* Bolletjes 1 tot 10 */
.dvj-dots { display: flex; gap: 6px; flex-wrap: wrap; }
.dvj-dots__dot { width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-3); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; transition: background-color 120ms, color 120ms, border-color 120ms; }
.dvj-dots__dot.is-filled { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
@media (hover: hover) { .dvj-dots__dot:hover { border-color: var(--ink); } }
@media (max-width: 767px) { .dvj-dots__dot { width: 32px; height: 32px; } }

/* Stepper */
.dvj-stepper { display: flex; flex-direction: column; min-height: 0; }
.dvj-stepper__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.dvj-stepper__count { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.dvj-stepper__bars { display: flex; gap: 6px; }
.dvj-stepper__bar { flex: 1 1 0; height: 4px; border-radius: 999px; background: var(--panel-3); transition: background-color 200ms; }
.dvj-stepper__bar.is-done, .dvj-stepper__bar.is-active { background: var(--ink); }
.dvj-stepper__body { flex: 1 1 auto; min-width: 0; }
.dvj-stepper__step { animation: step-in 220ms var(--ease) both; }
@keyframes step-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.dvj-stepper__error { font-size: 13px; color: var(--neg); margin-top: 8px; min-height: 18px; }
.dvj-stepper__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 12px; }
@media (max-width: 767px) { .dvj-stepper__foot { position: sticky; bottom: 0; background: var(--bg-2); padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); margin-top: auto; } }

/* ---------- 5.25 Segment, chips, pillen, grade, les-pill ---------- */
.dvj-seg { display: inline-flex; align-items: stretch; gap: 2px; padding: 3px; background: var(--panel-2); border-radius: var(--r-md); max-width: 100%; }
.dvj-seg__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: background-color 160ms var(--ease), color 160ms; }
.dvj-seg__btn .ic { width: 14px; height: 14px; }
.dvj-seg__btn.is-active { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
@media (hover: hover) { .dvj-seg__btn:not(.is-active):hover { color: var(--ink); } }
.dvj-seg--full { display: flex; width: 100%; }
.dvj-seg--full .dvj-seg__btn { flex: 1 1 0; }
.dvj-seg--scroll { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); }
.dvj-seg--scroll::-webkit-scrollbar { display: none; }
.dvj-seg--scroll .dvj-seg__btn { scroll-snap-align: start; }
.dvj-seg--lg .dvj-seg__btn { min-height: 44px; font-size: 14px; }
@media (max-width: 767px) { .dvj-seg__btn { min-height: 36px; } .dvj-seg--lg .dvj-seg__btn { min-height: 52px; } }
.dvj-seg--sm .dvj-seg__btn { min-height: 24px; padding: 0 8px; font-size: 12px; }

.dvj-chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: var(--r-xs); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; background: var(--panel-3); color: var(--ink-2); border: 1px solid transparent; max-width: 100%; transition: transform 150ms var(--ease), box-shadow 150ms var(--ease), background-color 150ms, border-color 150ms, color 150ms; }
.dvj-chip .ic { width: 14px; height: 14px; }
.dvj-chip--outline { background: transparent; border-color: var(--line-2); color: var(--ink-2); }
.dvj-chip--outline b { color: var(--ink); font-weight: 600; }
.dvj-chip--pos { background: var(--pos-fill); color: var(--pos); }
.dvj-chip--neg { background: var(--neg-fill); color: var(--neg); }
.dvj-chip--gold, .dvj-chip--eigen { background: var(--gold-soft); color: var(--gold); }
.dvj-chip--warn { background: var(--warn-soft); color: var(--warn); }
.dvj-chip--live { background: var(--live-soft); color: var(--live); }
.dvj-chip--status { background: var(--panel-3); color: var(--ink-2); }
.dvj-chip--funded { background: var(--pos-fill); color: var(--pos); }
.dvj-chip--ink { background: var(--panel-2); color: var(--ink); }
.dvj-chip--muted { background: transparent; color: var(--ink-3); border-color: var(--line); }
.dvj-chip--compact, .dvj-chip--xs { height: 24px; padding: 0 8px; font-size: 11px; }
.dvj-chip--11 { height: 22px; padding: 0 7px; font-size: 11px; }
.dvj-chip--lg { height: 32px; padding: 0 12px; font-size: 13px; }
.dvj-chip--upper { text-transform: uppercase; letter-spacing: .06em; font-weight: 600; font-size: 11px; }
.dvj-chip.is-button { cursor: pointer; }
.dvj-chip.is-selected, .dvj-chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
@media (hover: hover) { .dvj-chip.is-button:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); } }
.dvj-chip__x { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0 -8px 0 -4px; border-radius: 4px; color: inherit; opacity: .7; }
.dvj-chip__x .ic { width: 12px; height: 12px; }
.dvj-chip__x:hover { opacity: 1; }
.dvj-chip--dir .ic { width: 12px; height: 12px; }
.dvj-chip--long { background: var(--pos-fill); color: var(--pos); }
.dvj-chip--short { background: var(--neg-fill); color: var(--neg); }
.dvj-chip--dot::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.dvj-chips { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 767px) { .dvj-chips--filter .dvj-chip { height: 32px; } }

.dvj-pills { display: inline-flex; gap: 4px; }
.dvj-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 10px; font-weight: 600; line-height: 1; }
.dvj-pill--w { background: var(--pos-fill); color: var(--pos); }
.dvj-pill--be { background: var(--panel-3); color: var(--ink-2); }
.dvj-pill--l { background: var(--neg-fill); color: var(--neg); }
.dvj-pill--n { background: var(--panel-3); color: var(--ink-2); }

.dvj-grade { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; font-size: 11px; font-weight: 700; line-height: 1; background: var(--panel-3); color: var(--ink-2); flex: 0 0 auto; letter-spacing: 0; }
.dvj-grade[data-grade="A+"], .dvj-grade[data-grade="A"] { color: var(--ink); }
.dvj-grade[data-grade="F"] { background: var(--neg-fill); color: var(--neg); }
.dvj-grade[data-grade="·"], .dvj-grade.is-none { background: transparent; color: var(--ink-4); }
.dvj-grade--lg { width: 28px; height: 28px; font-size: 13px; border-radius: 7px; }
.dvj-grade--sm { width: 18px; height: 18px; font-size: 10px; border-radius: 5px; }
.dvj-grade.is-pop { animation: grade-pop 260ms var(--ease-overshoot) both; }
@keyframes grade-pop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.dvj-lesson { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px 0 6px; border-radius: 999px; background: var(--panel-3); color: var(--ink-2); font-size: 11px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color 150ms, color 150ms; }
.dvj-lesson .ic { width: 12px; height: 12px; }
@media (hover: hover) { .dvj-lesson:hover { color: var(--ink); } }
.dvj-lesson-pop { width: 280px; padding: 8px 8px 4px; }
.dvj-lesson-pop__core { font-size: 14px; line-height: 1.45; padding: 4px 6px 8px; }
.dvj-lesson-pop__core b { font-family: var(--font-serif); font-style: normal; font-weight: 400; font-size: 1.08em; }

/* ---------- 5.2 KPI-tegel ---------- */
.dvj-kpi { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; gap: 2px 12px; min-height: 104px; padding: 16px 20px; text-decoration: none; color: inherit; }
@media (min-width: 1024px) { .dvj-kpi { min-height: 112px; } }
.dvj-kpi__head { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; min-height: 16px; margin-bottom: 4px; }
.dvj-kpi__label { font-size: var(--t-label); font-weight: 600; letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvj-kpi__n { display: inline-flex; align-items: center; height: 16px; padding: 0 6px; border-radius: 999px; background: var(--panel-3); color: var(--ink-2); font-size: 10px; font-weight: 600; line-height: 1; }
.dvj-kpi__head .grow { flex: 1 1 auto; }
.dvj-kpi__value { grid-column: 1; font-size: var(--t-kpi); font-weight: 600; line-height: 1.1; letter-spacing: -.015em; white-space: nowrap; color: var(--ink); align-self: end; }
.dvj-kpi__value[data-sign="pos"] { color: var(--pos); } .dvj-kpi__value[data-sign="neg"] { color: var(--neg); } .dvj-kpi__value[data-sign="flat"] { color: var(--ink); }
.dvj-kpi.is-few .dvj-kpi__value, .dvj-kpi.is-grey .dvj-kpi__value { color: var(--ink-3); }
.dvj-kpi__sub { grid-column: 1; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 16px; }
.dvj-kpi__sub a { color: var(--live); }
.dvj-kpi__side { grid-column: 2; grid-row: 2 / span 2; align-self: center; justify-self: end; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dvj-kpi__below { grid-column: 1 / -1; margin-top: 8px; min-width: 0; }
.dvj-kpi__badge { margin-left: auto; }
.dvj-kpi--link { cursor: pointer; transition: border-color 160ms var(--ease), transform 160ms var(--ease), box-shadow 160ms var(--ease); }
@media (hover: hover) { .dvj-kpi--link:hover { border-color: var(--line-2); transform: translateY(-1px); box-shadow: var(--shadow-panel), var(--shadow-hover); } }
.dvj-kpi__state { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); min-height: 48px; }
.dvj-kpi__state .ic { width: 16px; height: 16px; color: var(--ink-3); }
.dvj-kpi.is-loading .dvj-kpi__label { width: 80px; height: 11px; }
@media (max-width: 767px) { .dvj-kpi { padding: 14px 16px; min-height: 96px; } .dvj-kpi--wide { grid-column: span 2; } }
.dvj-kpi-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap-tile); }
@media (max-width: 1023px) { .dvj-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .dvj-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* As-visual (Verwachting) */
.dvj-axis { position: relative; height: 24px; }
.dvj-axis__line { position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--panel-3); border-radius: 999px; }
.dvj-axis__zero { position: absolute; top: 7px; width: 2px; height: 10px; margin-left: -1px; background: var(--ink-4); border-radius: 1px; }
.dvj-axis__goal { position: absolute; top: 5px; width: 1px; height: 14px; border-left: 1px dashed var(--ink); opacity: .9; }
.dvj-axis__mark { position: absolute; top: 6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 999px; background: var(--ink); box-shadow: 0 0 0 2px var(--panel); transition: left 600ms var(--ease); }
.dvj-axis__tick { position: absolute; top: 14px; font-size: 10px; color: var(--ink-4); transform: translateX(-50%); }
.dvj-axis__tick--l { left: 0; transform: none; } .dvj-axis__tick--r { right: 0; left: auto; transform: none; }
.dvj-axis.is-few .dvj-axis__mark { background: var(--ink-3); }

/* ---------- 5.3 tot 5.6 Mini-visuals (fallback-tekeningen, zelfde klassen als charts.js) ---------- */
.dvj-gauge { width: 96px; height: 48px; display: block; overflow: visible; }
.dvj-gauge__track { stroke: var(--panel-3); }
.dvj-gauge__neg { stroke: var(--neg); }
.dvj-gauge__pos { stroke: var(--pos); transition: stroke-dashoffset 600ms var(--ease), stroke-dasharray 600ms var(--ease); }
.dvj-gauge__goal { stroke: var(--ink); stroke-width: 2; }
.dvj-gauge.is-few .dvj-gauge__pos, .dvj-gauge.is-few .dvj-gauge__neg { opacity: .55; }
@media (max-width: 767px) { .dvj-gauge { width: 72px; height: 36px; } }
.dvj-ring { position: relative; display: inline-block; flex: 0 0 auto; }
.dvj-ring svg { display: block; overflow: visible; }
.dvj-ring__track { stroke: var(--panel-3); }
.dvj-ring__fill { stroke: var(--ink); transition: stroke-dashoffset 600ms var(--ease); }
.dvj-ring__rest { stroke: var(--neg); transition: stroke-dashoffset 600ms var(--ease); }
.dvj-ring.is-dashed .dvj-ring__fill { stroke-dasharray: 4 6 !important; }
.dvj-ring__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.1; }
.dvj-ring__center b { font-weight: 600; }
.dvj-ring__center small { font-size: 11px; color: var(--ink-3); font-weight: 500; }
.dvj-split { display: flex; flex-direction: column; gap: 6px; }
.dvj-split__bar { display: flex; height: 6px; gap: 2px; border-radius: 999px; overflow: hidden; background: var(--bg); }
.dvj-split__a { background: var(--pos); border-radius: 999px; flex: 0 0 var(--a, 50%); transition: flex-basis 600ms var(--ease); }
.dvj-split__b { background: var(--neg); border-radius: 999px; flex: 1 1 auto; }
.dvj-split__labels { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; }
.dvj-split__labels .pos { color: var(--pos); } .dvj-split__labels .neg { color: var(--neg); }
.dvj-split--multi .dvj-split__seg { border-radius: 999px; flex: 0 0 var(--w, 10%); transition: flex-basis 600ms var(--ease); }
.dvj-split--multi .dvj-split__seg:nth-child(1) { background: var(--series-2); } .dvj-split--multi .dvj-split__seg:nth-child(2) { background: var(--series-3); } .dvj-split--multi .dvj-split__seg:nth-child(3) { background: var(--series-4); } .dvj-split--multi .dvj-split__seg:nth-child(4) { background: var(--series-5); }
.dvj-split__legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-2); }
.dvj-split__legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.dvj-split__legend b { color: var(--ink); font-weight: 600; }
.dvj-spark { display: block; width: 100%; overflow: visible; }
.dvj-spark__line { stroke: var(--ink-2); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dvj-spark__last { stroke-width: 1.5; fill: none; stroke-linecap: round; }
.dvj-spark__dot { fill: var(--ink); }
.dvj-spark__zero { stroke: var(--line-2); stroke-dasharray: 3 4; }
.dvj-spark__label { fill: var(--ink-2); font-size: 11px; font-weight: 600; font-family: var(--font); }
.dvj-spark.is-draw .dvj-spark__line { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: spark-draw 600ms var(--ease) forwards; }
@keyframes spark-draw { to { stroke-dashoffset: 0; } }
.dvj-bars7 { display: flex; align-items: flex-end; gap: 3px; height: 18px; }
.dvj-bars7__bar { width: 6px; border-radius: 2px 2px 1px 1px; background: var(--panel-3); min-height: 2px; transform-origin: bottom; animation: bar-up 600ms var(--ease) both; }
.dvj-bars7__bar[data-sign="pos"] { background: var(--pos); } .dvj-bars7__bar[data-sign="neg"] { background: var(--neg); } .dvj-bars7__bar[data-sign="flat"] { background: var(--ink-4); }
@keyframes bar-up { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Staven (fallback, 5.17) */
.dvj-bars { display: flex; align-items: flex-end; gap: 8px; height: var(--h, 140px); padding-top: 18px; }
.dvj-bars__col { flex: 1 1 0; max-width: 72px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.dvj-bars__val { font-size: 12px; font-weight: 600; margin-bottom: 4px; white-space: nowrap; }
.dvj-bars__bar { width: 100%; border-radius: 6px 6px 0 0; background: var(--panel-3); border-top: 2px solid var(--ink); transform-origin: bottom; animation: bar-up 600ms var(--ease) both; animation-delay: calc(var(--i, 0) * 20ms); min-height: 2px; }
.dvj-bars__bar[data-sign="pos"] { background: var(--pos-fill); border-top-color: var(--pos); } .dvj-bars__bar[data-sign="neg"] { background: var(--neg-fill); border-top-color: var(--neg); }
.dvj-bars__col.is-few .dvj-bars__bar { outline: 1px dashed var(--line-2); outline-offset: -1px; } .dvj-bars__col.is-few .dvj-bars__val { color: var(--ink-4); }
.dvj-bars__cat { font-size: 11px; color: var(--ink-3); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dvj-bars__n { font-size: 10px; color: var(--ink-4); }
.dvj-bars--h { display: flex; flex-direction: column; gap: 4px; height: auto; padding: 0; }
.dvj-bars--h .dvj-bars__row { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 10px; height: 28px; font-size: 12px; }
.dvj-bars--h .dvj-bars__hbar { height: 10px; border-radius: 3px; background: var(--neg-fill); border-right: 2px solid var(--neg); width: var(--w, 10%); transition: width 600ms var(--ease); }
.dvj-bars--h .dvj-bars__hval { color: var(--neg); font-weight: 600; }
/* Kleine lijngrafiek (fallback) */
.dvj-lines { display: block; width: 100%; overflow: visible; }
.dvj-lines__grid { stroke: var(--grid); stroke-dasharray: 3 5; }
.dvj-lines__a { stroke: var(--ink); stroke-width: 2; fill: none; stroke-linejoin: round; }
.dvj-lines__b { stroke: var(--ink-3); stroke-width: 1.5; fill: none; stroke-dasharray: 4 4; }
.dvj-lines__gold { stroke: var(--gold); stroke-width: 1.5; fill: none; }
.dvj-lines__fill-pos { fill: var(--pos-soft); } .dvj-lines__fill-neg { fill: var(--neg-soft); }
.dvj-lines__marker { fill: var(--ink); }
.dvj-lines__label { fill: var(--ink-3); font-size: 10px; font-family: var(--font); }

/* ---------- 5.7 Periodetegel ---------- */
.dvj-pstrip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-tile); }
.dvj-ptile { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 72px; padding: 12px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-panel); text-align: left; color: inherit; cursor: pointer; transition: border-color 160ms var(--ease), background-color 160ms; min-width: 0; }
.dvj-ptile__label { font-size: var(--t-label); font-weight: 600; letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--ink-3); }
.dvj-ptile__row { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.dvj-ptile__value { font-size: var(--t-stat); font-weight: 600; line-height: 1.15; letter-spacing: -.015em; white-space: nowrap; }
.dvj-ptile__second { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvj-ptile__sub { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvj-ptile.is-active { border-color: var(--line-2); background: var(--panel-2); }
@media (hover: hover) { .dvj-ptile:hover { border-color: var(--line-2); } }
.dvj-ptile.is-empty .dvj-ptile__value { color: var(--flat); }
@media (max-width: 767px) {
  .dvj-pstrip { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--page-pad); margin: 0 calc(-1 * var(--page-pad)); scrollbar-width: none; }
  .dvj-pstrip::-webkit-scrollbar { display: none; }
  .dvj-ptile { flex: 0 0 150px; scroll-snap-align: start; }
}

/* ---------- 5.8 Vandaag-strip ---------- */
.dvj-today { display: flex; flex-direction: column; gap: 10px; }
.dvj-today__sync { font-size: 12px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.dvj-today__big { font-size: var(--t-display); font-weight: 700; line-height: var(--t-display-lh); letter-spacing: var(--t-display-ls); white-space: nowrap; }
.dvj-today__line { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); flex-wrap: wrap; }
.dvj-today__line a { color: var(--live); }
.dvj-today__limits { display: flex; flex-direction: column; gap: 2px; }
.dvj-today__advice { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; font-size: 12px; color: var(--ink-2); flex-wrap: wrap; }
.dvj-today__advice b { color: var(--ink); font-weight: 600; font-size: 13px; }
.dvj-today__advice .dvj-today__note { color: var(--ink-3); }
.dvj-today__accounts { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); padding-top: 8px; }
.dvj-today__acc { display: grid; grid-template-columns: minmax(0, 1fr) auto 120px auto; align-items: center; gap: 12px; min-height: 32px; font-size: 12px; color: var(--ink-2); }
.dvj-today__acc-name { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 8px; }
.dvj-today__acc-max { white-space: nowrap; }
.dvj-today__acc-max b { font-size: var(--t-sub); font-weight: 600; color: var(--ink); margin-left: 4px; }
.dvj-today__acc-max b[data-level="warn"] { color: var(--warn); } .dvj-today__acc-max b[data-level="danger"] { color: var(--neg); }
.dvj-today__acc-pct { font-weight: 600; min-width: 64px; text-align: right; white-space: nowrap; }
.dvj-today__acc-pct[data-level="warn"] { color: var(--warn); } .dvj-today__acc-pct[data-level="danger"] { color: var(--neg); }
.dvj-today__more { font-size: 12px; color: var(--ink-3); }
.dvj-today__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dvj-today__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.dvj-today__actions .dvj-btn { height: 36px; }
.dvj-today__closed-title { font-size: var(--t-h2); font-weight: 600; }
.dvj-today__week { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.dvj-today__cell { background: var(--panel); padding: 10px 12px; min-width: 0; }
.dvj-today__cell-label { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.dvj-today__cell-value { font-size: var(--t-sub); font-weight: 600; white-space: nowrap; }
.dvj-today__cell-sub { font-size: 12px; color: var(--ink-3); }
@media (max-width: 767px) {
  .dvj-today__acc { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; }
  .dvj-today__acc > .dvj-limit { grid-column: 1 / -1; }
  .dvj-today__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .dvj-today__actions .dvj-btn { width: 100%; }
  .dvj-today__week { grid-template-columns: 1fr 1fr; }
}

/* ---------- 5.9 Limietbalk ---------- */
.dvj-limit { display: grid; grid-template-columns: var(--lw, 120px) minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 28px; font-size: 12px; }
.dvj-limit--compact { --lw: auto; gap: 8px; }
.dvj-limit__label { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvj-limit__track { position: relative; height: 6px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.dvj-limit__fill { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--ink); border-radius: 999px; transform-origin: left; transition: width 600ms var(--ease), background-color 200ms; }
.dvj-limit.is-first .dvj-limit__fill { animation: bar-grow 900ms var(--ease) both; }
.dvj-limit__fill[data-level="warn"] { background: var(--warn); }
.dvj-limit__fill[data-level="danger"], .dvj-limit__fill[data-level="over"] { background: var(--neg); }
.dvj-limit__value { font-weight: 600; white-space: nowrap; color: var(--ink); text-align: right; }
.dvj-limit__value[data-level="warn"] { color: var(--warn); } .dvj-limit__value[data-level="danger"], .dvj-limit__value[data-level="over"] { color: var(--neg); }
.dvj-limit__note { font-weight: 500; color: var(--neg); margin-left: 6px; }
.dvj-limit.is-breach { background: var(--neg-soft); border-radius: var(--r-xs); padding: 0 8px; margin: 0 -8px; }
.dvj-limit.is-breach .dvj-limit__value { color: var(--neg); }
.dvj-limit--bare { grid-template-columns: minmax(0, 1fr) auto; }
.dvj-limit--w120 .dvj-limit__track { width: 120px; }

/* ---------- 5.10 Coachkaart ---------- */
.dvj-coach { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.dvj-coach--large { grid-template-columns: minmax(0, 1fr) 200px; gap: 8px 24px; }
.dvj-coach__main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dvj-coach__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dvj-coach__text { font-size: var(--t-h2); font-weight: 500; line-height: 1.35; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dvj-coach__ifthen { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.dvj-coach__do { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dvj-coach__do .label { flex: 0 0 auto; }
.dvj-coach__action { font-size: 14px; font-weight: 600; }
.dvj-coach__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.dvj-coach__foot .grow { flex: 1 1 auto; }
.dvj-coach__effect { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-left: 1px solid var(--line); align-self: stretch; justify-content: center; }
.dvj-coach__effect-value { font-size: var(--t-kpi); font-weight: 600; line-height: 1.1; white-space: nowrap; }
.dvj-coach__effect-value[data-sign="pos"] { color: var(--pos); }
.dvj-coach__effect-money { font-size: var(--t-kpi); font-weight: 600; color: var(--pos); line-height: 1.1; white-space: nowrap; }
.dvj-coach__effect-sub { font-size: 12px; color: var(--ink-3); }
.dvj-coach__progress { display: flex; flex-direction: column; gap: 8px; }
.dvj-coach__progress-text { font-size: var(--t-h2); font-weight: 500; }
.dvj-coach__none { font-size: var(--t-h2); font-weight: 500; line-height: 1.4; color: var(--ink-2); }
.dvj-coach__none .serif { color: var(--ink); }
.dvj-coach.is-swap > * { animation: fade-swap 160ms var(--ease); }
@media (max-width: 767px) { .dvj-coach--large { grid-template-columns: minmax(0, 1fr); } .dvj-coach__effect { border-left: 0; border-top: 1px solid var(--line); padding: 10px 0 0; flex-direction: row; align-items: baseline; gap: 12px; } }

/* ---------- 5.11 Bewijs en vertrouwensstip ---------- */
.dvj-proof { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.dvj-proof__dots { display: inline-flex; gap: 3px; }
.dvj-proof__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ink-4); }
.dvj-proof__dot.is-on { background: var(--ink); }
.dvj-proof__level { font-weight: 600; color: var(--ink-2); }
.dvj-proof__level[data-level="sterk"] { color: var(--ink); }
.dvj-proof__months { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--panel-3); color: var(--ink-2); font-size: 10px; font-weight: 600; }
.dvj-cdot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; border: 1px solid var(--ink-3); background: transparent; flex: 0 0 auto; vertical-align: middle; position: relative; overflow: hidden; }
.dvj-cdot[data-level="half"]::after { content: ""; position: absolute; inset: 0; background: var(--ink); clip-path: inset(0 50% 0 0); }
.dvj-cdot[data-level="full"] { background: var(--ink); border-color: var(--ink); }
.dvj-conf { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }

/* ---------- 5.12 Inzichtkaart ---------- */
.dvj-insight { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 120px; padding: 16px 20px 16px 24px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-panel); cursor: pointer; transition: border-color 160ms var(--ease), transform 160ms var(--ease); animation: panel-in var(--d-panel) var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.dvj-insight::before { content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px; border-radius: 0 2px 2px 0; background: var(--ink); }
.dvj-insight[data-sign="pos"]::before { background: var(--pos); } .dvj-insight[data-sign="neg"]::before { background: var(--neg); }
@media (hover: hover) { .dvj-insight:hover { border-color: var(--line-2); transform: translateY(-1px); } }
.dvj-insight.is-few { opacity: .7; }
.dvj-insight__top { display: flex; align-items: center; gap: 8px; }
.dvj-insight__cat { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.dvj-insight__new { width: 6px; height: 6px; border-radius: 999px; background: var(--ink); flex: 0 0 auto; }
.dvj-insight__text { font-size: 16px; font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dvj-insight__ifthen { font-size: 14px; color: var(--ink-2); }
.dvj-insight__numbers { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-2); flex-wrap: wrap; }
.dvj-insight__numbers b { color: var(--ink); font-weight: 600; }
.dvj-insight__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.dvj-insight__effect { margin-left: auto; font-size: 13px; font-weight: 600; white-space: nowrap; }
.dvj-insight__effect[data-sign="pos"] { color: var(--pos); }
.dvj-insight__effect small { color: var(--ink-3); font-weight: 500; margin-right: 4px; }
.dvj-insight__actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.dvj-insight__badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.dvj-insight__badge[data-level="sterk"] { background: var(--pos-fill); color: var(--pos); }
.dvj-insight__badge[data-level="redelijk"] { background: var(--panel-2); color: var(--ink); }
.dvj-insight__badge[data-level="voorlopig"] { background: transparent; color: var(--ink-3); border: 1px solid var(--line); }
.dvj-insight-group { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 8px 0 4px; }
.dvj-insight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-tile); }
@media (max-width: 767px) { .dvj-insight-grid { grid-template-columns: minmax(0, 1fr); } .dvj-insight__actions .dvj-btn { padding: 0 8px; } }

/* ---------- 5.13 Kalender ---------- */
.dvj-cal { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dvj-cal__head { display: flex; align-items: center; gap: 12px; min-height: 28px; flex-wrap: wrap; }
.dvj-cal__nav { display: inline-flex; align-items: center; gap: 2px; }
.dvj-cal__chev { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--ink-2); }
.dvj-cal__chev .ic { width: 16px; height: 16px; }
.dvj-cal__chev:disabled { color: var(--ink-4); }
@media (hover: hover) { .dvj-cal__chev:not(:disabled):hover { background: var(--panel-2); color: var(--ink); } }
.dvj-cal__title { font-size: 14px; font-weight: 500; padding: 0 4px; border-radius: 6px; min-width: 110px; text-align: center; }
@media (hover: hover) { .dvj-cal__title:hover { background: var(--panel-2); } }
.dvj-cal__total { font-size: 11px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.dvj-cal__total b { font-weight: 600; font-size: 12px; }
.dvj-cal__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.dvj-cal__body { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: var(--gap-cal); align-items: start; }
.dvj-cal--compact .dvj-cal__body, .dvj-cal--mini .dvj-cal__body { grid-template-columns: minmax(0, 1fr); }
.dvj-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--gap-cal); min-width: 0; }
.dvj-cal--noweekend .dvj-cal__grid { grid-template-columns: repeat(5, minmax(0, 1fr)) repeat(2, minmax(0, .6fr)); }
.dvj-cal__wd { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); text-align: center; padding: 0 0 4px; }
.dvj-cal__cell { position: relative; display: grid; grid-template-rows: auto 1fr auto; align-items: start; height: 62px; padding: 5px 7px 5px; border-radius: var(--r-sm); border: 1.5px solid transparent; background: var(--panel-2); color: var(--ink-2); text-align: right; cursor: pointer; transition: transform 150ms var(--ease), background-color 180ms var(--ease), border-color 180ms var(--ease), opacity 180ms; min-width: 0; overflow: hidden; }
@media (min-width: 1200px) { .dvj-cal__cell { height: 72px; } }
.dvj-cal__cell[data-state="win"] { background: var(--pos-fill); border-color: var(--pos); color: var(--ink); }
.dvj-cal__cell[data-state="loss"] { background: var(--neg-fill); border-color: var(--neg); color: var(--ink); }
.dvj-cal__cell[data-state="flat"] { background: var(--flat-fill); border-color: var(--line-2); color: var(--ink); }
.dvj-cal__cell[data-state="none"] { background: var(--panel-2); }
.dvj-cal__cell[data-state="outside"] { opacity: .4; cursor: default; }
.dvj-cal__cell[data-state="future"] { opacity: .5; cursor: default; }
.dvj-cal__cell.is-today { box-shadow: inset 0 0 0 1px var(--ink); }
.dvj-cal__cell.over-max { border-style: dashed; border-color: var(--line-3); }
.dvj-cal__cell[data-state="win"].over-max { border-color: var(--pos); } .dvj-cal__cell[data-state="loss"].over-max { border-color: var(--neg); }
@media (hover: hover) { .dvj-cal__cell:not([data-state="outside"]):not([data-state="future"]):hover { transform: scale(1.03); z-index: 1; } }
.dvj-cal__cell:active { background: var(--panel-3); }
.dvj-cal__cell:focus-visible { box-shadow: 0 0 0 2px var(--live); border-radius: var(--r-sm); }
.dvj-cal__top { display: flex; align-items: center; justify-content: space-between; gap: 4px; height: 12px; }
.dvj-cal__marks { display: inline-flex; align-items: center; gap: 4px; }
.dvj-cal__plan { width: 4px; height: 4px; border-radius: 999px; background: var(--ink); }
.dvj-cal__warn { width: 10px; height: 10px; color: var(--neg); }
.dvj-cal__day { font-size: 10px; font-weight: 500; color: var(--ink-3); line-height: 1; margin-left: auto; }
.dvj-cal__cell[data-state="win"] .dvj-cal__day, .dvj-cal__cell[data-state="loss"] .dvj-cal__day, .dvj-cal__cell[data-state="flat"] .dvj-cal__day { color: var(--ink-2); }
.dvj-cal__cell[data-state="none"] .dvj-cal__day { color: var(--ink-4); }
.dvj-cal__amount { align-self: center; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvj-cal__cell[data-state="win"] .dvj-cal__amount { color: var(--pos); } .dvj-cal__cell[data-state="loss"] .dvj-cal__amount { color: var(--neg); } .dvj-cal__cell[data-state="flat"] .dvj-cal__amount { color: var(--ink-2); }
.dvj-cal__bottom { display: flex; align-items: center; justify-content: space-between; gap: 4px; height: 12px; }
.dvj-cal__grade { font-size: 10px; font-weight: 700; line-height: 1; color: var(--ink); }
.dvj-cal__grade[data-grade="F"] { color: var(--neg); } .dvj-cal__grade[data-grade="B"], .dvj-cal__grade[data-grade="C"] { color: var(--ink-2); }
.dvj-cal__count { font-size: 10px; color: var(--ink-3); line-height: 1; margin-left: auto; white-space: nowrap; }
.dvj-cal__week { display: flex; flex-direction: column; gap: var(--gap-cal); }
.dvj-cal__wtile { display: flex; flex-direction: column; justify-content: center; gap: 2px; height: 62px; padding: 6px 8px; border-radius: var(--r-xs); background: var(--panel-2); border: 1px solid transparent; text-align: left; color: inherit; cursor: pointer; transition: border-color 150ms; }
@media (min-width: 1200px) { .dvj-cal__wtile { height: 72px; } }
@media (hover: hover) { .dvj-cal__wtile:hover { border-color: var(--line-2); } }
.dvj-cal__wlabel { font-size: 10px; font-weight: 600; color: var(--ink-3); letter-spacing: .04em; }
.dvj-cal__wtotal { font-size: 12px; font-weight: 700; white-space: nowrap; }
.dvj-cal__wn { font-size: 10px; color: var(--ink-3); }
.dvj-cal__wspacer { height: 16px; }
.dvj-cal__wpills { display: flex; gap: 6px; flex-wrap: wrap; }
.dvj-cal__wpill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--r-xs); background: var(--panel-2); font-size: 11px; color: var(--ink-3); cursor: pointer; }
.dvj-cal__wpill b { font-weight: 700; }
.dvj-cal__foot { display: flex; justify-content: flex-end; }
/* compact (mobiel) */
.dvj-cal--compact .dvj-cal__cell { height: auto; aspect-ratio: 1 / 1; min-height: 44px; padding: 4px 5px; grid-template-rows: auto 1fr; }
.dvj-cal--compact .dvj-cal__top { justify-content: flex-start; }
.dvj-cal--compact .dvj-cal__day { margin-left: 0; margin-right: auto; }
.dvj-cal--compact .dvj-cal__amount { font-size: 11px; align-self: end; }
.dvj-cal--compact .dvj-cal__bottom { display: none; }
/* mini (rapport) */
.dvj-cal--mini .dvj-cal__cell { height: 28px; padding: 0; border-width: 1px; grid-template-rows: 1fr; cursor: default; }
.dvj-cal--mini .dvj-cal__top, .dvj-cal--mini .dvj-cal__amount, .dvj-cal--mini .dvj-cal__bottom { display: none; }
.dvj-cal--mini .dvj-cal__wd { display: none; }
/* vulanimatie bij maandwissel */
.dvj-cal.is-fill .dvj-cal__cell { animation: cal-in 240ms var(--ease) both; animation-delay: calc(var(--i, 0) * var(--d-cal)); }
@keyframes cal-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.dvj-cal.is-loading .dvj-cal__cell { animation: none; background: var(--panel-2); border-color: transparent; }
.dvj-cal__empty { grid-column: 1 / -1; padding: 8px 0 0; }
.dvj-cal__empty-title { font-size: 14px; font-weight: 600; }
.dvj-cal__empty-text { font-size: 12px; color: var(--ink-3); }
/* jaartegel */
.dvj-cal__months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-tile); }
@media (max-width: 1023px) { .dvj-cal__months { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .dvj-cal__months { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dvj-cal__month { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: var(--r-lg); border: 1.5px solid transparent; background: var(--panel-2); color: inherit; text-align: left; cursor: pointer; transition: transform 150ms var(--ease); }
.dvj-cal__month[data-state="win"] { border-color: var(--pos); } .dvj-cal__month[data-state="loss"] { border-color: var(--neg); } .dvj-cal__month[data-state="flat"] { border-color: var(--line-2); }
.dvj-cal__month[data-state="none"] { opacity: .4; }
@media (hover: hover) { .dvj-cal__month:hover { transform: scale(1.02); } }
.dvj-cal__mname { font-size: 14px; font-weight: 500; }
.dvj-cal__mval { font-size: 18px; font-weight: 700; }
.dvj-cal__msub { font-size: 12px; color: var(--ink-3); }
.dvj-cal__mdots { display: grid; grid-template-columns: repeat(7, 3px); gap: 3px; margin-top: 6px; }
.dvj-cal__mdot { width: 3px; height: 3px; border-radius: 999px; background: var(--ink-4); }
.dvj-cal__mdot[data-sign="pos"] { background: var(--pos); } .dvj-cal__mdot[data-sign="neg"] { background: var(--neg); }

/* ---------- 5.14 Score-schaal ---------- */
.dvj-score { display: flex; flex-direction: column; gap: 10px; }
.dvj-score__row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dvj-score__value { font-size: var(--t-display); font-weight: 700; line-height: var(--t-display-lh); letter-spacing: var(--t-display-ls); }
.dvj-score__band { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.dvj-score__delta { font-size: 12px; font-weight: 600; }
.dvj-score__conf { margin-left: auto; }
.dvj-score__scale { position: relative; padding: 4px 0 16px; }
.dvj-score__track { height: 8px; border-radius: 999px; background: var(--score-gradient); }
.dvj-score__knob { position: absolute; top: 0; left: var(--x, 0%); width: 16px; height: 16px; margin-left: -8px; border-radius: 999px; background: var(--panel); border: 2px solid var(--ink); box-shadow: var(--shadow-hover); transition: left var(--d-score) ease-out 50ms; }
.dvj-score__ticks { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-3); }
.dvj-score__ticks span { position: relative; width: 0; display: flex; justify-content: center; }
.dvj-score__ticks span:first-child { justify-content: flex-start; } .dvj-score__ticks span:last-child { justify-content: flex-end; }
.dvj-score__hist { display: flex; align-items: center; gap: 10px; }
.dvj-score__hist-label { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.dvj-score__hist .dvj-spark { flex: 1 1 auto; height: 28px; }
.dvj-score.is-few .dvj-score__value { color: var(--ink-2); }
.dvj-score__why { margin-left: auto; }
.dvj-score__table { width: 100%; font-size: 12px; }
.dvj-score__table th { text-align: left; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.dvj-score__table td { padding: 8px; border-bottom: 1px solid var(--line); }
.dvj-score__table td.num, .dvj-score__table th.num { text-align: right; }

/* ---------- 5.16 Stat-cellen ---------- */
.dvj-stats { display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.dvj-stats__cell { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; background: var(--panel); min-width: 0; color: inherit; text-align: left; }
.dvj-stats__cell.is-link { cursor: pointer; transition: background-color 120ms; }
@media (hover: hover) { .dvj-stats__cell.is-link:hover { background: var(--panel-2); } }
.dvj-stats__label { display: flex; align-items: center; gap: 6px; font-size: var(--t-label); font-weight: 600; letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--ink-3); white-space: nowrap; overflow: hidden; }
.dvj-stats__label .ic { width: 14px; height: 14px; }
.dvj-stats__info { margin-left: auto; width: 14px; height: 14px; color: var(--ink-3); opacity: 0; transition: opacity 120ms; }
.dvj-stats__cell:hover .dvj-stats__info, .dvj-stats__cell:focus-within .dvj-stats__info { opacity: 1; }
.dvj-stats__value { font-size: var(--t-stat); font-weight: 600; line-height: 1.15; letter-spacing: -.015em; white-space: nowrap; }
.dvj-stats__value.is-grey { color: var(--ink-3); }
.dvj-stats__sub { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvj-stats__sub[data-sign="pos"] { color: var(--pos); } .dvj-stats__sub[data-sign="neg"] { color: var(--neg); }
@media (max-width: 1023px) { .dvj-stats { grid-template-columns: repeat(min(var(--cols, 6), 3), minmax(0, 1fr)); } }
@media (max-width: 767px) { .dvj-stats { grid-template-columns: repeat(min(var(--cols, 6), 2), minmax(0, 1fr)); } .dvj-stats__cell { padding: 12px 14px; } }
.dvj-stats--4 { --cols: 4; } .dvj-stats--3 { --cols: 3; } .dvj-stats--2 { --cols: 2; }
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.stat-row > * { background: var(--panel); padding: 12px 14px; }
@media (max-width: 767px) { .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 5.20 Groepspaneel, correlatie, wat-als ---------- */
.dvj-group { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(0, 3fr); gap: 20px; align-items: start; }
.dvj-group__bars { min-width: 0; }
.dvj-group__table { min-width: 0; }
.dvj-group__says { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); padding-top: 12px; border-top: 1px solid var(--line); }
.dvj-group__says .dvj-cdot { margin-left: 4px; }
.dvj-group__says.is-few { color: var(--ink-3); }
.dvj-group__threshold { font-size: 12px; color: var(--ink-3); }
@media (max-width: 767px) {
  .dvj-group { grid-template-columns: minmax(0, 1fr); }
  .dvj-group__bars { display: none; }
}
.dvj-group__row { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.dvj-group__rowbar { width: 4px; height: 32px; border-radius: 2px; background: var(--ink-4); }
.dvj-group__rowbar[data-sign="pos"] { background: var(--pos); } .dvj-group__rowbar[data-sign="neg"] { background: var(--neg); }
.dvj-corr { display: grid; gap: 2px; }
.dvj-corr__cell { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; font-size: 12px; border-radius: 4px; background: var(--panel-2); color: var(--ink); }
.dvj-corr__cell[data-k="1"] { background: var(--panel-3); } .dvj-corr__cell[data-k="2"] { background: var(--ink-4); } .dvj-corr__cell[data-k="3"] { background: var(--ink-3); color: var(--bg); }
.dvj-corr__cell.is-diag { background: transparent; color: var(--ink-4); }
.dvj-corr__label { display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--ink-3); width: 56px; height: 56px; text-align: center; padding: 4px; overflow: hidden; }
.dvj-corr__label--row { justify-content: flex-end; text-align: right; width: 96px; }
.dvj-corr__says { font-size: 14px; color: var(--ink-2); margin-top: 12px; }
.dvj-corr__pairs { display: flex; flex-direction: column; gap: 6px; }
.dvj-corr__pair { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.dvj-whatif { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.dvj-whatif__toggles { display: flex; flex-direction: column; gap: 4px; }
.dvj-whatif__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.dvj-whatif__col { background: var(--panel); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.dvj-whatif__col-label { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.dvj-whatif__cell { display: flex; flex-direction: column; }
.dvj-whatif__cell small { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.dvj-whatif__cell b { font-size: var(--t-stat); font-weight: 600; }
.dvj-whatif__diff { font-size: 12px; font-weight: 600; min-height: 16px; }
.dvj-whatif__line { grid-column: 1 / -1; font-size: 14px; color: var(--ink-2); }
.dvj-whatif__disclaimer { grid-column: 1 / -1; font-size: 12px; color: var(--ink-3); }
@media (max-width: 767px) { .dvj-whatif { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 5.21 Tabel ---------- */
.dvj-table { position: relative; min-width: 0; }
.dvj-table__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dvj-table table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.dvj-table th { position: sticky; top: 0; z-index: 1; background: var(--panel); text-align: left; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 0 10px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvj-table th.is-num, .dvj-table td.is-num { text-align: right; }
.dvj-table th.is-sortable { cursor: pointer; user-select: none; }
.dvj-table th .dvj-table__arrow { display: inline-block; width: 12px; height: 12px; vertical-align: -2px; margin-left: 2px; opacity: 0; transition: opacity 120ms; }
.dvj-table th.is-sorted .dvj-table__arrow { opacity: 1; }
.dvj-table th.is-sortable:hover .dvj-table__arrow { opacity: .6; }
.dvj-table td { height: 44px; padding: 0 10px; border-bottom: 1px solid rgba(255,255,255,.045); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.dvj-table td:first-child, .dvj-table th:first-child { padding-left: 4px; }
.dvj-table td:last-child, .dvj-table th:last-child { padding-right: 4px; }
.dvj-table--compact td { height: 40px; }
.dvj-table tbody tr { transition: background-color 120ms; }
.dvj-table tbody tr.is-row { cursor: pointer; }
@media (hover: hover) { .dvj-table tbody tr.is-row:hover { background: var(--panel-2); } }
.dvj-table tbody tr.is-selected { background: var(--panel-3); }
.dvj-table tbody tr.is-dim { opacity: .6; }
.dvj-table tr.is-total td { background: var(--panel-2); font-weight: 600; border-bottom: 0; }
.dvj-table tr.is-total td:first-child { border-radius: 0 0 0 var(--r-sm); } .dvj-table tr.is-total td:last-child { border-radius: 0 0 var(--r-sm) 0; }
.dvj-table td [data-sign="pos"] { color: var(--pos); } .dvj-table td [data-sign="neg"] { color: var(--neg); } .dvj-table td [data-sign="flat"] { color: var(--ink-2); }
.dvj-table__check { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--line-2); background: transparent; display: inline-flex; align-items: center; justify-content: center; color: var(--accent-ink); vertical-align: middle; }
.dvj-table__check.is-on { background: var(--accent); border-color: var(--accent); }
.dvj-table__check .ic { width: 12px; height: 12px; }
.dvj-table th.is-check, .dvj-table td.is-check { width: 32px; padding-right: 0; }
.dvj-table__bulk { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 12px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--shadow-pop); margin-top: 8px; font-size: 13px; }
.dvj-table__empty { padding: 24px 0; font-size: 13px; color: var(--ink-3); text-align: center; }
.dvj-table__more { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 0 0; font-size: 12px; color: var(--ink-3); }
.dvj-table__head { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 8px; }
.dvj-table__cell-main { font-weight: 600; }
.dvj-table__cell-sub { font-size: 12px; color: var(--ink-3); }
.dvj-table .dvj-table__acc { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.dvj-table .dvj-table__acc span { overflow: hidden; text-overflow: ellipsis; }
.dvj-table__mini { display: inline-flex; align-items: center; gap: 6px; }
.dvj-table__mini .dvj-bar { width: 48px; display: inline-block; vertical-align: middle; }
/* Kaarten (mobiel) */
.dvj-cards { display: flex; flex-direction: column; gap: 8px; }
.dvj-card { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 64px; padding: 10px 14px 10px 16px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; overflow: hidden; }
.dvj-card::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 2px 2px 0; background: var(--ink-4); }
.dvj-card[data-sign="pos"]::before { background: var(--pos); } .dvj-card[data-sign="neg"]::before { background: var(--neg); }
.dvj-card__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.dvj-card__main { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; font-weight: 600; }
.dvj-card__main small { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.dvj-card__value { font-size: 14px; font-weight: 600; white-space: nowrap; }
.dvj-card__sub { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvj-card__kv { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; font-size: 12px; }
.dvj-card__kv dt { color: var(--ink-3); } .dvj-card__kv dd { text-align: right; }
.dvj-cards__day { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 8px 0; background: var(--bg); font-size: 12px; color: var(--ink-2); }
.dvj-cards__day b { color: var(--ink); font-weight: 600; }
.dvj-cards__day .grow { flex: 1 1 auto; }

/* ---------- 5.22 Doelrij, doelen-trap, rekenvoorbeeld ---------- */
.dvj-goal { display: grid; grid-template-columns: 1fr 90px 1fr 80px 110px 120px 32px; align-items: center; gap: 12px; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--line); cursor: pointer; color: inherit; text-align: left; width: 100%; }
.dvj-goal:last-child { border-bottom: 0; }
.dvj-goal__title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvj-goal__period { font-size: 11px; color: var(--ink-3); font-weight: 500; }
.dvj-goal__target { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.dvj-goal__visual { min-width: 0; }
.dvj-goal__value { font-size: var(--t-stat); font-weight: 600; white-space: nowrap; text-align: right; }
.dvj-goal__status { justify-self: start; }
.dvj-goal__right { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dvj-goal__proj { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvj-goal__hist { display: inline-flex; gap: 2px; font-size: 11px; letter-spacing: .04em; }
.dvj-goal__hist i { font-style: normal; width: 10px; text-align: center; }
.dvj-goal__hist i[data-v="1"] { color: var(--ink); } .dvj-goal__hist i[data-v="0"] { color: var(--ink-4); } .dvj-goal__hist i[data-v="-"] { color: var(--ink-4); }
.dvj-goal__star { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--ink-4); }
.dvj-goal__star .ic { width: 16px; height: 16px; }
.dvj-goal__star.is-on { color: var(--ink); }
.dvj-goal__star.is-on .ic { fill: currentColor; }
.dvj-status { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--r-xs); font-size: 11px; font-weight: 600; white-space: nowrap; background: var(--panel-3); color: var(--ink); }
.dvj-status[data-status="op_koers"] { background: var(--panel-3); color: var(--ink); }
.dvj-status[data-status="let_op"] { background: transparent; border: 1px solid var(--line-2); color: var(--ink-2); }
.dvj-status[data-status="behaald"] { background: var(--pos-fill); color: var(--pos); }
.dvj-status[data-status="gemist"], .dvj-status[data-status="overschreden"] { background: var(--neg-fill); color: var(--neg); }
.dvj-status[data-status="te_vroeg"] { background: transparent; color: var(--ink-3); border: 1px solid var(--line); }
@media (max-width: 1023px) {
  .dvj-goal { grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; gap: 6px 12px; padding: 12px 0; }
  .dvj-goal__title { grid-column: 1; }
  .dvj-goal__value { grid-column: 2; grid-row: 1; }
  .dvj-goal__visual { grid-column: 1 / -1; }
  .dvj-goal__target { grid-column: 1; grid-row: 3; }
  .dvj-goal__status { grid-column: 2; grid-row: 3; justify-self: end; }
  .dvj-goal__right { grid-column: 1 / -1; grid-row: 4; flex-direction: row; justify-content: space-between; align-items: center; }
  .dvj-goal__star { grid-column: 2; grid-row: 2; justify-self: end; }
}
.dvj-trap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-tile); align-items: end; padding-top: 48px; position: relative; }
.dvj-trap__card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-panel); transform: translateY(calc(var(--lift, 0) * -1px)); }
.dvj-trap__card::after { content: ""; position: absolute; left: 100%; top: 50%; width: var(--gap-tile); height: 1px; background: var(--line-2); }
.dvj-trap__card:last-child::after { display: none; }
.dvj-trap__level { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.dvj-trap__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dvj-trap__title { font-size: 16px; font-weight: 600; }
.dvj-trap__line { font-size: 13px; color: var(--ink-2); }
.dvj-trap__btn { align-self: flex-start; }
.dvj-trap--compact { display: flex; flex-direction: column; gap: 0; padding-top: 0; }
.dvj-trap--compact .dvj-trap__card { transform: none; box-shadow: none; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; flex-direction: row; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; cursor: pointer; }
.dvj-trap--compact .dvj-trap__card:last-child { border-bottom: 0; }
.dvj-trap--compact .dvj-trap__card::after { display: none; }
.dvj-trap--compact .dvj-trap__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dvj-trap--compact .dvj-trap__title { font-size: 14px; }
.dvj-trap--compact .dvj-trap__line { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvj-trap--compact .dvj-trap__chev { color: var(--ink-3); width: 16px; height: 16px; }
@media (max-width: 767px) {
  .dvj-trap:not(.dvj-trap--compact) { grid-template-columns: minmax(0, 1fr); padding: 0 0 0 20px; }
  .dvj-trap:not(.dvj-trap--compact)::before { content: ""; position: absolute; left: 6px; top: 24px; bottom: 24px; width: 1px; background: var(--line-2); }
  .dvj-trap:not(.dvj-trap--compact) .dvj-trap__card { transform: none; }
  .dvj-trap:not(.dvj-trap--compact) .dvj-trap__card::after { left: -18px; top: 24px; width: 7px; height: 7px; border-radius: 999px; background: var(--ink); display: block; }
}
.dvj-pace { font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.dvj-pace b { color: var(--ink); font-weight: 600; }
.dvj-pace__note { color: var(--ink-3); }
.dvj-pace.is-muted { color: var(--ink-3); }
.dvj-pace.is-muted b { color: var(--ink-3); }

/* ---------- 5.23 Investeringsoverzicht, accountkaart, payout-tijdlijn ---------- */
.dvj-invest { display: flex; flex-direction: column; gap: 20px; }
.dvj-invest__total { font-size: var(--t-display); font-weight: 700; line-height: var(--t-display-lh); letter-spacing: var(--t-display-ls); }
.dvj-invest__total-sub { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.dvj-invest__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dvj-invest__col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dvj-invest__col-total { font-size: var(--t-kpi); font-weight: 600; line-height: 1.1; }
.dvj-invest__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; font-size: 13px; }
.dvj-invest__row .dvj-bar { grid-column: 1 / -1; }
.dvj-invest__row-name { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvj-invest__row-name small { color: var(--ink-3); }
.dvj-invest__row-amt { text-align: right; font-weight: 500; }
.dvj-invest__kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; font-size: 13px; }
.dvj-invest__kv dt { color: var(--ink-2); } .dvj-invest__kv dd { text-align: right; font-weight: 500; }
.dvj-invest__ring { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.dvj-invest__own { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.dvj-invest__own-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.dvj-invest__own-cell small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.dvj-invest__own-cell b { font-size: var(--t-stat); font-weight: 600; }
.dvj-invest__nw { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.dvj-invest__nw b { font-size: var(--t-stat); font-weight: 600; color: var(--gold); }
.dvj-invest__nw-link { margin-left: auto; }
.dvj-invest__splits { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dvj-invest__alloc { display: flex; flex-direction: column; gap: 8px; }
.dvj-invest__alloc-items { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.dvj-invest__alloc-items b { color: var(--ink); font-weight: 600; }
.dvj-invest__section-label { font-size: var(--t-label); font-weight: 600; letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 767px) { .dvj-invest__cols, .dvj-invest__splits { grid-template-columns: minmax(0, 1fr); } .dvj-invest__own-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.dvj-acc { position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 16px; border-radius: var(--r-lg); background: var(--panel-2); border: 1.5px solid var(--line); transition: transform 160ms var(--ease), border-color 160ms; cursor: pointer; color: inherit; text-align: left; }
.dvj-acc--panel { background: var(--panel); box-shadow: var(--shadow-panel); border-width: 1px; }
@media (hover: hover) { .dvj-acc:hover { transform: translateY(-1px); border-color: var(--line-2); } }
.dvj-acc.is-danger { border-color: var(--neg); }
.dvj-acc__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dvj-acc__name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvj-acc__ddtype { font-size: 10px; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; font-weight: 600; white-space: nowrap; }
.dvj-acc__more { margin-left: auto; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--ink-3); flex: 0 0 auto; }
.dvj-acc__more .ic { width: 16px; height: 16px; }
@media (hover: hover) { .dvj-acc__more:hover { background: var(--panel-3); color: var(--ink); } }
.dvj-acc__days { font-size: 12px; color: var(--ink-3); }
.dvj-acc__max-label { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.dvj-acc__max { font-size: var(--t-sub); font-weight: 600; line-height: 1.15; }
.dvj-acc__max[data-level="warn"] { color: var(--warn); } .dvj-acc__max[data-level="danger"] { color: var(--neg); }
.dvj-acc__max.is-unknown { color: var(--ink-3); font-weight: 500; }
.dvj-acc__bars { display: flex; flex-direction: column; gap: 4px; }
.dvj-acc__bar { display: flex; flex-direction: column; gap: 4px; }
.dvj-acc__bar-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ink-2); }
.dvj-acc__bar-head b { color: var(--ink); font-weight: 600; }
.dvj-acc__bar-head .dvj-acc__pct[data-level="warn"] { color: var(--warn); } .dvj-acc__bar-head .dvj-acc__pct[data-level="danger"] { color: var(--neg); }
.dvj-acc__rules { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--ink-3); }
.dvj-acc__rules .ic { width: 12px; height: 12px; vertical-align: -2px; margin-right: 4px; }
.dvj-acc__flag { display: flex; gap: 6px; align-items: flex-start; }
.dvj-acc__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--ink-3); padding-top: 8px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.dvj-acc__foot b { color: var(--ink-2); font-weight: 600; }
.dvj-acc__foot [data-sign="pos"] { color: var(--pos); } .dvj-acc__foot [data-sign="neg"] { color: var(--neg); }
.dvj-acc__sync { display: inline-flex; align-items: center; gap: 6px; }
.dvj-acc--compact { gap: 8px; padding: 12px 14px; }
.dvj-acc--compact .dvj-acc__max { font-size: var(--t-sub); }
.dvj-acc__warn { width: 14px; height: 14px; color: var(--neg); }

.dvj-timeline { position: relative; display: flex; justify-content: space-between; gap: 8px; padding: 10px 0 0; }
.dvj-timeline::before { content: ""; position: absolute; left: 10px; right: 10px; top: 16px; height: 1px; background: var(--line-2); }
.dvj-timeline__ev { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; flex: 1 1 0; text-align: center; }
.dvj-timeline__dot { width: 12px; height: 12px; border-radius: 999px; background: var(--ink); border: 2px solid var(--bg-2); box-shadow: 0 0 0 1px var(--line-2); }
.dvj-timeline__ev[data-kind="payout"] .dvj-timeline__dot { background: var(--pos); }
.dvj-timeline__ev[data-kind="next_payout"] .dvj-timeline__dot { background: transparent; border-color: var(--ink-3); box-shadow: none; border-width: 1.5px; }
.dvj-timeline__ev[data-kind="failed"] .dvj-timeline__dot { background: var(--neg); }
.dvj-timeline__label { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.dvj-timeline__amount { font-size: 12px; font-weight: 600; white-space: nowrap; }
.dvj-timeline__amount[data-sign="pos"] { color: var(--pos); }
.dvj-timeline__date { font-size: 10px; color: var(--ink-4); }
@media (max-width: 767px) {
  .dvj-timeline { flex-direction: column; gap: 14px; padding: 0 0 0 20px; }
  .dvj-timeline::before { left: 5px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .dvj-timeline__ev { flex-direction: row; align-items: center; text-align: left; gap: 10px; }
  .dvj-timeline__dot { position: absolute; left: -20px; }
}

/* ---------- 5.24 Account-switcher ---------- */
.dvj-picker__trigger { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 14px; font-weight: 500; max-width: 100%; transition: background-color 150ms, border-color 150ms; }
.dvj-picker__trigger span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvj-picker__trigger .dvj-picker__chev { width: 14px; height: 14px; color: var(--ink-3); }
@media (hover: hover) { .dvj-picker__trigger:hover { background: var(--panel-2); } }
.dvj-picker__trigger.is-open { background: var(--panel-2); border-color: var(--line-2); }
.dvj-picker__trigger.is-swap span { animation: fade-swap 120ms var(--ease); }
@media (max-width: 767px) { .dvj-picker__trigger { max-width: 160px; } }
.dvj-picker { width: 340px; max-width: 100%; max-height: min(70vh, 560px); display: flex; flex-direction: column; }
.dvj-picker__search { padding: 4px 4px 8px; }
.dvj-picker__list { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 0 4px; }
.dvj-picker__row { display: grid; grid-template-columns: 16px 20px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 4px 8px; border-radius: 8px; color: inherit; text-align: left; transition: background-color 120ms; }
@media (hover: hover) { .dvj-picker__row:hover { background: var(--panel-2); } }
.dvj-picker__row.is-selected { background: rgba(255,255,255,.08); font-weight: 500; }
.dvj-picker__row--all { min-height: 40px; }
.dvj-picker__name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvj-picker__sub { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvj-picker__right { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.dvj-picker__group { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 10px 8px 4px; display: flex; align-items: center; gap: 6px; }
.dvj-picker__group.is-toggle { cursor: pointer; }
.dvj-picker__group .ic { width: 12px; height: 12px; margin-left: auto; }
.dvj-picker__sep { height: 1px; background: var(--line); margin: 4px 0; }
.dvj-picker__foot { display: flex; align-items: center; gap: 4px; padding: 8px 4px 0; border-top: 1px solid var(--line); margin-top: 4px; }
.dvj-picker__foot .grow { flex: 1 1 auto; }
.dvj-check { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; color: var(--accent-ink); background: transparent; flex: 0 0 auto; }
.dvj-check .ic { width: 11px; height: 11px; stroke-width: 2.5; }
.dvj-check.is-on { background: var(--accent); border-color: var(--accent); }
.dvj-check.is-mixed { background: var(--accent); border-color: var(--accent); }
.dvj-check.is-mixed::after { content: ""; width: 8px; height: 2px; background: var(--accent-ink); border-radius: 1px; }

/* ---------- 5.27 Popover, tooltip, menu, filterpaneel ---------- */
.dvj-pop { position: fixed; z-index: var(--z-popover); min-width: 200px; max-width: calc(100vw - 16px); padding: 8px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-xl); box-shadow: var(--shadow-pop); animation: pop-in 180ms var(--ease) both; transform-origin: top left; }
.dvj-pop.is-closing { animation: pop-out 140ms var(--ease-in) both; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pop-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-4px) scale(.98); } }
.dvj-pop--plain { padding: 0; }
.dvj-tip { position: fixed; z-index: var(--z-toast); max-width: 256px; padding: 6px 8px; border-radius: 6px; background: var(--ink); color: var(--bg); font-size: 11px; font-weight: 500; line-height: 1.4; pointer-events: none; letter-spacing: 0; }
.dvj-tip::after { content: ""; position: absolute; left: var(--ax, 50%); top: 100%; width: 0; height: 0; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--ink); border-bottom: 0; }
.dvj-tip.is-below::after { top: auto; bottom: 100%; border-top: 0; border-bottom: 6px solid var(--ink); }
.dvj-tip .num { font-variant-numeric: tabular-nums; }
.dvj-menu { display: flex; flex-direction: column; gap: 2px; }
.dvj-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border-radius: 8px; font-size: 14px; color: var(--ink); text-align: left; }
.dvj-menu__item .ic { width: 16px; height: 16px; color: var(--ink-2); }
@media (hover: hover) { .dvj-menu__item:hover { background: var(--panel-2); } }
.dvj-menu__item:focus-visible { background: var(--panel-2); box-shadow: none; }
.dvj-menu__item.is-danger { color: var(--neg); }
.dvj-menu__item.is-danger .ic { color: var(--neg); }
.dvj-menu__sep { height: 1px; background: var(--line); margin: 4px 0; }
.dvj-menu__head { padding: 8px 10px 6px; font-size: 12px; color: var(--ink-3); }
.dvj-menu__head b { display: block; color: var(--ink); font-size: 14px; font-weight: 600; }
.dvj-filter { width: 360px; max-width: 100%; display: flex; flex-direction: column; gap: 14px; padding: 8px; }
.dvj-filter__section { display: flex; flex-direction: column; gap: 8px; }
.dvj-filter__foot { display: flex; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.dvj-filter__count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; }

/* ---------- 5.28 Drawer, sheet, dialog, lightbox ---------- */
.dvj-overlay { position: fixed; inset: 0; z-index: var(--z-drawer); background: rgba(0,0,0,.4); animation: fade-in 200ms var(--ease) both; }
.dvj-overlay--dialog { z-index: var(--z-dialog); background: rgba(0,0,0,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dvj-overlay--light { background: rgba(0,0,0,.4); }
.dvj-overlay.is-closing { animation: fade-out 180ms var(--ease-in) both; }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
.dvj-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-drawer); width: min(var(--dw, 600px), 100vw); display: flex; flex-direction: column; background: var(--bg-2); border-left: 1px solid var(--line); box-shadow: 0 0 0 1px var(--line), -24px 0 48px -24px rgba(0,0,0,.8); animation: drawer-in 240ms var(--ease) both; }
.dvj-drawer.is-closing { animation: drawer-out 180ms var(--ease-in) both; }
@keyframes drawer-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes drawer-out { from { opacity: 1; } to { opacity: 0; transform: translateX(24px); } }
.dvj-drawer__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 12px 0 8px; background: var(--bg-2); border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.dvj-drawer__title { font-size: 16px; font-weight: 600; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvj-drawer__actions { display: flex; align-items: center; gap: 4px; }
.dvj-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 20px; min-height: 0; -webkit-overflow-scrolling: touch; }
.dvj-drawer__foot { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: var(--bg-2); border-top: 1px solid var(--line); flex: 0 0 auto; font-size: 12px; color: var(--ink-3); }
.dvj-drawer__foot:empty { display: none; }
.dvj-drawer__foot-actions { display: flex; gap: 8px; margin-left: auto; }
@media (max-width: 1023px) { .dvj-drawer { --dw: 480px; } }
@media (max-width: 767px) {
  .dvj-drawer { width: 100vw; left: 0; border-left: 0; animation: drawer-up 280ms var(--ease) both; }
  .dvj-drawer.is-closing { animation: drawer-down 220ms var(--ease-in) both; }
  @keyframes drawer-up { from { transform: translateY(100%); } to { transform: none; } }
  @keyframes drawer-down { from { transform: none; } to { transform: translateY(100%); } }
  .dvj-drawer__head { padding-top: env(safe-area-inset-top); height: calc(56px + env(safe-area-inset-top)); }
  .dvj-drawer__body { padding: 16px; }
}
.dvj-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-drawer); max-height: 92vh; display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--line-2); border-bottom: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--shadow-pop); padding-bottom: env(safe-area-inset-bottom); animation: sheet-in 300ms var(--ease) both; touch-action: none; }
.dvj-sheet.is-closing { animation: sheet-out 220ms var(--ease-in) both; }
.dvj-sheet.is-dragging { animation: none; transition: none; }
.dvj-sheet.is-settled:not(.is-closing) { animation: none; }
.dvj-sheet.is-snap { transition: transform 200ms var(--ease); }
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-out { from { transform: none; } to { transform: translateY(100%); } }
.dvj-sheet__grip { width: 36px; height: 4px; border-radius: 999px; background: var(--ink-4); margin: 8px auto 4px; flex: 0 0 auto; }
.dvj-sheet__title { font-size: 14px; font-weight: 600; padding: 8px 16px 4px; }
.dvj-sheet__body { flex: 1 1 auto; overflow-y: auto; padding: 8px 12px 12px; min-height: 0; touch-action: pan-y; }
.dvj-sheet__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dvj-sheet__item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border-radius: var(--r-md); background: var(--panel-2); font-size: 12px; font-weight: 500; color: var(--ink-2); }
.dvj-sheet__item .ic { color: var(--ink); }
.dvj-sheet__row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 8px; border-radius: var(--r-md); color: inherit; text-align: left; width: 100%; }
.dvj-sheet__row.is-primary { background: var(--accent); color: var(--accent-ink); }
.dvj-sheet__row.is-primary .dvj-sheet__row-sub { color: rgba(10,10,10,.65); }
.dvj-sheet__row-text { display: flex; flex-direction: column; min-width: 0; }
.dvj-sheet__row-title { font-size: 14px; font-weight: 600; }
.dvj-sheet__row-sub { font-size: 12px; color: var(--ink-3); }
.dvj-dialog { position: fixed; left: 50%; top: 50%; z-index: var(--z-dialog); width: min(var(--dw, 440px), calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-xl); padding: 24px; box-shadow: var(--shadow-pop); transform: translate(-50%, -50%); animation: dialog-in 220ms var(--ease) both; }
.dvj-dialog.is-closing { animation: dialog-out 160ms var(--ease-in) both; }
@keyframes dialog-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 6px)) scale(.98); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes dialog-out { from { opacity: 1; transform: translate(-50%, -50%); } to { opacity: 0; transform: translate(-50%, calc(-50% + 6px)) scale(.98); } }
.dvj-dialog__title { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.dvj-dialog__text { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.dvj-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.dvj-lightbox { position: fixed; inset: 0; z-index: var(--z-dialog); background: #000; display: flex; align-items: center; justify-content: center; animation: fade-in 200ms var(--ease) both; }
.dvj-lightbox img { max-width: 100vw; max-height: 100vh; object-fit: contain; transition: transform 160ms var(--ease); cursor: zoom-in; }
.dvj-lightbox img.is-zoomed { cursor: zoom-out; }
.dvj-lightbox__btn { position: absolute; top: 12px; right: 12px; z-index: 1; }
.dvj-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--ink); }
.dvj-lightbox__nav--l { left: 12px; } .dvj-lightbox__nav--r { right: 12px; }
.dvj-lightbox__foot { position: absolute; bottom: 16px; left: 0; right: 0; display: flex; justify-content: center; gap: 12px; align-items: center; font-size: 12px; color: var(--ink-2); }

/* ---------- 5.29 Toast en banner ---------- */
.dvj-toasts { position: fixed; right: 16px; bottom: 16px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.dvj-toast { display: flex; align-items: center; gap: 10px; max-width: 360px; padding: 12px 16px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow-pop); font-size: 13px; pointer-events: auto; animation: toast-in 200ms var(--ease) both; transition: transform 160ms var(--ease); }
.dvj-toast.is-closing { animation: toast-out 160ms var(--ease-in) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { from { opacity: 1; } to { opacity: 0; transform: translateY(8px); } }
.dvj-toast__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ink); flex: 0 0 auto; }
.dvj-toast[data-kind="error"] .dvj-toast__dot { background: var(--neg); }
.dvj-toast__text { flex: 1 1 auto; min-width: 0; }
.dvj-toast__text a { color: var(--live); }
.dvj-toast__actions { display: flex; gap: 2px; margin-left: 4px; }
.dvj-toast__btn { font-weight: 600; color: var(--ink); padding: 4px 6px; border-radius: 6px; white-space: nowrap; }
@media (hover: hover) { .dvj-toast__btn:hover { background: var(--panel-2); } }
@media (max-width: 767px) { .dvj-toasts { left: 16px; right: 16px; bottom: calc(var(--bottomnav-h) + 12px + env(safe-area-inset-bottom)); align-items: center; } .dvj-toast { width: 100%; max-width: 100%; } }
.dvj-banner { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); font-size: 13px; }
.dvj-banner__icon { width: 16px; height: 16px; color: var(--ink-2); flex: 0 0 auto; }
.dvj-banner[data-kind="neg"] .dvj-banner__icon, .dvj-banner[data-kind="error"] .dvj-banner__icon { color: var(--neg); }
.dvj-banner__text { flex: 1 1 auto; min-width: 0; }
.dvj-banner__progress { display: flex; align-items: center; gap: 8px; }
.dvj-banner__progress .dvj-bar { width: 120px; }
.dvj-banner__progress small { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.dvj-banner__actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.dvj-banner__x { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--ink-3); }
.dvj-banner__x .ic { width: 14px; height: 14px; }
@media (hover: hover) { .dvj-banner__x:hover { color: var(--ink); background: var(--panel-2); } }
@media (max-width: 767px) { .dvj-banner { flex-wrap: wrap; } .dvj-banner__progress { width: 100%; order: 3; } .dvj-banner__progress .dvj-bar { flex: 1 1 auto; } }

/* ---------- 5.30 Lege staat en skeleton ---------- */
.dvj-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; max-width: 320px; margin: 0 auto; padding: 16px 0; text-align: center; min-height: var(--mh, 180px); }
.dvj-empty__art { width: 96px; height: 56px; color: var(--line-2); overflow: visible; }
.dvj-empty__art use, .dvj-empty__art * { stroke: currentColor; }
.dvj-empty__title { font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.dvj-empty__title .serif { font-size: 1.08em; }
.dvj-empty__text { font-size: 14px; color: var(--ink-2); max-width: 44ch; line-height: 1.5; }
.dvj-empty__threshold { width: 100%; max-width: 220px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.dvj-empty__threshold .dvj-bar { width: 100%; }
.dvj-empty__threshold small { font-size: 12px; color: var(--ink-3); }
.dvj-empty__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.dvj-empty--inline { flex-direction: row; text-align: left; max-width: none; min-height: 0; padding: 8px 0; justify-content: flex-start; }
.dvj-empty--inline .dvj-empty__art { width: 64px; height: 38px; flex: 0 0 auto; }
.dvj-empty--inline .dvj-empty__title { font-size: 15px; }
.dvj-empty--inline .dvj-empty__text { font-size: 13px; }
.dvj-empty--sm .dvj-empty__title { font-size: 16px; }
.dvj-error { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); min-height: 48px; }
.dvj-error .ic { width: 16px; height: 16px; color: var(--ink-3); }
.dvj-error__retry { font-weight: 600; color: var(--ink); padding: 4px 6px; border-radius: 6px; }
@media (hover: hover) { .dvj-error__retry:hover { background: var(--panel-2); } }
.dvj-skel { position: relative; display: block; background: var(--panel-2); border-radius: 6px; overflow: hidden; }
.dvj-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.04) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.dvj-skel--text { height: 11px; width: 80px; }
.dvj-skel--num { height: 24px; width: 96px; }
.dvj-skel--line { height: 14px; width: 100%; }
.dvj-skel--sm { height: 12px; width: 60%; }
.dvj-skel--circle { border-radius: 999px; }
.dvj-skel--block { width: 100%; }
.dvj-skel--nomotion::after { animation: none; }
.dvj-skel-group { display: flex; flex-direction: column; gap: 10px; }
.dvj-skel-row { display: flex; align-items: center; gap: 12px; height: 44px; border-bottom: 1px solid var(--line); }
.dvj-skel-kpi { min-height: 112px; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.dvj-skel-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--gap-cal); }
.dvj-skel-cal .dvj-skel { height: 62px; border-radius: 8px; }
.dvj-skel-cal .dvj-skel::after { animation: none; }
.is-fading-in { animation: fade-swap 160ms var(--ease) both; }

/* ---------- 5.31 Cooldown-ring en bias 3 van 5 ---------- */
.dvj-cooldown { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.dvj-cooldown__ring { position: relative; width: 120px; height: 120px; }
.dvj-cooldown__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dvj-cooldown__track { stroke: var(--panel-3); fill: none; }
.dvj-cooldown__fill { stroke: var(--ink-2); fill: none; stroke-linecap: butt; transition: stroke-dashoffset 1s linear; }
.dvj-cooldown__sec { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 700; letter-spacing: -.02em; }
.dvj-cooldown__sec.is-done { font-size: 20px; }
.dvj-cooldown__recap { width: 100%; }
.dvj-cooldown__actions { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
@media (max-width: 767px) { .dvj-cooldown__ring { width: 160px; height: 160px; } }
.dvj-bias { display: flex; flex-direction: column; gap: 6px; }
.dvj-bias__row { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 36px; }
.dvj-bias__tf { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.dvj-bias__result { margin-top: 6px; font-size: 14px; font-weight: 600; min-height: 20px; }
.dvj-bias__result.is-neg { color: var(--neg); }
.dvj-bias__result.is-muted { color: var(--ink-3); font-weight: 500; }

/* ---------- 5.32 Sessiechip ---------- */
.dvj-session { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px 0 6px; border-radius: 999px; font-size: 12px; color: var(--ink-2); background: transparent; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background-color 150ms; }
@media (hover: hover) { .dvj-session:hover { background: var(--panel-2); } }
.dvj-session__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ink-4); }
.dvj-session.is-open .dvj-session__dot { background: var(--pos); }
.dvj-session-pop { width: 320px; max-width: 100%; padding: 8px; display: flex; flex-direction: column; gap: 10px; }
.dvj-session-pop__bar { position: relative; height: 24px; border-radius: 6px; background: var(--panel-2); overflow: hidden; }
.dvj-session-pop__block { position: absolute; top: 3px; bottom: 3px; left: var(--l, 0%); width: var(--w, 10%); background: var(--panel-3); border-radius: 3px; border: 1px solid transparent; }
.dvj-session-pop__block.is-active { border-color: var(--ink); background: var(--ink-4); }
.dvj-session-pop__now { position: absolute; top: 0; bottom: 0; left: var(--l, 0%); width: 2px; background: var(--ink); }
.dvj-session-pop__hours { display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-4); padding: 0 2px; }
.dvj-session-pop__list { display: flex; flex-direction: column; gap: 2px; }
.dvj-session-pop__row { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 6px; border-radius: 6px; font-size: 12px; color: var(--ink-2); }
.dvj-session-pop__row.is-active { background: var(--panel-2); color: var(--ink); font-weight: 500; }
.dvj-session-pop__row .grow { flex: 1 1 auto; }

/* ---------- 5.33 Lesrij en keuzetegel ---------- */
.dvj-lrow { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; padding: 8px 12px 8px 8px; border-radius: var(--r-md); color: inherit; text-align: left; width: 100%; border: 1px solid transparent; transition: background-color 120ms, border-color 120ms; }
@media (hover: hover) { .dvj-lrow:hover { background: var(--panel-2); } }
.dvj-lrow.is-active { border-color: var(--line); background: var(--panel-2); }
.dvj-lrow.is-active::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 2px; background: var(--ink); border-radius: 0 2px 2px 0; }
.dvj-lrow__n { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.dvj-lrow__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dvj-lrow__title { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.dvj-lrow__core { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvj-lrow__meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); }
.dvj-lrow__crit { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.dvj-lrow__crit .dvj-bar { width: 80px; flex: 0 0 auto; }
.dvj-lrow__right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.dvj-lrow__new { width: 6px; height: 6px; border-radius: 999px; background: var(--ink); }
@media (max-width: 767px) { .dvj-lrow { grid-template-columns: 28px minmax(0, 1fr); } .dvj-lrow__right { grid-column: 2; align-items: flex-start; flex-direction: row; } }
.dvj-choice { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 104px; padding: 16px; background: var(--panel-2); border: 1.5px solid var(--line); border-radius: var(--r-lg); color: inherit; text-align: left; cursor: pointer; transition: border-color 150ms, transform 150ms var(--ease); width: 100%; }
@media (hover: hover) { .dvj-choice:hover { border-color: var(--line-2); transform: translateY(-1px); } }
.dvj-choice.is-selected { border-color: var(--accent); }
.dvj-choice__check { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); display: none; align-items: center; justify-content: center; }
.dvj-choice__check .ic { width: 11px; height: 11px; stroke-width: 2.5; }
.dvj-choice.is-selected .dvj-choice__check { display: inline-flex; }
.dvj-choice .ic.dvj-choice__icon { width: 20px; height: 20px; color: var(--ink); }
.dvj-choice__title { font-size: 14px; font-weight: 600; }
.dvj-choice__text { font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.dvj-choice__chip { margin-top: auto; align-self: flex-start; }
.dvj-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* ---------- 5.18 Maandrendement-tabel ---------- */
.dvj-mtable { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dvj-mtable table { border-collapse: separate; border-spacing: 2px; min-width: 100%; }
.dvj-mtable th { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 4px 6px; text-align: right; white-space: nowrap; }
.dvj-mtable th:first-child { text-align: left; position: sticky; left: 0; background: var(--panel); z-index: 1; }
.dvj-mtable td { font-size: 12px; padding: 6px 8px; text-align: right; border-radius: 4px; background: var(--panel-2); white-space: nowrap; min-width: 52px; cursor: pointer; transition: box-shadow 120ms; }
.dvj-mtable td:first-child { text-align: left; font-weight: 600; background: var(--panel); position: sticky; left: 0; z-index: 1; cursor: default; }
.dvj-mtable td.is-empty { color: var(--ink-4); cursor: default; }
.dvj-mtable td.is-year { background: var(--panel-3); font-weight: 600; }
.dvj-mtable td.is-current { box-shadow: inset 0 0 0 1px var(--ink); }
.dvj-mtable td[data-k="p1"] { background: rgba(18,51,35,.4); color: var(--pos); } .dvj-mtable td[data-k="p2"] { background: rgba(18,51,35,.6); color: var(--pos); } .dvj-mtable td[data-k="p3"] { background: rgba(18,51,35,.8); color: var(--pos); } .dvj-mtable td[data-k="p4"] { background: var(--pos-fill); color: var(--pos); }
.dvj-mtable td[data-k="n1"] { background: rgba(55,25,28,.4); color: var(--neg); } .dvj-mtable td[data-k="n2"] { background: rgba(55,25,28,.6); color: var(--neg); } .dvj-mtable td[data-k="n3"] { background: rgba(55,25,28,.8); color: var(--neg); } .dvj-mtable td[data-k="n4"] { background: var(--neg-fill); color: var(--neg); }
@media (hover: hover) { .dvj-mtable td:not(:first-child):not(.is-empty):hover { box-shadow: inset 0 0 0 1px var(--line-3); } }

/* ---------- Diversen ---------- */
.dvj-kv { display: flex; flex-direction: column; gap: 2px; }
.dvj-kv small { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.dvj-kv b { font-size: var(--t-stat); font-weight: 600; }
.dvj-avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: var(--panel-3); color: var(--ink); font-size: 12px; font-weight: 600; flex: 0 0 auto; }
.dvj-inline-info { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--ink-3); vertical-align: middle; cursor: help; }
.dvj-inline-info .ic { width: 14px; height: 14px; }
.dvj-note { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.dvj-note .ic { width: 16px; height: 16px; color: var(--ink-3); flex: 0 0 auto; margin-top: 2px; }
.dvj-note--warn { background: var(--warn-soft); border-radius: var(--r-sm); padding: 10px 12px; }
.dvj-quote { font-family: var(--font-serif); font-style: normal; font-size: 20px; color: var(--ink); text-align: center; line-height: 1.35; }
.dvj-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.dvj-strip b { color: var(--ink); font-weight: 600; }