:root{
  --ref-u-surface-dark: rgba(17,24,38,.66);
  --ref-u-surface-light: rgba(255,255,255,.90);
  --ref-u-line-dark: rgba(255,255,255,.10);
  --ref-u-line-light: rgba(15,23,42,.10);
  --ref-u-text-dark: #eaf0f7;
  --ref-u-text-light: #0f172a;
  --ref-u-muted-dark: rgba(234,240,247,.70);
  --ref-u-muted-light: rgba(15,23,42,.68);
  --ref-u-blue: #0a84ff;
  --ref-u-red: #ff3b30;
  --ref-u-shadow-dark: 0 18px 44px rgba(0,0,0,.24);
  --ref-u-shadow-light: 0 18px 44px rgba(15,23,42,.12);
  --ref-u-radius: 12px;
  --ref-u-radius-surface: 12px;
  --ref-u-radius-control: 12px;
  --ref-u-radius-tight: 12px;
}
html.theme-light,
html[data-theme="light"],
html[data-ref-theme="light"]{ color-scheme: light; }
html:not(.theme-light)[data-theme="dark"],
html[data-ref-theme="dark"]{ color-scheme: dark; }

body,
html.theme-light body,
html[data-theme="light"] body,
html[data-ref-theme="light"] body{
  color: var(--ref-text, var(--ref-u-text-dark));
}

html.theme-light body,
html[data-theme="light"] body,
html[data-ref-theme="light"] body{
  color: var(--ref-u-text-light);
}

.nav,
.topbar,
.mobileMenu,
#mobileMenu,
.card,
.chartCard,
.topCard,
.loginCard,
.refChatBox,
.modalCard,
.miniCard,
.chartWrap,
.tableWrap{
  border-radius: 12px;
}

.nav,
.mobileMenu,
#mobileMenu,
.card,
.chartCard,
.topCard,
.loginCard,
.modalCard,
.miniCard{
  border: 1px solid var(--ref-line, var(--ref-u-line-dark));
  box-shadow: var(--ref-shadow-lg, var(--ref-u-shadow-dark));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html.theme-light .nav,
html.theme-light .mobileMenu,
html.theme-light #mobileMenu,
html.theme-light .card,
html.theme-light .chartCard,
html.theme-light .topCard,
html.theme-light .loginCard,
html.theme-light .modalCard,
html.theme-light .miniCard,
html[data-theme="light"] .nav,
html[data-theme="light"] .mobileMenu,
html[data-theme="light"] #mobileMenu,
html[data-theme="light"] .card,
html[data-theme="light"] .chartCard,
html[data-theme="light"] .topCard,
html[data-theme="light"] .loginCard,
html[data-theme="light"] .modalCard,
html[data-theme="light"] .miniCard,
html[data-ref-theme="light"] .nav,
html[data-ref-theme="light"] .mobileMenu,
html[data-ref-theme="light"] #mobileMenu,
html[data-ref-theme="light"] .card,
html[data-ref-theme="light"] .chartCard,
html[data-ref-theme="light"] .topCard,
html[data-ref-theme="light"] .loginCard,
html[data-ref-theme="light"] .modalCard,
html[data-ref-theme="light"] .miniCard{
  border-color: var(--ref-u-line-light) !important;
  box-shadow: var(--ref-u-shadow-light) !important;
}

.pill,
.mobileBtn,
button.pill,
a.pill,
.hamburger,
.iconBtn,
#btnTheme,
#btnTheme_m,
#themeToggle,
#themeToggleM,
#themeToggle_m{
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .20);
}

.pill,
.mobileBtn,
.mobileMenu a,
.hamburger,
.iconBtn{
  transition: background .18s ease,border-color .18s ease,color .18s ease,transform .16s ease,box-shadow .18s ease;
}

.pill:hover,
.mobileBtn:hover,
.mobileMenu a:hover,
.hamburger:hover,
.iconBtn:hover{
  transform: translateY(-1px);
}

.navlinks a.is-active,
.nav a.is-active,
.mobileMenu a.is-active{
  border-color: rgba(10,132,255,.40) !important;
  background: rgba(10,132,255,.12) !important;
  box-shadow: inset 0 0 0 1px rgba(10,132,255,.08) !important;
}

.brand,
.brand:hover,
.brand:focus,
.brand.is-active,
.nav .brand.is-active,
.nav a.brand.is-active{
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.sectionTitle,
.card b,
.chartCard b,
.topCard b,
.v,
.v2,
th,
td,
label,
.brand span{
  color: inherit;
}

.sub,
.muted,
.k,
.sparkHint,
.footer,
.hint,
.small,
.miniCard .k2{
  color: var(--ref-u-muted-dark);
}

html.theme-light .sub,
html.theme-light .muted,
html.theme-light .k,
html.theme-light .sparkHint,
html.theme-light .footer,
html.theme-light .hint,
html.theme-light .small,
html.theme-light .miniCard .k2,
html[data-theme="light"] .sub,
html[data-theme="light"] .muted,
html[data-theme="light"] .k,
html[data-theme="light"] .sparkHint,
html[data-theme="light"] .footer,
html[data-theme="light"] .hint,
html[data-theme="light"] .small,
html[data-theme="light"] .miniCard .k2,
html[data-ref-theme="light"] .sub,
html[data-ref-theme="light"] .muted,
html[data-ref-theme="light"] .k,
html[data-ref-theme="light"] .sparkHint,
html[data-ref-theme="light"] .footer,
html[data-ref-theme="light"] .hint,
html[data-ref-theme="light"] .small,
html[data-ref-theme="light"] .miniCard .k2{
  color: var(--ref-u-muted-light) !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select,
.loginInput,
#email,
#password,
.filterBar select,
.filterBar input{
  border-radius: 12px;
  border: 1px solid var(--ref-line, var(--ref-u-line-dark)) !important;
  background: rgba(255,255,255,.04);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus,
.loginInput:focus,
#email:focus,
#password:focus,
.filterBar select:focus,
.filterBar input:focus{
  border-color: rgba(10,132,255,.45) !important;
  box-shadow: 0 0 0 3px rgba(10,132,255,.10) !important;
  outline: none !important;
}

html.theme-light input[type="text"],
html.theme-light input[type="email"],
html.theme-light input[type="password"],
html.theme-light input[type="search"],
html.theme-light textarea,
html.theme-light select,
html.theme-light .loginInput,
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .loginInput,
html[data-ref-theme="light"] input[type="text"],
html[data-ref-theme="light"] input[type="email"],
html[data-ref-theme="light"] input[type="password"],
html[data-ref-theme="light"] input[type="search"],
html[data-ref-theme="light"] textarea,
html[data-ref-theme="light"] select,
html[data-ref-theme="light"] .loginInput{
  background: rgba(255,255,255,.72) !important;
  border-color: var(--ref-u-line-light) !important;
  color: var(--ref-u-text-light) !important;
}

.ref-theme-toggle-btn,
#btnTheme.ref-theme-toggle-btn,
#btnTheme_m.ref-theme-toggle-btn,
#themeToggle.ref-theme-toggle-btn,
#themeToggleM.ref-theme-toggle-btn,
#themeToggle_m.ref-theme-toggle-btn{
  min-width: 46px !important;
  width: 46px !important;
  height: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative;
  border-radius: 12px;
  appearance: none;
  -webkit-appearance: none;
}

.ref-theme-toggle__icon,
#btnTheme .ref-theme-toggle__icon,
#btnTheme_m .ref-theme-toggle__icon,
#themeToggle .ref-theme-toggle__icon,
#themeToggleM .ref-theme-toggle__icon,
#themeToggle_m .ref-theme-toggle__icon{
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.10), rgba(255,255,255,.03) 72%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,255,255,.02) !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif !important;
}

html.theme-light .ref-theme-toggle__icon,
html[data-theme="light"] .ref-theme-toggle__icon,
html[data-ref-theme="light"] .ref-theme-toggle__icon{
  background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.98), rgba(255,255,255,.82) 72%) !important;
  border-color: rgba(15,23,42,.12) !important;
  color: #0f172a !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 1px 2px rgba(15,23,42,.06) !important;
}

.ref-theme-toggle__sr{
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* v4.8.3 stronger shared nav sync */
.nav{
  width: calc(100% - 25px) !important;
  max-width: 1045px !important;
  gap: 12px !important;
  padding: 8px 10px !important;
  align-items: center !important;
}
.navTop{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px !important;
  min-width:0 !important;
  flex:1 1 auto !important;
}
.brand{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  text-decoration:none !important;
  min-width:0 !important;
}
.logoRing{
  width:38px !important;
  height:38px !important;
  border-radius:12px;
  padding:2px !important;
  flex:0 0 auto !important;
}
.logoImg{
  width:34px !important;
  height:34px !important;
  border-radius:12px;
  object-fit:cover !important;
  display:block !important;
}
.brand span{
  font-weight:800 !important;
  letter-spacing:.2px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-width:360px !important;
}
.navlinks{
  display:flex !important;
  gap:6px !important;
  flex-wrap:nowrap !important;
  -webkit-overflow-scrolling:touch !important;
  justify-content:flex-end !important;
  width:auto !important;
  min-width:0 !important;
}
.hamburger,
#hamburgerBtn,
#menuBtn{
  border-radius: 12px;
  min-height: 42px !important;
  padding: 10px 12px !important;
}
@media (max-width:1200px){
  .nav{
    top:10px !important;
    padding:10px 12px 1px !important;
    gap:10px !important;
    flex-direction:column !important;
    align-items:stretch !important;
    max-width:1055px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
  .navTop{
    width:100% !important;
    justify-content:space-between !important;
  }
  .nav .navlinks{ display:none !important; }
  .nav .hamburger,
  .nav #hamburgerBtn,
  .nav #menuBtn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
  }
  .mobileMenu,
  #mobileMenu{
    width:100% !important;
    max-width:1055px !important;
  }
}


/* v4.8.3 exact mobile nav parity for main/stats/refweb */
.nav,
.navTop,
.brand,
.hamburger,
#hamburgerBtn,
#menuBtn{
  box-sizing:border-box !important;
}

.nav{
  min-height:58px !important;
}

.hamburger,
#hamburgerBtn,
#menuBtn{
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1 !important;
  min-width:84.5px !important;
  white-space:nowrap !important;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji" !important;
  letter-spacing:0 !important;
}

.nav .hamburger .icon,
.nav #hamburgerBtn .icon,
.nav #menuBtn .icon{
  font-size:14px !important;
  line-height:1 !important;
}

@media (max-width:1200px){
  .navTop{
    /*min-height:42px !important;*/
  }
  .nav .hamburger,
  .nav #hamburgerBtn,
  .nav #menuBtn{
    height:38px !important;
    min-height:38px !important;
    padding:8px 8px !important;
    font-size:12px !important;
    line-height:1 !important;
    border-radius:12px;
  }
}


/* v4.9.0 polish round: A buttons/cards/forms, B motion, C premium light theme, D portal+stats hierarchy */
:root{
  --ref-ui-btn-h: 38px;
  --ref-ui-pill-h: 38px;
  --ref-ui-gap: 12px;
  --ref-ui-focus: 0 0 0 3px rgba(10,132,255,.14);
}

.navlinks .pill,
.mobileBtn,
.hamburger,
button.pill,
a.pill,
.ref-btn,
.ref-pill{
  min-height: var(--ref-ui-pill-h);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-radius: 12px;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
}

.hamburger,
.mobileBtn,
button.pill,
a.pill,
.navlinks .pill{
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .22s ease, opacity .18s ease !important;
}
.hamburger:hover,
.mobileBtn:hover,
button.pill:hover,
a.pill:hover,
.navlinks .pill:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}
.hamburger:active,
.mobileBtn:active,
button.pill:active,
a.pill:active,
.navlinks .pill:active{
  transform: translateY(0) scale(.985);
}

.card,
.chartCard,
.topCard,
.loginCard,
.infoItem,
.tableWrap,
.chartWrap,
.modalCard,
.miniCard{
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.card:hover,
.chartCard:hover,
.topCard:hover,
.infoItem:hover,
.tableWrap:hover,
.chartWrap:hover,
.miniCard:hover{
  transform: translateY(-2px);
}

.field input,
.field select,
.field textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select{
  min-height: 48px;
  padding: 12px 14px !important;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.35;
}
.field input::placeholder,
input::placeholder,
textarea::placeholder{
  color: rgba(147,164,183,.78);
}
.field input:focus,
.field select:focus,
.field textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus{
  box-shadow: var(--ref-ui-focus) !important;
}
.notice,
.formNote,
.ref-empty,
.emptyState{
  border-radius: 12px;
}
.notice:empty{ display:none; }

.liveDot,
.ref-status-dot{
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.nav:hover .liveDot,
.pill:hover .liveDot{ transform: scale(1.08); }

.mobileMenu{
  transform-origin: top center;
}
@media (prefers-reduced-motion: no-preference){
  .mobileMenu{
    transition: max-height .28s ease, opacity .18s ease, transform .24s ease, margin .24s ease, border-color .24s ease !important;
  }
  .mobileMenu.open{
    transform: translateY(0);
  }
}

/* premium light mode */
html.theme-light .card,
html[data-theme="light"] .card,
html[data-ref-theme="light"] .card,
html.theme-light .chartCard,
html[data-theme="light"] .chartCard,
html[data-ref-theme="light"] .chartCard,
html.theme-light .topCard,
html[data-theme="light"] .topCard,
html[data-ref-theme="light"] .topCard,
html.theme-light .infoItem,
html[data-theme="light"] .infoItem,
html[data-ref-theme="light"] .infoItem,
html.theme-light .tableWrap,
html[data-theme="light"] .tableWrap,
html[data-ref-theme="light"] .tableWrap,
html.theme-light .chartWrap,
html[data-theme="light"] .chartWrap,
html[data-ref-theme="light"] .chartWrap{
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,250,254,.92)) !important;
  border-color: rgba(15,23,42,.10) !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.72) !important;
}
html.theme-light .nav,
html[data-theme="light"] .nav,
html[data-ref-theme="light"] .nav,
html.theme-light .mobileMenu,
html[data-theme="light"] .mobileMenu,
html[data-ref-theme="light"] .mobileMenu{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(249,251,255,.90)) !important;
  box-shadow: 0 12px 28px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.76) !important;
}
html.theme-light .k,
html[data-theme="light"] .k,
html[data-ref-theme="light"] .k,
html.theme-light .sub,
html[data-theme="light"] .sub,
html[data-ref-theme="light"] .sub,
html.theme-light .muted,
html[data-theme="light"] .muted,
html[data-ref-theme="light"] .muted{
  color: rgba(57,72,92,.78) !important;
}
html.theme-light .sectionTitle,
html[data-theme="light"] .sectionTitle,
html[data-ref-theme="light"] .sectionTitle,
html.theme-light .sectionTitleSm,
html[data-theme="light"] .sectionTitleSm,
html[data-ref-theme="light"] .sectionTitleSm,
html.theme-light h1,
html[data-theme="light"] h1,
html[data-ref-theme="light"] h1,
html.theme-light h2,
html[data-theme="light"] h2,
html[data-ref-theme="light"] h2,
html.theme-light h3,
html[data-theme="light"] h3,
html[data-ref-theme="light"] h3{
  color: #0f172a !important;
}
html.theme-light .pill:not(.primary),
html[data-theme="light"] .pill:not(.primary),
html[data-ref-theme="light"] .pill:not(.primary),
html.theme-light .hamburger,
html[data-theme="light"] .hamburger,
html[data-ref-theme="light"] .hamburger,
html.theme-light .mobileBtn,
html[data-theme="light"] .mobileBtn,
html[data-ref-theme="light"] .mobileBtn{
  background: rgba(255,255,255,.74) !important;
  border-color: rgba(15,23,42,.12) !important;
}
html.theme-light .pill:not(.primary):hover,
html[data-theme="light"] .pill:not(.primary):hover,
html[data-ref-theme="light"] .pill:not(.primary):hover,
html.theme-light .hamburger:hover,
html[data-theme="light"] .hamburger:hover,
html[data-ref-theme="light"] .hamburger:hover,
html.theme-light .mobileBtn:hover,
html[data-theme="light"] .mobileBtn:hover,
html[data-ref-theme="light"] .mobileBtn:hover{
  background: rgba(10,132,255,.10) !important;
  border-color: rgba(10,132,255,.24) !important;
}

/* stats + portal hierarchy */
.topCard,
.miniCard{
  padding: 18px !important;
}
.topCard .k,
.miniCard .k,
.chartCard .k,
.tableWrap .k,
.infoItem .k{
  text-transform: none;
  letter-spacing: .02em;
  font-size: 12px !important;
}
.topCard b,
.miniCard b,
.statValue,
.bigStat,
.metric{
  letter-spacing: -.02em;
}
.chartCard,
.chartWrap{
  padding: 18px !important;
}
.chartCard canvas,
.chartWrap canvas{
  border-radius: 12px;
}
.tableWrap table,
.card table{
  border-collapse: separate;
  border-spacing: 0;
}
.tableWrap thead th,
.card thead th{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tableWrap tbody tr,
.card tbody tr{
  transition: background .18s ease;
}
.tableWrap tbody tr:hover,
.card tbody tr:hover{
  background: rgba(10,132,255,.05);
}
.infoGrid .infoItem,
#infoCard .infoItem{
  min-height: 100%;
}
#loginCard .actions,
.loginCard .actions{
  gap: 12px !important;
}

/* utility loading polish for future use */
.ref-skeleton{
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.06);
}
.ref-skeleton::after{
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  animation: refSkeleton 1.3s ease infinite;
}
@keyframes refSkeleton{ to{ transform: translateX(100%); } }
html.theme-light .ref-skeleton,
html[data-theme="light"] .ref-skeleton,
html[data-ref-theme="light"] .ref-skeleton{
  background: rgba(15,23,42,.05);
}
html.theme-light .ref-skeleton::after,
html[data-theme="light"] .ref-skeleton::after,
html[data-ref-theme="light"] .ref-skeleton::after{
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
}

/* v4.9.4 nav compact pills */
.navlinks .pill,
.nav .pill,
.pill{
  font-size:10.5px !important;
  padding:7px 9px !important;
  gap:5px !important;
}

.navlinks .pill.icon,
.nav .pill.icon,
.pill.icon,
#themeToggle{
  min-width:38px !important;
  padding:7px 9px !important;
}

.nav .brand span{
  max-width:240px;
}

@media (max-width:1200px){
  .nav .brand span{ max-width:220px; }
}


/* ===== Eén centrale stijl-laag voor main site, ref-stats en refweb =====
   Grootste styling-aanpassingen liefst hier doen, zodat je niet 3 losse CSS-bestanden hoeft te wijzigen. */
.nav,
.topbar,
.mobileMenu,
#mobileMenu,
.card,
.chartCard,
.topCard,
.loginCard,
.modalCard,
.miniCard,
.chartWrap,
.tableWrap,
.loginWrap,
.profileCard,
.sectionCard,
.notice,
.emptyState,
.loginCardWrap{
  border-radius: 12px;
}

.pill,
button.pill,
a.pill,
.mobileBtn,
.mobileMenu a,
.hamburger,
.iconBtn,
.tab,
.chip,
.badge,
.notice.badge,
#btnTheme,
#btnTheme_m,
#themeToggle,
#themeToggleM,
#themeToggle_m,
.ref-theme-toggle-btn,
.ref-status,
.filterPill,
.filterBar .pill,
.tabs .tab,
.chips .chip{
  border-radius: 12px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select,
.loginInput,
.input,
.filterBar select,
.filterBar input{
  border-radius: 12px;
}

.logoWrap,
.logoChip,
.avatarWrap,
.profileAvatar{
  border-radius: 12px;
}

.logoImg,
.profileAvatar img,
.avatarWrap img{
  border-radius: 12px;
}

.navSep,
.dot,
.liveDot,
.statusDot,
.ref-theme-toggle__icon{
  border-radius: 12px;
}


body.refweb-shell .pill,
body.refstats-shell .pill,
body.refweb-shell .tab,
body.refstats-shell .tab,
body.refweb-shell .chip,
body.refstats-shell .chip,
body.refweb-shell .badge,
body.refstats-shell .badge,
body.refweb-shell .mobileMenu a,
body.refstats-shell .mobileMenu a,
body.refweb-shell .hamburger,
body.refstats-shell .hamburger,
body.refweb-shell .mobileBtn,
body.refstats-shell .mobileBtn{
    /* min-height: 42px !important; */
    /* padding: 8px 14px !important; */
    border-radius: 12px;
    border: 1px solid var(--line) !important;
    color: var(--text) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08) !important;
    /* font-size: 14px !important; */
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

body.refweb-shell .navlinks .pill.icon,
body.refstats-shell .navlinks .pill.icon,
body.refweb-shell .pill.icon,
body.refstats-shell .pill.icon{
  min-width: 42px !important;
  padding-inline: 10px !important;
  justify-content: center !important;
}

body.refweb-shell .pill.primary,
body.refstats-shell .pill.primary,
body.refweb-shell .tab.active,
body.refstats-shell .tab.active,
body.refweb-shell .mobileMenu a.is-active,
body.refstats-shell .mobileMenu a.is-active,
body.refweb-shell .nav a.is-active,
body.refstats-shell .nav a.is-active,
body.refweb-shell .navlinks .pill.is-active,
body.refstats-shell .navlinks .pill.is-active{
  border-color: rgba(10,132,255,.40) !important;
  background: rgba(10,132,255,.12) !important;
  box-shadow: 0 10px 24px rgba(10,132,255,.10) !important;
}

body.refweb-shell .pill:hover,
body.refstats-shell .pill:hover,
body.refweb-shell .tab:hover,
body.refstats-shell .tab:hover,
body.refweb-shell .chip:hover,
body.refstats-shell .chip:hover,
body.refweb-shell .badge:hover,
body.refstats-shell .badge:hover,
body.refweb-shell .mobileMenu a:hover,
body.refstats-shell .mobileMenu a:hover,
body.refweb-shell .hamburger:hover,
body.refstats-shell .hamburger:hover{
  border-color: rgba(10,132,255,.35) !important;
  background: rgba(10,132,255,.08) !important;
}

body.refweb-shell .navTop,
body.refstats-shell .navTop{
  align-items: center !important;
  gap: 12px !important;
}

body.refweb-shell .navlinks,
body.refstats-shell .navlinks{
  align-items: center !important;
  gap: 10px !important;
}

body.refweb-shell .brand,
body.refstats-shell .brand{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-width:0 !important;
}

body.refweb-shell .brand span,
body.refstats-shell .brand span{
  font-size: clamp(16px, 1.45vw, 18px) !important;
  font-weight: 900 !important;
}

body.refweb-shell .input,
body.refstats-shell .input,
body.refweb-shell .field input,
body.refstats-shell .field input,
body.refweb-shell input[type="text"],
body.refstats-shell input[type="text"],
body.refweb-shell input[type="search"],
body.refstats-shell input[type="search"],
body.refweb-shell input[type="email"],
body.refstats-shell input[type="email"],
body.refweb-shell input[type="password"],
body.refstats-shell input[type="password"],
body.refstats-shell select,
body.refweb-shell select,
body.refstats-shell textarea,
body.refweb-shell textarea{
  border-radius: 12px;
  border: 1px solid var(--line) !important;
  background: var(--ref-elev) !important;
  color: var(--text) !important;
}

body.refweb-shell .sectionTitle,
body.refstats-shell .sectionTitle,
body.refweb-shell .sectionTitleTem,
body.refstats-shell .sectionTitleTem{
  color: var(--text) !important;
}

@media (max-width: 1200px){
  body.refweb-shell .hamburger,
  body.refstats-shell .hamburger{
    min-width: 84px !important;
  }
}


/* =========================================================
   REF Policy nav size sync only
   - alleen maten/breedtes/gaps van nav + hamburger
   - geen theme-toggle of pill styling
   ========================================================= */
    /* ========= NAV ========= */
    .nav{
      display:flex;align-items:center;justify-content:space-between;gap:12px;
      padding:10px 12px; 
      border:1px solid var(--line); 
      border-radius:12px;
      background:rgba(17,24,38,.65);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: var(--shadow);
      position:fixed;
      top:12px;
      z-index:9999;
      min-width:0;
      flex-direction:row;
      left:50%;
      transform:translateX(-50%);
	  gap:14px;
      width: calc(100% - 25px);
      max-width: 1045px;
    }
    .navTop{
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap:12px;
      min-width:0;
      flex:1 1 auto;
    }
.navlinks{
  gap:10px;
}
.hamburger,
#hamburgerBtn,
#menuBtn{
  border-radius:12px;
  padding:10px 12px;
  min-height:auto;
  min-width:auto;
  gap:10px;
}
@media (max-width: 1200px){
  .nav{
    top:10px;
    gap:10px;
    padding:10px 12px;
    border-radius:12px;
    flex-direction:column;
    align-items:stretch;
    max-width:1055px;
  }
  .navTop{
    width:100%;
    justify-content:space-between;
  }
  .nav .navlinks{
    display:none !important;
  }

}


/* ===== Centrale nav only laag ===== */
.navSep{
  width:1px;
  height:28px;
  background:rgba(255,255,255,.10);
  border-radius:12px;
  margin:0 6px;
}
html.theme-light .navSep,
html[data-theme="light"] .navSep,
html[data-ref-theme="light"] .navSep{
  background: rgba(15,23,42,.12);
}
@media (max-width:1200px){
  .navSep{ display:none; }

  .mobileMenu,
  #mobileMenu{
    display:block !important;
    max-height:0;
    padding-top:0 !important;
    padding-bottom:0 !important;
    margin-top:0 !important;
    border-width:0 !important;
    overflow:hidden;
    opacity:0;
    transform:translateY(0);
    pointer-events:none;
    will-change:max-height, opacity, transform;
    transition:max-height .28s ease, opacity .18s ease, transform .28s ease;
    max-width:1055px;
  }
  .mobileMenu.open,
  #mobileMenu.open{
    max-height:820px;
    opacity:1;
    pointer-events:auto;
    padding-top:12px !important;
    padding-bottom:12px !important;
    margin-top:10px !important;
    border-width:1px !important;
    transform:translateY(0);
  }
}
@media (prefers-reduced-motion: reduce){
  .mobileMenu,
  #mobileMenu{
    transition:none !important;
    transform:none !important;
  }
}