/* ============================================================
   Manaforge — MTG Deckbouwer
   Warm-perkament designsysteem (merkgids v1): EB Garamond + Archivo,
   goud als enige accent, paars als hoofdknop.
   ============================================================ */

:root {
  /* grond en vlak — licht, met een zachte zweem van je devotion-kleur */
  --bg:#F5FAF7; --bg2:#EAF3EE; --bg3:#F5FAF7; --panel:#FFFFFF;
  --surface:#FFFFFF; --surface-soft:#EAF3EE; --surface-sunk:#F2F8F4;
  /* tekst — koel donker */
  --ink:#0F172A; --ink2:#0F172A; --body:#475569; --muted:#64748B; --faint:#94A3B8; --text-label:#64748B;
  /* rand */
  --line:#DDE9E1; --line2:#E9F1EC; --line3:#DDE9E1; --border:#DDE9E1; --border-inner:#E9F1EC;
  --ring:rgba(46,125,90,.14);
  /* accent (voorheen goud) → ManaForge groen */
  --gold:#2E7D5A; --gold-d:#1E4D3A; --gold-t:#1E6B4C; --gold-on-dark:#7BC59E; --gold-hover:#256A4A;
  --gold-tint:#CDEEDD; --gold-tint-bd:#A9DCC4; --gold-ink:#1E4D3A;
  /* primair + status */
  --primary:#1E4D3A; --primary-hover:#163B2D;
  --ok:#2E7D5A; --ok-bg:#E3F3EA; --todo:#B45309; --todo-bg:#FDF0D9;
  --red:#B4402E;
  /* nacht → dark forest */
  --night:#123024; --night-text:#EAF3EE;
  /* devotion-thema (standaard: groen — kracht & groei); wordt per kleur overschreven */
  --hero-a:#232b22; --hero-m:#171e17; --hero-b:#12160f;
  --cta-a:#123024; --cta-b:#1E4D3A;
  --accent-hi:#7BC59E; --accent-hi-ink:#10251B;
  --glow:rgba(46,125,90,.16);
}
::selection { background:var(--gold-tint); color:var(--gold-ink); }
/* ---- Devotion: de kleurstelling volgt de dominante kleur van je collectie (of je eigen keuze) ---- */
html[data-dev="W"] { /* wit — licht & verlichting */
  --primary:#6E6136; --primary-hover:#57502B; --gold-d:#6E6136; --gold-hover:#7D6D33; --gold:#A28F4D; --gold-on-dark:#E8DCA8; --gold-tint:#F4EFDB; --gold-tint-bd:#E2D8B4; --gold-ink:#574B22; --gold-t:#7D6D33;
  --night:#3B341F; --hero-a:#4A4229; --hero-m:#332D1C; --hero-b:#211D10; --cta-a:#3B341F; --cta-b:#5C5230;
  --accent-hi:#E4D390; --accent-hi-ink:#2A2410; --glow:rgba(210,186,110,.2);
  --bg:#FBF8F0; --bg2:#F4EEDD; --bg3:#FBF8F0; --surface-soft:#F4EEDD; --surface-sunk:#F8F3E6; --line:#E7DFC5; --line2:#F0EAD7; --line3:#E7DFC5; --border:#E7DFC5; --border-inner:#F0EAD7; --ring:rgba(162,143,77,.16);
}
html[data-dev="U"] { /* blauw — subtiel & kennis */
  --primary:#1E3E5E; --primary-hover:#16304A; --gold-d:#1E3E5E; --gold-hover:#265078; --gold:#2E6690; --gold-on-dark:#8FC3E8; --gold-tint:#D9E9F6; --gold-tint-bd:#B5D4EB; --gold-ink:#16344E; --gold-t:#1E5680;
  --night:#122A40; --hero-a:#1E2B3A; --hero-m:#141E2A; --hero-b:#0C131C; --cta-a:#122A40; --cta-b:#1E3E5E;
  --accent-hi:#8FC3E8; --accent-hi-ink:#0C1B28; --glow:rgba(70,130,180,.18);
  --bg:#F4F8FB; --bg2:#E8F0F7; --bg3:#F4F8FB; --surface-soft:#E8F0F7; --surface-sunk:#EFF5F9; --line:#D8E4EE; --line2:#E6EEF5; --line3:#D8E4EE; --border:#D8E4EE; --border-inner:#E6EEF5; --ring:rgba(46,102,144,.15);
}
html[data-dev="B"] { /* zwart — grimmig & macht */
  --primary:#3A2E4A; --primary-hover:#2C2239; --gold-d:#3A2E4A; --gold-hover:#4A3B5E; --gold:#5F4B78; --gold-on-dark:#B9A3D6; --gold-tint:#E9E2F2; --gold-tint-bd:#D2C4E4; --gold-ink:#32264A; --gold-t:#55406E;
  --night:#231A2C; --hero-a:#241C2E; --hero-m:#160F1D; --hero-b:#0B0710; --cta-a:#231A2C; --cta-b:#3A2E4A;
  --accent-hi:#B9A3D6; --accent-hi-ink:#180F22; --glow:rgba(140,100,190,.16);
  --bg:#F8F6FA; --bg2:#EFEAF4; --bg3:#F8F6FA; --surface-soft:#EFEAF4; --surface-sunk:#F4F0F7; --line:#E0D7E8; --line2:#EBE4F1; --line3:#E0D7E8; --border:#E0D7E8; --border-inner:#EBE4F1; --ring:rgba(95,75,120,.15);
}
html[data-dev="R"] { /* rood — vurig & fel */
  --primary:#7A2E1E; --primary-hover:#602416; --gold-d:#7A2E1E; --gold-hover:#93381F; --gold:#B0492A; --gold-on-dark:#F0A583; --gold-tint:#F9E2D6; --gold-tint-bd:#EDC5B0; --gold-ink:#6B2717; --gold-t:#9A3E22;
  --night:#3C1B12; --hero-a:#3A2019; --hero-m:#26130D; --hero-b:#140908; --cta-a:#3C1B12; --cta-b:#7A2E1E;
  --accent-hi:#F0A583; --accent-hi-ink:#2A0F08; --glow:rgba(200,90,50,.18);
  --bg:#FBF6F2; --bg2:#F5EAE2; --bg3:#FBF6F2; --surface-soft:#F5EAE2; --surface-sunk:#F8F0E9; --line:#EBD9CC; --line2:#F3E6DC; --line3:#EBD9CC; --border:#EBD9CC; --border-inner:#F3E6DC; --ring:rgba(176,73,42,.15);
}
:root { --devotion-placeholder:0;
  /* mana-pips (merk) */
  --mW:#E8DFBE; --mU:#8FB3D9; --mB:#3A3440; --mR:#E08A6E; --mG:#8FBF8A; --mC:#D8CBA4; --mGen:#e8e1cf;
  --mW-fg:#4a4127; --mU-fg:#173248; --mB-fg:#f0edf2; --mR-fg:#4a1d14; --mG-fg:#1d3d27; --mC-fg:#5a5342;
  /* art-tinten (fallback-achtergrond) */
  --aW:#e6dcbe; --aU:#bdd9ee; --aB:#cac5cf; --aR:#f2c4b2; --aG:#c2ddc8; --aC:#e3ddce;
  --rar-c:#7D7565; --rar-u:#6f8794; --rar-r:#C9A227; --rar-m:#A8503C;
  /* letters */
  --serif:'EB Garamond',Georgia,serif;
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --cond:'Archivo',var(--sans);
  --shadow:0 8px 22px rgba(15,23,42,.08);
  --shadow-lg:0 12px 30px rgba(15,23,42,.12);
  --radius-panel:16px; --radius-control:9px; --radius-badge:6px;
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; height:100%; }
/* Reserveer altijd de scrollbar-ruimte: zo verspringt de pagina niet horizontaal
   bij het openen van een modal of bij het wisselen tussen korte en lange pagina's. */
html { scrollbar-gutter:stable; }
/* Body-scroll bevriezen zolang er een modal/overlay open staat. De body wordt
   op zijn plek "vastgezet" (top wordt via JS op -scrollY gezet) zodat de
   achtergrond niet meescrollt én niet naar boven verspringt. De gutter blijft
   gereserveerd (scrollbar-gutter), dus ook geen horizontale sprong. */
html.modaal-open body { position:fixed; left:0; right:0; width:100%; overflow:hidden; }
body { background:var(--bg); color:var(--ink2);
  font:14.5px/1.6 var(--sans); -webkit-font-smoothing:antialiased; min-height:100%; overflow-x:clip; }
button { font-family:var(--sans); cursor:pointer; }
a { color:var(--gold-t); text-decoration:none; } a:hover { color:var(--ink); }
::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-thumb { background:#dcd6c8; border-radius:8px; border:3px solid var(--bg); }
::-webkit-scrollbar-track { background:transparent; }
::selection { background:var(--gold-tint); }
@keyframes layerIn { from { opacity:0; transform:translateY(14px) scale(.985);} to { opacity:1; transform:none; } }
@keyframes veilIn { from { opacity:0;} to { opacity:1; } }
@keyframes pulse { 0%,100%{opacity:.3;} 50%{opacity:1;} }

/* ---- Appbar ---- */
.appbar { height:60px; display:flex; align-items:center; gap:18px; padding:0 22px; background:var(--panel);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40; }
.brand { display:flex; align-items:center; gap:11px; }
.brand-mark { width:34px; height:34px; border-radius:9px; background:var(--primary); color:#fff; display:grid; place-items:center; font-family:var(--serif); font-weight:700; font-size:20px; line-height:1; flex:none; box-shadow:0 2px 6px rgba(15,23,42,.16); }
.diamond { width:26px; height:26px; border:1.5px solid var(--gold); transform:rotate(45deg); display:inline-flex; align-items:center; justify-content:center; flex:none; }
.diamond i { width:10px; height:10px; background:var(--gold); display:block; }
.diamond.sm { width:20px; height:20px; border-width:1.5px; } .diamond.sm i { width:7px; height:7px; }
.diamond.light { border-color:var(--accent-hi); } .diamond.light i { background:#7BC59E; }
.brand .word { font-family:var(--serif); font-size:22px; font-weight:700; letter-spacing:.05em; color:var(--ink); }
.brand .sub { font-size:11.5px; color:var(--muted); letter-spacing:.04em; border-left:1px solid var(--line); padding-left:12px; }
.appbar-search { flex:none; width:38px; height:38px; border-radius:9px; border:1px solid var(--line); background:var(--bg2); color:var(--muted); font-size:17px; line-height:1; cursor:pointer; transition:border-color .14s, color .14s, background .14s; }
.appbar-search:hover { border-color:var(--gold); color:var(--ink); background:var(--panel); }
nav { display:flex; gap:3px; background:var(--bg2); border:1px solid var(--line); border-radius:8px; padding:3px; margin-left:8px; }
nav button { background:transparent; border:0; color:var(--muted); padding:7px 15px; border-radius:5px; font-size:13px; font-weight:500; }
nav button:hover { color:var(--ink); }
nav button.on { background:var(--gold-tint); color:var(--gold-ink); font-weight:600; box-shadow:none; }

/* ---- Gegroepeerde nav (Collectie / Decks / Ontdek als dropdowns) ---- */
.navgrp { position:relative; }
.navgrp-trig { display:inline-flex; align-items:center; gap:6px; }
.navgrp-caret { font-size:9px; opacity:.55; transition:transform .14s; }
.navgrp.open .navgrp-caret { transform:rotate(180deg); }
.navgrp.on > .navgrp-trig { background:var(--gold-tint); color:var(--gold-ink); font-weight:600; box-shadow:none; }
.navgrp.open > .navgrp-trig { color:var(--ink); }
.navgrp-pop { position:absolute; top:calc(100% + 8px); left:0; min-width:250px; background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 38px rgba(15,23,42,.16); padding:6px; display:none; z-index:70; }
.navgrp.open > .navgrp-pop { display:block; }
.navgrp-pop button { display:flex; flex-direction:column; align-items:flex-start; gap:1px; width:100%; text-align:left; padding:9px 12px; border-radius:8px; }
.navgrp-pop button b { font-size:13px; font-weight:600; color:var(--ink); }
.navgrp-pop button small { font-size:11.5px; color:var(--faint); font-weight:400; line-height:1.35; }
.navgrp-pop button:hover { background:var(--bg2); }
.navgrp-pop button.on { background:var(--gold-tint); box-shadow:none; }
.navgrp-pop button.on b { color:var(--gold-ink); }
.spacer { flex:1; }
.auth { font-size:11px; color:var(--muted); letter-spacing:.04em; background:var(--bg2); border:1px solid var(--line); border-radius:6px; padding:6px 11px; white-space:nowrap; }
.auth b { color:var(--ok); }

#view { min-height:calc(100vh - 60px); }
.loading { padding:80px; text-align:center; color:var(--muted); }
.page { max-width:1200px; margin:0 auto; padding:26px 22px 90px; }
h1.title { font-family:var(--serif); font-size:33px; font-weight:600; letter-spacing:-.005em; margin:0 0 4px; color:var(--ink); }
.lede { color:var(--muted); margin:0 0 20px; font-size:14px; max-width:56ch; text-wrap:pretty; }
.eyebrow { font-family:var(--cond); font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--text-label); }

/* ---- Mana-bolletjes (gekleurde bolletjes, geen verwarrende letters) ---- */
.mana { display:inline-flex; gap:3px; align-items:center; vertical-align:middle; }
.pip { width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:700; flex:none; line-height:1; box-shadow:0 1px 2px rgba(15,23,42,.28), inset 0 0 0 1px rgba(0,0,0,.05); }
.pip.big { width:24px; height:24px; font-size:13px; box-shadow:0 2px 4px rgba(15,23,42,.24); }
.pip-W { background:var(--mW);} .pip-U{ background:var(--mU);} .pip-B{ background:var(--mB);} .pip-R{ background:var(--mR);} .pip-G{ background:var(--mG);}
.pip-C { background:var(--mC); color:var(--mC-fg);} .pip-gen{ background:var(--mGen); color:var(--mC-fg);} .pip-snow{ background:#dcebf6; color:#2c5f8a;}
.pip-hy { color:#3b372f; }
.mvtot { font-size:11px; color:var(--faint); margin-left:4px; white-space:nowrap; }

/* ---- Knoppen ---- (merk: primair = paars, secundair = wit met rand, accent = goud) */
.btn { background:var(--primary); color:#FFFFFF; border:0; border-radius:9px; padding:10px 16px; font-size:13px; font-weight:600; box-shadow:none; display:inline-flex; align-items:center; gap:8px; transition:background .14s, box-shadow .14s; }
.btn:hover { background:var(--primary-hover); }
.btn.ghost { background:var(--surface); color:var(--body); border:1px solid var(--border); box-shadow:none; font-weight:500; }
.btn.ghost:hover { border-color:#cabfa2; color:var(--ink); background:var(--surface); }
.btn.gold { background:var(--gold-d); color:#fff; }
.btn.gold:hover { background:var(--primary-hover); }
.btn.sm { padding:7px 12px; font-size:12px; }
.btn.danger { background:var(--surface); color:var(--red); border:1px solid #e0bfb6; box-shadow:none; font-weight:500; }
.btn.danger:hover { border-color:var(--red); }
.btnrow { display:flex; gap:9px; flex-wrap:wrap; margin:14px 0; }
.back { background:none; border:0; color:var(--muted); font-size:13px; padding:6px 0; margin-bottom:6px; }
.back:hover { color:var(--ink); }
.pill { border:1px solid var(--border); background:var(--surface); color:var(--body); border-radius:9px; padding:6px 12px; font-size:12.5px; }
.pill:hover { border-color:#cabfa2; }

/* ---- Kaart-tegel (met art) ---- */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:18px; align-content:start; }
.grid.kaartmodus { display:block; } /* kaartweergave heeft z'n eigen grid (.dk-cardgrid) */
.ctile { background:var(--panel); border:1px solid var(--line2); border-radius:10px; overflow:hidden; cursor:pointer; box-shadow:var(--shadow); transition:transform .16s ease, box-shadow .16s ease, border-color .16s; display:flex; flex-direction:column; }
.ctile:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:#d8c9a4; }
.ctile.indeck { border-color:#dcc79b; }
.cart { aspect-ratio:626/457; position:relative; overflow:hidden; border-bottom:1px solid var(--line2); background:linear-gradient(150deg,var(--art,#e3ddce) 0%, var(--bg2) 82%); display:flex; align-items:center; justify-content:center; }
.cart img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.cart .artlabel { font-family:var(--serif); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:rgba(15,23,42,.42); padding:8px; text-align:center; }
.cart .pips { position:absolute; top:8px; right:8px; display:flex; gap:3px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.cart .add { position:absolute; bottom:8px; right:8px; width:26px; height:26px; border-radius:50%; border:0; background:var(--gold); color:#FFFFFF; font-size:16px; font-weight:700; line-height:1; box-shadow:0 2px 6px rgba(15,23,42,.3); opacity:0; transform:scale(.8); transition:.14s; }
.ctile:hover .add { opacity:1; transform:scale(1); }
.cart .add:hover { background:var(--gold-d); }
.cart .own { position:absolute; top:8px; left:8px; display:flex; gap:5px; align-items:center; }
.cbody { padding:9px 11px 11px; display:flex; flex-direction:column; gap:3px; }
.cbody .cn { font-family:var(--serif); font-size:16px; font-weight:600; line-height:1.12; color:var(--ink); }
.cbody .ck { font-size:11.5px; color:var(--muted); line-height:1.35; }
.cbody .crow2 { display:flex; align-items:center; justify-content:space-between; margin-top:3px; gap:6px; }
.rar { font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; }
.rar-common{color:var(--rar-c);} .rar-uncommon{color:var(--rar-u);} .rar-rare{color:var(--rar-r);} .rar-mythic{color:var(--rar-m);}
.owntag { font-size:10px; font-weight:600; letter-spacing:.02em; padding:2px 7px; border-radius:20px; white-space:nowrap; }
.owntag.have { background:var(--ok-bg); color:var(--ok); }
.owntag.buy { background:var(--todo-bg); color:var(--todo); }
.owntag.hand { background:#ECE6F5; color:var(--primary); }
.owntag.set { background:var(--surface-sunk); color:var(--muted); border:1px solid var(--border); font-weight:500; }
.owntag.indeck { background:var(--gold-tint); color:var(--gold-ink); border:1px solid var(--gold-tint-bd); }
.prijs { font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
.cart .rargem { width:14px; height:14px; transform:rotate(45deg); background:currentColor; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.55); flex:none; }
.sortgrp .dir { font-weight:700; }

/* ---- Filterrail ---- */
.libwrap { display:grid; grid-template-columns:210px 1fr; gap:22px; align-items:start; max-width:1200px; margin:0 auto; padding:24px 22px 90px; }
.rail { position:sticky; top:76px; display:flex; flex-direction:column; gap:22px; }
.rail .grp { display:flex; flex-direction:column; gap:9px; }
.rail .grplab { font-family:var(--cond); font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.colbtns { display:flex; gap:6px; flex-wrap:wrap; }
.colbtn { width:32px; height:32px; border-radius:50%; border:2px solid var(--line3); font-size:0; cursor:pointer; transition:opacity .15s, border-color .15s; position:relative; }
.colbtn.on { border-color:var(--gold); }
.colbtn.dim { opacity:.4; }
.chipset { display:flex; flex-wrap:wrap; gap:6px; }
.fchip { background:var(--surface-sunk); color:var(--body); border:1px solid var(--border-inner); border-radius:9px; padding:6px 11px; font-size:12px; font-weight:500; }
.fchip:hover { border-color:#cabfa2; }
.fchip.on { background:var(--gold-tint); color:var(--gold-ink); border-color:var(--gold-tint-bd); font-weight:600; }
.rail select { width:100%; border:1px solid var(--line3); background:var(--panel); border-radius:6px; padding:8px 10px; font:inherit; font-size:12.5px; color:var(--body); }
/* Herbruikbare dropdown in huisstijl (maakDropdown) */
.dd { position:relative; }
.dd-trig { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--panel); border:1px solid var(--line3); border-radius:8px; padding:9px 12px; font:inherit; font-size:13px; color:var(--ink); cursor:pointer; text-align:left; transition:border-color .14s, box-shadow .14s; }
.dd-trig:hover { border-color:var(--gold-tint-bd); }
.dd-trig.open { border-color:var(--gold); box-shadow:0 0 0 3px var(--ring); }
.dd-trig-txt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dd-trig-txt.ph { color:var(--muted); }
.dd-caret { flex:none; color:var(--muted); font-size:10px; transition:transform .16s; }
.dd-trig.open .dd-caret { transform:rotate(180deg); }
.dd-pop { position:fixed; z-index:200; background:var(--panel); border:1px solid var(--line); border-radius:11px; box-shadow:0 18px 44px rgba(50,42,22,.22); overflow:hidden; }
.dd-search { display:flex; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid var(--line2); }
.dd-mag { color:var(--muted); font-size:14px; }
.dd-inp { flex:1; min-width:0; border:0; background:none; font:inherit; font-size:13px; color:var(--ink); outline:none; }
.dd-list { max-height:300px; overflow-y:auto; padding:3px 0; }
/* Opties als nette regels (geen blokken). Gescoped onder .dd-list zodat ze niet botsen met de losse .dd-opt-component. */
.dd-list .dd-opt { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; background:none; border:0; border-radius:0; padding:8px 14px; font:inherit; font-size:13px; color:var(--body); cursor:pointer; text-align:left; }
.dd-list .dd-opt + .dd-opt { border-top:1px solid var(--line2); }
.dd-list .dd-opt:hover, .dd-list .dd-opt.hi { background:var(--bg3); }
.dd-list .dd-opt.on { color:var(--gold-t); font-weight:600; }
.dd-opt-l { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dd-meta { flex:none; font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums; }
.dd-leeg { padding:16px 12px; font-size:12.5px; color:var(--muted); text-align:center; }
.searchbig { width:100%; display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:11px 14px; margin-bottom:16px; }
.searchbig:focus-within { border-color:var(--gold); box-shadow:0 0 0 3px var(--ring); }
.searchbig input { flex:1; background:transparent; border:0; outline:0; font:inherit; font-size:14px; color:var(--ink2); }
.searchbig .mag { color:var(--faint); font-size:15px; }
.libbar { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.libbar .cnt { font-size:12px; color:var(--muted); }
.sortgrp { display:flex; gap:2px; background:var(--bg2); border:1px solid var(--line); border-radius:6px; padding:2px; margin-left:auto; }
.sortgrp button { background:transparent; border:0; color:var(--muted); border-radius:4px; padding:5px 11px; font-size:11.5px; font-weight:500; }
.sortgrp button.on { background:var(--panel); color:var(--ink); font-weight:600; box-shadow:0 1px 2px rgba(15,23,42,.14); }
.empty { grid-column:1/-1; background:var(--panel); border:1px dashed var(--line3); border-radius:12px; padding:44px; text-align:center; color:var(--muted); }

/* ---- Decks-overzicht ---- */
.dgrid { display:grid; gap:16px; grid-template-columns:1fr; }
@media(min-width:640px){ .dgrid{ grid-template-columns:1fr 1fr; } }
@media(min-width:1000px){ .dgrid{ grid-template-columns:1fr 1fr 1fr; } }
.dcard { background:var(--panel); border:1px solid var(--line2); border-radius:12px; overflow:hidden; cursor:pointer; box-shadow:var(--shadow); transition:transform .12s, box-shadow .14s; display:flex; flex-direction:column; }
.dcard:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.dtop { padding:16px 18px; color:#fff; position:relative; }
.dtop .fmt { font-family:var(--cond); font-size:11px; text-transform:uppercase; letter-spacing:.16em; opacity:.92; }
.dtop h3 { font-family:var(--serif); margin:5px 0 3px; font-size:20px; font-weight:700; letter-spacing:.01em; }
.dtop .tag { margin:0; font-size:12.5px; opacity:.94; }
.dtop .cols { position:absolute; top:15px; right:16px; display:flex; gap:3px; }
.dbody { padding:14px 18px 16px; flex:1; display:flex; flex-direction:column; }
.dbody .idee { margin:0 0 13px; font-size:13px; color:var(--body); flex:1; }
.dstat { display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
.legal { font-size:10.5px; font-weight:600; letter-spacing:.04em; padding:3px 9px; border-radius:20px; display:inline-flex; align-items:center; gap:5px; text-transform:uppercase; }
.legal.ok { background:#e9f0e8; color:var(--ok); } .legal.no { background:#f6e7e2; color:var(--red); }
.own-badge { background:#efece3; color:var(--muted); font-size:10px; padding:2px 8px; border-radius:12px; }
.rarbar { display:flex; height:7px; border-radius:5px; overflow:hidden; background:var(--bg2); border:1px solid var(--line2); margin:2px 0 5px; }
.rarbar > div { height:100%; }
.rarleg { display:flex; flex-wrap:wrap; gap:9px; font-size:10.5px; color:var(--muted); }
.rarleg span { display:inline-flex; align-items:center; gap:4px; }
.rarleg i { width:8px; height:8px; border-radius:2px; transform:rotate(45deg); display:inline-block; }

/* ---- Deckdetail ---- */
.dhead { color:#fff; border-radius:12px; padding:24px 26px; margin-bottom:16px; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.dhead .fmt { font-family:var(--cond); font-size:12px; text-transform:uppercase; letter-spacing:.18em; opacity:.9; }
.dhead h1 { font-family:var(--serif); margin:6px 0 8px; font-size:32px; font-weight:700; color:#fff; }
.dhead p { margin:0; opacity:.95; font-size:14px; max-width:78ch; }
.dhead .cmdr { margin-top:14px; display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.18); border:0; color:#fff; padding:8px 14px; border-radius:8px; font-size:13px; }
.dhead .cmdr:hover { background:rgba(255,255,255,.28); }
.dhead .cols { position:absolute; top:22px; right:24px; display:flex; gap:4px; }
.tabs { display:flex; gap:2px; background:var(--bg2); border:1px solid var(--line); border-radius:7px; padding:3px; margin:16px 0; width:fit-content; }
.tabs button { background:transparent; border:0; color:var(--muted); border-radius:5px; padding:8px 16px; font-size:13px; font-weight:500; }
.tabs button.on { background:var(--panel); color:var(--ink); font-weight:600; box-shadow:0 1px 3px rgba(15,23,42,.14); }
.note { background:var(--surface-soft); border:1px solid #E7DFC9; padding:14px 18px; border-radius:14px; margin:14px 0; font-size:13.5px; line-height:1.6; color:var(--body); }
.note.ok { background:var(--ok-bg); border-color:#CBE3CF; color:var(--ok); }
.note.info { background:var(--surface-sunk); border-color:var(--border); color:var(--muted); }
.note.warn { background:#F6E7E2; border-color:#E0BFB6; color:#8a3323; }
.note > b:first-child { display:block; margin-bottom:3px; font-family:var(--cond); letter-spacing:.12em; text-transform:uppercase; font-size:11px; font-weight:600; }
/* Een note kan de modifier-class .info dragen; binnen .sheet zou .sheet .info die note per ongeluk tot flex-kolom maken (elke tekst/`<b>` op een eigen regel). Forceer normale block-flow zodat inline-tekst netjes doorloopt. */
.sheet .note.info { display:block; }

/* Commander-brackets */
.brkgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:9px; margin:2px 0 6px; }
.brkcard { position:relative; text-align:left; background:var(--panel); border:1px solid var(--line3); border-radius:10px; padding:12px 12px 11px; cursor:pointer; transition:border-color .14s, box-shadow .14s, background .14s; display:flex; flex-direction:column; gap:2px; }
.brkcard:hover { border-color:#c9c0ac; }
.brkcard.on { border-color:var(--gold); background:#EAF3EE; box-shadow:0 0 0 1px var(--gold) inset, 0 2px 8px rgba(46,125,90,.16); }
.brkcard .brknr { position:absolute; top:9px; right:11px; font-family:var(--cond); font-weight:700; font-size:14px; color:var(--faint); }
.brkcard.on .brknr { color:var(--gold); }
.brkcard .ic { font-size:20px; line-height:1; }
.brkcard h4 { margin:5px 0 0; font-family:var(--serif); font-size:16px; font-weight:600; color:var(--ink); }
.brkcard .brksub { font-size:11px; color:var(--muted); letter-spacing:.02em; }
.brkuitleg { background:var(--bg2); border:1px solid var(--line2); border-radius:8px; padding:11px 14px; font-size:13px; line-height:1.55; color:var(--body); margin-top:4px; }
.brkuitleg b { color:var(--ink); }
.dhead-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.dhead .dhead-chips .cmdr { margin-top:0; }
.dhead .cmdr.brk { background:rgba(255,255,255,.14); cursor:pointer; }
.dhead .cmdr.brk:hover { background:rgba(255,255,255,.26); }
.dtop-brk { margin-top:7px; display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.16); border-radius:6px; padding:3px 9px; font-size:11.5px; font-weight:600; letter-spacing:.02em; }

/* Verzamelingen — overzicht */
.vgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:16px; }
.vcard { background:var(--panel); border:1px solid var(--line2); border-radius:12px; overflow:hidden; cursor:pointer; box-shadow:var(--shadow); transition:transform .12s, box-shadow .14s, border-color .14s; display:flex; flex-direction:column; }
.vcard:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(15,23,42,.14); border-color:var(--line3); }
.vtop { position:relative; height:96px; background:linear-gradient(135deg,#efe9db,#e5ddc9); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line2); overflow:hidden; }
.vstack { position:absolute; inset:0; display:flex; }
.vstack .vthumb { flex:1; background-size:cover; background-position:center; opacity:.5; filter:saturate(.85); }
.vicon { position:relative; width:46px; height:46px; filter:drop-shadow(0 2px 5px rgba(0,0,0,.35)); }
.vicon[src$=".svg"] { background:rgba(255,255,255,.55); border-radius:50%; padding:6px; }
.vdone { position:absolute; top:8px; right:9px; background:var(--ok); color:#fff; font-size:11px; font-weight:600; padding:3px 8px; border-radius:20px; letter-spacing:.02em; }
.vbody { padding:13px 15px 15px; }
.vbody h3 { font-family:var(--serif); font-size:18px; font-weight:700; color:var(--ink); margin:0 0 2px; line-height:1.1; }
.vsub { font-size:11.5px; color:var(--muted); font-family:var(--cond); letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px; }
.vprog { height:8px; background:var(--bg2); border:1px solid var(--line2); border-radius:6px; overflow:hidden; }
.vprog-fill { height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-d)); border-radius:6px; transition:width .3s; }
.vprog-lab { font-size:12.5px; color:var(--body); margin-top:6px; }
.vprog-lab b { color:var(--ink); } .vprog-lab span { color:var(--muted); }
.vwish { color:var(--gold-t) !important; }

/* Verzameling — binder-detail */
.vhead { display:flex; align-items:flex-start; gap:18px; background:var(--panel); border:1px solid var(--line2); border-radius:12px; padding:20px 22px; box-shadow:var(--shadow); margin-bottom:16px; }
.vhead-icon { width:56px; height:56px; flex:none; }
.vbar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.vbar .chipset { display:flex; gap:6px; flex-wrap:wrap; }
.rarchip { display:inline-flex; align-items:center; gap:6px; }
.rarchip .rargem { position:static; transform:rotate(45deg); width:9px; height:9px; background:currentColor; box-shadow:none; }
.bindergrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.btile { border-radius:9px; overflow:hidden; cursor:pointer; border:1px solid var(--line2); background:var(--panel); transition:transform .12s, box-shadow .12s, border-color .12s; }
.btile:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(15,23,42,.16); }
.bart { position:relative; aspect-ratio:626/457; background:linear-gradient(150deg,var(--art,#e3ddce),var(--bg2)); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.bart img { width:100%; height:100%; object-fit:cover; display:block; }
.bph { font-family:var(--serif); font-size:12px; color:rgba(15,23,42,.5); padding:8px; text-align:center; }
.brar { position:absolute; top:6px; right:6px; width:12px; height:12px; transform:rotate(45deg); background:currentColor; border:1.5px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.5); }
.bstat { position:absolute; top:6px; left:6px; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.bcap { padding:6px 9px 8px; font-size:11.5px; color:var(--ink); line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bnum { color:var(--faint); font-variant-numeric:tabular-nums; margin-right:3px; }
/* status: in bezit = vol, verlanglijst = licht gedimd, ontbrekend = donker */
.btile.have .bstat { background:var(--ok); color:#fff; }
.btile.wish { }
.btile.wish .bart img { filter:saturate(.6) brightness(.92); }
.btile.wish .bstat { background:var(--gold); color:#fff; }
.btile.mis .bart img { filter:grayscale(.9) brightness(.42); }
.btile.mis .bart::after { content:""; position:absolute; inset:0; background:rgba(15,23,42,.34); }
.btile.mis .bcap { color:var(--muted); }
.btile.mis .brar { opacity:.55; }

/* Set-zoeken in 'nieuwe verzameling' */
.setres { display:flex; flex-direction:column; gap:6px; }
.setrow { display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--line2); border-radius:8px; padding:8px 12px; }
.setrow .cn { flex:1; min-width:0; font-family:var(--serif); font-size:15px; font-weight:600; color:var(--ink); }
.setrow .cn small { display:block; font-family:var(--sans); font-weight:400; font-size:11.5px; color:var(--muted); letter-spacing:.02em; }
.seticon { width:34px; height:34px; flex:none; display:flex; align-items:center; justify-content:center; }
.seticon img { width:30px; height:30px; }
.vbar .colbtns { display:flex; gap:5px; }
.vbar .colbtn { width:26px; height:26px; }
.bspec { position:absolute; bottom:6px; left:6px; width:20px; height:20px; border-radius:50%; background:#6a4b8a; color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; box-shadow:0 1px 3px rgba(0,0,0,.4); }
.btile.mis .bspec { opacity:.7; }
/* Deckwaarde in statistiekpaneel */
.sp-waarde { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding:9px 13px; background:#f6ecd6; border:1px solid #ecdcb4; border-radius:8px; }
.sp-waarde span { font-family:var(--cond); letter-spacing:.1em; text-transform:uppercase; font-size:11.5px; color:#8a6a2a; }
.sp-waarde b { font-size:16px; color:var(--ink); font-variant-numeric:tabular-nums; }
/* Commander-kaart klikbaar */
.cmdcard[data-n] { cursor:pointer; transition:transform .12s, box-shadow .14s; }
.cmdcard[data-n]:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(15,23,42,.16); }
/* "Gekocht"-knop (zet kaart in bezit) */
.btn.gekocht { background:var(--ok); color:#fff; box-shadow:0 2px 6px rgba(77,138,99,.28); }
.btn.gekocht:hover { background:#3f7654; }
.crow .btn.gekocht.mini { flex:none; padding:5px 10px; font-size:11.5px; white-space:nowrap; }

/* Bazaar of Magic deep-link knop */
a.btn.bazaar { text-decoration:none; }
a.btn.bazaar:hover { border-color:#c9a24a; color:var(--ink); }
.crow a.bazaar.mini { margin-left:8px; flex:none; padding:5px 10px; font-size:11.5px; white-space:nowrap; }

/* ---- Landingspagina / Home ---- */
.brand#brand { cursor:pointer; }
.hero {
  position:relative; border-radius:16px; overflow:hidden; min-height:420px;
  display:flex; align-items:flex-end; margin-bottom:22px; background-color:#221c14;
  background-image:
    linear-gradient(90deg, rgba(20,15,9,.93) 0%, rgba(20,15,9,.60) 46%, rgba(20,15,9,.12) 82%, rgba(20,15,9,.40) 100%),
    linear-gradient(0deg, rgba(20,15,9,.82) 0%, rgba(20,15,9,0) 52%),
    var(--hero, none);
  background-size:cover, cover, cover; background-position:center, center, center 26%; background-repeat:no-repeat;
  box-shadow:var(--shadow-lg);
}
.hero-inner { position:relative; z-index:1; padding:44px 46px; max-width:660px; color:#f5f0e4; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:9px; font-family:var(--cond); letter-spacing:.16em; text-transform:uppercase; font-size:12.5px; color:#e6cf95; margin-bottom:14px; }
.hero h1 { font-family:var(--serif); font-weight:700; font-size:46px; line-height:1.04; margin:0 0 12px; color:#fbf7ee; letter-spacing:.01em; text-shadow:0 2px 18px rgba(0,0,0,.4); }
.hero p { margin:0 0 22px; font-size:15.5px; line-height:1.6; color:rgba(245,240,228,.9); max-width:52ch; }
.hero-btns { display:flex; gap:11px; flex-wrap:wrap; }
.btn.big { padding:13px 22px; font-size:14.5px; }
.btn.ghost.light { background:rgba(255,255,255,.08); color:#f5f0e4; border:1px solid rgba(255,255,255,.42); box-shadow:none; }
.btn.ghost.light:hover { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.7); color:#fff; }
.hero-credit { position:absolute; right:14px; bottom:12px; z-index:1; font-size:11px; font-style:italic; color:rgba(245,240,228,.66); background:rgba(20,15,9,.4); padding:3px 9px; border-radius:20px; backdrop-filter:blur(2px); }
.home-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.home-stats .hs { display:flex; flex-direction:column; gap:2px; background:var(--panel); border:1px solid var(--line2); border-radius:12px; padding:16px 20px; cursor:pointer; transition:transform .12s, box-shadow .14s, border-color .14s; box-shadow:var(--shadow); }
.home-stats .hs:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(15,23,42,.13); border-color:var(--line3); }
.home-stats .hs b { font-family:var(--serif); font-size:30px; font-weight:700; color:var(--ink); line-height:1; }
.home-stats .hs span { font-size:12.5px; color:var(--muted); }
.home-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.homecard { display:flex; align-items:center; gap:15px; text-align:left; background:var(--panel); border:1px solid var(--line2); border-radius:12px; padding:16px 18px; cursor:pointer; box-shadow:var(--shadow); transition:transform .12s, box-shadow .14s, border-color .14s; }
.homecard:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(15,23,42,.14); border-color:var(--gold); }
.homecard .hc-ic { font-size:26px; flex:none; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:var(--bg2); border:1px solid var(--line2); border-radius:10px; }
.homecard .hc-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.homecard .hc-txt b { font-family:var(--serif); font-size:17px; font-weight:600; color:var(--ink); }
.homecard .hc-txt small { font-size:12.5px; color:var(--muted); line-height:1.35; }
.homecard .hc-arrow { color:var(--gold); font-size:18px; flex:none; opacity:.5; transition:opacity .14s, transform .14s; }
.homecard:hover .hc-arrow { opacity:1; transform:translateX(3px); }
@media (max-width:720px){ .hero h1 { font-size:34px; } .hero-inner { padding:30px 26px; } .home-stats { grid-template-columns:1fr; } }
.seclab { display:flex; align-items:center; gap:10px; margin:22px 0 9px; }
.seclab .t { font-family:var(--cond); font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.seclab .ln { flex:1; height:1px; background:var(--line2); }
.seclab .n { font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums; }
.crow { background:var(--panel); border:1px solid var(--line2); border-radius:8px; padding:8px 12px; display:flex; gap:11px; align-items:center; cursor:pointer; margin-bottom:6px; transition:border-color .12s, background .12s; }
.crow:hover { border-color:var(--line3); background:var(--bg3); }
.crow .thumb { width:38px; height:28px; border-radius:4px; object-fit:cover; background:var(--bg2); flex:none; border:1px solid var(--line2); }
.crow .qty { font-variant-numeric:tabular-nums; color:var(--gold-t); font-weight:600; font-size:13px; min-width:24px; }
.crow .cn { flex:1; min-width:0; font-size:14px; font-weight:500; color:var(--body); }
.crow .cn small { display:block; color:var(--muted); font-weight:400; font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- KPI / curve / kleur ---- */
.kpi { display:flex; gap:12px; flex-wrap:wrap; margin:14px 0; }
.kpi > div { flex:1; min-width:100px; background:var(--panel); border:1px solid var(--line2); border-radius:10px; padding:13px 16px; }
.kpi b { display:block; font-size:26px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink); font-family:var(--serif); }
.kpi span { font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.panelbox { background:var(--panel); border:1px solid var(--line2); border-radius:10px; padding:15px 17px; margin-bottom:14px; }
.panelbox h3 { margin:0 0 12px; font-family:var(--cond); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.curve { display:flex; align-items:flex-end; gap:6px; height:86px; }
.curve .col { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; justify-content:flex-end; height:100%; }
.curve .bar2 { width:100%; background:linear-gradient(180deg,#d3a537,var(--gold)); border-radius:3px 3px 0 0; min-height:3px; transition:height .2s; }
.curve .lab { font-size:9.5px; color:var(--faint); } .curve .v { font-size:10.5px; font-weight:700; color:var(--body); }
.colbars { display:flex; flex-direction:column; gap:7px; }
.colbar { display:flex; align-items:center; gap:9px; font-size:12.5px; }
.colbar .cdot { width:13px; height:13px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); flex:none; }
.colbar .track { flex:1; height:9px; background:var(--bg2); border-radius:6px; overflow:hidden; border:1px solid var(--line2); }
.colbar .fill { height:100%; border-radius:6px; }
.legality { display:flex; flex-direction:column; gap:7px; }
.legality .lr { display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--body); }
.legality .st { font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; }
.legality .st.ok { color:var(--ok); } .legality .st.no { color:var(--faint); }

/* ---- Speelgids ---- */
.focusbox { background:var(--panel); border:1px solid var(--line2); border-left:4px solid var(--gold); border-radius:0 10px 10px 0; padding:16px 20px; margin:0 0 16px; }
.focusbox .eyebrow { display:block; margin-bottom:6px; }
.focusbox p { margin:0; font-family:var(--serif); font-size:18px; line-height:1.4; color:var(--ink); }
.phase { display:grid; gap:12px; grid-template-columns:1fr; margin:10px 0; }
@media(min-width:800px){ .phase{ grid-template-columns:1fr 1fr 1fr; } }
.phase .p { background:var(--panel); border:1px solid var(--line2); border-radius:10px; padding:15px 17px; }
.phase .p h4 { margin:0 0 6px; font-family:var(--cond); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-t); }
.phase .p p { margin:0; font-size:13.5px; color:var(--body); }
ul.tips { padding-left:20px; } ul.tips li { margin:8px 0; font-size:14px; color:var(--body); }
.twocol { display:grid; gap:12px; margin-top:14px; } @media(min-width:760px){ .twocol{ grid-template-columns:1fr 1fr; } }

/* ============================================================
   Drie-koloms deckbouwer
   ============================================================ */
.builder3 { display:grid; grid-template-columns:230px minmax(0,1fr) 360px; height:calc(100vh - 60px); }
.b-rail { background:var(--bg2); border-right:1px solid var(--line); padding:18px 16px; overflow-y:auto; display:flex; flex-direction:column; gap:22px; }
.b-main { min-width:0; display:flex; flex-direction:column; }
.b-toolbar { height:52px; flex:none; display:flex; align-items:center; gap:12px; padding:0 20px; border-bottom:1px solid var(--line); background:var(--bg3); }
.b-toolbar .searchbig { margin:0; flex:1; max-width:420px; padding:8px 12px; }
.b-scroll { flex:1; overflow-y:auto; padding:20px; }
.b-side { background:var(--panel); border-left:1px solid var(--line); box-shadow:-18px 0 36px rgba(15,23,42,.06); display:flex; flex-direction:column; overflow:hidden; }
.b-side-head { padding:16px 18px 14px; border-bottom:1px solid var(--line2); display:flex; flex-direction:column; gap:12px; }
.b-side-scroll { flex:1; overflow-y:auto; padding:8px 12px 16px; }
.b-side-foot { flex:none; padding:12px 14px; border-top:1px solid var(--line2); background:var(--bg2); display:flex; gap:8px; }
.dl-head { display:flex; align-items:baseline; justify-content:space-between; }
.dl-title { font-family:var(--cond); font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-t); }
.dl-count { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.dl-stats { display:flex; gap:16px; }
.dl-stats .s b { font-family:var(--serif); font-size:18px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink); }
.dl-stats .s span { display:block; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.dl-curve { display:flex; align-items:flex-end; gap:5px; height:48px; }
.dl-curve .c { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
.dl-curve .cb { width:100%; border-radius:2px; }
.dl-curve .cl { font-size:9px; color:var(--faint); font-variant-numeric:tabular-nums; }
.dl-group { margin-top:10px; }
.dl-glab { display:flex; align-items:center; gap:8px; padding:0 6px 5px; }
.dl-glab .t { font-family:var(--cond); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.dl-glab .ln { flex:1; height:1px; background:var(--line2); } .dl-glab .n { font-size:11px; color:var(--faint); }
/* Bouwer-zijkant (#bHead/#bSecties in .b-side) — eigen flex-layout, wint van de
   globale .dl-tabel-grid zodat de kaart-rijen en de −/+/✕-knoppen netjes staan. */
.b-side .dl-head { display:flex!important; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px 8px; background:none; border:0; }
.b-side .dl-title { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.b-side .dl-count { font-size:14px; font-weight:700; color:var(--ink); letter-spacing:0; }
.b-side .dl-row { display:flex!important; align-items:center; gap:8px; padding:5px 6px; border-radius:6px; cursor:pointer; }
.b-side .dl-row:hover { background:var(--bg3); }
.b-side .dl-row .thumb { width:30px; height:22px; border-radius:3px; object-fit:cover; flex:none; background:var(--bg2); border:1px solid var(--line2); }
.b-side .dl-row .q { width:22px; text-align:right; font-size:12px; font-variant-numeric:tabular-nums; color:var(--gold-t); font-weight:600; flex:none; }
.b-side .dl-row .nm { flex:1; font-size:12.5px; color:var(--body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.b-side .dl-row .step { display:inline-flex; align-items:center; gap:3px; flex:none; margin-left:4px; }
.b-side .dl-row .step button { background:var(--bg2); border:1px solid var(--line); border-radius:6px; color:var(--muted); font-size:14px; line-height:1; width:25px; height:25px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .12s, color .12s, border-color .12s; }
.b-side .dl-row .step button:hover { color:var(--gold); border-color:var(--gold-tint-bd); background:var(--gold-tint); }
.b-side .dl-row .rm { color:var(--faint); font-weight:600; }
.b-side .dl-row .rm:hover { color:#fff!important; background:var(--red)!important; border-color:var(--red)!important; }
.b-meta { display:flex; flex-direction:column; gap:11px; }
.b-field label { display:block; font-family:var(--cond); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.b-field input, .b-field textarea, .b-field select { width:100%; border:1px solid var(--line3); border-radius:6px; padding:8px 11px; font:inherit; font-size:13px; background:var(--panel); color:var(--ink2); }
.b-field input:focus, .b-field textarea:focus { outline:none; border-color:var(--gold); }
.b-field textarea { min-height:52px; resize:vertical; }
.finding { font-size:12.5px; padding:8px 11px; border-radius:7px; margin:6px 0; display:flex; gap:8px; align-items:flex-start; line-height:1.4; }
.finding.fout { background:#f6e7e2; color:#8a3323; } .finding.letop{ background:#f6ecd6; color:#7a5a18; } .finding.ok{ background:#e9f0e8; color:#33613f; }
.addgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; }
.emptybuild { color:var(--muted); text-align:center; padding:30px; font-size:13px; }

/* ---- Proefhand ---- */
.handbar { position:fixed; left:250px; right:380px; bottom:16px; z-index:44; background:rgba(255,255,255,.95); backdrop-filter:blur(12px); border:1px solid var(--line3); border-radius:10px; box-shadow:0 22px 46px rgba(15,23,42,.2); padding:14px 16px; animation:layerIn .22s ease-out; }
@media(max-width:1100px){ .handbar{ left:12px; right:12px; } }
.handbar .hh { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.handbar .hh .t { font-family:var(--cond); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-t); }
.handbar .hh .m { font-size:11.5px; color:var(--muted); }
.hand { display:flex; gap:10px; }
.hcard { flex:1; min-width:0; height:132px; border-radius:7px; border:1px solid var(--line); overflow:hidden; position:relative; background:linear-gradient(160deg,var(--art,#e3ddce),#fff 72%); display:flex; flex-direction:column; justify-content:flex-end; }
.hcard img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hcard .cap { position:relative; z-index:1; background:linear-gradient(0deg,rgba(0,0,0,.72),transparent); color:#fff; padding:7px 8px; font-family:var(--serif); font-size:12px; font-weight:600; line-height:1.15; }

/* ---- Kaart-detail (sheet) ---- */
.ov { position:fixed; inset:0; background:rgba(15,23,42,.36); backdrop-filter:blur(3px); z-index:60; display:none; align-items:center; justify-content:center; animation:veilIn .16s ease-out; padding:20px; }
.ov.on { display:flex; }
.sheet { width:820px; max-width:96vw; max-height:92vh; overflow:auto; display:flex; gap:26px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:26px; box-shadow:0 40px 80px rgba(50,42,22,.3); animation:layerIn .22s cubic-bezier(.2,.8,.3,1); position:relative; }
@media(max-width:680px){ .sheet{ flex-direction:column; } }
.sheet .bigart { position:relative; width:280px; flex:none; border-radius:10px; overflow:hidden; align-self:flex-start; background:linear-gradient(150deg,var(--art,#e3ddce),var(--bg2) 82%); border:1px solid var(--line); aspect-ratio:488/680; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); }
.sheet .bigart img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
@media(max-width:680px){ .sheet .bigart{ width:200px; align-self:center; } }
.sheet .info { flex:1; min-width:0; display:flex; flex-direction:column; gap:13px; }
/* Kaart-detail: scrollbaar bovendeel + vaste actiebalk onderaan */
.sheet.card-sheet { display:flex; flex-direction:column; padding:0; gap:0; overflow:hidden; }
.sheet.card-sheet .card-main { display:flex; gap:26px; padding:26px 26px 18px; overflow-y:auto; flex:1; min-height:0; }
.card-sheet .close { z-index:3; }
.cardlinks { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:2px; }
.cardlink-a { background:none; border:0; padding:0; font:inherit; font-size:12.5px; font-weight:600; color:var(--gold-t); cursor:pointer; }
.cardlink-a:hover { text-decoration:underline; color:var(--gold-ink); }
.cardlink-a.on { color:var(--gold-ink); }
.cardlink-a.danger { color:var(--red); }
.cardlinks .bazaar { font-size:12.5px; }
.card-foot { flex:none; display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:13px 24px; border-top:1px solid var(--line); background:var(--panel); }
.cf-have { display:flex; align-items:center; gap:10px; margin-right:auto; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.cf-acts { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cf-primair { padding:11px 22px; font-size:13.5px; }
@media(max-width:680px){
  .sheet.card-sheet .card-main { flex-direction:column; gap:14px; padding:16px 16px 10px; }
  .sheet.card-sheet .bigart { width:100%; max-width:220px; align-self:center; }
  .card-foot { padding:11px 14px; gap:10px; }
  .cf-have { margin-right:0; }
  .cf-acts { width:100%; }
  .cf-acts .cf-primair { flex:1; justify-content:center; }
}
.sheet h2 { font-family:var(--serif); font-size:28px; font-weight:700; line-height:1.1; margin:0; color:var(--ink); }
.sheet .typeline { font-size:12.5px; color:var(--muted); margin-top:4px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.sheet .divider { height:1px; background:var(--line2); }
.sheet .uit { margin:0; font-size:14.5px; line-height:1.65; color:var(--body); }
.sheet .oracle { background:var(--bg2); border:1px solid var(--line2); border-radius:9px; padding:12px 14px; font-size:13px; color:var(--body); }
.sheet .oracle b { display:block; font-family:var(--cond); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:6px; }
.sheet .oracle .ln { margin:3px 0; }
.sheet .metarow { display:flex; gap:22px; flex-wrap:wrap; padding-top:12px; border-top:1px solid var(--line2); }
.sheet .metarow .m span { display:block; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.sheet .metarow .m b { font-size:13px; color:var(--body); font-weight:600; font-variant-numeric:tabular-nums; }
.sheet .have-row { display:flex; align-items:center; gap:12px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line2); }
.have-lbl { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-weight:600; }
.have-edit { display:flex; align-items:center; gap:4px; background:var(--surface-soft); border:1px solid var(--border); border-radius:11px; padding:0 5px; }
.have-edit b { min-width:30px; text-align:center; font-family:var(--serif); font-size:19px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.have-btn { width:34px; height:38px; border:0; background:transparent; font-size:21px; line-height:1; color:var(--muted); cursor:pointer; border-radius:8px; }
.have-btn:hover { background:var(--gold-tint); color:var(--ink); }
.sheet .close { position:absolute; top:14px; right:16px; background:var(--bg2); border:1px solid var(--line2); width:32px; height:32px; border-radius:50%; color:var(--muted); font-size:16px; }
.sheet .close:hover { color:var(--ink); }
.deckpills { display:flex; gap:7px; flex-wrap:wrap; }
/* ---- "Nieuw deck"-picker ---- */
.sheet.ndp-sheet { display:block; padding:0; width:600px; max-width:96vw; overflow:hidden; }
.ndp-head { padding:24px 26px 18px; }
.ndp-head h2 { font-family:var(--serif); font-size:25px; font-weight:600; margin:0; color:var(--ink); letter-spacing:-.01em; }
.ndp-head p { font-size:13.5px; color:var(--muted); margin:5px 0 0; }
.ndp-list { border-top:1px solid var(--line2); }
.ndp-row { position:relative; display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:15px 26px; border:0; border-bottom:1px solid var(--line2); background:none; cursor:pointer; transition:background .14s; }
.ndp-row:hover { background:var(--bg2); }
.ndp-row.on { background:var(--gold-tint); box-shadow:inset 3px 0 0 var(--gold); }
.ndp-mark { width:36px; height:36px; flex:none; border-radius:9px; background:var(--gold-tint); border:1px solid var(--gold-tint-bd); color:var(--gold-d); display:grid; place-items:center; font-family:var(--serif); font-weight:700; font-size:14px; line-height:1; }
.ndp-row.on .ndp-mark { background:#fff; }
.ndp-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.ndp-t { display:flex; align-items:baseline; gap:9px; font-family:var(--serif); font-size:16.5px; font-weight:600; color:var(--ink); }
.ndp-tag { font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-t); flex:none; }
.ndp-s { font-size:12.5px; line-height:1.5; color:var(--muted); text-wrap:pretty; }
.ndp-ch { color:var(--faint); font-size:16px; flex:none; }
.ndp-foot { display:flex; align-items:center; gap:16px; padding:18px 26px 22px; border-top:1px solid var(--line2); }
.ndp-hint { flex:1; font-size:12px; line-height:1.5; color:var(--muted); text-wrap:pretty; }
.ndp-foot .btn { flex:none; }
.ndp-verder-off { flex:none; height:40px; padding:0 20px; border-radius:11px; border:1px dashed var(--border); background:none; color:var(--muted); font:inherit; font-size:14px; font-weight:500; }
/* Grote kaart aanklikbaar → zoombare viewer */
.sheet .bigart { cursor:zoom-in; }
.sheet .bigart::after { content:"⤢"; position:absolute; right:8px; bottom:8px; z-index:2; width:28px; height:28px; border-radius:8px; background:rgba(9,17,13,.55); color:#fff; display:grid; place-items:center; font-size:15px; opacity:0; transition:opacity .14s; pointer-events:none; }
.sheet .bigart:hover::after { opacity:1; }
/* Full-screen zoom-viewer */
.kaartzoom { position:fixed; inset:0; z-index:90; background:rgba(9,17,13,.88); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action:none; animation:veilIn .16s ease-out; }
.kz-img { max-width:94vw; max-height:94vh; border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.6); cursor:zoom-in; user-select:none; will-change:transform; }
.kz-x { position:fixed; top:16px; right:18px; z-index:2; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); color:#fff; font-size:17px; cursor:pointer; display:grid; place-items:center; transition:background .14s; }
.kz-x:hover { background:rgba(255,255,255,.24); }
.kz-hint { position:fixed; bottom:18px; left:0; right:0; text-align:center; color:rgba(255,255,255,.7); font-size:12.5px; pointer-events:none; }
@media(max-width:640px){ .kz-hint { font-size:11.5px; padding:0 20px; } }

/* ---- Chat ---- */
.fab { position:fixed; right:20px; bottom:20px; z-index:45; background:var(--night); color:#fff; border:0; border-radius:24px; padding:12px 18px; font-size:14px; font-weight:600; box-shadow:0 8px 22px rgba(0,0,0,.26); display:inline-flex; align-items:center; gap:9px; }
.fab:hover { filter:brightness(1.25); }
/* geen FAB als er een kaart-/deck-venster of de vergroting open staat */
body:has(#ov.on) .fab, body:has(.verzov.on) .fab, body:has(#kaartzoom) .fab { display:none; }
.chat { position:fixed; top:0; right:0; height:100%; width:100%; max-width:410px; background:var(--panel); z-index:70; box-shadow:-6px 0 40px rgba(0,0,0,.22); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .24s ease; }
.chat.on { transform:translateX(0); }
/* Chatvenster-maten (knopje in de header) */
.chat[data-size="2"] { max-width:600px; }
.chat[data-size="3"] { max-width:min(94vw,940px); }
.chat[data-size="2"] .msg { font-size:14px; }
.chat[data-size="3"] .msg { font-size:15px; line-height:1.65; }
.chat[data-size="3"] .chat-log { padding:20px 22px; gap:14px; }
.chat[data-size="3"] .msg.ai, .chat[data-size="3"] .msg.me { padding:12px 16px; }
.chat-head { background:linear-gradient(120deg,var(--cta-a),var(--cta-b)); color:#fff; padding:15px 18px; display:flex; align-items:center; gap:11px; }
.chat-head b { font-size:15px; } .chat-head small { display:block; opacity:.78; font-size:11px; font-weight:400; }
.chat-head .x { margin-left:auto; background:rgba(255,255,255,.16); color:#fff; border:0; width:32px; height:32px; border-radius:50%; font-size:15px; }
.chat-model { display:flex; align-items:center; gap:8px; padding:9px 14px; border-bottom:1px solid var(--line2); background:var(--bg2); font-size:12px; color:var(--muted); }
.chat-model > span:first-child { font-family:var(--cond); letter-spacing:.12em; text-transform:uppercase; font-weight:600; font-size:11px; }
.chat-model select { border:1px solid var(--line3); border-radius:6px; padding:5px 8px; font:inherit; font-size:12.5px; background:var(--panel); color:var(--ink); max-width:190px; }
.chat-model .model-note { margin-left:auto; font-size:11px; color:var(--faint); white-space:nowrap; text-align:right; }
/* Context-lint: laat zien waar Claude naar meekijkt */
.chat-ctx { display:flex; align-items:center; gap:8px; padding:7px 14px; background:var(--gold-tint); border-bottom:1px solid var(--gold-tint-bd); font-size:12px; color:var(--gold-ink); }
.chat-ctx-dot { width:7px; height:7px; background:var(--gold); transform:rotate(45deg); border-radius:1px; flex:none; }
.chat-ctx-txt { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.chat-ctx .x { background:none; border:0; color:var(--gold-t); font-size:12px; cursor:pointer; padding:2px 4px; }
.chat-ctx .x:hover { color:var(--gold-ink); }
/* Devotion-instelling (Beheer) */
.dev-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; max-width:900px; }
.dev-card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
.dev-balkrij { display:flex; align-items:center; gap:10px; padding:6px 0; }
.dev-balkrij.top .dev-balk-naam { font-weight:700; }
.dev-balk-kleur { width:14px; height:14px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.dev-balk-naam { width:56px; font-size:12.5px; color:var(--ink); }
.dev-balk-track { flex:1; height:8px; background:var(--bg2); border-radius:999px; overflow:hidden; }
.dev-balk-track i { display:block; height:100%; border-radius:999px; }
.dev-balk-pct { width:38px; text-align:right; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.dev-nu { margin-top:14px; padding-top:12px; border-top:1px solid var(--line2); font-size:12.5px; color:var(--muted); }
.dev-opties { display:flex; flex-direction:column; gap:6px; }
.dev-optie { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--surface); cursor:pointer; transition:border-color .12s, background .12s; }
.dev-optie:hover { border-color:var(--gold); }
.dev-optie.on { background:var(--gold-tint); border-color:var(--gold-tint-bd); }
.dev-optie-swatch { width:26px; height:26px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--gold-ink); }
.dev-optie-swatch.dev-auto { background:conic-gradient(var(--mW), var(--mU), var(--mB), var(--mR), var(--mG), var(--mW)); color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.5); }
.dev-optie-txt b { display:block; font-size:13px; color:var(--ink); }
.dev-optie-txt small { display:block; font-size:11.5px; color:var(--muted); }
@media(max-width:720px){ .dev-grid { grid-template-columns:1fr; } }
.chat-quick { padding:12px 14px; border-bottom:1px solid var(--line2); display:flex; gap:7px; flex-wrap:wrap; }
.chat-quick button { background:var(--bg2); border:1px solid var(--line3); border-radius:16px; padding:7px 12px; font-size:12px; color:var(--body); text-align:left; }
.chat-quick button:hover { border-color:var(--gold); color:var(--gold-t); }
.chat-log { flex:1; overflow:auto; padding:16px 15px; display:flex; flex-direction:column; gap:12px; }
.chat-empty { color:var(--muted); font-size:13px; text-align:center; margin:auto 8px; line-height:1.6; }
.msg { max-width:92%; font-size:13.5px; line-height:1.6; }
.msg.me { align-self:flex-end; background:var(--gold); color:#FFFFFF; padding:9px 13px; border-radius:14px 14px 4px 14px; }
.msg.ai { align-self:flex-start; background:var(--bg2); border:1px solid var(--line2); padding:11px 14px; border-radius:14px 14px 14px 4px; white-space:pre-wrap; color:var(--body); }
.cardlink { color:var(--gold-t); text-decoration:underline dotted; text-underline-offset:2px; cursor:pointer; font-weight:600; }
.cardlink:hover { color:var(--gold); }
.msg.ai .cardlink { color:var(--gold-t); text-decoration:underline dotted; cursor:pointer; font-weight:500; }
.toolbadge { align-self:flex-start; font-size:11.5px; color:var(--muted); background:var(--bg2); border:1px solid var(--line2); border-radius:14px; padding:4px 11px; display:inline-flex; align-items:center; gap:6px; }
.toolbadge .spin { width:8px; height:8px; border-radius:50%; background:var(--gold); animation:pulse 1s infinite; }
.chat-in { border-top:1px solid var(--line2); padding:12px 13px; display:flex; gap:8px; align-items:flex-end; }
.chat-in textarea { flex:1; border:1px solid var(--line3); border-radius:11px; padding:10px 12px; font:inherit; font-size:13.5px; resize:none; min-height:42px; max-height:120px; background:var(--bg2); }
.chat-in textarea:focus { outline:none; border-color:var(--gold); background:#fff; }
.chat-in .send { background:var(--gold); color:#FFFFFF; border:0; width:42px; height:42px; border-radius:11px; font-size:17px; flex:none; cursor:pointer; }
.chat-in .send:disabled { opacity:.5; }
.chat-in .send.stopmode { background:#b43c32; color:#fff; font-size:14px; animation:stoppuls 1.1s ease-in-out infinite; }
@keyframes stoppuls { 0%,100%{ box-shadow:0 0 0 0 rgba(180,60,50,.5) } 50%{ box-shadow:0 0 0 5px rgba(180,60,50,0) } }
/* Gesprekken-geschiedenis (logboek) */
.chat-hist { position:absolute; inset:0; z-index:5; background:var(--panel); display:flex; flex-direction:column; animation:layerIn .18s ease-out; }
.chat-hist[hidden] { display:none; }
.chat-hist-head { display:flex; align-items:center; justify-content:space-between; padding:15px 18px; background:linear-gradient(120deg,#12211B,#1C2B24); color:#fff; }
.chat-hist-head b { font-family:var(--serif); font-size:16px; font-weight:600; }
.chat-hist-head .x { background:rgba(255,255,255,.16); color:#fff; border:0; width:30px; height:30px; border-radius:50%; font-size:14px; cursor:pointer; }
.chat-hist-list { flex:1; overflow-y:auto; padding:9px; display:flex; flex-direction:column; gap:6px; }
.chat-hist-item { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:9px; border:1px solid var(--line2); background:var(--panel); cursor:pointer; transition:background .12s, border-color .12s; }
.chat-hist-item:hover { background:var(--bg2); border-color:var(--line3); }
.chat-hist-item.nu { border-color:var(--gold-tint-bd); background:var(--gold-tint); }
.chat-hist-main { flex:1; min-width:0; }
.chat-hist-main b { display:block; font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-hist-main span { display:block; font-size:11px; color:var(--faint); margin-top:2px; }
.chat-hist-ren, .chat-hist-del { flex:none; width:26px; height:26px; border-radius:50%; border:0; background:transparent; color:var(--faint); font-size:12px; cursor:pointer; }
.chat-hist-ren:hover { background:var(--bg2); color:var(--gold-t); }
.chat-hist-del:hover { background:var(--bg2); color:#a3564a; }
.chat-hist-leeg { padding:26px 18px; text-align:center; font-size:13px; color:var(--muted); line-height:1.55; }

/* ---- Uitleg / legenda ---- */
.legend { background:var(--panel); border:1px solid var(--line2); border-radius:12px; padding:18px 20px; margin:14px 0; box-shadow:var(--shadow); }
.legend h3 { margin:0 0 4px; font-family:var(--serif); font-size:20px; font-weight:600; color:var(--ink); }
.legend .rowl { display:flex; align-items:center; gap:11px; margin:9px 0; font-size:14px; color:var(--body); }
.card-info { background:var(--panel); border:1px solid var(--line2); border-radius:12px; padding:18px 20px; margin:14px 0; box-shadow:var(--shadow); }
.card-info h3 { margin:0 0 8px; font-family:var(--serif); font-size:20px; font-weight:600; color:var(--ink); }

/* ---- Toast ---- */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:11px 20px; border-radius:10px; font-size:13.5px; z-index:90; box-shadow:var(--shadow-lg); opacity:0; transition:opacity .2s, transform .2s; pointer-events:none; }
.toast.on { opacity:1; transform:translateX(-50%) translateY(-4px); }

.export { width:100%; min-height:180px; border:1px solid var(--line3); border-radius:10px; padding:12px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; background:var(--bg2); white-space:pre; }

/* niet-bezeten kaart in een decklijst */
.crow.tekort { border-left:3px solid var(--gold); }
.crow .owntag.buy b { font-variant-numeric:tabular-nums; }

/* ---- Decks-overzicht: overzichtelijker ---- */
.dsummary { display:flex; gap:12px; flex-wrap:wrap; margin:6px 0 22px; }
.dsummary .s { background:var(--panel); border:1px solid var(--line2); border-radius:10px; padding:12px 18px; box-shadow:var(--shadow); }
.dsummary .s b { font-family:var(--serif); font-size:24px; color:var(--ink); display:block; line-height:1; }
.dsummary .s span { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.dcard .cmdrline { margin-top:8px; font-size:12px; opacity:.92; display:flex; align-items:center; gap:6px; }
.dcard .idee.clamp { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em; }
.dmeta { font-size:12px; color:var(--muted); margin:0 0 10px; font-variant-numeric:tabular-nums; }
.statuspill { font-size:11px; font-weight:600; letter-spacing:.03em; padding:4px 11px; border-radius:20px; display:inline-flex; align-items:center; gap:5px; }
.statuspill.ok { background:#e9f0e8; color:var(--ok); }
.statuspill.buy { background:#f6ecd6; color:#8a6414; }

/* ---- Wizard ---- */
.wizwrap { max-width:1200px; margin:0 auto; padding:24px 22px 120px; }
.wizhead { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:6px; }
.steps { display:flex; align-items:center; gap:10px; margin:4px 0 24px; }
.steps .sd { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--faint); }
.steps .sd .num { width:23px; height:23px; border-radius:50%; border:1px solid var(--line3); background:var(--panel); display:inline-flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; color:var(--faint); }
.steps .sd.done .num { background:var(--gold-tint); border-color:var(--gold-tint-bd); color:var(--gold-d); }
.steps .sd.done { color:var(--gold-t); font-weight:500; }
.steps .sd.on .num { background:var(--primary); border-color:var(--primary); color:#fff; }
.steps .sd.on { color:var(--ink); font-weight:600; }
.steps .sep { width:26px; height:1px; background:var(--line3); }

/* ---- Premium deckbouw-wizard (stap 2): tweekoloms met sticky zijbalk ---- */
.wz2 { display:grid; grid-template-columns:360px 1fr; gap:30px; align-items:start; }
.wz-side { position:sticky; top:80px; display:flex; flex-direction:column; gap:16px; }
.wz-main { min-width:0; display:flex; flex-direction:column; gap:30px; }
.wz-cmdcard { background:var(--night); color:var(--night-text); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow-lg); }
.wz-cc-head { display:flex; align-items:center; justify-content:space-between; }
.wz-cc-lab { font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(234,243,238,.5); }
.wz-cc-inhuis { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:#8fc7a6; }
.wz-cc-inhuis .d { width:6px; height:6px; border-radius:50%; background:#6fbf9c; }
.wz-cc-koop { font-size:11.5px; font-weight:600; color:var(--gold-on-dark); }
.wz-cc-body { display:flex; gap:14px; align-items:flex-start; }
.wz-cc-art { width:104px; flex:none; aspect-ratio:488/680; border-radius:9px; overflow:hidden; background:linear-gradient(150deg,var(--art,#1c3a2c),#10241b); box-shadow:0 8px 20px rgba(0,0,0,.35); }
.wz-cc-art img { width:100%; height:100%; object-fit:cover; display:block; }
.wz-cc-info { min-width:0; display:flex; flex-direction:column; gap:8px; }
.wz-cc-name { font-family:var(--serif); font-size:20px; font-weight:600; line-height:1.15; color:#fff; text-wrap:pretty; }
.wz-cc-type { font-size:11.5px; color:rgba(234,243,238,.6); }
.wz-cc-tags, .wz-cc-colors { display:flex; gap:6px; flex-wrap:wrap; }
.wz-cc-tag { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px; border-radius:6px; background:rgba(123,197,158,.14); font-size:11.5px; color:#a8d9bd; }
.wz-cc-tag .d { width:8px; height:8px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); }
.wz-cc-txt { font-size:12.5px; line-height:1.55; color:rgba(234,243,238,.72); text-wrap:pretty; }
.wz-cc-foot { display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid rgba(234,243,238,.12); }
.wz-cc-ander { font-size:12.5px; color:rgba(234,243,238,.62); cursor:pointer; }
.wz-cc-ander:hover { color:#fff; }
.wz-cc-step { font-size:12px; color:rgba(234,243,238,.42); }
.wz-sum { background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.wz-sum-h { padding:16px 20px 12px; font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.wz-sum-row { display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:11px 20px; border-top:1px solid var(--line2); }
.wz-sum-row span { font-size:12.5px; color:var(--muted); }
.wz-sum-row b { font-size:13px; font-weight:600; color:var(--ink); text-align:right; }
.wz-sum-acts { padding:16px 20px 20px; display:flex; flex-direction:column; gap:9px; border-top:1px solid var(--line2); }
.wz-sum-acts .btn { width:100%; justify-content:center; }
.wz-sum-hint { font-size:11.5px; line-height:1.5; color:var(--muted); margin:2px 0 0; text-wrap:pretty; }
.wz-sec { display:flex; flex-direction:column; gap:14px; }
.wz-sec-h { display:flex; align-items:baseline; gap:10px; }
.wz-sec-h h2 { font-family:var(--serif); font-size:21px; font-weight:600; margin:0; color:var(--ink); letter-spacing:-.005em; }
.wz-sec-sub { font-size:12.5px; color:var(--muted); }
.wz-brk-uit { font-size:12.5px; line-height:1.55; color:var(--body); padding-top:4px; }
.wz-two { display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start; }
.wz-idee { width:100%; box-sizing:border-box; height:104px; resize:vertical; padding:13px 15px; border-radius:12px; border:1px solid var(--border); background:var(--surface); font:inherit; font-size:13.5px; line-height:1.55; color:var(--ink); outline:none; transition:border-color .14s, box-shadow .14s; }
.wz-idee:focus { border-color:var(--gold); box-shadow:0 0 0 3px var(--ring); }
.wz-veld-hint { font-size:11.5px; color:var(--muted); }
.wz-toggles { background:var(--panel); border:1px solid var(--line); border-radius:13px; overflow:hidden; }
.wz-tg { display:flex; align-items:flex-start; gap:13px; width:100%; text-align:left; padding:14px 16px; border:0; border-bottom:1px solid var(--line2); background:none; cursor:pointer; transition:background .14s; }
.wz-tg:last-child { border-bottom:0; }
.wz-tg:hover { background:var(--bg2); }
.wz-tg-sw { position:relative; width:36px; height:21px; border-radius:999px; background:var(--line3); flex:none; margin-top:1px; transition:background .16s; }
.wz-tg-sw::after { content:""; position:absolute; top:3px; left:3px; width:15px; height:15px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:left .16s; }
.wz-tg.on .wz-tg-sw { background:var(--gold); }
.wz-tg.on .wz-tg-sw::after { left:18px; }
.wz-tg-txt { display:flex; flex-direction:column; gap:3px; min-width:0; }
.wz-tg-txt b { font-size:13.5px; font-weight:600; color:var(--ink); }
.wz-tg-txt span { font-size:12px; line-height:1.5; color:var(--muted); text-wrap:pretty; }
@media(max-width:900px){ .wz2 { grid-template-columns:1fr; gap:22px; } .wz-side { position:static; } .wz-two { grid-template-columns:1fr; gap:20px; } }
.wizbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.wiznav { display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
.cmdrpick .cart { aspect-ratio:626/457; }
.pricepill { font-size:10px; font-weight:600; padding:2px 7px; border-radius:20px; background:#f6ecd6; color:#8a6414; }
/* gekozen commander in stap 2 */
.cmdrhero { display:flex; gap:22px; background:var(--panel); border:1px solid var(--line2); border-radius:14px; padding:20px; box-shadow:var(--shadow); margin-bottom:22px; }
@media(max-width:680px){ .cmdrhero{ flex-direction:column; } }
.cmdrhero .art { width:220px; flex:none; border-radius:10px; overflow:hidden; aspect-ratio:488/680; background:linear-gradient(150deg,var(--art,#e3ddce),var(--bg2)); border:1px solid var(--line); }
.cmdrhero .art img { width:100%; height:100%; object-fit:cover; display:block; }
.cmdrhero h2 { font-family:var(--serif); font-size:26px; margin:0 0 4px; color:var(--ink); }
.stylegrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.stylecard { text-align:left; background:var(--panel); border:1.5px solid var(--line2); border-radius:12px; padding:16px 18px; cursor:pointer; transition:.14s; position:relative; }
.stylecard:hover { border-color:#d8c9a4; transform:translateY(-2px); box-shadow:var(--shadow); }
.stylecard.on { border-color:var(--gold); box-shadow:0 0 0 3px rgba(46,125,90,.16); }
.stylecard .ic { font-size:22px; }
.stylecard h4 { font-family:var(--serif); font-size:18px; margin:8px 0 4px; color:var(--ink); }
.stylecard p { margin:0; font-size:13px; color:var(--body); line-height:1.5; }
.stylecard .fit { position:absolute; top:12px; right:12px; font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ok); background:var(--gold-tint); padding:3px 8px; border-radius:20px; }
.stijl-extra { display:none; }
.stylegrid.toon-alle .stijl-extra { display:block; }
.meer-stijl { margin-top:12px; background:var(--surface); border:1px solid var(--border); color:var(--gold-t); border-radius:9px; padding:9px 16px; font-size:13px; font-weight:600; cursor:pointer; transition:border-color .14s, color .14s; }
.meer-stijl:hover { border-color:var(--gold-tint-bd); color:var(--gold-d); }
.buildstatus { background:var(--panel); border:1px solid var(--line2); border-radius:12px; padding:22px; box-shadow:var(--shadow); text-align:center; }

/* ---- Wizard: 'ik wil advies' ---- */
.adviesbanner { display:flex; align-items:center; gap:16px; background:linear-gradient(120deg,var(--gold-tint),#DFF0E6); border:1.5px solid var(--gold-tint-bd); border-radius:14px; padding:16px 20px; margin-bottom:18px; cursor:pointer; transition:.14s; box-shadow:var(--shadow); }
.adviesbanner:hover { border-color:var(--gold); transform:translateY(-2px); }
.adviesbanner .ab-ic { font-size:30px; flex:none; }
.adviesbanner .ab-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.adviesbanner .ab-txt b { font-family:var(--serif); font-size:18px; color:var(--ink); }
.adviesbanner .ab-txt span { font-size:13.5px; color:var(--body); }
.adviesbanner .ab-go { font-family:var(--cond); font-weight:700; letter-spacing:.03em; color:var(--gold-d); white-space:nowrap; flex:none; }
.advieskop { display:flex; gap:16px; align-items:flex-start; margin-bottom:6px; }
.advieskop .ab-ic { font-size:30px; flex:none; }
.advieskop h2 { font-family:var(--serif); font-size:24px; color:var(--ink); }
.kleurhulp { display:flex; flex-wrap:wrap; gap:10px; }
.kleurkeuze { display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; min-width:96px; background:var(--panel); border:1.5px solid var(--line2); border-radius:11px; padding:12px 10px 10px; cursor:pointer; transition:.14s; font-family:var(--cond); font-weight:600; color:var(--ink); text-transform:capitalize; }
.kleurkeuze:hover { border-color:#d8c9a4; transform:translateY(-2px); }
.kleurkeuze.on { border-color:var(--gold); box-shadow:0 0 0 3px rgba(46,125,90,.16); }
.kleurkeuze .kb { width:26px; height:26px; border-radius:50%; border:1px solid rgba(0,0,0,.12); margin-bottom:4px; }
.kleurkeuze small { font-family:var(--sans); font-weight:400; font-size:10.5px; color:var(--muted); text-transform:none; line-height:1.25; }

/* ---- Deckversies-balk ---- */
.versiebalk { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--bg3); border:1px solid var(--line2); border-radius:12px; padding:10px 14px; margin:14px 0 4px; }
.versiebalk .vb-label { font-family:var(--cond); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.versiebalk .vb-chips { display:flex; flex-wrap:wrap; gap:8px; }
.vb-chip { display:inline-flex; align-items:center; gap:6px; font-family:var(--cond); font-size:15px; font-weight:600; color:var(--body); background:var(--panel); border:1.5px solid var(--line2); border-radius:20px; padding:5px 13px; cursor:pointer; transition:.13s; white-space:nowrap; }
.vb-chip[data-vkies]:hover { border-color:#d8c9a4; }
.vb-chip.on { border-color:var(--gold); color:var(--ink); background:#fbf4e2; box-shadow:0 0 0 2px rgba(46,125,90,.13); cursor:default; }
.vb-chip .vb-ic { font-size:14px; }
.versiebalk .vb-hint { flex:1; min-width:140px; font-size:12.5px; color:var(--muted); }
.versiebalk .vb-acties { display:flex; gap:6px; margin-left:auto; }
.versiebalk.solo .vb-chip { cursor:default; }
@media(max-width:680px){ .versiebalk .vb-hint { display:none; } .versiebalk .vb-acties { margin-left:0; } }

/* ---- Actieve decks + fysieke kaartconflicten ---- */
/* "Nu op tafel" — prominente kaart voor het opgebouwde deck */
.tafel-wrap { margin:18px 0 4px; }
.tafel-card { display:flex; background:var(--panel); border:1px solid var(--gold-tint-bd); border-radius:20px; overflow:hidden; box-shadow:0 1px 2px rgba(15,23,42,.05), 0 20px 44px rgba(15,23,42,.09); margin-bottom:12px; }
.tafel-art { width:236px; flex:none; background-size:cover; background-position:center; background-color:#141c15; }
.tafel-body { flex:1; min-width:0; padding:24px 26px 22px; display:flex; flex-direction:column; }
.tafel-top { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.tafel-eyebrow { display:flex; align-items:center; gap:9px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#5E7A58; font-weight:600; }
.tafel-dot { width:7px; height:7px; background:#7FA97A; border-radius:50%; flex:none; }
.tafel-titel h2 { font-family:var(--serif); font-size:30px; line-height:1.1; font-weight:600; margin:9px 0 0; color:var(--ink); }
.tafel-sub { display:flex; align-items:center; gap:10px; margin-top:7px; flex-wrap:wrap; font-size:13px; color:var(--muted); }
.tafel-pips { display:inline-flex; gap:3px; } .tafel-pips span { width:13px; height:13px; border-radius:50%; border:1px solid rgba(15,23,42,.16); }
.tafel-vsep { color:var(--line3); }
.tafel-sub b { color:var(--ink); font-weight:600; }
.tafel-acts { display:flex; gap:9px; flex:none; }
.tafel-stats { display:flex; align-items:flex-end; gap:34px; margin-top:auto; padding-top:22px; flex-wrap:wrap; }
.tafel-stat b { font-family:var(--serif); font-size:22px; line-height:1; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.tafel-stat span { display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-top:6px; }
.tafel-deact { margin-left:auto; align-self:flex-end; background:none; border:0; color:var(--muted); font-size:12px; cursor:pointer; }
.tafel-deact:hover { color:#a3564a; text-decoration:underline; }
@media(max-width:640px){ .tafel-card { flex-direction:column; } .tafel-art { width:100%; height:150px; } .tafel-top { flex-direction:column; gap:12px; } .tafel-acts { width:100%; } }
.activebox { border-radius:12px; padding:14px 16px; margin:14px 0 4px; border:1px solid var(--line2); background:var(--bg3); }
.activebox.leeg { display:flex; gap:12px; align-items:center; }
.activebox.leeg .ab2-ic { font-size:24px; }
.activebox.leeg b { font-family:var(--serif); font-size:16px; color:var(--ink); display:block; }
.activebox.leeg span { font-size:12.5px; color:var(--muted); }
.activebox.ok { border-color:#bfe0c8; background:linear-gradient(120deg,#f1f7f0,#eef5ee); }
.activebox.botst { border-color:#e6cfa2; background:linear-gradient(120deg,#f9f2df,#f6ecd6); }
.ab2-head { display:flex; gap:12px; align-items:center; }
.ab2-head .ab2-ic { font-size:24px; }
.ab2-head b { font-family:var(--serif); font-size:17px; color:var(--ink); }
.ab2-head > div > span { display:block; font-size:12.5px; color:var(--body); margin-top:1px; }
.activebox.ok .ab2-head > div > span { color:#2f7d4a; }
.activebox.botst .ab2-head > div > span { color:#a3701a; }
.ab2-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.ab2-chip { display:inline-flex; align-items:center; gap:7px; background:var(--panel); border:1px solid var(--line2); border-radius:18px; padding:5px 6px 5px 13px; font-family:var(--cond); font-weight:600; font-size:13.5px; color:var(--ink); cursor:pointer; }
.ab2-x { border:0; background:rgba(0,0,0,.06); color:var(--muted); width:19px; height:19px; border-radius:50%; cursor:pointer; font-size:11px; line-height:1; }
.ab2-x:hover { background:var(--red); color:#fff; }
.conflictlijst { display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.conflictlijst.compact { margin-top:10px; }
#modal .conflictlijst { max-height:44vh; overflow-y:auto; padding-right:4px; }
.activebox .conflictlijst { max-height:220px; overflow-y:auto; }
.cf-row { display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; background:var(--panel); border:1px solid var(--line2); border-radius:9px; padding:8px 12px; cursor:pointer; }
.cf-row:hover { background:#fbf4e2; }
.cf-naam { font-weight:700; color:var(--ink); font-size:13.5px; min-width:150px; }
.cf-tel { font-size:12.5px; color:var(--body); }
.cf-tel b, .cf-door b { color:var(--gold-d); }
.cf-door { font-size:12px; color:var(--muted); margin-left:auto; }
.mx-actbtn { display:inline-block; border:1px solid var(--line2); background:var(--panel); color:var(--muted); font-family:var(--cond); font-weight:700; font-size:11px; letter-spacing:.03em; border-radius:16px; padding:3px 10px; cursor:pointer; transition:.13s; white-space:nowrap; }
.mx-actbtn:hover { border-color:var(--ok); color:var(--ok); }
.mx-actbtn.aan { background:var(--ok); border-color:var(--ok); color:#fff; }
.mx-actlabel { display:inline-block; margin-top:3px; font-family:var(--cond); font-weight:700; font-size:10.5px; letter-spacing:.03em; color:#2f7d4a; background:#eaf4ec; border:1px solid #bfe0c8; border-radius:14px; padding:2px 9px; }
td.c-deck.act { box-shadow:inset 4px 0 0 var(--ok); }
.loscheck { display:flex; gap:9px; align-items:flex-start; background:var(--gold-tint); border:1px solid var(--gold-tint-bd); border-radius:10px; padding:10px 13px; font-size:13px; line-height:1.45; color:var(--body); cursor:pointer; }
.loscheck input { margin-top:2px; flex:0 0 auto; width:16px; height:16px; accent-color:var(--gold); cursor:pointer; }
.bezetbadge { position:absolute; top:7px; left:7px; font-family:var(--cond); font-weight:700; font-size:10px; letter-spacing:.03em; padding:2px 7px; border-radius:10px; color:#fff; }
.bezetbadge.vol { background:rgba(150,58,46,.92); }
.bezetbadge.deel { background:rgba(176,118,26,.92); }

/* ---- Deck toetsen (1-op-1 wissels) ---- */
.toetsov { position:fixed; inset:0; z-index:56; display:none; background:rgba(28,23,15,.62); backdrop-filter:blur(5px); align-items:center; justify-content:center; padding:20px; }
.toetsov.on { display:flex; animation:veilIn .18s ease-out; }
.toets-frame { position:relative; width:100%; max-width:760px; height:min(90vh,780px); background:var(--panel); border:1px solid var(--line2); border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.4); display:flex; flex-direction:column; overflow:hidden; }
.toets-head { padding:20px 24px 12px; border-bottom:1px solid var(--line2); }
.toets-head h2 { font-family:var(--serif); font-size:24px; margin:2px 0 0; color:var(--ink); }
.toets-body { flex:1; overflow-y:auto; padding:16px 24px 22px; }
.toets-list { display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.toets-rij { border:1px solid var(--line2); border-radius:12px; padding:12px 14px; background:var(--panel); }
.toets-rij.klaar { background:#f1f7f0; border-color:#cbe3cf; }
.toets-swap { display:flex; align-items:center; gap:12px; }
.toets-kaart { display:flex; align-items:center; gap:10px; flex:1; min-width:0; cursor:pointer; }
.tk-art { flex:0 0 auto; width:52px; height:38px; border-radius:6px; overflow:hidden; background:linear-gradient(150deg,color-mix(in srgb,var(--art,#e3ddce) 55%,#2a2018),#1c1712); }
.tk-art img { width:100%; height:100%; object-fit:cover; object-position:center 20%; }
.tk-txt { min-width:0; } .tk-txt b { display:block; font-size:13.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tk-lab { font-family:var(--cond); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; }
.tk-lab.uit { color:#a3564a; } .tk-lab.erin { color:#2f7d4a; }
.toets-pijl { flex:0 0 auto; color:var(--muted); font-size:18px; }
.toets-waarom { font-size:12.5px; color:var(--body); margin:9px 0 10px; line-height:1.45; }
.toets-waarom b { color:var(--gold-d); }
.toets-acties { display:flex; gap:8px; align-items:center; }
@media(max-width:560px){ .toets-frame { height:94vh; } .toets-swap { flex-direction:column; align-items:stretch; } .toets-pijl { transform:rotate(90deg); align-self:center; } }

/* ---- Verzamel-checklist ---- */
.verzov { position:fixed; inset:0; z-index:56; display:none; background:rgba(28,23,15,.62); backdrop-filter:blur(5px); align-items:center; justify-content:center; padding:20px; }
.verzov.on { display:flex; animation:veilIn .18s ease-out; }
.verz-frame { position:relative; width:100%; max-width:820px; height:min(92vh,860px); background:var(--panel); border:1px solid var(--line2); border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.4); display:flex; flex-direction:column; overflow:hidden; }
.verz-head { padding:20px 24px 12px; border-bottom:1px solid var(--line2); }
.verz-head h2 { font-family:var(--serif); font-size:24px; margin:2px 0 0; color:var(--ink); }
.verz-sub { font-size:12.5px; color:var(--muted); margin:6px 0 0; max-width:60ch; }
.verz-prog { margin-top:12px; }
.verz-prog-bar { height:10px; background:var(--line); border-radius:6px; overflow:hidden; }
.verz-prog-bar > div { height:100%; background:var(--ok); border-radius:6px; transition:width .3s; }
.verz-prog-txt { display:block; margin-top:5px; font-family:var(--cond); font-weight:700; font-size:12.5px; color:var(--muted); letter-spacing:.03em; }
.verz-tools { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 24px; border-bottom:1px solid var(--line); background:var(--bg3); }
.verz-htoggle { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--body); cursor:pointer; }
.verz-htoggle input { width:15px; height:15px; accent-color:var(--gold); cursor:pointer; }
.verz-list { flex:1; overflow-y:auto; padding:10px 20px 20px; }
.verz-row { display:flex; align-items:center; gap:11px; padding:10px 10px; border-radius:9px; cursor:pointer; border-bottom:1px solid var(--line); }
.verz-row:hover { background:var(--bg3); }
.verz-row input { position:absolute; opacity:0; width:0; height:0; }
.verz-check { flex:0 0 auto; width:22px; height:22px; border:2px solid var(--line3); border-radius:6px; display:inline-flex; align-items:center; justify-content:center; transition:.12s; }
.verz-check::after { content:"✓"; color:#fff; font-size:14px; font-weight:700; opacity:0; }
.verz-row input:checked + .verz-check { background:var(--ok); border-color:var(--ok); }
.verz-row input:checked + .verz-check::after { opacity:1; }
.verz-qty { flex:0 0 auto; font-family:var(--cond); font-weight:700; font-size:13px; color:var(--muted); min-width:30px; }
.verz-naam { flex:1; min-width:0; font-family:var(--serif); font-size:15.5px; color:var(--ink); }
.verz-mana { flex:0 0 auto; }
.verz-tag { flex:0 0 auto; font-family:var(--cond); font-weight:700; font-size:10.5px; letter-spacing:.03em; text-transform:uppercase; padding:2px 9px; border-radius:12px; }
.verz-tag.heb { background:#eaf4ec; color:#2f7d4a; }
.verz-tag.koop { background:#f6ece9; color:#a3564a; }
.verz-row.done .verz-naam { color:var(--muted); text-decoration:line-through; }
.verz-row.done .verz-qty { color:var(--faint); }
.verz-tick { flex:0 0 auto; display:inline-flex; align-items:center; padding:4px; margin:-4px; cursor:pointer; }
.verz-tick input { position:absolute; opacity:0; width:0; height:0; }
.verz-tick:hover .verz-check { border-color:var(--gold); }

.verz-thumb { flex:0 0 auto; width:40px; height:29px; border-radius:6px; overflow:hidden; background:var(--bg2); position:relative; }
.verz-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.verz-mid { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.verz-mid .verz-naam { flex:none; }
.verz-sub2 { font-size:11px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.verz-row.done .verz-sub2 { text-decoration:line-through; }
@media(max-width:760px){ .verz-sub2 { white-space:normal; } }

@media(max-width:560px){ .verz-frame { height:94vh; } .verz-tools { flex-direction:column; align-items:flex-start; gap:8px; } }

/* ============================================================
   Deckpagina — "rustiger" ontwerp (dp2)
   ============================================================ */
.dp2 { background:#F1F5F9; min-height:calc(100vh - 60px); color:#0F172A; padding-bottom:80px; -webkit-font-smoothing:antialiased; }
.dp2-hero { position:relative; width:100%; height:360px; background:#232B24 center/cover no-repeat; overflow:hidden; }
.dp2-hero-overlay { position:absolute; inset:0; pointer-events:none; background:linear-gradient(100deg,rgba(19,25,20,.92),rgba(19,25,20,.66) 44%,rgba(19,25,20,.12) 82%),linear-gradient(to top,rgba(19,25,20,.62),rgba(19,25,20,0) 58%); }
.dp2-hero-inner { position:relative; z-index:1; max-width:1200px; margin:0 auto; height:100%; padding:20px 22px 28px; display:flex; flex-direction:column; color:#EAF3EE; }
.dp2-hero-top { display:flex; align-items:center; justify-content:space-between; }
.dp2-back { background:none; border:0; color:rgba(234,243,238,.82); font:inherit; font-size:12.5px; cursor:pointer; }
.dp2-back:hover { color:#fff; }
.dp2-verwrap { position:relative; }
.dp2-verbtn { display:flex; align-items:center; gap:8px; background:rgba(19,25,20,.45); backdrop-filter:blur(6px); border:1px solid rgba(234,243,238,.28); border-radius:8px; padding:7px 12px; font:inherit; font-size:12.5px; font-weight:600; color:#EAF3EE; cursor:pointer; }
.dp2-verbtn:hover { border-color:var(--gold); }
.dp2-verbtn .dot { width:6px; height:6px; border-radius:50%; background:var(--gold); }
.dp2-verbtn .car { opacity:.6; font-weight:400; }
.dp2-vermenu, .dp2-menu { position:absolute; top:100%; right:0; margin-top:6px; z-index:30; background:#FFFFFF; border:1px solid #E2E8F0; border-radius:10px; box-shadow:0 12px 32px rgba(19,25,20,.24); padding:6px; min-width:230px; color:#0F172A; }
.dp2-vermenu .h { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#9A917E; padding:6px 10px 8px; }
.dp2-veritem { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:7px; font-size:13px; cursor:pointer; color:#475569; }
.dp2-veritem:hover { background:#F1F5F9; }
.dp2-veritem .mk { font-size:11px; color:var(--gold); width:11px; flex:0 0 auto; }
.dp2-vermenu .sep, .dp2-menu .sep { height:1px; background:#E2E8F0; margin:6px 8px; }
.dp2-vernieuw { padding:8px 10px; border-radius:7px; font-size:13px; font-weight:600; color:#6B4E1E; cursor:pointer; }
.dp2-vernieuw:hover { background:#F1F5F9; }
.dp2-hero-main { margin-top:auto; display:flex; align-items:flex-end; gap:32px; }
.dp2-hero-txt { flex:1; min-width:0; }
.dp2-eyebrow { display:flex; align-items:center; gap:8px; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(234,243,238,.72); margin-bottom:12px; }
.dp2-hero-txt h1 { font-family:var(--serif); font-size:44px; line-height:1.05; font-weight:600; letter-spacing:-.01em; margin:0; color:#fff; }
.dp2-hero-txt p { font-size:14px; line-height:1.55; color:rgba(234,243,238,.8); max-width:52ch; margin:12px 0 0; }
.dp2-hero-meta { display:flex; align-items:center; gap:12px; margin-top:18px; flex-wrap:wrap; }
.dp2-cmdpill { display:flex; align-items:center; gap:9px; background:rgba(19,25,20,.42); border:1px solid rgba(234,243,238,.2); border-radius:999px; padding:5px 14px 5px 6px; font:inherit; font-size:12.5px; color:#EAF3EE; cursor:pointer; }
.dp2-cmdpill:hover { border-color:var(--gold); }
.dp2-cmdpill .ic { width:22px; height:22px; border-radius:50%; background:var(--gold); display:grid; place-items:center; color:#232B24; font-size:11px; font-weight:700; }
.dp2-cols { display:flex; align-items:center; gap:6px; font-size:12.5px; color:rgba(234,243,238,.72); }
.dp2-cols .dot { width:9px; height:9px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(234,243,238,.4); }
.dp2-cmdart { width:186px; flex-shrink:0; height:260px; border-radius:12px; overflow:hidden; border:1px solid rgba(234,243,238,.28); box-shadow:0 18px 40px rgba(19,25,20,.45); background:#2E3A31; cursor:pointer; display:grid; place-items:center; }
.dp2-cmdart img { width:100%; height:100%; object-fit:cover; }
.dp2-cmdart span { color:rgba(234,243,238,.6); padding:12px; text-align:center; font-family:var(--serif); }
.dp2-wrap { max-width:1200px; margin:0 auto; padding:0 22px; }
.dp2-bar { background:#FFFFFF; border:1px solid #E2E8F0; border-radius:14px; box-shadow:0 1px 2px rgba(15,23,42,.05); margin-top:-18px; position:relative; z-index:5; }
.dp2-stats { display:flex; align-items:center; padding:15px 24px; flex-wrap:wrap; gap:14px 0; }
.dp2-stat { padding-right:30px; margin-right:30px; border-right:1px solid #E2E8F0; }
.dp2-stat b { font-family:var(--serif); font-size:24px; line-height:1; color:#0F172A; display:block; }
.dp2-stat span { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#9A917E; margin-top:3px; display:block; }
.dp2-legal { display:flex; align-items:center; gap:9px; font-size:12.5px; }
.dp2-legal .ic { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:11px; flex:0 0 auto; }
.dp2-legal.ok { color:#3F5B3C; } .dp2-legal.ok .ic { background:#E4F0E1; }
.dp2-legal.buy { color:#8A6516; } .dp2-legal.buy .ic { background:#F3E8C8; }
.dp2-legal.warn { color:#9B3535; } .dp2-legal.warn .ic { background:#F7E0DC; }
.dp2-actions { display:flex; align-items:center; gap:10px; padding:14px 24px; flex-wrap:wrap; border-top:1px solid #E2E8F0; }
.dp2-btn { font:inherit; font-size:13.5px; font-weight:600; border-radius:9px; padding:10px 16px; cursor:pointer; white-space:nowrap; border:1px solid transparent; }
.dp2-btn.primary { color:#FFFFFF; background:#1E4D3A; } .dp2-btn.primary:hover { background:#163B2D; }
.dp2-btn.gold { color:var(--gold-ink); background:var(--gold-tint); border-color:var(--gold-tint-bd); } .dp2-btn.gold:hover { filter:brightness(1.04); }
.dp2-btn.ghost { color:#475569; background:transparent; border-color:#E2E8F0; } .dp2-btn.ghost:hover { background:#F1F5F9; }
.dp2-actions-right { margin-left:auto; display:flex; align-items:center; gap:10px; position:relative; }
.dp2-built { font-size:11px; font-weight:700; color:#2f7d4a; background:#eaf4ec; border:1px solid #bfe0c8; border-radius:14px; padding:3px 10px; }
.dp2-menu-btn { font:inherit; font-size:15px; color:#6E6659; background:transparent; border:1px solid #E2E8F0; border-radius:9px; padding:7px 12px; cursor:pointer; line-height:1; }
.dp2-menu-btn:hover { background:#F1F5F9; }
.dp2-menu .it { padding:8px 10px; border-radius:7px; font-size:13px; cursor:pointer; color:#475569; }
.dp2-menu .it:hover { background:#F1F5F9; }
.dp2-menu .it.rood { color:#9B3535; } .dp2-menu .it.rood:hover { background:#FBEEEC; }
.dp2-menu .mh { font-family:var(--cond); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#A79E8C; padding:9px 10px 4px; }
.dp2-menu .mh:first-child { padding-top:4px; }
.dp2-info-btn { font:inherit; font-size:13px; font-style:italic; font-weight:700; color:var(--gold-t); background:var(--gold-tint); border:1px solid var(--gold-tint-bd); border-radius:50%; width:30px; height:30px; cursor:pointer; line-height:1; flex:none; }
.dp2-info-btn:hover { background:var(--gold-tint-bd); }
/* Kandidaten-tab (nieuwe kaarten voor een deck) */
.kand-top { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.kand-intro b { display:block; font-family:var(--serif); font-size:17px; color:var(--ink); }
.kand-intro span { display:block; font-size:13px; color:var(--muted); margin-top:3px; max-width:52ch; line-height:1.5; }
.kand-topacts { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.kand-model { display:inline-flex; align-items:center; gap:7px; font-size:11.5px; color:var(--muted); }
.kand-model span { font-family:var(--cond); letter-spacing:.06em; text-transform:uppercase; font-size:10px; }
.kand-model select { font:inherit; font-size:12.5px; padding:6px 9px; border:1px solid var(--line3); border-radius:8px; background:var(--bg2); color:var(--ink); }
.kand-row { display:flex; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:8px; box-shadow:var(--shadow); cursor:pointer; transition:border-color .12s, box-shadow .12s; }
.kand-row:hover { border-color:var(--gold-tint-bd); box-shadow:0 8px 20px rgba(50,42,22,.12); }
.kand-art { width:56px; height:41px; border-radius:7px; background-size:cover; background-position:center; background-color:#16211C; flex:none; }
.kand-main { flex:1; min-width:0; }
.kand-naam { display:flex; align-items:center; gap:9px; font-family:var(--serif); font-size:16px; font-weight:600; color:var(--ink); flex-wrap:wrap; }
.kand-prijs { font-family:var(--sans); font-size:12px; font-weight:600; color:var(--muted); }
.kand-hebik { font-size:10.5px; font-weight:600; color:var(--ok); background:var(--ok-bg); border-radius:6px; padding:2px 7px; }
.kand-waarom { font-size:12.5px; color:var(--body); margin-top:3px; line-height:1.45; }
.kand-verv { font-size:12px; color:var(--todo); margin-top:4px; }
.kand-verv b { color:var(--ink); }
.kand-verv.leeg { color:var(--faint); }
.kand-acts { display:flex; flex-direction:column; gap:6px; flex:none; align-items:flex-end; }
@media(max-width:620px){ .kand-row { flex-wrap:wrap; } .kand-acts { flex-direction:row; width:100%; } }
.inbouw-lab { display:block; font-size:12.5px; font-weight:600; color:var(--ink); margin:6px 0 0; }
.inbouw-lab select { display:block; width:100%; margin-top:6px; padding:9px 11px; font:inherit; font-size:13.5px; border:1px solid var(--line3); border-radius:9px; background:var(--bg2); color:var(--ink); }
/* Kaart-vergelijking (aangeraden naast te-vervangen) */
.sheet.verg-sheet { display:block; width:660px; max-width:94vw; }
.verg-h2 { font-family:var(--serif); font-weight:600; font-size:22px; margin:2px 0 18px; color:var(--ink); text-align:center; }
.verg-cols { display:flex; align-items:flex-start; justify-content:center; gap:16px; }
.verg-kol { flex:1; min-width:0; max-width:246px; text-align:center; }
.verg-lab { font-family:var(--cond); font-size:10px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:8px; font-weight:600; }
.verg-kol.in .verg-lab { color:var(--ok); }
.verg-kol.uit .verg-lab { color:var(--todo); }
.verg-art { position:relative; aspect-ratio:488/680; border-radius:11px; overflow:hidden; background:linear-gradient(150deg,var(--art,#e3ddce),var(--bg2) 82%); border:1px solid var(--line); box-shadow:var(--shadow); }
.verg-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.verg-art .ph { align-items:center; justify-content:center; height:100%; font-family:var(--serif); padding:12px; text-align:center; color:rgba(15,23,42,.5); font-size:13px; }
.verg-kol.uit .verg-art { filter:grayscale(.15) brightness(.97); }
.verg-naam { font-family:var(--serif); font-size:15px; font-weight:600; color:var(--ink); margin-top:10px; line-height:1.2; }
.verg-type { font-size:11px; color:var(--faint); margin-top:2px; }
.verg-waarom { font-size:12px; color:var(--body); margin-top:8px; line-height:1.45; text-align:left; background:var(--surface-sunk); border-radius:8px; padding:8px 10px; }
.verg-arrow { flex:none; align-self:center; font-size:22px; color:var(--faint); padding-top:60px; }
.verg-acts { justify-content:center; margin-top:20px; }
@media(max-width:560px){ .verg-cols { flex-direction:column; align-items:center; } .verg-arrow { transform:rotate(90deg); padding:0; } .verg-kol { max-width:200px; } }
/* Deck-opties info-overlay */
.sheet.deckinfo-sheet { display:block; width:640px; max-width:94vw; }
.deckinfo-h2 { font-family:var(--serif); font-weight:600; font-size:24px; margin:6px 0 16px; color:var(--ink); }
.deckinfo-list { display:flex; flex-direction:column; gap:14px; }
.deckinfo-it { display:flex; align-items:flex-start; gap:12px; }
.deckinfo-it .hp-diamond { margin-top:3px; flex:none; }
.deckinfo-it b { display:block; font-family:var(--sans); font-size:14.5px; font-weight:600; color:var(--ink); }
.deckinfo-it span { display:block; font-size:13px; color:var(--muted); margin-top:2px; line-height:1.5; }
.dp2-tabs { display:flex; align-items:center; gap:4px; margin:22px 0 18px; border-bottom:1px solid #E2E8F0; flex-wrap:wrap; }
.dp2-tab { padding:10px 14px; font:inherit; font-size:13.5px; color:#6E6659; border:0; border-bottom:2px solid transparent; background:none; cursor:pointer; margin-bottom:-1px; }
.dp2-tab.on { font-weight:600; color:#0F172A; border-bottom-color:var(--gold); }
.dp2-tabtools { margin-left:auto; display:flex; align-items:center; gap:8px; padding-bottom:8px; }
@media(max-width:680px){
  /* Deck-werkbalk past niet in één regel op mobiel → laten wrappen onder de tabs i.p.v. horizontale scroll */
  .dp2-tabtools { margin-left:0; width:100%; flex-wrap:wrap; padding-bottom:4px; }
  .dp2-tabs { gap:2px; }
  .dp2-tab { padding:9px 11px; font-size:13px; }
}
.dp2-vt { display:flex; background:#EAE4D4; border-radius:8px; padding:2px; }
.dp2-vt button { padding:5px 12px; border-radius:6px; font:inherit; font-size:12.5px; font-weight:600; border:0; background:transparent; color:#6E6659; cursor:pointer; }
.dp2-vt button.on { background:#FFFFFF; color:#0F172A; }
.opt-telregel { margin:-4px 0 14px; padding:10px 14px; background:var(--gold-tint); border:1px solid var(--gold-tint-bd); border-radius:10px; font-size:12.5px; color:var(--gold-ink); }
/* Dubbelzijdige kaarten: 3D-flip in de grote kaartweergave */
/* Dubbelzijdige kaart: de vóórkant bepaalt de vorm (ook liggende Battles), geen groene marges */
.bigart.flipbaar { perspective:1400px; overflow:visible; background:none; border:0; box-shadow:none; aspect-ratio:auto; height:auto; display:block; }
.bigart .flipwrap { position:relative; width:100%; transition:transform .55s cubic-bezier(.3,.7,.3,1); transform-style:preserve-3d; }
.bigart.geflipt .flipwrap { transform:rotateY(180deg); }
.bigart .flipwrap .flip-front { position:relative; inset:auto; width:100%; height:auto; display:block; object-fit:contain; backface-visibility:hidden; border-radius:10px; box-shadow:var(--shadow); }
.bigart .flipwrap .flip-back { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; backface-visibility:hidden; border-radius:10px; transform:rotateY(180deg); }
.flipknop { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); z-index:4; border:0; border-radius:999px; padding:7px 14px; font:inherit; font-size:12px; font-weight:600; background:rgba(15,23,42,.82); color:#fff; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.3); }
.flipknop:hover { background:var(--primary); }
.bigart img { cursor:zoom-in; }
.kz-flip { position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:2; font-size:14px; padding:10px 20px; }
/* 3D-flip in de zoom-viewer */
.kz-wrap { will-change:transform; perspective:1800px; }
.kz-flipper { position:relative; transform-style:preserve-3d; transition:transform .55s cubic-bezier(.3,.7,.3,1); }
.kz-flipper.kz-geflipt { transform:rotateY(180deg); }
.kz-flipper .kz-img { backface-visibility:hidden; }
.kz-flipper .kz-back { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transform:rotateY(180deg); }
/* kantel-knop (kwartslag, voor dwars gedrukte kaarten zoals Battles) */
.kz-rot { position:fixed; top:16px; left:18px; z-index:2; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); color:#fff; font-size:17px; cursor:pointer; display:grid; place-items:center; transition:background .14s; }
.kz-rot:hover { background:rgba(255,255,255,.24); }
.rotknop { position:absolute; top:10px; right:10px; z-index:4; width:30px; height:30px; border-radius:50%; border:0; background:rgba(15,23,42,.62); color:#fff; font-size:15px; line-height:1; cursor:pointer; opacity:0; transition:.14s; }
.bigart:hover .rotknop, .bigart[data-rot="90"] .rotknop { opacity:1; }
.rotknop:hover { background:var(--primary); }
/* kwartslag op het kaartbeeld in het kaartvenster (werkt samen met de 3D-flip) */
.bigart[data-rot="90"] > img, .bigart[data-rot="90"] .flip-front { transform:rotate(90deg) scale(.72); }
.bigart[data-rot="90"] .flip-back { transform:rotateY(180deg) rotate(90deg) scale(.72); }
.bigart > img, .bigart .flip-front { transition:transform .3s ease; }
/* Bulk-check */
.bulk-wrap { max-width:900px; }
.bulk-lab { display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:8px; }
.bulk-lab span { font-weight:400; color:var(--faint); font-size:12px; }
.bulk-txt { width:100%; border:1px solid var(--line); border-radius:12px; padding:12px 14px; font:inherit; font-size:14px; color:var(--ink2); background:var(--panel); outline:0; resize:vertical; margin-bottom:12px; }
.bulk-txt:focus { border-color:var(--gold); box-shadow:0 0 0 3px var(--ring); }
.bulk-sum { margin:22px 0 10px; font-size:13.5px; color:var(--muted); }
.bulk-sum .mt { color:var(--gold-t); }
.bulk-sec-h { display:flex; align-items:center; gap:10px; margin:16px 0 8px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); font-weight:600; }
.bulk-sec-h i { flex:1; height:1px; background:var(--line); }
.bulk-mini { background:none; border:0; font:inherit; font-size:11.5px; font-weight:600; color:var(--gold-t); cursor:pointer; text-transform:none; letter-spacing:0; }
.bulk-mini:hover { text-decoration:underline; }
.bulk-list { display:flex; flex-direction:column; gap:4px; }
.bulk-row { display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:9px; cursor:pointer; border:1px solid transparent; }
.bulk-row:hover { background:var(--bg3); }
.bulk-row.uit { opacity:.5; }
.bulk-row input { position:absolute; opacity:0; width:0; height:0; }
.bulk-check { flex:none; width:20px; height:20px; border:2px solid var(--line3); border-radius:6px; display:inline-flex; align-items:center; justify-content:center; }
.bulk-check::after { content:"✓"; color:#fff; font-size:13px; font-weight:700; opacity:0; }
.bulk-row input:checked + .bulk-check { background:var(--ok); border-color:var(--ok); }
.bulk-row input:checked + .bulk-check::after { opacity:1; }
.bulk-thumb { flex:none; width:40px; height:29px; border-radius:6px; overflow:hidden; background:var(--bg2); position:relative; cursor:zoom-in; }
.bulk-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bulk-thumb:hover { outline:2px solid var(--gold); }
.bulk-naam { flex:1; min-width:0; font-family:var(--serif); font-size:15px; color:var(--ink); }
.bulk-redenen { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.bulk-tag { font-size:10.5px; font-weight:600; padding:2px 9px; border-radius:999px; white-space:nowrap; }
.bulk-tag.wishlist { background:var(--gold-tint); color:var(--gold-ink); }
.bulk-tag.deck { background:#E4F0E1; color:#3f5b3c; }
.bulk-tag.kopen { background:var(--todo-bg); color:var(--todo); }
.bulk-bar { position:sticky; bottom:14px; margin-top:18px; }
.bulk-row.rest { cursor:default; justify-content:space-between; padding:6px 10px; }
.bulk-row.rest:hover { background:none; }
.bulk-rest-lab { font-size:11.5px; color:var(--faint); }
.bulk-details { margin-top:20px; }
.bulk-details summary { cursor:pointer; font-size:12.5px; color:var(--muted); font-weight:600; padding:6px 0; }
.bulk-list.rest { margin-top:8px; }
/* AI-advies binnen bulk-check */
.bulk-ai { margin-top:26px; padding:20px 20px 22px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg,var(--panel),rgba(123,197,158,.05)); }
.bulk-ai-head { display:flex; align-items:center; gap:9px; font-family:var(--serif); font-size:17px; font-weight:600; color:var(--ink); }
.bulk-ai-model { margin-left:auto; display:flex; align-items:center; gap:7px; font-family:var(--sans); font-size:11.5px; font-weight:600; color:var(--muted); text-transform:none; }
.bulk-ai-model select { font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:5px 8px; cursor:pointer; }
.bulk-ai-sub { color:var(--muted); font-size:13px; line-height:1.55; margin:8px 0 14px; max-width:70ch; }
.bulk-deckkies { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.bulk-deckchip { display:inline-flex; align-items:center; gap:8px; padding:8px 12px 8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--bg); cursor:pointer; text-align:left; transition:border-color .12s, background .12s; }
.bulk-deckchip:hover { border-color:var(--primary); }
.bulk-deckchip .bdc-check { width:16px; height:16px; border-radius:5px; border:1.5px solid var(--line); flex:none; position:relative; transition:background .12s, border-color .12s; }
.bulk-deckchip.on { border-color:var(--primary); background:var(--gold-tint); }
.bulk-deckchip.on .bdc-check { background:var(--primary); border-color:var(--primary); }
.bulk-deckchip.on .bdc-check::after { content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:800; }
.bdc-naam { font-size:13px; font-weight:600; color:var(--ink); }
.bdc-cmdr { font-size:11px; color:var(--muted); }
.bulk-ai-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.bulk-nieuw-sep { height:1px; background:var(--line); margin:24px 0 20px; }
.bulk-nieuw-h { font-family:var(--serif); font-size:16px; font-weight:600; color:var(--ink); margin-bottom:2px; }
.bulk-ai-out { margin-top:16px; }
.bulk-ai-out:empty { margin-top:0; }
.bulk-ai-antwoord { font-size:14.5px; line-height:1.62; color:var(--ink); white-space:pre-wrap; }
.bulk-ai-antwoord .cardlink { font-weight:600; }
/* Aangeraden kaarten als kaartgalerij met vinkjes */
.bulk-picks { margin-top:20px; border-top:1px solid var(--line); padding-top:16px; }
.bulk-picks-h { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.bulk-picks-h span { font-family:var(--serif); font-size:15px; font-weight:600; color:var(--ink); }
.bulk-picks-h small { color:var(--muted); font-size:12px; }
.bulk-picks-h i { flex:1; }
.bulk-picks-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.bulk-pick { display:flex; flex-direction:column; gap:8px; cursor:pointer; position:relative; }
.bulk-pick-card { position:relative; border-radius:9px; overflow:hidden; background:var(--night); aspect-ratio:488/680; display:flex; align-items:center; justify-content:center; border:2px solid transparent; transition:border-color .12s, box-shadow .12s; }
.bulk-pick.on .bulk-pick-card { border-color:var(--primary); box-shadow:0 6px 16px rgba(30,77,58,.22); }
.bulk-pick-card img { width:100%; height:100%; object-fit:cover; display:block; }
.bulk-pick:not(.on) .bulk-pick-card { opacity:.62; }
.bulk-pick-laad, .bulk-pick-naam-groot { color:var(--night-text); font-size:12px; padding:10px; text-align:center; }
.bulk-pick-bar { display:flex; align-items:center; gap:8px; }
.bulk-pick-bar input { width:16px; height:16px; accent-color:var(--primary); flex:none; }
.bulk-pick-naam { font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.25; }
.bulk-pick-inlijst { position:absolute; top:7px; right:7px; background:var(--primary); color:#fff; font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,.28); }
.bulk-extra-note { font-style:normal; color:var(--accent-hi); font-weight:600; }
@media (max-width:680px) { .bulk-picks-grid { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; } }
/* ---- Deck Lab (upgrade-assistent) ---- */
.dl-wrap { max-width:1120px; }
.dl-pick-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.dl-pick-lab { font-weight:600; font-size:13px; color:var(--muted); }
.dl-pick { min-width:280px; }
.dl-kop { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:var(--panel); margin-bottom:18px; }
.dl-kop-main h2 { font-family:var(--serif); font-size:22px; margin:0 0 6px; color:var(--ink); }
.dl-kop-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.dl-cmdr { font-size:13px; font-weight:600; color:var(--primary); }
.dl-pips { display:inline-flex; gap:3px; }
.dl-brk { font-size:11.5px; font-weight:600; background:var(--gold-tint); color:var(--gold-ink); padding:3px 10px; border-radius:999px; }
.dl-count { font-size:12.5px; color:var(--muted); }
.dl-budget { display:flex; flex-direction:column; gap:3px; font-size:11.5px; font-weight:600; color:var(--muted); }
.dl-budget-in { display:inline-flex; align-items:center; gap:2px; font-size:14px; color:var(--ink); }
.dl-budget-in input { width:80px; border:1px solid var(--line); border-radius:8px; padding:6px 8px; font-size:14px; font-family:var(--sans); }
.dl-budget small { font-weight:400; }
.dl-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:20px; align-items:start; }
.dl-col { min-width:0; }
.dl-sec-h { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.dl-sec-h > span { font-family:var(--serif); font-size:17px; font-weight:600; color:var(--ink); }
.dl-model { margin-left:auto; display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--muted); }
.dl-model select { font-size:12px; font-weight:600; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:5px 7px; cursor:pointer; }
.dl-tips { background:var(--gold-tint); border-radius:10px; padding:10px 14px; margin-bottom:14px; font-size:13px; color:var(--gold-ink); }
.dl-tips ul { margin:6px 0 0; padding-left:18px; } .dl-tips li { margin:3px 0; }
.dl-swap-groep { margin-bottom:18px; }
.dl-groep-h { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:0 0 10px; }
.dl-swap { display:flex; flex-direction:column; gap:12px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--panel); margin-bottom:12px; }
.dl-swap--ok { border-color:var(--primary); background:linear-gradient(180deg,var(--panel),rgba(30,77,58,.05)); }
.dl-swap--af { opacity:.6; }
.dl-swap-duo { display:flex; align-items:center; justify-content:center; gap:14px; }
.dl-kaart { width:158px; max-width:44%; cursor:pointer; }
.dl-kaart-rol { display:inline-block; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:2px 8px; border-radius:999px; margin-bottom:6px; }
.dl-rol-eruit { background:#FBE4DF; color:var(--red); }
.dl-rol-erin { background:var(--ok-bg); color:var(--ok); }
.dl-rol-toev { background:var(--line); color:var(--muted); }
.dl-beeld-leeg { border:2px dashed var(--line); background:transparent; box-shadow:none; flex-direction:column; gap:5px; }
.dl-toev-plus { font-size:26px; color:var(--muted); line-height:1; }
.dl-toev-txt { font-size:10.5px; color:var(--muted); }
.dl-kaart-naam.dim { color:var(--muted); font-style:italic; font-weight:500; }
.dl-kaart-beeld { aspect-ratio:488/680; border-radius:9px; overflow:hidden; background:var(--night); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(15,23,42,.12); transition:transform .12s; }
.dl-kaart:hover .dl-kaart-beeld { transform:translateY(-2px); }
.dl-kaart-beeld img { width:100%; height:100%; object-fit:cover; display:block; }
.dl-kaart:has(.dl-rol-eruit) .dl-kaart-beeld { filter:grayscale(.4); opacity:.92; }
.dl-kaart-naamval { color:var(--night-text); font-size:11px; padding:10px; text-align:center; line-height:1.25; }
.dl-kaart-onder { margin-top:6px; display:flex; justify-content:space-between; align-items:baseline; gap:6px; }
.dl-kaart-naam { font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.2; }
.dl-kaart-prijs { font-size:12px; font-weight:600; color:var(--muted); flex:none; }
.dl-kaart-prijs.duur { color:var(--todo); }
.dl-swap-pijl { color:var(--primary); font-weight:800; font-size:22px; flex:none; }
.dl-swap-info { min-width:0; }
.dl-swap-reden { font-size:13px; color:var(--ink); line-height:1.5; }
.dl-swap-waarsch { font-size:11.5px; color:var(--red); margin-top:5px; font-weight:600; }
.dl-swap-alt { font-size:11.5px; color:var(--todo); margin-top:6px; background:var(--todo-bg); padding:6px 9px; border-radius:7px; }
.dl-swap-afreden { font-size:11px; color:var(--muted); margin-top:4px; font-style:italic; }
.dl-eruit-kies { margin-top:8px; padding:9px 11px; background:var(--todo-bg); border-radius:9px; }
.dl-eruit-lab { display:block; font-size:11.5px; font-weight:600; color:var(--todo); margin-bottom:6px; }
.dl-eruit-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.dl-eruit-sel { flex:1; min-width:170px; border:1px solid var(--line); border-radius:8px; padding:6px 9px; font-family:var(--sans); font-size:12.5px; background:var(--bg); color:var(--ink); }
.dl-acts-hint { font-size:11.5px; color:var(--todo); font-weight:600; }
.dl-swap-acts { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.dl-focus { margin-bottom:14px; }
.dl-focus label { display:block; font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:5px; }
.dl-focus label small { font-weight:400; color:var(--muted); }
.dl-focus textarea { width:100%; border:1px solid var(--line); border-radius:9px; padding:9px 11px; font-family:var(--sans); font-size:13px; resize:vertical; }
.dl-alts { border-top:1px dashed var(--line); padding-top:10px; }
.dl-alts-h { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:11.5px; color:var(--muted); margin-bottom:8px; }
.dl-alts-lijst { display:flex; flex-direction:column; gap:6px; }
.dl-alt { display:flex; align-items:center; gap:10px; padding:6px; border:1px solid var(--line); border-radius:9px; background:var(--bg); }
.dl-alt-art { width:56px; height:42px; border-radius:5px; overflow:hidden; flex:none; background:var(--night); cursor:pointer; }
.dl-alt-art img { width:100%; height:100%; object-fit:cover; }
.dl-alt-main { flex:1; min-width:0; }
.dl-alt-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dl-alt-top b { font-size:13px; color:var(--ink); }
.dl-alt-prijs { font-size:12px; font-weight:700; color:var(--ok); }
.dl-alt-heb { font-size:10px; background:var(--ok-bg); color:var(--ok); padding:1px 7px; border-radius:999px; font-weight:600; }
.dl-alt-waarom { display:block; font-size:11.5px; color:var(--muted); margin-top:2px; line-height:1.4; }
.dl-afkies { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.dl-afkies-l { font-size:11px; color:var(--muted); font-weight:600; }
.dl-mini { border:1px solid var(--line); background:var(--bg); border-radius:7px; padding:4px 8px; font-size:11.5px; font-weight:600; color:var(--ink); cursor:pointer; }
.dl-mini:hover { border-color:var(--primary); }
.dl-mini.ghost { border-color:transparent; color:var(--muted); }
.dl-export { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.dl-leeg, .dl-afgewezen summary { color:var(--muted); font-size:13px; }
.dl-leeg { padding:16px; border:1px dashed var(--line); border-radius:10px; text-align:center; }
.dl-afgewezen { margin-top:8px; } .dl-afgewezen summary { cursor:pointer; font-weight:600; padding:6px 0; }
.dl-logform { border:1px solid var(--line); border-radius:12px; padding:12px; background:var(--panel); margin-bottom:14px; }
.dl-logform textarea { width:100%; border:1px solid var(--line); border-radius:9px; padding:9px 11px; font-family:var(--sans); font-size:13.5px; resize:vertical; }
.dl-logrow { display:flex; gap:8px; margin:8px 0; }
.dl-logrow input { flex:1; min-width:0; border:1px solid var(--line); border-radius:8px; padding:7px 9px; font-family:var(--sans); font-size:13px; }
.dl-logrow select { border:1px solid var(--line); border-radius:8px; padding:7px 9px; font-family:var(--sans); font-size:13px; background:var(--bg); }
.dl-loglijst { display:flex; flex-direction:column; gap:8px; }
.dl-logitem { border:1px solid var(--line); border-radius:10px; padding:9px 11px; background:var(--bg); }
.dl-log-top { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.dl-log-uit { font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.03em; }
.dl-log-uit.gewonnen { background:var(--ok-bg); color:var(--ok); }
.dl-log-uit.verloren { background:#FBE4DF; color:var(--red); }
.dl-log-uit.anders { background:var(--line); color:var(--muted); }
.dl-log-datum { font-size:11.5px; color:var(--muted); }
.dl-log-tegen { font-size:11.5px; color:var(--muted); }
.dl-log-del { margin-left:auto; border:none; background:none; color:var(--muted); cursor:pointer; font-size:12px; }
.dl-log-notitie { font-size:13px; color:var(--ink); line-height:1.45; }
@media (max-width:820px) {
  .dl-grid { grid-template-columns:1fr; }
  .dl-kaart { width:auto; flex:1; max-width:180px; }
}
/* ---- Aan tafel (mobiele speelgids per kaart) ---- */
.tf-leeg { max-width:560px; margin:20px auto; text-align:center; padding:24px 20px; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.tf-leeg-ic { margin-bottom:10px; }
.tf-leeg h3 { font-family:var(--serif); font-size:20px; margin:0 0 8px; color:var(--ink); }
.tf-leeg p { color:var(--muted); font-size:13.5px; line-height:1.6; margin:0 auto 10px; max-width:48ch; }
.tf-leeg-fijn { font-size:12px !important; }
.tf-gen-row { display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:16px; }
.tf-progress { margin-top:18px; text-align:center; }
.tf-prog-txt { font-size:13px; color:var(--muted); margin:8px 0 8px; }
.tf-prog-bar { height:8px; border-radius:999px; background:var(--line); overflow:hidden; max-width:360px; margin:0 auto; }
.tf-prog-bar span { display:block; height:100%; background:var(--primary); border-radius:999px; transition:width .3s; }
.tf-top { position:sticky; top:0; z-index:5; background:var(--bg); padding:10px 0 8px; margin-bottom:6px; }
.tf-zoekrow { display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:11px; padding:0 12px; background:var(--panel); }
.tf-zoek-ic { color:var(--muted); font-size:17px; }
.tf-zoek { flex:1; border:none; background:none; padding:12px 4px; font-family:var(--sans); font-size:16px; color:var(--ink); outline:none; }
.tf-zoek-x { border:none; background:none; color:var(--muted); cursor:pointer; font-size:14px; padding:6px; }
.tf-viewrow { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; }
.tf-toggle { display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.tf-toggle button { border:none; background:var(--panel); padding:7px 14px; font-family:var(--sans); font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; }
.tf-toggle button.on { background:var(--primary); color:#fff; }
.tf-hergen { border:none; background:none; color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; }
.tf-groep { margin-bottom:16px; }
.tf-groep-h { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:0 0 8px; padding-top:4px; }
.tf-groep-h span { color:var(--gold-ink); background:var(--gold-tint); border-radius:999px; padding:1px 8px; font-size:11px; margin-left:4px; }
.tf-kaart { border:1px solid var(--line); border-radius:11px; background:var(--panel); margin-bottom:8px; overflow:hidden; }
.tf-head { width:100%; display:flex; align-items:center; gap:10px; padding:13px 14px; background:none; border:none; cursor:pointer; text-align:left; font-family:var(--sans); }
.tf-mana { display:inline-flex; gap:2px; flex:none; }
.tf-naam { font-size:15px; font-weight:600; color:var(--ink); flex:1; min-width:0; }
.tf-type { font-size:11.5px; color:var(--muted); flex:none; max-width:38%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tf-chev { color:var(--muted); font-size:12px; transition:transform .15s; flex:none; }
.tf-kaart.open .tf-chev { transform:rotate(180deg); }
.tf-body { display:none; padding:0 14px 14px; }
.tf-kaart.open .tf-body { display:block; }
.tf-does { font-size:13px; line-height:1.55; color:var(--ink); background:var(--bg); border-radius:8px; padding:10px 12px; margin-bottom:12px; white-space:pre-wrap; }
.tf-blok { margin-bottom:12px; }
.tf-lab { display:block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--primary); margin-bottom:4px; }
.tf-blok p { margin:0; font-size:13.5px; line-height:1.55; color:var(--ink); }
.tf-scen { margin:0; padding:0; list-style:none; }
.tf-scen li { font-size:13px; line-height:1.5; color:var(--ink); padding:6px 0; border-bottom:1px solid var(--line); }
.tf-scen li:last-child { border-bottom:none; }
.tf-scen li b { color:var(--ink); font-weight:600; }
.tf-arrow { color:var(--primary); font-weight:800; }
.tf-note { font-size:12.5px; line-height:1.5; color:var(--todo); background:var(--todo-bg); border-radius:8px; padding:9px 12px; margin-top:4px; }
.tf-open { margin-top:12px; border:1px solid var(--line); background:var(--bg); border-radius:9px; padding:9px 14px; font-family:var(--sans); font-size:13px; font-weight:600; color:var(--primary); cursor:pointer; width:100%; }
@media (max-width:680px) {
  .tf-type { display:none; }
  .tf-naam { font-size:16px; }
}
@media (max-width:680px) {
  .bulk-ai-head { flex-wrap:wrap; }
  .bulk-ai-model { margin-left:0; width:100%; }
  .bulk-deckchip { flex:1 1 100%; }
  .bulk-ai-row .btn { width:100%; }
}
/* Kant-en-klare decks (precons) */
.precon-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.precon-laden { text-align:center; padding:40px 20px; }
.precon-laden-txt { color:var(--muted); font-size:13px; margin-top:10px; }
.precon-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; }
.precon-tile { background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; cursor:pointer; transition:transform .14s, box-shadow .14s, border-color .14s; display:flex; flex-direction:column; }
.precon-tile:hover { transform:translateY(-3px); border-color:var(--gold); box-shadow:0 14px 30px rgba(15,23,42,.14); }
.precon-art { position:relative; aspect-ratio:626/457; background:linear-gradient(150deg,var(--art,#2f4a33),#141c15); }
.precon-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 25%; }
/* productfoto van de doos: volledig tonen op een lichte achtergrond, zoals in webshops */
.precon-art.box { background:#FDFDFB; }
.precon-art.box img { object-fit:contain; object-position:center; padding:8px; }
.precon-art .pips { position:absolute; left:8px; bottom:8px; display:flex; gap:4px; }
.precon-pw { position:absolute; top:8px; right:8px; background:rgba(15,23,42,.85); font-family:var(--serif); font-size:15px; font-weight:700; padding:3px 10px; border-radius:999px; }
.precon-nieuw { position:absolute; top:8px; left:8px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 9px; border-radius:999px; color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.3); }
.precon-nieuw.voor { background:var(--todo); }
.precon-nieuw.nieuw { background:var(--primary); }
/* Precon-detailweergave (hero + manacurve + opbouw + type-tabs) */
.pcv-sheet { width:1080px; max-width:96vw; max-height:94vh; padding:0; overflow:hidden; display:flex; flex-direction:column; gap:0; }
.pcv { display:block; flex:1 1 auto; min-height:0; overflow-y:auto; }
.pcv-hero { position:relative; color:#fff; overflow:hidden; }
.pcv-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; filter:blur(18px) brightness(.5); transform:scale(1.18); }
.pcv-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(18,48,36,.80),rgba(10,20,15,.93)); }
.pcv-hero-inner { position:relative; z-index:1; display:flex; gap:22px; padding:26px 28px; }
.pcv-cmdrcard { flex:none; width:180px; cursor:pointer; }
.pcv-cmdrcard img { width:100%; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.45); display:block; }
.pcv-hero-main { flex:1; min-width:0; }
.pcv-eyebrow { font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-hi); }
.pcv-hero-main h2 { font-family:var(--serif); font-size:33px; line-height:1.06; margin:6px 0 4px; color:#fff; }
.pcv-cmdrnaam { font-size:14px; color:rgba(255,255,255,.85); margin-bottom:12px; }
.pcv-cmdrnaam b { color:#fff; }
.pcv-pills { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.pcv-pips { display:inline-flex; gap:3px; }
.pcv-pill { font-size:12.5px; font-weight:600; padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.14); color:#fff; }
.pcv-pill.gold { background:var(--gold-tint); color:var(--gold-ink); }
.pcv-panels { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }
.pcv-panel { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:12px 14px; }
.pcv-panel-h { font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:10px; }
.pcv-curve { display:flex; align-items:flex-end; gap:6px; height:94px; }
.pcv-cbar { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:3px; }
.pcv-cbar-n { font-size:10px; color:rgba(255,255,255,.72); min-height:12px; }
.pcv-cbar-fill { width:100%; min-height:2px; background:var(--accent-hi); border-radius:4px 4px 0 0; }
.pcv-cbar-x { font-size:10px; color:rgba(255,255,255,.55); }
.pcv-opbouw { display:flex; flex-direction:column; gap:6px; }
.pcv-ob { display:flex; align-items:center; gap:8px; font-size:12px; }
.pcv-ob-l { width:96px; color:rgba(255,255,255,.85); flex:none; }
.pcv-ob-bar { flex:1; height:6px; background:rgba(255,255,255,.16); border-radius:999px; overflow:hidden; }
.pcv-ob-bar span { display:block; height:100%; background:var(--accent-hi); border-radius:999px; }
.pcv-ob-n { width:26px; text-align:right; color:#fff; font-weight:600; flex:none; }
.pcv-acts { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.pcv-acts .btn { width:auto; }
.pcv-acts .btn.gold-btn { width:auto; margin-top:0; }
.pcv-tabsbar { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:11px 20px; background:var(--bg); border-bottom:1px solid var(--line); }
.pcv-tabs { display:flex; gap:4px; flex-wrap:wrap; }
.pcv-tab { border:none; background:none; padding:7px 12px; border-radius:8px; font-family:var(--sans); font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; }
.pcv-tab span { opacity:.6; font-size:12px; }
.pcv-tab.on { background:var(--primary); color:#fff; } .pcv-tab.on span { opacity:.85; }
.pcv-viewtools { display:flex; align-items:center; gap:10px; }
.pcv-vt { display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.pcv-vt button { border:none; background:var(--panel); padding:6px 12px; font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer; }
.pcv-vt button.on { background:var(--primary); color:#fff; }
.pcv-body { padding:16px 20px 24px; }
.pcv-sechead { display:flex; align-items:baseline; gap:10px; margin:0 0 14px; }
.pcv-sechead h3 { font-family:var(--serif); font-size:22px; margin:0; color:var(--ink); }
.pcv-sechead span { color:var(--muted); font-size:14px; }
.pcv-lijst { display:flex; flex-direction:column; }
.pcv-lrow { display:flex; align-items:center; gap:12px; padding:9px 6px; border-bottom:1px solid var(--line); cursor:pointer; }
.pcv-lrow:hover { background:var(--gold-tint); }
.pcv-lq { color:var(--muted); font-size:13px; width:34px; flex:none; }
.pcv-ln { flex:1; font-size:14px; color:var(--ink); font-weight:500; }
.pcv-lmv { color:var(--muted); font-size:12px; }
@media (max-width:720px) {
  .pcv-hero-inner { flex-direction:column; padding:20px; }
  .pcv-cmdrcard { width:150px; align-self:center; }
  .pcv-hero-main h2 { font-size:26px; }
  .pcv-panels { grid-template-columns:1fr; }
}
.precon-body { padding:12px 14px 14px; display:flex; flex-direction:column; gap:3px; }
.precon-body b { font-family:var(--serif); font-size:16px; color:var(--ink); line-height:1.25; }
.precon-sub { font-size:12.5px; color:var(--body); }
.precon-meta { font-size:11px; color:var(--faint); }
/* Precon-viewer: volledig deck met echte kaarten, per type gegroepeerd */
.precon-vhead { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:4px 6px 14px; border-bottom:1px solid var(--line2); }
.precon-vhead h2 { font-family:var(--serif); font-size:26px; margin:2px 0 6px; color:var(--ink); }
.precon-vsub { display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); }
.precon-vpw { font-family:var(--serif); font-weight:700; font-size:14px; }
.precon-vacts { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.precon-vbody { flex:1; overflow-y:auto; padding:14px 6px 6px; }
.precon-ctile { max-width:none; } /* vult de grid-cel; grootte via "per rij"-stepper */
/* Speelstijl-coach: paginabreed begeleid gesprek */
.coach-hero .vk-hero-inner { padding:40px 22px 34px; }
.coach-wrap { max-width:860px; margin:0 auto; padding:26px 22px 90px; }
.coach-start-kaart { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:26px 28px; }
.coach-start-kaart h3 { font-family:var(--serif); font-size:21px; margin:0 0 12px; color:var(--ink); }
.coach-start-kaart ol { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:10px; font-size:13.5px; line-height:1.6; color:var(--body); }
.coach-stappen { display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:20px; flex-wrap:wrap; }
.coach-stap { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--faint); }
.coach-stap i { width:24px; height:24px; border-radius:50%; background:var(--bg2); border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; font-style:normal; font-size:12px; }
.coach-stap.nu { color:var(--gold-ink); }
.coach-stap.nu i { background:var(--gold-tint); border-color:var(--gold-tint-bd); color:var(--gold-ink); }
.coach-stap.af { color:var(--gold-t); }
.coach-stap.af i { background:var(--gold); border-color:var(--gold); color:#fff; }
.coach-stap-lijn { width:34px; height:1px; background:var(--line); }
.coach-modellen { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:16px; }
.coach-modellen-lab { flex-basis:100%; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:600; }
.coach-model { display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:9px 14px; border-radius:11px; border:1px solid var(--line); background:var(--surface); cursor:pointer; font:inherit; transition:border-color .12s, background .12s; }
.coach-model:hover { border-color:var(--gold); }
.coach-model.on { background:var(--gold-tint); border-color:var(--gold-tint-bd); }
.coach-model b { font-size:13px; color:var(--ink); }
.coach-model small { font-size:11px; color:var(--muted); }
.coach-model-mini { margin-left:auto; }
.coach-model-mini select { border:1px solid var(--line); border-radius:8px; padding:5px 8px; font:inherit; font-size:12px; background:var(--panel); color:var(--muted); cursor:pointer; }

.coach-log { display:flex; flex-direction:column; gap:12px; margin-bottom:14px; }
.coach-msg { max-width:76%; }
.coach-msg.me { align-self:flex-end; }
.coach-log .vk-msg.ai { align-self:flex-start; }
.coach-chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.coach-in { display:flex; gap:10px; align-items:flex-end; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:10px 12px; position:sticky; bottom:14px; box-shadow:0 8px 26px rgba(15,23,42,.1); }
.coach-in:focus-within { border-color:var(--gold); box-shadow:0 0 0 3px var(--ring), 0 8px 26px rgba(15,23,42,.1); }
.coach-in textarea { flex:1; border:0; outline:0; resize:none; font:inherit; font-size:14px; color:var(--ink2); background:transparent; max-height:120px; }
.coach-send { flex:none; width:38px; height:38px; border-radius:10px; border:0; background:var(--primary); color:#fff; font-size:16px; cursor:pointer; }
.coach-send:hover { filter:brightness(1.12); }
.coach-richting { width:100%; padding:9px 13px; background:var(--gold-tint); border:1px solid var(--gold-tint-bd); border-radius:10px; font-size:12.5px; color:var(--gold-ink); margin-bottom:2px; }
.coach-cmdrs { display:grid; grid-template-columns:repeat(auto-fill,minmax(172px,1fr)); gap:12px; width:100%; }
.coach-cmdr { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:10px; cursor:pointer; transition:border-color .12s, box-shadow .12s; display:flex; flex-direction:column; gap:8px; }
.coach-cmdr:hover { border-color:var(--gold); box-shadow:0 6px 18px rgba(15,23,42,.1); }
.coach-cmdr-art { border-radius:4.5% / 3.5%; overflow:hidden; aspect-ratio:488/680; background:var(--bg2); position:relative; box-shadow:0 4px 12px rgba(15,23,42,.14); }
.coach-cmdr-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.coach-cmdr-ph { display:flex; align-items:center; justify-content:center; height:100%; padding:8px; text-align:center; font-family:var(--serif); font-size:12px; color:var(--muted); }
.coach-cmdr b { font-family:var(--serif); font-size:13.5px; line-height:1.3; color:var(--ink); }
.coach-cmdr-acts { display:flex; flex-direction:column; gap:6px; margin-top:auto; }
.coach-cmdr-acts .btn { justify-content:center; }
@media(max-width:640px){ .coach-msg { max-width:92%; } .coach-cmdrs { grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* Zwevende uitleg-tip bij dropdown-opties */
.dd-tip { position:fixed; z-index:200; display:none; background:var(--night); color:var(--night-text); font-size:12.5px; line-height:1.5; padding:9px 12px; border-radius:10px; box-shadow:0 10px 28px rgba(0,0,0,.3); pointer-events:none; }
/* Set-links op kaarten + favoriete sets */
.setlink { cursor:pointer; color:var(--gold-t); transition:color .12s; }
.setlink:hover { color:var(--gold-ink); text-decoration:underline; }
.set-fav { flex:none; width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:var(--panel); color:var(--muted); font-size:16px; line-height:1; cursor:pointer; }
.set-fav:hover { border-color:var(--gold); color:var(--gold-t); }
.set-fav.on { background:var(--gold-tint); border-color:var(--gold-tint-bd); color:var(--gold-ink); }
/* Speelstijlen-gids (Uitleg) */
.sg-linkje { background:none; border:0; padding:0; font:inherit; font-size:12px; font-weight:600; color:var(--gold-t); cursor:pointer; }
.sg-linkje:hover { text-decoration:underline; }
.sg-linkje.mini { font-size:10.5px; text-transform:none; letter-spacing:0; margin-left:6px; }
.sg-chips { display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 24px; }
.sg-chip { padding:7px 13px; border-radius:999px; font:inherit; font-size:12px; font-weight:500; color:var(--muted); background:var(--surface); border:1px solid var(--border); cursor:pointer; }
.sg-chip:hover { border-color:var(--gold); color:var(--gold-t); }
.sg-stijl { margin-bottom:34px; padding:22px 24px; background:var(--panel); border:1px solid var(--line); border-radius:16px; scroll-margin-top:76px; }
.sg-kop { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.sg-kop h3 { font-family:var(--serif); font-size:23px; font-weight:600; color:var(--ink); margin:0; }
.sg-pips { display:inline-flex; gap:4px; align-self:center; }
.sg-sub { font-size:13px; color:var(--muted); flex-basis:100%; margin-top:-4px; }
.sg-body { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:22px; align-items:start; }
.sg-uitleg p { font-size:13.5px; line-height:1.6; color:var(--body); margin:0 0 10px; }
.sg-uitleg b { color:var(--ink); }
.sg-letop { padding:9px 12px; background:var(--bg2); border-radius:9px; }
.sg-cmdrs { display:flex; flex-direction:column; gap:10px; }
.sg-cmdr { display:flex; gap:13px; align-items:stretch; padding:10px; border-radius:12px; border:1px solid var(--line); background:var(--surface); cursor:pointer; transition:border-color .12s, box-shadow .12s; }
.sg-cmdr:hover { border-color:var(--gold); box-shadow:0 4px 14px rgba(15,23,42,.08); }
.sg-cmdr-art { flex:0 0 92px; min-height:66px; border-radius:9px; overflow:hidden; background:var(--bg2); position:relative; }
.sg-cmdr-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sg-cmdr-txt { flex:1; min-width:0; }
.sg-cmdr-badge { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 8px; border-radius:999px; margin-bottom:4px; }
.sg-cmdr.past .sg-cmdr-badge { background:var(--ok-bg); color:var(--ok); }
.sg-cmdr.past-niet .sg-cmdr-badge { background:#F6E7E2; color:#A3564A; }
.sg-cmdr.past-niet { border-style:dashed; }
.sg-cmdr-txt b { display:block; font-family:var(--serif); font-size:15px; color:var(--ink); }
.sg-cmdr-txt p { margin:3px 0 0; font-size:12.5px; line-height:1.5; color:var(--muted); }
.sg-acts { margin-top:14px; }
@media(max-width:820px){ .sg-body { grid-template-columns:1fr; } }
/* Kaart-weergave in het deck: volledige kaarten per sectie, instelbaar per rij */
.lib-kol { display:flex; align-items:center; gap:7px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.lib-kol b { min-width:14px; text-align:center; color:var(--ink); font-size:13px; }
.lib-vt { margin-left:auto; }
.dp2-kol { display:flex; align-items:center; gap:7px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.dp2-kol b { min-width:14px; text-align:center; color:var(--ink); font-size:13px; }
.dk-cardgrid { display:grid; grid-template-columns:repeat(var(--dk-kol,4),minmax(0,1fr)); gap:12px; }
.dk-ctile { position:relative; cursor:pointer; border-radius:5.5% / 4%; overflow:hidden; aspect-ratio:488/680; background:var(--bg2); box-shadow:0 5px 14px rgba(15,23,42,.12); transition:transform .14s ease, box-shadow .14s ease; }
.dk-ctile:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 16px 34px rgba(15,23,42,.26); z-index:2; }
.dk-ctile img { width:100%; height:100%; object-fit:cover; display:block; }
.dk-ctile-ph { display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-family:var(--serif); color:var(--muted); padding:10px; text-align:center; font-size:12.5px; }
.dk-qty { position:absolute; top:7px; right:7px; background:rgba(15,23,42,.85); color:#fff; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; }
.dk-koop { position:absolute; bottom:7px; left:7px; background:var(--todo-bg); color:var(--todo); font-size:10px; font-weight:600; padding:2px 8px; border-radius:999px; box-shadow:0 1px 4px rgba(0,0,0,.2); }
@media(max-width:640px){ .dk-cardgrid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* Sub-keuze binnen "Verbeteren" (Power / Synergie / Nieuwe kaarten / Optimaliseren) */
.dp2-subbar { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:-6px 0 18px; }
.dp2-sub-lab { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:600; margin-right:4px; }
.dp2-subtab { padding:7px 14px; border-radius:999px; font:inherit; font-size:12.5px; font-weight:500; color:var(--muted); background:var(--surface); border:1px solid var(--border); cursor:pointer; transition:all .12s; }
.dp2-subtab:hover { border-color:var(--gold); color:var(--gold-t); }
.dp2-subtab.on { background:var(--gold-tint); color:var(--gold-ink); border-color:var(--gold-tint-bd); font-weight:600; }
.dp2-tab-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--gold); margin-left:5px; vertical-align:2px; }
.dp2-toolbtn { font:inherit; font-size:12.5px; color:#475569; background:#FFFFFF; border:1px solid #E2E8F0; border-radius:8px; padding:6px 12px; cursor:pointer; }
.dp2-toolbtn:hover { background:#F1F5F9; }
.dp2-two { display:grid; grid-template-columns:268px 1fr; gap:24px; align-items:start; }
.dp2-side { display:flex; flex-direction:column; gap:16px; }
.dp2-scard { background:#FFFFFF; border:1px solid #E2E8F0; border-radius:14px; padding:16px; }
.dp2-scmd { cursor:pointer; overflow:hidden; } .dp2-scmd:hover { border-color:var(--gold-tint-bd); }
.dp2-scmd-art { height:128px; margin:-16px -16px 14px; background-size:cover; background-position:center 22%; background-color:#16211C; border-bottom:1px solid #E2E8F0; }
.dp2-slab { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#9A917E; margin-bottom:10px; }
.dp2-scard h3 { font-family:var(--serif); font-size:19px; font-weight:600; margin:0; color:#0F172A; }
.dp2-sctype { font-size:11.5px; color:#9A917E; margin:2px 0 10px; }
.dp2-scard p { font-size:12px; line-height:1.6; color:#475569; margin:0; }
.dp2-colbar { display:flex; height:7px; border-radius:999px; overflow:hidden; margin-bottom:9px; background:#E2E8F0; }
.dp2-collegend { display:flex; gap:12px; font-size:11.5px; color:#6E6659; flex-wrap:wrap; }
.dp2-curve { display:flex; align-items:flex-end; gap:5px; height:74px; }
.dp2-curve .col { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; height:100%; justify-content:flex-end; }
.dp2-curve .num { font-size:10px; color:#9A917E; min-height:12px; }
.dp2-curve .bar { width:100%; background:var(--gold); border-radius:3px 3px 0 0; opacity:.85; min-height:2px; }
.dp2-curve .cmc { font-size:10px; color:#B3AA96; }
.dp2-stijl-name { font-family:var(--serif); font-size:20px; font-weight:600; color:#0F172A; }
.dp2-mtag { margin-top:14px; } .dp2-mtag .lbl { font-size:10px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:5px; }
.dp2-mtag.goed .lbl { color:#4C7A4A; } .dp2-mtag.let .lbl { color:#9A6B14; }
.dp2-mtag p { font-size:12px; line-height:1.6; color:#475569; margin:0; }
.dp2-groups { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.dp2-group { background:#FFFFFF; border:1px solid #E2E8F0; border-radius:12px; overflow:hidden; }
.dp2-ghead { display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-bottom:1px solid #E2E8F0; background:#F8FAFC; }
.dp2-ghead .t { font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:600; color:#5C5446; }
.dp2-ghead .n { font-size:11px; color:#9A917E; }
.dp2-grow { display:flex; align-items:center; gap:10px; padding:7px 14px; font-size:12.5px; color:#475569; cursor:pointer; }
.dp2-grow:hover { background:#F7F3E8; }
.dp2-grow .q { font-size:11px; color:#B3AA96; width:18px; flex:0 0 auto; }
.dp2-grow .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dp2-grow .cost { flex:0 0 auto; }
.dp2-grow .st { font-size:11px; flex:0 0 auto; }
.dp2-grow .st.heb { color:#7FB37A; } .dp2-grow .st.koop { color:#B07A2A; font-weight:600; }
@media(max-width:900px){ .dp2-two, .dp2-groups { grid-template-columns:1fr; } .dp2-cmdart { display:none; } .dp2-hero { height:auto; } .dp2-hero-main { flex-direction:column; align-items:flex-start; gap:16px; } .dp2-hero-txt h1 { font-size:34px; } }

/* dp2 — de andere tabs uniform maken (rustig, crème kaarten, goud accent) */
.dp2 { --c-card:#FFFFFF; --c-line:#E2E8F0; --c-line2:#E2E8F0; --c-ink:#0F172A; --c-muted:#6E6659; --c-faint:#7D7565; --c-body:#475569; }
.dp2 #tabinhoud { color:var(--c-body); }
.dp2 .eyebrow { color:var(--c-faint); }
.dp2 #tabinhoud h2, .dp2 #tabinhoud h3 { font-family:var(--serif); color:var(--c-ink); }
.dp2 .lede { color:var(--c-muted); }
/* Notities → rustige kaarten (geen linker-accentbalk) */
.dp2 .note { border:1px solid var(--c-line); border-left:1px solid var(--c-line); background:var(--c-card); color:var(--c-body); border-radius:12px; padding:14px 18px; }
.dp2 .note b { color:var(--c-ink); }
.dp2 .note.ok { background:linear-gradient(120deg,#F1F7F0,#EEF5EE); border-color:#CBE3CF; color:#3F5B3C; }
.dp2 .note.ok b { color:#2f7d4a; }
.dp2 .note.warn { background:linear-gradient(120deg,#FBF3E1,#F7EDD7); border-color:#E6D3A2; color:#7A5A12; }
.dp2 .note.warn b { color:#9A6B14; }
.dp2 .note.info { background:#F8FAFC; border-color:var(--c-line); color:var(--c-body); }
.dp2 .note.info b { color:var(--c-ink); }
/* Knoppen binnen de tab-inhoud → rustige stijl (accentknoppen behouden) */
.dp2 #tabinhoud .btn { background:var(--gold-tint); color:var(--gold-ink); border:1px solid var(--gold-tint-bd); box-shadow:none; border-radius:9px; }
.dp2 #tabinhoud .btn:hover { background:#B7E3CE; }
.dp2 #tabinhoud .btn.ghost { background:#FFFFFF; color:#475569; border:1px solid var(--c-line); }
.dp2 #tabinhoud .btn.ghost:hover { background:#F1F5F9; color:var(--c-ink); }
.dp2 #tabinhoud .btn.gekocht { background:var(--ok); color:#fff; border-color:var(--ok); }
.dp2 #tabinhoud .btn.danger { background:#FFFFFF; color:#9B3535; border-color:#E6C4BD; }
.dp2 #tabinhoud select { border:1px solid var(--c-line); background:#FFFFFF; color:var(--c-ink); border-radius:8px; }
/* Zo speel je het */
.dp2 .focusbox { border:1px solid var(--c-line); border-left:1px solid var(--c-line); background:var(--c-card); border-radius:14px; padding:16px 18px; }
.dp2 .focusbox p { color:var(--c-ink); }
.dp2 .phase .p { background:var(--c-card); border:1px solid var(--c-line); border-radius:12px; }
.dp2 .phase .p h4 { color:var(--c-gold, var(--gold)); }
.dp2 .crow { background:var(--c-card); border:1px solid var(--c-line); border-radius:10px; }
.dp2 .crow:hover { border-color:var(--gold-tint-bd); background:#F8FAFC; }
.dp2 .crow.tekort { border-left:3px solid var(--gold); }
.dp2 .tips li { color:var(--c-body); }
/* Power-analyse */
.dp2 .pw-card { background:var(--c-card); border:1px solid var(--c-line); }
.dp2 .pw-gauge { background:color-mix(in srgb, var(--pw) 8%, #FFFFFF); }
.dp2 .pw-uitleg { color:var(--c-body); } .dp2 .pw-range { color:var(--c-muted); }
.dp2 .pw-stat { background:#F8FAFC; border:1px solid var(--c-line); }
.dp2 .pw-driver { background:var(--c-card); border:1px solid var(--c-line); }
.dp2 .pw-strat { background:#F8FAFC; border:1px solid var(--c-line); }
.dp2 .pw-vergrij, .dp2 .pw-comborow { border-color:var(--c-line); }
/* Synergie */
.dp2 .synmap { background:radial-gradient(circle at 50% 50%, #FFFFFF, #F1F5F9 70%); border:1px solid var(--c-line); box-shadow:0 1px 2px rgba(15,23,42,.05); }
.dp2 .synmap.ai { background:radial-gradient(circle at 50% 50%, #FFFFFF, #EAF3EE 72%); }
.dp2 .syn-side { background:var(--c-card); border:1px solid var(--c-line); box-shadow:0 1px 2px rgba(15,23,42,.05); }
/* Boodschappenlijst-rijen delen .crow-stijl hierboven */

/* ---- Deck-explainer presentatie ---- */
.btn.uitlegknop { background:linear-gradient(120deg,#6a4b8a,#8a5fa8); border-color:#6a4b8a; color:#fff; }
.btn.uitlegknop:hover { filter:brightness(1.06); }
.presov { position:fixed; inset:0; z-index:55; display:none; background:rgba(28,23,15,.62); backdrop-filter:blur(5px); align-items:center; justify-content:center; padding:20px; }
.presov.on { display:flex; animation:veilIn .18s ease-out; }
.pres-frame { position:relative; width:100%; max-width:900px; height:min(88vh,720px); background:var(--panel); border:1px solid var(--line2); border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.4); display:flex; flex-direction:column; overflow:hidden; }
.pres-x { position:absolute; top:12px; right:14px; z-index:3; width:34px; height:34px; border-radius:50%; border:0; background:rgba(0,0,0,.14); color:var(--ink); font-size:15px; cursor:pointer; }
.pres-x:hover { background:rgba(0,0,0,.26); color:#fff; }
.pres-dots { position:absolute; top:16px; left:0; right:0; display:flex; justify-content:center; gap:6px; z-index:3; }
.pres-dots span { width:7px; height:7px; border-radius:50%; background:var(--line2); cursor:pointer; transition:.15s; }
.pres-dots span.on { background:var(--gold); transform:scale(1.3); }
.pres-stage { flex:1; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; }
.pres-stage > div { flex:1; animation:layerIn .25s ease-out; }
.pres-nav { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px; border-top:1px solid var(--line2); background:var(--bg3); }
.pres-count { font-family:var(--cond); font-size:12.5px; color:var(--muted); letter-spacing:.05em; }
/* Hero-slide */
.pres-hero { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:12px; padding:44px 52px; background-size:cover; background-position:center; color:#f5f0e4; text-align:left; }
.pres-hero.pres-close { align-items:center; text-align:center; justify-content:center; background:linear-gradient(140deg,#2a2320,#43372c); }
.pres-eyebrow { font-family:var(--cond); text-transform:uppercase; letter-spacing:.2em; font-size:12px; opacity:.85; }
.pres-hero h1 { font-family:var(--serif); font-size:40px; font-weight:700; margin:0; line-height:1.05; color:#fff; }
.pres-pips { display:flex; align-items:center; gap:9px; font-size:14px; opacity:.95; }
.pres-lede { font-size:17px; line-height:1.5; max-width:56ch; margin:6px 0 0; color:#f2ecdd; }
.pres-tags { display:flex; gap:9px; flex-wrap:wrap; margin-top:6px; }
.pres-tag { font-family:var(--cond); font-weight:600; font-size:13px; border:1.5px solid rgba(245,240,228,.5); border-radius:20px; padding:5px 13px; color:#f5f0e4; }
.pres-hint { font-size:12.5px; opacity:.7; margin-top:14px; }
/* Twee-koloms: grote kaart + tekst */
.pres-two { display:grid; grid-template-columns:230px 1fr; gap:30px; align-items:center; padding:34px 44px; }
.pres-card { border-radius:12px; overflow:hidden; box-shadow:0 14px 34px rgba(0,0,0,.28); background:linear-gradient(150deg,color-mix(in srgb,var(--art,#e3ddce) 60%,#2a2018),#1c1712); aspect-ratio:63/88; display:flex; align-items:center; justify-content:center; }
.pres-card img { width:100%; height:100%; object-fit:cover; display:block; cursor:pointer; }
.pres-card-ph { color:rgba(255,255,255,.7); font-family:var(--serif); text-align:center; padding:14px; }
.pres-text .pres-kop, .pres-phase .pres-kop, .pres-syn .pres-kop { display:block; font-family:var(--cond); text-transform:uppercase; letter-spacing:.16em; font-size:12px; color:var(--gold-d); font-weight:700; margin-bottom:6px; }
.pres-text h2, .pres-phase h2, .pres-syn h2 { font-family:var(--serif); font-size:27px; margin:0 0 12px; color:var(--ink); line-height:1.1; }
.pres-text p { font-size:15.5px; line-height:1.6; color:var(--body); margin:0 0 12px; }
.pres-note { font-size:14px; color:var(--muted); background:var(--bg3); border-left:3px solid var(--gold); padding:10px 14px; border-radius:0 8px 8px 0; }
/* Fase / tekst-slides */
.pres-phase { padding:38px 46px; }
.pres-phase p { font-size:16px; line-height:1.65; color:var(--body); max-width:64ch; }
.pres-phase.pres-win h2 { color:#2f7d4a; }
.pres-sub { font-family:var(--cond); text-transform:uppercase; letter-spacing:.08em; font-size:11.5px; color:var(--muted); margin:18px 0 8px; }
.pres-tips { margin:0; padding-left:22px; } .pres-tips li { font-size:15px; line-height:1.55; margin:6px 0; color:var(--body); }
/* Thumbnails */
.pres-thumbs { display:flex; gap:10px; flex-wrap:wrap; }
.pres-thumb { width:118px; border-radius:9px; overflow:hidden; background:linear-gradient(150deg,color-mix(in srgb,var(--art,#e3ddce) 55%,#2a2018),#1c1712); box-shadow:0 6px 16px rgba(0,0,0,.18); cursor:pointer; transition:.14s; }
.pres-thumb:hover { transform:translateY(-3px); box-shadow:0 12px 24px rgba(0,0,0,.24); }
.pres-thumb img { width:100%; height:74px; object-fit:cover; display:block; }
.pres-thumb span { display:block; font-family:var(--cond); font-size:11.5px; font-weight:600; padding:5px 7px; color:var(--ink); line-height:1.15; }
/* Kaartenlijst met uitleg per kaart */
.pres-cardlist { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.pres-crow { display:flex; gap:13px; align-items:center; background:var(--bg3); border:1px solid var(--line2); border-radius:11px; padding:8px 12px; cursor:pointer; transition:.13s; }
.pres-crow:hover { background:#fbf4e2; border-color:#d8c9a4; }
.pres-crow-art { flex:0 0 78px; height:52px; border-radius:7px; overflow:hidden; background:linear-gradient(150deg,color-mix(in srgb,var(--art,#e3ddce) 55%,#2a2018),#1c1712); }
.pres-crow-art img { width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block; }
.pres-crow-txt { flex:1; min-width:0; }
.pres-crow-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pres-crow-name { font-family:var(--serif); font-size:16px; color:var(--ink); font-weight:600; }
.pres-crow-head .mana { flex:0 0 auto; }
.pres-crow-why { display:block; font-size:13.5px; color:var(--body); line-height:1.5; margin-top:3px; }
/* Klikbare kaartnamen in de tekst */
.pres-stage .cardlink { color:var(--gold-d); font-weight:600; cursor:pointer; border-bottom:1px dotted var(--gold); }
.pres-stage .cardlink:hover { color:var(--ink); background:var(--ring); }
/* Synergie-slide */
.pres-syn { padding:34px 46px; }
.pres-lede2 { font-size:15.5px; color:var(--body); margin:0 0 18px; }
.pres-pairs { display:flex; flex-direction:column; gap:14px; }
.pres-pair { display:flex; align-items:center; gap:16px; background:var(--bg3); border:1px solid var(--line2); border-radius:12px; padding:12px 16px; }
.pres-pair .pres-thumbs { flex:0 0 auto; }
.pres-pair .pres-thumb { width:82px; }
.pres-pair .pres-thumb img { height:56px; }
.pres-pair .pres-thumb span { font-size:10.5px; white-space:normal; }
.pres-pair-why { flex:1; min-width:0; }
.pres-pair-why b { display:block; font-family:var(--serif); font-size:15.5px; color:var(--ink); line-height:1.2; margin-bottom:3px; }
.pres-pair-why span { font-size:13px; color:var(--body); line-height:1.45; }
/* Voorbeeldpotje-tijdlijn */
.pres-vb .pres-timeline { display:flex; flex-direction:column; gap:14px; margin-top:6px; position:relative; }
.pres-turn { display:flex; gap:14px; align-items:flex-start; }
.pres-turn-badge { flex:0 0 auto; font-family:var(--cond); font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--gold); border-radius:8px; padding:6px 10px; min-width:74px; text-align:center; }
.pres-turn-body { flex:1; min-width:0; }
.pres-turn-body p { margin:0 0 8px; font-size:14.5px; line-height:1.5; color:var(--body); }
.pres-turn-body .pres-thumbs { gap:8px; } .pres-turn-body .pres-thumb { width:92px; }
@media(max-width:640px){
  .pres-frame { height:92vh; max-width:100%; }
  .pres-two { grid-template-columns:1fr; gap:16px; padding:22px; }
  .pres-card { width:170px; margin:0 auto; }
  .pres-hero { padding:28px 24px; } .pres-hero h1 { font-size:30px; }
  .pres-phase, .pres-syn { padding:22px; }
  .pres-pair { flex-direction:column; align-items:flex-start; }
}

/* ---- Power-analyse (Casual Power Score) ---- */
.pw-top { display:flex; gap:22px; align-items:center; flex-wrap:wrap; margin-bottom:20px; }
.pw-gauge { flex:0 0 auto; width:150px; text-align:center; padding:16px 10px; border-radius:14px; border:2px solid var(--pw); background:color-mix(in srgb, var(--pw) 8%, var(--panel)); }
.pw-score { font-family:var(--serif); font-size:44px; font-weight:700; line-height:1; color:var(--pw); }
.pw-score span { font-size:15px; color:var(--muted); font-weight:500; margin-left:3px; }
.pw-label { font-family:var(--cond); font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:13px; color:var(--pw); margin-top:6px; }
.pw-range { font-size:11px; color:var(--muted); margin-top:4px; }
.pw-scalewrap { flex:1; min-width:260px; }
.pw-scale { position:relative; display:flex; height:14px; border-radius:8px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.pw-zone { display:block; height:100%; }
.pw-marker { position:absolute; top:-4px; width:4px; height:22px; background:var(--ink); border-radius:2px; box-shadow:0 0 0 2px var(--panel); transform:translateX(-2px); }
.pw-scale-legend { display:flex; justify-content:space-between; font-size:10.5px; color:var(--muted); margin-top:4px; font-family:var(--cond); letter-spacing:.04em; }
.pw-uitleg { font-size:12.5px; color:var(--body); margin:10px 0 0; line-height:1.5; }
.pw-subs { display:flex; flex-direction:column; gap:8px; margin:18px 0; }
.pw-sub { display:flex; align-items:center; gap:12px; }
.pw-sub-l { flex:0 0 118px; font-family:var(--cond); font-weight:600; font-size:13.5px; color:var(--ink); }
.pw-sub-track { flex:1; height:11px; background:var(--line); border-radius:6px; overflow:hidden; }
.pw-sub-fill { height:100%; border-radius:6px; transition:width .5s; }
.pw-sub-v { flex:0 0 30px; text-align:right; font-family:var(--cond); font-weight:700; font-size:13.5px; color:var(--ink); }
.pw-cols { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:16px 0; }
.pw-card { border:1px solid var(--line2); border-radius:12px; padding:13px 16px; background:var(--panel); }
.pw-card h4 { margin:0 0 7px; font-family:var(--cond); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.pw-card ul { margin:0; padding-left:18px; }
.pw-card li { font-size:13px; margin:3px 0; color:var(--body); line-height:1.4; }
.pw-goed { background:linear-gradient(120deg,#f1f7f0,#eef5ee); border-color:#bfe0c8; } .pw-goed h4 { color:#2f7d4a; }
.pw-zwak { background:linear-gradient(120deg,#f9f2df,#f6ecd6); border-color:#e6d3a2; } .pw-zwak h4 { color:#a3701a; }
.pw-combo { margin:0 0 16px; background:linear-gradient(120deg,#f3eef8,#efe9f6); border-color:#d9c9ea; } .pw-combo h4 { color:#6a4b8a; }
.pw-comborow { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:4px 0; font-size:13px; }
.pw-comborow span { color:var(--muted); font-size:12px; }
.pw-blok { margin:16px 0; } .pw-blok .eyebrow { display:block; margin-bottom:8px; }
.pw-strats { display:flex; flex-wrap:wrap; gap:8px; }
.pw-strat { display:inline-flex; align-items:center; gap:7px; background:var(--bg3); border:1px solid var(--line2); border-radius:16px; padding:5px 12px; font-family:var(--cond); font-weight:600; font-size:13px; }
.pw-strat i { display:inline-block; height:6px; border-radius:3px; background:var(--gold); }
.pw-drivers { display:flex; flex-direction:column; gap:5px; }
.pw-driver { display:flex; justify-content:space-between; align-items:center; padding:6px 12px; border-radius:8px; font-size:13px; background:var(--panel); border:1px solid var(--line2); }
.pw-driver.positive { border-left:3px solid #3f8e57; } .pw-driver.negative { border-left:3px solid #b06a5a; }
.pw-driver b { font-family:var(--cond); }
.pw-driver.positive b { color:#2f7d4a; } .pw-driver.negative b { color:#a3564a; }
.pw-stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; }
.pw-stat { text-align:center; background:var(--bg3); border:1px solid var(--line2); border-radius:9px; padding:8px 4px; }
.pw-stat b { display:block; font-family:var(--serif); font-size:19px; color:var(--ink); }
.pw-stat span { font-size:10.5px; color:var(--muted); font-family:var(--cond); letter-spacing:.04em; text-transform:uppercase; }
.pw-verg select { max-width:280px; }
.pw-vergrij { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:10px; background:var(--panel); border:1px solid var(--line2); border-radius:10px; padding:12px 16px; }
.pw-vergrij .pw-vl { display:block; font-size:11px; color:var(--muted); font-family:var(--cond); text-transform:uppercase; letter-spacing:.06em; }
.pw-vergrij b { font-family:var(--serif); font-size:26px; }
.pw-vpijl { color:var(--muted); font-size:13px; }
.pw-vdelta { margin-left:auto; font-family:var(--cond); font-weight:700; font-size:20px; padding:3px 12px; border-radius:8px; }
.pw-vdelta.op { color:#2f7d4a; background:#eaf4ec; } .pw-vdelta.neer { color:#a3564a; background:#f6ece9; }
.pw-vsub { display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:8px; font-size:12.5px; font-family:var(--cond); font-weight:600; }
.pw-vsub .op { color:#2f7d4a; } .pw-vsub .neer { color:#a3564a; }
.pw-ai { background:linear-gradient(120deg,#f3eef8,#efe9f6); border-color:#d9c9ea; }
.pw-ai-oordeel { margin:0 0 8px; font-size:13.5px; line-height:1.55; color:var(--body); }
.pw-ai-schat { margin:0 0 8px; font-size:13px; color:var(--muted); }
.pw-ai-sec { margin-top:10px; font-size:13px; }
.pw-ai-sec > b { display:block; font-family:var(--cond); text-transform:uppercase; letter-spacing:.06em; font-size:11.5px; color:#6a4b8a; margin-bottom:5px; }
.pw-ai-sec ul { margin:0; padding-left:18px; } .pw-ai-sec li { margin:3px 0; line-height:1.4; }
@media(max-width:620px){ .pw-cols { grid-template-columns:1fr; } .pw-top { flex-direction:column; align-items:stretch; } }

/* "In gebruik"-tag (kaart zit in een opgebouwd deck) */
.owntag.inuse { background:#eef1f6; color:#5a6b8a; border:1px solid #cdd6e6; }

/* ---- MTG riffle-shuffle laad-animatie ---- */
.mtg-riffle { --card-w:26px; --card-h:37px; --pivot-h:70px; --lift:-18px; --peak:-34px; width:120px; height:120px; display:grid; place-items:end center; padding-bottom:8px; }
.mtg-riffle__pivot { width:2px; height:var(--pivot-h); position:relative; }
.mtg-riffle__slot { position:absolute; bottom:0; left:calc(var(--card-w) / -2); width:var(--card-w); height:var(--card-h); transform-origin:bottom center; }
.mtg-riffle__card { width:100%; height:100%; border-radius:4px; border:1px solid currentColor; box-shadow:0 2px 7px rgba(0,0,0,.18); animation:mtg-riffle-lift 1.6s ease-out infinite; }
.mtg-riffle__card--w { color:#f4e3ba; background:linear-gradient(160deg,#4a4029,#221c14); }
.mtg-riffle__card--u { color:#9dc4ef; background:linear-gradient(160deg,#253449,#141b26); }
.mtg-riffle__card--b { color:#b9aeb8; background:linear-gradient(160deg,#332e38,#1b191e); }
.mtg-riffle__card--r { color:#e07a55; background:linear-gradient(160deg,#4a2a1e,#241310); }
.mtg-riffle__card--g { color:#7db884; background:linear-gradient(160deg,#22412c,#121f16); }
@keyframes mtg-riffle-lift { 0%{transform:translateY(var(--lift));} 8%{transform:translateY(var(--peak));} 22%,100%{transform:translateY(var(--lift));} }
.mtg-riffle--sm { --card-w:15px; --card-h:21px; --pivot-h:40px; --lift:-10px; --peak:-21px; width:64px; height:56px; padding-bottom:5px; }
.mtg-riffle--sm .mtg-riffle__card { border-radius:3px; }
@media (prefers-reduced-motion: reduce) { .mtg-riffle__card { animation:none; transform:translateY(var(--lift)); } }
.riffleblok { display:flex; flex-direction:column; align-items:center; gap:2px; padding:22px 0; }
.riffleblok .rl-txt { font-family:var(--cond); letter-spacing:.08em; text-transform:uppercase; font-size:12px; color:var(--muted); }
.chat-denk { display:flex; align-items:center; gap:8px; padding:0 2px 4px; }
.chat-denk .mtg-riffle { margin:-14px 0 -12px -14px; }
.chat-denk .rl-txt { font-size:13px; color:var(--muted); font-style:italic; }
.note .mtg-riffle--sm { display:inline-grid; vertical-align:middle; margin:-10px 4px -8px -8px; }

/* ---- Matchup-strook op de deckpagina: tegen wat werkt dit goed ---- */
.matchupstrip { display:grid; grid-template-columns:auto 1fr 1fr; gap:14px; align-items:stretch; background:var(--bg3); border:1px solid var(--line2); border-radius:12px; padding:14px 16px; margin:4px 0 14px; }
.matchupstrip .ms-arch { display:flex; gap:10px; align-items:center; padding-right:14px; border-right:1px solid var(--line2); }
.matchupstrip .ms-ic { font-size:24px; }
.matchupstrip .ms-lab { display:block; font-family:var(--cond); font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }
.matchupstrip .ms-arch b { font-family:var(--serif); font-size:17px; color:var(--ink); line-height:1.15; }
.matchupstrip .ms-col { display:flex; flex-direction:column; gap:3px; }
.matchupstrip .ms-kop { font-family:var(--cond); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.matchupstrip .ms-goed .ms-kop { color:#2f9e5f; }
.matchupstrip .ms-let .ms-kop { color:#b5761c; }
.matchupstrip .ms-col p { margin:0; font-size:12.5px; line-height:1.5; color:var(--body); }
@media(max-width:760px){ .matchupstrip { grid-template-columns:1fr; gap:10px; } .matchupstrip .ms-arch { border-right:0; border-bottom:1px solid var(--line2); padding:0 0 10px; } }

/* ---- Deck-matrix (overzicht: één regel per versie) ---- */
.weertoggle { display:inline-flex; background:var(--panel); border:1px solid var(--line2); border-radius:9px; overflow:hidden; }
.weertoggle button { border:0; background:transparent; font-family:var(--cond); font-size:13px; font-weight:600; letter-spacing:.03em; color:var(--muted); padding:7px 12px; cursor:pointer; }
.weertoggle button.on { background:var(--gold); color:#fff; }
.matrixwrap { overflow-x:auto; border:1px solid var(--line2); border-radius:12px; background:var(--panel); box-shadow:var(--shadow); }
table.deckmatrix { border-collapse:collapse; width:100%; min-width:1040px; font-size:13.5px; table-layout:fixed; }
.deckmatrix th.c-deck, .deckmatrix td.c-deck { width:21%; min-width:172px; }
.deckmatrix .c-brk { width:74px; }
.deckmatrix .c-ver { width:150px; }
.deckmatrix .c-tegen { width:186px; }
.deckmatrix .c-kv { width:104px; }
.deckmatrix .c-curve { width:88px; }
.deckmatrix .c-val { width:76px; }
.deckmatrix .c-niv { width:82px; }
.deckmatrix .c-status { width:108px; white-space:nowrap; }
.deckmatrix td.c-status, .deckmatrix th.c-status { text-align:left; }

/* Deckfilters bovenaan het overzicht */
.deckfilters { display:flex; flex-wrap:wrap; align-items:center; gap:9px 16px; background:var(--bg3); border:1px solid var(--line2); border-radius:12px; padding:11px 16px; margin:12px 0 2px; }
.deckfilters .searchbig.sm { flex:1 1 200px; min-width:180px; max-width:330px; margin:0; padding:8px 12px; }
.deckfilters .searchbig.sm input { font-size:14px; }
.df-grp { display:flex; align-items:center; gap:8px; }
.df-lab { font-family:var(--cond); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:700; white-space:nowrap; }
.deckfilters .colbtns { display:flex; gap:4px; }
.deckfilters .chipset { display:flex; gap:5px; flex-wrap:wrap; }
.deckfilters select { padding:6px 10px; border:1px solid var(--line2); border-radius:8px; background:var(--panel); font-size:13px; }
.deckmatrix thead th { text-align:left; font-family:var(--cond); font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:700; padding:10px 12px; border-bottom:1.5px solid var(--line2); background:var(--bg3); white-space:nowrap; position:sticky; top:0; }
.deckmatrix th small { display:block; font-size:9.5px; letter-spacing:.08em; opacity:.7; }
.deckmatrix th.num, .deckmatrix td.num { text-align:right; }
.deckmatrix td { padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.deckmatrix tr.mx-first > td { border-top:2px solid var(--line2); }
.deckmatrix tbody tr:not(.mx-first) { background:rgba(46,125,90,.028); }
.deckmatrix tbody tr[data-openrow]:hover { background:#fbf4e2; cursor:pointer; }
.deckmatrix td.c-deck { vertical-align:top; padding-top:12px; background:var(--panel); }
.mx-naam { display:flex; flex-direction:column; gap:4px; min-width:150px; }
.mx-naam b { font-family:var(--serif); font-size:16px; color:var(--ink); font-weight:700; line-height:1.15; }
.mx-pips { display:flex; gap:3px; }
.mx-cmdr { font-size:11.5px; color:var(--muted); }
.mx-dash { color:var(--faint); }
td.c-brk { vertical-align:top; padding-top:12px; white-space:nowrap; }
.mx-brk-badge { display:inline-flex; align-items:center; gap:4px; font-family:var(--cond); font-weight:700; font-size:13px; color:var(--ink); }
td.c-brk small { display:block; font-size:10.5px; color:var(--muted); margin-top:1px; }
.mx-vercel { display:flex; flex-direction:column; align-items:flex-start; gap:6px; max-width:100%; }
.mx-vchip { display:inline-block; max-width:100%; font-family:var(--cond); font-weight:600; font-size:12.5px; background:var(--bg3); border:1px solid var(--line2); border-radius:14px; padding:3px 10px; line-height:1.3; overflow-wrap:anywhere; }
.mx-vchip.nu { border-color:var(--gold); background:#fbf4e2; }
.mx-built td { box-shadow:inset 3px 0 0 var(--ok); background:rgba(63,142,87,.05); }
.c-ver { overflow:hidden; }
.mx-kbar { display:flex; height:9px; width:96px; border-radius:5px; overflow:hidden; background:var(--line); }
.mx-kbar span { display:block; height:100%; }
.c-curve b { font-size:15px; color:var(--ink); }
.mx-spark { display:inline-flex; align-items:flex-end; gap:1.5px; height:16px; margin-left:7px; vertical-align:middle; }
.mx-spark i { width:3px; background:var(--gold-t); border-radius:1px; min-height:1px; opacity:.65; }
.c-val b { font-size:14px; color:var(--ink); font-weight:700; }
.mx-niveau { display:flex; flex-direction:column; gap:2px; }
.mx-dots { display:flex; gap:3px; }
.mx-dots i { width:8px; height:8px; border-radius:50%; background:var(--line); }
.mx-nivlab { font-family:var(--cond); font-weight:700; font-size:12px; letter-spacing:.02em; }
.mx-niveau.top .mx-dots i.aan { background:#2f9e5f; } .mx-niveau.top .mx-nivlab { color:#2f9e5f; }
.mx-niveau.goed .mx-dots i.aan { background:#5aa469; } .mx-niveau.goed .mx-nivlab { color:#5aa469; }
.mx-niveau.ok .mx-dots i.aan { background:var(--gold); } .mx-niveau.ok .mx-nivlab { color:var(--gold-d); }
.mx-niveau.mwah .mx-dots i.aan { background:#c98a2b; } .mx-niveau.mwah .mx-nivlab { color:#b5761c; }
.mx-niveau.laag .mx-dots i.aan { background:#b06a5a; } .mx-niveau.laag .mx-nivlab { color:#a3564a; }
.deckmatrix .statuspill { font-size:11px; padding:3px 9px; }
.mx-power { display:flex; flex-direction:column; line-height:1.05; }
.mx-pw-score { font-family:var(--serif); font-weight:700; font-size:19px; }
.mx-pw-lab { font-family:var(--cond); font-weight:600; font-size:10.5px; letter-spacing:.02em; }
td.c-tegen { max-width:230px; }
.mx-tegen { display:flex; flex-direction:column; gap:2px; }
.mx-eigenstijl { font-family:var(--cond); font-weight:700; font-size:12.5px; color:var(--ink); letter-spacing:.02em; }
.mx-vs { display:flex; align-items:center; gap:5px; flex-wrap:wrap; font-size:11.5px; color:var(--muted); }
.mx-vs-lab { font-family:var(--cond); text-transform:uppercase; letter-spacing:.06em; font-size:9.5px; color:#2f9e5f; font-weight:700; }
.mx-vs-pips { display:inline-flex; gap:2px; }
.mx-vs-stijl { color:var(--body); }
@media(max-width:640px){ .weertoggle { display:none; } }

/* ---- Imports (Beheer) + import-filterbanner (Bibliotheek) ---- */
.importbox { background:var(--bg3); border:1px solid var(--line2); border-radius:14px; padding:16px 18px; margin:18px 0; }
.importbox .ib-head { display:flex; align-items:center; gap:12px; }
.importbox .ib-head b { font-family:var(--serif); font-size:18px; color:var(--ink); }
.importbox .ib-head small { display:block; font-size:12.5px; color:var(--muted); max-width:60ch; }
.implist { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.improw { display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--panel); border:1px solid var(--line2); border-radius:10px; padding:10px 14px; }
.improw .imp-main { flex:1; min-width:180px; display:flex; flex-direction:column; gap:2px; }
.improw .imp-main b { font-size:14.5px; color:var(--ink); }
.improw .imp-sub { font-size:12.5px; color:var(--muted); }
.improw .imp-sub b { color:var(--gold-d); font-size:12.5px; }
.improw .imp-acties { display:flex; gap:6px; }
.importbanner { display:flex; align-items:center; gap:12px; background:linear-gradient(120deg,#f7efd8,#f2e9d4); border:1.5px solid #e6d3a2; border-radius:12px; padding:10px 16px; margin:10px 0 12px; }
.importbanner .ib-ic { font-size:22px; }
.importbanner .ib-txt { flex:1; min-width:0; display:flex; flex-direction:column; }
.importbanner .ib-txt b { font-size:14.5px; color:var(--ink); }
.importbanner .ib-txt span { font-size:12.5px; color:var(--muted); }

/* Commander-tegels (advies + zelf kiezen): bekijk-hint + kies-knop */
#wAdvGrid .cmdrpick .cart, #wGrid .cmdrpick .cart { position:relative; }
.advbekijk { position:absolute; left:8px; bottom:8px; font-family:var(--cond); font-size:11px; font-weight:600; letter-spacing:.03em; color:#fff; background:rgba(0,0,0,.42); padding:3px 8px; border-radius:20px; opacity:0; transition:.14s; pointer-events:none; }
#wAdvGrid .cmdrpick:hover .advbekijk, #wGrid .cmdrpick:hover .advbekijk { opacity:1; }
#wAdvGrid .cmdrpick, #wGrid .cmdrpick { cursor:pointer; }
#wAdvGrid .crow2, #wGrid .crow2 { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; }
.btn.sm.advkies { padding:4px 11px; font-size:12.5px; }

/* ---- Wizard: kaart-om-heen-te-bouwen kiezer ---- */
.kernfilters { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.kernfilters select { border:1px solid var(--line3); background:var(--panel); border-radius:6px; padding:7px 10px; font:inherit; font-size:12.5px; color:var(--body); }
.kern-hint { font-size:11.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--faint); margin:12px 0 8px; font-family:var(--cond); font-weight:600; }
.kerngrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:13px; max-height:520px; overflow-y:auto; padding:2px; }
.kerngrid .empty { grid-column:1/-1; }
.kernpick { display:flex; gap:16px; align-items:flex-start; background:var(--panel); border:1px solid var(--line2); border-radius:12px; padding:14px; box-shadow:var(--shadow); max-width:520px; }
.kernpick .kp-art { position:relative; width:150px; flex:none; aspect-ratio:626/457; border-radius:8px; overflow:hidden; background:linear-gradient(150deg,var(--art,#e3ddce),var(--bg2)); border:1px solid var(--line2); }
.kernpick .kp-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---- Synergie-mindmap ---- */
.synwrap { max-width:1200px; margin:0 auto; padding:22px 22px 60px; }
.synbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.synbar select { border:1px solid var(--line3); background:var(--panel); border-radius:6px; padding:7px 10px; font:inherit; font-size:12.5px; color:var(--body); }
.synchip { font-size:13px; color:var(--muted); background:var(--panel); border:1px solid var(--line2); border-radius:20px; padding:6px 13px; }
.synchip b { color:var(--ink); }
.synmapwrap { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start; }
@media(max-width:900px){ .synmapwrap{ grid-template-columns:1fr; } }
.synmap { position:relative; height:660px; background:radial-gradient(circle at 50% 50%, #fff, var(--bg2) 70%); border:1px solid var(--line2); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.synlines { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.syn-center, .synnode { position:absolute; transform:translate(-50%,-50%); cursor:pointer; z-index:2; text-align:center; }
.synnode { width:118px; transition:transform .12s; }
.synnode:hover { transform:translate(-50%,-50%) scale(1.06); z-index:3; }
.syn-center { width:158px; z-index:4; }
.synnode-art { position:relative; aspect-ratio:626/457; border-radius:9px; overflow:hidden; background:linear-gradient(150deg,var(--art,#e3ddce),var(--bg2)); border:2px solid #fff; box-shadow:0 4px 12px rgba(15,23,42,.18); }
.syn-center .synnode-art { border-color:var(--gold); box-shadow:0 6px 18px rgba(46,125,90,.28); }
.synnode.sel .synnode-art { border-color:var(--gold); box-shadow:0 0 0 3px rgba(46,125,90,.3); }
.synnode-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.syn-mid { position:absolute; bottom:0; left:0; right:0; background:var(--gold); color:#FFFFFF; font-family:var(--cond); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; padding:2px 0; }
.syn-rol { position:absolute; bottom:0; left:0; right:0; background:var(--purple); color:#fff; font-family:var(--cond); font-size:9px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; padding:2px 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.synmap.ai { background:radial-gradient(circle at 50% 50%, #fff, #EAF3EE 72%); }
.synnode-name { font-family:var(--serif); font-size:12.5px; line-height:1.15; color:var(--ink); margin-top:5px; text-shadow:0 1px 2px #fff; }
.syn-center .synnode-name { font-size:15px; font-weight:600; }
.syn-empty { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); max-width:60%; text-align:center; color:var(--muted); font-size:13.5px; }
.syn-side { background:var(--panel); border:1px solid var(--line2); border-radius:14px; padding:18px; box-shadow:var(--shadow); position:sticky; top:76px; }
.syn-pair { display:flex; align-items:center; justify-content:center; gap:12px; }
.syn-mini { display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; width:110px; }
.syn-mini-art { position:relative; width:100%; aspect-ratio:626/457; border-radius:8px; overflow:hidden; background:linear-gradient(150deg,var(--art,#e3ddce),var(--bg2)); border:1px solid var(--line2); }
.syn-mini-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.syn-mini span { font-family:var(--serif); font-size:12.5px; line-height:1.15; text-align:center; color:var(--ink); }
.syn-plus { font-size:22px; color:var(--gold); font-weight:700; }
.syn-themes { display:flex; flex-wrap:wrap; gap:7px; }
.syn-theme { background:#f6ecd6; color:#8a6414; border-radius:20px; padding:5px 11px; font-size:12px; font-weight:600; }

/* ---- Import ---- */
.dropzone { border:2px dashed var(--line3); border-radius:12px; padding:32px 20px; text-align:center; color:var(--muted); font-size:14px; background:var(--bg2); margin:6px 0 8px; transition:.14s; }
.dropzone.over { border-color:var(--gold); background:#fbf4e2; color:var(--ink); }
.scry-thumb { position:relative; width:46px; height:34px; border-radius:5px; overflow:hidden; flex:none; background:linear-gradient(150deg,var(--art,#e3ddce),var(--bg2)); border:1px solid var(--line2); }
.scry-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.modelgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.modelrow { display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--line2); border-radius:10px; padding:12px 14px; box-shadow:var(--shadow); }
.modelrow .mr-t { flex:1; min-width:0; } .modelrow .mr-t b { font-size:13.5px; color:var(--ink); display:block; } .modelrow .mr-t small { color:var(--muted); font-size:11.5px; }
.modelrow select { border:1px solid var(--line3); background:var(--bg2); border-radius:7px; padding:7px 9px; font:inherit; font-size:12.5px; color:var(--ink); flex:none; }

/* ---- Deck-view (twee koloms: commander + list/gallery) ---- */
.deckview { display:grid; grid-template-columns:340px minmax(0,1fr); gap:24px; align-items:start; margin-top:14px; }
@media(max-width:900px){ .deckview{ grid-template-columns:1fr; } }
.dv-left { display:flex; flex-direction:column; gap:16px; position:sticky; top:76px; }
@media(max-width:900px){ .dv-left{ position:static; } }
.cmdcard { background:var(--panel); border:1px solid var(--line2); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
.cmdcard .art { position:relative; aspect-ratio:626/457; background:linear-gradient(150deg,var(--art,#e3ddce),var(--bg2) 82%); display:flex; align-items:center; justify-content:center; }
.cmdcard .art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cmdcard .art .badge-cmd { position:absolute; top:12px; left:12px; font-family:var(--cond); font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#FFFFFF; background:var(--gold); padding:4px 9px; border-radius:3px; z-index:1; }
.cmdcard .art .pips { position:absolute; top:12px; right:12px; z-index:1; }
.cmdcard .art .ph { font-family:var(--serif); color:rgba(15,23,42,.42); padding:14px; text-align:center; }
.cmdcard .body { padding:15px 17px 17px; }
.cmdcard .body h3 { font-family:var(--serif); font-size:22px; font-weight:700; margin:0 0 3px; color:var(--ink); line-height:1.1; }
.cmdcard .body .tl { font-size:12px; color:var(--muted); margin-bottom:9px; }
.cmdcard .body p { margin:0; font-size:13px; line-height:1.55; color:var(--body); }
.statpanel { background:var(--panel); border:1px solid var(--line2); border-radius:12px; padding:16px 18px; display:flex; flex-direction:column; gap:15px; box-shadow:var(--shadow); }
.statpanel .row4 { display:flex; justify-content:space-between; }
.statpanel .row4 .s b { font-family:var(--serif); font-size:19px; font-weight:600; color:var(--ink); display:block; }
.statpanel .row4 .s span { font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.statpanel .sp-lab { font-family:var(--cond); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.idbar { display:flex; height:9px; border-radius:5px; overflow:hidden; background:var(--bg); }
.idlegend { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
.idlegend .it { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--body); }
.idlegend .d { width:9px; height:9px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); }
.dv-bar { display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.viewtoggle { display:flex; gap:2px; background:var(--bg2); border:1px solid var(--line); border-radius:6px; padding:3px; }
.viewtoggle button { background:transparent; border:0; color:var(--muted); border-radius:4px; padding:6px 14px; font-size:12.5px; font-weight:500; }
.viewtoggle button.on { background:var(--panel); color:var(--ink); font-weight:600; box-shadow:0 1px 3px rgba(15,23,42,.14); }
/* gallery */
.gallery { display:flex; flex-direction:column; gap:24px; }
.galgroup .galhead { display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.galgroup .galhead .gd { width:10px; height:10px; border-radius:2px; }
.galgroup .galhead .t { font-family:var(--cond); font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--body); }
.galgroup .galhead .n { font-size:11px; color:var(--faint); }
.galgroup .galhead .ln { flex:1; height:1px; background:var(--line2); }
.gallery .grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
/* list */
.listcols { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; align-items:start; }
.listcol { background:var(--panel); border:1px solid var(--line2); border-radius:10px; overflow:hidden; box-shadow:var(--shadow); }
.listcol-head { display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--line2); }
.listcol-head .t { font-family:var(--cond); font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--body); }
.listcol-head .n { margin-left:auto; font-size:11.5px; color:var(--faint); }
.listcol-body { padding:5px 7px 9px; }
.listrow { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:5px; cursor:pointer; }
.listrow:hover { background:var(--bg3); }
.listrow.tekort { box-shadow:inset 3px 0 0 var(--gold); }
.listrow .q { width:22px; font-size:11.5px; color:var(--gold-t); font-weight:600; font-variant-numeric:tabular-nums; }
.listrow .nm { flex:1; font-size:12.5px; color:var(--body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.listrow .pr { font-size:10.5px; color:#8a6414; font-variant-numeric:tabular-nums; white-space:nowrap; }
.listrow .hv { font-size:11px; color:var(--ok); }

/* "Op je telefoon"-blok in Beheer */
.mobielbox { background:var(--panel); border:1px solid var(--line2); border-left:4px solid var(--gold); border-radius:0 12px 12px 0; padding:16px 18px; margin:6px 0 26px; box-shadow:var(--shadow); }
.mb-head { display:flex; gap:12px; align-items:flex-start; }
.mb-ic { font-size:24px; line-height:1; }
.mb-head b { font-family:var(--serif); font-size:17px; color:var(--ink); display:block; }
.mb-head small { color:var(--muted); font-size:12.5px; line-height:1.5; display:block; margin-top:2px; }
.mb-body { display:flex; gap:20px; align-items:flex-start; margin-top:14px; flex-wrap:wrap; }
.mb-right { flex:1; min-width:230px; }
.mb-qr-wrap { flex:none; display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; }
.mb-qr { width:150px; height:150px; border:1px solid var(--line2); border-radius:10px; padding:8px; background:#fff; box-shadow:var(--shadow); }
.mb-qr-wrap span { font-size:11.5px; color:var(--muted); line-height:1.35; }
.mb-qr-wrap span b { color:var(--body); }
.mb-url { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0 0 10px; }
.mb-url code { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:15px; font-weight:600; color:var(--gold-t); background:var(--bg2); border:1px solid var(--line3); border-radius:8px; padding:9px 14px; }
.mb-steps { margin:0; padding-left:20px; color:var(--body); font-size:13.5px; line-height:1.7; }
.mb-fw { margin-top:12px; font-size:13px; }
.mb-fw summary { cursor:pointer; color:var(--gold-t); font-weight:600; }
.mb-fw pre { background:#12211B; color:#f0e9d8; border-radius:8px; padding:11px 13px; font-size:12px; overflow-x:auto; white-space:pre-wrap; word-break:break-all; }
.mb-note { color:var(--muted); font-size:13px; margin:8px 0 0; }

/* Leesversie (statische telefoon-kopie): alle bewerk-/Claude-/aanmaak-knoppen verbergen */
.leesversie .fab, .leesversie #chat,
.leesversie #nav [data-view="beheer"], .leesversie #nav [data-view="synergie"],
.leesversie .hero-btns, .leesversie .homecard[data-go="synergie"], .leesversie .homecard[data-go="beheer"],
.leesversie #nieuwDeck,
.leesversie #bewerk, .leesversie #askDeck, .leesversie #koopDeck, .leesversie #delDeck, .leesversie #brkBtn,
.leesversie #zoekToevoegBtn, .leesversie #importBtn,
.leesversie #mAdd, .leesversie #mAsk, .leesversie #mKopen, .leesversie #mHand, .leesversie #mDel,
.leesversie .cart .add, .leesversie [data-add],
.leesversie #nieuweVerz, .leesversie #nieuweVerz2, .leesversie #verzVervers, .leesversie #verzDel, .leesversie #specOphalen,
.leesversie #bWish, .leesversie #bKopen, .leesversie #bAsk { display:none !important; }
/* Bracket-badge in leesversie niet-klikbaar tonen */
.leesversie .dhead .cmdr.brk { cursor:default; }
.leesversie .auth { background:#EEF2F6; color:#7a6a3a; }

@media(max-width:900px){
  .libwrap { grid-template-columns:minmax(0,1fr); }
  .rail { position:static; flex-direction:row; flex-wrap:wrap; gap:16px; }
  .builder3 { grid-template-columns:1fr; height:auto; }
  .b-rail, .b-side { border:0; box-shadow:none; }
  .b-side-scroll, .b-scroll { overflow:visible; }
  .handbar { display:none; }
}

/* ============================================================
   MOBIEL — telefoon (≤ 640px)
   ============================================================ */
@media(max-width:640px){
  /* Appbar compact: logo + horizontaal scrollende navigatie */
  .appbar { height:auto; min-height:52px; padding:8px 12px; gap:8px; }
  .brand .sub { display:none; }
  .brand .word { font-size:18px; }
  .brand .diamond { width:22px; height:22px; }
  nav { flex:1; min-width:0; margin-left:2px; padding:3px; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  nav::-webkit-scrollbar { display:none; }
  nav button { padding:7px 11px; font-size:12.5px; white-space:nowrap; }
  .spacer, .auth { display:none; }

  /* Krappere paginamarges + kleinere koppen */
  .page { padding:16px 13px 92px; }
  .libwrap { padding:16px 13px 92px; gap:16px; }
  h1.title { font-size:26px; }
  .lede { font-size:13px; margin-bottom:14px; }

  /* Kaartrasters compacter (2 per rij) */
  .grid { grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:12px; }
  .gallery .grid { grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:10px; }
  .bindergrid { grid-template-columns:repeat(auto-fill,minmax(126px,1fr)); gap:10px; }
  .addgrid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }

  /* Deck-header + tabs (tabs scrollen horizontaal) */
  .dhead { padding:18px 16px; }
  .dhead h1 { font-size:24px; }
  .dhead .cols { top:14px; right:14px; }
  .tabs { width:100%; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  .tabs::-webkit-scrollbar { display:none; }
  .tabs button { white-space:nowrap; flex:none; }

  /* Sticky zijkolommen loslaten wanneer gestapeld */
  .dv-left, .syn-side, .rail { position:static; top:auto; }

  /* Popups verticaal stapelen, vanaf boven */
  .ov { padding:10px; align-items:flex-start; }
  .sheet { flex-direction:column; gap:14px; padding:16px; width:100%; max-height:94vh; }
  .sheet .bigart { width:100%; max-width:220px; align-self:center; }
  .sheet .metarow { gap:14px; }

  /* Deckbouwer (3 koloms) gestapeld */
  .builder3 { grid-template-columns:1fr; height:auto; }
  .b-rail, .b-side { border:0; box-shadow:none; }
  .b-scroll, .b-side-scroll { overflow:visible; }

  /* Hero + home */
  .hero { min-height:330px; }
  .hero-inner { padding:26px 20px; }
  .hero h1 { font-size:29px; }
  .hero p { font-size:14px; }
  .home-grid { grid-template-columns:1fr; }

  /* Statpaneel + FAB */
  .statpanel .row4 { gap:6px; }
  .statpanel .row4 .s b { font-size:17px; }
  .fab { right:12px; bottom:12px; padding:11px 15px; font-size:13px; }
  /* iOS zoomt automatisch in bij focus op invoer < 16px — voorkom dat overal */
  input:not([type=checkbox]):not([type=radio]), textarea, select { font-size:16px; }
  /* geen FAB-overlap: verberg 'm zodra er onderaan een actiebalk/invoer staat */
  body:has(.opt-bewaar.wl-bulk) .fab,
  body:has(#optBewaarBar) .fab,
  body:has(.coach-in) .fab { display:none; }
  /* actiebalken vullen netjes de breedte op mobiel */
  .opt-bewaar.wl-bulk { width:calc(100vw - 20px); bottom:10px; }
  /* Ruimte onderaan zodat de zwevende "Vraag het Claude"-knop geen content/knoppen afdekt */
  #view { padding-bottom:76px; }

  /* Alles wat een knoppenrij is netjes laten afbreken */
  .btnrow { gap:8px; }

  /* Beheer: modelkeuze stapelt, kaartrijen wrappen zodat knoppen niet wegvallen */
  .modelgrid { grid-template-columns:1fr; }
  .modelrow { flex-direction:column; align-items:stretch; gap:8px; }
  .modelrow select { width:100%; }
  .crow { flex-wrap:wrap; }
  .crow .cn { flex:1 1 60%; }
  .crow .btn.sm, .crow .btn.ghost.sm, .crow .rm, .crow .owntag { margin-top:2px; }
}

/* ============================================================
   VERKENNEN — AI-ontdekking van kaarten & wishlist
   ============================================================ */
.vkhero { display:flex; gap:16px; align-items:flex-start; margin-bottom:18px; }
.vkhero-ic { font-size:28px; line-height:1; flex:none; width:56px; height:56px; display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg,#fbf3dc,#fff); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); }

.vktabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.vktab { background:transparent; border:0; padding:9px 16px; font-size:13.5px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; letter-spacing:.01em; }
.vktab:hover { color:var(--ink); }
.vktab.on { color:var(--ink); border-bottom-color:var(--gold); }

.vkzoek { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 16px 14px; box-shadow:var(--shadow); margin-bottom:18px; }
.vkzoek-row { display:flex; gap:10px; }
.vkzoek-row input { flex:1; background:var(--bg2); border:1px solid var(--line3); border-radius:8px; padding:12px 14px; font:inherit; font-size:14.5px; color:var(--ink2); outline:0; transition:border-color .14s, box-shadow .14s; }
.vkzoek-row input:focus { border-color:var(--gold); box-shadow:0 0 0 3px var(--ring); }
.vkzoek-row .btn { flex:none; }
.vkchips, .vkvb { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:12px; }
.vklabel { font-family:var(--cond); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-right:2px; }
.vbchip { background:var(--bg2); color:var(--body); border:1px solid var(--line3); border-radius:20px; padding:6px 13px; font-size:12.5px; font-weight:500; cursor:pointer; transition:.14s; }
.vbchip:hover { border-color:var(--gold); color:var(--ink); background:#fff; }

.vkintro { font-size:15px; line-height:1.5; color:#2c5f8a; background:#eef3f7; border-left:4px solid #4a86b8; padding:14px 16px; border-radius:0 8px 8px 0; margin:6px 0 18px; }
.vkleeg { text-align:center; color:var(--muted); padding:52px 20px; }
.vkleeg span { font-size:40px; display:block; margin-bottom:10px; opacity:.7; }
.vkleeg p { max-width:48ch; margin:0 auto; font-size:14px; line-height:1.5; }
.vkvervolg { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:22px; padding-top:16px; border-top:1px solid var(--line); }

.vgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; align-content:start; }
.vtile { background:var(--panel); border:1px solid var(--line2); border-radius:10px; overflow:hidden; cursor:pointer; box-shadow:var(--shadow); transition:transform .16s ease, box-shadow .16s ease, border-color .16s; display:flex; flex-direction:column; }
.vtile:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:#d8c9a4; }
.vart { aspect-ratio:626/457; position:relative; overflow:hidden; border-bottom:1px solid var(--line2); background:linear-gradient(150deg,var(--art,#e3ddce) 0%, var(--bg2) 82%); display:flex; align-items:center; justify-content:center; }
.vart img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vart .artlabel { font-family:var(--serif); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:rgba(15,23,42,.42); padding:8px; text-align:center; }
.vhave { position:absolute; top:8px; left:8px; font-size:10px; font-weight:600; letter-spacing:.02em; padding:2px 8px; border-radius:20px; background:#e9f0e8; color:#3f6b47; box-shadow:0 1px 2px rgba(0,0,0,.12); }
.vstar { position:absolute; top:6px; right:6px; width:32px; height:32px; border-radius:50%; border:0; background:rgba(255,255,255,.92); color:var(--gold); font-size:18px; line-height:1; cursor:pointer; box-shadow:0 2px 6px rgba(15,23,42,.28); transition:transform .14s, background .14s; display:flex; align-items:center; justify-content:center; }
.vstar:hover { background:#fff; transform:scale(1.08); }
.vstar.on { background:var(--gold); color:#FFFFFF; }
.vbody { padding:10px 12px 12px; display:flex; flex-direction:column; gap:4px; flex:1; }
.vcat { font-family:var(--cond); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-t); }
.vcn { font-family:var(--serif); font-size:16.5px; font-weight:600; line-height:1.1; color:var(--ink); }
.vwhy { font-size:12.5px; color:var(--body); line-height:1.4; margin:2px 0 0; }
.vfoot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:8px; }
.vprijs { font-size:12px; color:var(--muted); font-weight:600; font-variant-numeric:tabular-nums; }
.vbz { font-size:15px; text-decoration:none; opacity:.7; transition:transform .14s, opacity .14s; }
.vbz:hover { opacity:1; transform:scale(1.12); }

.vkwlbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px 16px; margin-bottom:16px; font-size:13.5px; color:var(--body); box-shadow:var(--shadow); }

@media (max-width:640px) {
  .vkzoek-row { flex-direction:column; }
  .vkhero-ic { width:46px; height:46px; font-size:23px; }
  .vgrid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
}

/* ============================================================
   LOGIN / REGISTRATIE (alleen in de online prod-modus)
   ============================================================ */
body.login-actief #nav, body.login-actief #auth, body.login-actief .fab { display:none !important; }
.loginwrap { min-height:72vh; display:flex; align-items:center; justify-content:center; padding:30px 18px; }
.logincard { width:100%; max-width:400px; background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg); padding:30px 28px; }
.loginbrand { display:flex; align-items:center; gap:9px; margin-bottom:18px; }
.loginbrand .diamond { width:26px; height:26px; border:1.5px solid var(--gold); transform:rotate(45deg); display:inline-flex; align-items:center; justify-content:center; }
.loginbrand .diamond i { width:10px; height:10px; background:var(--gold); display:block; }
.loginbrand .word { font-family:var(--serif); font-size:22px; font-weight:700; letter-spacing:.05em; color:var(--ink); }
.logincard h1 { font-family:var(--serif); font-size:27px; font-weight:700; color:var(--ink); margin:0 0 4px; }
.loginlede { color:var(--muted); font-size:13.5px; line-height:1.5; margin:0 0 18px; }
.loginfout { display:none; background:#fbe9e6; color:#a33422; border-left:4px solid var(--red); padding:10px 13px; border-radius:0 7px 7px 0; font-size:13px; margin-bottom:14px; }
.loginfout.on { display:block; }
#loginForm { display:flex; flex-direction:column; gap:13px; }
#loginForm label { display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:600; color:var(--body); }
#loginForm input { background:var(--bg2); border:1px solid var(--line3); border-radius:8px; padding:11px 13px; font:inherit; font-size:14.5px; color:var(--ink2); outline:0; transition:border-color .14s, box-shadow .14s; }
#loginForm input:focus { border-color:var(--gold); box-shadow:0 0 0 3px var(--ring); }
#loginForm .btn { justify-content:center; margin-top:4px; padding:12px; font-size:14px; }
#loginForm .btn:disabled { opacity:.6; }
.loginwissel { margin-top:16px; text-align:center; font-size:13px; color:var(--muted); }
.linkbtn { background:none; border:0; color:var(--gold-t); font:inherit; font-weight:600; cursor:pointer; padding:0; }
.linkbtn:hover { color:var(--gold); text-decoration:underline; }
.authuser { font-size:12.5px; color:var(--body); font-weight:600; }

/* ============================================================
   CLAUDE KOPPELEN (eigen API-key, alleen online prod)
   ============================================================ */
.keybtn { font-size:12px; font-weight:600; border-radius:20px; padding:5px 12px; cursor:pointer; border:1px solid; transition:.14s; }
.keybtn.ok { background:#e9f0e8; color:#3f6b47; border-color:#c4dbc9; }
.keybtn.ok:hover { background:#dfeade; }
.keybtn.warn { background:#fbf1dc; color:#8a6414; border-color:#e6d09a; }
.keybtn.warn:hover { background:#f7e9c9; }
.keymodal { padding:26px 26px 22px; max-width:520px; }
.keymodal h2 { font-family:var(--serif); font-size:24px; font-weight:700; color:var(--ink); margin:0 0 8px; }
.keystaps { margin:14px 0; padding-left:20px; display:flex; flex-direction:column; gap:8px; font-size:13.5px; color:var(--body); line-height:1.45; }
.keystaps li { padding-left:4px; }
.keylab { display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:600; color:var(--body); margin-top:6px; }
.keylab input { background:var(--bg2); border:1px solid var(--line3); border-radius:8px; padding:11px 13px; font:inherit; font-size:14px; color:var(--ink2); outline:0; font-family:ui-monospace,monospace; }
.keylab input:focus { border-color:var(--gold); box-shadow:0 0 0 3px var(--ring); }
.keymask { -webkit-text-security:disc; text-security:disc; }
.keytoon { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); margin-top:8px; cursor:pointer; }
.keyveilig { font-size:12px; color:var(--muted); margin:12px 0 0; }

/* Data back-up & overzetten (Beheer) */
.databeheer { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 16px; box-shadow:var(--shadow); }
.databeheer p { margin:0 0 10px; font-size:13.5px; color:var(--body); line-height:1.5; }
.databeheer code { background:#EEF2F6; padding:1px 5px; border-radius:4px; font-size:12px; }

/* Vrienden uitnodigen (Beheer, eigenaar) */
.invlink { font-size:12.5px; margin-top:6px; word-break:break-all; }
.invtitel { font-family:var(--cond); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:14px 0 6px; }
.invrij { display:flex; align-items:center; gap:10px; font-size:13px; padding:5px 0; border-top:1px solid var(--line2); }
.invrij code { background:#EEF2F6; padding:2px 8px; border-radius:5px; font-weight:600; letter-spacing:.05em; }
.invgebruikt { color:#3f6b47; font-size:12px; }
.invvrij { color:var(--muted); font-size:12px; }

/* Claude-koppelen status (Beheer) */
.keystatus { font-size:12.5px; font-weight:600; }
.keystatus.ok { color:#3f6b47; }
.keystatus.warn { color:#8a6414; }

/* Beheer: account/uitlog-regel (belangrijk op mobiel, want header-knoppen zijn daar verborgen) */
.beheer-account { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin:0 0 16px; font-size:13.5px; color:var(--body); box-shadow:var(--shadow); }

@media(max-width:640px){
  /* Nav: subtiele fade rechts als hint dat je kunt swipen naar meer tabbladen */
  nav#nav { -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent); }
  /* Alles wat lang is netjes laten afbreken i.p.v. van de rand vallen */
  .page, .libwrap { overflow-x:hidden; }
  /* Vangnet: nooit horizontaal scrollen op mobiel (clip breekt sticky niet, hidden wel) */
  html { overflow-x:clip; }
  img { max-width:100%; }
  /* Sorteer-/weergavebalk netjes laten afbreken i.p.v. rechts afkappen */
  .libbar, .vk-blbar { flex-wrap:wrap; row-gap:10px; }
  .sortgrp { margin-left:0; }
  .note, .vkintro, .databeheer, .beheer-account { overflow-wrap:anywhere; }
}

/* ============================================================
   POWER-ANALYSE — nieuw ontwerp (dial + radar + drivers + sidebar)
   ============================================================ */
.pa { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px; align-items:start; }
.pa-main, .pa-side { display:flex; flex-direction:column; gap:16px; min-width:0; }
.pa-card { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px 22px; box-shadow:var(--shadow); }
.pa-card .eyebrow { display:block; margin-bottom:12px; }
.pa-scorecard { display:flex; align-items:center; gap:26px; }
.pa-dial { position:relative; width:128px; height:128px; flex:none; }
.pa-dial-c { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.pa-dial-c b { font-family:var(--serif); font-size:38px; font-weight:700; line-height:1; color:var(--ink); }
.pa-dial-c span { font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.pa-scoremeta { flex:1; min-width:0; }
.pa-badges { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:9px; }
.pa-badge { font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; border-radius:6px; padding:5px 10px; }
.pa-est { font-size:12px; color:var(--muted); }
.pa-explain { font-size:13px; line-height:1.55; color:var(--body); margin:0; }
.pa-spectrum { position:relative; display:flex; height:8px; border-radius:999px; overflow:hidden; margin:16px 0 0; }
.pa-spectrum span { height:8px; }
.pa-marker { position:absolute; top:-4px; width:2px; height:16px; background:var(--ink); border-radius:2px; transform:translateX(-1px); }
.pa-spectrum-legend { display:flex; justify-content:space-between; margin-top:10px; font-size:10.5px; color:var(--muted); }
.pa-cardhead { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.pa-cardhead .eyebrow { margin:0; }
.pa-cmp { background:none; border:0; color:var(--gold-t); font:inherit; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; }
.pa-cmp:hover { color:var(--gold); }
.pa-radarwrap { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.pa-radar { flex:1 1 280px; min-width:240px; max-width:360px; }
.pa-axes { flex:1 1 240px; min-width:230px; display:flex; flex-direction:column; }
.pa-axis { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line2); }
.pa-axis-dot { width:9px; height:9px; border-radius:2px; flex:none; }
.pa-axis-l { flex:1; min-width:0; font-size:13px; color:var(--body); }
.pa-axis-d { font-size:11.5px; width:42px; text-align:right; }
.pa-axis-v { font-family:var(--serif); font-size:17px; font-weight:700; width:32px; text-align:right; color:var(--ink); }
.pa-axes-note { font-size:11.5px; color:var(--muted); margin-top:10px; line-height:1.4; }
.pa-drivers { display:flex; flex-direction:column; }
.pa-driver { display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--line2); }
.pa-driver-l { width:210px; flex:none; font-size:12.5px; color:var(--body); }
.pa-driver-track { flex:1; min-width:0; position:relative; height:8px; background:var(--bg2); border-radius:999px; }
.pa-driver-mid { position:absolute; left:50%; top:-3px; bottom:-3px; width:1px; background:var(--line3); }
.pa-driver-bar { position:absolute; height:8px; border-radius:999px; }
.pa-driver b { width:40px; text-align:right; font-size:12.5px; }
.pa-drivers-legend { display:flex; justify-content:space-between; font-size:10.5px; color:var(--faint); padding-top:10px; }
.pa-list { display:flex; flex-direction:column; gap:9px; }
.pa-li { display:flex; gap:9px; font-size:12.5px; line-height:1.5; color:var(--body); }
.pa-li .pa-up { color:#7fa97a; } .pa-li .pa-down { color:#c89a32; }
.pa-hr { height:1px; background:var(--line2); margin:16px 0; }
.eyebrow.pa-good { color:#3f5b3c; } .eyebrow.pa-bad { color:var(--gold-t); }
.pa-strats { display:flex; flex-direction:column; gap:10px; }
.pa-strat { display:flex; align-items:center; gap:12px; }
.pa-strat span { flex:1; min-width:0; font-size:12.5px; color:var(--body); }
.pa-strat-track { width:72px; height:6px; background:var(--bg2); border-radius:999px; overflow:hidden; flex:none; }
.pa-strat-track i { display:block; height:6px; background:var(--gold); }
.pa-stats { display:flex; flex-direction:column; }
.pa-stat { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line2); }
.pa-stat span { font-size:12.5px; color:var(--body); }
.pa-stat b { font-family:var(--serif); font-size:17px; font-weight:700; color:var(--ink); }
.pa-semantic p { font-size:12.5px; line-height:1.55; color:var(--body); margin:0 0 12px; }
.pa-semantic .btn { display:flex; width:100%; justify-content:flex-start; margin-bottom:8px; }
.pa-combos { display:flex; flex-direction:column; gap:8px; }
.pa-comborow b { font-size:13px; color:var(--ink); }
.pa-comborow span { display:block; font-size:11.5px; color:var(--muted); }
@media(max-width:900px){ .pa { grid-template-columns:1fr; } .pa-scorecard { flex-direction:column; text-align:center; } .pa-driver-l { width:150px; } }
@media(max-width:640px){ .pa-card { padding:15px 16px; } .pa-driver-l { width:104px; font-size:12px; } .pa-scorecard { gap:16px; } }

/* ============================================================
   BIBLIOTHEEK — nieuw ontwerp (inklapbare filterkaart)
   ============================================================ */
.libwrap { grid-template-columns:236px minmax(0,1fr); }
.libfilters { position:sticky; top:76px; display:flex; flex-direction:column; gap:10px; align-self:start; min-width:0; max-height:calc(100vh - 90px); overflow-y:auto; overscroll-behavior:contain; padding-right:4px; scrollbar-width:thin; }
.lf-head { display:flex; align-items:baseline; justify-content:space-between; padding:0 2px; flex:none; }
.lf-clear { background:none; border:0; color:var(--gold-t); font:inherit; font-size:12px; cursor:pointer; }
.lf-clear:hover { color:var(--gold); }
.lf-card { background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); flex:none; }
.lf-group { border-bottom:1px solid var(--line2); }
.lf-group:last-child { border-bottom:0; }
.lf-gh { display:flex; align-items:center; gap:8px; padding:11px 14px; cursor:pointer; transition:background .12s; }
.lf-gh:hover { background:var(--bg3); }
.lf-gl { flex:1; min-width:0; font-size:12.5px; font-weight:600; color:var(--ink); }
.lf-gs { font-size:11.5px; color:var(--muted); white-space:nowrap; }
.lf-gc { font-size:10px; color:var(--faint); width:10px; text-align:right; flex:none; }
.lf-gb { padding:2px 14px 14px; }
.lf-gb .chipset { gap:6px; }
.lf-gb select { width:100%; }
.libhead { display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:6px; }
.libhead-acts { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.libhead-acts .btn { white-space:nowrap; }
@media(max-width:900px){ .libwrap { grid-template-columns:minmax(0,1fr); } .libfilters { position:static; max-height:none; overflow-y:visible; } .lf-card, .lf-group, .lf-gh { min-width:0; max-width:100%; } .lf-gl { overflow:hidden; text-overflow:ellipsis; } }
/* Mobiel: filterpaneel standaard ingeklapt achter een "Filters"-knop (minder scrollen vóór de resultaten) */
.filters-toggle { display:none; }
@media(max-width:900px){
  .filters-toggle { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; margin:0 0 12px; padding:11px 14px; border:1px solid var(--line); border-radius:11px; background:var(--panel); font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ink); cursor:pointer; box-shadow:var(--shadow); }
  .filters-toggle .ft-caret { color:var(--muted); transition:transform .15s; }
  .libwrap.filters-open .filters-toggle .ft-caret { transform:rotate(180deg); }
  .libwrap .libfilters { display:none; }
  .libwrap.filters-open .libfilters { display:flex; margin-bottom:16px; }
}

/* ============================================================
   HOME — premium ontwerp
   ============================================================ */
.hp-hero { position:relative; min-height:480px; display:flex; color:#EAF3EE; overflow:hidden; background:var(--hero-b); }
.hp-hero::before { content:""; position:absolute; inset:0; background:var(--hero, linear-gradient(120deg,var(--hero-a),var(--hero-b))) center/cover no-repeat; opacity:.2; filter:blur(34px) saturate(1.15); transform:scale(1.4); }
.hp-hero::after { content:""; position:absolute; inset:0; background:radial-gradient(120% 130% at 84% -10%, var(--glow), transparent 52%), linear-gradient(96deg,var(--hero-b) 0%,rgba(10,10,10,.9) 42%,rgba(10,10,10,.7) 100%); }
.hp-hero-inner { position:relative; z-index:1; width:100%; max-width:1200px; margin:0 auto; padding:46px 22px 28px; display:flex; flex-direction:column; }
.hp-hero-card { position:absolute; z-index:1; right:max(32px,calc((100% - 1240px)/2 + 40px)); top:50%; transform:translateY(-50%) rotate(-3deg); width:min(238px,25vw); aspect-ratio:63/88; border-radius:13px; overflow:hidden; box-shadow:0 26px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.35); }
.hp-hero-card img { width:100%; height:100%; object-fit:cover; display:block; transition:opacity .32s ease; }
@media (max-width:900px){ .hp-hero-card { display:none; } }
.hp-eyebrow { display:flex; align-items:center; gap:11px; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:#7BC59E; }
.hp-diamond { width:14px; height:14px; background:var(--gold); transform:rotate(45deg); border-radius:2px; display:inline-block; }
.hp-diamond.gold { width:15px; height:15px; }
.hp-hero-mid { margin-top:auto; max-width:640px; }
.hp-hero-mid h1 { font-family:var(--serif); font-size:56px; line-height:1.03; font-weight:600; letter-spacing:-.02em; margin:0; color:#EAF3EE; }
.hp-hero-mid p { font-size:15.5px; line-height:1.6; color:rgba(234,243,238,.8); margin:16px 0 0; max-width:48ch; }
.hp-hero-btns { display:flex; align-items:center; gap:10px; margin-top:24px; flex-wrap:wrap; }
.hp-hero-btns .btn.big { background:var(--accent-hi); color:var(--accent-hi-ink); box-shadow:none; font-size:14px; padding:13px 22px; }
.hp-hero-btns .btn.big:hover { background:var(--gold-tint-bd); }
.hp-glass { font:inherit; font-size:14px; font-weight:500; color:#EAF3EE; background:rgba(234,243,238,.1); backdrop-filter:blur(8px); border:1px solid rgba(234,243,238,.24); border-radius:10px; padding:13px 20px; cursor:pointer; }
.hp-glass:hover { border-color:rgba(123,197,158,.6); }
.hp-hero-foot { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-top:34px; padding-top:20px; border-top:1px solid rgba(234,243,238,.16); }
.hp-stats { display:flex; gap:46px; flex-wrap:wrap; }
.hp-stat { cursor:pointer; }
.hp-stat b { display:block; font-family:var(--serif); font-size:30px; line-height:1; font-weight:600; color:#EAF3EE; }
.hp-stat span { display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(234,243,238,.55); margin-top:7px; }
.hp-stat:hover b { color:var(--gold-tint-bd); }
.hp-hero-cmdr { font-family:var(--serif); font-style:italic; font-size:13px; color:rgba(234,243,238,.5); white-space:nowrap; }

.hp-wrap { max-width:1200px; margin:0 auto; padding:38px 22px 70px; display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:26px; align-items:start; }
.hp-main { display:flex; flex-direction:column; gap:32px; min-width:0; }
.hp-sechead { display:flex; align-items:baseline; gap:12px; margin-bottom:14px; }
.hp-sechead > span { font-family:var(--serif); font-size:22px; font-weight:600; color:var(--ink); }
.hp-sechead i { flex:1; height:1px; background:var(--line); }
.hp-sechead a { font-size:12.5px; font-weight:600; white-space:nowrap; cursor:pointer; }
.hp-resume { display:flex; background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; cursor:pointer; box-shadow:var(--shadow); transition:border-color .16s, box-shadow .16s; }
.hp-resume:hover { border-color:var(--gold); box-shadow:var(--shadow-lg); }
.hp-resume-art { position:relative; width:196px; flex:none; background:linear-gradient(150deg,var(--art,#2f4a33),#141c15); }
.hp-resume-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hp-resume-body { flex:1; min-width:0; padding:22px 24px; }
.hp-resume-eyebrow { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.hp-resume-body h3 { font-family:var(--serif); font-size:26px; font-weight:600; line-height:1.15; margin:9px 0 0; color:var(--ink); }
.hp-resume-body p { font-size:13px; line-height:1.55; color:var(--muted); margin:8px 0 0; max-width:52ch; }
.hp-resume-foot { display:flex; align-items:center; gap:20px; margin-top:18px; flex-wrap:wrap; }
.hp-progress { flex:1 1 220px; min-width:200px; max-width:300px; }
.hp-progress-lab { display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted); margin-bottom:6px; }
.hp-progress-lab .ok { color:#3f5b3c; font-weight:600; }
.hp-progress-track { height:6px; background:var(--bg2); border-radius:999px; overflow:hidden; }
.hp-progress-track i { display:block; height:6px; background:#7fa97a; }
.btn.purple { background:var(--primary); color:#FFFFFF; box-shadow:none; }
.btn.purple:hover { filter:brightness(1.12); }
.hp-deckgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px; }
/* Compacte deckkaart met dezelfde opbouw als de grote resume-kaart (art-strook + gestructureerde body) */
.hp-deckmini { display:flex; background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; cursor:pointer; box-shadow:var(--shadow); transition:border-color .16s, box-shadow .16s; }
.hp-deckmini:hover { border-color:var(--gold); box-shadow:var(--shadow-lg); }
.hp-deckmini-art { position:relative; width:96px; flex:none; background:linear-gradient(150deg,var(--art,#3a5a32),#151e12); }
.hp-deckmini-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hp-deckmini-body { flex:1; min-width:0; padding:14px 16px; display:flex; flex-direction:column; }
.hp-deckmini-eyebrow { font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hp-deckmini-body b { display:block; font-family:var(--serif); font-size:18px; font-weight:600; line-height:1.15; margin:5px 0 0; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hp-deckmini-sub { display:block; font-size:11.5px; color:var(--muted); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hp-deckmini-foot { margin-top:auto; padding-top:12px; }
.hp-deckmini-prog-lab { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11px; color:var(--muted); margin-bottom:5px; }
.hp-deckmini-track { height:5px; background:var(--bg2); border-radius:999px; overflow:hidden; }
.hp-deckmini-track i { display:block; height:5px; background:#7fa97a; }
.hp-tag { font-size:11px; font-weight:600; border-radius:6px; padding:4px 9px; white-space:nowrap; flex:none; }
.hp-tag.ok { color:#3f5b3c; background:#e9f2e6; } .hp-tag.buy { color:#8a6414; background:#f7edd6; }
.hp-newcards { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.hp-newcard { cursor:pointer; }
.hp-newcard-art { position:relative; height:150px; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:linear-gradient(150deg,var(--art,#e3ddce),var(--bg2)); transition:border-color .15s, box-shadow .15s; }
.hp-newcard:hover .hp-newcard-art { border-color:var(--gold); box-shadow:var(--shadow-lg); }
.hp-newcard-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hp-newcard .hp-pips { position:absolute; top:9px; right:9px; display:flex; gap:3px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.hp-newcard .hp-pips .mana { display:inline-flex; flex-direction:row; gap:3px; }
.hp-newcard .hp-pips .pip { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; font-size:12px; line-height:1; text-align:center; padding:0; box-sizing:border-box; }
.hp-newcard b { display:block; font-family:var(--serif); font-size:15px; font-weight:600; line-height:1.2; margin-top:8px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hp-newcard span { display:block; font-size:11.5px; color:var(--muted); margin-top:2px; }

.hp-side { display:flex; flex-direction:column; gap:16px; position:sticky; top:76px; min-width:0; }
.hp-claude { position:relative; background:linear-gradient(155deg,var(--hero-a),var(--hero-b)); border:1px solid rgba(123,197,158,.28); border-radius:18px; padding:22px; overflow:hidden; }
.hp-claude-eyebrow { display:flex; align-items:center; gap:10px; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:#7BC59E; }
.hp-claude-title { font-family:var(--serif); font-size:20px; line-height:1.25; color:#EAF3EE; margin-top:13px; }
.hp-claude p { font-size:12.5px; line-height:1.6; color:rgba(234,243,238,.72); margin:9px 0 0; }
.btn.gold-btn { width:100%; justify-content:center; background:var(--accent-hi); color:var(--accent-hi-ink); box-shadow:none; margin-top:16px; }
.btn.gold-btn:hover { background:var(--gold-tint-bd); }
.hp-card { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:var(--shadow); }
.hp-card-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.hp-card-head a { font-size:12px; cursor:pointer; }
.hp-verz { cursor:pointer; } .hp-verz:hover { border-color:var(--gold); }
.hp-verz-body { display:flex; align-items:center; gap:18px; }
.hp-verz-ring { position:relative; width:78px; height:78px; flex:none; }
.hp-verz-ring span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:19px; font-weight:600; color:var(--ink); }
.hp-verz-txt b { display:block; font-family:var(--serif); font-size:18px; font-weight:600; line-height:1.2; color:var(--ink); }
.hp-verz-txt span { display:block; font-size:12.5px; color:var(--muted); margin-top:5px; }
.hp-verz-txt small { display:block; font-size:12px; color:var(--faint); margin-top:6px; }
.hp-links { padding:8px 4px; }
.hp-link { display:flex; align-items:center; gap:13px; width:100%; padding:11px 14px; border:0; background:none; border-radius:10px; cursor:pointer; text-align:left; transition:background .12s; }
.hp-link:hover { background:var(--bg3); }
.hp-link-dot { width:7px; height:7px; background:var(--gold); transform:rotate(45deg); border-radius:1px; flex:none; opacity:.8; }
.hp-link-txt { flex:1; min-width:0; }
.hp-link-txt b { display:block; font-size:13.5px; font-weight:600; color:var(--ink); }
.hp-link-txt small { display:block; font-size:11.5px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hp-link-arr { color:#c3baa4; flex:none; }
.hp-link-kop { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:600; padding:12px 14px 4px; }
.hp-link-kop:first-child { padding-top:6px; }
.hp-link-voet { display:flex; align-items:center; gap:10px; padding:12px 14px 8px; border-top:1px solid var(--line2); margin-top:8px; color:var(--faint); }
.hp-link-voet button { background:none; border:0; padding:0; font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer; }
.hp-link-voet button:hover { color:var(--gold-t); }
@media(max-width:960px){ .hp-wrap { grid-template-columns:1fr; } .hp-side { position:static; } }
@media(max-width:640px){
  .hp-hero { min-height:400px; } .hp-hero-inner { padding:34px 16px 20px; }
  .hp-hero-mid h1 { font-size:38px; } .hp-hero-mid p { font-size:14px; }
  .hp-hero-foot { flex-direction:column; align-items:flex-start; gap:14px; }
  .hp-stats { gap:26px; } .hp-stat b { font-size:24px; }
  .hp-wrap { padding:24px 14px 80px; gap:20px; }
  .hp-resume { flex-direction:column; } .hp-resume-art { width:100%; height:150px; }
  .hp-deckgrid { grid-template-columns:1fr; }
  .hp-newcards { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px; }
}
/* Telefoon: statistieken netjes als 2×2-raster i.p.v. rafelig 3+1 */
@media(max-width:560px){ .hp-stats { display:grid; grid-template-columns:1fr 1fr; gap:18px 22px; } .hp-stat { min-width:0; } }

/* ============================================================
   VERKENNEN — premium ontwerp
   ============================================================ */
.vk-hero { position:relative; overflow:hidden; background:linear-gradient(160deg,var(--hero-a) 0%,var(--hero-m) 55%,var(--hero-b) 100%); color:#EAF3EE; }
.vk-hero::before { content:""; position:absolute; right:-120px; top:-140px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle,var(--glow),transparent 68%); pointer-events:none; }
.vk-hero::after { content:""; position:absolute; left:-80px; bottom:-200px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(127,169,122,.1),transparent 70%); pointer-events:none; }
.vk-hero-inner { position:relative; max-width:1000px; margin:0 auto; padding:48px 22px 42px; text-align:center; }
.vk-eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:#7BC59E; }
.vk-hero-inner h1 { font-family:var(--serif); font-size:42px; line-height:1.1; font-weight:600; letter-spacing:-.015em; margin:16px 0 0; color:#EAF3EE; }
.vk-hero-inner > p { font-size:14.5px; line-height:1.6; color:rgba(234,243,238,.72); margin:12px auto 0; max-width:56ch; }
.vk-search { display:flex; align-items:center; gap:10px; background:rgba(234,243,238,.08); backdrop-filter:blur(10px); border:1px solid rgba(234,243,238,.2); border-radius:14px; padding:8px 8px 8px 18px; margin-top:26px; text-align:left; }
.vk-search-ic { color:rgba(234,243,238,.45); font-size:15px; flex:none; }
.vk-search input { flex:1; min-width:0; background:transparent; border:0; outline:0; font:inherit; font-size:14.5px; color:#EAF3EE; }
.vk-search input::placeholder { color:rgba(234,243,238,.45); }
.vk-go { font:inherit; font-size:13.5px; font-weight:600; color:#10251B; background:#7BC59E; border:0; border-radius:10px; padding:12px 20px; cursor:pointer; white-space:nowrap; flex:none; }
.vk-go:hover { background:var(--gold-tint-bd); }
.vk-scopes { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px; flex-wrap:wrap; }
.vk-scope-lab { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(234,243,238,.45); margin-right:2px; }
.vk-scope { padding:7px 14px; border-radius:999px; font:inherit; font-size:12.5px; color:rgba(234,243,238,.78); background:rgba(234,243,238,.07); border:1px solid rgba(234,243,238,.18); cursor:pointer; white-space:nowrap; }
.vk-scope:hover { border-color:rgba(123,197,158,.5); }
.vk-scope.on { background:var(--accent-hi); color:var(--accent-hi-ink); border-color:var(--accent-hi); font-weight:600; }

.vk-wrap { max-width:1200px; margin:0 auto; padding:32px 22px 70px; }
.vk-ontdek-body { max-width:1200px; margin:0 auto; padding:32px 22px 70px; }
/* Mode-balk (Bladeren / Zoek met Claude / Wishlist) */
/* Tabbalk onder de hero (hero eerst, tabs in het content-gebied — uniform met de deck-detailpagina) */
.vk-tabbar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; max-width:1200px; margin:0 auto; padding:20px 22px 0; }
.vk-tabs { display:flex; gap:6px; flex-wrap:wrap; }
.vk-tab { display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:10px; font:inherit; font-size:13.5px; font-weight:600; color:var(--muted); background:var(--surface); border:1px solid var(--border); cursor:pointer; white-space:nowrap; transition:all .12s; }
.vk-tab:hover { border-color:var(--gold); color:var(--gold-t); }
.vk-tab.on { background:var(--primary); color:#EAF3EE; border-color:var(--primary); }
.vk-tab-ic { font-size:14px; }
.vk-tab-badge { background:var(--gold-tint); color:var(--gold-ink); border-radius:999px; font-size:11px; font-weight:700; padding:1px 7px; }
.vk-tab.on .vk-tab-badge { background:rgba(234,243,238,.22); color:#EAF3EE; }
.vk-tabtool { display:flex; align-items:center; gap:9px; }
.vk-tabtool-lab { font-size:11.5px; font-weight:600; color:var(--muted); white-space:nowrap; }
.vk-tabtool-dd { min-width:190px; }
@media(max-width:640px){ .vk-tabbar { justify-content:flex-start; } .vk-tabtool { width:100%; } .vk-tabtool-dd { flex:1; } }
/* Bladeren-tab */
.vk-blwrap { padding-top:16px; }
.vk-blmain { min-width:0; }
.vk-blf-sub { font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin:10px 0 6px; }
.vk-blf-vrij { width:100%; margin-top:8px; background:var(--surface-sunk); border:1px solid var(--border-inner); border-radius:9px; padding:7px 10px; font:inherit; font-size:12.5px; color:var(--ink2); outline:0; }
.vk-blf-vrij:focus { border-color:var(--gold); box-shadow:0 0 0 3px var(--ring); }
.vk-blbar-lab { font-size:11px; color:var(--faint); letter-spacing:.1em; text-transform:uppercase; margin-left:auto; }
.vk-blsort { min-width:170px; }
.vk-blmeer-wrap { display:flex; justify-content:center; margin-top:22px; }
.vk-hero-blader .vk-hero-inner { padding:38px 28px 32px; }
/* Toolbar: weergave + per rij */
.vk-blctl { display:flex; align-items:center; gap:14px; margin-left:auto; flex-wrap:wrap; }
.vk-blkol { display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.vk-blkol b { min-width:14px; text-align:center; color:var(--ink); font-size:13px; }
.vk-kolbtn { width:26px; height:26px; border-radius:7px; border:1px solid var(--line); background:var(--panel); color:var(--ink); font-size:15px; font-weight:700; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.vk-kolbtn:hover:not(:disabled) { border-color:var(--gold); color:var(--gold); }
.vk-kolbtn:disabled { opacity:.4; cursor:default; }
/* Instelbare kolommen voor beide weergaven (hogere specificiteit dan de losse .vk-results-regels) */
.vk-results.vk-results-kol { grid-template-columns:repeat(var(--vk-kol,4),minmax(0,1fr)); }
.vk-kaartgrid { display:grid; grid-template-columns:repeat(var(--vk-kol,5),minmax(0,1fr)); gap:14px; }
@media(max-width:640px){ .vk-results.vk-results-kol, .vk-kaartgrid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.vk-kaarttile { position:relative; cursor:pointer; border-radius:5.5% / 4%; overflow:hidden; aspect-ratio:488/680; background:var(--bg2); box-shadow:0 6px 16px rgba(15,23,42,.12); transition:transform .14s ease, box-shadow .14s ease; }
.vk-kaarttile:hover { transform:translateY(-4px) scale(1.02); box-shadow:0 20px 40px rgba(15,23,42,.28); z-index:2; }
.vk-kaarttile img { width:100%; height:100%; object-fit:cover; display:block; }
.vk-kaarttile-ph { display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:var(--bg2); font-family:var(--serif); color:var(--muted); padding:12px; text-align:center; }
.vk-kaarttile-have { position:absolute; top:8px; left:8px; background:rgba(30,77,58,.92); color:#EAF6EF; font-size:10px; font-weight:600; letter-spacing:.04em; padding:3px 8px; border-radius:999px; }
.vk-kaarttile-pr { position:absolute; bottom:7px; left:7px; background:rgba(15,23,42,.82); color:#fff; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; }
.vk-kaarttile-wish { position:absolute; top:6px; right:6px; width:30px; height:30px; border-radius:999px; border:0; background:rgba(15,23,42,.55); color:#fff; font-size:15px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:.14s; }
.vk-kaarttile:hover .vk-kaarttile-wish { opacity:1; }
.vk-kaarttile-wish:hover { background:rgba(15,23,42,.8); }
.vk-kaarttile-wish.on { opacity:1; background:var(--gold); color:var(--accent-hi-ink); }
/* Ster-badge: kaart staat al op de wishlist (galerij-tegel) */
.vk-wishstar { position:absolute; top:7px; right:7px; width:24px; height:24px; border-radius:999px; background:var(--gold); color:var(--accent-hi-ink); font-size:13px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.28); z-index:2; }
/* Deck-contextpaneel: je ziet waarvoor je zoekt (doel-deck) */
.vk-deckctx-wrap { max-width:1200px; margin:14px auto 0; padding:0 22px; }
.vk-deckctx { display:flex; align-items:center; gap:14px; background:var(--gold-tint); border:1px solid var(--gold-tint-bd); border-radius:14px; padding:12px 16px; flex-wrap:wrap; }
.vk-deckctx-art { width:56px; height:42px; border-radius:8px; overflow:hidden; flex:none; background:linear-gradient(150deg,var(--art,#2f4a33),#141c15); position:relative; }
.vk-deckctx-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vk-deckctx-txt { flex:1; min-width:220px; }
.vk-deckctx-lab { display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-t); font-weight:600; }
.vk-deckctx-txt b { display:block; font-family:var(--serif); font-size:17px; color:var(--gold-ink); line-height:1.3; }
.vk-deckctx-sub { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--gold-t); margin-top:2px; flex-wrap:wrap; }
.vk-deckctx-acts { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.vk-deckctx-kl { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--gold-ink); cursor:pointer; user-select:none; }
.vk-deckctx-kl input { accent-color:var(--gold); }
.vk-kaarttile-have.indeck { background:var(--gold); color:var(--accent-hi-ink); }
@media(max-width:640px){ .vk-deckctx { padding:10px 12px; } .vk-deckctx-acts { width:100%; } }
/* Rustige startstaat */
.vk-blstart { text-align:center; padding:56px 20px; color:var(--muted); }
.vk-blstart-ic { font-size:42px; display:block; margin-bottom:12px; }
.vk-blstart p { max-width:46ch; margin:0 auto 18px; font-size:14px; line-height:1.55; }
/* Doel-deck voor nieuwe wishlist-kaarten */
/* Wishlist per deck */
.uitg-banner { display:block; }
.uitg-banner b { display:inline; }
.uitg-kaart { border:1px solid var(--gold-tint-bd); background:var(--gold-tint); color:var(--gold-ink); border-radius:999px; padding:3px 10px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; margin:2px 2px 0 0; display:inline-block; }
.uitg-kaart:hover { border-color:var(--gold); }
.imp-modus { background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:11px 13px; margin:0 0 12px; }
.imp-modus-lab { display:block; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.imp-radio { display:flex; align-items:flex-start; gap:9px; padding:6px 0; cursor:pointer; font-size:13.5px; color:var(--ink); }
.imp-radio input { margin-top:2px; accent-color:var(--primary); flex:none; }
.imp-radio small { color:var(--muted); }
.dz-wis { border:1px solid #e0bfb6; background:#fdf6f4; border-radius:12px; padding:14px 16px; }
.dz-wis p { margin:0 0 10px; font-size:13px; color:var(--body); line-height:1.55; }
/* Opnieuw-beginnen keuzedialoog */
.wis-sheet { max-width:520px; }
.wis-wrap { padding:4px 2px; }
.wis-wrap h2 { font-family:var(--serif); font-size:24px; margin:0 0 8px; color:var(--ink); }
.wis-lead { font-size:13.5px; color:var(--body); line-height:1.55; margin:0 0 16px; }
.wis-opts { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.wis-opt { display:flex; align-items:flex-start; gap:11px; padding:11px 13px; border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.wis-opt:hover { border-color:var(--primary); }
.wis-opt input { width:18px; height:18px; margin-top:1px; accent-color:var(--red); flex:none; }
.wis-opt-txt { display:flex; flex-direction:column; gap:1px; }
.wis-opt-txt b { font-size:14px; color:var(--ink); }
.wis-opt-txt small { font-size:12px; color:var(--muted); }
.wis-note { font-size:12.5px; color:var(--gold-ink); background:var(--gold-tint); border-radius:9px; padding:10px 12px; line-height:1.5; margin-bottom:16px; }
.wis-confirm { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink); margin-bottom:16px; flex-wrap:wrap; }
.wis-confirm input { flex:1; min-width:140px; border:1px solid var(--line); border-radius:8px; padding:9px 11px; font-family:var(--sans); font-size:14px; letter-spacing:.1em; }
.wis-acts { display:flex; justify-content:flex-end; gap:10px; }
.wis-acts .btn.danger { background:var(--red); color:#fff; border-color:var(--red); }
.wis-acts .btn.danger:disabled { opacity:.45; cursor:not-allowed; }
.vk-blquick { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 2px; }
.vk-qchip { border:1px solid var(--line); background:var(--panel); border-radius:999px; padding:7px 15px; font-family:var(--sans); font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; white-space:nowrap; transition:all .12s; }
.vk-qchip:hover { border-color:var(--primary); color:var(--ink); }
.vk-qchip.on { background:var(--primary); border-color:var(--primary); color:#fff; }
.wl-filterbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:4px 0 22px; }
.wl-fsp { flex:1 1 20px; }
.wl-vt { flex:none; }
.wl-kol { flex:none; }
/* Wishlist kaartweergave (volledige kaarten met selectievinkje) */
.wl-ctile { position:relative; }
.wl-ctile.sel { outline:3px solid var(--primary); outline-offset:1px; border-radius:5.5%/4%; }
.wl-cardsel { position:absolute; top:7px; left:7px; z-index:3; width:26px; height:26px; border-radius:999px; border:2px solid #fff; background:rgba(15,23,42,.55); color:#fff; font-size:13px; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.3); }
.wl-cardsel.on { background:var(--primary); border-color:var(--primary); }
.wl-ctile-tag { position:absolute; bottom:7px; left:7px; z-index:2; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.3); }
.wl-ctile-tag.have { background:var(--ok); }
.wl-ctile-tag.indeck { background:var(--gold); color:var(--accent-hi-ink); }
.wl-groep { margin-bottom:30px; }
.wl-grhead { display:flex; align-items:baseline; gap:12px; padding-bottom:10px; margin-bottom:14px; border-bottom:1px solid var(--line); }
.wl-grtitle { font-family:var(--serif); font-size:20px; font-weight:600; color:var(--ink); }
.wl-grcount { font-size:12px; color:var(--muted); }
.wl-grdeck { margin-left:auto; background:none; border:0; color:var(--gold-t); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }
.wl-grdeck:hover { text-decoration:underline; }
.wl-cel { display:flex; flex-direction:column; gap:0; position:relative; }
.wl-cel .ctile { border-radius:14px; transition:box-shadow .12s; }
.wl-cel.sel .ctile { box-shadow:0 0 0 2px var(--gold); }
.wl-cel .vk-wishstar { display:none; } /* in de wishlist zelf is de ster-badge ruis — alles hier ís wishlist */
.wl-check { position:absolute; top:8px; right:8px; z-index:3; width:26px; height:26px; border-radius:8px; border:2px solid rgba(255,255,255,.9); background:rgba(15,23,42,.45); color:#fff; font-size:14px; font-weight:700; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:.12s; }
.wl-cel:hover .wl-check, .wl-check.on { opacity:1; }
.wl-check.on { background:var(--gold); border-color:var(--gold); color:#10251B; }
.wl-selall { background:none; border:0; font:inherit; font-size:12px; font-weight:600; color:var(--gold-t); cursor:pointer; }
.wl-selall:hover { text-decoration:underline; }
.opt-bewaar.wl-bulk { position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:55; width:min(720px, calc(100vw - 32px)); margin-top:0; }
/* extra ruimte onderaan zodat de laatste kaarten niet achter de vaste bulk-balk vallen */
body:has(.opt-bewaar.wl-bulk) .vk-wrap { padding-bottom:150px; }
.wl-bulk-doel { display:flex; align-items:center; gap:8px; font-size:12.5px; color:rgba(234,246,239,.85); font-weight:600; }
.wl-bulk-doel select { background:rgba(255,255,255,.12); color:#EAF6EF; border:1px solid rgba(255,255,255,.25); border-radius:8px; padding:8px 10px; font:inherit; font-size:12.5px; max-width:220px; }
.wl-bulk-doel select option { color:#0F172A; }
.wl-bulk-x { background:none; border:0; color:rgba(234,246,239,.6); font-size:15px; cursor:pointer; padding:4px; }
.wl-bulk-x:hover { color:#fff; }
.wl-move { display:flex; align-items:center; gap:7px; margin-top:7px; font-size:11px; color:var(--faint); letter-spacing:.04em; }
.wl-move > span { text-transform:uppercase; font-weight:600; }
.wl-mv { flex:1; min-width:0; background:var(--surface-sunk); border:1px solid var(--border-inner); border-radius:8px; padding:5px 8px; font:inherit; font-size:12px; color:var(--ink2); outline:0; cursor:pointer; }
.wl-mv:focus { border-color:var(--gold); }
.vk-sechead { display:flex; align-items:baseline; gap:12px; margin-bottom:16px; }
.vk-sechead > span { font-family:var(--serif); font-size:22px; font-weight:600; color:var(--ink); }
.vk-sechead i { flex:1; height:1px; background:var(--line); }
.vk-sechead small { font-size:12px; color:var(--muted); white-space:nowrap; }
.vk-starters { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.vk-starter { position:relative; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px; cursor:pointer; overflow:hidden; transition:border-color .16s, box-shadow .16s; }
.vk-starter:hover { border-color:var(--gold); box-shadow:var(--shadow-lg); }
.vk-starter-glow { position:absolute; right:-30px; top:-30px; width:110px; height:110px; border-radius:50%; pointer-events:none; }
.vk-starter-kicker { position:relative; display:flex; align-items:center; gap:9px; font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.vk-starter-dot { width:9px; height:9px; transform:rotate(45deg); border-radius:1px; }
.vk-starter-title { font-family:var(--serif); font-size:21px; line-height:1.25; font-weight:600; margin-top:12px; color:var(--ink); position:relative; }
.vk-starter-desc { font-size:12.5px; line-height:1.55; color:var(--muted); margin-top:8px; position:relative; }
.vk-starter-cta { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--gold-t); margin-top:16px; position:relative; }
.vk-quick { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:20px; }
.vk-quick .vk-scope-lab { color:var(--muted); }
.vk-wlstrip { display:flex; align-items:center; gap:18px; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px 20px; margin-top:28px; flex-wrap:wrap; box-shadow:var(--shadow); }
.vk-wlthumbs { display:flex; }
.vk-wlthumb { width:38px; height:52px; border-radius:7px; overflow:hidden; border:2px solid var(--panel); background:linear-gradient(150deg,var(--art,#d8d2c0),var(--bg2)); position:relative; flex:none; }
.vk-wlthumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vk-wltxt { flex:1; min-width:160px; }
.vk-wltxt b { display:block; font-family:var(--serif); font-size:18px; font-weight:600; line-height:1.2; color:var(--ink); }
.vk-wltxt span { display:block; font-size:12.5px; color:var(--muted); margin-top:4px; }

.vk-reshead { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.vk-restitle { font-family:var(--serif); font-size:22px; font-weight:600; color:var(--ink); }
.vk-rescount { font-size:12.5px; color:var(--body); background:var(--bg3); border:1px solid var(--line); border-radius:7px; padding:5px 11px; white-space:nowrap; }
.vk-reshead i { flex:1; min-width:20px; height:1px; background:var(--line); }
.vk-newq { background:none; border:0; color:var(--gold-t); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; }
.vk-newq:hover { color:var(--gold); }
.vk-results { display:grid; gap:16px; }
/* Inline "praat verder"-chat onder de verken-resultaten */
.vk-chat { margin-top:26px; background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; }
.vk-chat-head { display:flex; align-items:center; gap:9px; padding:14px 18px; border-bottom:1px solid var(--line2); font-family:var(--serif); font-size:16px; font-weight:600; color:var(--ink); background:var(--surface-sunk); }
.vk-chat-model { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); font-weight:400; font-size:11.5px; color:var(--muted); }
.vk-chat-model span { font-family:var(--cond); letter-spacing:.06em; text-transform:uppercase; font-size:10px; }
.vk-chat-model select { font:inherit; font-size:12px; padding:5px 8px; border:1px solid var(--line3); border-radius:7px; background:var(--panel); color:var(--ink); }
.vk-chat-log { display:flex; flex-direction:column; gap:11px; padding:16px 18px; max-height:420px; overflow-y:auto; }
.vk-chat-hint { font-size:13px; color:var(--muted); line-height:1.5; text-align:center; padding:8px 4px; }
.vk-msg { max-width:82%; font-size:14px; line-height:1.6; padding:11px 14px; border-radius:14px; }
.vk-msg.me { align-self:flex-end; background:var(--primary); color:#FFFFFF; border-bottom-right-radius:5px; white-space:pre-wrap; }
.vk-msg.ai { align-self:flex-start; background:var(--bg2); border:1px solid var(--line2); color:var(--body); border-bottom-left-radius:5px; }
.vk-msg.ai a { color:var(--todo); font-weight:600; }
.vk-msg.denk { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:13px; background:transparent; border:0; }
.vk-chat-in { display:flex; gap:9px; align-items:flex-end; padding:12px 14px; border-top:1px solid var(--line2); }
.vk-chat-in textarea { flex:1; border:1px solid var(--line3); border-radius:11px; padding:10px 13px; font:inherit; font-size:14px; resize:none; min-height:44px; max-height:120px; background:var(--bg2); color:var(--ink); }
.vk-chat-in textarea:focus { outline:none; border-color:var(--gold); background:#fff; }
.vk-chat-send { flex:none; width:44px; height:44px; border-radius:11px; border:0; background:var(--primary); color:#FFFFFF; font-size:18px; cursor:pointer; }
.vk-chat-send:hover { background:var(--primary-hover); }
.vk-res { display:flex; background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.vk-res:hover { border-color:var(--gold); box-shadow:var(--shadow-lg); }
.vk-res-art { position:relative; width:104px; flex:none; background:linear-gradient(150deg,var(--art,#e3ddce),var(--bg2)); }
.vk-res-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vk-res-owned { position:absolute; top:7px; left:7px; background:rgba(255,255,255,.94); border-radius:6px; padding:3px 7px; font-size:10.5px; font-weight:600; color:#3f5b3c; }
.vk-res-body { flex:1; min-width:0; padding:14px 15px; display:flex; flex-direction:column; }
.vk-res-top { display:flex; align-items:flex-start; gap:8px; }
.vk-res-name { flex:1; min-width:0; font-family:var(--serif); font-size:17px; font-weight:600; line-height:1.2; color:var(--ink); }
.vk-res-pips { display:flex; gap:3px; flex:none; padding-top:3px; }
.vk-res-pips span { width:12px; height:12px; border-radius:50%; border:1px solid rgba(15,23,42,.18); }
.vk-res-why { font-size:12px; line-height:1.5; color:var(--muted); margin:6px 0 0; }
.vk-res-foot { display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:12px; }
.vk-res-meta { font-size:11.5px; color:var(--faint); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vk-wish { font:inherit; font-size:12px; font-weight:600; border-radius:7px; padding:5px 10px; cursor:pointer; white-space:nowrap; color:var(--gold-t); background:var(--bg3); border:1px solid var(--line); }
.vk-wish:hover { border-color:var(--gold); }
.vk-wish.on { color:#3f5b3c; background:#e9f2e6; border-color:#cde0c8; }

@media(max-width:640px){
  .vk-hero-inner { padding:34px 16px 30px; } .vk-hero-inner h1 { font-size:30px; }
  .vk-search { flex-wrap:wrap; padding:12px; } .vk-search input { flex:1 1 100%; } .vk-go { flex:1 1 100%; }
  .vk-wrap { padding:22px 14px 80px; }
  .vk-results { grid-template-columns:1fr; }
}

/* ============================================================
   MIJN DECKS — premium ontwerp
   ============================================================ */
.dp-hero { position:relative; min-height:220px; display:flex; color:#EAF3EE; background:linear-gradient(100deg,#14170f 0%,#191d13 100%); }
.dp-hero-inner { width:100%; max-width:1200px; margin:0 auto; padding:28px 22px 22px; display:flex; flex-direction:column; }
.dp-hero-top { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.dp-eyebrow { display:flex; align-items:center; gap:10px; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:#7BC59E; }
.dp-hero-txt h1 { font-family:var(--serif); font-size:44px; line-height:1.05; font-weight:600; letter-spacing:-.015em; margin:12px 0 0; color:#EAF3EE; }
.dp-hero-txt p { font-size:14px; line-height:1.6; color:rgba(234,243,238,.75); margin:10px 0 0; max-width:52ch; }
.dp-hero-acts { display:flex; align-items:center; gap:10px; flex:none; }
.dp-toggle { display:flex; background:rgba(234,243,238,.09); border:1px solid rgba(234,243,238,.16); border-radius:9px; padding:2px; }
.dp-toggle button { font:inherit; font-size:12.5px; font-weight:600; padding:7px 14px; border:0; border-radius:7px; background:transparent; color:rgba(234,243,238,.75); cursor:pointer; }
.dp-toggle button.on { background:var(--accent-hi); color:var(--accent-hi-ink); }
.dp-hero-acts .btn.big { background:var(--accent-hi); color:var(--accent-hi-ink); box-shadow:none; font-size:13.5px; padding:12px 18px; }
.dp-hero-acts .btn.big:hover { background:var(--gold-tint-bd); }
.dp-hero-stats { display:flex; gap:52px; margin-top:auto; padding-top:20px; border-top:1px solid rgba(234,243,238,.16); flex-wrap:wrap; }
.dp-stat b { display:block; font-family:var(--serif); font-size:28px; line-height:1; font-weight:600; color:#EAF3EE; }
.dp-stat span { display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(234,243,238,.55); margin-top:6px; }

.dp-wrap { max-width:1200px; margin:0 auto; padding:26px 22px 70px; }
.dp-filterbar { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:11px 14px; box-shadow:var(--shadow); }
.dp-fb-main { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.dp-search { flex:1; min-width:220px; display:flex; align-items:center; gap:9px; background:var(--bg3); border:1px solid var(--line2); border-radius:9px; padding:9px 13px; }
.dp-search .mag { color:var(--faint); font-size:13px; }
.dp-search input { flex:1; min-width:0; background:transparent; border:0; outline:0; font:inherit; font-size:13px; color:var(--ink2); }
.dp-statuschips { display:flex; gap:4px; flex-wrap:wrap; }
.dp-chip { font:inherit; font-size:12.5px; padding:7px 13px; border-radius:8px; background:var(--bg3); color:var(--body); border:1px solid var(--line2); cursor:pointer; white-space:nowrap; }
.dp-chip:hover { border-color:var(--gold); }
.dp-chip.on { background:var(--gold-tint); color:var(--gold-ink); border-color:var(--gold-tint-bd); font-weight:600; }
.dp-fb-tools { display:flex; align-items:center; gap:12px; margin-left:auto; }
.dp-meer { background:none; border:0; color:var(--gold-t); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; }
.dp-meer:hover { color:var(--gold); }
.dp-fb-sep { width:1px; height:22px; background:var(--line2); }
.dp-sort { font:inherit; font-size:12.5px; color:var(--body); border:1px solid var(--line2); border-radius:8px; padding:7px 10px; background:var(--panel); }
.dp-fb-more { width:100%; border-top:1px solid var(--line2); margin-top:11px; padding-top:12px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.dp-fb-grp { display:flex; align-items:center; gap:9px; }

.dp-sechead { display:flex; align-items:baseline; gap:12px; margin:30px 0 12px; }
.dp-sechead > span { font-family:var(--serif); font-size:22px; font-weight:600; color:var(--ink); }
.dp-sechead small { font-size:12px; color:var(--faint); }
.dp-sechead i { flex:1; height:1px; background:var(--line); }

.dl { background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.dl-head, .dl-row, .dl-vrow { display:grid; grid-template-columns:minmax(0,1fr) 96px 92px 86px 132px; gap:18px; align-items:center; }
.dl-head { padding:10px 22px; border-bottom:1px solid var(--line2); background:var(--bg3); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.dl-head .num, .dl-row .num, .dl-vrow .num { text-align:right; }
.dl-deckwrap { border-bottom:1px solid var(--line2); }
.dl-deckwrap:last-child { border-bottom:0; }
.dl-row { padding:14px 22px; cursor:pointer; transition:background .12s; }
.dl-row:hover { background:var(--bg3); }
.dl-row.open { background:var(--bg3); }
.dl-deck { display:flex; align-items:center; gap:13px; min-width:0; }
.dl-thumb { width:38px; height:52px; border-radius:7px; overflow:hidden; flex:none; position:relative; background:linear-gradient(150deg,var(--art,#2f4a33),#141c15); }
.dl-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dl-deck-txt { min-width:0; }
.dl-deck-name { display:flex; align-items:center; gap:9px; min-width:0; font-family:var(--serif); font-size:17px; font-weight:600; line-height:1.25; color:var(--ink); }
.dl-deck-name > span, .dl-deck-name { overflow:hidden; }
.dl-badge { flex:none; font-size:10px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:#3f5b3c; background:#e4f0e1; border-radius:5px; padding:3px 7px; }
.dl-sub { display:block; font-size:11.5px; color:var(--faint); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dl-mix { display:flex; height:6px; border-radius:999px; overflow:hidden; background:var(--bg2); }
.dl-mix.sm { height:5px; }
.dl-mix span { height:100%; }
.dl-dash { color:var(--faint); font-size:12px; }
.dl-pw { font-family:var(--serif); font-size:17px; font-weight:700; }
.dl-power small { font-size:10.5px; color:var(--faint); margin-left:5px; }
.dl-val { font-size:13px; color:var(--body); font-variant-numeric:tabular-nums; }
.dl-statuscol { display:flex; align-items:center; justify-content:flex-end; gap:9px; }
.dl-st { font-size:12px; border-radius:6px; padding:4px 9px; white-space:nowrap; }
.dl-st.ok { color:#3f6b47; background:transparent; }
.dl-st.buy { color:#8a6414; background:#f7edd6; font-weight:600; }
.dl-verhint { font-size:11px; color:var(--faint); width:30px; text-align:right; }
.dl-versions { background:var(--bg3); border-top:1px solid var(--line2); padding:4px 22px 10px; }
.dl-vrow { padding:10px 0; border-bottom:1px solid var(--line2); }
.dl-vrow:last-child { border-bottom:0; }
.dl-vname { display:flex; align-items:center; gap:9px; min-width:0; padding-left:51px; font-size:13px; color:var(--body); }
.dl-vname .nu { font-weight:600; color:var(--ink); }
.dl-vname small { color:var(--faint); font-size:11.5px; white-space:nowrap; }
.dl-arrow { color:var(--faint); flex:none; }
.dl-vacties { display:flex; justify-content:flex-end; gap:12px; }
.dl-link { background:none; border:0; font:inherit; font-size:12px; cursor:pointer; color:var(--gold-t); font-weight:600; }
.dl-link.ghost { color:var(--muted); font-weight:400; }
.dl-link.aan { color:#3f6b47; }
.dl-link:hover { color:var(--gold); }

@media(max-width:900px){ .dp-hero-txt h1 { font-size:34px; } }
@media(max-width:640px){
  .dp-hero { min-height:auto; } .dp-hero-inner { padding:22px 16px 18px; }
  .dp-hero-top { flex-direction:column; gap:14px; } .dp-hero-txt h1 { font-size:30px; }
  .dp-hero-acts { width:100%; } .dp-hero-acts .btn.big { flex:1; justify-content:center; }
  .dp-hero-stats { gap:24px; } .dp-stat b { font-size:23px; }
  .dp-wrap { padding:18px 12px 80px; }
  .dp-fb-tools { margin-left:0; width:100%; justify-content:space-between; }
  /* Tabel op mobiel: alleen Deck | Power | Status (Kleuren + Waarde verbergen) */
  .dl-head, .dl-row, .dl-vrow { grid-template-columns:minmax(0,1fr) 60px 96px; gap:10px; }
  .dl-mix, .dl-val, .dl-head > div:nth-child(2), .dl-head > div:nth-child(4) { display:none; }
  .dl-row { padding:12px 14px; } .dl-head { padding:9px 14px; } .dl-versions { padding:4px 14px 8px; }
  .dl-vname { padding-left:20px; }
  .dl-deck-name { font-size:15.5px; }
}

@media(max-width:640px){ .dp-toggle { display:none; } }
/* Telefoon: decks-hero statistieken als 2×2-raster i.p.v. rafelig 3+1 */
@media(max-width:560px){ .dp-hero-stats { display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; } .dp-stat { min-width:0; } }

/* Verkennen-resultaten: zelfde verticale tegel als de Bibliotheek */
.vk-results { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
.vk-tile .cart .pips { gap:4px; }
.vk-pip { width:14px; height:14px; border-radius:50%; border:1px solid rgba(12,16,10,.35); box-shadow:0 1px 3px rgba(12,16,10,.4); display:inline-block; }
.vk-why { font-size:12px; line-height:1.4; color:var(--muted); margin-top:4px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.vk-tile .crow2 { margin-top:8px; align-items:center; }
.vk-wishmini { font:inherit; font-size:11.5px; font-weight:600; border-radius:7px; padding:4px 9px; cursor:pointer; color:var(--gold-t); background:var(--bg3); border:1px solid var(--line); white-space:nowrap; }
.vk-wishmini:hover { border-color:var(--gold); }
.vk-wishmini.on { color:#3f6b47; background:#e9f2e6; border-color:#cde0c8; }

@media(max-width:640px){ .vk-results { grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:12px; } }

/* ============================================================
   HAMBURGER-MENU (mobiel)
   ============================================================ */
.navtoggle { display:none; }
/* Hamburger vanaf ≤1000px (ook tablets/kleine laptops): de volledige horizontale
   nav is daar te krap en kapt af. Zoek-knop + hamburger netjes rechts gegroepeerd. */
@media(max-width:1000px){
  .appbar { position:relative; }
  .brand .sub { display:none; }
  .spacer { display:none; }
  /* .auth (incl. uitloggen) blijft zichtbaar op tablet/smal-desktop; alleen op telefoon (≤640) verborgen */
  .appbar-search { margin-left:auto; }            /* duw zoeken + auth + hamburger naar rechts */
  .navtoggle { display:flex; flex-direction:column; justify-content:center; gap:4px; width:40px; height:38px; padding:9px 8px; border:1px solid var(--line); border-radius:9px; background:var(--panel); cursor:pointer; flex:none; margin-left:8px; }
  .navtoggle span { display:block; height:2px; width:100%; background:var(--ink); border-radius:2px; transition:transform .2s, opacity .2s; }
  body.nav-open .navtoggle span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
  body.nav-open .navtoggle span:nth-child(2) { opacity:0; }
  body.nav-open .navtoggle span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
  #nav { position:absolute; top:100%; left:0; right:0; z-index:60; flex-direction:column; gap:2px; background:var(--panel); border-bottom:1px solid var(--line); box-shadow:var(--shadow-lg); padding:8px; margin:0; overflow:visible; max-height:none; display:none; }
  nav#nav { -webkit-mask-image:none; mask-image:none; }  /* geen fade op de dropdown (hoge specificiteit) */
  body.nav-open #nav { display:flex; }
  #nav button { width:100%; text-align:left; padding:12px 14px; font-size:14px; border-radius:8px; white-space:normal; }
  #nav button.on { background:var(--bg3); }
  /* In het hamburger-menu: groepen als open lijst met kopjes (geen dropdowns-in-dropdown) */
  .navgrp { width:100%; }
  .navgrp-trig { pointer-events:none; padding:10px 14px 2px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:600; }
  .navgrp-caret { display:none; }
  .navgrp.on > .navgrp-trig { background:transparent; box-shadow:none; color:var(--faint); font-weight:600; }
  .navgrp-pop { display:block; position:static; min-width:0; border:0; box-shadow:none; border-radius:0; padding:0; background:transparent; }
  .navgrp-pop button { padding:10px 14px; }
  .navgrp-pop button small { font-size:11px; }
  #nav .navlos { border-top:1px solid var(--line2); border-radius:0; margin-top:2px; padding-top:12px; }
  #nav .navlos + .navlos { border-top:0; margin-top:0; padding-top:12px; }
}

/* Synergie op mobiel: map wordt een nette grid i.p.v. krappe ruimtelijke graaf */
@media(max-width:640px){
  .synmapwrap { grid-template-columns:1fr; }
  .synmap { position:static; height:auto !important; display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:12px; padding:12px; background:var(--panel); }
  .synmap .synlines { display:none; }
  .syn-center, .synnode { position:static; transform:none; width:auto; }
  .synnode:hover { transform:none; }
  .syn-center { grid-column:1 / -1; max-width:190px; margin:0 auto 2px; }
  .synmap .syn-empty { grid-column:1 / -1; position:static; text-align:center; padding:20px; }
  .syn-side { position:static; }
  .synbar select, .synbar .chipset { flex:1 1 100%; }
}

/* ============================================================
   BEHEER — tegel-menu + doorklikken
   ============================================================ */
.beheertiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-top:8px; }
.beheer-versie { margin-top:20px; text-align:center; font-size:12px; color:var(--faint); font-variant-numeric:tabular-nums; }
.beheer-versie b { color:var(--muted); font-weight:600; }
.beheertile { display:flex; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 18px; cursor:pointer; text-align:left; box-shadow:var(--shadow); transition:border-color .15s, box-shadow .15s, transform .12s; }
.beheertile:hover { border-color:var(--gold); box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.beheertile .bt-ic { flex:none; width:46px; height:46px; display:flex; align-items:center; justify-content:center; background:var(--surface-sunk); border:1px solid var(--line); border-radius:12px; }
.beheertile .bt-ic::before { content:""; width:15px; height:15px; background:var(--gold); transform:rotate(45deg); border-radius:2px; }
.beheertile:hover .bt-ic { border-color:var(--gold-tint-bd); }
.beheertile .bt-txt { flex:1; min-width:0; }
.beheertile .bt-txt b { display:block; font-family:var(--serif); font-size:17px; font-weight:600; color:var(--ink); line-height:1.2; }
.beheertile .bt-txt small { display:block; font-size:12px; color:var(--muted); margin-top:3px; }
.beheertile .bt-arr { color:#c3baa4; flex:none; font-size:15px; }
/* ---- Beheer-overzicht (nieuw ontwerp) ---- */
.beh-page { padding-top:24px; }
.beh-top { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:16px; }
.beh-acc { background:var(--panel); border:1px solid var(--line); border-radius:17px; padding:22px 24px; display:flex; flex-direction:column; }
.beh-acc-h { display:flex; align-items:flex-start; gap:15px; }
.beh-avatar { width:46px; height:46px; flex:none; border-radius:13px; background:var(--gold-tint); border:1px solid var(--gold-tint-bd); display:grid; place-items:center; font-family:var(--serif); font-size:20px; font-weight:600; color:var(--gold-ink,#6B4E1E); }
.beh-acc-main { min-width:0; }
.beh-acc-naam { font-family:var(--serif); font-size:23px; line-height:1.15; font-weight:600; color:var(--ink); }
.beh-acc-sub { display:flex; align-items:center; gap:9px; margin-top:6px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); }
.beh-badge { font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--gold-ink,#6B4E1E); background:var(--gold-tint); border-radius:5px; padding:3px 8px; }
.beh-uit { margin-left:auto; flex:none; font:inherit; font-size:12.5px; font-weight:600; color:var(--body); background:var(--surface-soft); border:1px solid var(--border); border-radius:9px; padding:9px 14px; cursor:pointer; white-space:nowrap; }
.beh-uit:hover { background:var(--surface-sunk); }
.beh-acc-stats { display:flex; gap:30px; margin-top:auto; padding-top:22px; flex-wrap:wrap; }
.beh-acc-v { font-family:var(--serif); font-size:22px; line-height:1; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.beh-acc-l { font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); margin-top:6px; }
.beh-claude { background:#1B1F18; border:1px solid #2E3329; border-radius:17px; padding:22px 24px; display:flex; flex-direction:column; }
.beh-claude-h { display:flex; align-items:center; gap:11px; }
.beh-dot { width:7px; height:7px; border-radius:50%; flex:none; }
.beh-dot.on { background:#8FBF8A; box-shadow:0 0 0 3px rgba(143,191,138,.2); }
.beh-dot.off { background:var(--gold); box-shadow:0 0 0 3px rgba(46,125,90,.2); }
.beh-claude-status { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#8FBF8A; font-weight:600; }
.beh-dot.off ~ .beh-claude-status { color:#7BC59E; }
.beh-claude-key { margin-left:auto; background:0; border:0; font:inherit; font-size:12px; font-weight:600; color:var(--gold); cursor:pointer; white-space:nowrap; }
.beh-claude-p { font-size:13px; line-height:1.6; color:#A8BBC4; margin-top:12px; text-wrap:pretty; }
.beh-claude-foot { margin-top:auto; padding-top:20px; }
.beh-usage b { font-family:var(--serif); font-size:26px; line-height:1; font-weight:600; color:#F1F5F9; font-variant-numeric:tabular-nums; }
.beh-usage span { display:block; font-size:12px; color:#A8BBC4; margin-top:8px; }
.beh-group { margin-top:30px; }
.beh-group-h { display:flex; align-items:center; gap:14px; }
.beh-group-h span { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:700; white-space:nowrap; }
.beh-group-h i { flex:1; height:1px; background:var(--border); }
.beh-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:14px; margin-top:15px; }
.beh-tile { text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:15px; padding:18px 19px; cursor:pointer; box-shadow:0 1px 2px rgba(15,23,42,.05); display:flex; flex-direction:column; transition:border-color .14s, box-shadow .14s; }
.beh-tile:hover { border-color:var(--gold); box-shadow:0 1px 2px rgba(15,23,42,.05),0 10px 26px rgba(15,23,42,.08); }
.beh-tile-h { display:flex; align-items:center; gap:12px; }
.beh-ic { width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center; }
.beh-ic > span { width:12px; height:12px; display:block; }
.beh-tile-t { font-family:var(--serif); font-size:19px; line-height:1.2; font-weight:600; color:var(--ink); min-width:0; }
.beh-tile-arr { margin-left:auto; color:#94A3B8; font-size:14px; flex:none; }
.beh-tile-b { font-size:12.5px; line-height:1.6; color:var(--muted); margin-top:11px; text-wrap:pretty; }
.beh-tile-f { display:flex; align-items:center; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid var(--border-inner); }
.beh-tile-meta { font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }
.beh-tile-note { font-size:11.5px; color:var(--faint); }
.beh-versie { display:flex; align-items:center; gap:10px; margin-top:34px; padding-top:18px; border-top:1px solid var(--border); font-size:11.5px; color:var(--faint); }
.beh-versie b { color:var(--muted); font-weight:600; font-variant-numeric:tabular-nums; }
.beh-versie .scov-diamond { width:8px; height:8px; }
@media (max-width:820px){ .beh-top { grid-template-columns:1fr; } }

/* 'Ik heb 'm gekocht'-actieknop: duidelijk een actie (goud-omlijnd), niet het groene 'klaar'-uiterlijk */
.btn.koopbtn { background:var(--panel); color:var(--gold-t); border:1px solid var(--gold); box-shadow:none; }
.btn.koopbtn:hover { background:#fbf3dc; color:var(--gold-d); }
.crow .btn.koopbtn.mini { flex:none; padding:5px 10px; font-size:11.5px; white-space:nowrap; }
.dp2 #tabinhoud .btn.koopbtn { background:var(--panel); color:var(--gold-t); border-color:var(--gold); }

/* ---- Beheer: Verbruik & kosten ---- */
.vb-hero { background:linear-gradient(135deg,#12211B,#3a332a); border:1px solid #4a4034; border-radius:14px; padding:22px 24px; color:#EAF3EE; box-shadow:0 6px 20px rgba(15,23,42,.22); }
.vb-big { display:flex; flex-direction:column; gap:4px; }
.vb-big-label { font-family:var(--cond); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#c9bfa8; }
.vb-big-val { font-family:var(--serif); font-size:40px; font-weight:700; line-height:1; color:#f6d98a; }
.vb-big-val small { font-family:var(--serif); font-size:18px; font-weight:500; color:#cdbf9e; margin-left:6px; }
.vb-big-sub { font-size:13px; color:#bdb29a; margin-top:2px; }
.vb-list { display:flex; flex-direction:column; gap:6px; }
.vb-row { display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--line2); border-radius:9px; padding:11px 14px; }
.vb-ic { width:34px; height:34px; flex:none; display:flex; align-items:center; justify-content:center; font-size:17px; background:var(--bg2); border:1px solid var(--line2); border-radius:8px; }
.vb-ic.sm { width:28px; height:28px; font-size:14px; }
.vb-lbl { flex:1; display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.vb-lbl b { font-size:14px; color:var(--ink); }
.vb-lbl small { font-size:12px; color:var(--muted); }
.vb-cost { text-align:right; display:flex; flex-direction:column; line-height:1.2; font-weight:700; color:var(--ink); font-size:15px; white-space:nowrap; }
.vb-cost small { font-size:11px; font-weight:500; color:var(--faint); }
.vb-glist { display:flex; flex-direction:column; gap:5px; }
.vb-grow { display:flex; align-items:center; gap:11px; background:var(--bg3); border:1px dashed var(--line3); border-radius:9px; padding:9px 13px; }
.vb-cost.sm { font-size:13.5px; }
@media (max-width:560px){ .vb-big-val { font-size:32px; } .vb-hero { padding:18px; } }

/* ---- Wizard: AI-model kiezen bij het bouwen ---- */
.modelkeuze { display:flex; gap:10px; flex-wrap:wrap; }
.mk-opt { flex:1; min-width:150px; text-align:left; background:var(--panel); border:1.5px solid var(--line3); border-radius:10px; padding:11px 14px; display:flex; flex-direction:column; gap:2px; transition:border-color .14s, box-shadow .14s; }
.mk-opt:hover { border-color:#c9c0ac; }
.mk-opt.on { border-color:var(--gold); box-shadow:0 0 0 3px var(--ring); background:#FFFFFF; }
.mk-naam { font-weight:700; color:var(--ink); font-size:14px; display:flex; align-items:center; gap:6px; }
.mk-badge { font-family:var(--cond); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#FFFFFF; background:var(--gold); border-radius:4px; padding:1px 6px; }
.mk-uit { font-size:12px; color:var(--muted); }

/* ---- Verzamellijst: "in gebruik" zetten als alles is afgevinkt ---- */
.verz-done-bar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px; padding:13px 16px; border-radius:10px; background:#fbf3dc; border:1px solid var(--gold); }
.verz-done-bar span { flex:1; min-width:200px; font-size:13.5px; color:var(--body); }
.verz-done-bar.ok { background:#eef6ee; border-color:#bcd9bc; }
.verz-done-bar .btn { flex:none; }
.verz-done-hint { margin-top:12px; padding:11px 14px; border-radius:10px; background:var(--bg2); border:1px dashed var(--line3); font-size:13px; color:var(--muted); text-align:center; }

/* ---- "gratis / geen AI" labels + AI-kostenhint op knoppen ---- */
.pa-free { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:#4c7a4a; background:#eef6ee; border:1px solid #cfe3cf; border-radius:5px; padding:2px 8px; }
.btn-cost { font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; opacity:.8; background:rgba(255,255,255,.22); border-radius:4px; padding:1px 5px; margin-left:2px; }
.btn.ghost .btn-cost { background:var(--bg2); color:var(--gold-t); }

/* ---- AI Optimized preset-box in Beheer ---- */
.optimbox { display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:linear-gradient(135deg,#fbf3dc,#fdf9ee); border:1px solid var(--gold); border-radius:12px; padding:14px 18px; margin:0 0 16px; }
.optim-txt { flex:1; min-width:220px; display:flex; flex-direction:column; gap:3px; }
.optim-txt b { font-size:15px; color:var(--ink); }
.optim-txt small { font-size:12.5px; color:var(--body); line-height:1.5; }
.optimbox .btn { flex:none; }

/* ---- Kosten-waarschuwing bij het bouwen ---- */
.bouwwaarschuw { display:flex; align-items:flex-start; gap:8px; margin-top:10px; padding:10px 13px; border-radius:9px; font-size:13px; line-height:1.45; }
.bouwwaarschuw.goed { background:#eef6ee; border:1px solid #cfe3cf; color:#3f6b45; }
.bouwwaarschuw.mid { background:#fbf3dc; border:1px solid var(--gold); color:var(--gold-t); }
.bouwwaarschuw.duur { background:#fbe9e3; border:1px solid #e2a58f; color:#a6482c; }

/* ---- Uitleg: premium hero + tabs + FAQ + woordenboek ---- */
.uit-hero { position:relative; background:var(--night); overflow:hidden; }
.uit-hero::before { content:""; position:absolute; inset:0; background:var(--hero, none) center/cover; opacity:.55; }
.uit-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(14,17,13,.95) 0%, rgba(14,17,13,.8) 52%, rgba(14,17,13,.4) 100%); }
/* Pagina-hero: maak de kaart-art een sfeer-achtergrond (blur + schaal), zodat de uitsnede niet meer uitmaakt, + subtiele gouden gloed als op de landing. */
.uit-hero.pghero::before { opacity:.5; filter:blur(7px) saturate(1.08); transform:scale(1.12); }
.uit-hero.pghero::after { background:radial-gradient(130% 120% at 88% -10%, var(--ring), transparent 52%), linear-gradient(100deg, rgba(14,17,13,.94) 0%, rgba(14,17,13,.8) 50%, rgba(14,17,13,.46) 100%); }
.uit-hero-inner { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:46px 22px 40px; color:#EAF3EE; }
.uit-eyebrow { display:flex; align-items:center; gap:9px; font-family:var(--cond); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#7BC59E; }
.uit-hero-inner h1 { font-family:var(--serif); font-size:44px; font-weight:600; letter-spacing:-.015em; line-height:1.04; margin:14px 0 0; color:#EAF3EE; }
.uit-hero-inner > p { font-size:14.5px; line-height:1.6; color:rgba(234,243,238,.8); margin:12px 0 0; max-width:60ch; }
.uit-page { padding-top:22px; }
.uitleg-tabs { display:inline-flex; gap:4px; background:var(--bg2); border:1px solid var(--line); border-radius:11px; padding:5px; margin:0 0 22px; flex-wrap:wrap; }
.ut-tab { background:transparent; border:0; color:var(--muted); padding:10px 18px; border-radius:8px; font-size:13.5px; font-weight:600; transition:background .14s, color .14s; }
.ut-tab:hover { color:var(--ink); }
.ut-tab.on { background:var(--panel); color:var(--ink); box-shadow:0 1px 4px rgba(15,23,42,.16); }
/* ---- Snelstart: gesecteerde uitleg ---- */
.u2-sec { margin:0 0 40px; }
.u2-head { margin-bottom:16px; }
.u2-eyebrow { font-family:var(--cond); font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--gold-t); }
.u2-head h2 { font-family:var(--serif); font-size:26px; font-weight:600; color:var(--ink); margin:5px 0 0; line-height:1.15; letter-spacing:-.005em; }
.u2-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.u2-step { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px 21px; box-shadow:var(--shadow); }
.u2-num { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--gold-tint); color:var(--gold-d); font-family:var(--serif); font-weight:700; font-size:17px; }
.u2-step h4 { font-family:var(--serif); font-size:18px; font-weight:600; margin:13px 0 0; color:var(--ink); }
.u2-step p { font-size:13.5px; line-height:1.55; color:var(--muted); margin:6px 0 0; text-wrap:pretty; }
.u2-feats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.u2-feat { display:flex; gap:13px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:17px 18px; box-shadow:var(--shadow); transition:transform .14s ease, box-shadow .14s ease, border-color .14s; }
.u2-feat:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--gold-tint-bd); }
.u2-ic { flex:none; width:40px; height:40px; border-radius:11px; background:var(--gold-tint); color:var(--gold-d); display:grid; place-items:center; }
.u2-feat h4 { font-family:var(--serif); font-size:16.5px; font-weight:600; margin:1px 0 0; color:var(--ink); }
.u2-feat p { font-size:13px; line-height:1.5; color:var(--muted); margin:5px 0 0; text-wrap:pretty; }
.u2-two { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.u2-card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px 22px; box-shadow:var(--shadow); }
.u2-card h4 { font-family:var(--serif); font-size:18.5px; font-weight:600; margin:0; color:var(--ink); }
.u2-card .u2-sub { font-size:13px; line-height:1.5; color:var(--muted); margin:5px 0 12px; }
.u2-legrow { display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--line2); font-size:13.5px; color:var(--body); }
.u2-legrow:first-of-type { border-top:0; }
.u2-legrow b { color:var(--ink); }
.u2-legrow .pip, .u2-legrow .owntag { flex:none; }
.u2-legtip { color:var(--muted); font-size:12.5px; line-height:1.5; }
.u2-rules { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.u2-rule { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:19px 21px; box-shadow:var(--shadow); }
.u2-rule h4 { font-family:var(--serif); font-size:18px; font-weight:600; margin:0 0 7px; color:var(--ink); }
.u2-rule p { font-size:13.5px; line-height:1.6; color:var(--body); margin:0; text-wrap:pretty; }
.u2-claude { display:flex; gap:16px; background:linear-gradient(150deg,var(--night),#184032); border:1px solid rgba(123,197,158,.22); border-radius:16px; padding:24px 26px; box-shadow:var(--shadow-lg); }
.u2-claude-ic { flex:none; }
.u2-claude h3 { font-family:var(--serif); font-size:22px; font-weight:600; color:#fff; margin:6px 0 0; }
.u2-claude p { font-size:14px; line-height:1.6; color:rgba(234,243,238,.9); margin:10px 0 0; text-wrap:pretty; }
.u2-claude b { color:#fff; }
.u2-claude .u2-claude-note { font-size:12.5px; color:rgba(234,243,238,.62); }
@media(max-width:820px){ .u2-steps, .u2-feats, .u2-rules { grid-template-columns:1fr 1fr; } .u2-two { grid-template-columns:1fr; } }
@media(max-width:560px){ .u2-steps, .u2-feats, .u2-rules { grid-template-columns:1fr; } .u2-claude { flex-direction:column; gap:10px; } }
.uit-chapter { margin-bottom:26px; }
.uit-chapter .pinfo-ch-head { margin-bottom:11px; }
.faqgroep { display:flex; flex-direction:column; gap:8px; }
.faqitem { background:var(--panel); border:1px solid var(--line2); border-radius:12px; overflow:hidden; transition:box-shadow .14s; }
.faqitem[open] { box-shadow:0 3px 14px rgba(15,23,42,.08); }
.faqitem summary { cursor:pointer; padding:15px 18px; font-weight:600; color:var(--ink); font-size:14.5px; list-style:none; display:flex; align-items:center; gap:11px; }
.faqitem summary::-webkit-details-marker { display:none; }
.faqitem summary::before { content:"+"; color:var(--gold); font-weight:700; font-size:18px; width:16px; flex:none; text-align:center; }
.faqitem[open] summary::before { content:"–"; }
.faqitem[open] summary { border-bottom:1px solid var(--line2); }
.faqa { padding:14px 18px 16px 45px; color:var(--body); font-size:14px; line-height:1.65; }
.woordzoek { max-width:440px; margin:0 0 8px; }
.woordtel { font-size:12.5px; color:var(--muted); margin:0 0 14px; }
.woordlijst { background:var(--panel); border:1px solid var(--line2); border-radius:14px; overflow:hidden; }
.woordrij { display:grid; grid-template-columns:200px 1fr; gap:16px; padding:13px 18px; border-bottom:1px solid var(--line2); align-items:baseline; }
.woordrij:last-child { border-bottom:0; }
.woordrij:hover { background:var(--bg3); }
.woordrij b { font-family:var(--serif); font-size:17px; color:var(--ink); font-weight:600; }
.woordrij span { color:var(--body); font-size:13.5px; line-height:1.55; }
@media (max-width:560px){ .uit-hero-inner h1 { font-size:31px; } .uit-hero-inner { padding:34px 20px 30px; } .woordrij { grid-template-columns:1fr; gap:3px; } .faqa { padding-left:18px; } }

/* ---- Pagina-info: "i"-knop + groot uitlegpaneel (design: mockup) ---- */
.titlerow { display:flex; align-items:center; gap:12px; }
.infobtn { flex:none; width:26px; height:26px; border-radius:50%; border:1.5px solid var(--gold); background:var(--panel); color:var(--gold-d); font-family:var(--serif); font-style:italic; font-weight:700; font-size:15px; line-height:1; display:inline-flex; align-items:center; justify-content:center; transition:background .14s, transform .14s; vertical-align:middle; }
.infobtn:hover { background:var(--gold); color:#FFFFFF; transform:scale(1.08); }
.infobtn.light { width:23px; height:23px; font-size:13px; border-color:rgba(123,197,158,.65); background:rgba(255,255,255,.08); color:var(--gold-tint); margin-left:2px; }
.infobtn.light:hover { background:#7BC59E; color:#0F172A; border-color:var(--accent-hi); }
.pinfo-ov { position:fixed; inset:0; z-index:120; background:rgba(24,20,14,.62); backdrop-filter:blur(3px); display:flex; align-items:flex-start; justify-content:center; padding:40px 18px; overflow:auto; animation:pinfoIn .18s ease; }
@keyframes pinfoIn { from { opacity:0 } to { opacity:1 } }
.pinfo-card { width:100%; max-width:760px; background:var(--bg2); border:1px solid var(--line3); border-radius:20px; overflow:hidden; box-shadow:0 40px 90px rgba(14,17,13,.5); }
.pinfo-hero { position:relative; min-height:200px; background:var(--night); display:flex; flex-direction:column; justify-content:flex-end; padding:26px 30px; color:#EAF3EE; overflow:hidden; }
.pinfo-hero-bg { position:absolute; inset:0; background:var(--hero) center/cover; }
.pinfo-hero::before { content:""; position:absolute; inset:0; background:linear-gradient(96deg, rgba(14,17,13,.95) 0%, rgba(14,17,13,.82) 44%, rgba(14,17,13,.3) 90%); }
.pinfo-hero > * { position:relative; z-index:1; }
.pinfo-eyebrow { display:flex; align-items:center; gap:9px; font-family:var(--cond); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:#7BC59E; }
.pinfo-diamond { width:12px; height:12px; background:var(--gold); transform:rotate(45deg); border-radius:2px; flex:none; }
.pinfo-hero h2 { font-family:var(--serif); font-size:38px; font-weight:600; letter-spacing:-.01em; line-height:1.05; margin:12px 0 0; color:#EAF3EE; }
.pinfo-hero p { font-size:13.5px; line-height:1.6; color:rgba(234,243,238,.8); margin:10px 0 0; max-width:54ch; }
.pinfo-x { position:absolute; top:16px; right:16px; z-index:2; width:32px; height:32px; border-radius:50%; background:rgba(234,243,238,.12); border:1px solid rgba(234,243,238,.24); color:#EAF3EE; font-size:14px; display:grid; place-items:center; cursor:pointer; transition:background .14s; }
.pinfo-x:hover { background:rgba(234,243,238,.24); }
.pinfo-body { padding:28px 30px 30px; display:flex; flex-direction:column; gap:28px; }
.pinfo-ch-head { display:flex; align-items:baseline; gap:12px; margin-bottom:2px; }
.pinfo-ch-t { font-family:var(--serif); font-size:21px; font-weight:600; color:var(--ink); }
.pinfo-ch-h { font-size:12px; color:var(--faint); white-space:nowrap; }
.pinfo-ch-line { flex:1; height:1px; background:var(--line3); }
.pinfo-step { display:flex; gap:18px; padding:15px 2px; border-bottom:1px solid var(--line2); }
.pinfo-step:last-child { border-bottom:0; }
.pinfo-n { width:34px; flex:none; text-align:right; font-family:var(--serif); font-size:20px; font-weight:500; color:var(--gold); line-height:1.35; }
.pinfo-s-txt { flex:1; min-width:0; }
.pinfo-s-t { font-size:14px; font-weight:600; line-height:1.35; color:var(--ink); }
.pinfo-s-b { font-size:13px; line-height:1.6; color:var(--muted); margin-top:5px; }
.pinfo-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.pinfo-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:7px; font-size:12px; background:var(--bg3); border:1px solid var(--line2); color:var(--body); white-space:nowrap; }
.pinfo-dot { width:10px; height:10px; border-radius:50%; border:1px solid rgba(15,23,42,.18); flex:none; }
.pinfo-claude { position:relative; background:linear-gradient(155deg,var(--hero-a),var(--hero-b)); border:1px solid rgba(123,197,158,.28); border-radius:16px; padding:22px 24px; overflow:hidden; }
.pinfo-claude-glow { position:absolute; right:-40px; top:-50px; width:170px; height:170px; border-radius:50%; background:radial-gradient(circle, rgba(46,125,90,.18), transparent 70%); pointer-events:none; }
.pinfo-claude > .pinfo-eyebrow, .pinfo-claude-q, .pinfo-claude-b { position:relative; }
.pinfo-claude-q { font-family:var(--serif); font-size:20px; line-height:1.3; color:#EAF3EE; margin-top:12px; max-width:52ch; }
.pinfo-claude-b { font-size:12.5px; line-height:1.6; color:rgba(234,243,238,.7); margin-top:8px; max-width:56ch; }
.pinfo-foot { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.pinfo-close-btn { font-size:13.5px; font-weight:600; color:#FFFFFF; background:#1E4D3A; border:0; border-radius:9px; padding:12px 20px; cursor:pointer; white-space:nowrap; transition:background .14s; }
.pinfo-close-btn:hover { background:#163B2D; }
.pinfo-alllink { font-size:12.5px; font-weight:600; color:var(--gold-t); white-space:nowrap; }
.pinfo-foot-hint { margin-left:auto; font-size:12px; color:var(--faint); }
.pinfo-foot-hint b { color:var(--gold-d); font-style:italic; }
@media (max-width:560px){ .pinfo-hero h2 { font-size:30px; } .pinfo-body { padding:20px; gap:24px; } .pinfo-foot-hint { margin-left:0; } }

/* ---- Manaforge-logo (header + login) ---- */
.brand-logo { height:50px; width:auto; display:block; margin:0 -12px 0 -8px; }
.loginbrand { justify-content:center; }
.loginbrand img { height:132px; width:auto; display:block; }
.loginbrand .brand-mark { width:46px; height:46px; border-radius:12px; font-size:27px; }
.loginbrand .word { font-size:27px; }
@media (max-width:640px){ .brand-logo { height:40px; margin:0 -8px; } .loginbrand img { height:112px; } }

/* ---- Gedeelde pagina-hero (donkere header bovenaan elke pagina) — egale achtergrond, geen afbeelding ---- */
.uit-hero.pghero { background:#16190f; }
.uit-hero.pghero::before { display:none; }
.uit-hero.pghero::after { background:linear-gradient(100deg,#14170f 0%,#191d13 100%); }
.uit-hero.pghero .uit-hero-inner { padding:40px 28px 34px; }
.pghero-acts { position:absolute; top:38px; right:28px; display:flex; gap:10px; flex-wrap:wrap; z-index:2; }
.btn.ghost-dark { background:rgba(255,255,255,.07); color:#EAF3EE; border:1px solid rgba(234,243,238,.28); box-shadow:none; font-weight:500; }
.btn.ghost-dark:hover { background:rgba(255,255,255,.15); border-color:rgba(234,243,238,.5); color:#fff; }
.pghero-stats { display:flex; gap:40px; flex-wrap:wrap; margin-top:22px; padding-top:18px; border-top:1px solid rgba(234,243,238,.16); }
.pghero-stat b { font-family:var(--serif); font-size:26px; font-weight:600; color:#EAF3EE; line-height:1; display:block; }
.pghero-stat span { font-family:var(--cond); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:#c9bfa8; margin-top:5px; display:block; }
@media (max-width:640px){ .pghero-acts { position:static; margin-bottom:14px; } .uit-hero.pghero .uit-hero-inner { padding:28px 18px 24px; } }

/* ---- Kaart zoeken & toevoegen — dialoog (design v2) ---- */
.sheet.scryd-sheet { display:block; width:760px; padding:0; gap:0; overflow:hidden; }
.scryd-head { position:relative; background:var(--surface-sunk); border-bottom:1px solid var(--border); padding:26px 28px 22px; }
.scryd-kicker { display:flex; align-items:center; gap:10px; font-family:var(--cond); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-label); }
.scryd-head h2 { font-family:var(--serif); font-size:30px; line-height:1.1; font-weight:600; margin:11px 0 0; color:var(--ink); }
.scryd-head p { font-size:13px; line-height:1.6; color:var(--muted); margin:8px 0 0; max-width:60ch; text-wrap:pretty; }
.scryd-x { position:absolute; top:22px; right:22px; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--surface); border:1px solid var(--border); color:var(--muted); font-size:14px; cursor:pointer; }
.scryd-x:hover { background:var(--bg); color:var(--ink); }
.scryd-body { padding:18px 28px 4px; }
.scryd-search { display:flex; align-items:center; gap:11px; background:var(--surface-soft); border:1px solid var(--gold-tint-bd); border-radius:11px; padding:12px 15px; box-shadow:0 0 0 3px var(--ring); }
.scryd-search .mag { color:#B3AA96; font-size:14px; }
.scryd-search input { flex:1; min-width:0; background:transparent; border:0; outline:0; font:inherit; font-size:14.5px; color:var(--ink); }
.scryd-clear { background:none; border:0; font-size:12px; color:var(--todo); font-weight:600; cursor:pointer; white-space:nowrap; }
.scryd-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); padding:13px 2px 0; min-height:16px; }
.scryd-count b, .scryd-count { color:var(--ink); font-weight:600; }
.scryd-count { color:var(--muted); font-weight:400; }
.scryd-sep { color:#DDD4BF; }
.scryd-list { max-height:52vh; overflow:auto; padding:6px 2px 4px; }
/* Zoekfilters + galerij */
.scryd-filters { display:flex; flex-wrap:wrap; align-items:center; gap:7px; padding:12px 2px 2px; }
.scryd-fsep { width:1px; height:20px; background:var(--line); }
.scryd-fsp { flex:1 1 20px; }
.scryd-fchip { display:inline-flex; align-items:center; gap:5px; background:var(--panel); border:1px solid var(--line3); border-radius:8px; padding:6px 11px; font-size:12.5px; font-weight:600; color:var(--body); cursor:pointer; white-space:nowrap; }
.scryd-fchip.on { background:var(--gold-tint); border-color:var(--gold-tint-bd); color:var(--gold-t); }
.scryd-fpips { gap:5px; }
.scryd-fpips .colbtn { width:24px; height:24px; border-width:2px; }
.scryd-fmv { display:flex; gap:3px; }
.scryd-mvchip { width:27px; height:28px; border:1px solid var(--line3); background:var(--panel); border-radius:7px; font-size:12px; font-weight:600; color:var(--muted); cursor:pointer; }
.scryd-mvchip.on { background:var(--gold-tint); border-color:var(--gold-tint-bd); color:var(--gold-t); }
.scryd-dd { min-width:128px; }
.scryd-dd-set { min-width:150px; }
.scryd-frar { display:flex; gap:4px; }
.scryd-rchip { display:inline-flex; align-items:center; gap:6px; height:29px; padding:0 11px; border:1px solid var(--line3); background:var(--panel); border-radius:7px; font-size:12px; font-weight:600; color:var(--body); cursor:pointer; white-space:nowrap; }
.scryd-rgem { width:10px; height:10px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.scryd-rchip.on { border-color:var(--rc); color:var(--rc); box-shadow:inset 0 0 0 1px var(--rc); }
.scryd-dd-sort { min-width:158px; }
.scryd-fwis { background:none; border:0; color:var(--todo); font-size:12px; font-weight:600; cursor:pointer; padding:4px 6px; }
.scryd-gprijs { position:absolute; bottom:6px; left:6px; background:rgba(20,17,12,.82); color:#fff; font-size:11px; font-weight:600; padding:2px 7px; border-radius:6px; font-variant-numeric:tabular-nums; }
.scryd-pag { display:flex; align-items:center; justify-content:center; gap:16px; padding:10px 24px; border-top:1px solid var(--line2); }
.scryd-pag:empty { display:none; }
.scryd-pbtn { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:7px 15px; font:inherit; font-size:12.5px; font-weight:600; color:var(--body); cursor:pointer; }
.scryd-pbtn:hover:not(:disabled) { border-color:var(--gold); color:var(--ink); }
.scryd-pbtn:disabled { opacity:.4; cursor:default; }
.scryd-pnum { font-size:12.5px; color:var(--muted); }
.scryd-pnum b { color:var(--ink); }
.scryd-vtoggle { display:flex; gap:2px; background:var(--bg2); border:1px solid var(--line); border-radius:8px; padding:3px; }
.scryd-vtoggle button { background:transparent; border:0; color:var(--muted); border-radius:5px; padding:6px 12px; font-size:12.5px; font-weight:600; cursor:pointer; }
.scryd-vtoggle button.on { background:var(--panel); color:var(--ink); box-shadow:0 1px 3px rgba(15,23,42,.14); }
.scryd-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:11px; align-content:start; }
/* Galerij-modus: (bijna) volledig scherm met grote, leesbare kaarten */
.sheet.scryd-sheet.scryd-full { width:96vw; max-width:1500px; height:92vh; max-height:92vh; display:flex; flex-direction:column; }
.scryd-full .scryd-head { flex:none; }
.scryd-full .scryd-body { flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; }
.scryd-full .scryd-list { max-height:none; overflow:visible; flex:1; }
.scryd-full .scryd-pag { flex:none; }
.scryd-full .scryd-foot { flex:none; }
.scryd-full .scryd-gallery { grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:15px; }
@media(max-width:640px){ .scryd-full .scryd-gallery { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; } }
.scryd-gcard { position:relative; aspect-ratio:488/680; border-radius:9px; overflow:hidden; border:1px solid var(--line2); background:#16211C; cursor:pointer; padding:0; transition:transform .12s, box-shadow .14s; }
.scryd-gcard:hover { transform:translateY(-3px); box-shadow:0 10px 22px rgba(40,30,10,.28); }
.scryd-gcard img { width:100%; height:100%; object-fit:cover; display:block; }
.scryd-gph { display:none; width:100%; height:100%; align-items:center; justify-content:center; text-align:center; padding:12px; box-sizing:border-box; font-family:var(--serif); font-size:13px; color:rgba(240,235,220,.6); }
.scryd-gcard.heb { border-color:var(--ok); }
.scryd-gtag { position:absolute; top:7px; right:7px; background:var(--ok); color:#fff; font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px; }
@media(max-width:640px){ .scryd-gallery { grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px; } .scryd-dd, .scryd-dd-set { min-width:118px; flex:1; } }
.scryd-row { display:flex; align-items:center; gap:15px; padding:12px 10px; margin:0 -10px; border-radius:9px; border-bottom:1px solid var(--border-inner); cursor:pointer; transition:background .12s; }
.scryd-row:hover { background:var(--surface-sunk); }
.scryd-row:last-child { border-bottom:0; }
.scryd-thumb { position:relative; width:44px; height:60px; border-radius:7px; overflow:hidden; flex:none; background:linear-gradient(150deg,var(--art,#3a3a32),#171512); }
.scryd-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.scryd-rmain { flex:1; min-width:0; }
.scryd-rname { display:flex; align-items:center; gap:9px; min-width:0; }
.scryd-rname .nm { font-family:var(--serif); font-size:17px; font-weight:600; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink); }
.scryd-pips { display:flex; gap:3px; flex:none; }
.scryd-pip { width:12px; height:12px; border-radius:50%; border:1px solid rgba(15,23,42,.18); }
.scryd-rmeta { display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--text-label); margin-top:4px; min-width:0; }
.scryd-rmeta .tp { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scryd-rmeta .pr { font-variant-numeric:tabular-nums; color:var(--muted); flex:none; }
.scryd-owned { font-size:12px; font-weight:600; color:var(--ok); white-space:nowrap; flex:none; }
.scryd-owned.added { background:var(--ok-bg); border:1px solid #CDE0C8; border-radius:8px; padding:7px 12px; }
.scryd-add { font-size:12.5px; font-weight:600; color:var(--gold-ink); background:var(--gold-tint); border:1px solid var(--gold-tint-bd); border-radius:8px; padding:8px 13px; cursor:pointer; white-space:nowrap; flex:none; }
.scryd-add:hover { background:#B7E3CE; }
.scryd-foot { display:flex; align-items:center; gap:14px; padding:16px 28px 22px; flex-wrap:wrap; border-top:1px solid var(--border-inner); }
.scryd-foot-txt { flex:1; min-width:220px; font-size:12px; line-height:1.6; color:var(--muted); text-wrap:pretty; }
.scryd-foot-txt b { color:var(--ink); font-weight:600; }
@media(max-width:640px){ .sheet.scryd-sheet { width:100%; } .scryd-head, .scryd-body, .scryd-foot { padding-left:18px; padding-right:18px; } }

/* ---- Snel toevoegen ---- */
.snel-tabs { display:flex; gap:26px; padding:14px 28px 0; border-bottom:1px solid var(--border); }
.snel-tab { background:transparent; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; padding:6px 2px 12px; font:inherit; font-size:14px; font-weight:600; color:var(--muted); cursor:pointer; transition:.14s; }
.snel-tab:hover { color:var(--ink); }
.snel-tab.on { color:var(--ink); border-bottom-color:var(--gold); }
.snel-row { display:flex; align-items:stretch; gap:10px; }
.snel-qty { display:flex; align-items:center; gap:2px; background:var(--surface-soft); border:1px solid var(--border); border-radius:11px; padding:0 4px; }
.snel-qty #snelQ { min-width:26px; text-align:center; font-family:var(--serif); font-size:18px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.snel-qbtn { width:32px; height:40px; border:0; background:transparent; font-size:20px; line-height:1; color:var(--muted); cursor:pointer; border-radius:8px; }
.snel-qbtn:hover { background:var(--gold-tint); color:var(--ink); }
.snel-inputwrap { position:relative; flex:1; display:flex; align-items:center; gap:11px; background:var(--surface-soft); border:1px solid var(--gold-tint-bd); border-radius:11px; padding:12px 15px; box-shadow:0 0 0 3px var(--ring); }
.snel-inputwrap .mag { color:#B3AA96; font-size:14px; }
.snel-inputwrap input { flex:1; min-width:0; background:transparent; border:0; outline:0; font:inherit; font-size:14.5px; color:var(--ink); }
.snel-enter { flex:none; font-family:var(--cond); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.snel-results { margin:12px 0 0; display:flex; flex-direction:column; gap:6px; max-height:300px; overflow-y:auto; }
.snel-searching { padding:14px 4px; color:var(--muted); font-size:13px; }
.snelr { display:flex; align-items:center; gap:13px; padding:9px 11px; border:1px solid transparent; border-radius:12px; cursor:pointer; transition:.12s; }
.snelr:hover { background:var(--surface-soft); }
.snelr.sel { background:var(--gold-tint); border-color:var(--gold-tint-bd); }
.snelr-thumb { width:46px; height:46px; flex:none; border-radius:9px; overflow:hidden; background:linear-gradient(135deg,var(--art,#8a7a5a),rgba(20,16,8,.55)); box-shadow:inset 0 0 0 1px rgba(20,16,8,.12); }
.snelr-thumb img { width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.snelr-main { flex:1; min-width:0; }
.snelr-name { display:flex; align-items:center; gap:9px; font-family:var(--serif); font-size:16px; font-weight:600; color:var(--ink); line-height:1.2; }
.snelr-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.snelr-heb { flex:none; font-family:var(--cond); font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:#2f6b3f; background:rgba(70,150,90,.13); border:1px solid rgba(70,150,90,.3); border-radius:20px; padding:2px 8px; }
.snelr-meta { font-size:12.5px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.snelr-add { flex:none; background:var(--gold-tint); border:1px solid var(--gold-tint-bd); color:var(--ink); font:inherit; font-size:13px; font-weight:600; border-radius:9px; padding:8px 14px; cursor:pointer; transition:.12s; }
.snelr-add:hover { background:var(--gold); color:#3a2c10; }
.snel-hint { font-size:12px; color:var(--muted); margin:11px 2px 0; line-height:1.5; }
.snel-hint b { color:var(--ink); font-weight:600; }
.snel-staged { margin:16px 0 4px; padding-top:15px; border-top:1px solid var(--border-inner); }
.snel-staged-head { display:flex; align-items:center; gap:11px; margin-bottom:11px; }
.snel-staged-t { font-family:var(--cond); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); }
.snel-staged-count { font-size:11.5px; color:var(--ink); background:var(--surface-soft); border:1px solid var(--border); border-radius:20px; padding:2px 10px; }
.snel-undolast { margin-left:auto; background:0; border:0; font:inherit; font-size:12.5px; color:var(--gold-ink,#8a6516); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.snel-undolast:hover { color:var(--ink); }
.snel-empty { padding:14px 4px; color:var(--faint); font-size:13px; }
.snel-chips { display:flex; flex-wrap:wrap; gap:8px; }
.snel-chip { display:inline-flex; align-items:center; gap:8px; background:var(--surface-soft); border:1px solid var(--border); border-radius:22px; padding:6px 8px 6px 13px; font-size:13.5px; color:var(--ink); }
.snel-chip b { font-weight:600; color:var(--gold-ink,#8a6516); font-variant-numeric:tabular-nums; }
.snel-chip-x { width:20px; height:20px; border:0; background:rgba(20,16,8,.06); color:var(--muted); font-size:11px; line-height:1; cursor:pointer; border-radius:50%; flex:none; }
.snel-chip-x:hover { background:rgba(180,60,50,.14); color:#b43c32; }
.snel-plakwrap textarea { width:100%; min-height:150px; resize:vertical; background:var(--surface-soft); border:1px solid var(--border); border-radius:11px; padding:13px 15px; font:inherit; font-size:14px; line-height:1.6; color:var(--ink); outline:0; }
.snel-plakwrap textarea:focus { border-color:var(--gold-tint-bd); box-shadow:0 0 0 3px var(--ring); }
.snel-plakwrap .btnrow { margin:12px 0 0; }
.snel-foot { justify-content:flex-end; }
.snel-foot .scryd-foot-txt { margin-right:auto; }
.snel-succes { display:flex; align-items:center; gap:15px; padding:8px 0 4px; }
.snel-succes-ic { width:46px; height:46px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(70,150,90,.14); color:#2f6b3f; font-size:24px; font-weight:700; }
.snel-succes-tel { font-size:15px; color:var(--ink); }
.snel-succes-tel b { font-family:var(--serif); font-size:20px; font-weight:600; }
.snel-ng { font-size:13px; color:var(--body); background:var(--surface-soft); border:1px solid var(--border); border-radius:10px; padding:11px 14px; margin-top:14px; line-height:1.6; }
.snel-ng b { color:var(--ink); }
.snel-nghint { color:var(--muted); font-size:12px; }
/* ---- Volledig-scherm camera-scanner ---- */
.scanfull { position:fixed; inset:0; z-index:1000; background:#000; overflow:hidden; }
.sf-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
.sf-frame { position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%); width:min(78vw,340px); aspect-ratio:63/88; max-height:72vh; border:2px dashed rgba(255,255,255,.85); border-radius:14px; box-shadow:0 0 0 100vmax rgba(0,0,0,.45); pointer-events:none; }
.sf-frame-lbl { position:absolute; left:-2px; top:-2px; width:70%; height:32px; background:rgba(46,125,90,.5); border:2px solid var(--gold); border-radius:12px 0 12px 0; display:flex; align-items:center; justify-content:center; font-family:var(--cond); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.sf-scanline { position:absolute; left:6%; right:6%; top:8%; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); box-shadow:0 0 10px 1px rgba(46,125,90,.9); border-radius:2px; animation:scanmove 2.4s ease-in-out infinite; }
@keyframes scanmove { 0%{top:8%;opacity:.35} 50%{top:90%;opacity:.95} 100%{top:8%;opacity:.35} }
.sf-top { position:absolute; z-index:5; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:14px 16px; padding-top:max(14px,env(safe-area-inset-top)); background:linear-gradient(180deg,rgba(0,0,0,.55),transparent); }
.sf-title { color:#fff; font-family:var(--serif); font-size:18px; font-weight:600; }
.sf-x { background:rgba(255,255,255,.18); border:0; color:#fff; font:inherit; font-size:14px; font-weight:600; padding:8px 15px; border-radius:20px; cursor:pointer; }
.sf-status { position:absolute; z-index:5; left:50%; transform:translateX(-50%); bottom:96px; max-width:86vw; text-align:center; color:#fff; font-size:13.5px; font-weight:600; background:rgba(18,14,8,.72); border-radius:22px; padding:9px 16px; }
.sf-status.ok { background:rgba(58,140,80,.95); }
.sf-bottom { position:absolute; z-index:5; left:0; right:0; bottom:0; display:flex; align-items:center; gap:12px; padding:16px; padding-bottom:max(16px,env(safe-area-inset-bottom)); background:linear-gradient(0deg,rgba(0,0,0,.6),transparent); }
.sf-count { flex:1; background:var(--gold); border:0; color:#2a2008; font:inherit; font-size:15px; font-weight:600; padding:14px 16px; border-radius:14px; cursor:pointer; }
.sf-count-n { font-family:var(--serif); font-size:19px; font-weight:700; margin-right:4px; }
.sf-upload { flex:none; width:52px; height:52px; border:0; background:rgba(255,255,255,.18); color:#fff; font-size:22px; border-radius:14px; cursor:pointer; }
.sf-sheet { position:absolute; z-index:6; left:0; right:0; bottom:0; max-height:82vh; background:var(--surface); border-radius:20px 20px 0 0; box-shadow:0 -18px 50px rgba(0,0,0,.4); transform:translateY(100%); transition:transform .28s ease; display:flex; flex-direction:column; padding-bottom:max(10px,env(safe-area-inset-bottom)); }
.sf-sheet.open { transform:translateY(0); }
.sf-grip { align-self:center; width:44px; height:5px; border:0; background:var(--border); border-radius:3px; margin:10px 0 4px; cursor:pointer; }
.sf-sheet-head { display:flex; align-items:baseline; justify-content:space-between; padding:6px 20px 10px; border-bottom:1px solid var(--border-inner); }
.sf-sheet-head b { font-family:var(--serif); font-size:19px; color:var(--ink); }
.sf-sheet-sum { font-size:13px; color:var(--muted); }
.sf-rows { flex:1; overflow-y:auto; padding:6px 12px; min-height:60px; }
.sf-empty { padding:26px; text-align:center; color:var(--faint); font-size:14px; }
.sf-row { display:flex; align-items:center; gap:12px; padding:9px 8px; border-bottom:1px solid var(--border-inner); }
.sf-row-thumb { width:40px; height:40px; flex:none; border-radius:8px; overflow:hidden; background:linear-gradient(135deg,var(--art,#8a7a5a),rgba(20,16,8,.55)); }
.sf-row-thumb img { width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.sf-row-naam { flex:1; min-width:0; font-size:14.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sf-row-naam b { color:var(--gold-ink,#8a6516); }
.sf-row-prijs { flex:none; font-size:13.5px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.sf-row-x { width:26px; height:26px; flex:none; border:0; background:rgba(20,16,8,.06); color:var(--muted); font-size:12px; cursor:pointer; border-radius:50%; }
.sf-row-x:hover { background:rgba(180,60,50,.14); color:#b43c32; }
.sf-sheet-foot { display:flex; gap:10px; padding:12px 20px 14px; border-top:1px solid var(--border-inner); }
.sf-sheet-foot .btn { flex:1; }
/* Opslaan-overlay (binnen de scanner) */
.scan-saveov { position:absolute; inset:0; z-index:20; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:22px; }
.scan-savebox { width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px 24px; box-shadow:0 24px 60px rgba(0,0,0,.4); }
.scan-savebox h3 { font-family:var(--serif); font-size:22px; font-weight:600; color:var(--ink); margin:0 0 14px; }
.scan-save-lbl { display:block; font-family:var(--cond); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.scan-save-input { width:100%; background:var(--surface-soft); border:1px solid var(--gold-tint-bd); border-radius:11px; padding:12px 14px; font:inherit; font-size:15px; color:var(--ink); outline:0; }
.scan-save-sum { font-size:13px; color:var(--muted); margin:12px 0 16px; }
.scan-savebox .btnrow { display:flex; justify-content:flex-end; gap:9px; }
/* ---- Scannen-overzicht ---- */
.btn.big { font-size:16px; padding:15px 26px; }
.scov-hero { position:relative; background:#141812; overflow:hidden; }
.scov-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(100deg,rgba(14,17,13,.96),rgba(14,17,13,.7) 55%,rgba(14,17,13,.4)); }
.scov-hero-in { position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:42px 32px 44px; }
.scov-kicker { display:flex; align-items:center; gap:10px; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.scov-diamond { width:11px; height:11px; background:var(--gold); transform:rotate(45deg); border-radius:2px; flex:none; }
/* Merk-scan-icoon (i.p.v. de 📷-emoji). Op donkere/goud vlakken op een licht chip-tegeltje. */
.scan-ico { display:inline-flex; align-items:center; justify-content:center; vertical-align:-0.28em; }
.scan-ico img { display:block; width:1.3em; height:1.3em; }
.scan-ico.chip { background:#F1F5F9; border:1px solid var(--gold-tint-bd); border-radius:7px; padding:3px 4px; }
.scov-icon { width:104px; height:104px; display:flex; align-items:center; justify-content:center; background:#F1F5F9; border:1px solid rgba(46,125,90,.45); border-radius:22px; margin:0 0 18px; box-shadow:0 14px 34px rgba(0,0,0,.34); }
.scov-icon img { width:72px; height:72px; }
@media(max-width:640px){ .scov-icon { width:84px; height:84px; border-radius:19px; } .scov-icon img { width:58px; height:58px; } }
.scov-title { font-family:var(--serif); font-size:44px; line-height:1.05; font-weight:600; color:#F1F5F9; margin:13px 0 0; }
.scov-sub { font-size:14px; line-height:1.65; color:#BDB7A6; margin:11px 0 0; max-width:52ch; text-wrap:pretty; }
.scov-cta { display:flex; align-items:center; gap:16px; margin-top:26px; flex-wrap:wrap; }
.scov-hint2 { font-size:12px; color:#8E8877; max-width:34ch; line-height:1.5; }
.scov-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; margin-top:24px; }
.scov-step { padding:19px 22px; border-right:1px solid var(--border-inner); }
.scov-step-h { display:flex; align-items:center; gap:10px; }
.scov-step-n { width:22px; height:22px; border-radius:50%; background:var(--gold-tint); border:1px solid var(--gold-tint-bd); display:grid; place-items:center; font-size:11.5px; font-weight:700; color:var(--gold-ink,#6B4E1E); flex:none; }
.scov-step-t { font-family:var(--serif); font-size:18px; font-weight:600; color:var(--ink); }
.scov-step-b { font-size:12.5px; line-height:1.6; color:var(--muted); margin-top:9px; text-wrap:pretty; }
.scov-vhead { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:30px; }
.scov-vhead-t { font-family:var(--serif); font-size:26px; font-weight:600; color:var(--ink); }
.scov-vhead-s { font-size:12.5px; color:var(--muted); margin-top:6px; }
.scov-totals { display:flex; gap:28px; flex-wrap:wrap; }
.scov-tot-v { font-family:var(--serif); font-size:23px; line-height:1; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.scov-tot-l { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-top:6px; }
.scov-div { height:1px; background:var(--border); margin:16px 0 18px; }
.scov-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(276px,1fr)); gap:16px; }
.scov-card { text-align:left; background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; cursor:pointer; padding:0; transition:.14s; }
.scov-card:hover { border-color:var(--gold-tint-bd); box-shadow:0 10px 26px rgba(20,16,8,.1); }
.scov-card-thumbs { display:flex; gap:3px; padding:12px 12px 0; }
.scov-thumb { flex:1; min-width:0; height:96px; border-radius:7px; overflow:hidden; background:linear-gradient(150deg,var(--art,#8a7a5a),rgba(20,16,8,.6)); }
.scov-thumb img { width:100%; height:100%; object-fit:cover; object-position:center 18%; }
.scov-thumb.rest { display:grid; place-items:center; background:var(--surface-soft); border:1px dashed var(--border); color:var(--faint); font-size:12px; font-weight:600; }
.scov-card-body { padding:14px 16px 16px; }
.scov-card-top { display:flex; align-items:baseline; gap:10px; }
.scov-card-naam { font-family:var(--serif); font-size:21px; font-weight:600; color:var(--ink); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scov-tag { margin-left:auto; font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; border-radius:5px; padding:3px 7px; white-space:nowrap; flex:none; }
.scov-tag.nieuw { color:var(--gold-ink,#6B4E1E); background:var(--gold-tint); }
.scov-tag.klaar { color:#3F5B3C; background:#E4F0E1; }
.scov-card-date { font-size:12px; color:var(--faint); margin-top:6px; }
.scov-card-foot { display:flex; gap:22px; margin-top:14px; padding-top:13px; border-top:1px solid var(--border-inner); align-items:flex-end; }
.scov-cf-v { font-size:15px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.scov-cf-l { font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-top:4px; }
.scov-open { margin-left:auto; font-size:12.5px; font-weight:600; color:var(--gold-ink,#6B4E1E); white-space:nowrap; }
.scov-newtile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; min-height:200px; border:1.5px dashed var(--border); border-radius:16px; background:var(--surface-soft); cursor:pointer; padding:24px; transition:.14s; }
.scov-newtile:hover { border-color:var(--gold); background:var(--gold-tint); }
.scov-newtile-ic { width:34px; height:34px; border-radius:50%; background:var(--gold-tint); border:1px solid var(--gold-tint-bd); display:grid; place-items:center; color:var(--gold-ink,#6B4E1E); font-size:17px; }
.scov-newtile-t { font-size:13.5px; font-weight:600; color:var(--ink); }
.scov-newtile-s { font-size:11.5px; color:var(--faint); text-align:center; max-width:24ch; line-height:1.4; }
@media(max-width:640px){ .scov-title { font-size:34px; } .scov-hero-in { padding:32px 18px 34px; } }
/* ---- Scanresultaat / verzameling-detail ---- */
.scr-head { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; flex-wrap:wrap; margin-top:14px; }
.scr-kicker { display:flex; align-items:center; gap:10px; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.scr-title-row { display:flex; align-items:baseline; gap:12px; margin-top:9px; flex-wrap:wrap; }
.scr-title { font-family:var(--serif); font-size:38px; line-height:1; font-weight:600; color:var(--ink); margin:0; }
.scr-rename { background:0; border:0; font:inherit; font-size:12.5px; font-weight:600; color:var(--gold-ink,#6B4E1E); cursor:pointer; }
.scr-date { font-size:13px; color:var(--muted); margin-top:8px; }
.scr-stats { display:flex; gap:30px; flex-wrap:wrap; }
.scr-stat-v { font-family:var(--serif); font-size:26px; line-height:1; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.scr-stat-v.dim { color:var(--faint); }
.scr-stat-l { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-top:7px; }
.scr-cols { display:grid; grid-template-columns:minmax(0,1fr) 296px; gap:26px; align-items:start; margin-top:20px; }
.scr-bar { display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--border); border-radius:13px; padding:10px 12px 10px 14px; flex-wrap:wrap; }
.scr-bar.on { background:var(--gold-tint); border-color:var(--gold-tint-bd); }
.scr-allbox { width:20px; height:20px; border-radius:5px; flex:none; display:grid; place-items:center; background:var(--surface); border:1.5px solid var(--border); color:#10251B; font-size:11px; font-weight:700; cursor:pointer; }
.scr-allbox.on { background:var(--gold); border-color:var(--gold); }
.scr-barlbl { font-size:13.5px; color:var(--ink); white-space:nowrap; }
.scr-alllink { background:0; border:0; font:inherit; font-size:12.5px; font-weight:600; color:var(--gold-ink,#6B4E1E); cursor:pointer; white-space:nowrap; }
.scr-barright { margin-left:auto; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.scr-viewtoggle { display:flex; gap:2px; background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:3px; }
.scr-viewtoggle button { padding:6px 12px; border:0; border-radius:6px; font:inherit; font-size:12.5px; background:transparent; color:var(--muted); cursor:pointer; }
.scr-viewtoggle button.on { background:var(--gold-tint); color:var(--ink); font-weight:600; }
.btn.gold.sm:disabled { background:var(--surface-soft); color:var(--faint); border-color:var(--border); cursor:default; }
.scr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:16px; margin-top:18px; }
.scr-tile { position:relative; background:var(--surface); border:1.5px solid var(--border); border-radius:15px; overflow:hidden; cursor:pointer; transition:.14s; }
.scr-tile.on { border-color:var(--gold); box-shadow:0 10px 24px rgba(46,125,90,.18); }
.scr-art { position:relative; aspect-ratio:1.38; background:linear-gradient(150deg,var(--art,#8a7a5a),rgba(20,16,8,.6)); }
.scr-art img { width:100%; height:100%; object-fit:cover; object-position:center 16%; }
.scr-box { position:absolute; top:9px; left:9px; width:23px; height:23px; border-radius:7px; display:grid; place-items:center; background:rgba(255,255,255,.92); border:1.5px solid var(--border); color:#10251B; font-size:12px; font-weight:700; box-shadow:0 1px 4px rgba(14,17,13,.28); }
.scr-tile.on .scr-box, .scr-row.on .scr-box { background:var(--gold); border-color:var(--gold); }
.scr-box.sm { position:static; width:19px; height:19px; border-radius:5px; box-shadow:none; flex:none; }
.scr-body { padding:11px 13px 12px; }
.scr-naam { font-family:var(--serif); font-size:16.5px; line-height:1.25; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:zoom-in; width:fit-content; max-width:100%; }
.scr-naam:hover { color:var(--gold-ink,#6B4E1E); }
.scr-type { font-size:11.5px; color:var(--faint); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scr-foot { display:flex; align-items:center; gap:8px; margin-top:9px; }
.scr-foot .rargem, .scr-row .rargem { position:static; width:11px; height:11px; transform:rotate(45deg); background:currentColor; border:1px solid #fff; box-shadow:0 1px 2px rgba(0,0,0,.3); flex:none; }
.scr-price { font-size:12.5px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.scr-tag { margin-left:auto; font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; border-radius:5px; padding:3px 7px; white-space:nowrap; }
.scr-tag.heb { color:#3F5B3C; background:#E4F0E1; }
.scr-tag.nieuw { color:var(--gold-ink,#6B4E1E); background:var(--gold-tint); }
.scr-list { background:var(--surface); border:1px solid var(--border); border-radius:15px; overflow:hidden; margin-top:18px; }
.scr-row { display:flex; align-items:center; gap:14px; padding:11px 16px; border-bottom:1px solid var(--border-inner); cursor:pointer; }
.scr-row:last-child { border-bottom:0; }
.scr-row.on { background:var(--gold-tint); }
.scr-rowthumb { width:40px; height:29px; border-radius:5px; overflow:hidden; flex:none; background:linear-gradient(150deg,var(--art,#8a7a5a),rgba(20,16,8,.6)); }
.scr-rowthumb img { width:100%; height:100%; object-fit:cover; object-position:center 16%; }
.scr-rowmain { flex:1; min-width:0; }
.scr-tip { font-size:12px; color:var(--faint); padding:13px 2px 0; }
.scr-side { display:flex; flex-direction:column; gap:14px; }
.scr-sidebox { background:var(--surface); border:1px solid var(--border); border-radius:15px; padding:18px 20px; }
.scr-sidebox.soft { background:var(--surface-soft); }
.scr-side-h { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.scr-side-p { font-size:12.5px; line-height:1.7; color:var(--body); margin:11px 0 0; text-wrap:pretty; }
.scr-side-div { height:1px; background:var(--border-inner); margin:16px 0; }
.scr-facts { display:flex; flex-direction:column; gap:10px; }
.scr-fact { display:flex; align-items:baseline; gap:10px; font-size:12.5px; }
.scr-fact span { flex:1; color:var(--muted); }
.scr-fact b { font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.scr-cmnote { margin:13px 0 0; padding-top:12px; border-top:1px solid var(--line2); font-size:11.5px; line-height:1.5; color:var(--muted); }
.scr-cmnote b { color:var(--gold-t); }
/* ===== Collectiewaarde-dashboard ===== */
.wd-skelet { display:flex; flex-direction:column; gap:16px; }
.wd-sk-a { height:96px; border-radius:16px; background:var(--panel); border:1px solid var(--line); opacity:.6; }
.wd-sk-b { height:240px; border-radius:14px; background:var(--panel); border:1px solid var(--line); opacity:.6; }
.wd-summary { background:var(--night); color:#EAF3EE; border-radius:16px; padding:22px 26px; margin-bottom:16px; box-shadow:var(--shadow); }
.wd-sum-lab { font-family:var(--cond); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(234,243,238,.6); }
.wd-sum-val { font-family:var(--serif); font-size:44px; font-weight:700; line-height:1; margin:8px 0 0; color:#EAF3EE; font-variant-numeric:tabular-nums; }
.wd-sum-sub { font-size:13px; color:rgba(234,243,238,.75); margin-top:10px; }
.wd-delta.up { color:#8fce9b; } .wd-delta.down { color:#e0a07a; }
.wd-card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 20px; box-shadow:var(--shadow); }
.wd-card-h { font-family:var(--cond); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); margin-bottom:14px; }
.wd-chartcard { margin-bottom:16px; }
.wd-chart { width:100%; height:auto; display:block; }
.wd-grid { stroke:var(--line2); stroke-width:1; }
.wd-glab { fill:var(--faint); font-size:11px; font-family:var(--sans); text-anchor:end; }
.wd-xlab { fill:var(--muted); font-size:11px; font-family:var(--sans); }
.wd-line { fill:none; stroke:var(--gold); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.wd-dot { fill:var(--gold); stroke:var(--panel); stroke-width:2; }
.wd-chart-note { font-size:11.5px; color:var(--muted); margin-top:8px; }
.wd-nochart { padding:40px; text-align:center; color:var(--muted); }
.wd-grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px; }
.wd-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.wd-donut-wrap { display:flex; justify-content:center; padding:6px 0 16px; }
.wd-donut { width:152px; height:152px; border-radius:50%; position:relative; }
.wd-donut-hole { position:absolute; inset:27px; border-radius:50%; background:var(--panel); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.wd-donut-hole b { font-family:var(--serif); font-size:16px; color:var(--ink); font-variant-numeric:tabular-nums; }
.wd-donut-hole span { font-size:9px; color:var(--faint); letter-spacing:.12em; text-transform:uppercase; }
.wd-legend { display:flex; flex-direction:column; gap:7px; }
.wd-leg { display:flex; align-items:center; gap:8px; font-size:12.5px; }
.wd-leg-dot { width:11px; height:11px; border-radius:3px; flex:none; }
.wd-leg-l { flex:1; color:var(--body); }
.wd-leg b { color:var(--ink); font-variant-numeric:tabular-nums; }
.wd-leg-p { color:var(--faint); font-size:11px; width:34px; text-align:right; }
.wd-bars { display:flex; flex-direction:column; gap:11px; }
.wd-bar { display:flex; align-items:center; gap:10px; font-size:12.5px; }
.wd-bar-l { flex:0 0 92px; color:var(--body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:6px; }
.wd-rdot { width:9px; height:9px; border-radius:2px; flex:none; }
.wd-bar-tr { flex:1; height:8px; background:var(--bg2); border-radius:999px; overflow:hidden; }
.wd-bar-tr i { display:block; height:8px; background:var(--gold); border-radius:999px; }
.wd-bar b { flex:0 0 auto; color:var(--ink); font-variant-numeric:tabular-nums; min-width:58px; text-align:right; }
.wd-list { display:flex; flex-direction:column; }
.wd-top { display:flex; align-items:center; gap:12px; padding:9px 4px; border-bottom:1px solid var(--line2); cursor:pointer; }
.wd-top:last-child { border-bottom:0; }
.wd-top:hover { background:var(--bg3); }
.wd-top-n { flex:none; width:20px; font-family:var(--serif); font-size:14px; color:var(--faint); text-align:center; }
.wd-top-thumb { flex:none; width:46px; height:33px; border-radius:6px; background-size:cover; background-position:center; background-color:#e3ddce; border:1px solid var(--line2); }
.wd-top-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.wd-top-main b { font-size:13.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wd-top-main span { font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wd-top-eur { flex:none; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.wd-empty-s { color:var(--muted); font-size:13px; padding:8px 0; }
/* Home-kaartje collectiewaarde */
.hp-waarde { cursor:pointer; }
.hp-waarde-val { font-family:var(--serif); font-size:30px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; margin:2px 0 0; }
.hp-spark { width:100%; height:34px; display:block; margin:6px 0 2px; }
.hp-waarde-sub { font-size:11.5px; color:var(--muted); }
@media(max-width:900px){ .wd-grid3 { grid-template-columns:1fr; } .wd-grid2 { grid-template-columns:1fr; } }
@media(max-width:560px){ .wd-sum-val { font-size:36px; } }
/* Deck importeren (AI) — dialoog */
.di-ta { width:100%; box-sizing:border-box; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12.5px; line-height:1.6; border:1px solid var(--line); border-radius:9px; padding:12px 14px; background:var(--bg3); color:var(--body); resize:vertical; }
.di-ta:focus { outline:none; border-color:var(--gold); }
.di-prompt { background:var(--bg2); color:var(--ink); font-size:13px; line-height:1.65; }
.di-row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.di-bieb-box { display:flex; align-items:center; gap:14px; background:var(--gold-tint); border:1px solid var(--gold-tint-bd); border-radius:11px; padding:13px 15px; margin-top:12px; }
.di-bieb-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.di-bieb-txt b { font-size:13.5px; color:var(--ink); }
.di-bieb-txt span { font-size:12px; color:var(--muted); line-height:1.45; }
.di-bieb-box .btn { flex:none; white-space:nowrap; }
@media(max-width:560px){ .di-row2 { grid-template-columns:1fr; } .di-bieb-box { flex-direction:column; align-items:stretch; text-align:left; } }
.di-status { font-size:12px; color:var(--muted); margin-left:2px; }
.di-inp { width:100%; box-sizing:border-box; font:inherit; font-size:13px; border:1px solid var(--line); border-radius:9px; padding:9px 12px; background:var(--panel); color:var(--ink); }
.di-inp:focus { outline:none; border-color:var(--gold); }
.di-opt { font-weight:400; color:var(--faint); text-transform:none; letter-spacing:0; font-family:var(--sans); font-size:11px; }
.di-cmdkl { display:flex; align-items:center; gap:7px; }
.di-styles { grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:10px; }
.di-styles .stylecard { padding:10px 8px; text-align:center; }
.di-styles .stylecard:hover { transform:none; }
.di-styles .stylecard .ic { font-size:20px; }
.di-styles .stylecard h4 { font-family:var(--serif); font-size:12.5px; margin:3px 0 0; line-height:1.2; }
.di-brk { grid-template-columns:repeat(5,1fr); gap:6px; margin-bottom:10px; }
.di-brk .brkcard { padding:9px 4px; align-items:center; text-align:center; gap:1px; }
.di-brk .brkcard .brknr { position:static; }
.di-brk .brkcard .ic { font-size:16px; }
.di-brk .brkcard h4 { font-size:10.5px; margin:0; }
.di-steps { display:flex; align-items:center; gap:7px; margin:8px 0 18px; }
.di-step { display:flex; align-items:center; gap:7px; opacity:.45; transition:opacity .15s; }
.di-step.on, .di-step.done { opacity:1; }
.di-step-n { width:22px; height:22px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--bg2); border:1px solid var(--line); font-size:11.5px; font-weight:600; color:var(--muted); }
.di-step.on .di-step-n { background:var(--primary); border-color:var(--primary); color:#FFFFFF; }
.di-step.done .di-step-n { background:var(--ok-bg); border-color:#cde0c8; color:var(--ok); }
.di-step-l { font-size:12.5px; color:var(--body); }
.di-step-sep { flex:1; height:1px; background:var(--line); min-width:10px; }
.di-nav { display:flex; align-items:center; gap:10px; margin-top:22px; }
.di-nav-sp { flex:1; }
.di-bron { display:flex; } .di-bron button { flex:1; }
.di-bronhint { margin:10px 0 0; font-size:12px; line-height:1.5; color:var(--muted); }
.di-bronhint b { color:var(--gold-t); }
@media(max-width:560px){ .di-styles { grid-template-columns:repeat(2,1fr); } .di-brk { grid-template-columns:repeat(3,1fr); } .di-step-l { display:none; } .di-step-sep { min-width:20px; } }
.scr-del { background:0; border:0; font:inherit; font-size:12.5px; font-weight:600; color:#8A3A2E; cursor:pointer; margin-top:12px; padding:0; }
@media(max-width:820px){ .scr-cols { grid-template-columns:1fr; } .scr-title { font-size:30px; } }

/* ============================================================
   Publieke landingspagina (website)
   ============================================================ */
body.landing-actief .appbar, body.landing-actief .fab { display:none !important; }
.lp { min-height:100vh; background:var(--bg); }
.lp-bar { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 26px; background:rgba(251,248,239,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); }
.lp-logo { height:44px; width:auto; margin-left:-8px; }
.lp-hero { position:relative; background:var(--night); color:var(--night-text); overflow:hidden; }
.lp:not(.dd) .lp-hero { background:#080808; }
.lp-hero-glow { position:absolute; right:-160px; top:-200px; width:620px; height:620px; border-radius:50%; background:radial-gradient(circle, rgba(46,125,90,.16), transparent 66%); pointer-events:none; }
.lp-hero-inner { position:relative; z-index:1; max-width:1280px; margin:0 auto; padding:74px 28px 88px; display:grid; grid-template-columns:1fr auto; gap:56px; align-items:center; text-align:left; }
.lp-kicker { display:inline-flex; align-items:center; gap:10px; font-family:var(--cond); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-on-dark); }
.lp-hero-copy { max-width:600px; display:flex; flex-direction:column; align-items:center; }
.lp-hero .lp-brandname { font-family:var(--serif); font-size:68px; font-weight:600; line-height:1; letter-spacing:-.02em; margin:0; max-width:none; color:#EAF3EE; }
.lp-slogan { font-size:17px; line-height:1.5; color:rgba(234,243,238,.82); margin:16px 0 0; max-width:34ch; text-wrap:pretty; }
.lp-hero-logo { width:560px; max-width:100%; height:auto; display:block; }
.lp-hero-icon { width:auto; height:clamp(118px,19vw,160px); display:block; filter:drop-shadow(0 14px 32px rgba(0,0,0,.38)); }
.lp-hero-wm { font-family:var(--sans); font-weight:700; font-size:clamp(28px,6.5vw,42px); letter-spacing:.24em; text-transform:uppercase; color:#EAF3EE; margin:16px 0 0; padding-left:.24em; line-height:1; }
.lp-hero h1 { font-family:var(--serif); font-size:45px; font-weight:600; line-height:1.08; letter-spacing:-.015em; margin:16px 0 0; color:#EAF3EE; text-wrap:balance; }
.lp-hero p, .lp-hero-sub { font-size:15.5px; line-height:1.65; color:rgba(234,243,238,.82); margin:15px 0 0; max-width:46ch; text-wrap:pretty; }
.lp-hero-copy .lp-hero-acts { justify-content:center; margin-top:30px; }
.lp-hero-acts { display:flex; gap:12px; justify-content:center; margin-top:26px; flex-wrap:wrap; }
.lp-hero-acts .btn { padding:12px 22px; font-size:14px; }
.lp-hero-sub { color:rgba(234,243,238,.74); font-size:16px; line-height:1.55; max-width:46ch; text-align:center; margin:22px 0 0; text-wrap:pretty; }
.lp-hero-pips { display:inline-flex; align-items:center; gap:8px; margin-top:30px; }
.lp-pip { width:15px; height:15px; border-radius:50%; border:1px solid rgba(255,255,255,.14); }
.lp-pipnote { font-family:var(--cond); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(234,243,238,.5); margin-left:8px; }
/* Hero — commander-strook per kleur */
.lp-cmdrs-lab { font-family:var(--cond); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(234,243,238,.5); margin-top:34px; }
.lp-cmdrs { display:flex; justify-content:center; flex-wrap:wrap; gap:9px; margin-top:14px; }
.lp-cmdr { width:66px; aspect-ratio:488/680; border-radius:7px; background-size:cover; background-position:center top; background-color:#16211C; box-shadow:0 8px 20px rgba(0,0,0,.4); border-bottom:3px solid #888; transition:transform .14s ease; }
.lp-cmdr:hover { transform:translateY(-5px) scale(1.04); }
/* Hero — USP's */
/* Hero — grote wisselende kaart + subtiel infopaneel ernaast */
.lp-hero-visual { display:flex; align-items:center; gap:30px; }
.lp-hero-cardwrap { display:flex; flex-direction:column; align-items:center; gap:16px; flex:none; }
.lp-bigcard { width:352px; max-width:42vw; aspect-ratio:488/680; border-radius:16px; background-size:cover; background-position:center; background-color:#16211C; box-shadow:0 36px 78px rgba(0,0,0,.64); border-bottom:5px solid var(--edge,#888); transition:opacity .4s ease; }
.lp-colorpick { display:flex; gap:12px; justify-content:center; }
.lp-cpip { width:17px; height:17px; border-radius:50%; background:var(--pip); border:2px solid transparent; opacity:.5; cursor:pointer; padding:0; transition:transform .14s, opacity .14s; }
.lp-cpip:hover { opacity:.85; }
.lp-cpip.on { opacity:1; border-color:rgba(255,255,255,.78); transform:scale(1.2); }
.lp-show-cap { max-width:210px; flex:none; }
.lp-show-eyebrow { font-family:var(--cond); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--gold-on-dark); }
.lp-show-name { font-family:var(--serif); font-size:23px; font-weight:600; line-height:1.14; margin:7px 0 0; color:#EAF3EE; }
.lp-show-style { font-size:12.5px; line-height:1.45; color:rgba(234,243,238,.66); margin-top:6px; }
.lp-show-points { list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.lp-show-points li { position:relative; padding-left:16px; font-size:12px; line-height:1.4; color:rgba(234,243,238,.6); }
.lp-show-points li::before { content:""; position:absolute; left:0; top:5px; width:7px; height:7px; background:var(--gold-on-dark); transform:rotate(45deg); border-radius:1px; opacity:.85; }
@media(max-width:1000px){
  .lp-hero-inner { grid-template-columns:1fr; gap:36px; justify-items:center; text-align:center; }
  .lp-hero-copy { max-width:540px; }
  .lp-hero h1 { text-align:center; } .lp-hero p, .lp-hero-sub, .lp-slogan { margin-left:auto; margin-right:auto; text-align:center; }
  .lp-hero-copy .lp-hero-acts { justify-content:center; }
  .lp-hero-visual { flex-direction:column; gap:22px; }
  .lp-hero-logo { width:auto; max-width:84vw; }
  .lp-show-cap { text-align:center; max-width:360px; }
  .lp-show-points { display:inline-flex; text-align:left; }
}
@media(max-width:520px){ .lp-bigcard { width:74vw; max-width:300px; } }
/* Feature-tegels onder de hero */
.lp-tiles-sec { max-width:1080px; margin:0 auto; padding:44px 28px 6px; }
.lp-tiles-head { text-align:center; margin-bottom:22px; }
.lp-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
/* Een eenzame laatste tegel netjes centreren i.p.v. links laten hangen */
.lp-tiles > .lp-tile:last-child:nth-child(3n+1) { grid-column:1 / -1; justify-self:center; width:calc((100% - 36px) / 3); }
.lp-tile { display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 12px 30px rgba(50,42,22,.08); transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.lp-tile:hover { transform:translateY(-4px); box-shadow:0 22px 44px rgba(50,42,22,.16); border-color:var(--gold-tint-bd); }
.lp-tile-art { position:relative; height:100px; background-size:cover; background-position:center; background-color:#16211C; }
.lp-tile-art::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(15,23,42,.72) 0%, rgba(15,23,42,.12) 46%, rgba(15,23,42,0) 72%); }
.lp-tile-tag { position:absolute; left:14px; bottom:10px; z-index:1; font-family:var(--serif); font-size:17px; font-weight:600; color:#EAF3EE; text-shadow:0 1px 6px rgba(0,0,0,.5); letter-spacing:.005em; }
.lp-tile-body { flex:1; display:flex; flex-direction:column; padding:12px 15px 14px; }
.lp-tile-body p { flex:1; font-size:12.5px; line-height:1.5; color:var(--body); margin:0; text-wrap:pretty; }
.lp-tile-link { align-self:flex-start; margin-top:11px; background:var(--gold-tint); border:1px solid var(--gold-tint-bd); color:var(--gold-t); border-radius:7px; padding:5px 11px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:background .14s ease, color .14s ease; }
.lp-tile-link:hover { background:var(--gold-tint-bd); color:var(--gold-d); }
@media(max-width:820px){
  .lp-tiles { grid-template-columns:1fr 1fr; }
  .lp-tiles > .lp-tile:last-child:nth-child(3n+1) { grid-column:auto; justify-self:stretch; width:auto; }
  .lp-tiles > .lp-tile:last-child:nth-child(2n+1) { grid-column:1 / -1; justify-self:center; width:calc((100% - 18px) / 2); }
}
@media(max-width:520px){
  .lp-tiles { grid-template-columns:1fr; }
  .lp-tiles > .lp-tile:last-child:nth-child(2n+1) { grid-column:auto; justify-self:stretch; width:auto; }
}
.lp-main { max-width:1080px; margin:0 auto; padding:70px 28px 20px; display:flex; flex-direction:column; gap:66px; }
.lp-feature { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.lp-sectionline { height:1px; background:var(--border); margin-top:44px; }
.lp-feature.rev .lp-feature-txt { order:2; }
.lp-eyebrow { font-family:var(--cond); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--text-label); }
.lp-feature-txt h2 { font-family:var(--serif); font-size:30px; font-weight:600; line-height:1.12; margin:10px 0 0; color:var(--ink); }
.lp-feature-txt p { font-size:14.5px; line-height:1.7; color:var(--muted); margin:12px 0 0; max-width:44ch; text-wrap:pretty; }
.lp-feature-vis { display:flex; justify-content:center; }
.lpm-card { width:100%; max-width:400px; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow:0 20px 44px rgba(15,23,42,.10); }
.lpm-search { display:flex; align-items:center; gap:10px; background:var(--surface-soft); border:1px solid var(--gold-tint-bd); border-radius:10px; padding:11px 14px; font-size:13.5px; color:var(--ink); box-shadow:0 0 0 3px var(--ring); margin-bottom:6px; }
.lpm-mag { color:#B3AA96; }
.lpm-row { display:flex; align-items:center; gap:13px; padding:11px 2px; border-bottom:1px solid var(--border-inner); }
.lpm-row:last-child { border-bottom:0; }
.lpm-thumb { width:34px; height:46px; border-radius:6px; flex:none; background-color:#16211C; background-size:cover; background-position:center; }
.lpm-rmain { flex:1; min-width:0; }
.lpm-rname { display:flex; align-items:center; gap:8px; font-family:var(--serif); font-size:15px; font-weight:600; color:var(--ink); }
.lpm-pips { display:inline-flex; gap:3px; }
.lpm-pip { width:11px; height:11px; border-radius:50%; border:1px solid rgba(15,23,42,.18); }
.lpm-rmeta { font-size:11.5px; color:var(--text-label); margin-top:3px; }
.lpm-tag { font-size:11px; font-weight:600; border-radius:6px; padding:3px 9px; white-space:nowrap; flex:none; }
.lpm-tag.have { background:var(--ok-bg); color:var(--ok); }
.lpm-tag.buy { background:var(--todo-bg); color:var(--todo); }
.lpm-deck { padding:0; overflow:hidden; }
.lpm-deck-art { height:120px; background-color:#16211C; background-size:cover; background-position:center 28%; }
.lpm-deck-body { padding:16px 18px 18px; }
.lpm-deck-name { font-family:var(--serif); font-size:20px; font-weight:600; color:var(--ink); }
.lpm-deck-meta { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); margin-top:5px; }
.lpm-deck-stats { display:flex; align-items:center; gap:16px; margin-top:14px; font-size:12.5px; color:var(--muted); }
.lpm-deck-stats b { font-family:var(--serif); font-size:18px; color:var(--ink); margin-right:3px; }
.lpm-power { display:flex; align-items:center; gap:20px; }
.lpm-dial { flex:none; width:96px; height:96px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:conic-gradient(var(--gold) 0 67%, var(--border-inner) 67% 100%); position:relative; }
.lpm-dial::before { content:""; position:absolute; inset:9px; background:var(--surface); border-radius:50%; }
.lpm-dial b { position:relative; font-family:var(--serif); font-size:28px; font-weight:600; color:var(--ink); line-height:1; }
.lpm-dial span { position:relative; font-size:10px; color:var(--muted); margin-top:2px; }
.lpm-power-side { flex:1; min-width:0; }
.lpm-power-lab { font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:9px; }
.lpm-bar { display:flex; align-items:center; gap:10px; margin:7px 0; font-size:11.5px; color:var(--muted); }
.lpm-bar span { width:82px; flex:none; }
.lpm-track { flex:1; height:6px; border-radius:3px; background:var(--border-inner); overflow:hidden; }
.lpm-track i { display:block; height:100%; background:var(--gold); border-radius:3px; }
.lpm-binder-head { font-size:12.5px; color:var(--muted); margin-bottom:12px; }
.lpm-binder-head b { color:var(--ok); }
.lpm-binder-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.lpm-cell { position:relative; aspect-ratio:5/7; border-radius:5px; border:1px solid rgba(15,23,42,.1); background-color:#EEF2F6; background-size:cover; background-position:center; overflow:hidden; }
.lpm-cell.mis { filter:blur(2.5px) grayscale(.55) brightness(.72); background-size:132%; } /* nog niet in bezit: geblurd zoals in de app */
/* Kaart-popup showcase (zoals het kaartvenster in de app) */
.lp-cardshow { background:var(--surface-sunk); border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-top:66px; }
.lp-cardshow-inner { max-width:1000px; margin:0 auto; padding:64px 28px; display:grid; grid-template-columns:0.85fr 1.15fr; gap:44px; align-items:center; }
.lp-cardshow-txt h2 { font-family:var(--serif); font-size:30px; font-weight:600; line-height:1.12; margin:10px 0 0; color:var(--ink); }
.lp-cardshow-txt p { font-size:14.5px; line-height:1.7; color:var(--muted); margin:12px 0 0; max-width:42ch; text-wrap:pretty; }
.lp-cardshow-vis { display:flex; justify-content:center; }
.lpk { width:100%; max-width:540px; display:flex; gap:18px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:0 30px 60px rgba(50,42,22,.22); position:relative; }
.lpk-art { width:150px; flex:none; aspect-ratio:488/680; border-radius:9px; background-size:cover; background-position:center; background-color:#16211C; border:1px solid var(--line); box-shadow:var(--shadow); align-self:flex-start; }
.lpk-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:9px; }
.lpk-x { position:absolute; top:12px; right:14px; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:var(--bg2); border:1px solid var(--line2); color:var(--muted); font-size:12px; }
.lpk-info h3 { font-family:var(--serif); font-size:20px; font-weight:700; line-height:1.12; margin:0; color:var(--ink); padding-right:28px; }
.lpk-type { display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:11.5px; color:var(--muted); }
.lpk-mana { display:inline-flex; gap:3px; }
.lpk-pip { width:14px; height:14px; border-radius:50%; border:1px solid rgba(15,23,42,.2); }
.lpk-pip.gen { display:grid; place-items:center; background:#C9D6D0; color:#475569; font-size:9px; font-weight:700; }
.lpk-div { height:1px; background:var(--line2); margin:2px 0; }
.lpk-uit { margin:0; font-size:12.5px; line-height:1.55; color:var(--body); }
.lpk-oracle { background:var(--bg2); border:1px solid var(--line2); border-radius:8px; padding:9px 11px; font-size:11px; color:var(--body); line-height:1.45; }
.lpk-oracle b { display:block; font-family:var(--cond); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:4px; }
.lpk-meta { display:flex; gap:16px; flex-wrap:wrap; padding-top:9px; border-top:1px solid var(--line2); }
.lpk-meta span { display:block; font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.lpk-meta b { font-size:12px; color:var(--body); font-weight:600; font-variant-numeric:tabular-nums; }
.lpk-btns { display:flex; gap:7px; flex-wrap:wrap; margin-top:3px; }
.lpk-btn { font-size:11px; font-weight:600; border-radius:7px; padding:6px 11px; background:var(--panel); border:1px solid var(--line); color:var(--body); white-space:nowrap; }
.lpk-btn.prim { background:var(--primary); border-color:var(--primary); color:#FFFFFF; }
.lpk-btn.koop { background:var(--ok-bg); border-color:#CDE0C8; color:var(--ok); }
@media(max-width:820px){
  .lp-cardshow-inner { grid-template-columns:1fr; gap:24px; padding:48px 20px; }
  .lpk { max-width:420px; }
}
@media(max-width:520px){ .lpk { flex-direction:column; } .lpk-art { width:150px; align-self:center; } }
/* ===== Scannen + AI-deckbouw-banden bovenaan de landing (onder de tegels) ===== */
/* AI-deckbouw-mock (chatvraag → deck) */
.lpm-aideck { width:100%; max-width:340px; display:flex; flex-direction:column; gap:10px; }
.lpm-ai-q { font-size:12.5px; line-height:1.5; color:var(--ink); background:var(--surface); border:1px solid var(--border); border-radius:12px; border-bottom-right-radius:4px; padding:10px 13px; align-self:flex-end; max-width:94%; }
.lpm-ai-you { display:inline-block; font-family:var(--cond); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-right:6px; }
.lpm-ai-work { display:inline-flex; align-items:center; gap:8px; align-self:flex-start; font-size:12px; color:var(--gold-t); background:var(--gold-tint); border:1px solid var(--gold-tint-bd); border-radius:12px; border-bottom-left-radius:4px; padding:8px 12px; }
.lpm-ai-dot { width:8px; height:8px; border-radius:50%; background:var(--gold); animation:lpmScanDot 1.1s ease-in-out infinite; }
.lp-scanband { position:relative; overflow:hidden; margin-top:66px; background:var(--surface-sunk); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.lp-scanband-glow { position:absolute; right:-140px; top:-120px; width:460px; height:460px; border-radius:50%; background:radial-gradient(circle, rgba(46,125,90,.16), transparent 68%); pointer-events:none; }
.lp-scanband-inner { position:relative; z-index:1; max-width:1000px; margin:0 auto; padding:60px 28px; display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center; }
.lp-scanband-txt h2 { font-family:var(--serif); font-size:31px; font-weight:600; line-height:1.12; margin:12px 0 0; color:var(--ink); }
.lp-scanband-txt p { font-size:14.5px; line-height:1.7; color:var(--muted); margin:12px 0 0; max-width:46ch; text-wrap:pretty; }
.lp-scanband-points { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.lp-scanband-points li { position:relative; padding-left:24px; font-size:13.5px; line-height:1.5; color:var(--body); }
.lp-scanband-points li::before { content:"✓"; position:absolute; left:0; top:-1px; width:16px; height:16px; display:grid; place-items:center; border-radius:50%; background:var(--ok-bg); color:var(--ok); font-size:10px; font-weight:700; }
.lp-scanband-acts { margin-top:22px; }
.lp-scanband-acts .btn.gold { background:var(--primary); color:#FFFFFF; }
.lp-scanband-acts .btn.gold:hover { background:var(--primary-hover); }
.lp-scanband-acts .btn.ghost-dark { background:var(--surface); color:var(--body); border-color:var(--border); }
.lp-scanband-acts .btn.ghost-dark:hover { border-color:#cabfa2; color:var(--ink); }
.lp-scanband-vis { display:flex; justify-content:center; }
/* Twee gestapelde banden aan elkaar (geen gat/dubbele rand); tweede band met beeld links */
.lp-scanband + .lp-scanband { margin-top:0; border-top:0; }
.lp-scanband.rev .lp-scanband-vis { order:-1; }
.lp-scanband.rev .lp-scanband-glow { right:auto; left:-140px; }
.lpm-scan { width:100%; max-width:320px; display:flex; flex-direction:column; gap:12px; }
.lpm-scan-cam { position:relative; aspect-ratio:3/4; border-radius:18px; overflow:hidden; background:#12211B; border:1px solid rgba(0,0,0,.4); box-shadow:0 24px 52px rgba(15,23,42,.24); }
.lpm-scan-view { position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(1.03) contrast(1.02); }
.lpm-scan-cam::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 42%, transparent 52%, rgba(0,0,0,.42) 100%); pointer-events:none; }
.lpm-scan-cnr { position:absolute; width:26px; height:26px; border:2.5px solid rgba(255,255,255,.92); z-index:2; }
.lpm-scan-cnr.tl { top:16px; left:16px; border-right:0; border-bottom:0; border-top-left-radius:6px; }
.lpm-scan-cnr.tr { top:16px; right:16px; border-left:0; border-bottom:0; border-top-right-radius:6px; }
.lpm-scan-cnr.bl { bottom:16px; left:16px; border-right:0; border-top:0; border-bottom-left-radius:6px; }
.lpm-scan-cnr.br { bottom:16px; right:16px; border-left:0; border-top:0; border-bottom-right-radius:6px; }
.lpm-scan-beam { position:absolute; left:16px; right:16px; height:2px; z-index:2; background:linear-gradient(90deg, transparent, rgba(46,125,90,.95), transparent); box-shadow:0 0 12px 2px rgba(46,125,90,.55); animation:lpmScanBeam 2.4s ease-in-out infinite; }
@keyframes lpmScanBeam { 0%,100% { top:22px; } 50% { top:calc(100% - 24px); } }
.lpm-scan-live { position:absolute; top:14px; left:0; right:0; z-index:3; margin:0 auto; width:max-content; display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:rgba(13,15,9,.72); color:#fff; font-family:var(--cond); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.lpm-scan-dot { width:7px; height:7px; border-radius:50%; background:var(--gold); animation:lpmScanDot 1.1s ease-in-out infinite; }
@keyframes lpmScanDot { 0%,100% { opacity:1; } 50% { opacity:.25; } }
.lpm-scan-hits { display:flex; flex-direction:column; gap:7px; }
.lpm-scan-hit { display:flex; align-items:center; gap:10px; padding:8px 10px; background:var(--surface); border:1px solid var(--border); border-radius:11px; }
.lpm-scan-hit.nu { border-color:var(--gold-tint-bd); background:var(--gold-tint); }
.lpm-scan-thumb { width:34px; height:34px; flex:none; border-radius:7px; background-size:cover; background-position:center; background-color:#16211C; border:1px solid var(--border); }
.lpm-scan-hmain { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.lpm-scan-hmain b { font-size:12.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lpm-scan-hmain span { font-size:11px; color:var(--muted); }
.lpm-scan-check { flex:none; width:20px; height:20px; display:grid; place-items:center; border-radius:50%; background:var(--ok-bg); color:var(--ok); font-size:11px; font-weight:700; }
@media(max-width:820px){
  .lp-scanband-inner { grid-template-columns:1fr; gap:26px; padding:48px 20px; }
  .lp-scanband-vis { order:-1; }
  .lpm-scan { max-width:300px; }
}
.lp-claude { position:relative; background:var(--night); color:var(--night-text); overflow:hidden; margin-top:70px; }
.lp-claude-glow { position:absolute; left:-120px; bottom:-160px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, var(--ring), transparent 68%); pointer-events:none; }
.lp-claude-inner { position:relative; z-index:1; max-width:820px; margin:0 auto; padding:70px 28px; text-align:center; }
.lp-claude h2 { font-family:var(--serif); font-size:34px; font-weight:600; line-height:1.1; margin:16px 0 0; color:#EAF3EE; }
.lp-claude p { font-size:15px; line-height:1.7; color:rgba(234,243,238,.8); margin:14px auto 0; max-width:60ch; text-wrap:pretty; }
.lp-foot { background:var(--surface-sunk); border-top:1px solid var(--border); }
.lp-foot-inner { max-width:820px; margin:0 auto; padding:60px 28px 40px; text-align:center; }
.lp-foot-inner .lp-kicker { color:var(--gold-t); }
.lp-foot-inner h2 { font-family:var(--serif); font-size:32px; font-weight:600; margin:12px 0 0; color:var(--ink); }
.lp-foot-inner p { font-size:14px; line-height:1.65; color:var(--muted); margin:12px auto 0; max-width:52ch; text-wrap:pretty; }
.lp-foot-acts { display:flex; gap:12px; justify-content:center; margin-top:22px; flex-wrap:wrap; }
.lp-foot-acts .btn.gold { background:var(--primary); color:#FFFFFF; }
.lp-foot-acts .btn.gold:hover { background:var(--primary-hover); }
.lp-foot-acts .btn.ghost-dark { background:var(--surface); color:var(--body); border-color:var(--border); }
.lp-foot-acts .btn.ghost-dark:hover { background:var(--surface); border-color:#cabfa2; color:var(--ink); }
.lp-foot-copy { text-align:center; padding:0 28px 34px; font-family:var(--cond); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-label); }
.lp-back { display:block; width:100%; text-align:center; margin-top:14px; background:none; border:0; color:var(--muted); font-size:12.5px; cursor:pointer; }
.lp-back:hover { color:var(--ink); }
/* Woordmerk (i.p.v. de header-balk) + inline-link */
.lp-wordmark { font-family:var(--serif); font-size:21px; font-weight:600; color:#EAF3EE; letter-spacing:.01em; }
.lp-hero > .lp-wordmark { position:absolute; top:22px; left:30px; z-index:2; }
.lp-inline-link { display:inline-block; margin-top:14px; background:none; border:0; padding:0; font:inherit; font-size:13.5px; font-weight:600; color:var(--todo); cursor:pointer; }
.lp-inline-link:hover { color:var(--ink); }
/* ===== Verdiepingspagina: zo bouw je een deck ===== */
.lp-feature-cta { margin-top:18px; }
.dd-hero-top { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:1080px; margin:0 auto; padding:22px 28px 0; }
.dd-hero-split { position:relative; z-index:1; max-width:940px; margin:0 auto; padding:26px 28px 62px; display:grid; grid-template-columns:auto 1fr; gap:54px; align-items:center; }
.dd-hero-card { width:274px; max-width:40vw; aspect-ratio:488/680; border-radius:16px; background-size:cover; background-position:center; background-color:#16211C; box-shadow:0 36px 76px rgba(0,0,0,.6); border-bottom:5px solid var(--edge,#888); }
.dd-hero-txt h1 { font-size:42px; text-align:left; max-width:15ch; margin:14px 0 0; }
.dd-hero-txt p { font-size:16px; line-height:1.65; color:rgba(234,243,238,.82); margin:14px 0 0; max-width:46ch; text-wrap:pretty; }
.dd-hero-caption { display:flex; align-items:center; gap:6px; font-family:var(--cond); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:rgba(234,243,238,.55); margin-top:20px; }
.dd-hero-caption .lpm-pip { width:11px; height:11px; }
.dd-sec { padding:64px 28px; }
.dd-sec-head { max-width:640px; margin:0 auto 40px; text-align:center; }
.dd-sec-head h2 { font-family:var(--serif); font-size:30px; font-weight:600; color:var(--ink); margin:8px 0 0; line-height:1.14; }
.dd-sec-head p { font-size:14.5px; color:var(--muted); margin:12px auto 0; max-width:56ch; line-height:1.65; text-wrap:pretty; }
.dd-steps { max-width:1000px; margin:0 auto; display:flex; flex-direction:column; gap:34px; }
.dd-step { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.dd-step.rev .dd-step-plate { order:2; }
.dd-step-plate { aspect-ratio:626/457; border-radius:14px; background-size:cover; background-position:center; box-shadow:0 22px 46px rgba(15,23,42,.2); border:1px solid var(--border); background-color:#16211C; }
.dd-step-num { font-family:var(--serif); font-size:20px; color:var(--gold-t); width:40px; height:40px; border:1px solid var(--gold-tint-bd); border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--gold-tint); margin-bottom:15px; }
.dd-step-txt h3 { font-family:var(--serif); font-size:24px; font-weight:600; color:var(--ink); margin:0; }
.dd-step-txt p { font-size:14.5px; line-height:1.7; color:var(--muted); margin:10px 0 0; max-width:44ch; text-wrap:pretty; }
/* Tool-screencaps in de proces-stappen */
.dd-cap { border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--panel); box-shadow:0 20px 44px rgba(15,23,42,.18); }
.dd-cap-bar { display:flex; align-items:baseline; gap:9px; background:var(--night); padding:9px 14px; }
.dd-cap-bar b { font-family:var(--serif); font-size:13px; font-weight:600; color:#EAF3EE; }
.dd-cap-bar span { font-family:var(--cond); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(234,243,238,.5); }
.dd-cap-body { padding:14px 15px; display:flex; flex-direction:column; gap:9px; }
.cap-btn { align-self:flex-start; background:var(--primary); color:#FFFFFF; font-size:11px; font-weight:600; border-radius:7px; padding:7px 13px; }
.cap-btn.ok { background:var(--ok); }
.cap-btn.ghost { background:var(--panel); color:var(--body); border:1px solid var(--line); }
.cap-cmd-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.cap-cmd { border-radius:7px; overflow:hidden; border:1px solid var(--line2); background:var(--surface-sunk); }
.cap-cmd.sel { border-color:var(--gold-d); box-shadow:0 0 0 2px var(--gold-tint); }
.cap-cmd-art { aspect-ratio:5/7; background-size:cover; background-position:center top; background-color:#16211C; }
.cap-cmd span { display:block; font-size:9px; text-align:center; padding:3px 2px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cap-claude { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--ink); }
.cap-dot { width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px var(--gold-tint); flex:none; }
.cap-cat { display:flex; align-items:center; gap:9px; font-size:10.5px; color:var(--muted); }
.cap-cat span { width:98px; flex:none; }
.cap-cat i { flex:1; height:6px; background:var(--line2); border-radius:3px; overflow:hidden; }
.cap-cat i b { display:block; height:100%; background:var(--gold); border-radius:3px; }
.cap-chat { display:flex; flex-direction:column; gap:8px; }
.cap-b { max-width:88%; font-size:11px; line-height:1.45; padding:8px 11px; border-radius:12px; }
.cap-b.you { align-self:flex-end; background:var(--primary); color:#FFFFFF; border-bottom-right-radius:4px; }
.cap-b.ai { align-self:flex-start; background:var(--bg2); border:1px solid var(--line2); color:var(--body); border-bottom-left-radius:4px; }
.cap-drop { border:1.5px dashed var(--gold-tint-bd); border-radius:9px; background:var(--surface-sunk); padding:15px; text-align:center; font-size:11.5px; color:var(--muted); }
.cap-drop small { display:block; margin-top:4px; font-size:10px; color:var(--faint); }
.cap-note { font-size:11px; color:var(--muted); }
.cap-note b { color:var(--ok); font-family:var(--serif); font-size:13px; }
.cap-search { display:flex; align-items:center; gap:8px; background:var(--surface-sunk); border:1px solid var(--gold-tint-bd); border-radius:8px; padding:8px 11px; font-size:11.5px; color:var(--ink); }
.cap-mag { color:#B3AA96; }
.cap-row { display:flex; align-items:center; gap:10px; padding:4px 0; }
.cap-thumb { width:30px; height:22px; border-radius:4px; background-size:cover; background-position:center; flex:none; background-color:#16211C; }
.cap-rmain { flex:1; min-width:0; }
.cap-rmain b { display:block; font-family:var(--serif); font-size:12px; font-weight:600; color:var(--ink); }
.cap-rmain span { font-size:10px; color:var(--faint); }
.cap-prop { font-size:12px; line-height:1.5; color:var(--body); background:var(--surface-sunk); border-radius:8px; padding:10px 12px; }
.cap-confirm { display:flex; gap:8px; }
.cap-score { display:flex; align-items:center; gap:16px; padding:4px 0; }
.cap-dial { position:relative; width:84px; height:84px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; }
.cap-dial::before { content:""; position:absolute; inset:8px; background:var(--panel); border-radius:50%; }
.cap-dial b { position:relative; font-family:var(--serif); font-size:23px; font-weight:600; color:var(--ink); }
.cap-score-lab { font-size:13px; color:var(--muted); }
.dd-anat-sec, .dd-scope-sec, .dd-tint { background:var(--surface-sunk); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.dd-anat { max-width:820px; margin:0 auto; }
.dd-anat-bar { display:flex; height:36px; border-radius:9px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.dd-seg { height:100%; }
.dd-anat-leg { display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:center; margin-top:22px; }
.dd-leg { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--body); }
.dd-leg b { font-family:var(--serif); color:var(--ink); margin-right:2px; }
.dd-dot { width:12px; height:12px; border-radius:3px; flex:none; }
.dd-split { max-width:1000px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center; }
.dd-split.rev .dd-split-txt { order:2; }
.dd-split-vis { display:flex; justify-content:center; min-width:0; }
/* Chat-mock (Claude denkt mee) */
.lpc-card { display:flex; flex-direction:column; gap:11px; }
.lpc-row { display:flex; }
.lpc-row.you { justify-content:flex-end; }
.lpc-row.ai { justify-content:flex-start; }
.lpc-bubble { max-width:84%; font-size:12.5px; line-height:1.5; padding:10px 14px; border-radius:14px; }
.lpc-row.you .lpc-bubble { background:var(--primary); color:#FFFFFF; border-bottom-right-radius:5px; }
.lpc-row.ai .lpc-bubble { background:var(--bg2); border:1px solid var(--line2); color:var(--body); border-bottom-left-radius:5px; }
.dd-split-txt h2 { font-family:var(--serif); font-size:28px; font-weight:600; color:var(--ink); margin:8px 0 0; line-height:1.14; }
.dd-split-txt p { font-size:14.5px; line-height:1.7; color:var(--muted); margin:12px 0 0; text-wrap:pretty; }
.dd-points { margin-top:18px; }
.dd-points li { color:var(--body); }
.dd-points li::before { background:var(--gold-t); opacity:1; }
.dd-todo-card { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px 18px; box-shadow:0 24px 52px rgba(15,23,42,.13); }
.dd-todo-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:2px 2px 12px; border-bottom:1px solid var(--line2); margin-bottom:4px; }
.dd-todo-head b { font-family:var(--serif); font-size:17px; color:var(--ink); }
.dd-todo-head span { font-size:12px; color:var(--muted); }
.dd-todo-row { display:flex; align-items:center; gap:12px; padding:9px 2px; border-bottom:1px solid var(--line2); }
.dd-todo-row:last-child { border-bottom:0; }
.dd-check { width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line3); flex:none; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; }
.dd-todo-row.af .dd-check { background:var(--ok); border-color:var(--ok); }
.dd-todo-thumb { width:40px; height:29px; border-radius:5px; background-size:cover; background-position:center; flex:none; background-color:#16211C; }
.dd-todo-main { flex:1; min-width:0; }
.dd-todo-naam { display:flex; align-items:center; gap:7px; font-family:var(--serif); font-size:14.5px; font-weight:600; color:var(--ink); }
.dd-todo-row.af .dd-todo-naam { color:var(--muted); }
.dd-todo-type { font-size:11.5px; color:var(--faint); margin-top:1px; }
.dd-opts { max-width:1000px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.dd-opt { display:flex; align-items:center; gap:16px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px; }
.dd-opt-txt { flex:1; min-width:0; }
.dd-opt-txt b { display:block; font-family:var(--sans); font-size:14.5px; font-weight:600; color:var(--ink); }
.dd-opt-txt span { display:block; font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.5; }
.dd-switch { width:42px; height:24px; border-radius:20px; background:var(--line3); position:relative; flex:none; transition:background .15s; }
.dd-knob { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:left .15s; }
.dd-opt.aan .dd-switch { background:var(--primary); }
.dd-opt.aan .dd-knob { left:21px; }
@media(max-width:820px){
  .dd-step { grid-template-columns:1fr; gap:16px; } .dd-step.rev .dd-step-plate { order:0; }
  .dd-split { grid-template-columns:1fr; gap:26px; } .dd-split.rev .dd-split-txt { order:0; }
  .dd-opts { grid-template-columns:1fr; }
  .dd-hero-split { grid-template-columns:1fr; justify-items:center; text-align:center; gap:26px; padding-bottom:48px; }
  .dd-hero-txt h1 { text-align:center; margin-left:auto; margin-right:auto; }
  .dd-hero-txt p { margin-left:auto; margin-right:auto; }
  .dd-hero-caption { justify-content:center; }
  .dd-hero-top { padding-top:16px; }
}
@media (max-width:760px){
  .lp-hero h1 { font-size:36px; } .lp-hero-inner { padding:54px 20px 50px; }
  .lp-feature { grid-template-columns:1fr; gap:20px; } .lp-feature.rev .lp-feature-txt { order:0; }
  .lp-main { padding:48px 20px 10px; gap:48px; } .lp-claude h2 { font-size:27px; }
}

/* ============================================================
   LANDING — teal/mint omkleuring (ALLEEN de landing, niet de .dd-detailpagina's).
   Zelfde indeling, fonts en inhoud; alleen het kleurenspectrum verandert.
   ============================================================ */
.lp:not(.dd){
  /* vlakken / neutrals → helder en koel */
  --bg:#FFFFFF; --bg2:#F8FAFC; --bg3:#F8FAFC;
  --panel:#FFFFFF; --surface:#FFFFFF; --surface-soft:#F8FAFC; --surface-sunk:#F8FAFC;
  --line:#E2E8F0; --line2:#EEF2F6; --line3:#E2E8F0; --border:#E2E8F0; --border-inner:#EEF2F6;
  --ink:#0F172A; --body:#475569; --muted:#64748B; --faint:#94A3B8; --text-label:#64748B;
  /* accent goud → ManaForge groen (forest + mint) */
  --gold:#2E7D5A; --gold-d:#1E4D3A; --gold-t:#2E7D5A; --gold-on-dark:#7BC59E; --gold-hover:#7BC59E;
  --gold-tint:#CDEEDD; --gold-tint-bd:#A9DCC4;
  /* primaire actie binnen de landing → donkergroen i.p.v. paars */
  --primary:#1E4D3A; --primary-hover:#163B2D;
}
/* Donkere vlakken (hero + Claude-sectie) → dark forest i.p.v. bijna-zwart */
.lp:not(.dd) .lp-hero,
.lp:not(.dd) .lp-claude { background:#123024; }
/* Sfeer-glows van goud → groen/mint */
.lp:not(.dd) .lp-hero-glow { background:radial-gradient(circle, rgba(46,125,90,.24), transparent 66%); }
.lp:not(.dd) .lp-scanband-glow { background:radial-gradient(circle, rgba(46,125,90,.16), transparent 68%); }
.lp:not(.dd) .lp-claude-glow { background:radial-gradient(circle, rgba(123,197,158,.16), transparent 68%); }
/* Primaire knop → donkergroen met witte tekst (i.p.v. gouden knop met donkere tekst) */
.lp:not(.dd) .btn.gold { background:#1E4D3A; color:#fff; }
.lp:not(.dd) .btn.gold:hover { background:#163B2D; }
/* Kleine gouden hardcodes in de mock-illustraties → groen */
.lp:not(.dd) .lpm-search { box-shadow:0 0 0 3px rgba(46,125,90,.10); }
.lp:not(.dd) .lpm-scan-beam { background:linear-gradient(90deg, transparent, rgba(46,125,90,.95), transparent); box-shadow:0 0 12px 2px rgba(46,125,90,.55); }

/* ============================================================
   COMMANDER-LAB
   ============================================================ */
.clab { max-width:1180px; margin:0 auto; padding:22px 24px 60px; }
.clab-filters { display:flex; flex-direction:column; gap:16px; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:18px 20px; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.clab-frow { display:flex; flex-wrap:wrap; align-items:flex-end; gap:22px; }
.clab-frow2 { border-top:1px solid var(--line2); padding-top:15px; }
.clab-fgroup { display:flex; flex-direction:column; gap:8px; }
.clab-flabel { font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.clab-klrow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.clab-multi { border:1px solid var(--line); background:var(--panel); border-radius:999px; padding:6px 13px; font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer; white-space:nowrap; transition:all .12s; }
.clab-multi:hover { border-color:var(--primary); color:var(--ink); }
.clab-multi.on { background:var(--primary); border-color:var(--primary); color:#fff; }
.clab-fstijl { min-width:220px; }
.clab-fstijl .dd { width:100%; }
.clab-fkw { flex:1; min-width:220px; }
.clab-inp { width:100%; background:var(--panel); border:1px solid var(--line3); border-radius:8px; padding:9px 12px; font:inherit; font-size:13px; color:var(--ink); }
.clab-inp:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--ring); }
.clab-search { display:flex; align-items:center; gap:10px; background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:2px 12px; }
.clab-search:focus-within { border-color:var(--gold); box-shadow:0 0 0 3px var(--ring); background:var(--panel); }
.clab-search-ic { color:var(--muted); font-size:17px; flex:none; }
.clab-search-inp { flex:1; background:none; border:0; outline:none; padding:11px 0; font:inherit; font-size:14px; color:var(--ink); }
.clab-search-inp::placeholder { color:var(--faint); }
.clab-search-x { flex:none; background:none; border:0; color:var(--muted); font-size:13px; cursor:pointer; padding:4px 6px; border-radius:6px; }
.clab-search-x:hover { color:var(--ink); background:var(--line2); }
.clab-chips { display:flex; flex-wrap:wrap; gap:6px; }
.clab-chip { display:inline-flex; align-items:center; gap:6px; background:var(--bg2); border:1px solid var(--line); border-radius:999px; padding:6px 12px; font:inherit; font-size:12.5px; font-weight:600; color:var(--body); cursor:pointer; transition:.13s; }
.clab-chip:hover { border-color:var(--gold-tint-bd); }
.clab-chip.on { background:var(--gold-tint); border-color:var(--gold); color:var(--gold-ink); }
.clab-rgem { width:9px; height:9px; border-radius:50%; background:currentColor; }
.clab-fbtns { display:flex; gap:10px; margin-left:auto; align-items:center; flex-wrap:wrap; }
.clab-meer { display:flex; justify-content:center; margin-top:26px; }
.cardprev { position:fixed; z-index:400; width:244px; display:none; pointer-events:none; filter:drop-shadow(0 22px 44px rgba(0,0,0,.45)); }
.cardprev img { width:100%; border-radius:13px; display:block; }
@media(max-width:640px){ .clab-fbtns { margin-left:0; width:100%; } .clab-fbtns .btn { flex:1; } .clab-fstijl, .clab-fkw { width:100%; } .cardprev { display:none !important; } }

.clab-start { display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; padding:56px 24px; color:var(--muted); }
.clab-start-ic { font-size:38px; }
.clab-start p { max-width:46ch; line-height:1.6; margin:0; font-size:14px; }
.clab-note { margin:18px 0 0; padding:11px 14px; background:var(--gold-tint); border:1px solid var(--gold-tint-bd); border-radius:11px; font-size:12.5px; color:var(--gold-ink); line-height:1.5; }
.clab-oordeel { display:flex; align-items:flex-start; gap:9px; margin:20px 0 4px; font-family:var(--serif); font-size:16px; line-height:1.5; color:var(--ink); }
.clab-oordeel .hp-diamond { margin-top:6px; flex:none; }
.clab-reshead { font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.clab-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:20px 0 14px; }
.clab-viewctl { display:flex; align-items:center; gap:14px; }
.clab-kol { display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.clab-kolbtn { width:26px; height:26px; border-radius:7px; border:1px solid var(--line); background:var(--panel); color:var(--ink); font-size:15px; font-weight:700; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.clab-kolbtn:hover:not(:disabled) { border-color:var(--gold); color:var(--gold); }
.clab-kolbtn:disabled { opacity:.4; cursor:default; }
.clab-kol b { min-width:14px; text-align:center; color:var(--ink); font-size:13px; }
.clab-cardgrid { display:grid; grid-template-columns:repeat(var(--clab-kol,5),minmax(0,1fr)); gap:14px; }
.clab-ctile { position:relative; padding:0; border:0; background:none; cursor:pointer; border-radius:5.5% / 4%; overflow:hidden; aspect-ratio:488/680; transition:transform .14s ease, box-shadow .14s ease; box-shadow:0 6px 16px rgba(15,23,42,.12); }
.clab-ctile:hover { transform:translateY(-4px) scale(1.02); box-shadow:0 20px 40px rgba(15,23,42,.28); z-index:2; }
.clab-ctile img { width:100%; height:100%; object-fit:cover; display:block; }
.clab-ctile-ph { display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:var(--bg2); font-family:var(--serif); color:var(--muted); padding:12px; text-align:center; }
.clab-ctile-pr { position:absolute; bottom:7px; left:7px; background:rgba(15,23,42,.82); color:#fff; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; }
.clab-ctile-kies { position:absolute; bottom:0; left:0; right:0; padding:10px 0 8px; background:linear-gradient(transparent, rgba(18,48,36,.92)); color:#EAF6EF; font-size:12px; font-weight:600; text-align:center; opacity:0; transform:translateY(6px); transition:.14s; }
.clab-ctile:hover .clab-ctile-kies { opacity:1; transform:none; }
@media(max-width:640px){ .clab-cardgrid { grid-template-columns:repeat(2,1fr) !important; } }

.clab-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:16px; }
.clab-cmdr { display:flex; flex-direction:column; text-align:left; padding:0; background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; cursor:pointer; transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease; font:inherit; }
.clab-cmdr:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(15,23,42,.13); border-color:var(--gold-tint-bd); }
.clab-cmdr-art { aspect-ratio:626/457; position:relative; overflow:hidden; background:linear-gradient(150deg,var(--art,#e3ddce) 0%, var(--bg2) 82%); }
.clab-cmdr-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.clab-have { position:absolute; top:8px; left:8px; background:rgba(30,77,58,.92); color:#EAF6EF; font-size:10px; font-weight:600; letter-spacing:.04em; padding:3px 8px; border-radius:999px; }
.clab-have.sm { font-size:9px; padding:2px 6px; top:6px; left:6px; }
.clab-cmdr-body { display:flex; flex-direction:column; gap:5px; padding:11px 13px 13px; }
.clab-cmdr-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.clab-cmdr-n { font-family:var(--serif); font-size:15.5px; font-weight:600; line-height:1.2; color:var(--ink); }
.clab-pips { display:flex; gap:3px; flex:none; margin-top:3px; }
.clab-pip { width:11px; height:11px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.clab-pip-c { background:#C9C4B6; }
.clab-cmdr-t { font-size:11.5px; color:var(--muted); }
.clab-why { font-size:12.5px; color:var(--body); line-height:1.5; text-wrap:pretty; }
.clab-cmdr-foot { display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.clab-prijs { font-size:12.5px; font-weight:600; color:var(--ink); }
.clab-kies { font-size:12px; font-weight:600; color:var(--gold); }

.clab-back { background:none; border:0; color:var(--muted); font-size:13px; cursor:pointer; padding:16px 0 6px; }
.clab-back:hover { color:var(--ink); }
.clab-chosen { display:flex; gap:26px; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.clab-chosen-card { width:240px; flex:none; aspect-ratio:488/680; border-radius:14px; overflow:hidden; position:relative; background:linear-gradient(150deg,var(--art,#e3ddce) 0%, var(--bg2) 82%); box-shadow:0 12px 30px rgba(15,23,42,.2); }
.clab-chosen-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.clab-chosen-card .clab-ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:16px; font-family:var(--serif); color:rgba(15,23,42,.45); }
.clab-chosen-info { display:flex; flex-direction:column; gap:8px; padding-top:4px; min-width:0; }
.clab-eyebrow { display:flex; align-items:center; gap:8px; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.clab-chosen-info h2 { font-family:var(--serif); font-size:30px; line-height:1.05; margin:2px 0 0; color:var(--ink); }
.clab-chosen-meta { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); }
.clab-why-big { font-size:14px; line-height:1.6; color:var(--body); max-width:56ch; margin:4px 0 0; text-wrap:pretty; }
.clab-chosen-acts { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.clab-chosen-hint { font-size:12px; color:var(--muted); line-height:1.5; margin:10px 0 0; max-width:56ch; }
@media(max-width:720px){ .clab-chosen { flex-direction:column; align-items:center; text-align:center; } .clab-chosen-info { align-items:center; } .clab-chosen-meta { justify-content:center; } .clab-eyebrow { justify-content:center; } }

.clab-synhint { margin:16px 0 0; padding:16px 18px; background:var(--bg2); border:1px dashed var(--line); border-radius:12px; font-size:13.5px; line-height:1.6; color:var(--body); }
.clab-syntools { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:22px; }
.clab-addcard { position:relative; flex:1; min-width:240px; display:flex; align-items:center; gap:10px; background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:2px 12px; }
.clab-ac { position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:0 18px 44px rgba(15,23,42,.18); overflow:hidden auto; max-height:320px; z-index:60; }
.clab-ac-opt { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left; background:none; border:0; padding:9px 14px; font:inherit; font-size:13.5px; color:var(--ink); cursor:pointer; }
.clab-ac-opt + .clab-ac-opt { border-top:1px solid var(--line2); }
.clab-ac-opt:hover, .clab-ac-opt.hi { background:var(--gold-tint); }
.clab-ac-heb { font-size:10.5px; font-weight:600; color:var(--gold-t); flex:none; }
.clab-addcard:focus-within { border-color:var(--gold); box-shadow:0 0 0 3px var(--ring); background:var(--panel); }
.clab-model { display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.clab-model select { font:inherit; font-size:12.5px; text-transform:none; letter-spacing:0; color:var(--ink); background:var(--panel); border:1px solid var(--line3); border-radius:8px; padding:8px 10px; cursor:pointer; }
.clab-eigen { background:var(--primary) !important; }
.clab-syncard .clab-have.sm { top:auto; bottom:6px; left:6px; }
.clab-synhead { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:26px 0 4px; }
.clab-synhead-t { font-family:var(--serif); font-size:19px; color:var(--ink); }
.clab-synsel { font-size:12.5px; font-weight:600; color:var(--gold); background:var(--gold-tint); border:1px solid var(--gold-tint-bd); padding:5px 12px; border-radius:999px; }
.clab-syngroep { margin-top:20px; }
.clab-syngroep-t { display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:10px; }
.clab-syngroep-t span { background:var(--bg2); border:1px solid var(--line); border-radius:999px; padding:1px 8px; font-size:10px; color:var(--faint); }
.clab-syngrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:13px; }
.clab-syncard { position:relative; display:flex; flex-direction:column; background:var(--panel); border:1.5px solid var(--line); border-radius:13px; overflow:hidden; cursor:pointer; transition:border-color .14s ease, box-shadow .14s ease, transform .14s ease; }
.clab-syncard:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(15,23,42,.1); }
.clab-syncard.on { border-color:var(--gold); box-shadow:0 0 0 3px var(--ring); }
.clab-syncard-art { aspect-ratio:626/457; position:relative; overflow:hidden; background:linear-gradient(150deg,var(--art,#e3ddce) 0%, var(--bg2) 82%); }
.clab-syncard-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.clab-check { position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.9); border:1.5px solid var(--gold); color:var(--gold); font-size:14px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.clab-syncard.on .clab-check { background:var(--gold); color:#fff; }
.clab-cardbtns { position:absolute; bottom:8px; right:8px; display:flex; gap:6px; }
.clab-open, .clab-verv { width:26px; height:26px; border-radius:50%; border:0; background:rgba(15,23,42,.6); color:#fff; font-size:12px; cursor:pointer; opacity:0; transition:.14s; display:flex; align-items:center; justify-content:center; }
.clab-syncard:hover .clab-open, .clab-syncard:hover .clab-verv { opacity:1; }
.clab-open:hover, .clab-verv:hover { background:rgba(15,23,42,.9); }
.clab-verv:hover { background:var(--gold); }
.clab-syncard-body { display:flex; flex-direction:column; gap:4px; padding:10px 12px 12px; }
.clab-syncard-n { font-family:var(--serif); font-size:14px; font-weight:600; line-height:1.2; color:var(--ink); }
.clab-syncard-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:2px; }
.clab-prijs.duur { color:var(--red); font-weight:700; }
.clab-duur { background:rgba(220,38,38,.1); border:1px solid rgba(220,38,38,.3); color:var(--red); font-size:10px; font-weight:600; padding:2px 8px; border-radius:999px; cursor:pointer; }
.clab-duur:hover { background:rgba(220,38,38,.18); }
/* Vervang-alternatieven (modal) */
.clab-verv-sheet { max-width:720px; width:100%; }
.clab-vervgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:13px; margin-top:4px; }
.clab-vervcard { display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:13px; overflow:hidden; }
.clab-vervart { position:relative; aspect-ratio:626/457; overflow:hidden; background:linear-gradient(150deg,var(--art,#e3ddce) 0%, var(--bg2) 82%); }
.clab-vervart img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.clab-vervbody { display:flex; flex-direction:column; gap:5px; padding:10px 12px 12px; }
.clab-vervn { font-family:var(--serif); font-size:14px; font-weight:600; line-height:1.2; color:var(--ink); }
.clab-vervfoot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:3px; }

.clab-nieuw { position:absolute; top:8px; left:8px; background:var(--gold); color:#fff; font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:999px; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.clab-dieper { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:26px; padding:18px 20px; background:var(--gold-tint); border:1px solid var(--gold-tint-bd); border-radius:14px; }
.clab-dieper-txt { display:flex; flex-direction:column; gap:3px; flex:1; min-width:220px; }
.clab-dieper-txt b { font-family:var(--serif); font-size:17px; font-weight:600; color:var(--gold-ink); }
.clab-dieper-txt span { font-size:12.5px; color:var(--gold-t); line-height:1.5; }
.clab-bewaar { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:16px; padding:20px 22px; background:linear-gradient(135deg,var(--cta-a),var(--cta-b)); border-radius:16px; color:#EAF6EF; }
.clab-bewaar-txt { display:flex; flex-direction:column; gap:3px; flex:1; min-width:220px; }
.clab-bewaar-txt b { font-family:var(--serif); font-size:18px; font-weight:600; }
.clab-bewaar-txt span { font-size:12.5px; color:rgba(234,246,239,.72); line-height:1.5; }
.clab-bewaar .btn.big { background:#7BC59E; color:#123024; border:0; }
.clab-bewaar .btn.big:hover { background:var(--gold-tint); }

/* ============================================================
   DECK-OPTIMIZER (Optimaliseren-tab)
   ============================================================ */
.opt-intro { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:18px; }
.opt-intro-txt h3 { font-family:var(--serif); font-size:22px; margin:0 0 4px; color:var(--ink); }
.opt-intro-txt p { font-size:13px; line-height:1.6; color:var(--body); max-width:70ch; margin:0; text-wrap:pretty; }
.opt-groepen { display:flex; flex-direction:column; gap:12px; }
.opt-groep { border:1px solid var(--line); border-radius:14px; background:var(--panel); overflow:hidden; }
.opt-groep.open { box-shadow:0 6px 20px rgba(15,23,42,.06); }
.opt-ghead { width:100%; display:flex; align-items:center; gap:12px; background:none; border:0; padding:15px 18px; cursor:pointer; font:inherit; text-align:left; }
.opt-ghead:hover { background:var(--bg2); }
.opt-gt { font-family:var(--serif); font-size:17px; font-weight:600; color:var(--ink); flex:1; }
.opt-gn { font-size:12px; color:var(--muted); font-weight:600; }
.opt-gc { color:var(--faint); font-size:13px; }
.opt-gbody { padding:6px 16px 18px; border-top:1px solid var(--line2); display:flex; flex-direction:column; gap:16px; }
.opt-haal { display:flex; flex-direction:column; align-items:center; gap:8px; padding:22px; text-align:center; }
.opt-haal span { font-size:12.5px; color:var(--muted); }
.opt-leeg { padding:18px; text-align:center; color:var(--muted); font-size:13px; }
.opt-kaart { border:1px solid var(--line2); border-radius:12px; padding:12px 14px; background:var(--bg2); }
.opt-kaart-orig { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; }
.opt-kaart-n { font-family:var(--serif); font-size:15.5px; font-weight:600; color:var(--ink); }
.opt-kaart-pr { font-size:12px; color:var(--muted); }
.opt-tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.opt-tier { display:flex; flex-direction:column; background:var(--panel); border:1.5px solid var(--line); border-radius:11px; overflow:hidden; font:inherit; transition:border-color .13s, box-shadow .13s; }
.opt-tier.on { border-color:var(--gold); box-shadow:0 0 0 3px var(--ring); }
.opt-tier.leeg { opacity:.5; align-items:center; justify-content:center; padding:14px 10px; text-align:center; gap:5px; min-height:64px; }
.opt-tier-none { font-size:11px; color:var(--muted); }
.opt-tier-top { display:flex; align-items:center; gap:7px; padding:8px 10px; cursor:pointer; }
.opt-tier.on .opt-tier-top { background:var(--gold-tint); }
.opt-check { width:18px; height:18px; accent-color:var(--gold); cursor:pointer; flex:none; margin:0; }
.opt-tier-lbl { font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:2px 6px; border-radius:999px; }
.opt-tier-lbl.tier-budget { background:#E3F0E8; color:var(--gold-t); }
.opt-tier-lbl.tier-gangbaar { background:#E4ECF6; color:#37567B; }
.opt-tier-lbl.tier-premium { background:#F5ECD6; color:#8A6D1E; }
.opt-tier-huidig { font-size:8.5px; font-weight:600; color:var(--faint); text-transform:uppercase; letter-spacing:.05em; }
.opt-heb-inline { font-size:9px; font-weight:600; color:var(--gold-t); white-space:nowrap; }
.opt-tier-top .opt-tier-pr { margin-left:auto; font-size:12.5px; font-weight:700; color:var(--ink); }
/* Volledige kaart per optie — leesbaar, 3 naast elkaar te vergelijken */
.opt-tier-cardimg { position:relative; display:block; width:100%; padding:2px 8px 8px; border:0; background:none; cursor:zoom-in; }
.opt-tier-cardimg img { width:100%; display:block; border-radius:4.75%/3.4%; box-shadow:0 2px 8px rgba(15,23,42,.14); }
.opt-cardimg-ph { display:none; }
.opt-tier-cardimg.geenimg .opt-cardimg-ph { display:flex; align-items:center; justify-content:center; aspect-ratio:488/680; background:var(--bg2); border:1px solid var(--line2); border-radius:8px; font-family:var(--serif); color:var(--muted); padding:14px; text-align:center; text-wrap:balance; }
.opt-tier-zoom { position:absolute; top:8px; right:16px; width:26px; height:26px; border-radius:50%; background:rgba(15,23,42,.58); color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .13s; }
.opt-tier-cardimg:hover .opt-tier-zoom { opacity:1; }
.opt-tier-why { font-size:11.5px; line-height:1.45; color:var(--muted); text-wrap:pretty; padding:0 10px 10px; }
.opt-bewaar { position:sticky; bottom:14px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:20px; padding:16px 20px; background:linear-gradient(135deg,var(--cta-a),var(--cta-b)); border-radius:16px; color:#EAF6EF; box-shadow:0 14px 34px rgba(15,23,42,.28); }
.opt-bewaar-txt { flex:1; min-width:220px; display:flex; flex-direction:column; gap:2px; }
.opt-bewaar-txt b { font-family:var(--serif); font-size:17px; font-weight:600; }
.opt-bewaar-txt span { font-size:12px; color:rgba(234,246,239,.72); line-height:1.5; }
.opt-bewaar .btn.big { background:var(--accent-hi); color:var(--accent-hi-ink); border:0; }
.opt-bewaar .btn.big:hover { filter:brightness(1.08); }
@media(max-width:720px){ .opt-tiers { grid-template-columns:1fr; } }
.opt-laden { padding:6px 0 2px; }
.opt-laden .riffleblok { min-height:120px; }
.opt-open { position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:50%; background:rgba(15,23,42,.6); color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .13s; z-index:2; }
.opt-open:hover { background:rgba(15,23,42,.88); }

/* ============================================================
   ALTERNATIEVEN
   ============================================================ */
.alt-top { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.alt-search { flex:1; min-width:260px; position:relative; }
.alt-leeg { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; padding:54px 24px; color:var(--muted); }
.alt-leeg-ic { font-size:34px; }
.alt-leeg p { max-width:48ch; line-height:1.6; margin:0; font-size:14px; }
.alt-chosen { display:flex; gap:24px; align-items:flex-start; margin:24px 0 6px; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.alt-chosen-img { width:180px; flex:none; padding:0; border:0; background:none; cursor:zoom-in; }
.alt-chosen-img img { width:100%; display:block; border-radius:4.75%/3.4%; box-shadow:0 8px 22px rgba(15,23,42,.2); }
.alt-chosen-img.geenimg .opt-cardimg-ph { display:flex; align-items:center; justify-content:center; aspect-ratio:488/680; background:var(--bg2); border:1px solid var(--line2); border-radius:10px; font-family:var(--serif); color:var(--muted); padding:12px; text-align:center; }
.alt-chosen-info { flex:1; min-width:0; }
.alt-chosen-info h2 { font-family:var(--serif); font-size:28px; margin:3px 0 0; color:var(--ink); }
.alt-chosen-meta { font-size:13px; color:var(--muted); margin-top:4px; }
.alt-chosen-hint { font-size:13px; line-height:1.6; color:var(--body); margin:12px 0 0; max-width:60ch; text-wrap:pretty; }
.alt-reshead { margin:22px 0 12px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.alt-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
.alt-card { display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:transform .13s, box-shadow .13s; }
.alt-card:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(15,23,42,.12); }
.alt-cardimg { position:relative; display:block; width:100%; padding:8px 8px 0; border:0; background:none; cursor:zoom-in; }
.alt-cardimg img { width:100%; display:block; border-radius:4.75%/3.4%; }
.alt-cardimg.geenimg .opt-cardimg-ph { display:flex; align-items:center; justify-content:center; aspect-ratio:488/680; background:var(--bg2); border:1px solid var(--line2); border-radius:8px; font-family:var(--serif); color:var(--muted); padding:12px; text-align:center; }
.alt-zoom { position:absolute; top:14px; right:14px; width:26px; height:26px; border-radius:50%; background:rgba(15,23,42,.58); color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .13s; }
.alt-cardimg:hover .alt-zoom { opacity:1; }
.alt-cbody { display:flex; flex-direction:column; gap:5px; padding:10px 12px 12px; }
.alt-crow { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.alt-cn { font-family:var(--serif); font-size:14px; font-weight:600; line-height:1.2; color:var(--ink); }
.alt-cpr { font-size:13px; font-weight:700; color:var(--ink); white-space:nowrap; }
.alt-heb { font-size:10px; font-weight:600; color:var(--gold-t); }
.alt-cwhy { font-size:11.5px; line-height:1.45; color:var(--muted); margin:0; text-wrap:pretty; }
.alt-cacts { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.alt-wish.gekocht { color:var(--gold-t); border-color:var(--gold-tint-bd); background:var(--gold-tint); }
@media(max-width:640px){ .alt-chosen { flex-direction:column; align-items:center; text-align:center; } .alt-chosen-info { text-align:center; } .alt-chosen-img { width:150px; } }
.alt-deckrow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; }
.alt-deckrow-lbl { font-size:12px; font-weight:600; color:var(--muted); }
.alt-deck-select { font:inherit; font-size:13px; color:var(--ink); background:var(--panel); border:1px solid var(--line3); border-radius:8px; padding:8px 10px; cursor:pointer; max-width:300px; }
.alt-deckrow-hint { font-size:12px; color:var(--faint); flex:1; min-width:200px; }
.alt-chosen-acts { margin-top:12px; }