/* ATM10 Leitstand
   Gehäuse aus dunklem Stahlblau, jede Anlage trägt die Farbe ihres Materials:
   Fluix-Violett fürs ME, Induktions-Cyan für Energie, Yellorium-Gelb für den Reaktor. */

:root {
  --casing: #131a21;
  --panel: #1b252f;
  --panel-2: #22303c;
  --rivet: #2d3c4a;
  --line: #2a3845;
  --ink: #e4ebf0;
  --ink-2: #9db0bf;
  --ink-3: #6a7d8e;

  --fluix: #a77bf3;
  --fluix-dim: #a77bf31f;
  --flux: #4fd1e8;
  --flux-dim: #4fd1e81c;
  --yell: #e8d44d;
  --yell-dim: #e8d44d1a;

  /* Diagrammserien (geprüft auf CVD + Helligkeit im Dunkelmodus) */
  --s-in: #2fa3ba;
  --s-out: #d9677f;
  --s-fuel: #d5742b;
  --s-case: #8583e8;

  --ok: #3fb97a;
  --warn: #e8a33d;
  --crit: #ef5350;

  --r-lg: 14px;
  --r-md: 9px;
  --r-sm: 5px;

  --display: "Oxanium", "Segoe UI", system-ui, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--casing);
  color: var(--ink);
  font: 400 15px/1.45 var(--body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
/* feines Lochblech-Muster als Gehäusestruktur */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(#ffffff08 1px, transparent 1.4px);
  background-size: 14px 14px;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--flux); outline-offset: 2px; border-radius: 4px; }
.num { font-family: var(--display); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ Login */
.gate {
  position: fixed; inset: 0; display: grid; place-items: center; z-index: 50;
  background: radial-gradient(ellipse at 50% 30%, #1d2a36 0%, var(--casing) 70%);
  padding: 24px;
}
.gate form { width: min(360px, 100%); display: grid; gap: 14px; }
.gate h1 { font: 600 30px/1.1 var(--display); margin: 8px 0 0; }
.gate p { margin: 0; color: var(--ink-2); }
.gate input {
  background: var(--panel); border: 1px solid var(--rivet); border-radius: var(--r-md);
  padding: 13px 14px; font-size: 16px;
}
.gate .err { color: var(--crit); min-height: 1.4em; font-size: 14px; }

/* ------------------------------------------------------------------ Gerüst */
.app { position: relative; z-index: 1; display: grid; min-height: 100%;
  grid-template-columns: 76px 1fr; grid-template-rows: auto 1fr; }
.rail {
  grid-row: 1 / -1; position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 0;
  background: #10161c; border-right: 1px solid var(--line);
}
.rail .mark { width: 40px; height: 40px; margin-bottom: 14px; }
.nav-btn {
  width: 60px; padding: 9px 0 7px; border: 0; border-radius: var(--r-md); background: none;
  display: grid; justify-items: center; gap: 4px; color: var(--ink-3); font-size: 11px;
}
.nav-btn svg { width: 22px; height: 22px; }
.nav-btn:hover { color: var(--ink-2); background: #ffffff06; }
.nav-btn[aria-current="page"] { color: var(--ink); background: var(--panel-2); }
.nav-btn[aria-current="page"] svg { color: var(--tint, var(--flux)); }

.top {
  display: flex; align-items: center; gap: 16px; padding: 18px 28px 6px;
}
.top h1 { font: 600 22px/1 var(--display); margin: 0; letter-spacing: .02em; }
.top .sub { color: var(--ink-3); font-size: 13px; }
.link-state {
  margin-left: auto; display: flex; align-items: center; gap: 9px;
  padding: 7px 12px 7px 10px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line);
  font-size: 13px; color: var(--ink-2);
}
.lamp { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); box-shadow: 0 0 0 3px #ffffff08; }
.lamp.on { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.lamp.off { background: var(--crit); box-shadow: 0 0 10px var(--crit); }
.lamp.wait { background: var(--warn); }

main { padding: 12px 28px 40px; min-width: 0; }
.page { display: none; }
.page.active { display: block; }

.grid { display: grid; gap: 16px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; }
.c6 { grid-column: span 6; } .c7 { grid-column: span 7; } .c8 { grid-column: span 8; } .c12 { grid-column: span 12; }

/* Panels sind Maschinengehäuse: Kopfleiste in der Anlagenfarbe, keine Schatten */
.panel {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 18px 20px 20px; min-width: 0;
}
.panel::before {
  content: ""; position: absolute; left: 20px; right: 20px; top: -1px; height: 2px;
  background: var(--tint, var(--rivet)); border-radius: 0 0 2px 2px; opacity: .85;
}
.panel[data-sys="me"] { --tint: var(--fluix); }
.panel[data-sys="energy"] { --tint: var(--flux); }
.panel[data-sys="reactor"] { --tint: var(--yell); }
.panel.fill { display: flex; flex-direction: column; }
.panel.fill .chart { flex: 1; min-height: 220px; }
.panel-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.panel-head h2 { font: 600 16px/1.2 var(--display); margin: 0; letter-spacing: .02em; }
.panel-head .aside { margin-left: auto; font-size: 13px; color: var(--ink-3); }
.panel-head a, .linkish { color: var(--ink-2); font-size: 13px; background: none; border: 0; padding: 0; text-decoration: underline; text-decoration-color: var(--rivet); text-underline-offset: 3px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px 18px; }
.stat .v { font: 500 22px/1.15 var(--display); font-variant-numeric: tabular-nums; }
.stat .v small { font-size: 13px; color: var(--ink-2); margin-left: 3px; font-weight: 400; }
.stat .k { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.pos { color: var(--ok); } .neg { color: var(--s-out); }

/* ------------------------------------------------------------------ Kopfzahlen der Übersicht */
.vitals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.vital {
  position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 16px 18px 14px; overflow: hidden; text-align: left; display: block; width: 100%;
}
.vital .label { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.vital .label i { width: 8px; height: 8px; border-radius: 2px; background: var(--tint); }
.vital .big { font: 500 32px/1.1 var(--display); font-variant-numeric: tabular-nums; margin-top: 6px; }
.vital .big small { font-size: 15px; color: var(--ink-2); margin-left: 4px; }
.vital .foot { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.vital .spark { position: absolute; right: 0; top: 18px; width: 42%; height: 44px; opacity: .9; }
.vital .big, .vital .foot { position: relative; z-index: 1; }
.vital[data-sys="me"] { --tint: var(--fluix); }
.vital[data-sys="energy"] { --tint: var(--flux); }
.vital[data-sys="reactor"] { --tint: var(--yell); }
.vital[data-sys="cpu"] { --tint: var(--fluix); }

/* ------------------------------------------------------------------ Reaktorkern (Signaturelement) */
.core-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 20px; align-items: stretch; }
.core {
  position: relative; aspect-ratio: 1; width: 100%; max-width: 420px; justify-self: center;
  border-radius: 18px; padding: 14px; background:
    linear-gradient(#0c1116, #0c1116) padding-box,
    repeating-linear-gradient(45deg, #2b3a47 0 6px, #22303c 6px 12px) border-box;
  border: 6px solid transparent;
}
.core svg { width: 100%; height: 100%; display: block; }
.core .glow { transition: opacity 1.2s ease; }
.core-label {
  position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px;
  font: 500 13px/1.3 var(--display); white-space: nowrap;
}
.core-label.on { color: var(--yell); border-color: #e8d44d55; }
.core-label.off { color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .core.active .rod-heat { animation: shimmer 3.2s ease-in-out infinite; }
  .core.active .rod-heat:nth-child(3n) { animation-delay: -1.1s; }
  .core.active .rod-heat:nth-child(3n+1) { animation-delay: -2.3s; }
}
@keyframes shimmer { 0%, 100% { opacity: var(--o, .9); } 50% { opacity: calc(var(--o, .9) * .72); } }

.rod-control { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; justify-items: center; }
.rod-control .lbl { font-size: 13px; color: var(--ink-2); text-align: center; }
.rod-control .val { font: 500 28px/1 var(--display); }
.vslider { position: relative; width: 64px; height: 100%; min-height: 200px; touch-action: none; user-select: none; }
.vslider .track {
  position: absolute; inset: 0; border-radius: 12px; background: #0c1116; border: 1px solid var(--rivet); overflow: hidden;
}
.vslider .fill { position: absolute; left: 0; right: 0; top: 0; background:
  repeating-linear-gradient(0deg, #4a5966 0 3px, #3a4855 3px 9px); }
.vslider .knob {
  position: absolute; left: -6px; right: -6px; height: 22px; margin-top: -11px; border-radius: 6px;
  background: var(--ink); box-shadow: 0 2px 0 #0007; display: grid; place-items: center;
}
.vslider .knob::after { content: ""; width: 26px; height: 2px; background: #0005; box-shadow: 0 -5px 0 #0005, 0 5px 0 #0005; }
.vslider.disabled .knob { background: var(--ink-3); }
.vslider .scale { position: absolute; right: -24px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: var(--ink-3); }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.btn {
  border: 1px solid var(--rivet); background: var(--panel-2); color: var(--ink);
  border-radius: var(--r-md); padding: 10px 16px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px;
}
.btn:hover { border-color: #3f5262; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--yell); color: #1d1a05; border-color: var(--yell); }
.btn.go-me { background: var(--fluix); color: #160b2c; border-color: var(--fluix); }
.btn.scram {
  margin-left: auto; color: #fff; border: 0; background:
    repeating-linear-gradient(135deg, #b8322f 0 10px, #9c2522 10px 20px);
  font-family: var(--display); letter-spacing: .04em;
}
.btn.ghost { background: none; }
.btn svg { width: 16px; height: 16px; }

.toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.toggle input { appearance: none; width: 42px; height: 24px; border-radius: 99px; background: #0c1116; border: 1px solid var(--rivet); position: relative; margin: 0; cursor: pointer; }
.toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink-3); transition: transform .18s, background .18s; }
.toggle input:checked { background: #e8d44d22; border-color: #e8d44d77; }
.toggle input:checked::after { transform: translateX(18px); background: var(--yell); }

.seg { display: inline-flex; background: #0f151b; border: 1px solid var(--line); border-radius: var(--r-md); padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; padding: 5px 11px; border-radius: 6px; font-size: 13px; color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--panel-2); color: var(--ink); }

/* ------------------------------------------------------------------ Balken & Messwerke */
.meter { height: 10px; border-radius: 99px; background: #0c1116; border: 1px solid var(--line); overflow: hidden; display: flex; gap: 2px; }
.meter > span { display: block; height: 100%; background: var(--tint, var(--flux)); border-radius: 99px; transition: width .6s ease; }
.meter-row { display: grid; gap: 6px; margin-top: 12px; }
.meter-row .mr-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); }

/* Induction-Matrix als Zellenstapel */
.matrix { display: grid; grid-template-columns: 116px 1fr; gap: 22px; align-items: center; }
.cells { position: relative; height: 220px; border-radius: 12px; background: #0c1116; border: 1px solid var(--rivet); padding: 6px; display: flex; flex-direction: column-reverse; gap: 3px; }
.cells .cell { flex: 1; border-radius: 3px; background: #ffffff07; position: relative; overflow: hidden; }
.cells .cell > i { position: absolute; inset: 0; background: linear-gradient(90deg, #2aa6bd, #4fd1e8 55%, #8ae6f4); transform-origin: left; transform: scaleX(0); transition: transform .8s ease; }
.cells .pct { position: absolute; inset: auto 0 -30px; text-align: center; font: 500 18px/1 var(--display); }
@media (prefers-reduced-motion: no-preference) {
  .cells.charging .cell.edge > i { animation: pulse 1.6s ease-in-out infinite; }
}
@keyframes pulse { 50% { filter: brightness(1.35); } }

/* ------------------------------------------------------------------ Diagramme */
.chart { position: relative; width: 100%; height: 220px; }
.chart.tall { height: 280px; }
.chart.short { height: 160px; }
.chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart .grid line { stroke: #ffffff10; }
.chart .axis text { fill: var(--ink-3); font: 11px var(--body); }
.chart .xh { stroke: #ffffff40; stroke-width: 1; }
.chart .tip {
  position: absolute; pointer-events: none; z-index: 3; background: #0d1318f2; border: 1px solid var(--rivet);
  border-radius: var(--r-md); padding: 8px 10px; font-size: 12.5px; min-width: 140px; transform: translate(-50%, -100%);
  white-space: nowrap;
}
.chart .tip b { font-weight: 500; font-family: var(--display); }
.chart .tip .t { color: var(--ink-3); margin-bottom: 4px; }
.chart .tip .r { display: flex; align-items: center; gap: 8px; }
.chart .tip .r i { width: 10px; height: 3px; border-radius: 2px; }
.chart .empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); font-size: 14px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-2); margin: -4px 0 10px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 14px; height: 3px; border-radius: 2px; }

/* ------------------------------------------------------------------ ME */
.search-bar { display: flex; gap: 10px; margin-bottom: 14px; }
.search-bar input {
  flex: 1; min-width: 0; background: #0f151b; border: 1px solid var(--rivet); border-radius: var(--r-md);
  padding: 11px 14px; font-size: 16px;
}
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.chip { border: 1px solid var(--line); background: none; border-radius: 99px; padding: 5px 12px; font-size: 13px; color: var(--ink-2); }
.chip[aria-pressed="true"] { border-color: var(--fluix); color: var(--ink); background: var(--fluix-dim); }
.chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: none; }
.chip svg { width: 13px; height: 13px; color: var(--yell); }
.chip .n { color: var(--ink-3); font-family: var(--display); }
.tabbar { display: flex; gap: 8px; margin: 0 0 10px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.tabbar::-webkit-scrollbar { display: none; }
.note { font-size: 13px; margin-bottom: 10px; min-height: 1em; }
.btn.more { width: 100%; justify-content: center; margin-top: 10px; color: var(--ink-2); }
.side-col { display: grid; gap: 16px; align-content: start; }
.small { font-size: 13px; }
.tag { display: inline-block; font-size: 11.5px; padding: 1px 7px; border-radius: 99px; border: 1px solid var(--rivet); color: var(--ink-2); }
.tag.bad { color: var(--crit); border-color: #ef535066; }
.empty-state { display: grid; gap: 6px; justify-items: start; padding: 6px 0; }
.empty-state p { margin: 0; }
.empty-state .btn { margin-top: 8px; }

/* Item-Icons: flache Texturen und Würfel für Blöcke */
.ico { width: 40px; height: 40px; display: grid; place-items: center; position: relative; flex: none; }
.ico img { width: 32px; height: 32px; object-fit: cover; object-position: top; image-rendering: pixelated; }
.ico.cube svg { width: 34px; height: 34px; overflow: visible; }
.ico.cube image { image-rendering: optimizeSpeed; image-rendering: pixelated; }
.ico.lg { width: 56px; height: 56px; }
.ico.lg img { width: 48px; height: 48px; }
.ico.lg.cube svg { width: 50px; height: 50px; }

.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.item {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: left;
  border: 1px solid var(--line); background: #ffffff03; border-radius: var(--r-md); padding: 8px 12px 8px 8px; min-width: 0;
}
.item.missing { opacity: .6; }
.it-txt { display: grid; min-width: 0; }
.item .fav-mark { width: 12px; height: 12px; color: var(--yell); margin-right: 5px; vertical-align: -1px; }
.item:hover { border-color: #3f5262; background: #ffffff06; }
.item .name { font-size: 14px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .mod { font-size: 12px; color: var(--ink-3); }
.item .cnt { font: 500 16px/1 var(--display); font-variant-numeric: tabular-nums; text-align: right; }
.item .cnt small { display: block; font: 400 11.5px/1.3 var(--body); margin-top: 4px; }
.item .cnt small.cr { color: var(--fluix); }
.glyph {
  width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center;
  font: 600 14px/1 var(--display); color: #0d1216; position: relative; overflow: hidden;
  background: var(--g, #6a7d8e);
}
.glyph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, #ffffff40, transparent 50%, #00000030); }
.glyph.lg { width: 56px; height: 56px; font-size: 19px; border-radius: 11px; }

.cpu { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.cpu:first-of-type { border-top: 0; padding-top: 0; }
.cpu .row1 { display: flex; align-items: baseline; gap: 10px; }
.cpu .row1 b { font-weight: 500; }
.cpu .row1 .meta { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.cpu .job { font-size: 13.5px; color: var(--ink-2); display: flex; gap: 10px; align-items: center; }
.cpu .job .x { margin-left: auto; }
.cpu.idle .job { color: var(--ink-3); }

.bytes { display: flex; height: 26px; border-radius: 7px; overflow: hidden; background: #0c1116; border: 1px solid var(--line); gap: 2px; }
.bytes span { background: var(--fluix); }
.bytes span.fl { background: #6d5aa8; }

/* Trends: divergierende Balken um eine neutrale Mitte */
.trend { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 84px; gap: 12px; align-items: center; padding: 5px 0; font-size: 13.5px; }
.trend .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trend .bar { position: relative; height: 12px; }
.trend .bar::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--ink-3); }
.trend .bar i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.trend .bar i.up { left: calc(50% + 2px); background: var(--s-in); }
.trend .bar i.down { right: calc(50% + 2px); background: var(--s-out); }
.trend .dv { text-align: right; font-family: var(--display); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ Protokoll */
.log { list-style: none; margin: 0; padding: 0; }
.log li { display: grid; grid-template-columns: 54px 20px 1fr; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; align-items: start; }
.log li:first-child { border-top: 0; }
.log time { color: var(--ink-3); font-family: var(--display); font-size: 13px; padding-top: 1px; }
.log svg { width: 16px; height: 16px; margin-top: 2px; }
.log .k-ok svg { color: var(--ok); } .log .k-warn svg { color: var(--warn); } .log .k-crit svg { color: var(--crit); }
.log .k-info svg { color: var(--ink-3); } .log .k-action svg { color: var(--flux); }
.log .day { grid-template-columns: 1fr; color: var(--ink-3); font-size: 12px; padding-top: 16px; border-top: 0; }

/* Hinweisband für aktive Warnungen */
.alerts { display: grid; gap: 8px; margin-bottom: 16px; }
.alert { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-md); border: 1px solid; font-size: 14px; }
.alert svg { width: 18px; height: 18px; flex: none; }
.alert.crit { border-color: #ef535066; background: #ef53501a; }
.alert.crit svg { color: var(--crit); }
.alert.warn { border-color: #e8a33d55; background: #e8a33d14; }
.alert.warn svg { color: var(--warn); }

/* ------------------------------------------------------------------ Sheet (Crafting, Automatik) */
.scrim { position: fixed; inset: 0; background: #05080bb3; z-index: 40; display: grid; place-items: center; padding: 20px; }
.sheet {
  width: min(440px, 100%); background: var(--panel); border: 1px solid var(--rivet); border-radius: 18px;
  padding: 22px; display: grid; gap: 16px; max-height: calc(100vh - 40px); overflow: auto;
}
.sheet h3 { margin: 0; font: 600 19px/1.25 var(--display); }
.sheet .head { display: flex; gap: 14px; align-items: center; }
.qty { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.qty button { border: 1px solid var(--line); background: #0f151b; border-radius: var(--r-md); padding: 10px 0; font-family: var(--display); }
.qty button[aria-pressed="true"] { border-color: var(--fluix); background: var(--fluix-dim); }
.qty-input { display: flex; gap: 8px; align-items: center; }
.qty-input input { flex: 1; min-width: 0; background: #0f151b; border: 1px solid var(--rivet); border-radius: var(--r-md); padding: 10px 12px; font: 500 18px var(--display); }
.sheet .row-end { display: flex; gap: 10px; justify-content: flex-end; }

.range { display: grid; gap: 8px; }
.range .rt { display: flex; justify-content: space-between; font-size: 14px; }
.range input[type=range] { width: 100%; accent-color: var(--yell); }

/* Toast */
.toasts { position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; width: min(420px, calc(100% - 32px)); }
.toast { background: #0d1318; border: 1px solid var(--rivet); border-left: 3px solid var(--ok); border-radius: var(--r-md); padding: 11px 14px; font-size: 14px; }
.toast.bad { border-left-color: var(--crit); }
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: rise .22s ease-out; }
  @keyframes rise { from { transform: translateY(8px); opacity: 0; } }
}

.tabs { display: none; }

/* ------------------------------------------------------------------ Zwischengrößen */
@media (max-width: 1240px) {
  .c5, .c7 { grid-column: span 12; }
  .c4 { grid-column: span 6; }
  .vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ Handy */
@media (max-width: 760px) {
  body { font-size: 15px; }
  .app { grid-template-columns: 1fr; }
  .rail { display: none; }
  .top { padding: calc(14px + var(--safe-t)) 16px 4px; gap: 10px; position: sticky; top: 0; z-index: 10; background: #131a21ee; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .top h1 { font-size: 19px; }
  .top .sub { display: none; }
  .link-state { padding: 6px 10px; font-size: 12px; }
  main { padding: 10px 12px calc(96px + var(--safe-b)); }
  .grid { gap: 12px; }
  .c3, .c4, .c5, .c6, .c7, .c8 { grid-column: span 12; }
  .panel { padding: 16px 16px 18px; border-radius: 12px; }
  .vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
  .vital { padding: 12px 13px 10px; border-radius: 12px; }
  .vital .big { font-size: 24px; }
  .vital .big small { font-size: 13px; }
  .vital .spark { display: none; }
  .core-wrap { grid-template-columns: minmax(0, 1fr) 84px; gap: 14px; }
  .vslider { width: 54px; min-height: 160px; }
  .vslider .scale { display: none; }
  .rod-control .val { font-size: 22px; }
  .actions .btn { flex: 1 1 auto; justify-content: center; }
  .btn.scram { margin-left: 0; flex-basis: 100%; padding: 13px; }
  .matrix { grid-template-columns: 84px 1fr; gap: 16px; }
  .cells { height: 180px; }
  .items { grid-template-columns: 1fr; }
  .search-bar .btn span { display: none; }
  .search-bar .btn { padding: 10px 13px; }
  .chart { height: 190px; }
  .chart.tall { height: 220px; }
  .trend { grid-template-columns: minmax(0, 1fr) 90px 70px; }
  .sheet { align-self: end; border-radius: 18px 18px 12px 12px; margin-bottom: var(--safe-b); }
  .scrim { padding: 10px; }
  .toasts { bottom: calc(86px + var(--safe-b)); }

  .tabs {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 20;
    left: 10px; right: 10px; bottom: calc(10px + var(--safe-b));
    background: #0f151bf2; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line); border-radius: 18px; padding: 6px;
  }
  .tabs .nav-btn { width: auto; font-size: 10.5px; padding: 8px 0 6px; }
}

/* ------------------------------------------------------------------ Crafting */
.jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.jobcard { border: 1px solid var(--line); border-radius: var(--r-md); background: #ffffff03; padding: 14px 14px 12px; display: grid; gap: 10px; min-width: 0; }
.job-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.job-head h3 { margin: 0; font: 600 16px/1.25 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-head .meta { font-size: 13px; color: var(--ink-3); }
.job-head .x { align-self: start; }
.meter.big { height: 14px; }
.meter.big > span { background: linear-gradient(90deg, #7c55d6, var(--fluix)); }
.meter.thin { height: 6px; }
.job-row { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; }
.job-row .pc { font-size: 20px; }
.job-eta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.job-eta small { display: block; font-size: 12px; color: var(--ink-3); }
.job-eta b { font-weight: 500; font-size: 17px; }
.job-foot { font-size: 12.5px; }

.mini-job { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.mini-job:first-child { border-top: 0; padding-top: 0; }
.mj-body { display: grid; gap: 6px; min-width: 0; }
.mj-top { display: flex; gap: 10px; font-size: 13.5px; }
.mj-top .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.mj-top .num { color: var(--ink-2); font-size: 13px; white-space: nowrap; }

.timeline { width: 100%; min-height: 80px; }
.timeline svg { display: block; width: 100%; height: auto; }
.tl-grid { stroke: #ffffff0d; }
.tl-ax { fill: var(--ink-3); font: 11px var(--body); }
.tl-lane { fill: #0c1116; stroke: var(--line); }
.tl-name { fill: var(--ink-2); font: 11.5px var(--body); }
.tl-future { fill: #ffffff05; }
.tl-bar { cursor: pointer; }
.tl-bar.done { fill: #8a6ad0; opacity: .55; }
.tl-bar.cancel { fill: var(--s-out); opacity: .55; }
.tl-bar.run { fill: var(--fluix); }
.tl-bar.proj { fill: var(--fluix-dim); stroke: var(--fluix); stroke-dasharray: 3 3; stroke-width: 1; }
.tl-bar:hover { opacity: 1; filter: brightness(1.15); }
.tl-lbl { fill: #120a24; font: 500 10.5px var(--body); }
.tl-now { stroke: var(--ink); stroke-width: 1.4; }
.tl-nowlbl { fill: var(--ink-2); font: 11px var(--body); }
.tl-info { display: flex; gap: 10px; align-items: center; font-size: 13.5px; margin-top: 10px; min-height: 40px; }

.done { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: 24px; }
.done li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); }
.dn-top { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.dn-top .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-meta { font-size: 12.5px; color: var(--ink-3); }

/* ------------------------------------------------------------------ Reaktor-Verbrauch */
.supply { display: grid; gap: 10px; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.sup { display: flex; gap: 12px; align-items: center; font-size: 14px; }
.pick { display: grid; gap: 6px; max-height: 50vh; overflow: auto; }
.pick-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; text-align: left; border: 1px solid var(--line); border-radius: var(--r-md); background: #0f151b; padding: 8px 10px; }
.pick-row .faint { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-row[aria-pressed="true"] { border-color: var(--yell); background: var(--yell-dim); }

/* ------------------------------------------------------------------ Icons-Import, Diagnose */
.btn.star { margin-left: auto; align-self: start; padding: 8px 12px; }
.btn.star svg { color: var(--ink-2); }
.btn.star.on svg { color: var(--yell); }
.sheet .hd-txt { min-width: 0; flex: 1; }
.sheet .hd-txt h3 { overflow-wrap: anywhere; }
.steps { margin: 0; padding-left: 20px; display: grid; gap: 12px; font-size: 14px; color: var(--ink-2); }
.steps b { color: var(--ink); font-weight: 500; }
.cmdline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 8px; align-items: start; }
.cmdline code { display: block; background: #0c1116; border: 1px solid var(--rivet); border-radius: var(--r-md); padding: 10px; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); overflow-wrap: anywhere; user-select: all; }
.manual summary { cursor: pointer; color: var(--ink-2); font-size: 14px; }
.manual[open] { display: grid; gap: 10px; }
.manual label.btn { justify-self: start; }
.icon-job { margin-top: 12px; font-size: 13.5px; color: var(--ink-2); display: flex; gap: 10px; align-items: center; }
.icon-job.run { color: var(--ink); }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--rivet); border-top-color: var(--fluix); flex: none; }
@media (prefers-reduced-motion: no-preference) { .spin { animation: spin .8s linear infinite; } }
@keyframes spin { to { transform: rotate(360deg); } }
pre.diag { background: #0c1116; border: 1px solid var(--rivet); border-radius: var(--r-md); padding: 10px; font: 11.5px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; margin: 12px 0 10px; }
.alert span { min-width: 0; }
.alert.info { border-color: #4fd1e855; background: #4fd1e812; }
.alert.info svg { color: var(--flux); }

@media (max-width: 760px) {
  .jobs { grid-template-columns: 1fr; }
  .done { grid-template-columns: 1fr; }
  .job-eta b { font-size: 15px; }
  .item { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; padding: 7px 10px 7px 7px; }
  .item .ico, .item .glyph { width: 36px; height: 36px; }
  .item .ico img { width: 28px; height: 28px; }
  .item .ico.cube svg { width: 30px; height: 30px; }
  .item .glyph { font-size: 13px; }
  .tabs { grid-template-columns: repeat(6, 1fr) !important; padding: 5px; }
  .tabs .nav-btn { font-size: 10px; }
  .tabs .nav-btn svg { width: 21px; height: 21px; }
  .cmdline { grid-template-columns: 1fr; }
  .cmdline .btn { justify-self: start; }
}

/* Sheets dürfen nie breiter als der Bildschirm werden */
.sheet { grid-template-columns: minmax(0, 1fr); }
.sheet > * { min-width: 0; }
.sheet .hd-txt .faint { overflow-wrap: anywhere; }
.sheet .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .btn.star span { display: none; }
  .sheet .stat .v { font-size: 19px; }
}