:root{
  --bg:#0b1020; --panel:#0f1730; --line:#1b2a55; --text:#e8eefc; --muted:#9fb2ff;
  --a:#7db7ff; --b:#ffd27d; --good:#4ad395; --bad:#d45b6a;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

.page{display:grid;grid-template-columns:280px 1fr 320px;gap:16px;max-width:1400px;margin:20px auto;padding:0 16px}
.col.left,.col.center,.col.right{display:flex;flex-direction:column;gap:16px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px}
.card-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.row-between{justify-content:space-between}
.title{font-weight:700}
.hr{height:1px;background:var(--line);margin:10px 0}
.kv{display:flex;justify-content:space-between;padding:6px 0;color:var(--muted)}
.kv.big{font-size:18px}
.grid-2{display:grid;grid-template-columns:1fr auto;gap:6px}
.tiny{font-size:13px}

.btn{background:#1d2c5b;border:1px solid transparent;color:#fff;border-radius:12px;padding:8px 12px;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.secondary{background:#223466}
.btn.danger{background:#5b2330}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.btn-col{display:flex;flex-direction:column;gap:8px;margin-top:6px}

.field{display:flex;flex-direction:column;gap:6px;margin:6px 0 10px}
.field input{background:#0c142c;border:1px solid var(--line);border-radius:10px;padding:8px;color:var(--text)}

.seg{display:flex;gap:6px}
.seg-btn{flex:1;background:#0c142c;border:1px solid var(--line);border-radius:10px;padding:8px;color:var(--text);cursor:pointer}
.seg-btn.active{outline:2px solid #345bff}

.tabs{display:flex;gap:6px;margin-bottom:8px}
.tab{background:#0c142c;border:1px solid var(--line);border-radius:12px;padding:6px 10px;color:var(--text);cursor:pointer}
.tab.active{outline:2px solid #345bff}
.tab-body.hidden{display:none}
.hidden{display:none !important}

.pillbar{display:flex;gap:8px;flex-wrap:wrap}
.pill{background:#0c142c;border:1px solid var(--line);border-radius:999px;padding:6px 10px;color:var(--muted)}

.note{color:var(--muted)}
.mt8{margin-top:8px}

canvas{display:block;width:100%;height:auto;background:#0a0f1f;border-radius:12px;border:1px solid var(--line)}

.events{min-height:90px;max-height:180px;overflow:auto;border:1px dashed var(--line);border-radius:12px;padding:8px;color:var(--muted)}
.events .line{opacity:.9;margin:2px 0}

.ws .dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px;background:#777}
.ws.online .dot{background:var(--good)}
.ws.offline .dot{background:var(--bad)}

.legend{margin-top:10px;color:var(--muted)}
.dotA{color:var(--a)} .dotB{color:var(--b)}

@media (max-width:1200px){ .page{grid-template-columns:1fr;max-width:980px} }