/* ═════════════════════════════════════════════════════════════════════════
   /auth — the shared base of the whole site: tokens, base, building blocks
   (buttons, forms, messages, cards / panels, tables, tabs, badges, menus),
   the site layout (header, container, settings, profile) and responsive rules.
   admin.css (staff panel) and module CSS (support.css …) only add their own
   parts and use ONLY these tokens — so dark / light and every screen size
   follow by themselves.

   Two looks from one set of tokens: <html data-theme="dark|light">.
   Dark = "deep orbit": night blue-black, crystal blue as the action colour,
   deuterium green for good, energy amber for warnings. Ranks keep their own
   colours everywhere (mod orange, admin red, owner purple, player+ blue);
   the avatar ring shows the rank — that ring is the one signature element.

   Screen sizes (mobile first where it matters):
     ≤ 480 phone · ≤ 768 large phone / small tablet · ≤ 1024 tablet · ≥ 1440 wide
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root {
  /* space (4-px steps) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;
  /* type */
  --fs-xs:12px; --fs-s:13px; --fs-m:14.5px; --fs-l:16px; --fs-xl:18px;   /* readability: nothing below 12px */ --fs-h1:clamp(19px, 1.2rem + .5vw, 24px);
  --font:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* shape */
  --radius:12px; --radius-s:8px; --radius-l:16px; --pill:999px;
  /* layout */
  --w-site:1240px; --w-read:760px; --w-form:860px; --w-aside:300px;
  --gutter:clamp(14px, 3vw, 28px); --top-h:58px; --tap:40px;
  /* layers */
  --z-sticky:40; --z-drop:60; --z-drawer:90; --z-top:100;
}
:root, :root[data-theme="dark"] {
  --bg:#0f141f; --surface:#161d2b; --surface-2:#1c2536; --raise:#232e43; --input:#111827;
  --line:#283349; --line-2:#36435e;
  --text:#e8ecf4; --muted:#9ca8bf; --faint:#7f8ba3;   /* muted ≥ 7:1, faint ≥ 4.5:1 on the surface */
  --accent:#5cc8f0; --accent-2:#86d8f5; --accent-ink:#04212d; --focus:rgba(92,200,240,.35);
  --ok:#36c49a; --ok-bg:rgba(54,196,154,.13);
  --err:#f06a5f; --err-bg:rgba(240,106,95,.13);
  --warn:#f0b041; --warn-bg:rgba(240,176,65,.13);
  --info:#7fb2ff; --info-bg:rgba(127,178,255,.13);
  --r-mod:#f2913d; --r-admin:#ef5b56; --r-owner:#b18cff; --r-plus:#5cc8f0; --r-player:#4a5772;
  --header:#0b1019; --header-text:#e8ecf4; --header-muted:#aab4c8; --header-line:rgba(255,255,255,.12);
  --shadow:0 10px 30px rgba(0,0,0,.35); --shadow-s:0 1px 2px rgba(0,0,0,.25);
  --shade:rgba(3,6,12,.6); --picker-filter:invert(.8);
  color-scheme:dark;
}
:root[data-theme="light"] {
  --bg:#f3f5f9; --surface:#ffffff; --surface-2:#f7f9fc; --raise:#eef2f8; --input:#ffffff;
  --line:#e2e7ef; --line-2:#cdd5e2;
  --text:#172033; --muted:#556178; --faint:#6c7689;   /* muted ≥ 6:1, faint ≥ 4.5:1 on white */
  --accent:#1f8fc0; --accent-2:#167aa6; --accent-ink:#ffffff; --focus:rgba(31,143,192,.25);
  --ok:#17875e; --ok-bg:#e3f5ed; --err:#c93a33; --err-bg:#fdecea; --warn:#9a6200; --warn-bg:#fff3d6; --info:#2558b8; --info-bg:#e9f0fe;
  --r-mod:#c25a00; --r-admin:#c93a33; --r-owner:#6b3fc2; --r-plus:#1f8fc0; --r-player:#9aa4b5;
  --header:#141a26; --shadow:0 10px 30px rgba(16,24,40,.12); --shadow-s:0 1px 2px rgba(16,24,40,.06);
  --shade:rgba(15,20,31,.45); --picker-filter:none;
  color-scheme:light;
}
/* mid = gedimd (lichter dan dark); erft tekst/accent van het dark-blok, overschrijft alleen de vlakken */
:root[data-theme="mid"] {
  --bg:#1a2231; --surface:#222c3e; --surface-2:#293549; --raise:#324258; --input:#1a2231;
  --line:#37455f; --line-2:#47566f;
  --header:#141b28; --header-line:rgba(255,255,255,.11);
  --shadow:0 10px 30px rgba(0,0,0,.42); --shadow-s:0 1px 2px rgba(0,0,0,.3);
  color-scheme:dark;
}
/* black = extreem dark (bijna zwart, OLED) */
:root[data-theme="black"] {
  --bg:#05070b; --surface:#0b0f16; --surface-2:#10141d; --raise:#191f2b; --input:#070a10;
  --line:#1b2330; --line-2:#29313f; --faint:#8893a8;
  --header:#030507; --header-line:rgba(255,255,255,.09);
  --shadow:0 12px 36px rgba(0,0,0,.65); --shadow-s:0 1px 2px rgba(0,0,0,.5);
  color-scheme:dark;
}
@media (pointer:coarse) { :root { --tap:44px; } }

/* ── Base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(var(--top-h) + 12px); }
body { margin:0; min-height:100vh; min-height:100dvh; background:var(--bg); color:var(--text);
  font:14px/1.55 var(--font); -webkit-font-smoothing:antialiased; overflow-wrap:break-word; }
img, svg, video { max-width:100%; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
h1, h2, h3, h4 { margin:0 0 .55em; line-height:1.25; font-weight:650; letter-spacing:-.01em; overflow-wrap:anywhere; }
h1 { font-size:var(--fs-h1); } h2 { font-size:16px; } h3 { font-size:14px; }
h4 { font-size:var(--fs-s); margin:8px 0 6px; color:var(--muted); font-weight:600; }
p { margin:0 0 .8em; }
.muted { color:var(--muted); } .faint { color:var(--faint); } .small { font-size:var(--fs-s); } .nowrap { white-space:nowrap; }
.mt { margin-top:var(--sp-3); } .right { margin-left:auto; } .grow { flex:1; }
code, .mono { font:12px/1.4 var(--mono); }
code { background:var(--surface-2); border:1px solid var(--line); padding:1px 5px; border-radius:5px; color:var(--text); overflow-wrap:anywhere; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
[hidden] { display:none !important; }
.sr-only, .visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
::selection { background:color-mix(in srgb, var(--accent) 35%, transparent); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

/* ── Forms ─────────────────────────────────────────────────────────────── */
label { display:block; margin:0 0 var(--sp-3); font-size:13px; font-weight:500; color:var(--text); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=date], input[type=datetime-local], input[type=url], input[type=tel], select, textarea {
  display:block; width:100%; max-width:100%; margin-top:5px; padding:8px 11px; min-height:36px; font:inherit; font-size:var(--fs-m); color:var(--text);
  background:var(--input); border:1px solid var(--line-2); border-radius:var(--radius-s); transition:border-color .12s, box-shadow .12s; }
textarea { min-height:90px; resize:vertical; line-height:1.5; }
select { appearance:none; padding-right:30px;
  background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size:5px 5px; background-repeat:no-repeat; }
input::placeholder, textarea::placeholder { color:var(--faint); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--focus); }
input[type=datetime-local]::-webkit-calendar-picker-indicator, input[type=date]::-webkit-calendar-picker-indicator { filter:var(--picker-filter); cursor:pointer; }
label.check { display:flex; gap:8px; align-items:center; font-weight:400; }
.twofa-choice { display:grid; gap:8px; }
.twofa-choice label.twofa-opt { align-items:flex-start; padding:8px 10px; border:1px solid var(--line, #ddd); border-radius:8px; }
.twofa-choice label.twofa-opt input { margin-top:4px; }
input[type=checkbox], input[type=radio] { accent-color:var(--accent); width:15px; height:15px; margin:0; flex-shrink:0; }
.field-error { color:var(--err); display:block; margin-top:4px; font-weight:400; font-size:var(--fs-s); }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-foot { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; margin-top:6px; }
.grid-form { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:4px var(--sp-4); }
.grid-form .form-foot, .grid-form .span2 { grid-column:1 / -1; }
.actions { display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap; margin-top:var(--sp-4); }
/* touch screens: 16 px in fields (no zoom on iPhone) and bigger targets */
@media (pointer:coarse) {
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=date], input[type=datetime-local], input[type=url], input[type=tel], select, textarea { font-size:16px; min-height:var(--tap); }
  input[type=checkbox], input[type=radio] { width:18px; height:18px; }
}

/* Buttons: one action colour; ghost for the rest; red only for what removes or punishes */
button, .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 15px; min-height:36px; font:inherit; font-size:var(--fs-m); font-weight:600;
  line-height:1.2; white-space:nowrap; cursor:pointer; border-radius:var(--radius-s); border:1px solid transparent;
  background:var(--accent); color:var(--accent-ink); transition:background .12s, border-color .12s, color .12s; text-decoration:none; -webkit-tap-highlight-color:transparent; }
button:hover, .btn:hover { background:var(--accent-2); text-decoration:none; }
button.ghost, .btn.ghost, button.grey, .btn.grey { background:transparent; color:var(--text); border-color:var(--line-2); font-weight:500; }
button.ghost:hover, .btn.ghost:hover, button.grey:hover, .btn.grey:hover { background:var(--raise); }
button.danger, .btn.danger, button.red, .btn.red { background:var(--err); color:#fff; }
button.danger:hover, .btn.danger:hover, button.red:hover, .btn.red:hover { background:color-mix(in srgb, var(--err) 85%, #000); }
button.green, .btn.green { background:var(--ok); color:#04130d; }
button.small, .btn.small { padding:5px 10px; min-height:30px; font-size:var(--fs-s); }
button.full, .btn.full { width:100%; padding:10px 15px; }
button.link { background:none; border:0; padding:0; min-height:0; color:inherit; font-weight:inherit; white-space:normal; }
button.link:hover { background:none; text-decoration:underline; }
button.icon { background:transparent; color:var(--muted); border:1px solid var(--line-2); width:30px; height:30px; min-height:0; padding:0; font-size:16px; }
button.icon:hover { color:var(--err); border-color:var(--err); background:transparent; }
button:disabled, .btn[aria-disabled="true"] { opacity:.5; cursor:not-allowed; }
@media (pointer:coarse) { button, .btn { min-height:var(--tap); } button.small, .btn.small { min-height:36px; } button.link { min-height:0; } }

/* ── Messages ──────────────────────────────────────────────────────────── */
.msg { padding:10px 13px; border-radius:var(--radius-s); margin:0 0 14px; font-size:var(--fs-m); border:1px solid transparent; }
.msg.ok { background:var(--ok-bg); color:var(--ok); border-color:color-mix(in srgb, var(--ok) 30%, transparent); }
.msg.error { background:var(--err-bg); color:var(--err); border-color:color-mix(in srgb, var(--err) 30%, transparent); }
.msg.info { background:var(--info-bg); color:var(--info); border-color:color-mix(in srgb, var(--info) 30%, transparent); }
.msg.warn { background:var(--warn-bg); color:var(--warn); border-color:color-mix(in srgb, var(--warn) 30%, transparent); }
.msg a { color:inherit; text-decoration:underline; }
.notice-body { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-s); padding:12px 14px; margin:10px 0 16px; white-space:normal; }
.notice-warning h2 { color:var(--warn); } .notice-kick h2 { color:var(--r-mod); }
/* A rule named in a staff message ([rule]…[/rule]) — the player sees it at once */
.rule { display:block; margin:8px 0 10px; padding:7px 12px; border-left:4px solid var(--err); background:var(--err-bg);
  border-radius:0 var(--radius-s) var(--radius-s) 0; font-weight:650; color:var(--text); }

/* ── Cards, panels, page head, two columns ─────────────────────────────── */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--sp-5) 22px; margin-bottom:var(--sp-4); min-width:0; }
:root[data-theme="light"] .card, :root[data-theme="light"] .panel { box-shadow:var(--shadow-s); }
.card.empty { text-align:center; padding:48px 20px; }
.card > :last-child { margin-bottom:0; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:14px; overflow:hidden; min-width:0; }
.panel > h3 { margin:0; padding:12px 16px; font-size:14px; border-bottom:1px solid var(--line); display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.panel > h3 a { font-size:var(--fs-s); font-weight:500; margin-left:auto; }
.panel > .in { padding:14px 16px; }
.panel > .in > :last-child { margin-bottom:0; }
.panel.danger { border-color:color-mix(in srgb, var(--err) 45%, var(--line)); } .panel.danger > h3 { color:var(--err); }
.page-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-4); }
.page-head h1 { margin:0; }
.crumbs { font-size:13px; color:var(--muted); margin:0 0 var(--sp-3); }
/* main column + side column (support, tickets …); stacks on tablets and phones */
.layout-2 { display:grid; grid-template-columns:minmax(0, 1fr) var(--w-aside); gap:var(--sp-5); align-items:start; }
.layout-2 > * { min-width:0; }
.layout-2 > aside { position:sticky; top:calc(var(--top-h) + var(--sp-4)); }
.prose { max-width:var(--w-read); } .prose p, .prose li { line-height:1.65; } .prose ul { padding-left:20px; margin:0 0 1em; } .prose li { margin-bottom:6px; }
.prose h3 { margin-top:20px; }
.narrow { max-width:var(--w-form); }
details.dev summary { cursor:pointer; color:var(--muted); } details.dev pre { overflow:auto; font-size:12px; }
.list { list-style:none; margin:0; padding:0; }
.list li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.list li:last-child { border-bottom:0; } .list li > div { display:flex; flex-direction:column; gap:2px; min-width:0; }
.srow { display:flex; gap:10px; align-items:center; padding:9px 0; border-bottom:1px dashed var(--line); flex-wrap:wrap; } .srow:last-of-type { border-bottom:0; } .srow > b { min-width:90px; }
.current { margin-bottom:14px; }
.switch-row { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; } .switch-row p { margin:0; }

/* ── Badges / pills / counters ─────────────────────────────────────────── */
.badge { display:inline-block; padding:1px 8px; border-radius:var(--pill); font-size:var(--fs-xs); font-weight:600; line-height:18px; background:var(--raise); color:var(--muted); white-space:nowrap; vertical-align:middle; }
.badge.green { background:var(--ok-bg); color:var(--ok); } .badge.red { background:var(--err-bg); color:var(--err); }
.badge.blue { background:var(--info-bg); color:var(--info); } .badge.yellow { background:var(--warn-bg); color:var(--warn); }
.badge.orange, .badge.rank-mod { background:color-mix(in srgb, var(--r-mod) 16%, transparent); color:var(--r-mod); }
.badge.purple, .badge.rank-owner { background:color-mix(in srgb, var(--r-owner) 16%, transparent); color:var(--r-owner); }
.badge.rank-admin { background:color-mix(in srgb, var(--r-admin) 16%, transparent); color:var(--r-admin); }
.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 11px; border-radius:var(--pill); font-size:var(--fs-s); font-weight:650; border:1px solid currentColor; }
.pill.rank-mod { color:var(--r-mod); } .pill.rank-admin { color:var(--r-admin); } .pill.rank-owner { color:var(--r-owner); } .pill.rank-plus { color:var(--r-plus); }
.ucount, .count { display:inline-block; background:var(--err); color:#fff; border-radius:var(--pill); padding:0 6px; font-size:11px; font-weight:700; line-height:18px; min-width:18px; text-align:center; }

/* ── Tables (shared) ───────────────────────────────────────────────────── */
table { width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
th, td { text-align:left; padding:8px 11px; border-bottom:1px solid var(--line); vertical-align:middle; }
th { color:var(--muted); font-weight:600; font-size:12px; background:var(--surface-2); }
tbody tr:hover td, tr:hover > td { background:color-mix(in srgb, var(--raise) 55%, transparent); }
table.kv th { width:34%; }
.tw, .table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
th.num, td.num { text-align:right; white-space:nowrap; } td.act { text-align:right; white-space:nowrap; }
.pos { color:var(--ok); } .neg { color:var(--err); }
.big-num { font-size:26px; font-weight:750; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }

/* ── Tabs (scroll sideways on small screens instead of wrapping in 3 rows) ── */
.tabs { display:flex; gap:2px; margin-bottom:var(--sp-4); border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.tabs a { padding:8px 13px; color:var(--muted); border-bottom:2px solid transparent; font-size:var(--fs-m); margin-bottom:-1px; white-space:nowrap; flex-shrink:0; }
.tabs a:hover { color:var(--text); text-decoration:none; } .tabs a.on { color:var(--text); border-color:var(--accent); font-weight:600; }

/* ── Brand mark (de "orbit"-ruit naast de sitenaam) ────────────────────── */
.brand-mark { display:inline-flex; flex:none; width:26px; height:26px; border-radius:8px; position:relative;
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow:0 2px 10px color-mix(in srgb, var(--accent) 38%, transparent); }
.brand-mark::before { content:""; position:absolute; inset:7px; border:2px solid var(--accent-ink); border-radius:50%; opacity:.9; }
.brand-mark::after { content:""; position:absolute; top:4px; right:4px; width:5px; height:5px; border-radius:50%; background:var(--accent-ink); }

/* ── Login card (box) ──────────────────────────────────────────────────── */
body.is-box { display:flex; flex-direction:column; align-items:center; padding:clamp(40px, 7vh, 88px) 16px 24px; padding-bottom:max(24px, env(safe-area-inset-bottom));
  background:radial-gradient(1100px 460px at 50% -8%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%), var(--bg); }
.box { position:relative; width:100%; max-width:410px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l);
  padding:30px 30px 26px; box-shadow:var(--shadow); overflow:hidden; }
.box::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); }
.box-brand { display:flex; align-items:center; justify-content:center; gap:10px; font-size:20px; font-weight:750; letter-spacing:-.02em; color:var(--text); margin-bottom:22px; }
.box-brand:hover { text-decoration:none; }
.box h2 { font-size:17px; margin-bottom:18px; text-align:center; }
.box-corner { position:fixed; top:max(12px, env(safe-area-inset-top)); right:max(12px, env(safe-area-inset-right)); z-index:var(--z-drop);
  display:flex; gap:8px; align-items:center; }
.box-sub { text-align:center; color:var(--muted); margin:-10px 0 20px; font-size:14px; }
.links { text-align:center; font-size:13px; margin-top:18px; color:var(--muted); }

/* ── Layout footer (slank; op login-kaart én ingelogde pagina's) ───────── */
.l-footer { width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 14px; font-size:var(--fs-s); color:var(--muted); }
.l-footer a { color:var(--muted); } .l-footer a:hover { color:var(--text); }
.l-footer .sep { color:var(--faint); opacity:.7; }
.l-foot-nav { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
body.is-box .l-footer { max-width:410px; margin-top:22px; }
.is-site .l-footer { max-width:var(--w-site); margin:0 auto; padding:18px var(--gutter) 0; margin-top:48px; border-top:1px solid var(--line); justify-content:space-between; }

/* ── Site layout: one container for header and content ─────────────────── */
.wrap { width:100%; max-width:var(--w-site); margin:0 auto; padding-left:max(var(--gutter), env(safe-area-inset-left)); padding-right:max(var(--gutter), env(safe-area-inset-right)); }
.content { padding-top:28px; padding-bottom:60px; }
.top { background:var(--header); border-bottom:1px solid var(--header-line); position:sticky; top:0; z-index:var(--z-sticky); color:var(--header-text);
  box-shadow:0 1px 0 rgba(255,255,255,.03), 0 6px 20px rgba(0,0,0,.18); }
.top-in { display:flex; align-items:center; gap:var(--sp-5); min-height:var(--top-h); }
.brand { display:inline-flex; align-items:center; gap:9px; font-weight:750; font-size:17px; letter-spacing:-.02em; color:#fff; white-space:nowrap; }
.brand:hover { text-decoration:none; }
.brand .brand-mark { width:24px; height:24px; border-radius:7px; }
.top-nav { display:flex; gap:4px; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; }
.top-nav::-webkit-scrollbar { display:none; }
.top-nav a { color:var(--header-muted, #aab4c8); font-size:var(--fs-m); padding:6px 10px; border-radius:var(--radius-s); white-space:nowrap; }
.top-nav a:hover, .top-nav a.on { color:#fff; background:rgba(255,255,255,.06); text-decoration:none; }
.top-me { display:flex; align-items:center; gap:var(--sp-2); margin-left:auto; }
.top-me .btn.ghost { color:#dfe5ef; border-color:rgba(255,255,255,.18); }
.top-me .btn.ghost:hover { background:rgba(255,255,255,.08); }
/* hamburger for the header links (phones) */
.tnav { display:none; }
.tnav > summary { list-style:none; display:inline-flex; align-items:center; justify-content:center; width:var(--tap); height:var(--tap); border-radius:var(--radius-s);
  cursor:pointer; color:#e8ecf4; border:1px solid var(--header-line); }
.tnav > summary::-webkit-details-marker { display:none; }
.tnav-list { position:absolute; left:0; right:0; top:100%; background:var(--header); border-bottom:1px solid var(--line); padding:var(--sp-2) var(--gutter) var(--sp-3);
  display:flex; flex-direction:column; gap:2px; box-shadow:var(--shadow); z-index:var(--z-drop); }
.tnav-list a { color:#dfe5ef; padding:10px 12px; border-radius:var(--radius-s); }
.tnav-list a:hover, .tnav-list a.on { background:rgba(255,255,255,.07); text-decoration:none; color:#fff; }
.burger { display:inline-block; width:18px; height:2px; background:currentColor; border-radius:2px; position:relative; }
.burger::before, .burger::after { content:''; position:absolute; left:0; width:18px; height:2px; background:currentColor; border-radius:2px; }
.burger::before { top:-6px; } .burger::after { top:6px; }

/* ── Dropdowns: user menu + language menu (one look) ───────────────────── */
.umenu, .lmenu { position:relative; }
.umenu > summary, .lmenu > summary { list-style:none; display:flex; align-items:center; gap:9px; cursor:pointer; padding:4px 10px 4px 4px; min-height:38px; border-radius:var(--pill);
  border:1px solid transparent; transition:background .12s, border-color .12s; user-select:none; -webkit-tap-highlight-color:transparent; }
.umenu > summary::-webkit-details-marker, .lmenu > summary::-webkit-details-marker { display:none; }
.umenu > summary::after, .lmenu > summary::after { content:''; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.6; margin-left:2px; }
.umenu > summary:hover, .umenu[open] > summary, .lmenu > summary:hover, .lmenu[open] > summary { background:var(--raise); border-color:var(--line); }
.top .umenu > summary, .top .lmenu > summary { color:var(--header-text); }
.top .umenu > summary:hover, .top .umenu[open] > summary, .top .lmenu > summary:hover, .top .lmenu[open] > summary { background:rgba(255,255,255,.07); border-color:var(--header-line); }
.uname { font-weight:600; font-size:var(--fs-m); max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.umenu-list, .lmenu-list { position:absolute; right:0; top:calc(100% + 8px); width:260px; max-width:calc(100vw - 24px); background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:6px; z-index:var(--z-drop); color:var(--text); max-height:calc(100dvh - var(--top-h) - 24px); overflow-y:auto; overscroll-behavior:contain; }
.umenu-head { display:flex; gap:11px; align-items:center; padding:8px 10px 12px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.umenu-head > div { min-width:0; }
.umenu-head b { display:block; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rank-text { font-size:12px; color:var(--muted); }
.rank-text.rank-mod { color:var(--r-mod); } .rank-text.rank-admin { color:var(--r-admin); } .rank-text.rank-owner { color:var(--r-owner); }
.umenu-list a { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; min-height:36px; border-radius:var(--radius-s); color:var(--text); font-size:var(--fs-m); }
.umenu-list a:hover { background:var(--raise); text-decoration:none; }
.umenu-staff { margin:6px 0; padding:4px 0 4px 8px; border-left:2px solid var(--r-mod); }
.umenu-staff.rank-admin { border-left-color:var(--r-admin); } .umenu-staff.rank-owner { border-left-color:var(--r-owner); }
.umenu-list form { margin:6px 0 0; padding-top:6px; border-top:1px solid var(--line); }
.umenu-out { width:100%; justify-content:flex-start; background:transparent; color:var(--muted); font-weight:500; padding:8px 10px; }
.umenu-out:hover { background:var(--raise); color:var(--text); }
/* language menu */
.lmenu > summary { padding:4px 10px; gap:7px; }
.lmenu-code { font-size:12px; font-weight:650; letter-spacing:.04em; }
.lmenu-list { width:220px; }
.lmenu-item { display:flex; align-items:center; gap:10px; padding:9px 10px; min-height:38px; border-radius:var(--radius-s); color:var(--text); font-size:var(--fs-m); }
a.lmenu-item:hover { background:var(--raise); text-decoration:none; }
.lmenu-item.is-on { font-weight:650; background:color-mix(in srgb, var(--accent) 10%, transparent); }
.lmenu-item.is-on::after { content:'✓'; margin-left:auto; color:var(--accent); }
.lmenu-item.is-soon { color:var(--faint); cursor:default; } .lmenu-item.is-soon .flag { filter:grayscale(1); opacity:.55; }
.lmenu-item small { margin-left:auto; font-size:var(--fs-xs); }
.flag { display:block; width:18px; height:12px; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.25); flex-shrink:0; }

/* ── Avatars: the ring shows the rank ──────────────────────────────────── */
.av { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:50%; object-fit:cover; vertical-align:middle;
  box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--ring, transparent); }
.av.big { border-radius:22px; box-shadow:0 0 0 3px var(--surface), 0 0 0 6px var(--ring, var(--line-2)); }
.ring-player { --ring:var(--r-player); } .ring-plus { --ring:var(--r-plus); } .ring-mod { --ring:var(--r-mod); } .ring-admin { --ring:var(--r-admin); } .ring-owner { --ring:var(--r-owner); }
.top .av { box-shadow:0 0 0 2px var(--header), 0 0 0 4px var(--ring, transparent); }
.av-letter { color:#fff; font-weight:700; letter-spacing:.02em; user-select:none; }
.av-c0{background:#2f7fb0}.av-c1{background:#22876a}.av-c2{background:#b5652a}.av-c3{background:#7656c4}.av-c4{background:#b8484a}.av-c5{background:#1f8b97}.av-c6{background:#8a6d1f}.av-c7{background:#4b5a78}

/* ── Settings: menu left, content right ────────────────────────────────── */
.settings { display:grid; grid-template-columns:240px minmax(0, 1fr); gap:var(--sp-7); align-items:start; }
.settings-nav { position:sticky; top:calc(var(--top-h) + 24px); display:flex; flex-direction:column; gap:2px; min-width:0; }
.settings-me { display:flex; gap:12px; align-items:center; padding:4px 4px 16px; margin-bottom:8px; border-bottom:1px solid var(--line); min-width:0; }
.settings-me > div { min-width:0; }
.settings-me b { display:block; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .settings-me a { font-size:var(--fs-s); }
.settings-nav > a { padding:9px 12px; border-radius:var(--radius-s); color:var(--muted); font-size:14px; font-weight:500; white-space:nowrap; border:1px solid transparent; }
.settings-nav > a:hover { background:var(--raise); color:var(--text); text-decoration:none; }
.settings-nav > a.on { background:var(--surface); color:var(--text); box-shadow:inset 3px 0 0 var(--accent); border-color:var(--line); }
.settings-body { min-width:0; max-width:var(--w-form); }
.settings-body .card h2 { font-size:15.5px; margin-bottom:14px; }

/* picture upload */
.pic-row { display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
.pic-now { padding:6px; }
.pic-actions { flex:1; min-width:min(100%, 240px); display:flex; flex-direction:column; gap:10px; }
.upload { display:flex; gap:10px; align-items:stretch; flex-wrap:wrap; }
.drop { flex:1; min-width:min(100%, 220px); margin:0; position:relative; display:flex; flex-direction:column; justify-content:center; gap:2px; padding:12px 16px;
  border:1.5px dashed var(--line-2); border-radius:var(--radius); background:var(--surface-2); cursor:pointer; transition:border-color .12s, background .12s; }
.drop:hover, .drop:focus-within { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 6%, var(--surface-2)); }
.drop input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; }
.drop-main { font-weight:600; color:var(--accent); } .drop-sub { font-size:var(--fs-s); color:var(--muted); font-weight:400; }

/* theme picker */
.themes { display:grid; grid-template-columns:repeat(auto-fit, minmax(118px, 1fr)); gap:12px; } .themes .form-foot { grid-column:1 / -1; }
.theme-pick { margin:0; display:flex; flex-direction:column; gap:10px; padding:12px; border:1px solid var(--line-2); border-radius:var(--radius); cursor:pointer; position:relative; }
.theme-pick input { position:absolute; top:12px; right:12px; }
.theme-pick:has(input:checked) { border-color:var(--accent); box-shadow:0 0 0 3px var(--focus); }
.swatch { display:flex; height:54px; border-radius:var(--radius-s); overflow:hidden; border:1px solid var(--line); }
.swatch i { flex:1; } .theme-dark .swatch i:nth-child(1) { background:#0f141f; } .theme-dark .swatch i:nth-child(2) { background:#1c2536; } .theme-dark .swatch i:nth-child(3) { background:#5cc8f0; flex:.4; }
.theme-light .swatch i:nth-child(1) { background:#f3f5f9; } .theme-light .swatch i:nth-child(2) { background:#ffffff; } .theme-light .swatch i:nth-child(3) { background:#1f8fc0; flex:.4; }
.theme-default .swatch i:nth-child(1) { background:#0f141f; } .theme-default .swatch i:nth-child(2) { background:#f3f5f9; } .theme-default .swatch i:nth-child(3) { background:linear-gradient(#5cc8f0, #1f8fc0); flex:.4; }
.theme-mid .swatch i:nth-child(1) { background:#1a2231; } .theme-mid .swatch i:nth-child(2) { background:#222c3e; } .theme-mid .swatch i:nth-child(3) { background:#5cc8f0; flex:.4; }
.theme-black .swatch i:nth-child(1) { background:#05070b; } .theme-black .swatch i:nth-child(2) { background:#0b0f16; } .theme-black .swatch i:nth-child(3) { background:#5cc8f0; flex:.4; }

/* ── Public profile card ───────────────────────────────────────────────── */
.pcard { max-width:900px; background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.pcard-main { display:flex; gap:24px; align-items:center; padding:28px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, color-mix(in srgb, var(--ring-col, var(--accent)) 9%, transparent), transparent); }
.pcard.rank-mod { --ring-col:var(--r-mod); } .pcard.rank-admin { --ring-col:var(--r-admin); } .pcard.rank-owner { --ring-col:var(--r-owner); }
.pcard-id { flex:1; min-width:0; }
.pcard-id h1 { font-size:28px; margin-bottom:8px; overflow-wrap:anywhere; }
.pcard-meta { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:0; }
.pcard-team { margin:8px 0 0; font-size:13px; color:var(--muted); }
.pcard-act { align-self:flex-start; display:flex; gap:8px; flex-wrap:wrap; }
.pcard-body { padding:22px 28px 26px; } .pcard-body h2 { font-size:14px; color:var(--muted); font-weight:600; }
.pcard-body .bio { white-space:normal; line-height:1.7; max-width:68ch; margin:0; }
.pcard-extra { padding:0 28px 26px; }

/* ── Staff "log in as" bar ─────────────────────────────────────────────── */
.imp-bar { position:sticky; top:0; z-index:var(--z-top); background:var(--err); color:#fff; text-align:center; padding:8px 12px; font-weight:600; font-size:13px; }
.imp-bar button.link { color:#fff; text-decoration:underline; }

/* ── Captcha ───────────────────────────────────────────────────────────── */
.acap { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:6px 0 14px; padding:10px 12px; border:1px solid var(--line-2); border-radius:var(--radius-s); background:var(--surface-2); }
.acap-box { background:var(--input); color:var(--text); border:1px solid var(--line-2); padding:7px 12px; font-weight:500; }
.acap-box:hover { background:var(--raise); }
.acap-tick { width:17px; height:17px; border:2px solid var(--muted); border-radius:4px; display:inline-block; }
.acap.busy .acap-tick { border-color:var(--accent) transparent var(--accent) transparent; border-radius:50%; animation:acapspin .8s linear infinite; }
.acap.done .acap-tick { border-color:var(--ok); background:var(--ok); }
.acap.need { border-color:var(--err); }
.acap-status { font-size:var(--fs-s); color:var(--muted); }
.acap-slide { width:100%; }
.acap-track { position:relative; height:32px; background:var(--raise); border-radius:16px; touch-action:none; }
.acap-thumb { position:absolute; left:0; top:0; width:32px; height:32px; border-radius:16px; background:var(--accent); cursor:grab; touch-action:none; }
@keyframes acapspin { to { transform:rotate(360deg); } }

/* ═══ Responsive ═══════════════════════════════════════════════════════ */
@media (min-width:1440px) { :root { --w-aside:340px; } }

@media (max-width:1024px) {
  .layout-2 { grid-template-columns:1fr; }
  .layout-2 > aside { position:static; }
  .settings { grid-template-columns:200px minmax(0, 1fr); gap:var(--sp-5); }
}

@media (max-width:768px) {
  :root { --top-h:54px; }
  .content { padding-top:20px; padding-bottom:48px; }
  .card { padding:var(--sp-4); }
  .panel > .in { padding:12px 14px; }
  .grid-form { grid-template-columns:1fr; }
  .themes { grid-template-columns:1fr; }
  .settings { grid-template-columns:1fr; gap:var(--sp-4); }
  .settings-nav { position:static; flex-direction:row; overflow-x:auto; gap:4px; scrollbar-width:none; padding-bottom:2px; }
  .settings-nav::-webkit-scrollbar { display:none; }
  .settings-me { display:none; }
  .settings-nav > a.on { box-shadow:inset 0 -2px 0 var(--accent); }
  .settings-body { max-width:none; }
  /* header: links behind ☰, name hidden, menus as a sheet from the bottom */
  .top-in { gap:var(--sp-3); }
  .top-nav { display:none; }
  .tnav { display:block; }
  .top { position:sticky; }
  .uname { display:none; }
  .umenu-list, .lmenu-list, .tmenu-list { position:fixed; left:0; right:0; top:auto; bottom:0; width:auto; max-width:none; max-height:80dvh;
    border-radius:var(--radius-l) var(--radius-l) 0 0; padding:10px 10px max(14px, env(safe-area-inset-bottom)); }
  .umenu[open]::before, .lmenu[open]::before, .tmenu[open]::before { content:''; position:fixed; inset:0; background:var(--shade); z-index:calc(var(--z-drop) - 1); }
  .umenu-list a, .lmenu-item, .tmenu-item { min-height:var(--tap); }
  /* tables: data tables scroll sideways; key/value tables stack */
  .card table:not(.kv):not(.kv2):not(.kv4), .panel table:not(.kv):not(.kv2):not(.kv4) { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table.kv th, table.kv td { display:block; width:auto; border-bottom:0; padding:2px 11px; background:transparent; }
  table.kv tr { display:block; padding:6px 0; border-bottom:1px solid var(--line); }
  table.kv th { padding-top:6px; }
  .pcard-main { flex-direction:column; align-items:flex-start; padding:22px; }
  .pcard-body { padding:18px 22px 22px; } .pcard-extra { padding:0 22px 22px; }
}

@media (max-width:480px) {
  body.is-box { padding-top:max(56px, 4vh); }
  .box { padding:22px 18px; border-radius:var(--radius); }
  .page-head .btn, .page-head button { width:100%; }
  .form-foot > button, .form-foot > .btn { flex:1; }
}

/* ── Print: content only ───────────────────────────────────────────────── */
@media print {
  .top, .tnav, .umenu, .lmenu, .imp-bar, .side, .admin-bar .umenu, .box-corner { display:none !important; }
  body { background:#fff; color:#000; }
  .card, .panel { box-shadow:none; border-color:#ccc; break-inside:avoid; }
  a { color:inherit; }
}
input[readonly] { opacity:.75; cursor:not-allowed; }
.logout-device { margin-top:18px; }
.unlock-alt { margin-top:10px; } .unlock-alt summary { cursor:pointer; color:var(--muted, inherit); }
.unlock-alt form { margin-top:10px; }

/* 2FA: back-up code, support line, authenticator setup (auth 2026-11) */
.links form.inline { display:inline; margin:0; }
.support-line { text-align:center; margin-top:14px; }
details.backup-alt { margin-top:14px; }
details.backup-alt summary { cursor:pointer; font-size:13px; color:var(--muted); text-align:center; }
details.backup-alt form { margin-top:10px; }
.totp-setup { display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; }
.totp-qr { background:#fff; padding:8px; border-radius:8px; line-height:0; }
.totp-qr svg { width:200px; height:200px; display:block; }
.totp-key { font-family:var(--mono); font-size:15px; letter-spacing:.06em; user-select:all; word-break:break-all; }
.code-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:6px 14px; margin:10px 0; padding:0; list-style:none; }
.code-list li { font-family:var(--mono); font-size:15px; letter-spacing:.04em; user-select:all; }
.code-list li span { color:var(--muted); margin-right:6px; user-select:none; }
.slots { display:inline-flex; gap:4px; vertical-align:middle; }
.slots b { display:inline-block; min-width:20px; text-align:center; border-radius:4px; font-size:12px; padding:1px 4px; background:var(--line); color:var(--muted); }
.slots b.open { background:var(--ok-bg); color:var(--ok); }
.slots b.used { background:var(--err-bg); color:var(--err); text-decoration:line-through; }
.slots b.none { opacity:.5; }
.sec-overview { margin:0; padding:0; list-style:none; }
.sec-overview li { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid var(--line); }
.sec-overview li:last-child { border-bottom:0; }
@media (max-width:560px) { .totp-setup { grid-template-columns:1fr; } }


/* Beleidpagina's (beleid.php) + voettekst — auth 2026-11 */
.beleid { max-width:var(--w-read, 46rem); margin:0 auto; }
.beleid-back { margin:0 0 10px; font-size:14px; }
.beleid-body h1 { font-size:1.6rem; margin:0 0 4px; }
.beleid-body h2 { font-size:1.15rem; margin:1.4em 0 .4em; padding-top:.6em; border-top:1px solid var(--line); }
.beleid-body h2:first-of-type { border-top:0; padding-top:0; }
.beleid-body table { border-collapse:collapse; width:100%; margin:0 0 1em; font-size:14px; }
.beleid-body th, .beleid-body td { text-align:left; vertical-align:top; padding:6px 10px; border:1px solid var(--line); }
.beleid-body th { background:var(--surface-2); font-weight:600; }
.beleid-index { list-style:none; padding-left:0; }
.beleid-index li { margin-bottom:8px; }
.beleid-foot { display:flex; flex-wrap:wrap; gap:6px 14px; margin:28px 0 10px; padding-top:14px; border-top:1px solid var(--line); font-size:14px; }
.beleid-foot a.on { font-weight:600; color:var(--text); }
.beleid-meta { margin:0; }
.site-foot { max-width:var(--w-read, 46rem); margin:40px auto 24px; padding:0 var(--gutter); display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 18px; align-items:center; border-top:1px solid var(--line); padding-top:16px; }
.site-foot nav { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px; }
.site-foot a { color:var(--muted); }
.site-foot a:hover { color:var(--text); }
body.is-box .site-foot { padding-left:16px; padding-right:16px; }

/* Herstel-dossier (admin accountpagina) — 2026-11 */
.rescue-sum { display:inline-block; padding:4px 12px; border-radius:var(--pill); font-size:13px; font-weight:600; margin:0 0 12px; }
.rescue-strong { background:var(--ok-bg); color:var(--ok); }
.rescue-some { background:var(--warn-bg); color:var(--warn); }
.rescue-weak { background:var(--err-bg); color:var(--err); }
.rescue-dossier { list-style:none; padding:0; margin:0 0 14px; }
.rescue-dossier li { display:flex; align-items:center; gap:8px; padding:4px 0; font-size:14px; border-bottom:1px solid var(--line); }
.rescue-dossier li:last-child { border-bottom:0; }
.dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; background:var(--muted); }
.dot-good { background:var(--ok); } .dot-meh { background:var(--warn); } .dot-bad { background:var(--err); } .dot-neutral { background:var(--line-2, var(--muted)); }
.rescue-step { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.rescue-slots { display:flex; flex-wrap:wrap; gap:6px; }

/* ── Inloggen met Google ─────────────────────────────────────────────── */
.or-line { display:flex; align-items:center; gap:10px; margin:14px 0; color:var(--muted, #888); font-size:var(--fs-s); }
.or-line::before, .or-line::after { content:""; flex:1; border-top:1px solid var(--line-2); }
button.btn-google { gap:10px; }
.g-icon { flex:none; }
fieldset.google-keep { border:1px solid var(--line-2); border-radius:6px; padding:10px 12px; margin:12px 0; }
fieldset.google-keep legend { padding:0 6px; font-weight:600; font-size:var(--fs-s); }
fieldset.google-keep .check { align-items:center; }
fieldset.google-keep img.av { border-radius:50%; object-fit:cover; }


/* ── Icoontjes in de invoervelden (overlay, blijft staan bij autofill) ──── */
.ifield { position:relative; display:block; }
.ifield::before { content:""; position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px;
  background:var(--muted); pointer-events:none; z-index:2;
  -webkit-mask-image:var(--ic); mask-image:var(--ic);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain; }
.ifield input { padding-left:42px; position:relative; z-index:1; }
.ifield-user { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='8'%20r='4'/%3E%3Cpath%20d='M4%2021c0-4.5%204-6.5%208-6.5s8%202%208%206.5'/%3E%3C/svg%3E"); }
.ifield-mail { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5'%20width='18'%20height='14'%20rx='2.5'/%3E%3Cpath%20d='m3.5%207.5%208.5%205.5%208.5-5.5'/%3E%3C/svg%3E"); }
.ifield-lock { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4.5'%20y='10.5'%20width='15'%20height='10.5'%20rx='2.5'/%3E%3Cpath%20d='M8%2010.5V7a4%204%200%200%201%208%200v3.5'/%3E%3C/svg%3E"); }
.ifield-code { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203%205%206v5c0%204%203%206.8%207%208.5%204-1.7%207-4.5%207-8.5V6z'/%3E%3C/svg%3E"); }
/* autofill: thema-kleuren houden (geen grijs/geel), icoon blijft want het ligt erboven */
.box input:-webkit-autofill, .box input:-webkit-autofill:hover, .box input:-webkit-autofill:focus {
  -webkit-text-fill-color:var(--text); caret-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--input) inset; transition:background-color 9999s ease 0s; }

/* ── Botbescherming (captcha): nettere verify-kaart ────────────────────── */
.acap { gap:12px; padding:12px 14px; border:1px solid var(--line-2); border-radius:var(--radius);
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, var(--surface-2)), var(--surface-2)); }
.acap-box { display:inline-flex; align-items:center; gap:11px; background:transparent; border:0; padding:0; min-height:0; color:var(--text); font-weight:500; }
.acap-box:hover { background:transparent; }
.acap-tick { width:22px; height:22px; border:2px solid var(--line-2); border-radius:6px; background:var(--input);
  transition:border-color .15s, background .15s; position:relative; }
.acap-box:hover .acap-tick { border-color:var(--accent); }
.acap.busy .acap-tick { border-color:var(--accent) transparent var(--accent) transparent; border-radius:50%; background:transparent; animation:acapspin .8s linear infinite; }
.acap.done .acap-tick { border-color:var(--ok); background:var(--ok); }
.acap.done .acap-tick::after { content:''; position:absolute; left:6px; top:2px; width:6px; height:11px; border:solid #04130d; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }
.acap.need { border-color:var(--err); }
.acap-status { margin-left:auto; font-size:var(--fs-s); color:var(--muted); }
.acap.done .acap-status { color:var(--ok); font-weight:600; }
.acap-track { height:38px; border-radius:var(--pill); background:var(--raise); box-shadow:inset 0 1px 3px rgba(0,0,0,.25); }
.acap-thumb { width:38px; height:38px; border-radius:50%; background:linear-gradient(180deg, var(--accent-2), var(--accent));
  box-shadow:0 2px 8px color-mix(in srgb, var(--accent) 45%, transparent); }

/* ── Uitstraling: primaire knop met gloed, subtiele diepte op donkere thema's ── */
button:not(.ghost):not(.grey):not(.danger):not(.red):not(.green):not(.link):not(.icon):not(.acap-box),
.btn:not(.ghost):not(.grey):not(.danger):not(.red):not(.green):not(.link):not(.icon) {
  background:linear-gradient(180deg, var(--accent-2), var(--accent));
  box-shadow:0 1px 2px rgba(0,0,0,.14), 0 5px 16px color-mix(in srgb, var(--accent) 22%, transparent); }
button:not(.ghost):not(.grey):not(.danger):not(.red):not(.green):not(.link):not(.icon):not(.acap-box):hover,
.btn:not(.ghost):not(.grey):not(.danger):not(.red):not(.green):not(.link):not(.icon):hover {
  filter:brightness(1.06); }
:root:not([data-theme="light"]) .box, :root:not([data-theme="light"]) .card {
  background-image:linear-gradient(180deg, rgba(255,255,255,.028), transparent 140px); }
.box { box-shadow:var(--shadow), 0 0 40px -12px color-mix(in srgb, var(--accent) 22%, transparent); }

/* ── Theme-switch (het "lampje") — zelfde look als het taalmenu ─────────── */
.tmenu { position:relative; }
.tmenu > summary { list-style:none; display:flex; align-items:center; gap:7px; cursor:pointer; padding:4px 10px; min-height:38px;
  border-radius:var(--pill); border:1px solid transparent; user-select:none; -webkit-tap-highlight-color:transparent; color:inherit; }
.tmenu > summary::-webkit-details-marker { display:none; }
.tmenu > summary:hover, .tmenu[open] > summary { background:var(--raise); border-color:var(--line); }
.top .tmenu > summary { color:var(--header-text); }
.top .tmenu > summary:hover, .top .tmenu[open] > summary { background:rgba(255,255,255,.07); border-color:var(--header-line); }
.tmenu-ic { opacity:.85; flex:none; }
.tmenu-code { font-size:12px; font-weight:650; }
.tmenu-list { position:absolute; right:0; top:calc(100% + 8px); width:210px; max-width:calc(100vw - 24px);
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius); box-shadow:var(--shadow); padding:6px; z-index:var(--z-drop); color:var(--text); }
.tmenu-item { display:flex; align-items:center; gap:10px; padding:9px 10px; min-height:38px; border-radius:var(--radius-s); color:var(--text); font-size:var(--fs-m); }
a.tmenu-item:hover { background:var(--raise); text-decoration:none; }
.tmenu-item.is-on { font-weight:650; background:color-mix(in srgb, var(--accent) 10%, transparent); }
.tmenu-item.is-on::after { content:'✓'; margin-left:auto; color:var(--accent); }
.tdot { width:16px; height:16px; border-radius:50%; flex:none; border:1px solid var(--line-2); }
.tdot.t-light { background:#f3f5f9; } .tdot.t-mid { background:#222c3e; } .tdot.t-dark { background:#0f141f; } .tdot.t-black { background:#05070b; }

/* tmenu op mobiel als bottom-sheet (moet ná de base-regel hierboven komen) */
@media (max-width:768px) {
  .tmenu-list { position:fixed; left:0; right:0; top:auto; bottom:0; width:auto; max-width:none; max-height:80dvh;
    border-radius:var(--radius-l) var(--radius-l) 0 0; padding:10px 10px max(14px, env(safe-area-inset-bottom)); }
}