:root{
  --surface-0:#f4f3ee; --surface-1:#eceae3; --surface-2:#ffffff;
  --text-primary:#2c2c2a; --text-secondary:#5f5e5a; --text-muted:#8a8983;
  --border:rgba(0,0,0,.10); --border-strong:rgba(0,0,0,.18);
  --bg-accent:#e6f1fb; --text-accent:#185fa5; --border-accent:#85b7eb; --fill-accent:#1a6bb5; --on-accent:#fff;
  --bg-teal:#e1f5ee; --text-teal:#0f6e56;
  --fill-success:#3b7d1f; --on-success:#fff; --text-success:#3b6d11;
  --text-danger:#a32d2d;
  --radius:8px;
}
@media (prefers-color-scheme: dark){
  :root{
    --surface-0:#141413; --surface-1:#242422; --surface-2:#2f2f2c;
    --text-primary:#eceae3; --text-secondary:#b4b2a9; --text-muted:#888780;
    --border:rgba(255,255,255,.12); --border-strong:rgba(255,255,255,.22);
    --bg-accent:#0c447c; --text-accent:#b5d4f4; --border-accent:#185fa5; --fill-accent:#378add;
    --bg-teal:#085041; --text-teal:#9fe1cb;
    --fill-success:#639922; --on-success:#0f2e04; --text-success:#97c459;
    --text-danger:#f09595;
  }
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--surface-0);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.45;overflow:hidden;-webkit-font-smoothing:antialiased}
.ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-3px;flex:0 0 auto}

#grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;height:100vh;width:100vw;padding:8px}
.device{background:var(--surface-2);border:.5px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;min-height:0;transition:box-shadow .25s,border-color .25s}
.device.recv{border-color:var(--border-accent);box-shadow:0 0 0 2px var(--bg-accent)}
.phead{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:.5px solid var(--border);flex:0 0 auto}
.ptitle{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600}
.adot{width:9px;height:9px;border-radius:50%;background:var(--border-strong);transition:background .2s,box-shadow .3s;margin-left:8px}
.adot.live{background:var(--fill-accent);box-shadow:0 0 0 5px var(--bg-accent)}
.hright{display:flex;align-items:center}
.pbody{padding:12px 14px;flex:1;overflow:auto;min-height:0}
.pfoot{flex:0 0 auto;padding:8px 14px;border-top:.5px solid var(--border);font-size:12px;color:var(--text-secondary);display:flex;justify-content:space-between;align-items:center}

.btn{border-radius:var(--radius);cursor:pointer;font-size:14px;background:var(--surface-2);color:var(--text-primary);border:.5px solid var(--border-strong);font-family:inherit;line-height:1;padding:9px 12px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn:hover{background:var(--surface-1)}
.btn:active{transform:scale(.98)}
.prim{background:var(--fill-accent);color:var(--on-accent);border:none;font-weight:600}
.ok{background:var(--fill-success);color:var(--on-success);border:none;font-weight:600}
.ghost{background:transparent;border:none;color:var(--text-secondary);font-size:12px;padding:6px}
.ghost:hover{background:var(--surface-1)}

.muted{font-size:12px;color:var(--text-secondary)}
.hint{font-size:12.5px;color:var(--text-muted);line-height:1.6;padding:4px 0}
.badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--radius)}
.b-liefer{background:var(--bg-accent);color:var(--text-accent)}
.b-abhol{background:var(--bg-teal);color:var(--text-teal)}
.tkt{border:.5px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin-bottom:10px;background:var(--surface-2)}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sec{font-size:12px;color:var(--text-secondary);margin:14px 0 6px;font-weight:600}

.opt{font-size:14px;padding:9px 14px;border:.5px solid var(--border);border-radius:20px;cursor:pointer;color:var(--text-secondary);user-select:none}
.opt.sel{background:var(--bg-accent);border-color:var(--border-accent);color:var(--text-accent);font-weight:600}
.tab{font-size:13px;color:var(--text-secondary);padding-bottom:6px;cursor:pointer;white-space:nowrap}
.tab.on{font-weight:600;color:var(--text-primary);border-bottom:2px solid var(--text-accent)}
.card{border:.5px solid var(--border);border-radius:var(--radius);padding:12px;cursor:pointer;background:var(--surface-2)}
.card:hover{border-color:var(--border-strong)}
.stepper{display:inline-flex;align-items:center;border:.5px solid var(--border-strong);border-radius:var(--radius);overflow:hidden}
.stepper button{width:34px;height:34px;background:var(--surface-2);border:none;cursor:pointer;color:var(--text-primary);font-size:17px}
.stepper button:hover{background:var(--surface-1)}
.stepper span{min-width:30px;text-align:center;font-weight:600;font-size:14px}

.knum-drv{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:.5px solid var(--border)}
.dot2{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:8px}
.free{background:#5dcaa5}.busy{background:#ef9f27}

@keyframes fl{0%{background:var(--bg-accent)}100%{background:var(--surface-2)}}
.flash-on{animation:fl 1.1s ease-out}

#callbtn{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:50;background:var(--fill-accent);color:var(--on-accent);border:none;border-radius:14px 0 0 14px;padding:16px 12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:inherit;font-size:12px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.22)}
#callbtn:hover{filter:brightness(1.06)}
#callbtn:active{transform:translateY(-50%) scale(.97)}
@keyframes ring{0%,100%{transform:rotate(0)}12%,36%{transform:rotate(-14deg)}24%,48%{transform:rotate(14deg)}60%{transform:rotate(0)}}
.ic.ring{animation:ring 1.5s ease-in-out infinite;transform-origin:center}

.ovl{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;padding:16px}
.ovl.show{display:flex}
.callcard{width:100%;max-width:420px;background:var(--surface-2);border-radius:16px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.4)}
.buildcard{width:100%;max-width:960px;height:88vh;background:var(--surface-2);border-radius:16px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.4);display:flex;flex-direction:column}
.bhead{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:.5px solid var(--border);flex:0 0 auto;gap:10px;flex-wrap:wrap}
.bbody{flex:1;display:grid;grid-template-columns:1fr 300px;min-height:0}
.bmenu{padding:14px 18px;overflow:auto;min-height:0;border-right:.5px solid var(--border)}
.bcart{padding:14px 18px;display:flex;flex-direction:column;min-height:0;background:var(--surface-1)}
.bcart .list{flex:1;overflow:auto;min-height:0}
.seg{display:flex;gap:4px;background:var(--surface-1);padding:4px;border-radius:var(--radius)}
.seg .on{font-weight:600;background:var(--fill-accent);color:var(--on-accent);padding:6px 14px;border-radius:6px;cursor:pointer;font-size:13px}
.seg .off{color:var(--text-secondary);padding:6px 14px;cursor:pointer;font-size:13px}
.hist{border:.5px solid var(--border-accent);background:var(--bg-accent);border-radius:10px;padding:10px 12px;margin-bottom:8px;cursor:pointer}
.hist:hover{filter:brightness(.99)}

.board2{display:grid;grid-template-columns:1fr 1fr;gap:10px;height:100%}
.kcol{background:var(--surface-1);border-radius:10px;padding:10px;display:flex;flex-direction:column;min-height:0}
.kcolh{font-size:13px;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.kcol .list{overflow:auto;min-height:0;display:flex;flex-direction:column;gap:8px}
.knum{background:var(--surface-2);border:.5px solid var(--border);border-radius:10px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between}
.knum.ready{background:var(--bg-teal);border-color:#5dcaa5}
.knum .n{font-size:26px;font-weight:600;line-height:1}
.knum .nm{font-size:12px;color:var(--text-secondary);margin-top:3px}

@media (max-width:920px){
  body{overflow:auto}
  #grid{grid-template-columns:1fr;grid-template-rows:none;height:auto;width:100%}
  .device{min-height:340px}
  .bbody{grid-template-columns:1fr}
  .bmenu{border-right:none;border-bottom:.5px solid var(--border)}
  .buildcard{height:92vh}
}

/* ---------- standalone role page (also shown inside an iframe) ---------- */
.rpage{display:flex;flex-direction:column;height:100vh;min-height:0}
.rhead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:.5px solid var(--border);flex:0 0 auto}
.rtitle{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600}
.rbody{flex:1;overflow:auto;min-height:0;padding:12px 14px}
.rfoot{flex:0 0 auto;padding:8px 14px;border-top:.5px solid var(--border);font-size:12px;color:var(--text-secondary);display:flex;justify-content:space-between;align-items:center;gap:8px}
.live{width:9px;height:9px;border-radius:50%;background:var(--border-strong);transition:background .2s,box-shadow .35s}
.live.on{background:var(--fill-accent);box-shadow:0 0 0 5px var(--bg-accent)}

/* ---------- container: 4 iframes ---------- */
.wall{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;height:100vh;width:100vw;padding:8px}
.cell{background:var(--surface-2);border:.5px solid var(--border);border-radius:12px;overflow:hidden;display:flex;min-height:0}
.cell iframe{flex:1;border:none;width:100%;height:100%;background:var(--surface-0)}
#reset-wall{position:fixed;top:14px;right:14px;z-index:60}

@media (max-width:920px){
  .wall{grid-template-columns:1fr;grid-template-rows:none;height:auto}
  .cell{min-height:80vh}
}

/* delivery-address inputs (unknown caller) */
.finp{width:100%;padding:8px 10px;border:.5px solid var(--border-strong);border-radius:6px;background:var(--surface-2);color:var(--text-primary);font-family:inherit;font-size:13px;margin-bottom:6px}
.finp:focus{outline:none;border-color:var(--border-accent);box-shadow:0 0 0 3px var(--bg-accent)}

/* internal 4-column status board (restaurant staff) */
.cols4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;height:100%}
.col{background:var(--surface-1);border-radius:8px;padding:8px;display:flex;flex-direction:column;min-height:0}
.colh{font-size:11px;font-weight:600;color:var(--text-secondary);margin-bottom:8px;display:flex;justify-content:space-between}
.collist{overflow:auto;min-height:0}
.ocard{background:var(--surface-2);border:.5px solid var(--border);border-radius:6px;padding:8px;margin-bottom:8px;font-size:12px}
.ocard b{font-size:13px}

/* driver phone view */
.phoneview{max-width:420px;margin:0 auto}
.dcard{border:.5px solid var(--border);border-radius:10px;padding:14px;margin-bottom:10px;background:var(--surface-2)}
.dcard .addr{font-size:16px;font-weight:600;margin:8px 0;display:flex;align-items:flex-start;gap:8px}

/* Kasse cell expands to full window while taking an order / call (in the leitstand) */
.cell.max{position:fixed;inset:8px;z-index:80;border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.4)}

/* payment badge for driver */
.b-pay{background:#fdecc8;color:#8a5a00}
@media (prefers-color-scheme: dark){ .b-pay{background:#5a3d00;color:#f0c674} }