/* ═══════════════════════════════════════════════════════════════════════════
   WebAudit — Base Stylesheet
   Structurele layout, componenten, responsive — thema-onafhankelijk
   Alle kleuren via CSS custom properties (gedefinieerd in theme-*.css)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Basis-lettergrootte — bewust ruim voor leesbaarheid. Wij zijn een
   toegankelijkheids-tester; de eigen UI hoort comfortabel leesbaar te zijn. */
html { font-size: 17px; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
body {
  font-family: var(--wa-font);
  font-weight: var(--wa-font-weight);
  background: var(--wa-bg);
  color: var(--wa-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.2rem 1rem 4rem;
  gap: .85rem;
  font-size: .88rem;
  -webkit-font-smoothing: antialiased;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
header { text-align: center; padding: 1.2rem 0 .5rem; }
h1 { font-size: 1.8rem; font-weight: var(--wa-font-weight-bold); letter-spacing: -.03em; line-height: 1; color: var(--wa-text); }
h1 span.brand { color: var(--wa-accent); }
.h1-sub { font-size: .78rem; color: var(--wa-text-muted); margin-top: .45rem; margin-bottom: .35rem; }
.h1-badge {
  display: inline-block; font-size: 0.74rem; font-weight: var(--wa-font-weight-bold);
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--wa-accent-subtle); color: var(--wa-accent-text);
  border: 1px solid currentColor; border-radius: var(--wa-radius-sm);
  padding: .08rem .42rem; vertical-align: middle; margin-left: .45rem;
  position: relative; top: -.15rem; opacity: .7;
}

/* ── Theme Switcher ─────────────────────────────────────────────────────── */
.theme-switcher {
  display: inline-flex; gap: 2px; background: var(--wa-surface-alt);
  border: 1px solid var(--wa-border); border-radius: var(--wa-radius); padding: 2px;
}
.theme-btn {
  font-family: var(--wa-font); font-size: 0.74rem; font-weight: var(--wa-font-weight-medium);
  padding: .32rem .75rem; border: none; border-radius: var(--wa-radius-sm);
  background: transparent; color: var(--wa-text-muted); cursor: pointer;
  transition: all .15s;
}
.theme-btn:hover { background: var(--wa-surface-hover); color: var(--wa-text); }
.theme-btn.active {
  background: var(--wa-surface); color: var(--wa-text);
  box-shadow: var(--wa-shadow-xs);
}

/* ── Wrapper & Card ─────────────────────────────────────────────────────── */
.w { width: 100%; max-width: 960px; }
.card {
  background: var(--wa-surface); border: 1px solid var(--wa-border);
  border-radius: var(--wa-radius-xl); padding: 1.5rem;
  box-shadow: var(--wa-shadow);
}

/* ── Input Row ──────────────────────────────────────────────────────────── */
.irow { display: flex; gap: .65rem; }
.irow input {
  flex: 1; background: var(--wa-input-bg); border: 1px solid var(--wa-input-border);
  border-radius: var(--wa-radius-lg); color: var(--wa-text);
  font-size: .88rem; padding: .6rem 1rem; outline: none;
  transition: border-color .15s, box-shadow .15s; font-family: inherit;
}
.irow input:focus {
  border-color: var(--wa-input-focus);
  box-shadow: 0 0 0 3px var(--wa-input-focus-shadow);
}

/* ── Primary Button ─────────────────────────────────────────────────────── */
.rbtn {
  background: var(--wa-btn-bg); border: none; border-radius: var(--wa-radius-lg);
  color: var(--wa-btn-text); cursor: pointer;
  font-size: .82rem; font-weight: var(--wa-font-weight-bold);
  padding: .6rem 1.4rem; transition: background .15s, transform .1s; white-space: nowrap;
  font-family: inherit;
}
.rbtn:hover { background: var(--wa-btn-hover); transform: translateY(-1px); }
.rbtn:active { transform: translateY(0); }
.rbtn:disabled { background: var(--wa-btn-disabled); color: var(--wa-btn-disabled-text); cursor: not-allowed; transform: none; }

/* ── Validator Toggles ──────────────────────────────────────────────────── */
.vrow { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .8rem; align-items: center; }
.vlbl {
  font-size: 0.74rem; color: var(--wa-text-muted); font-weight: var(--wa-font-weight-medium);
  letter-spacing: .05em; text-transform: uppercase; margin-right: .15rem;
}
.vt {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: 0.74rem; font-weight: var(--wa-font-weight-medium);
  padding: .2rem .65rem; border-radius: var(--wa-radius-full); cursor: pointer;
  border: 1px solid var(--wa-border); background: var(--wa-surface-alt);
  color: var(--wa-text-muted); user-select: none; transition: all .12s;
}
.vt.on { background: var(--wa-success-bg); color: var(--wa-success); border-color: var(--wa-success-border); }
.vt.off { background: var(--wa-surface-alt); color: var(--wa-text-disabled); border-color: var(--wa-border); text-decoration: line-through; opacity: .6; }
.vt.run { background: var(--wa-info-bg); color: var(--wa-info); border-color: var(--wa-info-border); animation: wa-pulse 1s infinite; }
.vt.r-ok { background: var(--wa-success-bg); color: var(--wa-success); border-color: var(--wa-success-border); }
.vt.r-err { background: var(--wa-error-bg); color: var(--wa-error); border-color: var(--wa-error-border); }

@keyframes wa-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ── Progress Indicators ────────────────────────────────────────────────── */
#pw { display: none; margin-top: .85rem; }
.pg-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; }
.pg-spin {
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--wa-border); border-top-color: var(--wa-accent);
  animation: pg-spin .7s linear infinite;
}
@keyframes pg-spin { to { transform: rotate(360deg); } }
.pg-head-txt { font-size: .82rem; font-weight: var(--wa-font-weight-bold); color: var(--wa-text); flex: 1 1 auto; }
.pg-count { font-family: var(--wa-font-mono); font-size: .8rem; font-weight: 800; color: var(--wa-accent); }
.pg-count.done { color: var(--wa-success); }
.pg-overall { height: 8px; background: var(--wa-surface-alt); border-radius: var(--wa-radius-full); overflow: hidden; margin-bottom: .85rem; }
.pg-overall-fill { height: 100%; width: 0; background: var(--wa-accent); border-radius: var(--wa-radius-full); transition: width .4s ease; }
.pg-overall-fill.done { background: var(--wa-success); }
.pg-rows { display: flex; flex-direction: column; gap: .42rem; }
.pg-row { display: grid; grid-template-columns: 130px 1fr 68px; align-items: center; gap: .6rem; }
.pg-name { font-size: .74rem; color: var(--wa-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-bar { height: 5px; background: var(--wa-surface-alt); border-radius: 3px; overflow: hidden; }
.pg-fill { height: 100%; width: 100%; border-radius: 3px; background: var(--wa-accent); }
.pg-fill.run { width: 40%; animation: pg-indeterminate 1.1s ease-in-out infinite; }
@keyframes pg-indeterminate { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.pg-stat { font-size: 0.74rem; font-family: var(--wa-font-mono); color: var(--wa-text-muted); text-align: right; }
.pg-stat.ok { color: var(--wa-success); }
.pg-stat.err { color: var(--wa-error); }
@media (prefers-reduced-motion: reduce) {
  .pg-spin { animation: none; }
  .pg-fill.run { animation: none; width: 45%; opacity: .55; }
}
@media(max-width: 560px) {
  .pg-row { grid-template-columns: 90px 1fr 56px; gap: .45rem; }
  .pg-name { font-size: 0.74rem; }
}
.pr-row { display: flex; align-items: center; gap: .42rem; padding: .22rem 0; }
.pr-ic {
  width: 14px; height: 14px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 0.74rem; flex-shrink: 0;
  background: var(--wa-surface-alt); border: 1px solid var(--wa-border);
}
.pr-ic.ok { background: var(--wa-success-bg); color: var(--wa-success); border-color: var(--wa-success-border); }
.pr-ic.run { background: var(--wa-info-bg); color: var(--wa-info); border-color: var(--wa-info-border); animation: wa-pulse 1s infinite; }
.pr-ic.err { background: var(--wa-error-bg); color: var(--wa-error); border-color: var(--wa-error-border); }

/* ── Score ───────────────────────────────────────────────────────────────── */
.sc-row { display: flex; align-items: flex-start; gap: 1.2rem; flex-wrap: wrap; }
.sc {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 800; flex-shrink: 0;
}
.sA { background: var(--wa-score-a-bg); color: var(--wa-score-a); }
.sB { background: var(--wa-score-b-bg); color: var(--wa-score-b); }
.sC { background: var(--wa-score-c-bg); color: var(--wa-score-c); }
.sD { background: var(--wa-score-d-bg); color: var(--wa-score-d); }
.sE { background: var(--wa-score-e-bg); color: var(--wa-score-e); }
.si { flex: 1; }
.si h2 { font-size: .9rem; font-weight: var(--wa-font-weight-bold); color: var(--wa-text); }

/* Score gauge */
.score-gauge { display: flex; align-items: center; gap: .55rem; margin-top: .55rem; flex-wrap: wrap; }
.score-num { font-size: 2.4rem; font-weight: 800; line-height: 1; font-family: var(--wa-font-mono); color: var(--wa-text); }
.score-bar-wrap { flex: 1; min-width: 140px; max-width: 240px; }
.score-bar-bg { height: 7px; background: var(--wa-border); border-radius: var(--wa-radius-sm); overflow: hidden; }
.score-bar-fg { height: 7px; border-radius: var(--wa-radius-sm); transition: width .4s ease; }
.score-label { font-size: 0.74rem; color: var(--wa-text-muted); margin-top: .2rem; }
.score-breakdown { display: flex; gap: .55rem; flex-wrap: wrap; margin-top: .45rem; font-size: 0.74rem; }
.score-bk { padding: .1rem .4rem; border-radius: var(--wa-radius-xs); font-weight: var(--wa-font-weight-bold); font-family: var(--wa-font-mono); }

/* ── WebNorm Scorecard ─────────────────────────────────────────────────── */
.wn-card { border-top: 3px solid var(--wa-accent); }

/* hero: grote ring-gauge links, tekst rechts */
.wn2-hero {
  display: flex; align-items: center; gap: 1.5rem;
  padding-bottom: 1.2rem; margin-bottom: .8rem;
  border-bottom: 1px solid var(--wa-border-subtle);
}
.wn2-ladder { flex: 0 0 auto; width: 246px; height: auto; align-self: center; }
.wn2-gauge { flex: 0 0 auto; position: relative; width: 110px; height: 110px; }
.wn2-gauge svg { width: 110px; height: 110px; transform: rotate(-90deg); }
.wn2-gauge-track { fill: none; stroke: var(--wa-border); stroke-width: 7; }
.wn2-gauge-fill { fill: none; stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .8s ease; }
.wn2-gauge-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.wn2-gauge-grade { font-family: var(--wa-font-mono); font-weight: 800; font-size: 1.45rem; line-height: 1; padding: .08rem .4rem; border-radius: 7px; }
.wn2-gauge-num { font-family: var(--wa-font-mono); font-weight: 700; font-size: 0.74rem; color: var(--wa-text-muted); margin-top: .15rem; }
.wn2-hero-right { flex: 1 1 auto; min-width: 0; }
.wn2-hero-title { font-size: 0.74rem; font-weight: var(--wa-font-weight-bold); color: var(--wa-text-muted); letter-spacing: .09em; text-transform: uppercase; margin-bottom: .25rem; }
.wn2-hero-url { font-size: .76rem; color: var(--wa-text-secondary); margin-bottom: .5rem; word-break: break-all; }
.wn2-hero-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.wn2-profile { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 .6rem; }
.wn2-profile-lbl { font-size: 0.74rem; font-weight: var(--wa-font-weight-bold); color: var(--wa-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.wn2-profile-sel { font-size: 0.8rem; font-weight: var(--wa-font-weight-medium); padding: .25rem .5rem; border-radius: var(--wa-radius); border: 1px solid var(--wa-input-border); background: var(--wa-input-bg); color: var(--wa-text); cursor: pointer; }
.wn2-profile-desc { font-size: 0.74rem; color: var(--wa-text-muted); flex: 1 1 100%; }

/* inklapbaar categorieblok ("Hoe is deze score berekend?") */
.wn2-details { margin-top: .2rem; }
.wn2-summary {
  font-size: 0.74rem; font-weight: var(--wa-font-weight-medium); color: var(--wa-text-muted);
  cursor: pointer; padding: .4rem 0; list-style: none; display: flex; align-items: center; gap: .4rem;
}
.wn2-summary::-webkit-details-marker { display: none; }
.wn2-summary::before { content: '›'; font-size: .85rem; transition: transform .15s; display: inline-block; }
.wn2-details[open] .wn2-summary::before { transform: rotate(90deg); }
.wn2-catgrid { padding: .3rem 0 .2rem; }
.wn2-cathead, .wn2-catrow {
  display: grid;
  grid-template-columns: 96px 30px 1fr 30px 3ch;
  align-items: center; gap: .5rem;
}
.wn2-cathead {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--wa-text-disabled); padding-bottom: .3rem; margin-bottom: .15rem;
  border-bottom: 1px solid var(--wa-border-subtle);
}
.wn2-cathead > span:nth-child(2), .wn2-cathead > span:nth-child(4), .wn2-cathead > span:nth-child(5) { text-align: right; }
.wn2-catrow { padding: .22rem 0; font-size: .76rem; }
.wn2-catname { min-width: 0; color: var(--wa-text-secondary); font-weight: var(--wa-font-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wn2-catw { font-size: 0.74rem; color: var(--wa-text-disabled); font-family: var(--wa-font-mono); text-align: right; }
.wn2-bar-wrap { display: block; width: 100%; height: 7px; background: var(--wa-border); border-radius: 4px; overflow: hidden; }
.wn2-bar-fg { display: block; height: 7px; min-width: 2px; border-radius: 4px; transition: width .5s ease; }
.wn2-catgrade { font-family: var(--wa-font-mono); font-weight: 800; font-size: 0.74rem; justify-self: end; display: inline-block; min-width: 1.5rem; text-align: center; padding: .07rem .2rem; border-radius: 4px; }
.wn2-catscore { font-family: var(--wa-font-mono); font-weight: 800; font-size: .78rem; text-align: right; color: var(--wa-text); }
.wn2-catfoot { margin-top: .55rem; padding-top: .5rem; border-top: 1px solid var(--wa-border-subtle); font-size: 0.74rem; color: var(--wa-text-secondary); line-height: 1.5; }
.kb-link { display: inline-block; margin-top: .35rem; font-size: 0.78rem; color: var(--wa-text-secondary); text-decoration: none; }
.kb-link:hover { text-decoration: underline; color: var(--wa-text); }
.wn2-capnote {
  margin-top: .45rem; font-size: 0.74rem; color: var(--wa-error);
  background: var(--wa-error-bg); padding: .25rem .55rem;
  border-radius: var(--wa-radius); display: inline-block;
}
.wn2-track2 {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  margin: .7rem 0 .1rem; padding-top: .7rem; border-top: 1px solid var(--wa-border-subtle);
}
.wn2-track2-lbl {
  font-size: 0.74rem; font-weight: var(--wa-font-weight-bold); color: var(--wa-text-muted);
  letter-spacing: .06em; text-transform: uppercase;
}
.wn2-klink { font-size: 0.74rem; color: var(--wa-accent); text-decoration: none; font-weight: var(--wa-font-weight-medium); }
.wn2-klink:hover { text-decoration: underline; }

/* Twee losse scores: officiële (het keurmerklabel) naast onze eigen analyse */
.wn2-twoscore { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .85rem 0 .1rem; }
.wn2-sbox { background: var(--wa-surface-alt); border: 1px solid var(--wa-border); border-radius: var(--wa-radius-lg); padding: .7rem .85rem; }
.wn2-sbox.off { border-color: var(--wa-accent); border-width: 1.5px; }
.wn2-sbox-lbl { display: block; font-size: 0.68rem; font-weight: var(--wa-font-weight-bold); letter-spacing: .05em; text-transform: uppercase; color: var(--wa-text-muted); }
.wn2-sbox-val { display: flex; align-items: baseline; gap: .35rem; font-size: 1.4rem; font-weight: var(--wa-font-weight-bold); color: var(--wa-text); margin-top: .2rem; }
.wn2-sbox-val .u { font-size: .82rem; font-weight: var(--wa-font-weight-medium); color: var(--wa-text-secondary); }
.wn2-sbox-sub { display: block; font-size: 0.72rem; color: var(--wa-text-secondary); margin-top: .25rem; line-height: 1.45; }
@media (max-width: 540px) { .wn2-twoscore { grid-template-columns: 1fr; } }

/* score-kleur per grade (gebruikt door testblokken) */
.wn2-score[data-grade="A"], .wn2-tscore[data-grade="A"] { color: var(--wa-score-a); }
.wn2-score[data-grade="B"], .wn2-tscore[data-grade="B"] { color: var(--wa-score-b); }
.wn2-score[data-grade="C"], .wn2-tscore[data-grade="C"] { color: var(--wa-score-c); }
.wn2-score[data-grade="D"], .wn2-tscore[data-grade="D"] { color: var(--wa-score-d); }
.wn2-score[data-grade="E"], .wn2-tscore[data-grade="E"] { color: var(--wa-score-e); }

/* ── Bewijsblok per test (controleerbaar) ──────────────────────────────── */
.tb-cat {
  font-size: 1.1rem; font-weight: var(--wa-font-weight-bold); letter-spacing: 0;
  text-transform: none; color: var(--wa-text);
  margin: 2rem 0 .5rem 0; padding-bottom: .45rem;
  border-bottom: 2px solid var(--wa-text);
  display: flex; align-items: center; gap: .6rem;
}
.tb-cat:first-child { margin-top: .4rem; }
.tb-catsub { font-size: 0.82rem; color: var(--wa-text-secondary); margin: .1rem 0 .9rem 0; max-width: 66ch; line-height: 1.5; }
.tb { background: var(--wa-surface); border: 1px solid var(--wa-border); border-radius: var(--wa-radius-lg); overflow: hidden; margin-bottom: .65rem; box-shadow: var(--wa-shadow-xs); }
/* resultaatkop */
.rh { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.rh-badge { width: 3rem; height: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--wa-font-mono); font-weight: 800; font-size: 1.35rem; flex: 0 0 auto; }
.rh-badge.sA { color: var(--wa-score-a); background: var(--wa-score-a-bg); }
.rh-badge.sB { color: var(--wa-score-b); background: var(--wa-score-b-bg); }
.rh-badge.sC { color: var(--wa-score-c); background: var(--wa-score-c-bg); }
.rh-badge.sD { color: var(--wa-score-d); background: var(--wa-score-d-bg); }
.rh-badge.sE { color: var(--wa-score-e); background: var(--wa-score-e-bg); }
.rh-mid { flex: 1 1 auto; min-width: 0; }
.rh-score { font-family: var(--wa-font-mono); font-weight: 800; font-size: 2rem; line-height: 1; }
.rh-score small { font-size: .85rem; color: var(--wa-text-muted); font-weight: var(--wa-font-weight-bold); margin-left: .1rem; }
.rh-url { font-size: 0.74rem; color: var(--wa-text-muted); margin-top: .25rem; }
.rh-wcag { margin-left: auto; display: flex; flex-direction: column; gap: .12rem; padding: .5rem .8rem; border-radius: var(--wa-radius); }
.rh-wcag-t { font-size: .82rem; font-weight: var(--wa-font-weight-bold); }
.rh-wcag-s { font-size: 0.74rem; opacity: .85; }
.rh-wcag-ok { background: var(--wa-success-bg); color: var(--wa-success); }
.rh-wcag-warn { background: var(--wa-warning-bg); color: var(--wa-warning); }
.rh-wcag-err { background: var(--wa-error-bg); color: var(--wa-error); }
.rh-wcag-muted { background: var(--wa-surface-alt); color: var(--wa-text-muted); }

/* inklapbare test-rij: dicht = alleen score, open = alles */
.tb-head { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .8rem 1rem; background: none; border: none; border-bottom: 1px solid transparent; font-family: inherit; font-size: .92rem; color: var(--wa-text); text-align: left; cursor: pointer; transition: background .12s; }
.tb-head:hover { background: var(--wa-surface-hover); }
.tb-head:focus-visible { outline: 2px solid var(--wa-accent); outline-offset: -2px; }
.tb-head[aria-expanded="true"] { border-bottom-color: var(--wa-border-subtle); }
.tb-lead2 { flex: 1 1 auto; min-width: 1rem; border-bottom: 1px dotted var(--wa-border-strong); transform: translateY(-.28rem); }
.tb-mini { flex: 0 0 auto; font-size: 0.74rem; color: var(--wa-text-muted); font-family: var(--wa-font-mono); }
.tb-hscore { flex: 0 0 auto; font-family: var(--wa-font-mono); font-weight: 800; font-size: 1.1rem; min-width: 2ch; text-align: right; }
.tb-hscore[data-grade="A"] { color: var(--wa-score-a); } .tb-hscore[data-grade="B"] { color: var(--wa-score-b); }
.tb-hscore[data-grade="C"] { color: var(--wa-score-c); } .tb-hscore[data-grade="D"] { color: var(--wa-score-d); }
.tb-hscore[data-grade="E"] { color: var(--wa-score-e); } .tb-hscore[data-grade="-"] { color: var(--wa-text-disabled); }
.tb-chev { flex: 0 0 auto; color: var(--wa-text-muted); font-size: 1.05rem; line-height: 1; transition: transform .18s; }
.tb-head[aria-expanded="true"] .tb-chev { transform: rotate(90deg); }
.tb-headmain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.tb-nameline { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.tb-verdict { font-size: .77rem; line-height: 1.3; }
.tb-v-ok { color: var(--wa-success); }
.tb-v-warn { color: var(--wa-warning); }
.tb-v-err { color: var(--wa-error); }
.tb-v-muted { color: var(--wa-text-muted); }
.rh-break { display: flex; gap: .9rem; flex-wrap: wrap; align-items: baseline; }
.rh-b { font-size: .8rem; color: var(--wa-text-secondary); }
.rh-b b { font-family: var(--wa-font-mono); font-size: 1.15rem; margin-right: .12rem; }
.rh-b-err b { color: var(--wa-error); }
.rh-b-warn b { color: var(--wa-warning); }
.rh-b-note b { color: var(--wa-text-muted); }
.tb-body[hidden] { display: none; }
.tb-wcagline { padding: .6rem 1rem; font-size: .74rem; color: var(--wa-text-secondary); background: var(--wa-surface-alt); border-bottom: 1px solid var(--wa-border-subtle); }
.tb-hd { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-bottom: 1px solid var(--wa-border-subtle); flex-wrap: wrap; }
.tb-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.tb-name { font-weight: var(--wa-font-weight-bold); font-size: .92rem; }
.tb-ver { font-family: var(--wa-font-mono); font-size: 0.74rem; color: var(--wa-text-muted); }
.tb-tag { font-size: 0.74rem; font-weight: var(--wa-font-weight-bold); padding: .12rem .45rem; border-radius: var(--wa-radius-sm); letter-spacing: .02em; text-decoration: none; }
.tb-tag-os { background: var(--wa-badge-purple-bg); color: var(--wa-badge-purple-text); }
.tb-tag-eigen { background: var(--wa-badge-blue-bg); color: var(--wa-badge-blue-text); }
.tb-tag-cat { background: var(--wa-accent-subtle); color: var(--wa-accent-text); }
.tb-score { margin-left: auto; text-align: right; flex: 0 0 auto; }
.tb-score b { font-family: var(--wa-font-mono); font-size: 1.3rem; font-weight: 800; }
.tb-score span { display: block; font-size: 0.74rem; color: var(--wa-text-muted); font-family: var(--wa-font-mono); }
.tb-sub { padding: .5rem 1rem; font-size: 0.74rem; color: var(--wa-text-secondary); display: flex; gap: .9rem; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--wa-border-subtle); background: var(--wa-surface-alt); }
.tb-pill { display: inline-flex; align-items: center; gap: .3rem; }
.tb-pill b { font-family: var(--wa-font-mono); }
.tb-c-ok { color: var(--wa-success); } .tb-c-warn { color: var(--wa-warning); } .tb-c-err { color: var(--wa-error); }
.tb-rawbtn { margin-left: auto; font-family: inherit; font-size: 0.74rem; font-weight: var(--wa-font-weight-medium); color: var(--wa-text-secondary); background: var(--wa-surface); border: 1px solid var(--wa-border-strong); border-radius: var(--wa-radius); padding: .3rem .6rem; cursor: pointer; }
.tb-rawbtn:hover { background: var(--wa-surface-hover); }
.tb-rerunbtn { font-family: inherit; font-size: 0.74rem; font-weight: var(--wa-font-weight-medium); color: var(--wa-accent-text); background: var(--wa-accent-subtle); border: 1px solid var(--wa-border-strong); border-radius: var(--wa-radius); padding: .3rem .6rem; cursor: pointer; }
.tb-rerunbtn:hover { background: var(--wa-surface-hover); }
.tb-rerunbtn:disabled { opacity: .6; cursor: default; }
.tb-rerun-note { font-size: 0.74rem; color: var(--wa-success); font-weight: var(--wa-font-weight-medium); }
.tb-raw { border-bottom: 1px solid var(--wa-border-subtle); background: #0d1117; }
.tb-raw-hd { font-size: 0.74rem; font-family: var(--wa-font-mono); color: #7d8590; padding: .5rem 1rem 0; letter-spacing: .03em; }
.tb-raw pre { font-family: var(--wa-font-mono); font-size: 0.74rem; color: #c9d1d9; padding: .5rem 1rem .9rem; overflow-x: auto; white-space: pre; line-height: 1.55; max-height: 340px; overflow-y: auto; }
.tb-find { padding: .85rem 1rem; border-bottom: 1px solid var(--wa-border-subtle); }
.tb-find:last-child { border-bottom: none; }
.tb-find-top { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .55rem; flex-wrap: wrap; }
.tb-find-idx { font-size: 0.74rem; color: var(--wa-text-muted); font-family: var(--wa-font-mono); }
.tb-find-title { font-weight: var(--wa-font-weight-bold); font-size: .84rem; }
.tb-wcag { font-family: var(--wa-font-mono); font-size: 0.74rem; color: var(--wa-accent-text); border: 1px solid var(--wa-accent-text); border-radius: var(--wa-radius-sm); padding: .06rem .38rem; }
.tb-sev { margin-left: auto; font-size: 0.74rem; font-weight: var(--wa-font-weight-bold); padding: .1rem .42rem; border-radius: var(--wa-radius-sm); }
.tb-sev-critical, .tb-sev-error { background: var(--wa-error-bg); color: var(--wa-error); }
.tb-sev-serious { background: var(--wa-warning-bg); color: var(--wa-warning); }
.tb-sev-moderate, .tb-sev-warning { background: var(--wa-warning-bg); color: var(--wa-warning); }
.tb-sev-minor { background: var(--wa-surface-alt); color: var(--wa-text-muted); }
.tb-drow { display: grid; grid-template-columns: 108px 1fr; gap: .25rem .8rem; font-size: 0.74rem; margin: .4rem 0; }
.tb-drow .tb-lbl { color: var(--wa-text-muted); }
.tb-code { font-family: var(--wa-font-mono); font-size: 0.74rem; background: var(--wa-surface-alt); border: 1px solid var(--wa-border-subtle); border-radius: var(--wa-radius); padding: .5rem .6rem; color: var(--wa-text-secondary); overflow-x: auto; white-space: pre-wrap; word-break: break-word; display: block; }
.tb-why { font-family: var(--wa-font-mono); font-size: 0.74rem; color: var(--wa-text-secondary); }
.tb-srclink { color: var(--wa-accent-text); font-size: 0.74rem; text-decoration: none; word-break: break-all; }
.tb-ssbtn { font-family: inherit; font-size: 0.74rem; font-weight: var(--wa-font-weight-medium); color: var(--wa-text-secondary); background: var(--wa-surface); border: 1px solid var(--wa-border-strong); border-radius: var(--wa-radius); padding: .3rem .6rem; cursor: pointer; }
.tb-ssbtn:hover { background: var(--wa-surface-hover); }
.tb-judge { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; padding-top: .6rem; border-top: 1px dashed var(--wa-border); flex-wrap: wrap; }
.tb-jl { font-size: 0.74rem; color: var(--wa-text-muted); font-weight: var(--wa-font-weight-medium); }
.tb-jbtn { font-family: inherit; font-size: 0.74rem; font-weight: var(--wa-font-weight-medium); border-radius: var(--wa-radius); padding: .32rem .68rem; cursor: pointer; border: 1px solid; background: var(--wa-surface); }
.tb-jbtn-ok { color: var(--wa-success); border-color: var(--wa-success-border); }
.tb-jbtn-no { color: var(--wa-error); border-color: var(--wa-error-border); }
.tb-jbtn.on-ok { background: var(--wa-success-bg); }
.tb-jbtn.on-no { background: var(--wa-error-bg); }
.tb-jbtn.dim { opacity: .4; }
.tb-jstatus { font-size: 0.74rem; color: var(--wa-text-disabled); }
.tb-empty { padding: .85rem 1rem; font-size: .74rem; color: var(--wa-success); }


@media (max-width: 560px) {
  .wn2-hero { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .wn2-gauge { width: 90px; height: 90px; align-self: center; }
  .wn2-gauge svg { width: 90px; height: 90px; }
  .wn2-gauge-grade { font-size: 1.2rem; }
  .wn2-row { font-size: .82rem; }
  .wn2-name { min-width: 90px; }
  .wn2-w { display: none; }
}

/* ── Document Outline ───────────────────────────────────────────────────── */
.olm-grid { display: grid; grid-template-columns: 24px auto 1fr auto; gap: .35rem .65rem; align-items: center; font-size: .78rem; }
.olm-ic { font-weight: var(--wa-font-weight-bold); text-align: center; }
.olm-ok .olm-ic { color: var(--wa-success); }
.olm-miss .olm-ic { color: var(--wa-error); }
.olm-warn .olm-ic { color: var(--wa-warning); }
.olm-tag { font-family: var(--wa-font-mono); font-size: 0.74rem; color: var(--wa-info); }
.olm-label { color: var(--wa-text-secondary); }
.olm-status { font-size: 0.74rem; color: var(--wa-text-muted); }
.olm-ok .olm-status { color: var(--wa-success); }
.olm-miss .olm-status { color: var(--wa-error); }
.olm-warn .olm-status { color: var(--wa-warning); }

/* ── Screenshot Panel ───────────────────────────────────────────────────── */
.scr-legend { display: flex; gap: .75rem; flex-wrap: wrap; margin: .4rem 0; font-size: 0.74rem; color: var(--wa-text-muted); }
.scr-li { display: flex; align-items: center; gap: .38rem; }
.scr-lc { width: 14px; height: 14px; border-radius: 2px; flex-shrink: 0; }
.scr-img-wrap { margin-top: .62rem; }
.scr-img-wrap img { max-width: 100%; border-radius: var(--wa-radius); border: 1px solid var(--wa-border); box-shadow: var(--wa-shadow); }
/* volledige-pagina opnames: scrollbaar kader met vaste hoogte */
.scr-img-scroll { max-height: 560px; overflow-y: auto; border: 1px solid var(--wa-border); border-radius: var(--wa-radius); background: #fff; }
.scr-img-scroll img { display: block; border: none; border-radius: 0; box-shadow: none; max-width: 100%; }
.scr-err { color: var(--wa-error); font-size: .78rem; }
.scr-stat { font-size: 0.74rem; color: var(--wa-text-muted); }
.scr-loading { color: var(--wa-text-muted); font-size: .76rem; padding: .5rem 0; }

/* Verdict boxes */
.scr-verdict { margin-top: .62rem; border-radius: var(--wa-radius); padding: .55rem .85rem; font-size: .78rem; }
.scr-verdict.ok { background: var(--wa-success-bg); border: 1px solid var(--wa-success-border); color: var(--wa-success); }
.scr-verdict.fail { background: var(--wa-error-bg); border: 1px solid var(--wa-error-border); color: var(--wa-error); }
.scr-verdict.info { background: var(--wa-info-bg); border: 1px solid var(--wa-info-border); color: var(--wa-info); }
.scr-verdict-t { font-weight: var(--wa-font-weight-bold); margin-bottom: .12rem; }
.scr-verdict-s { font-size: 0.74rem; color: var(--wa-text-muted); margin-top: .08rem; }

/* Screenshot tabs */
.scr-tab {
  font-size: 0.74rem; font-weight: var(--wa-font-weight-medium);
  padding: .3rem .75rem; border-radius: var(--wa-radius-full); cursor: pointer;
  border: 1px solid var(--wa-border); background: var(--wa-surface);
  color: var(--wa-text-muted); transition: all .12s; white-space: nowrap;
  font-family: inherit;
}
.scr-tab:hover { border-color: var(--wa-accent); color: var(--wa-accent); }
.scr-tab.act {
  background: var(--wa-accent-subtle); border-color: var(--wa-accent);
  color: var(--wa-accent-text); font-weight: var(--wa-font-weight-bold);
}

/* ── Pipeline Stages ────────────────────────────────────────────────────── */
.pipe-wrap { display: flex; flex-direction: column; gap: 0; width: 100%; max-width: 980px; }
/* pijplijn = technische details → onderaan de pagina */
#pipe-wrap { order: 20; margin-top: 1.6rem; }
.section-lbl {
  width: 100%; max-width: 980px; font-size: 0.74rem; font-weight: var(--wa-font-weight-bold);
  letter-spacing: .1em; text-transform: uppercase; color: var(--wa-text-muted);
  margin: .2rem 0 .1rem; padding-left: .1rem;
}
#pipe-wrap .section-lbl { margin-bottom: .5rem; }
/* chips in hero */
.wn2-chip { font-family: var(--wa-font-mono); font-size: 0.74rem; font-weight: var(--wa-font-weight-bold); padding: .15rem .55rem; border-radius: var(--wa-radius-full); }
.wn2-chip-crit { background: var(--wa-error-bg); color: var(--wa-error); }
.wn2-chip-serious { background: var(--wa-warning-bg); color: var(--wa-warning); }
.wn2-chip-mod { background: var(--wa-warning-bg); color: var(--wa-warning); }
.wn2-chip-minor { background: var(--wa-surface-alt); color: var(--wa-text-muted); }
.wn2-chip-muted { background: var(--wa-surface-alt); color: var(--wa-text-muted); }
.wn2-chip-ok { background: var(--wa-success-bg); color: var(--wa-success); }
.pipe-stage {
  background: var(--wa-surface); border: 1px solid var(--wa-border);
  border-radius: var(--wa-radius-lg); overflow: hidden; margin-bottom: .5rem;
  box-shadow: var(--wa-shadow-xs);
}
.pipe-hd {
  display: flex; align-items: center; gap: .65rem; padding: .72rem 1rem;
  cursor: pointer; user-select: none; background: var(--wa-surface-alt);
  border-bottom: 1px solid var(--wa-border);
}
.pipe-hd:hover { background: var(--wa-surface-hover); }
.pipe-num {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.74rem; font-weight: 800; flex-shrink: 0;
}
.pipe-s1 .pipe-num { background: var(--wa-stage1-bg); color: var(--wa-stage1-text); }
.pipe-s2 .pipe-num { background: var(--wa-stage2-bg); color: var(--wa-stage2-text); }
.pipe-s3 .pipe-num { background: var(--wa-stage3-bg); color: var(--wa-stage3-text); }
.pipe-title { font-size: .82rem; font-weight: var(--wa-font-weight-bold); flex: 1; color: var(--wa-text); }
.pipe-badge {
  font-size: 0.74rem; font-weight: var(--wa-font-weight-bold);
  padding: .1rem .42rem; border-radius: var(--wa-radius-sm);
  background: var(--wa-surface-alt); color: var(--wa-text-muted); border: 1px solid var(--wa-border);
}
.pipe-badge.done { background: var(--wa-success-bg); color: var(--wa-success); border-color: var(--wa-success-border); }
.pipe-badge.spin { background: var(--wa-info-bg); color: var(--wa-info); border-color: var(--wa-info-border); animation: wa-pulse 1s infinite; }
.pipe-toggle { font-size: 0.74rem; color: var(--wa-text-muted); transition: transform .18s; }
.pipe-toggle.open { transform: rotate(90deg); }
.pipe-body { display: none; padding: .72rem 1rem 1rem; background: var(--wa-surface); }
.pipe-body.open { display: block; }

/* Stage 1 — Pipeline Nodes */
.pn-row { display: flex; align-items: center; gap: .55rem; padding: .35rem 0; border-bottom: 1px solid var(--wa-border); font-size: .8rem; }
.pn-row:last-child { border-bottom: none; }
.pn-ic {
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.74rem; font-weight: var(--wa-font-weight-bold); flex-shrink: 0;
}
.pn-wait { background: var(--wa-surface-alt); color: var(--wa-text-disabled); border: 1px solid var(--wa-border); }
.pn-run { background: var(--wa-info-bg); color: var(--wa-info); animation: wa-pulse 1s infinite; }
.pn-ok { background: var(--wa-success-bg); color: var(--wa-success); }
.pn-err { background: var(--wa-error-bg); color: var(--wa-error); }
.pn-label { flex: 1; color: var(--wa-text-secondary); font-weight: var(--wa-font-weight-medium); }
.pn-raw { font-size: 0.74rem; color: var(--wa-text-muted); font-family: var(--wa-font-mono); }
.pn-raw b { color: var(--wa-info); }
.pn-arrow { font-size: 0.74rem; color: var(--wa-text-disabled); padding: 0 .25rem; }

/* Stage 2 — Adapter */
.adapter-schema {
  background: var(--wa-surface-alt); border: 1px solid var(--wa-border);
  border-radius: var(--wa-radius); padding: .65rem .85rem; margin-bottom: .7rem;
  font-size: 0.74rem; font-family: var(--wa-font-mono); color: var(--wa-text-secondary); line-height: 1.7;
}
.adapter-schema b { color: var(--wa-stage2-text); }
.adapter-schema em { color: var(--wa-success); font-style: normal; }
.adapter-rows { display: flex; flex-direction: column; gap: .22rem; }
.ad-row { display: flex; align-items: center; gap: .55rem; font-size: .78rem; padding: .28rem 0; border-bottom: 1px solid var(--wa-border); }
.ad-row:last-child { border-bottom: none; }
.ad-src { width: 80px; font-weight: var(--wa-font-weight-medium); color: var(--wa-text-secondary); }
.ad-arrow { color: var(--wa-text-disabled); font-size: 0.74rem; }
.ad-count { font-family: var(--wa-font-mono); color: var(--wa-info); min-width: 3.5rem; }
.ad-fmt { font-size: 0.74rem; color: var(--wa-text-muted); flex: 1; }
.adapter-total {
  margin-top: .62rem; padding: .42rem .72rem;
  background: var(--wa-info-bg); border-radius: var(--wa-radius-sm);
  border: 1px solid var(--wa-info-border); font-size: .78rem;
  color: var(--wa-info); font-weight: var(--wa-font-weight-medium);
}

/* Stage 3 — Filter Bar */
.s3-filter { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .72rem; align-items: center; }
.s3-ft {
  font-size: 0.74rem; color: var(--wa-text-muted); font-weight: var(--wa-font-weight-medium);
  text-transform: uppercase; letter-spacing: .05em; margin-right: .2rem;
}
.s3-fb {
  font-size: 0.74rem; font-weight: var(--wa-font-weight-medium);
  padding: .22rem .72rem; border-radius: var(--wa-radius-full); cursor: pointer;
  border: 1px solid var(--wa-border); background: var(--wa-surface-alt);
  color: var(--wa-text-muted); transition: all .12s; font-family: inherit;
}
.s3-fb.act { background: var(--wa-border); color: var(--wa-text); border-color: var(--wa-border-strong); }
.s3-fb.act.ferr { background: var(--wa-error-bg); color: var(--wa-error); border-color: var(--wa-error-border); }
.s3-fb.act.fwrn { background: var(--wa-warning-bg); color: var(--wa-warning); border-color: var(--wa-warning-border); }
.s3-count { font-size: 0.74rem; color: var(--wa-text-muted); margin-left: auto; }

/* ── Finding Cards ──────────────────────────────────────────────────────── */
.fc {
  border-radius: var(--wa-radius-lg); overflow: hidden; margin-bottom: .42rem;
  border: 1px solid var(--wa-border); box-shadow: var(--wa-shadow-xs);
}
.fc-err { border-color: var(--wa-error-border); }
.fc-warn { border-color: var(--wa-warning-border); }
.fc-top { padding: .65rem .85rem; background: var(--wa-surface); cursor: pointer; }
.fc-top:hover { background: var(--wa-surface-alt); }
.fc-err .fc-top { border-left: 3px solid var(--wa-error); }
.fc-warn .fc-top { border-left: 3px solid var(--wa-warning); }
.fc-meta { display: flex; gap: .32rem; flex-wrap: wrap; align-items: center; margin-bottom: .38rem; }

/* Validator badge — dynamic colors from plugin registry */
.fc-v {
  font-size: 0.74rem; font-weight: var(--wa-font-weight-bold);
  padding: .07rem .38rem; border-radius: var(--wa-radius-xs); border: 1px solid;
}
.fc-sev { font-size: 0.74rem; font-weight: var(--wa-font-weight-bold); padding: .07rem .38rem; border-radius: var(--wa-radius-xs); }
.fc-sev.fc-err { background: var(--wa-error); color: var(--wa-text-inverse); border: none; }
.fc-sev.fc-warn { background: var(--wa-warning); color: var(--wa-text-inverse); border: none; }
.fc-impact { font-size: 0.74rem; font-weight: var(--wa-font-weight-medium); padding: .07rem .35rem; border-radius: var(--wa-radius-xs); border: 1px solid; }
.fc-impact-critical { background: var(--wa-error-bg); color: var(--wa-error); border-color: var(--wa-error-border); }
.fc-impact-serious { background: var(--wa-warning-bg); color: var(--wa-warning); border-color: var(--wa-warning-border); }
.fc-impact-moderate { background: var(--wa-warning-bg); color: var(--wa-warning); border-color: var(--wa-warning-border); }
.fc-impact-minor { background: var(--wa-surface-alt); color: var(--wa-text-muted); border-color: var(--wa-border); }
.fc-status {
  font-size: 0.74rem; font-weight: var(--wa-font-weight-medium);
  padding: .06rem .32rem; border-radius: var(--wa-radius-xs);
  background: var(--wa-surface-alt); color: var(--wa-text-disabled);
  border: 1px solid var(--wa-border); font-family: var(--wa-font-mono);
}
.fc-rule { font-size: 0.74rem; font-weight: var(--wa-font-weight-bold); color: var(--wa-info); margin-bottom: .22rem; display: flex; align-items: center; gap: .5rem; }
.fc-rule a { color: var(--wa-info); text-decoration: none; font-size: 0.74rem; opacity: .7; }
.fc-rule a:hover { opacity: 1; }
.fc-title { font-size: .83rem; color: var(--wa-text); line-height: 1.38; }
.fc-tog { font-size: 0.74rem; color: var(--wa-text-muted); float: right; margin-top: .1rem; user-select: none; }
.fc-detail { display: none; background: var(--wa-surface-alt); border-top: 1px solid var(--wa-border); }
.fc-detail.open { display: block; }
.fc-section { padding: .55rem .85rem; border-bottom: 1px solid var(--wa-border); }
.fc-section:last-child { border-bottom: none; }
.fc-section-t {
  font-size: 0.74rem; font-weight: var(--wa-font-weight-bold);
  letter-spacing: .08em; text-transform: uppercase; color: var(--wa-text-muted);
  margin-bottom: .35rem; display: flex; align-items: center; gap: .42rem;
}
.fc-section-t::after { content: ''; flex: 1; height: 1px; background: var(--wa-border); }
.fc-code {
  background: var(--wa-bg); border-radius: var(--wa-radius-sm);
  font-family: var(--wa-font-mono); font-size: 0.74rem; color: var(--wa-text-secondary);
  padding: .48rem .65rem; white-space: pre-wrap; word-break: break-all;
  line-height: 1.6; border: 1px solid var(--wa-border);
}
.fc-code mark { background: var(--wa-warning-bg); color: var(--wa-warning); border-radius: 2px; padding: 0 1px; font-style: normal; }
.fc-sol { font-size: .78rem; color: var(--wa-text-secondary); line-height: 1.52; margin-bottom: .32rem; }
.fc-sol-code {
  background: var(--wa-success-bg); border: 1px solid var(--wa-success-border);
  border-radius: var(--wa-radius-sm); font-family: var(--wa-font-mono);
  font-size: 0.74rem; color: var(--wa-success); padding: .38rem .62rem;
  white-space: pre-wrap; word-break: break-all; margin-top: .28rem;
}
.fc-locked {
  display: flex; align-items: center; gap: .42rem; font-size: .76rem;
  color: var(--wa-warning); background: var(--wa-warning-bg);
  padding: .42rem .62rem; border-radius: var(--wa-radius-sm); border: 1px solid var(--wa-warning-border);
}
.fc-premium {
  font-size: 0.74rem; font-weight: var(--wa-font-weight-bold);
  padding: .05rem .32rem; border-radius: var(--wa-radius-xs);
  background: var(--wa-warning-bg); color: var(--wa-warning); border: 1px solid var(--wa-warning-border);
}
.fc-actions {
  display: flex; gap: .35rem; flex-wrap: wrap; padding: .52rem .85rem;
  background: var(--wa-surface-alt); border-top: 1px solid var(--wa-border); align-items: center;
}
.fc-btn {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: 0.74rem; font-weight: var(--wa-font-weight-medium);
  padding: .21rem .62rem; border-radius: var(--wa-radius-sm); cursor: pointer;
  border: 1px solid var(--wa-border); background: var(--wa-surface);
  color: var(--wa-text-muted); transition: all .12s; font-family: inherit;
}
.fc-btn:hover { border-color: var(--wa-accent); color: var(--wa-accent); }
.fc-btn.loading { color: var(--wa-info); border-color: var(--wa-info-border); pointer-events: none; }
.fc-btn-ok:hover { border-color: var(--wa-success); color: var(--wa-success); }
.fc-btn-fp:hover { border-color: var(--wa-error); color: var(--wa-error); }
.fc-btn-ss:hover { border-color: var(--wa-info); color: var(--wa-info); }
.fc-btn-ai:hover { border-color: var(--wa-accent); color: var(--wa-accent); }
.fc-btn.v-ok { background: var(--wa-success-bg); border-color: var(--wa-success-border); color: var(--wa-success); cursor: default; }
.fc-btn.v-fp { background: var(--wa-error-bg); border-color: var(--wa-error-border); color: var(--wa-error); cursor: default; }
.fc-ss-result { padding: .52rem .85rem; border-top: 1px solid var(--wa-border); background: var(--wa-surface-alt); }
.fc-ss-img { max-width: 100%; border-radius: var(--wa-radius-sm); border: 1px solid var(--wa-border); margin-top: .32rem; display: block; }
.fc-empty { text-align: center; padding: 2rem; color: var(--wa-text-muted); font-size: .82rem; }
.norm-link { font-size: 0.74rem; color: var(--wa-accent); text-decoration: none; }
.norm-link:hover { color: var(--wa-accent-hover); }
.src-hd-btn {
  font-size: 0.74rem; font-weight: var(--wa-font-weight-medium);
  padding: .18rem .58rem; border-radius: var(--wa-radius-sm); cursor: pointer;
  border: 1px solid var(--wa-border); background: var(--wa-surface);
  color: var(--wa-text-muted); display: inline-flex; align-items: center; gap: .25rem;
  transition: all .12s; white-space: nowrap; font-family: inherit;
}
.src-hd-btn:hover { border-color: var(--wa-accent); color: var(--wa-accent); }

/* ── AI Box ─────────────────────────────────────────────────────────────── */
.ai-box { margin-top: .45rem; border-radius: var(--wa-radius); padding: .55rem .72rem; font-size: .76rem; border: 1px solid var(--wa-border); }
.ai-ok { background: var(--wa-success-bg); border-color: var(--wa-success-border); }
.ai-fail { background: var(--wa-error-bg); border-color: var(--wa-error-border); }
.ai-unk { background: var(--wa-surface-alt); border-color: var(--wa-border); }
.ai-t { font-weight: var(--wa-font-weight-bold); margin-bottom: .18rem; display: flex; align-items: center; gap: .4rem; }
.ai-ok .ai-t { color: var(--wa-success); }
.ai-fail .ai-t { color: var(--wa-error); }
.ai-unk .ai-t { color: var(--wa-text-muted); }
.ai-exp { color: var(--wa-text-secondary); line-height: 1.52; }
.ai-conf { font-size: 0.74rem; font-weight: var(--wa-font-weight-bold); padding: .06rem .35rem; border-radius: var(--wa-radius-xs); }
.ai-ok .ai-conf { background: var(--wa-success-bg); color: var(--wa-success); }
.ai-fail .ai-conf { background: var(--wa-error-bg); color: var(--wa-error); }
.ai-unk .ai-conf { background: var(--wa-border); color: var(--wa-text-muted); }

/* ── Fullscreen Modal ───────────────────────────────────────────────────── */
.sm { display: none; position: fixed; inset: 0; background: var(--wa-surface); z-index: 9999; flex-direction: column; }
.sm.open { display: flex; }
.sm-hd {
  display: flex; align-items: center; gap: .8rem;
  padding: .72rem 1rem; background: var(--wa-surface-alt);
  border-bottom: 1px solid var(--wa-border); flex-shrink: 0;
}
.sm-hd-t { font-size: .85rem; font-weight: var(--wa-font-weight-bold); flex: 1; color: var(--wa-text); }
.sm-close {
  background: none; border: 1px solid var(--wa-border); color: var(--wa-text-muted);
  border-radius: var(--wa-radius-sm); padding: .22rem .65rem; cursor: pointer; font-size: .78rem;
  font-family: inherit;
}
.sm-close:hover { border-color: var(--wa-error); color: var(--wa-error); }
.sm-panels { display: flex; flex: 1; overflow: hidden; }
.sm-left { width: 50%; overflow: auto; border-right: 1px solid var(--wa-border); padding: .72rem .85rem; background: var(--wa-bg); }
.sm-right { width: 50%; overflow: auto; padding: .72rem .85rem; background: var(--wa-surface); }
.sm-right-hd {
  font-size: 0.74rem; font-weight: var(--wa-font-weight-bold);
  letter-spacing: .07em; text-transform: uppercase; color: var(--wa-text-muted);
  margin-bottom: .62rem; padding-bottom: .42rem; border-bottom: 1px solid var(--wa-border);
}
pre.src-code {
  font-family: var(--wa-font-mono); font-size: 0.74rem; line-height: 1.65;
  white-space: pre; color: var(--wa-text-secondary);
}
pre.src-code .src-ln { color: var(--wa-text-disabled); user-select: none; padding-right: .65rem; display: inline-block; min-width: 2.8rem; text-align: right; }
pre.src-code .src-err { background: var(--wa-error-bg); color: var(--wa-error); }
pre.src-code .src-warn { background: var(--wa-warning-bg); color: var(--wa-warning); }
pre.src-code .src-sel { background: var(--wa-accent-subtle) !important; color: var(--wa-text) !important; outline: 2px solid var(--wa-accent); }

/* Modal categories */
.sm-cat { margin-bottom: .28rem; border: 1px solid var(--wa-border); border-radius: var(--wa-radius); overflow: hidden; }
.sm-cat-hd {
  display: flex; align-items: center; gap: .5rem;
  padding: .42rem .65rem; background: var(--wa-surface-alt); cursor: pointer;
  user-select: none; font-size: 0.74rem; font-weight: var(--wa-font-weight-medium); color: var(--wa-text-secondary);
}
.sm-cat-hd:hover { background: var(--wa-surface-hover); }
.sm-cat-arr { font-size: 0.74rem; transition: transform .18s; flex-shrink: 0; }
.sm-cat-cnt {
  margin-left: auto; font-size: 0.74rem; font-weight: var(--wa-font-weight-bold);
  background: var(--wa-border); padding: .05rem .32rem; border-radius: var(--wa-radius-full); color: var(--wa-text-secondary);
}
.sm-cat-body { display: none; }
.sm-cat-body.open { display: block; }
.sm-finding { padding: .42rem .65rem; border-bottom: 1px solid var(--wa-border); cursor: pointer; transition: background .1s; }
.sm-finding:hover { background: var(--wa-surface-alt); }
.sm-finding.sm-sel { background: var(--wa-accent-subtle); border-left: 3px solid var(--wa-accent); }
.sm-finding.fc-err { border-left: 2px solid var(--wa-error-border); }
.sm-finding.fc-warn { border-left: 2px solid var(--wa-warning-border); }
.sm-finding.sm-sel.fc-err { border-left: 3px solid var(--wa-error); }
.sm-finding.sm-sel.fc-warn { border-left: 3px solid var(--wa-warning); }
.sm-f-top { display: flex; align-items: center; gap: .38rem; margin-bottom: .15rem; }
.sm-f-rule { font-size: 0.74rem; font-weight: var(--wa-font-weight-medium); color: var(--wa-info); flex: 1; }
.sm-f-line {
  font-size: 0.74rem; font-family: var(--wa-font-mono); background: var(--wa-surface-alt);
  color: var(--wa-text-muted); padding: .03rem .28rem; border-radius: var(--wa-radius-xs);
  flex-shrink: 0; border: 1px solid var(--wa-border);
}
.sm-f-title { font-size: 0.74rem; color: var(--wa-text-secondary); line-height: 1.38; margin-bottom: .28rem; }
.sm-f-jbar { display: flex; gap: .22rem; align-items: center; }
.sm-jb {
  font-size: 0.74rem; font-weight: var(--wa-font-weight-bold);
  padding: .12rem .38rem; border-radius: var(--wa-radius-sm); cursor: pointer;
  border: 1px solid var(--wa-border); background: var(--wa-surface);
  color: var(--wa-text-muted); transition: all .12s; font-family: inherit;
}
.sm-jb.ok:hover { background: var(--wa-success-bg); border-color: var(--wa-success-border); color: var(--wa-success); }
.sm-jb.fp:hover { background: var(--wa-error-bg); border-color: var(--wa-error-border); color: var(--wa-error); }
.sm-j { font-size: 0.74rem; font-weight: var(--wa-font-weight-bold); padding: .1rem .38rem; border-radius: var(--wa-radius-sm); }
.sm-j-ok { background: var(--wa-success-bg); color: var(--wa-success); border: 1px solid var(--wa-success-border); }
.sm-j-fp { background: var(--wa-error-bg); color: var(--wa-error); border: 1px solid var(--wa-error-border); }

/* ── Formulier Panel ────────────────────────────────────────────────────── */
.fm-field { padding: .42rem .6rem; border-bottom: 1px solid var(--wa-border); font-size: 0.74rem; color: var(--wa-text-secondary); }
.fm-field-ok { border-left: 3px solid var(--wa-success); }
.fm-field-fail { border-left: 3px solid var(--wa-error); }
.fm-issue {
  display: inline-block; font-size: 0.74rem; padding: .08rem .35rem; border-radius: var(--wa-radius-xs);
  background: var(--wa-error-bg); color: var(--wa-error); border: 1px solid var(--wa-error-border);
  margin: .1rem .15rem 0 0;
}
.fm-badge-ok { color: var(--wa-success); font-size: 0.74rem; }
.fm-badge-fail { color: var(--wa-error); font-size: 0.74rem; }
.fm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin: .65rem 0; }
@media(max-width: 640px) { .fm-grid { grid-template-columns: 1fr; } }

/* ── Export Button ──────────────────────────────────────────────────────── */
.exp-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: 0.74rem; padding: .3rem .85rem; border-radius: var(--wa-radius);
  cursor: pointer; border: 1px solid var(--wa-border);
  background: var(--wa-surface-alt); color: var(--wa-text-muted); transition: all .12s;
  font-family: inherit;
}
.exp-btn:hover { border-color: var(--wa-accent); color: var(--wa-accent); }

/* ── Keyboard Panel ─────────────────────────────────────────────────────── */
.kb-card {
  background: var(--wa-surface-alt); border: 1px solid var(--wa-border);
  border-radius: var(--wa-radius-lg); padding: .55rem .85rem; min-width: 120px; flex: 1;
}
.kb-card-n { font-size: 1.35rem; font-weight: 800; margin-bottom: .1rem; color: var(--wa-text); }
.kb-card-l { font-size: 0.74rem; color: var(--wa-text-muted); text-transform: uppercase; letter-spacing: .06em; }
.kb-card.ok .kb-card-n { color: var(--wa-success); }
.kb-card.warn .kb-card-n { color: var(--wa-warning); }
.kb-card.err .kb-card-n { color: var(--wa-error); }
.kb-card.neu .kb-card-n { color: var(--wa-info); }
.kb-table { width: 100%; border-collapse: collapse; font-size: 0.74rem; }
.kb-table th {
  background: var(--wa-surface-alt); color: var(--wa-text-muted); font-weight: var(--wa-font-weight-medium);
  padding: .28rem .55rem; text-align: left; font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--wa-border);
}
.kb-table td { padding: .25rem .55rem; border-bottom: 1px solid var(--wa-border); vertical-align: top; color: var(--wa-text-secondary); }
.kb-table tr:hover td { background: var(--wa-surface-alt); }
.kb-tag { font-family: var(--wa-font-mono); font-size: 0.74rem; background: var(--wa-info-bg); padding: .05rem .28rem; border-radius: var(--wa-radius-xs); color: var(--wa-info); }
.kb-trap td { background: var(--wa-error-bg) !important; color: var(--wa-error); }

/* ── Lighthouse ─────────────────────────────────────────────────────────── */
.lh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: 1rem; }
.lh-score {
  background: var(--wa-surface-alt); border: 1px solid var(--wa-border);
  border-radius: var(--wa-radius-lg); padding: .85rem; text-align: center;
}
.lh-num { font-size: 2rem; font-weight: 800; line-height: 1; font-family: var(--wa-font-mono); color: var(--wa-text); }
.lh-lbl { font-size: 0.74rem; font-weight: var(--wa-font-weight-bold); letter-spacing: .05em; text-transform: uppercase; color: var(--wa-text-muted); margin-top: .3rem; }
.lh-s-good .lh-num { color: var(--wa-success); }
.lh-s-ok .lh-num { color: var(--wa-warning); }
.lh-s-fail .lh-num { color: var(--wa-error); }
.lh-vitals { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .85rem; }
.lh-vital {
  background: var(--wa-surface-alt); border: 1px solid var(--wa-border);
  border-radius: var(--wa-radius-lg); padding: .55rem .75rem; flex: 1; min-width: 100px;
}
.lh-vital-val { font-size: 1.1rem; font-weight: var(--wa-font-weight-bold); font-family: var(--wa-font-mono); color: var(--wa-text); }
.lh-vital-lbl { font-size: 0.74rem; color: var(--wa-text-muted); margin-top: .15rem; }
.lh-vital-good .lh-vital-val { color: var(--wa-success); }
.lh-vital-ok .lh-vital-val { color: var(--wa-warning); }
.lh-vital-fail .lh-vital-val { color: var(--wa-error); }

/* ── Review Modus ───────────────────────────────────────────────────────── */
.rv { display: none; position: fixed; inset: 0; z-index: 10000; background: var(--wa-bg); flex-direction: column; font-family: var(--wa-font); }
.rv.open { display: flex; }
.rv-hd {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.8rem; background: var(--wa-surface);
  border-bottom: 1px solid var(--wa-border); flex-shrink: 0; box-shadow: var(--wa-shadow);
}
.rv-prog-wrap { display: flex; flex-direction: column; gap: .25rem; flex-shrink: 0; }
.rv-prog { font-size: .88rem; color: var(--wa-text-muted); font-family: var(--wa-font-mono); }
.rv-prog b { color: var(--wa-text); font-size: 1.05rem; }
.rv-pbar { width: 200px; height: 5px; background: var(--wa-border); border-radius: var(--wa-radius-xs); overflow: hidden; }
.rv-pbar-fg { height: 5px; background: var(--wa-accent); border-radius: var(--wa-radius-xs); transition: width .35s; }
.rv-rule-hd {
  font-size: .88rem; font-weight: var(--wa-font-weight-medium); color: var(--wa-text-muted);
  flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 1rem;
}
.rv-close {
  background: transparent; border: 1px solid var(--wa-border); color: var(--wa-text-muted);
  border-radius: var(--wa-radius-lg); padding: .4rem 1.1rem; cursor: pointer;
  font-size: .82rem; font-weight: var(--wa-font-weight-medium); transition: all .15s; flex-shrink: 0;
  font-family: inherit;
}
.rv-close:hover { border-color: var(--wa-error); color: var(--wa-error); }
.rv-body { flex: 1; overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: 2.5rem 2rem; background: var(--wa-bg); }
.rv-card {
  width: 100%; max-width: 900px; background: var(--wa-surface);
  border: 1px solid var(--wa-border); border-radius: var(--wa-radius-xl);
  padding: 3rem; box-shadow: var(--wa-shadow-lg);
}
.rv-badges { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.6rem; }
.rv-sev { font-size: .88rem; font-weight: var(--wa-font-weight-bold); padding: .35rem 1rem; border-radius: var(--wa-radius); letter-spacing: .01em; }
.rv-sev-err { background: var(--wa-error-bg); color: var(--wa-error); border: 1px solid var(--wa-error-border); }
.rv-sev-warn { background: var(--wa-warning-bg); color: var(--wa-warning); border: 1px solid var(--wa-warning-border); }
.rv-impact { font-size: .8rem; font-weight: var(--wa-font-weight-medium); padding: .25rem .7rem; border-radius: var(--wa-radius-sm); }
.rv-title { font-size: 1.65rem; font-weight: var(--wa-font-weight-bold); line-height: 1.38; color: var(--wa-text); margin-bottom: 2rem; }
.rv-section { margin-bottom: 1.8rem; }
.rv-section-label {
  font-size: 0.74rem; font-weight: var(--wa-font-weight-bold);
  letter-spacing: .1em; text-transform: uppercase; color: var(--wa-text-disabled);
  margin-bottom: .7rem; display: flex; align-items: center; gap: .6rem;
}
.rv-section-label::after { content: ''; flex: 1; height: 1px; background: var(--wa-border); }
.rv-code {
  background: var(--wa-bg); border: 1px solid var(--wa-border); border-radius: var(--wa-radius-lg);
  padding: 1.2rem 1.4rem; font-family: var(--wa-font-mono); font-size: .95rem;
  line-height: 1.8; color: var(--wa-text-secondary); white-space: pre-wrap;
  word-break: break-all; overflow-x: auto;
}
.rv-code mark { background: var(--wa-warning-bg); color: var(--wa-warning); border-radius: 2px; padding: 0 2px; font-style: normal; }
.rv-src-btn {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .7rem;
  font-size: .8rem; color: var(--wa-accent); cursor: pointer;
  border: 1px solid var(--wa-accent); background: var(--wa-accent-subtle);
  padding: .3rem .8rem; border-radius: var(--wa-radius); transition: all .12s;
  font-family: inherit; opacity: .7;
}
.rv-src-btn:hover { opacity: 1; }
.rv-sol {
  font-size: 1.05rem; color: var(--wa-text-secondary); line-height: 1.7;
  background: var(--wa-info-bg); border-left: 3px solid var(--wa-info);
  padding: 1.1rem 1.3rem; border-radius: 0 var(--wa-radius-lg) var(--wa-radius-lg) 0;
}
.rv-sol-code {
  background: var(--wa-success-bg); border: 1px solid var(--wa-success-border);
  border-radius: var(--wa-radius-lg); font-family: var(--wa-font-mono);
  font-size: .9rem; color: var(--wa-success); padding: .9rem 1.1rem;
  white-space: pre-wrap; word-break: break-all; margin-top: .75rem;
}
.rv-wcag-link {
  font-size: .85rem; color: var(--wa-info); text-decoration: none;
  display: inline-flex; align-items: center; gap: .3rem;
  border: 1px solid var(--wa-info-border); padding: .25rem .7rem;
  border-radius: var(--wa-radius); transition: all .12s; background: var(--wa-info-bg);
}
.rv-wcag-link:hover { border-color: var(--wa-info); }
.rv-ft {
  display: flex; align-items: center; justify-content: center; gap: 1.2rem;
  padding: 1.2rem 1.8rem; background: var(--wa-surface);
  border-top: 1px solid var(--wa-border); flex-shrink: 0; flex-wrap: wrap;
  box-shadow: 0 -1px 3px rgba(0,0,0,.06);
}
.rv-btn-ok {
  font-size: 1.05rem; font-weight: var(--wa-font-weight-bold);
  padding: .75rem 2.2rem; border-radius: var(--wa-radius-lg); cursor: pointer;
  border: 2px solid var(--wa-success); background: var(--wa-success-bg);
  color: var(--wa-success); transition: all .15s; white-space: nowrap; font-family: inherit;
}
.rv-btn-ok:hover { transform: translateY(-1px); box-shadow: var(--wa-shadow-lg); }
.rv-btn-ok.act { box-shadow: 0 0 16px var(--wa-success-border); }
.rv-btn-fp {
  font-size: 1.05rem; font-weight: var(--wa-font-weight-bold);
  padding: .75rem 2.2rem; border-radius: var(--wa-radius-lg); cursor: pointer;
  border: 2px solid var(--wa-error); background: var(--wa-error-bg);
  color: var(--wa-error); transition: all .15s; white-space: nowrap; font-family: inherit;
}
.rv-btn-fp:hover { transform: translateY(-1px); box-shadow: var(--wa-shadow-lg); }
.rv-btn-fp.act { box-shadow: 0 0 16px var(--wa-error-border); }
.rv-btn-nav {
  font-size: .95rem; font-weight: var(--wa-font-weight-medium);
  padding: .7rem 1.8rem; border-radius: var(--wa-radius-lg); cursor: pointer;
  border: 1px solid var(--wa-border); background: var(--wa-surface-alt);
  color: var(--wa-text-secondary); transition: all .15s; font-family: inherit;
}
.rv-btn-nav:hover:not(:disabled) { border-color: var(--wa-border-strong); color: var(--wa-text); background: var(--wa-border); }
.rv-btn-nav:disabled { opacity: .3; cursor: not-allowed; }
.rv-kbd {
  font-size: 0.74rem; color: var(--wa-text-disabled); text-align: center;
  padding: .35rem; font-family: var(--wa-font-mono); letter-spacing: .04em; width: 100%;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media(max-width: 640px) {
  html { font-size: 17px; }
  body { padding: .75rem .6rem 3rem; gap: .5rem; }
  h1 { font-size: 1.35rem; }
  .card { padding: 1rem; }
  .irow { flex-direction: column; }
  .irow input { font-size: .85rem; padding: .55rem .75rem; }
  .rbtn { width: 100%; justify-content: center; padding: .55rem; font-size: .82rem; }
  .vrow { gap: .3rem; }
  .vt { font-size: 0.74rem; padding: .18rem .55rem; }
  .pipe-hd { padding: .65rem .8rem; gap: .45rem; }
  .pipe-title { font-size: .82rem; }
  .pipe-num { width: 22px; height: 22px; font-size: 0.74rem; }
  .pipe-body { padding: .65rem .8rem .9rem; }
  .pn-row { font-size: .8rem; }
  .pn-label { font-size: .8rem; }
  .fc-top { padding: .6rem .75rem; }
  .fc-title { font-size: .9rem; }
  .fc-rule { font-size: .78rem; }
  .fc-actions { padding: .45rem .75rem; }
  .fc-section { padding: .5rem .75rem; }
  .fc-sol { font-size: .85rem; }
  .fc-meta { gap: .25rem; }
  .s3-filter { gap: .28rem; }
  .s3-fb { font-size: .8rem; padding: .25rem .75rem; }
  .lh-grid { grid-template-columns: repeat(2, 1fr); }
  .lh-lbl { font-size: 0.74rem; }
  .lh-vitals { gap: .4rem; }
  .lh-vital { min-width: 80px; }
  .lh-vital-lbl { font-size: 0.74rem; }
  #screenpanel > [style] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .scr-tab { font-size: 0.74rem; padding: .28rem .6rem; white-space: nowrap; }
  .rv-card { padding: 1.5rem 1rem; }
  .rv-title { font-size: 1.25rem; }
  .rv-btn-ok, .rv-btn-fp { padding: .65rem 1.2rem; font-size: .92rem; }
  .rv-btn-nav { padding: .6rem 1rem; font-size: .85rem; }
  .rv-hd { padding: .75rem 1rem; }
  .sc-row { gap: .75rem; }
  .score-gauge { flex-wrap: wrap; }
  .score-num { font-size: 2rem; }
  .wn-row, .wn-total { grid-template-columns: 2rem 1fr 2.4rem 2.8rem; gap: .4rem; font-size: .74rem; }
  .wn-icon { width: 1.8rem; height: 1.8rem; font-size: 0.74rem; }
  .wn-total .wn-icon { width: 2rem; height: 2rem; }
  .kb-cards { flex-direction: column; }
  .kb-table { font-size: .75rem; }
  .olm-grid { font-size: .82rem; }
  .theme-switcher { margin-top: .5rem; }
}
@media(max-width: 400px) {
  html { font-size: 16px; }
  h1 { font-size: 1.25rem; }
  .lh-grid { grid-template-columns: repeat(2, 1fr); }
  .rv-ft { gap: .5rem; }
  .rv-btn-ok, .rv-btn-fp { padding: .55rem .9rem; font-size: .85rem; }
}

/* ── WebNorm Verificatie blok ──────────────────────────────────────────── */
.vb-details {
  border: 1px solid var(--wa-border); border-radius: var(--wa-radius-lg);
  background: var(--wa-surface); box-shadow: var(--wa-shadow-xs);
}
.vb-summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: .6rem; padding: .7rem .95rem;
}
.vb-summary::-webkit-details-marker { display: none; }
.vb-summary::before {
  content: '›'; font-size: 1rem; color: var(--wa-text-muted);
  transition: transform .15s; display: inline-block;
}
.vb-details[open] .vb-summary::before { transform: rotate(90deg); }
.vb-summary-title { font-weight: var(--wa-font-weight-bold); font-size: .82rem; color: var(--wa-text); flex: 1 1 auto; }
.vb-summary-meta { font-size: 0.74rem; color: var(--wa-text-muted); font-family: var(--wa-font-mono); }
.vb-verified { font-size: 0.8rem; color: var(--wa-accent-text); background: var(--wa-accent-subtle); border: 1px solid var(--wa-badge-blue-border); border-radius: var(--wa-radius); padding: .45rem .7rem; margin: 0 0 .8rem; line-height: 1.5; }
.vb-verified b { color: var(--wa-text); }
.vb-group { margin: 0 .95rem .9rem; }
.vb-group-hd {
  display: flex; align-items: center; gap: .5rem;
  font-size: 0.78rem; font-weight: var(--wa-font-weight-bold); color: var(--wa-text-secondary);
  padding: .55rem 0 .45rem; margin-bottom: .5rem;
  border-bottom: 1px solid var(--wa-border-subtle);
}
.vb-group-tag {
  font-size: 0.74rem; font-weight: var(--wa-font-weight-medium);
  padding: .05rem .45rem; border-radius: var(--wa-radius-full);
  background: var(--wa-surface-alt); color: var(--wa-text-muted);
}
.vb-group-n { margin-left: auto; font-family: var(--wa-font-mono); color: var(--wa-text-muted); font-weight: 700; }
.vb-details .vb-item { margin: 0 0 .5rem; }
.vb-intro {
  font-size: .76rem; color: var(--wa-text-muted);
  margin: .1rem 0 .7rem; padding: 0 .95rem;
}
.vb-item {
  background: var(--wa-surface); border: 1px solid var(--wa-border);
  border-radius: var(--wa-radius-lg); padding: .65rem .85rem;
  margin-bottom: .5rem;
}
.vb-item-head {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-bottom: .45rem;
}
.vb-idx {
  background: var(--wa-accent); color: var(--wa-text-inverse);
  font-size: 0.74rem; font-weight: var(--wa-font-weight-bold);
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.vb-title {
  font-size: .8rem; font-weight: var(--wa-font-weight-medium);
  color: var(--wa-text); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vb-src {
  font-size: 0.74rem; color: var(--wa-text-muted);
  background: var(--wa-surface-alt); padding: .15rem .45rem;
  border-radius: var(--wa-radius-full);
}
.vb-actions {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.vb-empty {
  font-size: .8rem; color: var(--wa-text-muted);
  text-align: center; padding: 1.5rem;
}
.tb-jl { font-size: 0.74rem; color: var(--wa-text-muted); font-weight: var(--wa-font-weight-medium); }
.vb-aibtn {
  font-size: 0.74rem; font-weight: var(--wa-font-weight-medium);
  padding: .28rem .6rem; border-radius: var(--wa-radius); cursor: pointer;
  border: 1px solid var(--wa-badge-purple-border); background: var(--wa-badge-purple-bg); color: var(--wa-badge-purple-text);
}
.vb-aibtn:hover { filter: brightness(.97); }
.vb-aibtn:disabled { opacity: .6; cursor: default; }
.vb-ai-result { margin-top: .5rem; }
.vb-provebtn {
  font-size: 0.74rem; font-weight: var(--wa-font-weight-medium);
  padding: .28rem .6rem; border-radius: var(--wa-radius); cursor: pointer;
  border: 1px solid #1F9D3E; background: rgba(31,157,62,.14); color: #1F9D3E;
}
.vb-provebtn:hover { filter: brightness(.97); }
.vb-provebtn:disabled { opacity: .6; cursor: default; }
.vb-prove-result { margin-top: .5rem; }
.vb-learn-row { margin-top: .5rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.vb-learnbtn {
  font-size: 0.74rem; font-weight: var(--wa-font-weight-medium);
  padding: .28rem .6rem; border-radius: var(--wa-radius); cursor: pointer;
  border: 1px solid #0F7D3D; background: #0F7D3D; color: #fff;
}
.vb-learnbtn:hover { filter: brightness(1.06); }
.vb-learnbtn:disabled { opacity: .7; cursor: default; }
.vb-learn-status { font-size: 0.74rem; color: var(--wa-text-muted); }
.vb-ai-busy { font-size: 0.78rem; color: var(--wa-text-muted); }
.vb-ai-card {
  font-size: 0.78rem; line-height: 1.5; border-radius: var(--wa-radius);
  padding: .55rem .7rem; border-left: 3px solid var(--wa-border-strong); background: var(--wa-surface-alt);
}
.vb-ai-ok { border-left-color: var(--wa-success); background: var(--wa-success-bg); }
.vb-ai-no { border-left-color: var(--wa-warning); background: var(--wa-warning-bg); }
.vb-ai-verdict { font-weight: var(--wa-font-weight-bold); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.vb-ai-conf { font-size: 0.74rem; font-weight: 400; color: var(--wa-text-muted); }
.vb-ai-exp { margin-top: .3rem; }
.vb-ai-tip { margin-top: .3rem; color: var(--wa-text-secondary); }
.tb-desc {
  font-size: 0.78rem; color: var(--wa-text-secondary); line-height: 1.5;
  background: var(--wa-surface-alt); border-radius: var(--wa-radius);
  padding: .5rem .7rem; margin-bottom: .7rem;
}
.tb-desc b { color: var(--wa-text); }