/* Jouw AI portal — huisstijl 24x7 ICT */
/* Byker zelf meeleveren: anders zien alleen gebruikers die het lettertype zelf hebben het, de rest krijgt Asap */
@font-face { font-family: Byker; src: url(/static/fonts/byker-regular.woff2) format("woff2"); font-weight: 100 599; font-style: normal; font-display: swap; }
@font-face { font-family: Byker; src: url(/static/fonts/byker-bold.woff2) format("woff2"); font-weight: 600 799; font-style: normal; font-display: swap; }
@font-face { font-family: Byker; src: url(/static/fonts/byker-black.woff2) format("woff2"); font-weight: 800 900; font-style: normal; font-display: swap; }
:root {
  --green: #4fb3ff; --green-dark: #1f6fb0; --green-soft: #eaf4ff; --ink: #0d1828; --ink-2: #26364f;
  --bg: #ffffff; --card: #FFFFFF; --line: #dde4ee; --muted: #5d6a7e; --code: #eef2f8;
  --ok: #4E7A1E; --warn: #9A6400; --warn-soft: #FFF4DE; --bad: #B3261E; --bad-soft: #FCEBE9;
  --radius: 16px; --shadow: 0 1px 2px rgba(13,24,40,.04), 0 4px 16px rgba(13,24,40,.05);
  font-family: "Asap", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 15.5px; line-height: 1.55; }
a { color: var(--ink); text-decoration-color: var(--green); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--green-dark); }
code { background: var(--code); padding: .05em .35em; border-radius: 6px; font-size: .88em; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; font-weight: 700; }
h1 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; margin-top: 1.25rem; }
p { margin: 0 0 .75rem; }
[hidden] { display: none !important; }

/* header */
.top { background: var(--ink); color: #fff; }
.top-inner { max-width: 1400px; margin: 0 auto; padding: .7rem 1.25rem; display: flex; align-items: center;
             justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .75rem; color: #fff; text-decoration: none; }
.brand img { height: 34px; width: auto; display: block; }
.brand .word { font-weight: 700; font-size: 1.1rem; padding-left: .75rem; border-left: 1px solid #2e4261; }
.brand .word span { color: var(--green); }
nav.main { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
nav.main a, nav.main button { color: #dce4f0; text-decoration: none; padding: .45rem .8rem; border-radius: 999px;
  background: none; border: 0; font: inherit; cursor: pointer; }
nav.main a:hover, nav.main button:hover { background: #1b2d47; color: #fff; }
nav.main a.on { background: #1b2d47; color: #fff; }
nav.main form { margin: 0; }
.count { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem;
  margin-left: .3rem; border-radius: 999px; background: var(--green); color: var(--ink); font-size: .75rem; font-weight: 700; }

.trial { background: var(--green-soft); border-bottom: 1px solid #cfe6fb; }
.trial-inner { max-width: 1400px; margin: 0 auto; padding: .55rem 1.25rem; font-size: .92rem; display: flex;
  gap: .5rem 1rem; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; }
.trial.over { background: var(--warn-soft); border-color: #F1D9A8; }

main { max-width: 1180px; margin: 2rem auto 4rem; padding: 0 1.25rem; }
main.wide { max-width: 1400px; }

/* kaarten, knoppen, formulieren */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem;
        margin-bottom: 1.25rem; box-shadow: var(--shadow); }
.card.flat { box-shadow: none; }
.card h2 { margin-bottom: .75rem; }
.btn, button.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font: inherit;
  font-weight: 600; cursor: pointer; border-radius: 999px; padding: .6rem 1.2rem; border: 1.5px solid transparent;
  text-decoration: none; line-height: 1.2; transition: background .15s, border-color .15s; white-space: nowrap; }
.btn.primary { background: var(--green); color: var(--ink); }
.btn.primary:hover { background: #B4CF71; color: var(--ink); }
.btn.dark { background: var(--ink); color: #fff; }
.btn.dark:hover { background: var(--ink-2); color: #fff; }
.btn.ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.btn.ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn.danger { background: #fff; border-color: #E9B4AF; color: var(--bad); }
.btn.danger:hover { border-color: var(--bad); }
.btn.small { padding: .35rem .8rem; font-size: .88rem; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.linkbtn.small { font-size: .88rem; }
label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .93rem; }
label .hint { font-weight: 400; color: var(--muted); font-size: .85rem; }
label.check { flex-direction: row; align-items: flex-start; gap: .55rem; font-weight: 400; }
label.check input { width: auto; margin-top: .25rem; accent-color: var(--green-dark); }
input, select, textarea { font: inherit; font-weight: 400; padding: .65rem .85rem; border: 1.5px solid var(--line);
  border-radius: 12px; background: #fff; color: var(--ink); width: 100%; }
input:focus, select:focus, textarea:focus, .btn:focus-visible, a:focus-visible { outline: 3px solid #bfe0ff; outline-offset: 1px; border-color: var(--green-dark); }
textarea { resize: vertical; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.center { text-align: center; }
.alert, .notice, .warn { padding: .7rem 1rem; border-radius: 12px; margin: .5rem 0 1rem; white-space: pre-line; }
.alert { background: var(--bad-soft); color: var(--bad); }
.notice { background: #EEF4E0; color: #3E5F17; }  /* gelukt = in orde: groen */
.warn { background: var(--warn-soft); color: #7A5000; }
.badge { display: inline-block; font-size: .75rem; font-weight: 600; padding: .15rem .6rem; border-radius: 999px;
  background: var(--code); color: var(--muted); vertical-align: middle; white-space: nowrap; }
.s-klaar, .s-actief, .s-goedgekeurd { background: var(--green-soft); color: var(--ok); }
.s-bezig, .s-onderhoud, .s-wachtrij, .s-verwijderen, .s-controleren, .s-activeren, .s-open { background: var(--warn-soft); color: var(--warn); }
.s-fout, .s-afgewezen { background: var(--bad-soft); color: var(--bad); }
.s-verlopen, .s-uit { background: #e2e9f3; color: var(--muted); }
.pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.pagehead p { margin: .25rem 0 0; }
.pagehead .begroeting { margin: 0 0 .15rem; font-size: .95rem; font-weight: 500; color: var(--muted); }

/* inlogpagina's */
.auth { min-height: calc(100vh - 58px); display: grid; grid-template-columns: 1.05fr 1fr; }
.auth-brand { background: var(--ink); color: #fff; padding: clamp(2rem, 6vw, 5rem); display: flex; flex-direction: column;
  justify-content: center; position: relative; overflow: hidden; }
.auth-brand::after { content: ""; position: absolute; width: 420px; height: 420px; right: -140px; bottom: -160px;
  background: var(--green); opacity: .9; border-radius: 54% 46% 63% 37% / 44% 58% 42% 56%; }
.auth-brand h1 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); max-width: 16ch; position: relative; z-index: 1; }
.auth-brand h1 span { color: var(--green); }
.auth-brand ul { list-style: none; padding: 0; margin: 1.5rem 0 0; position: relative; z-index: 1; display: grid; gap: .7rem; }
.auth-brand li { padding-left: 1.8rem; position: relative; color: #cbd5e4; }
.auth-brand li::before { content: ""; position: absolute; left: 0; top: .35em; width: 1rem; height: .55rem;
  border-left: 3px solid var(--green); border-bottom: 3px solid var(--green); transform: rotate(-45deg); }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.auth-form .card { width: 100%; max-width: 440px; padding: 2rem; margin: 0; }
.auth-form .foot { margin-top: 1.25rem; text-align: center; font-size: .92rem; color: var(--muted); }
.code-input { font-size: 1.6rem; letter-spacing: .5em; text-align: center; font-weight: 600; }
/* inlogcode: één echt invoerveld, onzichtbaar over zes getekende vakjes (mfa.html, initOtp). Kleuren als de rand om het
   chatvenster: een rustige groen-blauwe lijn tijdens het typen. Tijdens het controleren alleen blauw (draaiende rand),
   zodat groen pas verschijnt als de code echt klopt; daarna groen of rood. */
.otp-status { display: flex; align-items: center; gap: 8px; min-height: 24px; margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--muted); transition: color .15s; }
.otp-status .dot { width: 8px; height: 8px; border-radius: 50%; background: #dfe3d6; flex: none; transition: background .15s; }
.otp-status.typen, .otp-status.check { color: #1f6fb0; }
.otp-status.typen .dot { background: linear-gradient(135deg, #a5c35c, #4fb3ff); }
.otp-status.check .dot { background: #4fb3ff; animation: otp-puls .6s ease-in-out infinite; }
.otp-status.goed { color: var(--green-dark); } .otp-status.goed .dot { background: var(--green-dark); }
.otp-status.fout { color: var(--bad); } .otp-status.fout .dot { background: var(--bad); }
.otp { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.otp-cell { --a: #a5c35c; --b: #4fb3ff; --gloed-hoek: 0deg; height: 60px; display: grid; place-items: center; border: 2px solid transparent; border-radius: 12px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(#d1dae8, #d1dae8) border-box;
  font-size: 28px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; transition: box-shadow .15s, transform .15s, color .2s; }
/* per vakje een stukje van het verloop (samen één lijn van groen naar blauw) en zijn plek voor de vertraging (--i);
   hier en niet in style="" omdat de CSP inline stijl blokkeert */
.otp-cell:nth-child(1) { --i: 0; --b: color-mix(in srgb, #a5c35c 83%, #4fb3ff); }
.otp-cell:nth-child(2) { --i: 1; --a: color-mix(in srgb, #a5c35c 83%, #4fb3ff); --b: color-mix(in srgb, #a5c35c 66%, #4fb3ff); }
.otp-cell:nth-child(3) { --i: 2; --a: color-mix(in srgb, #a5c35c 66%, #4fb3ff); --b: color-mix(in srgb, #a5c35c 50%, #4fb3ff); }
.otp-cell:nth-child(4) { --i: 3; --a: color-mix(in srgb, #a5c35c 50%, #4fb3ff); --b: color-mix(in srgb, #a5c35c 33%, #4fb3ff); }
.otp-cell:nth-child(5) { --i: 4; --a: color-mix(in srgb, #a5c35c 33%, #4fb3ff); --b: color-mix(in srgb, #a5c35c 17%, #4fb3ff); }
.otp-cell:nth-child(6) { --i: 5; --a: color-mix(in srgb, #a5c35c 17%, #4fb3ff); }
.otp-cell.filled { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, var(--a), var(--b)) border-box;
  box-shadow: 0 4px 14px -6px rgba(79,179,255,.45); }
.otp-cell.active { transform: translateY(-2px); background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #a5c35c, #4fb3ff) border-box;
  box-shadow: 0 0 0 4px rgba(79,179,255,.12), 0 6px 18px -6px rgba(79,179,255,.55); }
.otp-cell.active:empty::after { content: ""; width: 2px; height: 28px; background: #1f6fb0; animation: otp-blink 1s steps(2) infinite; }
.otp-cell .d { display: inline-block; animation: otp-pop .14s cubic-bezier(.3,1.6,.5,1); }
.otp.check .otp-cell { background: linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--gloed-hoek), #1f6fb0 0deg, #4fb3ff 110deg, #bfe3ff 180deg, #4fb3ff 290deg, #1f6fb0 360deg) border-box;
  animation: gloed-draai .9s linear infinite, otp-golf .6s ease-in-out infinite; animation-delay: calc(var(--i) * -.15s), calc(var(--i) * 60ms); }
.otp.goed .otp-cell { animation: otp-goed .22s ease forwards; animation-delay: calc(var(--i) * 25ms); }
.otp.fout { animation: otp-schud .32s ease; }
.otp.fout .otp-cell { background: linear-gradient(var(--bad-soft), var(--bad-soft)) padding-box, linear-gradient(var(--bad), var(--bad)) border-box; color: var(--bad); box-shadow: none; }
/* niet opacity: 0: dan tonen iOS en Android bij lang drukken geen menu met Plakken; !important tegen de donkere-modusregels voor input */
.otp input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0 !important; background: transparent !important;
  color: transparent !important; box-shadow: none !important; caret-color: transparent; font-size: 28px; cursor: text; }
.otp input::selection { background: transparent; color: transparent; }
.otp-plak { margin: 10px 0 0; text-align: center; }
.otp input:focus { outline: 0; }
/* lijn onder de vakjes, zelfde verloop als de tegoedbalk */
.otp-lijn { height: 3px; margin-top: 12px; border-radius: 3px; background: #eef0e8; overflow: hidden; }
.otp-lijn i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #a5c35c, #4fb3ff); transition: width .14s ease; }
.otp-lijn.check i { width: 100% !important; background: linear-gradient(90deg, #4fb3ff, #bfe3ff, #4fb3ff, #bfe3ff); background-size: 200% 100%; animation: otp-stroom .7s linear infinite; }
.otp-lijn.goed i { width: 100% !important; background: var(--green-dark); }
.otp-lijn.fout i { background: var(--bad); }
/* knop: grijs tot de code compleet is, blauw tijdens controleren, donkergroen met vinkje bij het doorgaan
   (met .auth-form .btn erbij: zwaarder dan .dark-auth .btn.primary::before en de hoverregels, anders blijft hij groen) */
.dark-auth .auth-form .btn[data-otp-knop]:not(.klaar):not(.bezig):not(.door)::before { background: #e6e9df; }
.dark-auth .auth-form .btn[data-otp-knop]:not(.klaar):not(.bezig):not(.door) { color: #8a8c82; }
.dark-auth .auth-form .btn[data-otp-knop].bezig, .dark-auth .auth-form .btn[data-otp-knop].door { color: #fff; cursor: default; transform: none; }
.dark-auth .auth-form .btn[data-otp-knop].bezig::before { background: linear-gradient(90deg, #1f6fb0, #4fb3ff, #1f6fb0); background-size: 200% 100%; animation: otp-stroom .7s linear infinite; }
.dark-auth .auth-form .btn[data-otp-knop].door::before { background: var(--green-dark); }
[data-otp-knop] .spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; animation: otp-draai .6s linear infinite; }
[data-otp-knop] svg { width: 18px; height: 18px; }
[data-otp-knop] svg path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: otp-teken .25s ease forwards; }
@keyframes otp-blink { to { opacity: 0; } }
@keyframes otp-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes otp-golf { 50% { transform: translateY(-3px); box-shadow: 0 6px 18px -6px rgba(79,179,255,.6); } }
@keyframes otp-goed { 50% { transform: scale(1.07); }
  100% { transform: scale(1); color: var(--green-dark); box-shadow: 0 4px 14px -6px rgba(31,111,176,.55);
    background: linear-gradient(#eaf4ff, #eaf4ff) padding-box, linear-gradient(#1f6fb0, #1f6fb0) border-box; } }
@keyframes otp-schud { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
@keyframes otp-stroom { to { background-position: -200% 0; } }
@keyframes otp-puls { 50% { transform: scale(1.5); opacity: .6; } }
@keyframes otp-draai { to { transform: rotate(360deg); } }
@keyframes otp-teken { to { stroke-dashoffset: 0; } }
@media (max-width: 420px) { .otp { gap: 7px; } .otp-cell { height: 52px; font-size: 24px; border-radius: 10px; } }
@media (prefers-reduced-motion: reduce) { .otp, .otp *, .otp *::after, .otp-lijn i, .otp-status .dot, [data-otp-knop], [data-otp-knop] * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth-brand { padding: 2rem 1.25rem; }
  .auth-brand::after { width: 220px; height: 220px; right: -90px; bottom: -110px; }
  .auth-brand ul { display: none; }
}

/* portaloverzicht */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
.portal-card { display: flex; flex-direction: column; gap: .5rem; color: inherit; text-decoration: none; margin: 0;
  transition: border-color .15s, transform .15s; }
.portal-card:hover { border-color: var(--green); transform: translateY(-2px); color: inherit; }
.portal-card .title { font-weight: 700; font-size: 1.1rem; }
.portal-card .meta { color: var(--muted); font-size: .9rem; overflow-wrap: anywhere; }
.new-card { border: 2px dashed #c0cad8; background: transparent; box-shadow: none; display: flex; align-items: center;
  justify-content: center; min-height: 150px; cursor: pointer; font-weight: 600; color: var(--ink); font: inherit; }
.new-card:hover { border-color: var(--green-dark); background: #fff; }
.empty { text-align: center; padding: 3rem 1.5rem; }
.empty .blob { width: 90px; height: 90px; margin: 0 auto 1rem; background: var(--green);
  border-radius: 54% 46% 63% 37% / 44% 58% 42% 56%; display: grid; place-items: center; font-size: 2rem; font-weight: 700; }
.addr { display: flex; align-items: stretch; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.addr input { border: 0; border-radius: 0; min-width: 0; }
.addr span { padding: .65rem .85rem; background: var(--code); color: var(--muted); white-space: nowrap; }
.addr:focus-within { outline: 3px solid #bfe0ff; border-color: var(--green-dark); }

/* portalpagina */
.portal-head h1 { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.links { display: flex; gap: .4rem 1.25rem; flex-wrap: wrap; align-items: center; margin-top: .35rem; font-size: .95rem; }
.links a { font-weight: 600; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.25rem; align-items: start; }
@media (max-width: 1000px) { .split { grid-template-columns: 1fr; } }
.chat { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.chat-head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.chat-head h2 { margin: 0; }
.messages { height: min(62vh, 680px); min-height: 320px; overflow-y: auto; display: flex; flex-direction: column;
  gap: .75rem; padding: 1.25rem; background: #f8fafc; }
.msg { padding: .7rem 1rem; border-radius: 14px; max-width: 88%; overflow-wrap: anywhere; }
.msg p { margin: .3rem 0; }
.msg p:first-child { margin-top: 0; } .msg p:last-child { margin-bottom: 0; }
.msg pre { background: var(--code); padding: .6rem; border-radius: 8px; overflow-x: auto; font-size: .84rem; }
.msg.user { align-self: flex-end; background: var(--ink); color: #fff; white-space: pre-wrap; border-bottom-right-radius: 4px; }
.msg.ai { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg.sys { align-self: center; font-size: .86rem; color: var(--muted); background: none; text-align: center; max-width: 80%; }
.msg.err { align-self: flex-start; background: var(--bad-soft); color: var(--bad); }
.msg.warnmsg { align-self: center; background: var(--warn-soft); color: #7A5000; font-size: .88rem; }
.msg.letop { align-self: flex-start; display: flex; gap: .6rem; background: var(--warn-soft); border-left: 4px solid var(--warn);
  border-radius: 6px; font-size: .9rem; max-width: 88%; }
.msg.letop svg { flex: none; margin-top: .15rem; color: var(--warn); }
.msg.letop b, .msg.letop .letop-tekst { display: block; }
.msg.letop .letop-voet { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .55rem; font-size: .84rem; color: var(--muted); }
.steps-mini { align-self: flex-start; font-size: .8rem; color: var(--muted); max-width: 88%; }
.steps-mini summary { cursor: pointer; }
.steps-mini div { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; padding: .1rem 0; }
.steps-mini .bad { color: var(--bad); }
.working { align-self: flex-start; display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .9rem; }
.working.wachtrij { flex-wrap: wrap; }
.wachtrij-label { font-size: .75rem; font-weight: 600; padding: .15rem .6rem; border-radius: 999px; background: var(--code);
  border: 1px solid var(--line); color: var(--ink); }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--green-dark); animation: bounce 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(.5); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }
.composer { border-top: 2px solid var(--green); padding: 1rem 1.25rem 1.1rem; display: flex; flex-direction: column; gap: .6rem;
  background: var(--green-soft); }
.composer-label { font-weight: 700; font-size: .95rem; }
.composer textarea { border-radius: 14px; border: 2px solid var(--green-dark); background: #fff; min-height: 5.2rem;
  font-size: 1rem; box-shadow: 0 2px 8px rgba(31,111,176,.15); resize: vertical; }
.composer textarea::placeholder { color: #768499; }
.composer textarea:focus { outline: 3px solid #bfe0ff; border-color: var(--green-dark); }
.composer textarea:disabled { background: var(--code); border-color: var(--line); box-shadow: none; }
.chat-intro { margin: auto; max-width: 30rem; text-align: center; color: var(--muted); display: flex; flex-direction: column;
  gap: .4rem; align-items: center; padding: 1.5rem; }
.chat-intro strong { color: var(--ink); font-size: 1.05rem; }
.chat-intro .arrow { font-size: 1.6rem; color: var(--green-dark); animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.suggestions { display: flex; gap: .5rem; flex-wrap: wrap; }
.suggestions button { font: inherit; font-size: .86rem; border: 1.5px solid #bbc4d2; background: #fff;
  border-radius: 999px; padding: .35rem .8rem; cursor: pointer; }
.suggestions button:hover { border-color: var(--green-dark); }
.side .card { padding: 1.25rem; }
.side h2 { font-size: 1.05rem; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; font-size: .9rem; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; overflow-wrap: anywhere; }
.secret { filter: blur(5px); cursor: pointer; transition: filter .2s; }
.secret.show { filter: none; }

/* voortgang */
.progress-card { max-width: 720px; margin: 1rem auto; text-align: center; padding: 2.5rem 2rem; }
.bar { height: 12px; background: var(--code); border-radius: 999px; overflow: hidden; margin: 1.5rem 0 .75rem; }
.bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green), var(--green-dark));
  border-radius: 999px; transition: width .8s ease; }
.steps { list-style: none; padding: 0; margin: 1.5rem auto 0; text-align: left; display: inline-grid; gap: .55rem; }
.steps li { display: flex; align-items: center; gap: .65rem; color: var(--muted); }
.steps li::before { content: ""; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 2px solid #c0cad8; flex: none; }
.steps li.done { color: var(--ink); }
.steps li.done::before { background: var(--green); border-color: var(--green); box-shadow: inset 0 0 0 3px #fff; }
.steps li.now { color: var(--ink); font-weight: 600; }
.steps li.now::before { border-color: var(--green-dark); border-top-color: transparent; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.meter { height: 8px; background: var(--code); border-radius: 999px; overflow: hidden; margin: .5rem 0; }
.meter span { display: block; height: 100%; background: var(--green); width: 0; }
/* AI-tegoed: de balk loopt vol naarmate er meer gebruikt is; oranje vanaf 80%, rood bij op */
.tg-meter span { background: linear-gradient(90deg, #9fd6ff, #4fb3ff); }
.tg-meter.vol span { background: #e0a030; }
.tg-meter.leeg span { background: var(--bad); }
.tg-over { font-weight: 600; font-variant-numeric: tabular-nums; }
.tg-over.leeg { color: var(--bad); }
.domain { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .55rem 0;
  border-bottom: 1px solid var(--line); }
.domain:last-of-type { border-bottom: 0; }
.domain strong { overflow-wrap: anywhere; }
.dnsbox { background: var(--code); border-radius: 12px; padding: .75rem .9rem; font-size: .86rem; margin: .5rem 0; }
.dnsbox code { background: #fff; }
.log { background: var(--ink); color: #c8d2e0; padding: .85rem; border-radius: 12px; font-size: .78rem; max-height: 320px;
  overflow: auto; white-space: pre-wrap; text-align: left; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
details summary { cursor: pointer; }
.plain { list-style: none; padding: 0; margin: 0; }
.plain li { padding: .3rem 0; border-bottom: 1px solid var(--line); }
.plain li:last-child { border-bottom: 0; }

/* tabellen en beheer */
.tabs { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.tabs a { padding: .5rem 1rem; border-radius: 999px; text-decoration: none; font-weight: 600; color: var(--muted); background: #fff; border: 1px solid var(--line); }
.tabs a.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
th, td { padding: .6rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.detail { max-width: 460px; overflow-wrap: anywhere; color: var(--muted); font-size: .85rem; }
td form { margin: 0; display: inline; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }
.qr { display: flex; justify-content: center; margin: 1rem 0; }
.qr svg { width: 200px; height: 200px; }
.report { white-space: pre-wrap; background: var(--code); border-radius: 12px; padding: 1rem; font-size: .9rem; }
dialog { width: min(1000px, 94vw); border: 0; border-radius: var(--radius); padding: 1.5rem; box-shadow: 0 20px 60px rgba(0,0,0,.25);
  max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; }  /* lange vensters scrollen binnen het scherm */
dialog.small { width: min(480px, 94vw); }
dialog.medium { width: min(640px, 94vw); }
dialog::backdrop { background: rgba(13,24,40,.5); }
.reboot-kop { display: flex; align-items: center; gap: .5rem; margin: 0; }
.reboot-kop svg { color: var(--bad); flex: none; }
[data-reboot-dialog] ul { margin: 0; padding-left: 1.1rem; }
[data-reboot-dialog] li { margin: .2rem 0; }
[data-reboot-dialog] input[name="bevestiging"] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.reboot-tip { padding: .6rem .75rem; border-radius: 8px; margin: 0; }
.reboot-knoppen { justify-content: flex-end; gap: .5rem; }
.diff { max-height: 68vh; overflow: auto; font-size: .8rem; background: #f8fafc; border: 1px solid var(--line); padding: .85rem;
  border-radius: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.diff .add { color: #3E6B12; background: #e6ecf4; display: inline-block; width: 100%; }
.diff .del { color: var(--bad); background: #FDF0EE; display: inline-block; width: 100%; }
.diff .hunk { color: #4C6FBF; } .diff .file { font-weight: 700; color: var(--ink); }
footer.foot { text-align: center; color: var(--muted); font-size: .85rem; padding: 0 1rem 2rem; }
.narrow-card { max-width: 520px; margin: 0 auto; }
.mt { margin-top: .9rem; }
.row.centered { justify-content: center; }

/* server (beheer) */
.usage { display: grid; gap: .55rem; margin-bottom: .5rem; }
.usage .meter { margin: .25rem 0 0; }
.spec-inputs { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.spec-inputs label { font-size: .85rem; }
.pricebox { background: var(--code); border-radius: 12px; padding: .75rem .9rem; display: grid; gap: .2rem; }
.plain-list { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; }
.stack.tight { gap: .55rem; }
fieldset.checks { border: 0; padding: 0; margin: 0; display: flex; gap: 1.25rem; flex-wrap: wrap; }
fieldset.checks legend { font-weight: 600; font-size: .92rem; margin-bottom: .35rem; padding: 0; }
.admins { display: grid; gap: .35rem; }
.admins div { display: flex; justify-content: space-between; gap: .5rem; border-bottom: 1px solid var(--line); padding: .3rem 0; }
.admins div:last-child { border-bottom: 0; }

/* inlogpagina's in de stijl van www.jouwaiportal.nl (donker, schuine knoppen, blauwe AI) */
body.dark-auth { --d-ink: #0d1828; --d-ink-2: #15233a; --d-line: #2a3b57; --d-text: #c0cad8; --d-hi: #dce4f0;
  --d-muted: #a3afc2; --d-ai: #4fb3ff; --d-display: Byker, Asap, sans-serif;
  background: var(--d-ink); color: #fff; font-size: 16px; min-height: 100vh; display: flex; flex-direction: column; }
.dark-auth a { color: var(--green); text-decoration-color: rgba(79,179,255,.5); }
.dark-auth a:hover { color: #9fd6ff; }
.dark-auth h1, .dark-auth h2 { font-family: var(--d-display); letter-spacing: -.01em; color: #fff; }
.dark-auth .ai-word { color: var(--d-ai); text-shadow: 0 0 24px rgba(79,179,255,.55); }

.site-top { position: sticky; top: 0; z-index: 5; background: rgba(13,24,40,.92); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--d-ink-2); }
.site-wrap { max-width: 1180px; margin: 0 auto; padding: 8px 32px; min-height: 80px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: #fff; }
.site-badge { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 40px;
  color: var(--d-ink); font-family: var(--d-display); font-weight: 800; font-size: 15px; flex: none; }
.site-badge::before { content: ""; position: absolute; inset: 0 4px; background: var(--green); transform: skewX(-18deg); }
.site-badge span { position: relative; }
.site-name { font-family: var(--d-display); font-weight: 700; font-size: 21px; }
.site-name b { color: var(--d-ai); text-shadow: 0 0 18px rgba(79,179,255,.6); }
.site-actions { display: flex; gap: 6px; align-items: center; }

/* schuine knoppen zoals op de homepage */
.sbtn, .dark-auth .btn { position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; min-height: 52px; padding: 0 36px; font: inherit; font-weight: 700; font-size: 15px; letter-spacing: .6px;
  text-transform: uppercase; text-decoration: none; cursor: pointer; border: 0; border-radius: 0; background: none;
  transition: transform .15s; white-space: nowrap; }
.sbtn:hover, .dark-auth .btn:hover { transform: translateY(-1px); }
.sbtn::before, .dark-auth .btn::before { content: ""; position: absolute; top: 0; bottom: 0; left: 8px; right: 8px;
  transform: skewX(-18deg); z-index: -1; transition: background .15s; }
.sbtn.sm { min-height: 42px; padding: 0 26px; font-size: 13px; }
.sbtn.p, .sbtn.p:hover { color: #fff; background: none; }
.dark-auth .btn.primary, .dark-auth .btn.primary:hover { color: var(--ink); background: none; }
.sbtn.p::before, .dark-auth .btn.primary::before { background: var(--green); }
.sbtn.p:hover::before, .dark-auth .btn.primary:hover::before { background: #3ea2ee; }
.sbtn.w, .sbtn.w:hover, .dark-auth .btn.ghost, .dark-auth .btn.ghost:hover { color: #fff; background: none; }
.sbtn.w::before, .dark-auth .btn.ghost::before { border: 1.5px solid rgba(255,255,255,.55); }
.sbtn.w:hover::before, .dark-auth .btn.ghost:hover::before { border-color: #fff; }
.dark-auth .btn.block { width: 100%; }
.dark-auth .sbtn:focus-visible, .dark-auth .btn:focus-visible, .dark-auth a:focus-visible { outline: 2px solid var(--d-ai); outline-offset: 3px; }

/* twee kolommen */
.dark-auth .auth { flex: 1; min-height: 0; grid-template-columns: 1.05fr 1fr; position: relative; isolation: isolate;
  /* op brede schermen niet uit elkaar: kolommen even breed als de kop (.site-wrap), achtergrond wel over de hele breedte */
  padding-inline: max(0px, calc((100% - 1180px) / 2)); }
.dark-auth .auth-brand { background: transparent; gap: 20px; }
.dark-auth .auth-brand::after { content: none; }
/* gloed over de hele breedte, zodat hij uitvloeit en niet hard ophoudt bij de rechterkolom */
.dark-auth .auth::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 45% 55% at 42% 30%, rgba(79,179,255,.22), rgba(79,179,255,0)),
              radial-gradient(ellipse 35% 55% at 10% 80%, rgba(165,195,92,.18), rgba(165,195,92,0)); }
/* raster dat uitvloeit (zoals de hero op de site): vol in het midden van de linkerkolom, naar de randen toe weg */
.dark-auth .auth::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 45% 70% at 30% 45%, #000 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 45% 70% at 30% 45%, #000 20%, transparent 100%); }
.dark-auth .auth-brand h1 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; max-width: 16ch; margin: 0; }
.dark-auth .auth-brand .lead { color: var(--d-hi); font-size: 18px; line-height: 1.65; max-width: 40ch; margin: 0; }
.stag { position: relative; z-index: 0; align-self: flex-start; display: inline-block; padding: 7px 20px; font-weight: 700;
  font-size: 12.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--green); }
.stag::before { content: ""; position: absolute; top: 0; bottom: 0; left: 6px; right: 6px; transform: skewX(-18deg);
  background: rgba(79,179,255,.16); z-index: -1; }
.stag.ai { color: var(--d-ai); } .stag.ai::before { background: rgba(79,179,255,.14); }
.dark-auth .schecks { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 10px; }
.dark-auth .schecks li { position: relative; padding-left: 30px; color: var(--d-text); line-height: 1.5; }
.dark-auth .schecks li::before { content: ""; position: absolute; left: 2px; top: .3em; width: 12px; height: 6px;
  border-left: 2.6px solid var(--green); border-bottom: 2.6px solid var(--green); transform: rotate(-45deg); }
.idee { display: flex; flex-direction: column; gap: 6px; max-width: 520px; background: var(--d-ink-2);
  border: 1.5px solid rgba(79,179,255,.55); box-shadow: 0 0 30px rgba(79,179,255,.15); border-radius: 14px; padding: 14px 18px; }
.idee-label { font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--d-ai); }
.idee p { margin: 0; color: #fff; overflow-wrap: anywhere; }

/* formulierkant: licht */
.dark-auth .auth-form { background: transparent; }
.dark-auth .auth-form .card { background: #fff; border: 1px solid #d1dae8; border-radius: 16px;
  box-shadow: 0 0 0 8px rgba(255,255,255,.04), 0 30px 70px rgba(0,0,0,.45); padding: 36px 32px; max-width: 460px; color: var(--ink); }
.dark-auth .auth-form h1 { color: var(--ink); font-size: 28px; margin-bottom: .5rem; }
.dark-auth .auth-form a, .dark-auth .auth-form .linkbtn { color: #1f6fb0; }
.dark-auth .auth-form a:hover { color: var(--ink); }
.dark-auth .auth-form .muted, .dark-auth .auth-form label .hint, .dark-auth .auth-form .foot { color: var(--muted); }
.dark-auth .auth-form .btn.ghost, .dark-auth .auth-form .btn.ghost:hover { color: var(--ink); }
.dark-auth .auth-form .btn.ghost::before { border-color: var(--ink); }

.dark-auth .site-foot { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap;
  padding: 24px max(32px, calc((100% - 1180px) / 2 + 32px));  /* zelfde breedte als de kop */
  border-top: 1px solid var(--d-ink-2); background: #0f1a2b; color: var(--d-muted); font-size: 13.5px; }
.dark-auth .site-foot a { color: var(--d-text); text-decoration: none; }
.dark-auth .site-foot a:hover { color: #fff; }

@media (max-width: 860px) {
  .dark-auth .auth { grid-template-columns: 1fr; }
  .dark-auth .auth-brand { padding: 40px 16px 8px; }
  .dark-auth .auth-brand .schecks { display: none; }
  .dark-auth .auth-form { padding: 24px 16px 48px; }
}
@media (max-width: 640px) {
  .site-wrap { padding: 8px 16px; min-height: 64px; }
  .site-name { font-size: 18px; }
  .site-actions .sbtn.w { display: none; }
  .dark-auth .auth-form .card { padding: 28px 20px; }
  .dark-auth .site-foot { padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) { .sbtn, .dark-auth .btn { transition: none; } }


/* ---------------------------------------------------------------------------------------------
   Portal (ingelogd): lichte versie van de stijl van www.jouwaiportal.nl
   --------------------------------------------------------------------------------------------- */
body:not(.dark-auth) { --bg: #ffffff; --line: #d1dae8; --muted: #586477; --code: #e6ecf5; --ai: #4fb3ff; --ai-ink: #1f6fb0;
  background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; }
body:not(.dark-auth) > main { flex: 1 0 auto; width: 100%; }
body:not(.dark-auth) h1, body:not(.dark-auth) h2 { font-family: Byker, Asap, sans-serif; letter-spacing: -.01em; }
/* Byker koppelt "ck" tot één teken (Tickets leest dan raar): ligaturen overal uit, ook in koppen die later Byker krijgen */
html { font-variant-ligatures: none; }
body:not(.dark-auth) h1 { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.12; }
body:not(.dark-auth) a { text-decoration-color: rgba(79,179,255,.8); }
body:not(.dark-auth) a:hover { color: #1f6fb0; }

/* header zoals op de homepage */
.top { position: sticky; top: 0; z-index: 20; background: rgba(13,24,40,.94); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid #15233a; }
.top-inner { max-width: 1400px; min-height: 72px; padding: 8px 1.25rem; }
.site-badge { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 36px;
  color: #0d1828; font-family: Byker, Asap, sans-serif; font-weight: 800; font-size: 13px; flex: none; }
.site-badge::before { content: ""; position: absolute; inset: 0 4px; background: var(--green); transform: skewX(-18deg); }
.site-badge span { position: relative; }
.site-name { font-family: Byker, Asap, sans-serif; font-weight: 700; font-size: 19px; color: #fff; }
.site-name b { color: #4fb3ff; text-shadow: 0 0 18px rgba(79,179,255,.6); }
nav.main a, nav.main button { font-weight: 600; font-size: 15px; }
nav.main a.on { background: #15233a; box-shadow: inset 0 -2px 0 var(--green); border-radius: 8px; }
nav.main a:hover, nav.main button:hover { border-radius: 8px; }

/* schuine knoppen */
.btn, button.btn { position: relative; z-index: 0; border: 0; border-radius: 0; background: none; min-height: 44px;
  padding: 0 28px; font-weight: 700; font-size: 14px; letter-spacing: .5px; text-transform: uppercase; transition: transform .15s, color .35s ease; }
.btn::before { content: ""; position: absolute; top: 0; bottom: 0; left: 7px; right: 7px; transform: skewX(-18deg); z-index: -1;
  transition: background .35s ease, border-color .35s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:disabled:hover { transform: none; }
.btn.primary, .btn.primary:hover { background: none; color: var(--ink); }
.btn.primary::before { background: var(--green); }
.btn.dark, .btn.dark:hover { background: none; color: #fff; }
.btn.dark::before { background: var(--ink); }
.btn.ghost, .btn.ghost:hover { background: none; color: var(--ink); border: 0; }
.btn.ghost::before { border: 1.5px solid var(--ink); background: #fff; }
.btn.danger, .btn.danger:hover { background: none; color: var(--bad); border: 0; }
.btn.danger::before { border: 1.5px solid #E9B4AF; background: #fff; }
/* hover: knop vloeit over naar donker met witte tekst (rood blijft rood) */
:root { --btn-hover: #0d1828; --btn-hover-dark: #26364f; --btn-hover-danger: #B3261E; }
.btn.primary:not(:disabled):hover, .btn.ghost:not(:disabled):hover, .btn.danger:not(:disabled):hover { color: #fff; }
.btn.primary:not(:disabled):hover::before, .btn.ghost:not(:disabled):hover::before,
#portal .btn.ghost:not(:disabled):hover::before, .bh-list .btn.ghost:not(:disabled):hover::before { background: var(--btn-hover); border-color: var(--btn-hover); }
.btn.dark:not(:disabled):hover::before { background: var(--btn-hover-dark); }
.btn.danger:not(:disabled):hover::before { background: var(--btn-hover-danger); border-color: var(--btn-hover-danger); }
.btn.ghost.wis:not(:disabled):hover::before { background: var(--btn-hover-danger); border-color: var(--btn-hover-danger); }
.btn.small { min-height: 34px; padding: 0 18px; font-size: 12px; }
.btn.small::before { left: 5px; right: 5px; }
.btn:focus-visible { outline: 2px solid var(--ai, #4fb3ff); outline-offset: 3px; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(79,179,255,.30); outline-offset: 1px; border-color: #4fb3ff; }
.addr:focus-within { outline: 3px solid rgba(79,179,255,.30); border-color: #4fb3ff; }

/* kaarten, tabs, tabellen */
.card { border-radius: 16px; border-color: var(--line); box-shadow: 0 1px 2px rgba(13,24,40,.03), 0 10px 30px rgba(13,24,40,.05); }
.portal-card:hover { box-shadow: 0 18px 40px rgba(13,24,40,.08); }
.new-card { border-color: #bac3d0; border-radius: 16px; }
.new-card:hover { border-color: var(--green); }
.empty .blob { border-radius: 0; width: 84px; height: 60px; transform: skewX(-18deg); }
.tabs a { border-radius: 8px; }
.tabs a.on { background: var(--ink); color: #fff; box-shadow: inset 0 -3px 0 var(--green); }
th { color: var(--muted); letter-spacing: 1px; font-weight: 700; font-size: .75rem; }

/* chat: groen voor jou, blauw voor de AI (zoals op de homepage) */
.msg.user { background: var(--green); color: var(--ink); font-weight: 500; }
.msg.ai { border-color: rgba(79,179,255,.5); box-shadow: 0 0 0 3px rgba(79,179,255,.06); }
.dots i { background: #4fb3ff; }
.composer { background: #fff; border-top: 2px solid #4fb3ff; }
.composer textarea { border-color: rgba(79,179,255,.6); box-shadow: 0 0 0 5px rgba(79,179,255,.07), 0 0 24px rgba(79,179,255,.12); }
.composer textarea:focus { outline: 0; border-color: #4fb3ff; }
.chat-intro .arrow { color: #4fb3ff; }
.suggestions button { border-color: var(--line); font-weight: 600; }
.suggestions button:hover { border-color: #4fb3ff; }
.bar span { background: linear-gradient(90deg, #9fd6ff, #4fb3ff); }
.steps li.now::before { border-color: #4fb3ff; border-top-color: transparent; }

/* footer */
footer.foot { background: #0f1a2b; color: #a3afc2; padding: 20px 1.25rem; text-align: center; font-size: .88rem; margin-top: 2rem; }
footer.foot a { color: #c0cad8; text-decoration: none; }
footer.foot a:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { transform: none; } }
input.narrow { width: 6.5rem; }

/* logo (PNG van 238 x 47) */
.site-logo { display: block; height: 34px; width: auto; }
@media (max-width: 640px) { .site-logo { height: 28px; } }
.maildomain { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: .75rem; }
table.dns td { vertical-align: top; }
code.sel { user-select: all; } code.wrap { word-break: break-all; }

/* prijs op basis van code */
.price-head { display: flex; align-items: baseline; gap: .6rem 1.25rem; flex-wrap: wrap; margin: .25rem 0; }
.price-big { font-size: 2.4rem; font-weight: 700; color: #1F5F2E; line-height: 1.1; }
.code-som { font-size: 1.15rem; margin: .5rem 0 .4rem; }
.donut-wrap { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
svg.donut { width: 220px; height: 220px; flex: none; }
.legend { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
svg.dot { width: 10px; height: 10px; vertical-align: middle; }
td.num, th.num { text-align: right; white-space: nowrap; }
svg.linechart { width: 100%; height: auto; font-size: 11px; fill: var(--muted); }
svg.linechart .grid { stroke: var(--line); }
svg.linechart .area { fill: rgba(37,99,235,.12); }
svg.linechart .line { fill: none; stroke: #2563EB; stroke-width: 2; }
svg.linechart circle { fill: #2563EB; }
.key { display: inline-block; width: 18px; height: 0; vertical-align: middle; border-top: 2px solid #2563EB; }
.codeprice .big { font-size: 1.5rem; font-weight: 700; }

/* idee van de homepage */
.idee-veld.gevuld textarea { border-color: #4fb3ff; box-shadow: 0 0 0 4px rgba(79,179,255,.10); }
.idee-quote { margin: 0 auto 1.25rem; max-width: 560px; padding: .9rem 1.1rem; border-radius: 12px; background: #fff; border: 1.5px solid rgba(79,179,255,.5);
  box-shadow: 0 0 0 4px rgba(79,179,255,.06); text-align: left; font-size: 1rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.idee-klaar { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; border-color: rgba(79,179,255,.55);
  box-shadow: 0 0 0 4px rgba(79,179,255,.07), 0 10px 30px rgba(13,24,40,.05); }
.idee-klaar > div { flex: 1 1 360px; min-width: 0; }
.idee-klaar h2 { margin-bottom: .6rem; }
.idee-klaar .idee-quote { margin: 0; max-width: none; }
.idee-notice { margin: 0; padding: .55rem .8rem; border-radius: 10px; background: #e6f3fe; color: #1f4f7a; font-size: .9rem; }
#prompt-input[data-idee] { border-color: #4fb3ff; }

/* versies van je portal */
.versions { display: grid; gap: .6rem; }
.version { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; border: 1px solid var(--line); border-radius: 12px; padding: .65rem .8rem; }
.version .vactions { flex-basis: 100%; display: grid; gap: .4rem; padding-left: calc(9px + .7rem); }
.version .vactions .btn { width: 100%; justify-content: center; text-align: center; }
.version .vdot { width: 9px; height: 9px; border-radius: 50%; background: #9CA3AF; flex: none; }
.version.dev { border-color: #4FB3FF; box-shadow: 0 0 0 1px rgba(79,179,255,.35); }
.version.dev .vdot { background: #4FB3FF; box-shadow: 0 0 8px #4FB3FF; }
.version.dev.same { border-color: var(--line); box-shadow: none; }
.version.dev.same .vdot { background: #CFD0C8; box-shadow: none; }
.version.live .vdot { background: var(--green); }
.version .vlabel { font-size: .75rem; font-weight: 700; color: var(--green-dark); letter-spacing: .04em; }
.version .vlabel.test { color: #2F8FD6; }
.version strong { font-size: .92rem; }
ul.changes { margin: .5rem 0; padding-left: 1.2rem; display: grid; gap: .35rem; }

.sw-zakelijk-d { background: #1E3A5F; } .sw-zakelijk-p { background: #F28C28; }
.sw-fris-d { background: #0F2E2B; } .sw-fris-p { background: #14B8A6; }
.sw-warm-d { background: #3B2414; } .sw-warm-p { background: #B7793F; }
.sw-stoer-d { background: #18181B; } .sw-stoer-p { background: #DC2626; }
.sw-modern-d { background: #1E1B4B; } .sw-modern-p { background: #6366F1; }

/* ---------------------------------------------------------------------------------------------
   Ingelogd: menubalk bovenaan, inhoud eronder
   --------------------------------------------------------------------------------------------- */
.shell { display: flex; flex-direction: column; min-height: 100vh; width: 100%; }
.side-nav { position: sticky; top: 0; z-index: 40;  /* boven Live versie en Publiceren (.kop-versie, z-index 20) bij scrollen */  display: flex; align-items: center; gap: 28px; min-height: 68px; padding: 0 max(1.25rem, calc((100% - 1480px) / 2));
  background: #0d1828; color: #c0cad8; border-bottom: 1px solid #15233a; }
.side-brand { flex: none; display: block; }
.side-brand img { display: block; height: 28px; width: auto; }
.side-links { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.side-links::-webkit-scrollbar { display: none; }
.side-links a { position: relative; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 13px; border-radius: 9px; color: #c0cad8; text-decoration: none;
  font-weight: 600; font-size: 14.5px; white-space: nowrap; }
.side-links a svg { flex: none; color: #7a889d; }
.side-links a:hover { background: #15233a; color: #fff; }
.side-links a:hover svg { color: #c0cad8; }
.side-links a.on { background: #1a2a44; color: #fff; box-shadow: inset 0 -2px 0 #4fb3ff; }
.side-links a.on svg { color: #4fb3ff; }
.side-user { flex: none; display: flex; align-items: center; gap: 10px; }
.side-av { flex: none; display: inline-flex; width: 32px; height: 32px; border-radius: 50%; align-items: center; justify-content: center; background: #4fb3ff; color: #0d1828; font-weight: 800; font-size: 13.5px; }
.side-who { display: flex; flex-direction: column; line-height: 1.25; max-width: 200px; }
.side-who strong { color: #fff; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-who span { color: #7a889d; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user form { margin: 0; }
.side-out { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border: 0; border-radius: 9px; background: none; color: #7a889d; cursor: pointer; }
.side-out:hover { background: #15233a; color: #fff; }
.shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shell-main > main { flex: 1 0 auto; width: 100%; margin-top: 2rem; }
.shell-main .trial-inner, .shell-main > main { max-width: 1240px; }
.shell-main > main.wide { max-width: 1480px; }
.shell-main footer.foot { margin-top: 2rem; }

/* overzicht */
/* Overzicht: strook "Verder waar je was" */
.verder-strook { position: relative; overflow: hidden; display: flex; align-items: center; gap: 1.1rem; margin: 0 0 1.25rem; padding: 1rem 1rem 1rem 1.3rem; background-color: #0d1828; color: #fff; border: 1px solid #0d1828; border-radius: 14px;
  background-image: radial-gradient(ellipse 40% 140% at 100% 0%, rgba(79,179,255,.28), rgba(79,179,255,0) 70%),
    radial-gradient(ellipse 35% 140% at 0% 100%, rgba(165,195,92,.22), rgba(165,195,92,0) 70%);
  --btn-hover: #060c16; }  /* donker met blauwe en groene gloed zoals de homepage; groene knop vloeit bij hover naar bijna zwart */
.verder-strook::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(#a5c35c, #4fb3ff); }
.verder-strook .tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.verder-strook .label { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #aab6c8; font-weight: 700; }
.verder-strook strong { font-size: 1.02rem; margin: .1rem 0; }
.verder-strook .muted { font-size: .88rem; color: #aab6c8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verder-strook .btn { flex: none; }
.verder-weg { flex: none; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: none; color: #a3afc2; cursor: pointer; transition: background .3s ease, color .3s ease; }
.verder-weg:hover { background: rgba(255,255,255,.1); color: #fff; }
html[data-theme="dark"] body:not(.dark-auth) .verder-strook { background-color: #08101b; border-color: #2a3b57; --btn-hover: #000; }
.verder-weg:focus-visible { outline: 2px solid #4fb3ff; outline-offset: 2px; }
@media (max-width: 700px) { .verder-strook { flex-wrap: wrap; } .verder-strook .muted { white-space: normal; } .verder-weg { position: absolute; top: .5rem; right: .5rem; } }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 1.75rem; }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 2px rgba(13,24,40,.03); }
.stat-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.stat strong { font-family: Byker, Asap, sans-serif; font-size: 28px; line-height: 1.2; color: var(--ink); }
.stat strong.stat-small { font-size: 19px; padding: 5px 0 3px; }
.stat-sub { font-size: 13px; color: var(--muted); }
.stat a { text-decoration: none; color: inherit; }
.stat a:hover { color: #1f6fb0; }
.section-title { font-size: 1.15rem; margin: 0 0 .85rem; }

/* binnenkort beschikbaar */
.soon { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; padding: 3rem 1.5rem; }
.soon-ico { display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; border-radius: 18px; background: #e2e8f2; color: #1f6fb0; margin-bottom: .4rem; }
.soon h2 { margin: .4rem 0 0; }
.soon p { max-width: 520px; margin: 0; }

@media (max-width: 1100px) { .side-who { display: none; } .side-nav { gap: 16px; } }
@media (max-width: 900px) {
  .side-nav { gap: 10px; min-height: 58px; padding: 0 12px; }
  .side-brand img { height: 24px; }
  .side-links a { min-height: 38px; padding: 0 10px; font-size: 13.5px; }
  .side-av { display: none; }
  .shell-main > main { margin-top: 1.25rem; }
}
@media (max-width: 640px) { .side-links a span { display: none; } .side-links a { padding: 0 11px; } .side-links a .count { display: inline-grid; } }

/* support */
.support-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 1.25rem; align-items: start; }
.support-grid .card { margin-bottom: 0; }
.cols.tight { gap: .75rem; }
.contact-card .contact-line { display: flex; align-items: center; gap: .75rem; padding: .7rem 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.contact-line > span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.contact-line > span:last-child span { font-size: .85rem; color: var(--muted); }
.contact-ico { flex: none; display: inline-flex; width: 38px; height: 38px; border-radius: 11px; align-items: center; justify-content: center; background: #e2e8f2; color: #1f6fb0; }
.contact-line:hover strong { color: #1f6fb0; }
.tickets { list-style: none; margin: 0; padding: 0; }
.tickets li { display: flex; flex-direction: column; gap: 2px; padding: .7rem 0; border-top: 1px solid var(--line); }
.tickets li:first-child { border-top: 0; padding-top: 0; }
.ticket-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.ticket-sub { overflow-wrap: anywhere; }
@media (max-width: 900px) { .support-grid { grid-template-columns: 1fr; } }
.tegoedblok-form { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); display: grid; gap: .55rem; }
.tegoedblok-form h3 { margin: 0; font-size: .95rem; }
.tegoedblok-form p { margin: 0; }
.tegoedblok-form .row { gap: .5rem; flex-wrap: wrap; align-items: center; }
.tegoedblok-form select { width: auto; flex: none; }
.tegoedblok-form input[name="notitie"] { flex: 1 1 12rem; min-width: 0; width: auto; }
.tegoedblok-form label.check { align-items: center; }
.tegoedblok-form label.check input { margin: 0; }

/* Tegoed in het chatgedeelte */
.credit { display: grid; grid-template-columns: auto minmax(80px, 1fr) auto; align-items: center; gap: .4rem .8rem;
  padding: .55rem 1.25rem; border-bottom: 1px solid var(--line); font-size: .85rem; }
.credit .meter { margin: 0; }
.credit-label { font-weight: 600; }
@media (max-width: 640px) { .credit { grid-template-columns: 1fr; } }

/* portals: kaarten of lijst */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.section-head .section-title { margin: 0; }
.view-toggle { display: inline-flex; padding: 3px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.view-toggle[hidden] { display: none; }
.view-toggle button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: .88rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.view-toggle button:hover { color: var(--ink); }
.view-toggle button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.view-toggle button:focus-visible { outline: 2px solid #4fb3ff; outline-offset: 2px; }
.portal-list { padding: 0; }
.portal-list table { min-width: 640px; }
.portal-list th { padding: .8rem 1rem; background: #f8fafc; }
.portal-list td { padding: .85rem 1rem; vertical-align: middle; }
.portal-list tbody tr { cursor: pointer; transition: background .12s; }
.portal-list tbody tr:hover { background: #f0f4f9; }
.tk-lijst tr[data-href], .portals-table tr[data-href], .bh-rijen tr[data-href] { cursor: pointer; transition: background .12s; }
.tk-lijst tr[data-href]:hover, .portals-table tr[data-href]:hover, .bh-rijen tr[data-href]:hover { background: #f0f4f9; }
.tk-lijst .tk-nr { color: inherit; text-decoration: none; }
.tk-lijst tr[data-href]:hover .tk-nr, .tk-lijst .tk-nr:focus-visible { text-decoration: underline; }
.pl-name { font-weight: 700; text-decoration: none; color: var(--ink); }
.pl-host, .pl-sub { display: block; font-size: .83rem; color: var(--muted); }
.pl-mono { font-variant-numeric: tabular-nums; }
.pl-go { width: 1%; color: var(--muted); }

/* ---------------------------------------------------------------------------------------------
   Schakelaar licht/donker en de donkere modus (alleen ingelogd; de inlogpagina's zijn al donker)
   --------------------------------------------------------------------------------------------- */
/* Compact: label en de twee keuzes op één regel, zelfde hoogte als een menuregel */
.theme-pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 0 10px; }
.tp-label { font-size: 13px; font-weight: 500; color: #586477; }
.tp-opts { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: #e9eef6; }
.tp-opts button { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 0; border-radius: 6px; background: none;
  font: inherit; font-size: 12.5px; font-weight: 600; color: #586477; cursor: pointer; }
.tp-opts button svg { width: 14px; height: 14px; }
.tp-opts button:hover { color: #0d1828; }
.tp-opts button[aria-pressed="true"] { background: #fff; color: #0d1828; box-shadow: 0 1px 3px rgba(13,24,40,.15); }
.tp-opts button[aria-pressed="true"] svg { color: #1f6fb0; }
.tp-opts button:focus-visible { outline: 2px solid #4fb3ff; outline-offset: 1px; }
html[data-theme="dark"] .tp-label { color: #a3afc2; }
html[data-theme="dark"] .tp-opts { background: #0f1a2b; }
html[data-theme="dark"] .tp-opts button { color: #a3afc2; }
html[data-theme="dark"] .tp-opts button:hover { color: #fff; }
html[data-theme="dark"] .tp-opts button[aria-pressed="true"] { background: #1f2f48; color: #fff; box-shadow: none; }
html[data-theme="dark"] .tp-opts button[aria-pressed="true"] svg { color: #4fb3ff; }
html[data-theme="dark"] .tp-opts button[data-theme-set="dark"][aria-pressed="true"] svg { color: #4fb3ff; }

html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body:not(.dark-auth) {
  --ink: #e9eef6; --bg: #0b1422; --card: #121e31; --line: #26364f; --muted: #a3afc2; --code: #17263d;
  --green-soft: rgba(79,179,255,.16); --ok: #c3dc86; --warn: #ffd27a; --warn-soft: rgba(255,190,80,.14); --bad: #ffb4ab; --bad-soft: rgba(220,60,50,.18);
  --ai-ink: #9fd6ff; background: var(--bg); color: var(--ink); }
html[data-theme="dark"] body:not(.dark-auth) a:hover { color: #9fd6ff; }
/* vlakken die vast wit waren */
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea,
html[data-theme="dark"] .addr, html[data-theme="dark"] .msg.ai, html[data-theme="dark"] .composer, html[data-theme="dark"] .composer textarea,
html[data-theme="dark"] .suggestions button, html[data-theme="dark"] .tabs a, html[data-theme="dark"] .idee-quote,
html[data-theme="dark"] .stat, html[data-theme="dark"] .view-toggle, html[data-theme="dark"] .new-card:hover, html[data-theme="dark"] .dnsbox code,
html[data-theme="dark"] .btn.ghost::before, html[data-theme="dark"] .btn.danger::before, html[data-theme="dark"] dialog { background: var(--card); color: var(--ink); }
html[data-theme="dark"] .messages, html[data-theme="dark"] .diff, html[data-theme="dark"] .portal-list th { background: #0f1a2b; }
html[data-theme="dark"] .portal-list tbody tr:hover, html[data-theme="dark"] .tk-lijst tr[data-href]:hover, html[data-theme="dark"] .portals-table tr[data-href]:hover, html[data-theme="dark"] .bh-rijen tr[data-href]:hover { background: #17263d; }
/* donkere modus: hover gaat naar bijna zwart, zodat het afsteekt tegen de donkere achtergrond */
html[data-theme="dark"] body:not(.dark-auth) { --btn-hover: #060c16; --btn-hover-dark: #2f4361; }
html[data-theme="dark"] .card { box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.25); }
/* tekst op groen blijft donker, donkere vlakken blijven donker */
html[data-theme="dark"] .btn.primary, html[data-theme="dark"] .count, html[data-theme="dark"] .msg.user { color: #0d1828; }
html[data-theme="dark"] .btn.dark::before { background: #1f3352; }
html[data-theme="dark"] .tabs a.on, html[data-theme="dark"] .view-toggle button[aria-pressed="true"] { background: #e9eef6; color: #0d1828; }
html[data-theme="dark"] .log { background: #060c16; }
html[data-theme="dark"] .steps li.done::before { box-shadow: inset 0 0 0 3px var(--card); }
html[data-theme="dark"] .steps li::before { border-color: #404f65; }
/* meldingen en labels */
html[data-theme="dark"] .notice { background: rgba(165,195,92,.16); color: #d6e8a8; }
html[data-theme="dark"] .warn { color: #ffd27a; }
html[data-theme="dark"] .trial { border-color: #1e324f; }
html[data-theme="dark"] .trial.over { border-color: #5a4a22; }
html[data-theme="dark"] .s-verlopen, html[data-theme="dark"] .s-uit { background: #1f2f48; }
html[data-theme="dark"] .idee-notice { background: rgba(79,179,255,.14); color: #bfe0ff; }
html[data-theme="dark"] .soon-ico, html[data-theme="dark"] .contact-ico { background: #1a2a44; color: #9fd6ff; }
html[data-theme="dark"] .pl-name, html[data-theme="dark"] .stat strong, html[data-theme="dark"] .contact-line { color: var(--ink); }
html[data-theme="dark"] .diff .add { color: #b7dc7a; background: rgba(31,180,60,.14); }
html[data-theme="dark"] .diff .del { background: rgba(220,60,50,.14); }
html[data-theme="dark"] .diff .hunk { color: #8fb4ff; }
html[data-theme="dark"] .qr { background: #fff; border-radius: 12px; padding: 12px; width: max-content; margin-inline: auto; }

/* gebruikersmenu rechtsboven (naam openklikken) */
details.side-user { position: relative; flex: none; display: block; padding: 0; border: 0; margin: 0; }
.side-user > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 5px 8px 5px 5px; border-radius: 12px; cursor: pointer; color: #c0cad8; }
.side-user > summary::-webkit-details-marker { display: none; }
.side-user > summary:hover, .side-user[open] > summary { background: #15233a; }
.side-user > summary:focus-visible { outline: 2px solid #4fb3ff; outline-offset: 2px; }
.side-user > summary > svg { flex: none; color: #7a889d; transition: transform .15s; }
.side-user[open] > summary > svg { transform: rotate(180deg); }
.um-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 280px; padding: 8px; border-radius: 14px; background: #fff; color: #0d1828;
  border: 1px solid #d1dae8; box-shadow: 0 18px 50px rgba(0,0,0,.25); }
.um-head { display: flex; flex-direction: column; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid #dde4ee; line-height: 1.3; }
.um-head strong { font-size: 14px; } .um-head span { font-size: 12.5px; color: #586477; overflow: hidden; text-overflow: ellipsis; }
.um-panel form { margin: 0; }
.um-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 0 10px; border: 0; border-radius: 9px; background: none;
  font: inherit; font-size: 14px; font-weight: 600; color: #0d1828; text-decoration: none; cursor: pointer; text-align: left; }
.um-item:hover { background: #e9eef6; color: #0d1828; }
.um-item > svg { flex: none; color: #586477; }
.um-item > span { flex: 1; }
.trial.bijna { background: #eef4ff; border-color: #cddcf5; }
.trial.bijna .trial-inner { position: relative; justify-content: center; text-align: center; padding-right: 3.25rem; padding-left: 3.25rem; }
.trial-x { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: inherit; font: 400 20px/1 Asap, sans-serif; cursor: pointer; opacity: .7; }
.trial-x:hover { opacity: 1; background: rgba(13,24,40,.08); }
html[data-theme="dark"] .trial.bijna { background: rgba(79,179,255,.12); border-color: #2c4a66; }
.um-out { border-top: 1px solid #dde4ee; border-radius: 0 0 9px 9px; margin-top: 4px; padding-top: 2px; }
html[data-theme="dark"] .um-panel { background: #121e31; color: #e9eef6; border-color: #26364f; }
html[data-theme="dark"] .um-head { border-color: #26364f; } html[data-theme="dark"] .um-head span { color: #a3afc2; }
html[data-theme="dark"] .um-item { color: #e9eef6; } html[data-theme="dark"] .um-item:hover { background: #182840; color: #fff; }
html[data-theme="dark"] .um-item > svg { color: #a3afc2; } html[data-theme="dark"] .um-out { border-color: #26364f; }
@media (max-width: 900px) { .side-user > summary .side-av { display: inline-flex; } .um-panel { position: fixed; right: 10px; top: 62px; } }

/* ---------------------------------------------------------------------------------------------
   Bouwscherm van een portal: modernere opbouw (alleen vormgeving, binnen #portal)
   --------------------------------------------------------------------------------------------- */
.portal-head { margin-bottom: 1.1rem; }
.portal-head h1 { font-size: clamp(1.5rem, 2.4vw, 2rem); gap: .75rem; }
.portal-head h1 .badge { font-family: Asap, sans-serif; font-size: .78rem; padding: .25rem .7rem; letter-spacing: .02em; }
#portal .split { grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; }
#portal .card { border-radius: 18px; box-shadow: 0 1px 2px rgba(13,24,40,.04), 0 8px 24px rgba(13,24,40,.05); }

/* knoppen in het bouwscherm: rustig en afgerond in plaats van schuin */
#portal .btn::before { transform: none; left: 0; right: 0; border-radius: 10px; }
#portal .btn { padding: 0 18px; min-height: 40px; text-transform: none; letter-spacing: 0; font-size: 14px; }
#portal .btn.small { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
#portal .btn.ghost::before { border-width: 1px; border-color: var(--line); }

/* chat */
#portal .chat { display: flex; flex-direction: column; min-height: calc(100vh - 210px); }
#portal .chat-head { padding: .9rem 1.25rem; border-bottom: 1px solid var(--line); }
#portal .chat-head h2 { font-size: 1.05rem; display: flex; align-items: center; gap: .55rem; }
#portal .chat-head h2::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #4fb3ff; box-shadow: 0 0 0 4px rgba(79,179,255,.18); }
#portal .chat-head .linkbtn { text-decoration: none; padding: .35rem .7rem; border-radius: 8px; border: 1px solid var(--line); font-weight: 600; }
#portal .chat-head .linkbtn:hover { border-color: var(--ink); }
#portal .credit { padding: .55rem 1.25rem; font-size: .85rem; background: transparent; border-bottom: 1px solid var(--line); }
#portal .credit-label { font-weight: 600; color: var(--muted); }
#portal .credit-label .kort, #portal .composer .hint-kort { display: none; }
#portal .credit .meter { height: 6px; }
#portal .credit .meter span { background: linear-gradient(90deg, #9fd6ff, #4fb3ff); }
#portal .credit .tg-meter.vol span { background: #e0a030; }
#portal .credit .tg-meter.leeg span { background: var(--bad); }
#portal .credit.op [data-credit-pct] { color: var(--bad); }
#portal .messages { flex: 1; height: auto; min-height: 360px; max-height: calc(100vh - 430px); padding: 1.5rem 1.5rem 1rem; gap: 1rem; background: transparent; }
#portal .msg { font-size: .97rem; line-height: 1.65; }
#portal .msg.user { max-width: 72%; padding: .7rem 1rem; border-radius: 18px 18px 6px 18px; background: var(--green); color: #0d1828; box-shadow: 0 2px 8px rgba(31,150,60,.18); }
#portal .msg.ai { position: relative; max-width: min(820px, calc(100% - 44px)); margin-left: 44px; padding: 1rem 1.2rem; border-radius: 6px 18px 18px 18px;
  background: var(--card, #fff); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(13,24,40,.04); }
#portal .msg.ai::before { content: ""; position: absolute; left: -44px; top: 2px; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #b9e2ff, #4fb3ff 70%); box-shadow: 0 0 12px rgba(79,179,255,.45); }
#portal .msg.ai::after { content: ""; position: absolute; left: -36px; top: 10px; width: 14px; height: 14px;
  background: #0d1828;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
#portal .msg.ai strong, #portal .msg.ai b { color: var(--ink); }
#portal .msg.ai code { font-size: .86em; }
#portal .msg.sys { font-size: .82rem; padding: .3rem .8rem; border-radius: 999px; background: var(--code); }
#portal .steps-mini { margin-left: 44px; padding: .3rem .75rem; border-radius: 999px; background: var(--code); font-size: .8rem; }
#portal .steps-mini[open] { border-radius: 12px; padding: .5rem .8rem; }
#portal .steps-mini summary { list-style: none; display: flex; align-items: center; gap: .4rem; }
#portal .steps-mini summary::-webkit-details-marker { display: none; }
#portal .steps-mini summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
#portal .steps-mini[open] summary::before { transform: rotate(45deg); }
#portal .working { margin-left: 44px; }

/* opdrachtveld als zwevende invoerkaart */
#portal .composer { position: sticky; bottom: 0; gap: .5rem; padding: .9rem 1.25rem 1.1rem; background: linear-gradient(to top, var(--card, #fff) 80%, transparent); border-top: 0; }
#portal .composer-label { font-size: .82rem; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
#portal .composer textarea { min-height: 4.6rem; padding: .85rem 1rem; border-radius: 16px; border: 1px solid var(--line); font-size: 1rem;
  box-shadow: 0 2px 12px rgba(13,24,40,.06); transition: border-color .15s, box-shadow .15s; }
#portal .composer textarea:focus { border-color: #4fb3ff; box-shadow: 0 0 0 4px rgba(79,179,255,.15), 0 2px 12px rgba(13,24,40,.06); }
#portal .composer .suggestions button { border-radius: 999px; border: 1px solid var(--line); font-weight: 600; padding: .35rem .85rem; }
#portal .composer [data-send] { min-width: 120px; }

/* zijkolom */
#portal .side { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 1rem; }
#portal .side .card { padding: 1.15rem 1.2rem; margin: 0; }
#portal .side .card > h2, #portal .side .card > .row > h2 { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-family: Asap, sans-serif; margin-bottom: .8rem; }
#portal .versions { position: relative; gap: .7rem; }
#portal .version { border: 0; border-radius: 14px; padding: .85rem .9rem; background: var(--code); }
#portal .version.live { background: rgba(165,195,92,.12); }
#portal .version.dev { background: rgba(79,179,255,.09); border: 0; box-shadow: inset 0 0 0 1px rgba(79,179,255,.45); }
#portal .version.dev.same { background: var(--code); box-shadow: none; }
#portal .version .vlabel { padding: .15rem .55rem; border-radius: 999px; background: rgba(79,179,255,.25); color: #1f5f9a; font-size: .7rem; }
#portal .version .vlabel.test { background: rgba(79,179,255,.18); color: #1f6fb0; }
#portal .version .vactions { padding-left: 0; margin-top: .2rem; }
/* Na publiceren: prijs van de testversie in de testversie-kaart */
#portal .v-prijs { flex-basis: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: .6rem;
  padding: .5rem .65rem; border-radius: 10px; background: rgba(255,255,255,.7); }
#portal .v-prijs[hidden] { display: none; }
#portal .v-prijs strong { white-space: nowrap; }
#portal .v-verschil { white-space: nowrap; font-weight: 600; color: var(--muted); }
#portal .v-verschil.op { color: #1f6fb0; }
#portal .v-verschil.af { color: #1f5f9a; }
html[data-theme="dark"] #portal .v-prijs { background: rgba(0,0,0,.18); }
html[data-theme="dark"] #portal .v-verschil.op { color: #9fd6ff; }
html[data-theme="dark"] #portal .v-verschil.af { color: #9fd6ff; }
#portal .version .vactions .linkbtn { justify-self: center; }
#portal .codeprice .big { font-family: Byker, Asap, sans-serif; font-size: 2rem; font-weight: 700; margin: .1rem 0 .2rem; }
#portal .domain { padding: .6rem 0; }

html[data-theme="dark"] #portal .msg.ai::after { background: #0d1828; }
html[data-theme="dark"] #portal .version .vlabel { color: #9fd6ff; }
html[data-theme="dark"] #portal .version .vlabel.test { color: #9fd6ff; }
html[data-theme="dark"] #portal .composer textarea { box-shadow: 0 2px 12px rgba(0,0,0,.3); }

@media (max-width: 1000px) {
  #portal .split { grid-template-columns: 1fr; }
  #portal .side { position: static; }
  #portal .chat { min-height: 0; }
  #portal .messages { max-height: 70vh; }
}
@media (max-width: 640px) {
  #portal .msg.ai { margin-left: 0; max-width: 100%; border-radius: 18px; }
  #portal .msg.ai::before, #portal .msg.ai::after { display: none; }
  #portal .steps-mini, #portal .working { margin-left: 0; }
  #portal .msg.user { max-width: 88%; }
}

/* zoeken in portals */
.section-tools { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; }
.portal-search { display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 240px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card, #fff); color: var(--muted); font-weight: 400; }
.portal-search:focus-within { border-color: #4fb3ff; box-shadow: 0 0 0 3px rgba(79,179,255,.15); }
.portal-search input { border: 0; outline: 0; padding: 0; min-height: 40px; background: transparent; box-shadow: none; }
.portal-search input:focus { outline: 0; box-shadow: none; }
[data-zoek][hidden] { display: none !important; }
@media (max-width: 640px) { .section-head { flex-wrap: wrap; } .section-tools { width: 100%; } .portal-search { flex: 1; min-width: 0; } }

/* tabbladen Bouwen / Instellingen en terug-link */
.portal-head { align-items: flex-end; }
.back-link { display: inline-block; margin-bottom: .35rem; font-size: .88rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.back-link:hover { color: var(--ink); }
.portal-tabs { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--card, #fff); border: 1px solid var(--line); }
.portal-tabs a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 9px; font-weight: 600; font-size: .92rem; color: var(--muted); text-decoration: none; }
.portal-tabs a:hover { color: var(--ink); }
.portal-tabs a.on { background: var(--ink); color: #fff; }
.portal-tabs svg, .portal-tabs .pt-portals { display: none; }  /* alleen op de telefoon (menubalk onderin) */
html[data-theme="dark"] .portal-tabs a.on { background: #e9eef6; color: #0d1828; }

/* instellingenpagina */
.settings-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
#portal.settings-page .side { position: static; }
@media (max-width: 1000px) { .settings-grid { grid-template-columns: 1fr; } }

/* instellingen-knop in het overzicht */
.portal-card-wrap { position: relative; }
.portal-card-wrap .portal-card { height: 100%; padding-right: 3.2rem; }
.settings-link { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 10px; color: var(--muted); border: 1px solid var(--line); background: var(--card, #fff); }
.settings-link:hover { color: var(--ink); border-color: var(--ink); }
.portal-card-wrap > .settings-link { position: absolute; top: 14px; right: 14px; z-index: 1; }
.portal-card-wrap .portal-card .row.between { padding-right: .25rem; }
.pl-actions { width: 1%; }

/* domein en mail */
.dm-card .dm-row { display: flex; align-items: center; gap: .8rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.dm-card .dm-row:first-of-type { border-top: 0; padding-top: .2rem; }
.dm-ico { flex: none; display: inline-flex; width: 38px; height: 38px; border-radius: 11px; align-items: center; justify-content: center; background: rgba(79,179,255,.12); color: #1f6fb0; }
.dm-row .grow { min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.dm-hint { display: block; font-size: .85rem; color: var(--muted); margin-top: 3px; max-width: 60ch; }
.dm-knoppen { display: flex; gap: .5rem; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.dm-label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.dm-dialog { padding: 0; overflow-x: hidden; overflow-y: auto; }
.dm-dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.3rem 1.5rem 1rem; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 2; background: var(--card, #fff); }
.dm-dialog-head h2 { margin: 0 0 .2rem; font-size: 1.3rem; }
.dm-dialog-head p { margin: 0; }
.dm-dialog > :not(.dm-dialog-head):not(.dm-section):not([data-keuze-paneel]) { margin-left: 1.5rem; margin-right: 1.5rem; }
.dm-dialog > :last-child { margin-bottom: 1.4rem; }
.dm-section { padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--line); }
.dm-section:last-child { border-bottom: 0; }
.dm-section h3 { margin: 0 0 .65rem; font-size: .8rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.dm-section [data-domain-list]:empty::before { content: "Nog geen eigen domein gekoppeld."; color: var(--muted); font-size: .9rem; }
.dm-form { display: grid; grid-template-columns: minmax(0, 1fr) 160px auto; gap: .6rem; align-items: center; }
.dm-form label { display: block; }
@media (max-width: 640px) { .dm-form { grid-template-columns: 1fr; } }
.dm-steps { margin: 0; padding: 0; list-style: none; counter-reset: stap; display: grid; gap: .9rem; }
.dm-steps li { counter-increment: stap; position: relative; padding-left: 2.4rem; display: flex; flex-direction: column; gap: .45rem; }
.dm-steps li::before { content: counter(stap); position: absolute; left: 0; top: -2px; width: 1.65rem; height: 1.65rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--green); color: #0d1828; font-weight: 800; font-size: .85rem; }
.dns-table { width: 100%; border: 1px solid var(--line); border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: .9rem; }
.dns-table th { padding: .55rem .8rem; background: var(--code); font-size: .75rem; }
.dns-table td { padding: .6rem .8rem; border-bottom: 1px solid var(--line); }
.dns-table tr:last-child td { border-bottom: 0; }
.dns-val { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.dns-copy { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; background: var(--card, #fff); color: var(--muted); cursor: pointer; }
.dns-copy:hover { color: var(--ink); border-color: var(--ink); }
.dns-copy.ok { color: #4e7a1e; border-color: #a5c35c; }
.dm-tip { margin-left: .3rem; padding: 1px 7px; border-radius: 999px; background: rgba(79,179,255,.2); color: #1f5f9a; font-size: .72rem; font-weight: 700; }
html[data-theme="dark"] .dm-ico { color: #9fd6ff; }
html[data-theme="dark"] .dm-tip { color: #9fd6ff; }

/* portal verwijderen */
.delete-dialog .dm-dialog-head { align-items: center; }
.del-title { display: flex; align-items: center; gap: .7rem; }
.del-title h2 { margin: 0; }
.del-ico { display: inline-flex; width: 38px; height: 38px; border-radius: 11px; align-items: center; justify-content: center; background: var(--bad-soft); color: var(--bad); }
.del-list { margin: .2rem 0 .8rem; padding-left: 1.2rem; display: grid; gap: .25rem; }
.del-warn { font-weight: 700; color: var(--bad); }
.del-name { user-select: all; }
.delete-dialog input:focus { border-color: var(--bad); outline: 3px solid rgba(179,38,30,.15); }
.del-actions { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem 1.3rem; }
.delete-dialog .stack { gap: 0; }

/* alleen voor schermlezers */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------------------------------------
   Typografie: rustiger en technischer (minder vet, waarden in monospace)
   --------------------------------------------------------------------------------------------- */
body:not(.dark-auth) { --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; -webkit-font-smoothing: antialiased; }
body:not(.dark-auth) strong, body:not(.dark-auth) b { font-weight: 600; }
body:not(.dark-auth) h1 { font-weight: 700; letter-spacing: -.015em; }
body:not(.dark-auth) h2, body:not(.dark-auth) h3 { font-weight: 600; }
body:not(.dark-auth) .btn, body:not(.dark-auth) button.btn { font-weight: 600; }
body:not(.dark-auth) .btn.ghost, body:not(.dark-auth) .btn.small, #portal .btn.small { font-weight: 500; }
body:not(.dark-auth) label { font-weight: 500; }
.side-links a, .portal-tabs a, .view-toggle button, .um-item, .linkbtn { font-weight: 500 !important; }
.badge { font-weight: 600; }

/* labels: klein, licht, ruim gespatieerd */
.dm-label, .stat-label, .dm-section h3, #portal .side .card > h2, #portal .side .card > .row > h2, .portal-list th, th {
  font-weight: 600 !important; font-size: .7rem !important; letter-spacing: .09em !important; }

/* technische waarden in monospace */
.dns-table code, code, .del-name { font-family: var(--mono); }
[data-domain-summary], [data-mail-from], .dm-row strong { font-weight: 600; font-size: .95rem; }
code { font-size: .86em; }

/* namen en cijfers */
.pl-name, .portal-card .title { font-weight: 600; }
.stat strong { font-weight: 600; letter-spacing: -.02em; }
#portal .codeprice .big { font-weight: 600; letter-spacing: -.02em; }
#portal .msg.ai strong, #portal .msg.ai b { font-weight: 600; }

/* kennisbank */
.kb-hero { text-align: center; padding: 1.5rem 1rem 1.75rem; }
.kb-hero h1 { margin-bottom: .3rem; }
.kb-search { display: flex; flex-direction: row; align-items: center; gap: 10px; max-width: 640px; margin: 1.1rem auto 0; padding: 0 16px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--card, #fff); color: var(--muted); box-shadow: 0 6px 24px rgba(13,24,40,.06); font-weight: 400; }
.kb-search:focus-within { border-color: #4fb3ff; box-shadow: 0 0 0 4px rgba(79,179,255,.15); }
.kb-search input { border: 0; outline: 0; box-shadow: none; padding: 0; min-height: 52px; font-size: 1rem; background: transparent; }
.kb-search input:focus { outline: 0; box-shadow: none; }
.kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.kb-cat { margin: 0; }
.kb-cat[hidden] { display: none; }
.kb-cat-head { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: .6rem; }
.kb-cat-head h2 { margin: 0; font-size: 1.05rem; }
.kb-cat-head p { margin: .1rem 0 0; }
.kb-cat-ico, .kb-cat-head .kb-cat-ico { flex: none; display: inline-flex; width: 38px; height: 38px; border-radius: 11px; align-items: center; justify-content: center; background: rgba(79,179,255,.12); color: #1f6fb0; }
.kb-list { list-style: none; margin: 0; padding: 0; }
.kb-list li[hidden] { display: none; }
.kb-list a { display: flex; flex-direction: column; gap: 2px; padding: .65rem .7rem; margin: 0 -.7rem; border-radius: 10px; text-decoration: none; color: var(--ink); }
.kb-list a:hover { background: var(--code); }
.kb-list strong { font-weight: 600; }
.kb-list span { font-size: .86rem; color: var(--muted); }
/* koppelblok onder de FAQ: donker met de groen-blauwe gloed in de hoeken, zoals "Lastige koppeling?" op de homepage */
.kb-koppel { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  flex-wrap: wrap; margin-bottom: 2rem; padding: 1.6rem 1.8rem; border-radius: 16px; background: #0d1828; color: #fff; box-shadow: 0 18px 40px rgba(13,24,40,.18); }
.kb-koppel::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 90% at 100% 0%, rgba(79,179,255,.28), transparent), radial-gradient(ellipse 40% 90% at 0% 100%, rgba(165,195,92,.20), transparent); }
.kb-koppel > div:first-child { flex: 1 1 420px; } .kb-koppel h2 { margin: .5rem 0 .3rem; color: #fff; } .kb-koppel p { margin: 0; color: #c0cad8; }
.kb-koppel-actions { display: flex; gap: .9rem; flex-wrap: wrap; }
.kb-koppel .sbtn.p, .kb-koppel .sbtn.p:hover { color: #0d1828; }
.kb-koppel .stag.ai { color: #4fb3ff; }
.kb-crumbs { display: flex; gap: .5rem; align-items: center; font-size: .88rem; color: var(--muted); margin-bottom: 1rem; }
.kb-crumbs a { color: var(--muted); text-decoration: none; } .kb-crumbs a:hover { color: var(--ink); }
.kb-article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; align-items: start; }
.kb-article { padding: 2rem 2.2rem; margin: 0; }
.kb-article h1 { margin-bottom: .4rem; }
.kb-lead { font-size: 1.08rem; color: var(--muted); margin-bottom: 1.4rem; }
.kb-body { line-height: 1.7; max-width: 72ch; }
.kb-body h3 { margin: 1.6rem 0 .5rem; font-size: 1.05rem; }
.kb-body ol, .kb-body ul { padding-left: 1.3rem; display: grid; gap: .4rem; margin: .4rem 0 1rem; }
.kb-body a { font-weight: 600; }
.kb-tip { padding: .8rem 1rem; border-radius: 12px; background: rgba(79,179,255,.10); border: 1px solid rgba(79,179,255,.3); }
.kb-tip::before { content: "Tip  "; font-weight: 700; color: #1f6fb0; }
.kb-table { width: 100%; border: 1px solid var(--line); border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; margin: .6rem 0 1rem; font-size: .92rem; }
.kb-table th { background: var(--code); padding: .55rem .8rem; }
.kb-table td { padding: .6rem .8rem; border-top: 1px solid var(--line); vertical-align: top; }
.kb-help { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.kb-help span { font-weight: 600; margin-right: auto; }
.kb-side { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 88px; }
.kb-side .card { margin: 0; padding: 1.1rem 1.2rem; }
.kb-side h2 { font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-family: Asap, sans-serif; margin-bottom: .6rem; }
.kb-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.kb-links a { text-decoration: none; font-weight: 500; }
html[data-theme="dark"] .kb-cat-ico { color: #9fd6ff; }
html[data-theme="dark"] .kb-tip::before { color: #9fd6ff; }
@media (max-width: 960px) { .kb-article-grid { grid-template-columns: 1fr; } .kb-side { position: static; } .kb-article { padding: 1.4rem; } }

/* portals: adres en specificaties als labels */
.pc-host { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--muted); }
.pc-host svg { flex: none; color: #4fb3ff; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--code); border: 1px solid var(--line);
  font-size: .78rem; font-weight: 500; color: var(--ink); white-space: nowrap; }
.chip svg { flex: none; color: var(--muted); }
.portal-card { gap: .7rem; }
/* portals: AI-tegoed van deze maand */
.pc-credit { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; align-items: center; gap: .6rem;
  font-size: .8rem; color: var(--muted); margin-top: auto; }
.pc-credit-label { font-weight: 600; }
.pc-credit .meter { height: 6px; margin: 0; }
.pc-credit .meter span { background: linear-gradient(90deg, #9fd6ff, #4fb3ff); }
/* de balken lopen vol naarmate er meer gebruikt is: oranje vanaf 80%, rood bij op */
.pc-credit .meter.vol span { background: #e0a030; }
.pc-credit .meter.leeg span { background: var(--bad); }
.pc-credit .pc-credit-pct.vol { color: var(--warn); font-weight: 600; }
.pc-credit .pc-credit-pct.leeg { color: var(--bad); font-weight: 600; }
.pc-credit-pct { white-space: nowrap; font-variant-numeric: tabular-nums; }
td .pc-credit { grid-template-columns: minmax(60px, 90px) auto; margin: 0; }
.portal-card .chips { margin-top: .15rem; }
.portal-list .pl-name { display: block; margin-bottom: 2px; }
.portal-list td .chips { gap: 5px; }

/* domein en mail: geen woorden middenin afbreken; knop schuift onder de tekst als het niet past */
.dm-card .dm-row { flex-wrap: wrap; row-gap: .5rem; }
.dm-row .grow { flex: 1 1 170px; overflow-wrap: break-word; word-break: normal; }
.dm-row > .btn { margin-left: auto; }

/* portal omgeving */
[data-server] .kv { grid-template-columns: 70px 1fr; gap: .55rem .9rem; font-size: .92rem; align-items: baseline; }
[data-server] .kv dt { font-size: .7rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
[data-server] .kv dd { line-height: 1.45; }
[data-server] .kv dd .muted.small { display: block; margin-top: 2px; }
[data-server] .usage { display: grid; gap: .8rem; padding: .9rem 1rem; border-radius: 14px; background: var(--code); }
[data-server] .usage .row.small { font-size: .85rem; font-weight: 500; }
[data-server] .usage .meter { height: 8px; margin: .35rem 0 0; background: rgba(13,24,40,.08); }
[data-server] .usage .meter span { background: linear-gradient(90deg, #9fd6ff, #4fb3ff); border-radius: 999px; }
/* live verbruik als knop naar het verloop */
.usage-knop { width: 100%; text-align: left; font: inherit; color: inherit; border: 1px solid transparent; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s; }
.usage-knop .usage-rij, .usage-knop .meter { display: block; }
.usage-knop .meter span { display: block; }
.usage-knop:hover, .usage-knop:focus-visible { border-color: #4fb3ff; box-shadow: 0 2px 12px rgba(79,179,255,.15); }
.usage-verloop { display: flex; align-items: center; gap: .45rem; padding-top: .55rem; border-top: 1px solid rgba(13,24,40,.08);
  font-size: .85rem; font-weight: 600; color: #1d7fc4; }
.usage-verloop .chevron { margin-left: auto; transition: transform .15s; }
.usage-knop:hover .usage-verloop .chevron { transform: translateX(3px); }
.warn-badge { background: var(--warn-soft); color: var(--warn); font-weight: 600; }
html[data-theme="dark"] .usage-verloop { color: #9fd6ff; border-top-color: rgba(255,255,255,.08); }
[data-server] [data-uptime] { display: flex; align-items: center; gap: 7px; margin-top: .7rem; font-size: .85rem; }
[data-server] [data-uptime]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #a5c35c; box-shadow: 0 0 0 3px rgba(165,195,92,.25); }
[data-server] [data-uptime]:empty::before { display: none; }
[data-server] [data-delete] { display: inline-flex; align-items: center; gap: 6px; margin-top: 1rem; padding: .45rem .8rem; border: 1px solid rgba(179,38,30,.3);
  border-radius: 10px; color: var(--bad); text-decoration: none; font-size: .85rem; }
[data-server] [data-delete]:hover { background: var(--bad-soft); border-color: var(--bad); }
html[data-theme="dark"] [data-server] .usage .meter { background: rgba(255,255,255,.08); }

/* domein en mail: zelfde stijl als het adres in de lijst */
.dm-card .dm-row { flex-wrap: nowrap; align-items: center; }
.dm-row .grow { flex: 1 1 auto; min-width: 0; }
.dm-val { display: flex; align-items: flex-start; gap: 7px; margin-top: 3px; }
.dm-val svg { flex: none; margin-top: 3px; color: #4fb3ff; }
.dm-val strong, [data-domain-summary], [data-mail-from] { font-weight: 500 !important; font-size: .92rem !important; color: var(--ink); overflow-wrap: anywhere; }
.mf-naam { display: block; }
.mf-adres { display: block; font-weight: 400; font-size: .84rem; color: var(--muted); }
.dm-row > .btn { flex: none; margin-left: .75rem; }
@media (max-width: 380px) { .dm-card .dm-row { flex-wrap: wrap; } .dm-row > .btn { margin-left: auto; } }

/* AI-avatar in het bouwscherm: eigen beeldmerk (donker vlak, "AI" in blauw, schuin groen accent) */
#portal .msg.ai::before { content: "AI"; left: -44px; top: 2px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: #0d1828; color: #4fb3ff; font: 800 11.5px/1 Asap, sans-serif; letter-spacing: .02em; box-shadow: 0 0 0 1px rgba(79,179,255,.35); }
#portal .msg.ai::after { content: ""; left: -40px; top: 26px; width: 22px; height: 3px; border-radius: 0; background: #4fb3ff; clip-path: none;
  transform: skewX(-18deg); }
html[data-theme="dark"] #portal .msg.ai::before { background: #1a2a44; }
html[data-theme="dark"] #portal .msg.ai::after { background: #4fb3ff; }

/* AI-avatar = het favicon */
#portal .msg.ai::before { content: ""; background: url("/static/favicon.svg?v=2") center / cover no-repeat; border-radius: 8px;
  box-shadow: 0 0 10px rgba(79,179,255,.25); }
#portal .msg.ai::after { display: none; }
html[data-theme="dark"] #portal .msg.ai::before { background: url("/static/favicon.svg?v=2") center / cover no-repeat; box-shadow: 0 0 0 1px #26364f, 0 0 10px rgba(79,179,255,.2); }

/* chat zonder AI-icoon: berichten, stappen en "bezig" weer links uitgelijnd */
#portal .msg.ai::before, #portal .msg.ai::after { display: none !important; }
#portal .msg.ai { margin-left: 0; max-width: min(820px, 100%); }
#portal .steps-mini, #portal .working { margin-left: 0; }

/* support: eerst zelf proberen */
.zelf-proberen { margin-top: 1.25rem; }
.zp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.zp-head h2 { margin: 0 0 .2rem; } .zp-head p { margin: 0; }
.zp-search { max-width: none; margin: 1rem 0 .6rem; box-shadow: none; }
.zp-search input { min-height: 46px; }
.zp-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .3rem 1rem; }
.zp-links a { display: flex; flex-direction: column; gap: 2px; padding: .6rem .7rem; margin: 0 -.7rem; border-radius: 10px; text-decoration: none; color: var(--ink); }
.zp-links a:hover { background: var(--code); }
.zp-links strong { font-weight: 600; } .zp-links span { font-size: .85rem; color: var(--muted); }

/* uitklapmenu Support (Ticket en contact, FAQ) */
@media (min-width: 901px) { .side-links { overflow: visible; } }
.nav-drop { position: relative; }
.nav-drop > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 11px 0 13px; border-radius: 9px; color: #c0cad8;
  font-weight: 500; font-size: 14.5px; white-space: nowrap; cursor: pointer; }
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav-drop > summary svg { flex: none; color: #7a889d; }
.nav-drop > summary > svg:last-child { transition: transform .15s; }
.nav-drop[open] > summary > svg:last-child { transform: rotate(180deg); }
.nav-drop > summary:hover, .nav-drop[open] > summary { background: #15233a; color: #fff; }
.nav-drop > summary.on { background: #1a2a44; color: #fff; box-shadow: inset 0 -2px 0 #4fb3ff; }
.nav-drop > summary.on svg:first-child { color: #4fb3ff; }
.nav-drop > summary:focus-visible { outline: 2px solid #4fb3ff; outline-offset: 2px; }
.nav-drop-panel { position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; width: 280px; padding: 6px; border-radius: 14px; background: #fff;
  border: 1px solid #d1dae8; box-shadow: 0 18px 50px rgba(0,0,0,.25); }
.nav-drop-panel a { display: flex; align-items: flex-start; gap: 10px; padding: 10px 11px; border-radius: 10px; color: #0d1828; text-decoration: none; }
.nav-drop-panel a:hover, .nav-drop-panel a.on { background: #e9eef6; }
.nav-drop-panel a svg { flex: none; margin-top: 2px; color: #4fb3ff; }
.nav-drop-panel strong { display: block; font-size: 14px; font-weight: 600; }
.nav-drop-panel small { display: block; font-size: 12.5px; color: #586477; }
html[data-theme="dark"] .nav-drop-panel { background: #121e31; border-color: #26364f; }
html[data-theme="dark"] .nav-drop-panel a { color: #e9eef6; }
html[data-theme="dark"] .nav-drop-panel a:hover, html[data-theme="dark"] .nav-drop-panel a.on { background: #182840; }
html[data-theme="dark"] .nav-drop-panel small { color: #a3afc2; }
@media (max-width: 900px) { .nav-drop-panel { position: fixed; left: 10px; top: 62px; } .nav-drop > summary { min-height: 38px; padding: 0 10px; font-size: 13.5px; } }
@media (max-width: 640px) { .nav-drop > summary span { display: none; } }

/* paneel van Support: niet de stijl van de donkere menubalk erven */
.side-links .nav-drop-panel a { min-height: 0; padding: 10px 11px; white-space: normal; font-size: 14px; color: #0d1828; background: none; box-shadow: none; }
.side-links .nav-drop-panel a:hover { background: #e9eef6; color: #0d1828; }
.side-links .nav-drop-panel a.on { background: #e2e8f2; color: #0d1828; box-shadow: none; }
.side-links .nav-drop-panel a svg, .side-links .nav-drop-panel a:hover svg { color: #4fb3ff; }
.side-links .nav-drop-panel a.on svg { color: #1f6fb0; }
.side-links .nav-drop-panel a.on strong::after { content: "Huidige pagina"; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: #4fb3ff; color: #0d1828; font-size: 10.5px; font-weight: 700; vertical-align: 1px; }
html[data-theme="dark"] .side-links .nav-drop-panel a { color: #e9eef6; }
html[data-theme="dark"] .side-links .nav-drop-panel a:hover { background: #182840; color: #fff; }
html[data-theme="dark"] .side-links .nav-drop-panel a.on { background: #192942; color: #fff; }
html[data-theme="dark"] .side-links .nav-drop-panel a.on svg { color: #4fb3ff; }

/* tabbladen onder Instellingen */
.settings-tabs { display: flex; gap: 4px; margin: -.4rem 0 1.5rem; border-bottom: 1px solid var(--line); }
.settings-tabs a { position: relative; padding: .7rem 1rem; font-weight: 500; font-size: .95rem; color: var(--muted); text-decoration: none; }
.settings-tabs a:hover { color: var(--ink); }
.settings-tabs a.on { color: var(--ink); font-weight: 600; }
.settings-tabs a.on::after { content: ""; position: absolute; left: .6rem; right: .6rem; bottom: -1px; height: 2px; border-radius: 2px; background: #4fb3ff; }

/* ---------------------------------------------------------------------------------------------
   Donkere modus in de stijl en kleuren van www.jouwaiportal.nl
   --------------------------------------------------------------------------------------------- */
html[data-theme="dark"] body:not(.dark-auth) {
  --ink: #eef2f8; --bg: #0d1828; --card: #15233a; --line: #2a3b57; --muted: #a3afc2; --code: #1c2b42; --ai-ink: #4fb3ff;
  background-color: #0d1828;
  background-image: radial-gradient(ellipse 50% 45% at 85% 0%, rgba(79,179,255,.24), rgba(79,179,255,0) 70%),
    radial-gradient(ellipse 50% 45% at 5% 100%, rgba(165,195,92,.18), rgba(165,195,92,0) 70%);
  background-attachment: fixed; }
html[data-theme="dark"] body:not(.dark-auth) .side-nav { background: rgba(13,24,40,.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
html[data-theme="dark"] body:not(.dark-auth) .side-links a.on { box-shadow: inset 0 -2px 0 #4fb3ff; }
html[data-theme="dark"] body:not(.dark-auth) .side-links a.on svg { color: #4fb3ff; }
html[data-theme="dark"] body:not(.dark-auth) main h1, html[data-theme="dark"] body:not(.dark-auth) main h2 { color: #fff; letter-spacing: -.01em; }
html[data-theme="dark"] body:not(.dark-auth) .card { background: rgba(22,37,59,.86); border-color: #1e3250; box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 18px 40px rgba(0,0,0,.28); }
html[data-theme="dark"] body:not(.dark-auth) input, html[data-theme="dark"] body:not(.dark-auth) select, html[data-theme="dark"] body:not(.dark-auth) textarea, html[data-theme="dark"] body:not(.dark-auth) .composer,
html[data-theme="dark"] body:not(.dark-auth) .composer textarea { background: #131f31; border-color: #2a3b57; }
html[data-theme="dark"] body:not(.dark-auth) .messages, html[data-theme="dark"] body:not(.dark-auth) .diff, html[data-theme="dark"] body:not(.dark-auth) .portal-list th { background: #0e1826; }
html[data-theme="dark"] body:not(.dark-auth) .tabs a.on, html[data-theme="dark"] body:not(.dark-auth) .portal-tabs a.on, html[data-theme="dark"] body:not(.dark-auth) .view-toggle button[aria-pressed="true"] {
  background: var(--green); color: #0d1828; box-shadow: none; }
html[data-theme="dark"] body:not(.dark-auth) .um-panel, html[data-theme="dark"] body:not(.dark-auth) .nav-drop-panel { background: #15233a; border-color: #2a3b57; }
html[data-theme="dark"] body:not(.dark-auth) .um-item:hover, html[data-theme="dark"] body:not(.dark-auth) .nav-drop-panel a:hover { background: #1c2b42; }
html[data-theme="dark"] body:not(.dark-auth) a:focus-visible, html[data-theme="dark"] body:not(.dark-auth) .btn:focus-visible { outline-color: rgba(79,179,255,.6); }

/* "Wat is er nieuw": pagina /nieuw */
.news-page { display: flex; flex-direction: column; gap: 1rem; max-width: 760px; margin-top: 1.25rem; }
.news-page .news-list { margin-bottom: 0; }
.news-list { list-style: none; margin: .75rem 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.news-list li { display: flex; gap: .9rem; align-items: flex-start; }
.news-list strong { display: block; margin-bottom: .15rem; }
.news-list p { margin: 0; color: var(--muted); font-size: .95rem; }
.news-ico { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; margin-top: .1rem; color: var(--green-dark); }
html[data-theme="dark"] .news-ico { color: var(--green); }

/* "Wat is er nieuw": pop-up na het inloggen, in de stijl van de homepage (altijd donker, in lichte én donkere modus) */
/* Past altijd in het venster: bij veel punten scrolt de inhoud binnen de pop-up. De gloed staat als achtergrond
   op de dialog zelf (niet op een ::before), zodat hij in de hoeken blijft terwijl de inhoud scrolt. */
dialog.news, html[data-theme="dark"] dialog.news { position: relative; isolation: isolate; width: min(640px, 94vw); max-height: calc(100vh - 40px);
  padding: 36px 36px 30px; color: #fff; border-radius: 16px; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 30px 80px rgba(0,0,0,.45);
  background: radial-gradient(ellipse 55% 45% at 85% 0%, rgba(79,179,255,.32), rgba(79,179,255,0)),
              radial-gradient(ellipse 45% 40% at 8% 100%, rgba(165,195,92,.22), rgba(165,195,92,0)), #20211c; }
.nw-x { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08);
  color: #fff; font: inherit; font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.nw-x:hover { background: rgba(255,255,255,.16); }
.nw-tag { position: relative; z-index: 0; display: inline-block; padding: 7px 20px; font-weight: 700; font-size: 12.5px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--green); }
.nw-tag::before { content: ""; position: absolute; top: 0; bottom: 0; left: 6px; right: 6px; transform: skewX(-18deg); background: rgba(79,179,255,.16); z-index: -1; }
dialog.news h2 { margin: 12px 0 8px; font-size: 32px; line-height: 1.12; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.nw-ai { color: #4fb3ff; text-shadow: 0 0 24px rgba(79,179,255,.55); }
.nw-lead { margin: 0 0 24px; color: #dce4f0; font-size: 16px; line-height: 1.55; }
dialog.news .news-list { counter-reset: nw; margin: 0; gap: 10px; }
dialog.news .news-list li { gap: 16px; padding: 16px 18px; background: rgba(22,37,59,.85); border: 1px solid #2a3b57; border-radius: 12px; }
dialog.news .news-list li:hover { border-color: rgba(79,179,255,.6); }
dialog.news .news-ico { width: 28px; height: 28px; margin-top: 16px; color: var(--green); }
dialog.news .news-ico svg { width: 24px; height: 24px; stroke-width: 1.9; }
dialog.news .news-list div::before { counter-increment: nw; content: "0" counter(nw); display: block; margin-bottom: 2px; font-size: 11.5px;
  font-weight: 800; letter-spacing: 1px; color: #a3afc2; }
dialog.news .news-list strong { font-size: 16.5px; line-height: 1.3; color: #fff; margin-bottom: 4px; }
dialog.news .news-list p { color: #c0cad8; font-size: 14.5px; line-height: 1.55; }
dialog.news .news-list a, dialog.news .news-list .linkbtn { color: #4fb3ff; font: inherit; font-weight: 700; text-decoration: none; white-space: nowrap; padding: 0; }
dialog.news .news-list a::after, dialog.news .news-list .linkbtn::after { content: " \2192"; }
dialog.news .news-list a:hover, dialog.news .news-list .linkbtn:hover { color: #8fd0ff; }
.nw-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 26px; padding-top: 20px; border-top: 1px solid #2a3b57; }
.nw-meta { font-size: 13px; color: #a3afc2; } .nw-meta b { color: #fff; }
.nw-acts { display: flex; gap: 4px; }
.nw-btn { position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 30px; font: inherit;
  font-weight: 700; font-size: 13.5px; letter-spacing: .6px; text-transform: uppercase; text-decoration: none; cursor: pointer; border: 0; border-radius: 0;
  background: none; color: #fff; transition: transform .15s; white-space: nowrap; }
.nw-btn:hover { transform: translateY(-1px); color: #fff; }
.nw-btn::before { content: ""; position: absolute; top: 0; bottom: 0; left: 8px; right: 8px; transform: skewX(-18deg); z-index: -1; transition: background .15s; }
.nw-btn.p::before { background: var(--green); } .nw-btn.p:hover::before { background: #3ea2ee; }
.nw-btn.w::before { border: 1.5px solid rgba(255,255,255,.55); } .nw-btn.w:hover::before { border-color: #fff; }
.nw-btn:focus-visible, .nw-x:focus-visible { outline: 2px solid #4fb3ff; outline-offset: 3px; }
@media (max-width: 520px) {
  dialog.news, html[data-theme="dark"] dialog.news { padding: 28px 22px 24px; }
  dialog.news h2 { font-size: 26px; }
  .nw-foot { flex-direction: column; align-items: stretch; } .nw-acts { flex-direction: column; }
}

/* reacties op tickets */
.side-av { position: relative; }
.av-count { position: absolute; top: -5px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #e5484d; color: #fff;
  font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #0d1828; }
.count[data-ticket-count] { background: #e5484d; color: #fff; }
.dot-new { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #e5484d; vertical-align: middle; }
.new-txt { color: #e5484d; }
.ticket-link { display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; }
.ticket-link:hover .ticket-sub { text-decoration: underline; text-decoration-color: var(--green); }
.ticket-thread { display: flex; flex-direction: column; gap: 1rem; }
.tm { padding: .9rem 1rem; border-radius: 12px; background: var(--code); max-width: 85%; }
.tm.staff { align-self: flex-end; background: var(--green-soft); }
.tm header { margin-bottom: .3rem; }
.tm p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ticket-toast { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: flex; align-items: center; gap: 14px; max-width: min(440px, calc(100vw - 40px));
  padding: 14px 14px 14px 18px; border-radius: 14px; background: #0d1828; color: #fff; box-shadow: 0 18px 50px rgba(0,0,0,.35); border-left: 4px solid #e5484d;
  animation: toast-in .25s ease-out; }
.ticket-toast > div { display: flex; flex-direction: column; min-width: 0; }
.ticket-toast span { color: #c0cad8; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-toast .tt-close { border: 0; background: none; color: #a3afc2; font-size: 20px; cursor: pointer; padding: 0 4px; }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ticket-toast { animation: none; } }

/* Instellingen in "Portal omgeving": label links, veld rechts, alles op één regel */
.setting-rows { display: grid; gap: .45rem; }
.setting { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: center; gap: .75rem; font-size: .9rem; }
.setting > label:first-child, .setting > span:first-child { font-weight: 600; }
.setting select { width: 100%; padding: .4rem .6rem; }
.setting input.narrow { width: 6rem; padding: .4rem .6rem; }
.setting label.check { margin: 0; align-items: center; }
.setting label.check input { margin-top: 0; }
.setting .seg { justify-self: start; margin: 0; }
.setting .seg button:not(.on):hover { color: var(--ink); }
.controle-uitleg { margin: .1rem 0 0 9.25rem; }
.controle-uitleg span { display: block; margin-top: .25rem; }
.ruim-kop { display: flex; align-items: center; gap: .5rem; margin: 0; }
.ruim-kop svg { color: var(--warn); flex: none; }
[data-ruim-dialog] ul { margin: 0; padding-left: 1.1rem; }
[data-ruim-dialog] li { margin: .2rem 0; }
.ruim-vast { padding: .6rem .75rem; border-radius: 8px; margin: 0; }
.ruim-knoppen { justify-content: flex-end; gap: .5rem; }
@media (max-width: 600px) { .controle-uitleg { margin-left: 0; } }

/* beheer: organisatie-overzicht in de stijl van het portaloverzicht */
.bh-list table { min-width: 760px; }
.bh-list .bh-acts { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bh-list .bh-acts form { margin: 0; }
.bh-list .btn::before { transform: none; left: 0; right: 0; border-radius: 9px; }
.bh-list .btn.small { min-height: 34px; padding: 0 12px; font-size: .83rem; text-transform: none; letter-spacing: 0; }
.bh-list .btn.ghost::before { border-width: 1px; border-color: var(--line); background: var(--card, #fff); }
.bh-mail { color: var(--ink); text-decoration: none; font-size: .92rem; }
.bh-mail:hover { text-decoration: underline; text-decoration-color: var(--green); }
.bh-add { display: flex; gap: 8px; align-items: center; padding: .8rem 1rem; border-top: 1px solid var(--line); background: #f8fafc; }
.bh-add input { flex: 1; min-width: 0; padding: .55rem .8rem; border-radius: 10px; border: 1px solid var(--line); font: inherit; font-size: .92rem; }
.bh-add input:focus { outline: 0; border-color: #4fb3ff; box-shadow: 0 0 0 3px rgba(79,179,255,.15); }
html[data-theme="dark"] .bh-add { background: #17253b; } html[data-theme="dark"] .bh-add input { background: #0d1828; color: #e9eef6; border-color: #2a3b57; }

/* FAQ aanvullen (beheer) */
.faq-beheer { margin-bottom: 1.25rem; }
.faq-beheer .zp-head form { margin: 0; }
.faq-zelf { margin-top: .5rem; } .faq-zelf summary { cursor: pointer; font-weight: 600; } .faq-zelf[open] summary { margin-bottom: .8rem; }
.faq-eigen-kop { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 1.2rem 0 .5rem; }
.faq-eigen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.faq-gemist { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1.25rem; }
.faq-gemist-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.faq-gemist-kop h3 { margin: 0; font-size: 16px; } .faq-gemist-uitleg { margin: .35rem 0 0; }
.faq-gemist ul { list-style: none; margin: .75rem 0 0; padding: 0; }
.faq-gemist li { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.faq-gemist ul:last-of-type li:last-child { border-bottom: 0; }
.faq-gemist q { font-weight: 600; quotes: "“" "”"; }
.faq-gemist .tel { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 2.5ch; text-align: right; }
.faq-gemist .soort { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 99px; background: var(--code); color: var(--muted); margin-left: 6px; }
.faq-gemist .acties { display: flex; gap: 14px; } .faq-gemist .acties form { margin: 0; }
.faq-gemist .sub { grid-column: 1 / -1; margin-top: -4px; }
.faq-gemist-meer summary { cursor: pointer; margin-top: .5rem; } .faq-gemist-meer ul { margin-top: 0; }
@media (max-width: 600px) { .faq-gemist li { grid-template-columns: 1fr auto; } .faq-gemist .acties { grid-column: 1 / -1; } }
.faq-eigen li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .faq-eigen form { margin: 0 0 0 auto; }

/* onderhoudsmodus (beheer) */
.onderhoud-card { margin-bottom: 1rem; }
.onderhoud-card .zp-head { align-items: flex-start; }
.onderhoud-form { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 280px; max-width: 560px; margin: 0; }
.onderhoud-form input[name="tekst"] { flex: 1; min-width: 0; padding: .55rem .8rem; border-radius: 10px; border: 1px solid var(--line); font: inherit; font-size: .9rem; }
.trial.onderhoud { background: #fde3e1; border-color: #f0c2bf; }

/* kleine percentagebalken in beheertabellen */
.mini { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.mini-bar { flex: none; display: inline-block; width: 56px; height: 6px; border-radius: 999px; background: rgba(13,24,40,.1); overflow: hidden; }
.mini-bar b { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #9fd6ff, #4fb3ff); }
.mini-bar.vol b { background: #e0a030; }
.mini-bar.over b { background: #c2412d; }
html[data-theme="dark"] .mini-bar { background: rgba(255,255,255,.12); }

/* Serververbruik in de portaltabel van Beheer: dezelfde balkjes als bij Instellingen, compacter */
.mini-usage { min-width: 12rem; max-width: 16rem; gap: .35rem; margin: .5rem 0 0; font-size: .8rem; }
.mini-usage .row { gap: .5rem; flex-wrap: nowrap; }
.mini-usage .meter { height: 6px; margin: .15rem 0 0; }

/* blauwe knop (AI-actie), afgerond zoals in het bouwscherm */
.btn.ai { color: #0d1828; }
.btn.ai::before { background: #4fb3ff; transform: none; left: 0; right: 0; border-radius: 10px; box-shadow: 0 0 14px rgba(79,179,255,.35); }
.btn.ai:hover::before { background: #3ea6f5; }
.btn.ai:disabled, .btn.ai[disabled] { color: var(--muted); } .btn.ai:disabled::before, .btn.ai[disabled]::before { background: #dde4ee; box-shadow: none; }
.faq-beheer { margin: 0 0 1.25rem; }

/* Prijsregels: software + managed server = totaal */
.price-lines { display: grid; gap: .35rem; margin: .5rem 0; }
.price-lines .row { flex-wrap: nowrap; align-items: baseline; }
.price-lines .row > span:last-child, .price-lines .row > strong:last-child { white-space: nowrap; }
.price-total { border-top: 1px solid var(--line); padding-top: .4rem; margin-top: .15rem; }

/* RAM met swap erachter: na de streep (100% RAM) loopt de balk door in de swap */
.meter.memswap { position: relative; }
.meter.memswap > span { position: absolute; left: 0; top: 0; bottom: 0; }
.meter.memswap > .swap-part { background: #E8A33D; border-radius: 0 999px 999px 0; }
.meter.memswap > .ram-edge { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--ink, #0d1828); opacity: .55; }

/* Upgradeadvies */
.advice { border: 1px solid #F2C36B; background: #FFF8EA; border-radius: 12px; padding: .8rem .9rem; }
.advice p { margin: .35rem 0; }
section.card.advice { border-color: #F2C36B; background: #FFF8EA; }

/* Grafiek met het verloop van de server */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; margin: .25rem 0 .5rem; }
.seg button { font: inherit; font-size: .85rem; border: 0; background: none; padding: .3rem .9rem; border-radius: 999px; cursor: pointer; color: var(--muted); }
.seg button.on { background: var(--ink, #0d1828); color: var(--card, #fff); }
.chart-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; margin-bottom: .35rem; }
.chart-legend .lg::before { content: ""; display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: .35rem; vertical-align: middle; }
.lg.cpu::before { background: #4FB3FF; } .lg.ram::before { background: #1f6fb0; } .lg.disk::before { background: #9A7BD0; }
.lg.cpu-piek::before { height: 2px; background: #4FB3FF; opacity: .45; }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-svg .grid { stroke: var(--line); stroke-width: 1; }
.chart-svg .grid.strong { stroke: #bbc3d0; stroke-dasharray: 4 3; }
.chart-svg .axis { font-size: 11px; fill: var(--muted); }
.chart-svg .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .line.cpu { stroke: #4FB3FF; } .chart-svg .line.cpu-piek { stroke: #4FB3FF; stroke-width: 1; opacity: .45; } .chart-svg .line.ram { stroke: #1f6fb0; } .chart-svg .line.disk { stroke: #9A7BD0; }
.chart-svg .alert-band { fill: #C2412D; opacity: .08; }
.chart-svg .cursor { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }

/* Bijlagen bij een ticket (via mail) */
.tm .attachment { display: inline-block; margin: .45rem .6rem 0 0; text-decoration: none; border: 1px solid var(--line);
  border-radius: 8px; padding: .2rem .55rem; background: #fff; }

/* Formulier op één regel met velden en knop onderaan uitgelijnd */
.row.row-bottom { align-items: flex-end; }

.ok-text { color: #4E7A1E; } .err-text { color: #B4321C; }

/* prijs/code-pagina in de stijl van de portalpagina's */
.code-page .card { border-radius: 18px; box-shadow: 0 1px 2px rgba(13,24,40,.04), 0 8px 24px rgba(13,24,40,.05); }
.code-page .section-head .section-title { font-size: 1.05rem; }
.code-page .stats { margin-bottom: 1.25rem; }
.code-page .tier { border-radius: 14px; }
.code-page .tier strong { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.code-page .tier .badge { font-size: .68rem; }
.code-page .code-head { padding: 1rem 1.25rem 0; margin-bottom: .5rem; }
.code-page .code-pad { padding: 0 1.25rem 1.25rem; }
.code-table { width: 100%; border-collapse: collapse; }
.code-table th { padding: .7rem 1.25rem; background: #f8fafc; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: left; }
.code-table td { padding: .7rem 1.25rem; vertical-align: middle; border-top: 1px solid var(--line); }
.code-table .mini { justify-content: flex-end; margin: 0; }
.code-regels { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.code-regels > div { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: 40px auto; gap: .3rem .8rem; align-items: start; }
.code-regels > div > strong { grid-column: 2; grid-row: 1; align-self: center; line-height: 1.3; }
.code-regels p { margin: 0; grid-column: 2; grid-row: 2; }
.code-ico { grid-column: 1; grid-row: 1; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--green-soft, #e1e8f2); color: var(--green-dark, #1f6fb0); }
html[data-theme="dark"] .code-ico { background: rgba(79,179,255,.16); color: #9fd6ff; }
html[data-theme="dark"] .code-table th { background: #17253b; }

/* staafjes in de tegel Opdrachten */
.spark { display: block; width: 100%; height: 40px; margin: 6px 0 4px; overflow: visible; }
.spark rect { fill: #4fb3ff; } .spark rect.nu { fill: #4fb3ff; } .spark rect.leeg { fill: var(--line); }
.spark rect:hover { fill: #1f6fb0; }

/* links per portal in de beheertabel */
.pt-links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.pt-links a { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--card, #fff); font-size: .78rem; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; }
.pt-links a:hover { border-color: var(--ink); } .pt-links svg { color: var(--muted); }

/* meekijken met toestemming */
.mk-lijst { margin-top: .5rem; } .mk-lijst li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .mk-lijst .btn { margin-left: auto; }
.meekijk-card .btn { margin-top: .25rem; } .meekijk-card form { margin-bottom: .6rem; }
.trial.meekijk { background: #fde3e1; border-color: #f0c2bf; }
.trial.meekijk .meekijk-stop { margin: 0; }
.mk-prompt { max-width: 560px; white-space: pre-wrap; font-size: .92rem; }

/* kaart die in zijn geheel klikbaar is; knoppen erin blijven apart klikbaar */
.mk-card { position: relative; transition: border-color .15s, box-shadow .15s; }
.mk-card:hover { border-color: var(--ink); box-shadow: 0 1px 2px rgba(13,24,40,.04), 0 10px 28px rgba(13,24,40,.08); }
.mk-card .card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.mk-card .card-link:focus-visible { outline: 2px solid #4fb3ff; outline-offset: 2px; }
.mk-card .btn, .mk-card .mk-lijst a, .mk-card form { position: relative; z-index: 2; }
.mk-card .mk-pijl { position: absolute; right: 1rem; top: 1.1rem; color: var(--muted); }

/* beheer: toegangsgroepen */
.toegang-groep h2 { margin: 0; }
.toegang-dl { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.25rem; margin: 1rem 0 0; }
.toegang-dl dt { color: var(--muted); font-size: .85rem; padding-top: 3px; }
.toegang-dl dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.check-list { border: 1px solid var(--line); border-radius: 12px; padding: .5rem .9rem .7rem; margin: 0; max-height: 220px; overflow-y: auto;
  display: grid; gap: .3rem; }
.check-list legend { font-weight: 600; padding: 0 .3rem; }
.check-list legend .hint { font-weight: 400; color: var(--muted); font-size: .85rem; margin-left: .35rem; }
.check-list label { flex-direction: row; align-items: center; gap: .55rem; font-weight: 400; margin: 0; padding: .15rem 0; }
.check-list label input { width: auto; flex: none; padding: 0; margin: 0; accent-color: var(--green-dark); }
.check-list label .muted { margin-left: auto; text-align: right; overflow-wrap: anywhere; }
.danger-text { color: var(--bad); }
@media (max-width: 640px) { .toegang-dl { grid-template-columns: 1fr; gap: .2rem; } .toegang-dl dd { margin-bottom: .5rem; } }

/* bestaande website overnemen: één uploadvak voor alles */
.dropzone { position: relative; display: block; border: 2px dashed var(--line); border-radius: 12px; padding: 1.25rem 1rem;
  text-align: center; cursor: pointer; font-weight: 400; transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone.over { border-color: var(--green); background: var(--green-soft); }
.dropzone:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }
.dropzone input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone .hint { display: block; margin-top: .3rem; }
[data-overname-lijst] li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
[data-overname-lijst] li > span { overflow-wrap: anywhere; }

/* bijlagen bij een opdracht: chips in het invoerveld en in het gesprek */
.composer-links { gap: .6rem; align-items: center; flex-wrap: wrap; }
.bijlage-knop { display: inline-flex; flex-direction: row; align-items: center; gap: .4rem; cursor: pointer; white-space: nowrap; }
.composer.drag { outline: 2px dashed var(--green); outline-offset: -6px; }
.composer-bijlagen, .msg-bijlagen { display: flex; flex-wrap: wrap; gap: .4rem; }
.msg-bijlagen { margin-top: .5rem; white-space: normal; }
.bijlage { display: inline-flex; align-items: center; gap: .4rem; max-width: 260px; padding: .2rem .35rem .2rem .25rem;
  border: 1px solid var(--line); border-radius: 10px; background: var(--code); font-size: .8rem; color: var(--ink); }
.bijlage-open { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; color: inherit; text-decoration: none; }
a.bijlage-open { cursor: zoom-in; }
a.bijlage-open:not([data-zoom]) { cursor: pointer; }
a.bijlage-open:hover .naam, a.bijlage-open:focus-visible .naam { text-decoration: underline; }
.bijlage img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex: none; background: var(--card); }
.bijlage-icoon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; flex: none; }
.bijlage-zoom { width: auto; max-width: min(1200px, 94vw); }
.bijlage-zoom img { display: block; max-width: 100%; max-height: 78vh; margin: .75rem auto 0; border-radius: 8px; }
.bijlage svg { flex: none; color: var(--muted); }
.bijlage .naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bijlage .muted { flex: none; }
.bijlage.bezig { opacity: .65; }
.bijlage.fout { border-color: var(--bad); color: var(--bad); }
.bijlage button { border: 0; background: none; cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0 .15rem; color: var(--muted); }
.msg.user .bijlage { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #fff; }
.msg.user .bijlage svg, .msg.user .bijlage .muted { color: rgba(255,255,255,.75); }

/* prijspagina: titel en uitleg onder de gedeelde kop (de tabs staan op alle portalpagina's gelijk) */
.code-page .code-intro { margin: -.35rem 0 1.1rem; }
.code-page .code-intro h2 { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin: 0; font-size: 1.2rem; }
.code-page .code-intro h2 .badge { font-size: .72rem; }
.code-page .code-intro p { margin: .2rem 0 0; }

/* geplande taken (Instellingen) */
.taken { display: grid; gap: .6rem; }
.taken .taak { padding: .6rem .75rem; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: .2rem; }
.taken .taak pre.log { max-height: 12rem; overflow: auto; white-space: pre-wrap; }

/* mail doorsturen (Domein en mail) */
.doorsturen-form { flex-wrap: wrap; align-items: center; }
.doorsturen-form input.kort { width: 8rem; }

/* --- Instellingen > Beveiliging: apparaten, melding bij nieuwe inlog, recente aanmeldingen --- */
.tablewrap { overflow-x: auto; }
.sess td { vertical-align: middle; }
.sess td.right { text-align: right; white-space: nowrap; }
.sess .dev { display: flex; align-items: center; gap: .6rem; }
.sess .dev svg { color: var(--green-dark); flex: none; }
.sess .dev small { display: block; color: var(--muted); font-weight: 400; }
.badge.hier { background: var(--green-soft); color: #1f5f9a; }
html[data-theme="dark"] .badge.hier { background: #182841; color: #cfe39b; }
.swrow { flex-direction: row; align-items: flex-start; gap: .8rem; font-weight: 400; cursor: pointer; }
.swrow input { width: auto; margin-top: .3rem; accent-color: var(--green-dark); transform: scale(1.25); }
.swrow div { flex: 1; }
.swrow strong { display: block; }
.swrow .muted { margin: .15rem 0 0; }
.aanmeld { list-style: none; padding: 0; margin: .5rem 0 0; }
.aanmeld li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.aanmeld li:last-child { border-bottom: 0; }
.aanmeld .ok { color: var(--ok); font-weight: 600; }
.aanmeld .nok { color: var(--bad); font-weight: 600; }
html[data-theme="dark"] .aanmeld .ok { color: #b9d66f; }

/* --- Portal: kaart "Aan de slag" --- */
#portal .side .start .steps { display: grid; margin: .9rem 0 0; gap: .65rem; width: 100%; }
#portal .side .start .steps li { justify-content: space-between; gap: .8rem; }
#portal .side .start .steps li > span:first-child { display: flex; align-items: center; gap: .65rem; min-width: 0; }
#portal .side .start .steps li::before { display: none; }
#portal .side .start .steps li > span:first-child::before { content: ""; width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 2px solid #c0cad8; flex: none; }
#portal .side .start .steps li.done > span:first-child::before { background: var(--green); border-color: var(--green); box-shadow: inset 0 0 0 3px var(--card, #fff); }
#portal .side .start .steps li.now > span:first-child::before { border-color: var(--green-dark); }
#portal .side .start .steps li a { font-size: .85rem; white-space: nowrap; }
#portal .side .start .meter { margin: .6rem 0 0; }
#portal .side .start .pct { font-size: .85rem; }

/* --- Gloed om het invoerveld van Jouw AI: dunne rand in groen en blauw die langzaam rondloopt, met een zachte waas.
   Eén rondje per 3,5 s. Staat stil bij "minder beweging" en in browsers zonder @property. --- */
@property --gloed-hoek { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes gloed-draai { to { --gloed-hoek: 360deg; } }
@keyframes gloed-adem { 50% { opacity: calc(var(--gloed-waas) * .45); } }
.gloed { position: relative; border-radius: 16px; padding: 2px; isolation: isolate; --gloed-hoek: 0deg; --gloed-sterkte: .9; --gloed-waas: .4; }
.gloed::before, .gloed::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--gloed-js, var(--gloed-hoek)), #a5c35c 0deg, #4fb3ff 110deg, #a5c35c 180deg, #4fb3ff 290deg, #a5c35c 360deg);
  animation: gloed-draai 3.5s linear infinite; transition: opacity .6s; }
.gloed::before { opacity: var(--gloed-sterkte); }
.gloed::after { filter: blur(16px); opacity: var(--gloed-waas); animation: gloed-draai 3.5s linear infinite, gloed-adem 2.5s ease-in-out infinite; }
/* Zodra je in het veld klikt dooft de gloed, zodat hij niet afleidt bij het typen; klik je eruit, dan komt hij terug. */
.gloed:focus-within::before, .gloed:focus-within::after { opacity: 0; animation-play-state: paused; }
.composer .gloed textarea { transition: border-color .6s; }
.composer .gloed textarea:focus { border-color: var(--green-dark); }
.composer .gloed textarea { display: block; width: 100%; box-sizing: border-box; margin: 0; border-color: transparent; box-shadow: none; border-radius: 14px; }
.composer .gloed textarea:focus { outline: 0; }
.gloed:has(textarea:disabled) { --gloed-sterkte: .2; --gloed-waas: .08; }
.gloed:has(textarea:disabled)::before, .gloed:has(textarea:disabled)::after { animation-play-state: paused; }
html[data-theme="dark"] .gloed { --gloed-waas: .5; }
html[data-theme="dark"] .composer .gloed textarea:focus { border-color: #4fb3ff; }
/* de gloedrand draait altijd rond, ook bij "minder beweging" (bewuste keuze 29 okt 2026) */

/* --- Bouwen: weergave "Testversie ernaast" (kader links, chat en zijkolom rechts) ---
   Alles past precies in het scherm (hoogte uit --wp-top, gezet door initWerkplaats); de pagina zelf scrolt niet,
   het kader en de rechterkolom scrollen ieder voor zich. */
.kop-rechts { gap: .8rem; position: relative; }
/* Eenmalig wolkje onder Publiceren */
.tip-wolk { position: absolute; top: calc(100% + 10px); left: 0; width: 290px; z-index: 6; background: #0d1828; color: #fff; border-radius: 12px; padding: .7rem .85rem; box-shadow: 0 16px 40px rgba(13,24,40,.35); font-size: .86rem; line-height: 1.4; font-weight: 400; }
.tip-wolk[hidden] { display: none; }
.tip-wolk::before { content: ""; position: absolute; top: -8px; left: 56px; border: 8px solid transparent; border-top: 0; border-bottom-color: #0d1828; }
.tip-wolk p { margin: 0 0 .55rem; color: #d8e1ee; white-space: normal; }
.tip-wolk p b { color: #fff; }
.tip-wolk .btn.small { min-height: 28px; padding: 0 .8rem; }
html[data-theme="dark"] .tip-wolk { background: #e9eef6; color: #0d1828; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
html[data-theme="dark"] .tip-wolk::before { border-bottom-color: #e9eef6; }
html[data-theme="dark"] .tip-wolk p, html[data-theme="dark"] .tip-wolk p b { color: #0d1828; }
/* wolkje boven het invoerveld van de chat (klik op het logo in de testversie) */
.tip-wolk.boven { top: auto; bottom: calc(100% + 12px); left: 0; width: min(340px, 100%); animation: tip-in .2s ease-out; }
.tip-wolk.boven::before { top: auto; bottom: -8px; left: 28px; border: 8px solid transparent; border-bottom: 0; border-top-color: #0d1828; }
html[data-theme="dark"] .tip-wolk.boven::before { border-top-color: #e9eef6; }
.tip-wolk .tip-vb { display: block; margin-top: .4rem; font-style: italic; }
@keyframes tip-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .tip-wolk.boven { animation: none; } }
.wp-rechts { display: contents; }
body.wp-aan main { margin-bottom: 1rem; }
body.wp-aan footer.foot { display: none; }
#portal .split.werkplaats { grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "frame chat"; align-items: stretch; height: calc(100vh - var(--wp-top, 160px) - 1rem); min-height: 420px; }
#portal .split.werkplaats > .wp-frame { grid-area: frame; display: flex; flex-direction: column; padding: 0; overflow: hidden; min-height: 0; }
#portal .split.werkplaats > .wp-rechts { grid-area: chat; display: flex; flex-direction: column; gap: .8rem; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
/* Rechts staat alleen de chat; de kaarten (versies, stappenplan, prijs) zie je in de weergave Chat */
#portal .split.werkplaats .chat { flex: 1 1 auto; height: auto; min-height: 0; margin: 0; }
#portal .split.werkplaats .messages { flex: 1; height: auto; max-height: none; min-height: 0; overscroll-behavior: contain; }
#portal .split.werkplaats > .wp-rechts .side { display: none; }
/* Chat inklappen (pijltje in de chatkop): het kader krijgt de volle breedte, rechts blijft een smalle balk. Vanuit die balk
   schuift de chat over het kader heen (stand "over"); met het icoontje in de chatkop zet je hem weer naast het kader. */
.chat-knoppen { display: flex; align-items: center; gap: .35rem; flex: none; }
.chat-knoppen .ikoonknop { display: none; }
.ikoonknop { position: relative; width: 32px; height: 32px; padding: 0; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid var(--line); background: var(--card, #fff); color: var(--muted); cursor: pointer; }
.ikoonknop:hover { color: var(--ink); border-color: var(--ink); }
.ikoonknop:focus-visible { outline: 2px solid #4fb3ff; outline-offset: 2px; }
#portal .split.werkplaats .chat-knoppen [data-wp-chat="dicht"] { display: inline-grid; }
#portal .split.werkplaats .chat-knoppen [data-wp-chat-wissel] { display: inline-grid; }
#portal .split.werkplaats .chat-knoppen [data-wp-chat-wissel][aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
html[data-theme="dark"] #portal .split.werkplaats .chat-knoppen [data-wp-chat-wissel][aria-pressed="true"] { background: #e9eef6; border-color: #e9eef6; color: #0d1828; }
#portal .split.werkplaats { position: relative; }
#portal .split.werkplaats[data-chat="dicht"], #portal .split.werkplaats[data-chat="over"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "frame"; }
#portal .split.werkplaats[data-chat="dicht"] > .wp-frame, #portal .split.werkplaats[data-chat="over"] > .wp-frame { border-radius: 16px; border-right: 1px solid var(--line); }
#portal .split.werkplaats[data-chat="dicht"] > .wp-rechts { display: none; }
#portal .split.werkplaats[data-chat="over"] > .wp-rechts { grid-area: auto; position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 92%); z-index: 5; box-shadow: -24px 0 60px rgba(13,24,40,.25); border-radius: 16px; animation: chat-schuif .25s ease-out; }
@keyframes chat-schuif { from { transform: translateX(24px); opacity: 0; } }
/* Ingeklapte chat: klein donker knopje "Chat" rechts in de balk boven de testversie (alleen als de chat dicht is) */
.wp-chatknop { display: none; align-items: center; gap: .45rem; flex: none; min-height: 30px; padding: 0 .8rem 0 .65rem; border: 0; border-radius: 999px; background: #0d1828; color: #fff; font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; position: relative; }
.wp-chatknop:hover { background: #000; }
.wp-chatknop:focus-visible { outline: 2px solid #4fb3ff; outline-offset: 2px; }
#portal .split.werkplaats[data-chat="dicht"] .wp-chatknop { display: inline-flex; }
.wp-chatknop .bol { width: 8px; height: 8px; border-radius: 50%; background: #4fb3ff; box-shadow: 0 0 0 3px rgba(79,179,255,.3); }
.wp-chatknop.nieuw .bol { animation: balk-puls 1.4s ease-out infinite; }
@keyframes balk-puls { 0% { box-shadow: 0 0 0 0 rgba(79,179,255,.7); } 100% { box-shadow: 0 0 0 9px rgba(79,179,255,0); } }
.wp-chatknop .tel { background: #4fb3ff; color: #0d1828; font-size: .68rem; font-weight: 800; border-radius: 999px; padding: 0 .38rem; }
.wp-chatknop .tel[hidden] { display: none; }
/* Telefoon: zwevende knop "Naar chat" boven het menu onderin, zolang het invoerveld niet in beeld is (initChat) */
.naar-chat { display: none; }
@media (max-width: 760px) {
  .naar-chat:not([hidden]) { position: fixed; right: 14px; bottom: calc(74px + env(safe-area-inset-bottom, 0px)); z-index: 44;
    display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: 0 .95rem 0 .8rem; border: 1px solid #d1dae8; border-radius: 999px;
    background: rgba(255,255,255,.94); color: #2e4261; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
    box-shadow: 0 3px 10px rgba(13,24,40,.08); animation: naar-chat-in .2s ease-out; }
  .naar-chat .bol { width: 7px; height: 7px; border-radius: 50%; background: #4fb3ff; }
  .naar-chat.nieuw .bol { background: #a5c35c; animation: balk-puls 1.4s ease-out infinite; }
  .naar-chat svg { width: 15px; height: 15px; }
  .naar-chat.omhoog svg { transform: rotate(180deg); }
  .naar-chat:focus-visible { outline: 2px solid #4fb3ff; outline-offset: 2px; }
  html[data-theme="dark"] .naar-chat:not([hidden]) { background: rgba(22,37,59,.94); border-color: #1e3250; color: #cad4e2; box-shadow: 0 3px 10px rgba(0,0,0,.3); }
}
@keyframes naar-chat-in { from { opacity: 0; transform: translateY(6px); } }
html[data-theme="dark"] .wp-chatknop { background: #e9eef6; color: #0d1828; }
html[data-theme="dark"] .wp-chatknop:hover { background: #fff; }
@media (prefers-reduced-motion: reduce) { #portal .split.werkplaats[data-chat="over"] > .wp-rechts, .wp-chatknop.nieuw .bol { animation: none; } }
.wp-bar { display: flex; align-items: center; gap: .7rem; padding: .5rem .8rem; border-bottom: 1px solid var(--line); background: var(--bg); font-size: .85rem; flex: none; }
.wp-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; background: var(--card, #fff); border: 1px solid var(--line); color: var(--muted); font-family: ui-monospace, Menlo, monospace; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-url b { color: var(--ink); font-weight: 600; font-family: Asap, sans-serif; }
.wp-url svg { flex: none; color: var(--green-dark); }
.wp-kader { flex: 1; min-height: 0; display: flex; justify-content: center; background: #fff; }
.wp-frame iframe { flex: 1; width: 100%; min-height: 0; border: 0; background: #fff; }
/* Schermformaat tablet of telefoon: het kader smaller, gecentreerd op een grijze achtergrond */
.wp-apparaat { padding: 2px; border-radius: 8px; flex: none; }
.wp-apparaat button { min-height: 26px; padding: 0 7px; border-radius: 6px; }
.wp-frame[data-breedte] .wp-kader { background: var(--bg); }
.wp-frame[data-breedte] iframe { flex: none; width: var(--wp-breedte); max-width: 100%; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
/* Kader en chat als één geheel (zoals een app met een zijpaneel): geen ruimte ertussen, één omlijsting met schaduw,
   een dunne lijn als scheiding en de kopbalken op gelijke hoogte. De chat die over het kader schuift blijft los. */
#portal .split.werkplaats { gap: 0; border-radius: 16px; box-shadow: 0 1px 2px rgba(13,24,40,.03), 0 10px 30px rgba(13,24,40,.07); }
#portal .split.werkplaats > .wp-frame { border-radius: 16px 0 0 16px; border-right: 0; box-shadow: none; margin: 0; }
#portal .split.werkplaats > .wp-rechts { scrollbar-gutter: auto; }
#portal .split.werkplaats > .wp-rechts .chat { border-radius: 0 16px 16px 0; box-shadow: none; }
#portal .split.werkplaats .wp-bar, #portal .split.werkplaats .chat-head { min-height: 54px; box-sizing: border-box; }
#portal .split.werkplaats .chat-head { padding-top: .45rem; padding-bottom: .45rem; background: var(--bg); }
#portal .split.werkplaats[data-chat="over"] > .wp-rechts .chat { border-radius: 16px; }
/* Donker thema: kaarten zijn daar half doorzichtig; kader en chat in deze weergave altijd dicht, anders schijnt de app
   door de chat heen als die over het kader schuift */
html[data-theme="dark"] body:not(.dark-auth) #portal .split.werkplaats .card { background: var(--card); }
html[data-theme="dark"] body:not(.dark-auth) #portal .split.werkplaats .wp-rechts .composer { background: var(--card); }
html[data-theme="dark"] body:not(.dark-auth) #portal .split.werkplaats[data-chat="over"] > .wp-rechts { box-shadow: -24px 0 60px rgba(0,0,0,.55); }
/* Compact naast de testversie, zodat het ook op een laptop (bij 100% zoom vaak maar 600-700 px hoog) zonder scrollen past:
   tegoed op één dunne regel, invoerblok compact (paperclip naast Versturen, korte hint), minder ruimte bovenin. */
body.wp-aan main { margin-top: 1rem; }
body.wp-aan .portal-head { margin-bottom: .7rem; }
body.wp-aan .trial-inner { padding-top: .35rem; padding-bottom: .35rem; font-size: .86rem; }
#portal .split.werkplaats .credit { grid-template-columns: auto minmax(60px, 1fr) auto; padding: .35rem 1rem .35rem 1.25rem; font-size: .78rem; gap: .2rem .6rem; }
#portal .split.werkplaats .credit-label .lang, #portal .split.werkplaats .credit-pct .muted { display: none; }
#portal .split.werkplaats .credit-label .kort { display: inline; }
#portal .split.werkplaats .composer { padding: .55rem 1rem .75rem; gap: .4rem; }
#portal .split.werkplaats .composer-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#portal .split.werkplaats .composer textarea { min-height: 3.4rem; padding: .65rem .85rem; font-size: .95rem; }
#portal .split.werkplaats .composer .hint-lang, #portal .split.werkplaats .composer .bijlage-tekst { display: none; }
#portal .split.werkplaats .composer .hint-kort { display: inline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: .78rem; }
#portal .split.werkplaats .composer .composer-links { flex-wrap: nowrap; min-width: 0; gap: .5rem; }
#portal .split.werkplaats .composer .bijlage-knop { min-height: 34px; padding: 0 .55rem; }
#portal .split.werkplaats .composer [data-send] { min-width: 0; min-height: 38px; }
#portal .split.werkplaats .composer .row.between { flex-wrap: nowrap; gap: .5rem; }
/* Lage schermen (laptop): nog iets compacter bovenin; de gewone tekst blijft even groot */
@media (max-height: 820px) and (min-width: 1001px) {
  body.wp-aan main { margin-top: .6rem; }
  body.wp-aan .back-link { display: none; }
  body.wp-aan .portal-head h1 { font-size: 1.35rem; }
  #portal .split.werkplaats .wp-bar, #portal .split.werkplaats:not([data-chat="over"]) .chat-head { min-height: 46px; }
  #portal .split.werkplaats .chat-head { padding-top: .3rem; padding-bottom: .3rem; }
  #portal .split.werkplaats .messages { padding: 1rem 1rem .6rem; gap: .7rem; }
}
@media (max-width: 1000px) {
  #portal .split.werkplaats { grid-template-columns: 1fr; grid-template-areas: "frame" "chat"; height: auto; min-height: 0; gap: 1.25rem; box-shadow: none; }
  #portal .split.werkplaats > .wp-frame { border-radius: 16px; border-right: 1px solid var(--line); }
  #portal .split.werkplaats > .wp-rechts .chat { border-radius: 16px; }
  #portal .split.werkplaats > .wp-frame { height: 480px; }
  .wp-apparaat { display: none; }
  #portal .split.werkplaats > .wp-rechts { display: contents; }
  #portal .split.werkplaats > .wp-rechts .side { display: flex; }
  #portal .split.werkplaats .chat-knoppen .ikoonknop, #portal .split.werkplaats .wp-chatknop { display: none !important; }
  #portal .split.werkplaats[data-chat] > .wp-rechts { display: contents; position: static; animation: none; box-shadow: none; }
  #portal .split.werkplaats .chat { height: auto; }
  #portal .split.werkplaats .messages { max-height: 70vh; }
  body.wp-aan main { margin-bottom: 4rem; }
  body.wp-aan footer.foot { display: block; }
}
/* Pagina in het kader: server eerst bijwerken */
body.wp-wacht { display: grid; place-items: center; min-height: 100vh; padding: 1.25rem; box-sizing: border-box; }
.wp-wacht-vak { max-width: 440px; text-align: center; }
.wp-wacht-vak h1 { font-size: 1.35rem; margin: 0 0 .6rem; }
.wp-wacht-vak p { margin: 0 0 1rem; }
.wp-wacht-vak form { margin: 0 0 1.25rem; }
.wp-wacht-vak .spinner { width: 34px; height: 34px; margin: 0 auto 1.1rem; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--green-dark); animation: spin 1s linear infinite; }

/* beheerders van de app (Instellingen): acties per beheerder */
.admins .admin-rij { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.admins .admin-rij.uit strong { color: var(--muted); }
.admins .admin-acties { display: flex; gap: .75rem; flex-wrap: wrap; }

/* eigen domein: eerst kiezen (bestaand of nieuw), dan bestellen (TransIP) of koppelen */
.dm-keuzes { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.dm-keuze-kaart { display: flex; align-items: flex-start; gap: .8rem; padding: 1rem 1.1rem; text-align: left; font: inherit; color: inherit;
  background: var(--card, #fff); border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s; }
.dm-keuze-kaart:hover { border-color: #4fb3ff; box-shadow: 0 2px 12px rgba(79,179,255,.15); }
.dm-keuze-kaart[aria-pressed="true"] { border-color: #4fb3ff; background: rgba(79,179,255,.07); box-shadow: 0 0 0 3px rgba(79,179,255,.18); }
.dm-keuze-icoon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--code); color: #1d7fc4; }
.dm-keuze-kaart[aria-pressed="true"] .dm-keuze-icoon { background: #4fb3ff; color: #fff; }
.dm-keuze-tekst { display: flex; flex-direction: column; gap: .2rem; }
.dm-keuze-tekst strong { font-size: 1rem; }
.dm-keuze-tekst span { font-size: .85rem; color: var(--muted); line-height: 1.4; }
@media (max-width: 640px) { .dm-keuzes { grid-template-columns: 1fr; } }
.domein-resultaten { display: grid; gap: .35rem; margin: .75rem 0 0; }
.domein-resultaten li { display: flex; align-items: center; gap: .75rem; padding: .5rem .5rem .5rem .8rem; border: 1px solid var(--line); border-radius: 10px; }
.domein-resultaten li .muted { margin-left: auto; }
.domein-resultaten li.bezet { opacity: .55; }
.domein-akkoord { margin-top: 1rem; padding: .9rem 1rem; border: 1.5px solid #4fb3ff; border-radius: 12px; background: rgba(79,179,255,.06); }
.domein-akkoord h3 { margin-top: 0; text-transform: none; letter-spacing: 0; font-size: 1rem; color: var(--ink); }

/* DNS-records van een besteld domein */
.dns-dialog { width: min(860px, 94vw); }
.dns-legenda { display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; color: var(--muted); }
.dns-lijst { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.dns-lijst > p { margin: 0; padding: .9rem 1rem; }
.dns-rij { display: grid; grid-template-columns: 76px minmax(90px, .7fr) minmax(0, 2fr) 56px 36px; gap: .75rem; align-items: center;
  padding: .55rem .5rem .55rem .9rem; border-top: 1px solid var(--line); font-size: .88rem; }
.dns-rij:first-child { border-top: 0; }
.dns-kop { background: var(--code); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: .45rem; padding-bottom: .45rem; }
.dns-rij.is-portal { background: rgba(79,179,255,.06); }
.dns-rij code { background: none; padding: 0; font-size: .84rem; }
.dns-naamcel { display: flex; flex-direction: column; min-width: 0; }
.dns-naamcel code, .dns-inhoud code { overflow-wrap: anywhere; }
.dns-inhoud { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.dns-type { display: inline-block; min-width: 3.4rem; text-align: center; padding: .15rem .45rem; border-radius: 6px; font-size: .74rem; font-weight: 700;
  letter-spacing: .03em; background: var(--code); color: var(--ink); }
.dns-type.t-a, .dns-type.t-aaaa { background: rgba(79,179,255,.15); color: #1d6fa8; }
.dns-type.t-cname { background: rgba(139,92,246,.14); color: #6d3fd1; }
.dns-type.t-mx { background: rgba(232,163,61,.18); color: #9a6400; }
.dns-type.t-txt { background: rgba(13,24,40,.07); color: var(--ink-2, #26364f); }
.dns-portal { display: inline-block; padding: .05rem .5rem; border-radius: 999px; background: rgba(79,179,255,.22); color: #1f5f9a; font-size: .7rem; font-weight: 700; }
.dns-weg { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid transparent; border-radius: 8px; background: none;
  color: var(--muted); cursor: pointer; }
.dns-weg:hover { color: var(--bad); border-color: var(--bad-soft); background: var(--bad-soft); }
.dns-form { display: grid; grid-template-columns: 110px minmax(150px, 1fr) minmax(0, 2fr) 100px auto; gap: .6rem; align-items: end; }
.dns-form label { font-size: .82rem; margin: 0; }
.dns-naam { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card, #fff); overflow: hidden; }
.dns-naam input { border: 0; min-width: 0; flex: 1; }
.dns-naam-domein { padding: 0 .6rem; color: var(--muted); font-size: .8rem; white-space: nowrap; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }
.dns-hint { margin: .55rem 0 0; }
@media (max-width: 760px) {
  .dns-rij { grid-template-columns: 64px minmax(0, 1fr) 36px; }
  .dns-rij > :nth-child(3) { grid-column: 1 / -1; order: 5; }
  .dns-rij > :nth-child(4), .dns-kop { display: none; }
  .dns-form { grid-template-columns: 1fr 1fr; }
  .dns-form .dns-waarde { grid-column: 1 / -1; }
}
html[data-theme="dark"] .dns-type.t-a, html[data-theme="dark"] .dns-type.t-aaaa { color: #9fd6ff; }
html[data-theme="dark"] .dns-type.t-cname { color: #c4b1ff; }
html[data-theme="dark"] .dns-type.t-mx { color: #ffd27a; }
html[data-theme="dark"] .dns-portal { color: #9fd6ff; }

/* nieuw besteld domein: voortgang tot alles werkt */
.domein-voortgang { margin: 0 0 1rem; padding: .9rem 1rem; border: 1px solid rgba(79,179,255,.45); border-radius: 12px; background: rgba(79,179,255,.06); }
.domein-voortgang.card { margin: 0 0 1rem; }
.domein-voortgang p { margin: .4rem 0 .6rem; }
.voortgang-stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .88rem; }
.voortgang-stappen li { display: flex; align-items: center; gap: .55rem; color: var(--muted); }
.voortgang-stappen li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); box-sizing: border-box; }
.voortgang-stappen li.klaar { color: var(--ink); }
.voortgang-stappen li.klaar::before { border-color: #86a43f; background: #a5c35c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/11px no-repeat; }
.voortgang-stappen li.bezig { color: var(--ink); font-weight: 600; }
.voortgang-stappen li.bezig::before { border-color: #4fb3ff; border-top-color: transparent; animation: voortgang-draai 1s linear infinite; }
@keyframes voortgang-draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .voortgang-stappen li.bezig::before { animation: none; border-top-color: #4fb3ff; } }

/* portal verwijderen: wat er met een besteld domein gebeurt */
.del-domein { margin: 1rem 0; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: .5rem; }
.del-domein legend { padding: 0 .3rem; font-size: .92rem; }
.del-optie { flex-direction: row; align-items: flex-start; gap: .6rem; padding: .6rem .7rem; border: 1.5px solid var(--line); border-radius: 10px;
  font-weight: 400; cursor: pointer; }
.del-optie:has(input:checked) { border-color: #4fb3ff; background: rgba(79,179,255,.07); }
.del-optie input { width: auto; margin-top: .2rem; accent-color: #1d7fc4; }
.del-optie > span { display: flex; flex-direction: column; gap: .15rem; }
.del-optie > span > span { font-size: .84rem; color: var(--muted); line-height: 1.4; }

/* Publiceren rechts van de titel en naast Versturen (alleen zichtbaar als er iets te publiceren is) */
.kop-titelrij { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.kop-titelrij h1 { margin: 0; }
/* Publiceren: zwart-grijs met de draaiende groen-blauwe lijn eromheen (.gloed-knop, zoals om het chatveld). Alleen
   zichtbaar als er iets te publiceren is (toonPubliceren in app.js). */
.btn.publiceer, .btn.publiceer:hover, html[data-theme="dark"] .btn.publiceer { background: none; border: 0; color: #fff; }
/* overal dezelfde vorm (afgerond, zoals Versturen), ook in de kop waar knoppen anders schuin zijn */
.btn.publiceer { display: inline-flex; align-items: center; gap: .4rem; margin: 0; min-height: 40px; padding: 0 18px; font-size: 14px; text-transform: none; letter-spacing: 0; }
.btn.publiceer::before { background: #0d1828; transform: none; left: 0; right: 0; border-radius: 10px; }
.btn.publiceer:hover::before { background: #000; }
.btn.publiceer:disabled::before { opacity: .55; }
.btn.publiceer svg { flex: none; }
html[data-theme="dark"] .btn.publiceer, html[data-theme="dark"] .btn.publiceer:hover { color: #0d1828; }
html[data-theme="dark"] .btn.publiceer::before { background: #e9eef6; }
html[data-theme="dark"] .btn.publiceer:hover::before { background: #fff; }
.gloed-knop { display: inline-block; border-radius: 12px; padding: 2px; --gloed-sterkte: 1; --gloed-waas: .35; vertical-align: middle; }
.gloed-knop[hidden] { display: none; }
.gloed-knop:focus-within::before, .gloed-knop:focus-within::after { opacity: var(--gloed-sterkte); animation-play-state: running; }
.gloed-knop:focus-within::after { opacity: var(--gloed-waas); }
.portal-head [data-kop-msg] { margin: .6rem 0 0; white-space: pre-line; }

/* Beheer: verwijderwachtrij */
.wachtrij td { vertical-align: middle; }
.wachtrij .bh-acts { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.wachtrij .bh-acts form { margin: 0; }
.wachtrij .err-text { display: block; margin-top: .3rem; }
.nowrap { white-space: nowrap; }
.voorbeelden-kop { margin-bottom: -.35rem; }

/* Bedrijfsnaam zoeken in het Handelsregister (KVK): keuzelijst onder het veld */
.kvk-veld { position: relative; }
.kvk-lijst { position: absolute; z-index: 30; left: 0; right: 0; margin: 4px 0 0; padding: 4px; list-style: none;
  max-height: 320px; overflow-y: auto; background: var(--card, #fff); color: var(--ink); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .14); }
.kvk-lijst li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 7px; cursor: pointer;
  font-weight: 400; text-transform: none; letter-spacing: 0; }
.kvk-lijst li strong { font-weight: 600; }
.kvk-lijst li span { color: var(--muted); font-size: .82rem; }
.kvk-lijst li:hover, .kvk-lijst li.on { background: rgba(79, 179, 255, .14); }
.kvk-status { margin: 4px 0 0; font-weight: 400; }
.kvk-status:empty { display: none; }
.dark-auth .kvk-lijst { background: #131f31; border-color: #1f3352; color: #ebeff6; }
.dark-auth .kvk-lijst li span, .dark-auth .kvk-status { color: #a3afc2; }

/* supportpagina: passende FAQ-artikelen onder de omschrijving (initFaqTip) */
.faq-tip { border-radius: 14px; background: linear-gradient(120deg, rgba(79,179,255,.08), rgba(79,179,255,.10)); border: 1px solid rgba(79,179,255,.30);
  padding: 14px 16px; animation: faq-tip-in .25s ease-out; }
.faq-tip[hidden] { display: none; }
.faq-tip-kop { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .95rem; margin-bottom: 8px; }
.faq-tip-kop svg { color: #2f8fd6; flex: none; }
.faq-tip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.faq-tip a { display: flex; flex-direction: column; padding: 8px 10px; margin: 0 -10px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.faq-tip a:hover { background: rgba(255,255,255,.7); }
.faq-tip a strong { font-weight: 700; } .faq-tip a strong::after { content: " \2197"; color: var(--muted); font-weight: 400; }
.faq-tip a span { color: var(--muted); font-size: .9rem; font-weight: 400; }
.faq-tip-voet { margin: 8px 0 0; color: var(--muted); font-size: .88rem; }
html[data-theme="dark"] .faq-tip a:hover { background: rgba(255,255,255,.06); }
html[data-theme="dark"] .faq-tip-kop svg { color: #9fd6ff; }
@keyframes faq-tip-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .faq-tip { animation: none; } }

/* Gekoppelde domeinen: per domein een blok om open te klikken (adressen, subdomein toevoegen, DNS) */
.dm-lijst-uitleg { margin: -.2rem 0 .6rem; }
.dm-groep { border: 1px solid var(--line); border-radius: 12px; margin-bottom: .6rem; background: var(--card, #fff); }
.dm-groep > summary { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; padding: .7rem .9rem; cursor: pointer;
  list-style: none; border-radius: 12px; }
.dm-groep > summary::-webkit-details-marker { display: none; }
.dm-groep > summary::before { content: ""; width: 7px; height: 7px; border: solid var(--muted); border-width: 0 2px 2px 0;
  transform: rotate(-45deg); transition: transform .15s; margin-right: .2rem; flex: none; }
.dm-groep[open] > summary::before { transform: rotate(45deg); }
.dm-groep > summary:hover { background: rgba(79, 179, 255, .06); }
.dm-groep-naam { font-weight: 700; font-size: 1rem; }
.dm-groep-aantal { margin-left: auto; }
.dm-groep-inhoud { padding: 0 .9rem .8rem; border-top: 1px solid var(--line); }
.dm-groep-inhoud .domain { padding: .6rem 0; border-bottom: 1px dashed var(--line); }
.dm-groep-acties { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .7rem; }
.dm-sub-form { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 260px; }
.dm-sub { display: flex !important; flex-direction: row; align-items: center; gap: .35rem; flex: 1; min-width: 0; font-weight: 400; }
.dm-sub input { flex: 1; min-width: 0; }
.dm-sub-basis { color: var(--muted); white-space: nowrap; font-weight: 600; }
.dm-groep-uitleg { margin: .5rem 0 0; }
.badge.dm-bij-ons { background: rgba(79, 179, 255, .14); color: #1f6fb0; }
.dns-portal.is-mail { background: rgba(79, 179, 255, .16); color: #1f6fb0; }
html[data-theme="dark"] .dns-portal.is-mail, html[data-theme="dark"] .badge.dm-bij-ons { color: #9fd6ff; }

/* Maildomeinen: per domein een blok (status, DNS-records met vinkjes, ontvangen en doorsturen) */
.dm-kop { margin: .9rem 0 .35rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.mx-ok { color: #3f7d1e; } .mx-mist { color: #b3261e; }
/* vaste iconen in plaats van tekens: overal even groot en op één lijn met Kopiëren */
.mx-ok, .mx-mist { display: inline-flex; width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
.mx-ok svg, .mx-mist svg { display: block; }
html[data-theme="dark"] .mx-ok { color: #a5c35c; }
html[data-theme="dark"] .mx-mist { color: #ff8a80; }
.dm-dns-balk { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
  margin: .6rem 0 .2rem; padding: .55rem .7rem; border-radius: 10px; background: rgba(79, 179, 255, .08); }
.dm-dns-balk .btn svg { flex: none; }

/* Kop van Bouwen/Instellingen/Prijs: "Mijn portals" als eerste regel boven de titel */
.kop-titelrij .back-link { flex-basis: 100%; margin-bottom: -.55rem; }
.kop-proef { display: none; font-size: .8rem; font-weight: 700; color: var(--olive, #1f6fb0); }

/* Testversie ernaast (body.wp-aan, breed scherm): de pagina over de hele breedte, de kop in één smalle balk
   (terugpijl, naam, badge, adres, proefdagen en alle knoppen) en de gewone proefbalk weg, zodat kader en chat hoger worden */
@media (min-width: 1001px) {
  body.wp-aan main, body.wp-aan .shell-main > main, body.wp-aan .shell-main > main.wide { max-width: 1704px; padding: 0 12px; margin-top: .5rem; }
  /* breder dan 1680 px voegt alleen lege rand rond de app toe; voor meer ruimte is er Maximaliseren */
  body.wp-aan .trial:not(.over):not(.bijna) { display: none; }
  body.wp-aan .portal-head { align-items: center; margin-bottom: .5rem; padding: 0 2px; }
  body.wp-aan .kop-titelrij { flex-wrap: nowrap; gap: .7rem; min-width: 0; }
  body.wp-aan .kop-titelrij .back-link { display: inline-block; flex-basis: auto; margin: 0; font-size: 1.15rem; line-height: 1; }
  body.wp-aan .back-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.wp-aan .portal-head h1 { font-size: 1.25rem; flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
  body.wp-aan .kop-proef { display: inline; white-space: nowrap; }
}

/* Maximaliseren (knop in de balk van de testversie): kader en chat over het hele scherm, de rest gedimd erachter */
.wp-max-knop .ik-klein { display: none; }
body.wp-max .wp-max-knop .ik-groot { display: none; } body.wp-max .wp-max-knop .ik-klein { display: block; }
body.wp-max { overflow: hidden; }
@media (min-width: 1001px) {
  body.wp-max #portal .split.werkplaats { position: fixed; inset: 10px; z-index: 60; height: auto; min-height: 0; margin: 0;
    border-radius: 16px; background: var(--bg); box-shadow: 0 0 0 10px rgba(13,24,40,.55), 0 30px 80px rgba(0,0,0,.35); }
}
@media (max-width: 1000px) { .wp-max-knop { display: none; } }

/* Zoom van de testversie (laptop): het kader tekent de app groter en verkleint hem met --wp-zoom */
.wp-zoom { flex: none; margin: 0; }
.wp-zoom[hidden] { display: none; }
.wp-zoom select { min-height: 30px; padding: 0 1.6rem 0 .55rem; border-radius: 8px; font-size: .8rem; font-weight: 600; width: auto; }
.wp-kader { position: relative; overflow: hidden; }
.wp-frame.wp-gezoomd:not([data-breedte]) iframe { position: absolute; top: 0; left: 0; flex: none;
  width: calc(100% / var(--wp-zoom)); height: calc(100% / var(--wp-zoom)); transform: scale(var(--wp-zoom)); transform-origin: 0 0; }
@media (max-width: 1000px) { .wp-zoom { display: none; } }

/* --- Nieuwe portal (venster) en eerste portal (welkomstscherm): twee genummerde stappen, wat bouwen en hoe heet hij.
   Venster licht en strak in de stijl van de portal; het welkomstscherm donker zoals de hero van de homepage. --- */
dialog.np-dialog { width: min(760px, 96vw); max-height: 94vh; padding: 0; border-radius: 18px; overflow: auto; }
dialog.np-dialog::backdrop { background: rgba(13,24,40,.55); }
/* kop in de stijl van "Wat is er nieuw": donker met gloed, schuine tag (nw-tag), AI met blauwe gloed, ronde sluitknop (nw-x) */
.np-kop { position: relative; isolation: isolate; overflow: hidden; padding: 26px 28px 24px; background: #0d1828; color: #fff; }
.np-kop::before { content: ""; position: absolute; inset: -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 45% 80% at 90% 0%, rgba(79,179,255,.30), transparent), radial-gradient(ellipse 40% 80% at 0% 100%, rgba(165,195,92,.22), transparent); }
.np-kop h2 { margin: 10px 0 6px; font-size: 1.75rem; line-height: 1.12; color: #fff; } .np-kop p { margin: 0; color: #c0cad8; font-size: .95rem; }
.np-body { display: grid; gap: 22px; padding: 22px 28px 6px; }
.np-body > label { margin: 0; }
.np-paneel[hidden] { display: none; }
.np-stap { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 14px; }
.np-nr { width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #0d1828; display: grid; place-items: center; font-weight: 800; font-size: .88rem; margin-top: 2px; }
.np-stap h3 { margin: 4px 0 2px; font-size: 1.06rem; } .np-hulp { margin: 0 0 10px; color: var(--muted); font-size: .9rem; }
.np-inhoud { grid-column: 2; display: grid; gap: 10px; }
.np-inhoud label { margin: 0; }
.np-gloed { display: block; border-radius: 13.5px; padding: 1.5px; }
.np-gloed textarea { display: block; width: 100%; box-sizing: border-box; margin: 0; min-height: 104px; border-color: transparent; border-radius: 12px; resize: vertical; }
.np-gloed textarea:focus { outline: 0; border-color: #4fb3ff; }
.np-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0; }
.np-chips > span { font-size: .8rem; color: var(--muted); margin-right: 2px; }
.np-chips button { border: 1px solid var(--line); background: var(--card, #fff); color: var(--ink); border-radius: 999px; padding: 5px 12px; font: inherit; font-weight: 600; font-size: .82rem; cursor: pointer; }
.np-chips button:hover { border-color: var(--ink); }
.np-adres { margin: 0; font-size: .9rem; color: var(--muted); } .np-adres b { color: var(--ink); font-weight: 700; }
.np-lnk { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 3px; cursor: pointer; }
.np-lnk:hover { text-decoration-color: var(--ink); }
.np-uit[hidden] { display: none; }
.np-website { padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.np-website p { margin: 6px 0 0; color: var(--muted); font-size: .86rem; }
.np-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 22px; border: 2px dashed #c0c9d7; border-radius: 14px; background: var(--bg);
  color: var(--muted); font-weight: 400; cursor: pointer; transition: border-color .15s, background .15s; }
.np-drop:hover, .np-drop.over { border-color: #4fb3ff; background: rgba(79,179,255,.06); }
.np-drop svg { color: var(--green-dark); } .np-drop b { color: var(--ink); }
.np-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .92rem; }
.np-lijst:empty { display: none; }
.np-lijst li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 10px; }
.np-voet { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-top: 18px; padding: 16px 28px 20px; border-top: 1px solid var(--line); background: var(--bg); }
.np-voet > p { margin: 0; font-size: .9rem; color: var(--muted); }
.np-voet-rechts { display: grid; justify-items: end; gap: 6px; flex: 1 1 260px; }
.np-voet-rechts .alert, .np-voet-rechts .muted { margin: 0; text-align: right; }
.np-voet .meter { width: 100%; margin: 0; } .np-voet .meter span { background: linear-gradient(90deg, #9fd6ff, #4fb3ff); transition: width .3s; }
.np-knop { min-height: 50px; padding: 0 34px; font-size: 14px; color: #0d1828 !important; }
.np-knop:disabled { opacity: .7; cursor: default; transform: none; }
@media (max-width: 640px) { .np-kop, .np-body, .np-voet { padding-left: 18px; padding-right: 18px; } .np-stap { grid-template-columns: 1fr; } .np-nr { margin-bottom: 6px; } .np-inhoud { grid-column: 1; } }

/* Eerste portal: donker paneel zoals de hero van de homepage, met het formulier erin */
.wk { position: relative; isolation: isolate; overflow: hidden; margin: .5rem 0 1.5rem; padding: 40px 36px 34px; border-radius: 22px; background: #0d1828; color: #fff;
  box-shadow: 0 24px 60px rgba(13,24,40,.18); }
.wk::before { content: ""; position: absolute; inset: -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 40% 55% at 72% 30%, rgba(79,179,255,.30), transparent), radial-gradient(ellipse 40% 55% at 22% 70%, rgba(165,195,92,.22), transparent);
  animation: wk-zweef 18s ease-in-out infinite alternate; }
.wk::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 35%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 60% 60% at 50% 35%, #000 30%, transparent 100%); }
@keyframes wk-zweef { to { transform: translate3d(2%, 2%, 0) scale(1.06); } }
.wk-midden { max-width: 784px; margin: 0 auto; }
.wk-tag { position: relative; z-index: 0; display: inline-block; padding: 4px 14px; font-size: 11.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: #4fb3ff; }
.wk-tag::before { content: ""; position: absolute; inset: 0 5px; transform: skewX(-18deg); background: rgba(79,179,255,.16); z-index: -1; }
.wk h2 { margin: 12px 0 8px; font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.1; color: #fff; } .wk h2 span { color: #4fb3ff; }
.wk-lead { margin: 0 0 26px; color: #c0cad8; font-size: 1.06rem; }
.wk a { color: #fff; }
.wk-stappen { display: grid; gap: 22px; }
.wk .np-nr { width: 34px; height: 34px; font-size: .95rem; }
.wk .np-stap { grid-template-columns: 34px minmax(0, 1fr); }
.wk .np-stap h3 { color: #fff; font-size: 1.12rem; } .wk .np-hulp { color: #aab3c1; }
.wk-prompt { display: block; border-radius: 18px; padding: 2px; }
.wk-prompt textarea { display: block; width: 100%; box-sizing: border-box; margin: 0; min-height: 96px; resize: vertical; border: 0; border-radius: 16px; background: #15233a; color: #fff;
  font: 500 17px/1.5 Asap, system-ui, sans-serif; padding: 16px 18px; }
.wk-prompt textarea::placeholder { color: #a3afc2; }
.wk-prompt textarea:focus { outline: 0; box-shadow: inset 0 0 0 1.5px #4fb3ff; }
.wk-naamrij { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.wk input { margin: 0; border: 1px solid rgba(255,255,255,.2); background: #15233a; color: #fff; border-radius: 12px; }
.wk input::placeholder { color: #a3afc2; }
.wk input:focus { outline: 0; border-color: #4fb3ff; box-shadow: 0 0 0 4px rgba(79,179,255,.2); }
.wk-naam { flex: none; width: 100%; font-size: 1.05rem; font-weight: 600; }
.wk .np-adres { color: #aab3c1; } .wk .np-adres b { color: #fff; }
.wk .np-lnk { color: #fff; } .wk .np-lnk:hover { text-decoration-color: #fff; }
.wk label { color: #dce4f0; }
.wk .addr span { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: #aab3c1; }
.wk .np-website { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); } .wk .np-website p { color: #aab3c1; }
.wk-actie { margin-top: 28px; display: grid; justify-items: center; gap: 8px; text-align: center; }
.wk-actie .alert { margin: 0; }
.wk-actie p.wk-na { margin: 0; color: #aab3c1; font-size: .92rem; }
.wk-feiten { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; padding: 0; font-size: .9rem; color: #c0cad8; }
.wk-feiten li { display: inline-flex; align-items: center; gap: 8px; }
.wk-feiten li::before { content: ""; width: 12px; height: 6px; margin-top: -3px; border-left: 2px solid #4fb3ff; border-bottom: 2px solid #4fb3ff; transform: rotate(-45deg); }
.wk-knop { min-height: 54px; padding: 0 42px; font-size: 15px; color: #0d1828 !important; }
.wk-knop::before { box-shadow: 0 10px 26px rgba(79,179,255,.4); }
@media (max-width: 640px) { .wk { padding: 28px 18px 26px; } .wk .np-stap { grid-template-columns: 1fr; } .wk .np-inhoud { grid-column: 1; } }
@media (prefers-reduced-motion: reduce) { .wk::before { animation: none; } }
.wk .addr { background: #15233a; border-color: rgba(255,255,255,.2); } .wk .addr input { border: 0; box-shadow: none; }

/* Eerste portal over de hele pagina: van rand tot rand onder de menubalk, minstens schermhoog, inhoud in het midden */
body:has(.wk-vol) { overflow-x: clip; }
body:has(.wk-vol) footer.foot { display: none; }
.wk.wk-vol { width: 100vw; margin: -2rem calc(50% - 50vw) -4rem; border-radius: 0; box-shadow: none;
  min-height: calc(100vh - 100px); display: flex; align-items: center; padding: 56px 24px; }
.wk.wk-vol .wk-midden { width: 100%; }
.notice ~ .wk.wk-vol { margin-top: .5rem; }  /* voorbeeldweergave: de balk blijft zichtbaar */

/* Stap 3 (optioneel): logo en kleuren van je website; lichter dan de vaste stappen, met een uitlegwolkje bij het (?) */
.np-optioneel { padding-top: 18px; border-top: 1px dashed var(--line); }
.wk .np-optioneel { border-top-color: rgba(255,255,255,.14); }
.np-nr-leeg { background: transparent; border: 2px solid var(--green); color: var(--green-dark); }
.wk .np-nr-leeg { color: #4fb3ff; }
.np-opt { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--code); color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 2px; }
.wk .np-opt { background: rgba(255,255,255,.1); color: #c0cad8; }
.np-info { position: relative; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 6px; border-radius: 50%; border: 1.5px solid var(--muted);
  color: var(--muted); font-size: .72rem; font-weight: 800; cursor: help; vertical-align: 1px; }
.wk .np-info { border-color: #aab3c1; color: #dce4f0; }
.np-info:focus-visible { outline: 2px solid #4fb3ff; outline-offset: 2px; }
.np-wolk { display: none; position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); width: min(300px, 80vw); padding: 12px 14px; border-radius: 12px;
  background: #0d1828; color: #d8e1ee; font-size: .84rem; font-weight: 500; line-height: 1.45; text-align: left; text-transform: none; letter-spacing: 0; box-shadow: 0 16px 40px rgba(0,0,0,.3); z-index: 10; }
.np-wolk::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 8px solid transparent; border-top-color: #0d1828; }
.wk .np-wolk { background: #e9eef6; color: #0d1828; } .wk .np-wolk::after { border-top-color: #e9eef6; }
.np-info:hover .np-wolk, .np-info:focus .np-wolk { display: block; }
.np-ghost { background: transparent; border: 1.5px solid var(--line); color: var(--ink); border-radius: 10px; padding: 8px 14px; font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; }
.np-ghost:hover { border-color: var(--ink); }
.wk .np-ghost { border-color: rgba(255,255,255,.35); color: #fff; } .wk .np-ghost:hover { border-color: #fff; }
.np-ghost[hidden] { display: none; }
/* invoervelden voor het idee niet eindeloos hoog laten slepen */
.np-gloed textarea, .wk-prompt textarea { max-height: 320px; }

/* Stap 2: naam en adres naast elkaar; het adres volgt de naam tot je het zelf aanpast */
.np-naam-adres { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; }
.np-naam-adres label { margin: 0; font-weight: 700; font-size: .9rem; }
.np-naam-adres input { margin-top: 6px; } .np-naam-adres .addr { margin-top: 6px; } .np-naam-adres .addr input { margin: 0; }
.np-adres-hulp { margin: 0; color: var(--muted); font-size: .84rem; } .wk .np-adres-hulp { color: #aab3c1; }
.wk .wk-naam { width: 100%; }
@media (max-width: 640px) { .np-naam-adres { grid-template-columns: 1fr; } }
.np-inhoud > label > input[name="name"] { max-width: 420px; }
/* Venster Nieuwe portal: zonder nummers bij de stappen (het eerste scherm houdt ze wel) */
.np-dialog .np-nr { display: none; }
.np-dialog .np-stap { grid-template-columns: minmax(0, 1fr); }
.np-dialog .np-inhoud { grid-column: 1; }

/* Overzicht: statusstrook voor een portal die wordt opgezet (initOpzetStrook) */
.opzet-strook { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px 18px;
  margin: 1.25rem 0 1rem; padding: 16px 20px 16px 22px; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.opzet-strook + .opzet-strook { margin-top: -.25rem; }
.opzet-strook::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(#a5c35c, #4fb3ff); }
.os-ico { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #d8e6f5; border-top-color: #4fb3ff; animation: spin 1s linear infinite; }
.os-tekst { min-width: 0; }
.os-tekst small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.os-tekst strong { font-size: 1.05rem; } .os-tekst span { color: var(--muted); font-size: .92rem; }
.os-pct { font-weight: 800; font-variant-numeric: tabular-nums; }
.os-link { font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 3px; white-space: nowrap; }
.os-balk { grid-column: 2 / 3; height: 8px; border-radius: 999px; background: var(--code); overflow: hidden; }
.os-balk i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #9fd6ff, #4fb3ff); transition: width .6s ease; }
.opzet-strook.klaar .os-ico { animation: none; border: 0; background: var(--green); position: relative; }
.opzet-strook.klaar .os-ico::after { content: ""; position: absolute; left: 8px; top: 7px; width: 10px; height: 5px; border-left: 2.5px solid #20211c; border-bottom: 2.5px solid #20211c; transform: rotate(-45deg); }
.opzet-strook.klaar .os-pct, .opzet-strook.klaar .os-balk, .opzet-strook.fout .os-pct, .opzet-strook.fout .os-balk { display: none; }
.opzet-strook.fout::before { background: var(--bad); } .opzet-strook.fout .os-ico { animation: none; border-color: var(--bad); }
@media (max-width: 640px) { .opzet-strook { grid-template-columns: auto minmax(0, 1fr); } .os-pct { display: none; } .os-link { grid-column: 2; } }
@media (prefers-reduced-motion: reduce) { .os-ico { animation: none; } }

/* Bouwscherm in het kader van de testversie terwijl Jouw AI de eerste versie bouwt */
.wp-kader { position: relative; }
.wp-bouw { position: absolute; inset: 0; z-index: 2; isolation: isolate; overflow: auto; display: grid; place-items: center; padding: 32px 20px; background: #0d1828; color: #fff; text-align: center; }
.wp-bouw::before { content: ""; position: absolute; inset: -10%; z-index: -1; pointer-events: none; animation: wk-zweef 14s ease-in-out infinite alternate;
  background: radial-gradient(ellipse 40% 55% at 72% 35%, rgba(79,179,255,.30), transparent), radial-gradient(ellipse 40% 55% at 25% 70%, rgba(165,195,92,.22), transparent); }
.wp-bouw-in { max-width: 600px; }
.wp-bouw h2 { margin: 12px 0 8px; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; color: #fff; } .wp-bouw h2 span { color: #4fb3ff; }
.wp-bouw-lead { margin: 0 0 22px; color: #c0cad8; }
.wp-skelet { width: min(440px, 100%); margin: 0 auto 22px; background: #15233a; border: 1px solid #2a3b57; border-radius: 14px; overflow: hidden; text-align: left; }
.wp-skelet .sk-kop { height: 32px; background: #1a2b44; display: flex; align-items: center; gap: 8px; padding: 0 12px; }
.wp-skelet .sk-kop i { width: 18px; height: 18px; border-radius: 5px; background: #4fb3ff; } .wp-skelet .sk-kop b { width: 90px; height: 9px; border-radius: 5px; background: #2b4060; }
.wp-skelet .sk-in { padding: 14px; display: grid; gap: 9px; }
.wp-skelet .r { position: relative; overflow: hidden; height: 10px; border-radius: 5px; background: #1e314e; } .wp-skelet .r.k { width: 55%; height: 14px; } .wp-skelet .r.m { width: 80%; }
.wp-skelet .sk-tegels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.wp-skelet .sk-tegels span { position: relative; overflow: hidden; height: 44px; border-radius: 8px; background: #1a2b45; border-top: 3px solid #4fb3ff; }
.wp-skelet .r::after, .wp-skelet .sk-tegels span::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(79,179,255,.25), transparent); animation: wp-golf 1.8s ease-in-out infinite; }
@keyframes wp-golf { to { transform: translateX(100%); } }
.wp-bouw-nu { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  font-size: .92rem; color: #c0cad8; max-width: 100%; }
.wp-bouw-nu b { color: #fff; } .wp-bouw-nu [data-wp-bouw-nu] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wp-bouw-nu .dots { display: inline-flex; gap: 4px; } .wp-bouw-nu .dots i { width: 6px; height: 6px; border-radius: 50%; background: #4fb3ff; animation: w-dot-p 1.2s infinite; }
.wp-bouw-nu .dots i:nth-child(2) { animation-delay: .15s; } .wp-bouw-nu .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes w-dot-p { 0%, 80%, 100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
.wp-bouw-lijst { list-style: none; margin: 18px auto 0; padding: 0; display: grid; gap: 7px; max-width: 340px; text-align: left; font-size: .9rem; color: #7a889d; }
.wp-bouw-lijst li { display: flex; align-items: center; gap: 9px; }
.wp-bouw-lijst li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #3c4c65; margin-left: 2px; }
.wp-bouw-lijst li.klaar { color: #cfd0c8; }
.wp-bouw-lijst li.klaar::before { width: 12px; height: 6px; border: 0; border-left: 2px solid #a5c35c; border-bottom: 2px solid #a5c35c; border-radius: 0; transform: rotate(-45deg); margin: -3px 2px 0 2px; }
.wp-bouw-lijst li.bezig { color: #fff; font-weight: 700; }
.wp-bouw-lijst li.bezig::before { width: 12px; height: 12px; border-color: #3d5a73; border-top-color: #4fb3ff; animation: spin 1s linear infinite; margin-left: 1px; }
.wp-bouw-voet { margin: 18px 0 0; color: #a3afc2; font-size: .86rem; }
.wp-bouw-toch { display: block; margin: 10px auto 0; padding: 0; border: 0; background: none; font: inherit; font-size: .82rem; color: #7a889d; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wp-bouw-toch:hover { color: #fff; }
.wp-bouw[data-wacht] .wp-bouw-nu .dots i { animation: none; opacity: .6; transform: scale(.7); }
@media (prefers-reduced-motion: reduce) { .wp-bouw::before, .wp-skelet .r::after, .wp-skelet .sk-tegels span::after, .wp-bouw-nu .dots i, .wp-bouw-lijst li.bezig::before { animation: none; } }

/* --- Meldingen onder je naam (melding() in app.js): donker blokje met gekleurd icoon, tekst, knop en een aftelbalkje --- */
.melding { position: fixed; top: 72px; right: 12px; z-index: 60; width: min(380px, calc(100% - 24px)); padding: 16px 18px 14px; border-radius: 16px;
  background: #0d1828; color: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.35); animation: ml-in .35s cubic-bezier(.2,.9,.3,1.2); }
.melding::before { content: ""; position: absolute; top: -7px; right: var(--ml-pijl, 18px); width: 14px; height: 14px; background: #0d1828; transform: rotate(45deg); border-radius: 3px 0 0 0; }
@keyframes ml-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
.ml-kop { display: flex; align-items: center; gap: 12px; }
.ml-ico { flex: none; position: relative; width: 28px; height: 28px; border-radius: 50%; }
.melding.klaar .ml-ico { background: #4fb3ff; }
.melding.klaar .ml-ico::after { content: ""; position: absolute; left: 8px; top: 8px; width: 11px; height: 6px; border-left: 2.5px solid #0d1828; border-bottom: 2.5px solid #0d1828; transform: rotate(-45deg); }
.melding.info .ml-ico { background: #4fb3ff; } .melding.info .ml-ico::after { content: "i"; position: absolute; inset: 0; display: grid; place-items: center; color: #0d1828; font-weight: 800; font-size: 15px; }
.melding.fout .ml-ico { background: #e5484d; } .melding.fout .ml-ico::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; }
.ml-kop small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #4fb3ff; }
.melding.info .ml-kop small { color: #4fb3ff; } .melding.fout .ml-kop small { color: #ff8a8d; }
.ml-kop b { display: block; font-size: 1rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-kop > div { min-width: 0; }
.ml-x { margin-left: auto; align-self: flex-start; border: 0; background: none; color: #a3afc2; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; }
.ml-x:hover { color: #fff; }
.ml-tekst { margin: 10px 0 0; color: #c0cad8; font-size: .9rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ml-acties { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.ml-knop { color: #0d1828 !important; }
.ml-lnk { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: #4fb3ff; text-underline-offset: 3px; }
.ml-tijd { height: 3px; margin-top: 14px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.ml-tijd i { display: block; height: 100%; background: linear-gradient(90deg, #9fd6ff, #4fb3ff); animation: ml-aftel 12s linear forwards; transform-origin: 0 50%; }
.melding:hover .ml-tijd i { animation-play-state: paused; }
@keyframes ml-aftel { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.side-av.ml-stip { position: relative; } .side-av.ml-stip::after { content: ""; position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: #4fb3ff; border: 2px solid #0d1828; }
@media (prefers-reduced-motion: reduce) { .melding { animation: none; } .ml-tijd i { animation-duration: 12s; } }

/* Meldingen onder je naam: wit (zoals in het concept), met een fijne rand; alle soorten in dezelfde stijl */
.melding { background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(13,24,40,.22); }
.melding::before { background: #fff; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.ml-kop b { color: var(--ink); }
.ml-kop small { color: #1f6fb0; } .melding.info .ml-kop small { color: #1f6fb0; } .melding.fout .ml-kop small { color: var(--bad); }
.ml-x { color: var(--muted); } .ml-x:hover { color: var(--ink); }
.ml-tekst { color: #26364f; }
.ml-lnk { color: var(--ink); }
.ml-tijd { background: #e4eaf4; }
html[data-theme="dark"] .melding, html[data-theme="dark"] .melding::before { background: #15233a; border-color: #2a3b57; }
html[data-theme="dark"] .ml-kop b, html[data-theme="dark"] .ml-lnk { color: #eef2f8; } html[data-theme="dark"] .ml-tekst { color: #c0cad8; }
html[data-theme="dark"] .ml-tijd { background: rgba(255,255,255,.1); }

/* Kop van de portal: knop "Bekijk live" naast Publiceren, zelfde vorm (afgerond, 40 px), maar licht */
.kop-live { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card, #fff); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color .15s; }
.kop-live:hover { border-color: var(--ink); color: var(--ink); }
.kop-live span { color: var(--muted); }

/* Kop: "Live versie" en "Publiceren" als één blok; met iets te publiceren de draaiende groen-blauwe lijn eromheen */
.kop-versie { position: relative; z-index: 20; isolation: isolate; display: inline-block; border-radius: 13.5px; padding: 1.5px; }  /* z-index: wolkje boven de testversie (Chat + testversie) */
.kop-versie.met-pub::before, .kop-versie.met-pub::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--gloed-js, var(--gloed-hoek)), #a5c35c 0deg, #4fb3ff 110deg, #a5c35c 180deg, #4fb3ff 290deg, #a5c35c 360deg); animation: gloed-draai 3.5s linear infinite; }
.kop-versie.met-pub::after { filter: blur(10px); opacity: .35; }
.kv-blok { display: flex; align-items: stretch; height: 40px; border: 1px solid var(--line); border-radius: 12px; background: var(--card, #fff); overflow: hidden; }
.kop-versie.met-pub .kv-blok { border-color: transparent; }
.kv-live, .kv-pub { display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; border: 0; }
.kv-live { color: var(--ink); } .kv-live:hover { background: var(--bg); color: var(--ink); }
.kv-stip { width: 8px; height: 8px; border-radius: 50%; background: #a5c35c; box-shadow: 0 0 0 3px rgba(165,195,92,.28); }  /* live = groen, vast (--green is sinds de blauwe huisstijl blauw) */
.kv-pijl { color: var(--muted); }
.kv-test { border-right: 1px solid var(--line); }  /* Testversie links van Live versie */
.kv-stip.test { background: #4fb3ff; box-shadow: 0 0 0 3px rgba(79,179,255,.25); }
.kv-pub { background: #0d1828; color: #fff; cursor: pointer; border-left: 1px solid var(--line); }
.kv-pub[hidden] { display: none; }
.kv-pub:hover { background: #000; } .kv-pub:disabled { opacity: .6; cursor: default; }
.kv-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #4fb3ff; color: #0d1828; font-size: 11.5px; font-weight: 800; }
html[data-theme="dark"] .kv-pub { background: #e9eef6; color: #0d1828; } html[data-theme="dark"] .kv-pub:hover { background: #fff; }
@media (max-width: 1300px) { .kop-versie .kv-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .kv-live, .kv-pub { padding: 0 12px; } }
@media (prefers-reduced-motion: reduce) { .kop-versie.met-pub::before, .kop-versie.met-pub::after { animation: none; } }

/* Overzicht: status "Bezig" zolang Jouw AI een opdracht uitvoert (initStatusBezig) */
.badge.s-ai-bezig { display: inline-flex; align-items: center; gap: 6px; background: #e8f4ff; color: #1f6fb0; }
.badge.s-ai-bezig::before { content: ""; flex: none; width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; border: 2px solid #b8dcfb; border-top-color: #4fb3ff; animation: spin 1s linear infinite; }
html[data-theme="dark"] .badge.s-ai-bezig { background: rgba(79,179,255,.14); color: #9fd6ff; }
.badge.s-shared { background: #ece8ff; color: #5b45c4; }  /* portal op een gedeelde server (shared01) */
.gs-server + .gs-server { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.gs-server h3 { margin: 0; }
.gs-usage { margin-top: .7rem; }
html[data-theme="dark"] .badge.s-shared { background: rgba(155,135,255,.16); color: #c4b8ff; }
@media (prefers-reduced-motion: reduce) { .badge.s-ai-bezig::before { animation: none; } }

.ml-tekst { white-space: pre-line; }
.melding.fout .ml-tekst { -webkit-line-clamp: 8; }

/* Afgekeurde wijziging: welke opdracht, waarom, en "Ongedaan maken" (initAfgekeurd) */
.afgekeurd { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; margin: 0 0 1rem; padding: 16px 20px;
  background: var(--card, #fff); border: 1px solid #f1c9c5; border-left: 4px solid var(--bad); border-radius: 14px; box-shadow: 0 8px 24px -14px rgba(179,38,30,.3); }
.ak-ico { width: 30px; height: 30px; border-radius: 50%; background: var(--bad); color: #fff; display: grid; place-items: center; font-weight: 800; }
.ak-tekst small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bad); }
.ak-tekst b { display: block; margin: 2px 0; font-size: 1rem; } .ak-tekst q { font-style: italic; }
.ak-reden { display: block; color: var(--muted); font-size: .9rem; }
.ak-acties { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.ak-knop { color: #fff !important; } .ak-knop::before { background: #0d1828 !important; }
.ak-msg { grid-column: 2 / -1; margin: 0; color: var(--bad); font-size: .9rem; }
.msg.user.afgekeurd-msg { outline: 2px solid var(--bad); outline-offset: 3px; position: relative; }
.ak-label { position: absolute; top: -11px; right: 10px; padding: 1px 8px; border: 0; border-radius: 999px; background: var(--bad); color: #fff; cursor: pointer;
  font: inherit; font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.ak-label:hover { background: #8f1d16; } .ak-label:focus-visible { outline: 2px solid #4fb3ff; outline-offset: 2px; }
@keyframes ak-aandacht { 0%, 100% { box-shadow: 0 8px 24px -14px rgba(179,38,30,.3); } 40% { box-shadow: 0 0 0 5px rgba(179,38,30,.25), 0 8px 24px -14px rgba(179,38,30,.3); } }
.afgekeurd.ak-aandacht { animation: ak-aandacht 1.2s ease-out 2; }
@media (prefers-reduced-motion: reduce) { .afgekeurd.ak-aandacht { animation: none; } }
@media (max-width: 760px) { .afgekeurd { grid-template-columns: auto minmax(0, 1fr); } .ak-acties { grid-column: 1 / -1; justify-content: flex-start; } }

/* Afgekeurde wijziging als één dunne regel (vervangt het grotere blok) */
.afgekeurd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 1rem; padding: 7px 8px 7px 14px; grid-template-columns: none;
  border-radius: 10px; background: #fdf3f2; border: 1px solid #f6d6d2; box-shadow: none; font-size: .9rem; }
.ak-stip { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); flex: none; }
.afgekeurd .ak-tekst { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #5b2420; }
.afgekeurd .ak-tekst b { display: inline; margin: 0; font-size: inherit; color: var(--bad); } .afgekeurd .ak-tekst q { font-style: italic; } .afgekeurd .ak-tekst span { color: #8a5550; }
.afgekeurd .ak-acties { display: flex; gap: 6px; flex: none; }
.ak-klein { border: 1px solid #ecc4bf; background: #fff; color: var(--ink); font: inherit; font-size: .82rem; font-weight: 600; padding: 4px 12px; border-radius: 8px; cursor: pointer; }
.ak-klein:hover { border-color: var(--bad); } .ak-klein.donker { background: #0d1828; color: #fff; border-color: #0d1828; } .ak-klein.donker:hover { background: #000; }
.ak-klein:disabled { opacity: .6; cursor: default; }
.afgekeurd .ak-msg { flex-basis: 100%; margin: 0; color: var(--bad); font-size: .85rem; }
html[data-theme="dark"] .afgekeurd { background: rgba(220,60,50,.12); border-color: rgba(220,60,50,.3); }
html[data-theme="dark"] .afgekeurd .ak-tekst { color: #f3c9c5; } html[data-theme="dark"] .ak-klein { background: #15233a; color: #eef2f8; border-color: rgba(220,60,50,.35); }
@keyframes ak-aandacht { 0%, 100% { box-shadow: none; } 40% { box-shadow: 0 0 0 4px rgba(179,38,30,.22); } }

/* "Ik heb dit echt nodig": rustig linkje in de regel en een klein venster eronder */
.afgekeurd { position: relative; }
.ak-lnk { background: none; border: 0; padding: 0 6px; font: inherit; font-size: .84rem; font-weight: 600; color: #5b2420; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ak-lnk:hover { color: var(--bad); }
.ak-pop { position: absolute; right: 8px; top: calc(100% + 10px); z-index: 20; width: min(460px, calc(100vw - 32px)); padding: 18px 20px 16px; border-radius: 16px;
  background: var(--card, #fff); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(13,24,40,.22); }
.ak-pop[hidden] { display: none; }
.ak-pop::before { content: ""; position: absolute; top: -8px; right: 250px; width: 14px; height: 14px; background: var(--card, #fff); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.ak-pop h3 { margin: 0 0 4px; font-size: 1.05rem; } .ak-pop > p { margin: 0 0 12px; color: var(--muted); font-size: .9rem; }
.ak-pop label { font-weight: 700; font-size: .9rem; } .ak-pop textarea { margin-top: 6px; }
.ak-pop-voet { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.ak-pop-voet small { color: var(--muted); font-size: .8rem; } .ak-pop-voet .sbtn { color: #0d1828 !important; flex: none; }
.ak-pop-fout { margin: 8px 0 0; color: var(--bad); font-size: .85rem; }

.ak-ticket { color: #1f6fb0 !important; text-decoration-color: #9fd0f5; }

/* Heroverweging: na "Ik heb dit echt nodig" wordt de rode regel blauw; reviewpagina toont de uitleg en het eerdere besluit */
.afgekeurd.ak-her { background: #eef6fd; border-color: #cfe4f6; }
.afgekeurd.ak-her .ak-stip { background: #4fb3ff; }
.afgekeurd.ak-her .ak-tekst { color: #1d3d57; } .afgekeurd.ak-her .ak-tekst b { color: #1f6fb0; }
.afgekeurd.ak-her .ak-klein { border-color: #cfe4f6; }
html[data-theme="dark"] .afgekeurd.ak-her { background: rgba(79,179,255,.1); border-color: rgba(79,179,255,.3); }
html[data-theme="dark"] .afgekeurd.ak-her .ak-tekst { color: #d4e9fa; } html[data-theme="dark"] .afgekeurd.ak-her .ak-tekst b { color: #8ccbff; }
.badge.s-heroverweging { background: #e3f1fc; color: #1f6fb0; }
.rv-uitleg { white-space: pre-wrap; background: #eef6fd; border-left: 3px solid #4fb3ff; border-radius: 0 12px 12px 0; padding: 1rem; font-size: .95rem; }
.rv-uitleg > span { display: block; margin-top: .5rem; color: var(--muted); font-size: .85rem; white-space: normal; }
.rv-vorig { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: .9rem; font-size: .92rem; }
.rv-vorig .report { margin: .5rem 0 0; }
html[data-theme="dark"] .rv-uitleg { background: rgba(79,179,255,.1); }

/* Eigen chatberichten zacht: lichte groen-blauwe tint (zoals de gloed om het opdrachtvenster) i.p.v. vol groen */
#portal .msg.user { background: linear-gradient(135deg, #e8edf5 0%, #EBF5FD 100%); border: 1px solid #DCE9EC; color: #0d1828;
  border-radius: 20px 20px 6px 20px; box-shadow: 0 6px 18px -12px rgba(79,179,255,.45); font-weight: 400; padding: .75rem 1.05rem; }
#portal .msg.user b { font-weight: 600; color: #33521a; }
#portal .msg.user .msg-tekst { display: block; }
#portal .msg.user .msg-tekst.ingeklapt { max-height: 9.9em; overflow: hidden; -webkit-mask: linear-gradient(#000 65%, transparent); mask: linear-gradient(#000 65%, transparent); }
#portal .msg-meer { display: inline-block; margin-top: .35rem; padding: 0; border: 0; background: none; font: inherit; font-size: .82rem;
  font-weight: 600; color: #5d7a20; cursor: pointer; white-space: normal; }
#portal .msg-meer:hover { text-decoration: underline; text-underline-offset: 3px; }
#portal .msg.user .bijlage { background: #fff; border-color: #DCE9EC; color: #0d1828; }
#portal .msg.user .bijlage svg, #portal .msg.user .bijlage .muted { color: var(--muted); }
html[data-theme="dark"] #portal .msg.user { background: linear-gradient(135deg, rgba(79,179,255,.16) 0%, rgba(79,179,255,.13) 100%);
  border-color: rgba(79,179,255,.25); color: #e4eaf4; box-shadow: none; }
html[data-theme="dark"] #portal .msg.user b { color: #c9e08f; } html[data-theme="dark"] #portal .msg-meer { color: #b6d27a; }
html[data-theme="dark"] #portal .msg.user .bijlage { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); color: #e4eaf4; }

/* Eigen chatberichten zacht blauw (AI-blauw uit de huisstijl, heel licht); duidelijker te onderscheiden van de witte antwoorden */
#portal .msg.user { background: #E3F1FD; border-color: #C9E2F8; box-shadow: 0 8px 20px -12px rgba(79,179,255,.55); }
#portal .msg.user b { color: #1f5f94; }
#portal .msg-meer { color: #1f6fb0; }
#portal .msg.user .bijlage { border-color: #C9E2F8; }
html[data-theme="dark"] #portal .msg.user { background: rgba(79,179,255,.16); border-color: rgba(79,179,255,.32); }
html[data-theme="dark"] #portal .msg.user b, html[data-theme="dark"] #portal .msg-meer { color: #8ccbff; }

/* chat: e-mailadres bevestigen vóór de eerste opdracht na registreren */
#portal .msg.sys.verifieer { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; text-align: left; width: min(560px, 100%);
  max-width: 100%; padding: 1.1rem 1.25rem; font-size: .9rem; line-height: 1.5; border: 1.5px solid #4fb3ff; border-radius: 14px; background: rgba(79,179,255,.07); }
#portal .msg.sys.verifieer strong { color: var(--ink); font-size: .95rem; }
#portal .msg.sys.verifieer .verifieer-form { margin-top: .15rem; }
.start-verifieer { margin: .9rem 0 0; padding: .85rem .95rem; border: 1.5px solid #4fb3ff; border-radius: 12px; background: rgba(79,179,255,.07); }
.start-verifieer p { margin: 0 0 .55rem; }
.start-verifieer [data-verifieer-msg]:not(:empty) { display: block; margin-top: .4rem; }
.start-verifieer .verifieer-form input { flex: 1 1 7rem; width: auto; min-width: 0; }
.verifieer-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.verifieer-form input { width: 9rem; letter-spacing: .15em; font-variant-numeric: tabular-nums; }

/* startscherm: subtiel bestaande website/app overzetten */
.wk-actie p.wk-over { margin: .2rem 0 0; color: #aab3c1; font-size: .92rem; }

/* Upgradeadvies bovenaan de portal (Bouwen) en als label in het overzicht: valt op, zonder alarm (oranje, geen rood) */
.upgrade-balk { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 1rem; padding: 14px 18px;
  background: var(--card, #fff); border: 1px solid #F2C36B; border-left: 4px solid var(--warn); border-radius: 14px;
  box-shadow: 0 8px 24px -16px rgba(154,100,0,.45); }
.upgrade-balk[hidden] { display: none; }
.ub-icoon { width: 38px; height: 38px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); display: grid; place-items: center; flex: none; }
.ub-tekst { flex: 1; min-width: 240px; font-size: .92rem; line-height: 1.45; }
.ub-tekst > b:first-child { display: block; margin-bottom: 2px; font-size: 1rem; }
.ub-acties { display: flex; align-items: center; gap: 10px; flex: none; }
.upgrade-balk [data-upgrade-msg] { flex-basis: 100%; margin: 0; }
.upgrade-balk [data-upgrade-aanvragen-msg] { flex-basis: 100%; margin: 0; }
/* Gedeelde server: eigen managed server aanvragen (_advies.html) */
.upgrade-blok { border-radius: 14px; background: var(--green-soft); padding: 1rem 1.1rem; }
.upgrade-blok > strong { display: block; font-size: 1rem; }
.ub-voordelen { list-style: none; padding: 0; margin: .7rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .55rem .9rem; }
.ub-voordelen li { display: grid; grid-template-columns: 18px 1fr; gap: .5rem; font-size: .9rem; color: var(--ink-2); }
.ub-voordelen svg { margin-top: .2rem; color: var(--green-dark); }
.ub-voordelen b { display: block; color: var(--ink); }
.ub-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-top: .9rem; }
.upgrade-blok [data-upgrade-aanvragen-msg] { margin: .6rem 0 0; }
.upgrade-label { display: block; margin-top: .55rem; padding: 4px 10px; border-radius: 8px; background: var(--warn-soft); color: var(--warn);
  font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upgrade-label.klein { display: inline-block; margin: 0 0 0 4px; padding: 2px 8px; }
html[data-theme="dark"] .upgrade-balk { border-color: rgba(255,190,80,.35); border-left-color: var(--warn); }
@media (max-width: 760px) { .ub-acties { width: 100%; } }

/* aanwijzen: een knop of blok even laten oplichten (vanaf de kaart "Je portal in ... stappen klaar") */
.aangewezen { animation: aanwijzen 1.6s ease-out 2; }
@keyframes aanwijzen { 0% { box-shadow: 0 0 0 0 rgba(79,179,255,.7); } 70% { box-shadow: 0 0 0 14px rgba(79,179,255,0); } 100% { box-shadow: 0 0 0 0 rgba(79,179,255,0); } }
@media (prefers-reduced-motion: reduce) { .aangewezen { animation: none; outline: 3px solid #4fb3ff; outline-offset: 2px; } }

/* Klaar om te publiceren: klein donker wolkje onder Publiceren en een regeltje met knop in de chat */
.pub-wolk { position: absolute; top: calc(100% + 10px); right: 0; z-index: 7; display: flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 8px 8px 8px 12px; border-radius: 10px; background: #0d1828; color: #e4eaf4; font-size: .86rem; font-weight: 500;
  box-shadow: 0 10px 24px rgba(13,24,40,.25); animation: tip-in .2s ease-out; }
.pub-wolk[hidden] { display: none; }
.pub-wolk::before { content: ""; position: absolute; top: -5px; right: 44px; width: 10px; height: 10px; background: #0d1828; transform: rotate(45deg); border-radius: 2px 0 0 0; }
.pw-dot, .kp-dot { width: 7px; height: 7px; border-radius: 50%; background: #4fb3ff; box-shadow: 0 0 0 3px rgba(79,179,255,.25); flex: none; }
.pw-pub { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: #c9e08f; cursor: pointer; }
.pw-pub:hover { color: #fff; }
.pw-x { background: none; border: 0; padding: 0 4px; font: inherit; font-size: 16px; line-height: 1; color: #79879c; cursor: pointer; }
.pw-x:hover { color: #fff; }
html[data-theme="dark"] .pub-wolk, html[data-theme="dark"] .pub-wolk::before { background: #e9eef6; color: #0d1828; }
html[data-theme="dark"] .pw-pub { color: #4e6b16; } html[data-theme="dark"] .pw-x:hover { color: #0d1828; }
@media (max-width: 640px) { .pub-wolk { white-space: normal; width: min(300px, calc(100vw - 32px)); } }
.klaar-pub .kp-klaar { display: none; }
html.pub-klaar .klaar-pub.laatste .kp-oud { display: none; }
html.pub-klaar .klaar-pub.laatste .kp-klaar { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
html.pub-klaar #portal .msg.sys.klaar-pub.laatste { padding: .3rem .4rem .3rem .9rem; color: var(--ink); }
/* Jouw AI werkt of er wachten nog berichten: Publiceren nergens tonen tot alles klaar is (aiBezig in app.js) */
[data-ai-bezig] [data-publiceer], [data-ai-bezig] .pub-wolk,
html.ai-bezig [data-publiceer], html.ai-bezig [data-versions] [data-action="publiceren"], html.ai-bezig .pub-wolk,
html.ai-bezig .gloed-knop:has([data-publiceer]), html.ai-bezig.pub-klaar .klaar-pub.laatste .kp-klaar { display: none !important; }
html.ai-bezig.pub-klaar .klaar-pub.laatste .kp-oud { display: inline; }
html.ai-bezig .kop-versie.met-pub::before, html.ai-bezig .kop-versie.met-pub::after { display: none; }
html.ai-bezig .kop-versie.met-pub .kv-blok { border-color: var(--line); }
.kp-klaar a { color: inherit; font-weight: 600; text-decoration-color: var(--line); }
.kp-pub { border: 0; border-radius: 999px; padding: .2rem .8rem; background: #0d1828; color: #fff; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
.kp-pub:hover { background: #000; }
html[data-theme="dark"] .kp-pub { background: #e9eef6; color: #0d1828; }

/* Hulp van 24x7 ICT: voor medewerkers een duidelijke rode melding als de klant geen toestemming gaf */
.geen-toestemming { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; margin: 0 0 1rem; padding: 12px 16px;
  background: var(--bad-soft); border: 1px solid #f1c9c5; border-left: 5px solid var(--bad); border-radius: 12px; color: #5b2420; }
.geen-toestemming strong { color: var(--bad); }
html[data-theme="dark"] .geen-toestemming { color: var(--ink); border-color: rgba(220,60,50,.45); }
.toestemming-ok { margin: -.4rem 0 .9rem; color: var(--ok); }
.hulp-lijst li { display: flex; align-items: center; gap: 10px; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.hulp-lijst li:last-child { border-bottom: 0; }
.hulp-lijst .grow { flex: 1; min-width: 0; }

/* Overzicht: laadanimatie bij elk openen. Eerst kort een glimmend skelet over de rijen, dan schuiven ze één voor één in
   beeld; cijfers tellen op (initOverzichtLaden), tegoedbalken lopen vol en het grafiekje groeit. Niet bij minder beweging. */
@media (prefers-reduced-motion: no-preference) {
  /* skelet: een vlak in de kleur van de kaart met een glimmende balk, over elke cel (lijst) of de hele kaart; het verdwijnt
     rij voor rij, waarna de inhoud iets omhoog schuift */
  .ov-rij { position: relative; }
  tr.ov-rij > td { position: relative; }
  .portal-card.ov-rij::after, tr.ov-rij > td::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
    background: linear-gradient(90deg, #e4eaf4 25%, #f3f6fa 50%, #e4eaf4 75%) 16px 50% / calc(100% - 32px) 14px no-repeat, var(--card, #fff);
    animation: ov-puls 1s ease-in-out infinite, ov-weg .25s ease-out both; animation-delay: 0s, calc(var(--i, 0) * 80ms + 330ms); }
  .portal-card.ov-rij::after { background: linear-gradient(90deg, #e4eaf4 25%, #f3f6fa 50%, #e4eaf4 75%) 24px 28px / 45% 16px no-repeat,
    linear-gradient(90deg, #e4eaf4 25%, #f3f6fa 50%, #e4eaf4 75%) 24px 60px / 70% 12px no-repeat,
    linear-gradient(90deg, #e4eaf4 25%, #f3f6fa 50%, #e4eaf4 75%) 24px 92px / 60% 12px no-repeat, var(--card, #fff); }
  .portal-card.ov-rij > *, tr.ov-rij > td > * { animation: ov-in .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 80ms + 350ms); }
  .ov-laad .stat strong { animation: ov-in .4s ease-out both .15s; }
  .ov-laad .spark rect { transform-box: fill-box; transform-origin: 50% 100%; animation: ov-groei .5s cubic-bezier(.2,.8,.2,1) both;
    animation-delay: calc(var(--i, 0) * 15ms + 250ms); }
  .pc-credit .meter span { transition: width .9s cubic-bezier(.2,.8,.2,1) .45s; }
}
@keyframes ov-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes ov-puls { 50% { filter: brightness(1.05); } }
@keyframes ov-weg { to { opacity: 0; visibility: hidden; } }
@keyframes ov-groei { from { transform: scaleY(0); } }
html[data-theme="dark"] tr.ov-rij > td::after { background: linear-gradient(90deg, #15233a 25%, #1b2d48 50%, #15233a 75%) 16px 50% / calc(100% - 32px) 14px no-repeat, var(--card); }
html[data-theme="dark"] .portal-card.ov-rij::after { background: var(--card); }

/* Overzicht (mix met premium-stijl): rustiger kaarten met zachte schaduw, grote cijfers, lijngrafiek met activiteit ernaast.
   Hover: kaart 2 px omhoog met een lichte groene gloed. */
.ov-kpis .stat { padding: 20px 20px 16px; min-height: 148px; border-color: #e0e7f2; border-radius: 14px;
  box-shadow: 0 1px 2px rgba(13,24,40,.04), 0 8px 24px -10px rgba(13,24,40,.10); }
.ov-kpis .stat-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; letter-spacing: .09em; }
.ov-kpis .stat strong { font-size: 38px; line-height: 1.05; margin-top: 10px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ov-kpis .stat strong em { font-style: normal; font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-left: 5px; }
.ov-kpis .stat strong.stat-small { font-size: 22px; margin-top: 14px; }
.ov-kpis .stat-sub { margin-top: auto; padding-top: 8px; }
.ov-tag { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #1f6fb0; background: #e7edf5; border-radius: 999px; padding: 1px 8px; }
.ov-balk { display: block; height: 5px; border-radius: 5px; background: #eef2f8; overflow: hidden; margin-top: auto; }
.ov-balk i { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, #9fd6ff, #4fb3ff); }
.ov-kpis .ov-balk + .stat-sub { margin-top: 0; }
.ov-kpis .stat, .portal-card, .verder-strook, .ov-midden .card { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1); }
.ov-kpis .stat:hover, .portal-card:hover, .verder-strook:hover, .ov-midden .card:hover { transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(13,24,40,.04), 0 18px 36px -14px rgba(13,24,40,.16), 0 0 0 1px rgba(31,111,176,.22); }
.ov-midden { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; margin: -12px 0 2rem; align-items: start; }
@media (max-width: 1000px) { .ov-midden { grid-template-columns: 1fr; } }
.ov-midden .card { margin: 0; border-color: #e0e7f2; box-shadow: 0 1px 2px rgba(13,24,40,.04), 0 8px 24px -10px rgba(13,24,40,.10); }
.ov-grafiek { padding: 22px 24px 16px; }
.ov-gkop { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.ov-gkop h2 { font-size: 17px; margin: 0; } .ov-gkop p { margin: 2px 0 0; font-size: 14px; }
.ov-seg { display: flex; background: #ebf0f7; border-radius: 8px; padding: 2px; }
.ov-seg button { border: 0; background: none; font: inherit; font-size: 13px; color: var(--muted); padding: 4px 12px; border-radius: 6px; cursor: pointer;
  transition: background .2s, color .2s; }
.ov-seg button[aria-pressed="true"] { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(13,24,40,.08); }
.ov-lijn { display: block; width: 100%; height: auto; margin-top: 14px; overflow: visible; }
.ov-lijn .as { stroke: #eef2f8; }
.ov-lijn text { fill: #929dae; font-size: 11px; font-family: Asap, sans-serif; }
.ov-lijn .l { fill: none; stroke: #1f6fb0; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ov-lijn .vlak { fill: url(#ov-vlak); }
.ov-lijn circle { fill: #fff; stroke: #1f6fb0; stroke-width: 2; }
.ov-lijn .hit { fill: transparent; }
.ov-feed { padding: 20px 0 10px; }
.ov-feed h2 { font-size: 17px; margin: 0 24px 8px; }
.ov-feed > p { margin: 8px 24px; }
.ov-item { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 9px 24px; position: relative; color: inherit; text-decoration: none; transition: background .2s; }
.ov-item:hover { background: #f9fbfd; color: inherit; }
.ov-item:not(:last-child)::before { content: ""; position: absolute; left: 35px; top: 34px; bottom: -8px; width: 1px; background: #e0e7f2; }
.ov-dot { width: 24px; height: 24px; border-radius: 50%; border: 1px solid #e0e7f2; background: var(--card, #fff); display: grid; place-items: center; position: relative; z-index: 1; }
.ov-dot i { width: 6px; height: 6px; border-radius: 50%; background: #929dae; }
.ov-dot.ok i { background: #86A43F; } .ov-dot.ai i { background: #4fb3ff; }
.ov-tekst { display: block; font-size: 14px; line-height: 1.4; color: var(--ink-2, #26364f); overflow-wrap: anywhere; }
.ov-item small { font-size: 12.5px; color: #929dae; }
.ov-stip, .ov-dot.ai i { position: relative; }
.ov-stip { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #4fb3ff; margin-right: 7px; vertical-align: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .ov-stip::after, .ov-dot.ai i::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid #4fb3ff; opacity: 0;
    animation: ov-puls-ring 2.8s cubic-bezier(.2,.8,.2,1) infinite; }
  .ov-balk i { transition: width .9s cubic-bezier(.2,.8,.2,1) .35s; }
  .ov-midden { animation: ov-in .45s cubic-bezier(.2,.8,.2,1) both .3s; }
}
@keyframes ov-puls-ring { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(2.3); opacity: 0; } }
.portal-list tbody tr .pl-go svg { transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.portal-list tbody tr:hover .pl-go svg { transform: translateX(3px); }
html[data-theme="dark"] .ov-kpis .stat, html[data-theme="dark"] .ov-midden .card { border-color: var(--line); box-shadow: none; }
html[data-theme="dark"] .ov-seg { background: #15233a; } html[data-theme="dark"] .ov-seg button[aria-pressed="true"] { background: #26364f; color: #eef2f8; }
html[data-theme="dark"] .ov-lijn .as { stroke: #1b2d48; } html[data-theme="dark"] .ov-lijn circle { fill: #0d1828; }
html[data-theme="dark"] .ov-item:hover { background: #132033; } html[data-theme="dark"] .ov-tag { background: #182841; color: #c9e08f; }
html[data-theme="dark"] .ov-balk { background: #15233a; } html[data-theme="dark"] .ov-dot, html[data-theme="dark"] .ov-item:not(:last-child)::before { border-color: var(--line); }

/* Overzicht: activiteit even hoog als de grafiek (de lijst scrolt binnen de kaart), zodat er geen lege ruimte ontstaat */
.ov-midden { align-items: stretch; }
@media (min-width: 1001px) {
  .ov-feed { position: relative; padding: 0; min-height: 0; overflow: hidden; }
  .ov-feed-in { position: absolute; inset: 0; overflow-y: auto; padding: 20px 0 10px; scrollbar-width: thin; }
  .ov-feed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; pointer-events: none; border-radius: 0 0 14px 14px;
    background: linear-gradient(rgba(255,255,255,0), var(--card, #fff)); }
}

/* Prijs: uitleg van de code in gewone taal (verslag + top 10) */
.code-uitleg .section-title { display: flex; align-items: center; gap: .5rem; }
.cu-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: linear-gradient(135deg, rgba(79,179,255,.22), rgba(79,179,255,.22)); color: var(--ink); }
.cu-ico svg { width: 17px; height: 17px; }
.cu-ico.groot { width: 44px; height: 44px; border-radius: 12px; }
.cu-ico.groot svg { width: 22px; height: 22px; }
.cu-leeg { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cu-leeg > div { flex: 1; min-width: 240px; }
.cu-leeg p { margin: .2rem 0 0; }
.cu-verslag { margin: .25rem 0 1.1rem; font-size: .98rem; line-height: 1.6; max-width: 80ch; }
.cu-top { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cu-top li { display: grid; grid-template-columns: 2rem 1fr auto; gap: .9rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.cu-nr { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--code); font-size: .8rem; font-weight: 700; color: var(--muted); }
.cu-top li.overig .cu-nr { background: none; }
.cu-tekst { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.cu-tekst span { color: var(--muted); font-size: .88rem; line-height: 1.45; }
.cu-top li.overig .cu-tekst strong { font-weight: 600; color: var(--muted); }
.cu-getal { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; font-size: .82rem; color: var(--muted); white-space: nowrap; }
.cu-getal > b { color: var(--ink); font-size: .95rem; }
.cu-getal .mini { margin: 0; }
.cu-voet { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
.cu-msg { margin: .75rem 0 0; }
.code-technisch { margin: 0 0 1.25rem; }
.code-technisch > summary { cursor: pointer; margin: 0 0 1rem; color: var(--muted); font-size: .9rem; font-weight: 600; }
.code-technisch > summary:hover { color: var(--ink); }
@media (max-width: 560px) { .cu-top li { grid-template-columns: 1.7rem 1fr; } .cu-getal { grid-column: 2; align-items: flex-start; } }

/* Portaloverzicht (medewerkers): toestemming van de klant voor hulp van 24x7 ICT */
.pc-rechts { display: inline-flex; align-items: center; gap: 6px; }
.hulp-oog { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex: none; }
.hulp-oog.aan { color: var(--ok); background: var(--green-soft); }
.hulp-oog.uit { color: var(--bad); background: var(--bad-soft); }
.slot-icoon { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex: none; color: var(--ink); background: var(--code); }

/* Opdracht van 24x7 ICT in het gesprek: donkerblauwe ballon met een rand van groen naar blauw, zoals het ballonnetje in
   het logo; zo zie je meteen wat van 24x7 komt (in licht en donker hetzelfde) */
#portal .msg.v24 { align-self: flex-end; max-width: 72%; padding: .6rem 1rem .5rem; border-radius: 20px 20px 6px 20px;
  background: linear-gradient(#13284A, #13284A) padding-box, linear-gradient(90deg, #a5c35c, #3DA9FF) border-box;
  border: 1.5px solid transparent; color: #fff; white-space: pre-wrap; box-shadow: 0 10px 24px -14px rgba(19,40,74,.75); }
.v24-kop { display: flex; align-items: center; gap: 8px; margin-bottom: .3rem; font-size: .8rem; white-space: normal; }
.v24-intern { display: block; margin-top: .45rem; padding-top: .4rem; border-top: 1px dashed rgba(255,255,255,.18); font-size: .84rem;
  max-height: 14em; overflow: auto; }
#portal .msg.v24 .v24-kop { color: #a5c35c; }
.v24-logo { flex: none; width: 20px; height: 20px; display: block; }
html #portal .msg.v24 .v24-intern { color: #c5cfdd; }
#portal .msg.v24 .v24-intern b { color: #fff; }
#portal .msg.v24 .msg-tijd { color: #97a5ba; opacity: 1; }
@media (max-width: 760px) { #portal .msg.v24 { max-width: 88%; } }
/* Tijdstip van een bericht en wanneer Jouw AI klaar was */
.msg-tijd { display: block; margin-top: .3rem; font-size: .72rem; font-weight: 400; opacity: .7; text-align: right; white-space: normal; }
.msg-klaar-tijd { align-self: flex-start; margin: -.15rem 0 .35rem 44px; font-size: .72rem; color: var(--muted); }
@media (max-width: 760px) { .msg-klaar-tijd { margin-left: 0; } }

/* Hulp van 24x7 ICT: eerste keer bewust ja of nee kiezen (vanaf het stappenplan) */
.hulp-vraag { margin: .75rem 0 .5rem; }
.hulp-keuze { gap: .5rem; flex-wrap: wrap; }

/* Nieuwe stijl voor Instellingen en FAQ (main.ns): dezelfde opbouw, de rust van het nieuwe overzicht. Fijne randen, zachte
   schaduwen, grotere titel, zachtere velden; blokken komen na elkaar in beeld; FAQ-kaarten tillen iets op bij hover. */
main.ns .pagehead h1, main.ns .kb-hero h1 { font-size: 36px; letter-spacing: -.02em; }
main.ns .card { border-color: #e0e7f2; border-radius: 14px; box-shadow: 0 1px 2px rgba(13,24,40,.04), 0 8px 24px -10px rgba(13,24,40,.10); }
main.ns .card h2 { font-size: 17px; }
main.ns input:not([type="checkbox"]):not([type="radio"]):not([type="search"]), main.ns select, main.ns textarea {
  border-color: #e0e7f2; border-radius: 10px; background: #f9fbfd; transition: border-color .2s, box-shadow .2s, background .2s; }
main.ns input:not([type="checkbox"]):not([type="radio"]):not([type="search"]):hover, main.ns select:hover, main.ns textarea:hover { border-color: #cbd5e3; }
main.ns input:not([type="checkbox"]):not([type="radio"]):not([type="search"]):focus, main.ns select:focus, main.ns textarea:focus {
  outline: 0; border-color: #4fb3ff; background: #fff; box-shadow: 0 0 0 4px rgba(79,179,255,.14); }
main.ns input:disabled { color: var(--muted); background: #f2f5f9; }
main.ns .settings-tabs a { transition: color .2s; }
main.ns .ns-balk { height: 5px; border-radius: 5px; background: #eef2f8; overflow: hidden; margin: 14px 0 6px; }
main.ns .ns-balk i { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, #9fd6ff, #4fb3ff); }
main.ns .ns-balk-tekst { margin: 0; }
/* FAQ */
main.ns .kb-search { border-color: #e0e7f2; box-shadow: 0 1px 2px rgba(13,24,40,.04), 0 8px 24px -10px rgba(13,24,40,.10); }
main.ns .kb-cat-ico, main.ns .kb-cat-head .kb-cat-ico { width: auto; height: auto; padding-top: 2px; background: none; border-radius: 0; color: #1f6fb0; }
main.ns .kb-cat, main.ns .kb-article, main.ns .kb-side .card { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1); }
main.ns .kb-cat:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(13,24,40,.04), 0 18px 36px -14px rgba(13,24,40,.16), 0 0 0 1px rgba(31,111,176,.22); }
main.ns .kb-list a { transition: background .2s; }
main.ns .kb-list a:hover { background: #f2f5f9; }
main.ns .kb-list strong { display: flex; justify-content: space-between; gap: 8px; }
main.ns .kb-list strong::after { content: "→"; color: #929dae; transition: transform .2s cubic-bezier(.2,.8,.2,1), color .2s; }
main.ns .kb-list a:hover strong::after { transform: translateX(3px); color: #1f6fb0; }
@media (prefers-reduced-motion: no-preference) {
  main.ns > * { animation: ov-in .4s cubic-bezier(.2,.8,.2,1) both; }
  main.ns .ns-balk i { transition: width 1s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 90ms + 250ms); }
  main.ns > *:nth-child(2) { animation-delay: 70ms; } main.ns > *:nth-child(3) { animation-delay: 140ms; }
  main.ns > *:nth-child(4) { animation-delay: 210ms; } main.ns > *:nth-child(5) { animation-delay: 280ms; }
  main.ns > *:nth-child(n+6) { animation-delay: 350ms; }
  main.ns .kb-grid > .kb-cat { animation: ov-in .4s cubic-bezier(.2,.8,.2,1) both; }
  main.ns .kb-grid > .kb-cat:nth-child(2) { animation-delay: 70ms; } main.ns .kb-grid > .kb-cat:nth-child(3) { animation-delay: 140ms; }
  main.ns .kb-grid > .kb-cat:nth-child(4) { animation-delay: 210ms; } main.ns .kb-grid > .kb-cat:nth-child(n+5) { animation-delay: 280ms; }
  main.ns .ns-balk i { transition: width .9s cubic-bezier(.2,.8,.2,1) .35s; }
}
html[data-theme="dark"] main.ns .card, html[data-theme="dark"] main.ns .kb-search { border-color: var(--line); box-shadow: none; }
html[data-theme="dark"] main.ns input:not([type="checkbox"]):not([type="radio"]):not([type="search"]), html[data-theme="dark"] main.ns select,
html[data-theme="dark"] main.ns textarea { background: var(--card); border-color: var(--line); }
html[data-theme="dark"] main.ns .kb-list a:hover { background: #132033; } html[data-theme="dark"] main.ns .ns-balk { background: #15233a; }

/* Sterktebalk bij een nieuw wachtwoord (Instellingen) */
.ns-sterkte { display: flex; gap: 4px; width: 50%; margin-top: 6px; }
.ns-sterkte i { flex: 1; height: 3px; border-radius: 3px; background: #e0e7f2; transition: background .25s; }
.ns-sterkte i.aan.kort, .ns-sterkte i.aan.zwak { background: #e5484d; }
.ns-sterkte i.aan.redelijk { background: #e0a030; }
.ns-sterkte i.aan.goed { background: #a5c35c; }
.ns-sterkte i.aan.sterk { background: #1f6fb0; }
.ns-sterkte-tekst { display: block; min-height: 1.1em; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
html[data-theme="dark"] .ns-sterkte i { background: #1b2d48; }

/* Support in de nieuwe stijl (main.ns): kale iconen bij contact, ticketregels die oplichten bij hover */
main.ns .contact-ico { width: auto; height: auto; background: none; border-radius: 0; color: #1f6fb0; }
main.ns .contact-card .contact-line { border-top-color: #eef2f8; transition: color .2s; }
main.ns .tickets li { border-top-color: #eef2f8; padding: .7rem .7rem; margin: 0 -.7rem; border-radius: 10px; transition: background .2s; }
main.ns .tickets li:first-child { padding-top: .7rem; }
main.ns .tickets li:hover { background: #f2f5f9; }
html[data-theme="dark"] main.ns .tickets li:hover { background: #132033; }

/* FAQ als kennisbank: groot zoekveld, live resultaten met markering, populaire vragen en onderwerpen met illustratie */
.kb-kop { position: relative; padding: 1rem 0 .5rem; }
.kb-midden { max-width: 760px; margin: 0 auto; text-align: center; }
.kb-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #4fb3ff; }
.kb-midden h1 { font-size: 40px; letter-spacing: -.02em; margin: .3rem 0 .3rem; }
.kb-midden > p { margin: 0; }
.kb-zoek { display: flex; flex-direction: row; align-items: center; gap: 12px; height: 60px; margin: 1.5rem auto 0; padding: 0 14px 0 20px; background: var(--card, #fff);
  border: 1px solid #e0e7f2; border-radius: 14px; box-shadow: 0 1px 2px rgba(13,24,40,.04), 0 8px 24px -10px rgba(13,24,40,.10); color: #929dae; font-weight: 400;
  transition: border-color .2s, box-shadow .2s; }
.kb-zoek:focus-within { border-color: #4fb3ff; box-shadow: 0 0 0 4px rgba(79,179,255,.14), 0 8px 24px -10px rgba(13,24,40,.10); }
.kb-zoek input, main.ns .kb-zoek input { flex: 1; min-width: 0; height: auto; border: 0; outline: 0; box-shadow: none; padding: 0; background: none; font-size: 17px; color: var(--ink); }
.kb-zoek input::-webkit-search-cancel-button { display: none; }
.kb-wis, .kb-kbd { flex: none; font: 600 12px Asap, sans-serif; color: var(--muted); border: 1px solid #e0e7f2; border-radius: 6px; padding: 2px 8px; background: #ebf0f7; }
.kb-wis { border: 0; cursor: pointer; } .kb-wis[hidden], .kb-kbd[hidden] { display: none; }
.kb-veel { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 14px; font-size: 14px; color: var(--muted); }
.kb-veel button { border: 1px solid #e0e7f2; background: var(--card, #fff); border-radius: 999px; padding: 4px 12px; font: 500 13.5px Asap, sans-serif; color: var(--ink-2, #26364f);
  cursor: pointer; transition: border-color .2s, transform .2s cubic-bezier(.2,.8,.2,1); }
.kb-veel button:hover { border-color: #4fb3ff; transform: translateY(-1px); }
.kb-res { max-width: 760px; margin: 1.75rem auto 0; }
.kb-res[hidden] { display: none; }
.kb-res-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.kb-res-kop h2 { font-size: 16px; font-weight: 600; margin: 0; } .kb-res-kop h2 b { font-weight: 700; }
.kb-hint { font-size: 12.5px; color: #929dae; }
.kb-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.kb-filters button { border: 1px solid #e0e7f2; background: var(--card, #fff); border-radius: 999px; padding: 4px 12px; font: 500 13px Asap, sans-serif; color: var(--muted); cursor: pointer; }
.kb-filters button span { color: #929dae; margin-left: 4px; }
.kb-filters button.on { background: #0d1828; border-color: #0d1828; color: #fff; } .kb-filters button.on span { color: #96a1b2; }
.kb-lijst { background: var(--card, #fff); border: 1px solid #e0e7f2; border-radius: 14px; box-shadow: 0 1px 2px rgba(13,24,40,.04), 0 8px 24px -10px rgba(13,24,40,.10); overflow: hidden; }
.kb-hit { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 16px 20px; border-top: 1px solid #ebf0f7; color: var(--ink); text-decoration: none;
  transition: background .15s; }
.kb-hit:first-child { border-top: 0; }
.kb-hit:hover, .kb-hit.act { background: #f2f5f9; color: var(--ink); }
.kb-hit-cat { grid-column: 1 / -1; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #4fb3ff; }
.kb-hit b { font-size: 16.5px; font-weight: 600; line-height: 1.35; }
.kb-hit p { grid-column: 1; margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.kb-pijl { grid-row: 2 / 4; grid-column: 2; color: #929dae; transition: transform .2s cubic-bezier(.2,.8,.2,1), color .2s; }
.kb-hit:hover .kb-pijl, .kb-hit.act .kb-pijl { transform: translateX(3px); color: #4fb3ff; }
.kb-hit mark, .kb-res mark { background: rgba(79,179,255,.45); color: inherit; border-radius: 3px; padding: 0 1px; }
.kb-leeg { text-align: center; padding: 36px 24px; } .kb-leeg b { display: block; font-size: 17px; margin-bottom: 4px; } .kb-leeg p { margin: 0 0 16px; color: var(--muted); }
.kb-niet { margin: 14px 0 0; text-align: center; font-size: 14px; color: var(--muted); }
.kb-ook { margin: 0 0 12px; font-size: 14px; color: var(--muted); } .kb-ook b { color: var(--ink); font-weight: 600; }
.kb-ook .linkbtn { font-size: inherit; font-weight: 600; }
.kb-blok-kop { margin: 2.6rem 0 .9rem; } .kb-blok-kop h2 { font-size: 20px; margin: 0; }
.kb-pop { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .kb-pop { grid-template-columns: 1fr; } }
.kb-pop a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; background: var(--card, #fff); border: 1px solid #e0e7f2; border-radius: 12px;
  color: var(--ink); text-decoration: none; font-weight: 600; box-shadow: 0 1px 2px rgba(13,24,40,.04), 0 8px 24px -10px rgba(13,24,40,.10);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1); }
.kb-pop i { font-style: normal; color: #929dae; transition: transform .2s cubic-bezier(.2,.8,.2,1), color .2s; }
.kb-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 2rem; }
@media (max-width: 900px) { .kb-cats { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .kb-cats { grid-template-columns: 1fr; } }
.kb-cat-k { display: block; padding: 12px 12px 18px; background: var(--card, #fff); border: 1px solid #e0e7f2; border-radius: 14px; color: var(--ink); text-decoration: none;
  box-shadow: 0 1px 2px rgba(13,24,40,.04), 0 8px 24px -10px rgba(13,24,40,.10); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1); }
.kb-ill { display: block; width: 100%; height: auto; border-radius: 10px; font-family: Asap, sans-serif; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.kb-cat-k b, .kb-cat-k p, .kb-cat-k small { display: block; padding: 0 8px; }
.kb-cat-k b { font-size: 16.5px; margin: 14px 0 2px; } .kb-cat-k p { margin: 0; font-size: 13.5px; color: var(--muted); }
.kb-cat-k small { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: #4fb3ff; }
.kb-pop a:hover, .kb-cat-k:hover { transform: translateY(-2px); color: var(--ink);
  box-shadow: 0 1px 2px rgba(13,24,40,.04), 0 18px 36px -14px rgba(13,24,40,.16), 0 0 0 1px rgba(79,179,255,.35); }
.kb-pop a:hover i { transform: translateX(3px); color: #4fb3ff; } .kb-cat-k:hover .kb-ill { transform: scale(1.02); }
html[data-theme="dark"] .kb-zoek, html[data-theme="dark"] .kb-lijst, html[data-theme="dark"] .kb-pop a, html[data-theme="dark"] .kb-cat-k { border-color: var(--line); box-shadow: none; }
html[data-theme="dark"] .kb-hit:hover, html[data-theme="dark"] .kb-hit.act { background: #132033; } html[data-theme="dark"] .kb-hit { border-top-color: var(--line); }
html[data-theme="dark"] .kb-wis, html[data-theme="dark"] .kb-kbd { background: #15233a; border-color: var(--line); }
main.ns > .kb-res { animation: none; }  /* zoekresultaten direct tonen, zonder de inloop van de pagina */

/* Omzetten naar de betaalde versie: offerte, voordelen en ondertekenen */
.trial-knop { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.omzet-kaart { border-left: 4px solid var(--green-dark); }
.offerte-blok h2 { margin-top: 0; }
.of-partijen { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; line-height: 1.5; }
.of-label { display: block; margin-bottom: .2rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.of-tabel { width: 100%; border-collapse: collapse; }
.of-tabel th, .of-tabel td { padding: .55rem .6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.of-tabel .num { text-align: right; white-space: nowrap; }
.of-tabel tfoot td { border-bottom: 0; }
.of-tabel tfoot tr:first-child td { border-top: 2px solid var(--ink); }
.of-let-op { margin: .9rem 0 0; padding: .7rem .9rem; border-radius: 10px; background: var(--warn-soft); color: #7A5000; font-size: .9rem; }
/* kop van Omzetten, in de stijl van jouwaiportal.nl: donker, groen-blauwe gloed, schuin label */
.omzet-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem; align-items: center; margin: 0 0 1.25rem; padding: 2.2rem 2.4rem; border-radius: 18px; background: #0d1828; color: #c0cad8; }
.omzet-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 45% 70% at 85% 30%, rgba(79,179,255,.22), rgba(79,179,255,0)),
              radial-gradient(ellipse 40% 70% at 10% 90%, rgba(165,195,92,.18), rgba(165,195,92,0)); }
.oh-tekst { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; min-width: 0; }
.oh-tag { position: relative; z-index: 0; padding: 5px 16px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #4fb3ff; }
.oh-tag::before { content: ""; position: absolute; inset: 0 5px; z-index: -1; transform: skewX(-18deg); background: rgba(79,179,255,.16); }
.omzet-hero h1 { margin: 0; color: #fff; font-size: 2rem; line-height: 1.15; text-wrap: balance; }
.oh-ai { color: #4fb3ff; text-shadow: 0 0 22px rgba(79,179,255,.45); }
.omzet-hero p { margin: 0; max-width: 56ch; line-height: 1.6; }
.oh-acties { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: .3rem; }
.oh-link { color: #dce4f0; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.oh-link:hover { color: #fff; border-color: #fff; }
.oh-prijs { display: flex; flex-direction: column; gap: .15rem; min-width: 13rem; padding: 1.2rem 1.4rem; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); }
.oh-prijs strong { color: #fff; font-size: 2.1rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.oh-label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #4fb3ff; }
.oh-klein { margin-top: .5rem; font-size: .82rem; color: #a3afc2; }
html[data-theme="dark"] .omzet-hero { background: #0f1929; border: 1px solid #1c2e49; }
@media (max-width: 760px) { .omzet-hero { grid-template-columns: 1fr; padding: 1.6rem 1.4rem; } .omzet-hero h1 { font-size: 1.6rem; } }

/* wat je krijgt: icoon per voordeel, "Klaar voor productie" breed bovenaan */
.vd-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.vd-raster li { display: flex; align-items: flex-start; gap: .85rem; padding: 1rem 1.05rem; border: 1px solid var(--line); border-radius: 14px; }
.vd-raster li > div { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.vd-raster li div span { color: var(--muted); font-size: .9rem; line-height: 1.5; }
.vd-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: var(--ink);
  background: linear-gradient(135deg, rgba(79,179,255,.28), rgba(79,179,255,.24)); }
.vd-raster li.vd-lead { grid-column: 1 / -1; order: -1; align-items: center; border-color: transparent;
  background: linear-gradient(110deg, rgba(79,179,255,.16), rgba(79,179,255,.12)); }
.vd-lead .vd-ico { width: 46px; height: 46px; background: #0d1828; color: #4fb3ff; }
.vd-lead strong { font-size: 1.05rem; }
@media (max-width: 980px) { .vd-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vd-raster { grid-template-columns: 1fr; } }
.of-afspraken { margin: 0; padding-left: 1.2rem; line-height: 1.55; }
.of-teken .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: .6rem; }
.of-handtekening { margin: .9rem 0; }
.of-handtekening canvas { display: block; width: 100%; max-width: 560px; aspect-ratio: 560 / 170; background: #fff; border: 1.5px dashed var(--line); border-radius: 10px; touch-action: none; cursor: crosshair; }
.of-handtekening .row { max-width: 560px; }
.of-getekend { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.of-getekend img { width: 260px; max-width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
@media (max-width: 760px) { .of-partijen, .of-teken .form-row { grid-template-columns: 1fr; } }
@media print {
  .no-print, header, .topbar, nav, .trial, footer { display: none !important; }
  body { background: #fff; }
  .offerte-blok { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
  .vd-raster { grid-template-columns: 1fr 1fr; } .vd-raster li.vd-lead { background: none; border-color: #ccc; }
}

/* Beheer > Portals: bekende adressen voor proefaccounts */
.ba-lijst { list-style: none; padding: 0; gap: .55rem; }
.ba-lijst li { display: flex; align-items: center; gap: .75rem; }
.ba-toevoegen { flex-wrap: wrap; align-items: flex-end; gap: .6rem; margin-top: .9rem; }
.ba-toevoegen label { gap: .45rem; }
.ba-ip { width: 15rem; font-family: var(--mono, ui-monospace, monospace); }

/* een blok via een link (#id) nooit onder de vaste menubalk laten vallen */
.card { scroll-margin-top: 84px; }

/* Startscherm na het registreren: de overgang van de donkere site naar de lichte backend. Alleen bovenin nog een
   donkere band met gloed (schuine onderkant zoals de hero van de homepage); het formulier staat in een witte kaart */
.wk.wk-vol { display: block; padding: 0 24px 48px; background: var(--bg); color: var(--ink); box-shadow: none; }
.wk.wk-vol::before, .wk.wk-vol::after { display: none; }
.wk-vol .wk-kop { position: relative; isolation: isolate; padding: 52px 0 108px; }
.wk-vol .wk-kop::before, .wk-vol .wk-kop::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0;
  left: calc(50% - 50vw); right: calc(50% - 50vw); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 0 100%); pointer-events: none; }
.wk-vol .wk-kop::before { background: radial-gradient(ellipse 30% 85% at 76% 15%, rgba(79,179,255,.22), transparent 70%),
  radial-gradient(ellipse 28% 85% at 20% 95%, rgba(165,195,92,.15), transparent 70%), #20211c; }
.wk-vol .wk-kop::after { background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 45% 80% at 50% 30%, #000 20%, transparent 100%); mask-image: radial-gradient(ellipse 45% 80% at 50% 30%, #000 20%, transparent 100%); }
.wk-vol .wk-lead { margin-bottom: 0; }
.wk-vol .wk-kaart { position: relative; margin-top: -80px; padding: 30px 34px 28px; border: 1px solid var(--line); border-radius: 20px;
  background: var(--card); box-shadow: 0 1px 2px rgba(13,24,40,.04), 0 24px 60px rgba(13,24,40,.12); }
/* in de kaart de gewone, lichte velden van de backend */
.wk-vol .wk-kaart .np-stap h3, .wk-vol .wk-kaart label, .wk-vol .wk-kaart .np-adres b, .wk-vol .wk-kaart .np-lnk, .wk-vol .wk-kaart a { color: var(--ink); }
.wk-vol .wk-kaart .np-hulp, .wk-vol .wk-kaart .np-adres, .wk-vol .wk-kaart .np-website p, .wk-vol .wk-actie p.wk-na, .wk-vol .wk-actie p.wk-over { color: var(--muted); }
.wk-vol .wk-kaart input, .wk-vol .wk-prompt textarea { border: 1.5px solid var(--line); background: var(--card); color: var(--ink); }
.wk-vol .wk-prompt textarea { border-color: transparent; }
.wk-vol .wk-kaart input::placeholder, .wk-vol .wk-prompt textarea::placeholder { color: #8793a6; }
.wk-vol .wk-kaart input:focus { border-color: #4fb3ff; box-shadow: 0 0 0 4px rgba(79,179,255,.18); }
.wk-vol .wk-kaart .addr { background: var(--card); border-color: var(--line); } .wk-vol .wk-kaart .addr input { border: 0; box-shadow: none; }
.wk-vol .wk-kaart .addr span { background: var(--code); border-color: var(--line); color: var(--muted); }
.wk-vol .wk-kaart .np-website { background: var(--bg); border-color: var(--line); }
.wk-vol .wk-kaart .np-optioneel { border-top-color: var(--line); }
.wk-vol .wk-kaart .np-nr-leeg { color: var(--green-dark); }
.wk-vol .wk-kaart .np-opt { background: var(--code); color: var(--muted); }
.wk-vol .wk-kaart .np-info { border-color: var(--muted); color: var(--muted); }
.wk-vol .wk-kaart .np-wolk { background: #0d1828; color: #d8e1ee; } .wk-vol .wk-kaart .np-wolk::after { border-top-color: #0d1828; }
.wk-vol .wk-kaart .np-ghost { border-color: var(--line); color: var(--ink); } .wk-vol .wk-kaart .np-ghost:hover { border-color: var(--ink); }
.wk-vol .wk-kaart .np-lnk:hover { text-decoration-color: var(--ink); }
.wk-vol .wk-feiten { color: var(--muted); } .wk-vol .wk-feiten a { color: var(--ink); }
@media (max-width: 640px) { .wk.wk-vol { padding: 0 16px 36px; } .wk-vol .wk-kop { padding: 36px 0 96px; } .wk-vol .wk-kaart { padding: 22px 18px; } }

/* Portal opzetten: licht zoals de backend, met nog een vleugje van de huisstijl (draaiende groen-blauwe ring en balk) */
.opzet-ico { position: relative; isolation: isolate; display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 1.1rem; border-radius: 50%;
  color: var(--ink); box-shadow: 0 10px 28px rgba(79,179,255,.18); }
.opzet-ico[hidden] { display: none; }
.opzet-ico::before { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: 50%; background: conic-gradient(#a5c35c, #4fb3ff, #a5c35c);
  animation: spin 2.8s linear infinite; }
.opzet-ico::after { content: ""; position: absolute; inset: 3px; z-index: -1; border-radius: 50%; background: var(--card); }
.progress-card { border-color: transparent; box-shadow: 0 1px 2px rgba(13,24,40,.04), 0 30px 70px -26px rgba(79,179,255,.32), 0 30px 70px -34px rgba(79,179,255,.40); }
.progress-card h2 { font-size: 1.35rem; }
.progress-card .bar span { background: linear-gradient(90deg, #9fd6ff, #4fb3ff); }
@media (prefers-reduced-motion: reduce) { .opzet-ico::before { animation: none; } }

/* Beheer: facturatie per organisatie en de facturatie-API */
.fa-tabel form.inline { display: inline; margin-left: .6rem; }
.fa-tabel form.inline:first-child { margin-left: 0; }
.fa-sleutel { font-size: .9rem; word-break: break-all; }

/* Overzicht (beheerders): tegel met de AI-kosten bij Anthropic */
a.stat.ov-ai, a.stat.ov-link { color: inherit; text-decoration: none; }
a.stat.ov-ai:hover, a.stat.ov-link:hover { border-color: var(--ink); }
#portals { scroll-margin-top: 84px; }  /* tegel Portals op het overzicht scrolt hierheen, net onder de balk bovenin */
.ov-ai.let-op .ov-balk i { background: var(--warn); }
.ov-ai.over .ov-balk i { background: var(--bad); }
.ov-tag-schatting { background: var(--warn-soft); color: var(--warn); }

/* Beheer: zachte teller op een tabblad (informatief, geen actie nodig) */
.tabs .count.count-zacht { background: var(--code); color: var(--muted); }

/* Ticket van een review: besluit nemen vanaf het ticket (Beheer > Tickets) */
.tk-review { display: flex; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; flex-wrap: wrap; }
.tk-review p { margin: .25rem 0 0; }
.tk-review.open { border-left: 4px solid var(--warn); }
.tk-tegen h2 { margin: 0 0 .2rem; }
.tk-opdracht { border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1.1rem; margin-top: .9rem; }
.tk-kop { display: flex; justify-content: space-between; gap: .4rem 1rem; flex-wrap: wrap; }
.tk-opdracht blockquote { margin: .35rem 0 .4rem; white-space: pre-line; }
.tk-opdracht .notice { margin: .4rem 0 0; }
.tk-opdracht.genegeerd { border: 2px solid #E8890C; }
.tk-opdracht.genegeerd .tk-status { color: #B86A00; font-weight: 600; }
html[data-theme="dark"] .tk-opdracht.genegeerd .tk-status { color: #FFB65C; }
.tk-knoppen { display: flex; flex-wrap: wrap; gap: .5rem; }
.tk-doel { border-left: 3px solid var(--green); padding: .3rem 0 .3rem .8rem; margin: .5rem 0 .2rem; }

/* --- Zoeken in de menubalk (beheer): klanten, gebruikers, portals en agents; smal alleen een loep die een balk opent --- */
.zk { position: relative; flex: none; display: flex; align-items: center; }
.zk-knop { display: none; width: 38px; height: 38px; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: none; color: #c0cad8; cursor: pointer; }
.zk-knop:hover { background: #15233a; color: #fff; }
.zk-knop:focus-visible { outline: 3px solid #bfe0ff; outline-offset: 1px; }
.zk-veld { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 400; width: 270px; height: 38px; padding: 0 8px 0 11px; border-radius: 10px; background: #15233a; border: 1px solid #1d314e;
  color: #7a889d; cursor: text; transition: width .2s ease, border-color .2s, background .2s; }
.zk-veld:focus-within { width: 360px; background: #0d1623; border-color: #4fb3ff; color: #c0cad8; }
.zk-veld svg { flex: none; }
.zk-veld input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: #fff; font: inherit; font-size: 14px; box-shadow: none; }
.zk-veld input::placeholder { color: #7a889d; }
.zk-veld input::-webkit-search-cancel-button { display: none; }
.zk-veld kbd { flex: none; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid #253c5e; border-radius: 5px; color: #7a889d; font: 600 11.5px/18px Asap, sans-serif; text-align: center; }
.zk-veld:focus-within kbd { display: none; }
.zk-paneel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 45; width: 440px; max-height: min(70vh, 560px); overflow-y: auto; padding: 6px;
  border-radius: 14px; background: #fff; color: #0d1828; border: 1px solid #d1dae8; box-shadow: 0 18px 50px rgba(0,0,0,.25); }
.zk-groep { padding: 10px 10px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #586477; }
.zk-item { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 9px; color: #0d1828; text-decoration: none; }
.zk-item:hover, .zk-item.on { background: #e9eef6; color: #0d1828; }
.zk-ico { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #e2e8f2; color: #1f6fb0; }
.zk-ico.gebruiker { background: #eef4ff; color: #2c5d8f; } .zk-ico.portal { background: #f4efe6; color: #7a5a1e; } .zk-ico.agent { background: #f1ecf8; color: #5d3f8f; }
.zk-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.zk-tekst strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zk-tekst small { font-size: 12.5px; color: #586477; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zk-tekst mark { background: #cdd7e5; color: inherit; border-radius: 2px; }
.zk-leeg { padding: 14px 12px; color: #586477; font-size: 14px; }
html[data-theme="dark"] .zk-paneel { background: #121e31; color: #e9eef6; border-color: #26364f; }
html[data-theme="dark"] .zk-item { color: #e9eef6; } html[data-theme="dark"] .zk-item:hover, html[data-theme="dark"] .zk-item.on { background: #182840; color: #fff; }
html[data-theme="dark"] .zk-groep, html[data-theme="dark"] .zk-tekst small, html[data-theme="dark"] .zk-leeg { color: #a3afc2; }
html[data-theme="dark"] .zk-ico { background: #192942; color: #4fb3ff; } html[data-theme="dark"] .zk-tekst mark { background: #273d5e; }
@media (max-width: 1280px) {
  .zk-knop { display: inline-flex; }
  .zk-veld { display: none; }
  .zk.open .zk-veld { display: flex; position: fixed; left: 10px; right: 10px; top: 10px; z-index: 46; width: auto; height: 44px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
  .zk.open .zk-paneel { position: fixed; left: 10px; right: 10px; top: 62px; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .zk-veld { transition: none; } }

/* --- Meldingencentrum: bel in de kop, paneel van rechts (ontwerp J compact) --------------------------------------- */
.mc-bel { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border: 0; border-radius: 12px; background: none; color: #c0cad8; cursor: pointer; }
.mc-bel:hover, .mc-bel[aria-expanded="true"] { background: #15233a; color: #fff; }
.mc-bel:focus-visible { outline: 3px solid #bfe0ff; outline-offset: 1px; }
.mc-tel { position: absolute; top: 3px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: var(--green); color: var(--ink); font-size: 11px; font-weight: 800; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 2px #0d1828; }
.mc-scherm { position: fixed; inset: 0; z-index: 80; background: rgba(13,24,40,.28); opacity: 0; transition: opacity .2s; }
.mc-paneel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 81; width: min(420px, 100vw); display: flex; flex-direction: column;
  background: var(--card); border-left: 1px solid var(--line); box-shadow: -20px 0 40px rgba(13,24,40,.12);
  transform: translateX(100%); transition: transform .25s ease; padding-bottom: env(safe-area-inset-bottom, 0px); }
.mc-open .mc-scherm { opacity: 1; }
.mc-open .mc-paneel { transform: none; }
.mc-head { padding: calc(1.1rem + env(safe-area-inset-top, 0px)) 1.25rem .75rem; border-bottom: 1px solid var(--line); }
.mc-head h2 { margin: 0; font-size: 1.15rem; }
.mc-head h2:focus { outline: none; }
.mc-head-acties { gap: .5rem; }
.mc-tabs { display: flex; gap: .4rem; margin-top: .8rem; }
.mc-tabs button { border: 1px solid var(--line); background: none; border-radius: 999px; padding: .25rem .8rem; font: inherit; font-size: .85rem;
  cursor: pointer; color: var(--ink); }
.mc-tabs button.on { background: var(--ink); border-color: var(--ink); color: var(--card); }
.mc-lijst { list-style: none; margin: 0; padding: 0 .75rem .75rem; overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.mc-dag { padding: 1rem .5rem .45rem; font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.mc-leeg { padding: 2.5rem 1rem; text-align: center; color: var(--muted); font-size: .9rem; }
.mc-voet { padding: .8rem 1.25rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); }
.mc-x { flex: none; border: 0; background: none; font-size: 1.15rem; line-height: 1; color: var(--muted); cursor: pointer; padding: .1rem .35rem; border-radius: 8px; }
.mc-x:hover { background: var(--code); color: var(--ink); }
.mc-item { position: relative; margin-bottom: .4rem; padding: .6rem .8rem .6rem .95rem; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); overflow: hidden; }
.mc-item.nieuw::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--green); }
.mc-item:not(.nieuw) { background: var(--bg); }
.mc-top { display: flex; align-items: center; gap: .35rem; margin-bottom: .15rem; font-size: .76rem; color: var(--muted); }
.mc-ik { display: inline-flex; color: var(--muted); }
.mc-lab { font-weight: 700; white-space: nowrap; }
.mc-item.nieuw .mc-ik, .mc-item.nieuw .mc-lab { color: var(--green-dark); }
.mc-dot { display: none; width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
.mc-item.nieuw .mc-dot { display: inline-block; }
.mc-waar { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-tijd { margin-left: auto; flex: none; font-variant-numeric: tabular-nums; }
.mc-item strong { display: block; font-size: .9rem; line-height: 1.3; }
.mc-item:not(.nieuw) strong { font-weight: 500; }
.mc-item p { margin: .1rem 0 0; font-size: .82rem; line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.mc-item.kan-open { cursor: pointer; }
.mc-item.open p { display: block; -webkit-line-clamp: unset; white-space: pre-line; }
.mc-meer { display: block; margin-top: .15rem; font-size: .78rem; }
.mc-link { margin-top: .3rem; font-size: .8rem; text-align: right; }
.mc-link a { font-weight: 700; white-space: nowrap; }
.oplos-melding { border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1rem; margin: 0; display: grid; gap: .6rem; }
.oplos-ontvangers { display: grid; gap: .3rem; }
.oplos-kanalen { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.1rem; }
.dlg-knoppen { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }
@media (prefers-reduced-motion: reduce) { .mc-paneel, .mc-scherm { transition: none; } }
html[data-theme="dark"] body:not(.dark-auth) .mc-scherm { background: rgba(0,0,0,.5); }
html[data-theme="dark"] body:not(.dark-auth) .mc-paneel { background: #121e31; box-shadow: -20px 0 40px rgba(0,0,0,.45); }
html[data-theme="dark"] body:not(.dark-auth) .mc-item { background: #17263d; }
html[data-theme="dark"] body:not(.dark-auth) .mc-item:not(.nieuw) { background: #0f1929; }
html[data-theme="dark"] body:not(.dark-auth) .mc-item p { color: #c6d0df; }
html[data-theme="dark"] body:not(.dark-auth) .mc-item.nieuw .mc-ik, html[data-theme="dark"] body:not(.dark-auth) .mc-item.nieuw .mc-lab { color: #9fd6ff; }
html[data-theme="dark"] body:not(.dark-auth) .mc-tabs button.on { color: #0b1422; }

/* Ticket: verstuurde melding aan de klant (melding.opgelost) */
.tm.tm-melding { border: 1px solid #C9DD9A; background: var(--card); }
.tm .tm-label { display: flex; align-items: center; gap: .4rem; margin: 0 0 .35rem; font-size: .8rem; font-weight: 700; color: var(--green-dark); white-space: normal; }
html[data-theme="dark"] body:not(.dark-auth) .tm.tm-melding { border-color: rgba(79,179,255,.45); background: #121e31; }
html[data-theme="dark"] body:not(.dark-auth) .tm .tm-label { color: #9fd6ff; }

/* IP-afscherming (instellingen van een portal en Beheer) */
.ipslot-form .ip-rij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: .5rem; margin-bottom: .45rem; }
.ipslot-form .ip-rij input { margin: 0; }
.ipslot-lijst { border: 1px solid var(--line); border-radius: 12px; padding: .5rem .9rem .7rem; margin: 0; }
.ipslot-lijst legend { font-weight: 600; padding: 0 .3rem; }
.ipslot-vast { border-top: 1px solid var(--line); padding-top: .7rem; }
.ipslot-jij { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.ipslot-jij .stip, #ipslot .stip { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #e5a13a; }
#ipslot .stip.ok { background: var(--green); }
@media (max-width: 560px) { .ipslot-form .ip-rij { grid-template-columns: 1fr; } }

/* Instellingen van een portal: menu links met de onderwerpen (initInstellingenMenu) */
.st-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.st-menu { position: sticky; top: 86px; display: flex; flex-direction: column; gap: .9rem; font-size: .9rem;
  max-height: calc(100vh - 100px); overflow-y: auto; }
.st-kop { display: block; margin-bottom: .2rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.st-menu a { display: block; padding: .3rem .6rem; border-left: 2px solid transparent; border-radius: 0 8px 8px 0; color: var(--ink-2); text-decoration: none; }
.st-menu a:hover { background: var(--code); color: var(--ink); }
.st-menu a.on { background: var(--green-soft); border-left-color: var(--green); color: var(--ink); font-weight: 700; }
.st-kaarten { display: grid; gap: 1.25rem; max-width: 860px; }
.st-blok { scroll-margin-top: 90px; display: grid; gap: 1.25rem; }
/* Instellingen > Opmaak van mails: formulier links, voorbeeldmail rechts (onder elkaar op smalle schermen) */
.mo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.25rem; margin-top: 1rem; align-items: start; }
.mo-form { display: flex; flex-direction: column; gap: 1rem; }
.mo-keuze { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: #e9eef6; border-radius: 12px; }
.mo-keuze-3 { grid-template-columns: repeat(3, 1fr); }
.mo-keuze label { position: relative; display: block; text-align: center; cursor: pointer; }
.mo-keuze input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mo-keuze span { display: block; padding: 8px 10px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--muted); }
.mo-keuze input:checked + span { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(13,24,40,.12); }
.mo-keuze input:focus-visible + span { outline: 2px solid #4fb3ff; outline-offset: 1px; }
.mo-velden { display: flex; flex-direction: column; gap: 1rem; }
.mo-velden[hidden], [data-mo-portal][hidden] { display: none; }
.mo-veld { display: flex; flex-direction: column; gap: 6px; }
.mo-label { font-size: 13px; font-weight: 700; }
.mo-logo-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mo-logo { display: inline-flex; align-items: center; height: 44px; max-width: 220px; padding: 0 10px; border-radius: 8px; background: var(--kop, #fff); border: 1px solid var(--line); }
.mo-logo img { max-height: 30px; max-width: 200px; }
.mo-upload { cursor: pointer; }
.mo-logo[hidden], .mo-geen-logo[hidden] { display: none; }
.mo-geen-logo { color: var(--muted); }
.mo-kleuren { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mo-kleur { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; font-weight: 400; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; cursor: pointer; }
.mo-kleur input[type=color] { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: none; cursor: pointer; }
.mo-kleur .muted { margin-left: auto; }
.mo-twee { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
.mo-twee > .mo-veld { flex: 1 1 220px; }
.mo-vink { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0 0 8px; font-weight: 400; font-size: 14px; cursor: pointer; }
.mo-vink input { width: auto; margin: 0; accent-color: var(--green-dark); }
.mo-tip { margin: 0; }
.mo-knoppen { flex-wrap: wrap; gap: 10px; align-items: center; }
.mo-voorbeeld { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #F4F4F5; }
.mo-kopje { padding: 9px 14px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); background: var(--card, #fff); border-bottom: 1px solid var(--line); }
.mo-voorbeeld iframe { width: 100%; height: 540px; border: 0; display: block; }
@media (max-width: 1100px) { .mo-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .mo-kleuren { grid-template-columns: minmax(0, 1fr); } .mo-voorbeeld iframe { height: 480px; } }
html[data-theme="dark"] .mo-keuze { background: #15233a; }
html[data-theme="dark"] .mo-keuze input:checked + span { background: #0f1a2b; color: #fff; }
@media (max-width: 900px) {
  .st-layout { grid-template-columns: 1fr; }
  .st-menu { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; gap: .35rem; }
  .st-groep { display: contents; }
  .st-kop { display: none; }
  .st-menu a { border: 1px solid var(--line); border-radius: 999px; padding: .25rem .75rem; background: var(--card); }
  .st-menu a.on { border-color: var(--green); }
}
html[data-theme="dark"] body:not(.dark-auth) .st-menu a { color: #c6d0df; }
html[data-theme="dark"] body:not(.dark-auth) .st-menu a.on { color: #fff; }
.ipslot-meer summary { cursor: pointer; color: var(--ink-2); font-weight: 600; }
.ipslot-meer[open] summary { margin-bottom: .5rem; }

/* Beheer > Portals: alle servers bijwerken */
.bw-lijst summary { cursor: pointer; font-weight: 600; margin-top: .4rem; }
.bw-lijst .bw-fout { color: var(--bad); }
.bw-actie { text-align: right; } .bw-actie form { margin: 0; }

/* Voortgang van Servers bijwerken: groen naar blauw, met lopende strepen zolang er iets bezig is */
.bw-voortgang { margin: .75rem 0 .25rem; }
.bw-balk { position: relative; height: 10px; border-radius: 999px; background: var(--code); overflow: hidden; }
.bw-balk > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, #9fd6ff, #4fb3ff);
  transition: width .6s ease; min-width: 10px; }
.bw-balk.loopt > span { background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.28) 0 10px, rgba(255,255,255,0) 10px 20px),
  linear-gradient(90deg, #9fd6ff, #4fb3ff); background-size: 40px 100%, 100% 100%; animation: bw-loop 1s linear infinite; }
@keyframes bw-loop { to { background-position: 40px 0, 0 0; } }
.bw-tekst { margin: .4rem 0 0; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .bw-balk.loopt > span { animation: none; } .bw-balk > span { transition: none; } }
.bw-v { font-variant-numeric: tabular-nums; margin-right: .3rem; } .bw-nieuwste { margin: .6rem 0 0; } .bw-nieuwste code { font-size: .8rem; } .bw-achter { color: var(--warn); font-weight: 600; } [data-bw-versie] { white-space: nowrap; cursor: help; }

/* --- Mobiel (telefoon): smalle donkere kopbalk met logo, meldingen en account; het menu als lichte balk onderin met tekst
   bij elk icoon. Op Bouwen geen balk onderin (daar staat het invoerveld van de chat; terug via "Mijn portals"); bij
   Chat + testversie staan de testversie en de chat onder elkaar. --- */
@media (max-width: 760px) {
  .side-nav { gap: 6px; min-height: 50px; padding: 0 10px 0 14px; }
  .side-brand { margin-right: auto; }
  .side-brand img { height: 22px; }
  .side-links { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    gap: 0; flex: none; overflow: visible; padding: 4px 4px calc(6px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid #d1dae8;
    box-shadow: 0 -4px 16px rgba(13,24,40,.05); }
  .side-links a, .side-links .nav-drop > summary { position: relative; flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; padding: 4px 2px;
    border-radius: 10px; background: none; box-shadow: none; color: #586477; font-size: 11px; font-weight: 600; line-height: 1.2; }
  .side-links a span, .side-links .nav-drop > summary span { display: block; }
  .side-links a svg, .side-links .nav-drop > summary svg:first-child { color: #7a889d; width: 21px; height: 21px; }
  .side-links .nav-drop > summary svg:last-child { display: none; }
  .side-links a:hover, .side-links .nav-drop > summary:hover, .side-links .nav-drop[open] > summary { background: #e9eef6; color: #0d1828; }
  .side-links a.on, .side-links .nav-drop > summary.on { background: none; box-shadow: none; color: #0d1828; }
  .side-links a.on svg, .side-links .nav-drop > summary.on svg:first-child { color: #1f6fb0; }
  .side-links a.on::before, .side-links .nav-drop > summary.on::before { content: ""; position: absolute; top: -4px; left: 50%; width: 28px; height: 3px; margin-left: -14px;
    border-radius: 0 0 3px 3px; background: linear-gradient(90deg, #9fd6ff, #4fb3ff); }
  .side-links .count { position: absolute; top: 2px; left: calc(50% + 5px); display: inline-grid; min-width: 17px; height: 17px; padding: 0 4px; font-size: 10px; }
  .side-links .nav-drop { display: block; }
  .side-links .nav-drop > summary { display: flex; align-items: center; }
  .nav-drop-panel { position: fixed; left: 10px; right: 10px; top: auto; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); width: auto; }
  .nav-drop-panel a span, .nav-drop-panel a strong, .nav-drop-panel a small { display: block; }
  .nav-drop-panel a .count { display: inline-grid; }
  .um-panel { top: 56px; }
  .shell-main { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .shell-main > main { margin-top: 1rem; }
  /* donker (alleen als je dat zelf kiest) */
  html[data-theme="dark"] .side-links { background: #0f1a2b; border-color: #15233a; box-shadow: none; }
  html[data-theme="dark"] .side-links a, html[data-theme="dark"] .side-links .nav-drop > summary { color: #a3afc2; }
  html[data-theme="dark"] .side-links a:hover, html[data-theme="dark"] .side-links .nav-drop > summary:hover,
  html[data-theme="dark"] .side-links .nav-drop[open] > summary { background: #15233a; color: #fff; }
  html[data-theme="dark"] .side-links a.on, html[data-theme="dark"] .side-links .nav-drop > summary.on { color: #fff; }
  html[data-theme="dark"] .side-links a.on svg, html[data-theme="dark"] .side-links .nav-drop > summary.on svg:first-child { color: #4fb3ff; }

  /* In een portal (Bouwen, Instellingen, Prijs): de balk onderin wordt het menu van die portal, met Portals om terug te gaan */
  body:has(.portal-tabs) .side-links { display: none; }
  .portal-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    padding: 4px 4px calc(6px + env(safe-area-inset-bottom, 0px)); border: 0; border-top: 1px solid #d1dae8; border-radius: 0; background: #fff;
    box-shadow: 0 -4px 16px rgba(13,24,40,.05); }
  .portal-tabs a, .portal-tabs .pt-portals { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px;
    min-height: 52px; padding: 4px 2px; border-radius: 10px; background: none; color: #586477; font-size: 11px; line-height: 1.2; }
  .portal-tabs svg { display: block; width: 21px; height: 21px; color: #7a889d; }
  .portal-tabs a.on { background: none; color: #0d1828; }
  .portal-tabs a.on svg { color: #1f6fb0; }
  .portal-tabs a.on::before { content: ""; position: absolute; top: -4px; left: 50%; width: 28px; height: 3px; margin-left: -14px; border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, #9fd6ff, #4fb3ff); }
  .portal-tabs a:hover { background: #e9eef6; color: #0d1828; }
  html[data-theme="dark"] body:not(.dark-auth) .portal-tabs { background: #0f1a2b; border-color: #15233a; box-shadow: none; }
  html[data-theme="dark"] body:not(.dark-auth) .portal-tabs a { color: #a3afc2; background: none; }
  html[data-theme="dark"] body:not(.dark-auth) .portal-tabs a.on { color: #fff; background: none; }
  html[data-theme="dark"] body:not(.dark-auth) .portal-tabs a.on svg { color: #4fb3ff; }
  html[data-theme="dark"] body:not(.dark-auth) .portal-tabs a:hover { background: #15233a; }
  /* FAQ: alles binnen de schermbreedte; brede tabellen schuiven in zichzelf, lange woorden en adressen breken af */
  .kb-grid { grid-template-columns: minmax(0, 1fr); }
  .kb-article { padding: 1.1rem 1rem; }
  .kb-body { overflow-wrap: anywhere; }
  .kb-body img, .kb-body svg, .kb-body video { max-width: 100%; height: auto; }
  .kb-body pre { overflow-x: auto; white-space: pre; }
  .kb-table, .kb-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: .88rem; }
  .kb-table th, .kb-table td { min-width: 7rem; }
  .kb-hit { padding: 14px 14px; }
  .kb-zoek { height: 54px; padding: 0 12px 0 14px; }
  .kb-zoek input, main.ns .kb-zoek input { font-size: 16px; }
  .kb-pop { grid-template-columns: minmax(0, 1fr); }
  /* Beheer: tabbladen op één rij om te vegen; tabelrijen als regels onder elkaar met de kolomnaam als klein label
     (initBeheerMobiel zet data-label en table.rijen) */
  main nav.tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
    -webkit-mask: linear-gradient(90deg, #000 88%, transparent); mask: linear-gradient(90deg, #000 88%, transparent); }
  main nav.tabs::-webkit-scrollbar { display: none; }
  main nav.tabs a { flex: none; white-space: nowrap; }
  table.rijen { display: block; width: 100%; min-width: 0 !important; }
  table.rijen thead, table.rijen tr:has(> th) { display: none; }
  table.rijen tbody { display: block; }
  table.rijen tr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .45rem 1.1rem; padding: .8rem .9rem; border-top: 1px solid var(--line); }
  table.rijen tr:first-child, table.rijen tr:has(> th) + tr { border-top: 0; }
  table.rijen td { display: block; padding: 0 !important; border: 0 !important; text-align: left !important; min-width: 0; overflow-wrap: anywhere; }
  table.rijen td:first-child { flex: 1 1 100%; }
  table.rijen td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; margin-bottom: 1px; font-size: .66rem; font-weight: 600;
    letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
  table.rijen td.td-acties { flex-basis: 100%; }
  table.rijen td.pl-go { display: none; }
  table.rijen .bh-acts { flex-wrap: wrap; white-space: normal; }
  /* het invoerveld gewoon onderaan de chat (de chatkaart heeft overflow: hidden, dus een afstand hier liet alleen een gat
     onder het invoerveld); bij het openen staat de onderkant van de chat al boven die balk (initChat) */
  #portal .composer { bottom: 0; }
  /* Bouwen: Alleen chat | Chat + testversie over de volle breedte; testversie boven, chat eronder */
  .wp-toggle { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .wp-toggle button { justify-content: center; min-height: 38px; }
  #portal .split.werkplaats > .wp-frame { height: 62dvh; min-height: 380px; }
  #portal .split.werkplaats > .wp-rechts .side { display: none; }  /* versies, stappenplan en prijs: zie Alleen chat */
  /* Testversie, Live versie en Publiceren: met tekst, samen over de volle breedte */
  .kop-versie { display: block; width: 100%; }
  .kop-versie .kv-blok { width: 100%; }
  .kop-versie .kv-live, .kop-versie .kv-pub { flex: 1 1 0; justify-content: center; min-width: 0; padding: 0 8px; font-size: 13px; }
  .kop-versie .kv-tekst { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .kop-versie .kv-pijl { display: none; }
  /* Mijn account en andere formulieren op één rij: velden onder elkaar, zodat ze de hele breedte krijgen */
  .row.row-bottom > label.grow { flex-basis: 100%; }
  #portal .chat { min-height: calc(100dvh - 190px); }
  #portal .messages { min-height: 0; max-height: none; padding: 1rem .9rem .75rem; }
  #portal .composer { padding: .6rem .7rem .8rem; }

  /* Domein en mail: tekst over de volle breedte, knoppen eronder; vensters bijna schermbreed */
  .dm-card .dm-row { flex-wrap: wrap; align-items: flex-start; }
  .dm-row > .grow { flex: 1 1 100%; }
  .dm-row > .btn, .dm-row > .dm-knoppen { margin-left: 0; justify-content: flex-start; }
  dialog, dialog.medium, dialog.small { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .dm-dialog-head { padding: 1rem 1rem .8rem; }
  .dm-section { padding: 1rem; }
  .dm-dialog > :not(.dm-dialog-head):not(.dm-section):not([data-keuze-paneel]) { margin-left: 1rem; margin-right: 1rem; }
  .dm-form, .spec-inputs { grid-template-columns: minmax(0, 1fr); }
  .dm-steps li { padding-left: 2rem; }
  /* DNS-records: elk record als blokje onder elkaar in plaats van een brede tabel */
  .dns-table, .dns-table tbody, table.dns, table.dns tbody { display: block; width: 100%; }
  .dns-table thead, table.dns tr:has(th) { display: none; }
  .dns-table { border: 0; border-radius: 0; overflow: visible; }
  .dns-table tr, table.dns tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .7rem; margin-bottom: .6rem; padding: .7rem .8rem;
    border: 1px solid var(--line); border-radius: 12px; }
  .dns-table td, table.dns td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  .dns-table td:nth-child(3), table.dns td:nth-child(3), table.dns td:nth-child(4) { grid-column: 1 / -1; }
  table.dns td.nowrap { white-space: normal; }
}

/* Beheer · Conversie (beheer_conversie.html): kerncijfers, trechter met balken, aandachtslijst en tabel per week */
main.ns .cv-seg { display: inline-flex; align-self: center; padding: 2px; border: 1px solid var(--line); border-radius: 999px; }  /* als .seg */
main.ns .cv-seg a { padding: .3rem .9rem; border-radius: 999px; font-size: .85rem; color: var(--muted); text-decoration: none; }
main.ns .cv-seg a:hover:not(.on) { color: var(--ink); }
main.ns .cv-seg a.on { background: var(--ink); color: var(--card); }
main.ns .cv-kp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 18px; }
main.ns .cv-kp .card { margin: 0; display: flex; flex-direction: column; gap: 4px; }
main.ns .cv-kp b { font-size: 26px; color: var(--ink); }
main.ns .cv-r { display: grid; grid-template-columns: 230px 1fr 56px; gap: 18px; align-items: center; padding: 12px 0; border-bottom: 1px solid #eef2f8; }
main.ns .cv-r:last-of-type { border-bottom: 0; }
main.ns .cv-r .ns-balk { margin: 0; height: 10px; }
main.ns .cv-l { display: flex; flex-direction: column; gap: 2px; }
main.ns .cv-v { font-size: 22px; font-weight: 700; text-align: right; color: var(--ink); }
main.ns .cv-uit { background: #FBF6EA; margin: 0 -14px; padding: 12px 14px; border-radius: 10px; border-bottom: 0; }
main.ns .cv-tip { margin: 14px 0 0; font-size: 14px; }
main.ns .cv-t { width: 100%; border-collapse: collapse; font-size: 14.5px; }
main.ns .cv-t th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 8px 10px 8px 0; border-bottom: 1px solid #e0e7f2; }
main.ns .cv-t td { padding: 10px 10px 10px 0; border-bottom: 1px solid #eef2f8; vertical-align: middle; }
main.ns .cv-act { text-align: right; }
@media (max-width: 900px) {
  main.ns .cv-kp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main.ns .cv-r { grid-template-columns: 1fr 48px; }
  main.ns .cv-r .ns-balk { grid-column: 1 / -1; grid-row: 2; }
}
main.ns .cv-knoppen { display: inline-flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
main.ns .cv-gemaild { display: block; margin-top: 4px; padding: 0; border: 0; border-bottom: 1px dashed #b9c98f; background: none;
  font: inherit; font-size: 13px; color: #1f6fb0; text-align: left; cursor: pointer; }
main.ns .cv-gemaild:hover { border-bottom-style: solid; }
.cv-eerder { background: #FBF6EA; border-radius: 10px; padding: 10px 14px; font-size: 14px; margin: 12px 0 0; }
.cv-eerder strong { display: block; margin-bottom: 2px; }
.cv-eerder .linkknop, .cv-tl summary { color: #1f6fb0; }
.linkknop { padding: 0; border: 0; background: none; font: inherit; text-decoration: underline; cursor: pointer; }
.cv-tl { list-style: none; margin: 16px 0 0; padding: 0; position: relative; }
.cv-tl::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: #d8e0ed; }
.cv-tl li { position: relative; padding: 0 0 18px 26px; }
.cv-tl li:last-child { padding-bottom: 4px; }
.cv-tl li::before { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid #4fb3ff; box-sizing: border-box; }
.cv-tl li:first-child::before { background: #4fb3ff; }
.cv-tl-kop { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.cv-tl-tag { font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; background: #e5ebf4; color: #1f6fb0;
  padding: 2px 8px; border-radius: 4px; }
.cv-tl-ond { font-weight: 650; margin: 2px 0; }
.cv-tl summary { cursor: pointer; font-size: 13px; margin-top: 4px; }
.cv-tl pre { white-space: pre-wrap; font: inherit; font-size: 14px; background: #f2f5fa; border-radius: 10px; padding: 12px 14px; margin: 8px 0 0; }
.cv-tl-geen { display: block; margin-top: 2px; font-style: italic; }
@media (prefers-reduced-motion: no-preference) {
  .cv-tl li { animation: cv-tl-in .35s ease-out both; }
  .cv-tl li:nth-child(2) { animation-delay: .06s; } .cv-tl li:nth-child(3) { animation-delay: .12s; } .cv-tl li:nth-child(n+4) { animation-delay: .18s; }
}
main.ns .cv-naar.linkknop { text-decoration: none; text-align: left; }
.cv-lijst { list-style: none; margin: 14px 0 0; padding: 0; }
.cv-lijst li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid #eef2f8; }
.cv-lijst a { color: inherit; text-decoration: none; } .cv-lijst a:hover { text-decoration: underline; }
/* Subtabs in Beheer (Conversie, Servers): zelfde onderstreepte tabs als .settings-tabs */
main.ns .cv-sub, main.ns .ms-sub { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 18px; border-bottom: 1px solid var(--line); }
main.ns .cv-sub a, main.ns .ms-sub a { position: relative; display: inline-flex; padding: .7rem 1rem; font-size: .95rem; font-weight: 500;
  color: var(--muted); text-decoration: none; }
main.ns .cv-sub a > span { display: inline-flex; align-items: center; gap: 7px; }
main.ns .cv-sub a:hover, main.ns .ms-sub a:hover { color: var(--ink); }
main.ns .cv-sub a.on, main.ns .ms-sub a.on { color: var(--ink); font-weight: 600; }
main.ns .cv-sub a.on::after, main.ns .ms-sub a.on::after { content: ""; position: absolute; left: .6rem; right: .6rem; bottom: -1px; height: 2px;
  border-radius: 2px; background: #4fb3ff; }
main.ns .cv-sub .n { font-style: normal; font-size: 12px; font-weight: 700; background: var(--bad-soft); color: var(--bad); border-radius: 99px; padding: 0 7px; }
main.ns .cv-meer { margin: 4px 0 12px; } main.ns .cv-meer summary { cursor: pointer; font-size: 13.5px; color: #1f6fb0; }
main.ns .cv-bp-pct { display: inline-flex; align-items: center; gap: 10px; min-width: 140px; }
main.ns .cv-bp-pct .ns-balk { flex: 1; margin: 0; height: 8px; min-width: 70px; }
main.ns .cv-act form { display: inline; }
@keyframes cv-tl-in { from { opacity: 0; transform: translateY(6px); } }
.cv-dlg h2 { margin: 0 0 4px; font-size: 20px; }
.cv-dlg label { display: block; font-weight: 600; font-size: 14px; margin: 14px 0 6px; }
.cv-dlg input, .cv-dlg select, .cv-dlg textarea { width: 100%; box-sizing: border-box; }
.cv-dlg textarea { min-height: 230px; line-height: 1.5; }
.cv-voet { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
@media (prefers-reduced-motion: no-preference) {
  .cv-dlg[open] { animation: ov-in .3s cubic-bezier(.2,.8,.2,1) both; }
  .cv-dlg[open]::backdrop { animation: cv-waas .3s ease-out both; }
}
@keyframes cv-waas { from { opacity: 0; } }
main.ns .cv-naar { font-size: 13px; font-weight: 600; color: #1f6fb0; text-decoration: none; }
main.ns .cv-naar:hover { text-decoration: underline; }
main.ns .cv-aandacht { scroll-margin-top: 80px; }
@media (prefers-reduced-motion: no-preference) {
  html:has(main.ns .cv-aandacht) { scroll-behavior: smooth; }
  main.ns .cv-aandacht:target { animation: cv-gloed 1.6s ease-out .3s; }
}
@keyframes cv-gloed { 0% { box-shadow: 0 0 0 0 rgba(163,193,92,.0); } 25% { box-shadow: 0 0 0 4px rgba(163,193,92,.55); } 100% { box-shadow: 0 0 0 0 rgba(163,193,92,0); } }
main.ns .cv-kop { margin: 0 0 18px; align-items: flex-end; }
main.ns .cv-kop .section-title { font-size: 22px; margin: 0 0 2px; }
main.wide.ns .pagehead h1 { font-size: clamp(1.5rem, 2.5vw, 2rem); letter-spacing: normal; }  /* zelfde kop als de andere tabbladen van Beheer */

/* Beheer > Managed servers (beheer_servers.html, beheer_server.html) */
main.ns .ms-infra { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 18px; }
main.ns .ms-infra .card { margin: 0; }
main.ns .ms-infra h3, main.ns .ms-blokken h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 0 0 2px; }
main.ns .ms-blokken h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 10px; }
main.ns .ms-rol { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; }
main.ns .ms-rij { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; margin-top: 6px; }
main.ns .ms-rij > span:first-child { color: var(--muted); }
main.ns .ms-rij > span:last-child { text-align: right; }
main.ns .ms-punt { font-size: 12.5px; color: var(--warn); margin: 8px 0 0; }
main.ns .ms-infra h3 a { color: inherit; }
main.ns .ms-stip { width: 9px; height: 9px; border-radius: 50%; background: var(--green); flex: none; }
main.ns .ms-stip.let { background: #E0A526; }
main.ns .ms-stip.fout { background: var(--bad); }
main.ns .ms-balk { height: 5px; border-radius: 5px; background: var(--code); overflow: hidden; margin: 3px 0 2px; }
main.ns .ms-balk span { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, #9fd6ff, #4fb3ff);
  transition: width 1.1s cubic-bezier(.2,.8,.2,1) calc(var(--i, 0) * 40ms); }
main.ns .ms-balk.let span { background: linear-gradient(90deg, #e0a526, #d0722a); }
main.ns .ms-ok { color: var(--ok); font-weight: 600; }
main.ns .ms-let { color: var(--warn); font-weight: 600; }
main.ns .ms-fout { color: var(--bad); font-weight: 600; }
main.ns .ms-num { font-variant-numeric: tabular-nums; }
main.ns .ms-lijst td { white-space: nowrap; }
main.ns .ms-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
main.ns .ms-filters button { font: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; background: var(--card); color: var(--ink); cursor: pointer; }
main.ns .ms-filters button.on { background: var(--ink); color: var(--card); border-color: var(--ink); }
main.ns .ms-filters .portal-search { margin-left: auto; }
main.ns .ms-voet { margin: 12px 0 0; }
main.ns .ms-kop { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin: 8px 0 16px; }
main.ns .ms-kop .ms-stip { margin-top: 10px; }
main.ns .ms-kop h2 { font-size: 22px; margin: 0; }
main.ns .ms-acties { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
main.ns .ms-blokken { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
main.ns .ms-blokken .card { margin: 0; }
main.ns .ms-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13.5px; }
main.ns .ms-dl dt { color: var(--muted); }
main.ns .ms-dl dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
main.ns .ms-taken { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
main.ns .ms-taken li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
main.ns .ms-taken li:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 1100px) { main.ns .ms-infra, main.ns .ms-blokken { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { main.ns .ms-infra, main.ns .ms-blokken { grid-template-columns: 1fr; } main.ns .ms-filters .portal-search { margin-left: 0; width: 100%; } }
@media (prefers-reduced-motion: reduce) { main.ns .ms-balk span { transition: none; } }
html[data-theme="dark"] main.ns .ms-ok { color: #4fb3ff; }
html[data-theme="dark"] main.ns .ms-let, html[data-theme="dark"] main.ns .ms-punt { color: #e8b44a; }
html[data-theme="dark"] main.ns .ms-fout { color: #f08a80; }
/* Beheer > Shared server (beheer_shared.html) */
main.ns .ms-kp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 14px; }
main.ns .ms-kp .card { margin: 0; display: flex; flex-direction: column; gap: 2px; }
main.ns .ms-kp b { font-size: 26px; letter-spacing: -.02em; }
main.ns .ms-kp b small { font-size: 14px; font-weight: 400; color: var(--muted); }
main.ns .ms-dubbel { position: relative; height: 7px; }
main.ns .ms-dubbel span { position: absolute; left: 0; top: 0; bottom: 0; }
main.ns .ms-dubbel span.toe { background: #ccd6e5; }
main.ns .ms-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); }
main.ns .ms-leg > span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; background: linear-gradient(90deg, #9fd6ff, #4fb3ff); }
main.ns .ms-leg > span.toe::before { background: #ccd6e5; }
main.ns .ms-mini { display: inline-block; width: 64px; height: 5px; border-radius: 5px; background: var(--code); overflow: hidden; vertical-align: middle; margin-right: 8px; }
main.ns .ms-mini span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #9fd6ff, #4fb3ff); transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
main.ns .ms-mini.let span { background: linear-gradient(90deg, #e0a526, #d0722a); }
main.ns .ms-lijst h2 { margin-bottom: 8px; }
main.ns .ms-twee { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; margin-top: 14px; }
main.ns .ms-twee .card, main.ns .ms-stapel .card { margin: 0; }
main.ns .ms-stapel { display: flex; flex-direction: column; gap: 14px; }
main.ns .ms-h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 10px; }
main.ns .ms-werking { list-style: none; margin: 0; padding: 0; }
main.ns .ms-werking li { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
main.ns .ms-werking li:first-child { border-top: 0; padding-top: 0; }
main.ns .ms-werking svg { flex: none; margin-top: 3px; color: var(--green-dark); }
main.ns .ms-werking b { display: block; }
main.ns .ms-werking div > span { font-size: 13.5px; color: var(--muted); }
main.ns .ms-r { margin-left: auto; font-size: 13px; white-space: nowrap; text-align: right; }
@media (max-width: 1100px) { main.ns .ms-kp { grid-template-columns: repeat(2, minmax(0, 1fr)); } main.ns .ms-twee { grid-template-columns: 1fr; } }
@media (max-width: 640px) { main.ns .ms-kp { grid-template-columns: 1fr; } main.ns .ms-werking li { flex-wrap: wrap; } main.ns .ms-r { margin-left: 30px; } }
@media (prefers-reduced-motion: reduce) { main.ns .ms-mini span { transition: none; } }
html[data-theme="dark"] main.ns .ms-dubbel span.toe, html[data-theme="dark"] main.ns .ms-leg > span.toe::before { background: #2e4261; }

/* Filter Open / Opgelost / Alle boven het ticketoverzicht */
.seg a { font-size: .85rem; padding: .3rem .9rem; border-radius: 999px; color: var(--muted); text-decoration: none; border: 0; }
.seg a:hover:not(.on) { color: var(--ink); }
.seg a.on { background: var(--ink, #0d1828); color: var(--card, #fff); }
.tk-filter { margin: 0 0 .75rem; }
.tk-filter .tk-n { opacity: .7; margin-left: .2rem; font-variant-numeric: tabular-nums; }

/* Beheer: zijbalk met groepen (_beheer_nav.html), in te klappen tot iconen; op een telefoon een menu dat over de pagina schuift */
.shell-main > main.bh-main { max-width: 1600px; }
.bh-shell { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 32px; align-items: start;
  transition: grid-template-columns .3s cubic-bezier(.2,.8,.2,1); }
.bh-shell.klein { grid-template-columns: 48px minmax(0, 1fr); }
.bh-inhoud { min-width: 0; }
.bh-menuknop { display: none; }
.bh-dim { display: none; }
.bh-zijbalk { position: sticky; top: 92px; max-height: calc(100vh - 112px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin;
  display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.bh-zijbalk nav { display: flex; flex-direction: column; gap: 14px; }
.bh-groep { display: grid; gap: 1px; }
.bh-kop { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 10px 4px; white-space: nowrap; }
.bh-zijbalk a, .bh-inklap { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 9px;
  background: none; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background .15s, color .15s; }
.bh-zijbalk a:hover, .bh-inklap:hover { background: var(--code); color: var(--ink); }
.bh-zijbalk a.on { background: var(--green-soft); font-weight: 600; }
.bh-zijbalk svg { flex: none; color: var(--muted); transition: color .15s, transform .3s cubic-bezier(.2,.8,.2,1); }
.bh-zijbalk a.on svg { color: var(--green-dark); }
.bh-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .2s; }
.bh-n { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--green); color: #0d1828; font-size: 11px;
  font-weight: 700; line-height: 1.6; text-align: center; font-variant-numeric: tabular-nums; }
.bh-n.zacht { background: var(--code); color: var(--muted); }
.bh-n.fout { background: #e5484d; color: #fff; }
.bh-inklap { color: var(--muted); font-size: 13px; }
.bh-onder { border-top: 1px solid var(--line); padding-top: 10px; }
.bh-shell.klein .bh-zijbalk { overflow: visible; z-index: 30; }  /* naam bij het icoon boven de kaarten (die hebben een eigen laag door de animatie) */
.bh-shell.klein .bh-label { opacity: 0; width: 0; }
.bh-shell.klein .bh-kop { height: 0; padding: 0; overflow: hidden; }
.bh-shell.klein .bh-groep + .bh-groep { border-top: 1px solid var(--line); padding-top: 10px; }
.bh-shell.klein .bh-zijbalk a, .bh-shell.klein .bh-inklap { justify-content: center; gap: 0; padding: 9px 0; }
.bh-shell.klein .bh-n { position: absolute; top: 5px; right: 9px; min-width: 0; width: 8px; height: 8px; padding: 0; font-size: 0; }
.bh-shell.klein .bh-inklap svg { transform: rotate(180deg); }
.bh-shell.klein .bh-zijbalk a:hover::after, .bh-shell.klein .bh-inklap:hover::after { content: attr(data-label); position: absolute; left: calc(100% + 8px);
  top: 50%; transform: translateY(-50%); z-index: 30; padding: 4px 9px; border-radius: 7px; background: var(--ink); color: var(--card);
  font-size: 12.5px; font-weight: 500; white-space: nowrap; pointer-events: none; }
@media (max-width: 900px) {
  .bh-shell, .bh-shell.klein { display: block; }
  .bh-menuknop { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 1rem; padding: 8px 14px; border: 1px solid var(--line);
    border-radius: 999px; background: var(--card); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
  .bh-menuknop .muted { font-weight: 500; }
  .bh-dim { display: block; position: fixed; inset: 0; z-index: 69; background: rgba(10,17,28,.4); opacity: 0; pointer-events: none; transition: opacity .3s; }
  .bh-shell.open .bh-dim { opacity: 1; pointer-events: auto; }
  .bh-zijbalk, .bh-shell.klein .bh-zijbalk { position: fixed; inset: 0 auto 0 0; z-index: 70; width: min(290px, 84vw); max-height: none; overflow-y: auto;
    padding: calc(18px + env(safe-area-inset-top, 0px)) 12px calc(18px + env(safe-area-inset-bottom, 0px)); background: var(--card);
    box-shadow: 0 20px 50px -10px rgba(0,0,0,.35); transform: translateX(-105%); transition: transform .3s cubic-bezier(.2,.8,.2,1); visibility: hidden; }
  .bh-shell.open .bh-zijbalk { transform: none; visibility: visible; }
  .bh-inklap { display: none; }
  .bh-shell.klein .bh-label { opacity: 1; width: auto; }
  .bh-shell.klein .bh-kop { height: auto; padding: 0 10px 4px; }
  .bh-shell.klein .bh-groep + .bh-groep { border-top: 0; padding-top: 0; }
  .bh-shell.klein .bh-zijbalk a { justify-content: flex-start; gap: 10px; padding: 7px 10px; }
  .bh-shell.klein .bh-n { position: static; width: auto; height: auto; min-width: 20px; padding: 0 6px; font-size: 11px; }
  .bh-shell.klein .bh-zijbalk a:hover::after { content: none; }
}
@media (prefers-reduced-motion: reduce) { .bh-shell, .bh-zijbalk, .bh-dim { transition: none; } }

/* Beheer > Overzicht */
.bh-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 1.25rem; }
.bh-kpi { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 18px 20px; color: inherit; text-decoration: none;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1); }
.bh-kpi:hover { color: inherit; transform: translateY(-2px); }
.bh-kpi-l { font-size: 13px; color: var(--muted); }
.bh-kpi strong { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.bh-kpi-s { font-size: 12.5px; color: var(--muted); }
main.ns .bh-kpi .ns-balk { margin: 8px 0 6px; }
main.ns .bh-balk-let i { background: linear-gradient(90deg, #e0a030, #e5484d); }
.bh-twee { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.bh-aandacht { list-style: none; margin: 0; padding: 0; }
.bh-aandacht li + li { border-top: 1px solid var(--line); }
.bh-aandacht a { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 8px; border-radius: 9px;
  color: inherit; text-decoration: none; transition: background .2s; }
.bh-aandacht a:hover { background: var(--code); color: inherit; }
.bh-aandacht strong { display: block; font-weight: 600; }
.bh-aandacht small { display: block; color: var(--muted); font-size: 12.5px; }
.bh-stip { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.bh-stip.let { background: #e0a030; }
.bh-stip.fout { background: #e5484d; }
.bh-pijl { color: var(--muted); transition: transform .2s cubic-bezier(.2,.8,.2,1), color .2s; }
.bh-aandacht a:hover .bh-pijl { transform: translateX(3px); color: var(--green-dark); }
.bh-lijn { display: block; width: 100%; height: 72px; margin: 4px 0 10px; overflow: visible; }
.bh-lijn-vlak { fill: var(--green-soft); }
.bh-lijn-streep { fill: none; stroke: var(--green-dark); stroke-width: 2; stroke-linejoin: round; }
.bh-recent { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: 8px; font-size: 13.5px; }
.bh-recent li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; }
.bh-recent .ts { font-size: 12.5px; }
.bh-ankers { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line); }  /* als .settings-tabs */
.bh-ankers a { padding: .7rem 1rem; font-size: .95rem; font-weight: 500; color: var(--muted); text-decoration: none; }
.bh-ankers a:hover { color: var(--ink); }
.bh-sectie { margin: 1.75rem 0 .75rem; scroll-margin-top: 92px; }
.bh-inhoud [id] { scroll-margin-top: 92px; }
@media (max-width: 1100px) { .bh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bh-twee { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  main.ns .bh-inhoud > * { animation: ov-in .4s cubic-bezier(.2,.8,.2,1) both; }
  main.ns .bh-inhoud > *:nth-child(2) { animation-delay: 70ms; } main.ns .bh-inhoud > *:nth-child(3) { animation-delay: 140ms; }
  main.ns .bh-inhoud > *:nth-child(n+4) { animation-delay: 210ms; }
}
main.ns.bh-main > .bh-shell { animation: none; }  /* de inhoud komt binnen, de zijbalk staat meteen */
.bh-acties { display: flex; flex-wrap: wrap; gap: 8px; }
.bh-acties form { margin: 0; }
.bh-rijen tbody tr .pl-go svg, .bh-rijen tr .pl-go svg { transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.bh-rijen tr[data-href]:hover .pl-go svg { transform: translateX(3px); }

/* Beheer > AI-kosten en Verbruik per klant: tegels, maandlimiet, ranglijst en grafieken (getekend in app.js).
   Reekskleuren in deze vaste volgorde, gecontroleerd op kleurenblindheid in licht en donker (ai_kosten.GRAFIEK_KLEUREN). */
body { --ak-1: #7fa33a; --ak-2: #2a78d6; --ak-3: #eb6834; --ak-4: #6250d6; --ak-5: #e87ba4; --ak-overig: #bbc4d2; --ak-niet: #7c8a9f; --ak-rooster: #e4eaf4; }
html[data-theme="dark"] body { --ak-1: #7a9e3c; --ak-2: #3987e5; --ak-3: #d95926; --ak-4: #9085e9; --ak-5: #d55181; --ak-overig: #404f66; --ak-niet: #76849a; --ak-rooster: #1a2a43; }
.ak-bron { margin: -.5rem 0 1rem; font-size: 13px; color: var(--muted); }
.ak-tegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 1.25rem; }
.ak-tegels.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ak-tegel { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 18px 20px; }
.ak-tegel .l { font-size: 13px; color: var(--muted); }
.ak-tegel strong { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ak-tegel .s { font-size: 12.5px; color: var(--muted); }
.ak-tegel.let-op { border-color: #e0a030; }
.ak-budget { position: relative; height: 14px; margin: 34px 0 14px; border-radius: 7px; background: var(--code); }
.ak-deel, .ak-verwacht { position: absolute; top: 0; bottom: 0; width: 0; transition: width 1s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 120ms + 200ms); }
.ak-budget .ak-deel:first-child { border-radius: 7px 0 0 7px; }
.ak-verwacht { border-radius: 0 7px 7px 0; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ak-1) 50%, transparent) 0 4px, transparent 4px 8px); }
.ak-merk { position: absolute; top: -24px; bottom: -4px; padding-left: 5px; border-left: 1.5px dashed var(--muted); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.ak-merk.ak-limiet { left: auto; right: 0; padding: 0 5px 0 0; border-left: 0; border-right: 1.5px solid var(--ink); color: var(--ink); font-weight: 600; }
.ak-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13.5px; }
.ak-legenda li { display: flex; align-items: center; gap: 7px; }
.ak-legenda li > i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.ak-legenda b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ak-i-verwacht { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ak-1) 60%, transparent) 0 2px, transparent 2px 4px); border: 1px solid var(--ak-1); }
.ak-i-arcering { background: repeating-linear-gradient(135deg, var(--ak-niet) 0 2px, transparent 2px 4px); border: 1px solid var(--ak-niet); }
.ak-twee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; }
.ak-kaartkop { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 24px; flex-wrap: wrap; margin-bottom: 8px; }
.ak-kaartkop .ak-legenda { max-width: 60%; justify-content: flex-end; }
.ak-grafiek { position: relative; width: 100%; height: 240px; margin-top: 12px; }
.ak-grafiek.hoog { height: 270px; }
.ak-grafiek svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ak-grafiek text { fill: var(--muted); font: 11.5px "Asap", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.ak-grafiek text.sterk { fill: var(--ink); font-weight: 600; }
.ak-grafiek .rooster { stroke: var(--ak-rooster); }
.ak-grafiek .basis { stroke: var(--line); }
.ak-grafiek .limiet { stroke: var(--ink); stroke-width: 1.5; }
.ak-grafiek .tachtig { stroke: var(--muted); stroke-dasharray: 4 4; }
.ak-grafiek .kruis { stroke: var(--muted); }
.ak-grafiek .later { fill: var(--line); }
.ak-grafiek .groei { transform-box: fill-box; transform-origin: bottom; animation: ak-groei .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ak-groei { from { transform: scaleY(0); } }
.ak-tip { position: fixed; z-index: 90; transform: translate(-50%, calc(-100% - 10px)); pointer-events: none; min-width: 160px; padding: 8px 11px;
  border-radius: 9px; background: var(--ink); color: var(--card); font-size: 12.5px; line-height: 1.5; white-space: nowrap; box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); }
.ak-tip b { display: block; margin-bottom: 3px; font-weight: 700; }
.ak-tip span { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.ak-tip span i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; }
.ak-tip em { margin-left: 14px; font-style: normal; font-variant-numeric: tabular-nums; }
.ak-rang { display: grid; margin-top: 10px; }
.ak-rij { display: grid; grid-template-columns: minmax(170px, 1.3fr) minmax(100px, 2fr) 100px 70px 86px 80px 56px; gap: 14px; align-items: center;
  padding: 10px 8px; border-top: 1px solid var(--line); border-radius: 8px; color: inherit; text-decoration: none; font-size: 14px; transition: background .15s; }
a.ak-rij:hover { background: var(--code); color: inherit; }
.ak-rijkop { border-top: 0; padding-block: 4px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ak-rij .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.ak-rij .num.sterk { color: var(--ink); font-weight: 700; }
.ak-naam { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.ak-naam > i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.ak-naamtekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-rest .ak-naam { font-weight: 500; color: var(--muted); }
.ak-balk { height: 10px; border-radius: 5px; background: var(--code); overflow: hidden; }
.ak-balk i { display: block; width: 0; height: 100%; border-radius: 5px; background: var(--ak-1); transition: width .9s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 60ms + 200ms); }
.ak-instellen summary { cursor: pointer; font-weight: 600; }
.ak-instellen form { margin-top: .8rem; }
@media (max-width: 1100px) { .ak-twee { grid-template-columns: 1fr; } .ak-tegels.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ak-kaartkop .ak-legenda { max-width: none; justify-content: flex-start; } }
@media (max-width: 760px) {
  .ak-tegels { grid-template-columns: 1fr; }
  .ak-rij { grid-template-columns: minmax(0, 1fr) 90px 56px; }
  .ak-rij > :nth-child(2), .ak-rij > :nth-child(5), .ak-rij > :nth-child(6), .ak-rij > :nth-child(7) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ak-deel, .ak-verwacht, .ak-balk i { transition: none; } .ak-grafiek .groei { animation: none; } }
main.ns .ms-sub .bh-n { margin-left: 7px; align-self: center; }  /* mislukte updates bij de tab Bijwerken */
.mk-tabel td { vertical-align: middle; }
.mk-acties { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; white-space: nowrap; }

/* Beheer > Nieuwe klant (venster) en de kaart Klaarzetten op de organisatiepagina */
dialog.bh-nk { width: min(760px, 94vw); }
.bh-nk h2 { margin: 0; }
.bh-nk-stap { display: grid; grid-template-columns: 28px 1fr; gap: 2px 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.bh-nk-stap:first-of-type { border-top: 0; padding-top: 6px; }
.bh-nk-nr { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: .8rem; font-weight: 700; }
.bh-nk-stap h3 { margin: 2px 0; font-size: 1rem; }
.bh-nk-stap .muted.small { margin: 0 0 8px; }
.bh-nk-stap > .bh-nk-velden { grid-column: 2; }
.bh-nk-velden { display: grid; gap: 10px; }
.bh-nk-velden[hidden] { display: none; }
.bh-nk-adres { display: flex; }
.bh-nk-adres input { min-width: 0; flex: 1; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.bh-nk-adres span { display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--line); border-left: 0; border-radius: 0 10px 10px 0; color: var(--muted); font-size: .85rem; white-space: nowrap; }
.bh-nk-voet { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.bh-nk-voet .seg { margin: 4px 0 0; }
.bh-klaar .ns-balk { margin: 8px 0 4px; }
.bh-klaar-stappen { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.bh-klaar-stappen li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.bh-klaar-stappen li > span { display: flex; align-items: center; gap: .65rem; }
.bh-klaar-stappen li > span::before { content: ""; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 2px solid var(--line); flex: none; box-sizing: border-box; }
.bh-klaar-stappen li.done > span::before { background: var(--green); border-color: var(--green); box-shadow: inset 0 0 0 3px var(--card); }
.bh-klaar-stappen li.now > span::before { border-color: var(--green-dark); border-top-color: transparent; animation: spin 1s linear infinite; }
.bh-klaar-stappen small { color: var(--muted); font-weight: 400; margin-left: .35rem; }
.bh-uitn-aan { margin: 0; }
.bh-uitn-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: .9rem; }
.bh-uitn-check li { display: flex; gap: 8px; align-items: flex-start; }
.bh-uitn-check svg { flex: none; margin-top: 2px; }
.bh-uitn-check .ok svg { color: var(--ok); }
.bh-uitn-check .let svg { color: var(--warn); }
@media (max-width: 640px) { .bh-nk-stap { grid-template-columns: 1fr; } .bh-nk-nr { display: none; } .bh-nk-stap > .bh-nk-velden { grid-column: 1; } }

/* --- Feedback: paneel voor klanten (_feedback.html), vraag onder een opgelost ticket en Beheer > Feedback --- */
.fb-paneel .fb-intro { margin: .35rem 0 0; font-size: .88rem; color: var(--muted); }
.fb-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1.25rem 1.25rem; display: grid; gap: 1.1rem; align-content: start; }
.fb-form { display: grid; gap: 1rem; }
.fb-soorten { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.fb-soort { font: inherit; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .75rem .4rem .65rem; border: 1px solid var(--line);
  border-radius: 12px; background: var(--card); color: var(--ink); cursor: pointer; font-size: .86rem; font-weight: 600; transition: border-color .15s, box-shadow .15s; }
.fb-soort svg { color: var(--muted); transition: color .15s; }
.fb-soort:hover { border-color: var(--ink); }
.fb-soort.on { border-color: var(--green-dark); box-shadow: 0 0 0 1px var(--green-dark); }
.fb-soort.on svg { color: var(--green-dark); }
.fb-veld { display: grid; gap: .3rem; font-size: .88rem; font-weight: 600; }
.fb-veld textarea { min-height: 110px; font-weight: 400; }
.fb-veld select { font-weight: 400; }
.fb-rij { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.fb-mee { font-size: .8rem; color: var(--muted); margin: 0; }
.fb-tip { margin: 0; padding: .55rem .8rem; border-radius: 10px; background: var(--code); font-size: .84rem; }
.fb-klaar { text-align: center; padding: 1.2rem .5rem .4rem; animation: fbIn .3s ease; }
.fb-klaar svg { color: var(--green-dark); }
.fb-klaar h3 { margin: .4rem 0 .2rem; font-size: 1.1rem; }
.fb-klaar p { margin: 0 auto; max-width: 300px; font-size: .88rem; color: var(--muted); }
.fb-klaar .fb-nog { margin-top: .8rem; }
.fb-eerder h3 { margin: 0 0 .5rem; font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.fb-eerder ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.fb-eerder li { padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font-size: .86rem; }
.fb-eerder li .fb-rij { font-size: .76rem; color: var(--muted); margin-bottom: .1rem; }
.fb-eerder li strong { font-weight: 600; display: block; overflow-wrap: anywhere; }
@keyframes fbIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* onder een opgelost ticket */
.fb-tk h2 { margin: 0; }
.fb-tk-sub { margin: .2rem 0 .8rem; }
.fb-tk-knoppen { display: flex; gap: .6rem; flex-wrap: wrap; }
.fb-tk-knop { font: inherit; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1.1rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink); cursor: pointer; font-weight: 600; transition: border-color .15s; }
.fb-tk-knop:hover { border-color: var(--ink); }
.fb-tk-knop svg { color: var(--muted); }
.fb-tk-nee { display: grid; gap: .6rem; margin-top: .8rem; animation: fbIn .25s ease; }
.fb-tk-ok { display: flex; align-items: center; gap: .5rem; font-weight: 600; margin: .6rem 0 0; }
.fb-tk-ok svg { color: var(--green-dark); flex: none; }
/* Beheer > Feedback */
.fb-filters { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; margin-bottom: .75rem; }
.fb-filters .seg { margin: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.fb-filters .seg a { white-space: nowrap; flex: none; }
.fb-soort-ik { display: inline-flex; vertical-align: -3px; margin-right: .35rem; color: var(--muted); }
.fb-soort-ik.neer { color: var(--bad); }
.fb-tekst { display: block; margin-top: .15rem; color: var(--ink-2); max-width: min(560px, 62vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-lijst tr[data-fb] { cursor: pointer; }
.fb-dlg h2 { margin: 0 0 .15rem; }
.fb-dlg blockquote { margin: 0; padding: .7rem 1rem; border-left: 3px solid var(--green); background: var(--bg); border-radius: 0 10px 10px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-twee { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.fb-voet { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }
.fb-voet .dlg-knoppen { margin: 0; }
@media (max-width: 600px) { .fb-twee { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .fb-klaar, .fb-tk-nee { animation: none; } }
html[data-theme="dark"] body:not(.dark-auth) .fb-soort, html[data-theme="dark"] body:not(.dark-auth) .fb-tk-knop { background: #17263c; border-color: #26364f; }
html[data-theme="dark"] body:not(.dark-auth) .fb-eerder li, html[data-theme="dark"] body:not(.dark-auth) .fb-dlg blockquote { background: #0f1928; border-color: #26364f; }
html[data-theme="dark"] body:not(.dark-auth) .fb-tip { background: #17263c; }

.tk-filters { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: 0 0 .75rem; }
.tk-filters .tk-filter { margin: 0; }
.badge.s-sales { background: #e8f4ff; color: #1f6fb0; }  /* ticket in de categorie Sales */

/* Beheer > Mailbox-agents (beheer_agent.html) */
.ag-pre { white-space: pre-wrap; font: inherit; font-size: .88rem; background: var(--code); border-radius: 8px; padding: .6rem .8rem; margin: .4rem 0 0; overflow-x: auto; }
.ag-pre code { background: none; padding: 0; }
.check-list.ag-taak { max-height: none; overflow: visible; display: grid; gap: .7rem; }
.ag-kop { justify-content: space-between; }
.ag-item { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .85rem; }
.ag-item[open] { background: var(--paper, transparent); }
.ag-item summary { line-height: 1.7; }
.ag-tabs { margin: 0 0 1rem; flex-wrap: wrap; }
.ag-drie > label { flex: 1 1 14rem; }
.ag-routes input { min-width: 9rem; padding: .4rem .55rem; }
.ag-routes input[type=checkbox] { min-width: 0; }
.ag-twee { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .ag-twee { grid-template-columns: 1fr; } }
.ag-gegevens th { text-align: left; white-space: nowrap; color: var(--muted); font-weight: 600; width: 11rem; }
.ag-inline { display: inline; }

/* Prijs > Kan het zuiniger? (alleen 24x7, codezuinig.py) */
.zg .section-title .badge { margin-left: .4rem; vertical-align: middle; }
.zg-acties { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1rem; }
.zg-bezig { display: flex; align-items: center; gap: .6rem; padding: 1.2rem 0 .4rem; font-weight: 600; }
.zg-som { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.6rem; padding: 1rem 1.2rem; margin: .4rem 0 1rem; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.zg-som > div { display: flex; flex-direction: column; } .zg-som strong { font-size: 1.5rem; line-height: 1.2; }
.zg-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.zg-pijl { font-size: 1.3rem; color: var(--muted); } .zg-scheid { margin-left: auto; text-align: right; } .zg-min { color: var(--ok); }
.zg-lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.zg-lijst li { border-bottom: 1px solid var(--line); } .zg-lijst label.check { display: flex; gap: .8rem; padding: .9rem .2rem; cursor: pointer; margin: 0; }
.zg-lijst li:has(input:not(:checked)) .zg-tekst > strong, .zg-lijst li:has(input:not(:checked)) .zg-getal { opacity: .55; }
.zg-tekst { flex: 1; display: flex; flex-direction: column; gap: .25rem; } .zg-tekst > strong { display: inline; } .zg-tekst .badge { align-self: flex-start; }
.zg-getal { flex: none; text-align: right; white-space: nowrap; font-size: .9rem; } .zg-getal b { font-size: 1.05rem; } .zg-getal span { display: block; color: var(--ok); font-weight: 600; }
.badge.s-warn { background: var(--warn-soft); color: var(--warn); }  /* risico middel (Kan het zuiniger?) */
.zg-niet { margin: .8rem 0 0; color: var(--muted); } .zg-niet summary { cursor: pointer; } .zg-niet p { margin: .4rem 0 0; }
.zg-uitleg { margin-top: 1rem; padding: .8rem 1rem; border: 1px dashed var(--line); border-radius: 12px; } .zg-uitleg ol { margin: .4rem 0 0; padding-left: 1.2rem; } .zg-uitleg li { margin: .2rem 0; }
.zg-gestart { display: flex; gap: .9rem; align-items: flex-start; padding: .4rem 0; } .zg-gestart p { margin: .25rem 0 0; }
.zg-vink { color: var(--ok); flex: none; margin-top: .1rem; }
@media (max-width: 640px) { .zg-lijst label.check { flex-wrap: wrap; } .zg-getal { width: 100%; text-align: left; padding-left: 1.6rem; } .zg-scheid { margin-left: 0; text-align: left; } }
/* Prijs > besparingsadvies: opstellen (beheerder) en lezen en kiezen (klant), codezuinig.py */
.av-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.5rem; margin-top: .4rem; }
.av-form { display: flex; flex-direction: column; gap: .9rem; }
.av-voorbeeld { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; background: var(--bg); border-radius: 12px; align-self: start; }
.av-lijst { padding: 0; overflow: visible; } .av-lijst .mc-item { background: var(--card); margin: 0; }
.av-eerder { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.av-eerder-lijst { list-style: none; margin: .5rem 0 0; padding: 0; }
.av-eerder-lijst li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.av-eerder-lijst li:last-child { border-bottom: 0; } .av-eerder-lijst strong { font-weight: 600; font-size: .93rem; }
.av-eerder-lijst > li { display: block; padding: 0; }
.av-eerder-item > summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; padding: .55rem 0; cursor: pointer; list-style: none; }
.av-eerder-item > summary::-webkit-details-marker { display: none; }
.av-eerder-titel { display: inline-flex; align-items: center; gap: .3rem; } .av-eerder-item[open] .zg-chevron { transform: rotate(90deg); }
.av-eerder-inhoud { margin: 0 0 .9rem 1.3rem; padding: .8rem 1rem; background: var(--bg); border-radius: 12px; }
.av-eerder-inhoud > p { margin: 0 0 .6rem; } .av-eerder-inhoud > p:last-child { margin: .6rem 0 0; }
.av-eerder-punten { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.av-eerder-punten li { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.av-eerder-punten li > span:first-child { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; } .av-eerder-punten .badge { align-self: flex-start; }
@media (max-width: 640px) { .av-eerder-punten li { flex-wrap: wrap; } .av-eerder-punten .zg-getal { width: 100%; text-align: left; } }
.av-eerder-punten li.niet strong, .av-eerder-punten li.niet .zg-getal { opacity: .55; }
.av-kop { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 700; color: var(--green-dark); }
.av-kaart h2 { margin: .3rem 0 .2rem; font-size: 1.15rem; } .av-kaart p { margin: 0; }
.av-dialog h2 { margin: .4rem 0 .5rem; font-size: 1.3rem; } .av-d-tekst { white-space: pre-line; }
/* Kan het zuiniger? inklapbaar: in de kop het aantal kansen en of er al een advies is verstuurd */
.zg-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem 1rem; cursor: pointer; list-style: none; }
.zg-kop::-webkit-details-marker { display: none; }
.zg-kop .section-title { margin: 0; }
.zg-kop-tekst { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.zg-kop-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; font-size: .88rem; color: var(--muted); }
.zg-kop-rechts { display: flex; align-items: center; gap: .6rem; flex: none; }
.zg-chevron { color: var(--muted); transition: transform .2s; } .zg-in[open] > .zg-kop .zg-chevron { transform: rotate(180deg); }
.zg-in[open] > .zg-kop { margin-bottom: 1rem; }
@media (max-width: 640px) { .zg-kop-rechts .muted { display: none; } }
.av-punten { margin-top: 1.4rem; } .av-punten .zg-som { margin-top: .5rem; }
.av-punten .zg-lijst .check { display: flex; gap: .8rem; padding: .9rem .2rem; } .av-punten .zg-tekst > span:not(.muted) { color: var(--ink-2); }
@media (max-width: 760px) { .av-grid { grid-template-columns: 1fr; } }
.ag-geheim { padding: .8rem 1rem; border-radius: 10px; }
.ag-geheim-veld { font-family: "IBM Plex Mono", monospace; font-size: .9rem; width: 100%; user-select: all; }

/* Beheer > Portals: kolom Totaal p/m (wat de klant betaalt, opbouw en wat er na AI-kosten overblijft) */
.portals-table .pt-totaal strong { font-size: 1.05rem; }
.portals-table .pt-opbouw, .portals-table .pt-marge { display: block; margin-top: .15rem; }
.portals-table .pt-marge { color: var(--ok); font-weight: 600; }
.portals-table .pt-marge.min { color: var(--bad); }

/* Stroomschema van een mailbox-agent (agent_workflow.html) */
.wf { list-style: none; margin: .5rem 0 0; padding: 0 0 0 1.1rem; border-left: 3px solid var(--line); display: grid; gap: .55rem; }
.wf-stap { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr) auto; gap: .4rem .7rem; align-items: center;
  background: var(--card, #fff); border: 1px solid var(--line); border-radius: 10px; padding: .55rem .75rem; }
.wf-stap::before { content: ""; position: absolute; left: calc(-1.1rem - 8px); top: 1rem; width: 13px; height: 13px; border-radius: 50%; background: var(--line); border: 2px solid var(--bg, #fff); }
.wf-start, .wf-analyse { grid-template-columns: 1fr; }
.wf-analyse::before { background: #4fb3ff; }
.wf-twijfel::before { background: #c9a400; }
.wf-rommel::before { background: #c0392b; }
.wf-regel::before { background: var(--green, #4fb3ff); }
.wf-kop { font-weight: 600; display: block; }
.wf-als { display: block; color: var(--muted); font-size: .85rem; }
.wf-pijl { color: var(--muted); font-size: 1.2rem; }
.wf-naar { border-radius: 8px; padding: .35rem .6rem; background: var(--code); }
.wf-naar strong { display: block; }
.wf-extern { background: #fdf0e3; } .wf-adres { background: #e8f4ff; } .wf-map { background: #e6ecf4; } .wf-blijft { background: #f3f3f3; }
html[data-theme="dark"] .wf-extern { background: #3b3122; } html[data-theme="dark"] .wf-adres { background: #1f2f3d; }
html[data-theme="dark"] .wf-map, html[data-theme="dark"] .wf-blijft { background: #18273e; }
.wf-detail { display: block; font-size: .8rem; color: var(--muted); word-break: break-all; }
.wf-n { min-width: 2.4rem; text-align: center; font-weight: 700; border-radius: 999px; padding: .15rem .5rem; background: var(--code); text-decoration: none; }
@media (max-width: 700px) { .wf-stap { grid-template-columns: 1fr; } .wf-pijl { display: none; } }
.ag-gesprek { display: grid; gap: .6rem; max-height: 32rem; overflow-y: auto; }
.ag-bericht { border-radius: 10px; padding: .5rem .75rem; background: var(--code); }
.ag-bericht p { margin: .2rem 0 0; white-space: pre-wrap; }
.ag-bericht.ag-klant { background: var(--green-soft, #e0e7f2); margin-left: 2rem; }
.ag-bericht.ag-fout { border: 1px solid var(--bad); }
.ag-json { font-family: "IBM Plex Mono", monospace; font-size: .8rem; }
.dm-groep-acties [data-groep-weg] { margin-left: auto; }

/* Hoofdknop en eigen bericht: blauw vlak met nachtblauwe tekst, ook in donker (daar is --ink licht) */
.btn.primary, .msg.user { color: #0d1828; }

/* Rustige stijl (handboek): */
/* grotere paginakop, kaarten met fijne rand zonder schaduw, labels in monospace */
main h1 { font-size: 44px; line-height: 1.05; letter-spacing: -.025em; }
main > .page-head, main header { margin-bottom: 8px; }
.card, .stat { box-shadow: none; border-radius: 18px; border-color: var(--line); }
.card { padding: 1.75rem; }
.card:hover { box-shadow: none; }
.stat { padding: 22px 24px 20px; gap: 6px; }
.stat-label, .bh-kpi-l, .bh-groep > .bh-kop, .bh-kop {
  font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.stat strong { font-size: 40px; letter-spacing: -.03em; font-weight: 700; }
.stat strong.stat-small { font-size: 22px; }
.bh-kpi { padding: 24px 26px 22px; gap: 6px; }
.bh-kpi strong { font-family: Byker, Asap, sans-serif; font-size: 42px; font-weight: 700; letter-spacing: -.03em; }
.card h2 { letter-spacing: -.015em; }
.side-nav { border-bottom: 1px solid rgba(255,255,255,.06); }
.bh-zijbalk a { border-radius: 10px; }
.settings-tabs a, .seg button { letter-spacing: .01em; }
html[data-theme="dark"] .card, html[data-theme="dark"] .stat { background: rgba(255,255,255,.02); }
/* login: rustiger kaart, grotere kop */
.dark-auth h1 { letter-spacing: -.025em; }
.dark-auth .auth-form .card { box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 40px 90px rgba(0,0,0,.45); border-radius: 22px; padding: 44px 40px; }
.dark-auth .auth-form h1 { font-size: 32px; }
/* licht: witte achtergrond (zie --bg), kaarten los door de fijne rand */
html:not([data-theme="dark"]) .card, html:not([data-theme="dark"]) .stat { border-color: #e3e9f2; }
html:not([data-theme="dark"]) .bh-zijbalk a.on, html:not([data-theme="dark"]) .bh-zijbalk a[aria-current] { background: #f1f6fc; }
/* vinkjes blijven groen (in orde), ook op het inlogscherm */
.dark-auth .schecks li::before { border-color: #a5c35c; }

/* ===== Huisstijl Jouw AI (29 okt 2026), gelijk aan de homepage: inlogschermen en de menubalk/werkvlak van portal en Beheer.
   Navy #0a1a33, logoblauw #3da9ff, blauw op wit #1f78d1, groen exact #a5c35c (24x7 ICT). Ligt als laatste blok over de opmaak hierboven. ===== */
:root { --navy: #0a1a33; }

/* --- inlogschermen (auth_base): donkere balk met volledig logo, navy vlak met gloed en de ballonnetjes uit het logo, witte kaart --- */
.site-top { background: rgba(10,26,51,.96); border-bottom: 1px solid rgba(255,255,255,.08); }
.site-top .site-logo { height: 56px; width: 182px; }  /* hele pixels, anders wordt het logo wazig */
.sbtn.p::before { background: #3da9ff; } .sbtn.p, .sbtn.p:hover { color: var(--navy); }
.auth-brand::after { display: none; }
body.dark-auth { background: var(--navy); }
.dark-auth .auth::before { background: radial-gradient(ellipse 45% 55% at 42% 30%, rgba(61,169,255,.22), rgba(61,169,255,0)), radial-gradient(ellipse 35% 55% at 10% 80%, rgba(165,195,92,.16), rgba(165,195,92,0)), var(--navy); }
/* geen raster: de ballonnetjes uit het logo, heel transparant, net als in de hero van de site */
.dark-auth .auth::after { background-image: url(/static/auth-ballonnen.svg?v=4); background-size: contain; background-position: center; background-repeat: no-repeat; -webkit-mask-image: none; mask-image: none; opacity: .22; }
/* brede schermen: de ballonnetjes even groot als in de hero van de site */
@media (min-width: 1600px) and (min-height: 781px) { .dark-auth .auth::after { background-image: url(/static/auth-ballonnen-groot.svg?v=3); background-size: cover; } }
/* op lage schermen (laptop 720 hoog) schuiven de ballonnetjes achter tekst en kaart: dan weglaten */
@media (max-height: 780px), (max-width: 1100px) { .dark-auth .auth::after { background-image: none; } }
/* "AI" in de kop in de letters van het logo */
.ai-word { display: inline-block; color: #3da9ff; text-shadow: none !important; }
.ai-logo { display: inline-block; height: .74em; width: auto; vertical-align: baseline; overflow: visible; filter: drop-shadow(0 0 14px rgba(61,169,255,.5)); }
.dark-auth .auth-form .card { background: #fff; border: 1px solid #dbe3ee; box-shadow: 0 30px 60px -34px rgba(10,26,51,.30); border-radius: 22px; }
.dark-auth .auth-form .card h1, .dark-auth .auth-form .card h2, .dark-auth .auth-form .card label { color: var(--navy); }
.dark-auth .auth-form .card p { color: #3a4659; }
.dark-auth .auth-form .card input { background: #fff; border: 1.5px solid #dbe3ee; color: var(--navy); }
.dark-auth .auth-form .card input:focus { border-color: #1f78d1; box-shadow: 0 0 0 4px rgba(61,169,255,.15); outline: 0; }
.dark-auth .auth-form .card a { color: #1f78d1; }
.dark-auth .auth-form .btn.primary::before { background: #1f78d1; }
.dark-auth .auth-form .btn.primary { color: #fff; }
/* leesbaarheid op donker: lopende tekst bijna wit, koppen wit */
.dark-auth .auth-brand .lead, .dark-auth .schecks li, .dark-auth .auth-brand p { color: #e6edf5; font-weight: 400; line-height: 1.6; }
.dark-auth .site-foot { background: var(--navy); }
.dark-auth .site-foot, .dark-auth .site-foot span, .dark-auth .site-foot a { color: #e6edf5; }

/* --- menubalk portal en Beheer: effen navy, volledig logo, alleen tekst; actief = witte vette tekst,
       bij hover een afgeronde onderrand van groen naar blauw; haarlijn in de logokleuren onder de balk --- */
.side-nav { background: var(--navy); min-height: 64px; border-bottom: 0; isolation: isolate; }
.side-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(165,195,92,0), rgba(165,195,92,.55) 25%, rgba(61,169,255,.55) 75%, rgba(61,169,255,0)); }
.side-brand img { height: 48px; width: 156px; }
.side-nav .side-links { gap: 4px; }
.side-nav .side-links > a svg, .side-nav .nav-drop > summary svg:first-child { display: none; }
.side-nav .side-links > a, .side-nav .nav-drop > summary { position: relative; color: #a9b8cc; font-size: 14.5px; font-weight: 500 !important; letter-spacing: .01em; padding: 0 14px; background: none !important; box-shadow: none; border-radius: 10px; }
.side-nav .side-links > a:hover, .side-nav .nav-drop > summary:hover { color: #fff; }
.side-nav .side-links > a.on, .side-nav .side-links > a.on:hover { color: #fff; font-weight: 600 !important; box-shadow: none; }
.side-nav .side-links > a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 0 0 2.5px 0; pointer-events: none; clip-path: inset(60% 0 0 0);
  background: linear-gradient(90deg, #a5c35c, #3da9ff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .2s; }
.side-nav .side-links > a:hover::after { opacity: 1; }
.side-nav .count { min-width: 18px; height: 18px; font-size: 10.5px; padding: 0 5px; background: rgba(255,255,255,.12); color: #fff; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .side-nav .side-links > a::after { transition: none; } }

/* --- werkvlak (licht thema): wit, kaarten met haarlijn zonder schaduw, grotere paginakop --- */
html:not([data-theme="dark"]) body:not(.dark-auth) { background: #fff; }
html:not([data-theme="dark"]) .card { background: #fff; border-color: #e6ecf3; box-shadow: none; }
.card { border-radius: 18px; }
main h1, .bh-inhoud h1 { font-size: 44px; line-height: 1.05; letter-spacing: -.025em; }
.bh-kpi-l, .bh-kop { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #6b7a90; }
.bh-kpi strong { font-family: Byker, Asap, sans-serif; font-size: 44px; letter-spacing: -.035em; }
html:not([data-theme="dark"]) .bh-zijbalk a.on, html:not([data-theme="dark"]) .bh-zijbalk a[aria-current] { background: none; color: var(--navy); font-weight: 600; box-shadow: inset 2px 0 0 #3da9ff; border-radius: 0; }
/* klikbare kaarten en tegels: bij hover een rand van groen naar blauw, zoals op de homepage */
a.card, .bh-kpi { position: relative; transition: transform .25s, box-shadow .25s, border-color .25s; }
a.card::after, .bh-kpi::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(120deg, #a5c35c, #3da9ff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .3s; }
a.card:hover, .bh-kpi:hover { border-color: transparent; transform: translateY(-2px); box-shadow: 0 24px 50px -30px rgba(31,120,209,.45); }
a.card:hover::after, .bh-kpi:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { a.card, .bh-kpi, a.card::after, .bh-kpi::after { transition: none; } }

/* menubalk: meer contrast (zelfde regel als op de homepage: tekst op donker bijna wit #E6EDF5, actief zuiver wit en vet) */
.side-nav .side-links > a, .side-nav .nav-drop > summary { color: #e6edf5; }
.side-nav .side-links > a.on, .side-nav .side-links > a.on:hover, .side-nav .side-links > a:hover, .side-nav .nav-drop > summary:hover { color: #fff; }
.side-nav .side-links > a.on { font-weight: 700 !important; }
.side-nav .nav-drop > summary svg { color: #e6edf5; }
.side-nav .side-user > summary { color: #e6edf5; }
.side-nav .side-user > summary b, .side-nav .side-user > summary strong { color: #fff; }
.side-nav .side-user > summary > svg { color: #c9d4e2; }
.side-nav .zk-veld input::placeholder { color: #b9c6d6; }
.side-nav .zk-knop { color: #e6edf5; }
.side-nav .side-who strong { color: #fff; }
.side-nav .side-who span { color: #e6edf5; }

/* donker thema: meer contrast (zelfde regel als de homepage): lopende en kleine tekst bijna wit, koppen wit */
html[data-theme="dark"] body:not(.dark-auth) { --ink: #ffffff; --ink-2: #e6edf5; --muted: #c9d4e2; }
html[data-theme="dark"] .ov-tekst { color: #e6edf5; }
html[data-theme="dark"] .ov-item small { color: #c9d4e2; }
html[data-theme="dark"] .bh-kpi-l, html[data-theme="dark"] .bh-kop { color: #c9d4e2; }
html[data-theme="dark"] body:not(.dark-auth) .foot, html[data-theme="dark"] body:not(.dark-auth) .foot a { color: #c9d4e2; }
/* menubalk in donker gelijk aan licht: geen streep of vlak onder de actieve tab, teller zichtbaar */
html[data-theme="dark"] body:not(.dark-auth) .side-nav .side-links > a.on { box-shadow: none; background: none !important; }
html[data-theme="dark"] body:not(.dark-auth) .side-nav .side-links > a.on svg { color: #fff; }
html[data-theme="dark"] .side-nav .count { background: rgba(255,255,255,.16); color: #fff; }

/* ===== Donker thema: contrast altijd goed (regel collega, 29 okt 2026). Gewone tekst #E6EDF5, kleine/gedempte tekst
   minimaal #C9D4E2, nooit grijs onder 4,5:1. Geldt voor alle portalpagina's, ook het bouwscherm. ===== */
html[data-theme="dark"] body:not(.dark-auth) :is(.muted, small, .small:not(.btn):not(.linkbtn), .hint, .meta, .sub, .pl-sub, .bh-kpi-s, .msg-klaar-tijd, .ts, time, .foot, .foot a, .ov-item small, th, .kv dt, .steps li, .chat-intro, .msg.sys, .steps-mini, .working) { color: #c9d4e2; }
html[data-theme="dark"] body:not(.dark-auth) :is(p, li, td, dd, .msg, .msg.ai, .ov-tekst) { color: #e6edf5; }
html[data-theme="dark"] body:not(.dark-auth) :is(input, textarea, select)::placeholder { color: #aebbcc; opacity: 1; }
html[data-theme="dark"] body:not(.dark-auth) :is(h1, h2, h3, h4, strong, b, label) { color: #fff; }
/* knoppen in logoblauw: navy tekst (wit op dit blauw haalt maar 2-3:1) */
html[data-theme="dark"] .btn.primary, html[data-theme="dark"] .btn.primary * { color: #0a1a33; }
html[data-theme="dark"] body:not(.dark-auth) :is(.foot, .foot a, .bh-kpi-s) { color: #e6edf5; }
/* gele status ("proef tot") iets lichter vlak met donkere tekst */
html[data-theme="dark"] .badge.s-open { background: #ffd27a; color: #2b2000; }