:root{
  --bg:#0e1116; --panel:#171b22; --panel2:#1f242e; --line:#2a313d;
  --ink:#e8edf4; --muted:#8b97a8; --accent:#4c8bf5;
  --pos:#3ecf8e; --neg:#ff5d5d; --warn:#f0b53a;
}
:root[data-theme="light"]{
  --bg:#eef1f6; --panel:#ffffff; --panel2:#f3f5f9; --line:#dde3ec;
  --ink:#1b2230; --muted:#5b6675; --accent:#2f6df6;
  --pos:#138a4e; --neg:#d23f3f; --warn:#b07d12;
}
html,body{transition:background .2s ease,color .2s ease}
:root[data-theme="light"] .bar{background:rgba(255,255,255,.9)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding-bottom:env(safe-area-inset-bottom);
}
.muted{color:var(--muted)}
h2{font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}

/* topbar */
.bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 16px;background:rgba(14,17,22,.9);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.brand{font-weight:700;font-size:18px}
.bar-r{display:flex;align-items:center;gap:10px}
.pill{font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px;border:1px solid var(--line);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--neg)}
.pill.on{color:var(--pos);border-color:rgba(62,207,142,.4)}
.pill.on::before{background:var(--pos)}
.pwr{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:10px;
  padding:8px 12px;font-weight:600;font-size:14px;cursor:pointer}
.langsel{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:10px;
  padding:8px 6px;font-weight:600;font-size:13px;cursor:pointer}
.pwr[aria-pressed="true"]{background:var(--pos);color:#06281b;border-color:var(--pos)}

/* noodstop */
.estop{display:block;width:calc(100% - 32px);margin:14px 16px 0;padding:16px;border:0;border-radius:14px;
  background:var(--neg);color:#fff;font-size:18px;font-weight:800;letter-spacing:.04em;cursor:pointer;
  box-shadow:0 6px 0 #b53636}
.estop:active{transform:translateY(3px);box-shadow:0 3px 0 #b53636}

/* tabs */
.tabs{display:flex;gap:8px;max-width:1080px;margin:14px auto 0;padding:0 16px}
.tab{flex:1;background:var(--panel);color:var(--muted);border:1px solid var(--line);border-radius:12px;
  padding:12px;font-size:15px;font-weight:700;cursor:pointer}
.tab.on{background:var(--panel2);color:var(--ink);border-color:var(--accent)}

main{max-width:1080px;margin:0 auto;padding:16px}

/* baan-weergave */
.baan h2{margin:0 0 12px}
.block-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.block{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:14px;font-weight:600}
.block .dot{width:14px;height:14px;border-radius:50%;background:#2f6b3e;flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(62,207,142,.15)}
.block.bezet{border-color:var(--neg)}
.block.bezet .dot{background:var(--neg);box-shadow:0 0 0 3px rgba(255,93,93,.2);animation:pulse 1s ease-in-out infinite}
.block .bs{margin-left:auto;font-size:11px;font-weight:700;color:var(--muted)}
.block.bezet .bs{color:var(--neg)}
@keyframes pulse{50%{opacity:.45}}

/* roster */
.roster{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x mandatory}
.lococard{flex:0 0 auto;min-width:150px;scroll-snap-align:start;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer;
  border-left:4px solid var(--accent);transition:transform .1s,border-color .15s}
.lococard:active{transform:scale(.98)}
.lococard.sel{border-color:var(--accent);box-shadow:0 0 0 2px rgba(76,139,245,.35)}
.lococard .ln{font-weight:600}
.lococard .la{font-size:12px;color:var(--muted);margin-top:2px}
.lococard .ls{font-size:12px;color:var(--muted);margin-top:6px}
.lococard .ls b{color:var(--ink)}

/* cab */
.cab{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;margin-top:16px}
.cab-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.cab-dot{width:14px;height:14px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.cab-name{font-size:18px;font-weight:700}
.cab-addr{font-size:13px}

.speedwrap{text-align:center;margin:6px 0 14px}
.speednum{font-size:54px;font-weight:800;line-height:1}
.speednum small{font-size:18px;color:var(--muted);font-weight:600;margin-left:4px}
#throttle{-webkit-appearance:none;appearance:none;width:100%;height:18px;border-radius:999px;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent) 0%,var(--panel2) 0%);margin-top:14px}
#throttle::-webkit-slider-thumb{-webkit-appearance:none;width:38px;height:38px;border-radius:50%;
  background:#fff;border:3px solid var(--accent);cursor:pointer}
#throttle::-moz-range-thumb{width:38px;height:38px;border-radius:50%;background:#fff;border:3px solid var(--accent);cursor:pointer}

.dirrow{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;margin:4px 0 16px}
.dir{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:12px;
  padding:14px 10px;font-weight:700;font-size:15px;cursor:pointer}
.dir.on{background:var(--accent);color:#06122b;border-color:var(--accent)}
.stop{background:#3a2020;color:var(--neg);border:1px solid #5a2b2b;border-radius:12px;
  padding:14px 18px;font-weight:800;cursor:pointer}

.funcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.fbtn{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:12px;
  padding:12px 6px;font-size:13px;font-weight:600;cursor:pointer;text-align:center;line-height:1.25}
.fbtn .fi{font-size:20px;display:block;margin-bottom:2px}
.fbtn.on{background:var(--warn);color:#2a2008;border-color:var(--warn)}
.fbtn .mo{display:block;font-size:10px;color:var(--muted);font-weight:500}
.fbtn.on .mo{color:#5a4a12}

/* turnouts */
.turnouts{margin-top:18px}
.turnout-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:10px}
.tbtn{display:flex;flex-direction:column;align-items:flex-start;gap:9px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;color:var(--ink);
  font-weight:600;line-height:1.3;transition:border-color .15s,transform .1s}
.tbtn:active{transform:scale(.98)}
.tbtn > span:first-child{font-size:14px}
.tstate{font-size:11px;font-weight:700;padding:5px 11px;border-radius:999px;background:var(--panel2);
  color:var(--muted);letter-spacing:.04em;white-space:nowrap}
.tbtn.thrown{border-color:var(--accent)}
.tbtn.thrown .tstate{background:var(--accent);color:#06122b}

/* update-melding */
.update-banner{margin:0;padding:12px 16px;background:#10303a;color:#9fe0f0;border-bottom:1px solid #1d4c5a;
  font-size:13px;font-weight:600;text-align:center}
.update-banner a{display:inline-block;margin-left:8px;background:var(--accent);color:#06122b;border-radius:8px;
  padding:5px 12px;font-weight:700;text-decoration:none}

/* licentie */
.lic-banner{margin:0;padding:12px 16px;background:#3a2a10;color:var(--warn);border-bottom:1px solid #4a3712;
  font-size:13px;font-weight:600;text-align:center}
.lic-banner a{color:var(--accent);cursor:pointer;text-decoration:underline}
.lic-dialog{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:16px;
  padding:20px;max-width:440px;width:92vw}
.lic-dialog::backdrop{background:rgba(0,0,0,.55)}
.lic-dialog h3{margin:0 0 8px}
.lic-dialog textarea{width:100%;margin-top:8px;background:var(--panel2);color:var(--ink);border:1px solid var(--line);
  border-radius:10px;padding:10px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;resize:vertical}
.lic-msg{font-size:13px;margin:8px 0;min-height:18px}
.lic-msg.ok{color:var(--pos)} .lic-msg.err{color:var(--neg)}
.lic-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
#lic-btn.pro{background:var(--pos);color:#06281b;border-color:var(--pos)}
#lic-btn.locked{background:var(--neg);color:#fff;border-color:var(--neg)}

/* schema-editor */
.sch-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.sch-modes{display:flex;gap:8px}
.sm{background:var(--panel);color:var(--muted);border:1px solid var(--line);border-radius:10px;padding:9px 14px;font-weight:700;cursor:pointer}
.sm.on{background:var(--panel2);color:var(--ink);border-color:var(--accent)}
.sch-save{background:var(--accent);color:#06122b;border:0;border-radius:10px;padding:9px 14px;font-weight:700;cursor:pointer}
.sch-palette{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px}
.pal{width:46px;height:46px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);cursor:pointer;padding:3px}
.pal.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(76,139,245,.3)}
.pal svg{width:100%;height:100%;display:block}
.sch-refrow{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.sch-refrow select{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:7px}
.sch-canvas-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:#0b0e13;padding:8px}
.sch-canvas{display:grid;gap:0;width:max-content;margin:0 auto}
.cell{width:var(--cell,40px);height:var(--cell,40px);position:relative;border:1px dashed transparent}
.sch-canvas.editing .cell{border-color:rgba(255,255,255,.06)}
.cell svg{width:100%;height:100%;display:block}
.cell.clickable{cursor:pointer}
.cell.bezet svg .blkfill{fill:rgba(255,93,93,.22)}

.logbox{margin:22px 0 30px;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:0 14px}
.logbox summary{cursor:pointer;padding:12px 0;color:var(--muted);font-size:13px}
#log{margin:0 0 12px;max-height:200px;overflow:auto;font-size:11.5px;color:var(--muted);
  font-family:ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;line-height:1.5}

/* rijwegen */
.route-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.rbtn{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;color:var(--ink);font-weight:600;text-align:left}
.rbtn:active{transform:scale(.98)}
.rbtn .rst{display:block;font-size:11px;font-weight:700;margin-top:6px;color:var(--muted)}
.rbtn.active{border-color:var(--pos)} .rbtn.active .rst{color:var(--pos)}
.rbtn.busy{border-color:var(--neg)} .rbtn.busy .rst{color:var(--neg)}

/* beheer */
.beheer h2{margin:18px 0 8px}
.beheer .mng-sec{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:16px}
.mng-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.mng-row:first-of-type{border-top:0}
.mng-row input{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px;font-size:14px;min-width:60px}
.mng-row input.grow{flex:1;min-width:120px}
.mng-row input.w-color{padding:2px;width:42px;min-width:42px;height:36px}
.mng-del{background:#3a2020;color:var(--neg);border:1px solid #5a2b2b;border-radius:8px;padding:8px 10px;cursor:pointer;font-weight:700}
.mng-add{background:var(--panel2);color:var(--ink);border:1px dashed var(--line);border-radius:8px;padding:10px;cursor:pointer;font-weight:600;margin-top:8px;width:100%}
.mng-save{position:sticky;bottom:10px;width:100%;background:var(--accent);color:#06122b;border:0;border-radius:12px;padding:14px;font-weight:800;font-size:16px;cursor:pointer;margin-top:8px}
.mng-saved{color:var(--pos);font-weight:700;text-align:center;margin-top:8px;min-height:18px}

/* QR telefoon koppelen */
.qr-dialog{text-align:center}
.qr-canvas{display:flex;justify-content:center;margin:14px 0 10px}
.qr-canvas canvas{width:230px;height:230px;image-rendering:pixelated;border-radius:10px;background:#fff;padding:6px}
.qr-url{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;font-weight:700;color:var(--accent);
  background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px;word-break:break-all;margin-bottom:12px}
.qr-tip{text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:6px 0}

/* hulp: baan koppelen */
.help-dialog{max-width:480px;text-align:left}
.help-status{font-size:13px;border-radius:8px;padding:9px 11px;margin:6px 0 12px;border:1px solid var(--line);background:var(--panel2)}
.help-status.ok{border-color:rgba(62,207,142,.4);color:var(--pos)}
.help-status.wait{border-color:rgba(240,181,58,.4);color:var(--warn)}
.help-status.sim{color:var(--muted)}
.help-body ol{margin:0 0 8px;padding-left:20px}
.help-body li{margin:7px 0;color:var(--ink);font-size:14px;line-height:1.5}

/* loc-foto's */
.lococard{position:relative;overflow:hidden}
.locphoto{height:54px;margin:-12px -14px 8px;background-size:cover;background-position:center;border-bottom:1px solid var(--line)}
.cab-photo{width:64px;height:44px;border-radius:8px;background-size:cover;background-position:center;flex:0 0 auto;border:1px solid var(--line)}

/* tractie-kaart */
.lococard.consist{border-left-style:double;border-left-width:6px}
.lococard.consist .la{font-variant-numeric:tabular-nums}

/* live spoorplan in baan-tab */
.live-schema-wrap{margin-bottom:18px}
.live-schema-wrap .sch-canvas-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:#0b0e13;padding:8px}
:root[data-theme="light"] .live-schema-wrap .sch-canvas-wrap,
:root[data-theme="light"] .sch-canvas-wrap{background:#dfe5ee}

/* versie-footer */
.appfoot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:center;
  margin:24px 0 36px;color:var(--muted);font-size:13px}
.linkbtn{background:none;border:0;color:var(--accent);cursor:pointer;font-size:13px;font-weight:600;text-decoration:underline;padding:0}
.upd-result{font-weight:600}
.upd-new{color:var(--accent);font-weight:700;text-decoration:none;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:4px 10px}

/* versie-chip in topbar */
.verchip{background:var(--panel2);color:var(--muted);border:1px solid var(--line);border-radius:999px;
  padding:2px 9px;font-size:11px;font-weight:700;cursor:pointer;vertical-align:middle;margin-left:6px}
.verchip.has-update{background:var(--accent);color:#06122b;border-color:var(--accent);animation:pulse 1.4s ease-in-out infinite}

/* breder op desktop, maar de cabine niet eindeloos uitrekken */
@media(min-width:760px){
  .cab{max-width:760px}
  .speedwrap, .dirrow, .funcs{max-width:680px;margin-left:auto;margin-right:auto}
}

/* schema-zoom */
.sch-zoom{display:flex;gap:4px;align-items:center}
.sch-zoom button{width:36px;height:36px;background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:9px;font-size:18px;font-weight:700;cursor:pointer;line-height:1}
.sch-zoom button:active{transform:scale(.95)}

/* leer-modus */
.learnbox{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:0 14px;margin:0 0 18px}
.learnbox summary{cursor:pointer;padding:13px 0;font-weight:700}
.learn-ctrls{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 10px}
.learn-status{padding:0 0 12px}

/* hamburgermenu (mobiel) */
.bar-r{position:relative}
.menu{display:flex;align-items:center;gap:10px}
.hamb{display:none;font-size:18px;line-height:1}
@media(max-width:680px){
  .hamb{display:inline-flex}
  .menu{position:absolute;top:calc(100% + 10px);right:0;flex-direction:column;align-items:stretch;
    background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;gap:8px;
    min-width:180px;box-shadow:0 10px 30px rgba(0,0,0,.4);z-index:30;display:none}
  .menu.open{display:flex}
  .menu .pwr,.menu .langsel{width:100%;text-align:left}
  .menu .pwr{text-align:center}
  #conn{font-size:11px;padding:5px 8px}
}