:root{
  --bg:#121a22; --panel:#18232d; --panel2:#1e2b37; --line:#2b3a48;
  --ink:#dbe4ec; --muted:#8496a6; --ok:#4fb286; --late:#d9a441;
  --alarm:#d9534f; --blue:#5b8fd6; --focus:#7fb2ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.5 "IBM Plex Sans",system-ui,sans-serif;
  display:grid; grid-template-rows:auto 1fr auto; height:100vh; overflow:hidden;
}
button,input,select,textarea{font:inherit;color:inherit}

header{
  display:flex; align-items:center; gap:20px; padding:0 16px; height:52px;
  background:var(--panel); border-bottom:1px solid var(--line);
}
.brand{font-weight:600; letter-spacing:.02em; white-space:nowrap}
.brand .ver{color:var(--muted); font-size:12px; font-weight:400}
nav{display:flex; gap:2px; overflow-x:auto; flex:1}
nav button{
  background:none; border:0; border-bottom:2px solid transparent;
  padding:8px 12px; color:var(--muted); cursor:pointer; white-space:nowrap;
}
nav button:hover{color:var(--ink)}
nav button.on{color:var(--ink); border-bottom-color:var(--blue)}
nav button:focus-visible,.btn:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.status{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.dot.live{background:var(--ok)}
.dot.err{background:var(--alarm)}
.badge{
  background:var(--alarm); color:#fff; border-radius:9px; padding:0 6px;
  font-size:11px; margin-left:4px;
}
.alert{
  border-bottom:1px solid var(--line); padding:9px 4px; display:grid;
  grid-template-columns:1fr auto; gap:6px 10px;
}
.alert.krytyczny{box-shadow:inset 3px 0 0 var(--alarm)}
.alert.sredni{box-shadow:inset 3px 0 0 var(--late)}
.alert.niski{box-shadow:inset 3px 0 0 var(--muted)}
.alert.ack{opacity:.5}
.alert .msg{font-size:14px}
.byte{
  display:inline-block; padding:1px 3px; margin:1px; border-radius:2px;
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; background:#ffffff08;
}
.byte.zmienny{background:#5b8fd633; color:#bcd6f7}
.byte.stale{color:var(--muted)}
.byte .ofs{font-size:9px; color:var(--muted); display:block; text-align:center}
.who{color:var(--ink); border-left:1px solid var(--line); padding-left:12px; white-space:nowrap}
.who .role{color:var(--muted)}
nav button[hidden]{display:none}

main{display:grid; grid-template-columns:340px 1fr; min-height:0}
aside{
  background:var(--panel); border-right:1px solid var(--line);
  overflow-y:auto; padding:14px 14px 28px;
}
#mapwrap{position:relative; min-height:0}
#map{position:absolute; inset:0; background:#0d141a}
.hint{
  position:absolute; left:50%; top:14px; transform:translateX(-50%); z-index:600;
  background:var(--panel2); border:1px solid var(--blue); border-radius:3px;
  padding:7px 14px; font-size:13px; box-shadow:0 6px 20px #0008;
}

h2{font-size:15px; font-weight:600; margin:0 0 10px}
h3{font-size:13px; font-weight:500; color:var(--muted); margin:20px 0 8px}
.row{display:flex; gap:8px; align-items:center}
.row>*{min-width:0}
label{display:block; font-size:12px; color:var(--muted); margin:10px 0 3px}
input,select,textarea{
  width:100%; background:var(--bg); border:1px solid var(--line);
  border-radius:3px; padding:7px 9px;
}
input:focus,select:focus{outline:none; border-color:var(--focus)}
.btn{
  background:var(--panel2); border:1px solid var(--line); border-radius:3px;
  padding:7px 12px; cursor:pointer;
}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--blue); border-color:var(--blue); color:#0d141a; font-weight:500}
.btn.danger{color:var(--alarm)}
.btn.small{padding:4px 8px; font-size:13px}
.actions{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap}

ul.list{list-style:none; margin:0; padding:0}
ul.list li{
  border-bottom:1px solid var(--line); padding:9px 4px; cursor:pointer;
  display:flex; justify-content:space-between; gap:10px; align-items:baseline;
}
ul.list li:hover{background:var(--panel2)}
ul.list li.sel{background:var(--panel2); box-shadow:inset 3px 0 0 var(--blue)}
ul.list .sub{color:var(--muted); font-size:12px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12.5px}
.empty{color:var(--muted); font-size:13px; padding:12px 0; border-top:1px solid var(--line)}

.pill{font-size:11.5px; padding:2px 7px; border-radius:10px; border:1px solid currentColor}
.p-ok{color:var(--ok)} .p-late{color:var(--late)} .p-alarm{color:var(--alarm)}
.p-run{color:var(--blue)}

.seq{list-style:none;margin:0;padding:0;counter-reset:s}
.seq li{
  display:flex; gap:10px; align-items:baseline; padding:7px 4px;
  border-bottom:1px solid var(--line);
}
.seq li::before{
  counter-increment:s; content:counter(s); font-family:"IBM Plex Mono",monospace;
  color:var(--muted); font-size:12px; min-width:16px;
}
.seq .t{margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:12px}

footer{
  background:var(--panel); border-top:1px solid var(--line);
  height:132px; display:flex; flex-direction:column;
}
.feedhead{padding:6px 16px; font-size:12px; color:var(--muted); border-bottom:1px solid var(--line)}
#feedList{list-style:none; margin:0; padding:4px 16px 10px; overflow-y:auto; flex:1}
#feedList li{
  display:grid; grid-template-columns:70px 130px 1fr; gap:12px;
  font-family:"IBM Plex Mono",monospace; font-size:12.5px; padding:2px 0;
  border-bottom:1px solid #ffffff08;
}
#feedList .k-panic,#feedList .k-mandown{color:var(--alarm)}
#feedList .k-tag{color:var(--ok)}
#feedList .k-gps{color:var(--muted)}

table.hex{width:100%; border-collapse:collapse; font-family:"IBM Plex Mono",monospace; font-size:12px}
table.hex td{border-bottom:1px solid var(--line); padding:5px 4px; vertical-align:top; word-break:break-all}
table.hex td:first-child{color:var(--muted); white-space:nowrap; width:74px}

.leaflet-container{background:#0d141a}
.cp-icon{
  border-radius:50%; border:2px solid var(--panel); box-shadow:0 0 0 1px #0006;
}

@media (max-width:820px){
  main{grid-template-columns:1fr; grid-template-rows:auto 55vh}
  aside{border-right:0; border-bottom:1px solid var(--line); max-height:42vh}
  footer{height:104px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}