:root{--bg:#f2f6f4!important;--vlak:#ffffff!important;--vlak2:#e8f0eb!important;--band:#dce9e1!important;--lijn:#c5d3cb!important;--ink:#182b23!important;--dim:#52665b!important;--accent:#146449!important;--accent-v:#1c654e!important;--accent-d:#154936!important;--donker:#18392d!important;--header:#193b2e!important;--headerink:#eef7f1!important;--headerdim:#c2d8ca!important;--groen:#226b4f!important;--rood:#b23136!important;--waarschuwing:#895616!important;--goedvlak:#e4f3e9!important;--foutvlak:#fcebec!important;--waarschuwingvlak:#fff0d6!important;--blauw:#28648c!important;--veld:#ffffff!important;--onaccent:#ffffff!important;color-scheme:light;--acc:var(--accent);--zacht:var(--vlak2);--kleur:var(--accent);}
html[data-thema="licht"],html[data-thema="licht"] body{--bg:#f2f6f4!important;--vlak:#ffffff!important;--vlak2:#e8f0eb!important;--band:#dce9e1!important;--lijn:#c5d3cb!important;--ink:#182b23!important;--dim:#52665b!important;--accent:#146449!important;--accent-v:#1c654e!important;--accent-d:#154936!important;--donker:#18392d!important;--header:#193b2e!important;--headerink:#eef7f1!important;--headerdim:#c2d8ca!important;--groen:#226b4f!important;--rood:#b23136!important;--waarschuwing:#895616!important;--goedvlak:#e4f3e9!important;--foutvlak:#fcebec!important;--waarschuwingvlak:#fff0d6!important;--blauw:#28648c!important;--veld:#ffffff!important;--onaccent:#ffffff!important;color-scheme:light}
html[data-thema="donker"],html[data-thema="donker"] body{--bg:#101815!important;--vlak:#151f1a!important;--vlak2:#1a2921!important;--band:#203c2f!important;--lijn:#3c5145!important;--ink:#e9f2ec!important;--dim:#acbfb2!important;--accent:#63caa1!important;--accent-v:#235f48!important;--accent-d:#184733!important;--donker:#0d1510!important;--header:#19392b!important;--headerink:#eef7f1!important;--headerdim:#c2d8ca!important;--groen:#7ed7a7!important;--rood:#ff9b9b!important;--waarschuwing:#ecc17b!important;--goedvlak:#193c29!important;--foutvlak:#402529!important;--waarschuwingvlak:#3d3320!important;--blauw:#9bc5e9!important;--veld:#111d16!important;--onaccent:#ffffff!important;color-scheme:dark}
:root{--acc:var(--accent);--zacht:var(--vlak2);--grad:var(--accent-v);--shop-ink:color-mix(in srgb,var(--acc) 75%,#000)}
html[data-thema="donker"]{--zacht:color-mix(in srgb,var(--acc) 22%,var(--vlak))!important;--shop-ink:color-mix(in srgb,var(--acc) 65%,#fff)}
html[data-thema] body,html[data-thema] #app,html[data-thema] main{background:var(--bg);color:var(--ink)}
html[data-thema] #top,html[data-thema] body>header,html[data-thema] #login .kop{background:var(--header);color:var(--headerink)}
html[data-thema] #top .een,html[data-thema] header .een,html[data-thema] #toprechts #wie .rol{color:var(--headerdim)}
html[data-thema] #top .twee,html[data-thema] header .twee,html[data-thema] #toprechts #wie .nm,html[data-thema] #taalknop span{color:var(--headerink)!important}
html[data-thema] #toprechts button,html[data-thema] .portaal-thema-knop{background:var(--header);color:var(--headerink);border:1px solid #749682;border-radius:7px;padding:8px 11px;cursor:pointer;font:inherit;white-space:nowrap}
html[data-thema] #tabs>.tab>button{background:#254737;color:#eef7f1;border-color:#50705e}
html[data-thema] #tabs>.tab.aan>button,html[data-thema] #tabs>.tab>button:hover,html[data-thema] #tabs>.tab.open>button{background:#d4e6db;color:#193b2e;border-color:#a8c9b6}
html[data-thema] #tabs .val{background:var(--vlak);border-color:var(--lijn)}
html[data-thema] #tabs .val button{color:var(--ink)}
html[data-thema] .balk{background:var(--band);border-color:var(--lijn)}
html[data-thema] #menu button.aan{background:var(--band);color:var(--accent)}
html[data-thema] #snel button,html[data-thema] #shopkies button{background:var(--vlak);color:var(--ink);border-color:var(--lijn)}
html[data-thema] #snel button.aan,html[data-thema] #shopkies button.aan{background:var(--band);color:var(--accent);border-color:var(--accent)}
html[data-thema] #snel svg{color:var(--accent)}
html[data-thema] #zij{background:var(--bg)}
html[data-thema] input,html[data-thema] select,html[data-thema] textarea{color:var(--ink);background-color:var(--veld);border-color:var(--lijn);accent-color:var(--accent-v)}
html[data-thema] .knop,html[data-thema] #login button[type=submit]{background:var(--accent-v)!important;color:var(--onaccent)!important;box-shadow:none}
html[data-thema] .knop.grijs{background:var(--vlak2)!important;color:var(--ink)!important;border:1px solid var(--lijn)!important}
html[data-thema] .knop.gevaar{background:var(--foutvlak)!important;color:var(--rood)!important;border-color:var(--rood)!important}
html[data-thema] .melding.err,html[data-thema] .vlag.rood{background:var(--foutvlak);color:var(--rood)}
html[data-thema] .melding.ok,html[data-thema] .vlag.groen{background:var(--goedvlak);color:var(--groen)}
html[data-thema] .melding.info{background:var(--vlak2);color:var(--ink);border-color:var(--lijn)}
html[data-thema] :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
html[data-thema] .batterij-paardscherm{--lijn:var(--portaal-lijn);--ink:var(--portaal-ink);--vlak:var(--portaal-vlak);--dim:var(--portaal-dim);--accent:var(--portaal-accent)}
html[data-thema] body{--portaal-lijn:var(--lijn);--portaal-ink:var(--ink);--portaal-vlak:var(--vlak);--portaal-dim:var(--dim);--portaal-accent:var(--accent)}
html[data-thema] .soc{--sA:var(--vlak)!important;--sB:var(--bg)!important;--sT:var(--ink)!important;--sD:var(--dim)!important;--sR:var(--lijn)!important;--sV:var(--veld)!important;--sVr:var(--lijn)!important;--sAcc:var(--accent)!important;--sKnop:var(--accent-v)!important;--sGoed:var(--groen)!important;--sFout:var(--rood)!important}
html[data-thema] .sw{--sw-rand:var(--lijn)!important;--sw-zacht:var(--vlak2)!important;--sw-tekst:var(--ink)!important;--sw-dim:var(--dim)!important}
html[data-thema] .sl{--sl-ink:var(--ink)!important;--sl-muted:var(--dim)!important;--sl-border:var(--lijn)!important;--sl-wash:var(--vlak2)!important;--sl-accent:var(--accent)!important}
.portaal-merk-logo{width:44px;height:44px;object-fit:contain;border-radius:9px;flex-shrink:0}
#top>.portaal-merk-logo{align-self:center;margin:8px 0 8px 14px}
#login .kop{display:grid;grid-template-columns:60px 1fr;column-gap:14px;align-items:center}
#login .kop .portaal-merk-logo{width:60px;height:60px;grid-row:1/3}
#login .kop p,#login .kop h1{grid-column:2}
#login>.portaal-thema-knop{position:absolute;right:16px;top:16px}
@media(max-width:760px){#top>.portaal-merk-logo{width:34px;height:34px;margin-left:8px}#top .merk{padding-left:8px;padding-right:8px}#toprechts{gap:5px;padding-left:4px}#toprechts .portaal-thema-knop{padding:6px;font-size:12px}}

html[data-thema] #chat-knop{background:var(--header)!important;color:var(--headerink)!important}
html[data-thema] #chat-knop svg{color:var(--headerink)!important;stroke:var(--headerink)!important}
html[data-thema] .zn-knop{background:var(--vlak2);color:var(--ink);border:1px solid var(--lijn);border-radius:6px}
@media(max-width:600px){#ms-raster{grid-template-columns:minmax(0,1fr)!important}#top{flex-wrap:wrap}#top .merk{flex:1}#toprechts{flex:1 1 100%;justify-content:flex-end;padding:6px 0 8px}#toprechts button{font-size:12px;padding:6px 8px}}

/* Shop identity follows the existing zetShopKleur() selection. */
html[data-thema] .balk{background:var(--zacht);border-bottom:3px solid var(--acc)}
html[data-thema] #shopkies button.aan,html[data-thema] #snel button.aan,html[data-thema] #menu button.aan{background:var(--zacht);color:var(--shop-ink);border-color:var(--acc)}
html[data-thema] #menu button.aan{box-shadow:inset 3px 0 0 var(--acc)}
html[data-thema] #tabs>.tab.aan>button,html[data-thema] #tabs>.tab.open>button{background:var(--zacht);color:var(--shop-ink);border-color:var(--acc);box-shadow:inset 0 -3px 0 var(--acc)}
html[data-thema] #snel button.aan svg{color:var(--shop-ink)}
html[data-thema] #menu button.aan .letter{background:var(--acc);color:#fff}
html[data-thema] #app .knop:not(.grijs):not(.gevaar){background:color-mix(in srgb,var(--acc) 72%,#000)!important;color:#fff!important}
html[data-thema] body>header .shop{color:var(--headerink);border-bottom:3px solid var(--acc);padding-bottom:5px}