/* vDEPOT - huisstijl naar het merkstatement. Donker en licht.
   Elke kleur is een variabele: een thema is één blok tokens, geen tweede stylesheet.
   De keuze staat op <html data-theme="...">; de CSP verbiedt inline stijlen.
   Publieke pagina's en het aanmeldkader zijn altijd donker (B9). */

/* ── Lettertypes, zelf gehost (B21) ──────────────────────────────────────── */

@font-face {
  font-family: 'Sora'; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url('fonts/sora-latin-wght-normal.woff2') format('woff2-variations'), url('fonts/sora-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora'; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url('fonts/sora-latin-ext-wght-normal.woff2') format('woff2-variations'), url('fonts/sora-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url('fonts/manrope-latin-wght-normal.woff2') format('woff2-variations'), url('fonts/manrope-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url('fonts/manrope-latin-ext-wght-normal.woff2') format('woff2-variations'), url('fonts/manrope-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens: donker (het merk) ───────────────────────────────────────────── */

:root {
  --cyan: #3fc5d4;
  --cyan-soft: #9debf3;
  --cyan-deep: #0097a7;
  --cyan-dim: rgba(63, 197, 212, 0.12);
  --cyan-border: rgba(63, 197, 212, 0.3);
  --gold: #e8c77a;
  --gold-dim: rgba(232, 199, 122, 0.12);
  --cb-blue: #4f8ff0;
  --cb-silver: #b9c2cf;
  --bg: #050b15;
  --bg-sidebar: #07101d;
  --surface: #0a1524;
  --surface-2: #0e1d31;
  --border: rgba(157, 235, 243, 0.1);
  --border-strong: rgba(157, 235, 243, 0.2);
  --text: #eaf6f8;
  --text-strong: #f3fbfc;
  --text-muted: #8299b0;
  --text-dim: #4e6580;
  --on-accent: #050b15;
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #fb7185;
  --info: #38bdf8;
  --hover: rgba(157, 235, 243, 0.05);
  --row-hover: rgba(157, 235, 243, 0.03);
  --neutral-bg: rgba(157, 235, 243, 0.06);
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  --radius: 10px;
  --radius-lg: 16px;
  --sidebar-w: 236px;
  --font-display: 'Sora', system-ui, sans-serif;
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;
}

/* Licht thema: dezelfde tokens, andere waarden. Cyaan en goud worden donkerder,
   anders zijn ze op wit niet te lezen. */
:root[data-theme='light'],
:root[data-theme='system'] {
  --cyan: #0a7f8c;
  --cyan-soft: #0a7f8c;
  --cyan-deep: #06606a;
  --cyan-dim: rgba(10, 127, 140, 0.1);
  --cyan-border: rgba(10, 127, 140, 0.3);
  --gold: #8a611c;
  --gold-dim: rgba(138, 97, 28, 0.1);
  --cb-blue: #1c5fc2;
  --cb-silver: #5b6573;
  --bg: #f3f7f9;
  --bg-sidebar: #ffffff;
  --surface: #ffffff;
  --surface-2: #eef3f6;
  --border: rgba(10, 21, 37, 0.1);
  --border-strong: rgba(10, 21, 37, 0.2);
  --text: #0a1525;
  --text-strong: #050b15;
  --text-muted: #4e6580;
  --text-dim: #8299b0;
  --on-accent: #ffffff;
  --success: #15803d;
  --warning: #92610a;
  --danger: #be123c;
  --info: #0369a1;
  --hover: rgba(10, 21, 37, 0.04);
  --row-hover: rgba(10, 21, 37, 0.025);
  --neutral-bg: rgba(10, 21, 37, 0.05);
  --shadow: 0 10px 30px -18px rgba(10, 21, 37, 0.35);
}

/* 'Systeem' volgt het toestel: staat dat op donker, dan wint het donkere thema weer. */
@media (prefers-color-scheme: dark) {
  :root[data-theme='system'] {
    --cyan: #3fc5d4;
    --cyan-soft: #9debf3;
    --cyan-deep: #0097a7;
    --cyan-dim: rgba(63, 197, 212, 0.12);
    --cyan-border: rgba(63, 197, 212, 0.3);
    --gold: #e8c77a;
    --gold-dim: rgba(232, 199, 122, 0.12);
    --cb-blue: #4f8ff0;
    --cb-silver: #b9c2cf;
    --bg: #050b15;
    --bg-sidebar: #07101d;
    --surface: #0a1524;
    --surface-2: #0e1d31;
    --border: rgba(157, 235, 243, 0.1);
    --border-strong: rgba(157, 235, 243, 0.2);
    --text: #eaf6f8;
    --text-strong: #f3fbfc;
    --text-muted: #8299b0;
    --text-dim: #4e6580;
    --on-accent: #050b15;
    --success: #34d399;
    --warning: #fbbf24;
    --danger: #fb7185;
    --info: #38bdf8;
    --hover: rgba(157, 235, 243, 0.05);
    --row-hover: rgba(157, 235, 243, 0.03);
    --neutral-bg: rgba(157, 235, 243, 0.06);
    --shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  }
}

/* ── Basis ───────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); font-size: 14px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, p, dl, dd, ol, ul, pre, fieldset { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); color: var(--text-strong); letter-spacing: -0.01em; }
h2 { font-size: 20px; font-weight: 700; }
h3 { font-size: 14px; font-weight: 700; }
fieldset { padding: 0; border: 0; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--text-muted); }
.small { font-size: 12px; }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.text-danger { color: var(--danger); }
.hint { font-size: 12px; color: var(--text-muted); }
.stack > * + * { margin-top: 14px; }
.pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.inline-form { display: inline; margin: 0; }
.list-plain { padding: 0; list-style: none; }
.list-plain li { padding: 7px 0; border-bottom: 1px solid var(--border); }
.list-plain li:last-child { border-bottom: 0; }

.wordmark-text { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; color: var(--text-strong); }
.wordmark-text .v { color: var(--cyan); }

/* ── Knoppen ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px;
  font: inherit; font-size: 13px; font-weight: 700; line-height: 1.3; white-space: nowrap;
  border: 1px solid transparent; border-radius: 100px; cursor: pointer; text-decoration: none;
}
.btn:hover { text-decoration: none; opacity: 0.92; }
.btn-primary { color: var(--on-accent); background: var(--cyan); }
.btn-outline { color: var(--text-muted); background: transparent; border-color: var(--border-strong); }
.btn-outline:hover { color: var(--text); background: var(--surface-2); opacity: 1; }
.btn-ghost { color: var(--text); background: transparent; border-color: var(--border-strong); }
.btn-danger { color: #fff; background: var(--danger); }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-lg { padding: 14px 28px; font-size: 15px; }
.btn-block { width: 100%; }
.link-button { padding: 0; font: inherit; font-size: 13px; color: var(--text-muted); background: none; border: 0; cursor: pointer; }
.link-button:hover { color: var(--text); text-decoration: underline; }

/* ── Meldingen en badges ─────────────────────────────────────────────────── */

.flash { padding: 11px 14px; font-size: 13px; font-weight: 600; border: 1px solid; border-radius: 10px; }
.flash + .flash { margin-top: 10px; }
.flash-success { color: var(--success); background: rgba(52, 211, 153, 0.1); border-color: rgba(52, 211, 153, 0.28); }
.flash-error { color: var(--danger); background: rgba(251, 113, 133, 0.1); border-color: rgba(251, 113, 133, 0.28); }
.flash-warning { color: var(--warning); background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.28); }
.flash-info { color: var(--cyan); background: var(--cyan-dim); border-color: var(--cyan-border); }

.badge { display: inline-flex; align-items: center; padding: 2px 9px; font-size: 11px; font-weight: 700; white-space: nowrap; border: 1px solid; border-radius: 100px; }
.badge-success, .badge-user-active, .badge-mail-sent, .badge-vat-valid { color: var(--success); background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.28); }
.badge-warning, .badge-user-unverified, .badge-mail-queued, .badge-vat-unchecked, .badge-vat-unavailable { color: var(--warning); background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.28); }
.badge-danger, .badge-user-blocked, .badge-mail-failed, .badge-vat-invalid { color: var(--danger); background: rgba(251, 113, 133, 0.1); border-color: rgba(251, 113, 133, 0.28); }
.badge-mail-sending { color: var(--info); background: rgba(56, 189, 248, 0.1); border-color: rgba(56, 189, 248, 0.28); }
.badge-neutral, .badge-user-closed, .badge-vat-none { color: var(--text-muted); background: var(--neutral-bg); border-color: var(--border); }

/* ── Formulieren ─────────────────────────────────────────────────────────── */

.field > label, .field-legend { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.field > * + .hint, .field > * + .field-error { margin-top: 6px; }
.field input[type='text'], .field input[type='search'], .field input[type='url'], .field input[type='email'], .field input[type='password'], .field input[type='number'],
.field input[type='date'], .field select, .field textarea {
  width: 100%; padding: 10px 13px; font: inherit; font-size: 14px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 10px;
}
.field textarea { resize: vertical; min-height: 72px; }
.field select option:disabled { color: var(--text-dim); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-dim); }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--danger); }
.field-error { font-size: 12px; font-weight: 600; color: var(--danger); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.input-code { font-family: var(--mono); font-size: 18px !important; letter-spacing: 0.2em; text-align: center; }
.checkbox-group { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 10px; }
.checkbox { display: inline-flex; align-items: flex-start; gap: 9px; font-size: 13px; cursor: pointer; }
.checkbox input { margin-top: 3px; accent-color: var(--cyan); }
.filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.filter-row .field { flex: 1 1 150px; }
.filter-actions, .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.kind-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kind-choice .field-legend { grid-column: 1 / -1; }
.kind-option { display: flex; flex-direction: column; gap: 2px; padding: 13px 14px 13px 40px; position: relative; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 12px; cursor: pointer; }
.kind-option input { position: absolute; left: 14px; top: 16px; accent-color: var(--cyan); }
.kind-option:has(input:checked) { border-color: var(--cyan); background: var(--cyan-dim); }
.kind-title { font-weight: 700; color: var(--text-strong); }
.kind-help { font-size: 12px; color: var(--text-muted); }
.company-fields > * + * { margin-top: 8px; }
.company-fields.is-hidden { display: none; }
.js .company-hint { display: none; }

/* ── Aanmeldkader ────────────────────────────────────────────────────────── */

.auth-body, .site-body {
  background:
    radial-gradient(900px 620px at 85% 10%, rgba(63, 197, 212, 0.16), transparent 58%),
    radial-gradient(760px 520px at 8% 90%, rgba(232, 199, 122, 0.07), transparent 60%),
    linear-gradient(165deg, #0a1930 0%, #050b15 62%);
  background-attachment: fixed;
}
.auth-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 28px 16px; }
.auth-card { width: 100%; max-width: 440px; padding: 34px 32px 24px; background: rgba(10, 21, 36, 0.86); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); }
.auth-card-wide { max-width: 620px; }
.auth-card > * + * { margin-top: 16px; }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 24px; text-decoration: none; }
.auth-brand:hover { text-decoration: none; }
.auth-wordmark { font-size: 30px; line-height: 1; }
.auth-tagline { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--gold); }
.auth-title { font-size: 21px; font-weight: 700; }
.auth-text { color: var(--text-muted); }
.auth-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; text-align: center; font-size: 13px; }
.auth-footer { display: flex; justify-content: center; align-items: center; gap: 14px; padding-top: 12px; font-size: 12px; }
.auth-footer-link { color: var(--text-muted); }

.steps { padding-left: 20px; }
.steps > li + li { margin-top: 22px; }
.steps > li > * + * { margin-top: 10px; }
.qr-box { display: inline-block; padding: 10px; line-height: 0; background: #fff; border-radius: 10px; }
.qr-box:empty { display: none; }
.qr-box img, .qr-box canvas { display: block; }
.secret-key { padding: 10px 12px; font-size: 15px; letter-spacing: 0.08em; word-break: break-all; background: var(--bg); border: 1px dashed var(--border-strong); border-radius: 10px; }
.recovery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; padding: 16px 16px 16px 36px; font-size: 15px; background: var(--bg); border: 1px dashed var(--border-strong); border-radius: 10px; }
.disclosure summary { font-size: 12px; color: var(--cyan); cursor: pointer; }
.disclosure[open] summary { margin-bottom: 8px; }

.lang-form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.lang-select { padding: 3px 6px; font: inherit; font-size: 12px; color: var(--text-muted); background: transparent; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.lang-select option { color: #000; }

/* ── Publieke pagina's ───────────────────────────────────────────────────── */

.site { max-width: 1040px; margin: 0 auto; }
.site-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px clamp(16px, 5vw, 56px); }
.site-brand { font-size: 22px; text-decoration: none; }
.site-brand:hover { text-decoration: none; }
.site-nav { display: flex; align-items: center; gap: 14px; }
.site-link { color: var(--text); font-weight: 600; }
.site-flashes { padding: 0 clamp(16px, 5vw, 56px); }

.hero { position: relative; padding: clamp(28px, 6vw, 70px) clamp(16px, 5vw, 56px) clamp(48px, 8vw, 96px); }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
.hero-text { animation: rise-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both; }
.hero-wordmark { font-size: clamp(46px, 9vw, 86px); line-height: 0.95; text-shadow: 0 0 40px rgba(63, 197, 212, 0.15); }
.hero-baseline { margin-top: clamp(16px, 3vw, 26px); max-width: 30ch; font-family: var(--font-display); font-size: clamp(17px, 2.5vw, 22px); line-height: 1.4; color: #c6d6e4; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.chip { padding: 7px 15px; font-size: 12px; font-weight: 700; color: var(--cyan-soft); background: var(--cyan-dim); border: 1px solid var(--cyan-border); border-radius: 100px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-note { margin-top: 14px; font-size: 13px; color: var(--text-muted); }

.sealwrap { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 380px; margin: 0 auto; animation: seal-reveal 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s both; }
.seal-glow { position: absolute; inset: 2%; border-radius: 50%; background: radial-gradient(circle, rgba(63, 197, 212, 0.38), rgba(63, 197, 212, 0.1) 44%, transparent 64%); filter: blur(4px); animation: breathe 6s ease-in-out infinite; }
.seal-glow2 { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(232, 199, 122, 0.18), transparent 62%); animation: breathe 6s ease-in-out infinite reverse; }
.seal-sweep { position: absolute; inset: 8%; z-index: 2; overflow: hidden; border-radius: 50%; pointer-events: none; }
.seal-sweep::before { content: ''; position: absolute; top: 50%; left: 50%; width: 150%; height: 150%; transform-origin: 0 0; background: conic-gradient(from 0deg, transparent 0deg, rgba(63, 197, 212, 0.22) 20deg, transparent 55deg); animation: spin 7s linear infinite; }
.seal-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rot-slow { transform-origin: center; transform-box: view-box; animation: spin 48s linear infinite; }
.rot-fast { transform-origin: center; transform-box: view-box; animation: spin-rev 30s linear infinite; }
.rot-mid { transform-origin: center; transform-box: view-box; animation: spin 22s linear infinite; }
.seal-center { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.seal-mark { font-family: var(--font-display); font-size: clamp(38px, 9vw, 62px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: #f3fbfc; text-shadow: 0 0 30px rgba(63, 197, 212, 0.4); }
.seal-mark .v { color: #3fc5d4; }
.seal-label { margin-top: 10px; font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.05em; color: #e8c77a; }
.seal-tick { margin-top: 6px; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #9debf3; opacity: 0.6; }

.band { padding: clamp(44px, 7vw, 76px) clamp(16px, 5vw, 56px); }
.band-alt { background: linear-gradient(180deg, rgba(10, 21, 38, 0.8), rgba(7, 17, 32, 0.8)); }
.band-inner > * + * { margin-top: 14px; }
.kicker { font-size: 13px; font-weight: 700; color: var(--cyan); }
.band-title { max-width: 22ch; font-size: clamp(25px, 4vw, 36px); line-height: 1.12; letter-spacing: -0.025em; }
.band-sub { max-width: 56ch; color: var(--text-muted); }
.band-center { margin-left: auto; margin-right: auto; text-align: center; }
.band-fine { max-width: 70ch; font-size: 12px; color: var(--text-dim); }

.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 30px !important; overflow: hidden; background: var(--border); border: 1px solid var(--border); border-radius: 20px; }
.pillar { padding: clamp(24px, 3.4vw, 34px); background: linear-gradient(160deg, #0c1b2e, #091320); }
.pillar h3 { margin-bottom: 8px; font-size: 18px; }
.pillar p { font-size: 14px; color: #a9c0d4; }

.chain { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 0; margin-top: 30px !important; list-style: none; }
.chain-node { flex: 1 1 130px; max-width: 200px; padding: 22px 16px; text-align: center; background: linear-gradient(160deg, #0c1b2e, #091320); border: 1px solid var(--border); border-radius: 14px; }
.chain-version { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--cyan); }
.chain-label { display: block; margin-top: 4px; font-size: 12px; color: var(--text-muted); }
.chain-seal { border-color: var(--cyan-border); box-shadow: 0 0 30px -8px rgba(63, 197, 212, 0.4); }
.chain-seal .chain-version { color: var(--gold); }

.layers { padding: 0; margin-top: 30px !important; overflow: hidden; list-style: none; border: 1px solid var(--border); border-radius: 20px; }
.layer { display: flex; align-items: center; gap: 18px; padding: 20px 26px; background: linear-gradient(160deg, #0c1b2e, #091320); border-bottom: 1px solid var(--border); }
.layer:last-child { border-bottom: 0; }
.layer-number { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 38px; height: 38px; font-weight: 800; color: var(--cyan-soft); background: var(--cyan-dim); border: 1px solid var(--cyan-border); border-radius: 11px; }
.layer-text { color: #c6d6e4; }
.layer-text strong { color: var(--text-strong); }

.close { padding: clamp(56px, 8vw, 96px) clamp(16px, 5vw, 56px); text-align: center; background: radial-gradient(800px 460px at 50% 0%, rgba(63, 197, 212, 0.14), transparent 60%); }
.close > * + * { margin-top: 26px; }
.close-big { max-width: 20ch; margin: 0 auto; font-family: var(--font-display); font-size: clamp(28px, 5vw, 44px); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; color: var(--text-strong); }

.site-foot { padding: 28px 16px 36px; text-align: center; font-size: 12px; color: var(--text-dim); border-top: 1px solid var(--border); }
.site-foot > * + * { margin-top: 6px; }
.site-foot-links { display: flex; justify-content: center; gap: 16px; }
.site-foot-links a { color: var(--text-muted); }

.legal { max-width: 760px; margin: 0 auto; padding: 24px clamp(16px, 5vw, 56px) 64px; }
.legal-title { font-size: clamp(26px, 4vw, 36px); }
.legal-meta { margin-top: 6px; color: var(--text-muted); }
.legal-body { margin-top: 26px; }
.legal-body p + p { margin-top: 14px; }

@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-rev { to { transform: rotate(-360deg); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes seal-reveal { 0% { opacity: 0; transform: scale(0.82) rotate(-12deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }

/* ── Het platform ────────────────────────────────────────────────────────── */

.shell { display: flex; min-height: 100vh; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; flex-shrink: 0; width: var(--sidebar-w); height: 100vh; overflow-y: auto; background: var(--bg-sidebar); border-right: 1px solid var(--border); }
.sidebar-brand { display: flex; flex-direction: column; gap: 2px; padding: 22px 20px 18px; text-decoration: none; border-bottom: 1px solid var(--border); }
.sidebar-brand:hover { text-decoration: none; }
.sidebar-wordmark { font-size: 24px; line-height: 1; }
.sidebar-tagline { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; color: var(--gold); }
.sidebar-nav { flex: 1; padding: 10px 0; }
.nav-section { padding: 16px 20px 4px; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.nav-item { display: block; width: 100%; padding: 9px 20px; font: inherit; font-size: 13px; font-weight: 600; text-align: left; color: var(--text-muted); background: none; border: 0; border-left: 2px solid transparent; cursor: pointer; }
.nav-item:hover { color: var(--text); background: var(--hover); text-decoration: none; }
.nav-item.is-active { color: var(--cyan); background: var(--cyan-dim); border-left-color: var(--cyan); }
.nav-form { margin: 0; }
.sidebar-footer { padding: 8px 0 12px; border-top: 1px solid var(--border); }
.sidebar-head { border-bottom: 1px solid var(--border); }
.sidebar-head .sidebar-brand { border-bottom: 0; }
.sidebar-menu { display: flex; flex: 1; flex-direction: column; overflow-y: auto; }

/* Menuknop voor smalle schermen: een label bij een verborgen vakje, zonder JavaScript. */
.menu-state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; }
.menu-toggle { display: none; align-items: center; gap: 8px; margin-right: 12px; padding: 8px 12px; font-size: 13px; font-weight: 700; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius); cursor: pointer; user-select: none; }
.menu-toggle:hover { border-color: var(--cyan-border); }
.menu-state:focus-visible + .sidebar-head .menu-toggle { outline: 2px solid var(--cyan); outline-offset: 2px; }
.menu-state:checked + .sidebar-head .menu-toggle { color: var(--cyan); border-color: var(--cyan-border); }
.menu-toggle-bars { display: inline-flex; flex-direction: column; gap: 3px; }
.menu-toggle-bars span { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 1px; }
.sidebar-version { padding: 8px 20px 0; font-size: 10px; color: var(--text-dim); }

.main { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 58px; padding: 0 28px; background: var(--bg-sidebar); border-bottom: 1px solid var(--border); }
.topbar-title { font-size: 16px; font-weight: 700; }
.topbar-right { display: flex; align-items: center; gap: 14px; font-size: 13px; }
.content { padding: 28px; }
.content > * + * { margin-top: 20px; }
.page-intro > * + * { margin-top: 4px; }

.card { overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
a.card { color: inherit; }
a.card:hover { text-decoration: none; border-color: var(--cyan-border); }
.card-accent { border-color: var(--cyan-border); box-shadow: 0 0 30px -14px rgba(63, 197, 212, 0.45); }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.card-title { font-size: 13px; font-weight: 700; letter-spacing: 0.01em; }
.card-body { padding: 20px; }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stat .card-body { padding: 16px 18px; }
.stat-value { font-family: var(--font-display); font-size: 28px; font-weight: 800; line-height: 1; color: var(--cyan); }
.stat-label { margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; }
.kv dt { color: var(--text-muted); }
.kv dd { min-width: 0; overflow-wrap: anywhere; }
.welcome > * + * { margin-top: 4px; }
.welcome-title { font-size: 22px; }
.action-form { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.danger-zone { padding-top: 6px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th { padding: 10px 14px; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-align: left; text-transform: uppercase; white-space: nowrap; color: var(--text-muted); background: var(--surface-2); border-bottom: 1px solid var(--border); }
tbody td { padding: 10px 14px; vertical-align: top; border-bottom: 1px solid var(--border); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--row-hover); }
pre.code { max-width: 520px; max-height: 280px; overflow: auto; padding: 10px; font-family: var(--mono); font-size: 11px; white-space: pre-wrap; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 14px; }
.preview { display: flex; flex-direction: column; gap: 4px; }
.preview-value { font-size: 18px; font-weight: 700; color: var(--cyan); overflow-wrap: anywhere; }
.thread > * + * { margin-top: 12px; }
.message { padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 10px; }
.message-meta { margin-bottom: 6px; font-size: 11px; color: var(--text-muted); }

/* ── Smalle schermen: alles blijft bruikbaar op een smartphone (B31) ─────── */

@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .sidebar { position: sticky; z-index: 20; width: 100%; height: auto; max-height: 100vh; border-right: 0; border-bottom: 1px solid var(--border); }
  .sidebar-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 0; }
  .sidebar-brand { padding: 12px 16px; border-bottom: 0; }
  .menu-toggle { display: inline-flex; }
  /* Ingeklapt tot het vakje aangevinkt is (de knop Menu). */
  .sidebar-menu { display: none; border-top: 1px solid var(--border); }
  .menu-state:checked ~ .sidebar-menu { display: flex; }
  .sidebar-footer { display: flex; flex-wrap: wrap; align-items: center; }
  .sidebar-footer .nav-item { width: auto; }
  .topbar { position: static; height: auto; min-height: 58px; flex-wrap: wrap; padding: 10px 16px; }
  .content { padding: 16px; }
}

@media (max-width: 720px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .sealwrap { order: -1; max-width: 260px; }
  .pillars { grid-template-columns: 1fr; }
  .field-row, .kind-choice { grid-template-columns: 1fr; }
  .auth-card { padding: 26px 20px 20px; }
  .site-bar { flex-wrap: wrap; }
  .layer { padding: 16px 18px; }
}

/* ── Wettelijke vermeldingen (B36) ───────────────────────────────────────── */

.imprint { max-width: 70ch; margin: 10px auto 0; font-size: 11px; line-height: 1.6; text-align: center; color: var(--text-dim); overflow-wrap: anywhere; }
.auth-card > .imprint { margin-top: 12px; }

/* ── Tabbladen (Mijn account, §23.1) ─────────────────────────────────────── */

.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); }
.tab { padding: 10px 16px; margin-bottom: -1px; font-size: 13px; font-weight: 700; color: var(--text-muted); border-bottom: 2px solid transparent; }
.tab:hover { color: var(--text); text-decoration: none; }
.tab.is-active { color: var(--cyan); border-bottom-color: var(--cyan); }
.role-choice { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.member-actions > * + * { margin-top: 10px; }

/* ── Vastleggen (§25.9): het podium ──────────────────────────────────────────
   Altijd in de kleuren van het merk, ook in het lichte thema: dit is het moment waarvoor
   de klant komt. Het podium zet daarom de donkere tokens opnieuw, alleen binnen zichzelf. */

.stage {
  --cyan: #3fc5d4; --cyan-soft: #9debf3; --cyan-deep: #0097a7; --cyan-dim: rgba(63, 197, 212, 0.12); --cyan-border: rgba(63, 197, 212, 0.3);
  --gold: #e8c77a; --gold-dim: rgba(232, 199, 122, 0.12); --surface: #0a1524; --surface-2: #0e1d31;
  --border: rgba(157, 235, 243, 0.12); --border-strong: rgba(157, 235, 243, 0.22);
  --text: #eaf6f8; --text-strong: #f3fbfc; --text-muted: #8fa6bd; --text-dim: #4e6580; --on-accent: #050b15;
  --success: #34d399; --warning: #fbbf24; --danger: #fb7185; --hover: rgba(157, 235, 243, 0.05); --neutral-bg: rgba(157, 235, 243, 0.06);
  position: relative; overflow: hidden; color: var(--text); background: #050b15; border: 1px solid var(--cyan-border); border-radius: 22px;
  box-shadow: 0 30px 80px -40px rgba(63, 197, 212, 0.55);
}
.stage-bg { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 22% 30%, rgba(63, 197, 212, 0.2), transparent 55%), radial-gradient(ellipse at 85% 90%, rgba(232, 199, 122, 0.1), transparent 50%),
              linear-gradient(160deg, #07121f, #050b15 60%); }
.stage-bg::after { content: ''; position: absolute; inset: 0; opacity: 0.35;
  background-image: linear-gradient(rgba(157, 235, 243, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(157, 235, 243, 0.05) 1px, transparent 1px);
  background-size: 34px 34px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); }
.stage-grid { position: relative; display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 40px; align-items: center; padding: 40px; }
.stage-side { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.stage-form { min-width: 0; }
.stage-kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.stage-title { font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--text-strong); }
.stage-text { color: var(--text-muted); }
.stage-assure { max-width: 300px; font-size: 12px; color: var(--text-muted); }
.stage .field input, .stage .field textarea { color: var(--text); background: rgba(5, 11, 21, 0.6); border-color: var(--border-strong); }
.stage .field label { color: var(--text-muted); }
.stage-parent { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--gold-dim); border: 1px solid rgba(232, 199, 122, 0.3); border-radius: 12px; }
.stage-public { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; font-size: 12px; color: var(--text-muted); background: var(--cyan-dim); border-left: 3px solid var(--cyan); border-radius: 10px; }
.stage-public strong { color: var(--text); }
.stage-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: 6px; }
.stage-credits { font-size: 13px; color: var(--text-muted); }
.stage-credits.is-empty { color: var(--warning); }
.stage-fresh { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--gold); animation: rise-in 0.8s ease 1.1s both; }
.btn-seal { position: relative; overflow: hidden; box-shadow: 0 0 0 0 rgba(63, 197, 212, 0.5); animation: seal-pulse 2.6s ease-in-out infinite; }
.btn-seal::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%); transform: translateX(-120%); animation: shine 3.6s ease-in-out infinite; }
.btn-seal:disabled { animation: none; opacity: 0.45; cursor: not-allowed; }
.btn-seal:disabled::after { display: none; }

/* Het zegel als voortgangsring */
.dropzone { display: block; width: 100%; max-width: 320px; cursor: pointer; border-radius: 50%; }
.dropzone:focus-visible, .dropzone.is-over { outline: none; }
.dropzone.is-over .ring { transform: scale(1.04); }
.dropzone.is-over .ring-glow { opacity: 1; }
.ring { position: relative; width: 100%; aspect-ratio: 1 / 1; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); animation: seal-reveal 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.ring-glow { position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(circle, rgba(63, 197, 212, 0.42), rgba(63, 197, 212, 0.08) 48%, transparent 66%); opacity: 0.7; transition: opacity 0.4s; animation: breathe 6s ease-in-out infinite; }
.ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring-progress { transition: stroke-dashoffset 0.25s linear; filter: drop-shadow(0 0 6px rgba(63, 197, 212, 0.7)); }
.ring-check { transition: stroke-dashoffset 0.7s cubic-bezier(0.6, 0, 0.2, 1) 0.2s; opacity: 0; }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22%; text-align: center; }
.ring-percent { font-family: var(--font-display); font-size: clamp(30px, 6vw, 46px); font-weight: 800; line-height: 1; color: var(--text-strong); text-shadow: 0 0 24px rgba(63, 197, 212, 0.5); }
.ring-percent:empty { display: none; }
.ring-label { margin-top: 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan-soft); }
.ring-mark { font-family: var(--font-display); font-size: clamp(34px, 7vw, 54px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--text-strong); text-shadow: 0 0 30px rgba(63, 197, 212, 0.45); }
.ring-mark .v { color: var(--cyan); }
.stage:not([data-state="idle"]) .ring-mark, .stage-result .ring-mark { display: none; }
.stage[data-state="hashed"] .ring-label, .stage[data-state="sealed"] .ring-label { margin-top: 44%; }
.drop-hint { display: flex; flex-direction: column; gap: 2px; }
.drop-hint strong { font-family: var(--font-display); font-size: 16px; color: var(--text-strong); }
.drop-hint span { font-size: 12px; color: var(--text-muted); }

/* Toestanden: idle -> hashing -> hashed -> sealing (vastleggen) of sealed (resultaat) */
.stage[data-state="hashing"] .ring-inner { animation-duration: 2.4s; }
.stage[data-state="hashing"] .ring-glow { opacity: 1; animation-duration: 1.6s; }
.stage[data-state="hashed"] .ring-progress, .stage[data-state="sealing"] .ring-progress, .stage[data-state="sealed"] .ring-progress { stroke-dashoffset: 0; }
.stage[data-state="hashed"] .ring-check, .stage[data-state="sealed"] .ring-check { opacity: 1; stroke-dashoffset: 0; }
.stage[data-state="hashed"] .ring-label, .stage[data-state="sealed"] .ring-label { color: var(--gold); }
.stage[data-state="sealing"] .ring-svg { animation: sealing-spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; }
.stage[data-state="sealing"] .ring-glow { opacity: 1; animation-duration: 0.9s; }
.stage-result.is-fresh .ring { animation: stamp 1s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.stage-result.is-fresh .stage-bg { animation: flash-bg 1.6s ease-out 0.35s both; }
.stage-result[data-state="waiting"] .ring-progress { stroke-dashoffset: 276; stroke: #fbbf24; }

/* De vingerafdruk */
.fingerprint { display: none; width: 100%; max-width: 330px; padding: 14px 16px; text-align: left; background: rgba(5, 11, 21, 0.7); border: 1px solid var(--cyan-border); border-radius: 14px; }
.stage[data-state="hashed"] .fingerprint, .stage[data-state="sealing"] .fingerprint { display: block; animation: rise-in 0.6s ease both; }
.fingerprint-label { margin-bottom: 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.fingerprint-hex { font-size: 12.5px; line-height: 1.55; letter-spacing: 0.04em; color: var(--cyan-soft); word-break: break-all; }
.fingerprint-hex span { display: inline-block; animation: char-in 0.5s ease both; }
.fingerprint-file { margin-top: 8px; font-size: 11px; color: var(--text-muted); }
.fingerprint-file:empty { display: none; }

/* De stappen bij het verzegelen */
.seal-steps { position: relative; display: none; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 40px 34px; margin: 0; list-style: none; }
.stage[data-state="sealing"] .seal-steps { display: grid; animation: rise-in 0.5s ease both; }
.seal-step { display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-size: 12px; font-weight: 700; color: var(--text-muted); background: rgba(14, 29, 49, 0.8); border: 1px solid var(--border); border-radius: 12px; }
.seal-step-dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--text-dim); }
.stage[data-state="sealing"] .seal-step[data-step="1"] { color: var(--text); border-color: var(--cyan-border); }
.stage[data-state="sealing"] .seal-step[data-step="1"] .seal-step-dot { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.stage[data-state="sealing"] .seal-step[data-step="2"] { color: var(--text); border-color: var(--cyan-border); animation: step-glow 1.4s ease-in-out infinite; }
.stage[data-state="sealing"] .seal-step[data-step="2"] .seal-step-dot { background: var(--cyan); animation: pulse-dot 1s ease-in-out infinite; }

/* Het resultaat: de vURL en de keten van het bewijs */
.vurl-card { padding: 16px 18px; background: rgba(5, 11, 21, 0.7); border: 1px solid var(--cyan-border); border-radius: 14px; }
.vurl-card > * + * { margin-top: 10px; }
.vurl-label { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.vurl-value { font-size: 12px; line-height: 1.5; color: var(--cyan-soft); overflow-wrap: anywhere; }
.vurl-note { font-size: 12px; color: var(--text-muted); }
.vurl-pending { padding-left: 10px; color: var(--warning); border-left: 2px solid var(--warning); }
.proof-chain { position: relative; padding: 18px 20px 4px; margin: 0; list-style: none; }
.proof-chain::before { content: ''; position: absolute; top: 30px; bottom: 30px; left: 29px; width: 2px; background: linear-gradient(var(--cyan), var(--border)); }
.proof-link { position: relative; display: flex; gap: 16px; padding-bottom: 18px; }
.proof-link > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.proof-dot { position: relative; z-index: 1; flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; background: var(--surface); border: 2px solid var(--border-strong); border-radius: 50%; }
.proof-link.is-done .proof-dot { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 0 4px var(--cyan-dim); }
.proof-link.is-done .proof-dot::after { content: ''; position: absolute; top: 3px; left: 6px; width: 5px; height: 9px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.proof-link.is-waiting .proof-dot { border-color: var(--warning); animation: pulse-ring 1.6s ease-out infinite; }
.proof-hash { overflow-wrap: anywhere; }
.text-ok { color: var(--success); }

/* Een bestand controleren */
.verify-drop { display: flex; align-items: center; gap: 14px; padding: 18px; cursor: pointer; border: 2px dashed var(--border-strong); border-radius: 14px; transition: border-color 0.2s, background 0.2s; }
.verify-drop:hover, .verify-drop.is-over { background: var(--cyan-dim); border-color: var(--cyan); }
.verify-icon { position: relative; flex-shrink: 0; width: 36px; height: 36px; border: 2px solid var(--cyan); border-radius: 50%; }
.verify-icon::after { content: ''; position: absolute; top: 7px; left: 7px; width: 12px; height: 12px; border: 2px solid var(--cyan); border-radius: 50%; }
.verify-result:empty { display: none; }
.verify-result { padding: 14px 16px; font-weight: 700; border-radius: 12px; animation: rise-in 0.4s ease both; }
.verify-result.is-match { color: var(--success); background: var(--cyan-dim); border: 1px solid var(--success); }
.verify-result.is-mismatch { color: var(--danger); background: var(--neutral-bg); border: 1px solid var(--danger); }
.verify-result.is-busy { color: var(--text-muted); background: var(--neutral-bg); }

/* Versies */
.versions { padding: 8px 20px; margin: 0; list-style: none; }
.version { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.version:last-child { border-bottom: 0; }
.version-number { flex-shrink: 0; width: 40px; height: 40px; font-family: var(--font-display); font-size: 13px; font-weight: 800; line-height: 40px; text-align: center; color: var(--cyan); background: var(--cyan-dim); border-radius: 50%; }
.version.is-current .version-number { color: var(--on-accent); background: var(--cyan); box-shadow: 0 0 16px -2px var(--cyan); }
.version-body { display: flex; flex-direction: column; min-width: 0; }

/* De lijst van vastleggingen */
.deposit-list { padding: 0; margin: 0; list-style: none; }
.deposit-row { display: flex; align-items: center; gap: 16px; padding: 14px 20px; color: inherit; border-bottom: 1px solid var(--border); transition: background 0.15s; }
.deposit-list li:last-child .deposit-row { border-bottom: 0; }
.deposit-row:hover { text-decoration: none; background: var(--row-hover); }
.deposit-main { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.deposit-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deposit-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.deposit-seal { position: relative; flex-shrink: 0; width: 34px; height: 34px; border: 2px solid var(--cyan); border-radius: 50%; }
.deposit-seal::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--cyan-dim); }
.deposit-seal-confirmed { border-color: var(--gold); box-shadow: 0 0 12px -3px var(--gold); }
.deposit-seal-confirmed::after { background: var(--gold); opacity: 0.8; }
.deposit-seal-uncertain { border-color: var(--warning); border-style: dashed; }
.dash-deposit .actions { flex-wrap: wrap; }

@media (max-width: 900px) {
  .stage-grid { grid-template-columns: 1fr; gap: 26px; padding: 26px 20px; }
  .dropzone { max-width: 240px; }
  .seal-steps { grid-template-columns: 1fr 1fr; padding: 0 20px 24px; }
  .deposit-meta { display: none; }
}

@keyframes seal-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(63, 197, 212, 0.45); } 50% { box-shadow: 0 0 0 10px rgba(63, 197, 212, 0); } }
@keyframes shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@keyframes sealing-spin { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(0.94); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes stamp { 0% { opacity: 0; transform: scale(1.6) rotate(-18deg); } 55% { opacity: 1; transform: scale(0.92) rotate(3deg); } 75% { transform: scale(1.04) rotate(-1deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes flash-bg { 0% { filter: brightness(1); } 20% { filter: brightness(2.2); } 100% { filter: brightness(1); } }
@keyframes char-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes step-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(63, 197, 212, 0); } 50% { box-shadow: 0 0 22px -4px rgba(63, 197, 212, 0.7); } }
@keyframes pulse-dot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.5); } 100% { box-shadow: 0 0 0 10px rgba(251, 191, 36, 0); } }

/* ── Geavanceerde controle (§26): de keten live narekenen ────────────────────
   Hetzelfde podium als bij het vastleggen. Een schakel kleurt pas als verify-core.js
   de waarde zelf berekend heeft: cyaan = berekend, goud = tijdstempel,
   blauwviolet = blockchain, grijs = nog niet of niet van toepassing. */

.vc [hidden], .vt [hidden] { display: none !important; }
.stage-result[data-state="failed"] .ring-progress { stroke-dashoffset: 0; stroke: var(--danger); filter: drop-shadow(0 0 6px rgba(251, 113, 133, 0.7)); }
.stage[data-state="failed"] .ring-label { color: var(--danger); }
.stage-result[data-state="waiting"] .ring-label { color: var(--warning); }
.vc .vurl-value { padding: 10px 12px; background: rgba(5, 11, 21, 0.6); border: 1px solid var(--border); border-radius: 10px; }
.vc-bounds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vc-bound { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: rgba(5, 11, 21, 0.7); border: 1px solid var(--border); border-radius: 12px; }
.vc-bound-label { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.vc-bound-chain .vc-bound-label { color: #8b9cf8; }
.vc-bound-seal .vc-bound-label { color: var(--gold); }
.vc-bound-value { font-size: 13px; color: var(--text-strong); }
.vc-count { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--cyan-soft); }
.vc-count:empty { display: none; }
.vc-controls .btn-outline, .vc-controls .btn-ghost { color: var(--text); border-color: var(--border-strong); }
.vc-noscript { position: relative; margin: 0 40px 20px; color: var(--warning); }

/* De keten: van onder (het bestand) naar boven (de tijdstempel) */
.vc-chain { position: relative; display: flex; flex-direction: column-reverse; padding: 6px 40px 20px; margin: 0; list-style: none; }
.vc-chain:empty { display: none; }
.vc-chain::before { content: ''; position: absolute; top: 26px; bottom: 34px; left: 57px; width: 2px; background: linear-gradient(var(--gold), var(--cyan) 70%, var(--border)); opacity: 0.55; }
.vc-link { position: relative; display: flex; gap: 18px; padding: 12px 0; animation: rise-in 0.45s ease both; }
.vc-link.is-static { animation: none; }
.vc-node { position: relative; z-index: 1; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  font-size: 15px; font-weight: 800; color: var(--text-dim); background: #07161f; border: 2px solid var(--border-strong); border-radius: 50%; transition: border-color 0.3s, box-shadow 0.3s, color 0.3s; }
.vc-link[data-kind="seal"] .vc-node { width: 44px; height: 44px; margin: 0 -4px; }
.vc-link[data-state="busy"] .vc-node::after { content: ''; position: absolute; inset: -7px; border: 2px solid transparent; border-top-color: var(--cyan); border-radius: 50%; animation: vc-spin 0.9s linear infinite; }
.vc-link[data-state="pass"] .vc-node { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 0 4px var(--cyan-dim), 0 0 22px -2px rgba(63, 197, 212, 0.8); animation: vc-pop 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
.vc-link[data-state="pass"] .vc-node::before { content: '\2713'; }
.vc-link[data-state="pass"][data-kind="seal"] .vc-node { color: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 5px var(--gold-dim), 0 0 30px -2px rgba(232, 199, 122, 0.9); }
.vc-link[data-state="pass"][data-kind="seal"] .vc-node::before { content: '\2726'; }
.vc-link[data-state="pass"][data-kind="chain"] .vc-node { color: #8b9cf8; border-color: #8b9cf8; box-shadow: 0 0 0 4px rgba(139, 156, 248, 0.14), 0 0 24px -2px rgba(139, 156, 248, 0.8); }
.vc-link[data-state="fail"] .vc-node { color: var(--danger); border-color: var(--danger); box-shadow: 0 0 26px -2px rgba(251, 113, 133, 0.9); animation: vc-shake 0.5s ease both; }
.vc-link[data-state="fail"] .vc-node::before { content: '\2715'; }
.vc-link[data-state="skip"] .vc-node { border-style: dashed; }
.vc-link[data-state="skip"] .vc-node::before { content: '\00b7'; }
.vc-link.is-static .vc-node { animation: none; }
.vc-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 2px; }
.vc-tag { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.vc-title { font-family: var(--font-display); font-size: 15px; color: var(--text-strong); }
.vc-link[data-state="busy"] .vc-title, .vc-link[data-state="skip"] .vc-title { color: var(--text-muted); }
.vc-hash { font-size: 12px; line-height: 1.5; color: var(--cyan-soft); overflow-wrap: anywhere; }
.vc-hash:empty, .vc-note:empty, .vc-sibs:empty { display: none; }
.vc-link[data-kind="seal"] .vc-hash { color: var(--gold); }
.vc-link[data-kind="chain"] .vc-hash { color: #8b9cf8; }
.vc-link[data-state="fail"] .vc-hash, .vc-link[data-state="fail"] .vc-note { color: var(--danger); }
.vc-link[data-state="skip"] .vc-hash { color: var(--text-dim); }
.vc-note { font-size: 12px; color: var(--text-muted); }
.vc-sibs { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0; }
.vc-sib { padding: 2px 8px; font-family: var(--mono); font-size: 10.5px; color: var(--cyan-soft); background: var(--cyan-dim); border: 1px solid var(--cyan-border); border-radius: 999px; animation: vc-sib-left 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.vc-sib.is-right { animation-name: vc-sib-right; }
.vc-link.is-static .vc-sib { animation: none; }
.vc-explorer { font-size: 12px; color: #8b9cf8; }

.vc-finale { position: relative; display: flex; flex-direction: column; gap: 4px; margin: 0 40px 24px; padding: 16px 18px; background: rgba(5, 11, 21, 0.8);
  border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 12px; animation: rise-in 0.5s ease both; }
.vc-finale.is-failed { border-left-color: var(--danger); }
.vc-finale.is-waiting { border-left-color: var(--warning); }
.vc-finale-title { font-family: var(--font-display); font-size: 20px; color: var(--text-strong); }
.vc-finale-sum { font-size: 13px; color: var(--cyan-soft); }
.vc-finale-note { font-size: 13px; color: var(--text-muted); }
.vc-drop { position: relative; display: flex; align-items: center; gap: 14px; margin: 0 40px 30px; padding: 14px 18px; cursor: pointer; color: var(--text-muted);
  border: 2px dashed var(--border-strong); border-radius: 14px; transition: border-color 0.2s, background 0.2s; }
.vc-drop:hover, .vc-drop.is-over { color: var(--text); background: var(--cyan-dim); border-color: var(--cyan); }
.vc-sheet td { vertical-align: top; }
.vc-cell { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-sheet tr.is-ok .vc-mark { font-weight: 800; color: var(--success); }
.vc-sheet tr.is-bad td { color: var(--danger); }
.vc-commands { padding: 14px 16px; font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--neutral-bg); border: 1px solid var(--border); border-radius: 12px; }

/* De tijdlijn (§26.8) */
.vt-head { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 36px 40px 10px; }
.vt-head .stack { max-width: 640px; }
.vt-track { position: relative; display: flex; align-items: flex-start; padding: 26px 40px 18px; margin: 0; overflow-x: auto; list-style: none; }
.vt-item { display: flex; flex: 0 0 104px; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.vt-conn { position: relative; flex: 1 1 24px; min-width: 24px; height: 3px; margin-top: 30px; overflow: hidden; background: var(--border); border-radius: 2px; }
.vt-conn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--cyan), var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform 0.8s cubic-bezier(0.6, 0, 0.2, 1); }
.vt-conn[data-state="pass"]::after { transform: scaleX(1); }
.vt-conn[data-state="fail"]::after { background: var(--danger); transform: scaleX(1); }
.vt-conn[data-state="waiting"] { background: repeating-linear-gradient(90deg, var(--warning) 0 6px, transparent 6px 12px); opacity: 0.7; }
.vt-seal { position: relative; display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; padding: 0; cursor: pointer; background: none; border: 0; border-radius: 50%; transition: transform 0.3s; }
.vt-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vt-ring-bg { fill: #07161f; stroke: var(--border-strong); stroke-width: 2.5; }
.vt-ring-arc { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 0.8s ease, stroke 0.3s; }
.vt-ring-check { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: stroke-dashoffset 0.5s ease 0.4s, opacity 0.2s 0.4s; }
.vt-num { position: relative; font-family: var(--font-display); font-size: 13px; font-weight: 800; color: var(--text-strong); }
.vt-item[data-state="sealed"] .vt-num, .vt-item[data-state="waiting"] .vt-num { display: none; }
.vt-date { font-size: 11px; color: var(--text-muted); }
.vt-subject { max-width: 104px; overflow: hidden; font-size: 12px; color: var(--cyan-soft); text-overflow: ellipsis; white-space: nowrap; }
.vt-item.is-active .vt-seal { transform: scale(1.14); }
.vt-item.is-active .vt-ring-bg { stroke: var(--cyan); }
.vt-item[data-state="running"] .vt-ring-arc { stroke-dashoffset: 70; }
.vt-item[data-state="running"] .vt-seal svg { animation: vc-spin 1.1s linear infinite; }
.vt-item[data-state="sealed"] .vt-ring-arc { stroke-dashoffset: 0; stroke: var(--gold); filter: drop-shadow(0 0 5px rgba(232, 199, 122, 0.8)); }
.vt-item[data-state="sealed"] .vt-ring-check { opacity: 1; stroke-dashoffset: 0; }
.vt-item[data-state="sealed"] .vt-seal { animation: stamp 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.vt-item[data-state="waiting"] .vt-ring-arc { stroke-dashoffset: 56; stroke: var(--warning); }
.vt-item[data-state="waiting"] .vt-ring-check { opacity: 0.5; stroke: var(--warning); stroke-dashoffset: 0; }
.vt-item[data-state="failed"] .vt-ring-arc { stroke-dashoffset: 0; stroke: var(--danger); }
.vt-item[data-state="uncertain"] .vt-ring-bg, .vt-item.is-uncertain .vt-ring-bg { stroke: var(--warning); stroke-dasharray: 4 4; }
.vt-summary { position: relative; margin: 0 40px; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--cyan-soft); }
.vt-summary:empty { display: none; }
.vt-detail { position: relative; padding: 14px 0 0; }
.vt-detail-title { padding: 0 40px; font-family: var(--font-display); font-size: 16px; color: var(--gold); }
.vt-files { position: relative; margin: -16px 40px 26px; padding: 0; font-size: 12px; list-style: none; }
.vt-files .is-match { color: var(--success); }
.vt-files .is-none { color: var(--warning); }
.vt-files:empty { display: none; }

@media (max-width: 900px) {
  .vc-chain { padding: 6px 20px 20px; }
  .vc-chain::before { left: 37px; }
  .vc-finale, .vc-drop, .vc-noscript { margin-right: 20px; margin-left: 20px; }
  .vc-bounds { grid-template-columns: 1fr; }
  .vt-head { padding: 26px 20px 6px; }
  .vt-summary, .vt-files { margin-right: 20px; margin-left: 20px; }
  .vt-detail-title { padding: 0 20px; }
}
@media (max-width: 640px) {
  .vt-track { flex-direction: column; align-items: stretch; padding: 20px; }
  .vt-item { flex: 0 0 auto; flex-direction: row; gap: 12px; text-align: left; }
  .vt-conn { flex: 0 0 22px !important; width: 3px; min-width: 3px; height: 22px; margin: 0 0 0 30px; }
  .vt-conn::after { transform: scaleY(0); transform-origin: top; }
  .vt-conn[data-state="pass"]::after, .vt-conn[data-state="fail"]::after { transform: scaleY(1); }
  .vt-subject { max-width: none; }
}

@keyframes vc-spin { to { transform: rotate(360deg); } }
@keyframes vc-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes vc-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@keyframes vc-sib-left { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: translateX(0); } }
@keyframes vc-sib-right { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } }

/* ── Weergave Intellectuele eigendom (§27) ───────────────────────────────────
   Dezelfde stijl, andere indeling: een portefeuille met depotnummers, en per depot een kop,
   tabbladen en de acties rechts. */

.stage .field select { color: var(--text); background: rgba(5, 11, 21, 0.6); border-color: var(--border-strong); }
.stage-meta { display: block; color: var(--cyan-soft); }
.meta-fields { gap: 14px; }
.view-choice { align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.view-choice:has(input:checked) { border-color: var(--cyan-border); background: var(--cyan-dim); }
.tab-count { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; font-size: 11px; line-height: 18px; text-align: center; color: var(--on-accent); background: var(--cyan); border-radius: 100px; }
.tab:not(.is-active) .tab-count { color: var(--text-muted); background: var(--neutral-bg); }

.badge-ip-sealed { color: var(--cyan); background: var(--cyan-dim); border-color: var(--cyan-border); }
.badge-ip-anchored { color: var(--info); background: rgba(56, 189, 248, 0.1); border-color: rgba(56, 189, 248, 0.28); }
.badge-ip-complete { color: var(--success); background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.28); }
.badge-ip-uncertain { color: var(--warning); background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.28); }

.ip-table th a { color: inherit; }
.ip-table td { vertical-align: top; }
.download-link { display: inline-flex; padding: 4px; border-radius: 6px; }
.download-link:hover { background: var(--hover); }
.download-icon { position: relative; display: block; width: 16px; height: 16px; border-bottom: 2px solid var(--cyan); }
.download-icon::before { content: ''; position: absolute; top: 0; left: 7px; width: 2px; height: 10px; background: var(--cyan); }
.download-icon::after { content: ''; position: absolute; top: 4px; left: 4px; width: 6px; height: 6px; border: solid var(--cyan); border-width: 0 2px 2px 0; transform: rotate(45deg); }

.ip-head { overflow: hidden; border-top: 3px solid var(--cyan); }
.ip-number { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.ip-number .mono { letter-spacing: 0.06em; }
.ip-title { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; line-height: 1.15; color: var(--text-strong); }
.ip-kv { padding-top: 12px; border-top: 1px dashed var(--border); }
.ip-tabs { padding: 0 16px; background: var(--neutral-bg); border-top: 1px solid var(--border); }
.ip-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.ip-aside { position: sticky; top: 16px; }
.action-list { display: flex; flex-direction: column; gap: 2px; padding: 0; margin: 0; list-style: none; }
.action-list li { padding: 6px 0; border-bottom: 1px solid var(--border); }
.action-list li:last-child { border-bottom: 0; }
.action-list a::before, .action-list .is-later > span:first-child::before { content: '\203A'; margin-right: 8px; font-weight: 800; color: var(--cyan); }
.action-list .is-later { color: var(--text-muted); }

.history { padding: 8px 20px 12px; margin: 0; list-style: none; }
.history-item { display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.history-item:last-child { border-bottom: 0; }
.history-sealed .history-text, .history-anchored .history-text, .history-stamped .history-text { color: var(--cyan); }

@media (max-width: 900px) {
  .ip-layout { grid-template-columns: 1fr; }
  .ip-aside { position: static; }
  .history-item { grid-template-columns: 1fr; gap: 2px; }
}
.ip-main .stage-grid { grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: 28px; padding: 28px; }
.ip-main .stage-form > .stage-title { display: none; }
@media (max-width: 1100px) { .ip-main .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .ip-main .stage-grid { grid-template-columns: 1fr; padding: 24px 20px; } }

/* Het bewijs in vier regels (§29.4): ok, bezig, let op, fout. Bezig is nooit rood. */
.proof-lines { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px 6px; margin: 0; list-style: none; }
.proof-line { display: grid; grid-template-columns: 14px 90px 1fr; gap: 10px; align-items: baseline; font-size: 13px; }
.proof-line strong { color: var(--text-strong); }
.proof-line-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-dim); transform: translateY(1px); }
.proof-line.is-ok .proof-line-dot { background: var(--success); box-shadow: 0 0 8px -1px var(--success); }
.proof-line.is-wait .proof-line-dot { background: transparent; border: 2px solid var(--text-dim); }
.proof-line.is-warn .proof-line-dot { background: var(--warning); }
.proof-line.is-warn span:last-child { color: var(--warning); }
.proof-line.is-bad .proof-line-dot { background: var(--danger); }
.proof-line.is-bad span:last-child { color: var(--danger); }
.vc-link[data-state="warn"] .vc-node { color: var(--warning); border-color: var(--warning); box-shadow: 0 0 22px -2px rgba(251, 191, 36, 0.8); }
.vc-link[data-state="warn"] .vc-node::before { content: "!"; }
.vc-link[data-state="warn"] .vc-note { color: var(--warning); }
@media (max-width: 640px) { .proof-line { grid-template-columns: 14px 1fr; } .proof-line span:last-child, .proof-line-badges .chain-badges { grid-column: 2; } }
/* Badges DigiByte, Litecoin en tijdstempel (§26.10): eigen iconen, gekleurd als het er is, grijs als het nog niet zo is. */
.chain-badges { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.proof-line-badges .chain-badges { grid-column: 3; }
.cb { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.cb a, .cb span { color: inherit; text-decoration: none; }
.cb a:hover { text-decoration: underline; }
.cb-icon { width: 14px; height: 14px; flex: none; }
.cb-dgb.is-on { color: var(--cb-blue); border-color: var(--cb-blue); }
.cb-ltc.is-on { color: var(--cb-silver); border-color: var(--cb-silver); }
.cb-tsa.is-gold { color: var(--gold); border-color: var(--gold); background: var(--gold-dim); }
.cb-tsa.is-silver { color: var(--cb-silver); border-color: var(--cb-silver); }
.cb-part { font-size: 11px; opacity: 0.85; }
.cb-part.is-none, .cb-part.is-pending { color: var(--text-dim); }
.chain-badges.is-compact .cb { padding: 2px 5px; border: 0; background: none; }
.chain-badges.is-compact .cb-icon { width: 13px; height: 13px; }
.vc-link[data-state="warn"] .vc-node { color: var(--warning); border-color: var(--warning); }
.vc-link[data-state="warn"] .vc-node::before { content: "!"; }
.vc-link[data-state="warn"] .vc-note { color: var(--warning); }

/* Welk bestand is dit? (§31) */
.lookup-results { display: flex; flex-direction: column; gap: 8px; padding: 0; margin: 0; list-style: none; font-size: 13px; }
.lookup-results:empty { display: none; }
.lookup-results > li { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.lookup-results > li.is-busy { color: var(--text-muted); }
.lookup-results > li.is-found { border-color: rgba(52, 211, 153, 0.4); }
.lookup-results > li.is-found::before { content: "\2713\00a0\00a0"; font-weight: 800; color: var(--success); }
.lookup-results > li.is-none { color: var(--text-muted); }
.lookup-results ul { margin: 6px 0 0 18px; padding: 0; }
.lookup-results ul li { margin: 2px 0; color: var(--text-muted); }

/* De vinkjes bij het rapport (B94): wat uit de administratie mee mag. */
.vc-report-include { display: flex; flex-wrap: wrap; gap: 6px 18px; flex-basis: 100%; }
.vt-summary[data-state="ok"] { color: var(--success); }
.vt-summary[data-state="bad"] { color: var(--danger); }

/* Hulp (§32.3) */
.topbar-help { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 8px; border: 1px solid var(--border-strong); border-radius: 50%; font-size: 12px; font-weight: 700; color: var(--cyan); text-decoration: none; vertical-align: middle; }
.topbar-help:hover { border-color: var(--cyan); }
.help-list { list-style: none; margin: 0; padding: 0; }
.help-list li { display: flex; flex-direction: column; gap: 2px; padding: 12px 20px; border-top: 1px solid var(--border); }
.help-list li:first-child { border-top: 0; }
.help-body { max-width: 760px; line-height: 1.65; }
.help-body h2 { font-size: 18px; margin: 22px 0 8px; }
.help-body h2:first-child { margin-top: 0; }
.help-body h3 { font-size: 15px; margin: 18px 0 6px; }
.help-body p, .help-body ul, .help-body ol { margin: 0 0 12px; }
.help-body ul, .help-body ol { padding-left: 22px; }
.help-body li { margin: 4px 0; }

/* Het projectzegel (§28.5) */
.seal-list { list-style: none; margin: 6px 0 0; padding: 0; }
.seal-list li { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--border); }

/* Certificaat en delen (§34) */
.cert-icon { position: relative; display: block; width: 13px; height: 16px; border: 2px solid var(--cyan); border-radius: 2px; }
.cert-icon::before { content: ''; position: absolute; top: 3px; left: 2px; width: 5px; height: 2px; background: var(--cyan); box-shadow: 0 4px 0 var(--cyan); }
.ip-table td .download-link + .download-link { margin-left: 10px; }
.ip-table td .download-link { display: inline-block; vertical-align: middle; }
.share { margin-top: 4px; }
.share > summary { list-style: none; display: inline-flex; cursor: pointer; }
.share > summary::-webkit-details-marker { display: none; }
.share-panel { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; margin-top: 10px; padding: 14px; border: 1px solid var(--border-strong); border-radius: 12px; }
.share-qr { flex: none; padding: 8px; background: #fff; border-radius: 8px; line-height: 0; }
.share-qr img, .share-qr canvas { width: 132px; height: 132px; }
.share-panel .stack { flex: 1; min-width: 200px; }

/* De status voor de publieke API (§35) */
.badge-record-valid { color: var(--success); background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.28); }
.badge-record-withdrawn { color: var(--danger); background: rgba(251, 113, 133, 0.1); border-color: rgba(251, 113, 133, 0.3); }
.badge-record-expired { color: var(--warning); background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.28); }

/* Wat legt u vast (§36) */
.kind-choice { border: 0; padding: 0; margin: 0; }
.kind-choice legend { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.kind-warning { color: var(--warning); }
.target-check { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.target-result.is-match { color: var(--success); }
.target-result.is-mismatch, .target-result.is-error { color: var(--danger); }
[data-deposit] [hidden] { display: none !important; }

/* De publieke pagina per domein en het overzicht (§35.2). De uitbater past dit aan met eigen CSS. */
.public-body { min-height: 100vh; margin: 0; background: var(--bg); color: var(--text); display: flex; flex-direction: column; }
.public-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--border); background: var(--bg-sidebar); }
.public-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text-strong); text-decoration: none; font-weight: 700; font-size: 17px; }
.public-logo { max-height: 40px; max-width: 160px; }
.public-langs { display: flex; gap: 6px; }
.public-lang { padding: 3px 8px; border-radius: 6px; font-size: 12px; color: var(--text-muted); text-decoration: none; }
.public-lang.is-active { color: var(--cyan); background: var(--cyan-dim); }
.public-main { flex: 1; width: 100%; max-width: 920px; margin: 0 auto; padding: 28px 20px; display: flex; flex-direction: column; gap: 18px; box-sizing: border-box; }
.public-head { display: flex; flex-direction: column; gap: 6px; }
.public-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.public-domain { margin: 0; font-size: 28px; overflow-wrap: anywhere; }
.public-intro { margin: 4px 0 0; max-width: 720px; }
.public-items { list-style: none; margin: 0; padding: 0; }
.public-item { display: flex; flex-direction: column; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); }
.public-item:first-child { border-top: 0; }
.public-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.public-history summary { cursor: pointer; font-size: 13px; color: var(--text-muted); }
.public-history ol { margin: 6px 0 0; padding-left: 20px; font-size: 13px; }
.public-links { font-size: 13px; }
.public-explain .card-title { margin: 14px 0 6px; font-size: 16px; }
.public-explain .card-title:first-child { margin-top: 0; }
.public-explain p { margin: 0 0 8px; max-width: 720px; }
.public-explain-points { margin: 0 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; max-width: 720px; }
.public-foot { padding: 18px 24px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 13px; text-align: center; }
.public-foot p { margin: 4px 0; }

/* De melding over de herkomst via het zegel (§35.9). */
.public-trust { display: flex; flex-direction: column; gap: 4px; }
.public-trust span { font-weight: 400; }

/* Waar staat het bestand (§37). */
.location-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.location-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; overflow-wrap: anywhere; }
.deposit-location .card-header { gap: 10px; flex-wrap: wrap; }

/* De code om het zegel op een website te plaatsen (§35.8). */
.seal-snippet { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.seal-snippet-code { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--neutral-bg); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Het logo van de uitbater (§35.10). */
.logo-preview { padding: 12px; border: 1px dashed var(--border); border-radius: 10px; background: #fff; display: inline-block; }
.logo-preview img { display: block; max-height: 80px; max-width: 320px; }

/* Prijzen (§38). */
.price-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.price-edit .input-small { width: 90px; }
.price-edit .input-tiny { width: 60px; }
.plain-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pack-card { padding: 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pay-log { max-width: 100%; max-height: 360px; }

/* Instellingen in tabbladen (§39). */
.settings-section > summary.card-header { cursor: pointer; list-style: none; }
.settings-section > summary.card-header::-webkit-details-marker { display: none; }
.settings-section > summary.card-header::after { content: "+"; margin-left: auto; color: var(--text-muted); }
.settings-section[open] > summary.card-header::after { content: "-"; }
.setting-switch .checkbox { gap: 8px; align-items: center; }
.setting-requires { color: var(--warning, #c98a00); }
.settings-advanced { border-top: 1px solid var(--border); padding-top: 10px; }
.settings-save { position: sticky; bottom: 0; padding: 10px 0; background: var(--bg); z-index: 2; }