/* ═══ ARENA — TOOLS (/tools/, /postcode-checker/, /energielabel/, /vergelijker/). Alleen presentatie.
   Rekenmodellen, formulieren, ids, analytics en resultaten ongewijzigd. Laadt samen met arena-page.css (gedeelde hero). ═══ */
html[data-skin="arena"] .tools-hero { background: var(--arena-forest); border: 0; color: #fff; position: relative; overflow: hidden; }
html[data-skin="arena"] .tools-hero::before { opacity: .25; }
html[data-skin="arena"] .thr-glow-1, html[data-skin="arena"] .thr-glow-2 { opacity: .5; }
html[data-skin="arena"] .thr-inner { padding-top: 8rem; padding-bottom: 4.5rem; }
html[data-skin="arena"] .thr-cta-btn { background: var(--arena-brand); border: 0; color: var(--arena-ink); font-family: var(--arena-font-sans); font-weight: 600; border-radius: 9999px; padding: 14px 24px; box-shadow: 0 8px 26px -8px rgba(34, 197, 94, .6); }
html[data-skin="arena"] .thr-cta-btn:hover { background: var(--arena-lime); color: var(--arena-ink); }
html[data-skin="arena"] .thr-cta-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
html[data-skin="arena"] .thr-cta-ic { background: rgba(10, 36, 25, .12); }
html[data-skin="arena"] .thr-card { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); border-radius: 1.25rem; }
html[data-skin="arena"] .thr-card-val { font-family: var(--arena-serif); font-weight: 400; letter-spacing: -.02em; color: #fff; }
html[data-skin="arena"] .thr-card-val.accent { color: var(--arena-lime); }
html[data-skin="arena"] .thr-clabel, html[data-skin="arena"] .thr-card-desc, html[data-skin="arena"] .thr-bar-row, html[data-skin="arena"] .thr-card-unit, html[data-skin="arena"] .thr-larrow { color: rgba(255, 255, 255, .78); font-family: var(--arena-font-sans); }
html[data-skin="arena"] .thr-bar-pct { color: #fff; }
html[data-skin="arena"] .tools-hub { background: var(--arena-paper); }
html[data-skin="arena"] .th-title { font-family: var(--arena-serif); font-weight: 400; letter-spacing: -.02em; font-size: clamp(2rem, 3.4vw, 2.8rem); color: var(--arena-ink); }
html[data-skin="arena"] .th-sub { color: rgba(42, 49, 44, .88); }
html[data-skin="arena"] .th-head .sec-tag { font-family: var(--arena-font-sans); letter-spacing: .22em; color: var(--arena-moss); }
html[data-skin="arena"] .th-card { background: #fff; border: 1px solid var(--arena-sand); border-radius: 1.5rem; box-shadow: 0 18px 44px -34px rgba(12, 34, 25, .3); color: var(--arena-ink); }
html[data-skin="arena"] .th-card:hover { border-color: var(--arena-moss); box-shadow: 0 24px 50px -30px rgba(12, 34, 25, .45); }
html[data-skin="arena"] .th-card:focus-visible { outline: 2px solid var(--arena-moss); outline-offset: 3px; }
html[data-skin="arena"] .th-body strong { font-family: var(--arena-font-sans); font-weight: 600; color: var(--arena-ink); }
html[data-skin="arena"] .th-body span { color: rgba(42, 49, 44, .82); }
html[data-skin="arena"] .th-tag { font-family: var(--arena-font-sans); color: rgba(42, 49, 44, .78); letter-spacing: .12em; }
html[data-skin="arena"] .th-tag-green { color: var(--arena-moss); }
html[data-skin="arena"] .th-arrow { color: rgba(42, 49, 44, .7); }
html[data-skin="arena"] .tool-card,
html[data-skin="arena"] .t-card { background: #fff; border: 1px solid var(--arena-sand); border-radius: 1.5rem; box-shadow: 0 24px 60px -42px rgba(12, 34, 25, .4); }
html[data-skin="arena"] .t-card::before { background: linear-gradient(90deg, var(--arena-brand), var(--arena-lime), transparent); opacity: .8; }
html[data-skin="arena"] .t-card .sub, html[data-skin="arena"] .ts-sub { color: rgba(42, 49, 44, .82); }
html[data-skin="arena"] .ts-title, html[data-skin="arena"] .stap-txt { font-family: var(--arena-serif); font-weight: 400; letter-spacing: -.01em; font-size: 1.5rem; color: var(--arena-ink); }
html[data-skin="arena"] .ts-num, html[data-skin="arena"] .stap-nr { background: var(--arena-forest); color: #fff; box-shadow: none; font-family: var(--arena-font-sans); }
html[data-skin="arena"] .f-label, html[data-skin="arena"] .form-field label { font-family: var(--arena-font-sans); color: rgba(42, 49, 44, .85); letter-spacing: .1em; }
html[data-skin="arena"] .f-inp, html[data-skin="arena"] .f-sel, html[data-skin="arena"] .form-field select, html[data-skin="arena"] .big-input { background: #fff; border: 1.5px solid #c9c4b6; border-radius: .9rem; color: var(--arena-ink); font-family: var(--arena-font-sans); }
html[data-skin="arena"] .big-input { font-weight: 600; }
html[data-skin="arena"] .f-inp:focus-visible, html[data-skin="arena"] .f-sel:focus-visible, html[data-skin="arena"] .form-field select:focus-visible, html[data-skin="arena"] .big-input:focus-visible { outline: 3px solid var(--arena-brand); outline-offset: 2px; border-color: var(--arena-moss); }
html[data-skin="arena"] .f-hint { color: rgba(42, 49, 44, .78); }
html[data-skin="arena"] .chk-item { background: #fff; border: 1.5px solid var(--arena-sand); border-radius: 1.1rem; }
html[data-skin="arena"] .chk-item:hover { background: var(--arena-cream); border-color: var(--arena-moss); }
html[data-skin="arena"] .chk-item:has(input:checked) { background: #f1f8ec; border-color: var(--arena-moss); }
html[data-skin="arena"] .chk-item:has(input:checked) .chk-title { color: var(--arena-moss); }
html[data-skin="arena"] .chk-item:has(input:focus-visible) { outline: 3px solid var(--arena-brand); outline-offset: 2px; }
html[data-skin="arena"] .chk-title { font-family: var(--arena-font-sans); color: var(--arena-ink); }
html[data-skin="arena"] .chk-sub { color: rgba(42, 49, 44, .8); }
html[data-skin="arena"] .btn-check,
html[data-skin="arena"] .btn-vergelijk { background: var(--arena-brand); color: var(--arena-ink); border-radius: 9999px; font-family: var(--arena-font-sans); font-weight: 600; box-shadow: 0 8px 26px -8px rgba(34, 197, 94, .6); }
html[data-skin="arena"] .btn-check:hover, html[data-skin="arena"] .btn-vergelijk:hover { background: var(--arena-lime); }
html[data-skin="arena"] .btn-check:focus-visible, html[data-skin="arena"] .btn-vergelijk:focus-visible { outline: 3px solid var(--arena-moss); outline-offset: 3px; }
html[data-skin="arena"] .tool-close { color: var(--arena-moss); font-family: var(--arena-font-sans); }
html[data-skin="arena"] .tool-close:focus-visible { outline: 2px solid var(--arena-moss); outline-offset: 3px; }
html[data-skin="arena"] .r-item, html[data-skin="arena"] .info-card { background: #fff; border-color: var(--arena-sand); border-radius: 1.1rem; }
html[data-skin="arena"] .r-val, html[data-skin="arena"] .info-card-n, html[data-skin="arena"] .ri-badge { font-family: var(--arena-serif); font-weight: 400; letter-spacing: -.02em; color: var(--arena-moss); font-size: 1.7rem; }
html[data-skin="arena"] .ri-badge { font-size: 1.15rem; }
html[data-skin="arena"] .r-lbl, html[data-skin="arena"] .info-card-l { font-family: var(--arena-font-sans); color: rgba(42, 49, 44, .82); }
html[data-skin="arena"] .r-maatregel, html[data-skin="arena"] .result-item-row { background: #fff; border-color: var(--arena-sand); border-radius: 1.1rem; }
html[data-skin="arena"] .result-item-row.positief { border-left-color: var(--arena-brand); }
html[data-skin="arena"] .ri-title { font-family: var(--arena-font-sans); font-weight: 600; color: var(--arena-ink); }
html[data-skin="arena"] .ri-desc { color: rgba(42, 49, 44, .85); }
html[data-skin="arena"] .result-banner.groen, html[data-skin="arena"] .result-banner.blauw { background: var(--arena-forest); border: 0; border-radius: 1.25rem; }
html[data-skin="arena"] .result-banner-main { font-family: var(--arena-serif); font-weight: 400; letter-spacing: -.02em; font-size: 2.2rem; }
html[data-skin="arena"] .disclaimer, html[data-skin="arena"] .tool-disclaimer { background: var(--arena-cream); border-color: var(--arena-sand); color: rgba(42, 49, 44, .88); border-radius: 1rem; }
html[data-skin="arena"] .tool-disclaimer { border-left: 3px solid var(--arena-brand); }
html[data-skin="arena"] .prod-cat-tab { background: #fff; border: 1px solid var(--arena-sand); color: var(--arena-ink); font-family: var(--arena-font-sans); font-weight: 500; }
html[data-skin="arena"] .prod-cat-tab:hover { border-color: var(--arena-moss); color: var(--arena-moss); }
html[data-skin="arena"] .prod-cat-tab.active { background: var(--arena-forest); border-color: var(--arena-forest); color: #fff; }
html[data-skin="arena"] .prod-cat-tab:focus-visible, html[data-skin="arena"] .prod-card:focus-visible { outline: 2px solid var(--arena-moss); outline-offset: 2px; }
html[data-skin="arena"] .prod-card { background: #fff; border: 1.5px solid var(--arena-sand); border-radius: 1.25rem; }
html[data-skin="arena"] .prod-card.geselecteerd { border-color: var(--arena-moss); background: #f1f8ec; }
html[data-skin="arena"] .prod-prijs { font-family: var(--arena-serif); font-weight: 400; letter-spacing: -.02em; color: var(--arena-moss); font-size: 1.5rem; }
html[data-skin="arena"] .prod-naam { font-family: var(--arena-font-sans); font-weight: 600; }
html[data-skin="arena"] .compare-sticky { background: #fff; border-top: 1px solid var(--arena-sand); }
html[data-skin="arena"] [style*="color:#38bdf8"] { color: #0369a1 !important; }
html[data-skin="arena"] .tool-disclaimer a, html[data-skin="arena"] .disclaimer a { color: var(--arena-moss); text-decoration: underline; text-underline-offset: 2px; }
html[data-skin="arena"] .thr-badge { color: rgba(255, 255, 255, .9); border-color: rgba(255, 255, 255, .3); }
html[data-skin="arena"] #r-jaar { color: var(--arena-lime) !important; font-family: var(--arena-serif) !important; font-weight: 400 !important; }
html[data-skin="arena"] [style*="color:rgba(34,197,94,.7)"] { color: rgba(255, 255, 255, .82) !important; }
html[data-skin="arena"] [style*="color:rgba(255,255,255,.5)"] { color: rgba(255, 255, 255, .78) !important; }
html[data-skin="arena"] .loc-pc-badge { color: var(--arena-lime); border-color: rgba(190, 242, 100, .4); }
html[data-skin="arena"] .loc-visual { background: var(--arena-forest); }
html[data-skin="arena"] .loc-card { border-radius: 1.5rem; background: #fff; border-color: var(--arena-sand); }