:root{
  --bg:#0a0d13; --panel:#11151e; --panel2:#161b26; --line:#222a38; --txt:#cbd4e1;
  --dim:#69748a; --accent:#4da3ff;
  --low:#4da3ff; --medium:#e0b341; --high:#ff8c42; --critical:#ff4d5e;
  --trusted:#3ecf8e; --person:#c4a8ff; --vehicle:#7fc1ff;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);
  font:13px/1.45 ui-sans-serif,-apple-system,Segoe UI,Roboto,system-ui,sans-serif;}
.hidden{display:none !important;}
.dim{color:var(--dim);}
.spacer{flex:1;}
button{cursor:pointer;font:inherit;}
a.ghost,button.ghost{background:transparent;border:1px solid var(--line);color:var(--dim);
  border-radius:7px;padding:5px 10px;text-decoration:none;font-size:12px;}
a.ghost:hover,button.ghost:hover{color:var(--txt);border-color:var(--accent);}

/* login */
.login{position:fixed;inset:0;z-index:5000;background:#070a0f;display:flex;align-items:center;justify-content:center;}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:34px 30px;
  width:320px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.brand-big{font-size:26px;font-weight:800;letter-spacing:4px;text-align:center;}
.login-sub{text-align:center;color:var(--dim);margin-bottom:8px;letter-spacing:1px;}
.login-card input{background:var(--bg);border:1px solid var(--line);color:var(--txt);padding:12px;border-radius:9px;font-size:15px;}
.login-card button{background:var(--accent);color:#04121f;border:none;padding:12px;border-radius:9px;font-weight:700;}
.login-err{color:var(--critical);text-align:center;min-height:16px;font-size:12px;}

/* header */
header{display:flex;align-items:center;gap:16px;padding:9px 16px;background:var(--panel);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1000;}
.brand{font-weight:800;letter-spacing:3px;font-size:15px;}
.stats{display:flex;gap:16px;flex-wrap:wrap;}
.stats .stat{color:var(--dim);font-size:12px;} .stats .stat b{color:var(--txt);font-weight:700;}
.conn{font-size:12px;color:var(--dim);}.conn.ok{color:var(--trusted);}.conn::before{content:"● ";}

/* layout: feeds + activity on top, map strip across the bottom */
main{display:grid;grid-template-columns:1fr 400px;grid-template-rows:1fr 240px;
  grid-template-areas:"feeds side" "map map";height:calc(100vh - 49px);}
.feeds{grid-area:feeds;display:flex;flex-direction:column;border-right:1px solid var(--line);overflow:hidden;}
.side{grid-area:side;display:flex;flex-direction:column;overflow:hidden;background:var(--panel);}
.mapbar{grid-area:map;border-top:1px solid var(--line);display:flex;flex-direction:column;background:var(--panel);}

.feeds-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line);}
.feeds-bar h2,.side>h2{font-size:13px;margin:0;text-transform:uppercase;letter-spacing:1px;}
.side>h2{padding:11px 14px;border-bottom:1px solid var(--line);}
.cols{display:flex;align-items:center;gap:6px;}
.col-btn{background:var(--panel2);border:1px solid var(--line);color:var(--dim);width:26px;height:26px;border-radius:6px;}
.col-btn.active{color:#04121f;background:var(--accent);border-color:var(--accent);font-weight:700;}

.wall{flex:1;overflow-y:auto;padding:12px;display:grid;gap:12px;align-content:start;}
.wall.cols-1{grid-template-columns:1fr;}.wall.cols-2{grid-template-columns:1fr 1fr;}.wall.cols-3{grid-template-columns:1fr 1fr 1fr;}
.wall:empty::after{content:"no phones streaming — open the phone link and tap DEPLOY";color:var(--dim);grid-column:1/-1;text-align:center;padding:50px 0;}
.tile{position:relative;aspect-ratio:16/10;background:#000;border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;}
.tile img{width:100%;height:100%;object-fit:cover;display:block;background:#000;}
.tile .ov{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;padding:6px 9px;background:linear-gradient(transparent,rgba(0,0,0,.75));}
.tile .cam{font-weight:700;font-size:12px;color:#dce7f5;}.tile .meta{font-size:11px;color:var(--dim);}
.tile .live{width:8px;height:8px;border-radius:50%;background:var(--trusted);box-shadow:0 0 8px var(--trusted);}

/* activity feed — actionable cards */
.chat{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;}
.chat:empty::after{content:"waiting for activity…";color:var(--dim);padding:30px;text-align:center;}
.card{display:flex;gap:10px;background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:10px;padding:8px;}
.card.new{animation:slidein .3s ease;}
@keyframes slidein{from{opacity:0;transform:translateY(-8px);}to{opacity:1;}}
.card.sev-medium{border-left-color:var(--medium);}
.card.sev-high{border-left-color:var(--high);}
.card.sev-critical{border-left-color:var(--critical);background:#1d1216;}
.card.trusted{border-left-color:var(--trusted);}
.card .thumb{width:60px;height:60px;border-radius:8px;object-fit:cover;background:#0a0e16;flex-shrink:0;cursor:pointer;border:1px solid var(--line);}
.card .thumb.noimg{background:#0a0e16 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%2369748a' stroke-width='1.5'%3E%3Ccircle cx='12' cy='9' r='3.2'/%3E%3Cpath d='M5 20c0-3.5 3-6 7-6s7 2.5 7 6'/%3E%3C/svg%3E") center/22px no-repeat;}
.card .body{flex:1;min-width:0;}
.card .toprow{display:flex;align-items:center;gap:6px;}
/* the name reads as an inline title; click to edit in place (no separate field) */
.card input.name{flex:1;min-width:0;background:transparent;border:1px solid transparent;color:var(--txt);
  border-radius:6px;padding:3px 6px;font:inherit;font-weight:700;font-size:14px;cursor:text;}
.card input.name:hover{border-color:var(--line);}
.card input.name:focus{outline:none;border-color:var(--accent);background:var(--bg);}
.card input.name::placeholder{color:var(--medium);font-weight:600;font-size:13px;opacity:.85;}
.sevchip{font-size:10px;text-transform:uppercase;letter-spacing:.5px;padding:1px 6px;border-radius:5px;font-weight:700;white-space:nowrap;}
.sevchip.sev-high{background:#33200f;color:var(--high);} .sevchip.sev-critical{background:#3a1620;color:var(--critical);}
.card .plate{font-family:ui-monospace,monospace;background:#1c2434;color:#ffe08a;padding:1px 6px;border-radius:5px;letter-spacing:1px;font-size:12px;}
.card .when{color:var(--dim);font-size:11px;white-space:nowrap;}
.card .sub{color:var(--dim);font-size:11.5px;margin:3px 0;}
.card .badge{font-size:10px;text-transform:uppercase;letter-spacing:.5px;padding:1px 6px;border-radius:5px;font-weight:700;}
.badge.sev-low{background:#13243a;color:var(--low);}.badge.sev-medium{background:#2e2710;color:var(--medium);}
.badge.sev-high{background:#33200f;color:var(--high);}.badge.sev-critical{background:#3a1620;color:var(--critical);}
.badge.det{background:#1a2030;color:var(--dim);}.badge.new{background:#33200f;color:var(--medium);}
.badge.rec{background:#16382b;color:var(--trusted);}.badge.unid{background:#332a14;color:var(--medium);}
.card .tags{display:flex;gap:5px;margin-top:5px;}
.card .tags button{background:var(--panel);border:1px solid var(--line);color:var(--txt);border-radius:6px;padding:3px 9px;font-size:11px;}
.card .tags button:hover{border-color:var(--accent);}
.card .tags button.trust{color:var(--trusted);}.card .tags button.watch{color:var(--critical);}
.pillS{font-size:10px;text-transform:uppercase;padding:2px 8px;border-radius:5px;cursor:pointer;
  user-select:none;border:1px solid transparent;white-space:nowrap;}
.pillS:hover{border-color:var(--accent);}
.pillS.trusted{background:#16382b;color:var(--trusted);}.pillS.watchlist{background:#3a1620;color:var(--critical);}
.pillS.neutral{background:#23262f;color:var(--dim);}.pillS.unknown{background:#332a14;color:var(--medium);}

/* map strip */
.mapbar-head{display:flex;align-items:center;gap:14px;padding:7px 14px;border-bottom:1px solid var(--line);
  font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--dim);}
.scenes{font-size:11px;color:var(--trusted);text-transform:none;letter-spacing:0;}
.scenes b{color:var(--accent);font-weight:700;}
.phones{display:flex;gap:7px;flex-wrap:wrap;overflow:hidden;margin-left:auto;}
.phone{display:flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:3px 10px;font-size:11px;text-transform:none;letter-spacing:0;color:var(--txt);}
.phone .dot{width:7px;height:7px;border-radius:50%;background:var(--dim);}
.phone .dot.streaming,.phone .dot.deployed{background:var(--trusted);}.phone .dot.transit{background:var(--medium);}
#map{flex:1;min-height:0;}

.lightbox{position:fixed;inset:0;z-index:6000;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;cursor:zoom-out;}
.lightbox img{max-width:92vw;max-height:92vh;border-radius:10px;border:1px solid var(--line);}