/* Grundlook „Telemetrie“. Alle Farben, Schrift und Rundungen kommen live aus dem Design-Tab im Panel. */
:root {
  --text: #eef1f5; --muted: #8b94a3; --panel: rgba(13,16,21,.92); --panel-solid: #0d1015;
  --border: #232933; --bw: 1px; --radius: 8px; --accent: #c6ff3d; --highlight: #ff9f5a;
  --pos: #c6ff3d; --neg: #ff5a5a; --glow: none; --font: "Archivo", system-ui, sans-serif; --case: uppercase;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --soft: color-mix(in srgb, var(--text) 7%, transparent);
  --on-accent: #0b0d10;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: transparent; overflow: hidden; }
body { font: 13px/1.35 var(--font); color: var(--text); padding: 4px; }
.box {
  height: 100%; background: var(--panel); border: var(--bw) solid var(--border); border-radius: var(--radius);
  box-shadow: var(--glow); overflow: hidden; display: flex; flex-direction: column;
}
.title { font-weight: 800; font-size: 16px; line-height: 1.1; letter-spacing: .03em; text-transform: var(--case); font-stretch: 68%; }
.sub { color: var(--muted); font-size: 11px; }
.label { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.accent { color: var(--accent); }
.hl { color: var(--highlight); }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.divider { border-top: 1px solid var(--border); }
.empty { color: var(--muted); font-size: 12px; padding: 12px; text-align: center; margin: auto; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pill { font: 700 10px/1 var(--mono); padding: 4px 7px; border-radius: 999px; background: var(--accent); color: var(--on-accent); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.chip { font: 700 10px/1 var(--mono); padding: 3px 6px; border-radius: 4px; border-radius: 6px; background: var(--text); color: var(--panel-solid); white-space: nowrap; }
/* Platzhalter, wenn ein Slot kein Bild hat */
.thumb { flex: none; border-radius: 4px; object-fit: cover; background-color: var(--soft);
  background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--text) 5%, transparent) 0 6px, transparent 6px 12px); }
.bar { position: relative; height: 4px; border-radius: 999px; background: var(--soft); }
.bar > i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--accent); transition: width .6s ease; }
@media (prefers-reduced-motion: reduce) { .bar > i { transition: none; } }