/* reset */
[hidden]{display:none!important}body{margin:0}img{max-width:100%}

:root{
  --bg:#ECEFEB; --panel:#F7F8F5; --ink:#1C232A; --muted:#5B6670; --line:#CBD1D0; --line2:#DDE2E0;
  --accent:#D9822B; --accent-ink:#1C232A; --own:#1C232A; --paint:#2F7A55; --wip:#7C55B0; --wish:#2B66B0; --new:#C2412D;
  --chip:#E1E6E3; --focus:#2B66B0; --c-own:#2B66B0; --c-paint:#1F8452;
  --ground:var(--bg); --hazard:#F2B705; --hazard-ink:#1C232A; --signal:#C8412A; --field:#FFFFFF; --paper:#FFFFFF; --paper-edge:#B9BFB4; --ok:#2F7A55;
  --display:"Chakra Petch", "Barlow Condensed", system-ui, sans-serif;
  --body:"Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond:"Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#161B20; --panel:#1E252B; --ink:#E4E8E6; --muted:#98A3AB; --line:#334049; --line2:#2A343C;
    --accent:#E8964A; --accent-ink:#161B20; --own:#E4E8E6; --paint:#5CC08D; --wip:#AE8CE0; --wish:#6FA5EA; --new:#F07A64;
    --chip:#27313A; --focus:#6FA5EA; --c-own:#5B95DD; --c-paint:#4BA878;
    --field:#12171B; --paper:#D9DCD5; --paper-edge:#454C44; --signal:#E0613F; --ok:#5CC08D;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#161B20; --panel:#1E252B; --ink:#E4E8E6; --muted:#98A3AB; --line:#334049; --line2:#2A343C;
  --accent:#E8964A; --accent-ink:#161B20; --own:#E4E8E6; --paint:#5CC08D; --wip:#AE8CE0; --wish:#6FA5EA; --new:#F07A64;
  --chip:#27313A; --focus:#6FA5EA; --c-own:#5B95DD; --c-paint:#4BA878;
    --field:#12171B; --paper:#D9DCD5; --paper-edge:#454C44; --signal:#E0613F; --ok:#5CC08D;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:15px/1.45 var(--body);padding-inline:16px;padding-block:0 48px}
.wrap{max-width:1180px;margin:0 auto}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
a{color:inherit}

/* header */
.top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;padding-block:22px 14px;border-bottom:3px solid var(--ink);position:relative}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:5px;background:repeating-linear-gradient(-45deg,var(--accent) 0 8px,transparent 8px 16px)}
.brand h1{font:700 34px/1 var(--display);letter-spacing:.02em;margin:0;text-transform:uppercase}
.brand p{margin:6px 0 0;color:var(--muted);font-size:13.5px}
.brand p a{color:var(--muted)}
.who{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.who .lbl{font:600 12px var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.pill{border:1.5px solid var(--ink);background:transparent;border-radius:3px;padding:5px 12px;font:600 14px var(--cond);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.pill[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.pill.ghost{border-style:dashed;border-color:var(--muted);color:var(--muted)}
.addwho{display:flex;gap:6px}
.addwho input{width:130px;border:1.5px solid var(--line);background:var(--panel);border-radius:3px;padding:4px 8px}

/* stats */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:26px}
.kpi{background:var(--panel);padding:12px 14px}
.kpi .k{font:600 11.5px var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.kpi .v{font:600 28px/1.1 var(--display);font-variant-numeric:tabular-nums;margin-top:2px}
.kpi .v small{font:500 14px var(--body);color:var(--muted)}
.bar{height:6px;background:var(--line2);margin-top:8px;display:flex}
.bar i{display:block;height:100%}
@media (max-width:720px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* controls */
.fbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);padding-block:12px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--line)}
.row1{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.search{flex:1 1 240px;border:1.5px solid var(--line);background:var(--panel);border-radius:3px;padding:8px 10px}
.seg{display:flex;flex-wrap:wrap;border:1.5px solid var(--line);border-radius:3px;overflow:hidden}
.seg button{border:0;background:var(--panel);padding:7px 11px;font:600 13.5px var(--cond);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;color:var(--muted);border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.seg button .n{font:500 11px var(--mono);opacity:.75;margin-left:4px}
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.chip{flex:0 0 auto;border:1px solid var(--line);background:var(--chip);border-radius:999px;padding:3px 11px;font:500 13px var(--cond);letter-spacing:.03em;cursor:pointer;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.selrow{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.selrow select{border:1.5px solid var(--line);background:var(--panel);border-radius:3px;padding:5px 8px}

/* groups */
.list{display:flex;flex-direction:column;gap:18px;margin-top:18px}
.sechead{font:700 13px var(--cond);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:14px 0 -6px;display:flex;align-items:center;gap:10px}
.sechead::after{content:"";flex:1;height:1px;background:var(--line)}
.grp{background:var(--panel);border:1px solid var(--line);border-radius:4px}
.gh{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 14px;border-bottom:1px solid var(--line2)}
.gh h3{font:600 17px/1.2 var(--display);margin:0;flex:1 1 260px;text-wrap:balance}
.gh .meta{font:500 12px var(--mono);color:var(--muted)}
.gprog{display:flex;align-items:center;gap:8px;font:600 13px var(--cond);letter-spacing:.04em}
.pips{display:flex;gap:3px}
.pips i{width:10px;height:10px;border:1.5px solid var(--ink);border-radius:50%;display:block}
.pips i.on{background:var(--ink)}
.pips i.pt{background:var(--paint);border-color:var(--paint)}
.done{font:700 11px var(--cond);letter-spacing:.12em;text-transform:uppercase;background:var(--paint);color:var(--bg);padding:2px 7px;border-radius:2px}

.it{display:grid;grid-template-columns:minmax(0,1fr) 92px 50px auto;gap:10px;align-items:center;padding:8px 14px;border-top:1px solid var(--line2)}
.it:first-of-type{border-top:0}
.it.owned{box-shadow:inset 3px 0 0 var(--ink)}
.it.painted{box-shadow:inset 3px 0 0 var(--paint)}
.nm{min-width:0}
.nm b{font:600 15.5px var(--body)}
.nm .mdl{display:block;font:400 12px var(--mono);color:var(--muted);overflow-wrap:anywhere}
.tag{display:inline-block;font:700 10.5px var(--cond);letter-spacing:.12em;text-transform:uppercase;padding:1px 6px;border-radius:2px;margin-left:6px;vertical-align:2px}
.tag.new{background:var(--new);color:var(--bg)}
.tag.cus{border:1px solid var(--muted);color:var(--muted)}
.others{font:500 12px var(--cond);color:var(--muted);letter-spacing:.03em}
.code{font:400 12px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.yr{font:400 12px var(--mono);color:var(--muted)}
.acts{display:flex;align-items:center;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.step{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:3px;background:var(--bg)}
.step button{width:28px;height:28px;border:0;background:none;cursor:pointer;font:600 16px var(--mono);color:var(--muted)}
.step button:hover{color:var(--ink)}
.step output{min-width:22px;text-align:center;font:600 14px var(--mono);font-variant-numeric:tabular-nums}
.step .cap{font:600 10.5px var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-left:7px}
.step.q.has{border-color:var(--ink)}
.step.p.has{border-color:var(--paint)} .step.p.has output{color:var(--paint)}
.tg{border:1.5px solid var(--line);background:none;border-radius:3px;height:31px;padding:0 8px;font:700 11.5px var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.tg.wip[aria-pressed="true"]{border-color:var(--wip);color:var(--wip);background:color-mix(in srgb,var(--wip) 12%,transparent)}
.tg.wish[aria-pressed="true"]{border-color:var(--wish);color:var(--wish);background:color-mix(in srgb,var(--wish) 12%,transparent)}
.lnk{font:600 11.5px var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--muted)}
.lnk:hover{color:var(--ink)}
@media (max-width:760px){
  .it{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .it .code{grid-column:2;text-align:right}
  .it .yr{display:none}
  .it .acts{grid-column:1 / -1;justify-content:flex-start}
}

.empty{padding:40px 16px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:4px}
.status{font:500 12.5px var(--mono);color:var(--muted)}
.status.err{color:var(--new)}

/* footer panels */
.foot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:34px}
@media (max-width:760px){.foot{grid-template-columns:1fr}}
.box{border:1px solid var(--line);border-radius:4px;padding:14px 16px;background:var(--panel)}
.box h4{font:600 16px var(--display);margin:0 0 6px}
.box p{margin:0 0 10px;color:var(--muted);font-size:14px;max-width:62ch}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.form input{border:1.5px solid var(--line);background:var(--bg);border-radius:3px;padding:6px 8px;min-width:0}
.form .full{grid-column:1 / -1}
.mbtn{border:0;background:var(--accent);color:var(--accent-ink);border-radius:3px;padding:8px 14px;font:700 14px var(--cond);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.mbtn.sec{background:none;border:1.5px solid var(--ink);color:var(--ink)}
.prompt{font:500 13px var(--mono);background:var(--bg);border:1px solid var(--line);padding:8px 10px;border-radius:3px;display:flex;gap:8px;align-items:center;justify-content:space-between}
@media (prefers-reduced-motion:no-preference){.pill,.seg button,.chip,.tg,.step button{transition:background .12s,color .12s,border-color .12s}}

/* tabs */
.tabs{display:flex;gap:0;margin-top:22px;border-bottom:1.5px solid var(--line)}
.tabs a{font:600 15px var(--cond);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--muted);padding:9px 16px 8px;border:1.5px solid transparent;border-bottom:0;margin-bottom:-1.5px;border-radius:3px 3px 0 0;display:flex;gap:8px;align-items:center}
.tabs a[aria-current="page"]{color:var(--ink);border-color:var(--line);background:var(--bg)}
.tabs .cnt{font:600 11px var(--mono);background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:1px 7px}
.stkbtn{border:1.5px dashed var(--line);background:none;border-radius:3px;height:31px;padding:0 8px;font:700 11.5px var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.stkbtn:hover{color:var(--ink);border-color:var(--ink)}
.stkbtn.flash{border-style:solid;border-color:var(--accent);color:var(--ink)}
#stk{margin-top:22px}
#stk .intro{margin:0 0 18px;color:var(--muted);max-width:70ch}
#stk .src{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#stk .src select{width:auto;flex:1 1 140px}
#stk .srcnote{font-size:.85rem;color:var(--muted);margin:0}

/* ---- naamstickers ---- */
#stk .grid{display:grid;grid-template-columns:340px 1fr;gap:24px;align-items:start}
@media (max-width:860px){#stk .grid{grid-template-columns:1fr}}
#stk .controls{background:var(--panel);border:1px solid var(--line);padding:18px;display:flex;flex-direction:column;gap:18px}
#stk fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
#stk legend{font-family:var(--display);font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;padding:0;margin-bottom:8px;display:flex;align-items:center;gap:8px}
#stk legend::before{content:"";width:10px;height:10px;background:var(--signal)}
#stk label{font-size:.9rem;font-weight:600;color:var(--muted);display:flex;flex-direction:column;gap:4px}
#stk label .lt{display:flex;gap:6px;align-items:baseline}
#stk .row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
#stk .row3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
#stk input[type=number],#stk input[type=text],#stk select,#stk textarea{font:500 1rem var(--body);color:var(--ink);background:var(--field);border:1px solid var(--line);padding:7px 9px;width:100%;border-radius:2px}
#stk input[type=number]{font-family:var(--mono);font-size:.92rem}
#stk textarea{font-family:var(--mono);font-size:.9rem;min-height:170px;resize:vertical;text-transform:uppercase}
#stk input[type=color]{width:100%;height:36px;border:1px solid var(--line);background:var(--field);padding:2px;border-radius:2px}
#stk input[type=range]{width:100%;accent-color:var(--signal)}
#stk .check{flex-direction:row;align-items:center;gap:8px;color:var(--ink);font-weight:500}
#stk .check input{width:18px;height:18px;accent-color:var(--signal)}
#stk :focus-visible{outline:2px solid var(--focus);outline-offset:2px}
#stk .hint{font-size:.85rem;color:var(--muted);margin:0}
#stk .unit{font-family:var(--mono);font-size:.78rem;font-weight:400;color:var(--muted)}
#stk .stage{display:flex;flex-direction:column;gap:22px;min-width:0}
#stk .card{background:var(--panel);border:1px solid var(--line);padding:18px;min-width:0}
#stk .card h2{font-family:var(--display);font-weight:400;font-size:1.1rem;letter-spacing:.05em;text-transform:uppercase;margin:0 0 12px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
#stk .card h2 small{font-family:var(--mono);font-size:.8rem;color:var(--muted);letter-spacing:0;text-transform:none}
#stk .bench{background:repeating-linear-gradient(90deg,transparent 0 23px,color-mix(in srgb,var(--line) 60%,transparent) 23px 24px),repeating-linear-gradient(0deg,transparent 0 23px,color-mix(in srgb,var(--line) 60%,transparent) 23px 24px),var(--ground);padding:28px 16px 20px;display:flex;justify-content:center;overflow:hidden}
#stk #zoom{max-width:100%;height:auto;display:block}
#stk .sheet-scroll{overflow-x:auto;display:flex;justify-content:center;background:var(--ground);padding:16px}
#stk #sheet{max-width:100%;height:auto;box-shadow:0 1px 0 var(--paper-edge),0 6px 18px rgba(0,0,0,.14)}
#stk .pager{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
#stk .pager button{font:600 .9rem var(--mono);padding:5px 10px;border:1px solid var(--line);background:var(--field);color:var(--ink);cursor:pointer;border-radius:2px}
#stk .pager button[aria-pressed=true]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
#stk .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0 0}
#stk .stat{border-left:3px solid var(--hazard);padding:2px 0 2px 10px}
#stk .stat b{display:block;font-family:var(--mono);font-size:1.15rem;font-variant-numeric:tabular-nums}
#stk .stat span{font-size:.82rem;color:var(--muted)}
#stk .actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}
#stk .btn{font:700 1rem var(--body);letter-spacing:.04em;text-transform:uppercase;padding:10px 16px;border:2px solid var(--ink);background:var(--hazard);color:var(--hazard-ink);cursor:pointer;border-radius:2px}
#stk .btn.secondary{background:transparent;color:var(--ink)}
#stk .btn:hover{filter:brightness(1.05)}
#stk .btn:disabled{opacity:.5;cursor:default}
#stk #stkStatus{font-size:.9rem;color:var(--muted)}
#stk #stkStatus.ok{color:var(--ok)}
#stk #fallback img{max-width:100%;border:1px dashed var(--line);margin-top:10px;background:repeating-conic-gradient(#ddd 0 25%,#fff 0 50%) 0 0/16px 16px}
#stk ol.steps{margin:0;padding-left:1.3rem;display:flex;flex-direction:column;gap:6px;max-width:70ch}
#stk ol.steps b{font-weight:700}
#stk code{font-family:var(--mono);font-size:.88em;background:var(--field);border:1px solid var(--line);padding:0 4px}
@media (prefers-reduced-motion:reduce){}

.b-ink{background:var(--ink)}.b-paint{background:var(--paint)}.b-wip{background:var(--wip)}.m0{margin:0}.mt10{margin-top:10px}.hrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ---- inlogpagina ---- */
body.loginpage{display:flex;justify-content:center;padding-block:48px;padding-top:calc(var(--topgap,0px) + 48px)}
.lg{width:100%;max-width:380px;display:flex;flex-direction:column;gap:16px}
.lg-brand{font:700 34px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;margin:0;padding-bottom:12px;border-bottom:3px solid var(--ink);position:relative}
.lg-brand::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:5px;background:repeating-linear-gradient(-45deg,var(--accent) 0 8px,transparent 8px 16px)}
.lg-card{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:18px;display:flex;flex-direction:column;gap:8px;margin-top:10px}
.lg-card h2{font:600 18px var(--display);margin:0 0 4px}
.lg-card p{margin:0 0 4px;color:var(--muted);font-size:14px}
.lg-card label{font:600 12px var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.lg-card input{border:1.5px solid var(--line);background:var(--bg);border-radius:3px;padding:9px 10px;font-size:16px}
.lg-card .mbtn{margin-top:8px;padding:10px 14px}
.lg-qr{display:flex;justify-content:center;background:#fff;border-radius:4px;padding:8px}
.lg-qr img{image-rendering:pixelated;width:200px;height:200px}
.lg-small{font-size:13px!important}
.lg-secret{font:500 14px var(--mono);background:var(--bg);border:1px solid var(--line);padding:8px;border-radius:3px;word-break:break-all;user-select:all}
.lg-msg{color:var(--new);min-height:1.4em;margin:0}
/* ---- account & beheer ---- */
.acc{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:22px}
.acc .box h4{margin-bottom:10px}
.acc table{width:100%;border-collapse:collapse;font-size:14px}
.acc th{font:600 11.5px var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.acc td{padding:8px;border-bottom:1px solid var(--line2);vertical-align:top}
.acc .tbl{overflow-x:auto}
.acc .mono{font:400 12.5px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.acc .actions{display:flex;flex-wrap:wrap;gap:6px}
.acc .actions button{border:1.5px solid var(--line);background:none;border-radius:3px;padding:3px 8px;font:600 12px var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.acc .actions button:hover{color:var(--ink);border-color:var(--ink)}
.acc .actions button.danger:hover{color:var(--new);border-color:var(--new)}
.acc .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.acc .grid2 input,.acc .grid2 select,.acc .flt select{border:1.5px solid var(--line);background:var(--bg);border-radius:3px;padding:7px 8px;min-width:0}
.acc .grid2 .full{grid-column:1/-1}
@media (max-width:640px){.acc .grid2{grid-template-columns:1fr}}
.pill-s{display:inline-block;font:700 10.5px var(--cond);letter-spacing:.1em;text-transform:uppercase;padding:1px 6px;border-radius:2px;border:1px solid currentColor}
.pill-s.ok{color:var(--paint)}.pill-s.bad{color:var(--new)}.pill-s.adm{color:var(--accent)}
.me{font:500 13px var(--cond);letter-spacing:.04em;color:var(--muted)}
.me button{border:0;background:none;color:var(--muted);text-decoration:underline;cursor:pointer;font:inherit;padding:0}
.ro-note{font:500 13px var(--body);color:var(--muted);padding:8px 12px;border:1px dashed var(--line);border-radius:4px;margin-top:12px}
.it.ro .step button,.it.ro .tg.wip,.it.ro .tg.wish{opacity:.35;pointer-events:none}
.flt{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.hdr-r{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
@media (max-width:640px){.hdr-r{align-items:flex-start}}
/* ---- werklijst ---- */
.wl{margin-top:22px}
.wl-head{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
.wl-prog{display:flex;align-items:center;gap:10px;font:600 14px var(--cond);letter-spacing:.04em;min-width:220px;flex:0 1 300px}
.wl-prog .bar{flex:1;margin:0}
.wl-grp{margin-top:20px}
.wl-gh{font:700 13px var(--cond);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px;margin-bottom:8px}
.wl-gh::after{content:"";flex:1;height:1px;background:var(--line)}
.wl-gh .c{font:500 12px var(--mono);letter-spacing:0}
.wl-list{background:var(--panel);border:1px solid var(--line);border-radius:4px}
.wl-it{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;padding:11px 14px;border-top:1px solid var(--line2)}
.wl-it:first-child{border-top:0}
.wl-ck{appearance:none;width:22px;height:22px;border:2px solid var(--ink);border-radius:3px;margin:1px 0 0;cursor:pointer;background:var(--bg)}
.wl-ck:checked{background:var(--paint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat;border-color:var(--paint)}
.wl-ck:disabled{cursor:default;opacity:.8}
.wl-tx b{font:600 15.5px var(--body);display:block}
.wl-tx p{margin:2px 0 0;color:var(--muted);font-size:14px;max-width:65ch}
.wl-it.wl-done .wl-tx b{text-decoration:line-through;text-decoration-thickness:1.5px;color:var(--muted)}
.wl-meta{display:flex;gap:6px;align-items:center}
.wl-date{font:400 12px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.wl-pr{font:700 11px var(--cond);letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;border-radius:2px;border:1.5px solid currentColor;background:none}
.wl-pr.hoog{color:var(--new)}.wl-pr.middel{color:var(--accent)}.wl-pr.laag{color:var(--muted)}
button.wl-pr{cursor:pointer}
.wl-del{border:0;background:none;color:var(--muted);cursor:pointer;font:600 15px var(--mono);padding:0 4px}
.wl-del:hover{color:var(--new)}
.grid3{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:8px}
.grid3 input,.grid3 select{border:1.5px solid var(--line);background:var(--bg);border-radius:3px;padding:7px 8px;min-width:0}
.grid3 .full{grid-column:1/-1}
@media (max-width:640px){.grid3{grid-template-columns:1fr}.wl-it{grid-template-columns:auto minmax(0,1fr)}.wl-meta{grid-column:2}}
.wl-empty{padding:28px 16px;text-align:center;color:var(--muted)}
.rq td{font-size:14px}
.rq .rq-by{font:500 13px var(--cond);color:var(--muted)}
.rq select{border:1.5px solid var(--line);background:var(--bg);border-radius:3px;padding:3px 6px;font:600 12px var(--cond)}
.rq-copy{width:100%;min-height:140px;margin-top:10px;font:400 13px var(--mono);border:1.5px solid var(--line);background:var(--bg);border-radius:3px;padding:8px}
.st{display:inline-block;font:700 10.5px var(--cond);letter-spacing:.1em;text-transform:uppercase;padding:1px 6px;border-radius:2px;border:1px solid currentColor}
.st.nieuw{color:var(--accent)}.st.doorgegeven{color:var(--wish)}.st.gepland{color:var(--wip)}.st.gedaan{color:var(--paint)}.st.afgewezen{color:var(--muted)}
/* ---- foto's in de lijst ---- */
.it{grid-template-columns:44px minmax(0,1fr) 92px 50px auto}
.thumb{width:44px;height:56px;object-fit:contain;background:var(--bg);border-radius:3px;display:block}
.thumb.none{background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpolygon points='16,4 26,10 26,22 16,28 6,22 6,10' fill='none' stroke='%238a949c' stroke-width='1.6'/%3E%3C/svg%3E") center/22px no-repeat}
@media (max-width:760px){
  .it{grid-template-columns:44px minmax(0,1fr) auto}
  .it .code{grid-column:3}
  .it .acts{grid-column:1 / -1}
}
.wl-mark{width:22px;height:22px;border:2px solid var(--line);border-radius:3px;display:grid;place-items:center;font:700 13px var(--mono);color:var(--bg);margin-top:1px}
.wl-mark.on{background:var(--paint);border-color:var(--paint)}
.mono{font:400 12.5px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
/* werklijst: vaste lijst, geen afvinkvakjes */
.wl-mark{border:0;width:22px;height:22px}
.wl-mark:not(.on)::before{content:"";width:8px;height:8px;border-radius:50%;border:2px solid var(--line)}
.wl-mark.on{border-radius:50%}
.wl table{width:100%;border-collapse:collapse;font-size:14px}
.wl th{font:600 11.5px var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.wl td{padding:8px;border-bottom:1px solid var(--line2);vertical-align:top}
.wl .tbl{overflow-x:auto}
.rq td b{font-weight:600}
/* ---- pack gekocht & eigen foto's ---- */
.packbtn{border:1.5px solid var(--line);background:none;border-radius:3px;padding:3px 9px;font:700 11.5px var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.packbtn:hover{color:var(--ink);border-color:var(--ink)}
.packbtn[data-armed="1"]{border-color:var(--accent);color:var(--ink);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.packask{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;font:600 13px var(--cond);color:var(--ink)}
.packask .packbtn{padding:7px 12px;font-size:12.5px;min-height:36px}
.packask .packbtn.yes{border-color:var(--accent);color:var(--ink);background:color-mix(in srgb,var(--accent) 18%,transparent)}
.packask.done{color:var(--muted)}
.lines-list{display:grid;gap:6px;margin:10px 0}
.lines-list label{display:flex;gap:10px;align-items:flex-start;padding:6px 8px;border:1px solid var(--line2);border-radius:4px;cursor:pointer}
.lines-list label small{display:block;color:var(--muted);font-size:12px}
.lines-list .opt{border-style:dashed}
.lines-list input{margin-top:3px}
.tg.phbtn[aria-expanded="true"]{border-color:var(--ink);color:var(--ink)}
.thumb.own{outline:2px solid var(--paint);outline-offset:1px}
.ph-panel{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;padding:10px 0 4px}
.ph-tile{margin:0;display:flex;flex-direction:column;gap:4px}
.ph-tile img{width:120px;height:120px;object-fit:cover;border-radius:4px;border:1px solid var(--line);display:block;background:var(--bg)}
.ph-tile figcaption{font:400 11.5px var(--mono);color:var(--muted);display:flex;gap:6px;align-items:center}
.ph-del{border:0;background:none;color:var(--muted);text-decoration:underline;cursor:pointer;font:inherit;padding:0}
.ph-del:hover{color:var(--new)}
.ph-up{cursor:pointer}
.ph-up .mbtn{display:inline-block}
.ph-msg{align-self:center}
/* ---- serverstatus ---- */
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 18px;margin:10px 0 0;font-size:14px}
.kv dt{font:600 11.5px var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.kv dd{margin:0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sync-ok,.sync-bad{border-radius:4px;padding:10px 12px;font-size:14px}
.sync-ok{border:1px solid color-mix(in srgb,var(--paint) 45%,transparent);background:color-mix(in srgb,var(--paint) 9%,transparent)}
.sync-bad{border:1px solid color-mix(in srgb,var(--new) 50%,transparent);background:color-mix(in srgb,var(--new) 9%,transparent)}
.logbox{font:400 12px/1.5 var(--mono);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:8px 10px;max-height:420px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.logbox .l-warn{color:var(--new)}
.logbox .l-req{color:var(--muted)}
.logbox .l-ts{color:var(--muted)}
.check-s{font-size:13px;color:var(--muted);display:flex;gap:6px;align-items:center}
.sys-banner{margin-top:18px;border:1px solid color-mix(in srgb,var(--new) 50%,transparent);background:color-mix(in srgb,var(--new) 9%,transparent);border-radius:4px;padding:10px 14px;font-size:14px}
.sys-banner a{color:inherit;font-weight:600}

/* ---------- menu op de telefoon ---------- */
@media (max-width:700px){
  .tabs{flex-wrap:wrap;gap:6px;border-bottom:0;margin-top:20px}
  .tabs a{border:1.5px solid var(--line);border-radius:3px;margin:0;padding:6px 10px;font-size:13px;letter-spacing:.07em}
  .tabs a[aria-current="page"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  .brand h1{font-size:28px}
}

/* ---------- foto vergroten ---------- */
img.thumb,.ph-tile img{cursor:zoom-in}
.lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;color:#fff}
.lb::backdrop{background:rgba(10,12,14,.88)}
.lb[open]{display:flex;flex-direction:column}
.lb-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));font:500 13px var(--mono)}
.lb-cap{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-count{color:#bbb;font-variant-numeric:tabular-nums}
.lb-close{border:1.5px solid #fff;background:none;color:#fff;border-radius:3px;width:36px;height:36px;font:600 22px/1 var(--mono);cursor:pointer}
.lb-body{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 8px 16px}
#lbImg{max-width:calc(100vw - 112px);max-height:calc(100vh - 90px);object-fit:contain;border-radius:3px;background:#222}
.lb-nav{flex:0 0 auto;border:0;background:rgba(255,255,255,.12);color:#fff;border-radius:3px;width:44px;height:64px;font:600 30px/1 var(--mono);cursor:pointer}
.lb-nav:hover,.lb-close:hover{background:rgba(255,255,255,.22)}
@media (max-width:640px){#lbImg{max-width:100vw}.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.35)}#lbPrev{left:4px}#lbNext{right:4px}.lb-body{padding:0 0 12px}}

/* ---------- lances en stars ---------- */
.ln{margin-top:22px}
.ln-head{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.ln-intro{margin:0;color:var(--muted);max-width:70ch}
.ln select,.ln input{border:1.5px solid var(--line);background:var(--panel);color:var(--ink);border-radius:3px;padding:6px 8px;font:inherit;min-width:0;max-width:100%}
.ln .wl-gh{margin-top:18px}
.ln-card{background:var(--panel);border:1px solid var(--line);border-radius:4px;margin-bottom:10px}
.ln-card.open{border-color:var(--ink)}
.ln-top{display:flex;align-items:center;gap:12px;padding:10px 14px}
.ln-toggle{flex:1;min-width:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;padding:0;display:flex;flex-direction:column;gap:2px}
.ln-toggle b{font:700 17px var(--cond);letter-spacing:.04em;text-transform:uppercase}
.ln-toggle b::before{content:"▸ ";color:var(--muted)}
.ln-card.open .ln-toggle b::before{content:"▾ "}
.ln-sub{font:400 12.5px var(--mono);color:var(--muted)}
.ln-sum{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.ln-big{font:700 20px var(--cond);letter-spacing:.03em;font-variant-numeric:tabular-nums}
.ln-note{margin:0;padding:0 14px 10px;font-size:13.5px;color:var(--muted)}
.ln-body{border-top:1px solid var(--line2);padding:12px 14px;display:flex;flex-direction:column;gap:12px}
.ln-set{display:flex;flex-wrap:wrap;gap:8px}
.ln-set input{flex:1 1 180px}
.ln-units{display:flex;flex-direction:column;border:1px solid var(--line2);border-radius:4px;background:var(--bg)}
.ln-units>.status{padding:12px}
.ln-unit{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1.3fr) 110px auto;gap:10px;align-items:center;padding:8px 10px;border-top:1px solid var(--line2)}
.ln-unit:first-child{border-top:0}
.ln-nm b{font-weight:600}
.ln-warn{color:var(--new);font-size:13px}
.ln-var select{width:100%}
.ln-val{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.ln-val input{width:100px;text-align:right}
.ln-pts{font:600 14px var(--mono);font-variant-numeric:tabular-nums}
.ln-ton{font:400 12px var(--mono);color:var(--muted)}
.ln-add select{width:100%}
.ln-foot{margin:0;font:500 13px var(--mono)}
.ln-cmp{border-collapse:collapse;width:100%;max-width:560px;font-variant-numeric:tabular-nums}
.ln-cmp th,.ln-cmp td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--line2)}
.ln-cmp tr:first-child td{font-weight:700}
.cmp-ok{color:var(--ok);font-weight:600}
.cmp-bad{color:var(--new);font-weight:600}
@media (max-width:640px){
  .ln-unit{grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"th nm x" "th var var" "th val val"}
  .ln-unit>.thumb{grid-area:th;align-self:start}.ln-nm{grid-area:nm}.ln-var{grid-area:var}.ln-unit>.wl-del{grid-area:x}
  .ln-val{grid-area:val;flex-direction:row;justify-content:space-between;align-items:center}
}
@media (max-width:520px){.kv{grid-template-columns:minmax(0,1fr);gap:0}.kv dt{margin-top:8px}}

/* ---------- header en menu blijven staan ---------- */
html{scroll-padding-top:calc(var(--navh,52px) + env(safe-area-inset-top,0px) + 12px)}
:root{--topgap:env(safe-area-inset-top,0px)}
body{padding-top:var(--topgap)}
body::before{content:"";position:fixed;left:0;right:0;top:0;height:env(safe-area-inset-top,0px);background:var(--band,#070c16);z-index:20}
.tabs{position:sticky;top:env(safe-area-inset-top,0px);z-index:8;background:var(--bg);padding-top:6px;align-items:flex-end}
.tabs.stuck{box-shadow:0 6px 8px -8px rgba(0,0,0,.35)}
.tabs-brand{display:none;align-items:center;gap:8px;align-self:center;margin-right:10px;padding-bottom:2px}
.tabs-brand b{font:700 17px/1 var(--display);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.tabs.stuck .tabs-brand{display:flex}
.fbar{top:calc(var(--navh,52px) + env(safe-area-inset-top,0px))}
@media (max-width:1000px){.tabs-brand b{display:none}}
@media (max-width:700px){
  .tabs{padding-block:6px 8px;align-items:center;border-bottom:1px solid var(--line)}
  .tabs-brand{margin-right:0}
  .fbar{position:static}
}

/* ---------- startpagina ---------- */
.st-page{margin-top:24px;display:flex;flex-direction:column;gap:18px}
.st-hero{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:8px 18px}
.st-hero h2{font:700 26px/1.1 var(--display);letter-spacing:.02em;margin:0;text-transform:uppercase}
.st-sub{margin:6px 0 0;color:var(--muted)}
.st-hero-r{font:500 12.5px var(--mono);color:var(--muted)}
.st-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.st-tile{background:var(--panel);border:0;text-align:left;color:inherit;padding:14px 16px;display:flex;flex-direction:column;gap:4px;min-width:0;font:inherit}
button.st-tile{cursor:pointer}
button.st-tile:hover{background:var(--bg)}
.st-tile .k{font:600 11.5px var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.st-tile .v{font:700 30px/1.05 var(--cond);font-variant-numeric:tabular-nums}
.st-tile .s{font-size:13px;color:var(--muted)}
.st-tile .bar{margin-top:6px}
.st-tile .go{margin-top:auto;padding-top:6px;font:600 12px var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.st-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.st-cols h4,.st-news h4{margin:0 0 10px;font-size:18px}
.st-feed,.st-packs,.st-newslist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.st-day{font:600 11.5px var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:10px 0 4px}
.st-day:first-child{margin-top:0}
.st-ev{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:10px;align-items:center;padding:5px 0;border-bottom:1px solid var(--line2)}
.st-dot{width:9px;height:9px;border-radius:50%}
.st-by{font:400 12px var(--mono);color:var(--muted)}
.st-pack{width:100%;text-align:left;border:0;border-bottom:1px solid var(--line2);background:none;padding:8px 0;display:flex;flex-direction:column;gap:2px;cursor:pointer;color:inherit;font:inherit}
.st-pack:hover b{text-decoration:underline}
.st-newslist li{padding:6px 0;border-bottom:1px solid var(--line2)}
.st-newslist p{margin:2px 0 0;color:var(--muted);font-size:14px}
.st-more{display:inline-block;margin-top:10px;font:600 13px var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);text-decoration:none}
.st-more:hover{text-decoration:underline}
.st-help{margin-top:6px}
.st-lead{margin:0 0 12px;max-width:75ch}
.st-parts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
.st-part{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:0 14px}
.st-part[open]{border-color:var(--ink);padding-bottom:12px}
.st-part summary{cursor:pointer;padding:12px 0;display:flex;flex-direction:column;gap:2px;list-style:none}
.st-part summary::-webkit-details-marker{display:none}
.st-part summary b{font:700 16px var(--cond);letter-spacing:.06em;text-transform:uppercase}
.st-part summary b::before{content:"▸ ";color:var(--muted)}
.st-part[open] summary b::before{content:"▾ "}
.st-part summary span{color:var(--muted);font-size:14px}
.st-part ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.st-part .st-more{margin-top:12px}
@media (max-width:900px){.st-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.st-cols,.st-parts{grid-template-columns:minmax(0,1fr)}.st-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.st-tile .v{font-size:26px}}
@media (max-width:900px) and (min-width:701px){.st-tile:last-child{grid-column:span 2}}
@media (max-width:700px){.st-tile:last-child{grid-column:1/-1}}
/* iPhone: ruimte voor klok, camera-eiland en (liggend) de zijkanten */
body{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (display-mode:standalone){:root{--topgap:calc(env(safe-area-inset-top,0px) + 6px)}}

/* ---------- details per mech ---------- */
.dtags{display:block;margin-top:3px}
.dtags .tag:first-child{margin-left:0}
.camo{font:italic 500 13px var(--body);color:var(--muted);margin-right:6px}
.tag.stage{border:1px solid var(--wip);color:var(--wip)}
.tag.stk-ok{border:1px solid var(--paint);color:var(--paint)}
.tag.stk-part{border:1px dashed var(--muted);color:var(--muted)}
.tag.note{border:1px solid var(--line);color:var(--muted);cursor:help}
.det-panel{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 18px;padding:12px 0 6px;border-top:1px dashed var(--line2);margin-top:4px}
.det-row{display:flex;flex-direction:column;gap:4px;min-width:0}
.det-row .cap,.det-f .cap{font:600 11px var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.det-stage button{padding:5px 9px;font-size:12.5px}
.det-row .step{align-self:flex-start}
.det-row .step output{min-width:42px}
.det-f{display:flex;flex-direction:column;gap:4px;min-width:0}
.det-f input,.det-f textarea,.det-cu input{border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:3px;padding:6px 8px;font:inherit;min-width:0;width:100%}
.det-f textarea{resize:vertical;min-height:40px}
.det-f input:disabled,.det-f textarea:disabled{opacity:.75}
.det-cu{grid-column:1 / -1;border:1px solid var(--line);border-radius:4px;padding:10px 12px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0}
.det-cu legend{font:600 12px var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0 4px}
.det-cu .hrow{grid-column:1 / -1}
.det-msg{grid-column:1 / -1}
@media (max-width:760px){.det-panel{grid-template-columns:minmax(0,1fr)}.det-cu{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.det-cu input:first-of-type{grid-column:1 / -1}}

/* ---------- menu: korter label op de telefoon ---------- */
.tab-short{display:none}
@media (max-width:700px){.tab-long{display:none}.tab-short{display:inline}}

/* ---------- rekenhulp ---------- */
.calc{margin-top:22px;display:flex;flex-direction:column;gap:16px}
.calc-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.calc-res{position:sticky;top:calc(var(--navh,52px) + env(safe-area-inset-top,0px));z-index:4;background:var(--panel);border:1.5px solid var(--ink);border-radius:4px;padding:12px 16px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px 18px;align-items:center}
.calc-tnbox{display:flex;flex-direction:column;align-items:center;min-width:84px}
.calc-tnbox .k{font:600 11px var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.calc-tn{font:700 44px/1 var(--cond);font-variant-numeric:tabular-nums}
.calc-info{display:flex;flex-direction:column;gap:6px;min-width:0}
.calc-pct{font:600 16px var(--body)}
.calc-info .bar{margin:0;height:8px}
.calc-sum{font:400 12px var(--mono);color:var(--muted);overflow-wrap:anywhere}
.calc-dice{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.calc-roll{font:700 14px var(--mono);padding:3px 8px;border-radius:3px}
.calc-roll.hit{background:var(--paint);color:var(--bg)}
.calc-roll.miss{background:var(--new);color:var(--bg)}
.calc-mods{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:4px}
.calc-row{display:flex;justify-content:space-between;align-items:center;gap:8px 16px;padding:10px 14px;border-top:1px solid var(--line2);flex-wrap:wrap}
.calc-row:first-child{border-top:0}
.calc-lab{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 180px}
.calc-lab b{font:600 15px var(--body)}
.calc-lab span{font-size:12.5px;color:var(--muted)}
.calc-seg button{display:flex;flex-direction:column;align-items:center;gap:0;padding:6px 10px;min-width:54px}
.calc-seg button small{font:500 11px var(--mono);letter-spacing:0;opacity:.8}
.calc-step output{min-width:64px;text-align:center}
.calc-toggle{min-width:54px;height:36px;font:700 13px var(--mono);letter-spacing:0}
.calc-toggle[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.calc-note{margin:0}
@media (max-width:700px){
  .calc-res{grid-template-columns:auto minmax(0,1fr) auto;padding:8px 12px;gap:6px 12px}
  .calc-tnbox{min-width:0}.calc-tn{font-size:34px}
  .calc-sum{display:none}
  .calc-pct{font-size:14px}
  .calc-dice{align-items:flex-end}
  .calc-dice .mbtn{padding:7px 10px;font-size:13px}
  .calc-seg{width:100%}
  .calc-seg button{flex:1 1 0;min-width:0;padding:6px 4px}
}

/* ---------- grafiek op de startpagina ---------- */
.st-chart-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px 18px;flex-wrap:wrap;margin-bottom:6px}
.st-chart-h h4{margin:0;font-size:18px}
.st-legend{display:flex;gap:14px;font:500 13px var(--body);color:var(--muted)}
.st-legend span{display:flex;align-items:center;gap:6px}
.lgd{display:inline-block;width:14px;height:3px;border-radius:2px}
.lg-own{background:var(--c-own)}.lg-paint{background:var(--c-paint)}
.st-chart-box{position:relative;overflow:hidden}
.st-chart-box svg{display:block;width:100%;height:auto;touch-action:pan-y}
.ch-grid{stroke:var(--line2);stroke-width:1}
.ch-axis{stroke:var(--line);stroke-width:1}
.ch-lab{fill:var(--muted);font:400 11px var(--mono)}
.ch-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ch-own{stroke:var(--c-own)}.ch-paint{stroke:var(--c-paint)}
.ch-dot{stroke:var(--panel);stroke-width:2}
.ch-own-f{fill:var(--c-own)}.ch-paint-f{fill:var(--c-paint)}
.ch-cross{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3}
.ch-hit{fill:transparent;cursor:crosshair}
.ch-tip{position:absolute;top:6px;width:150px;background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:6px 8px;font-size:13px;display:flex;flex-direction:column;gap:2px;pointer-events:none;box-shadow:0 4px 10px -6px rgba(0,0,0,.35)}
.ch-tr{display:grid;grid-template-columns:14px 1fr auto;gap:6px;align-items:center}
.ch-tr b{font-variant-numeric:tabular-nums}

/* ---------- account in de kop; op de telefoon geen apart tabblad ---------- */
.me a{color:inherit}
@media (max-width:700px){#tabAcc{display:none}}

/* ---------- lances: uit pack en generator ---------- */
#lnFromPack{border:1.5px solid var(--line);background:var(--panel);color:var(--ink);border-radius:3px;padding:7px 8px;max-width:100%}
.ln-gen{margin-bottom:14px}
.ln-gen>summary{cursor:pointer;display:flex;flex-direction:column;gap:2px;list-style:none}
.ln-gen>summary::-webkit-details-marker{display:none}
.ln-gen>summary b{font:700 16px var(--cond);letter-spacing:.06em;text-transform:uppercase}
.ln-gen>summary b::before{content:"▸ ";color:var(--muted)}
.ln-gen[open]>summary b::before{content:"▾ "}
#genBody{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.gen-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.gen-lab{font:600 12px var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);min-width:110px}
.gen-row input[type=number]{width:120px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:3px;padding:6px 8px}
.gen-adv summary{cursor:pointer;font:600 14px var(--body)}
.gen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px 18px;margin-top:8px}
.gen-h{grid-column:1 / -1;font:600 12px var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.gen-sl{display:grid;grid-template-columns:minmax(0,1fr) 110px 64px;gap:8px;align-items:center;font-size:14px}
.gen-sl input{width:100%;accent-color:var(--accent)}
.gen-slv{font:500 12px var(--mono);color:var(--muted)}
.gen-ops{gap:6px 20px}
.gen-res{display:flex;flex-direction:column;gap:10px}
.gen-tbl{width:100%;border-collapse:collapse;font-size:14px}
.gen-tbl th{font:600 11.5px var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.gen-tbl td{padding:6px 8px;border-bottom:1px solid var(--line2)}
.gen-tbl .num,.bt-units .num{text-align:right;font-variant-numeric:tabular-nums}
.gen-tot{margin:0;font:600 14px var(--mono)}
@media (max-width:700px){.gen-sl{grid-template-columns:minmax(0,1fr) 90px 56px}.gen-lab{min-width:0;width:100%}}

/* ---------- potjes ---------- */
.bt-page{margin-top:22px;display:flex;flex-direction:column;gap:14px}
.bt-head{display:flex;flex-direction:column;gap:10px}
.bt-stats{margin:0;font:600 14px var(--body)}
.bt-card{background:var(--panel);border:1px solid var(--line);border-radius:4px}
.bt-card .bt-l b,.bt-card .bt-sub,.bt-card .bt-vs,.bt-side h4,.bt-side p,.bt-units td,.bt-chip{overflow-wrap:anywhere}
.bt-units td:first-child{min-width:0}
.bt-card.open{border-color:var(--ink)}
.bt-top{width:100%;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;padding:12px 14px;display:flex;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
.bt-l{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 260px}
.bt-l b{font:700 17px var(--cond);letter-spacing:.04em;text-transform:uppercase}
.bt-sub{font:400 12.5px var(--mono);color:var(--muted)}
.bt-vs{font-size:14px}
.bt-r{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.bt-res{font:600 14px var(--body)}
.tag.pub{border:1px solid var(--paint);color:var(--paint);margin:0}
.tag.priv{border:1px solid var(--line);color:var(--muted);margin:0}
.bt-body{border-top:1px solid var(--line2);padding:12px 14px;display:flex;flex-direction:column;gap:12px}
.bt-sides{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.bt-side{border:1px solid var(--line2);border-radius:4px;padding:10px 12px;background:var(--bg);min-width:0}
.bt-side.win{border-color:var(--paint)}
.bt-side h4{margin:0}
.bt-side p{margin:2px 0 8px}
.bt-units{width:100%;border-collapse:collapse;font-size:14px}
.bt-units th{font:600 11px var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;padding:4px 6px;border-bottom:1px solid var(--line)}
.bt-units td{padding:5px 6px;border-bottom:1px solid var(--line2)}
.bt-units tr.dead td:first-child{text-decoration:line-through;color:var(--muted)}
.bt-units tr.tot td{font-weight:700;border-bottom:0}
.bt-note{white-space:pre-wrap;max-width:75ch}
.bt-photos{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.bt-form{display:flex;flex-direction:column;gap:12px}
.bt-form h4{margin:0}
.bt-grid{display:grid;grid-template-columns:2fr 1fr 1.4fr 1fr 1.2fr;gap:10px}
.bt-f{display:flex;flex-direction:column;gap:4px;min-width:0}
.bt-f .cap,.bt-players .cap{font:600 11px var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bt-form input:not([type=checkbox]),.bt-form select,.bt-form textarea{border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:3px;padding:6px 8px;font:inherit;min-width:0;width:100%}
.bt-form .hrow input,.bt-form .hrow select{width:auto;flex:1 1 140px}
.bt-side-ed{border:1px solid var(--line);border-radius:4px;padding:10px 12px;margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.bt-side-ed legend{font:700 13px var(--cond);letter-spacing:.1em;text-transform:uppercase;padding:0 4px}
.bt-players{display:flex;flex-direction:column;gap:6px}
.bt-chips{display:flex;flex-wrap:wrap;gap:6px}
.bt-chip{display:inline-flex;align-items:center;gap:6px;cursor:default}
.bt-chip button{border:0;background:none;color:var(--muted);cursor:pointer;font:600 15px var(--mono);padding:0}
.bt-form .tbl{overflow-x:auto;max-width:100%}
.bt-units-ed input[type=number]{width:72px}
.bt-units-ed td:first-child input{min-width:150px}
@media (max-width:760px){.bt-sides{grid-template-columns:minmax(0,1fr)}.bt-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.bt-f.wide{grid-column:1 / -1}.bt-r{align-items:flex-start}}

/* ---------- taalkeuze ---------- */
.lang-sel{border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:3px;padding:1px 4px;font:600 12px var(--cond);letter-spacing:.06em;cursor:pointer}
.lg-lang{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:16px}

/* ---------- demo-account ---------- */
.is-demo [data-nodemo]{display:none!important}
.demo-banner{margin-top:12px;background:var(--wish);color:#fff;border-radius:4px;padding:8px 12px;font:600 14px var(--body)}
.nu-demo{display:flex;flex-direction:column;gap:6px;border:1px dashed var(--line);border-radius:4px;padding:8px 10px}
.nu-exp{display:flex;align-items:center;gap:8px;font-size:14px}
.nu-exp select{border:1.5px solid var(--line);background:var(--bg);border-radius:3px;padding:5px 8px}
.ln-shared{vertical-align:3px}
.ln-share{flex:1 1 100%;font-size:14px}

/* ---------- toegang per onderdeel ---------- */
.mx th:not(:first-child),.mx .mx-c{text-align:center}
.mx .mx-c input{width:18px;height:18px;accent-color:var(--ink);cursor:pointer}
.mx .mx-c input:disabled{cursor:default;opacity:.55}
.no-stickers .stkbtn{display:none}
@media (min-width:1000px){
  .calc-mods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .calc-row{border-top:1px solid var(--line2)}
  .calc-row:nth-child(-n+2){border-top:0}
  .calc-row:nth-child(odd){border-right:1px solid var(--line2)}
}


/* ---------- header met illustratie; het menu loopt er donker in door ---------- */
:root{--band:#070c16;--band-2:#0d1522;--band-line:#243142;--band-ink:#eef1f3;--band-muted:#9eaab6;--band-acc:#f2a33a}
html,body{overflow-x:clip}
.top{position:relative;margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50% + 0px);padding-block:22px 30px;
  margin-top:calc(-1 * var(--topgap));padding-top:calc(22px + var(--topgap));   /* donkere kop loopt door tot bovenaan (ook onder de statusbalk van de iPhone) */
  background:var(--band);border-bottom:0;min-height:clamp(160px,18vw,260px);display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:14px 24px;color:var(--band-ink);overflow:hidden;isolation:isolate}
.top-art{position:absolute;top:0;right:0;height:calc(100% - 7px);width:auto;max-width:none;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.top::after{left:0;right:0;bottom:0;height:7px;
  background:repeating-linear-gradient(-45deg,var(--band-acc) 0 11px,#10161f 11px 16px,#d9dde0 16px 17px,#10161f 17px 22px)}
.brand{display:flex;flex-direction:column;align-items:center;text-align:center}
.brand-logo{width:clamp(40px,4.4vw,66px);height:auto;margin-bottom:8px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.brand h1{font:700 clamp(30px,4.6vw,64px)/1 var(--display);letter-spacing:.12em;color:var(--band-ink);margin:0;
  display:flex;align-items:center;gap:.28em;text-shadow:0 3px 14px rgba(0,0,0,.7)}
.brand h1::before,.brand h1::after{content:"";flex:0 0 auto;width:clamp(22px,4vw,58px);height:clamp(10px,1.1vw,16px);
  background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 18' preserveAspectRatio='none'%3E%3Cpath d='M1 17 L14 3 L80 3' fill='none' stroke='%23f2a33a' stroke-width='2.4'/%3E%3C/svg%3E")}
.brand h1::after{transform:scaleX(-1)}
.brand .brand-sub{margin:10px 0 0;font:600 clamp(11px,1.45vw,21px)/1 var(--cond);letter-spacing:.34em;text-transform:uppercase;color:var(--band-acc);text-shadow:0 2px 8px rgba(0,0,0,.7)}
.hdr-r{align-self:flex-start;background:rgba(7,12,22,.58);border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:8px 10px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.top .who .lbl,.top .me{color:var(--band-muted)}
.top .me a,.top .me button{color:var(--band-ink)}
.top .pill{border-color:rgba(238,241,243,.75);color:var(--band-ink);background:rgba(7,12,22,.35)}
.top .pill[aria-pressed="true"]{background:var(--band-ink);color:var(--band);border-color:var(--band-ink)}
.top .lang-sel{background:var(--band-2);color:var(--band-ink);border-color:var(--band-line)}
/* menu */
.tabs{margin-top:0;padding-top:12px;background:var(--band);border-bottom:1.5px solid var(--band-line);
  box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax -16px -100vmax)}
.tabs a{color:var(--band-muted)}
.tabs a:hover{color:var(--band-ink)}
.tabs a[aria-current="page"]{color:#fff;border-color:var(--band-line);background:var(--band-2)}
.tabs.stuck{box-shadow:0 0 0 100vmax var(--band),0 8px 12px -8px rgba(0,0,0,.6)}
.tabs-brand b{color:var(--band-ink)}
.tabs-brand img{width:30px;height:auto}
.demo-banner{margin-top:14px}
@media (max-width:700px){
  .top{min-height:0;padding-block:18px 24px;justify-content:center}
  .top-art{opacity:.5}
  .brand{width:100%}
  .hdr-r{align-self:stretch;align-items:flex-start;width:100%}
  .tabs{border-bottom:1px solid var(--band-line)}
  .tabs a{border-color:var(--band-line)}
  .tabs a[aria-current="page"]{background:var(--band-ink);color:var(--band);border-color:var(--band-ink)}
}

/* ---------- regels ---------- */
.rules{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.rules-top{position:sticky;top:calc(var(--navh,52px) + env(safe-area-inset-top,0px));z-index:4;background:var(--bg);padding:8px 0;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.rules-top input{flex:1 1 260px;min-width:0;font:16px var(--sans,inherit);padding:10px 12px;border:1.5px solid var(--line);border-radius:4px;background:var(--panel);color:var(--ink)}
.rules-top input:focus{outline:2px solid var(--accent);outline-offset:1px}
.rules-toc{display:flex;flex-wrap:wrap;gap:6px}
.rules-toc a{font:600 12.5px var(--cond);letter-spacing:.04em;padding:4px 9px;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;background:var(--panel)}
.rules-toc a .sys{color:var(--muted);margin-right:4px}
.rule{border:1.5px solid var(--line);border-radius:4px;background:var(--panel);margin-bottom:10px;scroll-margin-top:calc(var(--navh,52px) + 70px)}
.rule>summary{cursor:pointer;list-style:none;padding:12px 14px;display:flex;gap:10px;align-items:baseline}
.rule>summary::-webkit-details-marker{display:none}
.rule>summary::before{content:'▸';color:var(--muted);transition:transform .15s}
.rule[open]>summary::before{transform:rotate(90deg)}
.rule>summary h3{margin:0;font:600 17px/1.25 var(--display);flex:1}
.rule .badge{font:700 10.5px var(--cond);letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:3px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.rule .badge.as{border-color:var(--wish);color:var(--wish)}
.rule .badge.bt{border-color:var(--accent);color:var(--accent)}
.rule-body{padding:0 14px 14px;display:flex;flex-direction:column;gap:10px;line-height:1.5}
.rule-body p,.rule-body ul{margin:0}
.rule-body ul{padding-left:20px;display:flex;flex-direction:column;gap:4px}
.rule-body .note{font-size:13.5px;color:var(--muted);border-left:3px solid var(--line);padding-left:10px}
.rule-body .rt{overflow-x:auto}
.rule-body table{border-collapse:collapse;font-size:14px;min-width:100%}
.rule-body th,.rule-body td{border-bottom:1px solid var(--line2);padding:6px 8px;text-align:left;vertical-align:top}
.rule-body th{font:700 11.5px var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.rule-body td:first-child{font-weight:600;white-space:nowrap}
.rule-body mark,.rule>summary mark{background:color-mix(in srgb,var(--accent) 35%,transparent);color:inherit;border-radius:2px;padding:0 1px}
.rule-body .links{display:flex;flex-direction:column;gap:4px}
.rule-body .links a{color:var(--ink);font-weight:600}
.rules-foot{font-size:12.5px;color:var(--muted)}

.wl-wish{display:inline-block;margin-top:4px;font:600 11.5px var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--wish)}
.wl-ctl{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.wl-ctl select{font-size:13px;padding:4px 6px}
.wl-ctl .mbtn{padding:5px 10px;font-size:12px}
.rq-acts{display:flex;flex-wrap:wrap;gap:6px}
.rq-acts .mbtn{padding:5px 10px;font-size:12px}

.acc-h5{font:700 12px var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:18px 0 6px}
.mbtn.danger{background:var(--new);border-color:var(--new);color:#fff}
.mbtn.danger:disabled{opacity:.45;cursor:not-allowed}

.pkline{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.pkline b{color:var(--accent);font-weight:600}
.pkbtn{border:1px solid var(--line);background:none;border-radius:3px;padding:1px 7px;font:600 11px var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);cursor:pointer;margin-left:4px}
.pkname{display:block;font:600 11px var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ---------- prijzen ---------- */
.prices{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.pr-card{border:1.5px solid var(--line);border-radius:4px;background:var(--panel);padding:12px 14px;margin-bottom:10px}
.pr-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-bottom:6px}
.pr-head h3{margin:0;font:600 17px/1.25 var(--display);flex:1 1 240px}
.pr-meta{font:500 12px var(--mono);color:var(--muted)}
.pr-best{font:700 13px var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--paint)}
.pr-tbl{border-collapse:collapse;width:100%;font-size:14px}
.pr-tbl th,.pr-tbl td{border-bottom:1px solid var(--line2);padding:6px 8px;text-align:left;vertical-align:middle}
.pr-tbl th{font:700 11px var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pr-tbl .num{white-space:nowrap;font-variant-numeric:tabular-nums}
.pr-tbl .err{color:var(--new);font-size:13px}
.pr-stock{font:700 11px var(--cond);letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:3px;border:1px solid var(--line);white-space:nowrap}
.pr-stock.in{color:var(--paint);border-color:var(--paint)}
.pr-stock.out{color:var(--new);border-color:var(--new)}
.pr-stock.pre{color:var(--wish);border-color:var(--wish)}
.pr-stock.unk{color:var(--muted)}
.pr-down{color:var(--paint);font-weight:700}.pr-up{color:var(--new);font-weight:700}
.pr-low{color:var(--muted)}
.pr-at{font:500 12px var(--mono);color:var(--muted);white-space:nowrap}
.pr-act{white-space:nowrap}.pr-act a{margin-right:8px;color:var(--ink);font-weight:600}
.pr-btn{border:1px solid var(--line);background:none;border-radius:3px;padding:3px 9px;font:600 11.5px var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);cursor:pointer;margin-right:6px}
.pr-addtg{margin-top:8px}
.pr-add{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.pr-add input[type=url]{flex:1 1 280px;min-width:0}
.pr-search{font-size:13px;color:var(--muted);margin:0}.pr-search a{color:var(--ink)}
.pr-without>summary{cursor:pointer;font:600 14px var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 0}
.pr-shops{margin-top:8px}.pr-shops>summary{cursor:pointer;font:600 13px var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pr-shoplist{display:grid;gap:4px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.pr-bar{gap:6px;margin-top:8px}.pr-bar .pr-addtg{margin-top:0}
.pr-found{margin-top:10px;border-top:1px dashed var(--line);padding-top:8px}
.pr-found .pr-tbl td a{color:var(--ink)}
.pr-conf{display:inline-block;margin-left:6px;font:700 10.5px var(--cond);letter-spacing:.08em;text-transform:uppercase;padding:1px 6px;border-radius:3px;border:1px solid var(--line)}
.pr-conf.sure{color:var(--paint);border-color:var(--paint)}.pr-conf.likely{color:var(--muted)}
.pr-card.focus{border-color:var(--accent)}
.pricebtn{margin-left:6px}
.thumb.art{object-fit:contain;background:#fff;padding:2px}

/* fotowand */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:12px}
.gal-tile{margin:0;background:var(--panel);border:1.5px solid var(--line);border-radius:4px;overflow:hidden;display:flex;flex-direction:column}
.gal-img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--line2);cursor:zoom-in}
.gal-tile.noown .gal-img{object-fit:contain;background:#fff;opacity:.85}
.gal-img.none{cursor:default}
.gal-tile figcaption{padding:8px 10px;font-size:13px;display:flex;flex-direction:column;gap:2px}
.gal-tile figcaption b{font:600 15px/1.2 var(--display)}
.gal-sub{color:var(--muted);font-size:12px}
.gal-grp{margin-top:14px}.gal-grp .gal{margin-top:8px}
.gal-h{margin:0;font:600 17px/1.25 var(--display);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.gal-h .meta{font:500 12px var(--mono);color:var(--muted)}
.gal-opts{display:inline-flex;gap:8px;flex-wrap:wrap}
.gal-tile.bare{border:0;border-radius:3px}
.gal-tile.bare .gal-img{aspect-ratio:3/4}
.gal[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.gal[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.gal[data-cols="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.gal[data-cols="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}
.gal[data-cols="6"]{grid-template-columns:repeat(6,minmax(0,1fr))}
.gal[data-cols="8"]{grid-template-columns:repeat(8,minmax(0,1fr))}
.gal[data-cols="10"]{grid-template-columns:repeat(10,minmax(0,1fr))}
.gal[data-cols="8"] .gal-tile figcaption,.gal[data-cols="10"] .gal-tile figcaption{font-size:11px;padding:5px 6px}
.gal[data-cols="8"] .gal-tile figcaption b,.gal[data-cols="10"] .gal-tile figcaption b{font-size:12px}
/* registreren: verborgen veld tegen robots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lg a{color:var(--ink)}
.reg-note{max-width:260px;white-space:pre-wrap;word-break:break-word}
.reg-why{min-width:140px}
.acc input.reg-max{width:6em}
.acc .grid2 label.fl{display:flex;flex-direction:column;gap:3px;font:600 11.5px var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.acc .grid2 label.fl input,.acc .grid2 label.fl select{font:400 14px var(--body);letter-spacing:0;text-transform:none;color:var(--ink)}
.acc .grid2 label.check-s.fl{flex-direction:row;align-items:center;align-self:end;padding-bottom:8px}
#mailTest input{border:1.5px solid var(--line);background:var(--bg);border-radius:3px;padding:7px 8px;min-width:0;flex:1 1 200px}
.acc td input.reg-why{border:1.5px solid var(--line);background:var(--bg);border-radius:3px;padding:3px 6px;font-size:13px;width:100%}
/* inklapbaar blok in account/beheer */
.acc-fold>summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.acc-fold>summary::-webkit-details-marker{display:none}
.acc-fold>summary h4{margin:0}
.acc-fold>summary h4::before{content:"▸ ";color:var(--muted)}
.acc-fold[open]>summary h4::before{content:"▾ "}
.share-form input{border:1.5px solid var(--line);background:var(--bg);border-radius:3px;padding:7px 8px;min-width:0;flex:1 1 220px}
.share-form select{border:1.5px solid var(--line);background:var(--bg);border-radius:3px;padding:7px 8px}
.ln-share{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.ln-share select,.ln-share input{border:1.5px solid var(--line);background:var(--bg);border-radius:3px;padding:6px 8px;min-width:0}
.ln-share input{flex:1 1 200px}
.ln-share small{flex:1 1 100%}
.pr-fold{width:100%;border:0;background:none;padding:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.pr-fold h3::before{content:"▸ ";color:var(--muted);font-size:.8em}
.pr-fold[aria-expanded="true"] h3::before{content:"▾ "}
.pr-fold[aria-expanded="false"]{margin-bottom:0}
.pr-where{flex-basis:100%}
.bt-empty{border:1.5px dashed var(--line);border-radius:4px;background:var(--panel);padding:28px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;position:relative;overflow:hidden}
.bt-empty::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:repeating-linear-gradient(-45deg,var(--accent) 0 8px,transparent 8px 16px)}
.bt-empty h3{margin:6px 0 0;font:700 20px var(--display);text-transform:uppercase;letter-spacing:.02em}
.bt-empty p{margin:0;max-width:52ch;color:var(--muted)}
.who-sel{border:1.5px solid var(--ink);background:transparent;border-radius:3px;padding:5px 8px;font:600 14px var(--cond);letter-spacing:.04em;max-width:100%}
.top .who-sel{border-color:rgba(238,241,243,.75);color:var(--band-ink);background:rgba(7,12,22,.35)}
.top .who-sel option{color:#1C232A;background:#fff}
.top .who-sel.on{background:var(--band-ink);color:#161B20}
/* ---------- hoofdmenu: Tools-menu en Account rechts ---------- */
.tabs .tab-right{margin-left:auto}
.tab-more{position:relative;display:flex}
.tab-more>button{font:600 15px var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--band-muted);background:none;
  padding:9px 16px 8px;border:1.5px solid transparent;border-bottom:0;margin-bottom:-1.5px;border-radius:3px 3px 0 0;display:flex;gap:6px;align-items:center;cursor:pointer}
.tab-more>button:hover,.tab-more>button[aria-expanded="true"]{color:var(--band-ink)}
.tab-more.current>button{color:#fff;border-color:var(--band-line);background:var(--band-2)}
.tab-more .caret{font-size:11px;transition:transform .15s}
.tab-more>button[aria-expanded="true"] .caret{transform:rotate(180deg)}
.tab-menu{position:fixed;top:0;left:0;z-index:50;min-width:260px;max-width:calc(100vw - 24px);background:var(--panel);border:1.5px solid var(--line);
  border-radius:4px;box-shadow:0 10px 24px rgba(0,0,0,.35);padding:6px;display:flex;flex-direction:column;gap:2px}
.tab-menu[hidden]{display:none}
.tab-menu a{font:600 14px var(--cond);text-transform:uppercase;text-decoration:none;display:grid;grid-template-columns:1fr auto;gap:0 8px;align-items:center;margin:0;border:0;border-radius:3px;padding:8px 10px;
  color:var(--ink);letter-spacing:.08em;font-size:14px;background:none}
.tab-menu a small{grid-column:1/-1;font:400 12.5px var(--body);letter-spacing:0;text-transform:none;color:var(--muted)}
.tab-menu a:hover,.tab-menu a:focus-visible{background:var(--bg);color:var(--ink)}
.tab-menu a[aria-current="page"]{background:var(--bg);color:var(--ink);box-shadow:inset 3px 0 0 var(--accent)}
.tab-menu a[hidden]{display:none}
@media (max-width:700px){
  .tab-more>button{border:1px solid var(--band-line);border-radius:3px;margin:0;padding:6px 10px;font-size:13px;letter-spacing:.07em}
  .tab-more.current>button{background:var(--band-ink);color:var(--band);border-color:var(--band-ink)}
  .tabs .tab-right{margin-left:0}
}

.tab-menu .tab-mobile{display:none}
/* ---------- telefoon: menubalk altijd op één regel, niet zijwaarts scrollen ---------- */
@supports not (overflow:clip){ html{overflow-x:visible} body{overflow-x:hidden} }   /* oudere iPhones kennen 'clip' niet */
@media (max-width:700px){
  .tabs,.tabs.stuck{flex-wrap:nowrap;gap:5px;justify-content:flex-start}
  .tabs .tabs-brand,.tabs.stuck .tabs-brand{display:none}          /* logo past er op de telefoon niet naast */
  .tabs a,.tab-more>button{flex:0 1 auto;min-width:0;white-space:nowrap;padding:6px 9px;font-size:12.5px;letter-spacing:.05em}
  .tabs #tabAdm,.tabs #tabAbout{display:none}                      /* Beheer en Over staan op de telefoon onder Tools */
  .tab-menu .tab-mobile{display:grid}
  .chips{flex-wrap:wrap;overflow-x:visible}
}
/* ---------- over lance bay ---------- */
.about{margin-top:22px;display:flex;flex-direction:column;gap:14px;max-width:980px}
.about-hero{display:flex;gap:22px;align-items:center;background:var(--band);color:var(--band-ink);border-radius:4px;padding:22px 24px;position:relative;overflow:hidden}
.about-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:repeating-linear-gradient(-45deg,var(--band-acc) 0 8px,transparent 8px 16px)}
.about-hero img{width:120px;height:auto;flex:0 0 auto}
.about-hero h2{margin:0 0 6px;font:700 28px/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.about-hero p{margin:0;color:var(--band-muted);max-width:62ch}
.about-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.about .box h4{margin:0 0 10px}
.about-people dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 10px}
.about-people dt{font:600 11.5px var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);align-self:center}
.about-people dd{margin:0;font:700 18px var(--display)}
.about-list{margin:0 0 10px;padding-left:18px;display:flex;flex-direction:column;gap:8px}
.about-legal p{color:var(--muted);font-size:13.5px;margin:0}
.tab-menu a.tab-sep{border-top:1px solid var(--line);border-radius:0 0 3px 3px;margin-top:4px;padding-top:10px}
@media (max-width:700px){.about-grid{grid-template-columns:1fr}.about-hero{flex-direction:column;align-items:flex-start;padding:18px}.about-hero img{width:90px}}
/* herhaalde winkelnaam in de zoekresultaten alleen op de telefoon tonen */
.pr-tbl td.pr-rep{color:transparent}
/* ---------- prijzen op de telefoon: rijen als kaartjes in plaats van een brede tabel ---------- */
@media (max-width:600px){
  .prices .tbl{overflow-x:visible}
  .pr-tbl,.pr-tbl tbody{display:block;width:100%}
  .pr-tbl tr.pr-hd{display:none}
  .pr-tbl tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line2)}
  .pr-tbl td{display:block;padding:0;border:0;min-width:0}
  .pr-tbl tr.pr-row td.pr-shop{grid-column:1;grid-row:1;font-weight:600}
  .pr-tbl tr.pr-row td.pr-price{grid-column:2;grid-row:1;text-align:right;font-weight:600}
  .pr-tbl tr.pr-row td.pr-price[colspan]{grid-column:1/-1;grid-row:2;text-align:left;font-weight:400}
  .pr-tbl tr.pr-row td.pr-st{grid-column:1;grid-row:2}
  .pr-tbl tr.pr-row td.pr-at{grid-column:2;grid-row:2;text-align:right;font-size:12.5px}
  .pr-tbl tr.pr-row td.pr-act,.pr-tbl tr.pr-res td.pr-act{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .pr-tbl tr.pr-res td.pr-shop{grid-column:1;grid-row:1;font-weight:600;color:inherit}
  .pr-tbl tr.pr-res td.pr-price{grid-column:2;grid-row:1;text-align:right;font-weight:600}
  .pr-tbl tr.pr-res td.pr-title{grid-column:1/-1;grid-row:2;overflow-wrap:anywhere}
  .pr-tbl tr.pr-res td.pr-st{grid-column:1;grid-row:3}
  .pr-tbl tr.pr-res td.pr-act{grid-column:2;grid-row:3;justify-content:flex-end}
  .pr-tbl tr.pr-none{grid-template-columns:auto minmax(0,1fr)}
  .pr-tbl tr.pr-none td.pr-msg{text-align:right}
  .pr-card{padding:12px}
  .pr-head .pr-best{margin-left:auto}
}
/* ---------- iPhone (Safari 26): de balk bovenin kleurt mee met de achtergrond van de pagina ----------
   De 'onderste laag' (html) is donker zoals de kop; de lichte pagina zelf ligt daarbovenop. Zo kleurt Safari de
   statusbalk en de rand bij het scrollen donker in plaats van grijs. */
html{background:var(--band,#070c16)}
body{min-height:100vh;min-height:100dvh}
body.loginpage{background:var(--bg)}
.tabs.stuck{clip-path:inset(calc(-1 * env(safe-area-inset-top,0px) - 2px) -100vmax -16px -100vmax)}   /* vastgezette menubalk vult ook de strook onder de statusbalk */
/* iPhone/iPad (Safari): extra donkere ruimte boven de menuknoppen, zodat de waas van Safari onder de statusbalk
   op de donkere balk valt en niet over de knoppen */
@supports (-webkit-touch-callout:none){
  .top{padding-top:calc(22px + var(--topgap) + 38px)}          /* ~1 cm extra boven het logo, buiten de waas van Safari */
  .tabs{padding-top:32px}
  @media (max-width:700px){.tabs{padding-top:30px}}
}
/* ---------- beheer: submenu en statistieken ---------- */
.adm-sub{margin-top:22px;display:inline-flex}
.adm-sub a{text-decoration:none;color:inherit}
.seg a[aria-current="page"]{background:var(--ink);color:var(--bg)}
.stx{margin-top:14px;display:flex;flex-direction:column;gap:14px}
.stx-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.stx-head h2{margin:0;font:700 26px/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.stx-range{font:600 12px var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;gap:8px;align-items:center}
.stx-range select{border:1.5px solid var(--line);background:var(--bg);border-radius:3px;padding:5px 8px;font:500 14px var(--body);text-transform:none;letter-spacing:0;color:var(--ink)}
.stx-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.stx .box h4{margin:0 0 4px}
.stx-sub{margin:0 0 10px}
.stx-live-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-bottom:10px}
.stx-tiles.stx-tiles3{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:12px}
.stx-tiles3 .st-tile:last-child{grid-column:auto}
@media (max-width:700px){.stx-tiles3 .st-tile{padding:12px 10px}.stx-tiles3 .st-tile .k{letter-spacing:.08em}}
.stx-live-note{margin:10px 0 0}
.stx-live td.mono,.stx-live th:nth-child(n+3){text-align:right}
.stx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.stx-chart{position:relative}
.stx-chart svg{display:block;width:100%;height:auto;touch-action:pan-y}
.stx-col{fill:var(--c-own)}
.stx-hit{fill:transparent;cursor:crosshair}
.stx-hit:hover{fill:color-mix(in srgb,var(--ink) 6%,transparent)}
.stx-grid-l{stroke:var(--line);stroke-width:1}
.stx-ax{font:500 11px var(--mono);fill:var(--muted)}
.box:has(>.stx-chart){position:relative}
.stx-tip{position:absolute;z-index:5;pointer-events:none;background:var(--panel);border:1.5px solid var(--line);border-radius:4px;box-shadow:0 6px 16px rgba(0,0,0,.18);padding:8px 10px;display:flex;flex-direction:column;gap:2px;font-size:13px;white-space:nowrap}
.stx-bars{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.stx-bar{display:grid;grid-template-columns:minmax(90px,38%) minmax(0,1fr) auto;gap:10px;align-items:center;font-size:14px}
.stx-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stx-t{height:10px;background:color-mix(in srgb,var(--line) 60%,transparent);border-radius:2px;overflow:hidden}
.stx-t i{display:block;height:100%;background:var(--c-own);border-radius:0 3px 3px 0}
.stx-v{font:600 13px var(--mono);font-variant-numeric:tabular-nums;min-width:3ch;text-align:right}
.stx-foot p{margin:0 0 8px;color:var(--muted);font-size:13.5px}
@media (max-width:860px){.stx-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.stx-grid{grid-template-columns:1fr}}
.adm-sub a{background:var(--panel);padding:7px 14px;font:600 13.5px var(--cond);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border-right:1px solid var(--line)}
.adm-sub a:last-child{border-right:0}
.adm-sub a:hover{color:var(--ink)}
.adm-sub a[aria-current="page"]{background:var(--ink);color:var(--bg)}
.stx table{width:100%;border-collapse:collapse;font-size:14px}
.stx th{font:600 11.5px var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.stx td{padding:7px 8px;border-bottom:1px solid var(--line2)}
.stx .mono{font:400 12.5px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.stx .tbl{overflow-x:auto}
/* v56: Beheer in onderdelen */
.adm-sub{flex-wrap:wrap;max-width:100%}
.adm-sub a{display:inline-flex;align-items:center;gap:6px}
.adm-badge{display:inline-block;min-width:18px;padding:1px 5px;border-radius:9px;background:var(--accent);color:var(--accent-ink);font:700 11px var(--mono);text-align:center;letter-spacing:0}
@media (max-width:700px){
  .adm-sub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .adm-sub a{justify-content:center;padding:9px 6px;font-size:12.5px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .adm-sub a:nth-child(3n){border-right:0}
  .adm-sub a:nth-last-child(-n+3){border-bottom:0}
}
/* v57: e-mailteksten */
.acc .grid2 label.fl textarea{font:400 14px/1.5 var(--mono);letter-spacing:0;text-transform:none;color:var(--ink);border:1.5px solid var(--line);background:var(--bg);border-radius:3px;padding:8px;min-height:220px;resize:vertical;width:100%;box-sizing:border-box}
#mtBox .flt{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#mtBox .flt select{max-width:100%}
.mt-vars{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mt-var{border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:3px;padding:2px 8px;font:500 12.5px var(--mono);cursor:pointer}
.mt-var:hover{border-color:var(--ink)}
.mt-var.req{border-color:var(--accent)}
.mt-prev{margin-top:12px;border:1.5px dashed var(--line);border-radius:3px;background:var(--bg);padding:12px 14px}
.mt-subj{font-weight:700;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--line2)}
.mt-prev pre{margin:0;white-space:pre-wrap;word-break:break-word;font:400 14px/1.5 var(--body)}
.mt-help{margin:0;color:var(--muted);font-size:13.5px}
@media (max-width:700px){.acc .grid2 label.fl textarea,#mtSubj{font-size:16px}}
/* v58: Feedback */
.fb{max-width:980px}
.fb-head{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;justify-content:space-between;margin-bottom:16px}
.fb-head h2{margin:0 0 4px}
.fb-head p{margin:0;color:var(--muted);max-width:60ch}
.fb-tabs{margin-bottom:18px}
.fb-tabs button{display:inline-flex;align-items:center;gap:6px}
.fb-form{display:grid;gap:12px;margin-bottom:18px}
.fb-form label.fl{display:flex;flex-direction:column;gap:4px;font:600 11.5px var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fb-form input:not([type=radio]),.fb-form textarea,.fb-form select{font:400 15px var(--body);letter-spacing:0;text-transform:none;color:var(--ink);border:1.5px solid var(--line);background:var(--bg);border-radius:3px;padding:8px 10px;width:100%;box-sizing:border-box}
.fb-form textarea{resize:vertical;min-height:84px;line-height:1.45}
.fb-fout{display:grid;gap:12px}
.fb-kind{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fb-k{position:relative;cursor:pointer}
.fb-k input{position:absolute;opacity:0;pointer-events:none}
.fb-k span{display:flex;flex-direction:column;gap:2px;border:1.5px solid var(--line);border-radius:4px;padding:10px 12px;background:var(--bg);border-left:5px solid var(--wish)}
.fb-k.fout span{border-left-color:var(--new)}
.fb-k b{font:700 15px var(--cond);letter-spacing:.06em;text-transform:uppercase}
.fb-k small{color:var(--muted);font-size:13px}
.fb-k input:checked+span{border-color:var(--ink);border-left-color:var(--wish);box-shadow:0 0 0 1px var(--ink)}
.fb-k.fout input:checked+span{border-left-color:var(--new)}
.fb-k input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.fb-similar{border:1.5px dashed var(--line);border-radius:4px;padding:10px 12px;display:grid;gap:8px;font-size:14px}
.fb-sim{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fb-sim-t{flex:1;min-width:140px}
.fb-sim .mbtn{padding:4px 10px;font-size:12px}
.fb-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.fb-bar select{border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:3px;padding:7px 8px;font:500 14px var(--body)}
.fb-export{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;border:1.5px solid var(--accent);border-radius:4px;padding:10px 14px;margin-bottom:12px;background:var(--panel)}
.fb-export>div:first-child{display:flex;flex-direction:column;gap:2px}
.fb-export .mbtn{padding:6px 12px;font-size:12.5px}
.fb-list{display:grid;gap:10px}
.fb-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--wish);border-radius:4px;padding:12px 14px}
.fb-card.is-fout{border-left-color:var(--new)}
.fb-card.st-gedaan,.fb-card.st-afgewezen{opacity:.8}
.fb-card.pickable{grid-template-columns:auto auto minmax(0,1fr)}
.fb-pick{display:flex;align-items:flex-start;padding-top:12px}
.fb-pick input{width:18px;height:18px;accent-color:var(--accent)}
.fb-vote{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:52px;height:56px;border:1.5px solid var(--line);border-radius:4px;background:var(--bg);color:var(--muted);cursor:pointer;font:700 17px var(--mono)}
.fb-vote .fb-arrow{font-size:11px;line-height:1}
.fb-vote:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}
.fb-vote.on{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.fb-vote:disabled{cursor:default;opacity:.7}
.fb-top{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:4px}
.fb-type,.fb-st,.fb-area{font:700 10.5px var(--cond);letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;border-radius:2px}
.fb-type.wens{background:var(--wish);color:#fff}.fb-type.fout{background:var(--new);color:#fff}
.fb-st{border:1.5px solid currentColor;color:var(--muted)}
.fb-st.gepland{color:var(--accent)}.fb-st.gedaan{color:var(--paint)}.fb-st.afgewezen{color:var(--new)}
.fb-area{color:var(--muted);border:1px dashed var(--line)}
.fb-t{margin:0;font:600 16px var(--body);letter-spacing:0;text-transform:none}
.fb-d{margin:4px 0 0;color:var(--ink);opacity:.85;font-size:14.5px;white-space:pre-wrap;max-width:75ch}
.fb-steps{margin-top:6px;font-size:14px}
.fb-steps summary{cursor:pointer;color:var(--muted);font:600 12.5px var(--cond);letter-spacing:.06em;text-transform:uppercase}
.fb-steps p{margin:4px 0 0;white-space:pre-wrap}
.fb-reason{margin:6px 0 0;font-size:14px;color:var(--new)}
.fb-meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font:400 12.5px var(--mono);color:var(--muted)}
.fb-mine{color:var(--wish)}
.fb-ctl{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--line2)}
.fb-ctl .mbtn{padding:5px 10px;font-size:12px}
.fb-ctl select{border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:3px;padding:4px 6px;font:500 13px var(--body)}
.fb-rej{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center}
.fb-rej input{border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:3px;padding:5px 8px;font:400 14px var(--body);min-width:220px}
.fb-empty{text-align:center;padding:36px 16px;border:1.5px dashed var(--line);border-radius:4px;color:var(--muted)}
.fb-empty b{color:var(--ink);font-size:16px}
.fb-empty p{margin:6px 0 0}
.fb-ok,.fb-err{margin:0;padding:8px 12px;border-radius:3px;background:var(--panel);border:1px solid var(--line)}
.fb-ok{color:var(--paint)}
.wl-wish.fout{color:var(--new)}
.fb-dlg{width:min(860px,calc(100vw - 32px));max-height:calc(100vh - 48px);border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);padding:18px 20px;box-sizing:border-box}
.fb-dlg::backdrop{background:rgba(8,12,20,.6)}
.fb-dlg[open]{display:flex;flex-direction:column;gap:10px}
.fb-dlg-head{display:flex;justify-content:space-between;align-items:center}
.fb-dlg-head h3{margin:0}
.fb-md{margin:0;flex:1;min-height:200px;overflow:auto;white-space:pre-wrap;word-break:break-word;background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:14px 16px;font:400 13.5px/1.55 var(--mono);color:var(--ink)}
@media (max-width:640px){
  .fb-kind{grid-template-columns:1fr}
  .fb-card{gap:10px;padding:10px 12px}
  .fb-card.pickable{grid-template-columns:auto auto minmax(0,1fr)}
  .fb-vote{width:44px;height:50px;font-size:15px}
  .fb-bar select{flex:1;min-width:0}
  .fb-head .mbtn{width:100%}
  .fb-rej input{min-width:0;flex:1 1 100%}
  .fb-form input:not([type=radio]),.fb-form textarea,.fb-form select{font-size:16px}
}
@media (max-width:640px){.fb-tfilter{width:100%}.fb-tfilter button{flex:1}.fb-bar select{flex:1 1 40%}}
.fb{margin-top:22px}
.fb-head h2{scroll-margin-top:120px}
.linkbtn{border:0;background:none;padding:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit}
.wl-hidden{margin-left:8px}
.wl-meta .wl-del{margin-left:4px}
.mx-def td{background:var(--bg);border-bottom:2px solid var(--line)!important}
.mx-def td:first-child{font-weight:600}
.mx-def small{font-weight:400;color:var(--muted);font-size:12px}
/* v60: contacten, inbox en kiezen uit contacten */
.pick-list{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:1 1 100%}
.pick{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:999px;padding:4px 10px 4px 8px;background:var(--bg);cursor:pointer;font-size:14px}
.pick:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--bg))}
.pick input{accent-color:var(--accent);margin:0}
.pick.gone{opacity:.7;border-style:dashed}
.pick-more{font-size:13px;color:var(--muted)}
.pick-empty{margin:0}
.share-form .pick-list{margin-top:4px}
.ln-share .pick-list{margin-top:6px}
.ib{margin-top:22px;max-width:1080px}
.ib-head h2{margin:0 0 4px}
.ib-head p{margin:0 0 16px;color:var(--muted);max-width:70ch}
.ib-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:820px){.ib-grid{grid-template-columns:1fr}}
.ib-list{display:grid;gap:8px}
.ib-msg{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--line);border-radius:4px;padding:10px 38px 10px 14px}
.ib-msg.k-invite{border-left-color:var(--accent)}
.ib-msg.k-accepted{border-left-color:var(--paint)}
.ib-msg.k-share_collection,.ib-msg.k-share_lance,.ib-msg.k-battle{border-left-color:var(--wish)}
.ib-msg.unread .ib-txt{font-weight:700}
.ib-msg .wl-del{position:absolute;top:6px;right:8px}
.ib-txt{margin:0;font-size:15px}
.ib-note{margin:4px 0 0;color:var(--muted);font-style:italic;font-size:14px}
.ib-when{display:block;margin-top:4px;font:400 12px var(--mono);color:var(--muted)}
.ib-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ib-acts .mbtn{padding:5px 10px;font-size:12px;text-decoration:none}
@media (max-width:560px){.ib-msg{grid-template-columns:1fr}}
.ib-empty{padding:28px 16px;text-align:center;color:var(--muted);border:1.5px dashed var(--line);border-radius:4px}
.ib-contacts h3{margin:0 0 10px}
.ib-code{display:grid;gap:6px;padding-bottom:14px;border-bottom:1px solid var(--line2);margin-bottom:14px}
.ib-code-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ib-code code{font:700 20px var(--mono);letter-spacing:.08em;background:var(--bg);border:1.5px dashed var(--accent);border-radius:4px;padding:6px 12px;user-select:all}
.ib-code p{margin:0}
.ib-code .linkbtn{justify-self:start;font-size:13px}
.ib-invite{display:grid;gap:10px}
.ib-invite label.fl{display:flex;flex-direction:column;gap:4px;font:600 11.5px var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ib-invite input{font:400 15px var(--body);letter-spacing:0;text-transform:none;color:var(--ink);border:1.5px solid var(--line);background:var(--bg);border-radius:3px;padding:8px 10px}
#ibInvCode{font-family:var(--mono);letter-spacing:.08em}
.ib-h4{margin:16px 0 6px;font-size:14px}
.ib-clist{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ib-clist li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line2)}
.ib-clist li .linkbtn{margin-left:auto;font-size:13px;color:var(--muted)}
#inboxLink{display:inline-flex;align-items:center;gap:4px}
@media (max-width:640px){.ib-invite input{font-size:16px}}
.ib-help{margin:0;color:var(--muted);font-size:13.5px;line-height:1.45}
.ib-lbl{font:600 11.5px var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ib-contacts .ib-h4{margin-top:20px}
.ib-clist li.status{font-family:var(--body)}
/* v62: kop op de telefoon rechts uitgelijnd, zoals op de computer */
@media (max-width:700px){.hdr-r{align-items:flex-end}.hdr-r .who{justify-content:flex-end}.hdr-r .me{text-align:right}}
/* v62: sluitknop van de fotoweergave op de iPhone lager, buiten de statusbalk en de waas van Safari */
.lb{height:100dvh;max-height:100dvh}
.lb-close{width:44px;height:44px;flex:0 0 auto}
#lbImg{max-height:calc(100dvh - 100px)}
@supports (-webkit-touch-callout:none){
  .lb-bar{padding-top:calc(max(10px,env(safe-area-inset-top,0px)) + 38px)}
  #lbImg{max-height:calc(100dvh - 150px - env(safe-area-inset-top,0px))}
}
.ib-compose{display:grid;gap:8px;margin-bottom:10px;padding:12px 14px}
.ib-to{display:flex;align-items:center;gap:8px;font:600 12px var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ib-to select,.ib-compose textarea{font:400 15px var(--body);letter-spacing:0;text-transform:none;color:var(--ink);border:1.5px solid var(--line);background:var(--bg);border-radius:3px;padding:7px 9px}
.ib-compose textarea{resize:vertical;min-height:70px;width:100%;box-sizing:border-box}
.ib-text{margin:6px 0 0;white-space:pre-wrap;word-break:break-word;font-size:15px}
.ib-msg.k-message{border-left-color:var(--accent)}
.ib-msg.k-sent{border-left-color:var(--line);background:var(--bg)}
.ib-msg.k-sent .ib-txt{color:var(--muted);font-size:13px}
.ib-msg.k-message .ib-txt{font-size:13px;color:var(--muted)}
.ib-nocon{margin:0 0 10px}
.ib-clist li .ib-send{margin-left:auto}
.ib-clist li .ib-send+.linkbtn{margin-left:0}
@media (max-width:640px){.ib-to select,.ib-compose textarea{font-size:16px}}
/* v63: gesprekken in de inbox */
.ib-new{font:700 12px var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ib-thread{position:relative;background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:4px;padding:10px 14px 12px}
.ib-thread.unread .ib-th-head b::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-left:8px;vertical-align:middle}
.ib-th-head{display:flex;align-items:baseline;gap:10px;padding-right:28px;margin-bottom:6px}
.ib-th-head .ib-when{margin:0}
.ib-th-head .wl-del{position:absolute;top:6px;right:8px}
.ib-th-head .wl-del.armed{font:600 12px var(--cond);letter-spacing:.04em;color:var(--new)}
.ib-more{font-size:13px;color:var(--muted);margin:2px 0 4px}
.ib-bubbles{display:flex;flex-direction:column;gap:6px;max-height:420px;overflow-y:auto;padding:4px 2px}
.ib-day{align-self:center;font:500 11.5px var(--mono);color:var(--muted);margin:6px 0 2px}
.ib-bub{max-width:80%;padding:7px 11px 5px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.ib-bub p{margin:0;white-space:pre-wrap;word-break:break-word;font-size:15px;line-height:1.4}
.ib-bub.theirs{align-self:flex-start;border-bottom-left-radius:3px}
.ib-bub.mine{align-self:flex-end;background:color-mix(in srgb,var(--accent) 18%,var(--bg));border-color:color-mix(in srgb,var(--accent) 40%,var(--line));border-bottom-right-radius:3px}
.ib-bub.new{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent)}
.ib-time{display:block;text-align:right;font:400 11px var(--mono);color:var(--muted);margin-top:2px}
.ib-reply{display:flex;gap:8px;align-items:flex-end;margin-top:10px;flex-wrap:wrap}
.ib-reply textarea{flex:1 1 220px;min-height:44px;resize:vertical;font:400 15px var(--body);color:var(--ink);border:1.5px solid var(--line);background:var(--bg);border-radius:3px;padding:7px 9px}
.ib-reply .status{flex-basis:100%}
.ib-gone{margin:8px 0 0}
@media (max-width:640px){.ib-reply textarea{font-size:16px}.ib-bub{max-width:88%}}
/* v69: andere naam van Clan-mechs */
.nm .alt-n{color:var(--muted);font-weight:500;margin-left:5px}
.gal-tile .alt-n{color:var(--muted);font-weight:400}
/* v71: keuzevakje in de contactkiezer niet laten oprekken door de regels voor tekstvakken in het deelformulier */
.pick input[type=checkbox]{flex:0 0 auto;width:auto;min-width:0;padding:0;border:0;background:none}
.pick span{white-space:nowrap}
.pick{max-width:100%}
.del-choice{display:inline-flex;flex-wrap:wrap;gap:6px}
/* v74: je eigen account verwijderen */
.acc-danger{border-color:color-mix(in srgb,var(--new) 45%,var(--line))}
.acc-danger>summary h4{color:var(--new)}
.del-list{margin:8px 0;padding-left:20px;display:grid;gap:4px}
/* v75: welkomstpagina voor wie niet is ingelogd */
body.wc-page{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--body)}
.wc-hero{position:relative;background:#070c16;color:#eef1f5;overflow:hidden;padding:calc(env(safe-area-inset-top,0px) + 18px) 24px 0}
.wc-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 40%;opacity:.9}
.wc-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,12,22,.95) 0%,rgba(7,12,22,.82) 38%,rgba(7,12,22,.25) 72%,rgba(7,12,22,.1) 100%);z-index:1}
.wc-top,.wc-hero-in{position:relative;z-index:2;max-width:1072px;margin:0 auto}
.wc-top{display:flex;justify-content:flex-end;align-items:center;gap:14px}
.wc-login{color:#eef1f5;font:600 14px var(--cond);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:1.5px solid rgba(255,255,255,.35);border-radius:3px;padding:6px 12px}
.wc-login:hover{border-color:#fff}
.wc-top .lang-sel{color:#eef1f5;background:rgba(7,12,22,.6);border-color:rgba(255,255,255,.25)}
.wc-hero-in{padding:44px 0 56px}
.wc-logo{display:block;width:96px;height:auto;margin-bottom:10px}
.wc-hero h1{margin:0;font:700 clamp(46px,8vw,84px)/.95 var(--display);letter-spacing:.04em;text-transform:uppercase}
.wc-tag{margin:8px 0 0;color:var(--accent,#E8964A);font:700 clamp(14px,2vw,18px) var(--cond);letter-spacing:.34em;text-transform:uppercase}
.wc-lead{margin:22px 0 0;max-width:56ch;font-size:clamp(16px,2vw,19px);line-height:1.5;color:#d5dbe3}
.wc-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.wc-btn{display:inline-block;text-decoration:none;padding:12px 20px;font-size:15px}
.wc-hero .wc-btn-sec{border-color:rgba(255,255,255,.6);color:#fff}
.wc-note{margin:14px 0 0;color:#aab3bf;font-size:14px;max-width:60ch}
.wc-stripe{position:relative;z-index:2;height:9px;margin:0 -24px;background:repeating-linear-gradient(-45deg,#E8964A 0 14px,#070c16 14px 28px)}
.wc-main{max-width:1120px;margin:0 auto;padding:16px 24px 40px}
.wc-feat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;align-items:center;padding:52px 0;border-bottom:1px solid var(--line)}
.wc-feat.wc-flip .wc-txt{order:2}
.wc-feat.wc-noshot{grid-template-columns:minmax(0,1fr)}
.wc-feat.wc-noshot .wc-txt{max-width:70ch}
.wc-kicker{font:700 12.5px var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.wc-feat h2,.wc-more h2,.wc-end h2{margin:6px 0 10px;font:700 clamp(24px,3.4vw,34px)/1.12 var(--display);letter-spacing:.01em}
.wc-txt p{margin:0 0 12px;font-size:17px;line-height:1.55;color:var(--ink)}
.wc-txt ul{margin:0;padding-left:20px;display:grid;gap:7px;color:var(--muted);font-size:15.5px;line-height:1.45}
.wc-shot{margin:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel);box-shadow:0 12px 34px rgba(7,12,22,.16)}
.wc-shot img{display:block;width:100%;height:auto}
.wc-more{padding:52px 0 20px}
.wc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.wc-card{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:4px;padding:14px 16px}
.wc-card b{font:700 15px var(--cond);letter-spacing:.08em;text-transform:uppercase}
.wc-card p{margin:6px 0 0;color:var(--muted);font-size:15px;line-height:1.45}
.wc-end{margin-top:36px;padding:32px;background:var(--panel);border:1px solid var(--line);border-radius:6px;text-align:center}
.wc-end p{margin:0 auto;max-width:56ch;color:var(--muted)}
.wc-end .wc-cta{justify-content:center}
.wc-foot{max-width:1120px;margin:0 auto;padding:8px 24px calc(env(safe-area-inset-bottom,0px) + 36px);color:var(--muted);font-size:13px;line-height:1.5}
.wc-foot p{margin:0 0 6px}
@media (max-width:860px){
  .wc-feat{grid-template-columns:1fr;gap:22px;padding:36px 0}
  .wc-feat.wc-flip .wc-txt{order:0}
  .wc-grid{grid-template-columns:1fr 1fr}
  .wc-hero-in{padding:28px 0 40px}
  .wc-hero::before{background:linear-gradient(180deg,rgba(7,12,22,.88),rgba(7,12,22,.8))}
}
@media (max-width:560px){.wc-grid{grid-template-columns:1fr}.wc-main,.wc-hero,.wc-foot{padding-left:16px;padding-right:16px}.wc-stripe{margin:0 -16px}.wc-end{padding:22px 16px}.wc-btn{flex:1 1 auto;text-align:center}}
@supports (-webkit-touch-callout:none){.wc-hero{padding-top:calc(env(safe-area-inset-top,0px) + 44px)}}
.wc-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:820px){.wc-slots{grid-template-columns:1fr}}
.wc-slot{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:4px;padding:10px;background:var(--bg)}
.wc-slot-img{aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden;border:1px dashed var(--line);border-radius:3px;background:var(--panel);padding:6px;text-align:center}
.wc-slot-img img{width:100%;height:100%;object-fit:cover;object-position:top left}
.wc-slot .mbtn{padding:6px 10px;font-size:12px}
/* ---- welkomstpagina: account aanvragen in een dialoog ---- */
.wc-dlg{width:min(440px,calc(100vw - 24px));max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:auto;box-sizing:border-box;border:1px solid var(--line);border-top:5px solid var(--accent);border-radius:6px;background:var(--panel);color:var(--ink);padding:18px 20px 20px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.wc-dlg::backdrop{background:rgba(7,12,22,.72)}
.wc-dlg-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.wc-dlg-head h2{margin:0;font:700 22px/1.1 var(--display);letter-spacing:.02em;text-transform:uppercase}
.wc-x{border:0;background:none;color:var(--muted);font-size:30px;line-height:1;width:40px;height:40px;margin:-8px -10px -8px 0;border-radius:4px;cursor:pointer}
.wc-x:hover{color:var(--ink);background:var(--bg)}
.wc-dlg .lg-card{border:0;background:none;padding:0;margin:0}
.wc-dlg .lg-card h3{margin:6px 0 2px;font:600 18px var(--display)}
.wc-dlg .lg-card a.mbtn,.wc-dlg .lg-card button.mbtn{text-align:center;text-decoration:none}
.wc-dlg .lg-msg:empty{display:none}
.wc-alt{margin:6px 0 0!important;text-align:center}
a.wc-btn[hidden]{display:none}
.wc-dlg > .lg-msg{margin:8px 0 0}
.wc-dlg .lg-qr img{width:180px;height:180px}
/* ---- welkomstpagina: slideshow van schermafbeeldingen ---- */
.wc-slides{display:grid}
.wc-slides img[data-slot]{grid-area:1/1;align-self:start;opacity:0;transition:opacity .5s ease}
.wc-slides img[data-slot].on{opacity:1}
.wc-ctl{grid-area:2/1;display:flex;align-items:center;justify-content:center;gap:10px;padding:6px 8px;border-top:1px solid var(--line);background:var(--panel)}
.wc-nav{border:0;background:none;color:var(--muted);font-size:24px;line-height:1;width:36px;height:32px;border-radius:4px;cursor:pointer}
.wc-nav:hover{color:var(--ink);background:var(--bg)}
.wc-dots{display:flex;gap:2px}
.wc-dot{border:0;background:none;width:24px;height:24px;padding:0;cursor:pointer;display:grid;place-items:center}
.wc-dot::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--line);transition:background .2s}
.wc-dot[aria-current=true]::before{background:var(--accent)}
.wc-dot:hover::before{background:var(--muted)}
@media (prefers-reduced-motion:reduce){.wc-slides img[data-slot]{transition:none}}
@media (max-width:820px){.wc-slots{grid-template-columns:1fr}}
@media (min-width:821px){.wc-slots{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* ---- welkomstpagina: telefoonblok en vergroten ---- */
.wc-slides img[data-slot],.wc-phone img{cursor:zoom-in}
.wc-slides img[data-slot]:not(.on){pointer-events:none}
.wc-phone{margin:0;display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap}
.wc-ph-screen{display:block;width:min(270px,62vw);height:auto;border:7px solid #10151d;border-radius:30px;background:#10151d;box-shadow:0 14px 36px rgba(7,12,22,.24)}
.wc-ph-icon{display:block;width:min(170px,38vw);height:auto;border-radius:22px;box-shadow:0 10px 26px rgba(7,12,22,.2)}
.wc-lb{border:0;padding:0;margin:0;background:transparent;width:100vw;max-width:100vw;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;color:#fff;overflow:hidden}
.wc-lb::backdrop{background:rgba(7,10,16,.97)}
.wc-lb-body{position:absolute;inset:0;overflow:auto;display:grid;place-items:center;padding:calc(env(safe-area-inset-top,0px) + 64px) 12px calc(env(safe-area-inset-bottom,0px) + 44px);box-sizing:border-box;-webkit-overflow-scrolling:touch}
.wc-lb-body img{display:block;max-width:calc(100vw - 24px);max-height:calc(100vh - 130px);max-height:calc(100dvh - 130px - env(safe-area-inset-top,0px));width:auto;height:auto;border-radius:4px;cursor:zoom-in;background:#f7f8f5}
.wc-lb-body.zoom{place-items:start}
.wc-lb-body.zoom img{max-width:none;max-height:none;cursor:zoom-out}
.wc-lb-x{position:absolute;z-index:2;top:calc(env(safe-area-inset-top,0px) + 12px);right:calc(env(safe-area-inset-right,0px) + 12px);width:44px;height:44px;border:1.5px solid #fff;border-radius:3px;background:rgba(7,10,16,.7);color:#fff;font:600 24px/1 var(--mono);cursor:pointer}
.wc-lb-x:hover{background:rgba(255,255,255,.2)}
.wc-lb-hint{position:absolute;z-index:2;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);margin:0;text-align:center;font:500 12.5px var(--mono);color:#c3c9d1;pointer-events:none}
@supports (-webkit-touch-callout:none){.wc-lb-x{top:calc(env(safe-area-inset-top,0px) + 52px)}.wc-lb-body{padding-top:calc(env(safe-area-inset-top,0px) + 104px)}}
/* ---- melding: de server herstart zo voor een update ---- */
.rst-banner{position:fixed;z-index:80;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 14px);width:max-content;max-width:calc(100vw - 24px);box-sizing:border-box;background:#070c16;color:#eef1f5;border:1px solid #2a3443;border-left:5px solid #E8964A;border-radius:5px;padding:11px 16px;font-size:15px;line-height:1.4;box-shadow:0 10px 30px rgba(0,0,0,.4);font-variant-numeric:tabular-nums}
.rst-banner[hidden]{display:none}
.rst-banner a{color:#E8964A;font-weight:700}
.rst-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.upd-delay{display:flex;align-items:center;gap:8px;font-size:14px}
.acc .grid2 .upd-delay input{width:72px;text-align:center}
.upd-pending{margin-top:10px;display:flex;flex-direction:column;gap:10px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:4px;padding:12px 14px;font-variant-numeric:tabular-nums}
.upd-pending[hidden]{display:none}
/* ---- privacy en cookies ---- */
.pv-top{background:#070c16;color:#eef1f5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 14px) max(24px,calc((100vw - 860px)/2)) 14px}
@supports (-webkit-touch-callout:none){.pv-top{padding-top:calc(env(safe-area-inset-top,0px) + 44px)}}
.pv-brand{display:flex;align-items:center;gap:12px;color:#eef1f5;text-decoration:none;font:700 24px/1 var(--display);letter-spacing:.04em;text-transform:uppercase}
.pv-brand img{display:block;width:44px;height:auto}
.pv-top .lang-sel{color:#eef1f5;background:rgba(7,12,22,.6);border-color:rgba(255,255,255,.25)}
.pv-stripe{margin:0}
.pv-main{max-width:860px;margin:0 auto;padding:28px 24px calc(env(safe-area-inset-bottom,0px) + 48px);font-size:16px;line-height:1.55}
.pv-main h1{margin:0 0 10px;font:700 clamp(30px,5vw,44px)/1.05 var(--display)}
.pv-lead{font-size:18px;margin:0 0 8px;max-width:64ch}
.pv-main section{padding:22px 0 4px;border-top:1px solid var(--line);margin-top:22px}
.pv-main h2{margin:0 0 8px;font:700 22px/1.2 var(--display)}
.pv-main p{margin:0 0 10px;max-width:70ch}
.pv-main ul{margin:0 0 10px;padding-left:20px;display:grid;gap:7px;max-width:72ch}
.pv-main a{color:inherit;font-weight:600}
.pv-tablewrap{overflow-x:auto;margin:6px 0 14px;border:1px solid var(--line);border-radius:4px;background:var(--panel)}
.pv-table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
.pv-table th{text-align:left;font:700 12px var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:9px 12px;border-bottom:1px solid var(--line)}
.pv-table td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.pv-table tr:last-child td{border-bottom:0}
.pv-table code{font:500 13px var(--mono);background:var(--bg);border:1px solid var(--line);padding:0 4px;border-radius:3px;white-space:nowrap}
.pv-table td:first-child{line-height:1.9}
.pv-date,.pv-back{margin-top:22px!important;color:var(--muted);font-size:14px}
/* huisregels: akkoord geven en wat er veranderde */
.tm-box{border:1px solid color-mix(in srgb,var(--new) 50%,transparent);background:color-mix(in srgb,var(--new) 9%,transparent);border-radius:4px;padding:12px 16px;margin:8px 0 16px}
.tm-box p{margin:0 0 6px;max-width:none}
.tm-box p:last-child{margin:0}
.tm-legend{font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.pv-main ins,.tm-legend ins{text-decoration:none;background:color-mix(in srgb,var(--ok) 26%,transparent);color:var(--ink);border-radius:2px;padding:0 3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.pv-main del,.tm-legend del{color:var(--muted);text-decoration:line-through}
.pv-main .tm-new,.pv-main .tm-chg,.pv-main .tm-del{border-left:3px solid var(--ok);padding-left:10px;margin-left:-13px}
.pv-main .tm-del{border-left-color:var(--line)}
.tm-mail{border-top:1px solid var(--line);margin-top:22px!important;padding-top:18px}
.tm-mail:has(a[hidden]){display:none}
.tm-act{border-top:1px solid var(--line);margin-top:22px;padding-top:18px}
.tm-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tm-btns .mbtn{margin:0}
.tm-btns [hidden]{display:none}
.tm-act .status{margin:10px 0 0;min-height:1.2em}
.tm-no,.tm-done{color:var(--muted);font-size:14px}
.tm-done{border-top:1px solid var(--line);margin-top:22px!important;padding-top:18px}
.tm-note{margin:18px 0 0;border:1px solid color-mix(in srgb,var(--new) 50%,transparent);background:color-mix(in srgb,var(--new) 9%,transparent);border-radius:4px;padding:10px 14px;font-size:14px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.tm-note[hidden]{display:none}
.tm-note a{color:inherit;font-weight:700}
.tm-later{border:0;background:none;padding:0;font:inherit;color:var(--muted);text-decoration:underline;cursor:pointer}
.tma-text{display:block;width:100%;box-sizing:border-box;margin-top:8px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:3px;padding:10px 12px;font:500 14px/1.5 var(--body);resize:vertical;min-height:220px}
.tma-text[hidden]{display:none}
#tmaGrace{flex:0 0 90px;width:90px}
#tmaLang{border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:3px;padding:6px 8px;font:500 14px var(--body)}
.tma-pending summary{cursor:pointer;font-size:14px;color:var(--muted)}
.tma-pending p{margin:6px 0 0;max-width:none;font:500 13px/1.6 var(--mono)}
.tma-preview{border:1px solid var(--line);border-radius:4px;background:var(--bg);margin:12px 0 0;padding:14px 18px 6px 22px;max-width:none;font-size:15px}
.tma-preview[hidden]{display:none}
.tma-preview section{padding:14px 0 2px;margin-top:14px}
.tma-preview h2{font-size:18px}
.tma-preview p{color:var(--ink);font-size:15px;max-width:70ch}
.wc-links a{color:inherit;font-weight:600}
.ck-note{position:fixed;z-index:40;left:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);width:min(400px,calc(100vw - 28px));box-sizing:border-box;background:#070c16;color:#eef1f5;border:1px solid #2a3443;border-left:5px solid #E8964A;border-radius:5px;padding:13px 15px;font-size:14.5px;line-height:1.45;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.ck-note[hidden]{display:none}
.ck-note p{margin:0 0 10px}
.ck-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ck-row a{color:#E8964A;font-weight:600}
.ck-row .mbtn{padding:7px 14px}
.share-form .upd-delay input{width:76px;flex:0 0 auto;text-align:center}
/* ---- aanvraagvenster: akkoord met de huisregels ---- */
.wc-check{display:flex;align-items:flex-start;gap:10px;margin-top:8px}
.wc-dlg .lg-card .wc-check input{width:20px;height:20px;flex:0 0 auto;margin:1px 0 0;padding:0;accent-color:var(--accent)}
.wc-dlg .lg-card .wc-check label{font:inherit;font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink);margin:0}
.wc-checklinks{margin:0 0 0 30px!important}

/* v95-fix: op 320 px staken keuzelijst en bestandsveld van inlezen/mailserver buiten de kaart */
#colImpFile,#colImpMode,.acc .grid2 label.fl input,.acc .grid2 label.fl select{max-width:100%;box-sizing:border-box;min-width:0}
.acc .grid2 label.fl{min-width:0}
/* v95-fix: oranje tekst op licht vlak haalde 2,7:1; donkerder tint voor tekst (vlakken en randen houden --accent) */
:root{--accent-text:#9A5412}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--accent-text:var(--accent)}}
:root[data-theme="dark"]{--accent-text:var(--accent)}
.st-tile .go,.st-more,.rule .badge.bt,.pill-s.adm,.st.nieuw,.wl-pr.middel,.pkline b{color:var(--accent-text)}
.rule .badge.bt{border-color:var(--accent)}

/* breedte van een getalveld, zonder inline stijl (CSP) */
#regMax.w6,#limSess.w6,#accDays.w6,#accMin.w6,#accMax.w6{width:6em}
.cflag{white-space:nowrap}

/* sorteer- en fotowandopties mogen op een smal scherm naar de volgende regel (anders vallen ze buiten beeld) */
.selrow{flex-wrap:wrap}
.gal-opts select{max-width:100%}
/* Beheer → Aanmeldingen: instellingen als overzichtelijk raster (label · invoer · toelichting) */
.set-intro{margin:0 0 10px;max-width:60ch}
.set-h{font:600 13px var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:16px 0 4px}
.setgrid{display:grid;grid-template-columns:max-content max-content 1fr;gap:8px 16px;align-items:center;margin:6px 0 12px}
.setgrid>label{font-weight:500}
.setgrid .ctl{display:flex;align-items:center;gap:6px;white-space:nowrap}
.setgrid .sub{font:500 12.5px var(--mono);color:var(--muted)}
.set-help{margin-top:10px;max-width:70ch}
.set-help summary{cursor:pointer;font-weight:600}
.set-help p{margin:8px 0 0}
@media (max-width:700px){.setgrid{grid-template-columns:1fr;gap:4px}.setgrid .sub{margin-bottom:10px}}

.mod-only{display:none}
.is-mod .mod-only{display:block}
.reg-pop{width:min(480px,calc(100vw - 32px))}
.reg-pop-list{margin:0;padding-left:18px}
.reg-pop-list li{margin:2px 0}
.em-edit{margin-top:6px;flex-wrap:wrap;gap:6px}
.em-edit input{min-width:200px;flex:1}
.th-sort{all:unset;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;white-space:nowrap}
.th-sort:hover{color:var(--ink)}
.th-sort:focus-visible{outline:2px solid var(--accent,#d98a2b);outline-offset:2px}
.th-sort::after{content:"";display:inline-block;width:1em;opacity:.35}
.th-sort[data-dir="up"]::after{content:" ▲";opacity:1}
.th-sort[data-dir="down"]::after{content:" ▼";opacity:1}
.reg-old summary{cursor:pointer;list-style:revert}
.reg-old summary h4{display:inline;margin:0}
.reg-old[open] summary{margin-bottom:10px}
.reg-mail{margin-top:4px;font-size:.85em}
.lg-link{all:unset;cursor:pointer;align-self:flex-start;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:2px;margin-top:4px}
.lg-link:hover{color:var(--ink)}
.lg-link:focus-visible{outline:2px solid var(--accent,#d98a2b);outline-offset:2px}
.rc-list{font:600 15px var(--mono,ui-monospace,monospace);columns:2;column-gap:24px;margin:6px 0;padding-left:28px;letter-spacing:.04em}
.rc-list li{margin:3px 0}
.rc-ok{margin-top:6px;text-transform:none!important;letter-spacing:0!important;font:inherit!important;color:var(--ink)!important;display:flex;gap:8px;align-items:center}
#rcCode{width:10em}
.notice-bar{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;background:var(--wish);color:#fff;padding:9px 14px;font:600 14px var(--body);border-radius:4px;margin:10px auto;max-width:1180px}
.notice-bar.warn{background:var(--new)}
.notice-bar[hidden]{display:none}
.notice-txt{white-space:pre-wrap}
.notice-x{all:unset;cursor:pointer;font-size:20px;line-height:1;padding:0 4px}
.notice-x:focus-visible{outline:2px solid #fff}