/* =============================================================================
   PLAYTIME FARMER — Bodenstation
   -----------------------------------------------------------------------------
   Gestaltungsidee: kein Dashboard, sondern eine Kontrollstation. Die Bots sind
   "im Feld", hier sitzt die Bodenkontrolle. Daraus folgt alles Weitere:

   FARBE   Tiefes Blauschwarz mit kühlem Stich (kein neutrales Grau) und einem
           sehr feinen Blaupausen-Raster. Die Markenfarbe ist CYAN, nicht Grün —
           damit Grün ausschließlich eine Bedeutung hat: "online". Statusfarben
           sind reserviert und tauchen nirgends als Dekoration auf.
   SCHRIFT Chakra Petch (kantig, HUD-nah) für Überschriften und große Zahlen,
           IBM Plex Sans für Fließtext, IBM Plex Mono für JEDE Zahl und Kennung.
           Zahlen laufen tabellarisch, sonst wackeln tickende Spalten.
   FORM    Karten sind Module: Statusstreifen, Eckmarke, Datenzeilen mit
           Punktführung wie auf einem Datenblatt.
   ============================================================================= */

:root{
  /* --- Grund und Flächen ------------------------------------------------- */
  --bg:#070a10;
  --bg-2:#0a0e16;
  --panel:#0c1119;
  --panel-2:#111827;
  --raised:#141d2b;
  --line:#1b2536;
  --line-soft:#ffffff0d;
  --grid:#4fd6e410;

  /* --- Schrift ----------------------------------------------------------- */
  --text:#e8eef7;
  --muted:#8496ad;
  --dim:#55657c;

  /* --- Marke: Cyan. Bewusst kein Grün. ----------------------------------- */
  --brand:#3fd8d1;
  --brand-soft:#3fd8d11f;
  --brand-line:#3fd8d155;

  /* --- Status: reserviert, nie als Deko ---------------------------------- */
  --ok:#54e08a;
  --wait:#f4b740;
  --bad:#ff6b81;
  --info:#6aa6ff;
  --macro:#a98bff;

  --r:14px;
  --r-sm:9px;
  --display:'Chakra Petch','Segoe UI',sans-serif;
  --body:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
}

*{box-sizing:border-box}
/* [hidden] ist im Browser nur ein display:none aus dem Standard-Stylesheet und
   verliert gegen jede eigene display-Regel. Deshalb hier, ganz oben, hart. */
[hidden]{display:none!important}
html,body{height:100%}

body{
  margin:0;
  color:var(--text);
  font-family:var(--body);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  /* Blaupausen-Raster: 32px-Netz, fast unsichtbar, plus zwei kühle Lichter.
     Das Raster ist der Grund, warum die Fläche nicht tot wirkt. */
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(900px 500px at 80% -15%, #0e3b4522 0, transparent 60%),
    radial-gradient(700px 460px at 5% -8%, #1d2a5522 0, transparent 62%),
    var(--bg);
}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:.2px}
code{font-family:var(--mono);font-size:.87em;color:#8fe3dd;background:#3fd8d112;
  padding:1px 5px;border-radius:4px;border:1px solid #3fd8d11a}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Zahlen laufen tabellarisch — sonst zappelt jede tickende Spalte. */
.meta b,.stat strong,.det-hero strong,.sb-field b,.log-row time,.input.mono{
  font-variant-numeric:tabular-nums}

/* ============================================================== Grundgerüst */
.shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}

.sidebar{
  position:sticky;top:0;height:100vh;padding:20px 14px;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg,#080c13f5,#070a10f5);
  display:flex;flex-direction:column;gap:22px;backdrop-filter:blur(10px);
}
.brand{display:flex;align-items:center;gap:12px;padding:4px 6px 2px}
.brand-mark{
  position:relative;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.5px;color:#04231f;
  background:linear-gradient(145deg,var(--brand),#22a8a2);
  box-shadow:0 0 0 1px #3fd8d13d, 0 0 26px #3fd8d13a, inset 0 1px 0 #ffffff66;
}
/* Signallampe: die Station sendet. */
.brand-mark:after{
  content:'';position:absolute;right:-3px;top:-3px;width:8px;height:8px;border-radius:50%;
  background:var(--ok);box-shadow:0 0 0 2px var(--bg);animation:blink 3.4s infinite}
@keyframes blink{0%,92%,100%{opacity:1}94%,98%{opacity:.25}}
.brand b{display:block;font-family:var(--display);font-weight:700;font-size:15px;line-height:1.1}
.brand small{display:block;font-family:var(--mono);font-size:9.5px;color:var(--brand);
  letter-spacing:2.6px;text-transform:uppercase;margin-top:3px}

nav{display:grid;gap:3px}
.nav{
  position:relative;border:0;background:transparent;color:var(--muted);cursor:pointer;
  padding:10px 12px;border-radius:var(--r-sm);text-align:left;
  display:flex;align-items:center;gap:11px;font-weight:500;font-size:13px;transition:.15s;
}
.nav:hover{color:var(--text);background:#ffffff07}
.nav.active{color:var(--text);background:linear-gradient(90deg,var(--brand-soft),transparent 70%)}
.nav.active:before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:2px;
  background:var(--brand);border-radius:2px;box-shadow:0 0 10px var(--brand)}
.nav .ic{width:18px;text-align:center;opacity:.9;font-size:13px}

.side-live{
  margin-top:auto;display:flex;align-items:center;gap:11px;
  padding:12px;border:1px solid var(--line);background:var(--panel);border-radius:12px;
}
.side-live b{display:block;font-family:var(--mono);font-size:12px}
.side-live small{display:block;font-size:10px;color:var(--dim);margin-top:3px}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;animation:beat 2.6s infinite}
.pulse.off{background:var(--bad);animation:none}
@keyframes beat{0%,100%{box-shadow:0 0 0 0 #54e08a55}50%{box-shadow:0 0 0 7px #54e08a00}}

main{padding:0 28px 56px;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:92px;flex-wrap:wrap}
.eyebrow{margin:0 0 5px;font-family:var(--mono);font-size:10px;letter-spacing:1.6px;color:var(--brand)}
.topbar h1{font-size:26px;font-weight:700;letter-spacing:-.2px}
.top-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ================================================================ Bausteine */
.btn{
  border:1px solid transparent;border-radius:var(--r-sm);padding:9px 14px;
  font-family:var(--body);font-weight:600;font-size:12.5px;cursor:pointer;
  transition:.14s;white-space:nowrap;
}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn.primary{background:var(--brand);color:#042220;box-shadow:0 6px 18px #3fd8d128}
.btn.primary:hover:not(:disabled){box-shadow:0 9px 24px #3fd8d13d}
.btn.ghost{background:#111a26;border-color:var(--line);color:var(--text)}
.btn.ghost:hover:not(:disabled){border-color:var(--brand-line);background:#16202e}
.btn.danger{background:#241419;border-color:#4d222e;color:#ff9aa8}
.btn.danger:hover:not(:disabled){border-color:#7d3446}
.btn.violet{background:#1c1733;border-color:#4a3d7d;color:#c6b6ff}
.btn.small{padding:7px 10px;font-size:11.5px}
.icon-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);
  background:#111a26;cursor:pointer;color:var(--muted);transition:.14s}
.icon-btn:hover{color:var(--text);border-color:var(--brand-line)}

.input{
  width:100%;background:#080d15;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:10px 12px;outline:none;transition:.14s;color:var(--text);
}
.input:focus{border-color:var(--brand-line);box-shadow:0 0 0 3px #3fd8d114}
.input.slim{padding:8px 10px;font-size:12.5px}
.input.mono{font-family:var(--mono);font-size:12.5px;line-height:1.6}
textarea.input{resize:vertical}
select.input{cursor:pointer}

.panel{border:1px solid var(--line);background:var(--panel);border-radius:var(--r);overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 17px;border-bottom:1px solid var(--line);background:#ffffff03;flex-wrap:wrap}
.panel-head h2{font-size:15px;font-weight:600}
.head-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* Eingabefelder erben width:100% — als Flex-Kind verlangen sie damit die ganze
   Zeile und schieben die Knöpfe daneben in die nächste. Hier darf das Feld
   schrumpfen. */
.head-tools .input{width:auto;flex:0 1 auto;min-width:0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  margin:28px 2px 13px;flex-wrap:wrap}
.section-head h2{font-size:17px;font-weight:600}
/* Überschriften bekommen eine Kennung wie auf einem Schaltplan. */
.section-head h2:before{content:'// ';color:var(--brand);font-family:var(--mono);font-size:13px}

.view{display:none;animation:rise .24s cubic-bezier(.2,.7,.3,1)}
.view.active{display:block}
@keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

.empty{padding:42px 24px;text-align:center;color:var(--muted);font-size:13px;
  border:1px dashed var(--line);border-radius:var(--r);line-height:1.75}

.form{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px}
.form label{display:block;font-family:var(--mono);font-size:10px;font-weight:500;
  color:var(--muted);letter-spacing:.6px;text-transform:uppercase}
.form label .input,.form label textarea{margin-top:7px;text-transform:none;letter-spacing:0;
  font-family:var(--body)}
.form label .input.mono,.form label textarea.mono{font-family:var(--mono)}
.form .wide{grid-column:1/-1}
.form-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.note{grid-column:1/-1;margin:0;font-size:11.5px;color:var(--dim);line-height:1.75}
.toggles{display:flex;gap:18px;flex-wrap:wrap}
.check{display:flex!important;align-items:center;gap:8px;color:var(--text)!important;
  font-weight:400!important;font-family:var(--body)!important;text-transform:none!important;
  letter-spacing:0!important;font-size:12.5px!important;cursor:pointer}
.check input{accent-color:var(--brand);width:15px;height:15px}
.adv summary{cursor:pointer;color:var(--muted);font-size:12px;padding:6px 0}

/* =================================================================== Kacheln */
.stats{display:grid;grid-template-columns:1.35fr repeat(3,1fr);gap:12px}
.stat{
  position:relative;overflow:hidden;padding:16px 18px;min-height:138px;
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(155deg,var(--raised),var(--panel));
  display:flex;flex-direction:column;
}
/* Eckmarke oben rechts — Modulkennzeichnung, kein Zierrat. */
.stat:after{content:'';position:absolute;right:10px;top:10px;width:12px;height:12px;
  border-top:1px solid var(--line-soft);border-right:1px solid var(--line-soft)}
.stat-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:14px;
  border:1px solid var(--line-soft)}
.stat-ic.green{background:#3fd8d114;color:var(--brand)}
.stat-ic.violet{background:#a98bff14;color:var(--macro)}
.stat-ic.blue{background:#6aa6ff14;color:var(--info)}
.stat-ic.amber{background:#f4b74014;color:var(--wait)}
.stat-label{font-family:var(--mono);font-size:9.5px;color:var(--muted);
  letter-spacing:1.2px;text-transform:uppercase;margin-top:15px}
.stat strong{font-family:var(--display);font-weight:700;font-size:25px;margin-top:4px;letter-spacing:-.3px}
.stat.hero strong{font-size:31px;color:var(--brand)}
.stat small{margin-top:auto;font-size:10.5px;color:var(--dim);line-height:1.5}

/* ================================================================ Bot-Module */
.bot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px}
.bot-card{
  position:relative;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(165deg,var(--raised),var(--panel));padding:15px;
  display:flex;flex-direction:column;gap:11px;transition:.18s;overflow:hidden;
}
.bot-card:hover{border-color:#2b3a52;transform:translateY(-2px);box-shadow:0 16px 38px #00000066}
/* Statusstreifen oben: die Farbe sagt den Zustand, nicht die Marke. */
.bot-card:before{content:'';position:absolute;inset:0 0 auto;height:2px;background:var(--dim);opacity:.5}
.bot-card.s-online:before{background:var(--ok);opacity:1;box-shadow:0 0 12px #54e08a66}
.bot-card.s-connecting:before,.bot-card.s-auth:before,.bot-card.s-linking:before{background:var(--info);opacity:1}
.bot-card.s-reconnect:before{background:var(--wait);opacity:1}
.bot-card.s-error:before,.bot-card.s-stopped:before{background:var(--bad);opacity:1}

.bot-top{display:flex;align-items:center;gap:11px}
.avatar{
  width:38px;height:38px;border-radius:9px;display:grid;place-items:center;flex:none;
  font-family:var(--display);font-weight:700;font-size:14px;color:#042220;
  background:linear-gradient(145deg,var(--brand),#1f9c96);
}
.bot-card:not(.s-online) .avatar{background:linear-gradient(145deg,#26323f,#18202b);color:#7f8ea3}
.bot-id{min-width:0;flex:1}
.bot-id b{display:block;font-family:var(--display);font-weight:600;font-size:14.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bot-id span{display:block;font-family:var(--mono);font-size:10px;color:var(--dim);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{
  font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:1.1px;text-transform:uppercase;
  padding:5px 8px;border-radius:5px;background:#182231;color:var(--muted);white-space:nowrap;
  border:1px solid var(--line-soft);
}
.pill.online{color:var(--ok);background:#54e08a12;border-color:#54e08a33}
.pill.connecting,.pill.auth,.pill.linking{color:var(--info);background:#6aa6ff12;border-color:#6aa6ff33}
.pill.reconnect{color:var(--wait);background:#f4b74012;border-color:#f4b74033}
.pill.error,.pill.stopped{color:var(--bad);background:#ff6b8112;border-color:#ff6b8133}

/* Datenzeilen mit Punktführung — Datenblatt statt Kachelsalat. */
.bot-meta{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
  border-radius:10px;overflow:hidden}
.meta{display:flex;align-items:baseline;gap:8px;background:#0a0f18;padding:7px 11px}
.meta span{font-family:var(--mono);font-size:9.5px;color:var(--dim);letter-spacing:.8px;
  text-transform:uppercase;flex:none}
.meta:after{content:'';flex:1;border-bottom:1px dotted #ffffff14;transform:translateY(-3px)}
.meta b{font-family:var(--mono);font-size:12.5px;font-weight:500;flex:none;order:3}

/* Sparkline: läuft die Uhr? Auf einen Blick, ohne Zahlen zu lesen. */
.spark-wrap{border:1px solid var(--line-soft);border-radius:10px;background:#0a0f18;padding:8px 10px 4px}
.spark-cap{font-family:var(--mono);font-size:9px;color:var(--dim);letter-spacing:.8px;
  text-transform:uppercase;display:block;margin-bottom:2px}
.spark{display:block;width:100%;height:34px;overflow:visible}
.spark-line{fill:none;stroke:var(--brand);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.spark-area{fill:url(#sparkFill)}
.spark-end{fill:var(--brand)}

.bars{display:grid;gap:5px}
.bar{display:grid;grid-template-columns:30px 1fr;align-items:center;gap:9px;
  font-family:var(--mono);font-size:9px;color:var(--dim);letter-spacing:.5px}
.bar-track{height:4px;border-radius:99px;background:#ffffff0f;overflow:hidden}
.bar-fill{height:100%;border-radius:99px;transition:width .4s}
.bar-fill.hp{background:linear-gradient(90deg,#ff6b81,#ff8f9e)}
.bar-fill.food{background:linear-gradient(90deg,#f4b740,#ffcc70)}

.bot-tags{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.setup-chip{
  font-family:var(--mono);font-size:9px;letter-spacing:.7px;text-transform:uppercase;
  padding:4px 7px;border-radius:5px;background:#182231;color:var(--dim);white-space:nowrap;
  border:1px solid var(--line-soft);
}
.setup-chip.ok{color:var(--ok);background:#54e08a10;border-color:#54e08a2b}
.setup-chip.busy{color:var(--info);background:#6aa6ff10;border-color:#6aa6ff2b}
.setup-chip.open{color:var(--wait);background:#f4b74010;border-color:#f4b7402b}

/* Was der Bot gerade tut — die Frage beim Draufschauen. */
.bot-doing{
  font-family:var(--mono);font-size:10.5px;line-height:1.5;color:#7fe0da;
  background:#3fd8d10d;border:1px solid #3fd8d124;border-radius:8px;
  padding:7px 10px;overflow-wrap:anywhere;
}
.bot-doing:before{content:'▸ ';color:var(--brand)}

.bot-note{font-family:var(--mono);font-size:10.5px;color:var(--muted);line-height:1.6;
  background:#ffffff05;border-left:2px solid var(--line);padding:7px 10px;
  border-radius:0 7px 7px 0;overflow-wrap:anywhere}
.bot-note.warn{border-left-color:var(--wait);color:#e8c076}
.bot-note.err{border-left-color:var(--bad);color:#ffa3af}

.bot-actions{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto auto;gap:6px;margin-top:auto}
.bot-actions .btn{width:100%}
.macro-select{grid-column:1/-1;background:#080d15;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:8px 10px;font-size:12px;cursor:pointer}
.btn.mobs-on{background:#2a1a12;border-color:#7d4c22;color:#ffc184}
.btn.mobs-off{background:#111a26;border-color:var(--line);color:var(--muted)}

.src-dot{display:inline-block;width:5px;height:5px;border-radius:50%;vertical-align:middle;margin-left:5px}
.src-dot.server{background:var(--ok);box-shadow:0 0 6px #54e08a99}
.src-dot.local{background:var(--dim)}

/* =================================================================== Konsole */
.console{
  height:calc(100vh - 300px);min-height:400px;overflow:auto;padding:8px 10px;
  background:#05080d;font-family:var(--mono);font-size:11.5px;line-height:1.6;
  overflow-anchor:none;
}
.log-row{
  display:grid;grid-template-columns:60px minmax(94px,148px) 58px minmax(0,1fr);
  gap:11px;padding:4px 8px;border-bottom:1px solid #ffffff06;border-left:2px solid transparent;
  border-radius:2px;align-items:start;
}
.log-row:hover{background:#ffffff07}
.log-row time{color:#4a5768}
.log-row .src{color:#7fb4c9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log-row .lvl{font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;color:#6f7d90;padding-top:1px}
.log-row .msg{color:#bcc8d8;overflow-wrap:anywhere;white-space:pre-wrap}
.log-row.l-state{border-left-color:var(--macro)}  .l-state .lvl{color:var(--macro)}
.log-row.l-net{border-left-color:var(--info)}     .l-net .lvl{color:var(--info)}
.log-row.l-macro{border-left-color:var(--brand)}  .l-macro .lvl{color:var(--brand)}
.log-row.l-auth{border-left-color:var(--ok)}      .l-auth .lvl{color:var(--ok)}
.log-row.l-chat{border-left-color:#334255}        .l-chat .msg{color:#8b9aad}
.log-row.l-warn{border-left-color:var(--wait)}    .l-warn .lvl,.l-warn .msg{color:#e8c076}
.log-row.l-error{border-left-color:var(--bad);background:#ff6b8109}
.l-error .lvl,.l-error .msg{color:#ff96a4}
.command{display:flex;gap:8px;padding:11px;border-top:1px solid var(--line);background:#ffffff03}
.autoscroll-on{color:var(--brand)!important;border-color:var(--brand-line)!important;background:#0d2226!important}

/* ==================================================================== Makros */
.macro-layout{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:13px;align-items:start}
.macro-list{padding:9px;display:grid;gap:6px;max-height:70vh;overflow:auto}
.macro-item{text-align:left;border:1px solid var(--line-soft);background:#0a0f18;border-radius:11px;
  padding:11px 12px;cursor:pointer;transition:.14s}
.macro-item:hover{background:#111a26;border-color:#ffffff1c}
.macro-item.active{border-color:var(--brand-line);background:#3fd8d10d}
.macro-item b{display:block;font-family:var(--display);font-weight:600;font-size:13px}
.macro-item small{display:block;font-size:10.5px;color:var(--dim);margin-top:4px;line-height:1.55}
.macro-item .count{font-family:var(--mono);font-size:9.5px;color:var(--brand);margin-top:6px;display:block}
.hint{padding:0 17px 17px;font-size:11.5px;color:var(--muted);line-height:1.85}
.hint b{display:block;margin-bottom:7px;color:var(--text);font-family:var(--display);font-size:12px}
.hint ul{margin:0;padding-left:17px}
.hint li{margin-bottom:4px}

/* ============================================================= Login-Banner */
.msa{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border:1px solid var(--brand-line);border-radius:var(--r);padding:15px 17px;margin-bottom:16px;
  background:linear-gradient(135deg,#0b2b2d,#0a1720);
  box-shadow:0 0 0 1px #3fd8d114, 0 14px 38px #0009;
}
.msa .who{font-family:var(--display);font-weight:700;font-size:14px}
.msa .txt{font-size:12px;color:#9fc6c4;line-height:1.6;flex:1;min-width:180px}
.msa .code{font-family:var(--mono);font-size:21px;font-weight:500;letter-spacing:3px;color:#eafffd;
  background:#041414;border:1px dashed var(--brand-line);border-radius:9px;padding:9px 15px}
.msa a{color:var(--brand);font-weight:500;text-decoration:none;border-bottom:1px solid var(--brand-line)}

/* ================================================================= Dialoge */
.modal{position:fixed;inset:0;background:#04060ad4;backdrop-filter:blur(6px);
  display:grid;place-items:center;padding:22px;z-index:50;animation:rise .2s ease}
.modal[hidden]{display:none}
.modal-card{width:min(640px,100%);max-height:88vh;overflow:auto;
  border:1px solid var(--line);border-radius:16px;background:var(--panel-2);
  box-shadow:0 30px 80px #000b, 0 0 0 1px #ffffff08}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--line)}
.modal-head h2{font-size:16px;font-weight:600}

/* =============================================================== Scoreboard */
.sb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px;align-items:start}
.sb-card{overflow:hidden}
.sb-card .panel-head{flex-wrap:nowrap}
.sb-card .note{padding:0;font-size:10px;font-family:var(--mono)}
.sb-who{display:flex;align-items:center;gap:11px;min-width:0}
.sb-who b{font-family:var(--display);font-weight:600;font-size:14.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-who .avatar{width:32px;height:32px;border-radius:8px;font-size:12.5px}
.sb-body{padding:16px;display:grid;gap:13px}
/* Nachbau der Seitenleiste, wie sie im Spiel rechts steht. */
.sb-board{border:1px solid var(--line);border-radius:11px;background:#05080d;
  padding:14px 16px;font-family:var(--mono);font-size:12.5px;line-height:1.95;
  display:grid;gap:1px;overflow-x:auto}
.sb-title{text-align:center;color:var(--wait);font-weight:500;padding-bottom:7px;
  border-bottom:1px solid var(--line);margin-bottom:7px;white-space:nowrap;letter-spacing:1px}
.sb-line{display:flex;gap:10px;justify-content:space-between;white-space:nowrap}
.sb-line.plain{color:#c2cede;justify-content:flex-start}
.sb-empty{color:var(--dim);text-align:center;line-height:1.8;white-space:normal;padding:8px 0}
.sb-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:7px}
.sb-field{border:1px solid var(--line-soft);background:#ffffff05;border-radius:10px;padding:8px 10px;min-width:0}
.sb-field span{display:block;font-family:var(--mono);font-size:9px;color:var(--dim);
  letter-spacing:.8px;text-transform:uppercase}
.sb-field b{display:block;font-family:var(--mono);font-size:13px;font-weight:500;margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-field.hero{border-color:var(--brand-line);background:#3fd8d10d}
.sb-field.hero b{color:var(--brand)}

/* ============================================== Account-Detail und Diagramm */
.det-card{width:min(780px,100%)}
.det-sub{display:block;font-family:var(--mono);font-size:10px;color:var(--dim);margin-top:3px}
.det-body{padding:18px;display:grid;gap:15px}
.det-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}
.det-hero>div{border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  background:linear-gradient(150deg,var(--raised),var(--panel))}
.det-hero span{display:block;font-family:var(--mono);font-size:9.5px;color:var(--dim);
  letter-spacing:1px;text-transform:uppercase}
.det-hero strong{display:block;font-family:var(--display);font-weight:700;font-size:20px;margin-top:5px}
.det-hero>div:first-child strong{color:var(--brand)}

.chart-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.chart-head h3{font-size:13px;font-weight:600}
.chart-head h3:before{content:'// ';color:var(--brand);font-family:var(--mono)}
.range-tabs{display:flex;gap:4px}
.range{border:1px solid var(--line);background:#0a0f18;color:var(--muted);border-radius:7px;
  padding:5px 10px;font-family:var(--mono);font-size:10.5px;cursor:pointer;transition:.14s}
.range:hover{color:var(--text);border-color:#ffffff22}
.range.active{color:var(--brand);border-color:var(--brand-line);background:#3fd8d10f}

.chart-wrap{position:relative;border:1px solid var(--line);border-radius:12px;background:#05080d;padding:10px}
#detChart{display:block;width:100%;height:200px;overflow:visible}
.chart-empty{padding:50px 20px;text-align:center;color:var(--dim);font-size:12px;line-height:1.7}
/* Raster und Achsen bleiben zurückhaltend — die Linie trägt die Aussage. */
.chart-grid{stroke:#ffffff0e;stroke-width:1}
.chart-axis{fill:var(--dim);font-size:9px;font-family:var(--mono)}
.chart-area{fill:url(#ptFill)}
.chart-line{fill:none;stroke:var(--brand);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart-end{fill:var(--brand);stroke:#05080d;stroke-width:2}
.chart-cross{stroke:#ffffff30;stroke-width:1;stroke-dasharray:3 3}
.chart-dot{fill:var(--brand);stroke:#05080d;stroke-width:2}
.chart-tip{position:absolute;pointer-events:none;z-index:5;transform:translate(-50%,-120%);
  background:var(--raised);border:1px solid var(--line);border-radius:8px;padding:7px 10px;
  font-family:var(--mono);font-size:10.5px;line-height:1.5;white-space:nowrap;box-shadow:0 8px 24px #000a}
.chart-tip b{color:var(--brand)}
.chart-tip span{display:block;color:var(--dim);font-size:9.5px;margin-top:2px}
.det-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:7px}

/* ==================================================================== Toast */
.toast{
  position:fixed;right:20px;bottom:20px;z-index:80;max-width:380px;
  padding:12px 15px;border-radius:11px;font-size:12.5px;line-height:1.5;
  background:#0d2226;border:1px solid #2b5f60;color:#d3fffb;
  transform:translateY(120px);opacity:0;transition:.28s;
}
.toast.show{transform:none;opacity:1}
.toast.bad{background:#2a1218;border-color:#77303f;color:#ffd7dc}

/* ================================================================ Responsiv */
@media(max-width:1180px){
  .stats{grid-template-columns:1fr 1fr}
  .macro-layout{grid-template-columns:1fr}
}
@media(max-width:860px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;flex-direction:row;align-items:center;gap:14px;
    border-right:0;border-bottom:1px solid var(--line);padding:11px 14px;overflow:auto}
  .sidebar nav{display:flex;gap:3px}
  .side-live{margin:0 0 0 auto;flex:none}
  main{padding:0 14px 40px}
  .topbar{flex-direction:column;align-items:flex-start;gap:12px;padding:16px 0}
  .stats{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .bot-grid,.sb-grid{grid-template-columns:1fr}
  .log-row{grid-template-columns:54px 54px minmax(0,1fr)}
  .log-row .src{display:none}
}

/* ================================================================= Verbrauch */
.res-split{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(0,1.3fr);gap:18px;padding:17px}
.res-table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px}
.res-table th{text-align:left;font-size:9.5px;letter-spacing:.9px;text-transform:uppercase;
  color:var(--dim);font-weight:500;padding:0 10px 8px 0;border-bottom:1px solid var(--line)}
.res-table td{padding:7px 10px 7px 0;border-bottom:1px solid var(--line-soft);
  font-variant-numeric:tabular-nums;color:#c2cede}
.res-table tr:last-child td{border-bottom:0}
/* Die Zeile mit der aktuellen Botzahl hervorheben - dort steht man gerade. */
.res-table tr.jetzt td{color:var(--brand)}
.res-table tr.now td:first-child:after{content:' ← now';color:var(--dim);font-size:10px}
.res-empty{color:var(--dim);font-style:normal}

.res-machine{padding:17px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}
.res-machine>div{border:1px solid var(--line-soft);background:#ffffff05;border-radius:10px;padding:10px 12px}
.res-machine span{display:block;font-family:var(--mono);font-size:9px;color:var(--dim);
  letter-spacing:.8px;text-transform:uppercase}
.res-machine b{display:block;font-family:var(--mono);font-size:13px;font-weight:500;margin-top:4px;
  font-variant-numeric:tabular-nums}

#resChart{display:block;width:100%;height:200px;overflow:visible}
.res-ram{fill:none;stroke:var(--brand);stroke-width:2;stroke-linejoin:round}
.res-ramfill{fill:url(#resFill)}
/* Botzahl als Treppe darunter: eigene Spur statt zweiter Y-Achse im selben
   Bild - zwei Skalen in einem Diagramm sind nicht vergleichbar. */
.res-bots{fill:none;stroke:var(--macro);stroke-width:1.5;stroke-linejoin:miter;opacity:.75}
.res-legend{display:flex;gap:16px;margin-top:8px;font-family:var(--mono);font-size:10px;color:var(--dim)}
.res-legend i{display:inline-block;width:10px;height:2px;margin-right:5px;vertical-align:middle}

@media(max-width:1180px){ .res-split{grid-template-columns:1fr} }

/* ------------------------------------------------------------- Discord-Tab */
.dc-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:13px;align-items:start;margin-top:18px}
@media(max-width:1180px){ .dc-layout{grid-template-columns:1fr} }
.dc-group{grid-column:1/-1;margin:6px 0 -4px;font-family:var(--mono);font-size:9.5px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--brand)}
/* Schalterzeile: Text links, Schalter rechts - wie ein Datenblatt. */
.switch-row{display:flex!important;align-items:center;justify-content:space-between;gap:16px;
  padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel-2);
  text-transform:none!important;letter-spacing:0!important;cursor:pointer}
.switch-row:hover{border-color:var(--brand-line)}
.switch-row b{display:block;font-family:var(--body);font-size:13px;font-weight:600;color:var(--text)}
.switch-row small{display:block;margin-top:3px;font-family:var(--body);font-size:11.5px;color:var(--dim);line-height:1.5}
.switch{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:38px;height:21px;margin:0;
  border-radius:11px;background:#1d2738;border:1px solid var(--line);cursor:pointer;transition:background .15s,border-color .15s}
.switch::after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:var(--muted);transition:transform .15s,background .15s}
.switch:checked{background:var(--brand-soft);border-color:var(--brand-line)}
.switch:checked::after{transform:translateX(17px);background:var(--brand)}
.form.dc-off .switch-row:not(:first-child),.form.dc-off .dc-group{opacity:.45}

.dc-preview{display:flex;flex-direction:column;gap:2px;margin:17px;padding:14px 14px 10px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2)}
.dc-msg{display:flex;gap:11px;padding:7px 4px;border-radius:6px;transition:opacity .15s}
.dc-msg.off{opacity:.28}
.dc-msg .dc-av{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-size:11px;color:#042220;background:linear-gradient(145deg,var(--brand),#22a8a2)}
.dc-msg .dc-head{font-size:12px;color:var(--dim);font-family:var(--mono)}
.dc-msg .dc-head b{color:var(--text);font-family:var(--body);font-size:13px;margin-right:6px}
.dc-msg .dc-body{font-size:13px;line-height:1.55;color:var(--text);margin-top:2px}
.dc-msg .dc-time{padding:0 3px;border-radius:4px;background:#ffffff12}
.dc-msg .dc-quote{margin-top:3px;padding-left:9px;border-left:3px solid var(--line);color:var(--muted);font-size:12.5px}
.dc-msg .dc-sub{margin-top:2px;font-size:11px;color:var(--dim)}
.dc-msg .dc-tag{margin-left:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--dim)}
.dc-preview-note{padding:0 17px 17px}

/* ------------------------------------------------------- Prozesse (Resources) */
.proc-table{padding:6px 17px 10px;display:table;border-spacing:0}
.proc-table th,.proc-table td{padding-left:17px}
.proc-bar{display:inline-block;vertical-align:middle;width:120px;height:6px;margin-right:10px;
  border-radius:3px;background:#1d2738;overflow:hidden}
.proc-bar i{display:block;height:100%;border-radius:3px}
.proc-bar i.ok{background:var(--ok)}
.proc-bar i.wait{background:var(--wait)}
.proc-bar i.bad{background:var(--bad)}
.proc-flag{margin-left:6px;font-size:9.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--bad)}