:root{
  --bg:#0b1020; --panel:#0f172a; --border:#243047;
  --text:#e5e7eb; --muted:#9ca3af; --link:#c7d2fe;
  --shadow: 0 18px 40px rgba(0,0,0,.35);
  --radius: 14px; --pad: 16px; --gap: 16px;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
.header{ position:sticky; top:0; background:rgba(15,23,42,.92);
  border-bottom:1px solid var(--border); backdrop-filter: blur(8px); }
.header__inner{ display:flex; align-items:center; gap:18px;
  padding:12px 16px; max-width:1200px; margin:0 auto; }
.brand{ font-weight:700; letter-spacing:.2px; }
.nav{ display:flex; gap:14px; }
.nav__link{ color:var(--link); text-decoration:none; padding:8px 10px;
  border-radius:10px; border:1px solid transparent; }
.nav__link:hover{ border-color:var(--border); background:rgba(255,255,255,.03); }
.spacer{ flex:1; }
.page{ max-width:1200px; margin:0 auto; padding:18px 16px 28px; }
.layout{ display:grid; grid-template-columns: 360px 1fr; gap: var(--gap); }
@media (max-width: 980px){ .layout{ grid-template-columns:1fr; } }
.card{ background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding: var(--pad); box-shadow: var(--shadow); }
.card__title{ font-weight:700; margin-bottom: 12px; }
.list{ display:flex; flex-direction:column; gap:10px; }
.list__item{ display:block; padding:12px 12px; border-radius:12px;
  border:1px solid var(--border); text-decoration:none; color:var(--text);
  background: rgba(255,255,255,.02); }
.list__title{ font-weight:600; }
.list__meta{ color:var(--muted); font-size:13px; margin-top:4px; }
.kv{ display:flex; flex-direction:column; gap:10px; }
.kv__row{ display:grid; grid-template-columns: 120px 1fr; gap:12px; }
.kv__k{ color:var(--muted); }
.divider{ height:1px; background:var(--border); margin: 16px 0; }
.h1{ margin:0 0 10px; }
.muted{ margin:0 0 16px; color:var(--muted); }
.form{ display:grid; gap:12px; margin-top:14px; }
.label{ display:grid; gap:6px; color:var(--muted); font-size:14px; }
.input{ width:100%; padding:10px 10px; border-radius:10px;
  border:1px solid var(--border); background: rgba(255,255,255,.03);
  color: var(--text); outline:none; }
.input:focus{ border-color: #4f46e5; }
.btn{ display:inline-block; padding:10px 12px; border-radius:12px;
  border:1px solid var(--border); background: rgba(255,255,255,.06);
  color: var(--text); cursor:pointer; text-decoration:none; }
.btn:hover{ background: rgba(255,255,255,.09); }
.alert{ margin:12px 0; padding:10px 12px; border-radius:12px;
  border:1px solid #7f1d1d; background: rgba(127,29,29,.25); }
/* --- Header enhancements --- */

.brand__logo {
  height: 70px;
  width: auto;
  display: block;
}
.userbox {
  margin-right: 18px;
  text-align: right;
  line-height: 1.2;
}

.userbox__name {
  font-weight: 600;
  font-size: 14px;
}

.userbox__email {
  font-size: 12px;
  color: #9CA3AF;
}
/* FORCE logo size, regardless of earlier CSS */
.header .brand__logo,
.header img[src*="utb_logo"] {
  height: 70px !important;
  width: auto !important;
  max-height: 70px !important;
  display: block !important;
}

/* also keep the header from growing because of the logo */
.header .brand,
.header .brand__link {
  display: flex;
  align-items: center;
  height: 70px;
}
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  margin-right: 8px;
  border: 1px solid rgba(255,255,255,0.12);
}

.badge-neutral { background: rgba(255,255,255,0.08); }

.badge-expired { background: rgba(255, 60, 60, 0.22); }  /* rood */
.badge-danger  { background: rgba(180, 70, 255, 0.28); } /* gevaarlijk paars */
.badge-warning { background: rgba(255, 165, 0, 0.22); }  /* oranje */
.badge-safe    { background: rgba(60, 200, 120, 0.20); } /* groen */

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  margin-right: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
}

.badge-neutral { background: rgba(255,255,255,0.08); }

.badge-expired { background: rgba(255, 60, 60, 0.22); }  /* rood */
.badge-danger  { background: rgba(180, 70, 255, 0.28); } /* gevaarlijk paars */
.badge-warning { background: rgba(255, 165, 0, 0.22); }  /* oranje */
.badge-safe    { background: rgba(60, 200, 120, 0.20); } /* groen */

.list__item--active {
  border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.05);
}