/* ui.css: de componentbibliotheek van Beauty Specialist (PRD-Z hoofdstuk 8, 2 okt 2026).
 * Laadt NA thema.css en gebruikt alleen tokens daaruit; geen losse hexwaarden.
 * Elke component heeft rust, hover, focus, ingedrukt, uitgeschakeld en waar het past laden, leeg en fout.
 * Stijlpagina: /stijl (staging open, op live alleen met beheersessie). Klassen volgen de namen die beheer en
 * portaal al gebruiken (.btn, .field, .card, .stat, .badge, .tabs, .empty), zodat een scherm kan overstappen
 * door zijn eigen definitie weg te halen. Nieuwe schermen gebruiken alleen deze klassen. */

/* Basis */
.ui, .ui *, .ui *::before, .ui *::after { box-sizing: border-box; }
.ui { font-family: var(--font); color: var(--text); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.ui h1, .ui h2, .ui h3 { font-family: var(--font-kop); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
.ui h1 { font-size: 32px; } .ui h2 { font-size: 24px; } .ui h3 { font-size: 18px; }
.ui .muted { color: var(--muted); }
.ui .label { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ui .small { font-size: 13px; }
.ui a { color: var(--brand); text-decoration: none; } .ui a:hover { text-decoration: underline; }

/* Knoppen */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--radius-field); border: 1px solid transparent; font: 600 14px/1 var(--font); color: var(--text); background: var(--chip-bg); cursor: pointer; white-space: nowrap; transition: background var(--dur-fast) ease-out, color var(--dur-fast) ease-out, transform var(--dur-fast) ease-out, opacity var(--dur-fast) ease-out; }
a.btn { text-decoration: none; }
.btn:hover { background: var(--border); }
.btn:active { transform: scale(0.985); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-primair { background: var(--cta); color: #fff; }
.btn-primair:hover { background: var(--cta-hover); }
.btn-ghost { background: var(--chip-bg); color: var(--text); }
.btn-ghost:hover { background: var(--border); }
.btn-link { background: none; color: var(--brand); padding: 0 4px; min-height: 36px; }
.btn-link:hover { background: none; text-decoration: underline; }
.btn-link::after { content: '\203A'; font-size: 18px; line-height: 1; margin-left: -2px; }
.btn-gevaar { background: var(--red-bg); color: var(--red); }
.btn-gevaar:hover { background: var(--red); color: #fff; }
.btn-pil { border-radius: var(--radius-pill); padding: 0 22px; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 13px; border-radius: 10px; }
.btn-lg { min-height: 52px; padding: 0 26px; font-size: 16px; }
.btn.laden { color: transparent; pointer-events: none; position: relative; --laad-kleur: #fff; }
/* Laadstand van een knop is het kleine merklaadteken (merkasset, brand/PRIMITIVES.md Merkanimatie; backlog 2, 2 okt 2026): dezelfde boog
   die vol- en leegloopt terwijl hij doordraait, 22 px, lijn 1,5 px, met het beeldmerk 9x12 erin. Wit op de primaire knop, rood op de gevaarknop, tekstkleur op de rest. */
.btn.laden::after { content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%; --merk-boog: 0deg; background: conic-gradient(from 0deg, var(--laad-kleur) var(--merk-boog), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px)); animation: merkRingKlein 1.1s cubic-bezier(.45,0,.55,1) infinite; }
.btn.laden::before { content: ''; position: absolute; width: 9px; height: 12px; background: var(--laad-kleur); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 439 583'><path d='M0 583L156.902 582.463C312.17 581.932 313.946 581.886 327.414 578.061C345.194 573.012 359.886 566.985 372.255 559.662C385.746 551.676 411.191 526.166 418.677 513.123C444.486 468.153 445.729 416.598 421.983 376.039C411.894 358.807 387.397 334.596 363.906 318.643C353.754 311.749 329.23 296.775 309.408 285.367C264.671 259.623 244.661 245.727 230.641 230.673C218.337 217.463 212.163 206.442 208.063 190.387C202.305 167.832 208.209 136.218 222.32 114.041C225.411 109.184 233.809 99.7495 240.985 93.0728L254.031 80.9344L240.846 82.2411C207.312 85.5644 181.714 96.3132 156.715 117.572C150.603 122.771 137.801 141.296 133.729 150.839C127.548 165.324 124.219 186.372 125.456 203.156C128.021 237.968 140.549 263.358 168.288 289.96C185.965 306.911 200.059 316.891 240.846 341.336C303.663 378.984 324.958 395.541 339.862 418.313C351.697 436.394 354.248 444.796 354.176 465.445C354.126 479.445 353.309 485.117 350.232 492.816C342.444 512.306 325.441 529.41 305.892 537.416C296.295 541.347 295.428 541.381 190.304 541.884L84.384 542.391V40.627L296.223 41.6406L306.335 45.7427C325.638 53.5707 342.466 70.537 350.164 89.9314C353.379 98.0331 354.137 103.433 354.181 118.588C354.237 137.018 354.14 137.459 346.855 152.229C336.2 173.825 315.528 195.023 286.711 213.905C282.537 216.638 282.574 216.677 299.043 227.283C321.078 241.472 359.492 263.261 362.431 263.236C368.792 263.186 403.832 231.811 415.908 215.353C436.049 187.901 443.558 151.337 436.281 116.126C429.773 84.6285 411.107 53.5989 387.15 34.4606C374.12 24.0509 345.925 10.332 326.988 5.18628L312.045 1.12662L0 0V583Z'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 439 583'><path d='M0 583L156.902 582.463C312.17 581.932 313.946 581.886 327.414 578.061C345.194 573.012 359.886 566.985 372.255 559.662C385.746 551.676 411.191 526.166 418.677 513.123C444.486 468.153 445.729 416.598 421.983 376.039C411.894 358.807 387.397 334.596 363.906 318.643C353.754 311.749 329.23 296.775 309.408 285.367C264.671 259.623 244.661 245.727 230.641 230.673C218.337 217.463 212.163 206.442 208.063 190.387C202.305 167.832 208.209 136.218 222.32 114.041C225.411 109.184 233.809 99.7495 240.985 93.0728L254.031 80.9344L240.846 82.2411C207.312 85.5644 181.714 96.3132 156.715 117.572C150.603 122.771 137.801 141.296 133.729 150.839C127.548 165.324 124.219 186.372 125.456 203.156C128.021 237.968 140.549 263.358 168.288 289.96C185.965 306.911 200.059 316.891 240.846 341.336C303.663 378.984 324.958 395.541 339.862 418.313C351.697 436.394 354.248 444.796 354.176 465.445C354.126 479.445 353.309 485.117 350.232 492.816C342.444 512.306 325.441 529.41 305.892 537.416C296.295 541.347 295.428 541.381 190.304 541.884L84.384 542.391V40.627L296.223 41.6406L306.335 45.7427C325.638 53.5707 342.466 70.537 350.164 89.9314C353.379 98.0331 354.137 103.433 354.181 118.588C354.237 137.018 354.14 137.459 346.855 152.229C336.2 173.825 315.528 195.023 286.711 213.905C282.537 216.638 282.574 216.677 299.043 227.283C321.078 241.472 359.492 263.261 362.431 263.236C368.792 263.186 403.832 231.811 415.908 215.353C436.049 187.901 443.558 151.337 436.281 116.126C429.773 84.6285 411.107 53.5989 387.15 34.4606C374.12 24.0509 345.925 10.332 326.988 5.18628L312.045 1.12662L0 0V583Z'/></svg>") center / contain no-repeat; }
.btn.laden:not(.btn-primair) { --laad-kleur: var(--text); }
.btn.btn-gevaar.laden { --laad-kleur: var(--red); } /* code-review 2 okt 2026: wit op de lichtrode gevaarknop was onzichtbaar; hover geldt niet bij pointer-events none */
.icon-btn { width: 40px; height: 40px; padding: 0; border-radius: var(--radius-pill); background: var(--card); border: none; box-shadow: var(--shadow-card); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--dur-fast) ease-out; }
.icon-btn:hover { background: var(--row-hover); }
.icon-btn svg { width: 20px; height: 20px; }

/* Velden */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 14px; font-weight: 500; color: var(--text); }
.field .hint { font-size: 13px; color: var(--muted); }
.field input, .field textarea, .field select { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-field); font: 400 16px/1.4 var(--font); background: var(--card); color: var(--text); outline: none; transition: border-color var(--dur-fast) ease-out, box-shadow var(--dur-fast) ease-out; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:disabled, .field textarea:disabled, .field select:disabled { background: var(--bg); color: var(--muted); cursor: not-allowed; }
.field.fout input, .field.fout textarea, .field.fout select { border-color: var(--red); }
.field .fout-tekst { display: none; font-size: 13px; color: var(--red); }
.field.fout .fout-tekst { display: block; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23696470' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.field .mono { font-family: var(--mono); font-size: 14px; }

/* Segmentknop, schakelaar, vinkje, keuzerondje, schuif */
.tabs { display: inline-flex; max-width: 100%; gap: 2px; padding: 4px; border-radius: var(--radius-pill); background: var(--chip-bg); }
.tabs button { min-height: 36px; padding: 0 16px; border: none; border-radius: var(--radius-pill); background: transparent; color: var(--muted); font: 600 13px/1 var(--font); cursor: pointer; transition: background var(--dur-fast) ease-out, color var(--dur-fast) ease-out; }
.tabs button:hover { color: var(--text); }
.tabs button.active { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(5,3,8,0.08); }
.tabs button:disabled { opacity: 0.45; cursor: not-allowed; }
.switch { position: relative; display: inline-block; width: 46px; height: 28px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch .knop { position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--border-strong); cursor: pointer; transition: background var(--dur-fast) ease-out; }
.switch .knop::before { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(5,3,8,0.25); transition: transform var(--dur-fast) ease-out; }
.switch input:checked + .knop { background: var(--cta); }
.switch input:checked + .knop::before { transform: translateX(18px); }
.switch input:focus-visible + .knop { box-shadow: 0 0 0 3px var(--brand-soft); }
.switch input:disabled + .knop { opacity: 0.45; cursor: not-allowed; }
.vink, .rondje { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.vink input, .rondje input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--border-strong); background: var(--card); cursor: pointer; flex-shrink: 0; display: inline-grid; place-content: center; transition: background var(--dur-fast) ease-out, border-color var(--dur-fast) ease-out; }
.vink input { border-radius: 7px; } .rondje input { border-radius: 50%; }
.vink input::before { content: ''; width: 12px; height: 7px; border: 2.5px solid #fff; border-top: none; border-right: none; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform var(--dur-fast) ease-out; }
.rondje input::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform var(--dur-fast) ease-out; }
.vink input:checked, .rondje input:checked { background: var(--cta); border-color: var(--cta); }
.vink input:checked::before { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.rondje input:checked::before { transform: scale(1); }
.vink input:focus-visible, .rondje input:focus-visible { box-shadow: 0 0 0 3px var(--brand-soft); outline: none; }
.vink input:disabled, .rondje input:disabled { opacity: 0.45; cursor: not-allowed; }
.schuif { display: flex; flex-direction: column; gap: 8px; }
.schuif .kop { display: flex; justify-content: space-between; font-size: 14px; font-weight: 500; }
.schuif input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--border); outline: none; }
.schuif input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 1.5px solid var(--border-strong); box-shadow: 0 1px 3px rgba(5,3,8,0.2); cursor: pointer; }
.schuif input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--brand-soft); }
.schuif .uitleg { font-size: 13px; color: var(--muted); }

/* Chips */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid transparent; background: var(--card); color: var(--text); font: 500 13px/1 var(--font); cursor: pointer; box-shadow: var(--shadow-card); transition: background var(--dur-fast) ease-out, color var(--dur-fast) ease-out; }
.chip:hover { background: var(--row-hover); }
.chip.active { background: var(--text); color: #fff; }
.chip.snel { border-color: var(--border-strong); box-shadow: none; color: var(--brand); }
.chip.snel:hover { background: var(--row-hover); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Kaarten en tegels */
.card { background: var(--card); border: none; border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 22px; }
.card.hero { border-radius: var(--radius-hero); padding: 32px; }
.card.klik { cursor: pointer; transition: box-shadow var(--dur-fast) ease-out, transform var(--dur-fast) ease-out; }
.card.klik:hover { box-shadow: var(--shadow-pop); }
.card.klik:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.card.klik:active { transform: scale(0.995); }
.card.donker { background: var(--brand-dark); color: var(--border); }
.card.donker .muted { color: var(--sidebar-fg); }
.stat { background: var(--card); border: none; border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.stat .ikoon { width: 40px; height: 40px; border-radius: 12px; background: var(--row-hover); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; }
.stat .ikoon svg { width: 20px; height: 20px; }
.stat .naam { font-size: 13px; color: var(--muted); font-weight: 500; }
.stat .value { font-size: 32px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.stat .groei { font-size: 13px; font-weight: 500; color: var(--muted); }
.stat .groei.op { color: var(--green); } .stat .groei.af { color: var(--red); }
.stat.klik { cursor: pointer; } .stat.klik:hover { box-shadow: var(--shadow-pop); }

/* Lijst en tabel */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow-card); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--table-head); padding: 14px 18px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl th.sorteer { cursor: pointer; } .tbl th.sorteer::after { content: ' \2195'; opacity: 0.5; }
.tbl td { padding: 13px 18px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td { background: var(--row-hover); }
.tbl tr.klik { cursor: pointer; } .tbl tr.klik:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; } .tbl tr.klik:focus-visible td { background: var(--row-hover); } /* toetsenbord op leadrijen, review Leads 3 okt 13:00 */
.rij { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--dur-fast) ease-out; }
.rij:last-child { border-bottom: none; }
.rij:hover { background: var(--row-hover); }
.rij.active { background: var(--row-hover); box-shadow: inset 3px 0 0 var(--brand); }
.rij .tekst { flex: 1; min-width: 0; } .rij .tekst .kop { font-weight: 600; font-size: 14px; display: flex; gap: 8px; align-items: center; }
.rij .tekst .regel { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rij .tijd { font-size: 12px; color: var(--muted); flex-shrink: 0; }
.rij .ongelezen { width: 8px; height: 8px; border-radius: 50%; background: var(--cta); flex-shrink: 0; }
.lijst { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }

/* Badge en avatar */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--badge-bg); color: var(--chip-text); white-space: nowrap; }
.badge.ok { background: var(--green-bg); color: var(--green-text); }
.badge.let { background: var(--yellow-bg); color: var(--yellow-text); }
.badge.fout { background: var(--red-bg); color: var(--red-text); }
.badge.grijs { background: var(--border); color: var(--text); }
.badge .stip { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--row-hover); background: var(--chip-bg); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; color: var(--brand); font-size: 14px; flex-shrink: 0; }
.avatar.sm { width: 28px; height: 28px; font-size: 11px; } .avatar.lg { width: 64px; height: 64px; font-size: 20px; }
.avatar.donker { box-shadow: 0 0 0 2px var(--border); }

/* Laden, leeg, fout */
.skelet { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--skeleton) 25%, var(--border) 50%, var(--skeleton) 75%); background-size: 200% 100%; animation: ui-skelet 1.4s ease-in-out infinite; }
.skelet.kop { height: 22px; width: 40%; } .skelet.regel { width: 80%; } .skelet.kort { width: 55%; }
@keyframes ui-skelet { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.empty { text-align: center; padding: 48px 24px; background: var(--card); border: none; border-radius: var(--radius-card); box-shadow: var(--shadow-card); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty .ikoon { width: 48px; height: 48px; border-radius: 14px; background: var(--row-hover); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.empty .ikoon svg { width: 22px; height: 22px; }
.empty h3 { font-size: 17px; } .empty p { margin: 0; color: var(--muted); font-size: 14px; max-width: 36ch; }
.empty .btn { margin-top: 8px; }
.foutkaart { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius-card); background: var(--red-bg); color: var(--red-text); font-size: 14px; }
.foutkaart .tekst { flex: 1; } .foutkaart .btn { background: #fff; color: var(--red-text); }

/* Melding (toast) */
.toast-houder { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 90; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; min-width: 260px; max-width: 420px; padding: 12px 16px; border-radius: 14px; background: var(--text); color: #fff; font-size: 14px; box-shadow: var(--shadow-pop); animation: ui-toast-in var(--dur-panel) ease-out; }
.toast .stip { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.toast.fout .stip { background: var(--red); }
.toast .actie { margin-left: auto; color: #fff; background: rgba(255,255,255,0.14); border: none; border-radius: 8px; padding: 6px 10px; font: 600 13px var(--font); cursor: pointer; }
@keyframes ui-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .toast-houder { right: 16px; left: 16px; bottom: 16px; } .toast { min-width: 0; max-width: none; } }

/* Dialoog, blad en bevestiging */
.overlay[hidden] { display: none; }
.overlay { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 80; animation: ui-fade var(--dur-panel) ease-out; }
.dialoog { width: 100%; max-width: 480px; background: var(--card); border-radius: var(--radius-hero); box-shadow: var(--shadow-pop); padding: 28px; display: flex; flex-direction: column; gap: 14px; animation: ui-toast-in var(--dur-panel) ease-out; }
.dialoog .acties { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.dialoog.gevaar h3 { color: var(--red-text); }
@keyframes ui-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 600px) { .overlay { align-items: flex-end; padding: 0; } .dialoog { max-width: none; border-radius: var(--radius-hero) var(--radius-hero) 0 0; padding-bottom: calc(28px + env(safe-area-inset-bottom)); } }

/* Paginakop, zijbalk, onderbalk */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.page-head h1 { font-size: 28px; } .page-head .sub { color: var(--muted); font-size: 14px; margin-top: 4px; }
.page-head .acties { display: flex; gap: 10px; flex-wrap: wrap; }
.zijbalk { width: 240px; background: var(--sidebar); color: var(--sidebar-fg); padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; border-radius: var(--radius-card); }
.zijbalk.licht { background: var(--card); color: var(--muted); box-shadow: var(--shadow-card); }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: inherit; font-size: 14px; font-weight: 500; cursor: pointer; border: none; background: none; width: 100%; text-align: left; font-family: var(--font); transition: background var(--dur-fast) ease-out, color var(--dur-fast) ease-out; }
.nav-item svg { width: 20px; height: 20px; }
.nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-item.active { background: var(--sidebar-active); color: var(--text); }
.zijbalk.licht .nav-item:hover { background: var(--row-hover); color: var(--text); }
.zijbalk.licht .nav-item.active { background: var(--row-hover); color: var(--brand); }
.onderbalk { display: flex; justify-content: space-around; background: var(--card); box-shadow: var(--shadow-card); border-radius: var(--radius-card); padding: 8px 4px calc(8px + env(safe-area-inset-bottom)); }
.onderbalk button { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 56px; padding: 6px 4px; border: none; background: none; color: var(--muted); font: 500 11px var(--font); cursor: pointer; border-radius: 10px; }
.onderbalk button svg { width: 22px; height: 22px; }
.onderbalk button.active { color: var(--brand); }

/* Verschil en code */
.diff { font-family: var(--mono); font-size: 13px; line-height: 1.6; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
.diff div { padding: 2px 16px; white-space: pre-wrap; }
.diff .bij { background: var(--row-hover); color: var(--brand); } .diff .weg { background: var(--red-bg); color: var(--red-text); text-decoration: line-through; }
.code { position: relative; font-family: var(--mono); font-size: 13px; line-height: 1.55; background: var(--text); color: var(--border); border-radius: 14px; padding: 16px 56px 16px 18px; overflow-x: auto; white-space: pre; }
.code .kopieer { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.12); color: #fff; border: none; border-radius: 8px; padding: 6px 10px; font: 600 12px var(--font); cursor: pointer; }
.code .kopieer:hover { background: rgba(255,255,255,0.22); }

/* Hulpjes */
.rooster { display: grid; gap: 16px; } .rooster.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rooster.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rooster.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .rooster.k3, .rooster.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .rooster.k2, .rooster.k3, .rooster.k4 { grid-template-columns: 1fr; } }
.rij-acties { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
@media (prefers-reduced-motion: reduce) { .skelet, .toast, .overlay, .dialoog, .btn.laden::after { animation: none; } }

/* Merkteken als splash en laadteken (GOAL backlog 1, Seyed 2891 en 2923, 2 okt 2026). MERKASSET: vastgelegd door Seyed
   op 2 okt 2026 (Telegram 2936), beschreven in brand/PRIMITIVES.md en te zien op /stijl. Wijzig timing, kleur of vorm niet zonder zijn woord.
   Een cirkel draait om het beeldmerk en tekent zichzelf daarbij vol; intussen tekent het beeldmerk zijn omtrek en vult het
   zich. Als de cirkel rond is, vervaagt hij en blijft het merk staan; daarna vervaagt de splash. Alleen opacity, transform,
   stroke en een hoekvariabele (geen hermeting). Geen draai van het merk zelf. Minder beweging: alles staat stil en vervaagt.
   Gebruik: <div class="merk-splash" id="splash"><div class="merk">[svg]</div></div> en daarna classList.add('weg').
   Klein laadteken: <span class="merk-laden">[svg]</span>. */
@property --merk-boog { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.merk-splash { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: var(--bg); transition: opacity var(--dur-slow, .45s) cubic-bezier(.2,.8,.2,1), visibility 0s linear var(--dur-slow, .45s); }
.merk-splash.weg { opacity: 0; visibility: hidden; pointer-events: none; }
.merk-splash .merk { position: relative; width: 148px; height: 148px; display: grid; place-items: center; }
.merk-splash .merk::before { content: ''; position: absolute; inset: 0; border-radius: 50%; --merk-boog: 0deg; background: conic-gradient(from 0deg, var(--brand) var(--merk-boog), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px)); animation: merkRing 1.5s cubic-bezier(.3,.7,.3,1) both, merkRingWeg .5s ease-out 1.55s both; }
.merk-splash svg { width: 66px; height: 88px; display: block; overflow: visible; }
.merk-splash svg path { fill: var(--brand); fill-opacity: 0; stroke: var(--brand); stroke-width: 7; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; animation: merkTeken 1s cubic-bezier(.3,.7,.3,1) .15s both, merkVul .6s ease-out 1s both; }
@keyframes merkRing { 0% { --merk-boog: 0deg; transform: rotate(-90deg); opacity: .35; } 100% { --merk-boog: 360deg; transform: rotate(270deg); opacity: 1; } }
@keyframes merkRingWeg { to { opacity: 0; transform: rotate(270deg) scale(1.12); } }
@keyframes merkTeken { from { stroke-dashoffset: 1; opacity: 0; } 20% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes merkVul { to { fill-opacity: 1; stroke-width: 0; } }
.merk-laden { display: inline-block; position: relative; width: 22px; height: 22px; vertical-align: middle; }
.merk-laden::before { content: ''; position: absolute; inset: 0; border-radius: 50%; --merk-boog: 0deg; background: conic-gradient(from 0deg, currentColor var(--merk-boog), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px)); animation: merkRingKlein 1.1s cubic-bezier(.45,0,.55,1) infinite; }
.merk-laden svg { position: absolute; left: 50%; top: 50%; width: 9px; height: 12px; transform: translate(-50%, -50%); display: block; }
.merk-laden svg path { fill: currentColor; }
/* Zelfde taal als de splash: de boog tekent zich rond het merk en loopt weer leeg terwijl hij doordraait; geen 3D-draai (Seyed 2923, vastgelegd 2936). */
@keyframes merkRingKlein { 0% { --merk-boog: 0deg; transform: rotate(-90deg); } 50% { --merk-boog: 300deg; } 100% { --merk-boog: 0deg; transform: rotate(270deg); } }
@media (prefers-reduced-motion: reduce) {
  .merk-splash .merk::before, .merk-laden::before { animation: none; }
  .merk-splash .merk::before { display: none; }
  .merk-laden::before, .btn.laden::after { --merk-boog: 360deg; opacity: .35; }
  .merk-splash svg path { animation: none; fill-opacity: 1; stroke-width: 0; opacity: 1; }
}