/* Keyper — member surface. Thema uit het Claude Design prototype. Systeemfonts (geen webfont-dep). */
:root {
  --green: #5EB55E; --green-d: #2E7D3E; --green-l: #EAF6EA;
  --ink: #14181C; --bg: #F4F6F5; --line: #e6ebe7;
  --muted: #8a938c; --muted-d: #6B7580;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink); background: #E8EBEA;
  -webkit-font-smoothing: antialiased;
}
#app { min-height: 100vh; display: flex; flex-direction: column; }
.phone { max-width: 460px; width: 100%; margin: 0 auto; min-height: 100vh; background: var(--bg);
  display: flex; flex-direction: column; }

/* header */
.hdr { display: flex; align-items: center; gap: 11px; padding: 16px 18px;
  background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.hdr .back { border: none; background: var(--bg); width: 34px; height: 34px; border-radius: 10px;
  cursor: pointer; font-size: 16px; flex-shrink: 0; }
.hdr .t { flex: 1; min-width: 0; }
.hdr .k { font-size: 12px; color: var(--muted); }
.hdr .n { font-size: 19px; font-weight: 700; letter-spacing: -0.3px; }
.avatar { width: 34px; height: 34px; border-radius: 999px; color: #fff; display: flex;
  align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }

/* scroll body */
.body { flex: 1; overflow: auto; padding: 18px; }
.section-h { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted-d); margin: 4px 0 11px; display: flex; justify-content: space-between; }

/* cards */
.card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 15px;
  margin-bottom: 12px; box-shadow: 0 2px 8px rgba(20,24,28,.03); }
.card.warn { border-color: #f0d9ad; }
.row { display: flex; align-items: center; gap: 13px; }
.keynum { font-family: var(--mono); font-weight: 600; }
.keychip { font-family: var(--mono); font-weight: 600; font-size: 15px; background: #fff;
  border: 1px solid #e2e7e3; padding: 2px 8px; border-radius: 7px; }
.muted { color: var(--muted); font-size: 12.5px; }
.grow { flex: 1; min-width: 0; }
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* key list item (button) */
.keyitem { width: 100%; text-align: left; border: 1px solid var(--line); background: #fff;
  border-radius: 16px; padding: 14px 15px; margin-bottom: 11px; display: flex; align-items: center;
  gap: 13px; cursor: pointer; font: inherit; }
.keyicon { width: 46px; height: 46px; border-radius: 12px; background: var(--green-l);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; }

/* status chip */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px; }
.chip .dot { width: 7px; height: 7px; border-radius: 999px; }

/* buttons */
.btn { border: none; cursor: pointer; font: inherit; font-weight: 600; border-radius: 12px;
  padding: 13px; font-size: 15px; }
.btn.primary { background: var(--green); color: #fff; box-shadow: 0 6px 16px rgba(94,181,94,.3); }
.btn.ghost { background: #fff; border: 1px solid #dbe1dc; color: var(--ink); }
.btn.full { width: 100%; }
.btn:disabled { background: #c9d4cb; box-shadow: none; cursor: default; }

/* bottom action bar */
.bar { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff;
  border-top: 1px solid var(--line); display: flex; gap: 10px; }

/* transfer / login centering */
.center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 8px; padding: 30px; }
.logo { width: 34px; height: 34px; }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 50;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 14px;
  box-shadow: 0 12px 34px rgba(0,0,0,.28); }
.err { color: #B23A1E; font-size: 13px; }

/* ===== desktop console (Kantoor / Beheer) ===== */
.topbar { display:flex; align-items:center; gap:20px; padding:12px 22px; background:#fff;
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:6; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; }
.tabs { display:flex; gap:4px; background:#EDF0EE; border:1px solid #e0e5e2; border-radius:12px; padding:4px; }
.tab { border:none; background:transparent; cursor:pointer; font:inherit; font-size:13px; font-weight:600;
  color:var(--ink); padding:7px 14px; border-radius:9px; }
.tab.active { background:#fff; box-shadow:0 1px 4px rgba(20,24,28,.13); }
.spacer { flex:1; }
.console { padding:24px; max-width:1200px; margin:0 auto; width:100%; }
.pagehead { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.pagehead h1 { font-size:22px; font-weight:700; letter-spacing:-.3px; margin:0; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.stat { background:#fff; border:1px solid var(--line); border-radius:15px; padding:16px 18px; }
.stat .lbl { font-size:13px; color:var(--muted); font-weight:500; }
.stat .val { font-size:30px; font-weight:700; margin-top:3px; letter-spacing:-.5px; }
.searchbar { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #e2e7e3;
  border-radius:12px; padding:11px 15px; margin-bottom:16px; }
.searchbar input { flex:1; border:none; outline:none; font:inherit; font-size:14px; background:transparent; color:var(--ink); }
.layout { display:flex; gap:20px; align-items:flex-start; }
.main { flex:1; min-width:0; }
.side { width:326px; flex-shrink:0; background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; }
.tablewrap { background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.grid5 { display:grid; grid-template-columns:90px 2fr 1.6fr 1fr 1.3fr; gap:12px; align-items:center; }
.thead { padding:12px 18px; border-bottom:1px solid var(--line); font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px; color:var(--muted); }
.trow { padding:13px 18px; border-bottom:1px solid #f2f4f2; }
.subtabs { display:flex; gap:24px; border-bottom:1px solid var(--line); margin-bottom:22px; }
.subtab { border:none; background:transparent; cursor:pointer; font:inherit; font-size:14px; font-weight:600;
  color:var(--ink); padding:0 2px 14px; position:relative; }
.subtab.active::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--green); }
.issue { border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin-bottom:12px; background:#fff; }
.badge { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; }
.form { max-width:560px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; }
label.fld { display:block; font-size:13px; font-weight:600; color:#4a5560; margin:14px 0 6px; }
label.fld:first-child { margin-top:0; }
.inp, select.inp { width:100%; font:inherit; font-size:14px; padding:11px 12px; border:1px solid #dbe1dc;
  border-radius:11px; outline:none; background:#fff; color:var(--ink); }
.scrim { position:fixed; inset:0; background:rgba(20,24,28,.34); z-index:20; }
.sheet { position:fixed; top:0; right:0; bottom:0; width:440px; max-width:92vw; background:#fff; z-index:21;
  box-shadow:-14px 0 40px rgba(0,0,0,.16); display:flex; flex-direction:column; }
.sheet .sh-h { padding:20px 22px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; justify-content:space-between; }
.sheet .sh-b { padding:20px 22px; overflow:auto; flex:1; }
.sheet .sh-f { padding:16px 22px; border-top:1px solid var(--line); display:flex; gap:10px; }
.empty { background:#fff; border:1px solid var(--line); border-radius:16px; padding:48px 24px; text-align:center; color:var(--muted); }
@media (max-width:820px){ .stats{grid-template-columns:repeat(2,1fr)} .layout{flex-direction:column} .side{width:100%} }