:root{
  --bg:#0b1220;
  --panel:#101a2f;
  --panel2:#0f172a;
  --text:#d6e3ff;
  --muted:#8ba3c7;
  --line:#1e2a44;
  --cyan:#00c2ff;
  --green:#38d67a;
  --red:#ff4d4d;
  --yellow:#ffb020;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;
  background:linear-gradient(180deg,#08101e,#070d18);
  color:var(--text);
}

.topbar{
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  border-bottom:1px solid var(--line);
  background:rgba(6,10,18,.9);
  position:sticky;
  top:0;
  z-index:10;
}

.brand{display:flex;align-items:center;gap:10px}
.dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--cyan)}
.title{font-weight:700;letter-spacing:.5px}

.search{flex:1;max-width:560px;padding:0 16px}
.search input{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--panel2);
  color:var(--text);
}

.right{display:flex;align-items:center;gap:10px}
.user{color:var(--muted);font-size:13px}

.layout{display:grid;grid-template-columns:320px 1fr;min-height:calc(100vh - 56px)}
.sidebar{
  border-right:1px solid var(--line);
  background:rgba(9,14,25,.7);
  padding:14px;
}
.sidebar-header .h1{font-weight:700}
.sidebar-header .h2{color:var(--muted);font-size:12px;margin-top:4px}

.sidebar-actions{display:flex;gap:8px;margin:12px 0}
.tree{margin-top:8px;max-height:calc(100vh - 170px);overflow:auto;padding-right:6px}
.tree .site{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 10px;border-radius:10px;border:1px solid var(--line);
  margin-bottom:8px;background:rgba(16,26,47,.6);
  cursor:pointer;
}
.tree .site:hover{border-color:#2a3a60}
.badge{font-size:12px;padding:2px 8px;border-radius:999px;background:rgba(0,194,255,.12);border:1px solid rgba(0,194,255,.25)}
.badge.red{background:rgba(255,77,77,.12);border-color:rgba(255,77,77,.25)}
.badge.green{background:rgba(56,214,122,.12);border-color:rgba(56,214,122,.25)}
.site-name{font-weight:600}
.site-sub{font-size:12px;color:var(--muted)}

.content{padding:16px 18px}
.cards{
  display:grid;
  grid-template-columns:repeat(6,minmax(140px,1fr));
  gap:10px;
}
.card{
  background:rgba(16,26,47,.65);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
}
.label{font-size:12px;color:var(--muted)}
.kpi{font-size:28px;font-weight:800;margin-top:6px}
.kpi.green{color:var(--green)}
.kpi.red{color:var(--red)}

.panel{
  margin-top:14px;
  background:rgba(16,26,47,.6);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
}
.panel-title{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:4px 2px 10px;
}
.sub{color:var(--muted);font-size:12px}
.list .item{
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--line);
  padding:10px 4px;
}
.item .left{display:flex;flex-direction:column}
.item .name{font-weight:600}
.item .meta{font-size:12px;color:var(--muted)}
.pill{font-size:12px;padding:3px 8px;border-radius:999px;border:1px solid var(--line)}
.pill.green{background:rgba(56,214,122,.12);border-color:rgba(56,214,122,.25);color:var(--green)}
.pill.red{background:rgba(255,77,77,.12);border-color:rgba(255,77,77,.25);color:var(--red)}
.pill.yellow{background:rgba(255,176,32,.12);border-color:rgba(255,176,32,.25);color:var(--yellow)}

.table{width:100%;border-collapse:collapse}
.table th,.table td{
  text-align:left;
  padding:10px 8px;
  border-top:1px solid var(--line);
  font-size:13px;
}
.table th{color:#b7c8ea;font-weight:700}
.statusTag{padding:3px 8px;border-radius:999px;border:1px solid var(--line);display:inline-block}
.statusTag.ok{background:rgba(56,214,122,.12);border-color:rgba(56,214,122,.25);color:var(--green)}
.statusTag.bad{background:rgba(255,77,77,.12);border-color:rgba(255,77,77,.25);color:var(--red)}
.statusTag.mid{background:rgba(255,176,32,.12);border-color:rgba(255,176,32,.25);color:var(--yellow)}

.actions{display:flex;gap:8px;margin-top:10px}
.footer{margin-top:12px;color:var(--muted);font-size:12px}

.btn{
  padding:9px 10px;
  border-radius:10px;
  border:1px solid rgba(0,194,255,.25);
  background:rgba(0,194,255,.12);
  color:var(--text);
  cursor:pointer;
  font-weight:600;
}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{
  background:transparent;
  border:1px solid var(--line);
}
.btn.warn{
  border-color:rgba(255,176,32,.35);
  background:rgba(255,176,32,.12);
}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:100}
.modal.hidden{display:none}
.modal-card{
  width:min(640px,94vw);
  background:rgba(16,26,47,.96);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
}
.modal-title{font-weight:800;margin-bottom:10px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}

input, select, textarea{
  width:100%;
  padding:10px 10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--panel2);
  color:var(--text);
}
label{display:block;color:var(--muted);font-size:12px;margin:8px 0 6px}