:root{
  --bg0:#070b12;
  --bg1:#0b1220;
  --bg2:#0a152a;
  --panel0:#0e1626;
  --panel1:#0f1b31;
  --panel2:#132341;
  --text:#eef4ff;
  --muted:#9bb0d8;
  --border:rgba(255,255,255,.08);
  --border2:rgba(255,255,255,.06);
  --shadow:0 8px 18px rgba(0,0,0,.28);
  --good:#22c55e;
  --warn:#f59e0b;
  --bad:#ef4444;
  --blue:#60a5fa;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
html,body{margin:0;background:radial-gradient(1000px 650px at 30% -20%,rgba(96,165,250,.14),transparent 55%),linear-gradient(180deg,var(--bg1),var(--bg0));color:var(--text);font-family:var(--sans)}
a{color:inherit}

.app{min-height:100vh;display:grid;grid-template-columns:216px 1fr}
.sidebar{
  position:sticky;top:0;height:100vh;
  padding:12px 10px;
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 40%),linear-gradient(180deg,#0a101c,#070b12);
  border-right:1px solid rgba(255,255,255,.06);
  display:grid;grid-template-rows:auto 1fr auto;gap:12px
}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px}
.brand img{width:22px;height:22px;border-radius:6px}
.brand .title{font-weight:900;letter-spacing:-.02em}
.nav{display:grid;gap:6px;align-content:start;padding:0 4px}
.nav a{
  text-decoration:none;
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:10px;
  border:1px solid transparent;color:#dbe7ff;
  font-weight:800;font-size:12px
}
.nav a .icon{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;color:#b8caff}
.nav a:hover{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.06)}
.nav a.active{background:linear-gradient(180deg,rgba(96,165,250,.20),rgba(96,165,250,.10));border-color:rgba(96,165,250,.35);box-shadow:0 0 0 1px rgba(96,165,250,.10)}
.sidebar-footer{
  padding:8px 10px;border-top:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:11px;color:var(--muted);font-family:var(--mono)
}
.dot{width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.18);box-shadow:0 0 0 2px rgba(255,255,255,.05)}
.dot.good{background:var(--good);box-shadow:0 0 0 2px rgba(34,197,94,.18)}
.dot.bad{background:var(--bad);box-shadow:0 0 0 2px rgba(239,68,68,.18)}
.dot.blue{background:var(--blue);box-shadow:0 0 0 2px rgba(96,165,250,.18)}

.main{padding:14px;display:grid;grid-template-rows:auto 1fr;gap:12px;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.page-title{display:flex;flex-direction:column;gap:3px;min-width:0}
.page-title h1{margin:0;font-size:16px;letter-spacing:-.02em}
.page-title .sub{color:var(--muted);font-family:var(--mono);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}

.grid{display:grid;gap:12px;min-width:0}
.grid.cols3{grid-template-columns:2fr 1.4fr 1fr}
.grid.cols3.tight{gap:10px}
.grid.cols2{grid-template-columns:1.6fr 1fr}
.grid.colsMain{grid-template-columns:2.2fr 1fr 1fr}

.card{
  background:linear-gradient(180deg,rgba(255,255,255,.024),rgba(255,255,255,.008)),linear-gradient(180deg,var(--panel2),var(--panel1));
  border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);
  padding:10px;min-width:0
}
.card h2{margin:0 0 8px;font-size:12px;letter-spacing:.02em;color:#dce8ff}
.card .hint{color:var(--muted);font-family:var(--mono);font-size:11px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.stack{display:grid;gap:8px}
.sep{height:1px;background:rgba(255,255,255,.06);margin:8px 0}

button,.btn{
  background:linear-gradient(180deg,#1a2d50,#152640);color:var(--text);
  border:1px solid rgba(96,165,250,.22);border-radius:10px;
  padding:7px 10px;font-size:12px;font-weight:900;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px
}
button:hover,.btn:hover{filter:brightness(1.08)}
button:disabled{opacity:.52;cursor:not-allowed;filter:none}
.btn.small,button.small{padding:6px 8px;border-radius:9px;font-size:11px}
.btn.ghost,button.ghost{background:rgba(255,255,255,.02);border-color:rgba(255,255,255,.08)}
.btn.danger,button.danger{background:linear-gradient(180deg,#5a2323,#3b1616);border-color:rgba(239,68,68,.42)}
.btn.primary,button.primary{background:linear-gradient(180deg,#1a62f6,#1148b7);border-color:rgba(96,165,250,.40)}

.iconbtn{
  width:34px;height:34px;padding:0;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
}
.iconbtn svg{width:16px;height:16px;opacity:.95}

input[type="text"],input[type="search"],textarea,select{
  width:100%;background:rgba(255,255,255,.03);color:var(--text);
  border:1px solid rgba(255,255,255,.10);border-radius:10px;
  padding:8px 10px;font-size:12px;font-family:var(--mono);outline:none
}
input:focus,textarea:focus,select:focus{border-color:rgba(96,165,250,.60);box-shadow:0 0 0 2px rgba(96,165,250,.14)}

.badge{
  display:inline-flex;align-items:center;justify-content:center;min-height:20px;
  border-radius:999px;padding:0 8px;font-size:10px;font-weight:900;
  letter-spacing:.05em;text-transform:uppercase;border:1px solid transparent;white-space:nowrap
}
.badge.good{color:#c9ffdc;background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.28)}
.badge.blue{color:#cfe3ff;background:rgba(96,165,250,.14);border-color:rgba(96,165,250,.28)}
.badge.bad{color:#ffd1d1;background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.28)}
.badge.neutral{color:#d8e7ff;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10)}

.table-wrap{overflow:auto;border:1px solid rgba(255,255,255,.06);border-radius:12px}
table{width:100%;border-collapse:collapse;min-width:980px}
th,td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.06);text-align:left;vertical-align:middle}
th{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#cfe0ff}
td{font-size:12px}
td.mono{font-family:var(--mono);font-size:11px}
.actions{display:flex;gap:6px;justify-content:flex-end}
.muted{color:var(--muted)}
.empty{padding:14px;color:var(--muted);font-family:var(--mono);font-size:11px}

.fresh-indicator{display:inline-flex;align-items:center;gap:8px}
.fresh-indicator .dot{width:7px;height:7px}

.kvs{display:grid;gap:6px}
.kv{display:flex;justify-content:space-between;gap:10px;padding:7px 9px;border:1px solid rgba(255,255,255,.06);border-radius:10px;background:rgba(255,255,255,.02)}
.kv .k{color:var(--muted);font-size:11px;white-space:nowrap}
.kv .v{font-family:var(--mono);font-size:11px;font-weight:800;word-break:break-word;text-align:right}

@media (max-width:1200px){
  .app{grid-template-columns:200px 1fr}
  .grid.cols3{grid-template-columns:1fr}
  .grid.colsMain{grid-template-columns:1fr}
  table{min-width:860px}
}