/* ==========================================================================
   Mayor's Bike — Voorraad App
   Reskin from "Voorraad App.dc.html" (Claude Design). Exact colors & metrics.
   Logic mirrors bot.py; Shopify payloads must match the bot exactly.
   ========================================================================== */
:root {
  --ink:#1a1c22; --ink-soft:#43464f; --ink-faint:#8a8e99; --ink-hint:#c7cbd2;
  --paper:#f6f5f1; --card:#fff; --line:#e4e2db; --line-soft:#eeece6;
  --accent:#12b886; --accent-ink:#0b6e4f; --accent-wash:#e6f7f0;
  --amber:#f59f00; --amber-ink:#a87a13; --amber-wash:#fdf3dd;
  --danger:#e03131; --danger-line:#f3c2c2; --danger-wash:#fdeaea;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
}

* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
input::placeholder,textarea::placeholder { color:#b3b7c0; }
a { color:var(--accent-ink); } a:hover { color:var(--accent); }
@keyframes mb-pop { from{transform:scale(.4);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes mb-spin { to{transform:rotate(360deg)} }
@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important;} }

/* ---- desktop: decorative phone frame; mobile: full screen ---- */
body {
  font-family:var(--font); color:var(--ink);
  background:radial-gradient(120% 120% at 50% 0%, #eef1f4 0%, #d8dde3 100%);
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
}
.frame {
  width:100%; max-width:520px; height:100dvh; background:var(--card);
  display:flex; flex-direction:column; overflow:hidden; position:relative;
}
@media (min-width:560px){
  body { padding:26px; }
  .frame {
    width:404px; height:min(834px, calc(100dvh - 40px)); border-radius:36px;
    box-shadow:0 0 0 11px #0e0f12, 0 0 0 13px #2a2c33, 0 34px 80px rgba(14,16,22,.4);
  }
}

/* ---- top bar ---- */
.demo-banner { background:var(--amber-wash); color:var(--amber-ink); font-size:11px; font-weight:700; text-align:center; padding:5px; letter-spacing:.01em; flex:none; }
.topbar { padding:calc(env(safe-area-inset-top) + 11px) 18px 12px; background:var(--card); border-bottom:1px solid var(--line-soft); flex:none; }
.brandrow { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.logo { display:flex; align-items:center; gap:9px; font-weight:800; letter-spacing:-.02em; font-size:15px; color:var(--ink); }
.logo img { height:28px; width:28px; object-fit:cover; border-radius:7px; display:block; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.hdr-actions { display:flex; align-items:center; gap:8px; }
.loc-chip { font-size:11px; font-weight:700; color:var(--ink-soft); background:var(--line-soft); padding:5px 9px; border-radius:999px; display:inline-flex; align-items:center; gap:4px; max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:none; }
.icon-btn { appearance:none; border:1.5px solid var(--line); background:var(--card); width:34px; height:34px; border-radius:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); flex:none; position:relative; transition:.14s; }
.icon-btn:hover { border-color:var(--accent); color:var(--accent-ink); }
.icon-btn .badge { position:absolute; top:-6px; right:-6px; min-width:16px; height:16px; padding:0 4px; background:var(--accent); color:#fff; font-size:10px; font-weight:800; border-radius:999px; display:flex; align-items:center; justify-content:center; }

.progress { margin-top:13px; }
.progress .plabel { display:flex; justify-content:space-between; align-items:baseline; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:6px; }
.progress .plabel .name { color:var(--ink); letter-spacing:-.01em; text-transform:none; font-size:13px; }
.progress .track { height:5px; background:var(--line-soft); border-radius:999px; overflow:hidden; }
.progress .fill { height:100%; background:var(--accent); border-radius:999px; transition:width .35s cubic-bezier(.4,0,.2,1); }

/* ---- screen body ---- */
.screen { flex:1; min-height:0; overflow-y:auto; padding:20px 18px 26px; display:flex; flex-direction:column; gap:16px; -webkit-overflow-scrolling:touch; }
.stack { display:flex; flex-direction:column; gap:16px; }
.screen h2 { font-size:19px; letter-spacing:-.02em; margin:0 0 5px; color:var(--ink); font-weight:800; text-wrap:balance; }
.screen p.sub { font-size:13px; color:var(--ink-soft); line-height:1.45; margin:0; }
.head-row { display:flex; align-items:center; gap:10px; }

/* grids */
.grid { display:grid; gap:9px; }
.g2 { grid-template-columns:1fr 1fr; }
.g3 { grid-template-columns:1fr 1fr 1fr; }

/* option buttons */
.opt { appearance:none; border:1.5px solid var(--line); background:var(--card); color:var(--ink); font-family:inherit; font-size:14.5px; font-weight:600; padding:15px 12px; border-radius:11px; cursor:pointer; text-align:center; display:flex; align-items:center; justify-content:center; gap:7px; min-height:52px; letter-spacing:-.01em; transition:border-color .14s,background .14s,color .14s; }
.opt:hover { border-color:var(--accent); background:var(--accent-wash); }
.opt.sel { border-color:var(--accent); background:var(--accent-wash); color:var(--accent-ink); }
.opt-x { position:absolute; top:1px; right:4px; font-size:14px; line-height:1; color:var(--ink-faint); font-weight:700; padding:2px 4px; border-radius:6px; }
.opt-x:hover { color:var(--danger); background:var(--danger-wash); }
.opt-big { flex-direction:column; gap:6px; padding:20px 12px; font-size:15px; }
.opt-big .em { font-size:26px; }
.opt.ebike:hover { border-color:var(--amber); background:var(--amber-wash); }
.opt.ebike.sel { border-color:var(--accent); background:var(--accent-wash); }
.pill-e { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--amber-ink); background:var(--amber-wash); padding:2px 7px; border-radius:999px; }

/* CTAs */
.cta { appearance:none; border:none; width:100%; background:var(--accent); color:#fff; font-family:inherit; font-size:15.5px; font-weight:800; letter-spacing:-.01em; padding:16px; border-radius:16px; cursor:pointer; box-shadow:0 6px 16px rgba(18,184,134,.4); display:flex; align-items:center; justify-content:center; gap:8px; transition:filter .14s; }
.cta:hover { filter:brightness(1.05); }
.cta.secondary { background:var(--line-soft); color:var(--ink); box-shadow:none; }
.cta.secondary:hover { filter:brightness(.97); }
.ghost { appearance:none; background:transparent; color:var(--ink-soft); border:1.5px dashed var(--line); width:100%; font-family:inherit; font-size:14.5px; font-weight:700; padding:14px; border-radius:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:border-color .14s,color .14s; }
.ghost:hover { border-color:var(--accent); color:var(--accent-ink); }
.ghost.sel { border-style:solid; border-color:var(--accent); background:var(--accent-wash); color:var(--accent-ink); }
.danger-btn { appearance:none; background:transparent; color:var(--danger); border:1.5px solid var(--danger-line); width:100%; font-family:inherit; font-size:14.5px; font-weight:700; padding:14px; border-radius:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:background .14s; }
.danger-btn:hover { background:var(--danger-wash); }

.navrow { display:flex; gap:9px; margin-top:2px; }
.navbtn { appearance:none; border:1.5px solid var(--line); background:var(--card); color:var(--ink-soft); font-family:inherit; font-weight:700; font-size:13px; padding:12px; border-radius:11px; cursor:pointer; flex:1; display:flex; align-items:center; justify-content:center; gap:6px; transition:color .14s,border-color .14s; }
.navbtn:hover { color:var(--ink); border-color:var(--ink-faint); }
.navbtn.cancel:hover { color:var(--danger); border-color:var(--danger); }

/* photo capture */
.photo-drop { border:2px dashed var(--line); border-radius:16px; padding:30px 16px; text-align:center; cursor:pointer; background:var(--card); display:flex; flex-direction:column; align-items:center; gap:8px; transition:.14s; }
.photo-drop:hover { border-color:var(--accent); background:var(--accent-wash); }
.photo-drop b { font-size:15px; color:var(--ink); }
.photo-drop span { font-size:12px; color:var(--ink-soft); }
.thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.thumb { aspect-ratio:1; border-radius:12px; overflow:hidden; position:relative; background:#cfd3da; }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.thumb .rm { position:absolute; top:3px; right:3px; width:20px; height:20px; background:rgba(0,0,0,.6); color:#fff; border-radius:50%; font-size:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.sumphotos { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sumphotos .ph { aspect-ratio:4/3; border-radius:14px; overflow:hidden; background:#cfd3da; }
.sumphotos .ph img { width:100%; height:100%; object-fit:cover; display:block; }

/* inputs */
.txt { border:1.5px solid var(--line); border-radius:16px; background:var(--card); padding:15px 16px; font-family:inherit; font-size:16px; font-weight:600; color:var(--ink); outline:none; width:100%; transition:.14s; }
.txt:focus { border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-wash); }
.money { display:flex; align-items:center; gap:10px; border:1.5px solid var(--line); border-radius:16px; background:var(--card); padding:0 16px; transition:.14s; }
.money:focus-within { border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-wash); }
.money .cur { font-size:26px; font-weight:800; color:var(--ink-faint); }
.money input { border:none; background:transparent; outline:none; flex:1; font-family:inherit; font-size:30px; font-weight:800; letter-spacing:-.02em; color:var(--ink); padding:16px 0; min-width:0; font-variant-numeric:tabular-nums; }
.chip { appearance:none; border:1.5px solid var(--line); background:var(--card); color:var(--ink); font-family:inherit; font-size:13px; font-weight:600; padding:0 8px; min-height:44px; border-radius:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .14s,background .14s; }
.chip:hover { border-color:var(--accent); background:var(--accent-wash); }

/* inline "add custom value" row (frame size / gears / brand) */
.addrow { display:flex; gap:9px; align-items:stretch; }
.addrow .txt { flex:1; min-width:0; }
.addbtn { appearance:none; border:none; background:var(--accent); color:#fff; font-family:inherit; font-weight:800; font-size:14px; padding:0 16px; border-radius:16px; cursor:pointer; flex:none; white-space:nowrap; transition:filter .14s; }
.addbtn:hover { filter:brightness(1.05); }
.addbtn:active { transform:scale(.98); }
.field-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); }

/* shop cards (login + settings) */
.shop-card { appearance:none; background:var(--card); border:1.5px solid var(--line); border-radius:16px; padding:14px; cursor:pointer; display:flex; align-items:center; gap:13px; text-align:left; width:100%; font-family:inherit; transition:border-color .14s,background .14s; }
.shop-card:hover { border-color:var(--accent); background:var(--accent-wash); }
.shop-card.sel { border-color:var(--accent); background:var(--accent-wash); }
.shop-card .pin { width:44px; height:44px; border-radius:12px; background:var(--accent-wash); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; flex:none; }
.shop-card .info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.shop-card .info .name { font-size:15px; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.shop-card .info .sub { font-size:12.5px; color:var(--ink-soft); font-weight:600; }

/* summary */
.sumcard { background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.sumrow { display:flex; align-items:center; justify-content:space-between; padding:13px 15px; border-bottom:1px solid var(--line-soft); gap:12px; }
.sumrow .k { font-size:12.5px; color:var(--ink-soft); font-weight:600; display:flex; align-items:center; gap:8px; }
.sumrow .r { display:flex; align-items:center; gap:10px; }
.sumrow .v { font-size:14px; font-weight:700; letter-spacing:-.01em; text-align:right; }
.sumrow .edit { font-size:11px; color:var(--accent-ink); font-weight:700; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.sumrow.total { background:var(--accent-wash); border-bottom:none; }
.sumrow.total .k { font-weight:700; }
.sumrow.total .v { font-size:17px; font-weight:800; color:var(--accent-ink); letter-spacing:-.02em; }

/* sending + success */
.center-min { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; min-height:56vh; text-align:center; }
.spinner { width:54px; height:54px; border:4px solid var(--line-soft); border-top-color:var(--accent); border-radius:50%; animation:mb-spin 1s linear infinite; }
.center-min p { color:var(--ink-soft); font-size:14px; font-weight:600; line-height:1.5; }
.success-badge { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:6px 0; }
.success-badge .ring { width:70px; height:70px; border-radius:50%; background:var(--accent-wash); display:flex; align-items:center; justify-content:center; color:var(--accent-ink); box-shadow:0 0 0 8px rgba(18,184,134,.12); animation:mb-pop .4s cubic-bezier(.34,1.56,.64,1); }
.label-preview { border:1px solid var(--line); border-radius:12px; background:#fff; color:#111; padding:14px; box-shadow:0 8px 24px rgba(20,22,28,.08); }
.label-preview .barcode { height:44px; background:repeating-linear-gradient(90deg,#111 0 2px,#fff 2px 4px,#111 4px 5px,#fff 5px 9px); border-radius:2px; }
.label-preview .bcnum { text-align:center; font-size:11px; letter-spacing:.15em; margin-top:5px; color:#333; }
.label-preview .lp-price { font-size:30px; font-weight:800; margin-top:10px; letter-spacing:-.02em; }
.label-preview .lp-title { font-size:12px; font-weight:600; color:#333; margin-top:2px; line-height:1.3; }

/* history */
.search { display:flex; align-items:center; gap:9px; border:1.5px solid var(--line); border-radius:14px; background:var(--card); padding:0 12px; }
.search:focus-within { border-color:var(--accent); }
.search input { border:none; background:transparent; outline:none; flex:1; font-family:inherit; font-size:14px; font-weight:600; color:var(--ink); padding:12px 0; min-width:0; }
.search .clr { appearance:none; border:none; background:transparent; color:var(--ink-faint); cursor:pointer; font-size:16px; padding:4px; flex:none; }
.search .clr:hover { color:var(--ink); }
.tabs { display:flex; border-bottom:1px solid var(--line-soft); }
.tab { appearance:none; border:none; background:transparent; font-family:inherit; font-size:13px; font-weight:700; padding:9px 4px; cursor:pointer; flex:1; border-bottom:2.5px solid transparent; color:var(--ink-faint); }
.tab.active { border-bottom-color:var(--accent); color:var(--accent-ink); }
.hlist { display:flex; flex-direction:column; gap:10px; }
.hrec { display:flex; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:12px; align-items:center; cursor:pointer; transition:.14s; }
.hrec:hover { border-color:var(--accent); }
.hrec.sold { opacity:.92; }
.hrec.sold:hover { opacity:1; }
.hrec .th { width:56px; height:56px; border-radius:12px; overflow:hidden; background:#cfd3da; flex:none; }
.hrec .th img { width:100%; height:100%; object-fit:cover; display:block; }
.hrec .th.empty { background:var(--paper); display:flex; align-items:center; justify-content:center; color:var(--ink-hint); }
.hrec .body { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.hrec .top { display:flex; align-items:center; gap:7px; }
.hrec .title { font-size:13px; font-weight:700; color:var(--ink); line-height:1.3; }
.hrec .meta { font-size:11px; color:var(--ink-faint); font-weight:600; }
.hrec .price { font-size:15px; font-weight:800; letter-spacing:-.02em; margin-left:auto; }
.cat-tag { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:3px 8px; border-radius:999px; }
.cat-tag.bike { color:var(--accent-ink); background:var(--accent-wash); }
.cat-tag.ebike { color:var(--amber-ink); background:var(--amber-wash); }
.cat-tag.sold { color:var(--ink-soft); background:var(--line-soft); }
.empty-state { display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:36px 16px; color:var(--ink-faint); }
.empty-state p { font-size:13.5px; font-weight:600; }

/* detail */
.detail-img { aspect-ratio:4/3; border-radius:16px; overflow:hidden; background:#cfd3da; }
.detail-img img { width:100%; height:100%; object-fit:cover; display:block; }
.detail-img.empty { aspect-ratio:16/9; background:var(--paper); display:flex; align-items:center; justify-content:center; color:var(--ink-hint); }
.sold-banner { display:flex; align-items:center; gap:8px; background:var(--line-soft); color:var(--ink-soft); border-radius:12px; padding:10px 14px; font-size:12.5px; font-weight:700; }
.detail-head { display:flex; align-items:center; gap:8px; }
.detail-head .price { font-size:22px; font-weight:800; color:var(--accent-ink); letter-spacing:-.02em; margin-left:auto; }
.detail-title { font-size:15px; font-weight:800; color:var(--ink); line-height:1.3; }
.coll-wrap { display:flex; flex-direction:column; gap:9px; }
.coll-tags { display:flex; flex-wrap:wrap; gap:7px; }
.coll-tag { font-size:11.5px; font-weight:700; padding:6px 11px; border-radius:999px; display:inline-flex; align-items:center; gap:5px; color:var(--accent-ink); background:var(--accent-wash); }
.coll-add { appearance:none; font-family:inherit; font-size:11.5px; font-weight:700; padding:6px 11px; border-radius:999px; cursor:pointer; border:1.5px dashed var(--ink-hint); background:var(--card); color:var(--ink-soft); display:inline-flex; align-items:center; gap:4px; }
.coll-add:hover { border-color:var(--accent); color:var(--accent-ink); }
.coll-picker { background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:12px; display:flex; flex-wrap:wrap; gap:8px; }
.coll-opt { appearance:none; font-family:inherit; font-size:12.5px; font-weight:700; padding:9px 12px; border-radius:999px; cursor:pointer; transition:.14s; border:1.5px solid var(--line); background:var(--card); color:var(--ink-soft); }
.coll-opt.sel { border-color:var(--accent); background:var(--accent-wash); color:var(--accent-ink); }
.sold-pending { display:flex; flex-direction:column; gap:10px; background:var(--accent-wash); border:1px solid #8fe0c2; border-radius:16px; padding:14px; }
.sold-pending .h { display:flex; align-items:center; gap:8px; color:var(--accent-ink); font-size:13.5px; font-weight:800; }
.sold-pending p { font-size:12.5px; color:var(--ink-soft); line-height:1.4; }
.editfield { display:flex; flex-direction:column; gap:6px; }
.editfield textarea { border:1.5px solid var(--line); border-radius:14px; background:var(--card); padding:12px 14px; font-family:inherit; font-size:14px; font-weight:700; color:var(--ink); outline:none; width:100%; resize:none; line-height:1.35; }
.editfield textarea:focus { border-color:var(--accent); }
.mini-money { display:flex; align-items:center; gap:6px; border:1.5px solid var(--line); border-radius:14px; background:var(--card); padding:0 12px; }
.mini-money span { font-size:18px; font-weight:800; color:var(--ink-faint); }
.mini-money input { border:none; background:transparent; outline:none; flex:1; font-family:inherit; font-size:18px; font-weight:800; color:var(--ink); padding:12px 0; min-width:0; }

/* offline / cached-data banner */
.offline-note { background:var(--amber-wash); color:var(--amber-ink); font-size:12px; font-weight:700; padding:9px 12px; border-radius:12px; text-align:center; line-height:1.35; display:flex; flex-direction:column; gap:7px; align-items:center; }
.reconnect-btn { appearance:none; border:1.5px solid var(--amber); background:transparent; color:var(--amber-ink); font-family:inherit; font-size:12px; font-weight:800; padding:6px 14px; border-radius:999px; cursor:pointer; }
.reconnect-btn:hover { background:rgba(245,159,0,.12); }

/* ---- printable barcode label (window.print) ---- */
#printroot { display:none; }
@media print {
  html, body { background:#fff !important; height:auto; overflow:visible; }
  body > *:not(#printroot) { display:none !important; }
  #printroot { display:block !important; }
  @page { size:100mm 70mm; margin:4mm; }
  .plabel { text-align:center; color:#000; font-family:Arial, Helvetica, sans-serif; }
  .plabel .pl-bc { line-height:0; }
  .plabel .pl-bc svg { width:92mm; height:auto; }
  .plabel .pl-num { font-size:11pt; letter-spacing:2px; margin-top:2px; }
  .plabel .pl-price { font-size:34pt; font-weight:800; margin-top:5px; letter-spacing:-.5pt; }
  .plabel .pl-title { font-size:11pt; font-weight:600; margin-top:2px; line-height:1.25; }
}

/* toast */
.toast { position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + 20px); transform:translateX(-50%); background:var(--danger); color:#fff; padding:12px 18px; border-radius:12px; font-size:13px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.25); z-index:100; max-width:88%; text-align:center; }

/* =============================================================================
   ACCOUNTS — sign-in, user administration and the activity log.
   Uses the same tokens as the rest of the app; nothing new invented.
   ========================================================================== */

/* option rows (shop / role / access pickers) */
.opts { display:flex; flex-wrap:wrap; gap:8px; }
.opts .opt { appearance:none; border:1.5px solid var(--line); background:var(--card); color:var(--ink); font-family:inherit; font-size:13.5px; font-weight:700; padding:11px 14px; border-radius:12px; cursor:pointer; transition:border-color .14s,background .14s,color .14s; }
.opts .opt:hover { border-color:var(--accent); background:var(--accent-wash); }
.opts .opt.sel { border-color:var(--accent); background:var(--accent-wash); color:var(--accent-ink); }

/* "ingelogd als" row in Instellingen */
.acct-row { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--card); border:1.5px solid var(--line); border-radius:16px; padding:13px 14px; }
.acct-row b { font-size:15px; font-weight:800; letter-spacing:-.01em; }
.acct-row .sub { font-size:12.5px; color:var(--ink-soft); font-weight:600; }
.acct-row .addbtn { padding:10px 14px; background:var(--line-soft); color:var(--ink); }
.acct-row .addbtn:hover { background:var(--danger-wash); color:var(--danger); filter:none; }

/* permission checklist */
.permrow { appearance:none; width:100%; text-align:left; font-family:inherit; background:var(--card); border:1.5px solid var(--line); border-radius:14px; padding:11px 13px; cursor:pointer; display:flex; align-items:center; gap:11px; transition:border-color .14s,background .14s; }
.permrow + .permrow { margin-top:7px; }
.permrow:hover { border-color:var(--accent); }
.permrow.on { border-color:var(--accent); background:var(--accent-wash); }
.permrow.locked { opacity:.72; cursor:default; }
.permbox { width:24px; height:24px; flex:none; border-radius:8px; border:1.5px solid var(--line); background:var(--card); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:900; }
.permrow.on .permbox { background:var(--accent); border-color:var(--accent); }
.perminfo { display:flex; flex-direction:column; gap:1px; min-width:0; }
.perminfo b { font-size:14px; font-weight:800; letter-spacing:-.01em; }
.perminfo .sub { font-size:12px; color:var(--ink-soft); font-weight:600; line-height:1.3; }

/* dimmed (blocked) user card */
.shop-card.dim { opacity:.55; }

/* destructive full-width action (delete user) */
.cta.danger { background:var(--danger); box-shadow:0 6px 16px rgba(224,49,49,.32); }

/* activity log */
.auditrow { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:11px 13px; display:flex; flex-direction:column; gap:3px; }
.auditrow + .auditrow { margin-top:7px; }
.auditrow .aline { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.auditrow .aline b { font-size:14px; font-weight:800; letter-spacing:-.01em; }
.auditrow .sub { font-size:12.5px; color:var(--ink-soft); font-weight:600; line-height:1.35; }
.auditrow .sub.dim { color:var(--ink-faint); font-size:11.5px; }
.atag { font-size:11px; font-weight:800; padding:4px 9px; border-radius:999px; background:var(--line-soft); color:var(--ink-soft); white-space:nowrap; }
.atag.good { background:var(--accent-wash); color:var(--accent-ink); }
.atag.bad { background:var(--danger-wash); color:var(--danger); }

/* ---- NL | EN switch (sign-in header + Instellingen) ---- */
.langswitch { display:inline-flex; border:1.5px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card); flex:none; }
.langbtn { appearance:none; border:none; background:transparent; font-family:inherit; font-size:12px; font-weight:800; letter-spacing:.03em; color:var(--ink-faint); padding:8px 11px; cursor:pointer; transition:background .14s,color .14s; }
.langbtn + .langbtn { border-left:1.5px solid var(--line); }
.langbtn:hover { color:var(--ink); }
.langbtn.sel { background:var(--accent-wash); color:var(--accent-ink); }

/* ---- "Powered by klikee.nl" — quiet strip pinned under the app ---- */
.madeby {
  flex:none; text-align:center; font-size:11px; font-weight:600; letter-spacing:.02em;
  color:var(--ink-hint); background:var(--card); border-top:1px solid var(--line-soft);
  padding:9px 12px calc(env(safe-area-inset-bottom) + 9px);
}
.madeby a { color:var(--ink-faint); text-decoration:none; font-weight:800; }
.madeby a:hover { color:var(--accent-ink); text-decoration:underline; }