:root{
  --bg:#2f3137;
  --panel:#383a40;
  --panel-2:#303238;
  --panel-3:#27292f;
  --line:#45484f;
  --line-soft:#3f4249;
  --text:#f2f4f7;
  --muted:#a9b0ba;
  --muted-2:#7f8792;
  --accent:#3aa7e3;
  --accent-2:#1f8fcd;
  --ok:#36c275;
  --bad:#f05d55;
  --warn:#f0bd3e;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.45 Arial,sans-serif;
  letter-spacing:0;
}
a{color:inherit}
button,input,select{font:inherit;letter-spacing:0}
.app-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  background:var(--bg);
}
.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  background:#25272d;
  border-right:1px solid #202228;
}
.sidebar-search{
  width:180px;
  height:30px;
  margin:9px 16px 8px;
  border-radius:18px;
  background:#30343b;
  position:relative;
}
.sidebar-search:before{
  content:"";
  position:absolute;
  left:14px;
  top:8px;
  width:10px;
  height:10px;
  border:2px solid #707884;
  border-radius:50%;
}
.sidebar-search:after{
  content:"";
  position:absolute;
  left:25px;
  top:19px;
  width:8px;
  height:2px;
  background:#707884;
  transform:rotate(45deg);
}
.sidebar-brand{
  margin:2px 18px 18px;
  font-size:22px;
  line-height:1.15;
  font-weight:700;
  color:#e8edf3;
}
.sidebar-nav{display:flex;flex-direction:column}
.sidebar-nav a{
  min-height:52px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:0 17px;
  color:#dbe1e8;
  text-decoration:none;
  border-left:4px solid transparent;
}
.sidebar-nav a:hover{
  background:#2e3138;
  border-left-color:var(--accent);
}
.nav-icon{
  width:18px;
  color:#858d98;
  text-align:center;
  font-size:18px;
}
.sidebar-footer{
  margin-top:auto;
  display:flex;
  border-top:1px solid #202228;
}
.sidebar-footer button{
  width:64px;
  height:56px;
  border:0;
  border-right:1px solid #202228;
  background:#2d3036;
  color:#aeb6c0;
  cursor:pointer;
}
.sidebar-footer button:hover{color:#fff;background:#353940}
.content{
  min-width:0;
  padding:22px 20px 36px;
}
.page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:20px;
}
.page-head h1{
  margin:0 0 6px;
  font-size:25px;
  line-height:1.2;
  font-weight:400;
  color:#fff;
}
.page-head p{
  margin:0;
  color:var(--muted);
}
.sync{
  color:var(--muted);
  font-size:13px;
  padding-top:8px;
  white-space:nowrap;
}
.cards{
  display:grid;
  grid-template-columns:repeat(4,minmax(150px,1fr));
  gap:12px;
}
.cards article{
  min-height:96px;
  background:var(--panel);
  border:1px solid var(--line-soft);
  border-radius:3px;
  padding:16px;
}
.cards span{
  display:block;
  color:var(--muted);
  margin-bottom:7px;
}
.cards strong{
  display:block;
  color:#fff;
  font-size:30px;
  line-height:1.1;
  font-weight:400;
}
.cards .ok strong{color:var(--ok)}
.cards .bad strong{color:var(--bad)}
.filters{
  display:flex;
  gap:8px;
  margin-bottom:16px;
  background:var(--panel);
  border:1px solid var(--line-soft);
  padding:12px;
}
.filters input,.filters select,.login-panel input{
  height:38px;
  border:1px solid #4a4d55;
  border-radius:2px;
  background:#2c2e34;
  color:#f3f5f7;
  padding:0 11px;
  outline:none;
}
.filters input:focus,.filters select:focus,.login-panel input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent);
}
.filters input{min-width:320px;flex:1}
.filters select{min-width:170px}
.primary{
  height:38px;
  border:0;
  border-radius:2px;
  background:var(--accent);
  color:#fff;
  padding:0 18px;
  font-weight:700;
  cursor:pointer;
}
.primary:hover{background:var(--accent-2)}
.table-wrap{
  overflow:auto;
  background:var(--panel);
  border:1px solid var(--line-soft);
}
table{
  width:100%;
  border-collapse:collapse;
}
th,td{
  text-align:left;
  padding:11px 12px;
  border-bottom:1px solid var(--line-soft);
  white-space:nowrap;
}
th{
  background:#33363d;
  color:#dfe5ec;
  font-size:12px;
  text-transform:uppercase;
  font-weight:700;
}
td{color:#eef1f5}
tbody tr:hover{background:#3e4149}
.state{
  display:inline-block;
  min-width:62px;
  padding:3px 7px;
  border-radius:2px;
  background:#484c54;
  color:#d8dee6;
  text-align:center;
}
.state.up{color:#d9ffe8;background:#1f6b43}
.state.down{color:#ffe5e2;background:#8b2f2a}
.scheme-panel{
  background:var(--panel);
  border:1px solid var(--line-soft);
  border-radius:3px;
  padding:16px;
}
.scheme-panel-title{
  color:#cdd4dd;
  font-weight:700;
  margin:0 0 14px;
}
.scheme-tree{
  border:1px solid #4a4e57;
  border-radius:6px;
  overflow:hidden;
}
.scheme-tree details>summary{
  list-style:none;
}
.scheme-tree details>summary::-webkit-details-marker{
  display:none;
}
.vlan-node{
  background:#34373e;
  border-bottom:1px solid #4a4e57;
}
.vlan-node:last-child{
  border-bottom:0;
}
.vlan-node>summary{
  min-height:84px;
  display:grid;
  grid-template-columns:34px minmax(220px,1fr) 130px 100px;
  align-items:center;
  gap:14px;
  padding:12px 12px;
  cursor:pointer;
}
.vlan-node>summary:hover{
  background:#3b3e46;
}
.vlan-node[open]>.switch-tree{
  border-top:1px solid #4a4e57;
}
.expand-box{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #5c6370;
  border-radius:4px;
  color:#d9e0e8;
  background:#3d4149;
  font-weight:700;
}
details[open]>summary .expand-box{
  color:#fff;
}
details[open]>summary .expand-box::before{
  content:"−";
}
details[open]>summary .expand-box{
  font-size:0;
}
.expand-box.small{
  width:20px;
  height:20px;
}
.vlan-main strong,.switch-main strong,.camera-main strong{
  display:block;
  color:#fff;
}
.vlan-main small,.switch-main small,.camera-main small{
  display:block;
  color:var(--muted);
  margin-top:2px;
}
.vlan-stats{
  color:#c8d0d9;
  text-align:right;
  white-space:nowrap;
}
.switch-tree{
  padding:0;
  background:#30333a;
}
.switch-node{
  border-bottom:1px solid #42464f;
}
.switch-node:last-child{
  border-bottom:0;
}
.switch-node>summary{
  min-height:48px;
  display:grid;
  grid-template-columns:30px 130px 1fr 90px;
  align-items:center;
  gap:12px;
  padding:8px 12px 8px 32px;
  cursor:pointer;
}
.switch-node>summary:hover{
  background:#393c44;
}
.switch-place{
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.switch-count{
  color:#dce2e9;
  text-align:right;
  white-space:nowrap;
}
.camera-tree{
  background:#2c2f35;
  padding:4px 12px 10px 74px;
}
.camera-line{
  min-height:34px;
  display:grid;
  grid-template-columns:130px 90px minmax(260px,1fr);
  gap:12px;
  align-items:center;
  border-left:3px solid var(--accent);
  border-bottom:1px solid #3c4048;
  padding:6px 10px;
  color:var(--muted);
}
.camera-line:hover{
  background:#353841;
}
.camera-line:last-child{
  border-bottom:0;
}
.muted-row{
  color:var(--muted);
  display:block;
}
.scheme-filters{
  margin-top:14px;
}
.map-preview{
  margin-top:18px;
  background:var(--panel);
  border:1px solid var(--line-soft);
  border-radius:3px;
  overflow:hidden;
}
.map-preview-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:14px 16px;
  border-bottom:1px solid var(--line-soft);
}
.map-preview h2{
  margin:0 0 5px;
  font-size:20px;
  font-weight:400;
  color:#fff;
}
.map-preview p{
  margin:0;
  color:var(--muted);
}
.map-preview-head span{
  color:#fff;
  background:#2f8fc8;
  border-radius:2px;
  padding:4px 9px;
  white-space:nowrap;
}
.city-map-placeholder{
  position:relative;
  min-height:360px;
  background:#2d3036;
  overflow:hidden;
}
.map-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:44px 44px;
}
.map-river{
  position:absolute;
  left:-4%;
  top:52%;
  width:112%;
  height:70px;
  background:rgba(58,167,227,.24);
  transform:rotate(-8deg);
  border-top:1px solid rgba(58,167,227,.45);
  border-bottom:1px solid rgba(58,167,227,.45);
}
.map-road{
  position:absolute;
  height:4px;
  background:rgba(210,218,226,.3);
  border-radius:8px;
}
.road-a{left:8%;top:30%;width:82%;transform:rotate(12deg)}
.road-b{left:18%;top:72%;width:64%;transform:rotate(-18deg)}
.road-c{left:48%;top:10%;width:4px;height:82%;transform:rotate(17deg)}
.map-label{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  color:#dfe5ec;
  background:rgba(37,39,45,.84);
  border:1px solid var(--line);
  padding:12px 16px;
  border-radius:3px;
  text-align:center;
}
.city-map-page{
  background:var(--panel);
  border:1px solid var(--line-soft);
  border-radius:3px;
  overflow:hidden;
}
.city-map-layout{
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
}
.city-map-side{
  border-right:1px solid var(--line-soft);
  background:#30333a;
  min-height:calc(100vh - 176px);
}
.city-map-side-head{
  padding:14px;
  border-bottom:1px solid var(--line-soft);
}
.city-map-side-head strong{
  display:block;
  color:#fff;
}
.city-map-side-head span{
  display:block;
  color:var(--muted);
  margin-top:2px;
}
.vlan-legend{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 10px;
  margin-top:12px;
}
.vlan-legend span{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
  color:#dfe5ec;
  font-size:12px;
}
.vlan-legend i{
  width:10px;
  height:10px;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.32);
}
.city-map-list{
  max-height:calc(100vh - 236px);
  overflow:auto;
}
.city-map-list-item{
  display:block;
  padding:10px 14px;
  border-left:4px solid #9aa4b2;
  border-bottom:1px solid #3e424a;
  cursor:pointer;
}
.city-map-list-item:hover{
  background:#393d45;
}
.city-map-list-item strong{
  display:block;
  color:#fff;
}
.city-map-list-item span,.city-map-list-item small{
  display:block;
  color:var(--muted);
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.city-map-empty{
  padding:14px;
  color:var(--muted);
}
.city-map-main{
  min-width:0;
}
.city-map-toolbar{
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 14px;
  border-bottom:1px solid var(--line-soft);
}
.city-map-toolbar strong{
  display:block;
  color:#fff;
}
.city-map-toolbar span{
  display:block;
  color:var(--muted);
  margin-top:2px;
}
.map-open-link{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 14px;
  border-radius:2px;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  white-space:nowrap;
}
.map-open-link:hover{
  background:var(--accent-2);
}
.city-map-frame{
  display:block;
  width:100%;
  height:calc(100vh - 176px);
  min-height:520px;
  border:0;
  background:#2d3036;
}
.city-map-note{
  padding:10px 14px;
  border-top:1px solid var(--line-soft);
  color:var(--muted);
  font-size:13px;
}
.city-map-info{
  padding:10px 14px;
  border-top:1px solid var(--line-soft);
  color:#fff;
  background:#30333a;
  font-size:13px;
}
.camera-map-marker{
  position:relative;
  width:18px;
  height:18px;
  display:block;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  transform:translate(-50%,-50%);
}
.camera-map-dot{
  width:16px;
  height:16px;
  display:block;
  border:2px solid #fff;
  border-radius:50%;
  background:var(--marker-color,#9aa4b2);
  box-shadow:0 1px 7px rgba(0,0,0,.55);
}
.camera-map-label{
  display:none;
  position:absolute;
  left:18px;
  top:-5px;
  min-width:46px;
  padding:2px 5px;
  border:1px solid rgba(0,0,0,.35);
  border-radius:3px;
  background:rgba(37,39,45,.9);
  color:#fff;
  font-size:12px;
  line-height:1.2;
  white-space:nowrap;
  box-shadow:0 1px 5px rgba(0,0,0,.35);
}
.city-map-frame.show-camera-labels .camera-map-label{
  display:block;
}
.empty,.alert{
  background:var(--panel);
  border:1px solid var(--line-soft);
  padding:18px;
  margin-top:15px;
}
.empty.compact{
  margin:8px 0 0;
  padding:10px 12px;
}
.alert{
  border-color:#9a4742;
  color:#ffd7d4;
  background:#55302f;
}
.login-content{
  min-height:100vh;
  display:grid;
  place-items:center;
  background:#25272d;
  padding:20px;
}
.login-panel{
  width:min(420px,100%);
  background:var(--panel);
  border:1px solid var(--line-soft);
  border-radius:3px;
  padding:28px;
  box-shadow:0 18px 48px rgba(0,0,0,.28);
}
.login-brand{
  margin-bottom:18px;
  color:#fff;
  font-size:26px;
  font-weight:700;
}
.login-panel h1{
  margin:0 0 22px;
  color:#fff;
  font-size:22px;
  font-weight:400;
}
.login-panel label{
  display:block;
  margin-bottom:14px;
  color:var(--muted);
}
.login-panel input{
  display:block;
  width:100%;
  margin-top:5px;
}
.login-panel .primary{width:100%;margin-top:4px}
@media(max-width:980px){
  .app-shell{grid-template-columns:72px minmax(0,1fr)}
  .sidebar-search,.sidebar-brand{display:none}
  .sidebar-nav a{justify-content:center;padding:0;border-left:0}
  .sidebar-nav a .nav-icon{width:auto}
  .sidebar-nav a{font-size:0}
  .sidebar-footer button{width:72px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .vlan-node>summary{grid-template-columns:34px minmax(180px,1fr) 120px}
  .vlan-stats:last-child{display:none}
  .switch-node>summary{grid-template-columns:30px 120px minmax(180px,1fr)}
  .switch-count{display:none}
  .camera-line{grid-template-columns:130px minmax(220px,1fr)}
  .camera-line>span:nth-child(2){display:none}
}
@media(max-width:680px){
  .app-shell{display:block}
  .sidebar{
    position:static;
    height:auto;
    flex-direction:row;
    overflow:auto;
  }
  .sidebar-nav{flex-direction:row}
  .sidebar-nav a{width:70px;min-width:70px}
  .sidebar-footer{margin-left:auto;margin-top:0;border-top:0}
  .content{padding:16px}
  .page-head{display:block}
  .sync{margin-top:8px}
  .cards{grid-template-columns:1fr}
  .filters{flex-direction:column}
  .filters input,.filters select{min-width:0;width:100%}
  .vlan-node>summary{display:grid;grid-template-columns:34px 1fr;padding:12px}
  .vlan-stats{display:none}
  .switch-node>summary{display:block;padding-left:18px}
  .switch-node>summary span{display:block;margin:2px 0}
  .camera-tree{padding-left:18px}
  .camera-line{display:block}
  .camera-line span{display:block;margin:2px 0}
  .city-map-layout{display:block}
  .city-map-side{min-height:0;border-right:0;border-bottom:1px solid var(--line-soft)}
  .city-map-list{max-height:220px}
  .city-map-toolbar{display:block}
  .map-open-link{margin-top:10px}
  .city-map-frame{height:420px;min-height:420px}
  .city-map-placeholder{min-height:260px}
}