:root{--blue:#0b5cc4;--blue2:#0a4fa8;--line:#d9e1ea;--bg:#f4f6f9;--text:#1d2b38;--muted:#5d6f80;--ok:#1a9a4b;--off:#8a97a3}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{font:14px system-ui,"Segoe UI",Tahoma,sans-serif;color:var(--text);background:var(--bg)}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer;border:1px solid var(--blue);background:var(--blue);color:#fff;border-radius:4px;padding:6px 12px}
button.ghost{background:#fff;color:var(--blue)}button:disabled{opacity:.5;cursor:default}
input,select{font:inherit;padding:6px 8px;border:1px solid #b9c6d3;border-radius:4px;background:#fff}
.login-screen{min-height:100%;display:grid;place-items:center;background:linear-gradient(135deg,#0b5cc4,#0a3b78)}
.login-card{background:#fff;padding:32px;border-radius:10px;width:min(360px,92vw);display:flex;flex-direction:column;gap:12px;box-shadow:0 10px 40px #0004}
.login-card label{display:flex;flex-direction:column;gap:4px;color:var(--muted)}.login-card button{padding:10px}
.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:600}.brand.big{color:var(--blue)}
.logo{width:36px;height:36px;border-radius:50%;background:#e8323c;color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700}
.app{height:100%;display:flex;flex-direction:column}
.topbar{display:flex;align-items:stretch;background:var(--blue);color:#fff;height:62px;padding-left:14px;gap:24px}
.topbar .brand{min-width:200px}
.tabs{display:flex}.tab{background:none;border:0;border-radius:0;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 20px;gap:2px}
.tab .ico{font-size:20px;line-height:1}.tab.active,.tab:hover{background:var(--blue2)}
.account{margin-left:auto;display:flex;align-items:center;gap:10px;padding-right:14px}.account .ghost{border-color:#fff}
.body{flex:1;display:flex;min-height:0}
.side{width:320px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column}
.side-head{display:flex;gap:6px;padding:10px;border-bottom:1px solid var(--line)}.side-head input{flex:1}
button.icon{padding:4px 10px;background:#fff;color:var(--blue)}
.tree{padding:10px;flex:1;overflow:auto}.tree-root{font-weight:600;margin-bottom:6px}.tree-root small{font-weight:400;color:var(--muted)}
#devices{list-style:none;margin:0;padding-left:14px}
#devices li{display:flex;align-items:center;gap:8px;padding:6px;border-radius:4px;cursor:pointer}
#devices li:hover,#devices li.sel{background:#e7f0fc}
.dot{width:9px;height:9px;border-radius:50%;background:var(--off);flex:none}.dot.on{background:var(--ok)}
.dev-state{color:var(--blue);font-family:ui-monospace,monospace;font-size:12px}
.device-card{border-top:1px solid var(--line);padding:12px;font-size:13px;line-height:1.7}
.device-card b{display:inline-block;min-width:90px;color:var(--muted);font-weight:400}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.map-wrap{flex:1;position:relative;min-height:0}.map{position:absolute;inset:0}
.replay-bar{position:absolute;z-index:500;left:12px;right:12px;top:12px;background:#fff;border-radius:6px;box-shadow:0 2px 10px #0003;padding:8px 12px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.replay-bar label{display:flex;gap:6px;align-items:center}#seek{flex:1;min-width:120px}#replay-info{color:var(--muted)}
.panel-view{position:absolute;z-index:1100;inset:0;background:#fff;overflow:auto;padding:20px 24px}
.panel-view h3{margin:22px 0 6px;color:var(--blue)}.hint{color:var(--muted)}
.policy{display:flex;flex-wrap:wrap;gap:12px}.policy label{display:flex;flex-direction:column;gap:4px;color:var(--muted)}.policy input{width:170px}
table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--line);white-space:nowrap}th{background:#f0f4f8;font-weight:600;position:sticky;top:0}
td input{width:140px}.scroll{overflow:auto}
.bottom{height:230px;background:#fff;border-top:1px solid var(--line);display:flex;flex-direction:column}
.bottom-tabs{display:flex;gap:16px;align-items:center;padding:8px 12px;border-bottom:2px solid var(--blue)}.bottom-tabs b{color:var(--blue)}
.events{flex:1}.events tr{cursor:pointer}.events tr:hover td{background:#f3f8ff}
.status{color:#b4441c}
.statusbar{display:flex;gap:20px;padding:4px 12px;font-size:12px;background:#eef2f6;border-top:1px solid var(--line);color:var(--muted)}
.photos{display:flex;flex-direction:column;gap:8px}.photos .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.photos img{max-width:100%;max-height:420px}
.car-icon{background:var(--blue);color:#fff;border:2px solid #fff;border-radius:50%;width:30px!important;height:30px!important;display:grid;place-items:center;box-shadow:0 1px 6px #0006;font-size:15px}
.car-icon.off{background:var(--off)}
.car-label{background:#0b5cc4;color:#fff;border:0;font-weight:600}
@media(max-width:800px){.side{display:none}.topbar .brand span:last-child,.account span{display:none}.tab{padding:0 10px}}
.zone-editor{display:flex;gap:16px;align-items:stretch;flex-wrap:wrap}
.zone-list{flex:1 1 520px;min-width:0}.zone-list td input{width:110px}.zone-list td input[data-key=name]{width:140px}
.zone-map{flex:1 1 420px;min-height:380px;border:1px solid var(--line);border-radius:6px}
#zones tr.active td{background:#e7f0fc}
.zone-pin{background:#1a9a4b;color:#fff;border:2px solid #fff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);width:26px!important;height:26px!important;box-shadow:0 1px 5px #0006}
.zone-pin.active{background:#e8323c}
.leaflet-container.picking{cursor:crosshair}
@media(max-width:1300px){.zone-editor{flex-direction:column}.zone-map{order:-1;flex:none;height:360px;min-height:0;width:100%}.zone-list{flex:none}}

.side-actions{padding:0 10px 10px;border-bottom:1px solid var(--line)}.side-actions button{width:100%}
button.danger{background:#fff;color:#c0392b;border-color:#c0392b}
.device-admin{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.device-admin label{display:flex;flex-direction:column;gap:4px;color:var(--muted)}.device-admin input{width:240px}
#devices li.revoked{opacity:.5}#devices li.revoked .dev-state{color:#c0392b}
.modal{position:fixed;inset:0;background:#0007;z-index:3000;display:grid;place-items:center;padding:16px}
.modal-card{background:#fff;border-radius:10px;padding:24px;width:min(420px,100%);text-align:center}.modal-card ol{text-align:left}
.pair-qr{display:grid;place-items:center;min-height:260px}.pair-qr img{width:260px;height:260px;image-rendering:pixelated}
.pair-status{font-weight:600;color:var(--blue)}.pair-status.ok{color:var(--ok)}.small{font-size:12px}
.dev-marker-label{background:#fff;color:var(--text);border:1px solid var(--line);font-weight:600}
.car-icon.sel{background:#e8323c}
/* zone map: free panning, centre cross, full screen */
.zone-map{position:relative}
.zone-map.full{position:fixed!important;inset:0;z-index:2500;width:auto!important;height:auto!important;min-height:0;border-radius:0;border:0}
.zone-tools{display:flex;gap:6px}.zone-tools button{box-shadow:0 1px 5px #0004}
.zone-cross{position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;pointer-events:none;z-index:450}
.zone-cross::before,.zone-cross::after{content:"";position:absolute;background:#e8323c;box-shadow:0 0 0 1px #fff}
.zone-cross::before{left:13px;top:0;width:2px;height:28px}.zone-cross::after{top:13px;left:0;height:2px;width:28px}
.checks{display:flex;gap:18px;flex-wrap:wrap}.checks label{display:flex;align-items:center;gap:6px;color:var(--text)}
.report-row{cursor:pointer}.report-row:hover td{background:#f3f8ff}.report-detail{padding:6px 12px;display:flex;flex-direction:column;gap:4px;color:var(--muted)}.report-detail a{margin-left:4px}
.apk-latest{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:8px}.apk-latest .pair-qr{min-height:0}.apk-latest img{width:150px;height:150px;image-rendering:pixelated}