:root{--bg:#0a0612;--panel:#130b22;--panel2:#1b1130;--line:#33204f;--pink:#ff3ec8;--cyan:#3ef0ff;--text:#f3ecff;--muted:#a998c8;--dim:#6f6290;--green:#3eff9b;--red:#ff4f6d;--amber:#ffc23e;--r:14px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{background:radial-gradient(ellipse at 50% -10%,#35104c 0%,#0a0612 55%) fixed;background-color:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;font-size:14px;line-height:1.45;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.view{display:none}.view.on{display:block}
.pix{font-family:"Press Start 2P",monospace;letter-spacing:.03em}
.mono{font-family:"JetBrains Mono",monospace}
.glow{color:var(--pink);text-shadow:0 0 10px rgba(255,62,200,.65)}
.muted{color:var(--muted)}.hint{color:var(--dim);font-size:12.5px;line-height:1.5;margin:8px 0 0}
.fine{color:var(--dim);font-size:11.5px;line-height:1.5;margin-top:18px}
.err{color:var(--red);font-size:13px;min-height:1em;margin:8px 0 0}
[hidden]{display:none!important}

/* Buttons & Formulare */
.btn{font:inherit;font-weight:600;font-size:14px;padding:10px 16px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--text);cursor:pointer;transition:transform .08s,border-color .2s}
.btn:active{transform:scale(.98)}
.btn.primary{background:linear-gradient(135deg,#ff3ec8,#a63ef0);border:0;color:#fff;box-shadow:0 6px 24px rgba(255,62,200,.3)}
.btn.big{width:100%;padding:14px;font-size:15px}
.btn.ghost{background:none}
.btn.danger{border-color:#6a1f33;color:var(--red);background:#1f0a12}
.btn[disabled]{opacity:.55;pointer-events:none}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.form label,.lbl-in{display:block;font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:12px}
.form input,.lbl-in input{display:block;width:100%;margin-top:6px;font:inherit;font-size:16px;color:var(--text);background:#0c0717;border:1px solid var(--line);border-radius:10px;padding:12px}
.form input:focus,.lbl-in input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(62,240,255,.15)}
.form h3{margin:0 0 12px;font-size:16px}
.seg{display:flex;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:14px}
.seg button{flex:1;font:inherit;font-size:13.5px;font-weight:600;padding:10px 6px;background:#0c0717;color:var(--muted);border:0;cursor:pointer}
.seg button.on{background:var(--pink);color:#12051c}

/* Login */
.auth{max-width:420px;margin:0 auto;padding:40px 18px}
.auth.wide{max-width:860px}
.auth h1{font-size:15px;margin:14px 0 10px;text-align:center}
.auth>p{text-align:center}
.auth-logo{display:flex;justify-content:center}
.auth-logo canvas{width:72px;height:72px;image-rendering:pixelated;border-radius:16px;border:1px solid var(--line);background:#12061f}
.only-reg{display:none}.reg .only-reg{display:block}
.grid2{display:grid;grid-template-columns:1.3fr 1fr;gap:12px;margin-top:18px}
.demo-card{display:flex;flex-direction:column;justify-content:space-between;gap:12px;background:linear-gradient(160deg,#1a1033,#130b22)}
.status-card{margin-top:12px;display:flex;gap:12px;align-items:center}
.spinner{width:22px;height:22px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--cyan);animation:spin 1s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* Kopf */
.top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px 8px;max-width:1360px;margin:0 auto}
.brand{display:flex;flex-direction:column;gap:6px}
.brand .pix{font-size:12px}
.acc-chip{font-size:11.5px;color:var(--muted)}
.bot-switch{display:flex;align-items:center;gap:10px;background:#1f0a12;border:1px solid #5a1f33;border-radius:999px;padding:5px 14px 5px 5px;cursor:pointer;color:var(--red);font-family:"Press Start 2P";font-size:9px}
.bot-switch .knob{width:26px;height:26px;border-radius:50%;background:var(--red);box-shadow:0 0 10px rgba(255,79,109,.6);transition:.25s}
.bot-switch.on{background:#0a2a1c;border-color:#1f6a45;color:var(--green)}
.bot-switch.on .knob{background:var(--green);box-shadow:0 0 14px rgba(62,255,155,.7);animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 4px rgba(62,255,155,.3)}}
.hud{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;max-width:1360px;margin:0 auto 10px;box-shadow:0 0 22px rgba(255,62,200,.13)}
.hud>div{background:#0e0718;padding:8px 10px;min-width:0}
.hud .l{font-family:"Press Start 2P";font-size:7px;color:var(--pink)}
.hud .v{font-family:"JetBrains Mono";font-weight:700;font-size:15px;color:var(--cyan);margin-top:5px;text-shadow:0 0 6px rgba(62,240,255,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conn-banner{max-width:1360px;margin:0 auto 10px;padding:10px 14px;border-radius:12px;background:#2a1a08;border:1px solid #6b4a12;color:var(--amber);font-size:13px}
.conn-banner.err{background:#2a0c15;border-color:#6a1f33;color:var(--red)}
.top,.hud,.conn-banner,.layout{width:calc(100% - 24px)}

/* Layout */
.layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:12px;max-width:1360px;margin:0 auto 30px;align-items:start}
.station{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#12061f}
.station-box{position:relative}
.station-inner{position:relative;width:100%}
.zoom-btn{display:none;position:absolute;right:8px;bottom:8px;z-index:3;font:inherit;font-size:12px;font-weight:600;padding:7px 11px;border-radius:999px;border:1px solid var(--line);background:rgba(19,11,34,.9);color:var(--text)}
.station canvas{display:block;width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges;cursor:pointer}
.station-hint{color:var(--dim);font-size:12px;text-align:center;margin:8px 0 0}
.room-label{position:absolute;pointer-events:none;overflow:hidden}
.rl-n{font-family:"Press Start 2P";font-size:clamp(4.5px,.62vw,8px);color:#fff;text-shadow:0 1px 0 #000,0 0 4px #000;display:flex;align-items:center;gap:4px;white-space:nowrap}
.rl-n i{width:6px;height:6px;border-radius:1px;flex:none;background:var(--amber)}
.rl-n i.s-arbeitet{background:var(--green);box-shadow:0 0 6px var(--green)}
.rl-n i.s-blockiert{background:var(--red);box-shadow:0 0 6px var(--red)}
.rl-n i.s-aus{background:#555}
.rl-t{display:none}
.side{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;position:sticky;top:10px}
.tabs{display:flex;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{flex:1;font:inherit;font-size:13px;font-weight:600;padding:12px 8px;background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);cursor:pointer;white-space:nowrap}
.tabs button.on{color:var(--text);border-bottom-color:var(--pink)}
.tabs .cnt{font-size:10px;background:var(--pink);color:#12051c;border-radius:8px;padding:1px 6px;margin-left:5px;font-weight:800}
.only-mobile{display:none}
.pane{display:none;padding:14px;max-height:calc(100vh - 210px);overflow:auto}
.pane.on{display:block}

/* Signale */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.stats>div{background:#0e0718;border:1px solid var(--line);border-radius:12px;padding:9px;text-align:center}
.stats .k{font-size:11px;color:var(--muted)}
.stats .v{font-family:"JetBrains Mono";font-weight:700;font-size:16px;margin-top:2px}
.sig{border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px;background:var(--panel2);animation:fin .35s ease}
@keyframes fin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sig.closed{opacity:.7;background:#110a1e}
.sig .h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tag{font-family:"Press Start 2P";font-size:8px;padding:5px 7px;border-radius:6px;margin-right:6px}
.buy{background:#0b3322;color:var(--green)}.sell{background:#3a0f1a;color:var(--red)}
.sig .m{font-weight:800;font-size:15px}
.sig .meta{font-size:11px;color:var(--dim);text-align:right}
.lv{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:10px}
.lv div{background:#0c0717;border-radius:8px;padding:6px 3px;text-align:center;border:1px solid transparent}
.lv .k{font-size:9.5px;color:var(--muted);font-weight:700}
.lv .x{font-family:"JetBrains Mono";font-size:10.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv .hit{border-color:var(--green);background:#0b2a1d}.lv .hit .k{color:var(--green)}
.lv .slhit{border-color:var(--red);background:#2e0c15}.lv .slhit .k{color:var(--red)}
.lv .be .k{color:var(--amber)}
.sig .f{display:flex;justify-content:space-between;align-items:center;margin-top:9px;font-size:12px;color:var(--muted);gap:8px}
.pl{font-family:"JetBrains Mono";font-weight:700;font-size:13px}
.pos{color:var(--green)}.neg{color:var(--red)}
.mini{font:inherit;font-size:11.5px;padding:4px 9px;border-radius:8px;border:1px solid var(--line);background:none;color:var(--muted);cursor:pointer}
h4.sub{font-size:12px;color:var(--muted);margin:16px 0 8px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}

/* Einstellungen */
.grp{margin-bottom:20px}
.grp h3{font-family:"Press Start 2P";font-size:8px;color:var(--pink);margin:0 0 10px;letter-spacing:.05em}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:inherit;font-size:13px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:#0c0717;color:var(--muted);cursor:pointer}
.chip.on{border-color:var(--cyan);color:var(--text);background:#0c2630;box-shadow:0 0 8px rgba(62,240,255,.2)}
.row{display:flex;justify-content:space-between;align-items:center;padding:8px 0 2px;font-size:13.5px}
input[type=range]{width:100%;accent-color:var(--pink)}
.sw-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px dashed #2a1a40;font-size:13.5px}
.sw{position:relative;width:42px;height:24px;flex:none}
.sw input{opacity:0;width:0;height:0}
.sw span{position:absolute;inset:0;background:#2a1a40;border-radius:20px;transition:.2s;cursor:pointer}
.sw span:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.sw input:checked+span{background:var(--pink)}
.sw input:checked+span:before{transform:translateX(18px)}
.acc-box{background:#0c0717;border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.acc-box b{display:block}.acc-box small{color:var(--muted)}

/* Protokoll */
.log{font-family:"JetBrains Mono";font-size:11.5px;line-height:1.55}
.log div{padding:5px 0;border-bottom:1px dashed #241638}
.log .tm{color:var(--dim);margin-right:6px}
.log .warn{color:var(--amber)}.log .error{color:var(--red)}

/* Toasts */
.toasts{position:fixed;top:calc(10px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;width:min(440px,94vw);pointer-events:none}
.toast{background:rgba(26,15,44,.97);backdrop-filter:blur(8px);border:1px solid var(--line);border-left:4px solid var(--cyan);border-radius:14px;padding:11px 13px;box-shadow:0 10px 30px rgba(0,0,0,.6);animation:tin .3s ease;pointer-events:auto}
.toast .a{font-size:11px;color:var(--muted);display:flex;justify-content:space-between}
.toast .b{font-weight:800;margin-top:3px;font-size:14.5px}
.toast .c{font-family:"JetBrains Mono";font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.45}
@keyframes tin{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* Arbeiter-Detail */
.sheet-bg{position:fixed;inset:0;background:rgba(5,2,10,.55);z-index:40;display:none}
.sheet-bg.on{display:block}
.sheet{position:fixed;left:50%;bottom:0;transform:translate(-50%,105%);width:min(560px,100vw);background:#140b24;border:1px solid var(--line);border-bottom:0;border-radius:20px 20px 0 0;z-index:41;transition:transform .28s ease;padding:16px 16px calc(22px + env(safe-area-inset-bottom));max-height:82vh;overflow:auto;box-shadow:0 -10px 40px rgba(255,62,200,.15)}
.sheet.on{transform:translate(-50%,0)}
.grab{width:42px;height:4px;background:#3a2257;border-radius:4px;margin:-6px auto 14px}
.who{display:flex;gap:12px;align-items:center}
.who canvas{width:60px;height:60px;border-radius:14px;background:#0c0717;border:1px solid var(--line);image-rendering:pixelated}
.who .n{font-family:"Press Start 2P";font-size:11px}
.who .r{color:var(--muted);font-size:13px;margin-top:7px}
.stt{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;margin-top:12px}
.stt i{width:7px;height:7px;border-radius:50%;background:currentColor}
.s-arbeitet{background:#0b3322;color:var(--green)}.s-arbeitet i{animation:pulse 1s infinite}
.s-wartet{background:#2e2208;color:var(--amber)}.s-blockiert{background:#3a0f1a;color:var(--red)}.s-aus{background:#22202a;color:#9a96a8}
.task{background:#0c0717;border:1px solid var(--line);border-radius:14px;padding:13px;margin-top:12px}
.task .k{font-size:11.5px;color:var(--muted)}
.task .v{font-size:15px;font-weight:700;margin-top:4px;line-height:1.4}
.prog{height:6px;background:#2a1a40;border-radius:4px;margin-top:10px;overflow:hidden}
.prog div{height:100%;background:linear-gradient(90deg,var(--pink),var(--cyan));transition:width .4s}
.kv{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
.kv>div{background:#0c0717;border-radius:12px;padding:10px;text-align:center}
.kv .k{font-size:11px;color:var(--muted)}.kv .v{font-family:"JetBrains Mono";font-weight:700;font-size:16px;color:var(--cyan);margin-top:2px}

@media (max-width:980px){
  .layout{grid-template-columns:1fr}
  .side{position:static}
  .only-mobile{display:block}
  .hud{grid-template-columns:repeat(3,1fr)}
  .grid2{grid-template-columns:1fr}
  .pane{max-height:none}
  .layout.mob-other .station-wrap{display:none}
  .station{overflow:auto;max-height:72vh;-webkit-overflow-scrolling:touch}
  .station.zoom .station-inner{width:190%}
  .zoom-btn{display:block}
  .station.zoom .rl-n{font-size:8px}
  .rl-n{font-size:clamp(4.5px,1.45vw,8px)}
}
@media (min-width:981px){ .rl-t{display:block;font-size:10px;color:#e6dcff;text-shadow:0 1px 0 #000,0 0 3px #000;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Inter} }

/* Copy */
.copy-head small{font-weight:400}
.tr{border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px;background:var(--panel2)}
.tr.off{opacity:.65;background:#110a1e}
.tr .h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tr .n{font-weight:800;font-size:14.5px;font-family:"JetBrains Mono"}
.badge2{font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;white-space:nowrap}
.b-frei{background:#0b3322;color:var(--green)}.b-schatten{background:#14213a;color:#8fb8ff}.b-raus,.b-abgelehnt{background:#3a0f1a;color:var(--red)}
.tr .kv3{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:9px}
.tr .kv3>div{background:#0c0717;border-radius:8px;padding:6px 4px;text-align:center}
.tr .kv3 .k{font-size:9.5px;color:var(--muted);font-weight:700}.tr .kv3 .v{font-family:"JetBrains Mono";font-size:12px;margin-top:2px}
.tr details{margin-top:8px;font-size:12.5px}.tr summary{cursor:pointer;color:var(--muted)}
.tr ul{list-style:none;padding:0;margin:6px 0 0}.tr li{padding:3px 0;border-bottom:1px dashed #241638;display:flex;justify-content:space-between;gap:8px}
.tr li .ok{color:var(--green)}.tr li .no{color:var(--red)}
.tr .follow{font-size:11px;color:var(--cyan);font-weight:700}
.src-copy{font-size:10px;font-weight:700;color:#7cf0b0;border:1px solid #2c5a45;border-radius:6px;padding:2px 6px;margin-left:6px}