/* ==========================================================================
   NØDE.ops — Layout & Komponenten
   Nutzt ausschließlich die Design-Tokens aus theme.css (Marken-DNA).
   Motion läuft per Default voll; „Ruhiger Modus" ist OPT-IN
   (body[data-motion="calm"]) — kein harter prefers-reduced-motion-Kahlschlag.
   ========================================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--grad-bg);
  color: var(--txt);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #22304a; border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }
a { color: var(--brand); }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

/* ---- Opt-In: Ruhiger Modus ---------------------------------------------- */
body[data-motion="calm"] *,
body[data-motion="calm"] *::before,
body[data-motion="calm"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}

/* ================= TOPBAR / HUD ================= */
.topbar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; row-gap: 8px;
  padding: 11px 22px; border-bottom: 1px solid var(--rail);
  background: linear-gradient(180deg, rgba(20,26,37,.94), rgba(16,20,29,.72));
  position: sticky; top: 0; z-index: 40; backdrop-filter: blur(7px);
}
.brand { display: flex; align-items: center; gap: 10px; }
/* SVG-Logo (vektorieller Node-Mark + Wortmarke) — Farben über Tokens, Gold-Glow wie im HUD. */
.logo { height: 24px; width: auto; display: block; }
.logo-md { height: 26px; }   /* Lobby-Karte */
.logo-lg { height: 30px; }   /* Auth-/Verify-Karte */
.logo-mark { filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), .45)); }
.lg-ring { fill: none; stroke: var(--accent); stroke-width: 1.6; opacity: .92; }
.lg-ring2 { fill: none; stroke: var(--brand); stroke-width: 1.4; opacity: .85; }
.lg-node, .lg-core { fill: var(--accent); }
.lg-word { font: 700 17px var(--disp); letter-spacing: .5px; fill: var(--txt); }
.lg-dot { fill: var(--accent); }
.lg-ops { fill: var(--muted); }
.tierbadge {
  font: 600 9px/1 var(--disp); letter-spacing: 1.4px; color: var(--brand);
  border: 1px solid rgba(var(--brand-rgb), .4); border-radius: var(--r-pill);
  padding: 4px 9px; background: rgba(var(--brand-rgb), .08); align-self: center;
}
.spacer { flex: 1; }
.hud { display: flex; align-items: center; gap: 20px; }
.hud .cell { text-align: right; line-height: 1.15; }
.hud .lbl { font: 600 9px/1 var(--disp); letter-spacing: 1.4px; text-transform: uppercase; color: var(--dim); }
.hud .val { font: 600 15px/1.2 var(--mono); margin-top: 4px; }
.hud .val.cyan { color: var(--cyan); }
.hud .val.green { color: var(--green); }
.hud .val.accent { color: var(--accent); }
.hud .cell.foerderung { background: color-mix(in oklab, var(--accent) 15%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 42%, transparent); border-radius: 8px; padding: 4px 10px; }
.hud .cell.foerderung .lbl { color: var(--accent); }
.hud .cell.foerderung[hidden] { display: none; }
.hud .cell.schutz { background: color-mix(in oklab, var(--brand) 15%, transparent); border: 1px solid color-mix(in oklab, var(--brand) 42%, transparent); border-radius: 8px; padding: 4px 10px; }
.hud .cell.schutz .lbl { color: var(--brand); }
.hud .cell.schutz[hidden] { display: none; }

/* --- Ertrags-Tooltip am HUD (Schicht 5) --- */
.hud .cell.ertrag { position: relative; cursor: help; }
.inc-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 200px;
  background: var(--panel); border: 1px solid var(--rail); border-radius: var(--r); box-shadow: var(--shadow-panel);
  padding: 9px 11px; display: none; text-align: left; }
.hud .cell.ertrag:hover .inc-pop, .hud .cell.ertrag:focus-within .inc-pop { display: block; }
.ip-row { display: flex; justify-content: space-between; gap: 18px; font: 500 12px/1.7 var(--mono); }
.ip-row .ip-l { color: var(--dim); }
.ip-row.in .ip-v { color: var(--green); }
.ip-row.out .ip-v { color: var(--red); }
.ip-row.net .ip-l, .ip-row.net .ip-v { color: var(--txt); font-weight: 700; }
.ip-sep { height: 1px; background: var(--rail); margin: 6px 0; }

/* --- Wirtschafts-Page (Schicht 5) --- */
.eco-head { margin-bottom: 14px; }
.eco-head h2 { margin: 0 0 2px; }
.eco-sub { color: var(--dim); font-size: 13px; }
.eco-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.eco-card { background: var(--panel); border: 1px solid var(--rail); border-radius: var(--r-lg); padding: 14px 16px; }
.eco-card.span2 { grid-column: 1 / -1; }
.eco-card h3 { margin: 0 0 10px; font: 600 12px/1.3 var(--disp); letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.eco-hint { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--dim); font-size: 11px; }
.eco-flow { display: flex; justify-content: space-between; font: 500 13px/2 var(--mono); }
.eco-flow span { color: var(--dim); }
.eco-flow.in b { color: var(--green); }
.eco-flow.out b { color: var(--red); }
.eco-net { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rail); font: 700 15px/1.4 var(--mono); }
.eco-net.pos b { color: var(--green); }
.eco-net.neg b { color: var(--red); }
.eco-sub2 { color: var(--dim); font-size: 11px; margin-top: 3px; }
.eco-rack { display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; font: 500 12px/1.9 var(--mono); color: var(--body); }
.eco-rack .er-id { color: var(--accent); }
/* Vollbreite Karte: viele Racks würden als eine lange Spalte ausleiern. Ab genug Platz
   in mehrere Spalten brechen — der Inhalt wächst in die Breite, nicht ins Endlose. */
.eco-card.racks .eco-rack { border-bottom: 1px solid var(--rail); }
.eco-card.racks .eco-rack:last-child { border-bottom: 0; }
@media (min-width: 900px) {
  .eco-card.racks > .eco-rack { break-inside: avoid; }
  .eco-card.racks { column-count: 2; column-gap: 26px; }
  .eco-card.racks h3 { column-span: all; }
}
.eco-empty { color: var(--dim); font-size: 13px; padding: 6px 0; }
.sip-list { display: flex; flex-direction: column; gap: 6px; }
/* Schicht 8: Vermietungs-Produkte — Angebot-Produktzeile, aktiver-Vertrag-Tag, Cluster-Panel, Placement-Picker */
.o-prod { font: 500 10px/1.4 var(--mono); color: var(--muted); margin: 2px 0 4px; }
.jprod { font: 700 9px/1 var(--mono); letter-spacing: .3px; padding: 2px 6px; border-radius: 4px; margin-right: 6px; border: 1px solid var(--rail); color: var(--body); }
.jprod-vps { border-color: var(--brand); color: var(--brand); }
.jprod-dedicated { border-color: var(--accent); color: var(--accent); }
.jprod-cluster { border-color: var(--green, #5ac878); color: var(--green, #5ac878); }
.jprod-ha { border-color: var(--brand); background: rgba(var(--accent-rgb, 209,148,41), .14); color: var(--accent); }
.clu-list { display: flex; flex-direction: column; gap: 8px; }
.clu-row { border: 1px solid var(--rail); border-radius: var(--r); padding: 9px 11px; display: flex; flex-direction: column; gap: 6px; background: var(--panel2); }
.clu-h { display: flex; align-items: center; gap: 8px; font: 600 12px/1.2 var(--mono); }
.clu-ha { font: 700 8px/1 var(--mono); letter-spacing: .4px; color: var(--accent); border: 1px solid var(--accent); border-radius: 4px; padding: 2px 5px; }
.clu-cap { margin-left: auto; font: 500 10px/1.2 var(--mono); color: var(--muted); }
.clu-devs { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.clu-chip { font: 500 10px/1.2 var(--mono); padding: 3px 7px; border-radius: 4px; border: 1px solid var(--rail); background: transparent; color: var(--body); cursor: pointer; }
.clu-chip:hover, .clu-chip:focus-visible { border-color: var(--red); color: var(--red); }
.clu-name-edit { font: 600 12px/1.2 var(--mono); color: var(--txt); background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); padding: 3px 6px; max-width: 220px; }
.clu-name-edit:hover { border-color: var(--rail); }
.clu-name-edit:focus { border-color: var(--brand); background: var(--panel); outline: none; }
.pl-desc { font: 500 11px/1.5 var(--mono); color: var(--muted); margin-bottom: 12px; border-left: 2px solid var(--rail); padding-left: 9px; }
.pl-cont { font: 500 10px/1 var(--mono); color: var(--muted); }
.clu-none { font: 500 10px/1.2 var(--mono); color: var(--dim); }
.clu-addsel, .clu-new input { font: 500 11px/1 var(--mono); padding: 5px 8px; border-radius: var(--r-sm); border: 1px solid var(--rail); background: var(--panel); color: var(--body); }
.clu-act { display: flex; gap: 6px; }
.clu-new { display: flex; gap: 8px; margin-top: 10px; }
.clu-new input { flex: 1 1 auto; }
#place-overlay { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; background: rgba(0,0,0,.55); }
#place-overlay[hidden] { display: none; }
.pl-card { width: min(420px, 92vw); background: var(--panel); border: 1px solid var(--rail); border-radius: var(--r-lg); box-shadow: var(--shadow-panel); padding: 16px 18px; font-family: var(--mono); }
.pl-head { font: 700 14px/1.2 var(--disp); letter-spacing: .3px; margin-bottom: 12px; }
.pl-prods { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pl-prod { display: flex; flex-direction: column; align-items: center; gap: 2px; font: 600 11px/1.1 var(--mono); padding: 7px 11px; border-radius: var(--r-sm); border: 1px solid var(--rail); background: transparent; color: var(--body); cursor: pointer; }
.pl-prod span { font: 500 8px/1 var(--mono); color: var(--muted); }
.pl-prod.on { border-color: var(--accent); background: rgba(var(--accent-rgb, 209,148,41), .14); color: var(--accent); }
.pl-tgt { margin-bottom: 10px; font: 500 12px/1.4 var(--mono); color: var(--muted); }
.pl-tgt select { margin-left: 8px; font: 500 12px/1 var(--mono); padding: 6px 9px; border-radius: var(--r-sm); border: 1px solid var(--rail); background: var(--panel); color: var(--body); }
.pl-none { color: var(--red); }
.pl-pay { font: 500 12px/1.5 var(--mono); color: var(--body); margin-bottom: 14px; }
.pl-foot { display: flex; gap: 8px; justify-content: flex-end; }
.sip-row { display: grid; grid-template-columns: minmax(90px, 1fr) 1.4fr auto auto auto; gap: 12px; align-items: center;
  font: 500 12px/1 var(--mono); padding: 7px 9px; background: var(--panel2); border-radius: var(--r-sm); }
.sip-row .sip-f { color: var(--body); }
.sip-row .sip-y { color: var(--green); }
.sip-row .sip-r { color: var(--dim); display: flex; align-items: center; gap: 5px; justify-content: flex-end; }
.risk-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.risk-dot.ok { background: var(--green); }
.risk-dot.warn { background: var(--amber); }
.risk-dot.hot { background: var(--red); }
@media (max-width: 720px) { .eco-grid { grid-template-columns: 1fr; } }
#hud-threat[data-level="RUHIG"] { color: var(--green); }
#hud-threat[data-level="ERHÖHT"] { color: var(--amber); }
#hud-threat[data-level="KRITISCH"] { color: var(--red); }
.hud .cell.hero .val { font-size: 17px; text-shadow: var(--glow-accent); }
.conn { display: flex; align-items: center; gap: 7px; font: 500 11px/1 var(--mono); color: var(--muted); }
.conn .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dim); }
.conn .dot.up { background: var(--green); box-shadow: var(--glow-green); animation: pulse 2.4s infinite; }
.conn .dot.down { background: var(--red); box-shadow: var(--glow-red); }
.motion-toggle {
  font: 600 10px/1 var(--disp); letter-spacing: 1px; color: var(--muted);
  background: transparent; border: 1px solid var(--rail); border-radius: var(--r-sm);
  padding: 8px 11px; cursor: pointer; white-space: nowrap;
}
.motion-toggle[aria-pressed="true"] { color: var(--bg); background: var(--brand); border-color: var(--brand); }

/* ================= NAV ================= */
.tabs {
  display: flex; gap: 7px; padding: 11px 22px;
  border-bottom: 1px solid var(--rail); background: rgba(16,20,29,.5);
  /* Klebt UNTER der Kopfzeile. `--topbar-h` misst app.js per ResizeObserver — die frühere
     harte 55px war geraten: sobald ein HUD-Badge (Förderung/Neulingsschutz) erscheint, wächst
     die Kopfzeile auf 63px und die Tab-Leiste schob sich beim Scrollen in sie hinein. */
  position: sticky; top: var(--topbar-h, 55px); z-index: 30; backdrop-filter: blur(7px);
}
.tabs button {
  position: relative; font: 600 11px/1 var(--disp); letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); background: transparent; border: 1px solid var(--rail);
  border-radius: 8px; padding: 10px 17px; cursor: pointer; transition: .15s;
}
.tabs button:hover { color: var(--txt); border-color: var(--brand); }
.tabs button.on { color: var(--bg); background: var(--brand); border-color: var(--brand); box-shadow: var(--glow-brand); }
.tabs .badge {
  position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; border-radius: 9px;
  background: var(--red); color: #fff; font: 700 10px/18px var(--mono); text-align: center; padding: 0 4px; display: none;
}
.tabs .badge.show { display: block; animation: pulse 1.1s infinite; }

/* ================= MAIN / VIEWS ================= */
main { max-width: 1440px; margin: 0 auto; padding: 20px 22px 48px; }
.view { display: none; }
.view.on { display: block; animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.panel { background: var(--grad-panel); border: 1px solid var(--rail); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-soft); }
.phead { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--rail); }
.phead h2 { margin: 0; font: 600 12px/1 var(--disp); letter-spacing: 1.5px; text-transform: uppercase; }
.phead .tag { font: 500 10px/1 var(--mono); color: var(--dim); }
.pbody { padding: 16px; }
.btn {
  font: 600 10px/1 var(--disp); letter-spacing: 1px; text-transform: uppercase;
  padding: 9px 14px; border-radius: var(--r-sm); cursor: pointer; background: transparent; color: var(--txt);
  border: 1px solid var(--rail); transition: .15s;
}
.btn:hover:not(:disabled) { border-color: var(--brand); }
.btn.accent { background: var(--accent); color: #20160a; border-color: var(--accent); }
.btn.accent:hover:not(:disabled) { background: var(--accent-hot); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---- RZ-Stat-Strip ---- */
.rzstats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
.rzstat { background: var(--grad-panel); border: 1px solid var(--rail); border-radius: var(--r); padding: 13px 15px; }
.rzstat .k { font: 600 9.5px/1 var(--disp); letter-spacing: 1.4px; text-transform: uppercase; color: var(--dim); }
.rzstat .v { font: 600 18px/1.1 var(--mono); margin: 8px 0; }
.rzstat .bar { height: 6px; border-radius: 3px; background: var(--bg2); border: 1px solid #1c2532; overflow: hidden; }
.rzstat .bar span { display: block; height: 100%; width: var(--w, 0%); background: var(--grad-accent); transition: width .4s; border-radius: 3px; }
.rzstat.warn .v { color: var(--red); }
.rzstat.warn .bar span { background: var(--red) !important; }
.rzstat.def .v { color: var(--brand); }
.rzstat.def .bar span { background: var(--grad-brand); }
.rzstat .cap { color: var(--dim); font-weight: 400; font-size: 12px; }

/* ---- Facility-Leiste ---- */
.facility-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border: 1px solid var(--rail); border-radius: var(--r); padding: 12px 16px; margin-bottom: 16px;
  background: linear-gradient(120deg, rgba(var(--brand-rgb),.06), rgba(var(--accent-rgb),.05)); }
.fac-info { display: flex; flex-direction: column; gap: 3px; }
.fac-info #fac-name { font: 600 14px/1 var(--disp); letter-spacing: .5px; }
.fac-info .fac-sub { font: 500 11px/1 var(--mono); color: var(--muted); }

/* ---- Räume + Rack-Karten ---- */
.rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.room { background: var(--grad-panel); border: 1px solid var(--rail); border-radius: var(--r-lg); padding: 15px; }
.room h3 { margin: 0 0 3px; font: 600 11px/1 var(--disp); letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.room .sub { font: 500 10px/1 var(--mono); color: var(--dim); margin-bottom: 13px; }
.rackrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rk { aspect-ratio: 3 / 4; border: 1px solid var(--rail); border-radius: var(--r); background: var(--panel2);
  padding: 10px; cursor: pointer; display: flex; flex-direction: column; transition: .15s; position: relative; overflow: hidden; }
.rk:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-panel); }
.rk .led { position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: var(--glow-green); animation: pulse 2.2s infinite; }
.rk .led.warn { background: var(--red); box-shadow: var(--glow-red); }
.rk .rn { font: 600 11px/1.2 var(--mono); }
.rk .rt { font: 500 8.5px/1.3 var(--mono); color: var(--dim); margin-top: 2px; }
.rk .ustack { flex: 1; display: flex; flex-direction: column-reverse; gap: 1.5px; margin: 10px 0; min-height: 40px; }
.rk .ucell { flex: 1; min-height: 2px; border-radius: 1px; background: #161d2a; }
.rk .ucell.fw { background: var(--red); } .rk .ucell.srv { background: var(--accent); }
.rk .ucell.stg { background: var(--cyan); } .rk .ucell.net { background: var(--brand); }
.rk .ucell.cool { background: var(--violet); } .rk .ucell.pdu { background: var(--amber); }
.rk .ucell.sec { background: var(--green); }
.rk .rkstat { font: 500 8.5px/1.4 var(--mono); color: var(--muted); }
.rk.empty { align-items: center; justify-content: center; border-style: dashed; color: var(--dim); }
.rk.empty:hover { color: var(--brand); }
.rk.empty .plus { font-size: 24px; font-family: var(--disp); }
.rk.empty small { font: 500 9px/1.4 var(--mono); text-align: center; margin-top: 4px; }
.rk.locked { opacity: .3; cursor: default; }
.rk.locked:hover { transform: none; border-color: var(--rail); box-shadow: none; }

/* ================= RACK-DETAIL ================= */
.rack-selrow { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.rack-selrow button { font: 500 11px/1 var(--mono); color: var(--muted); background: var(--panel2);
  border: 1px solid var(--rail); border-radius: var(--r-sm); padding: 8px 12px; cursor: pointer; }
.rack-selrow button.on { color: #20160a; background: var(--accent); border-color: var(--accent); }
.rackgrid { display: grid; grid-template-columns: 260px 1fr 340px; gap: 16px; align-items: start; }
.statline { margin-bottom: 14px; }
.statline .row { display: flex; justify-content: space-between; margin-bottom: 6px; }
.statline .name { font: 600 10px/1 var(--disp); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.statline .num { font: 600 12px/1 var(--mono); }
.bar { height: 6px; border-radius: 3px; background: var(--bg2); border: 1px solid #1c2532; overflow: hidden; }
.bar span { display: block; height: 100%; width: var(--w, 0%); transition: width .4s; }
.bar.b-accent span { background: var(--grad-accent); }
.bar.b-brand span { background: var(--grad-brand); }
.bar.over span { background: var(--red) !important; }
.budget-head { font: 600 9px/1 var(--disp); letter-spacing: 1.2px; text-transform: uppercase; color: var(--dim); margin: 2px 0 9px; }
.kv { display: flex; justify-content: space-between; font: 500 11px/1.95 var(--mono); color: var(--muted); }
.kv b { color: var(--txt); }
.divider { height: 1px; background: var(--rail); margin: 14px 0; }

.rack { border: 2px solid #2c3748; border-radius: var(--r); background: repeating-linear-gradient(180deg, #0c1119 0 2px, #0a0e15 2px 4px);
  padding: 8px; position: relative; min-height: 300px; }
.rack::before, .rack::after { content: ""; position: absolute; top: 8px; bottom: 8px; width: 9px;
  background: linear-gradient(180deg, #1b2432, #10161f); border: 1px solid #2c3748; border-radius: 3px; }
.rack::before { left: -1px; } .rack::after { right: -1px; }
.uslot { display: flex; align-items: center; height: 22px; margin: 2px 11px; border-radius: 5px; border: 1px dashed #202a38;
  color: var(--dim); font: 500 9px/1 var(--mono); padding: 0 10px; justify-content: center; letter-spacing: 1.5px; }
.dev { border: 1px solid #33405a; border-radius: 5px; justify-content: flex-start; color: var(--txt); letter-spacing: normal;
  background: linear-gradient(180deg, #1b2333, #141b28); box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  animation: slotin .3s ease; overflow: hidden; position: relative; height: var(--dev-h, 22px); }
.dev.fw { border-left: 3px solid var(--red); } .dev.srv { border-left: 3px solid var(--accent); }
.dev.stg { border-left: 3px solid var(--cyan); } .dev.net { border-left: 3px solid var(--brand); }
.dev.cool { border-left: 3px solid var(--violet); } .dev.pdu { border-left: 3px solid var(--amber); }
.dev.dead { filter: grayscale(.8) brightness(.6); }
.dev.qtn { filter: grayscale(.5) brightness(.75); outline: 1px dashed rgba(var(--accent-rgb), .5); outline-offset: -2px; }
.dev.upgradable { cursor: pointer; }
.dev.upgradable:hover { border-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .45); }
.dev.upgradable::after { content: "⚙"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--dim); font-size: 11px; opacity: 0; transition: opacity .15s; }
.dev.upgradable:hover::after { opacity: 1; }
.dev .led { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; margin-right: 9px; background: var(--green); box-shadow: var(--glow-green); }
.dev.dead .led { background: var(--red); box-shadow: none; }
.dev .host { font: 600 10px/1.1 var(--mono); }
.dev .model { font: 500 8.5px/1 var(--disp); letter-spacing: .3px; color: var(--muted); }
.dev .meta { margin-left: auto; text-align: right; font: 500 8.5px/1.25 var(--mono); color: var(--muted); }
.dev .meta b { color: var(--cyan); }

/* ---- Shop ---- */
.shop { padding: 12px; max-height: 560px; overflow: auto; }
.shop .grp { font: 600 9px/1 var(--disp); letter-spacing: 1.4px; text-transform: uppercase; color: var(--dim); margin: 10px 2px 8px; }
.shop .grp:first-child { margin-top: 0; }
.item { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--rail); border-radius: var(--r); margin-bottom: 8px; background: var(--panel2); }
.item .ic { width: 34px; height: 34px; flex: 0 0 auto; border-radius: var(--r-sm); display: grid; place-items: center; font: 700 10px/1 var(--disp); }
.ic.fw { background: rgba(var(--red-rgb),.12); color: var(--red); border: 1px solid rgba(var(--red-rgb),.3); }
.ic.srv { background: rgba(var(--accent-rgb),.12); color: var(--accent); border: 1px solid rgba(var(--accent-rgb),.3); }
.ic.stg { background: rgba(var(--cyan-rgb),.12); color: var(--cyan); border: 1px solid rgba(var(--cyan-rgb),.3); }
.ic.net { background: rgba(var(--brand-rgb),.12); color: var(--brand); border: 1px solid rgba(var(--brand-rgb),.3); }
.ic.cool { background: rgba(var(--violet-rgb),.12); color: var(--violet); border: 1px solid rgba(var(--violet-rgb),.3); }
.ic.pdu { background: rgba(var(--amber-rgb),.12); color: var(--amber); border: 1px solid rgba(var(--amber-rgb),.3); }
.ic.sec { background: rgba(var(--green-rgb),.12); color: var(--green); border: 1px solid rgba(var(--green-rgb),.3); }
.item .info { flex: 1; min-width: 0; }
.item .t { font: 600 12px/1.2 var(--mono); }
.item .d { font: 500 9px/1.4 var(--mono); color: var(--muted); margin-top: 3px; }
/* Specs bleiben einzeilig: bei knappem Panel lieber kürzen als die Karte wachsen lassen. */
.item .d { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Preiszeile: Preis links, Listenpreis-Marker rechts daneben — eigene Zeile, damit der
   Marker die Specs nicht in den Umbruch drückt (Karten blieben sonst ungleich hoch). */
.item .pr { display: flex; align-items: center; gap: 6px; margin-top: 2px; font: 500 9px/1.4 var(--mono); }
.item .pr .p { color: var(--accent); flex: 0 0 auto; }
.item .d .p { color: var(--accent); }
.buy { font: 600 10px/1 var(--disp); letter-spacing: .5px; padding: 9px 11px; border-radius: var(--r-sm); cursor: pointer;
  background: var(--accent); color: #20160a; border: 1px solid var(--accent); white-space: nowrap; }
.buy:hover:not(:disabled) { background: var(--accent-hot); }
.buy:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.4); }
.buy .c { display: block; font: 500 8px/1 var(--mono); margin-top: 3px; opacity: .85; }
.buy.cfg-open { width: 100%; justify-content: flex-start; text-align: left; padding: 11px 12px; margin-bottom: 8px; }
/* Schicht 9: Verhandeln-Spalte + Listenpreis-Marker */
.item .buycol { flex: 0 0 auto; display: flex; flex-direction: column; gap: 5px; align-items: stretch; }
.neg-btn { font: 600 9px/1 var(--mono); letter-spacing: .3px; padding: 5px 9px; border-radius: var(--r-sm); cursor: pointer;
  background: transparent; color: var(--brand); border: 1px solid var(--rail); white-space: nowrap; }
.neg-btn:hover { border-color: var(--brand); background: rgba(var(--accent-rgb, 209,148,41), .12); }
/* Smart-Popover fürs Verhandeln (Vorbild #inc-pop). position:fixed + JS-Koordinaten (--nx/--ny),
   damit es aus dem scrollenden Hardware-Panel ausbricht statt geclippt zu werden. */
.neg-wrap { position: relative; }
.neg-wrap .neg-btn { width: 100%; }
.neg-pop { position: fixed; left: var(--nx, 0); top: var(--ny, 0); z-index: 200; width: 244px; cursor: default;
  background: var(--panel); border: 1px solid var(--rail); border-radius: var(--r); box-shadow: var(--shadow-panel);
  padding: 10px 12px; display: none; text-align: left; white-space: normal; }
.neg-pop.show { display: block; }
.neg-pop .np-title { font: 700 11px/1.3 var(--disp); letter-spacing: .5px; text-transform: uppercase; color: var(--brand); margin-bottom: 5px; }
.neg-pop .np-desc { font: 500 10px/1.55 var(--mono); color: var(--dim); margin-bottom: 8px; }
.neg-pop .np-desc b { color: var(--txt); }
.neg-pop .ip-row { font-size: 11px; }
.neg-pop .ip-v.bad { color: var(--red); }
.neg-pop .np-note { font: 500 10px/1.45 var(--mono); color: var(--red); margin-top: 7px; }
.item .pr .listprice { flex: 0 0 auto; white-space: nowrap; font: 600 8px/1.4 var(--mono); letter-spacing: .3px;
  color: var(--red); border: 1px solid var(--red); border-radius: 4px; padding: 1px 4px; opacity: .85; }
.cfg-preview .price .listprice { margin-left: 8px; white-space: nowrap; font: 600 9px/1 var(--mono); color: var(--red); border: 1px solid var(--red); border-radius: 4px; padding: 1px 5px; }
.rk.empty.dim { opacity: .5; }

/* ================= KONSOLE ================= */
.consolewrap { display: grid; grid-template-columns: 1fr 300px; gap: 16px; }
.term { background: var(--bg2); border: 1px solid var(--rail); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; height: 560px; }
.termbar { display: flex; align-items: center; gap: 8px; padding: 10px 13px; border-bottom: 1px solid var(--rail); background: #0b0f16; }
.termbar .d { width: 11px; height: 11px; border-radius: 50%; }
.termbar .r { background: #ff5f56; } .termbar .y { background: #ffbd2e; } .termbar .g { background: #27c93f; }
.termbar .termttl { font: 500 10px/1 var(--mono); color: var(--dim); margin-left: 6px; }
.termout { flex: 1; overflow: auto; padding: 13px 15px; font: 500 12.5px/1.65 var(--mono); white-space: pre-wrap; word-break: break-word; }
.termout .line { padding: 1px 0; }
.termout .cmd { color: var(--brand); } .termout .ok { color: var(--green); } .termout .err { color: var(--red); }
.termout .sys { color: var(--muted); } .termout .hi { color: var(--accent); }
.terminp { display: flex; align-items: center; gap: 8px; padding: 11px 15px; border-top: 1px solid var(--rail); background: #090c12; }
.terminp .prompt { font: 600 12.5px/1 var(--mono); color: var(--green); white-space: nowrap; }
.terminp input { flex: 1; background: transparent; border: none; outline: none; color: var(--txt); font: 500 12.5px/1 var(--mono); caret-color: var(--brand); }
/* Befehlsliste wird lang → Panel auf Terminal-Höhe deckeln, Liste scrollt statt aufzublähen. */
.cheat-panel { display: flex; flex-direction: column; max-height: 560px; }
.cheat-panel .pbody.cheat { overflow-y: auto; min-height: 0; }

/* ---------- Scroll-Hinweis (wiederverwendbar) ----------
   Dezenter, pulsierender Verlauf am oberen/unteren Rand — nur wenn dort mehr Inhalt liegt
   (Klassen cue-top/cue-bot setzt JS anhand scrollTop/scrollHeight). Sticky-Pseudos brauchen
   KEINEN Wrapper und überstehen innerHTML-Rerender (Pseudos sind keine Kind-Knoten). Negative
   Margin = Overlay statt Layout-Schub. Puls nur am „mehr unten"-Hinweis; im Ruhigen Modus aus. */
/* Goldglow als inset box-shadow: wird flush auf die Rand-Kante gemalt (kein Padding-Gap),
   driftet nicht mit dem Scroll. Puls nur unten („mehr da unten"); im Ruhigen Modus statisch.
   --cg = Gold-Schatten-Bausteine (oben statisch, unten pulsend). */
.scrollcue { --cg-top: inset 0 19px 15px -12px rgba(var(--accent-rgb, 209,148,41), .42);
             --cg-bot: inset 0 -19px 15px -12px rgba(var(--accent-rgb, 209,148,41), .42);
             transition: box-shadow .35s ease; }
.scrollcue.cue-top { box-shadow: var(--cg-top); }
.scrollcue.cue-bot { box-shadow: var(--cg-bot); }
.scrollcue.cue-top.cue-bot { box-shadow: var(--cg-top), var(--cg-bot); }
/* Dezenter Puls am unteren Hinweis (nur wenn NICHT auch oben — sonst blieben beide ruhig statisch). */
body:not([data-motion="calm"]) .scrollcue.cue-bot:not(.cue-top) { animation: scrollcue-pulse 2.4s ease-in-out infinite; }
@keyframes scrollcue-pulse {
  0%, 100% { box-shadow: inset 0 -17px 14px -12px rgba(var(--accent-rgb, 209,148,41), .30); }
  50%      { box-shadow: inset 0 -21px 16px -11px rgba(var(--accent-rgb, 209,148,41), .60); }
}
.cheat { font: 500 11px/1.95 var(--mono); }
.cheat code { color: var(--brand); background: var(--bg2); padding: 1px 5px; border-radius: 4px; }
.cheat .desc { color: var(--muted); }
.cheat .tip { margin-top: 12px; color: var(--dim); line-height: 1.6; }
.cheat .cheat-grp { margin: 14px 0 5px; font: 600 9px/1.7 var(--disp); letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); }
.cheat .cheat-grp:first-child { margin-top: 4px; }

/* ================= THREAT-MAP ================= */
.threatmap-panel { position: relative; height: 340px; margin-bottom: 16px; border: 1px solid var(--rail);
  border-radius: var(--r-lg); overflow: hidden; background: radial-gradient(130% 130% at 50% -10%, #111826 0%, var(--bg2) 70%); }
.threatmap-panel canvas { width: 100%; height: 100%; display: block; }
.tm-hud { position: absolute; top: 12px; left: 15px; display: flex; gap: 20px; pointer-events: none; }
.tm-k { display: block; font: 600 8.5px/1 var(--disp); letter-spacing: 1.2px; text-transform: uppercase; color: var(--dim); }
.tm-v { display: block; font: 600 20px/1.1 var(--mono); margin-top: 4px; color: var(--txt); }
.tm-v.red { color: var(--red); }
.tm-legend { position: absolute; bottom: 12px; right: 15px; display: flex; gap: 14px; font: 500 9.5px/1 var(--mono); color: var(--muted); pointer-events: none; }
.tm-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.tm-dot.in { background: var(--red); } .tm-dot.out { background: var(--cyan); } .tm-dot.ber { background: var(--brand); }
/* Node-Hover-Tooltip (Map v2) — Position folgt dem Cursor über Custom-Props (keine Inline-Styles). */
.tm-tooltip { position: absolute; left: var(--x); top: var(--y); transform: translate(12px, -50%);
  pointer-events: none; background: var(--panel2); border: 1px solid var(--rail); border-radius: var(--r-sm);
  padding: 6px 9px; font: 500 11px/1.5 var(--mono); color: var(--txt); box-shadow: var(--shadow-panel);
  z-index: 5; max-width: 230px; }
.tm-tooltip[hidden] { display: none; }
.tm-tooltip b { color: var(--brand); font-weight: 600; }
.tm-tooltip .dim { color: var(--muted); }

/* ================= KRIEG ================= */
.wargrid { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: start; }
.foes { padding: 12px; }
.war-side { display: flex; flex-direction: column; gap: 16px; }
.foe { padding: 13px 14px; border: 1px solid var(--rail); border-radius: var(--r); margin-bottom: 10px; background: var(--panel2); }
.foe:last-child { margin-bottom: 0; }
.foe .top { display: flex; justify-content: space-between; align-items: flex-start; }
.foe .nm { font: 600 13px/1 var(--disp); letter-spacing: .5px; }
.foe .fac { font: 500 9px/1 var(--mono); color: var(--dim); margin-top: 4px; }
.foe .cr { font: 600 12px/1 var(--mono); color: var(--accent); }
.foe .foe-right { text-align: right; }
.foe .stats { display: flex; gap: 16px; margin: 11px 0 4px; font: 500 10.5px/1 var(--mono); color: var(--muted); }
.foe .stats b { color: var(--txt); }
.foe .actrow { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; gap: 8px; }
.foe .odds { font: 500 10px/1.3 var(--mono); color: var(--muted); }
.foe .persona-pill { font: 600 8px/1 var(--disp); letter-spacing: 1px; text-transform: uppercase; padding: 3px 7px; border-radius: var(--r-pill); border: 1px solid var(--rail); color: var(--violet); }
.foe .acts { display: flex; gap: 6px; }
.btn.atk { border-color: var(--red); color: var(--red); }
.btn.atk:hover:not(:disabled) { background: rgba(var(--red-rgb),.12); }
.btn.scan { border-color: var(--brand); color: var(--brand); }
.threats { padding: 12px; max-height: 260px; overflow: auto; }
.threat { padding: 10px 12px; border: 1px solid rgba(var(--red-rgb),.35); border-radius: var(--r-sm); margin-bottom: 9px; background: rgba(var(--red-rgb),.06); }
.threat:last-child { margin-bottom: 0; }
.threat .h { display: flex; justify-content: space-between; font: 600 11px/1.2 var(--mono); }
.threat .ip { color: var(--red); cursor: pointer; text-decoration: underline dotted; }
.threat .m { font: 500 10px/1.5 var(--mono); color: var(--muted); margin-top: 4px; }
.threat .ttl { font: 600 10px/1 var(--mono); color: var(--accent); }

/* ---- Hacker-Ops: Proxy-Status + Siphon-Portfolio (Combat-Rebase) ---- */
.hackops { padding: 12px; max-height: 320px; overflow: auto; }
.hk-proxy { border: 1px solid var(--rail); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 10px; background: var(--panel2); }
.hk-proxy.on { border-color: rgba(var(--green-rgb), .4); }
.hk-proxy.off { border-color: rgba(var(--red-rgb), .35); background: rgba(var(--red-rgb), .06); }
.hk-proxy .hk-k { font: 600 11px/1.3 var(--mono); }
.hk-proxy.off .hk-k { color: var(--red); }
.hk-proxy .hk-sub { font: 500 9.5px/1.5 var(--mono); color: var(--muted); margin-top: 3px; }
.hk-proxy .hk-sub code { color: var(--cyan); }
.hk-bar { height: 5px; border-radius: 3px; background: var(--bg2); border: 1px solid #1c2532; overflow: hidden; margin-top: 6px; }
.hk-bar span { display: block; height: 100%; width: var(--w, 0%); background: linear-gradient(90deg, var(--accent), var(--red)); transition: width .4s; }
.hk-bar.op span { width: var(--p, 0%); background: linear-gradient(90deg, var(--brand), var(--accent)); }
/* Schicht 10: Proxy-Portfolio + Per-Op-Picker */
.hk-proxytitle { font: 600 10px/1.4 var(--disp); letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin: 4px 0 8px; }
.hk-proxytitle .hk-pf { color: var(--brand); }
.hk-proxy .hk-k { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hk-rel { border: 1px solid var(--rail); background: transparent; color: var(--muted); border-radius: 4px; font: 600 10px/1 var(--mono); padding: 2px 6px; cursor: pointer; }
.hk-rel:hover, .hk-rel:focus-visible { border-color: var(--red); color: var(--red); }
.hk-rentrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.hk-rent { border: 1px solid var(--rail); background: transparent; color: var(--brand); border-radius: var(--r-sm); font: 600 10px/1 var(--mono); padding: 6px 9px; cursor: pointer; }
.hk-rent:hover:not(:disabled) { border-color: var(--brand); background: rgba(var(--accent-rgb, 209,148,41), .12); }
.hk-rent:disabled { opacity: .4; cursor: not-allowed; }
#proxy-overlay { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; background: rgba(0,0,0,.55); }
#proxy-overlay[hidden] { display: none; }
.px-card { width: min(420px, 92vw); background: var(--panel); border: 1px solid var(--rail); border-radius: var(--r-lg); box-shadow: var(--shadow-panel); padding: 16px 18px; font-family: var(--mono); }
.px-head { font: 700 14px/1.2 var(--disp); letter-spacing: .3px; margin-bottom: 6px; }
.px-desc { font: 500 11px/1.5 var(--mono); color: var(--muted); margin-bottom: 12px; border-left: 2px solid var(--rail); padding-left: 9px; }
.px-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; margin-bottom: 7px; padding: 9px 11px; border-radius: var(--r-sm); border: 1px solid var(--rail); background: transparent; color: var(--body); cursor: pointer; }
.px-opt:hover, .px-opt:focus-visible { border-color: var(--brand); }
.px-opt.px-exposed:hover, .px-opt.px-exposed:focus-visible { border-color: var(--red); }
.px-opt .px-n { font: 600 12px/1.2 var(--mono); flex: 0 0 auto; }
.px-opt .px-m { font: 500 9.5px/1.3 var(--mono); color: var(--muted); flex: 1 1 auto; }
.px-heat { font: 700 9px/1 var(--mono); padding: 2px 6px; border-radius: 4px; border: 1px solid currentColor; }
.px-heat.cool { color: var(--green, #5ac878); }
.px-heat.warm { color: var(--accent); }
.px-heat.hot { color: var(--red); }
.px-foot { display: flex; justify-content: flex-end; margin-top: 6px; }
.hk-siptitle { font: 600 10px/1.4 var(--disp); letter-spacing: .5px; text-transform: uppercase; color: var(--green); margin: 4px 0 7px; }
.hk-sip { display: flex; align-items: center; gap: 8px; font: 500 10px/1.4 var(--mono); padding: 6px 8px; border: 1px solid var(--rail); border-radius: var(--r-sm); margin-bottom: 6px; background: var(--panel2); }
.hk-sip .hk-sipfac { flex: 1 1 auto; color: var(--txt); }
.hk-sip .hk-sipy { flex: 0 0 auto; color: var(--green); font-weight: 600; }
.hk-sip.crypto { border-color: rgba(var(--green-rgb), .3); }
.hk-empty { font: 500 10px/1.6 var(--mono); color: var(--dim); }
/* ---- Laufende eigene Operationen (Op-Timing, Task 6) ---- */
.hk-op { border: 1px solid var(--rail); border-radius: var(--r-sm); padding: 9px 10px; margin-bottom: 8px; background: var(--panel2); }
.hk-op-top { display: flex; justify-content: space-between; gap: 8px; font: 600 11px/1.3 var(--mono); }
.hk-op-target { color: var(--muted); font-weight: 500; }
.hk-op-meta { font: 500 9.5px/1.5 var(--mono); color: var(--muted); margin-top: 5px; }
.hk-op-abort { margin-top: 7px; width: 100%; }
.empty-note { color: var(--muted); font: 500 11px/1.6 var(--mono); padding: 12px 4px; text-align: center; }
.log { padding: 8px 12px 12px; max-height: 300px; overflow: auto; font: 500 10.5px/1.75 var(--mono); }
.log .row { color: var(--muted); border-bottom: 1px solid #131a25; padding: 2px 0; }
.log .row .t { color: var(--dim); }
.log .ok { color: var(--green); } .log .no { color: var(--red); } .log .info { color: var(--cyan); }
.log .cr { color: var(--accent); } .log .ai { color: var(--violet); } .log .sys { color: var(--muted); } .log .hi { color: var(--accent); }

/* ================= TOASTS ================= */
.toast-wrap { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 60; max-width: 340px; }
.toast { padding: 12px 15px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--rail); box-shadow: var(--shadow-panel);
  font: 500 12px/1.4 var(--mono); animation: toastin .3s ease; }
.toast.no { border-color: rgba(var(--red-rgb),.5); }
.toast.ok { border-color: rgba(var(--green-rgb),.5); }
.toast.leaving { opacity: 0; transition: opacity .4s; }
@keyframes toastin { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }

/* ================= AUTH-OVERLAY ================= */
.auth-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--grad-bg); }
.auth-overlay[hidden] { display: none; }
/* Boot-Zustand: Overlay deckt (branded Hintergrund), aber Card + Legal-Links noch verborgen,
   bis der Auth-Status feststeht — verhindert das Durchblitzen des Default-Spiels. */
.auth-overlay.booting .auth-card,
.auth-overlay.booting .auth-legal { visibility: hidden; }
/* Rechts-Links dezent am unteren Rand, außerhalb der Card. */
.auth-legal { position: absolute; bottom: 18px; left: 0; right: 0; display: flex; justify-content: center;
  gap: 10px; font: 500 11px/1 var(--mono); }
.auth-legal a { color: var(--muted); text-decoration: none; opacity: .8; }
.auth-legal a:hover, .auth-legal a:focus-visible { color: var(--brand); opacity: 1; text-decoration: underline; }
.auth-legal .sep { color: var(--dim); }
.auth-card { width: min(400px, 92vw); background: var(--grad-panel); border: 1px solid var(--rail);
  border-radius: var(--r-lg); padding: 30px 28px; box-shadow: var(--shadow-panel); }
.auth-brand { display: flex; justify-content: center; }
.auth-sub { font: 500 11px/1 var(--mono); color: var(--muted); margin: 9px 0 22px; }
.auth-tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.auth-tabs button { flex: 1; font: 600 11px/1 var(--disp); letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); background: var(--panel2); border: 1px solid var(--rail); border-radius: var(--r-sm); padding: 9px; cursor: pointer; }
.auth-tabs button.on { color: var(--bg); background: var(--brand); border-color: var(--brand); }
#auth-form { display: flex; flex-direction: column; gap: 14px; }
#auth-form label[hidden] { display: none; }   /* sonst überschreibt die label-Regel das [hidden] (E-Mail-Feld im Login) */
#auth-form label { display: flex; flex-direction: column; gap: 6px; font: 600 9.5px/1 var(--disp);
  letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
#auth-form input { background: var(--bg2); border: 1px solid var(--rail); border-radius: var(--r-sm);
  padding: 11px 12px; color: var(--txt); font: 500 13px/1 var(--mono); }
/* Datenschutz-Consent (Register): Zeile statt Spalte, normaler Text. */
#auth-form .auth-consent { flex-direction: row; align-items: flex-start; gap: 9px; text-transform: none; letter-spacing: 0; font: 500 10.5px/1.5 var(--mono); color: var(--muted); }
#auth-form .auth-consent input { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px; padding: 0; accent-color: var(--accent); cursor: pointer; }
#auth-form .auth-consent a { color: var(--brand); }
.auth-err { min-height: 16px; font: 500 11px/1.4 var(--mono); color: var(--red); }
#auth-submit { padding: 12px; font-size: 12px; }
.auth-hint { margin-top: 16px; font: 500 10px/1.5 var(--mono); color: var(--dim); text-align: center; }

.user-chip { display: flex; align-items: center; gap: 8px; font: 500 11px/1 var(--mono); color: var(--muted); }
.user-chip[hidden] { display: none; }
.user-chip #user-name { color: var(--txt); }
.user-chip #logout-btn { background: transparent; border: 1px solid var(--rail); color: var(--muted);
  border-radius: var(--r-sm); width: 28px; height: 28px; cursor: pointer; font-size: 12px; }
.user-chip #logout-btn:hover { color: var(--red); border-color: var(--red); }

/* ================= LOBBY + AI-KONFIGURATOR ================= */
.lobby-overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--grad-bg); overflow: auto; padding: 24px; }
.lobby-overlay[hidden] { display: none; }
.lobby-card { width: min(580px, 96vw); background: var(--grad-panel); border: 1px solid var(--rail); border-radius: var(--r-lg); padding: 26px 26px 22px; box-shadow: var(--shadow-panel); }
.lobby-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.lobby-title { display: flex; }
.lobby-sub { font: 500 11px/1 var(--mono); color: var(--muted); margin-top: 7px; }
.lobby-refresh { background: transparent; border: 1px solid var(--rail); color: var(--muted); border-radius: var(--r-sm); width: 32px; height: 32px; cursor: pointer; font-size: 15px; }
.lobby-rooms { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow: auto; }
.lobby-room { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--rail); border-radius: var(--r); background: var(--panel2); }
.lr-name { font: 600 13px/1.2 var(--mono); }
.lr-meta { font: 500 10px/1.4 var(--mono); color: var(--muted); margin-top: 3px; }
.lobby-empty, .ai-empty { color: var(--muted); font: 500 11px/1.6 var(--mono); text-align: center; padding: 14px; }
.lobby-divider { height: 1px; background: var(--rail); margin: 16px 0; }
#lobby-create-toggle { width: 100%; }
.lobby-create { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.lobby-label { display: flex; flex-direction: column; gap: 6px; font: 600 9.5px/1 var(--disp); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.lobby-label input { background: var(--bg2); border: 1px solid var(--rail); border-radius: var(--r-sm); padding: 10px 12px; color: var(--txt); font: 500 13px/1 var(--mono); }
/* Tempo-Segmented-Control (statt Plain-Select) */
.seg { display: flex; gap: 6px; }
.seg-opt { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer;
  background: var(--bg2); border: 1px solid var(--rail); border-radius: var(--r-sm); padding: 9px 6px;
  color: var(--dim); font: 700 12px/1 var(--mono); text-transform: none; letter-spacing: 0; transition: border-color .12s, color .12s, background .12s; }
.seg-opt small { font: 500 9.5px/1 var(--mono); color: var(--muted); letter-spacing: .2px; }
.seg-opt:hover { border-color: color-mix(in oklab, var(--accent) 45%, var(--rail)); color: var(--txt); }
.seg-opt.on { background: color-mix(in oklab, var(--accent) 16%, var(--bg2)); border-color: var(--accent); color: var(--accent); }
.seg-opt.on small { color: color-mix(in oklab, var(--accent) 70%, var(--muted)); }
.seg-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ai-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: 600 10px/1 var(--disp); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.ai-presets { display: flex; align-items: center; gap: 4px; margin-left: auto; font-size: 9px; color: var(--dim); }
.ai-presets button, .ai-addbtn { font: 600 9px/1 var(--disp); letter-spacing: .5px; padding: 5px 8px; border: 1px solid var(--rail); background: var(--panel2); color: var(--muted); border-radius: var(--r-sm); cursor: pointer; }
.ai-addbtn { color: var(--accent); border-color: rgba(var(--accent-rgb), .4); }
.ai-factions { display: flex; flex-direction: column; gap: 6px; max-height: 250px; overflow: auto; }
.ai-row { display: grid; grid-template-columns: 1fr 92px 78px 78px 30px; gap: 6px; align-items: center; }
.ai-row input, .ai-row select { background: var(--bg2); border: 1px solid var(--rail); border-radius: var(--r-sm); padding: 7px 8px; color: var(--txt); font: 500 11px/1 var(--mono); min-width: 0; }
.ai-row input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.ai-row input[type=number]::-webkit-outer-spin-button, .ai-row input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ai-row .ai-num { display: flex; align-items: center; gap: 4px; font: 500 8px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; color: var(--dim); }
.ai-row .ai-num input { width: 100%; }
.ai-row .ai-del { background: transparent; border: 1px solid var(--rail); color: var(--muted); border-radius: var(--r-sm); height: 30px; cursor: pointer; }
.ai-row .ai-del:hover { color: var(--red); border-color: var(--red); }

.room-chip { display: flex; align-items: center; gap: 7px; font: 500 11px/1 var(--mono); color: var(--muted); }
.room-chip[hidden] { display: none; }
.room-chip .rc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: var(--glow-brand); }
.room-chip #room-name-hud { color: var(--txt); }
.room-chip button { background: transparent; border: 1px solid var(--rail); color: var(--muted); border-radius: var(--r-sm); width: 26px; height: 26px; cursor: pointer; font-size: 11px; }
.room-chip button:hover { color: var(--red); border-color: var(--red); }
#reset-room-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ================= AUFTRÄGE / OFFERS ================= */
.jobsgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.offers, .active-jobs { padding: 12px; max-height: 560px; overflow: auto; }
.offer, .job { border: 1px solid var(--rail); border-radius: var(--r); padding: 11px 13px; margin-bottom: 9px; background: var(--panel2); }
.offer:last-child, .job:last-child { margin-bottom: 0; }
.offer .ot, .job .jt { font: 600 12px/1.2 var(--mono); }
.offer .od, .job .jd { font: 500 9.5px/1.5 var(--mono); color: var(--muted); margin-top: 3px; }
.offer .oactions { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; gap: 8px; }
.offer .opay { font: 600 11px/1 var(--mono); color: var(--green); }
.offer .owin { font: 500 9px/1 var(--mono); color: var(--dim); }
.job .jbar { height: 6px; border-radius: 3px; background: var(--bg2); border: 1px solid #1c2532; overflow: hidden; margin-top: 8px; }
.job .jbar span { display: block; height: 100%; width: var(--w, 0%); background: var(--grad-brand); transition: width .4s; }
.job.paused { border-color: rgba(var(--red-rgb), .4); }
.job .jpaused { color: var(--red); font: 600 9px/1 var(--disp); letter-spacing: 1px; text-transform: uppercase; }
.job.inf { border-color: rgba(var(--brand-rgb), .35); }
.jinf { color: var(--brand); font: 600 9px/1 var(--disp); letter-spacing: 1px; text-transform: uppercase; }
.job .jt { display: flex; align-items: center; gap: 8px; }
.jcancel { margin-left: auto; background: transparent; border: 1px solid var(--rail); color: var(--muted); border-radius: var(--r-sm); padding: 4px 9px; font: 600 9px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; cursor: pointer; }
.jcancel:hover { color: var(--red); border-color: var(--red); }
.jcancel.armed { color: var(--red); border-color: var(--red); background: rgba(var(--red-rgb), .1); }
.od.dim { color: var(--dim); }
.o-term { font: 600 8.5px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.o-term.inf { color: var(--brand); background: rgba(var(--brand-rgb), .12); border: 1px solid rgba(var(--brand-rgb), .35); }
.o-term.fix { color: var(--accent); background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .35); }

/* ---- Mandant auf Angebot / Vertrag ---- */
.offer .o-client { font: 500 9.5px/1.3 var(--mono); color: var(--brand); margin-top: 4px; }
.offer .o-loyal { color: var(--green); font-weight: 600; margin-left: 4px; }
.job .jclient { font: 500 9px/1.3 var(--mono); color: var(--dim); margin-top: 2px; }

/* ---- Mandanten-Panel (Vertrauen & Loyalität) ---- */
.jobs-clients-panel { margin-top: 16px; }
.clients { padding: 14px 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 12px; }
.client { border: 1px solid var(--rail); border-radius: var(--r); padding: 12px 13px; background: var(--panel2); }
.client.lvl3 { border-color: rgba(var(--green-rgb), .4); }
.client .cl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.client .cl-name { font: 600 12px/1.25 var(--mono); color: var(--txt); display: flex; flex-direction: column; gap: 2px; }
.client .cl-sector { font: 400 9px/1.3 var(--mono); color: var(--dim); }
.client .cl-tier { font: 600 8.5px/1 var(--disp); letter-spacing: .6px; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; white-space: nowrap; flex: 0 0 auto;
  color: var(--dim); background: var(--bg2); border: 1px solid var(--rail); }
.client .cl-tier.t1 { color: var(--cyan);  background: rgba(var(--cyan-rgb), .12);  border-color: rgba(var(--cyan-rgb), .35); }
.client .cl-tier.t2 { color: var(--brand); background: rgba(var(--brand-rgb), .12); border-color: rgba(var(--brand-rgb), .40); }
.client .cl-tier.t3 { color: var(--green); background: rgba(var(--green-rgb), .14); border-color: rgba(var(--green-rgb), .45); }
.client .cl-bar { height: 6px; border-radius: 3px; background: var(--bg2); border: 1px solid #1c2532; overflow: hidden; margin: 11px 0 6px; }
.client .cl-bar span { display: block; height: 100%; width: var(--w, 0%); background: var(--grad-brand); transition: width .4s; }
.client.lvl3 .cl-bar span { background: linear-gradient(90deg, var(--green), var(--cyan)); }
.client .cl-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 500 9px/1.4 var(--mono); }
.client .cl-prog { color: var(--muted); }
.client .cl-stats { color: var(--green); white-space: nowrap; }
.client .cl-kinds { margin-top: 8px; font: 500 8.5px/1.4 var(--mono); color: var(--dim); letter-spacing: .3px; }

/* ================= KRIEG: Angriffs-Budget · Spieler-Ziele · PvP ================= */
.atk-budget { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; margin-bottom: 12px; border: 1px solid rgba(var(--accent-rgb), .4); border-radius: var(--r); background: linear-gradient(180deg, rgba(var(--accent-rgb), .10), transparent); }
.atk-budget.none { border-color: rgba(var(--red-rgb), .5); background: linear-gradient(180deg, rgba(var(--red-rgb), .12), transparent); }
.atk-budget .ab-k { font: 600 9px/1 var(--disp); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.atk-budget .ab-sub { font: 500 10px/1.4 var(--mono); color: var(--dim); margin-top: 4px; }
.atk-budget .ab-v { font: 700 22px/1 var(--disp); color: var(--accent); white-space: nowrap; }
.atk-budget.none .ab-v { color: var(--red); }
.foe-group { font: 600 10px/1 var(--disp); letter-spacing: 1.5px; text-transform: uppercase; color: var(--brand); margin: 16px 2px 8px; padding-top: 12px; border-top: 1px dashed var(--rail); }
.foe.player { border-color: rgba(var(--brand-rgb), .5); }
.foe.player .persona-pill { color: var(--brand); border-color: rgba(var(--brand-rgb), .4); }
/* #84: geschütztes Ziel — sichtbar entschärft, nicht versteckt. */
.foe.protected { opacity: .72; }
.foe.protected .odds { color: var(--brand); }
.hud .cell.schutz .val { color: var(--brand); }
.threat.pvp { border-color: rgba(var(--brand-rgb), .5); }
.pvp-tag { font: 600 8px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; color: var(--brand); border: 1px solid rgba(var(--brand-rgb), .4); border-radius: 999px; padding: 2px 6px; margin-left: 5px; }

/* ===== MP-8: Angriffstyp-Wähler + Infektionen ===== */
.atk-kinds { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 12px 10px; }
.atk-kind { font: 600 10px/1 var(--mono); padding: 7px 10px; border: 1px solid var(--rail); background: var(--panel2); color: var(--muted); border-radius: 999px; cursor: pointer; white-space: nowrap; }
.atk-kind:hover:not(:disabled) { color: var(--txt); border-color: var(--accent); }
.atk-kind.on { color: var(--accent); border-color: var(--accent); background: rgba(var(--accent-rgb), .12); }
.atk-kind:disabled { opacity: .45; cursor: not-allowed; }
.atk-kind .lock { color: var(--dim); font-size: 8px; }
.atk-kind-desc { flex: 1 1 100%; font: 500 10px/1.4 var(--mono); color: var(--muted); margin-top: 2px; }
.infections { padding: 12px; max-height: 320px; overflow: auto; }
.infection { border: 1px solid var(--rail); border-radius: var(--r); padding: 10px 12px; margin-bottom: 8px; background: var(--panel2); }
.infection:last-child { margin-bottom: 0; }
.infection.crypto { border-color: rgba(var(--brand-rgb), .45); }
.infection.trojan { border-color: rgba(var(--red-rgb), .4); }
.infection.hijack { border-color: rgba(var(--accent-rgb), .4); }
.inf-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inf-name { font: 600 12px/1.2 var(--mono); }
.inf-meta { font: 500 10px/1.5 var(--mono); color: var(--muted); margin-top: 3px; }
.inf-meta.dim { color: var(--dim); }
.inf-stage { font: 600 8px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; color: var(--accent); border: 1px solid rgba(var(--accent-rgb), .4); border-radius: 999px; padding: 2px 6px; margin-left: 5px; }
.infections code { font: 500 10px/1 var(--mono); color: var(--accent); background: rgba(var(--accent-rgb), .1); padding: 1px 4px; border-radius: 3px; }

/* ================= MP-11: Forschungsbaum (gelifteter Tech-Tree) ================= */
.research-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding: 4px 2px; }
.research-head h2 { font: 700 16px/1 var(--disp); letter-spacing: .5px; }
.rp-sub { display: block; font: 500 11px/1.5 var(--mono); color: var(--muted); margin-top: 6px; max-width: 62ch; }
.rp-sub b { color: var(--txt); }
.rp-head-r { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.rp-balance { font: 700 22px/1 var(--disp); color: var(--green); white-space: nowrap; text-shadow: var(--glow-green); }
.btn.sm { font-size: 11px; padding: 6px 12px; }

/* Bühne: begrenzter Viewport, in dem der SVG-Baum zoom-/schwenkbar liegt */
.research-stage {
  position: relative;
  height: min(64vh, 580px);
  border: 1px solid var(--rail);
  border-radius: var(--r);
  background:
    radial-gradient(1200px 380px at 30% -10%, rgba(var(--green-rgb), .05), transparent 70%),
    var(--panel2);
  overflow: hidden;
}
#research-svg { width: 100%; height: 100%; display: block; touch-action: none; }
#research-svg.is-panning { cursor: grabbing; }
.rt-glow { flood-color: var(--green); flood-opacity: .55; }

/* Kanten (Voraussetzungs-Verbindungen) */
.tt-edge {
  fill: none; stroke: var(--rail); stroke-width: 2; stroke-linecap: round; opacity: .55;
  transition: stroke .2s ease, stroke-width .2s ease, opacity .2s ease;
}
.tt-edge.is-live { stroke: color-mix(in srgb, var(--green) 55%, var(--dim)); opacity: .8; }
.tt-edge.is-done { stroke: color-mix(in srgb, var(--green) 78%, white 8%); opacity: .9; }
/* Kein feDropShadow-Glow auf Kanten: bei perfekt horizontalen Pfaden ist die
   objectBoundingBox-Höhe 0 → Filterregion (140 % × 0) kollabiert → Kante würde
   wegge-clippt. Kräftiger heller Stroke liest sich als Pfad, ohne diesen Bug. */
.tt-edge.is-path { stroke: var(--green); stroke-width: 3.5; opacity: 1; }
.tt-edge.is-dim  { opacity: .12; }

/* Knoten */
.tt-node { cursor: default; }
.tt-node.is-ready, .tt-node.is-poor { cursor: pointer; }
.tt-node-box {
  fill: var(--panel); stroke: var(--rail); stroke-width: 1.4;
  transition: fill .2s ease, stroke .2s ease, stroke-width .2s ease;
}
.tt-node-bar { fill: var(--dim); opacity: .5; transition: fill .2s ease, opacity .2s ease; }
.tt-title { fill: var(--txt); font: 600 14px var(--mono); pointer-events: none; dominant-baseline: middle; }
.tt-meta  { fill: var(--muted); font: 500 10.5px var(--mono); pointer-events: none; dominant-baseline: middle; }
.tt-icon  { font-size: 19px; pointer-events: none; dominant-baseline: middle; text-anchor: middle; }
.tt-tier-label { fill: var(--dim); font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; text-anchor: middle; pointer-events: none; }
.tt-tier-line { stroke: var(--rail); stroke-dasharray: 2 8; opacity: .5; }

/* Zustände */
.tt-node.is-locked .tt-node-box { fill: color-mix(in srgb, var(--panel) 68%, var(--bg2)); }
.tt-node.is-locked .tt-title { fill: var(--dim); }
.tt-node.is-locked .tt-icon  { opacity: .35; }
.tt-node.is-ready .tt-node-box { stroke: color-mix(in srgb, var(--green) 60%, var(--rail)); }
.tt-node.is-ready .tt-node-bar { fill: var(--green); opacity: .9; }
.tt-node.is-ready .tt-meta { fill: var(--green); }
.tt-node.is-poor .tt-node-box { stroke: color-mix(in srgb, var(--accent) 45%, var(--rail)); }
.tt-node.is-poor .tt-node-bar { fill: var(--accent); opacity: .75; }
.tt-node.is-poor .tt-meta { fill: var(--accent); }
.tt-node.is-done .tt-node-box { fill: color-mix(in srgb, var(--green) 15%, var(--panel)); stroke: var(--green); }
.tt-node.is-done .tt-node-bar { fill: var(--green); opacity: 1; }
.tt-node.is-done .tt-meta { fill: var(--green); }

/* Hover/Fokus + Pfad-Highlight */
.tt-node:focus-visible { outline: none; }
.tt-node:focus-visible .tt-node-box { stroke: var(--brand); stroke-width: 2.4; }
.tt-node.is-hover .tt-node-box { stroke-width: 2.4; filter: url(#rt-node-glow); }
.tt-node.is-path  .tt-node-box { stroke: var(--green); }
.tt-node.is-dim { opacity: .22; }
.tt-node-box.tt-pulse { transform-box: fill-box; transform-origin: center; animation: tt-pulse .4s cubic-bezier(.4, 0, .2, 1); }
@keyframes tt-pulse { 0% { transform: scale(.94); } 100% { transform: scale(1); } }

/* Legende (unten links auf der Bühne) */
.research-legend { position: absolute; left: 12px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.rl-pill { display: inline-flex; align-items: center; gap: 6px; font: 500 10px/1 var(--mono); color: var(--muted); padding: 5px 9px; border: 1px solid var(--rail); border-radius: var(--r-pill); background: rgba(var(--brand-rgb), .04); backdrop-filter: blur(4px); }
.rl-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.rl-dot.rl-locked { background: color-mix(in srgb, var(--panel) 68%, var(--bg2)); border: 1px solid var(--rail); }
.rl-dot.rl-ready { background: var(--green); }
.rl-dot.rl-poor { background: var(--accent); }
.rl-dot.rl-done { background: var(--green); box-shadow: var(--glow-green); }

/* Beschreibungs-Panel (oben links auf der Bühne) — zeigt, was ein Knoten bewirkt.
   pointer-events:none, damit es nie Knoten-Interaktion darunter blockiert. */
.research-detail { position: absolute; top: 12px; left: 12px; width: min(300px, calc(100% - 24px)); pointer-events: none;
  border: 1px solid var(--rail); border-radius: var(--r); background: rgba(var(--brand-rgb), .06); backdrop-filter: blur(8px);
  padding: 12px 14px; box-shadow: var(--shadow-soft); }
.rd-empty { margin: 0; font: 500 11px/1.5 var(--mono); color: var(--muted); }
.rd-head { display: flex; align-items: center; gap: 8px; }
.rd-icon { font-size: 18px; flex: 0 0 auto; }
.rd-name { font: 600 13px/1.2 var(--disp); letter-spacing: .3px; flex: 1 1 auto; min-width: 0; }
.rd-status { font: 600 9px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; padding: 4px 7px; border-radius: var(--r-pill); white-space: nowrap; flex: 0 0 auto; }
.rd-status.rd-done { color: var(--green); background: rgba(var(--green-rgb), .14); }
.rd-status.rd-ready { color: var(--green); background: rgba(var(--green-rgb), .10); }
.rd-status.rd-poor { color: var(--accent); background: rgba(var(--accent-rgb), .14); }
.rd-status.rd-locked { color: var(--muted); background: color-mix(in srgb, var(--rail) 55%, transparent); }
.rd-desc { margin: 8px 0 0; font: 500 10.5px/1.5 var(--mono); color: var(--muted); }
.rd-effect { margin: 6px 0 0; font: 500 11px/1.5 var(--mono); color: var(--txt); }
.rd-foot { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--rail); display: flex; flex-direction: column; gap: 3px; font: 600 10px/1.4 var(--mono); }
.rd-cost { color: var(--accent); }
.rd-req { color: var(--muted); }
@media (max-width: 720px) {
  .research-stage { height: min(72vh, 560px); }
  .research-legend { display: none; }
  .research-detail { width: calc(100% - 24px); }
}
#reset-room-btn.armed { color: var(--red); border-color: var(--red); animation: pulse-armed 1s ease-in-out infinite; }
@keyframes pulse-armed { 50% { opacity: .5; } }

/* ================= ÜBERSICHT (Dashboard) ================= */
.dash { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.dash-grp { background: var(--grad-panel); border: 1px solid var(--rail); border-radius: var(--r-lg); padding: 16px 18px; }
.dash-grp.span2 { grid-column: 1 / -1; }
.dash-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.dash-h h2 { font: 600 12px/1 var(--disp); letter-spacing: 1px; text-transform: uppercase; color: var(--txt); }
.dash-hint { font: 500 10px/1.3 var(--mono); color: var(--muted); }
.dash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); grid-auto-rows: 1fr; gap: 12px; }   /* 1fr-Reihen → alle Cards gleich hoch, egal wie die Reihen fallen (kein „kürzerer Kredit-Button" mehr) */
.dcard { background: var(--panel2); border: 1px solid var(--rail); border-radius: var(--r); padding: 13px 15px; }
.dcard .bar { margin: 10px 0 8px; }
.dc-lbl { font: 600 9.5px/1 var(--disp); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.dcard.res .dc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dc-free { font: 700 24px/1 var(--disp); color: var(--brand); white-space: nowrap; }
.dc-free small { font: 500 10px/1 var(--mono); color: var(--muted); margin-left: 4px; }
.dc-break { display: flex; justify-content: space-between; gap: 8px; font: 500 10px/1.4 var(--mono); color: var(--dim); }
.dc-break b { color: var(--txt); }
.dc-val { font: 700 22px/1.1 var(--disp); color: var(--txt); margin-top: 8px; }
.dc-val small { font: 500 11px/1 var(--mono); color: var(--muted); }
.dc-sub { font: 500 10px/1.4 var(--mono); color: var(--muted); margin-top: 6px; }
.dcard.accent .dc-val { color: var(--accent); }
.dcard.green .dc-val { color: var(--green); }
.dcard.no { border-color: rgba(var(--red-rgb), .4); }
.dcard.no .dc-val { color: var(--red); }
.dcard.warn { border-color: rgba(var(--accent-rgb), .45); }
@media (max-width: 720px) { .dash { grid-template-columns: 1fr; } }

/* ================= KONFIGURATOR-MODAL ================= */
.modal-overlay { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  background: rgba(4, 6, 10, .72); backdrop-filter: blur(3px); animation: fade .2s ease; }
.modal-overlay[hidden] { display: none; }
.modal { width: min(680px, 94vw); max-height: 90vh; overflow: auto; background: var(--grad-panel);
  border: 1px solid var(--rail); border-radius: var(--r-lg); box-shadow: var(--shadow-panel); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--rail); }
.modal-head h2 { margin: 0; font: 600 13px/1 var(--disp); letter-spacing: 1.4px; text-transform: uppercase; }
.modal-x { background: transparent; border: 1px solid var(--rail); color: var(--muted); border-radius: var(--r-sm); width: 30px; height: 30px; cursor: pointer; font-size: 13px; }
.modal-x:hover { color: var(--red); border-color: var(--red); }
.modal-body { padding: 18px; }
.modal-foot { padding: 14px 18px; border-top: 1px solid var(--rail); display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* ================= AUTH: Verify-Gate + Lobby-Rollen + Admin-Panel ================= */
.verify-msg { margin: 4px 0 8px; font: 500 13px/1.6 var(--body); color: var(--txt); }
.verify-hint { margin: 0 0 12px; font: 500 11px/1.5 var(--mono); color: var(--muted); }
.verify-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.verify-actions .btn { flex: 1 1 auto; }
.btn.ghost { background: transparent; color: var(--muted); border-color: var(--rail); }
.btn.ghost:hover:not(:disabled) { color: var(--red); border-color: var(--red); }
.btn.xs { font-size: 10px; padding: 5px 9px; }
.btn.danger { color: var(--red); border-color: rgba(var(--red-rgb), .5); background: rgba(var(--red-rgb), .08); }
.btn.danger:hover:not(:disabled) { background: rgba(var(--red-rgb), .18); }

.lobby-head-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.lobby-create-note { margin: 0 0 4px; font: 500 11px/1.5 var(--mono); color: var(--muted); padding: 10px 12px; border: 1px dashed var(--rail); border-radius: var(--r-sm); background: rgba(var(--brand-rgb), .04); }

/* Über Lobby (z-90) + Auth (z-100) — das Admin-Panel wird aus der Lobby geöffnet. */
#admin-modal { z-index: 110; }
.admin-modal { width: min(860px, 96vw); }
.admin-body { padding: 16px 18px; }
.admin-scroll { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font: 500 12px/1.4 var(--mono); }
.admin-table th { text-align: left; font: 600 9px/1 var(--disp); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--rail); white-space: nowrap; }
.admin-table td { padding: 9px 10px; border-bottom: 1px solid rgba(var(--brand-rgb), .07); vertical-align: middle; }
.admin-table tr:hover td { background: rgba(var(--brand-rgb), .04); }
.admin-table td.is-self { color: var(--accent); font-weight: 600; }
.admin-email { color: var(--muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.admin-role { background: var(--panel2); color: var(--txt); border: 1px solid var(--rail); border-radius: var(--r-sm); padding: 5px 8px; font: 500 11px/1 var(--mono); cursor: pointer; }
.admin-role:disabled { opacity: .5; cursor: default; }
.admin-badge { font: 600 9px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; padding: 4px 7px; border-radius: var(--r-pill); white-space: nowrap; }
.admin-badge.ok { color: var(--green); background: rgba(var(--green-rgb), .12); }
.admin-badge.no { color: var(--amber); background: rgba(var(--amber-rgb), .12); }
/* KEIN display:flex auf dem <td> — das nähme die Zelle aus dem Tabellen-Layout
   und sie wäre nicht mehr gleich hoch wie die Geschwister-Zellen. */
.admin-actions { white-space: nowrap; vertical-align: middle; }
.admin-actions > * { vertical-align: middle; }
.admin-actions > * + * { margin-left: 6px; }
.admin-noaction { color: var(--dim); }
.admin-empty { text-align: center; color: var(--muted); padding: 22px 10px; }
#admin-err { min-height: 1em; }

.admin-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.admin-search { flex: 1 1 200px; min-width: 0; background: var(--panel2); color: var(--txt); border: 1px solid var(--rail); border-radius: var(--r-sm); padding: 8px 11px; font: 500 12px/1 var(--mono); }
.admin-search::placeholder { color: var(--dim); }
.admin-search:focus-visible { outline: none; box-shadow: var(--ring); }
.admin-count { margin-left: auto; font: 500 11px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.admin-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.admin-pager { display: flex; align-items: center; gap: 8px; }
.admin-pageinfo { font: 600 11px/1 var(--mono); color: var(--muted); min-width: 44px; text-align: center; }

.cfg-grid { display: grid; grid-template-columns: 120px 1fr; gap: 12px 16px; align-items: center; }
.cfg-grid > label { font: 600 10px/1.3 var(--disp); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.cfg-grid select, .cfg-grid input[type="range"] { width: 100%; }
.cfg-grid select { background: var(--panel2); color: var(--txt); border: 1px solid var(--rail); border-radius: var(--r-sm); padding: 8px 10px; font: 500 12px/1 var(--mono); }
.cfg-grid input[type="range"] { accent-color: var(--accent); }
.cfg-row2 { display: flex; align-items: center; gap: 10px; }
.cfg-row2 .val { font: 600 12px/1 var(--mono); color: var(--cyan); min-width: 76px; text-align: right; }
.cfg-count { display: flex; gap: 6px; }
.cfg-count button { font: 600 11px/1 var(--mono); padding: 6px 12px; border-radius: var(--r-sm); border: 1px solid var(--rail); background: var(--panel2); color: var(--muted); cursor: pointer; }
.cfg-count button.on { background: var(--brand); color: var(--bg); border-color: var(--brand); }
.cfg-chassis-desc { grid-column: 2; font: 500 10px/1.4 var(--mono); color: var(--dim); margin-top: -6px; }
.cfg-cpu-desc { grid-column: 2; font: 500 10px/1.4 var(--mono); color: var(--dim); margin-top: -6px; }

.cfg-preview { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rail); }
.cfg-preview > div { text-align: center; }
.cfg-preview span { display: block; font: 600 8.5px/1.3 var(--disp); letter-spacing: 1px; text-transform: uppercase; color: var(--dim); }
.cfg-preview b { display: block; font: 600 16px/1.2 var(--mono); margin-top: 5px; color: var(--txt); }
.cfg-preview .price b { color: var(--accent); }
.cfg-preview .comp b { color: var(--cyan); }
.cfg-hint { font: 500 10px/1.4 var(--mono); color: var(--muted); }
.cfg-hint.bad { color: var(--red); }

/* ================= FOOT ================= */
.foot { max-width: 1440px; margin: 4px auto 26px; padding: 0 22px; color: var(--dim);
  font: 500 10px/1.6 var(--mono); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.foot-legal { display: inline-flex; gap: 6px; align-items: center; }
.foot-legal a { color: var(--muted); text-decoration: none; }
.foot-legal a:hover { color: var(--brand); }

/* ================= ANIMATIONS ================= */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes slotin { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.flash { animation: flash .5s ease; }
@keyframes flash { 0% { background: rgba(var(--accent-rgb), .28); } 100% { background: transparent; } }

/* ================= RESPONSIVE ================= */
@media (max-width: 1080px) {
  .rackgrid, .consolewrap, .wargrid { grid-template-columns: 1fr; }
  .rzstats { grid-template-columns: repeat(2, 1fr); }
  .rooms { grid-template-columns: 1fr; }
  .hud { gap: 12px; }
  .hud .cell:not(.hero) { display: none; }
}

/* --- Phone: Header umbrechen (Marke oben, Steuerung darunter), Tabs wischbar --- */
@media (max-width: 760px) {
  .topbar { gap: 8px 12px; padding: 9px 12px; position: static; }
  .brand { flex: 1 1 100%; }             /* Marke bekommt die ganze erste Zeile */
  .spacer { display: none; }
  .hud { display: none; }                /* Kennzahlen stehen im Dashboard */
  .conn .conn-txt { display: none; }     /* nur der Status-Punkt */
  .conn { gap: 0; }
  .user-chip { margin-left: auto; }      /* rechtsbündig in der Steuer-Zeile */
  .room-chip { max-width: 44vw; }
  #room-name-hud { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Tabs: horizontal wischbar statt abgeschnitten; klebt oben (Topbar scrollt weg). */
  .tabs { top: 0; overflow-x: auto; flex-wrap: nowrap; padding: 9px 12px; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: 0 0 auto; white-space: nowrap; padding: 9px 13px; }
}

/* ===== #67 Rack-UX: Geräte-Menü · Verschleiß/Umbau · Presets ===== */
.uslot.clickable { cursor: pointer; }
.uslot.clickable:hover { border-color: var(--brand); }
.uslot.working { opacity: .68; }
.btn.small { font-size: 11px; padding: 6px 11px; }
.btn.danger { border-color: var(--red); color: var(--red); }
.btn.danger:hover:not(:disabled) { background: rgba(var(--red-rgb), .12); }
.btn.armed { background: rgba(var(--red-rgb), .14); border-color: var(--red); color: var(--red); animation: pulse-armed 1s ease-in-out infinite; }
.dev-menu { width: min(460px, 94vw); }
.dev-info { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.dev-info .kv { display: flex; justify-content: space-between; font: 500 12px/1.5 var(--mono); color: var(--muted); }
.dev-info .kv b { color: var(--txt); }
.dev-note { font: 500 12px/1.5 var(--mono); color: var(--accent); margin: 0; }
.dev-actions { display: flex; flex-direction: column; gap: 9px; }
.dev-actions > .btn { width: 100%; }
.dev-move, .dev-preset { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.dev-sub { font: 500 11px/1 var(--mono); color: var(--muted); width: 100%; }
.dev-preset-name { flex: 1 1 120px; background: var(--panel2); border: 1px solid var(--rail); border-radius: var(--r-sm); color: var(--txt); font: 500 12px/1 var(--mono); padding: 8px 10px; }
.dev-preset-name:focus { outline: none; border-color: var(--brand); }
.cfg-presets { margin-top: 12px; border-top: 1px solid var(--rail); padding-top: 12px; }
.cfg-presets-head { font: 600 10px/1.4 var(--disp); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.cfg-preset-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cfg-preset-name { flex: 1 1 auto; font: 500 12px/1.4 var(--mono); color: var(--txt); }
/* #67 Drag & Drop: Rack umsortieren + tauschen (Pointer-Drag mit schwebendem Ghost) */
.uslot.dev:not(.working) { cursor: grab; }
.uslot.dev.dragging { opacity: .35; cursor: grabbing; }
.uslot.dev.drop-target { border-color: var(--accent); border-style: solid; background: rgba(var(--accent-rgb, 209,148,41), .16); box-shadow: inset 0 0 0 2px var(--accent), 0 0 8px rgba(var(--accent-rgb, 209,148,41), .35); }
.uslot.slot-free.drop-target { border-color: var(--accent); border-style: solid; background: rgba(var(--accent-rgb, 209,148,41), .16); box-shadow: inset 0 0 0 2px var(--accent); }   /* 6a: freie HE als Drop-Ziel */
/* 6a-M4: Block-Drop-Vorschau — die u belegten HE grün (passt) / rot (kollidiert) */
.uslot.slot-free.drop-ok { border-color: var(--green); border-style: solid; background: rgba(var(--green-rgb, 90,200,120), .18); box-shadow: inset 0 0 0 2px var(--green); }
.uslot.slot-free.drop-bad { border-color: var(--red); border-style: solid; background: rgba(var(--red-rgb, 220,80,80), .16); box-shadow: inset 0 0 0 2px var(--red); }
/* Tausch-Ziel (über einem anderen Gerät): brauner Rahmen = tauschbar, roter = passt nicht */
.uslot.dev.drop-swap { border-color: var(--brand); border-style: solid; background: rgba(var(--accent-rgb, 209,148,41), .18); box-shadow: inset 0 0 0 2px var(--brand), 0 0 10px rgba(var(--accent-rgb, 209,148,41), .35); }
.uslot.dev.drop-bad { border-color: var(--red); border-style: solid; background: rgba(var(--red-rgb, 220,80,80), .16); box-shadow: inset 0 0 0 2px var(--red); }
/* Schwebender Klon, der beim Ziehen dem Cursor folgt (position/größe via Custom Props → keine Inline-Styles) */
.uslot.rack-ghost { position: fixed; left: var(--gx); top: var(--gy); width: var(--gw); margin: 0; z-index: 200;
  pointer-events: none; opacity: .92; border-style: solid; border-color: var(--brand);
  box-shadow: 0 14px 34px rgba(0,0,0,.55), inset 0 0 0 1px var(--brand); }
/* #70 Intel-Decay: Countdown im Ziel-Kärtchen */
.foe .intel-eta { font: 500 10px/1.4 var(--mono); color: var(--muted); margin: 2px 0 4px; opacity: .85; }
/* #72 Auftrags-Kapazität: braucht / frei / danach */
.offer .caps { margin: 6px 0; display: flex; flex-direction: column; gap: 2px; }
.cap-row { display: flex; justify-content: space-between; gap: 10px; font: 500 10.5px/1.5 var(--mono); color: var(--muted); }
.cap-row .cap-k { color: var(--txt); opacity: .85; }
.cap-row .cap-v b { color: var(--txt); }
.cap-row.short .cap-v, .cap-row.short .cap-v b { color: var(--red); }
/* #71 Tier-Upgrade auffindbar: klickbares Badge + Puls bei leistbarem Ausbau */
.tierbadge { cursor: pointer; transition: border-color .15s, color .15s; }
.tierbadge:hover { border-color: var(--brand); color: var(--brand); }
.tierbadge.can-upgrade { color: var(--accent); border-color: var(--accent); animation: tier-pulse 1.8s ease-in-out infinite; }
@keyframes tier-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 209,148,41), .0); } 50% { box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 209,148,41), .18); } }
#btn-upgrade.ready { animation: tier-pulse 1.8s ease-in-out infinite; }
/* #73 Kredit-Aktionen */
/* Kredit-Aktions-Zelle wie eine .dcard stylen (gleiche Höhe/Optik im Wirtschafts-Grid, statt kürzerer Button-Box) */
.loan-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; align-content: center;
  background: var(--panel2); border: 1px solid var(--rail); border-radius: var(--r); padding: 13px 15px; }
.loan-actions .btn { flex: 1 1 auto; }
/* Betrag auf eigener Zeile im Button (z. B. „Kredit aufnehmen" / +Summe) */
.btn .btn-amt { display: block; font-size: .82em; font-weight: 400; opacity: .85; margin-top: 2px; }
/* Klickbare ID-Chips (Infektions-/Op-IDs im Panel UND in der Konsole) — ein Klick kopiert sie */
.copy-id { cursor: pointer; color: var(--cyan, #67b0d1); border-bottom: 1px dotted currentColor; padding: 0 1px; border-radius: 2px; font-family: var(--mono); }
.copy-id:hover, .copy-id:focus-visible { background: rgba(103, 176, 209, .16); outline: none; }
/* Reward-Juice: Gold-Toast bei Erfolg + kurzer HUD-Puls */
.toast.win { border-color: var(--accent); box-shadow: var(--shadow-panel), 0 0 14px rgba(var(--accent-rgb, 209,148,41), .4); color: var(--accent); font-weight: 600; }
.juice-pulse { animation: juice-pulse .7s ease-out; }
@keyframes juice-pulse { 0% { transform: scale(1); color: var(--accent); text-shadow: 0 0 10px rgba(var(--accent-rgb, 209,148,41), .7); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
/* Onboarding-Wegweiser (Neuling) */
.onboard { background: var(--grad-panel); border: 1px solid var(--accent); border-radius: var(--r); padding: 12px 15px; margin-bottom: 16px; box-shadow: 0 0 14px rgba(var(--accent-rgb, 209,148,41), .18); }
.onboard[hidden] { display: none; }
.ob-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ob-head b { font: 600 12px/1 var(--disp); letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
.ob-x { background: transparent; border: 1px solid var(--rail); color: var(--muted); border-radius: var(--r-sm); width: 26px; height: 26px; cursor: pointer; }
.ob-x:hover { color: var(--txt); border-color: var(--brand); }
.ob-steps { margin: 0; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ob-steps li { font: 500 12.5px/1.5 var(--mono); color: var(--txt); display: flex; gap: 9px; align-items: flex-start; }
.ob-steps li.ok { color: var(--muted); text-decoration: line-through; }
.ob-check { color: var(--accent); font-weight: 700; flex: 0 0 auto; }
.ob-steps li.ok .ob-check { color: var(--green); }

/* ============================================================================
   Recon-Minigame-Overlay (#77) — Terminal-Optik, Marken-DNA Gold+Blau
   ============================================================================ */
#recon-overlay,#freelance-overlay{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;
  background:color-mix(in srgb, var(--bg2) 62%, transparent);backdrop-filter:blur(3px)}
#recon-overlay[hidden],#freelance-overlay[hidden]{display:none}
/* Schicht 7: Mikro-Job-Karte in der Wirtschaft-Page */
.eco-card.mikrojob { border-color: color-mix(in oklab, var(--accent) 35%, var(--rail)); }
.mj-row { display: flex; align-items: center; gap: 14px; }
.mj-cd { color: var(--dim); font: 500 13px/1 var(--mono); }
.recon-card{width:min(440px,92vw);background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--rail);border-radius:var(--r);box-shadow:var(--shadow-panel);overflow:hidden;
  font-family:var(--mono)}
.recon-head{display:flex;align-items:center;gap:9px;padding:11px 13px;border-bottom:1px solid var(--rail);
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.10),transparent)}
.recon-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.recon-title{font:700 13px/1 var(--disp);letter-spacing:.4px;color:var(--txt)}
.recon-sp{flex:1;text-align:right;font:700 12px/1 var(--mono);color:var(--muted);letter-spacing:.5px}
.recon-sp.rc-urgent{color:var(--bad,#e0574f)}
.recon-abort{border:1px solid var(--rail);background:transparent;color:var(--muted);border-radius:var(--r-sm);
  padding:5px 10px;font:600 11px/1 var(--mono);cursor:pointer}
.recon-abort:hover{color:var(--txt);border-color:var(--muted)}
.recon-body{padding:16px 15px;min-height:150px;display:flex;flex-direction:column;gap:13px}
.rc-info{font:600 11.5px/1.4 var(--mono);color:var(--brand);letter-spacing:.3px}
.recon-foot{padding:9px 13px 13px;border-top:1px solid var(--rail);display:flex;flex-direction:column;gap:7px}
.recon-q{height:6px;border-radius:5px;background:var(--rail);overflow:hidden}
.recon-q i{display:block;height:100%;width:var(--w,20%);background:linear-gradient(90deg,var(--brand),var(--accent));transition:width .25s ease}
.recon-status{font:500 11px/1.4 var(--mono);color:var(--muted);text-align:center}
.rc-form{display:flex;gap:8px;margin-top:2px}
.rc-btn{flex:1;padding:10px;border:1px solid var(--accent);background:rgba(var(--accent-rgb),.12);color:var(--accent);
  border-radius:var(--r-sm);font:700 12.5px/1 var(--disp);letter-spacing:1px;cursor:pointer}
.rc-btn:hover{background:rgba(var(--accent-rgb),.22)}
.rc-btn2{border-color:var(--rail);background:color-mix(in srgb, var(--txt) 4%, transparent);color:var(--muted)}
.rc-btn2:hover{color:var(--txt);background:color-mix(in srgb, var(--txt) 8%, transparent)}
.rc-input{flex:1;background:var(--bg2);border:1px solid var(--rail);border-radius:var(--r-sm);color:var(--txt);
  padding:0 12px;font:700 16px/40px var(--mono);letter-spacing:4px;text-transform:uppercase;outline:none}
.rc-input:focus{border-color:var(--accent)}
/* code */
.rc-hist{display:flex;flex-direction:column;gap:5px;max-height:150px;overflow:auto}
.rc-row{display:flex;align-items:center;gap:10px}
.rc-guess{font:700 15px/1 var(--mono);letter-spacing:4px;color:var(--txt)}
.rc-fb{font:700 12px/1 var(--mono);padding:2px 6px;border-radius:20px}
.rc-exact{color:var(--green);background:rgba(var(--green-rgb),.14)}
.rc-present{color:var(--accent);background:rgba(var(--accent-rgb),.14)}
/* traversal */
.rc-trail{display:flex;gap:8px;justify-content:center;align-items:center;font-size:20px}
.rc-node{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--rail);color:var(--dim);font-size:15px}
.rc-node.safe{border-color:var(--brand);color:var(--brand)}
.rc-node.honey{border-color:var(--red);color:var(--red);box-shadow:0 0 10px rgba(var(--red-rgb),.4)}
/* handshake */
.rc-hs{display:flex;align-items:center;justify-content:center;gap:14px;padding:6px 0}
.rc-port{font:700 15px/1 var(--mono);color:var(--txt)}
.rc-flag{font:800 15px/1 var(--disp);letter-spacing:2px;padding:8px 14px;border-radius:var(--r-sm)}
.rc-flag.rc-SYN{color:var(--green);background:rgba(var(--green-rgb),.14);border:1px solid rgba(var(--green-rgb),.4)}
.rc-flag.rc-RST{color:var(--red);background:rgba(var(--red-rgb),.14);border:1px solid rgba(var(--red-rgb),.4)}
@media (prefers-reduced-motion:reduce){.recon-q i{transition:none}}