/* ============================================================================
   Mission Control — "Kommandobrücke" Cosmic Theme
   Dunkel, atmosphärisch. CloudForge = Blau (Hue 230), ChatForge = Violett (300).
   ============================================================================ */
:root{
  --bg:#05060d; --bg2:#080a16;
  --fg:#eef1fb; --muted:#8b93b4; --faint:#5b6385;
  --line:#ffffff14; --glass:#0e1124cc;
  --ok:#34d399; --okg:52,211,153;
  --warn:#fbbf24; --warng:251,191,36;
  --bad:#fb7185; --badg:251,113,133;
  --info:#60a5fa; --infog:96,165,250;
  --gray:#94a3b8; --grayg:148,163,184;
  --a:#7c93ff; --a2:#b9c6ff; --ag:120,140,255;  /* Default-Akzent (z.B. .enter außerhalb eines Gateways) */
  --r:18px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--fg);
  font-family:"Inter",system-ui,"Segoe UI",Roboto,sans-serif;
  font-size:14px; line-height:1.5;
  min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.ic{display:inline-block;vertical-align:-.18em;flex-shrink:0}
.mono{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace}

/* ── Hintergrund: Sternenfeld-Canvas + Nebel ────────────────────────────── */
#space{position:fixed;inset:0;z-index:0;width:100%;height:100%;display:block}
.nebula{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 18% 22%, rgba(91,140,255,.18), transparent 60%),
    radial-gradient(58vw 58vw at 84% 30%, rgba(176,108,255,.16), transparent 60%),
    radial-gradient(80vw 50vw at 50% 120%, rgba(52,211,153,.07), transparent 60%);
  animation:nebula 22s ease-in-out infinite alternate;
}
@keyframes nebula{from{opacity:.75;transform:scale(1)}to{opacity:1;transform:scale(1.08)}}

/* Inhalt liegt über dem Hintergrund */
body>header,body>main,body>footer,.pwbanner,.demobadge{position:relative;z-index:2}

/* Boot-Reveal */
.boot main,.boot header,.boot footer{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.boot header{animation-delay:.02s}.boot footer{animation-delay:.18s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;row-gap:8px;
  padding:20px 34px;
}
.brand{display:flex;align-items:center;gap:14px}
.brand .badge-ic{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  color:#cfe0ff;background:linear-gradient(135deg,rgba(91,140,255,.25),rgba(176,108,255,.25));
  border:1px solid #ffffff22;box-shadow:0 0 26px rgba(120,140,255,.35), inset 0 0 18px rgba(120,140,255,.15);
}
.brand .badge-ic .ic{width:24px;height:24px;animation:float 7s ease-in-out infinite}
.brand-title{font-weight:800;letter-spacing:.34em;font-size:15px}
.brand-sub{display:block;font-size:10.5px;letter-spacing:.22em;color:var(--faint);text-transform:uppercase;margin-top:2px}
.top-right{display:flex;align-items:center;gap:22px}
.clock{
  font-family:ui-monospace,monospace;font-size:22px;font-weight:600;letter-spacing:.12em;
  color:#dbe6ff;text-shadow:0 0 18px rgba(120,150,255,.45)
}
.who{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:7px}
.who .ic{width:14px;height:14px}
.who a{color:#bcd0ff;font-weight:600;display:inline-flex;align-items:center;gap:5px}
.who a:hover{color:#fff}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ── Banner / Badges ──────────────────────────────────────────────────────── */
.pwbanner{
  margin:0 34px 4px;padding:10px 16px;border-radius:12px;font-size:13px;
  background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.4);color:#fde8b0;
}
.demobadge{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:5;
  font-size:10px;letter-spacing:.28em;color:#cbd5ff;background:#ffffff14;
  border:1px solid #ffffff22;padding:4px 12px;border-radius:999px;backdrop-filter:blur(8px)
}

/* ── Hero / Overall ───────────────────────────────────────────────────────── */
.bridge{padding:8px 34px 40px;max-width:1180px;margin:0 auto}
.hero{position:relative;text-align:center;padding:30px 0 26px}
.hero-emblem{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:340px;height:340px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(var(--hs,120,150,255),.16), transparent 62%);
  filter:blur(6px);animation:breathe 6s ease-in-out infinite
}
@keyframes breathe{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}}
.hero-title{
  position:relative;margin:0;font-size:clamp(30px,5vw,52px);font-weight:800;
  letter-spacing:.18em;
  background:linear-gradient(90deg,#9ab6ff,#e9d4ff 55%,#a6f0d8);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(150,160,255,.25);
}
.hero-status{
  position:relative;display:inline-flex;align-items:center;gap:10px;margin-top:14px;
  padding:8px 18px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.04em;
  background:#ffffff0a;border:1px solid #ffffff1a;backdrop-filter:blur(8px)
}
.hero-status .pulse{width:11px;height:11px;border-radius:50%}
/* status-Farben fürs Hero */
.hero[data-status]{--hs:120,150,255}
.hero[data-status=operational]{--s:var(--ok);--sg:var(--okg);--hs:52,211,153}
.hero[data-status=degraded]{--s:var(--warn);--sg:var(--warng);--hs:251,191,36}
.hero[data-status=major_outage]{--s:var(--bad);--sg:var(--badg);--hs:251,113,133}
.hero[data-status=maintenance]{--s:var(--info);--sg:var(--infog);--hs:96,165,250}
.hero[data-status=unknown]{--s:var(--gray);--sg:var(--grayg);--hs:148,163,184}
.hero-status .pulse{background:var(--s,#9ab6ff);box-shadow:0 0 0 0 rgba(var(--sg,120,150,255),.7);animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(var(--sg,120,150,255),.55)}70%{box-shadow:0 0 0 13px rgba(var(--sg,120,150,255),0)}100%{box-shadow:0 0 0 0 rgba(var(--sg,120,150,255),0)}}

/* ── Gateways ─────────────────────────────────────────────────────────────── */
.gateways{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:8px}
@media(max-width:1024px){.gateways{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.gateways{grid-template-columns:1fr}}

.glass{
  background:linear-gradient(180deg,rgba(20,24,46,.66),rgba(10,12,26,.72));
  border:1px solid var(--line);border-radius:var(--r);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.gateway{
  position:relative;padding:30px 26px 26px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
}
/* accent (brand) + status farben */
.gateway[data-accent=blue]{--a:#5b8cff;--a2:#9ab6ff;--ag:91,140,255}
.gateway[data-accent=violet]{--a:#b06cff;--a2:#d6b3ff;--ag:176,108,255}
.gateway[data-accent=green]{--a:#2dd4a0;--a2:#9af0d4;--ag:45,212,160}
.gateway[data-accent=amber]{--a:#e6a23c;--a2:#ffd591;--ag:230,162,60}
.gateway[data-status=operational]{--s:var(--ok);--sg:var(--okg)}
.gateway[data-status=degraded]{--s:var(--warn);--sg:var(--warng)}
.gateway[data-status=major_outage]{--s:var(--bad);--sg:var(--badg)}
.gateway[data-status=offline]{--s:var(--bad);--sg:var(--badg)}
.gateway[data-status=maintenance]{--s:var(--info);--sg:var(--infog)}
.gateway[data-status=unknown]{--s:var(--gray);--sg:var(--grayg)}
/* sanfter Marken-Schein am Rand */
.gateway::before{
  content:"";position:absolute;inset:0;border-radius:var(--r);padding:1px;pointer-events:none;
  background:linear-gradient(160deg,rgba(var(--ag),.55),transparent 42%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.9
}
.gateway::after{
  content:"";position:absolute;left:50%;top:-30%;width:120%;height:80%;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(var(--ag),.16),transparent);pointer-events:none
}
.gateway:hover{transform:translateY(-6px);box-shadow:0 24px 60px -20px rgba(var(--ag),.5)}

/* Portal-Ring */
.portal{position:relative;width:230px;height:230px;display:grid;place-items:center;margin-bottom:6px}
.portal .ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring-track{fill:none;stroke:#ffffff10;stroke-width:3}
.ring-prog{fill:none;stroke:var(--s);stroke-width:4;stroke-linecap:round;
  filter:drop-shadow(0 0 7px rgba(var(--sg),.85));
  transition:stroke .6s ease,stroke-dashoffset .8s ease;animation:pulseStroke 3.4s ease-in-out infinite}
@keyframes pulseStroke{0%,100%{opacity:.95}50%{opacity:.55}}
.ring-dash{fill:none;stroke:var(--a);stroke-width:2;stroke-dasharray:1.5 11;opacity:.45;
  transform-origin:center;animation:spin 16s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* innerer Statusschein */
.portal::before{content:"";position:absolute;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--sg),.22),transparent 70%);filter:blur(4px)}
.portal-core{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px}
.sys-glyph{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;color:var(--a2);
  background:linear-gradient(135deg,rgba(var(--ag),.22),rgba(var(--ag),.05));
  border:1px solid rgba(var(--ag),.4);box-shadow:0 0 24px rgba(var(--ag),.3)}
.sys-glyph .ic{width:30px;height:30px}
.sys-label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--s);
  text-shadow:0 0 14px rgba(var(--sg),.5)}

.gw-head{display:flex;align-items:baseline;gap:10px;margin-top:6px}
.gw-head h2{margin:0;font-size:24px;font-weight:800;letter-spacing:.02em}
.gw-head .tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
/* Runde-2: "betriebsbereit seit 3 h" — dezente Statusdauer unter dem Label. */
.gw-since{margin:5px 0 0;font-size:11px;letter-spacing:.04em;color:var(--faint);
  display:inline-flex;align-items:center;gap:6px;min-height:14px}
.gw-since::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--s,var(--gray));box-shadow:0 0 7px 1px rgba(var(--sg),.6)}
.gw-since[hidden]{display:none}
.gw-summary{margin:6px 0 2px;color:var(--muted);font-size:13px;min-height:20px;max-width:34ch}

.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:14px 0 18px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;
  font-size:12px;font-weight:600;background:#ffffff08;border:1px solid #ffffff14;color:#c7cdec}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gray);box-shadow:0 0 8px 1px currentColor}
.chip[data-status=operational]{color:var(--ok)}
.chip[data-status=degraded]{color:var(--warn)}
.chip[data-status=major_outage],.chip[data-status=offline]{color:var(--bad)}
.chip[data-status=info]{color:var(--info)}
.chip[data-status=unknown]{color:var(--gray)}
.chip[data-status]::before{background:currentColor}
.chip>span{color:#c7cdec}

/* v2: Telemetrie-Zeile + Uptime-Ribbon */
/* margin-top:auto verankert den GESAMTEN unteren Block (Telemetrie -> Ribbon ->
   URL -> Eintreten) am Kartenboden, damit er ueber alle Karten buendig liegt —
   unabhaengig davon, wie viele Status-Chips die Karte darueber hat. */
.telemetry{display:flex;gap:18px;justify-content:center;margin:auto 0 12px;
  font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:11.5px;color:var(--muted)}
.tele{display:inline-flex;align-items:center;gap:6px;letter-spacing:.04em}
.tele b{color:#dbe4ff;font-weight:600}
.tele[data-warn] b{color:var(--warn)}
.tele[data-bad] b{color:var(--bad)}
.ribbon{display:flex;gap:2px;height:14px;align-items:flex-end;margin:0 0 18px;
  padding:4px 6px;border-radius:7px;background:#00000033;border:1px solid #ffffff0d}
.ribbon i{flex:1;min-width:2px;max-width:7px;height:100%;border-radius:1.5px;background:#ffffff14}
.ribbon i[data-s=operational]{background:rgba(var(--okg),.75)}
.ribbon i[data-s=degraded]{background:rgba(var(--warng),.8)}
.ribbon i[data-s=major_outage],.ribbon i[data-s=offline]{background:rgba(var(--badg),.85)}
.ribbon i[data-s=maintenance]{background:rgba(var(--infog),.8)}
.ribbon i[data-s=unknown]{background:rgba(var(--grayg),.45)}

.enter{display:inline-flex;align-items:center;gap:9px;
  padding:12px 26px;border-radius:12px;font-weight:700;font-size:14px;letter-spacing:.03em;
  color:#fff;background:linear-gradient(100deg,rgba(var(--ag),.95),rgba(var(--ag),.6));
  border:1px solid rgba(var(--ag),.7);box-shadow:0 8px 26px -8px rgba(var(--ag),.7);
  transition:transform .2s,box-shadow .2s,filter .2s}
.enter:hover{transform:translateY(-2px) scale(1.02);filter:brightness(1.12);
  box-shadow:0 14px 34px -8px rgba(var(--ag),.9)}
.enter .ic{width:17px;height:17px}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.footbar{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  padding:18px;color:var(--faint);font-size:12px;letter-spacing:.04em}
.footbar .sep{opacity:.5}
#laststamp{color:var(--muted)}

/* ── Login ────────────────────────────────────────────────────────────────── */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:380px;max-width:92vw;padding:38px 34px;display:flex;flex-direction:column;
  align-items:stretch;text-align:center;position:relative;overflow:hidden}
.login-card::after{content:"";position:absolute;left:50%;top:-40%;width:160%;height:80%;
  transform:translateX(-50%);background:radial-gradient(closest-side,rgba(120,150,255,.18),transparent);pointer-events:none}
.login-emblem{width:72px;height:72px;border-radius:20px;margin:0 auto 16px;display:grid;place-items:center;
  color:#d6e2ff;background:linear-gradient(135deg,rgba(91,140,255,.3),rgba(176,108,255,.3));
  border:1px solid #ffffff2a;box-shadow:0 0 36px rgba(120,140,255,.45),inset 0 0 22px rgba(120,140,255,.2)}
.login-emblem .ic{width:38px;height:38px;animation:float 7s ease-in-out infinite}
.login-title{margin:0;font-size:26px;font-weight:800;letter-spacing:.2em;
  background:linear-gradient(90deg,#9ab6ff,#e9d4ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.login-title span{opacity:.75}
.login-sub{margin:6px 0 22px;color:var(--faint);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.login-card input{width:100%;padding:13px 14px;margin-bottom:13px;color:var(--fg);font-size:15px;
  background:#0006;border:1px solid var(--line);border-radius:11px;outline:none;transition:border .2s,box-shadow .2s}
.login-card input:focus{border-color:rgba(120,150,255,.7);box-shadow:0 0 0 3px rgba(120,150,255,.18)}
.login-card button{width:100%;padding:13px;margin-top:4px;border:0;border-radius:11px;cursor:pointer;
  font-weight:700;font-size:15px;letter-spacing:.04em;color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:linear-gradient(100deg,#5b8cff,#b06cff);box-shadow:0 10px 30px -8px rgba(120,120,255,.8);transition:transform .2s,filter .2s}
.login-card button:hover{transform:translateY(-2px);filter:brightness(1.1)}
.err{display:flex;align-items:center;gap:8px;justify-content:center;background:rgba(251,113,133,.12);
  border:1px solid rgba(251,113,133,.4);color:#fecdd3;padding:10px 12px;border-radius:10px;font-size:13px;margin-bottom:14px}
.err .ic{width:15px;height:15px}
.warnpw{background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.4);color:#fde8b0;
  padding:9px 12px;border-radius:10px;font-size:12px;margin-bottom:14px}

/* v4: SSO-Button + Break-Glass-Fallback */
.ssobtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:14px;border-radius:11px;font-weight:700;font-size:15px;letter-spacing:.02em;color:#fff;
  background:linear-gradient(100deg,#2dd4a0,#5b8cff);box-shadow:0 10px 30px -8px rgba(60,200,170,.7);
  transition:transform .2s,filter .2s}
.ssobtn:hover{transform:translateY(-2px);filter:brightness(1.1)}
.ssobtn .ic{width:18px;height:18px}
.divider{display:flex;align-items:center;gap:12px;margin:18px 0 10px;color:var(--faint);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.fallback summary{cursor:pointer;color:var(--muted);font-size:12.5px;padding:6px;
  border-radius:8px;list-style:none;text-align:center}
.fallback summary::-webkit-details-marker{display:none}
.fallback summary:hover{color:var(--fg);background:#ffffff08}

/* Refresh-Button + Stale/Offline-Indikator */
.iconbtn{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:#ffffff0a;border:1px solid #ffffff1a;color:#bcd0ff;cursor:pointer;
  transition:background .2s,color .2s,transform .2s}
.iconbtn:hover{background:#ffffff16;color:#fff;transform:rotate(15deg)}
.iconbtn .ic{width:17px;height:17px}
.iconbtn.spin .ic{animation:spin .65s linear}
body.stale #laststamp{color:#fde8b0}
body.stale #laststamp::before{content:"⚠ "}

/* Runde-2: Public-Mini-Ribbon (grob ok/nok) + Tally + Incidents-Zeile.
   Bewusst informationsarm — keine Namen/URLs, nur Punkte + Zahlen. */
.pub-ribbon{display:flex;justify-content:center;gap:6px;margin:0 0 6px}
.pub-ribbon i{width:14px;height:6px;border-radius:3px;background:var(--bad);
  box-shadow:0 0 8px rgba(var(--badg),.55)}
.pub-ribbon i[data-ok="1"]{background:var(--ok);box-shadow:0 0 8px rgba(var(--okg),.6)}
.pub-tally{margin:0 0 14px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint)}
.pub-incidents{margin:0 0 16px;padding:8px 14px;border-radius:10px;font-size:12.5px;
  background:rgba(251,191,36,.10);border:1px solid rgba(251,191,36,.32);color:#fde8b0}

/* v3: Public-Status-Zeilen */
.pubrow{display:flex;align-items:center;gap:11px;padding:11px 14px;margin-bottom:9px;
  border-radius:11px;background:#ffffff07;border:1px solid #ffffff10;text-align:left}
.pubrow .pubdot{width:10px;height:10px;border-radius:50%;flex-shrink:0;background:var(--gray)}
.pubrow[data-status=operational] .pubdot{background:var(--ok);box-shadow:0 0 9px rgba(var(--okg),.8)}
.pubrow[data-status=degraded] .pubdot{background:var(--warn);box-shadow:0 0 9px rgba(var(--warng),.8)}
.pubrow[data-status=major_outage] .pubdot,.pubrow[data-status=offline] .pubdot{background:var(--bad);box-shadow:0 0 9px rgba(var(--badg),.8)}
.pubrow[data-status=maintenance] .pubdot{background:var(--info)}
.pubrow .pubname{font-weight:700;font-size:13.5px}
.pubrow .pubname small{color:var(--faint);font-weight:500}
.pubrow .publabel{margin-left:auto;font-size:12px;color:var(--muted)}

/* ── Skip-Link (A11y) ───────────────────────────────────────────────────── */
.skip-link{position:fixed;top:-60px;left:12px;z-index:50;padding:9px 16px;border-radius:10px;
  background:#0e1124;border:1px solid rgba(120,150,255,.6);color:#dbe6ff;font-size:13px;font-weight:600;
  transition:top .18s ease}
.skip-link:focus{top:12px;outline:2px solid rgba(120,150,255,.8);outline-offset:2px}

/* ── Hero-Kennzahlen-Strip ──────────────────────────────────────────────── */
.hero-metrics{position:relative;margin:20px auto 0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:10px;max-width:760px}
.hero-metrics .metric{display:flex;flex-direction:column;gap:3px;min-width:150px;flex:1 1 150px;
  padding:11px 16px;border-radius:13px;background:#ffffff07;border:1px solid #ffffff12;backdrop-filter:blur(8px)}
.hero-metrics dt{margin:0;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.hero-metrics dd{margin:0;font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;
  font-size:19px;font-weight:600;color:#dbe6ff;letter-spacing:.02em}
@media(max-width:620px){.hero-metrics .metric{min-width:0;flex:1 1 45%}}

/* Incidents-Telemetrie: 0 ist dezent (Standardfarbe), >0 erbt --bad via [data-bad]. */
.tele[data-role=incidents] b{color:var(--muted)}
.tele[data-role=incidents][data-bad] b{color:var(--bad)}

/* ── Ribbon-Achse + Legende ─────────────────────────────────────────────── */
.ribbon-wrap{width:100%;margin:0 0 14px}
.ribbon-wrap .ribbon{margin:0 0 3px}
.ribbon-axis{display:flex;justify-content:space-between;font-size:9.5px;letter-spacing:.08em;
  color:var(--faint);padding:0 2px}
.ribbon-legend{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px;
  margin:18px auto 0;font-size:11px;color:var(--faint);letter-spacing:.03em}
.ribbon-legend>span:first-child{color:var(--muted);font-weight:600;margin-right:4px}
.ribbon-legend .lg{display:inline-block;width:11px;height:8px;border-radius:2px;margin:0 2px 0 8px;vertical-align:-1px}
.ribbon-legend .lg-ok{background:rgba(var(--okg),.75)}
.ribbon-legend .lg-warn{background:rgba(var(--warng),.8)}
.ribbon-legend .lg-bad{background:rgba(var(--badg),.85)}

/* ── Gateway-URL + Copy-Button ──────────────────────────────────────────── */
.gw-url{display:flex;align-items:center;gap:6px;max-width:100%;margin:0 0 14px;
  font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:11px;color:var(--faint)}
.gw-url-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22ch}
.copybtn{display:grid;place-items:center;width:26px;height:26px;flex-shrink:0;border-radius:8px;
  background:#ffffff0a;border:1px solid #ffffff18;color:#aebbe6;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s}
.copybtn:hover{background:#ffffff16;color:#fff}
.copybtn:focus-visible{outline:2px solid rgba(120,150,255,.8);outline-offset:2px}
.copybtn.copied{color:var(--ok);border-color:rgba(var(--okg),.5);background:rgba(var(--okg),.12)}

/* ── Status-Flip-Glow ───────────────────────────────────────────────────── */
.gateway.flip{animation:flipGlow 2.2s ease-out 1}
@keyframes flipGlow{
  0%{box-shadow:0 0 0 0 rgba(var(--sg),0)}
  18%{box-shadow:0 0 30px 2px rgba(var(--sg),.55),0 0 0 1px rgba(var(--sg),.6) inset}
  100%{box-shadow:0 0 0 0 rgba(var(--sg),0)}
}

/* ── Toast-Zeile ────────────────────────────────────────────────────────── */
.toasts{position:fixed;right:18px;bottom:18px;z-index:40;display:flex;flex-direction:column;
  gap:8px;align-items:flex-end;pointer-events:none;max-width:min(380px,80vw)}
.toast{padding:9px 14px;border-radius:11px;font-size:12.5px;color:#dbe6ff;
  background:var(--glass);border:1px solid #ffffff1c;backdrop-filter:blur(10px);
  box-shadow:0 12px 30px -12px #000a;opacity:0;transform:translateY(8px);
  transition:opacity .25s ease,transform .25s ease}
.toast.show{opacity:1;transform:none}
.toast-ok{border-left:3px solid var(--ok)}
.toast-bad{border-left:3px solid var(--bad)}

/* ── Tastatur-Hilfe-Overlay ─────────────────────────────────────────────── */
.help-overlay{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:24px;
  background:rgba(4,5,12,.7);backdrop-filter:blur(6px);opacity:0;transition:opacity .2s ease}
.help-overlay.on{opacity:1}
.help-overlay[hidden]{display:none}
.help-card{position:relative;width:440px;max-width:92vw;padding:30px 30px 26px;text-align:left}
.help-card h2{margin:0 0 18px;font-size:18px;font-weight:800;letter-spacing:.04em;
  background:linear-gradient(90deg,#9ab6ff,#e9d4ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.help-close{position:absolute;top:14px;right:14px;width:32px;height:32px;font-size:15px;color:#bcd0ff}
.help-keys{margin:0;display:flex;flex-direction:column;gap:11px}
.help-keys>div{display:flex;align-items:baseline;gap:14px}
.help-keys dt{flex:0 0 84px;margin:0;text-align:right}
.help-keys dd{margin:0;color:var(--muted);font-size:13px}
.help-keys kbd{display:inline-block;min-width:20px;padding:3px 8px;border-radius:7px;text-align:center;
  font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:12px;color:#dbe6ff;
  background:#ffffff0e;border:1px solid #ffffff22;box-shadow:0 2px 0 #ffffff14}

/* ── Runde-2: Mobile (<620px) ───────────────────────────────────────────────
   Topbar entzerren, Portalring/Glyph verkleinern, Nexus-Button ausblenden
   (die Nexus-3D-Bühne ist auf kleinen Touch-Screens kaum bedienbar). */
@media(max-width:620px){
  .topbar{padding:14px 16px;gap:10px}
  .top-right{gap:12px}
  .clock{font-size:16px;letter-spacing:.08em}
  .brand .badge-ic{width:38px;height:38px}
  .brand-title{font-size:13px;letter-spacing:.24em}
  .who{font-size:11px}
  .bridge{padding:8px 16px 32px}
  /* Portalring + Glyph kompakter, damit die Karte nicht von ihm dominiert wird. */
  .portal{width:170px;height:170px}
  .portal::before{width:104px;height:104px}
  .sys-glyph{width:52px;height:52px}
  .sys-glyph .ic{width:24px;height:24px}
  .gateway{padding:24px 18px 22px}
  /* Nexus-Button raus (kein hover, schwer per Touch zu steuern). */
  #nexus-open{display:none}
}
/* Touch-Geräte ohne Hover: Nexus ebenfalls ausblenden (greift auch >620px,
   z.B. Tablets) — er lebt von Hover/Drag und Tastatur. */
@media(hover:none) and (pointer:coarse){
  #nexus-open{display:none}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important}
  /* Flip: kein Pulsieren, nur statischer Rahmen während die .flip-Klasse hängt. */
  .gateway.flip{animation:none!important;box-shadow:0 0 0 1px rgba(var(--sg),.7) inset,0 0 18px rgba(var(--sg),.4)}
  .toast{transition:none}
}