:root {
  --zx-lijf:    #07060c;
  --zx-paneel:  #0e0c16;
  --zx-kaart:   #14111f;
  --zx-knop:    #1e1a2c;
  --zx-knop-op: #28233a;
  --zx-rand:    rgba(168, 150, 255, .10);
  --zx-rand-op: rgba(168, 150, 255, .24);
  --zx-inkt:    #f4f2ff;
  --zx-gedempt: #aaa5c6;
  --zx-zwak:    #6e6a8a;
  --zx-accent:  #7c6cff;
  --blauw:      #4b8dff;
  --verloop:    linear-gradient(135deg, #a06bff 0%, #6c78ff 50%, #3e9bff 100%);
  --verloop-zacht: linear-gradient(135deg, rgba(160,107,255,.16), rgba(62,155,255,.10));
  --diep: 0 1px 0 rgba(255,255,255,.05) inset, 0 18px 40px -18px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.35);
}

html, body {
  background: var(--zx-lijf);
  overflow: hidden;
  user-select: text;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(140, 92, 255, .20), transparent 62%),
    radial-gradient(800px 480px at 105% 4%, rgba(62, 140, 255, .14), transparent 60%),
    radial-gradient(700px 500px at 60% 120%, rgba(110, 80, 255, .10), transparent 60%),
    var(--zx-lijf);
}
a { color: inherit; text-decoration: none; }
::selection { background: rgba(124, 108, 255, .4); }

.groot { min-height: 44px; padding: 0 18px; justify-content: center; }
.vol { width: 100%; }

.zx-knop, button.zx-knop, a.zx-knop { min-height: 38px; border-radius: 10px; }
.zx-knop.zx-hoofd {
  background: var(--verloop); border: none; color: #fff; font-weight: 600;
  box-shadow: 0 8px 22px -8px rgba(124, 108, 255, .65), 0 1px 0 rgba(255,255,255,.25) inset;
}
.zx-knop.zx-hoofd:hover { background: var(--verloop); filter: brightness(1.1); }
.zx-knop.zx-hoofd svg { color: #fff; }
.zx-veld { background: rgba(255,255,255,.04); border: 1px solid var(--zx-rand); border-radius: 10px; min-height: 42px; }
.zx-veld:focus { border-color: rgba(124,108,255,.65); background: rgba(124,108,255,.06); box-shadow: 0 0 0 3px rgba(124,108,255,.14); }
select.zx-veld option, select.zx-veld optgroup { background: #161322; }

.zx-kaart {
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), var(--zx-kaart);
  border: 1px solid var(--zx-rand); border-radius: 14px; box-shadow: var(--diep); padding: 16px 18px;
}
.zx-titel { color: var(--zx-gedempt); letter-spacing: 1.4px; }
.zx-merkje.zx-is-accent { color: #b9afff; border-color: rgba(124,108,255,.35); background: rgba(124,108,255,.12); }
.zx-stip.zx-aan { background: #5ee0a0; box-shadow: 0 0 0 3px rgba(94,224,160,.15); animation: puls 2.4s ease-in-out infinite; }
.zx-stip.slaapt { background: #9b8cff; box-shadow: 0 0 0 3px rgba(155,140,255,.15); }
@keyframes puls { 50% { box-shadow: 0 0 0 6px rgba(94,224,160,0); } }

/* inloggen */

#inlog { position: fixed; inset: 0; display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden; }
#inlog.zx-verborgen { display: none; }
.inlogkunst { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 44px 52px; border-right: 1px solid var(--zx-rand); }
.inlogkunst .bol { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: drijf 18s ease-in-out infinite alternate; }
.inlogkunst .b1 { width: 520px; height: 520px; left: -120px; top: -80px; background: #7d4dff; }
.inlogkunst .b2 { width: 440px; height: 440px; right: -140px; top: 30%; background: #2f7dff; animation-delay: -6s; }
.inlogkunst .b3 { width: 380px; height: 380px; left: 20%; bottom: -160px; background: #b04dff; opacity: .35; animation-delay: -11s; }
@keyframes drijf { to { transform: translate(60px, 40px) scale(1.12); } }
.inlogkunst .raster {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 40% 40%, #000 20%, transparent 75%);
}
.inlogkunst > * { position: relative; }
.groot-merk { font-size: 54px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; }
.groot-merk span { background: var(--verloop); -webkit-background-clip: text; background-clip: text; color: transparent; }
.inlogkunst .onder { color: var(--zx-gedempt); font-size: 15px; margin-top: 14px; max-width: 380px; line-height: 1.6; }
.inlogkant { display: grid; place-items: center; padding: 24px; }
.inlogvak { width: 100%; max-width: 380px; }
.inlogvak h2 { font-size: 24px; font-weight: 700; letter-spacing: -.4px; }
.inlogvak .sub { color: var(--zx-gedempt); margin: 6px 0 26px; font-size: 13.5px; }
.inlogfout { color: var(--zx-gevaar); font-size: 12.5px; min-height: 18px; margin-bottom: 8px; }
.inlogvak .zx-veld { min-height: 48px; font-size: 14px; }
.inlogvak .zx-knop { min-height: 48px; font-size: 14px; }

/* app */

#app { display: flex; height: 100vh; }
#app .zx-rail { width: 252px; background: rgba(10, 8, 18, .62); backdrop-filter: blur(18px); border-right: 1px solid var(--zx-rand); }
.railmerk { height: 64px; display: flex; align-items: center; padding: 0 20px; flex: none; }
.railmerk .zx-merk { font-size: 17px; gap: 0; }
.railmerk .zx-merk::before { margin-right: 10px; }
.railmerk .zx-merk span { background: var(--verloop); -webkit-background-clip: text; background-clip: text; color: transparent; }
.railonder { border-top: 1px solid var(--zx-rand); padding: 10px; flex: none; }
.zx-raillijst .zx-rij, .railonder .zx-rij { min-height: 42px; border-radius: 10px; position: relative; color: var(--zx-gedempt); }
.zx-raillijst .zx-rij .zx-naam { color: var(--zx-inkt); }
.zx-rij.zx-klikbaar:hover { background: rgba(124,108,255,.07); color: var(--zx-inkt); }
.zx-rij.zx-aan { background: var(--verloop-zacht); border-color: rgba(124,108,255,.28); }
.zx-rij.zx-aan::before { content: ""; position: absolute; left: -10px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--verloop); }
.railonder .zx-rij.zx-aan { color: var(--zx-inkt); }

.hoofd { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hoofd > .zx-kop { min-height: 76px; padding: 0 28px; border-bottom: 1px solid var(--zx-rand); gap: 14px; }
.hoofd > .zx-kop h1 { font-size: 21px; font-weight: 700; letter-spacing: -.4px; }
.hoofd > .zx-blad { padding: 24px 28px 40px; }
.kopknoppen { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.kopknoppen .zx-knop { min-height: 40px; }
.kopsub { color: var(--zx-zwak); font-size: 12.5px; }

.tabs { display: flex; gap: 4px; padding: 10px 28px; border-bottom: 1px solid var(--zx-rand); flex: none; overflow-x: auto; }
.tabs a { padding: 0 15px; min-height: 38px; display: flex; align-items: center; color: var(--zx-gedempt); font-size: 13px; border-radius: 10px; white-space: nowrap; border: 1px solid transparent; }
.tabs a:hover { color: var(--zx-inkt); background: rgba(255,255,255,.04); }
.tabs a.aan { color: var(--zx-inkt); background: var(--verloop-zacht); border-color: rgba(124,108,255,.3); }

.samen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.cijfers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.cijfer {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), var(--zx-kaart);
  border: 1px solid var(--zx-rand); border-radius: 14px; padding: 15px 17px; box-shadow: var(--diep); position: relative; overflow: hidden;
}
.cijfer .zx-titel { margin-bottom: 8px; }
.cijfer b { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.cijfer small { color: var(--zx-zwak); font-size: 12px; margin-left: 4px; }
.cijfer svg.lijn { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46px; opacity: .9; }
.meter { height: 5px; border-radius: 99px; background: rgba(255,255,255,.06); margin-top: 11px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--verloop); border-radius: 99px; transition: width .5s ease; }
.meter i.let { background: linear-gradient(90deg, #e2b14f, #f0c66c); }
.meter i.gevaar { background: linear-gradient(90deg, #e56a6a, #ff8a7a); }

.serverrooster { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.serverkaart {
  position: relative; cursor: pointer; border-radius: 16px; padding: 18px 18px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)), var(--zx-kaart);
  border: 1px solid var(--zx-rand); box-shadow: var(--diep); transition: transform .15s ease, border-color .15s ease;
}
.serverkaart:hover { transform: translateY(-2px); border-color: var(--zx-rand-op); }
.serverkaart.aan { border-color: rgba(124,108,255,.28); }
.serverkaart.aan::after { content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 2px; border-radius: 2px; background: var(--verloop); }
.serverkaart .boven { display: flex; align-items: center; gap: 10px; }
.serverkaart .naam { font-size: 16px; font-weight: 650; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.serverkaart .sub { color: var(--zx-zwak); font-size: 12.5px; margin: 4px 0 14px; }
.serverkaart .balken { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.serverkaart .balk-l { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--zx-gedempt); font-variant-numeric: tabular-nums; }
.serverkaart .meter { margin-top: 6px; }
.serverkaart .adres { margin-top: 14px; display: inline-flex; }

.held { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.held .spel { font-size: 12px; color: var(--zx-zwak); }

.console { display: flex; flex-direction: column; height: calc(100vh - 76px - 59px - 64px - 150px); min-height: 300px; background: rgba(4, 3, 9, .85); border: 1px solid var(--zx-rand); border-radius: 14px; overflow: hidden; box-shadow: var(--diep); }
.console pre { flex: 1; overflow-y: auto; padding: 14px 16px; font: 12.5px/1.55 ui-monospace, "Cascadia Mono", Consolas, monospace; color: #d6d3e8; white-space: pre-wrap; word-break: break-word; }
.console form { display: flex; border-top: 1px solid var(--zx-rand); background: rgba(255,255,255,.02); }
.console form::before { content: "›"; color: var(--zx-accent); font: 600 16px ui-monospace, Consolas, monospace; padding: 0 0 0 16px; display: flex; align-items: center; }
.console input { flex: 1; background: transparent; border: none; outline: none; color: var(--zx-inkt); font: 13px ui-monospace, Consolas, monospace; padding: 0 12px; min-height: 46px; }
.console input::placeholder { color: var(--zx-zwak); }

.tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabel th { text-align: left; font-size: 9.5px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--zx-zwak); font-weight: 600; padding: 0 10px 9px; }
.tabel td { padding: 0 10px; height: 46px; border-top: 1px solid var(--zx-rand); }
.tabel tr.klik { cursor: pointer; }
.tabel tr.klik:hover td { background: rgba(124,108,255,.05); }
.tabel td.getal { font-variant-numeric: tabular-nums; color: var(--zx-gedempt); white-space: nowrap; }
.tabel td.rechts, .tabel th.rechts { text-align: right; }
.tabel .zx-knop { min-height: 32px; }

.padbalk { display: flex; align-items: center; gap: 4px; margin-bottom: 14px; font-size: 13px; flex-wrap: wrap; }
.padbalk a { color: var(--zx-gedempt); padding: 5px 8px; border-radius: 8px; }
.padbalk a:hover { background: var(--zx-knop); color: var(--zx-inkt); }

.bewerker { width: 100%; height: calc(100vh - 280px); min-height: 300px; font: 12.5px/1.55 ui-monospace, Consolas, monospace; background: rgba(4,3,9,.85); color: #e2dff2; border: 1px solid var(--zx-rand); border-radius: 14px; padding: 14px 16px; resize: none; outline: none; tab-size: 4; }

.vak { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.vak > * { flex: 1; min-width: 150px; }
.rechten { display: flex; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 14px; font-size: 13px; }
.rechten label { display: flex; align-items: center; gap: 8px; cursor: pointer; min-height: 34px; }
.rechten input { accent-color: var(--zx-accent); width: 16px; height: 16px; }

select.zx-veld { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--zx-zwak) 50%), linear-gradient(135deg, var(--zx-zwak) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
code, .mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.adres { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; color: var(--zx-gedempt); cursor: pointer; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid var(--zx-rand); }
.adres:hover { color: var(--zx-inkt); border-color: var(--zx-rand-op); }

.gegevens { display: grid; grid-template-columns: 140px 1fr auto; gap: 0; font-size: 13px; }
.gegevens > * { padding: 10px 0; border-top: 1px solid var(--zx-rand); display: flex; align-items: center; }
.gegevens > :nth-child(-n+3) { border-top: none; }
.gegevens .k { color: var(--zx-zwak); }
.gegevens .w { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; word-break: break-all; }
.verborgen-ww { filter: blur(5px); transition: filter .15s; cursor: pointer; }
.verborgen-ww:hover { filter: none; }

.qr { background: #fff; padding: 10px; border-radius: 12px; width: 190px; height: 190px; image-rendering: pixelated; }

#venster { position: fixed; inset: 0; background: rgba(4,3,10,.6); backdrop-filter: blur(6px); z-index: 50; }
#venster .zx-paneel { height: auto; width: 460px; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), var(--zx-paneel); border-color: var(--zx-rand-op); }
#venster .zx-blad { padding: 18px; }
#venster .knoppenrij { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
#venster .knoppenrij .zx-knop { min-height: 42px; }
.zx-melding { background: #15121f; border-color: var(--zx-rand-op); border-radius: 12px; }

.sleep { border: 1.5px dashed var(--zx-accent) !important; }

@media (max-width: 900px) {
  #inlog { grid-template-columns: 1fr; }
  .inlogkunst { display: none; }
  .samen, .cijfers { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  #app { flex-direction: column; height: auto; min-height: 100vh; }
  html, body { overflow: auto; }
  #app .zx-rail { width: 100%; border-right: none; border-bottom: 1px solid var(--zx-rand); }
  .zx-raillijst { max-height: 220px; }
  .hoofd > .zx-kop, .hoofd > .zx-blad, .tabs { padding-left: 16px; padding-right: 16px; }
  .console { height: 60vh; }
  .gegevens { grid-template-columns: 110px 1fr auto; }
}

.inlogkunst .zx-merk { gap: 0; font-size: 18px; }
.inlogkunst .zx-merk::before { margin-right: 10px; }

.zx-merk::before { width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Cdefs%3E%3ClinearGradient id=%22z%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23b47dff%22/%3E%3Cstop offset=%22.55%22 stop-color=%22%236f78ff%22/%3E%3Cstop offset=%221%22 stop-color=%22%233ea0ff%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill=%22%233b2a8f%22 opacity=%22.55%22 d=%22M19 12h40l-2.2 9.6L31 49h23l-4 10H11l2-9.4L39 22H15z%22/%3E%3Cpath fill=%22url%28%23z%29%22 d=%22M16 8h40l-2.2 9.6L28 45h23l-4 10H8l2-9.4L36 18H12z%22/%3E%3C/svg%3E") no-repeat center / contain; }
.inlogkunst .zx-merk::before { width: 26px; height: 26px; }