:root {
  --bg: #07080d;
  --panel: rgba(17, 18, 28, .88);
  --panel-strong: #11121c;
  --border: rgba(255,255,255,.08);
  --text: #f5f5fa;
  --muted: #9698a8;
  --pink: #ef5ea9;
  --blue: #83b9ff;
  --green: #45e08a;
  --red: #ff5f68;
  --yellow: #f5c451;
}
* { box-sizing: border-box; }
html,body { margin:0; min-height:100%; background:var(--bg); color:var(--text);
  font-family:Arial,"Helvetica Neue",sans-serif; font-synthesis:none; text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased; }
body { min-height:100vh; position:relative; isolation:isolate; }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:
  linear-gradient(rgba(7,8,13,.42),rgba(7,8,13,.68)),
  url("bilder/background.png") center top / cover no-repeat; }
.app-shell { width:min(1180px,calc(100% - 32px)); margin:auto; padding:18px 0 26px; }
.topbar,.hero,.toolbar,.panel-head,footer { display:flex; align-items:center; justify-content:space-between; }
.topbar { min-height:92px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.brand { display:flex; align-items:center; gap:16px; min-width:0; }
.logo-slot { width:clamp(210px,29vw,300px); height:72px; overflow:visible; flex:0 1 auto; }
.logo-slot img { width:100%; height:100%; object-fit:contain; object-position:left center; display:block; }
.brand-copy { min-width:0; }
.eyebrow,.mini-label { margin:0 0 5px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.16em; }
h1 { margin:0; font-size:21px; letter-spacing:-.02em; }
h2 { margin:0; font-size:clamp(25px,4vw,38px); letter-spacing:-.045em; }
.overall { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:13px; }
.heartbeat { width:106px; height:30px; display:flex; align-items:center; gap:7px; overflow:hidden; }
.heartbeat svg { width:86px; height:30px; }
.heartbeat polyline { fill:none; stroke:var(--pink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:120; stroke-dashoffset:120; animation:ecg 2s linear infinite; }
.heartbeat-dot { width:5px;height:5px;border-radius:50%;background:var(--blue);box-shadow:0 0 11px var(--blue);animation:heartGlow 1s ease-in-out infinite; }
.status-dot { width:9px;height:9px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 5px rgba(245,196,81,.08); }
.status-dot.online { background:var(--green);box-shadow:0 0 0 5px rgba(69,224,138,.08); }
.status-dot.offline { background:var(--red);box-shadow:0 0 0 5px rgba(255,95,104,.08); }
.status-dot.checking { animation:blink 1s infinite; }
.hero { margin:28px 0 16px; padding:26px 28px; border:1px solid var(--border); border-radius:24px; background:
  linear-gradient(105deg,rgba(239,94,169,.09),transparent 45%,rgba(131,185,255,.08)),
  var(--panel); box-shadow:0 20px 60px rgba(0,0,0,.2); }
.hero p:not(.eyebrow) { margin:8px 0 0; color:var(--muted); font-size:13px; }
.hero-score { text-align:right; }
.hero-score strong { display:block; font-size:34px; letter-spacing:-.04em; }
.hero-score span { color:var(--muted); font-size:11px; }
.toolbar { gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.refresh-box { min-width:170px; padding:12px 15px; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.025); }
.refresh-box strong { display:block; font-size:15px; margin-top:3px; }
.refresh-box.compact { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; margin-left:auto; }
.pulse,.footer-pulse { display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(69,224,138,.7);animation:heartGlow 1.3s ease-in-out infinite; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.service-card { position:relative; overflow:hidden; display:flex; gap:16px; min-height:164px; padding:22px; border:1px solid var(--border); border-radius:20px; background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); box-shadow:0 14px 35px rgba(0,0,0,.18); transition:transform .2s,border-color .2s,box-shadow .2s; }
.service-card { cursor:pointer; }
.service-card:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.service-card:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.15); }
.service-card.online { border-color:rgba(69,224,138,.2); box-shadow:0 14px 35px rgba(0,0,0,.18),inset 0 1px rgba(69,224,138,.06); }
.service-card.offline { border-color:rgba(255,95,104,.25); }
.service-icon { flex:0 0 48px;height:48px;display:grid;place-items:center;background:#171823;border:1px solid var(--border);border-radius:14px;font-size:22px; }
.service-content { min-width:0; flex:1; padding-right:80px; }
.service-head { display:flex;align-items:center;justify-content:space-between;gap:10px; }
h3 { margin:0;font-size:17px; }
.service-content p { margin:6px 0 24px;color:var(--muted);font-size:12px; }
.metrics { display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:11px; }
.metrics strong { color:var(--text);font-size:12px; }
.badge { padding:5px 9px;border-radius:999px;font-size:10px;font-weight:800;white-space:nowrap; }
.badge.online { color:var(--green);background:rgba(69,224,138,.1); }
.badge.offline { color:var(--red);background:rgba(255,95,104,.1); }
.badge.checking { color:var(--yellow);background:rgba(245,196,81,.1); }
.service-vitals { position:absolute;top:17px;right:18px;width:108px;height:30px;display:flex;align-items:center;gap:7px;color:var(--yellow);opacity:.9; }
.service-vitals svg { width:88px;height:24px;overflow:visible; }
.service-vitals polyline { fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:90;stroke-dashoffset:90; }
.service-card.online .service-vitals { color:var(--green); }
.service-card.online .service-vitals polyline { animation:serviceEcg 1.65s linear infinite; }
.service-card.offline .service-vitals { color:var(--red);opacity:.65; }
.service-card.offline .service-vitals polyline { stroke-dasharray:4 6;stroke-dashoffset:0;animation:offlineEcg 2.4s ease-in-out infinite; }
.vital-dot { width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:currentColor;box-shadow:0 0 9px currentColor; }
.service-card.online .vital-dot { animation:vitalBeat .82s ease-in-out infinite; }
.service-card.offline .vital-dot { animation:vitalSlow .9s ease-in-out infinite; }
.incident-panel { display:flex;align-items:center;gap:14px;margin-top:16px;padding:18px 20px;border:1px solid rgba(255,95,104,.22);border-radius:18px;background:rgba(255,95,104,.06); }
.incident-panel.hidden { display:none; }
.incident-icon { width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:rgba(255,95,104,.1);color:var(--red);font-size:19px; }
.incident-panel h3 { margin:2px 0 3px; }
.incident-panel p { margin:0;color:var(--muted);font-size:12px; }
.bottom-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px; }
.panel { border:1px solid var(--border);border-radius:20px;background:var(--panel);padding:20px; }
.panel-head { align-items:flex-start;margin-bottom:14px; }
.panel-head h3 { margin-top:2px; }
.panel-note { color:var(--muted);font-size:10px; }
.uptime-list,.event-list { display:grid;gap:12px; }
.uptime-row { display:grid;grid-template-columns:90px 1fr 52px;gap:10px;align-items:center;font-size:11px; }
.uptime-name { color:var(--muted); }
.uptime-bar { height:8px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden; }
.uptime-bar span { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--pink),var(--blue)); }
.uptime-value { text-align:right;font-weight:700; }
.event { display:grid;grid-template-columns:8px 1fr auto;gap:10px;align-items:start;font-size:11px; }
.event-dot { width:7px;height:7px;margin-top:4px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green); }
.event.offline .event-dot { background:var(--red);box-shadow:0 0 8px var(--red); }
.event-text strong { display:block; }
.event-text span,.event-time,.empty-state { color:var(--muted); }
.event-time { white-space:nowrap; }
.empty-state { padding:8px 0;font-size:11px; }
.now-playing { margin-top:14px;display:flex;align-items:center;gap:14px;background:linear-gradient(105deg,rgba(239,94,169,.07),rgba(131,185,255,.07)),var(--panel); }
.np-icon { width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,rgba(239,94,169,.18),rgba(131,185,255,.18));font-size:20px;color:var(--pink); }
.np-copy { display:grid;gap:2px;min-width:0; }
.np-copy strong { font-size:15px; }
.np-copy > span:last-child { color:var(--muted);font-size:11px; }
.np-wave { margin-left:auto;display:flex;align-items:center;gap:3px;height:32px; }
.np-wave i { display:block;width:3px;height:12px;border-radius:4px;background:linear-gradient(var(--pink),var(--blue));animation:wave .9s ease-in-out infinite; }
.np-wave i:nth-child(2){animation-delay:.12s}.np-wave i:nth-child(3){animation-delay:.24s}.np-wave i:nth-child(4){animation-delay:.36s}.np-wave i:nth-child(5){animation-delay:.48s}.np-wave i:nth-child(6){animation-delay:.6s}.np-wave i:nth-child(7){animation-delay:.72s}
footer { margin-top:26px;padding-top:18px;border-top:1px solid var(--border);color:#686b79;font-size:10px;text-transform:uppercase;letter-spacing:.11em; }
.footer-link { color:inherit; text-decoration:none; }
.footer-link:hover,.footer-link:focus-visible { color:var(--text); text-decoration:underline; }
@keyframes ecg { 0%{stroke-dashoffset:120;opacity:.2}12%{opacity:1}55%{stroke-dashoffset:0;opacity:1}75%,100%{stroke-dashoffset:-120;opacity:.15} }
@keyframes heartGlow { 0%,100%{transform:scale(.8);opacity:.55}50%{transform:scale(1.35);opacity:1} }
@keyframes blink { 50%{opacity:.35} }
@keyframes serviceEcg { 0%{stroke-dashoffset:90;opacity:.15}12%{opacity:1}60%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-90;opacity:.1} }
@keyframes offlineEcg { 0%,100%{opacity:.25}50%{opacity:.7} }
@keyframes vitalBeat { 0%,100%{transform:scale(.72);opacity:.6}18%{transform:scale(1.55);opacity:1}35%{transform:scale(.9)} }
@keyframes vitalSlow { 0%,100%{transform:scale(.8);opacity:.35}50%{transform:scale(1.05);opacity:.7} }
@keyframes wave { 0%,100%{height:8px;opacity:.5}50%{height:28px;opacity:1} }
@media (max-width:820px) { .brand-copy{display:none}.bottom-grid{grid-template-columns:1fr}.grid{grid-template-columns:1fr} }
@media (max-width:620px) {
  body::before { background-position:center top; }
  .app-shell{width:calc(100% - 16px);padding-top:8px}
  .topbar{flex-wrap:wrap;gap:10px;align-items:center;min-height:0}
  .brand{width:100%}.logo-slot{width:min(75vw,285px);height:62px}
  .overall{width:100%;justify-content:flex-start;padding:4px 0 5px}.heartbeat{display:flex;width:90px}
  .hero{padding:20px;border-radius:20px;align-items:flex-end}.hero-score strong{font-size:27px}.hero-score span{font-size:10px}
  .toolbar{display:grid;grid-template-columns:1fr 1fr}.refresh-box{min-width:0}.refresh-box.compact{grid-column:1/-1;margin-left:0;justify-content:center}
  .service-card{min-height:154px;padding:17px}.service-content{padding-right:58px}
  .service-vitals{width:72px;right:10px}.service-vitals svg{width:58px}
  .service-head{padding-right:0}.badge{font-size:9px}
  .panel{padding:16px}.uptime-row{grid-template-columns:74px 1fr 50px}
  .now-playing{align-items:flex-start}.np-wave{display:none}
  footer{flex-direction:column;align-items:flex-start;gap:8px}
}
@media (max-width:380px) { .hero{display:block}.hero-score{text-align:left;margin-top:15px}.toolbar{grid-template-columns:1fr}.refresh-box.compact{grid-column:auto}.service-head{display:block}.badge{display:inline-block;margin-top:7px} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{animation:none!important;scroll-behavior:auto!important} }

.back-link { color:var(--text); text-decoration:none; font-size:13px; font-weight:700; }
.back-link:hover { color:var(--blue); }
.detail-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:28px 0 14px; padding:24px 28px; border:1px solid var(--border); border-radius:24px; background:var(--panel); box-shadow:0 20px 60px rgba(0,0,0,.2); }
.detail-heading { display:flex; align-items:center; gap:16px; min-width:0; }
.detail-heading h1 { margin:0; font-size:clamp(26px,4vw,40px); }
.detail-muted,.detail-copy { color:var(--muted); font-size:13px; line-height:1.6; }
.detail-muted { margin:6px 0 0; }
.detail-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:14px; }
.stat-box { display:grid; gap:4px; padding:18px 20px; border:1px solid var(--border); border-radius:16px; background:var(--panel); }
.stat-box strong { font-size:24px; }
.stat-box > span:last-child { color:var(--muted); font-size:11px; }
.chart-panel { padding:22px; }
.detail-panel-head { gap:18px; }
.detail-panel-head h2,.detail-bottom h2 { font-size:20px; letter-spacing:-.02em; }
.period-tabs { display:flex; gap:4px; padding:4px; border:1px solid var(--border); border-radius:12px; background:rgba(0,0,0,.16); }
.period-tab { border:0; border-radius:8px; padding:8px 11px; color:var(--muted); background:transparent; font:inherit; font-size:11px; cursor:pointer; }
.period-tab:hover,.period-tab.active { color:var(--text); background:rgba(131,185,255,.14); }
.period-tab:focus-visible { outline:2px solid var(--blue); outline-offset:1px; }
.chart-wrap { width:100%; overflow:hidden; }
#historyChart { display:block; width:100%; min-height:220px; height:auto; }
.chart-grid { stroke:rgba(255,255,255,.08); stroke-width:1; }
.chart-axis { stroke:rgba(255,255,255,.2); stroke-width:1; }
.chart-label { fill:var(--muted); font-size:11px; }
.response-line { fill:none; stroke:var(--blue); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.offline-point { fill:var(--red); stroke:var(--panel); stroke-width:2; }
.chart-empty { fill:var(--muted); font-size:14px; }
.chart-legend { display:flex; flex-wrap:wrap; gap:18px; margin-top:10px; color:var(--muted); font-size:11px; }
.chart-legend span { display:flex; align-items:center; gap:7px; }
.legend-line { width:18px; height:3px; background:var(--blue); }
.legend-dot { width:8px; height:8px; border-radius:50%; background:var(--red); }
.detail-bottom { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.period-list { display:grid; gap:14px; }
.period-row { display:grid; grid-template-columns:90px 1fr auto; gap:10px; align-items:center; font-size:12px; }
.period-bar { height:8px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.07); }
.period-bar span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--pink),var(--blue)); }
.period-row strong { min-width:65px; text-align:right; }
@media (max-width:620px) {
  .detail-hero { align-items:flex-start; padding:20px; }
  .detail-heading { align-items:flex-start; }
  .detail-heading .service-icon { flex-basis:42px; width:42px; height:42px; }
  .detail-stats,.detail-bottom { grid-template-columns:1fr; }
  .detail-panel-head { align-items:flex-start; flex-direction:column; }
  .period-tabs { width:100%; }
  .period-tab { flex:1; }
  .chart-panel { padding:16px; }
}
@media (max-width:380px) {
  .detail-hero { display:block; }
  .detail-hero > .badge { display:inline-block; margin:14px 0 0 58px; }
  .period-row { grid-template-columns:78px 1fr auto; gap:7px; font-size:11px; }
}