/* ==========================================================================
   HOOGWERKT — AUTHENTICATIE (bevroren ontwerp: Hoogwerkt Authenticatie.dc.html,
   Design Freeze 2026-08-31). Altijd-donkere identiteitssurface, los van de
   app-shell en de kp-skin. Tokens: brand #85C5C4, canvas #0A1216, tekst #DCE9EA.
   ========================================================================== */
html[data-hw-auth] body{background:#0A1216}
.hw-auth{min-height:100dvh;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(24px,4.5vw,76px);padding:clamp(24px,4vw,72px);background-color:#0A1216;background-image:radial-gradient(85% 70% at 24% 46%,rgba(78,143,142,.30),transparent 62%),radial-gradient(55% 55% at 86% 8%,rgba(133,197,196,.12),transparent 65%),linear-gradient(160deg,#0F1D23 0%,#0A1216 55%,#070E11 100%);color:#DCE9EA;font-family:"Montserrat",Helvetica,Arial,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
.hw-auth *,.hw-auth *::before,.hw-auth *::after{box-sizing:border-box}
.hw-auth a{color:#9FD0CF;text-decoration:none}
.hw-auth a:hover{color:#CDEDEC}
@keyframes hwSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes hwSpinRev{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
@keyframes hwBreathe{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.014);opacity:1}}
@keyframes hwDrift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-.9%,0)}}
@keyframes hwSettle{from{opacity:0;transform:scale(.945)}to{opacity:1;transform:none}}
@keyframes hwPanel{from{opacity:0;transform:translateY(14px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.hw-auth *,.hw-auth *::before,.hw-auth *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* ---------- podium (merkschijf) ---------- */
.hw-auth-stage-col{flex:1 1 400px;min-width:240px;max-width:620px;display:flex;align-items:center;justify-content:center}
.hw-auth-stage{position:relative;width:min(100%,52vmin,580px);aspect-ratio:1/1;animation:hwSettle 680ms cubic-bezier(.2,.75,.25,1) both}
.hw-auth-stage>*{position:absolute;border-radius:50%}
.hw-auth-glow{inset:-16%;background:radial-gradient(circle at 50% 50%,rgba(133,197,196,.20),rgba(78,143,142,.07) 46%,transparent 72%);filter:blur(28px)}
.hw-auth-ring-outer{inset:0;border:1px solid rgba(133,197,196,.13);background:conic-gradient(from 205deg,rgba(133,197,196,.07),rgba(255,255,255,.025) 28%,transparent 58%,rgba(133,197,196,.06));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 40px 90px -50px rgba(0,0,0,.95);animation:hwDrift 22s ease-in-out infinite}
.hw-auth-arc-outer{inset:1.5%;background:conic-gradient(from 0deg,rgba(133,197,196,0) 0deg,rgba(133,197,196,0) 205deg,rgba(133,197,196,.45) 322deg,rgba(226,248,247,.95) 352deg,rgba(133,197,196,0) 360deg);-webkit-mask:radial-gradient(closest-side,transparent 97.4%,#000 97.8%);mask:radial-gradient(closest-side,transparent 97.4%,#000 97.8%);animation:hwSpin 30s linear infinite}
.hw-auth-ring-mid{inset:8.5%;border:1px solid rgba(255,255,255,.065);background:linear-gradient(158deg,rgba(255,255,255,.055),transparent 46%);box-shadow:inset 0 0 70px rgba(0,0,0,.55)}
.hw-auth-ring-inner{inset:17%;border:1px solid rgba(133,197,196,.22);background:radial-gradient(130% 130% at 28% 12%,rgba(255,255,255,.085),transparent 48%);box-shadow:inset 0 2px 34px rgba(0,0,0,.55),0 0 50px -24px rgba(133,197,196,.55);animation:hwBreathe 16s ease-in-out infinite}
.hw-auth-arc-inner{inset:18.5%;background:conic-gradient(from 0deg,rgba(133,197,196,0) 0deg,rgba(133,197,196,0) 240deg,rgba(133,197,196,.30) 330deg,rgba(200,238,237,.6) 356deg,rgba(133,197,196,0) 360deg);-webkit-mask:radial-gradient(closest-side,transparent 96.6%,#000 97.2%);mask:radial-gradient(closest-side,transparent 96.6%,#000 97.2%);animation:hwSpinRev 46s linear infinite}
.hw-auth-core{inset:26%;background:linear-gradient(155deg,rgba(40,60,69,.92) 0%,rgba(11,20,25,.96) 100%);border:1px solid rgba(133,197,196,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -26px 50px rgba(0,0,0,.6),0 24px 70px -26px rgba(0,0,0,.85)}
.hw-auth-logo{inset:33%;border-radius:0;display:flex;align-items:center;justify-content:center}
.hw-auth-logo img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 16px 28px rgba(0,0,0,.55))}

/* ---------- glaspaneel ---------- */
.hw-auth-panel-col{flex:1 1 430px;min-width:280px;max-width:500px;display:flex;justify-content:center}
.hw-auth-panel-col--wide{max-width:640px}
.hw-auth-panel{width:100%;padding:clamp(26px,3vw,44px);border-radius:22px;background:linear-gradient(158deg,rgba(40,60,69,.70) 0%,rgba(15,27,33,.66) 100%);backdrop-filter:blur(26px) saturate(118%);-webkit-backdrop-filter:blur(26px) saturate(118%);border:1px solid rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.11),inset 0 -1px 0 rgba(0,0,0,.35),0 44px 100px -46px rgba(0,0,0,.9);animation:hwPanel 620ms 120ms cubic-bezier(.2,.75,.25,1) both}
.hw-auth-panel h1{margin:0 0 26px;font-size:clamp(26px,2.3vw,34px);font-weight:600;letter-spacing:-.02em;line-height:1.15;color:#F3F9F9}
.hw-auth-panel h1.hw-auth-h1--intro{margin-bottom:14px}
.hw-auth-intro{margin:0 0 26px;max-width:46ch;font-size:14.5px;line-height:1.62;color:rgba(220,233,234,.66)}
.hw-auth-intro strong{color:#DCE9EA;font-weight:600}
.hw-auth-intro code,.hw-auth-list code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;color:#CDEDEC;background:rgba(255,255,255,.06);padding:1px 5px;border-radius:5px}
.hw-auth-list{margin:0 0 22px;padding-left:20px;font-size:14px;line-height:1.6;color:rgba(220,233,234,.72)}
.hw-auth-list li{margin-bottom:6px}

/* ---------- melding (4 uitkomsten: fout / geblokkeerd / netwerk / ok) ---------- */
.hw-auth-alert{display:flex;gap:10px;align-items:flex-start;margin:0 0 22px;padding:12px 14px;border-radius:11px;border:1px solid;font-size:13.5px;line-height:1.5}
.hw-auth-alert::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:currentColor;margin-top:6px}
.hw-auth-alert[data-tone=error]{background:rgba(241,176,162,.12);border-color:rgba(241,176,162,.42);color:#F1B0A2}
.hw-auth-alert[data-tone=lock]{background:rgba(231,201,127,.12);border-color:rgba(231,201,127,.42);color:#F0C987}
.hw-auth-alert[data-tone=net]{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#CFE1E2}
.hw-auth-alert[data-tone=ok]{background:rgba(133,197,196,.14);border-color:rgba(133,197,196,.45);color:#9FD0CF}
.hw-auth-alert[hidden]{display:none}

/* ---------- velden ---------- */
.hw-auth-field{margin:0 0 20px}
.hw-auth-field--last{margin-bottom:4px}
.hw-auth-field label{display:block;font-size:13.5px;font-weight:500;color:rgba(220,233,234,.72);margin:0 0 8px}
.hw-auth-field label .hint{font-weight:400;color:rgba(220,233,234,.5);margin-left:6px;font-size:12.5px}
.hw-auth-pw{position:relative}
.hw-auth .hw-auth-input{width:100%;max-width:100%;height:52px;min-height:52px;padding:0 16px;border-radius:12px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.045);color:#F3F9F9;font-family:inherit;font-size:16px;line-height:1.2;outline:none;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}
.hw-auth .hw-auth-pw .hw-auth-input{padding-right:56px}
.hw-auth .hw-auth-input::placeholder{color:rgba(220,233,234,.38)}
.hw-auth .hw-auth-input:focus{border-color:rgba(133,197,196,.85);background:rgba(133,197,196,.07);box-shadow:0 0 0 3px rgba(133,197,196,.16);outline:none}
.hw-auth .hw-auth-input[aria-invalid=true]{border-color:rgba(241,176,162,.7);background:rgba(241,176,162,.06)}
.hw-auth .hw-auth-input:-webkit-autofill,.hw-auth .hw-auth-input:-webkit-autofill:focus{-webkit-text-fill-color:#F3F9F9;-webkit-box-shadow:0 0 0 1000px #17262C inset;caret-color:#F3F9F9;transition:background-color 9999s ease-out}
.hw-auth-pwtoggle{position:absolute;top:4px;right:4px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;border-radius:10px;color:rgba(220,233,234,.62);cursor:pointer;transition:color .18s ease,background-color .18s ease}
.hw-auth-pwtoggle:hover{color:#CDEDEC;background:rgba(133,197,196,.10)}
.hw-auth-pwtoggle:focus-visible{color:#CDEDEC;background:rgba(133,197,196,.14);outline:2px solid rgba(133,197,196,.6);outline-offset:1px}
.hw-auth .hw-auth-err{margin:8px 0 0;font-size:13px;line-height:1.45;color:#F1B0A2;font-weight:500}
.hw-auth .hw-auth-err:empty{display:none}
.hw-auth-check{display:flex;align-items:flex-start;gap:10px;min-height:44px;font-size:13.5px;line-height:1.5;color:rgba(220,233,234,.72);cursor:pointer;margin:6px 0 4px;font-weight:500}
.hw-auth-check input{width:20px;height:20px;margin-top:2px;accent-color:#85C5C4;flex:0 0 auto}
.hw-auth-grid{display:grid;gap:0 16px}
@media(min-width:640px){.hw-auth-grid{grid-template-columns:1fr 1fr}.hw-auth-grid .span-2{grid-column:span 2}}

/* ---------- knoppen en koppelingen ---------- */
.hw-auth .hw-auth-submit{display:flex;align-items:center;justify-content:center;width:100%;height:54px;min-height:54px;margin:26px 0 0;padding:0 16px;border:none;border-radius:12px;background:linear-gradient(180deg,#8FD0CF 0%,#5FA6A5 100%);color:#0B1A1F;font-family:inherit;font-size:16px;font-weight:600;letter-spacing:-.005em;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 12px 34px -14px rgba(133,197,196,.6);transition:background .2s ease,box-shadow .2s ease,transform .2s ease,opacity .2s ease}
.hw-auth .hw-auth-submit:hover:not(:disabled),.hw-auth .hw-auth-submit:focus-visible{background:linear-gradient(180deg,#9CDBDA 0%,#69B4B3 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 16px 42px -12px rgba(133,197,196,.75);transform:translateY(-1px)}
.hw-auth .hw-auth-submit:focus-visible{outline:2px solid rgba(226,248,247,.85);outline-offset:3px}
.hw-auth .hw-auth-submit:disabled{opacity:.72;cursor:progress;transform:none}
.hw-auth .hw-auth-submit--secondary{margin-top:12px;background:rgba(255,255,255,.06);color:#DCE9EA;border:1px solid rgba(255,255,255,.14);box-shadow:none}
.hw-auth .hw-auth-submit--secondary:hover:not(:disabled),.hw-auth .hw-auth-submit--secondary:focus-visible{background:rgba(255,255,255,.1);box-shadow:none;transform:none}
.hw-auth-divider{height:1px;margin:26px 0 6px;background:rgba(255,255,255,.075)}
.hw-auth-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;column-gap:22px;row-gap:0;margin-top:8px}
.hw-auth .hw-auth-link{min-height:44px;padding:10px 2px;border:none;background:none;border-radius:8px;color:#9FD0CF;font-family:inherit;font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer;transition:color .18s ease;text-decoration:none}
.hw-auth .hw-auth-link--muted{color:rgba(220,233,234,.62)}
.hw-auth .hw-auth-link:hover{color:#CDEDEC}
.hw-auth .hw-auth-link:focus-visible{color:#CDEDEC;outline:2px solid rgba(133,197,196,.6);outline-offset:2px}

/* ---------- bevestiging / technische details ---------- */
.hw-auth-done-badge{width:58px;height:58px;border-radius:50%;background:rgba(133,197,196,.14);border:1px solid rgba(133,197,196,.42);display:flex;align-items:center;justify-content:center;margin:0 0 24px}
.hw-auth-done-badge svg{width:27px;height:27px}
.hw-auth-details{margin:0 0 18px;font-size:13.5px;color:rgba(220,233,234,.72)}
.hw-auth-details summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center;color:#9FD0CF}
.hw-auth-details code{display:block;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12.5px;color:#CDEDEC;background:rgba(0,0,0,.25);padding:8px 10px;border-radius:8px;margin-top:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.hw-auth-kv{margin:8px 0 0;display:grid;grid-template-columns:max-content 1fr;gap:4px 12px;font-size:13px}
.hw-auth-kv dt{color:rgba(220,233,234,.55)}
.hw-auth-kv dd{margin:0;color:#DCE9EA;overflow-wrap:anywhere}

@media(max-width:720px){.hw-auth{gap:18px;padding:22px 16px 40px}.hw-auth-stage{width:min(100%,46vmin,300px)}.hw-auth-links{column-gap:16px}}