:root{
    --bg:#0b0e14;
    --card:#121826;
    --muted:#8aa1b1;
    --accent:#4cc2ff;
    --fg:#e6edf3;
    --grid:#1b2233;
}
*{box-sizing:border-box}
body{
    margin:0;
    background:var(--bg);
    color:var(--fg);
    font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif
}
.wrap{max-width:1100px;margin:28px auto;padding:0 14px}
h1{font-size:20px;margin:0 0 1rem}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width: 980px){ .grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 640px){ .grid{grid-template-columns:1fr;} }

.tile{
    background:var(--card);
    border:1px solid var(--grid);
    border-radius:12px;
    padding:12px
}

/* ✅ eigene Klasse für das Gesamt-Tile */
.tile-global{
    border-color:#2a3550;
    box-shadow:0 0 0 1px rgba(76,194,255,0.08) inset;
}

.row{margin-bottom:4px}
.name{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:6px}
.name .title{font-weight:600}
.name .total{color:var(--muted);font-size:12px;white-space:nowrap}

.barwrap{
    height:14px;
    background:#101522;
    border:1px solid var(--grid);
    border-radius:999px;
    overflow:hidden
}
.bar{height:100%;background:var(--accent);width:0%}

.kv{
    display:flex;
    justify-content:space-between;
    font-size:12px;
    color:var(--muted);
    margin-top:6px
}
.small{color:var(--muted);font-size:12px}

/* Farben pro Phase/Kanal */
.bar[data-ph="0"]{ background:#4caf50; }   /* L1 grün */
.bar[data-ph="1"]{ background:#2196f3; }   /* L2 blau */
.bar[data-ph="2"]{ background:#f44336; }   /* L3 rot */
.bar[data-ph="3"]{ background:#ff9800; }   /* L4 orange */
.bar[data-ph="sum"]{ background:#9c27b0; } /* Σ lila fallback */

/* dezentere Optik für global */
.tile-global { display: none; }