:root{
  --bg:#0b0c10;
  --panel:#121419;
  --panel-2:#161a21;
  --txt:#e7ecf3;
  --muted:#9aa4b2;
  --accent:#5dd3ff;
  --ok:#1dd1a1;
  --warn:#f6c850;
  --crit:#ff6b6b;
  --border:#222833;
  --chip:#1c2230;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--txt);
  background:linear-gradient(180deg,#0a0c11 0%, #0b0c10 100%);
}

/* Header */
.status-bar{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; background:#0d1117; border-bottom:1px solid var(--border);
}
.status-bar .page-title{opacity:.9}
.status-bar .meta{display:flex; align-items:center; gap:10px; color:var(--muted)}
.status-bar .dot{width:10px; height:10px; border-radius:50%; background:var(--crit); display:inline-block}

/* Logo & marque */
.logo{height:28px; margin-right:8px; vertical-align:middle}
.brand{display:flex; align-items:center; font-weight:700; letter-spacing:.5px}

/* Layout */
.container{
  max-width:1200px; margin:20px auto; padding:0 14px;
  display:grid; gap:16px;
  grid-template-columns: 1fr;
}
@media (min-width:1000px){
  .container{grid-template-columns: 1fr;}
}

/* Cards */
.card{
  background:var(--panel); border:1px solid var(--border);
  border-radius:16px; padding:14px 14px 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.card-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:10px;
}
.card-header h2{margin:0; font-size:18px}
.badges{display:flex; gap:8px; flex-wrap:wrap}
.badge{
  background:var(--panel-2); border:1px solid var(--border);
  padding:6px 10px; border-radius:999px; font-size:12px; color:var(--muted)
}

/* Chips (composants) */
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{
  background:var(--chip);
  border:1px solid var(--border);
  color:var(--accent);
  padding:6px 10px; border-radius:999px; font-size:12px;
}

/* Key/Value */
.kv{list-style:none; padding:0; margin:0}
.kv li{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed var(--border)}
.kv li:last-child{border-bottom:none}
.kv li span{color:var(--muted)}

/* Grid helpers */
.grid{display:grid; gap:16px}
.grid-2{grid-template-columns: 1fr; }
@media (min-width:900px){ .grid-2{grid-template-columns: 1fr 1fr;} }

/* Charts */
.chart-wrap{
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
}

/* Stats row */
.stats-row{
  display:grid; gap:10px; grid-template-columns: repeat(2,1fr);
  margin-top:12px;
}
@media (min-width:900px){ .stats-row{grid-template-columns: repeat(4,1fr);} }
.stat{
  background:var(--panel-2); border:1px solid var(--border); border-radius:12px;
  padding:10px;
}
.stat-label{display:block; font-size:12px; color:var(--muted)}
.stat-value{font-size:18px; font-weight:700}

/* Cells grid */
.cells-grid{
  display:grid; gap:10px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width:700px){ .cells-grid{grid-template-columns: repeat(4, minmax(0,1fr));} }
@media (min-width:1100px){ .cells-grid{grid-template-columns: repeat(6, minmax(0,1fr));} }
.cell{
  background:var(--panel-2); border:1px solid var(--border); border-radius:12px; padding:10px;
}
.cell-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
.cell-title{font-weight:700}
.pill{
  border-radius:999px; padding:2px 8px; font-size:11px; border:1px solid var(--border); color:var(--muted)
}
.cell-grid{display:grid; grid-template-columns: 1fr 1fr; gap:4px}
.cell-grid span{font-size:12px; color:var(--muted)}
.cell-grid strong{font-size:13px}

/* LED states */
.led{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle}
.led.ok{background:var(--ok)}
.led.warn{background:var(--warn)}
.led.crit{background:var(--crit)}

.legend{display:flex; gap:14px; color:var(--muted); margin-top:8px}

/* Map */
#map{height:320px; border-radius:12px; border:1px solid var(--border); overflow:hidden}

/* Actions */
.actions{display:flex; gap:10px; flex-wrap:wrap}
button{
  background:#1f2633; color:var(--txt); border:1px solid var(--border);
  border-radius:10px; padding:10px 12px; cursor:pointer;
}
button:hover{filter:brightness(1.1)}

/* Footer */
.footer{opacity:.7; text-align:center; padding:20px 0}