/* ============================================================
   RAYAH WAUTERS — Oeuvre Archief
   Style: Apple precision × Polestar performance.
   White/abyss base · Apple-neutral grays · gold + cobalt accents
   · hard 1px borders · sharp corners · industrial offset shadow
   · mechanical easing. Tokens mirror tailwind.config.js.
   ============================================================ */

:root{
  /* Base */
  --pure:   #FFFFFF;
  --abyss:  #0A0A0A;
  /* Apple neutrals */
  --gray-50:  #F5F5F7;
  --gray-100: #E5E5EA;
  --gray-200: #D1D1D6;
  --gray-800: #1C1C1E;
  --gray-900: #0A0A0A;
  /* Accent */
  --gold:       #351D1D;
  --gold-hover: #4A2727;
  --cobalt:     #0055FF;

  /* ---- Themeable surfaces (light) ---- */
  --canvas:  #FFFFFF;   /* paginabodem */
  --surface: #F2F2F2;   /* zwevende widgets / kaarten / fiches */
  --surface-2:#EAEAEA;  /* genest binnen een widget */

  /* Semantic ink — sterker contrast (typografie meer naar zwart) */
  --ink:     #0A0A0A;
  --ink-70:  #2B2B2D;
  --ink-45:  #66666B;
  --ink-25:  #9C9CA2;
  --paper:   var(--canvas);
  --panel:   var(--surface);
  --card:    var(--surface);
  --line:    var(--gray-200);
  --line-soft: var(--gray-100);
  --hairline: rgba(0,0,0,.08);

  /* knoppen: in light = donker met witte tekst */
  --btn-bg:   var(--abyss);
  --btn-ink:  #FFFFFF;

  /* Material swatches (literal, used in finish dots) */
  --wood: var(--gold);

  /* Type */
  --display: -apple-system, 'SF Pro Display', 'Inter', 'Helvetica Neue', sans-serif;
  --mono:    'Chivo Mono', ui-monospace, monospace;

  /* Geometry & motion */
  --r:    2px;
  --maxw: 1280px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sh-tactile:    0 1px 2px rgba(0,0,0,.05);
  --sh-industrial: 4px 4px 0 0 var(--abyss);

  /* Zwevende-kaart laag (vervangt neumorfisme) — vlakke soft drop-shadow */
  --neu-bg:     var(--surface);
  --neu-rad:    16px;
  --neu-rad-s:  12px;
  --sh-neu:           0 1px 2px rgba(0,0,0,.05), 0 10px 26px -14px rgba(20,22,28,.22);
  --sh-neu-sm:        0 1px 2px rgba(0,0,0,.05), 0 3px 10px -6px rgba(20,22,28,.16);
  --sh-neu-lg:        0 2px 6px rgba(0,0,0,.06), 0 22px 48px -20px rgba(20,22,28,.28);
  --sh-neu-inset:     inset 0 0 0 1px var(--hairline);
  --sh-neu-inset-sm:  inset 0 0 0 1px var(--hairline);
}

/* ---- Dark theme ---- */
html[data-theme="dark"]{
  --canvas:  #111111;
  --surface: #1C1C1E;
  --surface-2:#262629;
  --ink:     #F5F5F7;
  --ink-70:  #DCDCE0;
  --ink-45:  #ABABB2;
  --ink-25:  #6E6E74;
  --line:    #3A3A3C;
  --line-soft: #2A2A2C;
  --hairline: rgba(255,255,255,.10);
  --gold:    #C9A24B;        /* leesbaar accent op donker */
  --gold-hover: #D9B25B;
  --neu-bg:  var(--surface);
  --btn-bg:  #F5F5F7;
  --btn-ink: #0A0A0A;
  --sh-neu:           0 1px 2px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.6);
  --sh-neu-sm:        0 1px 2px rgba(0,0,0,.4), 0 3px 10px -6px rgba(0,0,0,.5);
  --sh-neu-lg:        0 2px 6px rgba(0,0,0,.5), 0 22px 48px -20px rgba(0,0,0,.7);
  --sh-neu-inset:     inset 0 0 0 1px var(--hairline);
  --sh-neu-inset-sm:  inset 0 0 0 1px var(--hairline);
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: var(--display);
  background: var(--canvas);
  color: var(--ink);
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* geen punt/dot in de nul — schakel de "dotted zero" feature van de mono-fonts uit */
  font-feature-settings: "zero" 0;
  font-variant-numeric: lining-nums proportional-nums;
  transition: background .3s var(--ease), color .3s var(--ease);
}
img{ display:block; max-width:100%; }
button{ font-family: inherit; color: inherit; cursor: pointer; }
a{ color: inherit; text-decoration: none; }

/* ---- Type helpers ---- */
.mono{ font-family: var(--mono); letter-spacing: 0; }
.eyebrow{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-45);
  font-weight: 500;
}
.wordmark{
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ============================================================
   App shell
   ============================================================ */
.shell{ min-height:100vh; display:flex; flex-direction:column; }

.topbar{
  position: sticky; top:0; z-index: 50;
  display:flex; align-items:center; justify-content:space-between;
  gap: 24px;
  padding: 0 48px;
  height: 64px;
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  backdrop-filter: blur(16px) saturate(120%);
  border-bottom: 1px solid transparent;
}
.topbar .brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.topbar .brand img{ height: 17px; width:auto; }
html[data-theme="dark"] .topbar .brand img{ filter: invert(1) brightness(1.6); }
/* compacte monogram-badge: enkel zichtbaar op smalle schermen (zie media query).
   Inverteert mee in nachtmodus (lichte badge op donkere balk) via de regel hierboven. */
.brand-mono{ display:none; }
/* Beheer / instellingen-pagina */
.sys-beheer-head{ padding-top:40px; padding-bottom:6px; }
.sys-beheer-h1{ font-size:30px; font-weight:600; letter-spacing:-.02em; margin:0 0 8px; color:var(--ink); }
.sys-info-link{ color:var(--gold); cursor:pointer; text-decoration:underline; font-weight:600; white-space:nowrap; }
.sys-info-link:hover{ color:var(--gold-hover); }
.section-head.sys-set-head{ display:flex; align-items:baseline; gap:12px; cursor:pointer; }
.sys-set-chev{ margin-left:auto; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); }
.section-head.sys-set-head:hover .sys-set-chev{ color:var(--ink); }
.sys-sub{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); margin:0 0 8px; font-weight:600; }
.topbar .brand .div{ width:1px; height:20px; background:var(--line); }
.topbar .brand .sub{
  font-family: var(--mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color: var(--ink-45);
}

.nav{ display:flex; gap:8px; align-items:center; }
.theme-toggle{ width:38px; height:38px; border-radius:50%; border:none; background:transparent;
  color:var(--ink-45); display:grid; place-items:center; cursor:pointer; transition:color .25s var(--ease); flex:none; padding:0; }
.theme-toggle:hover{ color:var(--ink); }
body.neu .theme-toggle{ border:none; box-shadow:none; }
body.neu .theme-toggle:hover{ box-shadow:none; color:var(--ink); }
.nav button{
  font-family: var(--mono);
  font-size: 12px; letter-spacing:.06em;
  text-transform: uppercase;
  background: transparent; border: 1px solid transparent;
  padding: 8px 16px; border-radius: var(--r);
  color: var(--ink-45);
  transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.nav button:hover{ color: var(--ink); border-color: var(--line); }
.nav button.active{ color: var(--btn-ink); background: var(--btn-bg); border-color: var(--btn-bg); font-weight: 600; }
/* '+' nieuw-werk: bordeaux accent + bold zodat het opvalt tussen de andere knopjes */
.nav .nav-add{ color:var(--gold); font-weight:800; font-size:15px; }
.nav .nav-add:hover{ color:var(--gold-hover); border-color:transparent; }

/* ---- CRM · relaties ---- */
.rel-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px; }
.rel-head h1{ font-size:30px; font-weight:600; letter-spacing:-.02em; margin:0; }
.rel-head-right{ display:flex; align-items:center; gap:16px; }
.rel-add-btn{ padding:9px 16px; }
.rel-count{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); }
.rel-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.rel-card{ text-align:left; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px; display:flex; flex-direction:column; gap:8px; cursor:pointer; transition:all .2s var(--ease); }
.rel-card:hover{ border-color:var(--ink); transform:translate(-2px,-2px); box-shadow:var(--sh-industrial); }
body.neu .rel-card{ border:none; box-shadow:var(--sh-neu-sm); }
body.neu .rel-card:hover{ box-shadow:var(--sh-neu); transform:none; }
.rel-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.rel-name{ font-weight:600; font-size:15px; letter-spacing:-.01em; }
.rel-type{ font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); background:var(--surface-2); padding:3px 7px; border-radius:2px; white-space:nowrap; }
.rel-works{ font-size:12px; color:var(--ink-70); margin-top:2px; }
/* visuele hiërarchie per type — inkomstengericht (galerie, art consultant) prominent, kopers neutraal */
.rel-cardfoot{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.rel-income{ font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--gold); white-space:nowrap; }
.rel-card.tier-high{ background:var(--card); border-left:3px solid var(--gold); }
.rel-card.tier-high .rel-name{ font-size:16.5px; font-weight:700; }
.rel-card.tier-high .rel-type{ color:#fff; background:var(--gold); }
.rel-card.tier-mid{ border-left:3px solid var(--ink-25); }
.rel-card.tier-mid .rel-type{ color:var(--ink-70); background:var(--surface-2); }
.rel-card.tier-low{ opacity:.96; }
.rel-card.tier-low .rel-name{ font-weight:500; }
.rel-meta{ font-size:11px; color:var(--ink-45); }
body.neu .rel-card.tier-high{ box-shadow:var(--sh-neu); }
body.neu .rel-card.tier-high:hover{ box-shadow:var(--sh-neu-lg); }
/* type-filter chips */
.rel-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.rel-filters button{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-45); background:transparent; border:1px solid var(--line); border-radius:999px; padding:7px 14px; cursor:pointer; transition:all .2s var(--ease); display:inline-flex; align-items:center; gap:6px; }
.rel-filters button:hover{ color:var(--ink); border-color:var(--ink); }
.rel-filters button.active{ color:var(--btn-ink); background:var(--btn-bg); border-color:var(--btn-bg); font-weight:600; }
.rel-filters .rf-n{ font-size:9.5px; opacity:.6; }
body.neu .rel-filters button{ border:none; box-shadow:var(--sh-neu-inset-sm); }
body.neu .rel-filters button.active{ box-shadow:var(--sh-neu-sm); }
.rel-empty{ font-family:var(--mono); font-size:12.5px; color:var(--ink-45); line-height:1.6; padding:40px 4px; max-width:520px; }
/* relatie-detail */
.rd-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px; margin:16px 0 24px; }
body.neu .rd-card{ border:none; box-shadow:var(--sh-neu); }
.rd-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:18px; }
.rd-name-input{ font-size:21px; font-weight:600; letter-spacing:-.02em; border:none; background:transparent; color:var(--ink); width:100%; padding:0; }
.rd-name-input:focus{ outline:none; }
.rdf{ display:flex; flex-direction:column; gap:5px; }
.rdf .rd-lbl{ font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); }
.rdf-type{ min-width:160px; }
.rd-consultant{ margin-top:18px; padding-top:18px; border-top:1px solid var(--line-soft); }
.rd-consultant-note{ font-size:11.5px; color:var(--ink-45); line-height:1.5; margin:12px 0 0; max-width:560px; }
.rd-name{ font-size:21px; font-weight:600; letter-spacing:-.02em; }
.rd-sub{ font-size:11px; color:var(--ink-45); margin-top:3px; }
.rd-fields{ display:grid; grid-template-columns:1fr 1fr; gap:10px 28px; }
@media(max-width:680px){ .rd-fields{ grid-template-columns:1fr; } }
.rd-row{ display:grid; grid-template-columns:130px 1fr; gap:10px; align-items:baseline; padding:5px 0; border-bottom:1px solid var(--line-soft); }
.rd-lbl{ font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); }
.rd-v{ font-size:13.5px; letter-spacing:-.01em; }
.rd-works-h{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-45); margin-bottom:12px; }
.rd-works-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
.rd-work{ position:relative; display:flex; align-items:center; gap:12px; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:8px 10px; cursor:pointer; transition:all .2s var(--ease); }
.rd-work:hover{ border-color:var(--ink); }
body.neu .rd-work{ border:none; box-shadow:var(--sh-neu-sm); }
.rd-work-thumb{ width:40px; height:52px; flex:none; border-radius:3px; overflow:hidden; background:var(--gray-50); }
.rd-work-thumb image-slot{ width:100%; height:100%; display:block; pointer-events:none; }
.rd-work-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.rd-work-id{ font-size:12px; font-weight:600; }
.rd-work-verb{ font-size:11px; color:var(--ink-45); }
/* samenwerkingshistoriek (documenten met deze relatie) */
.rd-hist-sec{ margin-bottom:18px; }
.rd-hist{ display:flex; flex-direction:column; gap:6px; }
.rd-hd{ display:flex; align-items:center; gap:14px; text-align:left; width:100%; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:9px 12px; cursor:pointer; transition:all .2s var(--ease); }
.rd-hd:hover{ border-color:var(--ink); }
body.neu .rd-hd{ border:none; box-shadow:var(--sh-neu-sm); }
.rd-hd-kind{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); min-width:92px; }
.rd-hd-no{ font-size:12px; font-weight:600; min-width:96px; }
.rd-hd-meta{ font-size:11px; color:var(--ink-45); flex:1; }
.rd-hd-go{ color:var(--ink-25); font-size:13px; }
.rd-hd:hover .rd-hd-go{ color:var(--ink); }
.rd-work-peek{ margin-left:auto; width:24px; height:24px; flex:none; border:none; background:none; color:var(--cobalt); font-size:13px; cursor:pointer; border-radius:50%; }
.rd-work-peek:hover{ background:rgba(0,85,255,.08); }
/* zoekresultaten — secties */
.search-meta{ font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-45); margin:14px 0 0; }
.search-sec-h{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-45); margin:28px 0 14px; padding-top:18px; border-top:1px solid var(--line-soft); }
.card-relhit{ font-size:10px; letter-spacing:.02em; color:var(--gold); margin-top:2px; }

.main{ flex:1; }
.page{ max-width: var(--maxw); margin: 0 auto; padding: 0 48px; }

/* ============================================================
   SYSTEEM view
   ============================================================ */
.sys-hero{ padding-top: 40px; padding-bottom: 32px; }
.sys-hero .kicker{ margin-bottom: 32px; }
.sys-hero h1{
  font-weight: 600;
  font-size: clamp(40px, 6vw, 88px);
  line-height: .96;
  letter-spacing: -.02em;
  margin: 0 0 32px;
  max-width: 16ch;
}
.sys-hero h1 em{ font-style: normal; color: var(--ink-25); }
.sys-hero .lede{
  max-width: 56ch; font-size: 18px; line-height: 1.55; color: var(--ink-70); letter-spacing: -.01em;
}
.sys-stats{ display:flex; gap: 0; margin-top: 64px; flex-wrap: wrap; border:1px solid var(--abyss); border-radius:var(--r); overflow:hidden; box-shadow: var(--sh-industrial); max-width: 760px; }
.sys-stats .stat{ flex:1; min-width:130px; padding: 24px; border-right:1px solid var(--line); }
.sys-stats .stat:last-child{ border-right:none; }
.sys-stats .stat .n{ font-family: var(--mono); font-size: 40px; font-weight: 500; letter-spacing:-.02em; }
.sys-stats .stat .l{ font-family: var(--mono); font-size: 11px; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-45); margin-top: 8px; }

/* Anatomy of a number */
.anatomy-wrap{ padding-top: 40px; padding-bottom: 40px; }
.section-head{ display:flex; align-items:baseline; gap: 16px; margin-bottom: 24px; }
.section-head .idx{ font-family: var(--mono); font-size: 12px; color: var(--gold); letter-spacing:.06em; }
.section-head h2{ font-weight:600; font-size: 28px; letter-spacing:-.02em; margin:0; }

.anatomy{
  background: var(--card);
  border: 1px solid var(--abyss);
  border-radius: var(--r);
  padding: 64px 56px 48px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-industrial);
}
.anatomy .big{
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(40px, 8vw, 104px);
  letter-spacing: -.01em;
  display: flex; align-items: baseline; justify-content:center;
  gap: .1em; flex-wrap: wrap;
  line-height: 1;
}
.anatomy .seg{ position: relative; cursor: default; }
.anatomy .dot{ color: var(--ink-25); }
.anatomy .seg .tick{
  position:absolute; left:50%; top: calc(100% + 14px);
  width:1px; height: 26px; background: var(--line); transform: translateX(-50%);
}
.anatomy .legend{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; margin-top: 72px; border:1px solid var(--line);
  border-radius: var(--r); overflow:hidden;
}
.anatomy .legend .cell{ background: var(--card); padding: 24px; border-right:1px solid var(--line); }
.anatomy .legend .cell:last-child{ border-right:none; }
.anatomy .legend .cell .code{ font-family: var(--mono); font-weight:600; font-size: 14px; color: var(--gold); letter-spacing:.04em; }
.anatomy .legend .cell h4{ margin: 12px 0 8px; font-weight: 600; font-size: 16px; letter-spacing:-.01em; }
.anatomy .legend .cell p{ margin:0; font-size: 13.5px; line-height:1.5; color: var(--ink-70); }

/* Code dictionaries */
.dicts{ padding-top: 40px; padding-bottom: 40px; display:grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 880px){ .dicts{ grid-template-columns:1fr; gap:48px; } }
.dict h3{ font-family: var(--mono); font-size: 12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); margin:0 0 16px; }
.dict .row{ display:grid; grid-template-columns: 92px 1fr; gap: 16px; align-items:baseline; padding: 16px 0; border-top: 1px solid var(--line-soft); }
.dict .row:first-of-type{ border-top: 1px solid var(--abyss); }
.dict .row .k{ font-family: var(--mono); font-weight: 600; font-size: 17px; letter-spacing:0; }
.dict .row .v .t{ font-weight: 500; font-size: 15px; letter-spacing:-.01em; }
.dict .row .v .d{ font-size: 13px; color: var(--ink-45); margin-top: 4px; line-height:1.45; }
.swatch{ display:inline-block; width:11px; height:11px; border-radius:1px; margin-right:8px; vertical-align: baseline; transform: translateY(1px); border:1px solid rgba(0,0,0,.12); }

/* Black dipped — natural wood with a serrated black dipped edge */
.sw-dipped{
  background-color: #c9a36a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' preserveAspectRatio='none'%3E%3Cpath d='M0 11 L3 7.5 L6 11 L9 7.5 L12 11 L15 7.5 L18 11 L21 7.5 L24 11 L24 24 L0 24 Z' fill='%23171310'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.rules{ padding-top: 96px; padding-bottom: 112px; }
.rules ol{ list-style:none; counter-reset: r; margin:0; padding:0; max-width: 70ch; }
.rules li{ counter-increment: r; display:grid; grid-template-columns: 44px 1fr; gap:20px; padding: 22px 0; border-top:1px solid var(--line-soft); font-size:16px; line-height:1.55; color: var(--ink-70); letter-spacing:-.01em; }
.rules li::before{ content: counter(r,decimal-leading-zero); font-family:var(--mono); font-size:13px; color: var(--gold); padding-top:4px; }
.rules li b{ color: var(--ink); font-weight:600; }

/* ============================================================
   ARCHIEF grid
   ============================================================ */
.arch-head{ padding-top: 80px; padding-bottom: 28px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.arch-head h1{ font-weight:600; font-size: clamp(34px,5vw,56px); letter-spacing:-.02em; margin:0; }
.arch-head .meta{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); text-align:right; line-height:1.5; }

.filters{ display:flex; gap:8px; flex-wrap:wrap; }
.filters button{
  font-family: var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  background: transparent; border:1px solid var(--line); color: var(--ink-45);
  padding: 8px 14px; border-radius: var(--r); transition: all .3s var(--ease);
}
.filters button:hover{ border-color: var(--abyss); color: var(--ink); }
.filters button.active{ background: var(--abyss); border-color: var(--abyss); color: var(--pure); }
.filters .spacer{ flex:1; }

/* archief-besturing: zoek + sorteer + filtergroepen */
.arch-meta-inline{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); white-space:nowrap; }
.arch-controls{ padding: 4px 0 16px; margin-bottom:20px; display:flex; flex-direction:column; gap:16px; }
.arch-searchrow{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.arch-search{ position:relative; flex:1; min-width:240px; max-width:460px; display:flex; align-items:center; }
.arch-search .as-ico{ position:absolute; left:14px; color:var(--ink-45); font-size:13px; pointer-events:none; }
.arch-search input{ width:100%; font-family:var(--display); font-size:14px; letter-spacing:-.01em; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:11px 38px 11px 38px; transition:border-color .25s var(--ease); }
.arch-search input::placeholder{ color:var(--ink-25); }
.arch-search input:focus{ outline:none; border-color:var(--abyss); }
.arch-search input[type=search]::-webkit-search-decoration,.arch-search input[type=search]::-webkit-search-cancel-button{ -webkit-appearance:none; }
.arch-search .as-clear{ position:absolute; right:10px; width:22px; height:22px; border:none; background:none; color:var(--ink-45); font-size:16px; cursor:pointer; border-radius:50%; }
.arch-search .as-clear:hover{ color:var(--abyss); background:var(--gray-50); }
body.neu .arch-search input{ border:none; box-shadow:var(--sh-neu-inset-sm); }
.arch-filtergroups{ display:flex; gap:36px; flex-wrap:wrap; }
.filtergroup{ display:flex; flex-direction:column; gap:10px; }
.filters-form{ padding-top:2px; }
.filters-form button{ font-size:10.5px; padding:6px 12px; }
.fg-label{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-25); }
.icon-btn{ width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--line); border-radius:var(--r);
  background:var(--card); color:var(--ink-45); font-size:15px; cursor:pointer; transition:all .25s var(--ease); flex:none; }
.icon-btn:hover{ border-color:var(--abyss); color:var(--ink); }
body.neu .icon-btn{ border:none; box-shadow:var(--sh-neu-sm); }
body.neu .icon-btn:hover{ box-shadow:var(--sh-neu); }

/* snelle-acties op de kaart */
.card-more{ position:absolute; top:8px; right:8px; z-index:3; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; background:rgba(255,255,255,.86); color:var(--abyss); font-size:16px; line-height:1;
  opacity:0; transition:opacity .2s var(--ease); }
.card:hover .card-more{ opacity:1; }
.card-more:hover{ background:var(--abyss); color:var(--pure); }
.card-menu{ position:fixed; z-index:2500; min-width:200px; background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--sh-industrial); padding:6px; display:none; }
.card-menu.show{ display:block; }
body.neu .card-menu{ border:none; box-shadow:var(--sh-neu-lg); border-radius:var(--neu-rad-s); }
.card-menu .cm-h{ font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.04em; padding:8px 10px 6px; color:var(--ink); }
.card-menu .cm-sec{ font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-25); padding:8px 10px 4px; }
.card-menu .cm-i{ display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  font-size:13px; letter-spacing:-.01em; color:var(--ink-70); padding:8px 10px; border-radius:6px; transition:all .18s var(--ease); }
.card-menu .cm-i:hover{ background:var(--gray-50); color:var(--ink); }
.card-menu .cm-i.on{ color:var(--gold); font-weight:600; }
.card-menu .cm-i.on::after{ content:' \2713'; }
.card-menu .cm-divider{ height:1px; background:var(--line-soft); margin:6px 4px; }

.grid{ display:grid; grid-template-columns: repeat(var(--arch-cols,3), minmax(0,1fr)); gap: 16px; }
@media (max-width: 1040px){ .grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 680px){ .grid{ grid-template-columns: 1fr; } }

.card{ background: var(--card); border:1px solid var(--line); border-radius: var(--r); padding: 16px; display:flex; flex-direction:column; gap:16px; transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease); text-align:left; width:100%; }
.card:hover{ border-color: var(--abyss); box-shadow: var(--sh-industrial); transform: translate(-2px,-2px); }
.card .ph{ position: relative; width:100%; aspect-ratio: 3/4; flex: 0 0 auto; overflow: hidden; border-radius: 10px; background: var(--gray-50); }
.card .ph.drag{ outline:2px dashed var(--cobalt); outline-offset:-3px; }
.card image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.card .num-tag{
  position:absolute; left:8px; top:8px; z-index:3;
  font-family:var(--mono); font-weight:600; font-size:11px; letter-spacing:.02em;
  background: var(--abyss); color: var(--pure); padding: 4px 8px; border-radius: var(--r);
}
.card .cap{ display:flex; flex-direction:column; gap:8px; }
.card .cap .id{ font-family:var(--mono); font-weight:600; font-size:15px; letter-spacing:0; }
.card .cap .uitv{ font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--ink-45); margin-top:-4px; }
.card .cap .ttl{ font-size:14px; color: var(--ink-70); line-height:1.35; letter-spacing:-.01em; }
.card .cap .specrow{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11.5px; color:var(--ink-45); letter-spacing:.02em; margin-top:2px; }
.card .cap .specrow .dot{ width:3px; height:3px; border-radius:50%; background: var(--ink-25); }
.card .foot{ display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:8px 10px; margin-top:2px; padding-top:14px; border-top:1px solid var(--line-soft); }
.card .price{ font-family:var(--mono); font-weight:600; font-size:14px; letter-spacing:0; white-space:nowrap; }

/* status pills */
.pill{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:var(--r); border:1px solid var(--line); color:var(--ink-45); white-space:nowrap; }
.pill.available{ border-color: var(--cobalt); color: var(--cobalt); }
.pill.sold{ background: var(--abyss); border-color:var(--abyss); color: var(--pure); }
.pill.reference{ border-color: var(--ink-25); color: var(--ink-45); }
.pill.ap{ border-color: var(--ink-25); color: var(--ink-45); }
.pill.loewe{ background: var(--gold); border-color:var(--gold); color:var(--pure); }

/* finish chip */
.chip{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; letter-spacing:.02em; color: var(--ink-70); }
.chip .sw{ width:10px; height:10px; border-radius:1px; border:1px solid rgba(0,0,0,.12); }

/* ============================================================
   WERK detail
   ============================================================ */
.detail{ padding-top: 24px; padding-bottom: 64px; }
.detail .back, .werk-page .back{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); background:none; border:none; padding:0; margin-bottom:20px; display:inline-flex; gap:8px; cursor:pointer; transition: color .3s var(--ease); }
.detail .back:hover, .werk-page .back:hover{ color: var(--cobalt); }
.detail-grid{ display:grid; grid-template-columns: 1.05fr 1fr; gap: 32px; align-items:start; }
@media (max-width: 940px){ .detail-grid{ grid-template-columns:1fr; gap:40px; } }
.detail-ph{ position:relative; width:100%; aspect-ratio:3/4; overflow:hidden; border-radius:2px; background: var(--gray-50); border:1px solid var(--abyss); }
.detail-ph image-slot{ position:absolute; inset:0; width:100%; height:100%; }

/* media column + externe beeldbibliotheek */
.detail-media{ display:flex; flex-direction:column; gap:18px; }
.drive-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.drive-head .lbl{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); }
.drive-link{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--cobalt); background:none; border:none; padding:6px 2px; cursor:pointer; transition:color .3s var(--ease); }
.drive-link:hover{ color:var(--ink); }
.drive-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:10px; margin-top:12px; }
.local-grid{ margin-bottom:2px; }
.local-grid .gi img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- Archief bewerken ---- */
.arch-toolbar{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.arch-toolbar .filters{ margin:0; }
.filters button:disabled{ opacity:.4; cursor:not-allowed; }
.arch-edit-actions{ display:flex; gap:10px; flex:none; align-items:center; }
.arch-sort{ display:inline-flex; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.arch-sort button{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); background:transparent; border:none; padding:9px 14px; cursor:pointer; transition:all .25s var(--ease); }
.arch-sort button + button{ border-left:1px solid var(--line); }
.arch-sort button:hover{ color:var(--ink); }
.arch-sort button.on{ background:var(--abyss); color:var(--pure); }
body.neu .arch-sort{ border:none; box-shadow:var(--sh-neu-inset-sm); border-radius:var(--neu-rad-s); }
body.neu .arch-sort button.on{ background:var(--abyss); color:var(--pure); }
.arch-edit-actions .btn{ padding:11px 18px; }
.arch-edit-note{ font-size:12px; color:var(--ink-45); letter-spacing:.01em; margin:-2px 0 18px; line-height:1.5; }
.grid-edit{ grid-template-columns: repeat(min(var(--arch-cols,3),3),minmax(0,1fr)); }
@media(max-width:1040px){ .grid-edit{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:680px){ .grid-edit{ grid-template-columns:1fr; } }
.card.editing{ cursor:default; }
.card.editing:hover{ transform:none; }
.card.editing .ph .ph-hint{ position:absolute; left:8px; bottom:8px; z-index:3; font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--pure); background:rgba(10,10,10,.55); padding:3px 7px; border-radius:6px; pointer-events:none; }
.card.editing .cap{ gap:10px; }
.ed-codes{ display:flex; gap:10px; align-items:baseline; }
.ed-codes .id{ font-family:var(--mono); font-weight:600; font-size:14px; }

/* reeks — archiveringsnummers per stuk */
.ed-pieces{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft); display:flex; flex-direction:column; gap:10px; }
.ed-piece-grid{ display:flex; flex-wrap:wrap; gap:6px; }
.ed-piece{ font-size:11.5px; letter-spacing:0; color:var(--ink-70); background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:5px 9px; }
.ed-piece.sold{ color:var(--pure); background:var(--abyss); border-color:var(--abyss); }
.serie-av{ font-family:var(--mono); color:var(--gold); font-weight:600; }
.txn-series-bar{ padding:10px 14px; border:1px solid var(--gold); border-radius:var(--r); background:rgba(53,29,29,.04); margin-bottom:4px; }
.txn-series-info{ font-family:var(--mono); font-size:11.5px; letter-spacing:.02em; color:var(--ink-70); }
.txn-series-info b{ color:var(--gold); }
body.neu .txn-series-bar{ border:none; box-shadow:var(--sh-neu-inset-sm); }

/* APA publicatiekaarten */
.ed-row3{ display:grid; grid-template-columns: 1fr 1fr 1.4fr; gap:10px; }
.ed-gh-note{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); border:1px solid var(--line); border-radius:var(--r); padding:2px 7px; margin-left:10px; vertical-align:middle; }
.apa-preview{ font-size:13.5px; line-height:1.6; color:var(--ink); letter-spacing:-.01em; background:var(--gray-50); border-left:2px solid var(--gold); padding:13px 16px; border-radius:0 var(--r) var(--r) 0; margin-bottom:4px; }
.apa-preview .apa-title{ font-style:italic; }
.apa-preview .apa-src{ font-style:italic; }
.apa-preview .apa-url{ color:var(--cobalt); word-break:break-all; }
.apa-preview .apa-empty{ color:var(--ink-25); font-style:italic; }
.pub-attach{ display:flex; }
.pub-pdf-add{ width:auto !important; }
.pub-pdf{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; color:var(--ink-70); background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:7px 10px; }
.pub-pdf a{ color:var(--cobalt); }
.pub-pdf-x{ border:none; background:none; color:var(--ink-25); font-size:15px; line-height:1; cursor:pointer; padding:0 2px; }
.pub-pdf-x:hover{ color:var(--abyss); }

/* ingeklapte fiches — zuiver overzicht, recentste eerst */
.add-top{ margin-bottom:14px; }
.fold-list{ display:flex; flex-direction:column; gap:10px; }
.ecard-foot{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:4px; }
.ec-fold{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); background:none; border:none; padding:6px 4px; cursor:pointer; transition:color .25s var(--ease); }
.ec-fold:hover{ color:var(--cobalt); }
.ec-spread{ font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--gold); background:none; border:none; padding:6px 4px; cursor:pointer; text-align:left; transition:color .25s var(--ease); }
.ec-spread:hover{ color:var(--gold-hover); text-decoration:underline; }
.card-fold{ display:flex; align-items:stretch; gap:0; border:1px solid var(--line); border-radius:var(--r); background:var(--card); overflow:hidden; transition:border-color .25s var(--ease), box-shadow .25s var(--ease); }
.card-fold:hover{ border-color:var(--abyss); box-shadow:var(--sh-industrial); transform:translate(-2px,-2px); }
.card-fold .cf-body{ flex:1; text-align:left; background:none; border:none; cursor:pointer; padding:14px 16px; display:flex; flex-direction:column; gap:4px; min-width:0; }
.card-fold .cf-main{ font-weight:600; font-size:15px; letter-spacing:-.01em; color:var(--ink); }
.card-fold .cf-sub{ font-family:var(--mono); font-size:11.5px; letter-spacing:.01em; color:var(--ink-45); }
.card-fold .apa-fold{ display:block; font-size:13px; line-height:1.55; color:var(--ink); letter-spacing:-.01em; }
.card-fold .apa-fold .apa-title,.card-fold .apa-fold .apa-src{ font-style:italic; }
.card-fold .apa-fold .apa-url{ color:var(--cobalt); word-break:break-all; }
.card-fold .cf-actions{ display:flex; align-items:center; gap:2px; padding-right:8px; }
.card-fold .cf-pdf{ width:26px; height:26px; display:grid; place-items:center; color:var(--ink-45); border-radius:var(--r); font-size:14px; }
.card-fold .cf-pdf:hover{ color:var(--cobalt); background:var(--panel); }
.card-fold .cf-del,.card-fold .cf-edit{ background:none; border:none; cursor:pointer; }
.card-fold .cf-del{ width:30px; color:var(--ink-25); font-size:17px; line-height:1; transition:all .25s var(--ease); }
.card-fold .cf-del:hover{ color:var(--pure); background:var(--abyss); }
body.neu .card-fold{ border:none; box-shadow:var(--sh-neu-sm); }
body.neu .card-fold:hover{ box-shadow:var(--sh-neu); transform:none; }
.ed-codes .arch-tag{ margin:0; }
.ec{ display:flex; flex-direction:column; gap:5px; }
.ec2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.card.editing .ed-input, .card.editing .ed-select{ padding:8px 10px; font-size:13px; }
.card.editing.dirty .ed-codes .id{ color:var(--cobalt); }
.card.editing.dirty .ed-codes .id::after{ content:' \2022 gewijzigd'; font-size:9px; color:var(--cobalt); letter-spacing:.04em; }
.drive-grid .gi{ position:relative; aspect-ratio:3/4; border-radius:10px; overflow:hidden; background:var(--gray-50); border:1px solid var(--line-soft); }
.drive-grid .gi img{ width:100%; height:100%; object-fit:cover; display:block; }
.drive-grid .gi.err img{ display:none; }
.drive-grid .gi.err::after{ content:'Niet zichtbaar'; position:absolute; inset:0; display:grid; place-items:center; text-align:center; font-family:var(--mono); font-size:9px; letter-spacing:.04em; color:var(--ink-25); padding:6px; }
.drive-grid .gi .open{ position:absolute; inset:0; z-index:1; }
.drive-grid .gi .del{ position:absolute; top:5px; right:5px; width:20px; height:20px; border-radius:50%; background:rgba(10,10,10,.62); color:#fff; font-size:13px; line-height:1; display:grid; place-items:center; opacity:0; transition:opacity .25s var(--ease); z-index:2; }
.drive-grid .gi:hover .del{ opacity:1; }
.drive-empty{ grid-column:1/-1; font-family:var(--mono); font-size:11.5px; color:var(--ink-45); padding:14px 0; line-height:1.5; }
.drive-add{ margin-top:12px; width:100%; font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-45); background:transparent; border:1px dashed var(--line); border-radius:var(--r); padding:12px; cursor:pointer; transition:all .3s var(--ease); }
.drive-add:hover{ border-color:var(--cobalt); color:var(--cobalt); }
.drive-inline{ margin-top:8px; border:none; background:none; color:var(--cobalt); font:inherit; cursor:pointer; padding:0; text-decoration:underline; }
.onedrive-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.onedrive-actions .drive-add{ flex:1 1 220px; }
.onedrive-actions .drive-link{ flex:none; }

.detail .id-block .num-big{ font-family:var(--mono); font-weight:600; font-size: clamp(28px,4vw,44px); letter-spacing:-.01em; margin:0; }
.detail .id-block .ttl{ font-size: 18px; color: var(--ink-70); margin-top: 12px; letter-spacing:-.01em; }
.detail .id-block .pills{ display:flex; gap:8px; margin-top:18px; flex-wrap:wrap; }

.spec-table{ margin-top: 40px; border-top:1px solid var(--abyss); }
.spec-table .r{ display:grid; grid-template-columns: 150px 1fr; gap:20px; padding: 15px 0; border-bottom:1px solid var(--line-soft); }
.spec-table .r .k{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); padding-top:3px; }
.spec-table .r .v{ font-size:15.5px; line-height:1.45; letter-spacing:-.01em; }
.spec-table .r .v.mono{ font-family:var(--mono); letter-spacing:0; }

.detail .actions{ margin-top: 36px; display:flex; gap:12px; flex-wrap:wrap; }
.btn{ font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding: 13px 22px; border-radius: var(--r); border:1px solid var(--btn-bg); background: var(--btn-bg); color: var(--btn-ink); transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); }
.btn:hover{ box-shadow: var(--sh-industrial); transform: translate(-2px,-2px); }
.btn.ghost{ background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn.ghost:hover{ background: var(--surface); border-color: var(--ink); }
.btn.gold{ background: var(--gold); border-color: var(--gold); color: var(--pure); }
.btn.gold:hover{ background: var(--gold-hover); border-color: var(--gold-hover); box-shadow: 4px 4px 0 0 var(--gold-hover); }
html[data-theme="dark"] .btn.gold{ color: var(--abyss); }

/* number breakdown mini */
.breakdown{ margin-top: 28px; background: var(--panel); border:1px solid var(--line); border-radius:var(--r); padding: 24px; }
.breakdown .bk-num{ font-family:var(--mono); font-weight:600; font-size: 26px; letter-spacing:-.01em; display:flex; gap:.06em; }
.breakdown .bk-num .s{ position:relative; }
.breakdown .bk-num .s.hl{ color: var(--gold); }
.breakdown .bk-rows{ margin-top:20px; display:flex; flex-direction:column; gap:10px; }
.breakdown .bk-rows .br{ display:grid; grid-template-columns: 64px 1fr; gap:14px; font-size:13px; }
.breakdown .bk-rows .br .bc{ font-family:var(--mono); font-weight:600; color: var(--gold); letter-spacing:0; }
.breakdown .bk-rows .br .bd{ color: var(--ink-70); letter-spacing:-.01em; }

/* ============================================================
   CERTIFICAAT
   ============================================================ */
.cert-stage{ padding-top: 24px; padding-bottom: 48px; }
.cert-stage .back{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); background:none; border:none; padding:0; margin-bottom:24px; display:inline-flex; gap:8px; transition: color .3s var(--ease); }
.cert-stage .back:hover{ color: var(--cobalt); }
.cert-stage .toolbar{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:28px; flex-wrap:wrap; }
.cert-stage .toolbar .hint{ font-family:var(--mono); font-size:12px; color:var(--ink-45); letter-spacing:.02em; }

.cert{
  width: 794px; max-width:100%; margin: 0 auto; aspect-ratio: 794/1123;
  background: #FFFFFF; border:1px solid #0A0A0A; color:#0A0A0A;
  padding: 64px; display:flex; flex-direction:column;
  box-shadow: var(--sh-industrial);
}
.cert .c-top{ display:flex; justify-content:space-between; align-items:flex-start; }
.cert .c-top .wm{ font-family:var(--display); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:18px; }
.cert .c-top .wm-logo{ height:24px; width:auto; display:block; }
.cert .c-top .rw{ width:42px; height:42px; background:var(--abyss); color:var(--pure); display:grid; place-items:center; font-family:var(--display); font-weight:700; letter-spacing:0; font-size:16px; border-radius:var(--r); }
.cert .c-title{ margin-top: 56px; }
.cert .c-title .eg{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-45); }
.cert .c-title h2{ font-weight:600; font-size:30px; letter-spacing:-.02em; margin:12px 0 0; }
.cert .c-num{ font-family:var(--mono); font-weight:600; font-size: 46px; letter-spacing:-.01em; margin: 28px 0 8px; }
.cert .c-num .acc{ color: var(--gold); }
.cert .c-sub{ font-size:15px; color: var(--ink-70); letter-spacing:-.01em; line-height:1.6; }
.cert .c-sub .c-arch{ font-family:var(--mono); font-size:11.5px; color:var(--ink-45); letter-spacing:.02em; }
.cert .c-title h2 .c-var{ color:var(--ink-45); font-weight:500; }
.cert .c-sketch{ position:relative; margin-top:24px; height:240px; background:transparent; border:none; }
.cert .c-sketch image-slot{ width:100%; height:100%; }
.cert .c-sketch .c-sketch-cap{ position:absolute; left:10px; bottom:8px; font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-45); }

.cert .c-specs{ margin-top: 26px; border-top:1px solid var(--abyss); }
.cert .c-specs .r{ display:grid; grid-template-columns: 160px 1fr; gap:20px; padding: 13px 0; border-bottom:1px solid var(--line-soft); }
.cert .c-specs .r .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); padding-top:3px; }
.cert .c-specs .r .v{ font-size:15px; letter-spacing:-.01em; }
.cert .c-specs .r .v.mono{ font-family:var(--mono); letter-spacing:0; }

.cert .c-foot{ margin-top: auto; display:grid; grid-template-columns: 1fr 1fr; gap:40px; align-items:end; padding-top: 40px; }
.cert .c-foot .statement{ font-size:12.5px; line-height:1.55; color: var(--ink-70); max-width: 40ch; letter-spacing:-.01em; }
.cert .c-foot .sign .line{ border-bottom:1px solid var(--abyss); height: 44px; }
.cert .c-foot .sign .lab{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); margin-top:8px; }

/* print */
@media print{
  @page{ size: A4; margin: 0; }
  .topbar, .cert-stage .toolbar, .cert-stage .back, .cert-annex-empty, .coa-overlay{ display:none !important; }
  body{ background:#fff; }
  .cert-stage{ padding:0; }
  .cert{ box-shadow:none; width:210mm; height:297mm; aspect-ratio:auto; padding: 22mm; }
  .cert-annex{ break-before:page; page-break-before:always; margin-top:0 !important; }
  .ca-frame{ background:#fff !important; }
  .txn-stage > .back, .txn-toolbar, .txn-foot-actions, .txn-newc, .txn-state{ display:none !important; }
  .txn-stage{ padding:0; }
  .txn-doc{ box-shadow:none !important; border:none !important; width:210mm; min-height:297mm; padding:20mm; margin:0; }
  .txn-doc .ed-input, .txn-doc .ed-select{ border:none !important; box-shadow:none !important; background:transparent !important; padding:2px 0 !important; }
  .ed-selectwrap .ed-chev{ display:none !important; }
}

/* ============================================================
   TRANSACTIES — Verkoop · Consignatie · Bruikleen + CRM
   ============================================================ */
.btn.cobalt{ background:var(--cobalt); border-color:var(--cobalt); color:#FFFFFF; }
.btn.cobalt:hover{ background:var(--cobalt); box-shadow:4px 4px 0 0 var(--abyss); }
/* outline-only in de steunkleur (consignatie · bruikleen) */
.btn.outline{ background:transparent; border:1px solid var(--gold); color:var(--gold); box-shadow:none; }
.btn.outline:hover{ background:transparent; color:var(--gold); box-shadow:4px 4px 0 0 var(--gold); }
body.neu .btn.outline{ border:1px solid var(--gold); background:transparent; box-shadow:none; color:var(--gold); }
body.neu .btn.outline:hover{ box-shadow:4px 4px 0 0 var(--gold); transform:translate(-2px,-2px); }
.btn.ghost.disabled, .btn.ghost:disabled{ background:var(--surface); color:var(--ink-25); border-color:var(--line); cursor:not-allowed; opacity:1; }
.btn.ghost.disabled:hover, .btn.ghost:disabled:hover{ box-shadow:none; transform:none; }
.btn.danger.ghost{ background:var(--surface); color:var(--ink-45); border-color:var(--line); }
.btn.danger.ghost:hover{ color:#FFFFFF; background:var(--abyss); border-color:var(--abyss); }

.actions-util{ margin-top:14px; }
.txn-buttons{ display:flex; gap:12px; flex-wrap:wrap; }
.txn-list{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.txn-chip{ display:inline-flex; align-items:center; gap:10px; padding:9px 14px; border:1px solid var(--line); border-radius:var(--r); background:var(--card); cursor:pointer; transition:all .25s var(--ease); }
.txn-chip:hover{ border-color:var(--abyss); box-shadow:var(--sh-industrial); transform:translate(-2px,-2px); }
.txn-chip .tc-kind{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.txn-chip.gold .tc-kind{ color:var(--gold); }
.txn-chip.cobalt .tc-kind{ color:var(--cobalt); }
.txn-chip .tc-no{ font-size:12px; color:var(--ink-70); }
.txn-chip .tc-state{ font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-25); }
.txn-chip .tc-state.on{ color:var(--gold); }

.txn-stage{ padding-top:40px; padding-bottom:96px; }
.txn-stage > .back{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); background:none; border:none; padding:0; margin-bottom:24px; cursor:pointer; }
.txn-stage > .back:hover{ color:var(--cobalt); }
.txn-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.txn-hd{ display:flex; align-items:center; gap:14px; }
.txn-kind{ font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; }
.txn-kind.gold{ color:var(--gold); } .txn-kind.cobalt{ color:var(--cobalt); }
.txn-no{ font-size:14px; color:var(--ink-70); }
.txn-state{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); border:1px solid var(--gold); border-radius:var(--r); padding:3px 8px; }
.txn-state.concept{ color:var(--ink-25); border-color:var(--line); }
/* afloop-indicator van het contract (beschikbaarheid + alert) */
.txn-deadline{ font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; border-radius:var(--r); padding:3px 8px; border:1px solid; }
.txn-deadline.ok{ color:var(--ink-45); border-color:var(--line); }
.txn-deadline.open{ color:var(--ink-25); border-color:var(--line); }
.txn-deadline.soon{ color:#B27400; border-color:#FFA300; background:#FFF8EC; }
.txn-deadline.urgent{ color:#fff; border-color:#B00020; background:#B00020; }
.txn-deadline.past{ color:var(--ink-25); border-color:var(--line); text-decoration:line-through; }
html[data-theme="dark"] .txn-deadline.soon{ background:transparent; color:#FFA300; }
.txn-actions-top{ display:flex; gap:10px; }

/* groepstransacties */
.txn-group-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 16px; background:var(--bg-soft,#F5F5F7); border:1px solid var(--line); border-radius:var(--r); margin-bottom:20px; }
.txn-group-bar.single{ padding:8px 12px; }
.txn-group-bar .lbl{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--cobalt,#0055FF); white-space:nowrap; }
.txn-group-list{ display:flex; gap:6px; flex-wrap:wrap; flex:1; }
.txn-group-chip{ font-family:var(--mono); font-size:11px; padding:3px 8px; border:1px solid var(--line); border-radius:var(--r); cursor:pointer; background:var(--card,#fff); transition:border-color .15s; }
.txn-group-chip:hover{ border-color:var(--abyss); }
.txn-group-chip.active{ border-color:var(--cobalt,#0055FF); color:var(--cobalt,#0055FF); }
.tgc-dims{ color:var(--ink-45); margin-left:4px; }

/* boekhouding · sbbSLIM — factuurbalk op de verkooppagina */
.txn-cf-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 16px; background:var(--bg-soft,#F5F5F7); border:1px solid var(--line); border-radius:var(--r); margin-bottom:20px; }
.txn-cf-bar .lbl{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); white-space:nowrap; }
.txn-cf-no{ font-size:12px; font-weight:600; }
.txn-cf-chip{ font-family:var(--mono); font-size:11px; padding:3px 8px; border:1px solid var(--line); border-radius:var(--r); background:var(--card,#fff); color:var(--ink-45); }
.txn-cf-chip.ok{ border-color:var(--gold); color:var(--gold); }
.txn-cf-actions{ display:flex; gap:8px; margin-left:auto; flex-wrap:wrap; }
.txn-cf-actions .btn{ padding:8px 14px; font-size:11px; }
.txn-cf-actions a.btn{ text-decoration:none; display:inline-block; line-height:1; }

/* txn-doc heeft altijd witte achtergrond — forceer licht kleurenschema ongeacht theme of body.neu */
.txn-doc{ background:#FFFFFF; border:1px solid #0A0A0A; padding:40px; box-shadow:var(--sh-industrial); color:#0A0A0A; }
.txn-doc .ed-input, .txn-doc .ed-area{ background:#FFFFFF !important; color:#0A0A0A !important; border-color:#D1D1D6 !important; box-shadow:none !important; }
.txn-doc .ed-select{ background:#FFFFFF !important; color:#0A0A0A !important; border-color:#D1D1D6 !important; }
.txn-doc .ed-label, .txn-doc .txk, .txn-doc .txv, .txn-doc .ct-lbl, .txn-doc .ct-v, .txn-doc .ed-field{ color:#0A0A0A; }
.txn-doc .txn-party-h .lbl, .txn-doc .txn-sec-h, .txn-doc .ed-hint, .txn-doc .txn-auto{ color:#5C5C5E; }
.txn-doc-head{ display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:20px; border-bottom:1px solid var(--abyss); }
.txn-wm{ font-family:var(--display); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:15px; }
.txn-doc-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.txn-doc-title{ font-weight:600; font-size:18px; letter-spacing:-.01em; }
.txn-doc-meta .mono{ font-size:12px; color:var(--ink-45); }

.txn-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:28px; }
@media(max-width:760px){ .txn-grid{ grid-template-columns:1fr; gap:24px; } }
.txn-sec-h{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.txn-auto{ font-family:var(--mono); font-size:9px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-25); border:1px solid var(--line); border-radius:var(--r); padding:2px 6px; }
.txn-auto.crm{ color:var(--cobalt); border-color:var(--cobalt); }
.txn-work .txr{ display:grid; grid-template-columns:130px 1fr; gap:14px; padding:8px 0; border-bottom:1px solid var(--line-soft); }
.txn-work .txk{ font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-45); padding-top:2px; }
.txn-work .txv{ font-size:13.5px; letter-spacing:-.01em; }

.txn-party{ margin-bottom:20px; }
.txn-party-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.txn-party-h .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); font-weight:600; }
.txn-name{ font-weight:600; font-size:15px; margin-bottom:10px; letter-spacing:-.01em; }
.txn-pick{ display:flex; gap:10px; align-items:center; margin-bottom:12px; }
.txn-pick .ed-selectwrap{ flex:1; }
.txn-newc{ width:auto !important; white-space:nowrap; }
.txn-cfields{ display:flex; flex-direction:column; gap:10px; }
.txn-cempty{ font-family:var(--mono); font-size:11.5px; color:var(--ink-45); line-height:1.5; padding:6px 0; }
.txn-relsave{ display:flex; justify-content:flex-end; margin-top:2px; }
.txn-relsave .lrow-add{ width:auto !important; padding:9px 16px; }

/* provenance referentie-knop + popup */
.prov-ref{ width:24px; height:24px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--cobalt); font-size:13px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:all .25s var(--ease); }
.prov-ref:hover{ border-color:var(--cobalt); background:var(--cobalt); color:var(--pure); }
body.neu .prov-ref{ border:none; box-shadow:var(--sh-neu-sm); }
.peek-overlay{ position:fixed; inset:0; z-index:2000; background:rgba(10,10,10,.32); display:grid; place-items:center; padding:24px; opacity:0; transition:opacity .2s var(--ease); }
.peek-overlay.show{ opacity:1; }
.peek-card{ position:relative; width:min(460px,94vw); max-height:86vh; overflow:auto; background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-industrial); padding:28px; transform:translateY(8px); transition:transform .2s var(--ease); }
.peek-overlay.show .peek-card{ transform:none; }
body.neu .peek-card{ border:none; box-shadow:var(--sh-neu-lg); border-radius:var(--neu-rad); }
.peek-x{ position:absolute; top:14px; right:14px; width:26px; height:26px; border:none; background:none; font-size:18px; color:var(--ink-45); cursor:pointer; }
.peek-x:hover{ color:var(--abyss); }
.peek-sec{ margin-bottom:20px; }
.peek-h{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid var(--line-soft); }
.peek-r{ display:grid; grid-template-columns:120px 1fr; gap:12px; padding:5px 0; font-size:13px; align-items:baseline; }
.peek-r span{ font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-45); }
.peek-r b{ font-weight:500; letter-spacing:-.01em; }
.peek-empty{ font-family:var(--mono); font-size:11.5px; color:var(--ink-45); padding:4px 0; }
.peek-actions{ display:flex; gap:10px; margin-top:8px; }
.peek-actions .btn{ flex:1; }

.txn-terms{ margin-top:28px; padding-top:24px; border-top:1px solid var(--abyss); display:flex; flex-direction:column; gap:14px; }
.txn-intl-warn{ background:rgba(53,29,29,.06); border-left:2px solid var(--gold); border-radius:0 var(--r) var(--r) 0;
  padding:11px 14px; font-size:12.5px; line-height:1.5; color:var(--ink-70); letter-spacing:-.01em; }
.txn-intl-warn b{ color:var(--gold); font-weight:600; }
html[data-theme="dark"] .txn-intl-warn{ background:rgba(255,255,255,.05); }
.txn-sign{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:48px; }
.txn-sign-line{ border-bottom:1px solid var(--abyss); height:40px; }
.txn-sign-lab{ font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-45); margin-top:8px; }
.txn-foot-actions{ margin-top:20px; }

body.neu .txn-doc{ border:none; box-shadow:var(--sh-neu); }
body.neu .txn-chip{ border:none; box-shadow:var(--sh-neu-sm); }
body.neu .txn-chip:hover{ box-shadow:var(--sh-neu); transform:none; }
body.neu .txn-auto{ border:none; box-shadow:var(--sh-neu-inset-sm); }
body.neu .btn.cobalt{ border:none; box-shadow:var(--sh-neu-sm); }

/* ---- Uitgeschreven contract ---- */
/* Documenten (certificaat, contract, transactiedoc) blijven ALTIJD licht — ze worden op wit papier geprint. */
.cert, .contract, .txn-doc{
  --ink:#0A0A0A; --ink-70:#3A3A3C; --ink-45:#8E8E93; --ink-25:#B8B8BD;
  --canvas:#FFFFFF; --surface:#FFFFFF; --card:#FFFFFF; --panel:#F5F5F7; --line:#D1D1D6; --line-soft:#E5E5EA; --hairline:rgba(0,0,0,.08);
  --gold:#351D1D; color:#0A0A0A;
}
.contract{ background:var(--pure); border:1px solid var(--abyss); box-shadow:var(--sh-industrial); padding:48px 54px; max-width:880px; }
.contract{
  --ct-sans: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  --ct-mono: 'JetBrains Mono', 'Chivo Mono', ui-monospace, monospace;
  --ct-ink: #0A0A0A;
  --ct-label: #636366;
  --ct-faint: #8E8E93;
  --ct-rule: #D1D1D6;
  --ct-fill: #ECECF0;   /* grijze vulling voor ingevulde/in-te-vullen velden */
  position:relative;
  font-family: var(--ct-sans); font-weight:300; font-size:9.5pt; line-height:1.6; color:var(--ct-ink);
  background:var(--ct-bg, #FFFFFF); border:1px solid var(--ct-rule); box-shadow:var(--sh-industrial);
  padding:22mm 20mm; max-width:210mm; margin:0 auto;
}
/* op scherm volgt het document de nachtmodus (donker papier, lichte inkt); print blijft wit */
html[data-theme="dark"] .contract{
  --ct-bg: #1C1C1E; --ct-ink: #F5F5F7; --ct-label: #A1A1A6; --ct-faint: #8E8E93; --ct-rule: #3A3A3C; --ct-fill: #2E2E31;
}
html[data-theme="dark"] .contract .ct-blank{ border-color:#F5F5F7; }
html[data-theme="dark"] .contract.is-concept .ct-watermark{ color:rgba(255,255,255,.07); }
body.neu .contract{ border:1px solid var(--ct-rule); box-shadow:var(--sh-neu); }

/* ---- header ---- */
.ct-head{ display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:9pt; border-bottom:0.5pt solid var(--ct-rule); }
.ct-wm{ font-family:var(--ct-sans); font-weight:800; font-size:14pt; letter-spacing:-0.03em; text-transform:uppercase; line-height:1; color:var(--ct-ink); }
.ct-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:3pt; text-align:right; }
.ct-meta span{ font-family:var(--ct-mono); font-size:9pt; letter-spacing:0; color:var(--ct-ink); }
.ct-meta span + span{ font-family:var(--ct-sans); font-weight:300; font-size:9pt; color:var(--ct-faint); }
.ct-title{ font-family:var(--ct-sans); font-weight:300; font-size:13pt; letter-spacing:-0.01em; line-height:1.3; margin:16pt 0 16pt; color:var(--ct-ink); }
.ct-lead{ font-family:var(--ct-sans); font-weight:300; font-size:9.5pt; color:var(--ct-ink); margin:0 0 11pt; }

/* ---- partijen ---- */
/* Partijen-fiche: rij = [waarde A] · [gecentreerd gedeeld label] · [waarde B].
   De labels staan netjes in een centrale band; beide partijen lezen parallel. */
.ct-parties{ margin:6pt 0 14pt; }
.ct-prow{ display:grid; grid-template-columns:1fr 184px 1fr; gap:0 20px; align-items:stretch; margin-bottom:6pt; }
.ct-pheadrow{ margin-bottom:9pt; align-items:start; }
.ct-phead{ align-self:start; font-family:var(--ct-sans); font-weight:700; font-size:7.5pt; letter-spacing:0.1em; text-transform:uppercase; color:var(--ct-ink); line-height:1.45; }
.ct-phead span{ display:block; font-weight:400; color:var(--ct-faint); white-space:pre-line; }
.ct-plabel{ display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--ct-sans); font-weight:600; font-size:6.8pt; letter-spacing:0.1em; text-transform:uppercase; color:var(--ct-label); line-height:1.3; }
.ct-pcell{ display:flex; align-items:center; min-height:2.3em; padding:5pt 9pt; background:var(--ct-fill); border-bottom:0.5pt solid var(--ct-rule); border-radius:2px 2px 0 0;
  font-family:var(--ct-sans); font-weight:500; font-size:9pt; color:var(--ct-ink); line-height:1.35; white-space:pre-line; }
@media(max-width:680px){
  .ct-prow{ grid-template-columns:1fr; gap:1px; margin-bottom:10pt; }
  .ct-plabel{ justify-content:flex-start; text-align:left; order:-1; margin-bottom:2px; }
  .ct-pheadrow .ct-plabel{ display:none; }
}
.ct-party{ border:none; border-radius:0; padding:0; }

/* Werk-paspoort: identiteitsfiche voor één werk */
.ct-passport{ border:0.5pt solid var(--ct-rule); border-radius:3px; padding:11pt 14pt; margin:11pt 0 12pt; }
.ct-pp-id{ display:flex; align-items:baseline; gap:10px; margin-bottom:4pt; }
.ct-pp-code{ font-family:var(--ct-mono); font-weight:600; font-size:10pt; letter-spacing:-0.01em; color:var(--ct-ink); }
.ct-pp-arch{ font-family:var(--ct-mono); font-size:8pt; letter-spacing:0; color:var(--ct-faint); }
.ct-pp-title{ font-family:var(--ct-sans); font-weight:300; font-size:12pt; letter-spacing:-0.01em; line-height:1.25; color:var(--ct-ink); margin-bottom:9pt; }
.ct-pp-year{ color:var(--ct-faint); }
.ct-pp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8pt 24px; border-top:0.5pt solid var(--ct-rule); padding-top:9pt; }
@media(max-width:680px){ .ct-pp-grid{ grid-template-columns:1fr; } }
.ct-pp-row{ display:flex; flex-direction:column; gap:2pt; }
.ct-pp-lbl{ font-family:var(--ct-sans); font-weight:600; font-size:6.5pt; letter-spacing:0.11em; text-transform:uppercase; color:var(--ct-label); }
.ct-pp-val{ font-family:var(--ct-sans); font-weight:400; font-size:9pt; color:var(--ct-ink); line-height:1.3; }
.ct-pp-val.mono{ font-family:var(--ct-mono); font-size:8.5pt; font-variant-numeric:tabular-nums; }
.ct-role{ font-family:var(--ct-sans); font-weight:600; font-size:7pt; letter-spacing:0.1em; text-transform:uppercase; color:var(--ct-label); margin-bottom:9pt; }
.ct-role span{ display:inline; font-weight:400; color:var(--ct-faint); }
.ct-pl{ display:grid; grid-template-columns:38% 1fr; gap:10px; align-items:baseline; padding:3pt 0; line-height:1.5; }
.ct-pl .ct-lbl{ font-family:var(--ct-sans); font-weight:600; font-size:7pt; letter-spacing:0.12em; text-transform:uppercase; color:var(--ct-label); }
.ct-pl .ct-v{ font-family:var(--ct-sans); font-weight:400; font-size:9pt; color:var(--ct-ink); border-bottom:none; padding-bottom:0; min-height:0; }
.ct-pl .ct-blank{ width:100%; min-width:80px !important; height:1.1em; border-bottom:0.5pt solid var(--ct-ink); }
.ct-note{ font-family:var(--ct-sans); font-weight:400; font-size:9.5pt; margin:7pt 0 18pt; color:var(--ct-ink); }

/* ---- artikelen ---- */
.ct-art{ margin:20pt 0 0; }
.ct-art h2{ font-family:var(--ct-sans); font-weight:700; font-size:8pt; letter-spacing:0.08em; text-transform:uppercase; color:var(--ct-ink); margin:0 0 7pt; padding:0; border:none; }
.ct-art p{ font-family:var(--ct-sans); font-weight:300; font-size:9.5pt; line-height:1.6; color:var(--ct-ink); margin:0 0 7pt; letter-spacing:0; text-wrap:pretty; }
.ct-art p b{ font-weight:600; color:var(--ct-ink); }
.ct-sub{ color:var(--ct-faint); font-weight:300; }

/* ---- kunstwerk-spec ---- */
.ct-work{ display:grid; grid-template-columns:1fr 1fr; gap:6pt 24px; border:0.5pt solid var(--ct-rule); padding:12px 14px; margin:11pt 0 12pt; }
@media(max-width:680px){ .ct-work{ grid-template-columns:1fr; } }
.ct-work .ctw{ display:grid; grid-template-columns:40% 1fr; gap:12px; align-items:baseline; padding:0; border:none; }
.ct-work .ctw span{ font-family:var(--ct-sans); font-weight:600; font-size:7pt; letter-spacing:0.07em; text-transform:uppercase; color:var(--ct-label); min-width:0; overflow-wrap:anywhere; line-height:1.3; }
/* Ingevulde velden onderscheiden zich van de doorlopende tekst: lichte grijze
   vulling + iets zwaarder gewicht. Lege velden zijn dezelfde grijze balk, leeg.
   Zo lezen "de uitzondering" (ingevulde data) en "de standaard" (boilerplate)
   meteen verschillend — ook midden in een lopende zin. */
.ct-v{
  font-family:var(--ct-sans); font-weight:500; font-size:9.5pt; color:var(--ct-ink);
  background:var(--ct-fill); padding:0.5pt 4pt; border-radius:2px;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
/* Leeg invulveld in LOPENDE TEKST: een net inline-balkje van de meegegeven breedte
   dat mee in de zin loopt (springt niet meer naar een volle eigen regel). */
.ct-blank{
  display:inline-block; max-width:100%; min-width:40px; height:1.15em; vertical-align:-0.15em;
  background:var(--ct-fill); border-radius:2px; border-bottom:0.5pt solid var(--ct-rule);
}
/* In label/waarde-roosters vult de balk juist de hele cel (niet de inline-breedte). */
.ct-work .ctw .ct-blank{ width:100% !important; min-width:0; }

/* Slotregel "Opgemaakt in tweevoud te …" — lead-tekst gevolgd door één grijze
   invulbalk: locatie links (handgeschreven), datum rechts uitgelijnd mee in de balk. */
.ct-execrow{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin:0 0 6pt; }
.ct-exec-lead{ font-family:var(--ct-sans); font-weight:300; font-size:9.5pt; color:var(--ct-ink); white-space:nowrap; }
.ct-fillbar{
  flex:1 1 240px; display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  background:var(--ct-fill); border-radius:2px; padding:4pt 10pt; min-height:1.7em;
}
.ct-fillbar-val{ font-family:var(--ct-sans); font-weight:500; font-size:9.5pt; color:var(--ct-ink); }
.ct-fillbar-date{ font-family:var(--ct-mono); font-size:8.5pt; color:var(--ct-label); white-space:nowrap; font-variant-numeric:tabular-nums; }
.ct-exec-foot{ margin-top:0; }

/* Volle invulbalk onder een leadzin — ruimte om met de hand bij te schrijven.
   Met .filled toont de balk een ingevulde waarde (bv. de leverdatum). */
.ct-fill-line{
  min-height:1.6em; background:var(--ct-fill); border-radius:2px; margin:4pt 0 8pt;
  padding:2pt 9pt; display:flex; align-items:center;
  font-family:var(--ct-sans); font-weight:500; font-size:9pt; color:var(--ct-ink);
}

/* ---- werkentabel (groepsdocument: meerdere werken in één overeenkomst) ---- */
.ct-works{ width:100%; border-collapse:collapse; margin:11pt 0 12pt; }
.ct-works thead th{
  font-family:var(--ct-sans); font-weight:600; font-size:6.5pt; letter-spacing:0.11em; text-transform:uppercase;
  color:var(--ct-label); text-align:left; white-space:nowrap;
  padding:0 14px 6pt 0; border-bottom:0.75pt solid var(--ct-ink);
}
.ct-works thead th.num{ text-align:right; padding-right:0; }
.ct-works tbody td{
  font-family:var(--ct-sans); font-weight:400; font-size:9pt; color:var(--ct-ink); line-height:1.4;
  padding:6pt 14px 6pt 0; border-bottom:0.5pt solid var(--ct-rule); vertical-align:top;
}
.ct-works tbody tr:last-child td{ border-bottom:0.5pt solid var(--ct-rule); }
.ct-works td.mono{ font-family:var(--ct-mono); font-size:8pt; font-variant-numeric:tabular-nums; letter-spacing:-0.01em; white-space:nowrap; }
.ct-works td.num{ text-align:right; padding-right:0; white-space:nowrap; }
.ct-works td.ct-tech{ font-size:8.5pt; font-weight:300; color:var(--ct-label); }
.ct-works .ct-inv{ display:block; color:var(--ct-ink); }
.ct-works .ct-id{ display:block; color:var(--ct-faint); font-size:7pt; margin-top:1.5pt; }
.ct-works tfoot td{
  font-family:var(--ct-sans); font-weight:600; font-size:7pt; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ct-label); padding:7pt 14px 0 0; border:none;
}
.ct-works tfoot td.num{
  font-family:var(--ct-mono); font-weight:500; font-size:9pt; letter-spacing:0; text-transform:none;
  color:var(--ct-ink); text-align:right; padding-right:0; font-variant-numeric:tabular-nums;
}
/* systematische data (nummers, bedragen, datums) krijgen vaste cijferbreedte */
.ct-meta span{ font-variant-numeric:tabular-nums; }

/* ---- slot + handtekeningen ---- */
.ct-end{ margin-top:20pt; }
.ct-closing{ font-family:var(--ct-sans); font-weight:300; font-size:9.5pt; line-height:1.6; margin:0; }
.ct-sign{ display:grid; grid-template-columns:1fr 1fr; gap:48px; padding-top:32pt; }
.ct-sign-line{ border:none; border-bottom:0.5pt solid var(--ct-ink); width:160px; height:56px; }
.ct-sign-lab{ margin-top:7pt; line-height:1.5; }
.ct-sign-lab .sl-role{ display:block; font-family:var(--ct-sans); font-weight:600; font-size:7pt; letter-spacing:0.08em; text-transform:uppercase; color:var(--ct-label); }
.ct-sign-lab .sl-name{ display:block; font-family:var(--ct-sans); font-weight:300; font-size:8pt; color:var(--ct-label); margin-top:2pt; }
.print-note{ font-family:var(--mono); font-size:11px; color:var(--ink-45); letter-spacing:.01em; margin:0 0 18px; }
.ct-watermark, .ct-print-foot{ display:none; }
.contract.is-concept .ct-watermark{ display:grid; place-items:center; position:absolute; inset:0; pointer-events:none; z-index:0;
  font-family:var(--ct-sans); font-weight:800; font-size:140px; letter-spacing:.1em; color:rgba(53,29,29,.06); transform:rotate(-32deg); }
body.neu .ct-party{ border:none; box-shadow:none; }

@media print{
  /* aparte A4-pagina mét marges voor doorlopende documenten (cert blijft full-bleed) */
  @page doc{ size: A4; margin: 22mm 20mm 22mm 20mm;
    @bottom-right{ content: "pagina " counter(page) " / " counter(pages); font-family:'Inter',sans-serif; font-weight:300; font-size:7pt; color:#8E8E93; }
    @bottom-left{ content: string(ctfoot); font-family:'Inter',sans-serif; font-weight:300; font-size:7pt; letter-spacing:.01em; color:#8E8E93; }
  }
  .contract{ page: doc; box-shadow:none !important; border:none !important; width:auto; max-width:none; padding:0;
    --ct-bg:#FFFFFF !important; --ct-ink:#0A0A0A !important; --ct-label:#636366 !important; --ct-faint:#8E8E93 !important; --ct-rule:#D1D1D6 !important; }
  .contract .ct-blank{ border-color:#000 !important; }
  .txn-stage.page{ padding:0 !important; max-width:none !important; }
  .txn-stage > .back, .txn-toolbar, .print-note, .txn-foot-actions{ display:none !important; }
  /* zwevende UI nooit meeprinten (deadline-banner dekte tekst af + gaf lege pagina) */
  .bruikleen-banner, #bruikleen-alert, .rw-conn-banner, .rw-sync-status, .tw-panel, .topbar,
  #group-picker, .peek-overlay, .login-overlay{ display:none !important; }
  /* paginabreuk-gedrag */
  .contract .ct-head{ break-after:avoid; }
  .contract .ct-title{ break-after:avoid; }
  .contract .ct-parties{ break-inside:avoid; }
  .contract .ct-art{ break-inside:avoid; }
  .contract .ct-art h2{ break-after:avoid; }
  .contract .ct-work, .contract .ct-passport, .contract .ct-fillpara,
  .contract .ct-execrow, .contract .ct-sign, .contract .ct-works tr{ break-inside:avoid; }
  .contract .ct-end{ break-inside:avoid; }
  .contract p{ orphans:3; widows:3; }
  /* creditline naar de pagina-marge (string-set) i.p.v. een zwevend element:
     zo dekt hij nooit de tekst af en veroorzaakt hij geen spookpagina. */
  .contract .ct-print-foot{ string-set: ctfoot content(text); display:block; position:static;
    height:0; margin:0; padding:0; overflow:hidden; visibility:hidden; }
  /* schermspacer onder het document niet meeprinten (gaf extra lege pagina) */
  .ct-tail{ display:none !important; }
  .contract.is-concept .ct-watermark{ position:fixed; top:50%; left:0; right:0; transform:translateY(-50%) rotate(-32deg); }
}

/* ============================================================
   NIEUW WERK — prijsdashboard (3 widgets)
   ============================================================ */
.nieuw-head{ padding-top: 80px; padding-bottom: 28px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.nieuw-head h1{ font-weight:600; font-size: clamp(34px,5vw,56px); letter-spacing:-.02em; margin:0; }
.nieuw-head .meta{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); text-align:right; line-height:1.5; }
.nieuw-head .meta .nr{ color: var(--gold); font-weight:600; }

.nw-grid{ display:grid; grid-template-columns: 1.08fr 1fr 1fr; gap:16px; align-items:start; padding-bottom: 112px; }
@media (max-width: 1080px){ .nw-grid{ grid-template-columns: 1fr 1fr; } .nw-result{ grid-column:1/-1; } }
@media (max-width: 720px){ .nw-grid{ grid-template-columns: 1fr; } .nw-result{ grid-column:auto; } }

.nw-panel{ border:1px solid var(--abyss); border-radius:var(--r); background:var(--card); display:flex; flex-direction:column; }
.nw-panel .nw-ph{ padding:16px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.nw-panel .nw-ph .t{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); }
.nw-panel .nw-ph .n{ font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:0; }
.nw-panel .nw-bd{ padding:20px; display:flex; flex-direction:column; gap:20px; }
.nw-result{ box-shadow: var(--sh-industrial); }

.nw-field{ display:flex; flex-direction:column; gap:9px; }
.nw-field > label{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); }

/* segmented (afwerking) */
.nw-seg{ display:grid; grid-template-columns: repeat(3,1fr); gap:8px; }
.nw-seg button{ font-family:var(--mono); font-size:12px; letter-spacing:.02em; padding:11px 8px; border:1px solid var(--line); border-radius:var(--r); background:var(--card); color:var(--ink-45); transition: all .3s var(--ease); display:flex; flex-direction:column; align-items:center; gap:7px; }
.nw-seg button .sw{ width:12px; height:12px; border-radius:1px; border:1px solid rgba(0,0,0,.14); }
.nw-seg button:hover{ border-color:var(--abyss); color:var(--ink); }
.nw-seg button.active{ background:var(--abyss); border-color:var(--abyss); color:var(--pure); }

/* dims */
.nw-dims{ display:grid; grid-template-columns: repeat(3,1fr); gap:8px; }
.nw-input-wrap{ position:relative; }
.nw-input{ width:100%; font-family:var(--display); font-size:14.5px; letter-spacing:-.01em; padding:11px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--card); color:var(--ink); transition: border-color .3s var(--ease); }
.nw-input:focus{ outline:none; border-color:var(--cobalt); }
.nw-input::placeholder{ color:var(--ink-25); }
.nw-unit{ position:absolute; right:11px; top:50%; transform:translateY(-50%); font-family:var(--mono); font-size:11px; color:var(--ink-25); pointer-events:none; }

/* uitvoering checkboxes */
.nw-checks{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.nw-check{ display:flex; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--line); border-radius:var(--r); cursor:pointer; font-size:13.5px; letter-spacing:-.01em; transition: all .3s var(--ease); user-select:none; }
.nw-check:hover{ border-color:var(--abyss); }
.nw-check.on{ border-color:var(--abyss); background:var(--gray-50); }
.nw-check.full{ grid-column:1/-1; }
.nw-check .box{ width:16px; height:16px; border:1px solid var(--ink-45); border-radius:1px; display:grid; place-items:center; flex:none; transition: all .3s var(--ease); }
.nw-check.on .box{ background:var(--cobalt); border-color:var(--cobalt); }
.nw-check .box svg{ width:11px; height:11px; opacity:0; transition: opacity .2s var(--ease); }
.nw-check.on .box svg{ opacity:1; }
.nw-divider{ height:1px; background:var(--line); margin:2px 0; }

/* ijk widget */
.nw-ijk-empty{ font-family:var(--mono); font-size:12px; color:var(--ink-45); line-height:1.6; padding:20px 0; text-align:center; letter-spacing:0; }
.nw-ijk-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.nw-ijk{ border:1px solid var(--line); border-radius:var(--r); padding:10px; cursor:pointer; text-align:left; background:var(--card); display:flex; flex-direction:column; gap:8px; transition: all .3s var(--ease); }
.nw-ijk:hover{ border-color:var(--abyss); }
.nw-ijk.sel{ border-color:var(--cobalt); box-shadow: 3px 3px 0 0 var(--cobalt); }
.nw-ijk .thumb{ aspect-ratio: 3/4; background:var(--gray-50); border:1px solid var(--line-soft); border-radius:1px; position:relative; overflow:hidden; }
.nw-ijk .thumb .sw{ position:absolute; right:6px; top:6px; width:9px; height:9px; border-radius:1px; border:1px solid rgba(0,0,0,.18); }
.nw-ijk .thumb image-slot{ width:100%; height:100%; }
.nw-ijk .ij-id{ font-family:var(--mono); font-weight:600; font-size:12px; letter-spacing:0; }
.nw-ijk .ij-meta{ font-family:var(--mono); font-size:10.5px; color:var(--ink-45); letter-spacing:0; display:flex; flex-direction:column; gap:2px; }
.nw-ijk .ij-meta .pr{ color:var(--ink); font-weight:600; }

/* result widget */
.nw-price{ }
.nw-price .lab{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); }
.nw-price .big{ font-family:var(--mono); font-weight:600; font-size:44px; letter-spacing:-.02em; line-height:1; margin-top:10px; }
.nw-price .excl{ font-family:var(--mono); font-size:12px; color:var(--ink-45); margin-top:8px; letter-spacing:0; }
.nw-break{ border-top:1px solid var(--abyss); }
.nw-break .br{ display:grid; grid-template-columns: 96px 1fr; gap:14px; padding:11px 0; border-bottom:1px solid var(--line-soft); align-items:baseline; }
.nw-break .br .k{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); }
.nw-break .br .v{ font-family:var(--mono); font-size:13px; letter-spacing:0; text-align:right; }
.nw-break .br .v.acc{ color:var(--gold); font-weight:600; }
.nw-break .br .v.muted{ color:var(--ink-25); }
.nw-actions{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; padding:20px; border-top:1px solid var(--line); }
.nw-actions .btn{ width:100%; justify-content:center; text-align:center; }
.nw-toast{ position:fixed; left:50%; bottom:32px; transform:translateX(-50%) translateY(20px); background:var(--abyss); color:var(--pure); font-family:var(--mono); font-size:12px; letter-spacing:.04em; padding:13px 20px; border-radius:var(--r); box-shadow: var(--sh-industrial); opacity:0; pointer-events:none; transition: all .4s var(--ease); z-index:100; }
.nw-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ============================================================
   NEUMORPHIC SOFT-UI LAYER  (scoped to body.neu — Archief + Nieuw)
   Same-tone surfaces; raised = light/shade duo, pressed = inset.
   ============================================================ */
body.neu{ background: var(--canvas); }
body.neu .topbar{ background: color-mix(in srgb, var(--canvas) 86%, transparent); border-bottom-color: transparent; }

/* ---- Archief cards ---- */
body.neu .card{
  background: var(--neu-bg); border: none; border-radius: var(--neu-rad);
  box-shadow: var(--sh-neu); padding: 18px;
}
body.neu .card:hover{
  border-color: transparent; box-shadow: var(--sh-neu-lg); transform: translateY(-3px);
}
body.neu .card .ph{
  border: none; border-radius: var(--neu-rad-s); background: var(--neu-bg);
  box-shadow: var(--sh-neu-sm);
}
/* Verkochte werken: beeld in de kaart naar achter geduwd (reliëf naar binnen) */
body.neu .card.sold .ph{ box-shadow: var(--sh-neu-inset-sm); }
body.neu .card.sold .ph::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  box-shadow: var(--sh-neu-inset); pointer-events:none; z-index:2;
}
body.neu .card.sold .ph image-slot{ filter: saturate(.92) brightness(.97); }
body.neu .card.sold:hover{ transform:none; }
body.neu .card image-slot{ border: none; }
body.neu .card .num-tag{ border-radius: 8px; box-shadow: 2px 2px 5px var(--neu-shade); }
body.neu .card .foot{ border-top-color: rgba(168,170,180,.30); }

/* ---- filter pills ---- */
body.neu .filters button{
  background: var(--neu-bg); border: none; border-radius: 999px;
  box-shadow: var(--sh-neu-sm); color: var(--ink-45); padding: 10px 18px;
}
body.neu .filters button:hover{ color: var(--ink); }
body.neu .filters button.active{
  background: var(--btn-bg); color: var(--btn-ink); font-weight:600; box-shadow: var(--sh-neu-sm);
}

/* ---- status pills + chips ---- */
body.neu .pill{ box-shadow: var(--sh-neu-inset-sm); border-radius: 7px; }
body.neu .pill.sold,
body.neu .pill.loewe{ box-shadow: var(--sh-neu-sm); }

/* ---- Werk detail ---- */
body.neu .detail-ph{
  border: none; border-radius: var(--neu-rad); background: var(--neu-bg);
  box-shadow: var(--sh-neu);
}
body.neu .spec-table{ border-top-color: rgba(168,170,180,.5); }
body.neu .spec-table .r{ border-bottom-color: rgba(168,170,180,.24); }
body.neu .breakdown{
  background: var(--neu-bg); border: none; border-radius: var(--neu-rad);
  box-shadow: var(--sh-neu-inset); padding: 26px;
}
body.neu .btn{ border: none; box-shadow: var(--sh-neu-sm); }
body.neu .btn:hover{ box-shadow: var(--sh-neu); transform: translateY(-2px); }
body.neu .btn.ghost{ background: var(--neu-bg); color: var(--ink); }

/* ---- Nieuw — panels ---- */
body.neu .nw-panel{
  background: var(--neu-bg); border: none; border-radius: var(--neu-rad);
  box-shadow: var(--sh-neu);
}
body.neu .nw-result{ box-shadow: var(--sh-neu-lg); }
body.neu .nw-panel .nw-ph{ border-bottom-color: rgba(168,170,180,.30); }

/* segmented (afwerking) */
body.neu .nw-seg button{
  background: var(--neu-bg); border: none; border-radius: var(--neu-rad-s);
  box-shadow: var(--sh-neu-sm); color: var(--ink-45);
}
body.neu .nw-seg button:hover{ color: var(--ink); }
body.neu .nw-seg button.active{
  background: var(--neu-bg); color: var(--cobalt); box-shadow: var(--sh-neu-inset-sm);
}

/* inputs — recessed wells */
body.neu .nw-input{
  background: var(--neu-bg); border: none; box-shadow: var(--sh-neu-inset-sm); border-radius: var(--neu-rad-s);
}
body.neu .nw-input:focus{ box-shadow: var(--sh-neu-inset-sm), inset 0 0 0 1.5px var(--cobalt); }

/* uitvoering checks */
body.neu .nw-check{
  border: none; border-radius: var(--neu-rad-s); box-shadow: var(--sh-neu-sm);
}
body.neu .nw-check:hover{ box-shadow: var(--sh-neu); }
body.neu .nw-check.on{ background: var(--neu-bg); box-shadow: var(--sh-neu-inset-sm); }
body.neu .nw-divider{ background: rgba(168,170,180,.30); }

/* ijk reference cards */
body.neu .nw-ijk{
  border: none; border-radius: var(--neu-rad-s); box-shadow: var(--sh-neu-sm);
}
body.neu .nw-ijk:hover{ box-shadow: var(--sh-neu); }
body.neu .nw-ijk.sel{ box-shadow: var(--sh-neu-inset-sm); }
body.neu .nw-ijk.sel .ij-id{ color: var(--cobalt); }
body.neu .nw-ijk .thumb{
  border: none; border-radius: 10px; background: var(--neu-bg); box-shadow: var(--sh-neu-inset-sm);
}

/* result breakdown lines */
body.neu .nw-break{ border-top-color: rgba(168,170,180,.5); }
body.neu .nw-break .br{ border-bottom-color: rgba(168,170,180,.24); }
body.neu .nw-actions{ border-top-color: rgba(168,170,180,.30); }

/* ---- externe beeldbibliotheek (neu) ---- */
body.neu .drive-grid .gi{ border:none; box-shadow: var(--sh-neu-inset-sm); }
body.neu .drive-add{ border:none; border-radius: var(--neu-rad-s); box-shadow: var(--sh-neu-sm); }
body.neu .drive-add:hover{ box-shadow: var(--sh-neu); color: var(--cobalt); }

/* ============================================================
   ARCHIEF-UITBREIDING — statussen, archiveringsnr, werkpagina-tabs,
   invulvelden, lijsten (provenance/logistiek/vault), nieuw-acties
   ============================================================ */

/* ---- nieuwe statuspillen ---- */
.pill.beschikbaar{ border-color:var(--cobalt); color:var(--cobalt); }
.pill.gereserveerd{ border-color:var(--gold); color:var(--gold); }
.pill.consignatie{ border-color:var(--ink-25); color:var(--ink-45); }
.pill.uitgeleend{ border-color:var(--ink-45); color:var(--ink-70); }
.pill.verkocht{ background:var(--abyss); border-color:var(--abyss); color:var(--pure); }
.pill.vernietigd{ border-color:#A33526; color:#A33526; }

/* ---- archief-kaart: archiveringsnr + 'nieuw' ---- */
.card .cap .arch-tag{ font-family:var(--mono); font-size:11px; color:var(--gold); letter-spacing:.02em; margin-top:-3px; }
.card .num-tag.new-tag{ left:auto; right:8px; background:var(--cobalt); }

/* ---- werkpagina kop + tabs ---- */
.werk-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:30px; }
.detail .werk-top .back, .werk-page .werk-top .back{ margin-bottom:0; }
.saved-flag{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:#2E7D52; opacity:0; transition:opacity .3s var(--ease); }
.saved-flag.show{ opacity:1; }
.werk-head{ margin-bottom:20px; }
.wh-codes{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.wh-foap{ font-family:var(--mono); font-weight:600; font-size:clamp(24px,3.4vw,38px); letter-spacing:-.01em; }
.wh-arch{ font-family:var(--mono); font-weight:600; font-size:15px; color:var(--gold); letter-spacing:.02em; }
.wh-new{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--pure); background:var(--cobalt); padding:3px 8px; border-radius:7px; }
.wh-title{ font-size:18px; color:var(--ink-70); margin-top:10px; letter-spacing:-.01em; }
.wh-var{ color:var(--ink-45); }
.wh-pills{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }

/* save button + exhibition cards */
.wt-actions{ display:flex; align-items:center; gap:14px; }
.save-btn{ background:var(--gold); border:1px solid var(--gold); color:var(--pure); }
.save-btn:hover{ background:var(--gold-hover); border-color:var(--gold-hover); box-shadow:4px 4px 0 0 var(--gold-hover); }
.ecard{ border:1px solid var(--line); border-radius:var(--r); padding:16px; margin-bottom:12px; display:flex; flex-direction:column; gap:12px; background:var(--card); }
.ecard-top{ display:grid; grid-template-columns:1fr 24px; gap:10px; align-items:center; }
.ecard-top .ed-input{ font-weight:500; }
.ed-month{ font-family:var(--display); font-size:14.5px; letter-spacing:-.01em; }
.ed-linkrow{ display:flex; gap:10px; align-items:center; }
.ed-linkrow .ed-input{ flex:1; }
.ed-openlink{ font-family:var(--mono); font-size:11px; color:var(--cobalt); text-decoration:none; white-space:nowrap; }
.ed-openlink:hover{ text-decoration:underline; }

.tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.tabs .tab{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-45); background:none; border:none; padding:12px 14px; border-bottom:2px solid transparent; transition:all .3s var(--ease); }
.tabs .tab:hover{ color:var(--ink); }
.tabs .tab.on{ color:var(--ink); border-bottom-color:var(--gold); }

/* ---- invulvelden ---- */
.ed-group{ margin-top:16px; }
.tabpane > .ed-group:first-child{ margin-top:0; }
.ed-gh{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); margin-bottom:14px; }
.ed-field{ display:flex; flex-direction:column; gap:7px; }
.ed-label{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); }
.ed-input,.ed-area,.ed-select{ width:100%; font-family:var(--display); font-size:14.5px; letter-spacing:-.01em; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:11px 12px; transition:border-color .3s var(--ease); }
.ed-input:focus,.ed-area:focus,.ed-select:focus{ outline:none; border-color:var(--cobalt); }
.ed-area{ min-height:84px; resize:vertical; line-height:1.5; }
.ed-row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ed-row3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.ed-static{ font-size:14.5px; padding:11px 0; }
.loc-link{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:13px 14px; cursor:pointer;
  font-size:14.5px; letter-spacing:-.01em; color:var(--ink); transition:all .2s var(--ease); }
.loc-link:hover{ border-color:var(--cobalt); }
.loc-link .loc-ico{ color:var(--cobalt); font-size:13px; flex:none; }
body.neu .loc-link{ border:none; box-shadow:var(--sh-neu-inset-sm); }
.ed-selectwrap{ position:relative; }
.ed-select{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:34px; font-family:var(--display); font-size:14.5px; letter-spacing:-.01em; }
.ed-chev{ position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--ink-45); font-size:11px; }
.ed-hint{ font-size:13px; color:var(--ink-45); margin:0 0 14px; line-height:1.5; }
.ed-seg2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ed-seg2 button{ font-family:var(--mono); font-size:12px; padding:11px; border:1px solid var(--line); border-radius:var(--r); background:var(--card); color:var(--ink-45); transition:all .3s var(--ease); }
.ed-seg2 button.on{ border-color:var(--abyss); background:var(--gray-50); color:var(--ink); }

/* ---- lijstrijen ---- */
.lhead,.lrow{ display:grid; gap:10px; align-items:center; }
.lhead{ font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-25); padding:0 2px 8px; }
.lrow{ margin-bottom:8px; }
.lhead-prov,.lrow-prov{ grid-template-columns: 92px 1fr 1fr 24px 24px; }
.lhead-ex,.lrow-ex{ grid-template-columns: 64px 1fr 1fr 24px; }
.lhead-doc,.lrow-doc{ grid-template-columns: 1.15fr 1fr 92px 24px; }
.lrow .ed-input,.lrow .ed-select{ padding:9px 10px; font-size:13px; }
.lrow-del{ width:24px; height:24px; border-radius:50%; color:var(--ink-25); font-size:15px; line-height:1; display:grid; place-items:center; background:none; transition:all .3s var(--ease); }
.lrow-del:hover{ color:var(--pure); background:var(--abyss); }
.lrow-add{ margin-top:8px; font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-45); background:transparent; border:1px dashed var(--line); border-radius:var(--r); padding:11px 14px; transition:all .3s var(--ease); width:100%; }
.lrow-add:hover{ border-color:var(--gold); color:var(--gold); }
.lrow-empty{ font-family:var(--mono); font-size:12px; color:var(--ink-45); padding:10px 2px; }
.doc-link .doc-open{ font-family:var(--mono); font-size:11px; color:var(--cobalt); text-decoration:none; }
.doc-link .doc-set{ font-family:var(--mono); font-size:11px; color:var(--ink-45); background:none; border:1px solid var(--line); border-radius:var(--r); padding:8px 10px; width:100%; transition:all .3s var(--ease); }
.doc-link .doc-set:hover{ border-color:var(--cobalt); color:var(--cobalt); }
.vault-note,.nw-addnote{ font-size:12px; color:var(--ink-45); line-height:1.5; margin-top:12px; }
.quote{ font-family:var(--mono); font-size:11.5px; letter-spacing:.02em; color:var(--ink-45); margin-top:14px; padding:11px 14px; border-radius:var(--r); background:var(--gray-50); }
.quote.ok{ color:var(--gold); }
.btn.danger{ border:1px solid #A33526; color:#A33526; background:var(--surface); }
.btn.danger:hover{ background:#A33526; color:#FFFFFF; box-shadow:4px 4px 0 0 #7d2619; }

/* ---- nieuw: toevoegen-acties ---- */
.nw-actions{ display:flex; flex-direction:column; gap:12px; padding:20px; border-top:1px solid var(--line); }
.nw-addrow{ display:grid; grid-template-columns:1fr 1.5fr; gap:12px; }
.nw-addlbl{ display:flex; flex-direction:column; gap:6px; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); }
.nw-addhint{ text-transform:none; letter-spacing:0; color:var(--ink-25); }
.nw-mini{ font-family:var(--display); font-size:14px; padding:9px 11px; border:1px solid var(--line); border-radius:var(--r); background:var(--card); color:var(--ink); }
.nw-mini:focus{ outline:none; border-color:var(--cobalt); }
.nw-add{ width:100%; justify-content:center; }

/* ============================================================
   NEU-varianten voor de uitbreiding
   ============================================================ */
body.neu .tabs{ border-bottom:none; }
body.neu .tabs .tab{ border:none; border-radius:var(--neu-rad-s); box-shadow:var(--sh-neu-sm); padding:11px 16px; }
body.neu .tabs .tab.on{ box-shadow:var(--sh-neu-inset-sm); color:var(--gold); }
body.neu .ed-input,body.neu .ed-area,body.neu .ed-select,body.neu .nw-mini{ border:none; background:var(--neu-bg); box-shadow:var(--sh-neu-inset-sm); border-radius:var(--neu-rad-s); }
body.neu .ed-input:focus,body.neu .ed-area:focus,body.neu .ed-select:focus,body.neu .nw-mini:focus{ box-shadow:var(--sh-neu-inset-sm), inset 0 0 0 1.5px var(--cobalt); }
body.neu .ed-seg2 button{ border:none; box-shadow:var(--sh-neu-sm); border-radius:var(--neu-rad-s); }
body.neu .ed-seg2 button.on{ box-shadow:var(--sh-neu-inset-sm); color:var(--gold); background:var(--neu-bg); }
body.neu .lrow-add,body.neu .doc-link .doc-set{ border:none; box-shadow:var(--sh-neu-sm); border-radius:var(--neu-rad-s); }
body.neu .lrow-add:hover{ box-shadow:var(--sh-neu); }
body.neu .quote{ background:var(--neu-bg); box-shadow:var(--sh-neu-inset-sm); }
body.neu .btn.danger{ border:none; box-shadow:var(--sh-neu-sm); }
body.neu .save-btn{ border:none; box-shadow:var(--sh-neu-sm); }
body.neu .ecard{ border:none; box-shadow:var(--sh-neu); border-radius:var(--neu-rad-s); }

/* ============================================================
   DICHTHEID (Tweaks) — geplaatst na de neu-laag zodat het wint
   ============================================================ */
body[data-density="compact"] .grid{ gap:12px; }
body[data-density="compact"] .card{ padding:12px; gap:10px; }
body[data-density="compact"] .card .cap{ gap:6px; }
body[data-density="compact"] .card .cap .id{ font-size:13px; }
body[data-density="compact"] .card .cap .arch-tag{ font-size:10px; }
body[data-density="compact"] .card .cap .ttl{ font-size:12.5px; }
body[data-density="compact"] .card .cap .specrow{ font-size:10.5px; }
body[data-density="compact"] .card .foot{ padding-top:10px; }
body[data-density="compact"] .arch-head{ padding-top:40px; padding-bottom:18px; }
body[data-density="ruim"] .grid{ gap:22px; }
body[data-density="ruim"] .card{ padding:22px; gap:18px; }

/* ============================================================
   TWEAKS-PANEEL
   ============================================================ */
.tw-panel{ position:fixed; right:20px; bottom:20px; width:264px; z-index:1000;
  background:var(--pure); border:1px solid var(--abyss); border-radius:2px;
  box-shadow:4px 4px 0 0 var(--abyss); padding:16px 16px 14px; }
.tw-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.tw-title{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.tw-x{ width:24px; height:24px; border:none; background:none; font-size:18px; line-height:1; color:var(--ink-45); cursor:pointer; }
.tw-x:hover{ color:var(--abyss); }
.tw-sec{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-45); margin:0 0 12px; }
.tw-row{ display:flex; flex-direction:column; gap:9px; margin-bottom:16px; }
.tw-lbl{ font-family:var(--mono); font-size:11px; color:var(--ink-70); letter-spacing:.02em; }
.tw-lbl b{ color:var(--cobalt); font-weight:600; }
.tw-seg{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.tw-seg button{ font-family:var(--mono); font-size:11px; padding:9px 4px; border:1px solid var(--line); background:var(--pure); color:var(--ink-45); border-radius:2px; cursor:pointer; transition:all .2s var(--ease); }
.tw-seg button:hover{ border-color:var(--abyss); color:var(--ink); }
.tw-seg button.on{ background:var(--abyss); border-color:var(--abyss); color:var(--pure); }
.tw-range{ width:100%; accent-color:var(--cobalt); }
.tw-note{ font-family:var(--display); font-size:11px; color:var(--ink-45); line-height:1.5; letter-spacing:-.01em; }

/* ---------------- NIEUW-WERK MODAL ---------------- */
.nwm-overlay{ position:fixed; inset:0; z-index:3000; background:rgba(10,10,10,.34); display:grid; place-items:center;
  padding:24px; opacity:0; transition:opacity .2s var(--ease); }
.nwm-overlay.show{ opacity:1; }
.nwm-card{ position:relative; width:min(440px,94vw); background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--sh-industrial); padding:28px; transform:translateY(8px); transition:transform .2s var(--ease); }
.nwm-card.nwm-wide{ width:min(860px,94vw); max-height:90vh; overflow:auto; }
.nwm-card.nwm-xwide{ width:min(1140px,96vw); max-height:92vh; overflow:auto; }
.nwm-split{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.nwm-zones{ display:grid; grid-template-columns:1fr 1.05fr 1fr; gap:22px; align-items:start; }
.nwm-zlabel{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-25); margin-bottom:12px; }
.nwm-zlabel-c{ display:flex; align-items:center; justify-content:space-between; }
.nwm-gear{ width:24px; height:24px; border:none; background:none; color:var(--ink-45); font-size:14px; cursor:pointer; border-radius:50%; line-height:1; }
.nwm-gear:hover{ color:var(--ink); }
.nwm-zone-c{ position:relative; background:var(--surface-2); border-radius:var(--r); padding:16px; }
body.neu .nwm-zone-c{ background:transparent; box-shadow:var(--sh-neu-inset-sm); }
.nwm-ijk{ display:flex; gap:10px; align-items:center; padding:10px; background:var(--surface); border-radius:var(--r); margin-bottom:12px; }
body.neu .nwm-ijk{ box-shadow:var(--sh-neu-sm); }
.nwm-ijk-thumb{ width:46px; height:60px; flex:none; border-radius:3px; overflow:hidden; background:var(--gray-50); }
.nwm-ijk-thumb image-slot{ width:100%; height:100%; display:block; pointer-events:none; }
.nwm-ijk-meta{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.nwm-ijk-meta .ed-label{ margin-bottom:2px; }
.nwm-ijk-meta b{ font-size:13px; color:var(--ink); }
.nwm-ijk-dims{ font-size:11px; color:var(--ink-45); }
.nwm-calc-rows{ display:flex; flex-direction:column; }
.nwm-calc-rows .cr{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:7px 0; font-size:12.5px; color:var(--ink-70); border-bottom:1px solid var(--line-soft); }
.nwm-calc-rows .cr small{ font-family:var(--mono); font-size:9.5px; color:var(--ink-45); letter-spacing:.02em; }
.nwm-calc-rows .cr.total{ border-bottom:none; padding-top:10px; }
.nwm-calc-rows .cr.total span{ font-weight:600; color:var(--ink); }
.nwm-calc-rows .cr.total b{ font-size:17px; font-weight:700; color:var(--ink); }
.nwm-calc-rows .cr.comm b{ color:var(--gold); }
.nwm-calc-empty{ font-family:var(--mono); font-size:11px; color:var(--ink-45); line-height:1.5; padding:10px 2px; }
.nwm-comm{ margin-top:16px; }
.nwm-payout{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:10px; margin-top:14px; }
.np-cell{ display:flex; flex-direction:column; gap:3px; padding:11px 13px; border-radius:var(--r); }
.np-cell .np-lbl{ font-family:var(--mono); font-size:8.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); line-height:1.4; }
.np-artist{ background:var(--gold); }
.np-artist .np-lbl{ color:rgba(255,255,255,.7); }
.np-artist b{ font-size:18px; font-weight:700; letter-spacing:-.01em; color:#fff; }
html[data-theme="dark"] .np-artist .np-lbl{ color:rgba(10,10,10,.6); }
html[data-theme="dark"] .np-artist b{ color:var(--abyss); }
.np-comm{ background:var(--surface); }
body.neu .np-comm{ box-shadow:var(--sh-neu-inset-sm); }
.np-comm span:last-child{ font-size:15px; font-weight:500; color:var(--ink-70); letter-spacing:-.01em; }
/* zone B selecteerbaar */
.nwc{ position:relative; }
.nwc.sel{ outline:2px solid var(--gold); outline-offset:-1px; }
.nwc-badge{ position:absolute; top:6px; left:6px; z-index:2; font-family:var(--mono); font-size:8px; letter-spacing:.08em; text-transform:uppercase; background:var(--gold); color:#fff; padding:2px 6px; border-radius:2px; }
/* instellingen-popup */
.nwm-settings{ position:absolute; top:44px; right:12px; width:248px; max-height:70vh; overflow:auto; z-index:10;
  background:var(--surface); border:1px solid var(--abyss); box-shadow:var(--sh-industrial); padding:14px; }
body.neu .nwm-settings{ border:none; box-shadow:var(--sh-neu-lg); border-radius:var(--neu-rad-s); }
.set-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
.nwm-x.sm{ position:static; width:20px; height:20px; font-size:15px; }
.set-sec{ font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin:12px 0 6px; }
.set-row{ display:grid; grid-template-columns:1fr 64px; gap:8px; align-items:center; padding:3px 0; font-size:11.5px; color:var(--ink-70); }
.set-row .ed-input{ padding:6px 8px; font-size:12px; text-align:right; }
.set-reset{ width:100%; margin-top:12px; font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-45); background:none; border:1px solid var(--line); border-radius:var(--r); padding:8px; cursor:pointer; }
.set-reset:hover{ color:var(--ink); border-color:var(--ink); }
@media(max-width:980px){ .nwm-card.nwm-xwide{ width:min(560px,94vw); } .nwm-zones{ grid-template-columns:1fr; gap:20px; } .nwm-settings{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); } }
/* prijsblok */
.nwm-price-block{ display:flex; flex-direction:column; gap:10px; padding-top:14px; margin-top:4px; border-top:1px solid var(--line-soft); }
.nwm-price-hint{ font-size:11.5px; color:var(--ink-45); margin:14px 0 0; padding-top:14px; border-top:1px solid var(--line-soft); }
.nwm-suggest{ text-align:left; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); padding:10px 12px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.02em; color:var(--gold); cursor:pointer; transition:all .2s var(--ease); }
.nwm-suggest:hover{ border-color:var(--gold); }
.nwm-suggest span{ color:var(--ink-45); font-size:10px; }
body.neu .nwm-suggest{ border:none; box-shadow:var(--sh-neu-sm); }
/* vergelijkbare werken */
.nwm-right{ background:var(--surface-2); border-radius:var(--r); padding:16px; align-self:stretch; }
body.neu .nwm-right{ background:transparent; box-shadow:var(--sh-neu-inset-sm); }
.nwm-compare-h{ font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:-.01em; color:var(--ink); }
.nwm-compare-sub{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); margin:3px 0 12px; }
.nwm-compare-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.nwm-compare-empty{ grid-column:1 / -1; font-family:var(--mono); font-size:11.5px; color:var(--ink-45); line-height:1.5; padding:18px 4px; }
.nwc{ display:flex; flex-direction:column; gap:8px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:8px; transition:all .2s var(--ease); }
.nwc:hover{ border-color:var(--ink); }
body.neu .nwc{ border:none; box-shadow:var(--sh-neu-sm); }
.nwc-thumb{ width:100%; aspect-ratio:3/4; border-radius:3px; overflow:hidden; background:var(--gray-50); display:block; }
.nwc-thumb image-slot{ width:100%; height:100%; display:block; pointer-events:none; }
.nwc-meta{ display:flex; flex-direction:column; gap:2px; }
.nwc-id{ font-size:12px; font-weight:600; letter-spacing:0; color:var(--ink); }
.nwc-dims{ font-size:11px; color:var(--ink-45); }
.nwc-price{ font-size:12px; font-weight:600; letter-spacing:0; white-space:nowrap; color:var(--ink); }
.nwm-overlay.show .nwm-card{ transform:none; }
body.neu .nwm-card{ border:none; box-shadow:var(--sh-neu-lg); border-radius:var(--neu-rad); }
.nwm-x{ position:absolute; top:14px; right:14px; width:26px; height:26px; border:none; background:none; font-size:18px; color:var(--ink-45); cursor:pointer; }
.nwm-x:hover{ color:var(--abyss); }
.nwm-h{ font-size:19px; font-weight:600; letter-spacing:-.02em; margin-bottom:18px; color:var(--ink); }
.nwm-codes{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px; }
.nwm-code{ background:var(--gray-50); border-radius:var(--r); padding:12px 14px; display:flex; flex-direction:column; gap:4px; }
body.neu .nwm-code{ background:transparent; box-shadow:var(--sh-neu-inset-sm); }
.nwm-lbl{ font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-45); }
.nwm-foap{ font-family:var(--mono); font-weight:600; font-size:16px; letter-spacing:0; color:var(--gold); }
.nwm-arch{ font-size:14px; color:var(--ink-70); }
.nwm-body{ display:flex; flex-direction:column; gap:14px; }
.nwm-f{ display:flex; flex-direction:column; gap:6px; }
.nwm-row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.nwm-row3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.nwm-toggle{ display:flex; flex-direction:column; gap:12px; margin-top:2px; }
.nwm-tg-seg{ display:grid; grid-template-columns:1fr 1fr; gap:6px; background:var(--gray-50); border-radius:var(--r); padding:4px; }
body.neu .nwm-tg-seg{ background:transparent; box-shadow:var(--sh-neu-inset-sm); }
.nwm-tg-seg button{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; padding:9px 4px;
  border:none; background:transparent; color:var(--ink-45); border-radius:6px; cursor:pointer; transition:all .25s var(--ease); }
.nwm-tg-seg button.on{ background:var(--abyss); color:var(--pure); }
.nwm-setsize{ display:flex; flex-direction:column; gap:6px; }
.nwm-foot{ display:flex; gap:10px; margin-top:24px; }
.nwm-foot .btn{ flex:1; }
.nwm-note{ font-size:11.5px; color:var(--ink-45); line-height:1.5; letter-spacing:-.01em; margin:14px 0 0; }

/* ---------------- FICHE — twee niveaus, code-copy, notitie, SEO, upload, save-bar ---------------- */
.ed-codes-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.code-copy{ display:inline-flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:8px 12px; cursor:pointer; transition:all .2s var(--ease); }
.code-copy .id{ color:var(--ink); }
.code-copy:hover{ border-color:var(--abyss); }
.code-copy .id{ font-weight:600; font-size:14px; }
.code-copy.sub{ background:transparent; }
.code-copy .arch-tag{ font-size:12px; color:var(--ink-45); }
.code-copy .cc-ico{ color:var(--ink-25); font-size:12px; }
.code-copy:hover .cc-ico{ color:var(--cobalt); }
body.neu .code-copy{ border:none; box-shadow:var(--sh-neu-sm); background:var(--neu-bg); }

.more-toggle{ display:flex; align-items:center; justify-content:space-between; width:100%; margin:6px 0 18px;
  background:transparent; border:none; border-top:1px solid var(--line-soft); padding:16px 2px 0; cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); transition:color .2s var(--ease); }
.more-toggle:hover{ color:var(--ink); }
.more-toggle .mt-chev{ transition:transform .25s var(--ease); }
.more-toggle.open .mt-chev{ transform:rotate(180deg); }

.note-preview{ cursor:pointer; padding:4px 0 2px; }
.note-preview .np-text{ font-size:13.5px; line-height:1.55; color:var(--ink-70); letter-spacing:-.01em; margin:0 0 8px; }
.note-preview .np-empty{ font-size:13px; color:var(--ink-45); font-style:italic; margin:0 0 8px; }
.note-preview .np-edit{ font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--cobalt); }
.note-preview:hover .np-edit{ text-decoration:underline; }

.seo-field{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left;
  background:var(--gray-50); border:1px solid var(--line); border-radius:var(--r); padding:11px 14px; cursor:pointer; transition:all .2s var(--ease); }
.seo-field:hover{ border-color:var(--abyss); }
.seo-field .seo-name{ font-size:12px; color:var(--ink-70); word-break:break-all; }
.seo-field .cc-ico{ color:var(--ink-25); font-size:13px; flex:none; }
.seo-field:hover .cc-ico{ color:var(--cobalt); }
body.neu .seo-field{ border:none; box-shadow:var(--sh-neu-inset-sm); }

.icon-util{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink-45); background:transparent;
  border:1px solid var(--line); border-radius:var(--r); padding:8px 12px; cursor:pointer; transition:all .2s var(--ease); }
.icon-util:hover{ border-color:var(--abyss); color:var(--ink); }
.icon-util.danger:hover{ border-color:var(--cobalt); color:var(--cobalt); }
.actions-util{ gap:8px; }
body.neu .icon-util{ border:none; box-shadow:var(--sh-neu-sm); }

/* sticky save-bar onderaan de fiche */
.save-bar{ position:sticky; bottom:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:28px; padding:14px 20px; background:rgba(255,255,255,.86); backdrop-filter:blur(10px);
  border-top:1px solid var(--line); border-radius:var(--r) var(--r) 0 0; }
body.neu .save-bar{ box-shadow:0 -6px 20px -14px rgba(40,44,40,.4); border-top:none; }
.save-bar .sb-flag{ font-family:var(--mono); font-size:11px; letter-spacing:.02em; color:var(--ink-45); transition:color .2s var(--ease); }
.save-bar .sb-flag.flash{ color:var(--gold); font-weight:600; }

/* directe foto-upload */
.detail-ph.drag{ outline:2px dashed var(--cobalt); outline-offset:3px; }
.photo-extra{ margin-top:18px; display:flex; flex-direction:column; gap:12px; }
.pe-count{ font-size:11px; color:var(--ink-45); }
.pe-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pe-grid:empty{ display:none; }
.pe-item{ position:relative; aspect-ratio:1; border-radius:var(--r); overflow:hidden; background:var(--gray-50); }
.pe-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.pe-del{ position:absolute; top:5px; right:5px; width:22px; height:22px; border-radius:50%; border:none;
  background:rgba(10,10,10,.6); color:#fff; font-size:14px; line-height:1; cursor:pointer; opacity:0; transition:opacity .2s var(--ease); }
.pe-item:hover .pe-del{ opacity:1; }
.pe-drop{ display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; cursor:pointer;
  border:1px dashed var(--line); border-radius:var(--r); padding:20px 16px; color:var(--ink-45);
  font-size:13px; letter-spacing:-.01em; transition:all .2s var(--ease); }
.pe-drop:hover,.pe-drop.drag{ border-color:var(--cobalt); color:var(--ink); background:var(--gray-50); }
.pe-drop .pe-sub{ font-family:var(--mono); font-size:10px; letter-spacing:.02em; color:var(--ink-25); text-transform:none; }
.pe-drive{ margin-top:2px; }
.pe-drive summary{ font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-45); cursor:pointer; padding:4px 0; }
.pe-drive summary:hover{ color:var(--ink); }
.pe-drive-body{ padding-top:10px; }

/* geavanceerd accordion (verzending) */
.adv-acc summary{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink-45); cursor:pointer; padding:6px 0; list-style:none; }
.adv-acc summary::-webkit-details-marker{ display:none; }
.adv-acc summary::before{ content:'\25b8 '; color:var(--ink-25); }
.adv-acc[open] summary::before{ content:'\25be '; }
.adv-acc summary:hover{ color:var(--ink); }
.adv-acc .adv-body{ padding-top:14px; }

/* ---- login-overlay ---- */
.shell[hidden]{ display:none; }
.login-overlay{ position:fixed; inset:0; z-index:3000; display:none; align-items:center; justify-content:center;
  background:var(--canvas); padding:24px; }
.login-overlay.show{ display:flex; }
.login-card{ width:min(360px,92vw); display:flex; flex-direction:column; gap:14px; text-align:left; }
/* Altijd het échte logo (vast lettertype + kerning), nooit getypte tekst. */
.login-wm img{ height:26px; width:auto; display:block; }
html[data-theme="dark"] .login-wm img{ filter:invert(1) brightness(1.6); }
.login-sub{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); margin-top:-8px; margin-bottom:8px; }
.login-f{ display:flex; flex-direction:column; gap:6px; }
.login-f span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); }
.login-f input{ font-family:'Inter',sans-serif; font-size:15px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r); background:var(--card); color:var(--ink); }
.login-f input:focus{ outline:none; border-color:var(--cobalt); }
body.neu .login-f input{ border:none; box-shadow:var(--sh-neu-inset-sm); }
.login-err{ font-size:12px; color:#c0392b; min-height:14px; letter-spacing:-.01em; }
.login-btn{ margin-top:4px; padding:13px; }
/* logout-knop */
.logout-btn{ width:34px; height:34px; flex:none; border:none; background:transparent; color:var(--ink-45); font-size:15px; cursor:pointer; border-radius:50%; transition:all .2s var(--ease); }
.logout-btn:hover{ color:var(--ink); background:var(--surface-2); }
body.neu .logout-btn:hover{ box-shadow:var(--sh-neu-sm); background:transparent; }
/* nav-kaart en nav-scan: hogere specificiteit (.nav .class = 0,2,0) dan .nav button (0,1,1) */
.nav .nav-kaart, .nav .nav-scan, .nav .nav-portfolio, .nav .nav-inbox, .nav .nav-settings {
  width:34px; height:34px; flex:none; padding:0;
  border:none !important; background:transparent !important;
  color:var(--ink-45); cursor:pointer; border-radius:50%;
  transition:color .2s var(--ease);
  display:flex; align-items:center; justify-content:center;
}
.nav .nav-kaart:hover, .nav .nav-scan:hover, .nav .nav-portfolio:hover, .nav .nav-inbox:hover, .nav .nav-settings:hover { color:var(--ink); }
/* SVG mag in de flex-knop niet naar 0px krimpen → anders zijn de iconen onzichtbaar */
.nav .nav-kaart svg, .nav .nav-scan svg, .nav .nav-portfolio svg, .nav .nav-inbox svg, .nav .nav-settings svg { width:17px; height:17px; flex:none; }
.nav .nav-settings svg { width:15px; height:15px; }
/* Geen gevuld blok bij active-state — alleen kleurverandering */
.nav .nav-kaart.active, .nav .nav-scan.active, .nav .nav-portfolio.active, .nav .nav-inbox.active, .nav .nav-settings.active {
  background:transparent !important; border:none !important; color:var(--ink);
}

/* Bruikleen deadline banner */
.bruikleen-banner{ position:fixed; bottom:0; left:0; right:0; z-index:1800; background:var(--abyss); color:var(--pure); font-size:12px; box-shadow:0 -2px 16px rgba(0,0,0,.3); }
.bl-head{ display:flex; justify-content:space-between; align-items:center; padding:8px 16px 4px; font-weight:600; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#FFA300; border-bottom:1px solid rgba(255,255,255,.1); }
.bl-close{ background:none; border:none; color:rgba(255,255,255,.5); font-size:18px; cursor:pointer; padding:0 4px; line-height:1; }
.bl-close:hover{ color:#fff; }
.bl-row{ display:flex; align-items:center; gap:10px; padding:8px 16px; border-bottom:1px solid rgba(255,255,255,.07); }
.bl-ico{ font-size:14px; flex-shrink:0; }
.bl-body{ flex:1; line-height:1.5; color:rgba(255,255,255,.85); }
.bl-body .mono{ color:#FFA300; }
.bl-body em{ color:rgba(255,255,255,.6); font-style:normal; }
.bl-open{ background:transparent; border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:3px; padding:3px 10px; font-size:11px; cursor:pointer; flex-shrink:0; }
.bl-open:hover{ background:rgba(255,255,255,.1); }
/* Leaflet popup stijl override */
.leaflet-popup-content-wrapper{ border-radius:6px; box-shadow:0 4px 20px rgba(0,0,0,.2); border:1px solid #E5E5EA; }
.leaflet-popup-tip{ background:#fff; }
/* verbindingsbanner */
.rw-conn-banner{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(14px); z-index:2600;
  background:var(--abyss); color:#fff; font-family:var(--mono); font-size:11.5px; letter-spacing:.01em;
  padding:11px 18px; border-radius:999px; box-shadow:0 14px 34px -14px rgba(0,0,0,.5); opacity:0; pointer-events:none;
  transition:all .3s var(--ease); max-width:90vw; }
.rw-conn-banner.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.rw-sync-status{ position:fixed; right:18px; top:68px; z-index:2590; display:flex; align-items:center; gap:10px;
  max-width:min(430px,calc(100vw - 36px)); padding:10px 12px 10px 15px; border-radius:10px;
  background:var(--abyss); color:#fff; box-shadow:0 14px 34px -14px rgba(0,0,0,.55);
  font-family:var(--mono); font-size:11.5px; line-height:1.35; opacity:0; pointer-events:none;
  transform:translateY(10px); transition:opacity .25s var(--ease),transform .25s var(--ease); }
.rw-sync-status.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.rw-sync-status.blocked{ background:#5f2730; }
.rw-sync-status button{ flex:none; border:1px solid rgba(255,255,255,.38); border-radius:999px; padding:5px 9px;
  background:transparent; color:#fff; font:inherit; cursor:pointer; }
.rw-sync-status button:hover{ background:rgba(255,255,255,.12); }
.rw-sync-status button:disabled{ opacity:.45; cursor:wait; }
@media(max-width:560px){
  .rw-sync-status{ left:12px; right:12px; top:62px; max-width:none; justify-content:space-between; }
}

/* ============================================================
   RESPONSIVE — iPad primair (768px), iPhone secundair (430px)
   ============================================================ */

/* iPad: filterknoppen compacter, zoekbalk smaller */
@media(max-width:900px){
  .arch-filtergroups{ gap:20px; }
  .arch-searchrow{ gap:10px; }
  .arch-search{ min-width:160px; }
  .filters button{ font-size:10.5px; padding:6px 10px; letter-spacing:.04em; }
  .filters-form button{ font-size:10px; padding:5px 9px; }
  .arch-meta-inline{ display:none; } /* teller verplaatst naar zoekveld-placeholder */
  .arch-edit-actions{ gap:6px; }
}

/* iPad portrait en kleiner (768px): filtergroepen op één rij stacked */
@media(max-width:768px){
  .arch-filtergroups{ flex-direction:column; gap:10px; }
  .filtergroup{ flex-direction:row; align-items:center; flex-wrap:wrap; gap:6px; }
  .fg-label{ min-width:80px; }
  .filters{ gap:5px; }
  .filters button{ font-size:10px; padding:5px 9px; }
  .topbar{ padding:0 14px; height:52px; }
  .brand-home{ height:22px; }
  .page{ padding-left:16px; padding-right:16px; }
  .arch-page{ padding-top:12px; }
  .arch-controls{ gap:10px; margin-bottom:12px; }
  .arch-sort button{ font-size:10px; padding:5px 8px; }
  /* Werk detail: tabs scrollbaar */
  .tabs{ overflow-x:auto; -webkit-overflow-scrolling:touch; gap:2px; }
  .tab{ font-size:11px; padding:8px 10px; white-space:nowrap; }
  .detail-grid{ gap:24px; }
  /* Transacties */
  .txn-toolbar{ gap:8px; }
  .txn-actions-top{ flex-wrap:wrap; gap:6px; }
}

/* Smalle schermen (telefoon + iPad split-view): navigatie compact maken.
   Alleen de ronde icoonknoppen blijven vierkant; de tekstknoppen (Archief/
   Relaties) houden hun natuurlijke breedte i.p.v. tot 30px geknepen te worden
   (dat veroorzaakte de overlap). De wordmark wijkt voor een compacte RW-badge. */
@media(max-width:600px){
  .nav{ gap:2px; flex-wrap:nowrap; }
  /* .nav-prefix nodig om de bestaande .nav .nav-scan / .nav button regels te overrulen (gelijke/hogere specificiteit) */
  .nav .nav-add, .nav .nav-scan, .nav .nav-kaart, .nav .nav-portfolio, .nav .nav-settings, .nav .theme-toggle, .nav .logout-btn{ width:28px; height:28px; min-width:28px; font-size:12px; flex:none; padding:0; }
  .nav .nav-archief, .nav .nav-relaties{ padding:5px 7px; font-size:9.5px; letter-spacing:.02em; flex:none; }
  .brand-word{ display:none; }
  .brand-mono{ display:block; height:26px; width:26px; }
  .topbar .brand{ gap:6px; min-width:0; }
}

/* iPhone (430px): minimum bruikbaar, niet primair */
@media(max-width:480px){
  .topbar{ padding:0 10px; }
  .page{ padding-left:12px; padding-right:12px; }
  .filters button{ font-size:9.5px; padding:4px 7px; }
  .fg-label{ font-size:8.5px; min-width:60px; }
  .grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .card .ph{ aspect-ratio:1; }
  .filtergroup{ gap:4px; }
  .arch-searchrow{ flex-wrap:wrap; }
  .arch-search{ min-width:100%; order:2; }
  .arch-edit-actions{ order:1; margin-left:auto; }
  /* Verberg sorteerknoppen op heel kleine schermen */
  .arch-sort{ display:none; }
  /* Werk detail tabs: kleinere tekst */
  .tab{ font-size:10px; padding:7px 8px; }
  .wh-title{ font-size:16px; }
  /* Bruikleen banner compact */
  .bl-row{ flex-wrap:wrap; gap:6px; }
  .bl-body{ font-size:10px; }
}

/* Globale scan-knop in nav */
.nav-scan{ width:34px; height:34px; flex:none; border:none; background:transparent; color:var(--ink-45); cursor:pointer; border-radius:50%; transition:all .2s var(--ease); display:flex; align-items:center; justify-content:center; }
.nav-scan:hover{ color:var(--gold); }

/* Globale scan modal */
.gsm-card{ max-width:500px; width:94vw; }
.gsm-textpreview{ background:var(--panel,#F5F5F7); border-radius:4px; padding:8px 10px; font-size:10px; font-family:var(--mono); white-space:pre-wrap; max-height:120px; overflow-y:auto; margin-bottom:10px; color:var(--ink-70); }
.gsm-ai-ok{ background:#E8F5E9; border-radius:4px; padding:5px 10px; font-size:11px; color:#2E7D32; margin-bottom:8px; }
.gsm-ai-warn{ background:#FFF3E0; border-radius:4px; padding:5px 10px; font-size:11px; color:#E65100; margin-bottom:8px; }

/* ============================================================
   COA — gescande echtheidscertificaten (harde poort bij verkoop)
   ============================================================ */
.pill.coa-warn{ background:#FFF4E0; color:#9A5B00; border:1px solid var(--gold, #FFA300); }

/* scan-modal */
.coa-overlay{ position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(10,10,10,.55); opacity:0; transition:opacity .25s cubic-bezier(0.16,1,0.3,1); }
.coa-overlay.show{ opacity:1; }
.coa-modal{ width:100%; max-width:560px; max-height:90vh; overflow-y:auto; background:#FFFFFF;
  border:1px solid #0A0A0A; border-radius:2px; box-shadow:4px 4px 0 0 #0A0A0A; padding:24px;
  transform:translateY(8px); transition:transform .25s cubic-bezier(0.16,1,0.3,1); }
.coa-overlay.show .coa-modal{ transform:translateY(0); }
.coa-eyebrow{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#8E8E93; margin-bottom:6px; }
.coa-title{ font-size:20px; letter-spacing:-0.02em; margin:0 0 8px; }
.coa-lede{ font-size:12.5px; line-height:1.55; color:#1C1C1E; margin:0 0 16px; }
.coa-slots{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
@media (max-width:520px){ .coa-slots{ grid-template-columns:1fr; } }
.coa-slot{ border:1px dashed #D1D1D6; border-radius:2px; padding:12px; text-align:center;
  transition:border-color .2s cubic-bezier(0.16,1,0.3,1); }
.coa-slot.filled{ border-style:solid; border-color:#0A0A0A; }
.coa-slot-label{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#636366; margin-bottom:8px; }
.coa-slot-preview img{ max-width:100%; max-height:150px; border:1px solid #E5E5EA; border-radius:2px; margin-bottom:8px; }
.coa-pdf{ display:inline-block; font-size:10px; letter-spacing:.06em; padding:6px 10px; margin-bottom:8px;
  background:#F5F5F7; border:1px solid #D1D1D6; border-radius:2px; }
.coa-slot-btns{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.coa-note{ display:none; font-size:11.5px; line-height:1.5; color:#9A5B00; background:#FFF4E0;
  border:1px solid var(--gold, #FFA300); border-radius:2px; padding:8px 10px; margin-bottom:12px; }
.coa-actions{ display:flex; gap:8px; justify-content:flex-end; }

/* werk-detail: status van de fysieke kaart */
.coa-missing-note{ font-size:12px; line-height:1.5; color:#9A5B00; background:#FFF4E0;
  border:1px solid var(--gold, #FFA300); border-radius:2px; padding:8px 10px; margin-bottom:10px; }
.coa-ok-note{ font-size:12px; color:#2E7D32; margin-bottom:4px; }

/* cert-pagina: facsimile-annex — de gescande fysieke kaart als tweede vel
   van het certificaat (print = pagina 2) */
.cert-annex{ margin-top:24px; }
.ca-plates{ flex:1; display:grid; grid-template-columns:1fr 1fr; gap:24px; align-content:center; margin:24px 0; }
.ca-plates.single{ grid-template-columns:minmax(0,60%); justify-content:center; }
.ca-plate{ margin:0; min-width:0; }
.ca-frame{ border:1px solid #0A0A0A; background:#F5F5F7; padding:12px;
  display:flex; align-items:center; justify-content:center; aspect-ratio:3/4; }
.ca-frame a{ display:flex; width:100%; height:100%; align-items:center; justify-content:center; }
.ca-frame img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
.ca-wait{ color:#8E8E93; font-size:12px; }
.ca-pdf{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#0A0A0A; text-decoration:none;
  border:1px solid #0A0A0A; padding:6px 12px; background:#FFFFFF; }
.ca-plate figcaption{ margin-top:8px; font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:#636366; text-align:center; }
.ca-foot{ font-size:8.5px; letter-spacing:.04em; color:#8E8E93; line-height:1.6; border-top:1px solid #E5E5EA; padding-top:12px; }
@media (max-width:560px){ .ca-plates{ grid-template-columns:1fr; } .ca-plates.single{ grid-template-columns:1fr; } }

/* lege staat: enkel op scherm, nooit geprint */
.cert-annex-empty{ width:794px; max-width:100%; margin:24px auto 0; display:flex; align-items:center; gap:14px;
  flex-wrap:wrap; justify-content:space-between; border:1px dashed #D1D1D6; padding:14px 18px; }
.cae-lab{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#636366; }

/* ============================================================
   POST — ochtendlijst (inbox.js · kaarten uit mail-intake)
   ============================================================ */
.nav .nav-inbox{ position:relative; }
.nav-inbox-badge{
  position:absolute; top:1px; right:0;
  min-width:15px; height:15px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
  background:var(--cobalt); color:#fff;
  font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:0;
  border-radius:8px; pointer-events:none;
}
.ibx-page .rel-head{ margin-bottom:24px; }
.ibx-sec{ margin:0 0 32px; }
.ibx-sec-h{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-45); padding-bottom:8px; border-bottom:1px solid var(--abyss);
  margin-bottom:16px; display:flex; align-items:center; gap:8px;
}
.ibx-sec-n{ color:var(--ink-25); }
.ibx-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:16px; margin-bottom:16px; box-shadow:0 1px 2px rgba(0,0,0,.05);
  border-left:3px solid var(--ink-25);
}
.ibx-card.ibx-klaar{ border-left-color:var(--cobalt); }
.ibx-card.ibx-beslissing{ border-left-color:#FFA300; }
.ibx-card.ibx-info{ border-left-color:var(--ink-25); }
.ibx-card.ibx-done{ opacity:.55; }
.ibx-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.ibx-type{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-70); }
.ibx-ts{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--ink-25); }
.ibx-from{ font-size:13px; color:var(--ink-70); margin-bottom:2px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ibx-mail{ font-family:var(--mono); font-size:11px; color:var(--ink-45); }
.ibx-rel{
  font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--abyss); background:transparent; color:var(--ink);
  padding:2px 8px; border-radius:var(--r); cursor:pointer;
  transition:all .2s cubic-bezier(0.16,1,0.3,1);
}
.ibx-rel:hover{ background:var(--abyss); color:var(--pure); }
.ibx-rel-new{ border-color:var(--line); color:var(--ink-45); cursor:default; }
.ibx-rel-new:hover{ background:transparent; color:var(--ink-45); }
.ibx-subject{ font-weight:600; font-size:15px; letter-spacing:-0.02em; margin:2px 0 6px; }
.ibx-sum{ font-size:13px; color:var(--ink-70); margin:0 0 10px; max-width:70ch; }
.ibx-voorstel{ border:1px solid var(--line-soft); border-radius:var(--r); background:var(--surface-2); margin-bottom:10px; }
.ibx-voorstel summary{
  cursor:pointer; padding:8px 12px; font-family:var(--mono); font-size:10px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); user-select:none;
}
.ibx-voorstel pre{
  margin:0; padding:4px 12px 12px; white-space:pre-wrap;
  font-family:var(--display); font-size:13px; line-height:1.55; color:var(--ink);
}
.ibx-log{ font-family:var(--mono); font-size:10px; letter-spacing:.02em; color:var(--ink-25); margin-bottom:12px; }
.ibx-acts{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.ibx-acts .btn{ text-decoration:none; }
.ibx-archief{ margin-top:48px; }
.ibx-archief > summary{
  cursor:pointer; font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-45); padding-bottom:8px;
  border-bottom:1px solid var(--line); margin-bottom:16px; user-select:none;
}