:root{--brand:#0B5ED7;--bg:#F6F8FB;--panel:#fff;--text:#0B1220;--muted:#6B7280;--line:#E6EAF2;--topbar:#000;}
*{box-sizing:border-box} html,body{height:100%;margin:0;width:100%;overflow-x:hidden}
/*
  BELANGRIJK (iOS fix):
  In Safari/standalone webview kan door viewport rounding (vooral bij rotatie)
  soms een 1px "lek" zichtbaar worden langs een rand.
  Door de *document-achtergrond* zwart te maken, valt zo'n lek weg in de zwarte
  topbar in plaats van als wit streepje.
  De daadwerkelijke UI blijft licht via #app.
*/
html{background:#000}
/*
  Maak de pagina-achtergrond altijd zwart.
  iOS Safari (zeker standalone/PWA + landscape) kan anders een 1px witte strook
  aan de rechterrand laten zien als de layout nét niet 100% van het visuele
  viewport vult.
*/
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial;background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%}
html,body{width:100%;height:100%;overflow-x:hidden}
body{overscroll-behavior:none}
/* De UI zelf blijft gewoon licht; die tekenen we in #app.
   In iOS "app" (standalone) kan in landscape door viewport rounding een 1px strook zichtbaar worden.
   Door #app als fixed root te gebruiken, vullen we altijd het hele scherm. */
#app{
  position:fixed;
  inset:0;
  /* Geen 100vw: dat kan op iOS nét een pixel te breed uitpakken */
  width:auto;
  height:auto;
  background:var(--bg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
/* While the splash is visible, keep the page background black */
body.splashing{background:#000}
button,a,input{touch-action:manipulation}
.splash{overflow:hidden;position:fixed;inset:0;width:100%;height:100%;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;z-index:999;color:#fff;touch-action:none}

/* Block landscape to avoid iOS Safari keeping a skewed/zoomed state after rotating */
.landscape-blocker{display:none;position:fixed;inset:0;background:#000;z-index:9999;align-items:center;justify-content:center;padding:24px;padding-top:calc(24px + env(safe-area-inset-top));padding-right:calc(24px + env(safe-area-inset-right));padding-bottom:calc(24px + env(safe-area-inset-bottom));padding-left:calc(24px + env(safe-area-inset-left));}
.landscape-card{max-width:420px;width:100%;border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:18px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);color:#fff}
.landscape-title{font-weight:900;font-size:28px;letter-spacing:.6px}
.landscape-sub{margin-top:6px;opacity:.9;font-size:16px}
.landscape-hint{margin-top:14px;opacity:.75;font-size:14px}
/* Only block landscape on phone-like viewports; allow tablets in landscape */
@media (orientation:landscape) and (max-height:500px){html,body{background:#000;}
  html,body{overflow:hidden!important}
  .landscape-blocker{display:flex}
}
.splash img{width:min(92%,560px);max-width:92vw;animation:logoIn .9s ease-out both}
.splash .title{font-weight:900;font-size:clamp(34px,7vw,56px);animation:textIn .9s .2s ease-out both}
.splash .subtitle{font-size:clamp(18px,4.5vw,28px);opacity:.9;animation:textIn .9s .35s ease-out both}
@keyframes logoIn{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes textIn{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}

.topbar{
  position:sticky;
  top:0;
  z-index:5;
  background:#000;
  color:#fff;
  /* keep the header away from the iPhone notch when installed as PWA */
  padding: calc(14px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 14px calc(14px + env(safe-area-inset-left));
  border-bottom:1px solid #111;
  display:flex;
  justify-content:center;
}
.brand{
  width:100%;
  max-width:520px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.brand .name{font-size:26px;font-weight:900;letter-spacing:.6px;line-height:1.05}
.brand .tag{font-size:14px;opacity:.9;line-height:1.2}

.container{max-width:520px;margin:0 auto;padding:14px 14px 90px;flex:1;overflow:auto;-webkit-overflow-scrolling:touch;}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:0 8px 24px rgba(17,24,39,.06)}
.primary{width:100%;padding:12px;border-radius:14px;border:0;background:var(--brand);color:#fff;font-weight:900}

html,body{overflow-x:hidden;}

/* --- iOS standalone (Add to Home Screen) safe-area / statusbar hairline fix --- */
/*
  html/body moeten LICHT blijven (var(--bg)).
  Alleen de statusbar-notch-zone toppen we af met een zwart overlay zodat er geen 1px streepje zichtbaar is.
*/
html{
  background:var(--bg);
}

/*
  iOS (Safari/PWA) sometimes shows a 1px strip at the very top (safe-area).
  We paint that area explicitly so it always matches the NEFR topbar.
*/
body::before{
  content:"";
  position:fixed;
  top:0; left:0; right:0;
  height: max(env(safe-area-inset-top), 12px);
  background: var(--topbar);
  z-index:9999;
  pointer-events:none;
}

@media (display-mode: standalone) {
  body::after{
    content:"";
    position:fixed;
    top:0; bottom:0; left:0; right:0;
    /* Deze inset-box vult de notch-zijkanten met de topbar-kleur */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    box-shadow:
      inset env(safe-area-inset-left) 0 0 0 var(--topbar),
      inset calc(-1 * env(safe-area-inset-right)) 0 0 0 var(--topbar);
    pointer-events:none;
    z-index:9998;
  }
}


/* BLOK 2: Auth modal */
.modal.hidden { display:none; }
.modal { position: fixed; inset: 0; z-index: 9999; }
.modal-backdrop { position:absolute; inset:0; background: rgba(0,0,0,.45); }
.modal-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 420px);
  background: #ffffff;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.modal-title { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.modal-sub { font-size: 12px; opacity: .75; margin-bottom: 10px; }

.tabs { display:flex; gap:8px; margin: 10px 0 12px; }
.tab {
  flex:1;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 10px 8px;
  background: #f5f5f7;
  font-weight: 700;
}
.tab.active { background: #000; color: #fff; border-color: #000; }

.tabpane.hidden { display:none; }

.field { display:block; margin-bottom: 10px; }
.label { font-size: 12px; font-weight: 700; margin-bottom: 6px; opacity:.8; }
.field input {
  width: 100%;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 12px;
  padding: 12px 12px;
  font-size: 16px;
  outline: none;
}
.field input:focus { border-color: #000; }

.primary.full { width:100%; margin-top: 6px; }

.modal-actions { display:flex; justify-content:flex-end; margin-top: 10px; }
button.ghost {
  border: 1px solid rgba(0,0,0,.18);
  background: transparent;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 700;
}
.modal-msg {
  display:none;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f5f5f7;
  font-size: 13px;
}
.welcome-card{text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}.welcome-logo{width:min(220px,70vw);border-radius:18px}.welcome-card h1{margin:4px 0 0;font-size:28px}.lead{margin:0;color:#374151;font-size:16px;line-height:1.45}.primary.secondary{background:#111827;margin-top:2px}.small-note{font-size:12px;color:#6b7280;margin:4px 0 0;line-height:1.35}


/* v1.9 password eye */
.password-wrap{position:relative;display:flex;align-items:center;}
.password-wrap input{width:100%;padding-right:52px!important;}
.pw-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;font-size:20px;line-height:1;min-width:40px;height:40px;border-radius:12px;cursor:pointer;}
.pw-eye:active{background:rgba(0,0,0,.06);}

/* v2.2 startpagina + menu op loginstatus */
.home-topbar{position:relative;align-items:center;min-height:82px;}
.home-menu-btn{position:absolute;right:14px;top:calc(18px + env(safe-area-inset-top));width:50px;height:50px;border-radius:16px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;box-shadow:0 8px 24px rgba(0,0,0,.18);}
.home-menu-btn span{width:23px;height:3px;border-radius:999px;background:#fff;display:block;}
.home-menu{position:absolute;right:14px;top:calc(70px + env(safe-area-inset-top));width:min(260px,calc(100vw - 28px));background:#fff;color:#0B1220;border:1px solid rgba(15,23,42,.08);border-radius:18px;padding:10px;box-shadow:0 18px 50px rgba(15,23,42,.22);display:none;z-index:60;text-align:left;}
.home-menu.open{display:block;}
.home-menu button{width:100%;display:block;text-align:left;background:transparent;border:0;border-radius:12px;padding:13px 14px;font-weight:850;font-size:16px;color:#0B1220;}
.home-menu button:active{background:#F2F5FA;}
.home-actions{width:100%;display:flex;flex-direction:column;gap:10px;}
#btnApp,#btnLogout{display:none;}

/* v2.4: actieve menu-optie subtiel markeren */
.home-menu button.menu-current{
  background:linear-gradient(135deg, rgba(34,197,94,.14), rgba(59,130,246,.10));
  box-shadow:inset 0 0 0 1px rgba(34,197,94,.18);
  position:relative;
  padding-left:22px;
}
.home-menu button.menu-current::before{
  content:"";
  position:absolute;
  left:8px;
  top:50%;
  width:7px;
  height:7px;
  border-radius:999px;
  background:#22c55e;
  transform:translateY(-50%);
}

/* v2.5 account + abonnementbasis */
.subscription-box{margin:18px 0 10px;padding:16px;border:1px solid rgba(33,150,83,.22);border-radius:22px;background:linear-gradient(135deg,rgba(207,250,226,.68),rgba(232,246,255,.72));box-shadow:0 14px 32px rgba(15,23,42,.07)}
.sub-title{font-weight:900;font-size:20px;color:#0f172a;margin-bottom:5px}.sub-copy{font-size:15px;color:#64748b;margin-bottom:10px}.sub-prices{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-bottom:12px}.sub-prices b{font-size:17px;color:#0f172a}.sub-prices span{font-size:14px;color:#64748b}.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin:12px 0 16px}.price-option{border:1px solid rgba(15,23,42,.10);border-radius:20px;padding:14px 10px;background:#fff}.price-option-featured{border-color:rgba(34,197,94,.45);background:linear-gradient(135deg,rgba(236,253,245,.9),rgba(239,246,255,.9))}.price-title{font-weight:800;color:#0f172a}.price-main{font-weight:950;font-size:24px;margin:7px 0;color:#0f172a}.price-note{font-size:13px;color:#64748b}.account-list{width:100%;margin:14px 0;border:1px solid rgba(15,23,42,.09);border-radius:18px;overflow:hidden;background:#fff}.account-list div{display:flex;justify-content:space-between;gap:12px;padding:13px 14px;border-bottom:1px solid rgba(15,23,42,.07);font-size:14px}.account-list div:last-child{border-bottom:0}.account-list span{color:#64748b}.account-list b{color:#0f172a;text-align:right}.ghost-link{border:0;background:transparent;color:#2563eb;font-weight:800;margin-top:12px;font-size:15px}.pay-card,.account-card{max-width:720px;margin-left:auto;margin-right:auto}
@media(max-width:420px){.price-grid{grid-template-columns:1fr}.account-list div{flex-direction:column;gap:4px}.account-list b{text-align:left}}

/* v2.7 abonnement-flow simulatie */
.selectable-prices .plan-option{appearance:none;-webkit-appearance:none;font:inherit;cursor:pointer;text-align:center;transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;}
.selectable-prices .plan-option:active{transform:scale(.99)}
.selectable-prices .plan-option.selected{box-shadow:0 0 0 3px rgba(34,197,94,.16),0 14px 30px rgba(15,23,42,.08);border-color:rgba(34,197,94,.62)}
.pay-message{display:none;width:100%;padding:12px 14px;border-radius:14px;font-size:14px;font-weight:750;line-height:1.35;text-align:left;margin-top:6px}
.pay-message.ok{background:rgba(34,197,94,.10);color:#166534;border:1px solid rgba(34,197,94,.25)}
.pay-message.err{background:rgba(239,68,68,.10);color:#991b1b;border:1px solid rgba(239,68,68,.22)}
.test-action{font-size:14px;opacity:.96}
.active-sub-box{background:linear-gradient(135deg,rgba(220,252,231,.88),rgba(219,234,254,.7));border-color:rgba(34,197,94,.38)}
.expired-sub-box{background:linear-gradient(135deg,rgba(255,247,237,.9),rgba(254,242,242,.72));border-color:rgba(249,115,22,.22)}

/* v2.8 abonnement beheren */
.manage-card .lead{max-width:520px}
.manage-note{border-top:1px solid rgba(15,23,42,.10);padding-top:12px;margin-top:12px}
.pending-cancel-box{border-color:rgba(245,158,11,.28);background:linear-gradient(135deg,rgba(255,251,235,.88),rgba(239,246,255,.72))}
.danger-soft{background:#fff1f2!important;color:#991b1b!important;border:1px solid rgba(244,63,94,.24)!important}
.danger-soft:hover{filter:brightness(.98)}
.code-form{width:100%;display:flex;flex-direction:column;gap:9px;margin:10px 0 14px;text-align:left}.code-form label{font-size:13px;font-weight:850;color:#334155}.text-input{width:100%;border:1px solid rgba(15,23,42,.14);border-radius:16px;padding:14px 14px;font-size:16px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;background:#fff;color:#0f172a;outline:none}.text-input:focus{border-color:rgba(34,197,94,.55);box-shadow:0 0 0 4px rgba(34,197,94,.10)}.code-info-box{background:linear-gradient(135deg,rgba(236,253,245,.75),rgba(239,246,255,.75))}.test-code-note{text-align:left;margin-top:10px}.plan-option:disabled{opacity:.52;filter:grayscale(.2)}

/* v3.1 legal footer + legal pages */
.legal-footer{width:100%;display:flex;justify-content:center;align-items:center;gap:10px;padding:22px 16px calc(22px + env(safe-area-inset-bottom));font-size:13px;color:#64748b;text-align:center}
.legal-footer a{color:#334155;text-decoration:none;font-weight:800}
.legal-footer a:active{color:#0f172a}
.legal-card{max-width:760px;margin-left:auto;margin-right:auto;text-align:left;align-items:stretch}
.legal-card h1{text-align:center;margin-bottom:8px}
.legal-logo{align-self:center;width:min(180px,60vw)}
.legal-section{padding:14px 0;border-top:1px solid rgba(15,23,42,.08)}
.legal-section:first-of-type{border-top:0}
.legal-section h2{font-size:18px;margin:0 0 8px;color:#0f172a}
.legal-section p{margin:0 0 9px;color:#475569;line-height:1.55;font-size:15px}
.legal-section a{color:#2563eb;font-weight:800;text-decoration:none}
.legal-small{font-size:12px;color:#64748b;line-height:1.45;background:#f8fafc;border:1px solid rgba(15,23,42,.08);border-radius:14px;padding:12px;margin-top:10px}

/* v3.2 sitebrede zwarte footer */
html,body{min-height:100%;}
.legal-footer{background:#0B1220 !important;color:rgba(255,255,255,.78) !important;margin-top:28px;border-top:1px solid rgba(255,255,255,.08);}
.legal-footer a{color:#fff !important;text-decoration:none;font-weight:850;}
.legal-footer a:active{color:#DFF7EA !important;}
.legal-footer span{color:rgba(255,255,255,.45);}

/* v3.3 — rustiger logo + footer sitebreed */
body{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
#app{flex:1 0 auto; width:100%;}
.legal-footer{
  flex-shrink:0;
  width:100%;
  display:flex !important;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:22px 16px calc(22px + env(safe-area-inset-bottom));
  box-sizing:border-box;
  background:#0B1220 !important;
  color:rgba(255,255,255,.78) !important;
  margin-top:28px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:13px;
  text-align:center;
}
.legal-footer a{color:#fff !important;text-decoration:none;font-weight:850;}
.legal-footer span{color:rgba(255,255,255,.45);}
.card-logo{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:4px auto 18px;
}
.card-logo img{
  width:92px;
  height:92px;
  object-fit:contain;
  filter:drop-shadow(0 12px 22px rgba(15,23,42,.08));
}
.card-logo span{
  font-size:28px;
  line-height:1;
  font-weight:950;
  letter-spacing:.02em;
  color:#0f172a;
}
.legal-page .card-logo img,
.legal-card .card-logo img{
  width:76px;
  height:76px;
}
.legal-page .card-logo span,
.legal-card .card-logo span{
  font-size:24px;
}
/* oude zwarte splash-afbeelding alleen nog voor splash gebruiken */
.welcome-logo:not(.splash img){display:none;}

/* v3.4 — sitebrede footer als gewone onderkant + scherp wit logo */
body{
  min-height:100dvh;
  display:block;
  background:var(--bg);
}
#app{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  min-height:calc(100dvh - 78px);
  height:auto !important;
  overflow:visible !important;
  display:block !important;
  background:var(--bg);
}
.container{
  overflow:visible !important;
  flex:none !important;
  padding-bottom:32px;
}
.legal-footer{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  z-index:1;
  margin-top:28px !important;
  width:100% !important;
  background:#0B1220 !important;
}
.card-logo img{
  width:86px;
  height:86px;
  object-fit:contain;
  border-radius:0;
  filter:drop-shadow(0 10px 18px rgba(15,23,42,.07));
}
.legal-page .card-logo img,
.legal-card .card-logo img{
  width:70px;
  height:70px;
}
/* Op witte kaarten gebruiken we nu een scherpe witte logo-variant, geen zwarte splash-crop. */
.card-logo span{color:#0f172a;}

/* v3.6 — paginalogo rustiger: alleen het symbool, zonder tekst en zonder zichtbaar vlak */
.card-logo{
  gap:0 !important;
  margin:2px auto 22px !important;
}
.card-logo img{
  width:86px !important;
  height:86px !important;
  object-fit:contain !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:drop-shadow(0 10px 18px rgba(15,23,42,.06)) !important;
}
.card-logo span{
  display:none !important;
}
.legal-page .card-logo img,
.legal-card .card-logo img{
  width:76px !important;
  height:76px !important;
}

/* v3.7 — publieke professionele landingspagina */
.landing-container{
  padding-bottom:38px;
}
.landing-hero{
  padding:18px 16px 20px;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  padding:7px 12px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(34,197,94,.12),rgba(59,130,246,.10));
  color:#2563eb;
  font-size:12px;
  font-weight:900;
  letter-spacing:.01em;
  margin:-6px 0 0;
}
.hero-lead{max-width:420px;}
.landing-section{
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:18px 16px;
  margin-top:14px;
  box-shadow:0 8px 24px rgba(17,24,39,.055);
}
.landing-section h2{
  margin:5px 0 12px;
  font-size:25px;
  line-height:1.12;
  letter-spacing:-.02em;
  color:#0B1220;
  text-align:center;
}
.section-kicker{
  text-align:center;
  color:#2563eb;
  font-size:12px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.section-lead{
  margin:0 auto 15px;
  max-width:420px;
  color:#475569;
  line-height:1.45;
  text-align:center;
}
.step-grid,.audience-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.step-card,.audience-card{
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  padding:14px;
  background:linear-gradient(180deg,#fff,#F8FAFC);
  text-align:left;
}
.step-number{
  display:inline-flex;
  width:30px;
  height:30px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#0B5ED7;
  color:#fff;
  font-weight:950;
  margin-bottom:8px;
}
.step-card h3,.audience-card h3{
  margin:0 0 6px;
  font-size:17px;
  color:#0B1220;
}
.step-card p,.audience-card p{
  margin:0;
  color:#64748b;
  line-height:1.42;
  font-size:14px;
}
.audience-card:nth-child(3){
  background:linear-gradient(135deg,rgba(236,253,245,.86),rgba(239,246,255,.88));
  border-color:rgba(34,197,94,.18);
}
.landing-price-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:12px 0 14px;
}
.landing-price-card{
  min-height:112px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:20px;
  padding:14px 10px;
  text-align:center;
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.landing-price-card.featured{
  background:linear-gradient(135deg,rgba(236,253,245,.9),rgba(239,246,255,.9));
  border-color:rgba(34,197,94,.38);
}
.landing-price-card span{
  font-weight:850;
  color:#0f172a;
  font-size:14px;
}
.landing-price-card strong{
  font-size:26px;
  line-height:1;
  color:#0B1220;
  letter-spacing:-.02em;
}
.landing-price-card small{
  color:#64748b;
  font-size:12px;
  line-height:1.25;
}
.landing-subscribe{margin-top:2px;}
.landing-muted{
  margin:12px auto 0;
  max-width:430px;
  text-align:center;
  color:#64748b;
  font-size:13px;
  line-height:1.4;
}
.trust-section{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  background:#0B1220;
  color:#fff;
  border-color:#0B1220;
}
.trust-item{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:12px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}
.trust-item b{font-size:15px;}
.trust-item span{font-size:13px;line-height:1.35;color:rgba(255,255,255,.72);}
@media(min-width:560px){
  .step-grid,.audience-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:390px){
  .landing-section h2{font-size:22px}
  .landing-price-grid{grid-template-columns:1fr}
}

/* v3.8 profile/account fields */
.profile-card .card-logo span{display:none!important;}
.profile-form{width:100%;display:flex;flex-direction:column;gap:12px;margin-top:16px;text-align:left;}
.profile-form label{display:flex;flex-direction:column;gap:7px;font-weight:850;color:#0f172a;font-size:14px;}
.profile-form label span{font-weight:700;color:#94a3b8;font-size:12px;}
.profile-form input{width:100%;border:1px solid rgba(15,23,42,.12);border-radius:16px;padding:14px 14px;font-size:16px;background:#fff;color:#0f172a;outline:none;box-shadow:0 8px 22px rgba(15,23,42,.04);}
.profile-form input:focus{border-color:rgba(37,99,235,.45);box-shadow:0 0 0 4px rgba(37,99,235,.08);}
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-message{min-height:22px;font-size:14px;font-weight:750;color:#64748b;text-align:center;margin-top:2px;}
.form-message.ok{color:#15803d;}
.form-message.error{color:#b91c1c;}
@media(max-width:520px){.profile-grid{grid-template-columns:1fr}.profile-card .card-logo img{width:92px;height:92px}}

/* v4.0 profiel, factuur en organisatie */
.form-section-title{font-size:16px;line-height:1.2;margin:10px 0 0;color:#0B1220;letter-spacing:-.01em;}
.form-section-title span{font-size:12px;color:#94a3b8;font-weight:800;}
.profile-form select{width:100%;border:1px solid rgba(15,23,42,.12);border-radius:16px;padding:14px 14px;font-size:16px;background:#fff;color:#0f172a;outline:none;box-shadow:0 8px 22px rgba(15,23,42,.04);}
.profile-form select:focus{border-color:rgba(37,99,235,.45);box-shadow:0 0 0 4px rgba(37,99,235,.08);}
.store-checks{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:2px 0 4px;}
.store-checks label{display:flex!important;flex-direction:row!important;align-items:center;gap:8px;padding:10px 11px;border:1px solid rgba(15,23,42,.08);border-radius:14px;background:#fff;font-size:13px!important;font-weight:800!important;color:#334155!important;}
.store-checks input{width:auto!important;box-shadow:none!important;padding:0!important;}
.municipal-note{padding:13px 14px;border-radius:16px;background:linear-gradient(135deg,rgba(236,253,245,.9),rgba(239,246,255,.9));border:1px solid rgba(34,197,94,.2);color:#334155;font-size:14px;line-height:1.4;}
.mini-list{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.mini-list-row{display:flex;align-items:center;justify-content:space-between;gap:10px;text-decoration:none;color:#0f172a;border:1px solid rgba(15,23,42,.08);border-radius:14px;background:#fff;padding:10px 12px;font-weight:900;}
.mini-list-row small{display:block;font-weight:700;color:#64748b;margin-top:2px;font-size:12px;}
.mini-list-row b{color:#0B5ED7;font-size:12px;}
@media(max-width:420px){.store-checks{grid-template-columns:1fr}}

/* v4.4 productdatabase voorbereiding */
.catalog-card .hero-copy{color:#54606d;line-height:1.5;margin-top:-4px}
.catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}
.catalog-stat{background:linear-gradient(180deg,#f7fbff,#f3f8f6);border:1px solid rgba(20,80,70,.10);border-radius:16px;padding:12px;text-align:left}
.catalog-stat span{display:block;font-size:12px;color:#667;margin-bottom:5px}
.catalog-stat b{font-size:22px;color:#123}
.store-pill-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.store-pill{display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border-radius:999px;background:#f5f8f7;border:1px solid rgba(0,0,0,.08);font-weight:700;font-size:13px;color:#253}
.store-pill img{width:20px;height:20px;border-radius:5px;object-fit:contain;background:#fff}
.nefr-textarea{width:100%;border:1px solid rgba(0,0,0,.14);border-radius:14px;padding:12px;font-size:15px;line-height:1.4;resize:vertical;background:#fff;box-sizing:border-box;outline:none}
.nefr-textarea:focus{border-color:rgba(28,145,118,.55);box-shadow:0 0 0 3px rgba(28,145,118,.10)}
@media (max-width:420px){.catalog-grid{grid-template-columns:1fr 1fr}.catalog-stat b{font-size:19px}}

/* v4.5 AH importer */
.catalog-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.catalog-actions .primary{margin-top:0}.linklike{appearance:none;border:0;background:transparent;color:#1463d8;font-weight:800;font-size:15px;margin:12px auto 0;display:block;text-decoration:underline}.import-results{display:grid;gap:10px;margin-top:14px}.import-row{border:1px solid rgba(15,23,42,.10);border-radius:16px;padding:12px 14px;background:#fff;text-align:left;box-shadow:0 8px 22px rgba(15,23,42,.05)}.import-row b{display:block;font-size:15px;color:#0b1326}.import-row span{display:block;margin-top:4px;color:#64748b;font-size:13px;line-height:1.35}.import-row.ok{border-color:rgba(34,197,94,.25);background:linear-gradient(135deg,#f0fdf4,#fff)}.import-row.bad{border-color:rgba(239,68,68,.25);background:linear-gradient(135deg,#fff1f2,#fff)}.small-grid{grid-template-columns:1fr 1fr}@media(max-width:480px){.catalog-actions{grid-template-columns:1fr}.small-grid{grid-template-columns:1fr 1fr}}

/* v4.7 handmatig productbeheer */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field select{width:100%;border:1px solid rgba(15,23,42,.14);border-radius:14px;padding:13px 14px;font:inherit;background:#fff;color:#0b1326}
.recent-products{display:grid;gap:10px;margin-top:14px}
.recent-product-row{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid rgba(15,23,42,.10);border-radius:16px;padding:12px;text-align:left;box-shadow:0 8px 22px rgba(15,23,42,.05)}
.recent-product-row img{width:46px;height:46px;object-fit:contain;border-radius:12px;background:#f8fafc;border:1px solid rgba(15,23,42,.06)}
.product-img-placeholder{width:46px;height:46px;border-radius:12px;background:#f8fafc;border:1px solid rgba(15,23,42,.06);display:flex;align-items:center;justify-content:center;font-size:22px}
.recent-product-row b{display:block;color:#0b1326;font-size:15px;line-height:1.2}
.recent-product-row span,.recent-product-row small{display:block;color:#64748b;font-size:12px;margin-top:3px;line-height:1.25}
@media(max-width:520px){.form-grid{grid-template-columns:1fr}}

/* v4.8 opschonen en CSV-voorbereiding */
.csv-example{margin-top:12px;padding:13px 14px;border-radius:16px;background:#fff;border:1px dashed rgba(15,23,42,.18);color:#334155;font-size:13px;line-height:1.55;text-align:left}
.cleanup-box .primary.secondary{background:#0b1326;color:#fff}
.recent-product-row .product-meta-strong{color:#0b1326;font-weight:800}

/* v5.0 productdatabase importgeschiedenis */
.import-history{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.import-history-row{background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:18px;padding:14px 16px;text-align:left;box-shadow:0 8px 20px rgba(15,23,42,.04)}
.import-history-row b{display:block;color:#0f172a;font-size:15px;margin-bottom:4px}
.import-history-row span{display:block;color:#64748b;font-weight:700;font-size:13px;line-height:1.35}

/* NEFR V100.2 — subtiele rolregel op account/legal/supportpagina's */
.nefr-role-line{
  max-width:520px;
  margin:4px auto 0;
  padding:0 8px;
  color:rgba(255,255,255,.76);
  font-size:12px;
  line-height:1.18;
  font-weight:650;
  text-align:center;
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.nefr-role-line[data-role="admin"]{color:rgba(255,255,255,.88);}
.nefr-role-line[data-role="support"]{color:rgba(255,255,255,.84);}
.brand .nefr-role-line{width:100%;}
@media(max-width:420px){.nefr-role-line{font-size:11.5px;margin-top:3px;padding:0 4px;}}

/* NEFR V100.2 — compact supportdashboard in bestaande kaartstijl */
.support-dashboard-card{text-align:left;align-items:stretch;gap:14px;}
.support-dashboard-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap;}
.support-dashboard-head h1{margin:0;font-size:28px;line-height:1.08;color:#0f172a;}
.support-filter-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;width:100%;}
.support-filter-row select{flex:1;min-width:180px;border:1px solid rgba(15,23,42,.12);border-radius:14px;padding:12px 12px;font-weight:800;background:#fff;color:#0f172a;}
.support-status{border-radius:16px;padding:12px 14px;background:linear-gradient(135deg,rgba(236,253,245,.78),rgba(239,246,255,.78));color:#0f5132;font-weight:850;}
.support-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.support-stats div{border:1px solid rgba(15,23,42,.08);border-radius:16px;background:#fff;padding:10px;text-align:center;}
.support-stats b{display:block;font-size:22px;color:#0f172a;}
.support-stats span{font-size:11px;color:#64748b;font-weight:850;text-transform:uppercase;letter-spacing:.08em;}
.support-list{display:flex;flex-direction:column;gap:14px;}
.support-item{border:1px solid rgba(15,23,42,.09);border-radius:20px;background:#fff;padding:14px;box-shadow:0 12px 26px rgba(15,23,42,.06);}
.support-item-head{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;}
.support-item h2{font-size:20px;line-height:1.15;margin:0 0 4px;color:#0f172a;}
.support-pill{border-radius:999px;background:#eef2ff;color:#1d4ed8;padding:6px 10px;font-size:12px;font-weight:900;white-space:nowrap;}
.support-msg{color:#334155;font-size:15px;line-height:1.38;margin:8px 0;white-space:pre-wrap;}
.support-meta{color:#94a3b8;font-size:12px;font-weight:800;margin:8px 0;}
.support-thread{display:flex;flex-direction:column;gap:8px;margin:10px 0;}
.support-bubble{border:1px solid rgba(15,23,42,.08);border-radius:16px;padding:10px 12px;background:#f8fafc;}
.support-bubble-admin{margin-left:34px;background:linear-gradient(135deg,rgba(220,252,231,.82),rgba(236,253,245,.92));border-color:rgba(34,197,94,.20);}
.support-bubble-user{margin-right:24px;}
.support-bubble b{display:block;font-size:13px;color:#0f172a;margin-bottom:3px;}
.support-bubble p{margin:0;color:#334155;font-size:14px;line-height:1.35;}
.support-bubble small{display:block;color:#94a3b8;font-size:11px;margin-top:5px;}
.support-item textarea{width:100%;border:1px solid rgba(15,23,42,.12);border-radius:16px;padding:12px;font:inherit;font-size:15px;min-height:90px;resize:vertical;}
.support-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;}
.support-actions .primary{margin:0;}
.support-actions .done{background:#fff;color:#2563eb;border:1px solid rgba(37,99,235,.20);}
@media(max-width:420px){.support-stats{grid-template-columns:repeat(2,1fr)}.support-actions{grid-template-columns:1fr}.support-dashboard-head h1{font-size:25px;}}

/* NEFR V100.3 — subtiele meldingenteller in bestaande rolregel */

.nefr-role-line .nefr-role-text{vertical-align:middle;}
.nefr-notification-badge{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 6px;
  margin:0 0 0 2px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(110,231,183,.16);
  color:#d1fae5;
  font:inherit;
  font-size:10.5px;
  line-height:1;
  font-weight:900;
  cursor:pointer;
  vertical-align:middle;
}
.nefr-notification-badge:active{transform:translateY(1px);}

/* NEFR V100.4 — admin backend kaarten, in bestaande NEFR-stijl */
.admin-backend-card{text-align:center;}
.admin-dashboard-body{width:100%;}
.admin-stats{width:100%;}
.admin-action-grid{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch;margin-top:12px;}
.admin-action-card{text-align:left;margin:0;display:flex;flex-direction:column;gap:8px;}
.admin-action-card .primary{margin-top:auto;}
.admin-action-card .primary[disabled]{opacity:.58;cursor:not-allowed;background:#111827;}
.admin-action-card-wide{grid-column:1/-1;}
.admin-system-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:2px;}
.admin-system-actions .primary{margin:0;}
@media(max-width:620px){.admin-action-grid{grid-template-columns:1fr}.admin-system-actions{grid-template-columns:1fr}.admin-action-card-wide{grid-column:auto}}

/* NEFR V100.9 — support/admin dossier en uniforme nested admin-header */
.support-user-line{
  color:#0f172a;
  font-size:13px;
  font-weight:900;
  line-height:1.25;
  margin:2px 0 2px;
}
.support-actions.support-actions-three{
  grid-template-columns:1fr 1fr;
}
.support-actions .ghost{
  background:#fff;
  color:#2563eb;
  border:1px solid rgba(37,99,235,.20);
  box-shadow:none;
}
.support-actions-three .viewUserDossier{
  grid-column:1 / -1;
}
.support-dossier-modal{
  position:fixed;
  inset:0;
  z-index:160;
  background:rgba(2,6,23,.54);
  display:none;
  align-items:flex-end;
  justify-content:center;
  padding:18px 12px calc(18px + env(safe-area-inset-bottom));
}
.support-dossier-modal[aria-hidden="false"]{display:flex;}
.support-dossier-card{
  width:min(720px,100%);
  max-height:min(86vh,920px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:26px;
  box-shadow:0 28px 90px rgba(2,6,23,.34);
  padding:18px;
  color:#0f172a;
}
.support-dossier-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  border-bottom:1px solid rgba(15,23,42,.08);
  padding-bottom:12px;
  margin-bottom:12px;
}
.support-dossier-head h2{margin:0;font-size:24px;line-height:1.08;color:#0f172a;}
.support-dossier-head p{margin:5px 0 0;color:#64748b;font-weight:750;line-height:1.25;}
.support-dossier-close{
  border:1px solid rgba(37,99,235,.18);
  background:#fff;
  color:#2563eb;
  border-radius:16px;
  padding:10px 14px;
  font-weight:900;
}
.support-dossier-body{display:flex;flex-direction:column;gap:12px;}
.dossier-section{
  border:1px solid rgba(15,23,42,.08);
  background:linear-gradient(135deg,rgba(248,250,252,.96),rgba(255,255,255,.98));
  border-radius:18px;
  padding:14px;
}
.dossier-section h3{margin:0 0 10px;font-size:17px;color:#0f172a;}
.dossier-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.dossier-grid div{
  border:1px solid rgba(15,23,42,.07);
  border-radius:14px;
  background:#fff;
  padding:10px 11px;
  min-width:0;
}
.dossier-grid .dossier-wide{grid-column:1/-1;}
.dossier-grid span{display:block;color:#64748b;font-size:12px;font-weight:850;margin-bottom:3px;}
.dossier-grid b{display:block;color:#0f172a;font-size:14px;line-height:1.3;word-break:break-word;white-space:pre-wrap;}
.dossier-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px;}
.dossier-list li{color:#0f172a;}
.dossier-list b{display:block;font-size:14px;line-height:1.25;}
.dossier-list span{display:block;color:#64748b;font-size:13px;line-height:1.3;margin-top:2px;}
.support-dossier-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
.support-dossier-actions .primary{margin:0;}
@media(max-width:520px){
  .support-dossier-modal{align-items:stretch;padding:10px 8px calc(10px + env(safe-area-inset-bottom));}
  .support-dossier-card{max-height:92vh;border-radius:22px;padding:14px;}
  .dossier-grid{grid-template-columns:1fr;}
  .support-dossier-actions{grid-template-columns:1fr;}
}


/* NEFR V100.9 — Help & meldingen als gewone NEFR-pagina */
.feedback-status{border-radius:18px;background:#f3f6fb;color:#64748b;font-weight:800;padding:12px 14px;}
.feedback-status.ok{background:#e9fbf1;color:#047857;}
.feedback-status.err{background:#fff1f2;color:#b91c1c;}
.feedback-status.busy{background:#eff6ff;color:#1d4ed8;}
.help-page-card{text-align:left;align-items:stretch;gap:14px;}
.help-page-card h1{margin:0 0 4px;font-size:30px;line-height:1.08;color:#0f172a;}
.help-page-card .lead{margin:0 0 12px;color:#475569;line-height:1.45;font-weight:650;}
.help-body{display:flex;flex-direction:column;gap:16px;}
.help-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:linear-gradient(135deg,rgba(236,253,245,.78),rgba(239,246,255,.78));border:1px solid rgba(16,185,129,.16);border-radius:18px;padding:6px;}
.help-tab{border:0;border-radius:14px;background:transparent;color:#2563eb;font-weight:900;padding:11px 8px;font-size:14px;}
.help-tab.is-active{background:#fff;color:#081527;box-shadow:0 8px 24px rgba(15,23,42,.08);}
.help-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;margin-left:5px;border-radius:999px;background:#dff9ec;color:#047857;font-size:11px;font-weight:950;vertical-align:middle;}
.help-section{display:none;}
.help-section.is-active{display:block;}
.help-section h2{margin:8px 0 12px;font-size:24px;line-height:1.12;color:#0f172a;}
.help-card{border:1px solid #e6edf5;background:#fff;border-radius:18px;padding:14px 15px;margin:10px 0;box-shadow:0 8px 22px rgba(15,23,42,.04);}
.help-card b{display:block;color:#081527;font-size:16px;margin-bottom:5px;}
.help-card p,.help-section p{margin:0;color:#64748b;font-weight:750;line-height:1.42;}
.help-section details{border:1px solid #e6edf5;background:#fff;border-radius:16px;padding:12px 14px;margin:9px 0;}
.help-section summary{cursor:pointer;font-weight:900;color:#081527;}
.help-section details p{margin-top:8px;white-space:normal;}
.my-feedback-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 12px;}
.my-feedback-list{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
.my-feedback-empty{border:1px solid #e6edf5;background:#f8fbff;color:#64748b;border-radius:18px;padding:14px;font-weight:750;line-height:1.4;}
.my-feedback-card{border:1px solid #e6edf5;background:#fff;border-radius:18px;padding:14px 15px;box-shadow:0 8px 22px rgba(15,23,42,.045);}
.my-feedback-card.status-opgelost{background:linear-gradient(135deg,#f0fdf4,#ffffff);border-color:#bbf7d0;}
.my-feedback-card.status-blokkade{background:linear-gradient(135deg,#fff7ed,#ffffff);border-color:#fed7aa;}
.my-feedback-top{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:8px;}
.my-feedback-top b{font-size:16px;color:#081527;text-transform:capitalize;}
.my-feedback-top span{border-radius:999px;background:#eef2f7;color:#334155;padding:6px 10px;font-weight:900;font-size:12px;white-space:nowrap;}
.my-feedback-card.status-opgelost .my-feedback-top span{background:#dcfce7;color:#047857;}
.my-feedback-thread{display:flex;flex-direction:column;gap:10px;margin:10px 0 12px;}
.my-feedback-bubble{border:1px solid rgba(148,163,184,.22);border-radius:18px;padding:12px 14px;box-shadow:0 10px 24px rgba(15,23,42,.04);}
.my-feedback-bubble b{display:block;margin-bottom:5px;}
.my-feedback-bubble p{margin:0;white-space:pre-wrap;line-height:1.35;color:#334155;}
.my-feedback-bubble small{display:block;margin-top:6px;color:#94a3b8;font-weight:750;font-size:12px;}
.my-feedback-bubble-user{background:#fff;align-self:flex-start;max-width:96%;}
.my-feedback-bubble-admin{background:linear-gradient(135deg,#eefcf5,#dcfce7);border-color:rgba(16,185,129,.22);align-self:flex-end;max-width:96%;color:#064e3b;}
.my-feedback-meta{margin-top:10px;color:#94a3b8;font-size:12px;font-weight:850;}
.my-feedback-replybox{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
.myFeedbackReplyText,.help-form textarea,.help-form select{width:100%;box-sizing:border-box;border:1px solid rgba(148,163,184,.35);border-radius:16px;padding:12px 14px;font:inherit;background:#fff;}
.myFeedbackReplyText,.help-form textarea{resize:vertical;min-height:82px;}
.myFeedbackReplyText:focus,.help-form textarea:focus,.help-form select:focus{outline:none;border-color:rgba(16,185,129,.45);box-shadow:0 0 0 4px rgba(16,185,129,.12);}
.myFeedbackReplyBtn.mint-action,.help-form .mint-action{border-radius:18px;border:1px solid rgba(16,185,129,.25);background:linear-gradient(135deg,#ecfdf5,#a7f3d0);color:#047857;font-weight:950;padding:12px 14px;box-shadow:0 14px 30px rgba(16,185,129,.13);}
.help-form{display:grid;gap:12px;margin-top:12px;}
.help-form label{display:grid;gap:7px;font-weight:850;color:#0f172a;}
@media(max-width:520px){.help-tabs{grid-template-columns:1fr}.my-feedback-actions{grid-template-columns:1fr}.help-page-card h1{font-size:28px;}}

/* NEFR V100.9 — Importen-hub */
.admin-imports-card{text-align:center;}
.import-source-grid{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;align-items:stretch;}
.import-source-card{text-align:left;margin:0;display:flex;flex-direction:column;gap:8px;}
.import-source-card .primary{margin-top:auto;}
.import-source-card .primary[disabled]{opacity:.58;cursor:not-allowed;background:#111827;}
.import-source-card-active{border-color:rgba(34,197,94,.34);background:linear-gradient(135deg,rgba(236,253,245,.92),rgba(239,246,255,.78));}
.import-source-card-wide{grid-column:1/-1;}
.import-source-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:2px;}
.import-source-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:6px 10px;background:#eef2f7;color:#334155;font-size:12px;font-weight:950;white-space:nowrap;}
.import-source-badge.active{background:#dcfce7;color:#047857;}
.import-source-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:auto;}
@media(max-width:620px){.import-source-grid{grid-template-columns:1fr}.import-source-card-wide{grid-column:auto}.import-source-top{align-items:center}}

/* NEFR V100.10 — Gebruikers & rollen beheren */
.admin-users-card{text-align:left;align-items:stretch;gap:14px;}
.admin-users-card h1{margin:0 0 4px;font-size:30px;line-height:1.08;color:#0f172a;text-align:center;}
.admin-users-card .lead{text-align:center;margin:0 0 10px;color:#475569;line-height:1.45;font-weight:650;}
.admin-users-toolbar{display:grid;grid-template-columns:1.4fr .8fr auto;gap:10px;align-items:end;margin:12px 0;width:100%;}
.admin-users-toolbar label{display:grid;gap:6px;font-weight:900;color:#0f172a;font-size:13px;}
.admin-users-toolbar input,.admin-users-toolbar select{width:100%;box-sizing:border-box;border:1px solid rgba(148,163,184,.35);border-radius:16px;padding:12px 14px;font:inherit;background:#fff;color:#0f172a;}
.admin-users-toolbar input:focus,.admin-users-toolbar select:focus{outline:none;border-color:rgba(16,185,129,.45);box-shadow:0 0 0 4px rgba(16,185,129,.12);}
.admin-users-toolbar .primary{margin:0;white-space:nowrap;}
.admin-users-note{border:1px solid rgba(16,185,129,.16);background:linear-gradient(135deg,rgba(236,253,245,.74),rgba(239,246,255,.74));border-radius:18px;padding:12px 14px;color:#334155;font-weight:750;line-height:1.4;}
.admin-users-list{display:flex;flex-direction:column;gap:13px;margin-top:6px;}
.admin-user-card{border:1px solid rgba(15,23,42,.09);border-radius:20px;background:#fff;padding:14px;box-shadow:0 12px 26px rgba(15,23,42,.055);}
.admin-user-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px;}
.admin-user-head h2{margin:0 0 4px;font-size:20px;line-height:1.12;color:#0f172a;}
.admin-user-email{color:#64748b;font-size:13px;font-weight:800;word-break:break-word;}
.admin-users-rolepill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:7px 11px;font-size:12px;font-weight:950;white-space:nowrap;background:#eef2f7;color:#334155;}
.admin-users-role-admin{background:#111827;color:#fff;}
.admin-users-role-support{background:#dbeafe;color:#1d4ed8;}
.admin-users-role-user{background:#dcfce7;color:#047857;}
.admin-user-meta-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 12px;}
.admin-user-meta-grid div{border:1px solid rgba(15,23,42,.07);border-radius:14px;background:#f8fafc;padding:10px 11px;min-width:0;}
.admin-user-meta-grid span{display:block;color:#64748b;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;}
.admin-user-meta-grid b{display:block;color:#0f172a;font-size:14px;line-height:1.28;word-break:break-word;}
.admin-users-rolebuttons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px;}
.admin-users-rolebuttons button{border:1px solid rgba(37,99,235,.16);background:#fff;color:#2563eb;border-radius:16px;padding:11px 10px;font-weight:950;}
.admin-users-rolebuttons button.is-active{background:linear-gradient(135deg,#ecfdf5,#a7f3d0);color:#047857;border-color:rgba(16,185,129,.28);box-shadow:0 10px 24px rgba(16,185,129,.10);}
.admin-users-selfnote{border:1px solid rgba(245,158,11,.22);background:linear-gradient(135deg,#fff7ed,#fff);border-radius:16px;padding:11px 12px;color:#92400e;font-weight:850;line-height:1.35;}
@media(max-width:640px){.admin-users-toolbar{grid-template-columns:1fr}.admin-user-meta-grid{grid-template-columns:1fr 1fr}.admin-users-rolebuttons{grid-template-columns:1fr}.admin-user-head{align-items:flex-start}.admin-users-card h1{font-size:28px;}}
@media(max-width:380px){.admin-user-meta-grid{grid-template-columns:1fr}.admin-user-head{flex-direction:column}.admin-users-rolepill{align-self:flex-start}}

/* NEFR_10231 — professioneel rolbewust admin/systeembeheer-menu */
.home-menu.nefr-menu-pro{
  width:min(360px,calc(100vw - 28px));
  max-height:min(78vh,720px);
  overflow:auto;
  padding:12px;
  border-radius:22px;
  -webkit-overflow-scrolling:touch;
}
.nefr-menu-section{
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  padding:10px;
  margin:0 0 10px;
  background:#fff;
}
.nefr-menu-section:last-child{margin-bottom:0}
.nefr-menu-section-title{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:4px 6px 8px;
  margin-bottom:3px;
  border-bottom:1px solid rgba(15,23,42,.07);
}
.nefr-menu-section-title b{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:950;
}
.nefr-menu-section-title span{
  font-size:11px;
  color:#64748b;
  font-weight:750;
}
.home-menu button.nefr-menu-item{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  margin:4px 0;
  padding:11px 12px;
  border-radius:14px;
  font-size:15px;
  line-height:1.1;
}
.home-menu button.nefr-menu-item small{
  font-size:11px;
  font-weight:750;
  color:#64748b;
  line-height:1.25;
}
.nefr-menu-section-user{background:linear-gradient(135deg,#f0fdf4,#eff6ff);border-color:rgba(34,197,94,.18)}
.nefr-menu-section-user .nefr-menu-section-title b{color:#047857}
.nefr-menu-section-support{background:linear-gradient(135deg,#fff7ed,#fffbeb);border-color:rgba(245,158,11,.22)}
.nefr-menu-section-support .nefr-menu-section-title b{color:#b45309}
.nefr-menu-section-admin{background:linear-gradient(135deg,#eef2ff,#fdf2f8);border-color:rgba(79,70,229,.18)}
.nefr-menu-section-admin .nefr-menu-section-title b{color:#4338ca}
.nefr-menu-section-system{background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-color:rgba(15,23,42,.10)}
.nefr-menu-section-system .nefr-menu-section-title b{color:#334155}
.home-menu button.nefr-menu-item.tone-user:active,.home-menu button.nefr-menu-item.tone-user.menu-current{background:rgba(34,197,94,.12)}
.home-menu button.nefr-menu-item.tone-support:active,.home-menu button.nefr-menu-item.tone-support.menu-current{background:rgba(245,158,11,.14)}
.home-menu button.nefr-menu-item.tone-admin:active,.home-menu button.nefr-menu-item.tone-admin.menu-current{background:rgba(79,70,229,.12)}
.home-menu button.nefr-menu-item.tone-system:active,.home-menu button.nefr-menu-item.tone-system.menu-current{background:rgba(15,23,42,.08)}

/* NEFR_10231 — winkelbeheer */
.winkelbeheer-card{max-width:920px;margin-left:auto;margin-right:auto;align-items:stretch;text-align:left}
.winkelbeheer-card .card-logo{align-self:center;text-align:center}.winkelbeheer-card h1{text-align:center}.winkelbeheer-card .lead{text-align:center;max-width:700px;margin-left:auto;margin-right:auto}
.admin-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%;margin:14px 0 18px}
.admin-kpi{border:1px solid rgba(15,23,42,.10);border-radius:18px;padding:12px;background:linear-gradient(180deg,#fbfdff,#f8fafc)}
.admin-kpi span{display:block;color:#64748b;font-size:12px;font-weight:850;text-transform:uppercase;letter-spacing:.04em}.admin-kpi b{display:block;margin-top:4px;font-size:18px;color:#0f172a}
.winkelbeheer-section{border:1px solid rgba(15,23,42,.10);border-radius:24px;background:#fff;padding:16px;margin:16px 0;box-shadow:0 12px 28px rgba(15,23,42,.05)}
.winkelbeheer-section h2{margin:0 0 4px;font-size:22px}.winkelbeheer-section p{margin:0;color:#64748b;line-height:1.45}
.supermarket-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.supermarket-card{border:1px solid rgba(15,23,42,.10);border-radius:20px;padding:14px;background:linear-gradient(180deg,#fff,#fbfdff)}
.supermarket-card h3{margin:0 0 6px;font-size:20px}.supermarket-card p{font-size:13px;margin:6px 0 0;color:#64748b}
.supermarket-pill{display:inline-flex;align-items:center;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:950;margin-bottom:9px}
.supermarket-pill.active{background:#dcfce7;color:#166534}.supermarket-pill.blocked{background:#ffedd5;color:#9a3412}.supermarket-pill.prepared{background:#dbeafe;color:#1e3a8a}.supermarket-pill.historic{background:#f1f5f9;color:#475569}
.supermarket-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.supermarket-actions .primary{border-radius:12px;padding:10px;font-size:13px}.supermarket-actions .primary[disabled]{opacity:.55;background:#e5e7eb!important;color:#64748b!important}
.admin-flow-list{display:grid;gap:10px;margin-top:14px}.admin-flow-row{border:1px solid rgba(15,23,42,.10);border-radius:16px;padding:12px;background:#f8fafc}.admin-flow-row b{display:block}.admin-flow-row span{display:block;color:#64748b;margin-top:2px;font-size:13px}
@media(max-width:760px){.admin-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.supermarket-grid{grid-template-columns:1fr}.supermarket-actions{grid-template-columns:1fr}.winkelbeheer-card{padding-left:14px;padding-right:14px}}


/* NEFR_10232 — actieve menu-optie rechts met klein NEFR-logo in plaats van groene stip links */
.home-menu.nefr-menu-pro button.menu-current{padding-left:12px!important;padding-right:48px!important;box-shadow:inset 0 0 0 1px rgba(34,197,94,.18);position:relative;}
.home-menu.nefr-menu-pro button.menu-current::before{display:none!important;content:none!important;}
.home-menu button.nefr-menu-item .nefr-menu-text{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;}
.nefr-menu-current-logo{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:999px;background:rgba(255,255,255,.85);box-shadow:0 4px 12px rgba(15,23,42,.12);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.nefr-menu-current-logo img{width:23px;height:23px;object-fit:contain;animation:nefrMenuOnce .65s ease-out 1;}
@keyframes nefrMenuOnce{from{transform:rotate(-180deg) scale(.72);opacity:.45}to{transform:rotate(0deg) scale(1);opacity:1}}