:root{
  --bg1:#f6fffb;
  --bg2:#f3f7ff;
  --ink:#0b1b12;
  --muted:#466257;
  --green:#00c389;
  --green2:#2ee59d;
  --blue:#3b82f6;
  --card: rgba(255,255,255,.78);
  --border: rgba(7, 34, 23, .10);
  --shadow: 0 18px 45px rgba(8, 30, 20, .10);
  --radius:22px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--ink);
  line-height:1.55;
  background:
    radial-gradient(900px 450px at 15% 5%, rgba(0,195,137,.22), transparent 55%),
    radial-gradient(900px 450px at 85% 15%, rgba(59,130,246,.16), transparent 50%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}
a{color:inherit; text-decoration:none}
.container{max-width:1240px; margin:0 auto; padding:0 20px}
body.admin .container{max-width:1480px}
header{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(10px);
  background: rgba(246,255,251,.75);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; gap:16px;
  flex-wrap:wrap;
}
.nav > nav{flex:1 1 auto}
.brand{flex:0 0 auto}
.cta{flex:0 0 auto}
.brand{display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:-.2px}
.mark{
  width:40px; height:40px; border-radius:16px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(0,195,137,.22), rgba(59,130,246,.14));
  border:1px solid var(--border);
  box-shadow: 0 10px 22px rgba(0,195,137,.10);
}
.brand small{
  display:inline-flex; margin-top:2px;
  font-weight:650; color:var(--muted); font-size:12px;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.55);
}
nav ul{
  display:flex; gap:8px; list-style:none; padding:0; margin:0;
  flex-wrap:wrap; justify-content:flex-end;
}
nav a{
  display:inline-flex;
  padding:9px 12px;
  border-radius:999px;
  color:var(--muted);
  font-weight:650;
  font-size:14px;
  transition: .15s ease;
}
nav a:hover{background: rgba(0,195,137,.10); color: var(--ink);}
.cta{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.btn{
  border:1px solid var(--border);
  background: rgba(255,255,255,.70);
  padding:10px 14px;
  border-radius:999px;
  font-weight:850;
  cursor:pointer;
  box-shadow: 0 8px 18px rgba(8,30,20,.06);
  transition: transform .15s ease, background .15s ease;
  display:inline-flex; gap:8px; align-items:center;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.85)}
.btn.primary{
  border-color: rgba(0,195,137,.35);
  background: linear-gradient(135deg, rgba(0,195,137,.22), rgba(59,130,246,.12));
}
.card{
  border:1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
h1,h2,h3{letter-spacing:-.4px}
h1{margin:0; font-size:30px}
h2{margin:0; font-size:20px}
.muted{color:var(--muted); font-weight:650}
.grid{display:grid; grid-template-columns: 300px 1fr; gap:18px; padding:24px 0 56px}
@media (max-width: 920px){ .grid{grid-template-columns:1fr} nav ul{display:none} }

/* Admin: iets breder en minder "krap" */
body.admin .container{max-width: 1280px}
.sidebar{padding:18px}
.sidebar a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:14px;
  color:var(--muted); font-weight:800;
}
.sidebar a:hover{background: rgba(0,195,137,.10); color:var(--ink)}
.sidebar a.active{background: rgba(0,195,137,.16); color:var(--ink); border:1px solid rgba(0,195,137,.25)}
.main{padding:20px}
.table{width:100%; border-collapse:separate; border-spacing:0; font-size:14px}
.table th,.table td{padding:12px 10px; border-bottom:1px solid var(--border); vertical-align:top}
.table th{color: rgba(70,98,87,.85); font-weight:900; font-size:12px; letter-spacing:.3px; text-transform:uppercase}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:12px}
label{font-size:13px; color:var(--muted); font-weight:900}
select,input[type="text"],input[type="email"],input[type="password"],textarea{
  width:100%;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.90);
  color:var(--ink);
  outline:none;
  font-weight:750;
}
textarea{min-height:110px; resize:vertical}
.notice{
  border:1px solid rgba(59,130,246,.25);
  background: rgba(59,130,246,.08);
  padding:12px 14px;
  border-radius:18px;
  font-weight:750;
}
.success{
  border:1px solid rgba(0,195,137,.28);
  background: rgba(0,195,137,.10);
  padding:12px 14px;
  border-radius:18px;
  font-weight:750;
}
.error{
  border:1px solid rgba(220,38,38,.25);
  background: rgba(220,38,38,.08);
  padding:12px 14px;
  border-radius:18px;
  font-weight:750;
}
.badge{
  display:inline-flex; padding:6px 10px; border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.70);
  font-weight:900; font-size:12px;
}
.badge.good{border-color: rgba(0,195,137,.35)}
.badge.warn{border-color: rgba(245,158,11,.35)}
.badge.bad{border-color: rgba(220,38,38,.35)}
footer{
  border-top:1px solid var(--border);
  padding:26px 0 40px;
  color:var(--muted);
  font-weight:650;
  font-size:13px;
}

@media (max-width: 520px){
  .cta{justify-content:flex-start}
  .cta .btn{width:100%; justify-content:center}
}

/* ===== Admin / Settings UX improvements ===== */
.container.wide{max-width:1180px}
.section{margin-top:14px}
.tabs{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 18px}
.tabbtn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.75); font-weight:850}
.tabbtn.active{background:rgba(0,195,137,.10); border-color:rgba(0,195,137,.35)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form-grid .field{display:flex; flex-direction:column; gap:6px}
.field label{font-weight:900; font-size:13px}
.field input,.field select,.field textarea{width:100%}
.card.pad{padding:18px}
.table tr.rowlink{cursor:pointer}
.table tr.rowlink:hover{background:rgba(0,0,0,.02)}
.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.kpi{padding:14px; border:1px solid var(--border); border-radius:18px; background:rgba(255,255,255,.75)}
.kpi .label{color:var(--muted); font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.02em}
.kpi .value{font-size:28px; font-weight:950; margin-top:4px}

@media (max-width: 980px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 740px){
  .form-grid{grid-template-columns:1fr}
}

.card.wide{max-width:1180px; margin:0 auto}