/* Arcobench — aanvullingen op de Arcoscan-stijl: glastegels in de kleur van de uitkomst, wijzermeters, meetradar met gele laptop. */
.btn.big { font-size:18px; padding:15px 30px; margin:8px 0 6px; }
.btn.primary { background:linear-gradient(180deg,#6b9bff,var(--accent3)); color:#fff; border-color:transparent; box-shadow:0 3px 0 var(--edge), 0 10px 20px var(--glow); }

/* Profielkeuze */
.profiles { border:0; padding:0; margin:0 auto 14px; max-width:900px; } .profiles legend { font-weight:700; margin:0 auto 10px; padding:0; color:var(--ink); }
.chips { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; } @media (max-width:860px) { .chips { grid-template-columns:repeat(2,1fr); } } @media (max-width:420px) { .chips { grid-template-columns:1fr; } }
.chip { position:relative; cursor:pointer; } .chip input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.chip span { display:flex; flex-direction:column; align-items:center; gap:3px; height:100%; padding:14px 10px; border-radius:16px; text-align:center; background:linear-gradient(150deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border:1px solid color-mix(in srgb,var(--line) 80%,#fff 8%); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); transition:.18s; box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px rgba(0,0,0,.2); }
.chip .ic { color:var(--gold2); } .chip b { font-size:15px; } .chip small { color:var(--muted); font-size:12px; line-height:1.3; }
.chip:hover span { transform:translateY(-2px); border-color:var(--accent2); }
.chip input:checked + span { border-color:var(--gold); background:linear-gradient(150deg, rgba(240,180,41,.28), rgba(240,180,41,.07)); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 1px var(--gold), 0 10px 24px rgba(240,180,41,.22); }
.chip input:focus-visible + span { outline:3px solid var(--accent2); outline-offset:2px; }
.meas { list-style:none; padding:0; margin:0; display:grid; gap:12px; } .meas li { display:flex; gap:12px; align-items:flex-start; } .meas .ic { color:var(--gold2); flex:none; margin-top:2px; } .meas b { display:block; } .meas span { color:var(--muted); font-size:14px; }
.mission { margin:24px 0 10px; border-left:4px solid var(--gold); } .mission p { color:var(--muted); }
.support { text-align:center; margin:22px 0 6px; }
.bmc-btn { display:inline-flex; align-items:center; gap:8px; min-width:210px; height:60px; padding:0 24px; box-sizing:border-box; border-radius:12px; background:#5F7FFF; color:#fff; font:bold 24px/27px Arial,sans-serif; white-space:nowrap; text-decoration:none !important; }
.bmc-btn:hover { filter:brightness(1.08); }
.bmc-btn img { flex:none; width:auto; height:29px; }

/* Meetradar: blauwe schijf, gele laptop, wijzer, pictogrammen in het geel; actief = rood */
.radarscan.bench .rs-disc { background:#030a1e; }
.rs-gauge { position:absolute; inset:0; width:100%; height:100%; }
.rg-ring { fill:none; stroke:rgba(143,180,255,.16); stroke-width:1; }
.rg-ticks line { stroke:rgba(255,212,121,.55); stroke-width:1.4; stroke-linecap:round; } .rg-ticks line.maj { stroke:#ffd479; stroke-width:2.4; }
.rg-band { fill:none; stroke:#f0b429; stroke-width:6; stroke-linecap:round; opacity:.9; }
.lp-screen { fill:rgba(240,180,41,.07); stroke:#f0b429; stroke-width:5; } .lp-glow { fill:rgba(255,212,121,.12); animation:lpGlow 2.6s ease-in-out infinite; } .lp-base { fill:#f0b429; } .lp-notch { stroke:#7a5a10; stroke-width:2.2; stroke-linecap:round; }
.laptop { filter:drop-shadow(0 0 12px rgba(240,180,41,.45)); } @keyframes lpGlow { 50% { fill:rgba(255,212,121,.28); } }
.nd { fill:#f0b429; stroke:#7a5a10; stroke-width:1; filter:drop-shadow(0 0 4px rgba(240,180,41,.7)); } .hub { fill:#06112b; stroke:#f0b429; stroke-width:3; } .hub2 { fill:#f0b429; }
.tico { stroke:#f0b429; opacity:.95; transition:stroke .25s, opacity .25s; filter:drop-shadow(0 0 3px rgba(240,180,41,.55)); }
.tico.ok { opacity:.55; } .tico.act { stroke:#ff3b30; opacity:1; filter:drop-shadow(0 0 7px rgba(255,59,48,.95)); animation:tPulse .9s ease-in-out infinite; }
@keyframes tPulse { 50% { opacity:.55; } }
@media (prefers-reduced-motion: reduce) { .tico.act, .lp-glow { animation:none; } }
.rundetail { color:var(--muted); min-height:1.5em; margin-bottom:6px; }
.stepper li[data-k] { transition:.2s; } .stepper li.on { border-color:var(--gold); color:var(--gold2); }

/* Resultaat */
.res-top { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:12px; margin:18px 0 6px; } .res-top h2 { margin:0; }
.seg-sw { display:flex; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:3px; } .seg-sw button { border:0; background:none; color:var(--muted); font:700 14px inherit; padding:8px 18px; border-radius:999px; cursor:pointer; }
.seg-sw button[aria-selected=true] { background:linear-gradient(180deg,#6b9bff,var(--accent3)); color:#fff; box-shadow:0 2px 0 var(--edge); }
.sec { margin:30px 0 12px; font-size:19px; }
.grid5 { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; } .grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .grid2 { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:14px; }
@media (max-width:1060px) { .grid5 { grid-template-columns:repeat(3,1fr); } } @media (max-width:820px) { .grid3,.grid4 { grid-template-columns:repeat(2,1fr); } .grid2 { grid-template-columns:1fr; } } @media (max-width:560px) { .grid5,.grid3,.grid4 { grid-template-columns:1fr; } }

/* Glastegel in de kleur van de uitkomst (A groen … E rood), zoals Arcoscan */
.bt { --k:var(--gN); position:relative; display:flex; flex-direction:column; gap:6px; padding:16px; }
.bt[data-s=A] { --k:var(--gA); } .bt[data-s=B] { --k:var(--gB); } .bt[data-s=C] { --k:var(--gC); } .bt[data-s=D] { --k:var(--gD); } .bt[data-s=E] { --k:var(--gE); } .bt[data-s=N] { --k:var(--gN); }
.card.bt { background:linear-gradient(150deg, color-mix(in srgb, var(--k) 30%, rgba(255,255,255,.04)) 0%, color-mix(in srgb, var(--k) 11%, rgba(255,255,255,.03)) 55%, rgba(255,255,255,.05) 100%);
  border:1px solid color-mix(in srgb, var(--k) 34%, rgba(255,255,255,.14)); -webkit-backdrop-filter:blur(22px) saturate(1.8); backdrop-filter:blur(22px) saturate(1.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -14px 24px color-mix(in srgb, var(--k) 10%, transparent), 0 16px 36px color-mix(in srgb, var(--k) 22%, rgba(0,0,0,.34)), 0 2px 6px rgba(0,0,0,.25); }
.bt-h { display:flex; align-items:center; gap:10px; } .bt-h h3 { margin:0; flex:1; font-size:15px; line-height:1.25; }
.bt .ico { width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center; color:var(--k); background:color-mix(in srgb, var(--k) 16%, rgba(255,255,255,.06)); box-shadow:inset 0 1px 0 rgba(255,255,255,.3); }
.bt .ico .ic { filter:drop-shadow(0 0 5px color-mix(in srgb,var(--k) 60%,transparent)); }
.bt .gr { min-width:30px; height:30px; padding:0 8px; display:grid; place-items:center; border-radius:9px; font-weight:800; color:#fff; background:var(--k); box-shadow:0 0 14px color-mix(in srgb,var(--k) 55%,transparent); }
.bt-big { font-weight:800; font-size:17px; margin:2px 0 0; } .bt-small { margin:0; color:var(--muted); font-size:13px; line-height:1.45; } .bt-small b { color:var(--ink); }
.bt .meter i { background:var(--k); box-shadow:0 0 10px var(--k); }
.use.mine { box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 2px color-mix(in srgb,var(--gold) 70%,transparent), 0 16px 36px color-mix(in srgb, var(--k) 22%, rgba(0,0,0,.34)); } .mine-b { position:absolute; top:-9px; right:12px; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#2b2108; background:var(--gold2); padding:2px 9px; border-radius:99px; }

/* Wijzermeter */
.gauge { width:100%; max-width:170px; margin:0 auto; display:block; } .gauge.big { max-width:260px; }
.gauge .ticks line { stroke:rgba(255,255,255,.35); stroke-width:.8; } .gauge .seg { fill:none; stroke-width:6; stroke-linecap:butt; opacity:.9; }
.gauge .sE { stroke:var(--gE); } .gauge .sD { stroke:var(--gD); } .gauge .sC { stroke:var(--gC); } .gauge .sB { stroke:var(--gB); } .gauge .sA { stroke:var(--gA); }
.gauge .needle { fill:var(--ink); stroke:rgba(0,0,0,.4); stroke-width:.6; } .gauge .hub { fill:var(--card); stroke:var(--ink); stroke-width:1.6; }
.gauge .gnum { font:800 17px -apple-system,"Segoe UI",sans-serif; fill:currentColor; } .gauge.big .gnum { font-size:19px; }

/* Advies-tegel */
.verdict { flex-direction:row; align-items:center; gap:24px; padding:22px 26px; margin:14px 0 6px; } @media (max-width:700px) { .verdict { flex-direction:column; text-align:center; } }
.verdict .v-g { flex:none; width:230px; max-width:60%; } .verdict h2 { font-size:clamp(24px,3.4vw,34px); margin:6px 0 8px; } .verdict .pill { background:rgba(255,255,255,.12); color:var(--ink); }
.verdict p { margin:0 0 8px; } .v-bn { font-size:14px; } .v-mk { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); } .v-mk .ic { color:var(--k); flex:none; }

/* Marktvergelijking */
.mkt { display:grid; gap:7px; } .mrow { display:grid; grid-template-columns:minmax(150px,300px) 1fr 34px; align-items:center; gap:12px; font-size:14px; padding:3px 8px; border-radius:10px; } @media (max-width:640px) { .mrow { grid-template-columns:110px 1fr 30px; font-size:12.5px; } }
.mn small { color:var(--muted); } .mbar { height:12px; border-radius:99px; background:color-mix(in srgb,var(--line) 80%,transparent); overflow:hidden; } .mbar i { display:block; height:100%; border-radius:99px; width:0; transition:width 1s cubic-bezier(.2,.8,.2,1); }
.mrow.me { background:linear-gradient(90deg, rgba(240,180,41,.22), rgba(240,180,41,.05)); box-shadow:inset 0 0 0 1px rgba(240,180,41,.55); font-weight:800; } .mrow.me .mbar { height:16px; } .mrow b { text-align:right; }
.mktc { padding:18px; }
.it { background:color-mix(in srgb,var(--k,var(--accent2)) 12%, var(--card)); }
.res-actions { display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 8px; } .accnote { max-width:760px; }

/* Script-kaart + dropzone */
.script { margin-top:28px; border-left:4px solid var(--gold); } .os-pick { display:flex; flex-wrap:wrap; gap:10px; margin:10px 0; } .os-pick .btn { text-decoration:none; }
.how-run { margin:8px 0 12px; } .how-run summary { cursor:pointer; font-weight:700; } .how-run code { display:block; padding:8px 10px; border-radius:8px; background:var(--term); color:var(--termfg); font:13px ui-monospace,Menlo,monospace; overflow-x:auto; margin:4px 0; white-space:pre-wrap; word-break:break-all; }
.drop { display:grid; place-items:center; min-height:84px; padding:14px; border:2px dashed color-mix(in srgb,var(--gold) 55%,transparent); border-radius:14px; text-align:center; cursor:pointer; color:var(--muted); transition:.15s; } .drop:hover,.drop.over,.drop:focus-visible { border-color:var(--gold2); background:rgba(240,180,41,.08); color:var(--ink); }

/* Advanced */
.atable { width:100%; border-collapse:collapse; font-size:14px; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; } .atable th,.atable td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; } .atable thead th { background:var(--soft); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.atable tbody th { width:28%; font-weight:700; } .atable td:last-child { color:var(--muted); font-size:13px; } @media (max-width:700px) { .atable td:last-child, .atable thead th:last-child { display:none; } }
.spark { width:100%; height:64px; } .spark polyline { stroke:var(--gold); stroke-width:2; vector-effect:non-scaling-stroke; } .spark .area { fill:rgba(240,180,41,.15); stroke:none; } .spark.net polyline { stroke:var(--accent2); } .spark.net .area { fill:rgba(91,141,255,.18); }
.cores { display:flex; align-items:flex-end; gap:6px; height:70px; } .cores i { flex:1; display:block; border-radius:5px 5px 0 0; background:linear-gradient(180deg,var(--gold2),var(--gold)); width:auto; height:0; transition:height .8s; }
@media print { .res-actions,.seg-sw,.script,.top,.foot { display:none !important; } #pane-adv { display:block !important; } body { background:#fff; color:#000; } .card.bt { -webkit-backdrop-filter:none; backdrop-filter:none; } }

.warn { margin:14px 0; border-left:4px solid var(--gD); background:color-mix(in srgb,var(--gD) 14%,var(--card)); font-weight:600; }

/* Startpagina: meetwijzer als achtergrond-watermerk (iets meer dan een halve cirkel, streepjes, bewegende pijl) */
.hero > .hero-gauge { position:absolute !important; left:50%; top:70px; width:min(760px,125%); aspect-ratio:300/172; transform:translateX(-50%); opacity:.38; pointer-events:none; z-index:0; filter:drop-shadow(0 0 30px rgba(42,98,224,.35)); }
.hg-ring { fill:none; stroke:rgba(143,180,255,.16); stroke-width:1; }
.hg-ticks line { stroke:rgba(255,212,121,.36); stroke-width:1.6; stroke-linecap:round; } .hg-ticks line.maj { stroke:rgba(255,212,121,.6); stroke-width:3; }
.hg-arc { fill:none; stroke:#f0b429; stroke-width:3.5; stroke-linecap:round; opacity:.5; } .hg-band { fill:none; stroke:#f0b429; stroke-width:9; stroke-linecap:round; opacity:.48; }
.hg-needle { transform-box:view-box; transform-origin:150px 150px; animation:hgSwing 9s ease-in-out infinite; } .hg-wob { transform-box:view-box; transform-origin:150px 150px; animation:hgWob 1.7s ease-in-out infinite; }
.hg-needle path { opacity:.6; fill:#f0b429; stroke:#7a5a10; stroke-width:1; filter:drop-shadow(0 0 5px rgba(240,180,41,.8)); }
.hg-hub { fill:#06112b; stroke:#f0b429; stroke-width:3.5; } .hg-hub2 { fill:#f0b429; }
@keyframes hgSwing { 0% { transform:rotate(-72deg); } 35% { transform:rotate(34deg); } 55% { transform:rotate(10deg); } 80% { transform:rotate(58deg); } 100% { transform:rotate(-72deg); } }
@keyframes hgWob { 50% { transform:rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .hg-needle, .hg-wob { animation:none; transform:rotate(30deg); } }

.limit-note { display:inline-block; margin:2px auto 8px; padding:5px 14px; border-radius:99px; font-size:13.5px; font-weight:700; color:var(--gold2); background:rgba(240,180,41,.12); border:1px solid rgba(240,180,41,.35); }
.narrow .limit-note { display:table; margin:0 0 10px; }
.lp-notch-y { stroke:#f0b429; stroke-width:2.4; stroke-linecap:round; fill:none; } .lp-dot { fill:#f0b429; }