/* saam.css — GEGENEREER uit index.html + vang.html; moenie met die hand redigeer nie. */
/* ══ :root (globaal, gedeel deur albei modusse) ══ */
:root{
    --gold:#d9b54a; --gold2:#caa84a;
    --bg:#0f1419; --panel:rgba(15,20,25,.94); --panel2:#1a2128;
    --border:#2a333d; --text:#eef2f5; --text2:#9fb0bd;
    --blue:#4A90E2; --red:#ff4d4d; --green:#39b36a; --orange:#e0a23a; --grey:#8a949c;
  }

/* ══ Skil-basis (globaal) ══ */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none;
  font-family:-apple-system,Segoe UI,Roboto,Inter,sans-serif;background:var(--bg);color:var(--text)}
#mode-kyk{position:fixed;inset:0}
#mode-vang{position:fixed;inset:0;display:flex;flex-direction:column}
#saamTop{position:fixed;top:0;left:0;right:0;z-index:12000;display:flex;justify-content:center;
  pointer-events:none;padding:calc(env(safe-area-inset-top) + 6px) 10px 0}
#saamToggle{display:none;pointer-events:auto;background:var(--panel2);border:1px solid var(--border);
  border-radius:14px;overflow:hidden;box-shadow:0 3px 12px rgba(0,0,0,.45)}
#saamToggle button{min-width:66px;height:38px;background:transparent;border:none;
  border-right:1px solid var(--border);color:var(--text2);font-weight:800;font-size:13px;cursor:pointer;padding:0 16px}
#saamToggle button:last-child{border-right:none}
#saamToggle button.aan{background:rgba(217,181,74,.18);color:var(--gold)}

/* ══ KYKER — elke reEl omvang onder #mode-kyk ══ */
#mode-kyk *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
#mode-kyk html,#mode-kyk body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none;
    font-family:-apple-system,Segoe UI,Roboto,Inter,sans-serif;background:var(--bg);color:var(--text)}
#mode-kyk #map{position:absolute;inset:0;background:#0a0d10}
#mode-kyk .leaflet-control-attribution{font-size:9px;opacity:.6}
#mode-kyk #top{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;gap:8px;
    padding:calc(env(safe-area-inset-top) + 8px) 10px 8px;
    background:linear-gradient(180deg,rgba(15,20,25,.9),rgba(15,20,25,0));pointer-events:none}
#mode-kyk #plaasKnop{pointer-events:auto;display:flex;align-items:center;gap:7px;height:44px;padding:0 13px;
    background:var(--panel);border:1px solid var(--border);border-radius:12px;color:var(--text);
    font-weight:800;font-size:14px;box-shadow:0 3px 12px rgba(0,0,0,.45);cursor:pointer;flex:0 1 auto;min-width:0}
#mode-kyk #plaasKnop .pk-naam{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gold)}
#mode-kyk #top .sp{flex:1}
#mode-kyk .rbtn{pointer-events:auto;width:44px;height:44px;border-radius:12px;border:1px solid var(--border);
    background:var(--panel);color:var(--text);font-size:20px;display:flex;align-items:center;justify-content:center;
    box-shadow:0 3px 12px rgba(0,0,0,.45);cursor:pointer;flex:0 0 auto}
#mode-kyk .rbtn:active{transform:scale(.92)}
#mode-kyk #opsom{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top) + 60px);
    z-index:900;display:none;padding:5px 14px;border-radius:20px;font-size:12.5px;font-weight:800;
    background:rgba(15,20,25,.75);border:1px solid var(--border);color:var(--text);
    box-shadow:0 2px 10px rgba(0,0,0,.35);pointer-events:none;white-space:nowrap}
#mode-kyk #opsom.on{display:block}
#mode-kyk #stale{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top) + 94px);
    z-index:900;display:none;padding:4px 12px;border-radius:20px;font-size:11.5px;font-weight:700;
    background:rgba(122,48,48,.85);border:1px solid #a04040;color:#ffd9d9;pointer-events:none;white-space:nowrap}
#mode-kyk #stale.on{display:block}
#mode-kyk #leegPil{position:fixed;left:50%;top:46%;transform:translate(-50%,-50%);z-index:900;display:none;
    padding:13px 20px;border-radius:14px;background:rgba(15,20,25,.9);border:1px solid var(--border);
    color:var(--text2);font-size:14px;font-weight:700;text-align:center;pointer-events:none;max-width:82%}
#mode-kyk #leegPil.on{display:block}
#mode-kyk #dock{position:fixed;left:0;right:0;bottom:0;z-index:1000;
    padding:8px 10px calc(env(safe-area-inset-bottom) + 10px);
    background:linear-gradient(0deg,rgba(15,20,25,.96),rgba(15,20,25,.55) 70%,rgba(15,20,25,0));}
#mode-kyk #chips{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 9px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#mode-kyk #chips::-webkit-scrollbar{display:none}
#mode-kyk .fchip{flex:0 0 auto;padding:8px 13px;border-radius:20px;border:1px solid var(--border);
    background:var(--panel2);color:var(--text2);font-size:12.5px;font-weight:800;cursor:pointer;white-space:nowrap}
#mode-kyk .fchip.aan{background:rgba(217,181,74,.16);border-color:var(--gold);color:var(--gold)}
#mode-kyk .row{display:flex;gap:8px;align-items:stretch}
#mode-kyk .seg{flex:1;display:flex;background:var(--panel2);border:1px solid var(--border);border-radius:14px;overflow:hidden}
#mode-kyk .seg button{flex:1;min-height:48px;background:transparent;border:none;border-right:1px solid var(--border);
    color:var(--text2);font-weight:800;font-size:12.5px;cursor:pointer;padding:0 2px}
#mode-kyk .seg button:last-child{border-right:none}
#mode-kyk .seg button.aan{background:rgba(217,181,74,.18);color:var(--gold)}
#mode-kyk #btnGrafiek{width:52px;min-height:48px;border-radius:14px;border:1px solid var(--border);
    background:var(--panel2);color:var(--text);font-size:20px;cursor:pointer;flex:0 0 auto}
#mode-kyk #btnGrafiek:active{transform:scale(.94)}
#mode-kyk .pin{width:20px;height:20px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
    border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.55)}
#mode-kyk .pin .pin-n{transform:rotate(45deg);display:flex;width:100%;height:100%;align-items:center;
    justify-content:center;font-size:9px;font-weight:800;color:#0f1419}
#mode-kyk .wmerk{width:18px;height:18px;transform:rotate(45deg);border:2px solid #fff;
    box-shadow:0 2px 6px rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;border-radius:3px}
#mode-kyk .wmerk span{transform:rotate(-45deg);font-size:10px;line-height:1}
#mode-kyk .ov-full{position:fixed;inset:0;z-index:5000;background:var(--bg);display:none;flex-direction:column}
#mode-kyk .ov-full.on{display:flex}
#mode-kyk .pn-hdr{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 10px) 14px 12px;
    border-bottom:1px solid var(--border);background:var(--panel2)}
#mode-kyk .pn-hdr .pn-ttl{flex:1;min-width:0}
#mode-kyk .pn-hdr .pn-ttl .t1{font-weight:800;font-size:17px;color:var(--gold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mode-kyk .pn-hdr .pn-ttl .t2{font-size:12px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mode-kyk .pn-hdr .pn-x{background:#222c35;color:var(--text);border:none;border-radius:10px;padding:0 14px;height:42px;font-weight:700;cursor:pointer;flex:0 0 auto}
#mode-kyk .pn-hdr .pn-back{background:#222c35;color:var(--text);border:none;border-radius:10px;width:42px;height:42px;font-size:22px;line-height:1;cursor:pointer;flex:0 0 auto}
#mode-kyk .pn-body{flex:1;overflow-y:auto;padding:12px 14px calc(env(safe-area-inset-bottom) + 16px);-webkit-overflow-scrolling:touch}
#mode-kyk .kmz-knop{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;margin:0 0 14px;
    border-radius:13px;border:1px dashed var(--gold);background:rgba(217,181,74,.10);color:var(--gold);
    font-size:15px;font-weight:800;cursor:pointer}
#mode-kyk .kmz-knop:active{transform:scale(.99)}
#mode-kyk .plaas-pin{width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
    background:linear-gradient(135deg,var(--gold),#caa84a);border:2px solid #1a1206;
    display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.5)}
#mode-kyk .plaas-pin span{transform:rotate(45deg);font-size:14px}
#mode-kyk .lys{display:flex;flex-direction:column;gap:8px}
#mode-kyk .lr{background:var(--panel2);border:1px solid var(--border);border-radius:13px;padding:13px 14px;
    display:flex;align-items:center;gap:12px;cursor:pointer}
#mode-kyk .lr:active{transform:scale(.99)}
#mode-kyk .lr .lr-info{flex:1;min-width:0}
#mode-kyk .lr .lr-naam{font-weight:800;font-size:15.5px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mode-kyk .lr .lr-meta{font-size:12px;color:var(--text2);margin-top:3px}
#mode-kyk .lr .lr-pyl{color:var(--text2);font-size:16px;flex:0 0 auto}
#mode-kyk .leeg{text-align:center;color:var(--text2);font-size:14px;padding:40px 20px;line-height:1.6}
#mode-kyk #blad{position:fixed;left:0;right:0;bottom:0;z-index:4000;background:var(--panel2);
    border:1px solid var(--border);border-bottom:none;border-radius:18px 18px 0 0;
    transform:translateY(105%);transition:transform .28s ease;max-height:74vh;
    display:flex;flex-direction:column;box-shadow:0 -10px 34px rgba(0,0,0,.55)}
#mode-kyk #blad.on{transform:translateY(0)}
#mode-kyk #bladHdr{padding:8px 14px 10px;border-bottom:1px solid var(--border);touch-action:none;cursor:grab}
#mode-kyk #bladGreep{width:44px;height:5px;border-radius:3px;background:var(--border);margin:0 auto 8px}
#mode-kyk #bladHdr .bh-r{display:flex;align-items:center;gap:10px}
#mode-kyk #bladHdr .bh-ttl{flex:1;min-width:0}
#mode-kyk #bladHdr .t1{font-weight:800;font-size:17px;color:var(--gold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mode-kyk #bladHdr .t2{font-size:12px;color:var(--text2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mode-kyk #bladHdr .bh-x{background:#222c35;color:var(--text);border:none;border-radius:10px;width:38px;height:38px;
    font-size:16px;font-weight:800;cursor:pointer;flex:0 0 auto}
#mode-kyk #bladBody{overflow-y:auto;padding:12px 14px calc(env(safe-area-inset-bottom) + 16px);-webkit-overflow-scrolling:touch}
#mode-kyk .sek-ttl{font-size:12px;color:var(--text2);font-weight:800;text-transform:uppercase;letter-spacing:.6px;margin:6px 2px 8px}
#mode-kyk .spark-wrap{background:#0e141a;border:1px solid var(--border);border-radius:12px;padding:8px 10px 4px;margin-bottom:12px}
#mode-kyk .spark-wrap svg{width:100%;height:52px;display:block}
#mode-kyk .spark-et{font-size:10.5px;color:var(--text2);font-weight:700;margin-top:2px}
#mode-kyk .bes{background:#0e141a;border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:9px}
#mode-kyk .bes .b-kop{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:800}
#mode-kyk .bes .b-kop .bd{color:#fff}
#mode-kyk .bes .b-kop .bt{flex:0 0 auto;padding:1px 9px;border-radius:8px;background:var(--panel2)}
#mode-kyk .bes .b-sub{font-size:11.5px;color:var(--text2);font-weight:600;margin-top:3px}
#mode-kyk .tel-tab{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
#mode-kyk .tel-tab .tt{background:var(--panel2);border:1px solid var(--border);border-radius:8px;
    padding:3px 9px;font-size:12px;font-weight:800;color:#fff}
#mode-kyk .tel-tab .tt .k{color:var(--text2);font-weight:700}
#mode-kyk .vlae-et{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
#mode-kyk .vlae-et .ve{background:rgba(57,179,106,.14);border:1px solid #2e7d4f;color:#8fe6b0;
    border-radius:8px;padding:3px 9px;font-size:11.5px;font-weight:800}
#mode-kyk .thumbs{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
#mode-kyk .thumbs img{width:64px;height:64px;object-fit:cover;border-radius:9px;border:1px solid var(--border);cursor:pointer;background:#000}
#mode-kyk #fotoVol{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.95);display:none;
    align-items:center;justify-content:center;padding:14px}
#mode-kyk #fotoVol.on{display:flex}
#mode-kyk #fotoVol img{max-width:100%;max-height:100%;border-radius:8px}
#mode-kyk #fotoVol .fv-x{position:absolute;top:calc(env(safe-area-inset-top) + 12px);right:14px;width:44px;height:44px;
    border-radius:12px;border:1px solid var(--border);background:var(--panel);color:#fff;font-size:18px;cursor:pointer}
#mode-kyk #grafChips{display:flex;gap:7px;overflow-x:auto;padding:10px 14px;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;border-bottom:1px solid var(--border);background:var(--panel2)}
#mode-kyk #grafChips::-webkit-scrollbar{display:none}
#mode-kyk #grafSvg{background:#0e141a;border:1px solid var(--border);border-radius:14px;padding:6px}
#mode-kyk #grafSvg svg{width:100%;height:auto;display:block}
#mode-kyk .graf-nota{color:var(--text2);font-size:12px;margin-top:10px;line-height:1.5}
#mode-kyk #toast{position:fixed;left:50%;bottom:150px;transform:translateX(-50%);z-index:8000;
    background:rgba(20,26,32,.97);border:1px solid var(--border);color:var(--text);
    padding:11px 16px;border-radius:12px;font-size:13.5px;font-weight:600;max-width:88%;
    text-align:center;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;box-shadow:0 6px 22px rgba(0,0,0,.5)}
#mode-kyk #toast.on{opacity:1;transform:translateX(-50%) translateY(-6px)}
#mode-kyk #toast.g{border-color:#2e7d4f}
#mode-kyk #toast.r{border-color:#7a3030}
#mode-kyk #toast.gold{border-color:var(--gold)}

/* ══ VANG — elke reEl omvang onder #mode-vang (5 ID's geprefiks) ══ */
#mode-vang *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
#mode-vang html,#mode-vang body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none;
    font-family:-apple-system,Segoe UI,Roboto,Inter,sans-serif;background:var(--bg);color:var(--text)}
#mode-vang body{display:flex;flex-direction:column}
#mode-vang #vg_top{flex:0 0 auto;display:flex;align-items:center;gap:8px;
    padding:calc(env(safe-area-inset-top) + 8px) 10px 8px;
    background:var(--panel2);border-bottom:1px solid var(--border)}
#mode-vang #vg_top .brand{font-weight:800;font-size:16px;color:var(--gold);letter-spacing:.5px;
    display:flex;align-items:center;gap:6px;flex:0 0 auto}
#mode-vang #vg_top .sp{flex:1}
#mode-vang #touPil{display:none;align-items:center;gap:5px;height:36px;padding:0 12px;border-radius:18px;
    border:1px solid var(--orange);background:rgba(224,162,58,.14);color:#f0c074;
    font-weight:800;font-size:12.5px;cursor:pointer;flex:0 0 auto}
#mode-vang #touPil.on{display:flex}
#mode-vang #naamWys{display:flex;align-items:center;gap:5px;height:36px;padding:0 11px;max-width:44vw;
    background:#0e141a;border:1px solid var(--border);border-radius:18px;color:var(--gold);
    font-weight:700;font-size:12.5px;cursor:pointer;flex:0 1 auto;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mode-vang #hoof{flex:1;overflow-y:auto;padding:12px 14px 20px;-webkit-overflow-scrolling:touch}
#mode-vang #lysHdr{display:flex;align-items:center;gap:10px;margin-bottom:12px}
#mode-vang #lysHdr .pn-back{background:#222c35;color:var(--text);border:none;border-radius:10px;width:42px;height:42px;font-size:20px;cursor:pointer;flex:0 0 auto}
#mode-vang #lysHdr .pn-ttl{flex:1;min-width:0}
#mode-vang #lysHdr .t1{font-weight:800;font-size:17px;color:var(--gold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mode-vang #lysHdr .t2{font-size:12px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mode-vang #vg_dock{flex:0 0 auto;display:flex;gap:8px;padding:10px 10px calc(env(safe-area-inset-bottom) + 10px);
    background:var(--panel2);border-top:1px solid var(--border)}
#mode-vang .pbtn{flex:1;min-height:56px;border-radius:14px;border:1px solid var(--border);
    background:#0e141a;color:var(--text);font-size:13px;font-weight:700;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer}
#mode-vang .pbtn .ic{font-size:21px;line-height:1}
#mode-vang .pbtn:active{transform:scale(.96)}
#mode-vang .pbtn.go{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1206;border-color:var(--gold)}
#mode-vang .lys{display:flex;flex-direction:column;gap:8px}
#mode-vang .lr{background:var(--panel2);border:1px solid var(--border);border-radius:13px;padding:13px 14px;
    display:flex;align-items:center;gap:12px;cursor:pointer}
#mode-vang .lr:active{transform:scale(.99)}
#mode-vang .lr .lr-info{flex:1;min-width:0}
#mode-vang .lr .lr-naam{font-weight:800;font-size:15.5px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mode-vang .lr .lr-meta{font-size:12px;color:var(--text2);margin-top:3px}
#mode-vang .puntHeen{color:var(--gold);font-weight:800;text-decoration:none}
#mode-vang .lr .lr-pyl{color:var(--text2);font-size:16px;flex:0 0 auto}
#mode-vang .lr .lr-merk{flex:0 0 auto;font-size:12px;font-weight:800;padding:3px 9px;border-radius:9px;background:#0e141a}
#mode-vang .leeg{text-align:center;color:var(--text2);font-size:14px;padding:40px 20px;line-height:1.6}
#mode-vang .ov-full{position:fixed;inset:0;z-index:5000;background:var(--bg);display:none;flex-direction:column}
#mode-vang .ov-full.on{display:flex}
#mode-vang .pn-hdr{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 10px) 14px 12px;
    border-bottom:1px solid var(--border);background:var(--panel2)}
#mode-vang .pn-hdr .pn-back{background:#222c35;color:var(--text);border:none;border-radius:10px;width:42px;height:42px;font-size:20px;cursor:pointer;flex:0 0 auto}
#mode-vang .pn-hdr .pn-ttl{flex:1;min-width:0}
#mode-vang .pn-hdr .pn-ttl .t1{font-weight:800;font-size:17px;color:var(--gold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mode-vang .pn-hdr .pn-ttl .t2{font-size:12px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mode-vang .pn-body{flex:1;overflow-y:auto;padding:12px 14px calc(env(safe-area-inset-bottom) + 16px);-webkit-overflow-scrolling:touch}
#mode-vang .vang-meta{background:var(--panel2);border:1px solid var(--border);border-radius:13px;padding:12px 14px;margin-bottom:14px}
#mode-vang .vang-meta .vm-r{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin:3px 0}
#mode-vang .vang-meta .vm-r .k{color:var(--text2);font-weight:700}
#mode-vang .vang-meta .vm-r .v{color:#fff;font-weight:700;text-align:right}
#mode-vang .sek-ttl{font-size:12px;color:var(--text2);font-weight:800;text-transform:uppercase;letter-spacing:.6px;margin:6px 4px 8px}
#mode-vang .tel-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#mode-vang .tel{background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:8px 9px}
#mode-vang .tel.hit{border-color:var(--orange)}
#mode-vang .tel .lbl{font-size:11.5px;color:var(--text2);font-weight:800;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mode-vang .stepper{display:flex;align-items:center;gap:6px}
#mode-vang .stepper button{width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:#0e141a;color:#fff;font-size:22px;font-weight:800;cursor:pointer;flex:0 0 auto}
#mode-vang .stepper button:active{transform:scale(.9)}
#mode-vang .stepper input{flex:1;min-width:0;height:40px;text-align:center;font-size:19px;font-weight:800;border-radius:10px;border:1px solid var(--border);background:#0e141a;color:#fff}
#mode-vang .stepper input:focus{outline:none;border-color:var(--gold)}
#mode-vang .onderhoud-ry{display:flex;gap:5px;margin-top:7px}
#mode-vang .mini-vlag{flex:1;min-width:0;height:34px;border-radius:9px;border:1px solid var(--border);
    background:#0e141a;color:var(--text2);font-weight:800;font-size:11px;cursor:pointer;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}
#mode-vang .mini-vlag.aan{background:rgba(57,179,106,.16);border-color:var(--green);color:#8fe6b0}
#mode-vang .vlae{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
#mode-vang .vlag{flex:1;min-width:120px;display:flex;align-items:center;justify-content:center;gap:7px;height:50px;
    border-radius:12px;border:1px solid var(--border);background:var(--panel2);color:var(--text2);font-weight:800;font-size:13.5px;cursor:pointer}
#mode-vang .vlag.aan{background:rgba(57,179,106,.16);border-color:var(--green);color:#8fe6b0}
#mode-vang .vlag .vk{width:18px;height:18px;border-radius:5px;border:2px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:12px}
#mode-vang .foto-knop,#mode-vang .gps-knop{width:100%;height:54px;border-radius:12px;border:1px solid var(--border);background:var(--panel2);color:var(--text);font-weight:800;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 10px}
#mode-vang .gps-knop.ok{border-color:var(--green);color:#8fe6b0}
#mode-vang .gps-knop.sleg{border-color:var(--red);color:#ff9a9a}
#mode-vang .foto-knop.sleg{border-color:var(--red);color:#ff9a9a}
#mode-vang .foto-knop.opneem{border-color:var(--red);color:#ff9a9a}
#mode-vang .waarsku-knop{width:100%;margin-top:8px;height:50px;border-radius:12px;border:1px solid var(--orange);
    background:rgba(224,162,58,.12);color:#f0c074;font-weight:800;font-size:13.5px;cursor:pointer}
#mode-vang .waarsku-knop.aan{border-color:var(--green);color:#8fe6b0;background:rgba(57,179,106,.12)}
#mode-vang .foto-rooster{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
#mode-vang .foto-item{position:relative;border:1px solid var(--border);border-radius:12px;overflow:hidden}
#mode-vang .foto-item img{width:100%;height:92px;object-fit:cover;display:block}
#mode-vang .foto-item .fx{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:8px;border:none;
    background:rgba(0,0,0,.65);color:#fff;font-size:14px;font-weight:800;cursor:pointer}
#mode-vang textarea.notas{width:100%;min-height:64px;border-radius:12px;border:1px solid var(--border);background:#0e141a;color:var(--text);font-size:15px;padding:10px 12px;font-family:inherit;resize:vertical}
#mode-vang textarea.notas:focus{outline:none;border-color:var(--gold)}
#mode-vang .vang-akts{position:sticky;bottom:0;display:flex;gap:9px;padding:12px 0 calc(env(safe-area-inset-bottom) + 4px);background:linear-gradient(0deg,var(--bg) 70%,transparent)}
#mode-vang .vang-akts button{flex:1;height:54px;border-radius:13px;border:none;font-size:15px;font-weight:800;cursor:pointer}
#mode-vang .btn-ok{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1206}
#mode-vang .btn-x{background:#222c35;color:var(--text2)}
#mode-vang .tipe-chips{display:flex;flex-wrap:wrap;gap:8px}
#mode-vang .tchip{padding:11px 14px;border-radius:12px;border:1px solid var(--border);background:var(--panel2);
    color:var(--text);font-weight:700;font-size:13.5px;cursor:pointer}
#mode-vang .tchip.aan{border-color:var(--gold);background:rgba(217,181,74,.14);color:var(--gold)}
#mode-vang select.kies{width:100%;min-height:50px;border-radius:12px;border:1px solid var(--border);background:#0e141a;color:var(--text);font-size:16px;padding:10px 12px;font-family:inherit}
#mode-vang select.kies:focus{outline:none;border-color:var(--gold)}
#mode-vang #qr{position:fixed;inset:0;z-index:6000;background:#000;display:none}
#mode-vang #qr.on{display:block}
#mode-vang #qrVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#mode-vang #qrRaam{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:min(68vw,300px);height:min(68vw,300px);
    border:3px solid var(--gold);border-radius:20px;box-shadow:0 0 0 4000px rgba(0,0,0,.45)}
#mode-vang #qrWenk{position:absolute;left:0;right:0;top:calc(44% + min(36vw,165px));text-align:center;color:#fff;
    font-weight:700;font-size:14px;text-shadow:0 1px 4px #000;padding:0 20px}
#mode-vang #qrX{position:absolute;top:calc(env(safe-area-inset-top) + 12px);right:12px;width:44px;height:44px;
    border-radius:12px;border:1px solid var(--border);background:rgba(15,20,25,.85);color:#fff;font-size:19px;cursor:pointer}
#mode-vang #qrOnder{position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;
    padding:10px 12px calc(env(safe-area-inset-bottom) + 14px)}
#mode-vang #qrOnder button{flex:1;height:50px;border-radius:12px;border:1px solid var(--border);
    background:rgba(15,20,25,.88);color:#fff;font-weight:800;font-size:13.5px;cursor:pointer}
#mode-vang .stel-inp{width:100%;min-height:50px;border-radius:12px;border:1px solid var(--border);background:#0e141a;color:var(--text);font-size:16px;padding:10px 12px;font-family:inherit}
#mode-vang .stel-inp:focus{outline:none;border-color:var(--gold)}
#mode-vang #vg_slot{z-index:7000}
#mode-vang .slot-card{margin:auto;max-width:380px;text-align:center;padding:24px}
#mode-vang .slot-ic{font-size:52px;margin-bottom:12px}
#mode-vang .slot-t1{font-weight:800;font-size:22px;color:var(--gold);margin-bottom:10px}
#mode-vang .slot-t2{color:var(--text2);font-size:14.5px;line-height:1.6}
#mode-vang .ov{position:fixed;inset:0;z-index:6500;background:rgba(0,0,0,.6);
    display:none;align-items:center;justify-content:center;padding:18px}
#mode-vang .ov.on{display:flex}
#mode-vang .card{width:100%;max-width:400px;background:var(--panel2);border:1px solid var(--border);
    border-radius:18px;padding:18px;box-shadow:0 14px 44px rgba(0,0,0,.6)}
#mode-vang .card h3{margin:0 0 12px;font-size:17px;color:var(--gold)}
#mode-vang .card label{display:block;font-size:12px;color:var(--text2);font-weight:700;margin:10px 0 5px}
#mode-vang .card input{width:100%;min-height:48px;border-radius:11px;border:1px solid var(--border);
    background:#0e141a;color:var(--text);font-size:16px;padding:10px 12px;font-family:inherit}
#mode-vang .card input:focus{outline:none;border-color:var(--gold)}
#mode-vang .card .acts{display:flex;gap:9px;margin-top:16px}
#mode-vang .card .acts button{flex:1;height:50px;border-radius:12px;border:none;font-size:15px;font-weight:800;cursor:pointer}
#mode-vang #vg_toast{position:fixed;left:50%;bottom:120px;transform:translateX(-50%);z-index:8000;
    background:rgba(20,26,32,.97);border:1px solid var(--border);color:var(--text);
    padding:11px 16px;border-radius:12px;font-size:13.5px;font-weight:600;max-width:88%;
    text-align:center;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;box-shadow:0 6px 22px rgba(0,0,0,.5)}
#mode-vang #vg_toast.on{opacity:1;transform:translateX(-50%) translateY(-6px)}
#mode-vang #vg_toast.g{border-color:#2e7d4f}
#mode-vang #vg_toast.r{border-color:#7a3030}
#mode-vang #vg_toast.gold{border-color:var(--gold)}