/* AFK-Panel – Gestaltung „Leitstand“ (siehe DESIGN.md im Projekt). Kein Framework, keine fremden Quellen:
   Schriften liegen in vendor/fonts. Farben nur über die Tokens unten; Hell/Dunkel folgt dem System oder der Wahl. */

/* ---------- Schriften (lokal, OFL) ---------- */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('vendor/fonts/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('vendor/fonts/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('vendor/fonts/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('vendor/fonts/barlow-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('vendor/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('vendor/fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;
  /* die sechs Grundfarben */
  --bg: #111418;
  --surface: #1a1f25;
  --ink: #e6e9ed;
  --signal: #7cc04a;
  --alert: #e5534b;
  --gold: #e6b545;
  /* abgeleitet */
  --info: #4fc3d9;
  --bg-2: color-mix(in srgb, var(--bg) 70%, #000);
  --surface-2: color-mix(in srgb, var(--surface) 88%, var(--ink));
  --surface-3: color-mix(in srgb, var(--surface) 78%, var(--ink));
  --line: color-mix(in srgb, var(--surface) 82%, var(--ink));
  --line-2: color-mix(in srgb, var(--surface) 68%, var(--ink));
  --muted: color-mix(in srgb, var(--ink) 66%, var(--bg));
  --dim: color-mix(in srgb, var(--ink) 48%, var(--bg));
  --signal-ink: #a6dc78;
  --alert-ink: #ffaba5;
  --gold-ink: #f3cf73;
  --info-ink: #8fdcea;
  --on-signal: #102006;
  --tint-signal: color-mix(in srgb, var(--signal) 16%, transparent);
  --tint-alert: color-mix(in srgb, var(--alert) 15%, transparent);
  --tint-gold: color-mix(in srgb, var(--gold) 15%, transparent);
  --tint-info: color-mix(in srgb, var(--info) 15%, transparent);
  --java: #d6a05c;
  --java-ink: #f3d3a3;
  --bedrock: #6fa5db;
  --bedrock-ink: #c5e2fb;
  --slot: #0c0e11;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-up: 0 10px 30px rgba(0, 0, 0, .45);
  /* Schrift und Raster */
  --font-ui: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head: var(--font-ui);
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 10px;
  --nav-h: 62px;
  /* alte Namen, die im Code noch vorkommen */
  --paper: var(--ink);
  --moss: var(--signal);
  --moss-2: var(--signal-ink);
  --moss-dark: color-mix(in srgb, var(--signal) 45%, var(--bg));
  --redstone: var(--alert);
  --sky: var(--info);
  --lapis: var(--bedrock);
  --slate: var(--bg-2);
  --slate-2: var(--surface);
  --slate-3: var(--surface-2);
}
/* Hell: Sandstein statt kaltem Weiß. Gilt bei Wahl "hell" oder wenn das System hell ist und nichts gewählt wurde. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f0eb;
  --surface: #ffffff;
  --ink: #1b1f24;
  --signal: #3d7a1c;
  --alert: #b8322a;
  --gold: #8a6000;
  --info: #0f6f82;
  --bg-2: #e9e6df;
  --surface-2: #f4f2ed;
  --surface-3: #e6e3dc;
  --line: #dcd8cf;
  --line-2: #c5c0b4;
  --muted: #555c66;
  --dim: #6f7680;
  --signal-ink: #2f6414;
  --alert-ink: #a12a22;
  --gold-ink: #7a5500;
  --info-ink: #0c5e6f;
  --on-signal: #ffffff;
  --java: #a8681f;
  --java-ink: #7c4a10;
  --bedrock: #2f6fae;
  --bedrock-ink: #1f4f80;
  --slot: #2a2d33;
  --shadow: 0 1px 2px rgba(40, 30, 10, .08);
  --shadow-up: 0 10px 30px rgba(40, 30, 10, .18);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f2f0eb; --surface: #ffffff; --ink: #1b1f24; --signal: #3d7a1c; --alert: #b8322a; --gold: #8a6000; --info: #0f6f82;
    --bg-2: #e9e6df; --surface-2: #f4f2ed; --surface-3: #e6e3dc; --line: #dcd8cf; --line-2: #c5c0b4; --muted: #555c66; --dim: #6f7680;
    --signal-ink: #2f6414; --alert-ink: #a12a22; --gold-ink: #7a5500; --info-ink: #0c5e6f; --on-signal: #ffffff;
    --java: #a8681f; --java-ink: #7c4a10; --bedrock: #2f6fae; --bedrock-ink: #1f4f80; --slot: #2a2d33;
    --shadow: 0 1px 2px rgba(40, 30, 10, .08); --shadow-up: 0 10px 30px rgba(40, 30, 10, .18);
  }
}

/* ---------- Grundlagen ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font-ui); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 600; line-height: 1.2; margin: 0 0 .6em; overflow-wrap: anywhere; letter-spacing: .005em; }
h1 { font-size: 1.75rem; font-weight: 700; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
a { color: var(--info-ink); }
p { margin: 0 0 .8em; }
:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; border-radius: 3px; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
pre { overflow-wrap: anywhere; max-width: 100%; }
code, .mono { font-family: var(--mono); font-size: .86em; overflow-wrap: anywhere; }
code { background: var(--bg-2); border: 1px solid var(--line); padding: 0 5px; border-radius: 4px; }
.ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.err-text { color: var(--alert-ink); }
::selection { background: color-mix(in srgb, var(--signal) 35%, transparent); }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Anmeldung, Key ---------- */
#login, #license { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 16px; background: var(--bg); }
#login form, #license form { width: min(400px, 100%); padding: 28px; border-top: 3px solid var(--signal); }
#license form { width: min(460px, 100%); }
#login h1, #license h1 { font-size: 1.9rem; margin-bottom: .2em; }
#login .btn.go, #license .btn.go { width: 100%; padding: 12px 14px; font-size: 1rem; }
.login-perks { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 16px; padding: 0; list-style: none; }
.login-perks li { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 2px 7px; }
.first-pw { font-size: .82rem; line-height: 1.45; margin: 0 0 12px; padding: 8px 10px; border-radius: var(--radius-s); background: var(--tint-info, rgba(80, 140, 220, .12)); border: 1px solid color-mix(in srgb, var(--info, #5b9bd5) 35%, transparent); }
.first-pw code { font-size: .78rem; overflow-wrap: anywhere; }
.key-input { font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase; }
#twofaCode { font-family: var(--mono); font-size: 1.4rem; letter-spacing: .3em; text-align: center; }

/* ---------- Gerüst ---------- */
#app { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 100vh; }
nav.side { background: var(--surface); border-right: 1px solid var(--line); padding: 16px 12px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 2px; z-index: 20; }
nav.side .brand { font-weight: 700; font-size: 1.12rem; letter-spacing: .02em; padding: 2px 10px 16px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
nav.side .brand .logo { width: 26px; height: 26px; border-radius: 5px; flex: none; }
nav.side button.nav {
  display: flex; align-items: center; gap: 11px; text-align: left; background: none; border: 0; color: var(--muted); font: inherit; font-weight: 500;
  padding: 9px 11px; border-radius: var(--radius-s); cursor: pointer; position: relative; min-height: 40px; transition: background-color .12s, color .12s;
}
nav.side button.nav:hover { color: var(--ink); background: var(--surface-2); }
nav.side button.nav[aria-current="page"] { color: var(--ink); background: var(--surface-2); }
nav.side button.nav[aria-current="page"]::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--signal); }
nav.side button.nav[aria-current="page"] .ic { color: var(--signal-ink); }
nav.side button.nav.nav-more, nav.side .short { display: none; }
nav.side .mem { margin-top: auto; padding: 10px 11px 4px; font-size: .8rem; color: var(--muted); border-top: 1px solid var(--line); }
nav.side .mem b { color: var(--ink); font-weight: 600; }
nav.side .mem .meter { height: 6px; margin: 6px 0 0; }
.side-tools { display: flex; gap: 6px; padding: 8px 4px 0; }
main { padding: 22px clamp(16px, 3vw, 40px) 90px; max-width: 1200px; width: 100%; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-bottom: 8px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h1 { margin: 0; }
.page-head .sub { color: var(--muted); font-size: .92rem; margin: 2px 0 0; }

/* Befehlsleisten-Knopf und Hell/Dunkel */
.cmd-open { display: inline-flex; align-items: center; gap: 10px; min-width: 240px; justify-content: space-between; background: var(--surface); border: 1px solid var(--line); color: var(--muted); border-radius: var(--radius-s); padding: 7px 10px; font: inherit; cursor: pointer; }
.cmd-open:hover { border-color: var(--line-2); color: var(--ink); }
.cmd-open kbd, kbd { font-family: var(--mono); font-size: .72rem; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; color: var(--muted); background: var(--bg-2); }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; }
.icon-btn:hover { color: var(--ink); border-color: var(--line-2); }

/* ---------- Bausteine ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow); min-width: 0; }
.panel > h2:first-child, .panel > h3:first-child { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.panel > h2:first-child .ic { color: var(--muted); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px 16px; }
.span2 { grid-column: 1 / -1; }
label { display: block; font-size: .86rem; color: var(--muted); margin-bottom: 10px; font-weight: 500; }
label > input, label > select, label > textarea { margin-top: 5px; }
input, select, textarea { width: 100%; background: var(--bg-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 9px 11px; font: inherit; font-weight: 400; min-height: 40px; }
input:hover, select:hover, textarea:hover { border-color: var(--line-2); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 22%, transparent); }
input:disabled, select:disabled, textarea:disabled { opacity: .55; }
textarea { min-height: 84px; resize: vertical; }
textarea.code { font-family: var(--mono); font-size: .84rem; min-height: 260px; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; min-height: 0; margin: 0 9px 0 0; accent-color: var(--signal); flex: none; padding: 0; }
input[type=color] { padding: 3px; }
input[type=range] { padding: 0; border: 0; background: transparent; accent-color: var(--signal); }
label.check { display: flex; align-items: center; color: var(--ink); margin-bottom: 9px; font-size: .95rem; font-weight: 400; }
label.check.off { color: var(--muted); }
label.switch { display: flex; align-items: center; gap: 12px; color: var(--ink); font-size: .98rem; margin-bottom: 12px; cursor: pointer; font-weight: 400; }
label.switch input { appearance: none; -webkit-appearance: none; width: 44px; height: 24px; min-height: 0; border-radius: 999px; margin: 0; flex: none; padding: 0; background: var(--surface-3); border: 1px solid var(--line-2); position: relative; cursor: pointer; transition: background .15s; }
label.switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); transition: transform .15s; }
label.switch input:checked { background: var(--signal); border-color: var(--signal); }
label.switch input:checked::after { transform: translateX(20px); background: var(--on-signal); }
label.switch.big > span { display: flex; flex-direction: column; gap: 2px; }
label.switch.big strong { font-size: 1.08rem; }

button.btn, a.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px;
  background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-2); font-weight: 600;
  padding: 7px 14px; border-radius: var(--radius-s); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.2;
  transition: background-color .12s, border-color .12s, transform .08s;
}
button.btn:hover, a.btn:hover { background: var(--surface-3); border-color: var(--dim); }
button.btn:active:not(:disabled), a.btn:active { transform: translateY(1px); }
.btn.go { background: var(--signal) !important; border-color: var(--signal) !important; color: var(--on-signal) !important; }
.btn.go:hover { filter: brightness(1.08); }
button.btn.danger { border-color: color-mix(in srgb, var(--alert) 70%, transparent); color: var(--alert-ink); background: var(--tint-alert); }
button.btn.danger:hover { background: var(--alert); color: #fff; }
button.btn.on { background: var(--info); color: #06262d; border-color: var(--info); }
button.btn.ghost { background: none; border-color: transparent; color: var(--muted); }
button.btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
button.btn.sm, .btn.small { padding: 4px 10px; font-size: .86rem; min-height: 32px; }
button.btn:disabled { opacity: .45; cursor: not-allowed; }
button.link { background: none; border: 0; color: var(--info-ink); cursor: pointer; font: inherit; padding: 0; display: inline-flex; align-items: center; gap: 5px; text-decoration: underline; text-underline-offset: 2px; }
.row-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin: 6px 0 10px; }
.inline-form input { flex: 1 1 200px; width: auto; }
.inline-form label { flex: 1 1 260px; margin: 0; }

table { width: 100%; border-collapse: collapse; }
td, th { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; color: var(--dim); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
tr:last-child td { border-bottom: 0; }
table.mini td { padding: 4px 6px; font-size: .85rem; }
.table-wrap { overflow-x: auto; max-width: 100%; }

#toast { position: fixed; right: 16px; bottom: 16px; z-index: 60; max-width: min(440px, calc(100% - 32px)); background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-left: 4px solid var(--signal); padding: 11px 15px; border-radius: var(--radius-s); box-shadow: var(--shadow-up); }
#toast.err { border-left-color: var(--alert); }

.banner { border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); border-left: 4px solid var(--gold); background: var(--tint-gold); padding: 13px 15px; border-radius: var(--radius-m); margin-bottom: 16px; }
.note { display: flex; gap: 9px; align-items: flex-start; padding: 9px 12px; color: var(--muted); font-size: .86rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-m); margin: 12px 0; }
.note .ic { color: var(--dim); margin-top: 1px; }
.empty { text-align: center; padding: 30px 16px; color: var(--muted); }
.empty > .ic { width: 38px; height: 38px; color: var(--dim); margin-bottom: 8px; }
.empty h2 { color: var(--ink); }
.callout { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--info); border-radius: var(--radius-m); padding: 12px 15px; margin-bottom: 16px; }
.callout.ok { border-left-color: var(--signal); }
.callout > .ic { width: 22px; height: 22px; color: var(--info); flex: none; }
.callout.ok > .ic { color: var(--signal-ink); }
.callout > div { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.code-view { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg-2); padding: 12px; border-radius: var(--radius-m); max-height: 320px; overflow-y: auto; border: 1px solid var(--line); font-family: var(--mono); font-size: .82rem; }

/* ---------- Kennzeichen, Lampen, Status ---------- */
.badge { display: inline-flex; align-items: center; font-size: .7rem; line-height: 1; padding: 4px 6px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--ink); background: var(--surface-2); vertical-align: middle; white-space: nowrap; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.badge.java { border-color: color-mix(in srgb, var(--java) 60%, transparent); color: var(--java-ink); background: color-mix(in srgb, var(--java) 13%, transparent); }
.badge.bedrock { border-color: color-mix(in srgb, var(--bedrock) 60%, transparent); color: var(--bedrock-ink); background: color-mix(in srgb, var(--bedrock) 14%, transparent); }
.badge.ok { border-color: color-mix(in srgb, var(--signal) 65%, transparent); color: var(--signal-ink); background: var(--tint-signal); }
.badge.warn { border-color: color-mix(in srgb, var(--gold) 60%, transparent); color: var(--gold-ink); background: var(--tint-gold); }
.badge.err { border-color: color-mix(in srgb, var(--alert) 65%, transparent); color: var(--alert-ink); background: var(--tint-alert); }
.badge.info { border-color: color-mix(in srgb, var(--info) 60%, transparent); color: var(--info-ink); background: var(--tint-info); }
.pill { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 600; padding: 3px 9px 3px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.pill::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--dim); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.pill[data-state=online] { color: var(--signal-ink); background: var(--tint-signal); }
.pill[data-state=online]::before { background: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 25%, transparent); }
.pill[data-state=connecting], .pill[data-state=reconnecting] { color: var(--gold-ink); background: var(--tint-gold); }
.pill[data-state=connecting]::before, .pill[data-state=reconnecting]::before { background: var(--gold); animation: pulse 1.2s infinite; }
.pill[data-state=error] { color: var(--alert-ink); background: var(--tint-alert); }
.pill[data-state=error]::before { background: var(--alert); }
@keyframes pulse { 50% { opacity: .35; } }
.avatar { border-radius: 6px; flex: none; image-rendering: pixelated; display: block; }
img.avatar { object-fit: cover; background: var(--bg-2); }
.initials { display: grid; place-items: center; border-radius: 6px; font-weight: 700; color: #fff; flex: none; letter-spacing: .02em; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--muted); background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.chip .ic { width: 13px; height: 13px; }
.chip.money { color: var(--gold-ink); border-color: color-mix(in srgb, var(--gold) 40%, transparent); background: var(--tint-gold); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 4px; }
.live { width: 9px; height: 9px; border-radius: 50%; background: var(--alert); margin-left: auto; flex: none; }
.live.on { background: var(--signal); }
.live.on.poll { background: var(--gold); }
.lv-ok { color: var(--signal-ink); }
.lv-warn { color: var(--gold-ink); }
.lv-crit { color: var(--alert-ink); }
.lv-info { color: inherit; }

/* ---------- Kennzahl-Kacheln ---------- */
.stats, .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 12px; margin-bottom: 16px; }
.stat, .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 13px 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: center; min-width: 0; box-shadow: var(--shadow); }
.stat .icon { grid-row: span 2; width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; background: var(--tint-signal); color: var(--signal-ink); }
.stat .icon.gold { background: var(--tint-gold); color: var(--gold-ink); }
.stat .icon.sky { background: var(--tint-info); color: var(--info-ink); }
.stat .icon.red { background: var(--tint-alert); color: var(--alert-ink); }
.stat .icon .ic { width: 20px; height: 20px; }
.stat .k, .card .k { color: var(--muted); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.stat .v, .card .v { font-family: var(--mono); font-weight: 600; font-size: 1.35rem; line-height: 1.2; overflow-wrap: anywhere; }
.stat .v small { font-family: var(--font-ui); font-size: .78rem; color: var(--muted); font-weight: 500; margin-left: 4px; }
.card.wide { grid-column: 1 / -1; display: block; }

/* ---------- Übersicht: Server als Gleise, Bots als Signalkacheln ---------- */
.server-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); margin-bottom: 18px; box-shadow: var(--shadow); overflow: hidden; }
.server-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.server-head h2 { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.server-head .meta { color: var(--muted); font-size: .85rem; margin-top: 3px; overflow-wrap: anywhere; }
/* Live-Karten der Bot-Übersicht: Kopfzeile + Ansicht (16:9). Größe per Regler (--lc-w), Reihenfolge per Ziehen. */
.lc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--lc-w, 460px), 100%), 1fr)); gap: 14px; padding: 14px; background: var(--bg-2); }
.lc { min-width: 0; display: flex; flex-direction: column; background: #16191d; border: 2px solid var(--line-2); border-radius: var(--radius-m); overflow: hidden; color: #e9edf1; transition: border-color .15s, opacity .15s; }
.lc[data-state=online] { border-color: var(--signal); }
.lc[data-state=connecting], .lc[data-state=reconnecting] { border-color: var(--gold); }
.lc[data-state=error] { border-color: var(--alert); }
.lc.dragging { opacity: .45; }
.lc-head { display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 4px 6px 4px 4px; background: #1d2126; border-bottom: 1px solid #000; }
.lc-head .avatar { width: 22px; height: 22px; border-radius: 3px; flex: none; image-rendering: pixelated; }
.lc-head .pill { font-size: .72rem; padding: 1px 7px; }
.lc-grip { flex: none; display: grid; place-items: center; width: 20px; height: 28px; padding: 0; color: #7d858e; background: none; border: 0; cursor: grab; touch-action: none; }
.lc-grip .ic { width: 18px; height: 18px; }
.lc-grip:active { cursor: grabbing; }
.lc-srv { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 3px; background: #5c8f2e; color: #e3f5cf; }
.lc-srv.bedrock { background: #46607a; color: #dbe8f5; }
.lc-srv .ic { width: 15px; height: 15px; }
.lc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; font: inherit; font-weight: 700; font-size: 1rem; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
.lc-name:hover { text-decoration: underline; }
.lc-tools { margin-left: auto; display: flex; gap: 2px; flex: none; }
.lc-ic { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; color: #c7ced6; background: none; border: 0; border-radius: 6px; cursor: pointer; }
.lc-ic:hover, .lc-ic:focus-visible { background: rgba(255, 255, 255, .08); color: #fff; }
.lc-ic.off { color: #8b939c; }
.lc-ic:disabled { opacity: .4; cursor: not-allowed; }
.lc-ic .ic { width: 19px; height: 19px; }
.lc-body { position: relative; flex: 1; min-height: 0; }
.lc-body .vw-stage { border-radius: 0; }
.lc-ph { aspect-ratio: 16 / 9; display: grid; place-items: center; padding: 14px; text-align: center; background: radial-gradient(ellipse at 50% 35%, #252b31, #111417 75%); }
.lc-ph-in { display: grid; gap: 7px; justify-items: center; max-width: 42ch; }
.lc-ph-in strong { font-size: 1.02rem; }
.lc-ph-in .small { color: #a9b1ba; }
.lc-ph-in .bars { width: min(260px, 100%); }
.lc-ph-in .err { color: #ff8f86; font-size: .85rem; overflow-wrap: anywhere; }
.lc-ph-in .row { justify-content: center; margin-top: 4px; }
.lc .login-code { display: block; padding: 6px 8px; border-radius: var(--radius-s); background: rgba(80, 140, 220, .16); border: 1px solid rgba(80, 140, 220, .45); font-size: .85rem; }
.lc .login-code strong { font-family: var(--mono); letter-spacing: .06em; color: #9cc6ff; user-select: all; }
.lc-size { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.lc-size input { width: 140px; }
.lc:fullscreen { border: 0; border-radius: 0; width: 100vw; height: 100vh; }
.lc:fullscreen .lc-body, .lc:fullscreen .lc-view { height: 100%; }
.lc:fullscreen .vw-stage { aspect-ratio: auto; height: 100%; max-height: none; }
.lc:fullscreen .lc-ph { aspect-ratio: auto; height: 100%; }
.live-view .vw-stage { border-radius: var(--radius-m); border: 1px solid var(--line-2); }
.live-view .vw.steer .vw-stage { border-color: var(--signal); }
.live-loading { aspect-ratio: 16 / 9; display: grid; place-items: center; color: var(--muted); background: var(--bg-2); border-radius: var(--radius-m); }
.bars { display: grid; gap: 3px; margin-top: 4px; }
.bar { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; height: 6px; }
.bar i { background: var(--surface-3); border-radius: 2px; }
.bar.hp i.f { background: var(--alert); }
.bar.hp i.h { background: linear-gradient(90deg, var(--alert) 50%, var(--surface-3) 50%); }
.bar.food i.f { background: #cf9342; }
.bar.food i.h { background: linear-gradient(90deg, #cf9342 50%, var(--surface-3) 50%); }

/* ---------- Bot-Seite ---------- */
.bot-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.bot-head .who { flex: 1 1 220px; min-width: 0; }
.bot-head h1 { margin: 0 0 4px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.bot-head .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: .88rem; }
.live-stage { margin-bottom: 16px; }
.live-start { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; text-align: center; gap: 8px; min-width: 0; min-height: clamp(180px, 30vw, 380px); border: 1px dashed var(--line-2); border-radius: var(--radius-l); background: repeating-linear-gradient(45deg, var(--bg-2) 0 14px, var(--surface) 14px 28px); padding: 20px; }
.live-start p { max-width: 46ch; color: var(--muted); margin: 0; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; color: var(--muted); font: inherit; font-weight: 600; padding: 10px 13px; cursor: pointer; white-space: nowrap; border-radius: var(--radius-s) var(--radius-s) 0 0; min-height: 44px; }
.tabs button .ic { width: 16px; height: 16px; }
.tabs button:hover { color: var(--ink); background: var(--surface-2); }
.tabs button[aria-selected=true] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--signal); }
.tabs button[aria-selected=true] .ic { color: var(--signal-ink); }
.seg { display: inline-flex; gap: 3px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; margin-bottom: 16px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--muted); font: inherit; font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; min-height: 36px; }
.seg button:hover { color: var(--ink); }
.seg button[aria-selected=true] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.chatlog { height: 50vh; overflow-y: auto; background: var(--slot); color: #e8eaed; border: 1px solid var(--line); border-radius: var(--radius-m); padding: 10px 12px; font-size: .9rem; overflow-wrap: anywhere; }
.chatlog div { padding: 1px 0; }
.chatlog time { color: #8a9099; font-family: var(--mono); font-size: .74rem; margin-right: 8px; }
.chatlog .lv-ok { color: #a6dc78; } .chatlog .lv-warn { color: #f3cf73; } .chatlog .lv-crit { color: #ffaba5; }
.chatlog .lv-warn time, .chatlog .lv-crit time { color: inherit; opacity: .75; }
.chatlog div.lv-warn { border-left: 2px solid #e6b545; padding-left: 8px; margin-left: -10px; }
.chatlog div.lv-crit { border-left: 2px solid #e5534b; padding-left: 8px; margin-left: -10px; }
.pad { display: grid; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(3, 46px); gap: 6px; }
.pad .btn { padding: 0; }
.hotbar { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; max-width: 460px; }
.hotbar .btn { padding: 8px 0; }
.slots { display: grid; grid-template-columns: repeat(9, minmax(0, 52px)); gap: 4px; margin-bottom: 12px; }
.slots.craft { grid-template-columns: repeat(2, minmax(0, 52px)) 20px minmax(0, 52px); }
.slot { aspect-ratio: 1; background: var(--slot); border: 1px solid var(--line); border-radius: 5px; position: relative; font-size: .64rem; line-height: 1.1; color: #e8eaed; padding: 3px; overflow: hidden; cursor: pointer; text-align: left; font-family: var(--font-ui); }
.slot:hover { border-color: var(--info); }
.slot.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.slot b { position: absolute; right: 3px; bottom: 2px; font-size: .78rem; }
.slot.held { border-color: var(--signal); }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0 0 8px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kv.report { grid-template-columns: minmax(84px, max-content) minmax(0, 1fr); gap: 9px 16px; }
.pov-frame { width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: var(--radius-m); background: #000; }
.list-item { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.list-item:last-child { border-bottom: 0; }
.list-item > div:first-child { min-width: 0; flex: 1 1 200px; overflow-wrap: anywhere; }
.list-item.lead { justify-content: flex-start; }
.list-item.lead > .avatar, .list-item.lead > .tile-icon { flex: none; }
.list-item.lead > div:nth-child(2) { min-width: 0; flex: 1 1 200px; overflow-wrap: anywhere; }
.tile-icon { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }

/* ---------- Formular-Abschnitte ---------- */
fieldset { border: 1px solid var(--line); border-radius: var(--radius-m); padding: 12px 16px; margin: 0 0 16px; min-width: 0; }
legend { font-weight: 600; padding: 0 6px; }
details.acc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); margin-bottom: 10px; box-shadow: var(--shadow); min-width: 0; }
details.acc > summary { list-style: none; cursor: pointer; padding: 13px 16px; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.02rem; border-radius: var(--radius-l); min-height: 48px; }
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::before { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; flex: none; margin: 0 4px 0 2px; }
details.acc[open] > summary::before { transform: rotate(45deg); }
details.acc > summary:hover { background: var(--surface-2); }
details.acc > summary .hint { margin-left: auto; font-size: .82rem; font-weight: 400; color: var(--muted); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
details.acc[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--radius-l) var(--radius-l) 0 0; }
details.acc > .acc-body { padding: 16px; }
.panel details.acc { box-shadow: none; background: var(--bg-2); margin-top: 12px; }
details.plain > summary { cursor: pointer; color: var(--muted); }
.sub-entry { border: 1px dashed var(--line-2); border-radius: var(--radius-m); padding: 12px; margin-bottom: 10px; background: var(--bg-2); }
.savebar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; margin-top: 10px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-l) var(--radius-l) 0 0; box-shadow: var(--shadow-up); }

/* Tabellen, die auf dem Handy zu Karten werden */
table.stack td.actions { text-align: right; }
table.stack td.actions .row { justify-content: flex-end; }
@media (max-width: 900px) {
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack thead { display: none; }
  table.stack tr { border-bottom: 1px solid var(--line); padding: 10px 0; }
  table.stack tr:last-child { border-bottom: 0; }
  table.stack td { border: 0; padding: 3px 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; overflow-wrap: anywhere; }
  table.stack td::before { content: attr(data-label); color: var(--muted); font-size: .82rem; }
  table.stack td > div { min-width: 0; }
  table.stack td.actions { display: block; text-align: left; padding-top: 8px; }
  table.stack td.actions::before { content: none; }
  table.stack td.actions .row { justify-content: flex-start; }
}

/* ---------- Accounts und Assistent ---------- */
.acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); gap: 14px; margin-bottom: 16px; }
.acc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 14px; box-shadow: var(--shadow); display: grid; gap: 10px; min-width: 0; align-content: start; }
.acc-card .top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: center; }
.acc-card .top .avatar, .acc-card .top .initials { grid-row: span 2; }
.acc-card .name { font-weight: 700; font-size: 1.08rem; overflow-wrap: anywhere; }
.acc-card .kind { color: var(--muted); font-size: .84rem; }
.acc-card .facts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.acc-card .hint { color: var(--muted); font-size: .84rem; overflow-wrap: anywhere; }
.acc-card .actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); }
.wizard { border-color: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 12%, transparent); }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; margin-bottom: 14px; }
.choice, .preset { text-align: left; font: inherit; color: var(--ink); cursor: pointer; display: grid; gap: 6px; align-content: start; min-width: 0; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 14px; transition: border-color .12s; }
.choice:hover, .preset:hover { border-color: var(--signal); }
.choice strong, .preset strong { font-weight: 700; font-size: 1.02rem; display: flex; align-items: center; gap: 8px; }
.choice span, .preset span { color: var(--muted); font-size: .86rem; }
.preset[aria-pressed=true] { border-color: var(--signal); background: var(--tint-signal); box-shadow: 0 0 0 1px var(--signal) inset; }
.presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 10px; margin-bottom: 6px; }
.steps { margin: 0 0 12px; padding-left: 1.3em; }
.steps li { margin-bottom: 6px; }
.code-box { background: var(--bg-2); border: 2px dashed var(--gold); border-radius: var(--radius-l); padding: 18px 10px; text-align: center; margin: 0 0 14px; }
.code-box code { font-size: clamp(1.9rem, 9vw, 3.2rem); letter-spacing: .14em; color: var(--gold-ink); font-weight: 600; user-select: all; overflow-wrap: anywhere; background: none; border: 0; padding: 0; }
.relay { border: 1px solid color-mix(in srgb, var(--signal) 45%, transparent); background: color-mix(in srgb, var(--signal) 8%, transparent); border-radius: var(--radius-m); padding: 12px 14px; margin: 10px 0 14px; }
.relay h3 { margin: 0 0 6px; display: flex; align-items: center; gap: 6px; }
.relay .steps { margin: 6px 0 0; }
.relay .btn { margin-right: 6px; }
.own-app { margin-top: 6px; }
.own-app > summary { cursor: pointer; color: var(--muted); padding: 6px 0; }
.guide { counter-reset: step; }
.guide > section { position: relative; padding: 0 0 18px 44px; }
.guide > section::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--surface-3); border: 1px solid var(--line-2); color: var(--ink); }
.guide > section::after { content: ''; position: absolute; left: 14px; top: 32px; bottom: 2px; width: 2px; background: var(--line); }
.guide > section:last-child { padding-bottom: 0; }
.guide > section:last-child::after { display: none; }
.guide h3 { margin: 2px 0 10px; }
@media (max-width: 560px) { .guide > section { padding-left: 0; padding-top: 38px; } .guide > section::after { display: none; } .guide h3 { position: absolute; top: 2px; left: 40px; right: 0; margin: 0; } }
.form-buttons { display: grid; gap: 8px; max-width: 420px; }
.form-buttons .btn { justify-content: flex-start; padding: 11px 14px; }

/* ---------- Diagramme ---------- */
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; }
.chart .axis text { fill: var(--dim); font-size: 11px; font-family: var(--font-ui); }
.chart .area { fill: url(#chartFill); }
#chartFill stop { stop-color: var(--signal); }
.chart .line { fill: none; stroke: var(--signal); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { fill: var(--surface); stroke: var(--signal); stroke-width: 2; }
.chart .dot:hover { fill: var(--gold); stroke: var(--gold); }
.chart .dot.last { fill: var(--gold); stroke: var(--gold-ink); }
.chart .hbar { fill: var(--signal); opacity: .82; }
.chart .hbar:hover { opacity: 1; }
.chart .hbar.now { fill: var(--gold); opacity: 1; }
.chart .hbar.zero { fill: var(--dim); }
.chart-legend { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.chart-legend b { color: var(--ink); font-weight: 600; }
.trend { display: inline-flex; align-items: center; gap: 4px; font-size: .86rem; padding: 2px 8px; border-radius: 999px; }
.trend.up { color: var(--signal-ink); background: var(--tint-signal); }
.trend.down { color: var(--alert-ink); background: var(--tint-alert); }

/* ---------- RAM ---------- */
.meter { height: 10px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; margin: 6px 0 4px; }
.meter i { display: block; height: 100%; border-radius: 999px; background: var(--signal); transition: width .6s ease; }
.meter.warn i { background: var(--gold); }
.meter.crit i { background: var(--alert); }
.meter.own i { background: var(--info); }
.ram-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.ram-row { margin-bottom: 14px; }
.ram-row:last-child { margin-bottom: 0; }
.ram-row b { font-weight: 700; font-family: var(--mono); font-size: .92em; }
.ram-chart { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 10px 12px; min-width: 0; }
.spark { display: block; width: 100%; height: 84px; margin: 6px 0 2px; }
.spark polyline { stroke: var(--info); }
#sparkFill stop { stop-color: var(--info); }
@media (max-width: 760px) { .ram-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
.heap-choice { display: grid; gap: 2px; margin: 10px 0 12px; }
.heap-mb { display: flex; align-items: center; gap: 10px; max-width: 220px; }
.heap-mb input { max-width: 150px; }

/* ---------- Live-Ansicht (Software-Vorschau) ---------- */
.live-grid { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(250px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1050px) { .live-grid { grid-template-columns: minmax(0, 1fr); } }
.screen { position: relative; aspect-ratio: 16 / 9; container-type: inline-size; overflow: hidden; border-radius: var(--radius-m); border: 1px solid var(--line-2); background: linear-gradient(180deg, #6c9cfa 0%, #b0d0ff 58%, #5d7f3f 58%, #4a6a30 100%); }
.screen.noview { background: repeating-linear-gradient(45deg, #1d2026 0 14px, #20242a 14px 28px); }
.screen .world { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; display: block; }
#liveHud { position: absolute; inset: 0; font-size: clamp(5.5px, 1.6cqw, 15px); color: #fff; text-shadow: .08em .08em 0 rgba(0, 0, 0, .75); line-height: 1.25; }
#liveHud .tag { position: absolute; transform: translate(-50%, -100%); background: rgba(0, 0, 0, .42); padding: .05em .45em; white-space: nowrap; font-size: .85em; border-radius: .15em; }
#liveHud .tag.far { opacity: .6; }
#liveHud .tag small { opacity: .75; }
.cross { position: absolute; left: 50%; top: 50%; width: 1.3em; height: 1.3em; transform: translate(-50%, -50%); opacity: .85; mix-blend-mode: difference; }
.cross::before, .cross::after { content: ""; position: absolute; background: #fff; }
.cross::before { left: 45%; width: 10%; top: 0; bottom: 0; }
.cross::after { top: 45%; height: 10%; left: 0; right: 0; }
.hud-top { position: absolute; top: .5em; left: .7em; right: .7em; display: flex; justify-content: space-between; gap: 1em; font-size: .82em; }
.hud-top > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-top > span:last-child { white-space: nowrap; }
.hud-top .on::before { content: ""; display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: #ff4d42; margin-right: .4em; animation: pulse 1.6s infinite; }
.hud-side { position: absolute; right: .5em; top: 24%; background: rgba(0, 0, 0, .34); padding: .35em .6em; min-width: 9em; max-width: 36%; font-size: .78em; text-shadow: none; }
.hud-side strong { display: block; text-align: center; margin-bottom: .2em; }
.hud-side div { display: flex; justify-content: space-between; gap: 1.2em; }
.hud-side div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-side b { color: #ff5555; font-weight: 400; }
.hud-title { position: absolute; left: 0; right: 0; top: 26%; text-align: center; font-size: 2.3em; font-weight: 700; pointer-events: none; }
.hud-title small { display: block; font-size: .45em; font-weight: 400; }
.hud-result { position: absolute; left: 50%; top: 11%; transform: translateX(-50%); background: rgba(34, 60, 20, .88); border: .1em solid #7cc04a; border-radius: .3em; padding: .3em .8em; font-size: .9em; max-width: 86%; text-align: center; text-shadow: none; z-index: 3; }
.hud-result.bad { background: rgba(80, 22, 18, .9); border-color: #e5534b; }
.hud-chat { position: absolute; left: .5em; bottom: 7.4em; max-width: 60%; font-size: .8em; display: grid; }
.hud-chat div { background: rgba(0, 0, 0, .4); padding: .06em .45em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-bottom { position: absolute; left: 50%; bottom: .45em; transform: translateX(-50%); display: grid; justify-items: center; gap: .25em; width: max-content; max-width: 98%; }
.hud-action { font-size: .95em; }
.hud-vitals { display: grid; grid-template-columns: 1fr auto 1fr; gap: .6em; width: 100%; align-items: center; }
.hud-bar { display: grid; grid-template-columns: repeat(10, .78em); gap: .09em; height: .78em; }
.hud-bar.food { justify-self: end; direction: rtl; }
.hud-bar i { background: rgba(20, 20, 24, .6); border-radius: .14em; }
.hud-bar.hp i.f { background: #e8463c; }
.hud-bar.hp i.h { background: linear-gradient(90deg, #e8463c 50%, rgba(20, 20, 24, .6) 50%); }
.hud-bar.food i.f { background: #d99a45; }
.hud-bar.food i.h { background: linear-gradient(270deg, #d99a45 50%, rgba(20, 20, 24, .6) 50%); }
.hud-xp { color: #7dfc2c; font-weight: 700; font-size: .92em; }
.hud-hotbar { display: grid; grid-template-columns: repeat(9, 2.3em); background: rgba(0, 0, 0, .46); border: .12em solid rgba(20, 20, 24, .8); border-radius: .2em; }
.mc-slot { position: relative; display: grid; place-items: center; overflow: hidden; width: 2.05em; height: 2.05em; }
.hud-hotbar .mc-slot { width: 2.3em; height: 2.3em; border: .1em solid rgba(255, 255, 255, .16); }
.hud-hotbar .mc-slot.sel { border-color: #fff; box-shadow: 0 0 0 .1em #fff inset; background: rgba(255, 255, 255, .12); }
.it { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.it img { width: 78%; height: 78%; object-fit: contain; image-rendering: pixelated; display: block; }
.it b { position: absolute; right: .12em; bottom: -.05em; font-size: .78em; font-weight: 700; color: #fff; text-shadow: .09em .09em 0 #3a3a3a; }
.it .it-name { font-size: .46em; line-height: 1.05; text-align: center; overflow: hidden; max-height: 100%; word-break: break-word; padding: 0 .1em; color: #fff; text-shadow: .08em .08em 0 #333; }
.it.ench img { filter: drop-shadow(0 0 .22em #c08bff); }
.mc-win { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); background: #c6c6c6; color: #3f3f3f; text-shadow: none; border: .18em solid; border-color: #fff #555 #555 #fff; border-radius: .3em; padding: .45em .6em .55em; box-shadow: 0 .6em 2em rgba(0, 0, 0, .55); z-index: 2; }
.mc-title { font-size: .82em; font-weight: 700; margin: 0 0 .3em; max-width: 22em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-title.sub { margin-top: .45em; font-weight: 400; }
.mc-grid { display: grid; grid-template-columns: repeat(var(--cols), 2.05em); justify-content: center; }
.mc-grid.hot { margin-top: .3em; }
.mc-grid .mc-slot { background: #8b8b8b; border: .1em solid; border-color: #373737 #fff #fff #373737; }
.mc-win.form { background: rgba(24, 25, 30, .94); color: #fff; border-color: #8a8a8a #333 #333 #8a8a8a; min-width: 44%; max-width: 72%; }
.mc-text { font-size: .78em; white-space: pre-wrap; margin-bottom: .4em; opacity: .9; }
.mc-btn { display: block; background: #6d6d6d; border: .12em solid #1a1a1a; padding: .28em .6em; margin-top: .25em; text-align: center; font-size: .85em; }
.hud-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 2em 3em 8em; color: #dfe3ea; font-size: 1.05em; }
.live-bar { margin-top: 10px; align-items: flex-end; }
.live-bar label { margin: 0; font-size: .78rem; }
.live-bar select { width: auto; padding: 6px 9px; }
.run { padding: 10px 0; border-bottom: 1px solid var(--line); }
.run:first-child { padding-top: 0; }
.run:last-child { border-bottom: 0; padding-bottom: 0; }
.run-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; margin-top: 8px; }
.shot { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 4px; color: var(--muted); font: inherit; font-size: .72rem; cursor: pointer; display: grid; gap: 3px; text-align: center; }
.shot:hover { border-color: var(--line-2); color: var(--ink); }
.shot.on { border-color: var(--gold); color: var(--ink); }
.shot img, .shot .noimg { width: 100%; aspect-ratio: 16 / 9; image-rendering: pixelated; border-radius: 5px; background: var(--slot); display: block; }

/* ---------- Radar ---------- */
.radar-wrap { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 700px) { .radar-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; } .radar-list { width: 100%; } }
.radar { width: 100%; max-width: 290px; display: block; border-radius: 50%; background: radial-gradient(circle, var(--tint-signal), var(--bg-2) 72%); border: 1px solid var(--line); }
.radar .ring { fill: none; stroke: var(--line-2); stroke-width: 1; opacity: .7; }
.radar .alarm { fill: var(--tint-alert); stroke: var(--alert); stroke-width: 1.5; stroke-dasharray: 5 4; }
.radar text { fill: var(--muted); font-size: 10px; font-family: var(--font-ui); }
.radar .n { fill: var(--ink); font-weight: 700; font-size: 11px; }
.radar .dot circle { fill: var(--dim); }
.radar .dot.player circle { fill: var(--gold); stroke: var(--gold-ink); stroke-width: 1.5; }
.radar .dot.player text { fill: var(--ink); font-size: 11px; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.radar .dot.hostile circle { fill: var(--alert); }
.radar .dot.mob circle { fill: var(--signal); }
.radar .dot.item circle { fill: var(--info); }
.radar .me { fill: var(--ink); stroke: var(--bg); stroke-width: 1; }
.radar-legend { display: flex; gap: 6px 16px; flex-wrap: wrap; margin-top: 12px; }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; background: var(--dim); }
.lg.player { background: var(--gold); }
.lg.hostile { background: var(--alert); }
.lg.mob { background: var(--signal); }
.lg.item { background: var(--info); }
.lg.alarm { background: none; border: 1.5px dashed var(--alert); }

/* ---------- Discord, Verkaufen, Sonstiges ---------- */
.ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 2px 18px; margin-bottom: 12px; }
label.check.ev { align-items: flex-start; }
label.check.ev > span { display: grid; min-width: 0; }
label.check.ev strong { font-weight: 600; }
.copyline { display: flex; gap: 8px; flex-wrap: wrap; }
.copyline input { flex: 1 1 260px; min-width: 0; font-family: var(--mono); font-size: .84rem; }
#repBox { margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--bg-2); }
#repBox h4 { margin: 14px 0 8px; font-size: .9rem; font-weight: 600; }
#repBox .ev-grid { margin-bottom: 0; }
.panel.quick { border-left: 4px solid var(--line-2); }
.panel.quick.on { border-left-color: var(--signal); }
.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px 18px; margin-top: 14px; }
.quick-grid label { margin: 0; }
.quick-grid input[type=range] { width: 100%; height: 28px; }
.range-ends { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); margin-top: -4px; }
.sell-last { display: flex; gap: 6px; align-items: flex-start; margin-top: 4px; color: var(--muted); }
.sell-last .ic { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.sell-last.ok { color: var(--signal-ink); }
.sell-last.bad { color: var(--alert-ink); }
.sell-last.warn { color: var(--gold-ink); }
.answer { margin-top: 6px; }
.answer summary { cursor: pointer; color: var(--info-ink); padding: 4px 0; }
.answer pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 200px; overflow: auto; margin: 4px 0 8px; padding: 8px 10px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-s); font: .78rem/1.45 var(--mono); color: var(--ink); }
code.key { font-family: var(--mono); letter-spacing: .04em; user-select: all; overflow-wrap: anywhere; font-size: .92rem; }
.home-box { border-top: 1px dashed var(--line); margin-top: 12px; padding-top: 12px; }
.range-pair { display: flex; gap: 10px; }
.range-pair input { flex: 1 1 0; min-width: 0; }
.logo { width: 26px; height: 26px; border-radius: 5px; flex: none; }
.logo.big { width: 52px; height: 52px; border-radius: 10px; margin-bottom: 14px; }

/* ---------- Sicherheit ---------- */
ol.codes { columns: 2; column-gap: 24px; padding-left: 1.6em; font-family: var(--mono); }
ol.codes li { margin-bottom: 4px; }
code.secret { font-size: 1rem; letter-spacing: .08em; display: inline-block; margin: 6px 0; }
.sess-list { list-style: none; padding: 0; margin: 0 0 10px; }
.sess-list li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sess-list li:last-child { border-bottom: 0; }
.sess-list li.current strong { color: var(--signal-ink); }
table.audit td { font-size: .86rem; white-space: nowrap; }
table.audit td:last-child { white-space: normal; min-width: 180px; }
table.audit tr.bad td:nth-child(2) { color: var(--alert-ink); font-weight: 600; }
ul.plain { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
ul.plain .ic { color: var(--signal-ink); }

/* ---------- Befehlsleiste (Strg+K) ---------- */
dialog.cmd { width: min(640px, calc(100% - 24px)); max-height: min(80vh, 640px); margin: 10vh auto auto; padding: 0; border: 1px solid var(--line-2); border-radius: var(--radius-l); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-up); }
dialog.cmd::backdrop { background: rgba(5, 8, 12, .55); }
.cmd form { display: grid; gap: 0; }
.cmd .cmd-input { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.cmd .cmd-input input { border: 0; background: none; font-family: var(--mono); font-size: 1.05rem; padding: 6px 0; box-shadow: none; }
.cmd .cmd-input .ic { color: var(--muted); }
.cmd .cmd-body { padding: 12px 14px; overflow-y: auto; max-height: 52vh; }
.cmd h3 { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); margin: 10px 0 6px; }
.cmd .opts { display: flex; flex-wrap: wrap; gap: 6px; }
.cmd .opt { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; min-height: 36px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); color: var(--ink); font: inherit; font-size: .88rem; cursor: pointer; }
.cmd .opt[aria-pressed=true] { border-color: var(--signal); background: var(--tint-signal); color: var(--signal-ink); font-weight: 600; }
.cmd .opt .dotlamp { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.cmd .opt .dotlamp.on { background: var(--signal); }
.cmd .favs .opt { border-radius: var(--radius-s); font-family: var(--mono); }
.cmd .cmd-foot { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.cmd .result { margin-top: 10px; }
.cmd .result pre { margin: 6px 0 0; padding: 8px 10px; background: var(--slot); color: #e8eaed; border-radius: var(--radius-s); font: .8rem/1.45 var(--mono); white-space: pre-wrap; max-height: 220px; overflow: auto; }

/* ---------- Favoriten ---------- */
.fav-list { list-style: none; padding: 0; margin: 0 0 12px; }
.fav-list li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.fav-list li:last-child { border-bottom: 0; }
.fav-list code { font-size: .85rem; }
.fav-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }

/* ---------- App-Installation (PWA) ---------- */
.install-hint { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }

/* ---------- Handy ---------- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  #app { grid-template-columns: minmax(0, 1fr); }
  /* Navigation unten: vier Ziele plus "Mehr", alles mit dem Daumen erreichbar */
  nav.side { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; flex-direction: row; gap: 0; border-right: 0; border-top: 1px solid var(--line); padding: 0 4px env(safe-area-inset-bottom); box-shadow: 0 -4px 16px rgba(0, 0, 0, .18); }
  nav.side .brand, nav.side .mem, nav.side .side-tools { display: none; }
  nav.side button.nav { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 2px; font-size: .7rem; padding: 6px 2px; min-height: var(--nav-h); border-radius: 0; }
  nav.side button.nav .ic { width: 22px; height: 22px; }
  nav.side button.nav .long { display: none; }
  nav.side button.nav .short { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  nav.side button.nav.mobile-hide { display: none; }
  nav.side button.nav.nav-more { display: flex; }
  nav.side button.nav[aria-current="page"]::before { left: 18%; right: 18%; top: 0; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
  /* Inhalt endet über der Navigation (nichts wird verdeckt) */
  main { padding: 14px 16px calc(var(--nav-h) + env(safe-area-inset-bottom) + 24px); }
  #toast { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px); }
  .savebar { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
  .topbar { margin-bottom: 4px; }
  .cmd-open { min-width: 0; flex: 1 1 auto; }
  .cmd-open .hint-k { display: none; }
  h1 { font-size: 1.45rem; }
  .panel { padding: 14px; }
  .tabs button { padding: 10px 11px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat { grid-template-columns: minmax(0, 1fr); padding: 11px 12px; gap: 2px; }
  .stat .icon { grid-row: auto; width: 28px; height: 28px; border-radius: 7px; margin-bottom: 4px; }
  .stat .icon .ic { width: 16px; height: 16px; }
  .stat .v { font-size: 1.15rem; }
  .stat .v small { display: block; margin-left: 0; margin-top: 2px; }
  .chart .axis text { font-size: 19px; }
  .chart-legend { display: grid; gap: 4px; }
  .btn { min-height: 44px; }
  input, select, textarea { font-size: 16px; min-height: 44px; }
  .acc-card .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .acc-card .actions .btn { justify-content: center; }
  .answer pre { font-size: .72rem; max-height: 160px; }
  .lc-grid { padding: 8px; gap: 10px; }
  .lc-head .pill { display: none; }
  .lc-ic { width: 30px; }
  ol.codes { columns: 1; }
  dialog.cmd { margin: 0 auto auto; width: 100%; max-height: 100dvh; border-radius: 0 0 var(--radius-l) var(--radius-l); }
}
/* "Mehr" auf dem Handy: die übrigen Bereiche als Blatt von unten */
.more-sheet { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); z-index: 19; background: var(--surface); border-top: 1px solid var(--line-2); box-shadow: var(--shadow-up); padding: 8px 8px 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.more-sheet button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px; min-height: 64px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-m); color: var(--ink); font: inherit; font-size: .85rem; cursor: pointer; }
.more-sheet button[aria-current="page"] { border-color: var(--signal); color: var(--signal-ink); }
@media (min-width: 761px) { .more-sheet { display: none !important; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---------- Gerüst-Ergänzungen ---------- */
.content { min-width: 0; display: flex; flex-direction: column; }
.content > .topbar { padding: 14px clamp(16px, 3vw, 40px) 0; max-width: 1200px; width: 100%; margin: 0; }
.content > main { padding-top: 8px; }
.logo .l-bg { fill: var(--signal); }
.logo .l-fg { fill: var(--bg); }
@media (max-width: 760px) {
  .content > .topbar { padding: 10px 16px 0; position: sticky; top: 0; z-index: 15; background: var(--bg); padding-bottom: 6px; }
}

/* Live-Ansicht: Stil steht in viewer/viewer.css (wird mit der Ansicht geladen) */
.live-allow { display: grid; gap: 10px; justify-items: center; }