:root{
  --vz-bg:#f3ede4;
  --vz-paper:#fffdf9;
  --vz-paper-2:#fbf6ee;
  --vz-ink:#18212c;
  --vz-muted:#67707d;
  --vz-line:#e7dac6;
  --vz-gold:#b07a2b;
  --vz-gold-2:#d2a35e;
  --vz-dark:#111827;
  --vz-dark-2:#243247;
  --vz-red:#b73a2c;
}

body{
  background:
    radial-gradient(circle at top right,#f7ead7 0,#efe8dd 34%,#edf1f6 100%) !important;
  color:var(--vz-ink) !important;
}

aside{
  background:linear-gradient(180deg,#0c1421 0%,#111827 52%,#243247 100%) !important;
  border-right:1px solid rgba(255,255,255,.08);
}

.brand1{
  display:none !important;
}

.brand2{
  display:none !important;
}

.vz-wordmark{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}

.vz-mark{
  width:48px;
  height:48px;
  border-radius:16px;
  background:
    radial-gradient(circle at top left,#e5c28b 0,#b07a2b 45%,#8a5b1b 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:800;
  font-size:18px;
  letter-spacing:.04em;
  box-shadow:0 10px 24px rgba(176,122,43,.28);
}

.vz-name{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.vz-name-top{
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#e2c08c;
  font-weight:800;
}

.vz-name-main{
  font-size:26px;
  color:#fffaf2;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1;
}

.vz-name-sub{
  font-size:12px;
  color:#cfd7e3;
}

.userbox{
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

nav button{
  font-weight:700 !important;
  border:1px solid transparent !important;
}

nav button.active,
nav button:hover{
  background:#fffaf2 !important;
  color:#111827 !important;
  border-color:#ead9b8 !important;
  box-shadow:0 12px 24px rgba(15,23,42,.16);
}

.logout{
  background:linear-gradient(180deg,#d24d3a,#ae3022) !important;
  box-shadow:0 10px 20px rgba(183,58,44,.18);
}

main{
  background:transparent !important;
}

.panel,
.invoice-box{
  background:rgba(255,253,249,.96) !important;
  border:1px solid var(--vz-line) !important;
  box-shadow:0 18px 38px rgba(17,24,39,.08) !important;
}

.title,
.sectiontitle,
h1,h2,h3{
  color:#17202b !important;
  letter-spacing:-.03em;
}

.subtitle,
.small,
.muted{
  color:var(--vz-muted) !important;
}

input,select,textarea{
  background:#fffdf8 !important;
  border-color:#d8c8ab !important;
}

input:focus,select:focus,textarea:focus{
  outline:none !important;
  border-color:var(--vz-gold) !important;
  box-shadow:0 0 0 3px rgba(176,122,43,.16) !important;
}

.btn,
.linkbtn{
  background:linear-gradient(180deg,#1f2937,#111827) !important;
  color:#fff !important;
  box-shadow:0 12px 24px rgba(17,24,39,.18);
}

.btn.blue{
  background:linear-gradient(180deg,#c88f3b,#9b6820) !important;
}

.btn.green{
  background:linear-gradient(180deg,#b07a2b,#8b5a1b) !important;
}

.btn.red{
  background:linear-gradient(180deg,#d24d3a,#ae3022) !important;
}

.note{
  background:#fbf6ee !important;
  border-color:#eadcc6 !important;
  color:#5c6674 !important;
}

.success{
  background:#eef8f0 !important;
  border-color:#b6d9c0 !important;
  color:#20663a !important;
}

.alert{
  background:#fff4e5 !important;
  border-color:#efcc92 !important;
  color:#8c5e1d !important;
}

.table th{
  background:#faf4ea !important;
  color:#7a6240 !important;
  border-bottom:1px solid #eadcc6 !important;
}

.table td{
  border-bottom:1px solid #f3e8d8 !important;
}

.table a,
a{
  color:#99661f !important;
}

.pill.ok{
  background:#e7f3ea !important;
  color:#20663a !important;
}
.pill.info{
  background:#ede5d9 !important;
  color:#775d3d !important;
}
.pill.warn{
  background:#fff0d7 !important;
  color:#946522 !important;
}

.chartbar{
  background:#eadcc6 !important;
}
.chartbar > div{
  background:linear-gradient(90deg,#b07a2b,#d3a257) !important;
}

.hero{
  background:
    radial-gradient(circle at top right,#d3a257 0,#8d5d21 18%,#243247 52%,#0f172a 100%) !important;
  position:relative;
  overflow:hidden;
}

.hero::after{
  content:"";
  position:absolute;
  right:-40px;
  top:-40px;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle,#f0d09b 0, rgba(240,208,155,.18) 45%, rgba(240,208,155,0) 70%);
}

.hero .vz-login-brand{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:22px;
}

.hero .vz-login-brand .vz-mark{
  width:58px;
  height:58px;
  border-radius:18px;
}

.hero .vz-login-brand .vz-name-main{
  font-size:30px;
}

.hero h1{
  max-width:11ch;
  font-size:44px !important;
  margin-top:10px !important;
}

.hero p{
  max-width:54ch;
  color:#f5e8d6 !important;
}

.cred{
  background:rgba(255,250,242,.08) !important;
  border:1px solid rgba(231,199,143,.18);
}

.vz-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
  padding:14px 18px;
  background:linear-gradient(90deg,rgba(255,253,249,.96),rgba(250,244,234,.96));
  border:1px solid var(--vz-line);
  border-radius:22px;
  box-shadow:0 14px 30px rgba(17,24,39,.06);
}

.vz-topbar-left{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.vz-eyebrow{
  font-size:11px;
  font-weight:800;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#9a6a25;
}

.vz-brandline{
  font-size:24px;
  font-weight:800;
  letter-spacing:-.03em;
  color:#18212c;
}

.vz-tagline{
  font-size:13px;
  color:#6b7280;
}

.vz-badge{
  padding:10px 14px;
  border-radius:999px;
  background:#fffaf2;
  border:1px solid #e9d9bc;
  color:#8a5b1b;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

body.hub-van-zelst{
  background:
    radial-gradient(circle at top right,#f7ead7 0,#ece6dc 36%,#eef2f7 100%) !important;
}

.hub-vz-hero{
  max-width:1200px;
  margin:0 auto 12px;
  padding:28px 24px;
  border-radius:30px;
  background:
    radial-gradient(circle at top right,#d3a257 0,#8d5d21 18%,#243247 50%,#111827 100%);
  text-align:left;
  color:#fff;
  box-shadow:0 22px 40px rgba(17,24,39,.22);
}

.hub-vz-hero .eyebrow{
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#f2d4a1;
  font-weight:800;
}

.hub-vz-hero h1{
  margin:10px 0 8px !important;
  font-size:40px;
  color:#fff !important;
}

.hub-vz-hero p{
  margin:0;
  max-width:700px;
  color:#f5e8d6;
  line-height:1.5;
}

body.hub-van-zelst .card{
  background:rgba(255,253,249,.95) !important;
  color:#17202b !important;
  border:1px solid #eadcc6;
  box-shadow:0 18px 36px rgba(17,24,39,.08);
}
body.hub-van-zelst .card:hover{
  background:#fffaf2 !important;
}
body.hub-van-zelst .sub{
  color:#6b7280 !important;
}
body.hub-van-zelst h1{
  display:none;
}