h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* ============================================================
   SPA Presales Assistant — moderne web-look (foundation)
   ============================================================ */

/* ---- Merklettertype: DM Sans (zelf-gehost, offline-proof) ----
   Variabel bestand dekt gewicht 400–700; latin + latin-ext voor diacritics.
   Aptos is de Microsoft-only fallback (niet meegeleverd). */
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/dm-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/dm-sans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* ---- TKH Security huisstijl (Brand Guidelines 2026) ----
       Accent: signatuur-limoen (#CCCC00). Structuur/donker: Nearly Black
       (#1C1D1F). Licht oppervlak: Ash (#EAEBEE). Tekst: #32333E (primair),
       #808595 (secundair). Limoen blijft accent-/pop-kleur, nooit tekst op wit. */
    --lime: #cccc00; /* TKH-signatuur (uit logo bemonsterd) */
    --lime-600: #b3b300; /* donkerder limoen: randen / hover */
    --lime-050: #f6f6d6; /* zachte limoen-tint voor vlakken */
    --ink: #1c1d1f; /* Nearly Black: structuur / koppen / actief */
    --ink-soft: #32333e; /* zachtere donkertint */
    --on-lime: #1c1d1f; /* tekst óp limoen = Nearly Black */
    --on-dark: #eaebee; /* tekst op de donkere balk = Ash */
    --on-dark-dim: #808595; /* gedempte tekst op de donkere balk */
    --bg: #eaebee; /* Ash: licht oppervlak */
    --panel: #ffffff;
    --line: #d7d9de; /* Ash-tint als rand */
    --text: #32333e; /* primaire tekst op licht */
    --muted: #808595; /* secundaire tekst */
    --ok: #2e9e4f;
    --warn: #b78100;
    --bad: #c8412f;
    /* Aliassen: bestaande regels blijven werken, maar wijzen nu naar de
       TKH-kleuren. Alles wat 'blauw' was wordt Nearly Black (structuur); het
       'accent' wordt limoen. */
    --blue: var(--ink);
    --blue-700: #000000;
    --accent: var(--lime);
    --radius: 10px;
    --shadow: 0 1px 3px rgba(28,29,31,.08), 0 1px 2px rgba(28,29,31,.06);
    --focus: #1c1d1f; /* focusring op lichte vlakken (Nearly Black); appbar overschrijft naar Ash */
}

* { box-sizing: border-box; }
html, body { margin: 0; }

/* ---- Toegankelijkheid: zichtbare toetsenbord-focus (cyan-token) ----
   Alleen bij toetsenbordnavigatie (:focus-visible), niet bij muisklik. */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--focus); outline-offset: 1px;
}
/* Op de donkere appbar is de Nearly-Black ring onzichtbaar → daar een Ash-ring. */
.appbar a:focus-visible, .appbar button:focus-visible, .appbar summary:focus-visible, .appbar [tabindex]:focus-visible {
    outline-color: var(--on-dark);
}
/* Disabled-affordance, overal consistent. */
button:disabled, input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }
/* Respecteer 'reduce motion' (vestibulaire klachten): geen transities/animaties. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .card:hover { transform: none; }
}
body {
    font-family: "DM Sans", Aptos, "Helvetica Neue", Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    font-size: 14px;
}
h1, h2, h3, h4 { color: var(--ink); font-weight: 700; margin: 0 0 .5rem; }
/* Elke pagina-titel krijgt een korte limoen-accentstreep als TKH-signatuur. */
h1 { position: relative; padding-bottom: .35rem; }
h1::after { content: ""; display: block; width: 46px; height: 3px; margin-top: .35rem; background: var(--lime); border-radius: 2px; }
a { color: var(--ink); }
/* Dunne-lijn SVG-iconen (Icon.razor); erven currentColor. */
.ico { display: inline-block; vertical-align: middle; flex: 0 0 auto; }

/* ---- App bar (TKH: zwarte balk + limoen accentlijn) ---- */
.appbar {
    display: flex; align-items: center; gap: 2rem;
    background: var(--ink); border-bottom: 2px solid var(--lime);
    padding: 0 1.4rem; height: 56px; box-shadow: 0 1px 4px rgba(0,0,0,.25);
    position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: baseline; gap: .5rem; }
/* "SPA"-tegel spiegelt de limoen-tegel van het logo: limoen vlak, zwarte letters. */
.brand-mark {
    background: var(--lime); color: var(--on-lime); font-weight: 800; letter-spacing: .5px;
    padding: .25rem .5rem; border-radius: 6px; font-size: 1rem;
}
.brand-title { color: var(--on-dark-dim); font-weight: 600; }
/* Het witte logo staat rechtstreeks op de zwarte balk (geen wit chipje meer). */
.brand-logo-link { display: inline-flex; align-items: center; cursor: pointer; }
.brand-logo { height: 30px; width: auto; display: block; }
.topnav { display: flex; gap: .4rem; }
.topnav a {
    text-decoration: none; color: var(--on-dark-dim); font-weight: 600;
    padding: .45rem .8rem; border-radius: 8px;
}
.topnav a:hover { background: rgba(255,255,255,.10); color: #fff; }
/* Actieve nav: witte tekst + limoen onderstreep-indicator (i.p.v. gevuld vlak),
   consistent met de h1-accentstreep. */
.topnav a.active { background: rgba(255,255,255,.06); color: #fff; box-shadow: inset 0 -3px 0 var(--lime); }

.content { padding: 1.2rem 1.4rem; max-width: 1200px; margin: 0 auto; }
/* Catalogus en storage calculator gebruiken de volledige schermbreedte. */
.content:has(> .catalog-layout), .content:has(> .sc-layout-3) { max-width: none; }

/* ---- Catalogus-layout met persistente categorieboom ---- */
.catalog-layout { display: grid; grid-template-columns: 244px 1fr; gap: 1.2rem; align-items: start; }
.catalog-main { min-width: 0; }
.cat-tree {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: .4rem; position: sticky; top: 70px; max-height: calc(100vh - 88px); overflow-y: auto;
}
.cat-tree-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; padding: .3rem .5rem .4rem; }
.tree-line { display: flex; align-items: center; gap: .1rem; }
.tree-caret {
    flex: 0 0 1.1rem; width: 1.1rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center;
    border: none; background: none; cursor: pointer; color: var(--muted); font-size: .7rem; padding: 0; border-radius: 4px;
}
.tree-caret:hover { background: var(--bg); color: var(--ink); }
.tree-caret-empty { cursor: default; }
.tree-row {
    flex: 1; min-width: 0; text-align: left; border: none; background: none; cursor: pointer; font: inherit;
    color: var(--text); padding: .3rem .5rem; border-radius: 6px;
}
.tree-row:hover { background: var(--bg); }
.tree-row.active { background: var(--lime-050); font-weight: 700; box-shadow: inset 3px 0 0 var(--lime); color: var(--ink); }
.tree-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-toggle { display: none; }
@media (max-width: 900px) {
    .catalog-layout { grid-template-columns: 1fr; }
    .cat-tree { display: none; position: static; max-height: 50vh; }
    .cat-tree.open { display: block; }
    .tree-toggle { display: inline-flex; align-items: center; order: -1; }
}

/* ---- Toolbar (breadcrumb + search) ---- */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.crumbs { color: var(--muted); font-size: .95rem; }
.crumbs a { cursor: pointer; text-decoration: none; font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .sep { margin: 0 .4rem; color: #808595; }
.search {
    width: 320px; max-width: 100%; padding: .55rem .8rem; font-size: .95rem;
    border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.search:focus { outline: 2px solid var(--focus); border-color: var(--focus); }
.count { color: var(--muted); margin: 0 0 .8rem; }
.hint { color: var(--muted); font-style: italic; }
/* Zoek-highlight + branded lege-staat. */
mark { background: var(--lime-050); color: inherit; padding: 0 .05em; border-radius: 2px; }
.empty-state { text-align: center; color: var(--muted); padding: 3rem 1rem; }
.empty-state .ico { color: var(--lime-600); margin-bottom: .6rem; }
.empty-state .empty-title { font-weight: 700; color: var(--ink); margin: 0 0 .2rem; }
.muted { color: var(--muted); font-size: .85em; }

/* ---- AI-zoeken ---- */
.searchbox { display: flex; align-items: stretch; gap: .4rem; }
/* Knop zonder label: alleen het sprankel-icoon. */
.ai-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; padding: 0; border: 1px solid var(--line); border-radius: 8px;
    background: #fff; color: var(--muted); cursor: pointer;
    transition: background .12s, color .12s, border-color .12s, box-shadow .12s;
}
.ai-toggle:hover { color: var(--ink); border-color: var(--lime-600); }
.ai-toggle.on {
    background: var(--lime); color: var(--on-lime); border-color: var(--lime-600);
    box-shadow: 0 0 0 3px var(--lime-050);
}
/* AI-modus: opvallend andere achtergrond op de zoekbalk. */
.searchbox.ai .ai-input {
    background: linear-gradient(90deg, var(--lime-050), #fffef2);
    border-color: var(--lime-600);
}
.searchbox.ai .ai-input:focus { outline: 2px solid var(--lime-600); border-color: var(--lime-600); }
.searchbox.ai .ai-input::placeholder { color: #8a8a55; }

.ai-panel { display: block; }
.ai-hint {
    display: flex; gap: 1rem; align-items: flex-start;
    background: linear-gradient(180deg, var(--lime-050), var(--panel));
    border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem;
}
.ai-hint-icon { color: var(--lime-600); line-height: 0; }
.ai-hint-title { font-weight: 700; color: var(--ink); margin: 0 0 .2rem; }
.ai-examples { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }

.ai-interpret { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.ai-badge {
    display: inline-flex; align-items: center; gap: .25rem;
    background: var(--ink); color: #fff; font-weight: 800; font-size: .72rem;
    padding: .15rem .5rem; border-radius: 999px;
}
.ai-badge .ico { color: var(--lime); }
.ai-understood { color: var(--muted); font-size: .9rem; }
/* Chip = één begrepen eis; als .ex ook een klikbare voorbeeldvraag. */
.ai-chip {
    display: inline-block; background: var(--lime-050); color: var(--ink);
    border: 1px solid var(--lime-600); border-radius: 999px;
    padding: .18rem .6rem; font-size: .82rem; font-weight: 600;
}
.ai-chip.ex { cursor: pointer; font-weight: 500; background: #fff; }
.ai-chip.ex:hover { background: var(--lime-050); }

.ai-reach { color: var(--lime-600); font-weight: 700; font-size: .78rem; }

.ai-storage {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.1rem 1.3rem; max-width: 640px;
}
.ai-storage-head { display: flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--ink); margin-bottom: .8rem; }
.ai-storage-head .ico { color: var(--lime-600); }
.ai-storage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1.2rem; margin-bottom: .9rem; }
.ai-storage-grid > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--line); padding-bottom: .3rem; }
.ai-storage-grid .k { color: var(--muted); }
.ai-storage-grid .v { font-weight: 700; color: var(--ink); text-align: right; }
@media (max-width: 560px) { .ai-storage-grid { grid-template-columns: 1fr; } }

/* ---- Card grid (catalogus) ---- */
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.card {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1rem; text-align: center; cursor: pointer; font: inherit; color: inherit;
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    transition: box-shadow .12s, transform .12s, border-color .12s;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--lime); }
.card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Eén-/tweeregelige beschrijving met gereserveerde hoogte → geen layout-shift. */
.card-desc { color: var(--muted); font-size: .82rem; font-weight: 400; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.1em; }
.card .folder-icon { color: var(--lime-600); line-height: 0; }
.card .card-img { height: 110px; display: flex; align-items: center; justify-content: center; background: #f2f3f5; border-radius: 6px; }
.card .card-img img { max-height: 110px; max-width: 100%; object-fit: contain; }
.card .card-name { font-weight: 600; }
.card.product .card-name { color: var(--blue); }
.card.mini { padding: .6rem; }
.card.mini img { max-height: 70px; }

/* ---- Status badge ---- */
.badge { display: inline-block; font-size: .72rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; }
.badge:empty { padding: .35rem; border-radius: 50%; min-width: .35rem; }
.badge.ok { background: #e6f4ea; color: var(--ok); }
.badge.warn { background: #fcf3da; color: var(--warn); }
.badge.bad { background: #fbe9e7; color: var(--bad); }

/* ---- Product view (sidebar + detail) ---- */
.product-view { display: grid; grid-template-columns: 260px 1fr; gap: 1.2rem; align-items: start; }
.sidebar {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; max-height: 78vh; overflow-y: auto;
}
.sb-item {
    display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
    padding: .5rem .7rem; border: none; border-bottom: 1px solid var(--line);
    background: #fff; cursor: pointer; font: inherit; color: inherit;
}
.sb-item:hover { background: var(--bg); }
.sb-item.active { background: var(--lime-050); box-shadow: inset 3px 0 0 var(--lime); }
.sb-thumb { width: 44px; height: 36px; flex: 0 0 44px; display: flex; align-items: center; justify-content: center; }
.sb-thumb img { max-width: 44px; max-height: 36px; object-fit: contain; }
.sb-name { flex: 1; font-weight: 600; font-size: .9rem; }

.detail-pane { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem; min-height: 60vh; }
.pd-empty { color: var(--muted); padding: 2rem; }
.pd-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: .8rem; margin-bottom: .2rem; }
.pd-header h2 { margin: 0; }
.pd-sub { color: var(--muted); margin: .3rem 0 0; }
.pd-links a { font-weight: 600; text-decoration: none; white-space: nowrap; }

/* ---- Tabs ---- */
.tabs { display: flex; gap: .2rem; border-bottom: 2px solid var(--line); margin: .8rem 0 1rem; }
.tab { border: none; background: none; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; padding: .6rem .9rem; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.subtabs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1rem; }
.subtab { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: .35rem .8rem; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; }
.subtab.active { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ---- Web tab ---- */
.web { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.web .hero { max-width: 320px; max-height: 320px; object-fit: contain; }
.web .webinfo { flex: 1; min-width: 240px; }
/* Limoen knop met ZWARTE tekst (wit op limoen zou onleesbaar zijn). */
.btn { display: inline-block; background: var(--lime); color: var(--on-lime); font-weight: 700; padding: .55rem 1rem; border-radius: 8px; text-decoration: none; border: 1px solid var(--lime-600); }
.btn:hover { background: var(--lime-600); filter: none; }

/* ---- Related grid reuses .cardgrid/.card.mini ---- */

/* ---- Mounting routes ---- */
.routes { display: flex; flex-direction: column; gap: .6rem; }
.route { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem; }
.route-num { font-weight: 800; color: var(--blue); min-width: 1.6rem; }
.route .plus { font-weight: 800; color: var(--muted); font-size: 1.2rem; }
.part { margin: 0; text-align: center; width: 96px; }
.part img { max-width: 90px; max-height: 70px; object-fit: contain; }
.part figcaption { font-size: .8rem; font-weight: 600; margin-top: .2rem; }

/* ---- Projection ---- */
.proj { margin-bottom: 1.4rem; }
.proj h4 { color: var(--muted); font-weight: 600; margin-bottom: .5rem; }
.proj-aov, .proj-dori { border-collapse: collapse; margin: .3rem 0; }
.proj-aov td, .proj-dori td { padding: .2rem .6rem; }
.proj .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.proj .dots { color: var(--muted); }
/* Beide sectiekoppen vet. EN 62676-4:2025 op hetzelfde lettertype als de algemene
   projectie-info erboven; alleen de donkerdere kleur onderscheidt het. EN 62676-4:2014 kleiner. */
.proj-std { color: var(--muted); margin: .6rem 0 .2rem; font-weight: 700; }
.proj-std-2025 { color: var(--text); margin-top: .3rem; }
.proj-dori-2014 td { font-size: .86rem; }
/* Scheidingslijn tussen meerdere camera/lens-combinaties (bv. box camera). */
.proj + .proj { border-top: 1px solid var(--line); padding-top: 1.4rem; }

/* ---- Properties table ---- */
.props { border-collapse: collapse; width: 100%; }
.props th { text-align: left; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--line); padding: .4rem .8rem .4rem 0; }
.props td { border-bottom: 1px solid var(--line); padding: .35rem .8rem .35rem 0; vertical-align: top; overflow-wrap: anywhere; }
/* Categorie-label: zwart (limoen-tekst op wit heeft te weinig contrast). */
.props .cat { color: var(--ink); font-weight: 700; white-space: nowrap; }
/* Filterbare, scanbare Properties-tabel: eigen scroll-container + sticky header,
   categorie-groepskoppen, zebra-rijen. */
.props-tools { margin: 0 0 .6rem; }
.props-search { width: 320px; max-width: 100%; }
.props-wrap { max-height: 62vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.props-wrap .props { width: 100%; }
.props-wrap thead th { position: sticky; top: 0; z-index: 2; background: var(--panel); box-shadow: inset 0 -2px 0 var(--line); }
.props-wrap .props th, .props-wrap .props td { padding: .4rem .8rem; }
.props tbody tr:nth-child(even) td { background: #f2f3f5; }
.props-group th {
    position: sticky; top: 1.9rem; z-index: 1; text-align: left;
    background: var(--lime-050); color: var(--ink); font-weight: 700;
    text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--line);
    box-shadow: inset 3px 0 0 var(--lime);
}
/* Kern-specs in de Web-tab. */
.props-mini { margin-top: .8rem; }
.props-mini td { border-bottom: 1px solid var(--line); padding: .3rem .8rem .3rem 0; }

/* ---- Storage calculator (eenvoudig) ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: .6rem; max-width: 720px; }
.grid label { display: flex; flex-direction: column; font-weight: 600; gap: .2rem; }
.grid input, .grid select { padding: .45rem; border: 1px solid var(--line); border-radius: 6px; }

@media (max-width: 760px) {
    .product-view { grid-template-columns: 1fr; }
    .sidebar { max-height: none; display: flex; overflow-x: auto; }
}

/* ---- Responsive header + toolbar (mobiel/tablet) ----
   Onder 768px verhuist nav + taalkeuze naar het hamburgermenu, staat de zoekbalk
   over de volle breedte en verdwijnt alle horizontale overflow (360–414px). */
@media (max-width: 768px) {
    .appbar { gap: .6rem; padding: 0 .8rem; }
    .brand-title { display: none; }
    .topnav, .admin-link, .langpicker { display: none; }
    .app-menu { min-width: 250px; max-width: 86vw; max-height: 78vh; overflow-y: auto; }

    .toolbar { gap: .6rem; }
    .tools { width: 100%; flex-wrap: wrap; align-items: stretch; gap: .6rem; }
    .search { width: 100%; }
}

/* klikbare montage-part */
.part.clickable { cursor: pointer; border: 1px solid transparent; border-radius: 8px; padding: .3rem; background: none; transition: border-color .12s, background .12s; }
.part.clickable:hover { border-color: var(--blue); background: #fff; }

/* filter-schakelaar */
.tools { display: flex; align-items: center; gap: 1rem; }
.toggle { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
.toggle input { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; }

/* twee gestapelde filter-checkboxes naast de zoekbalk */
.tools { align-items: flex-start; }
.toggles { display: flex; flex-direction: column; gap: .25rem; }

/* taalkiezer */
.langpicker { margin-left: auto; position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: .4rem; background: none; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; padding: .4rem .7rem; font: inherit; font-weight: 600; color: var(--on-dark); cursor: pointer; }
.lang-btn:hover { background: rgba(255,255,255,.12); }
.lang-btn .globe { font-size: 1.1rem; }
.lang-btn .caret { color: var(--on-dark-dim); }
.lang-menu { position: absolute; right: 0; top: 115%; list-style: none; margin: 0; padding: .3rem; min-width: 150px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); z-index: 30; }
.lang-menu li button { width: 100%; text-align: left; border: none; background: none; padding: .45rem .6rem; border-radius: 6px; font: inherit; cursor: pointer; color: var(--text); }
.lang-menu li button:hover { background: var(--bg); }
.lang-menu li button.active { background: var(--blue); color: #fff; }

/* Beheer (/beheer) */
.admin-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin-left: .4rem; border-radius: 8px;
    text-decoration: none; font-size: 1.1rem; color: var(--on-dark-dim);
    border: 1px solid transparent;
}
.admin-link:hover { background: rgba(255,255,255,.12); color: #fff; border-color: transparent; }
.admin-card {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 1.2rem 1.4rem; max-width: 760px;
}
.admin-card .kv { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.admin-card .kv td { padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-card .kv tr td:first-child { color: var(--muted); white-space: nowrap; width: 1%; padding-right: 1.4rem; }
.admin-card code { background: var(--bg); padding: .15rem .4rem; border-radius: 6px; font-size: .9em; word-break: break-all; }
.admin-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
button.btn { border: none; cursor: pointer; font: inherit; font-weight: 700; }
.btn[disabled] { opacity: .6; cursor: default; filter: none; }
.ok-msg { color: var(--ok); font-weight: 600; }
.err-msg { color: var(--bad); font-weight: 600; }

/* Hamburgermenu (linksboven) + versie-modal */
.menuwrap { position: relative; display: flex; align-items: center; }
.hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 8px;
    background: none; border: 1px solid transparent; cursor: pointer;
    font-size: 1.25rem; line-height: 1; color: var(--on-dark);
}
.hamburger:hover { background: rgba(255,255,255,.12); border-color: transparent; }
.app-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
    margin: 0; padding: .35rem; list-style: none; min-width: 210px;
    background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
}
.app-menu li { list-style: none; }
.app-menu button, .app-menu a {
    display: block; width: 100%; text-align: left; background: none; border: none;
    padding: .55rem .7rem; border-radius: 7px; font: inherit; color: var(--text); cursor: pointer;
    text-decoration: none;
}
.app-menu button:hover, .app-menu a:hover { background: var(--bg); }
/* Nav-items in het (mobiele) menu krijgen dezelfde look; actief = limoen-indicator links. */
.app-menu .menu-nav { display: block; width: 100%; padding: .55rem .7rem; border-radius: 7px; font: inherit; font-weight: 600; color: var(--text); text-decoration: none; }
.app-menu .menu-nav:hover { background: var(--bg); }
.app-menu .menu-nav.active { box-shadow: inset 3px 0 0 var(--lime); background: var(--lime-050); }
.app-menu .menu-label { padding: .5rem .7rem .15rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.app-menu .menu-divider { height: 1px; margin: .35rem .3rem; padding: 0; background: var(--line); }
.app-menu button.active { background: var(--lime-050); box-shadow: inset 3px 0 0 var(--lime); }
/* Op desktop staan nav + taalkeuze inline in de balk; verberg de mobiele kopieën. */
@media (min-width: 769px) { .app-menu .menu-mobile-only { display: none; } }

.modal-backdrop {
    position: fixed; inset: 0; z-index: 50; padding: 1rem;
    background: rgba(28, 29, 31, .45); display: flex; align-items: center; justify-content: center;
}
.modal {
    background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(28, 29, 31, .25);
    padding: 1.4rem 1.6rem; min-width: 320px; max-width: 90vw;
}
.modal:focus { outline: none; } /* dialoog krijgt focus voor Esc/schermlezer, zonder zichtbare ring */
.modal h3 { margin: 0 0 1rem; }
.modal .kv { width: 100%; border-collapse: collapse; margin-bottom: 1.2rem; }
.modal .kv td { padding: .45rem .6rem; border-bottom: 1px solid var(--line); }
.modal .kv tr td:first-child { color: var(--muted); padding-right: 1.6rem; white-space: nowrap; }
.modal-actions { display: flex; justify-content: flex-end; }

/* Opslagcalculator (/storage) */
.sc-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 980px) { .sc-layout { grid-template-columns: 1fr; } }
.sc-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.sc-card h2 { font-size: 1.05rem; margin: 0 0 .7rem; }
.sc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.sc-card-head h2 { margin: 0; }
.sc-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.sc-table th, .sc-table td { padding: .4rem .5rem; border-bottom: 1px solid var(--line); text-align: left; }
.sc-table th { color: var(--muted); font-weight: 600; }
.sc-table .num, td.num, th.num { text-align: right; }
.sc-rowbtns { white-space: nowrap; text-align: right; }
.iconbtn { background: none; border: 1px solid transparent; border-radius: 6px; cursor: pointer; font-size: .95rem; padding: .2rem .4rem; color: var(--muted); }
.iconbtn:hover { background: var(--bg); color: var(--blue); border-color: var(--line); }
.sc-params { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1rem; }
.sc-params label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; color: var(--muted); }
.sc-params input, .sc-params select { padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; color: var(--text); background: #fff; }
.sc-params .sc-check { flex-direction: row; align-items: center; gap: .5rem; grid-column: 1 / -1; }
.sc-totals .kv { width: 100%; }
.sc-totals .kv td { padding: .35rem .4rem; border-bottom: 1px solid var(--line); }
.sc-plan { border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem; margin-bottom: .9rem; }
.sc-plan.recommended { border-color: var(--lime); box-shadow: 0 0 0 2px rgba(204,204,0,.22); }
.sc-plan-head { font-weight: 700; color: var(--blue); margin-bottom: .5rem; }
.sc-plan-select { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.sc-plan-select input[type="radio"] { cursor: pointer; margin: 0; }
.sc-plan-line { font-size: 1.02rem; margin: .15rem 0; }
.sc-plan-table { width: 100%; margin-top: .6rem; }
.sc-plan-table td { padding: .25rem .5rem; border-bottom: 1px solid var(--line); }
.sc-plan-table td.num { text-align: right; font-weight: 600; white-space: nowrap; }
.sc-editor { min-width: 420px; max-width: 560px; }
.sc-editgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1rem; }
.sc-editgrid label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; color: var(--muted); }
.sc-editgrid input, .sc-editgrid select { padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.sc-editgrid .sc-check { flex-direction: row; align-items: center; gap: .5rem; }
/* Eigen bron-combobox met stijlbare suggestie-popup. Een native <datalist> laat de
   breedte van zijn popup niet bepalen, waardoor lange modelnamen (bijv. BL2002v2LPR)
   werden afgekapt; deze popup groeit mee met de langste naam (width: max-content). */
.sc-combo { position: relative; }
.sc-combo-input { width: 100%; box-sizing: border-box; padding-right: 1.9rem; }
/* Wisknop (×) rechts in het bronveld. */
.sc-combo-clear {
    position: absolute; top: 50%; right: .4rem; transform: translateY(-50%);
    width: 1.3rem; height: 1.3rem; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: none; background: none; cursor: pointer;
    color: var(--muted); font-size: 1.15rem; line-height: 1; border-radius: 50%;
}
.sc-combo-clear:hover { background: rgba(0, 0, 0, .08); color: var(--text); }
.sc-combo-list {
    position: absolute; left: 0; top: calc(100% + 3px); z-index: 60;
    margin: 0; padding: .25rem; list-style: none;
    min-width: 100%; width: max-content; max-width: min(360px, 80vw);
    max-height: 260px; overflow-y: auto;
    background: var(--panel); color: var(--text);
    border: 1px solid var(--line); border-radius: 8px;
    box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, .18));
}
.sc-combo-item { padding: .35rem .55rem; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.sc-combo-item:hover { background: rgba(0, 0, 0, .06); }
.sc-combo-item.is-selected { background: var(--accent); color: var(--text); }
/* Motion-checkbox + %-veld over de volle breedte, verticaal gestapeld, zodat het
   %-invoerveld recht onder de checkbox verschijnt i.p.v. in de volgende grid-cel. */
.sc-editgrid .sc-motion { grid-column: 1 / -1; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.sc-editgrid .sc-motion label:not(.sc-check) { width: calc(50% - .5rem); }
.sc-editbitrate { margin: 1rem 0 .4rem; color: var(--muted); }
.btn.ghost { background: none; color: var(--text); border: 1px solid var(--line); }

/* Storage calculator — groups/streams UX (3-koloms) */
.sc-layout-3 { display: grid; grid-template-columns: 3fr 5fr 4fr; gap: 1.2rem; align-items: start; }
@media (max-width: 1200px) { .sc-layout-3 { grid-template-columns: 1fr; } }
.sc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1rem; }
.sc-fields.one { grid-template-columns: 1fr; }
.sc-fields label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; color: var(--muted); }
.sc-fields input, .sc-fields select, .sc-fields textarea { padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; color: var(--text); background: #fff; }
.sc-fields textarea { resize: vertical; min-height: 3.2rem; }
.sc-fields .full { grid-column: 1 / -1; }
/* Motion-checkbox + %-veld over de volle breedte, verticaal gestapeld: het %-veld
   verschijnt recht onder de checkbox i.p.v. in de volgende grid-cel. */
.sc-fields .sc-motion { grid-column: 1 / -1; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.sc-fields .sc-motion .sc-check { flex-direction: row; align-items: center; gap: .5rem; }
.sc-fields .sc-motion label:not(.sc-check) { width: min(50%, 12rem); }
.sc-req { color: #d33; }
.sc-notice { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); line-height: 1.5; }
.sc-notice b { color: var(--text); }
.sc-alert { display: flex; align-items: center; gap: .5rem; border: 1px solid #f0b4b4; background: #fff6f6; color: #c0143c; border-radius: 8px; padding: .6rem .8rem; margin-bottom: .9rem; font-size: .9rem; }
.sc-alert .ico { flex: none; }

.sc-group { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 1rem; background: #fff; }
.sc-group-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .8rem; background: rgba(204,204,0,.30); cursor: pointer; }
.sc-group-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text); }
.sc-group-titlewrap { display: flex; align-items: center; gap: .4rem; }
.sc-group-actions { display: flex; align-items: center; gap: .2rem; }
.sc-name-input { font-size: 1.02rem; font-weight: 700; padding: .2rem .4rem; border: 1px solid var(--line); border-radius: 6px; }
.sc-group-body { padding: .9rem .8rem; display: flex; flex-direction: column; gap: .9rem; }

.sc-stream { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.sc-stream-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .45rem .7rem; background: rgba(204,204,0,.10); cursor: pointer; font-weight: 600; }
.sc-stream-actions { display: flex; align-items: center; gap: .2rem; }
.sc-stream-body { padding: .8rem .7rem; display: flex; flex-direction: column; gap: .8rem; }
.sc-stream-body .sub { padding-top: .7rem; border-top: 1px solid var(--line); }
.sc-fields.sub { padding-top: .8rem; border-top: 1px solid var(--line); }
.sc-record { display: flex; flex-direction: column; gap: .2rem; }
.sc-record .sc-check { flex-direction: row; align-items: center; gap: .5rem; }
.sc-record .hint { margin: 0; }
.sc-sep-below { border-bottom: 1px solid var(--line); padding-bottom: .8rem; }
/* Calculated/Manual bitrate-toggle: de actieve knop licht lime op. */
.sc-toggle { display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.sc-toggle-btn { padding: .45rem .9rem; border: none; background: #fff; color: var(--text); cursor: pointer; font: inherit; transition: background .12s; }
.sc-toggle-btn + .sc-toggle-btn { border-left: 1px solid var(--line); }
.sc-toggle-btn:hover { background: rgba(204,204,0,.14); }
.sc-toggle-btn.is-active { background: var(--lime); font-weight: 600; }
.sc-toggle-btn.is-active:hover { background: var(--lime); }
.sc-addstream { width: 100%; }
.sc-bitrate { font-size: .85rem; color: var(--muted); }
.sc-bitrate b { color: var(--text); }
.sc-vca-placeholder { font-size: .8rem; color: var(--muted); font-style: italic; padding-top: .6rem; border-top: 1px dashed var(--line); }

.sc-sum-total td { background: rgba(204,204,0,.16); font-weight: 700; }
.sc-sum-group td { background: var(--bg); font-weight: 600; }
.sc-sum-stream td:first-child { padding-left: 1.1rem; color: var(--muted); }

/* Video Server Capacity — puntenbudget-balk per plan */
.sc-cap { margin-top: .7rem; }
.sc-cap-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .3rem; }
.sc-cap-title { font-weight: 700; color: var(--text); }
.sc-cap-count { font-size: .85rem; color: var(--muted); }
.sc-cap-bar { height: 8px; border-radius: 6px; background: rgba(0,0,0,.08); overflow: hidden; }
.sc-cap-fill { height: 100%; background: var(--lime); border-radius: 6px; transition: width .2s; }
.sc-cap-fill.over { background: #d33; }
.sc-cap-error { color: #d33; font-size: .82rem; margin: .35rem 0 0; }

/* 3D-projectie-overlay */
.btn-3d { margin-left: .6rem; font-size: .8rem; padding: .15rem .55rem; vertical-align: middle; }
.proj3d-modal { width: min(940px, 94vw); max-width: 94vw; }
.proj3d-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.proj3d-head h3 { margin: 0; }
.proj3d-actions { display: flex; align-items: center; gap: .5rem; }
.proj3d-toggle { display: flex; gap: .25rem; }
.proj3d-tabs { margin: 0 0 .8rem; }
.proj3d-pane { display: none; }
.proj3d-pane.active { display: block; }

/* Preset-tab: instelbaar zij- + bovenaanzicht (SVG). */
.preset-ctl { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: center; margin: 0 0 .5rem; }
.preset-ctl label { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted); white-space: nowrap; }
.preset-ctl input[type=range] { width: 150px; }
.preset-ctl b { color: var(--text); font-weight: 600; }
.preset-num { width: 4.6rem; padding: .2rem .35rem; border: 1px solid var(--line); border-radius: 6px; font: inherit; color: var(--text); }
.preset-out { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: 0 0 .6rem; font-size: .9rem; color: var(--muted); }
.preset-out b { color: var(--text); }
.preset-svg { width: 100%; height: auto; display: block; background: #fff; border: 1px solid var(--line); border-radius: 10px; margin-bottom: .5rem; }
.pre-ground { stroke: var(--ink); stroke-width: 1.5; }
.pre-ref { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 5 4; }
.pre-axis { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 6 3 2 3; }
.pre-ray { stroke: var(--ink); stroke-width: 2; fill: none; }
.pre-axisline { stroke: var(--muted); stroke-width: 1; }
.pre-tick { stroke: var(--muted); stroke-width: 1; }
.pre-tlab { font-size: 10.5px; fill: var(--muted); }
.pre-arc { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.pre-ang { font-size: 15px; font-style: italic; font-weight: 600; fill: var(--ink); }
.pre-person { fill: var(--ink); }
.pre-dim { stroke: var(--muted); stroke-width: 1; }
.pre-lab { font-size: 12px; fill: var(--muted); }
.pre-dimlab { font-size: 14px; font-weight: 600; fill: var(--ink); }
.pre-fov { fill: #f6f6d6; fill: color-mix(in srgb, var(--accent) 22%, #fff); stroke: var(--ink); stroke-width: 1.5; }
.pre-coneguide { stroke: var(--ink); stroke-width: 1; }
.pre-inset { fill: none; stroke: var(--ink); stroke-width: 2; }
.preset-print-legend { display: none; }   /* alleen tonen bij printen (printElement) */
/* Inzet-achtergrond = dezelfde vulling als de FoV-achtergrond van de onderste grafiek. */
.pre-inset-bg { fill: #f6f6d6; fill: color-mix(in srgb, var(--accent) 22%, #fff); }
.pre-fovlab { font-size: 13px; fill: var(--muted); letter-spacing: .02em; }
/* HFoV / W: sterk aangezet en leesbaar boven de kegelvulling (witte omranding). */
.pre-outval { font-size: 17px; font-weight: 800; fill: var(--ink); stroke: #fff; stroke-width: 3px; paint-order: stroke; stroke-linejoin: round; }
.pre-doll { fill: var(--accent); stroke: var(--ink); stroke-width: 1; }
.pre-scenew { stroke: var(--ink); stroke-width: 2; }
.proj3d-canvas { width: 100%; height: 60vh; min-height: 320px; display: block; border-radius: 10px; background: #fff; border: 1px solid var(--line); cursor: grab; touch-action: none; }
.proj3d-canvas:active { cursor: grabbing; }
.proj3d-zoom { display: flex; align-items: center; gap: .75rem; margin: 0 0 .6rem; flex-wrap: wrap; }
.proj3d-zoom input[type=range] { flex: 1 1 160px; min-width: 140px; }
.proj3d-zoom-end { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.proj3d-focal-now { font-size: .9rem; white-space: nowrap; }
.proj3d-focal-now b { color: var(--text); }
.proj3d-object { font-size: .85rem; color: var(--muted); display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.proj3d-object select { padding: .2rem .4rem; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.proj3d-vd { font-size: .9rem; white-space: nowrap; }
.proj3d-vd-input { width: 5rem; padding: .2rem .4rem; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.proj3d-hint { color: var(--muted); font-size: .85rem; margin: .4rem 0 0; }
.proj3d-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .5rem; font-size: .85rem; color: var(--muted); }
.proj3d-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: .35rem; vertical-align: middle; }
.btn.ghost:hover { background: var(--bg); filter: none; }
.proj3d-foot { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
.proj3d-print { display: inline-flex; align-items: center; gap: .4rem; }
.proj3d-print .print-ico { display: block; }