:root{
  --bg:#1A1917; --surface:#232220; --surface2:#2C2A27; --line:#3A3733;
  --fg:#F4F1E8; --muted:#A49C88; --gold:#CEBF84; --ink:#1A1917;
  --groen:#4CAF50; --oranje:#F0A33C; --rood:#E0584A; --blauw:#7FA7DC;
  --f:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--fg);font:16px/1.5 var(--f);overscroll-behavior-y:none}
button,input{font:inherit;color:inherit}
.muted{color:var(--muted)}
.screen{min-height:100dvh;display:flex;flex-direction:column}

/* Inloggen */
.login{align-items:center;justify-content:center;gap:4px;padding:32px 24px calc(32px + env(safe-area-inset-bottom))}
.logo{text-align:center;margin-bottom:8px}
.logo span{display:block;font-weight:800;letter-spacing:.34em;color:var(--gold);font-size:17px}
.logo small{display:block;font-size:9px;letter-spacing:.3em;color:var(--muted);margin-top:3px}
.login h1{font-size:30px;margin:14px 0 2px;font-weight:800}
.dots{display:flex;gap:14px;margin:22px 0 6px}
.dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);display:block}
.dots i.vol{background:var(--gold);border-color:var(--gold)}
.err{color:var(--rood);font-size:14px;margin:6px 0 0;min-height:20px}
.pad{display:grid;grid-template-columns:repeat(3,76px);gap:16px;margin-top:22px}
.pad button{height:76px;border-radius:50%;border:1px solid var(--line);background:var(--surface);font-size:26px;font-weight:600}
.pad button:active{background:var(--surface2)}
.pad button[data-act]{background:transparent;border-color:transparent;font-size:22px}

/* Balk */
.bar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:calc(14px + env(safe-area-inset-top)) 16px 10px;position:sticky;top:0;background:var(--bg);z-index:5}
.bar h1{font-size:25px;font-weight:800;margin:0;letter-spacing:-.01em}
.bar p{margin:2px 0 0;font-size:13px}
.icon{width:42px;height:42px;flex:none;border-radius:50%;border:1px solid var(--line);background:var(--surface);font-size:19px}
.zoekrij{padding:0 16px 10px}
#zoek{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:16px}
#zoek::placeholder{color:var(--muted)}
.telrij{display:flex;gap:8px;overflow-x:auto;padding:0 16px 12px;scrollbar-width:none}
.telrij::-webkit-scrollbar{display:none}
.tel{flex:none;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 13px;font-size:13px;font-weight:600;white-space:nowrap}
.tel b{color:var(--gold);margin-right:5px}

/* Lijst */
.lijst{flex:1;padding:0 16px calc(96px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}
.kaart{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:13px;display:flex;flex-direction:column;gap:9px;cursor:pointer}
.kaart.g{border-left:5px solid var(--groen)} .kaart.o{border-left:5px solid var(--oranje)} .kaart.r{border-left:5px solid var(--rood)}
.kop{display:flex;gap:10px;justify-content:space-between;align-items:flex-start}
.kop h2{font-size:18px;font-weight:700;margin:0;line-height:1.25;overflow-wrap:anywhere}
.badge{flex:none;font-size:11px;font-weight:700;padding:5px 9px;border-radius:999px;border:1px solid currentColor;white-space:nowrap}
.b-nieuw{color:var(--gold)} .b-bezig{color:var(--blauw)} .b-gesprek{color:var(--oranje)}
.b-klant{color:var(--groen)} .b-geen{color:var(--muted)}
.info{font-size:13.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:3px 10px}
.eig{font-size:14px}
.eig b{color:var(--fg)}
.kans{font-size:14px;margin:0;color:var(--fg);background:var(--surface2);border-left:3px solid var(--gold);border-radius:0 10px 10px 0;padding:9px 12px}
.knoppen{display:flex;flex-wrap:wrap;gap:7px}
.knoppen .k{flex:1 1 68px}
.k{display:flex;align-items:center;justify-content:center;min-height:46px;padding:0 8px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface2);font-size:14.5px;font-weight:700;text-decoration:none;color:var(--fg);text-align:center}
.k.bel{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.k:active{opacity:.7}
.na{display:flex;gap:8px;flex-wrap:wrap}
.na button{flex:1;min-width:88px;min-height:40px;border-radius:11px;border:1px solid var(--line);background:transparent;font-size:13.5px;font-weight:600}
.na button.pos{border-color:var(--groen);color:var(--groen)}
.na button.mid{border-color:var(--oranje);color:var(--oranje)}
.laatst{font-size:12.5px;color:var(--muted)}
.leeg{text-align:center;color:var(--muted);padding:50px 20px;border:1px dashed var(--line);border-radius:18px}
.leeg b{display:block;color:var(--fg);font-size:17px;margin-bottom:5px}

/* Tabs */
.tabs{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(26,25,23,.93);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  padding:9px 6px calc(9px + env(safe-area-inset-bottom));z-index:6}
.tabs button{background:none;border:0;padding:7px 2px;color:var(--muted);font-size:13px;font-weight:700}
.tabs button.aan{color:var(--gold)}

/* Detailblad */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9}
.blad{position:fixed;left:0;right:0;bottom:0;top:38px;background:var(--bg);border-radius:22px 22px 0 0;
  z-index:10;display:flex;flex-direction:column;border:1px solid var(--line);border-bottom:0}
.bladkop{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.bladkop strong{font-size:17px;overflow-wrap:anywhere}
.bladinhoud{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 16px calc(28px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:14px}
.vak{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px}
.vak h3{margin:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:700}
.tekst{white-space:pre-wrap;font-size:14.5px;margin:0;color:var(--fg)}
textarea{width:100%;min-height:92px;background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:12px;font-size:15px;resize:vertical}
.kleurkeuze{display:flex;gap:12px}
.kleurkeuze button{flex:1;min-height:52px;border-radius:13px;border:2px solid var(--line);background:var(--surface2);font-weight:700;font-size:14px}
.kleurkeuze button.g.aan{border-color:var(--groen);color:var(--groen)}
.kleurkeuze button.o.aan{border-color:var(--oranje);color:var(--oranje)}
.kleurkeuze button.r.aan{border-color:var(--rood);color:var(--rood)}
.vol{width:100%;min-height:50px;border-radius:13px;border:1px solid var(--gold);background:var(--gold);color:var(--ink);font-weight:700;font-size:15px}
.leeg2{width:100%;min-height:46px;border-radius:13px;border:1px solid var(--line);background:transparent;font-weight:600;font-size:14.5px}
.rij{display:flex;gap:8px}
.rij>*{flex:1}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom));
  background:var(--fg);color:var(--ink);font-weight:700;font-size:14px;padding:11px 18px;border-radius:999px;z-index:20}
.offline{background:var(--oranje);color:var(--ink);text-align:center;font-size:13px;font-weight:700;padding:7px}