/* Additions on top of the shared look: sign-in, real map, live states, new pages */
.login{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:
 radial-gradient(900px 500px at 15% 10%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%),
 radial-gradient(700px 500px at 90% 90%,color-mix(in srgb,var(--c1) 16%,transparent),transparent 60%),var(--bg)}
.lcard{width:min(400px,100%);background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow),0 24px 60px rgba(10,40,20,.12);padding:28px 26px 22px}
.lbrand{display:flex;gap:11px;align-items:center;margin-bottom:20px}.lbrand b{display:block;font:700 15px var(--f-display)}.lbrand small{color:var(--ink-3);font-size:12px}
.lbrand .logo{width:40px;height:40px;border-radius:11px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font:800 15px var(--f-display)}
.lcard h1{font:700 24px var(--f-display);margin:0 0 4px}.lsub{color:var(--ink-3);font-size:13px;margin:0 0 18px}
.lcard .fld input{width:100%;box-sizing:border-box}
.lerr{min-height:18px;color:var(--bad);font-size:13px;margin:2px 0 10px}.lfoot{color:var(--ink-3);font-size:12px;margin:14px 0 0}
.lcard .big{width:100%;justify-content:center}
.lightbox{position:fixed;inset:0;z-index:150;background:rgba(5,12,8,.86);display:none;place-items:center;padding:20px;cursor:zoom-out}.lightbox.on{display:grid}.lightbox img{max-width:min(96vw,1100px);max-height:92vh;border-radius:10px}
.photos{display:flex;gap:8px;flex-wrap:wrap}.photos.busy{opacity:.5;pointer-events:none}
.ph{width:84px;height:84px;border-radius:10px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;position:relative;cursor:zoom-in}
.ph img{width:100%;height:100%;object-fit:cover}
.ph.add{cursor:pointer;flex-direction:column;gap:2px;color:var(--ink-3);font-size:10.5px;text-align:center;border-style:dashed}.ph.add input{position:absolute;inset:0;opacity:0;cursor:pointer}
.ph.add svg{width:20px;height:20px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.pcard{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);cursor:zoom-in;text-align:left;padding:0;color:inherit;font:inherit}
.pcard .im{aspect-ratio:4/3;background:var(--surface-2);display:block;width:100%;object-fit:cover}
.pcard div{padding:8px 10px;font-size:12px;color:var(--ink-3)}.pcard b{display:block;color:var(--ink);font-size:13px}
#fmap,.lmap{height:520px;border-radius:12px;border:1px solid var(--line);overflow:hidden;background:var(--surface-2);z-index:0}
.lmap.sm{height:300px}
.leaflet-container{font-family:var(--f-body)}
.vm{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.35);display:grid;place-items:center;font:700 10px var(--f-body);transform:translate(-3px,-3px)}
.vm.halt{background:var(--c4);color:#1a1200}.vm.stale{background:#7d8a83}
.hm{width:9px;height:9px;border-radius:50%;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.hm.ok{background:var(--c3)}.hm.miss{background:var(--c8)}.hm.na{background:#9aa8a0}
.mlegend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);margin:10px 2px 0}.mlegend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.layers{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.empty.big{padding:44px 16px;text-align:center}.empty.big svg{width:34px;height:34px;opacity:.4;display:block;margin:0 auto 10px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:3px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2)}
.pill.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 0 var(--good);animation:pl 2s infinite}
@keyframes pl{70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.loading{display:grid;place-items:center;min-height:50vh;color:var(--ink-3)}
.spin{width:30px;height:30px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:sp .8s linear infinite;margin:0 auto 12px}@keyframes sp{to{transform:rotate(360deg)}}
.todo a.bad .n{background:var(--bad-bg);color:var(--bad)}.todo a.info .n{background:var(--info-bg);color:var(--info)}
.na-ring{opacity:.55}
.dpick{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.dpick input[type=date]{background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:7px 10px;color:var(--ink);font:inherit}
.tl{display:grid;gap:0}.tl>div{display:grid;grid-template-columns:62px 1fr;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:13px}.tl time{color:var(--ink-3);font-size:12px}
.chipw{display:inline-block;padding:2px 8px;border-radius:7px;background:var(--surface-2);font-size:11.5px;margin:0 4px 4px 0}
.phone .bubble b{display:block;margin-bottom:3px}
.kpi.warnk .v{color:var(--bad)}
@media print{.rail,.bar,.dr,.ov,.btn,.tb{display:none!important}.main{padding:0}.card{box-shadow:none;break-inside:avoid}}
.todo a.warn .n{background:var(--warn-bg);color:var(--warn)}