/*
 * Fanguestic — host-app (voor hosts). Laadt bovenop style.css.
 * Donkere "merk"-laag: inkt/paneel/crème met coral + amber. Vaste tokens (§4 briefing).
 * De gast-gids gebruikt dit NIET; die heeft guide.css met de thema-tokens van de host.
 */

/* style.css zet body{zoom:1.25}; de host-ontwerpen zijn op 100% getekend. */
body.host { zoom: 1; }

.host {
  --h-line:   rgba(250,240,224,0.13);
  --h-line-2: rgba(250,240,224,0.3);
  --h-dim:    rgba(250,240,224,0.7);
  --h-soft:   rgba(250,240,224,0.8);
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body, 'Instrument Sans', system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  margin: 0;
}
.host *, .host *::before, .host *::after { box-sizing: border-box; }

/* --- Chrome: kop + navigatie ------------------------------------------- */
.h-header {
  display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap;
  padding: 12px clamp(16px, 3vw, 32px);
  border-bottom: 1px solid rgba(250,240,224,0.12);
}
.h-brand { font-family: var(--display); text-transform: uppercase; letter-spacing: -0.035em; font-weight: 800; font-size: 20px; color: var(--cream); text-decoration: none; }
.h-tag { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 10.5px; color: var(--amber); }
.h-nav { display: flex; gap: 4px 22px; flex-wrap: wrap; }
.h-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 11.5px; color: rgba(250,240,224,0.78); text-decoration: none;
}
.h-nav a[aria-current="page"] { color: var(--amber); box-shadow: inset 0 -2px 0 var(--amber); }
.h-nav a:hover { color: var(--cream); }
.h-email { margin-left: auto; font-family: var(--mono); letter-spacing: 0.08em; font-size: 11px; color: var(--h-dim); text-transform: none; }
.h-email a { color: var(--h-dim); }
.h-email a:hover { color: var(--cream); }

/* --- Voortgangsbalk wizard --------------------------------------------- */
.h-steps { flex: 1 1 240px; display: flex; align-items: center; gap: 14px; max-width: 420px; margin-left: auto; }
.h-steps-label { flex: none; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; color: var(--h-dim); }
.h-steps-bar { flex: 1; display: flex; gap: 5px; }
.h-steps-bar > span { flex: 1; height: 5px; background: rgba(250,240,224,0.16); }
.h-steps-bar > span.is-done { background: var(--amber); }

/* --- Hoofdkolom -------------------------------------------------------- */
.h-main { width: 100%; margin: 0 auto; padding: 40px clamp(16px, 4vw, 48px) 48px; }
.h-main--wizard { max-width: 920px; }
.h-main--wide { max-width: 1120px; }
.h-main--dash { max-width: 1280px; }

.h-main h1.h-title { font-family: var(--display); text-transform: uppercase; letter-spacing: -0.035em; font-weight: 800; margin: 0; font-size: clamp(34px, 5vw, 60px); line-height: 0.96; }
.h-lead { margin: 0; max-width: 620px; font-size: 18px; color: var(--h-soft); }
.h-eyebrow { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; color: var(--h-dim); }
.h-stack { display: flex; flex-direction: column; gap: 12px; }

/* --- Velden ------------------------------------------------------------ */
.h-field { display: flex; flex-direction: column; gap: 8px; }
.h-field--narrow { max-width: 460px; }
.h-field > label, .h-field > .h-eyebrow { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; color: var(--h-dim); }
.h-input {
  font: inherit; font-family: var(--display); font-weight: 600; font-size: 18px;
  padding: 14px 15px; color: var(--cream);
  background: rgba(250,240,224,0.05); border: 1px solid var(--h-line-2); border-radius: 5px;
  width: 100%;
}
.h-input:focus { outline: none; border-color: var(--amber); background: rgba(250,240,224,0.08); }
.h-hint { font-size: 14.5px; color: var(--h-soft); }

/* --- Knoppen ----------------------------------------------------------- */
.h-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 0 28px; border: none; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: 17px;
  background: var(--coral); color: var(--ink); border-radius: 5px;
  box-shadow: 5px 5px 0 var(--amber); text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.h-btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--amber); color: var(--ink); }
.h-btn--sm { min-height: 46px; padding: 0 20px; font-size: 15px; box-shadow: 4px 4px 0 var(--amber); }
.h-btn--ghost {
  background: transparent; border: 2px solid var(--amber); color: var(--amber); box-shadow: none;
}
.h-btn--ghost:hover { background: var(--amber); color: var(--ink); transform: none; }
.h-btn--mono {
  min-height: 48px; padding: 0 16px; font-family: var(--mono); text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 11px; font-weight: 500;
  background: none; border: 1px solid var(--h-line-2); color: var(--cream); box-shadow: none; border-radius: 5px;
}
.h-btn--mono:hover { background: none; border-color: var(--cream); color: var(--cream); transform: none; }

.h-actions { display: flex; align-items: center; gap: 14px 16px; flex-wrap: wrap; }
.h-actions .h-spacer { margin-left: auto; }

/* --- Keuzekaarten (type / sjabloon / lettertype) ----------------------- */
.h-grid { display: grid; gap: 14px; }
.h-grid--type { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.h-grid--tpl  { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.h-grid--font { grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: 10px; }

.h-choice {
  font: inherit; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  min-height: 132px; padding: 18px; text-align: left; cursor: pointer;
  background: var(--panel); color: var(--cream);
  border: 2px solid rgba(250,240,224,0.16); border-radius: 5px;
}
.h-choice:hover { border-color: rgba(250,240,224,0.4); }
.h-choice.is-on { border-color: var(--amber); }
.h-choice-dot { width: 18px; height: 18px; border-radius: 999px; border: 2px solid rgba(250,240,224,0.5); background: transparent; }
.h-choice.is-on .h-choice-dot { border-color: var(--amber); background: var(--amber); }
.h-choice-name { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; }
.h-choice-sub { font-size: 14.5px; color: var(--h-soft); }
.h-choice-meta { font-family: var(--mono); letter-spacing: 0.08em; font-size: 10.5px; color: rgba(250,240,224,0.66); }
.h-choice--tpl { min-height: 0; padding: 0; position: relative; }
.h-choice--tpl .h-choice-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.h-choice-thumb {
  align-self: stretch; height: 132px; display: flex; align-items: flex-end; padding: 12px;
  border-bottom: 1px solid rgba(250,240,224,0.14);
  background: repeating-linear-gradient(45deg, rgba(250,240,224,0.08) 0 1px, transparent 1px 10px);
}
.h-choice-thumb span { font-family: var(--mono); letter-spacing: 0.06em; font-size: 10.5px; color: rgba(250,240,224,0.66); }
.h-choice-tag { position: absolute; top: -12px; right: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; padding: 6px 10px; background: var(--amber); color: var(--ink); transform: rotate(3deg); }

/* --- Kleur + lettertype ------------------------------------------------ */
.h-swatches { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.h-swatch { width: 48px; height: 48px; padding: 0; border-radius: 5px; border: 1px solid rgba(250,240,224,0.35); cursor: pointer; outline: 0 solid transparent; outline-offset: 3px; }
.h-swatch.is-on { outline: 3px solid var(--amber); }
.h-hexbox { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; background: rgba(250,240,224,0.05); border: 1px solid var(--h-line-2); border-radius: 5px; }
.h-hexbox input { font-family: var(--mono); font-size: 15px; color: var(--cream); background: none; border: none; width: 9ch; }
.h-hexbox input:focus { outline: none; }
.h-font { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; min-height: 72px; text-align: left; cursor: pointer; background: var(--panel); color: var(--cream); border: 2px solid rgba(250,240,224,0.14); border-radius: 5px; }
.h-font.is-on { border-color: var(--amber); }
.h-font-sample { font-size: 22px; line-height: 1.2; }
.h-font-label { font-family: var(--mono); letter-spacing: 0.08em; font-size: 10.5px; color: var(--h-dim); }

/* --- Info / waarschuwing ---------------------------------------------- */
.h-note { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border: 1px solid var(--amber); background: oklch(0.84 0.16 78 / 0.1); border-radius: 5px; font-size: 15px; }
.h-note svg { flex: none; margin-top: 1px; color: var(--amber); }
.h-note--inline { padding: 10px 14px; align-items: center; flex-wrap: wrap; gap: 10px; }
.h-note--inline > span { flex: 1 1 240px; }

.h-alert { padding: 14px 16px; border-radius: 5px; font-size: 15px; }
.h-alert--ok { border: 1px solid var(--amber); background: oklch(0.84 0.16 78 / 0.1); }
.h-alert--err { border: 1px solid oklch(0.6 0.19 25); background: oklch(0.6 0.19 25 / 0.12); }

.h-muted { font-family: var(--mono); letter-spacing: 0.08em; font-size: 11px; color: var(--h-dim); }

/* --- Dashboard --------------------------------------------------------- */
.h-dash { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.h-dash-main { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.h-dash-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.h-card { background: var(--panel); border: 1px solid var(--h-line); border-radius: 5px; padding: 22px; display: flex; flex-wrap: wrap; gap: 22px; }
.h-card-qr { flex: none; width: 112px; height: 112px; padding: 9px; background: #fff; border-radius: 5px; }
.h-card-qr img, .h-card-qr svg { display: block; width: 100%; height: 100%; }
.h-card-qr--empty { background: repeating-linear-gradient(45deg, rgba(250,240,224,0.08) 0 1px, transparent 1px 10px); border: 1px solid rgba(250,240,224,0.2); display: flex; align-items: flex-end; padding: 8px; }
.h-card-qr--empty span { font-family: var(--mono); letter-spacing: 0.06em; font-size: 9.5px; color: rgba(250,240,224,0.66); }
.h-card-body { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.h-card-title { margin: 0; font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; }
.h-card-url { font-family: var(--mono); font-size: 13px; color: rgba(250,240,224,0.72); text-transform: none; letter-spacing: 0; }

.h-badge { font-family: var(--mono); letter-spacing: 0.08em; font-size: 10.5px; padding: 4px 8px; }
.h-badge--live { background: var(--amber); color: var(--ink); }
.h-badge--draft { background: rgba(250,240,224,0.12); color: rgba(250,240,224,0.85); }

.h-stats { margin: 0; display: flex; gap: 10px 32px; flex-wrap: wrap; }
.h-stats dt { font-family: var(--mono); font-size: 10.5px; color: var(--h-dim); }
.h-stats dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 24px; }

.h-add { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border: 1px dashed var(--h-line-2); border-radius: 5px; color: var(--cream); text-decoration: none; }
.h-add:hover { border-color: var(--amber); color: var(--cream); }
.h-add svg { flex: none; color: var(--amber); }

.h-panel { background: var(--panel); border: 1px solid var(--h-line); border-radius: 5px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.h-panel h2 { margin: 0; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); }
.h-todo-item { display: flex; gap: 12px; align-items: center; min-height: 44px; color: var(--cream); text-decoration: none; }
.h-todo-item + .h-todo-item { border-top: 1px dashed rgba(250,240,224,0.2); }
.h-todo-item:hover { color: var(--cream); }
.h-todo-box { flex: none; width: 18px; height: 18px; border: 1px solid rgba(250,240,224,0.5); }

.h-progress2 { display: flex; gap: 5px; }
.h-progress2 > span { flex: 1; height: 5px; background: rgba(250,240,224,0.16); }
.h-progress2 > span.is-done { background: var(--amber); }

/* --- Wizard "klaar" preview-telefoon ----------------------------------- */
.h-done { display: flex; flex-wrap: wrap; gap: 40px 56px; align-items: flex-start; }
.h-done-main { flex: 999 1 460px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.h-done-side { flex: 1 1 320px; max-width: 400px; display: flex; flex-direction: column; gap: 16px; }
.h-stamp { font-family: var(--mono); letter-spacing: 0.18em; text-transform: uppercase; font-size: 11px; padding: 7px 12px; background: var(--amber); color: var(--ink); transform: rotate(-1.5deg); }
.h-todolink { display: flex; align-items: center; gap: 16px; min-height: 68px; padding: 10px 18px; background: var(--panel); border: 1px solid rgba(250,240,224,0.16); border-radius: 5px; color: var(--cream); text-decoration: none; }
.h-todolink:hover { border-color: var(--amber); color: var(--cream); }
.h-todolink .h-num { flex: none; width: 24px; font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1; color: var(--amber); }
.h-todolink .h-todolink-body { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.h-todolink .h-todolink-body b { font-weight: 600; font-size: 17px; }
.h-todolink .h-todolink-body span { font-size: 14.5px; color: var(--h-soft); }
.h-todolink svg { flex: none; color: var(--amber); }

/* Telefoon-voorbeeld: binnenin gelden de gast-thema-tokens van de host. */
.h-phone { width: 100%; max-width: 340px; border-radius: 30px; overflow: hidden; border: 6px solid var(--panel); outline: 1px solid rgba(250,240,224,0.25); background: var(--bg); color: var(--text); font-family: var(--font-body); display: flex; flex-direction: column; }
.h-phone-cover { width: 100%; height: 160px; object-fit: cover; display: block; }
.h-phone-cover--empty { background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--brand-text); }
.h-phone-body { padding: 0 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.h-phone-logo { margin-top: -24px; width: 52px; height: 52px; border-radius: 15px; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--brand-text); overflow: hidden; }
.h-phone-logo img { width: 100%; height: 100%; object-fit: cover; }
.h-phone-title { font-family: var(--font-display); font-weight: 700; font-size: 25px; line-height: 1.12; letter-spacing: -0.02em; }
.h-phone-welcome { font-size: 14.5px; line-height: 1.45; color: var(--text-muted); }
.h-phone-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.h-phone-chip { display: flex; flex-direction: column; gap: 6px; padding: 12px 10px; border-radius: 13px; background: var(--surface); border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; }
.h-phone-chip svg { color: var(--brand-text); }
.h-phone-promo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 13px; background: var(--brand-soft); border: 1px solid var(--brand-line); font-size: 14px; font-weight: 600; }
.h-phone-promo span.accent { color: var(--brand-text); }
.h-phone-open { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 13px; background: var(--brand); color: var(--on-brand); border: 1.5px solid var(--brand-edge); font-size: 15px; font-weight: 600; }

.h-ministats { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.h-ministats > div { background: var(--panel); border: 1px solid var(--h-line); border-radius: 5px; padding: 12px; }
.h-ministats dt { font-family: var(--mono); font-size: 10px; color: var(--h-dim); }
.h-ministats dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 24px; }

/* --- Builder: sub-balk met tabs ---------------------------------------- */
.h-subbar { display: flex; align-items: center; gap: 8px 24px; flex-wrap: wrap; padding: 10px clamp(16px, 3vw, 32px); background: var(--panel); border-bottom: 1px solid rgba(250,240,224,0.12); }
.h-subbar-title { margin: 0; font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
.h-tabs { display: flex; gap: 4px 6px; flex-wrap: wrap; }
.h-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 5px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 11.5px; color: var(--cream); text-decoration: none; }
.h-tab:hover { color: var(--cream); background: rgba(250,240,224,0.06); }
.h-tab.is-on { background: var(--amber); color: var(--ink); font-weight: 500; }
.h-tab.is-on:hover { background: var(--amber); color: var(--ink); }
.h-tab-badge { background: var(--coral); color: var(--ink); padding: 1px 7px; border-radius: 9px; font-weight: 500; letter-spacing: 0; }
.h-saved { margin-left: auto; font-family: var(--mono); letter-spacing: 0.08em; font-size: 10.5px; color: var(--h-dim); }

/* --- Builder: drie kolommen -------------------------------------------- */
.h-builder { flex: 1; display: flex; flex-wrap: wrap; align-items: stretch; }
.b-struct { flex: 1 1 280px; max-width: 340px; padding: 20px clamp(16px, 2vw, 22px); border-right: 1px solid rgba(250,240,224,0.12); display: flex; flex-direction: column; gap: 16px; }
.b-form { flex: 999 1 420px; min-width: 0; padding: 28px clamp(16px, 3vw, 40px) 32px; display: flex; flex-direction: column; gap: 22px; }
.b-preview { flex: 1 1 340px; max-width: 420px; padding: 24px clamp(16px, 2vw, 28px) 32px; border-left: 1px solid rgba(250,240,224,0.12); display: flex; flex-direction: column; align-items: center; gap: 16px; }

.b-sec { display: flex; flex-direction: column; gap: 6px; }
.b-sec-title { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 10.5px; color: var(--h-dim); }
.b-block { font: inherit; font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; background: transparent; color: var(--cream); border: 1px solid rgba(250,240,224,0.16); border-radius: 5px; text-align: left; cursor: pointer; text-decoration: none; }
.b-block:hover { border-color: rgba(250,240,224,0.4); color: var(--cream); }
.b-block.is-on { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.b-block.is-dim { color: var(--h-dim); }
.b-block-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-handle { flex: none; opacity: 0.55; cursor: grab; display: inline-flex; }
.b-badge { flex: none; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; padding: 3px 6px; text-transform: uppercase; }
.b-badge.is-empty { background: var(--coral); color: var(--ink); }
.b-badge.is-missing { border: 1px solid var(--amber); color: var(--amber); }
.b-badge.is-muted { color: var(--h-dim); }
.b-move { display: flex; gap: 2px; }
.b-move button { width: 26px; min-height: 44px; background: none; border: none; color: var(--h-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.b-move button:hover { color: var(--cream); }
.b-move button:disabled { opacity: 0.25; cursor: default; }
.b-add { font: inherit; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; background: none; color: var(--amber); border: 1px dashed var(--amber); border-radius: 5px; cursor: pointer; text-decoration: none; }
.b-add:hover { background: oklch(0.84 0.16 78 / 0.1); color: var(--amber); }

.b-formhead { display: flex; align-items: flex-end; gap: 12px 20px; flex-wrap: wrap; }
.b-formhead-main { flex: 999 1 240px; display: flex; flex-direction: column; gap: 6px; }
.b-formhead h2 { margin: 0; font-family: var(--display); text-transform: uppercase; letter-spacing: -0.035em; font-weight: 800; font-size: 36px; line-height: 1; }
.h-textarea { font: inherit; font-size: 16px; line-height: 1.55; padding: 14px 15px; color: var(--cream); background: rgba(250,240,224,0.05); border: 1px solid var(--h-line-2); border-radius: 5px; width: 100%; resize: vertical; }
.h-textarea:focus, .h-input:focus { outline: none; border-color: var(--amber); }
.b-check { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.b-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--amber); }
.b-rows { display: flex; flex-direction: column; gap: 12px; }
.b-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 10px; padding: 12px; border: 1px solid rgba(250,240,224,0.2); border-radius: 5px; position: relative; }
.b-row .h-input, .b-row select { font-size: 15px; padding: 10px 12px; }
.b-row-del { position: absolute; top: 8px; right: 8px; background: none; border: none; color: var(--h-dim); cursor: pointer; }
.b-row-del:hover { color: var(--cream); }
select.h-input { -webkit-appearance: none; appearance: none; }
.b-trans { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 14px 16px; background: var(--panel); border: 1px solid var(--h-line); border-radius: 5px; }
.b-trans-pill { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; padding: 4px 8px; text-transform: uppercase; }
.b-trans-pill.is-ok { background: rgba(250,240,224,0.12); color: var(--cream); }
.b-trans-pill.is-stale { background: var(--amber); color: var(--ink); }

/* --- Builder/merk: live-voorbeeld-iframe ------------------------------- */
.b-prevhead { align-self: stretch; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.b-langtabs { margin-left: auto; display: flex; gap: 2px; }
.b-langtabs button { min-width: 44px; min-height: 44px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; background: none; color: var(--h-soft); border: none; border-radius: 4px; cursor: pointer; }
.b-langtabs button[aria-pressed="true"] { background: var(--amber); color: var(--ink); }
.b-frame-wrap { width: 100%; max-width: 360px; border-radius: 30px; overflow: hidden; border: 6px solid var(--panel); outline: 1px solid rgba(250,240,224,0.25); background: #fff; }
.b-frame { display: block; width: 100%; height: 680px; border: 0; background: #fff; }
.b-prevnote { font-size: 14px; color: rgba(250,240,224,0.75); text-align: center; max-width: 300px; }

/* --- Merk-tab ---------------------------------------------------------- */
.h-merk { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.h-merk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.h-merk-sec { background: var(--panel); border: 1px solid var(--h-line); border-radius: 5px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.h-merk-readout { margin: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--amber); background: oklch(0.84 0.16 78 / 0.1); border-radius: 5px; font-size: 15px; }
.h-merk-readout .row { display: flex; justify-content: space-between; gap: 12px; }
.h-merk-readout dd { margin: 0; font-weight: 600; text-align: right; }
.h-modes { display: flex; gap: 8px; flex-wrap: wrap; }
.h-mode { flex: 1 1 80px; min-height: 48px; padding: 0 12px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; background: none; color: var(--cream); border: 1px solid var(--h-line-2); border-radius: 5px; cursor: pointer; }
.h-mode.is-on { background: var(--amber); color: var(--ink); border-color: var(--amber); }

/* --- Talen-tab --------------------------------------------------------- */
.t-list { background: var(--panel); border: 1px solid var(--h-line); border-radius: 5px; display: flex; flex-direction: column; }
.t-row { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; padding: 14px 18px; border-top: 1px solid rgba(250,240,224,0.12); }
.t-row:first-child { border-top: 0; }
.t-check { flex: 1 1 190px; display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.t-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--amber); }
.t-name { display: flex; flex-direction: column; line-height: 1.3; }
.t-name b { font-family: var(--display); font-weight: 700; font-size: 19px; }
.t-name span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--h-dim); text-transform: uppercase; }
.t-prog { flex: 2 1 220px; display: flex; align-items: center; gap: 12px; }
.t-bar { flex: 1; height: 6px; background: rgba(250,240,224,0.16); border-radius: 3px; overflow: hidden; }
.t-bar > span { display: block; height: 6px; background: var(--amber); width: 0; transition: width .3s ease; }
.t-status { flex: none; min-width: 150px; font-size: 15px; color: var(--h-soft); }
.t-status.is-warn { color: var(--amber); }
.t-act { flex: none; min-width: 120px; }
.t-todo-item { display: flex; flex-direction: column; gap: 6px; }
.t-todo-item + .t-todo-item { border-top: 1px dashed rgba(250,240,224,0.2); padding-top: 14px; }
.t-chip { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; padding: 3px 7px; text-transform: uppercase; }
.t-chip.is-stale { border: 1px solid var(--amber); color: var(--amber); }
.t-chip.is-new { background: var(--coral); color: var(--ink); }
.t-src { margin: 0; padding: 12px 14px; background: rgba(250,240,224,0.05); border-radius: 5px; font-size: 15px; color: rgba(250,240,224,0.85); }

/* --- Inloggen: twee kolommen ------------------------------------------ */
.h-login { display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: flex-start; }
.h-login-main { flex: 999 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.h-login-aside { flex: 1 1 300px; min-width: 0; background: var(--panel); border: 1px solid var(--h-line); border-radius: 5px; padding: 24px; display: flex; flex-direction: column; gap: 4px; }
.h-login-step { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-top: 1px dashed rgba(250,240,224,0.2); }
.h-login-step .h-num { flex: none; width: 22px; font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1; color: var(--amber); }