:root{--bg:#020617;--panel:rgba(15,23,42,.92);--text:#e5eefb;--muted:#94a3b8;--border:rgba(148,163,184,.18)}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top,rgba(37,99,235,.14),transparent 36%),#000;color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}a{color:#93c5fd;text-decoration:none}.topbar{min-height:108px;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;background:rgba(0,0,0,.86);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;backdrop-filter:blur(10px)}.brand img{height:82px;max-width:720px;object-fit:contain}nav{display:flex;gap:12px;align-items:center}nav a,.btn-primary,button,.btn-small{border:1px solid var(--border);border-radius:12px;padding:10px 14px;background:linear-gradient(180deg,rgba(30,41,59,.96),rgba(15,23,42,.96));color:var(--text);font-weight:700;cursor:pointer}.btn-primary{background:linear-gradient(180deg,rgba(22,163,74,.45),rgba(21,128,61,.25));color:#dcfce7;display:inline-block}.btn-small{padding:7px 10px;font-size:12px;white-space:nowrap}.page{width:min(1280px,calc(100% - 32px));margin:0 auto;padding:22px 0 60px}.footer{color:var(--muted);text-align:center;padding:24px}.hero,.panel,.login-card{background:var(--panel);border:1px solid var(--border);border-radius:20px;box-shadow:0 18px 48px rgba(0,0,0,.42);padding:20px;margin-bottom:18px}.hero{display:flex;align-items:center;justify-content:space-between;gap:18px}h1,h2{margin:0 0 8px}p{color:var(--muted);margin:0}.hero-stats{display:flex;gap:12px}.hero-stats div{min-width:120px;border:1px solid var(--border);border-radius:16px;background:#0f172a;padding:14px;text-align:center}.hero-stats strong{display:block;font-size:24px}.hero-stats span{color:var(--muted)}.grid.two{display:grid;grid-template-columns:1.05fr .95fr;gap:18px}#map{height:480px;border-radius:16px;overflow:hidden;background:#0f172a;border:1px solid var(--border)}.device-list{display:flex;flex-direction:column;gap:10px;max-height:480px;overflow:auto}.device-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:14px;background:#0f172a}.device-row strong,.device-row span,.device-row small{display:block}.device-row small{color:var(--muted);margin-top:3px}.device-row.alarm{border-color:rgba(239,68,68,.55)}.device-row.online{border-color:rgba(34,197,94,.35)}.device-row.offline{opacity:.75}.device-actions{display:flex;align-items:center;gap:8px}.badge{display:inline-flex;align-items:center;border-radius:999px;border:1px solid var(--border);padding:5px 9px;font-size:12px;font-weight:800;background:#111827;color:#cbd5e1}.badge-ok{background:rgba(34,197,94,.16);color:#bbf7d0}.badge-off{background:rgba(100,116,139,.22);color:#cbd5e1}.badge-alarm{background:rgba(239,68,68,.18);color:#fecaca}table{width:100%;border-collapse:collapse}th,td{padding:10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em}form{display:flex;flex-direction:column;gap:9px}form.inline{display:inline}label{color:var(--muted);font-weight:700;font-size:13px}input,select{width:100%;border:1px solid var(--border);background:#0f172a;color:var(--text);border-radius:12px;padding:10px 12px}.login-card{width:min(460px,100%);margin:60px auto}.flash{border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:12px;background:#0f172a}.flash.ok{border-color:rgba(34,197,94,.5)}.flash.error{border-color:rgba(239,68,68,.5)}.info{display:grid;grid-template-columns:170px 1fr;gap:10px}dt{color:var(--muted)}dd{margin:0}pre{white-space:pre-wrap;overflow:auto;background:#020617;border:1px solid var(--border);border-radius:14px;padding:14px}.cpl-marker div{width:18px;height:18px;border-radius:999px;border:2px solid white;box-shadow:0 0 0 3px rgba(0,0,0,.25)}@media(max-width:900px){.grid.two{grid-template-columns:1fr}.topbar{height:auto;flex-direction:column;align-items:flex-start}.brand img{height:auto;width:100%;max-width:620px}.hero{flex-direction:column;align-items:flex-start}}


/* === CleanPowerLine Dashboard UI Patch: Alarm/Statusfarben === */

@keyframes pulse-red {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.72);
    transform: scale(1);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(239, 68, 68, 0);
    transform: scale(1.06);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    transform: scale(1);
  }
}

.cpl-marker div {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 3px rgba(0,0,0,.25);
}

.cpl-marker.marker-alarm div {
  animation: pulse-red 1.35s infinite;
  border-color: #ffffff;
}

.cpl-marker.marker-warn div {
  border-color: #111827;
}

.device-row.warn {
  border-color: rgba(234, 179, 8, .55);
  background: linear-gradient(180deg, rgba(234,179,8,.10), rgba(15,23,42,.92));
}

.device-row.alarm {
  border-color: rgba(239, 68, 68, .70);
  background: linear-gradient(180deg, rgba(239,68,68,.13), rgba(15,23,42,.92));
}

.badge-warn {
  background: rgba(234, 179, 8, .22);
  color: #fde68a;
  border-color: rgba(234, 179, 8, .48);
}

.badge-alarm {
  background: rgba(239, 68, 68, .22);
  color: #fecaca;
  border-color: rgba(239, 68, 68, .55);
  animation: pulse-red 1.5s infinite;
}

.badge-ok {
  background: rgba(34, 197, 94, .16);
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, .38);
}

.badge-off {
  background: rgba(100, 116, 139, .22);
  color: #cbd5e1;
  border-color: rgba(100, 116, 139, .38);
}