:root{
  --bg:#04070b; --bg2:#0a1018; --line:rgba(255,170,60,.18); --line2:rgba(255,170,60,.35);
  --gold:#ffb43c; --gold2:#ffd27a; --amber:#ff8a00; --ember:#c24f00; --txt:#f3e6cf; --dim:#a08c70;
  --speed:1; --glow:1; --cyan:#7fe7ff;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%;overflow:hidden}
body{
  background:radial-gradient(1200px 800px at 50% 45%, #121b26 0%, var(--bg) 60%) fixed, var(--bg);
  color:var(--txt); font:15px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  overflow:hidden; -webkit-font-smoothing:antialiased;
}
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.grid-overlay{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px; mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 70%);
  -webkit-mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 70%)}

/* HUD top */
.hud-top{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;
  padding:14px 22px;gap:12px;background:linear-gradient(#04070bcc,transparent)}
.brand{display:flex;flex-direction:column}
.brand-mark{font-weight:700;letter-spacing:.42em;color:var(--gold);text-shadow:0 0 12px #ff9a2a88;font-size:18px}
.brand-sub{font-size:11px;letter-spacing:.18em;color:var(--dim);text-transform:uppercase}
.hud-meta{display:flex;align-items:center;gap:18px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.status{display:flex;align-items:center;gap:8px}
.status .dot{width:8px;height:8px;border-radius:50%;background:#777;box-shadow:0 0 8px #777}
.status.ok .dot{background:#55e28a;box-shadow:0 0 10px #55e28a}
.status.bad .dot{background:#ff5050;box-shadow:0 0 10px #ff5050}
.clock{font-variant-numeric:tabular-nums;color:var(--gold2);font-size:14px}
.logout{color:var(--dim);text-decoration:none;border:1px solid var(--line);padding:5px 10px;border-radius:6px}
.logout:hover{color:var(--gold);border-color:var(--line2)}

/* stage */
.stage{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:1fr 340px;gap:24px;padding:84px 24px calc(110px + var(--safe-b)) 24px}
.core-area{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
.core-wrap{position:relative;width:min(64vh,52vw,600px);aspect-ratio:1}
.halo{position:absolute;inset:-18%;border-radius:50%;
  background:radial-gradient(circle, rgba(255,160,40,calc(.30*var(--glow))) 0%, rgba(255,120,0,calc(.12*var(--glow))) 35%, transparent 65%);
  filter:blur(18px);animation:halo calc(6s/var(--speed)) ease-in-out infinite}
#sparks{position:absolute;inset:-10%;width:120%;height:120%;pointer-events:none}
.rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rings circle{fill:none;stroke:var(--gold)}
.rings .thin{stroke-width:1;opacity:.55}
.rings .dashed{stroke-dasharray:2 7;opacity:.6}
.rings .dashed2{stroke-dasharray:14 10;opacity:.45}
.rings .ticks{stroke-width:9;stroke-dasharray:1.5 7.7;opacity:.5}
.rings .arcs{stroke-width:5;stroke-dasharray:120 40 30 40 220 55;stroke-linecap:round;stroke:var(--amber);opacity:.9}
.rings .arcs2{stroke-width:3;stroke-dasharray:60 20 10 20 160 30;stroke:var(--gold2);opacity:.85}
.rings .dots{stroke-width:3;stroke-dasharray:0 22;stroke-linecap:round;opacity:.8}
.r{transform-origin:200px 200px;transform-box:view-box}
.r1{animation:spin calc(80s/var(--speed)) linear infinite}
.r2{animation:spin calc(120s/var(--speed)) linear infinite reverse}
.r3{animation:spin calc(22s/var(--speed)) linear infinite}
.r4{animation:spin calc(60s/var(--speed)) linear infinite reverse}
.r5{animation:spin calc(14s/var(--speed)) linear infinite reverse}
.r6{animation:spin calc(40s/var(--speed)) linear infinite}

.orb{position:absolute;inset:31%;border-radius:50%;
  background:radial-gradient(circle at 50% 45%, #fff8e1 0%, #ffe09a 12%, #ffb43c 32%, #ff8a00 55%, #b34500 80%, #5a1f00 100%);
  box-shadow:0 0 calc(40px*var(--glow)) rgba(255,170,50,.9),0 0 calc(110px*var(--glow)) rgba(255,130,0,.6),0 0 calc(220px*var(--glow)) rgba(255,100,0,.35),inset 0 0 40px rgba(120,40,0,.8);
  animation:breathe calc(4s/var(--speed)) ease-in-out infinite}
.orb-shimmer{position:absolute;inset:0;border-radius:50%;overflow:hidden;mix-blend-mode:screen;opacity:.55;
  background:conic-gradient(from 0deg, transparent 0 15%, #fff3c4 20%, transparent 28% 50%, #ffd27a 58%, transparent 66% 100%);
  animation:spin calc(9s/var(--speed)) linear infinite;filter:blur(6px)}
.orb-core{position:absolute;inset:34%;border-radius:50%;background:radial-gradient(circle,#ffffff 0%,#fff1c8 40%,rgba(255,220,140,0) 75%);
  filter:blur(2px);animation:flicker calc(2.2s/var(--speed)) ease-in-out infinite}

.caption{margin-top:18px;min-height:2.6em;max-width:min(560px,90%);text-align:center;color:var(--gold2);
  letter-spacing:.06em;font-size:15px;text-shadow:0 0 10px #ff9a2a55}

.nodes-info{margin-top:4px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);min-height:1.2em;cursor:pointer;user-select:none;text-align:center;max-width:92vw}
.nodes-info:hover{color:var(--gold)}

/* states */
body.state-idle{--speed:1;--glow:1}
body.state-listening{--speed:1.6;--glow:1.25}
body.state-thinking{--speed:3.2;--glow:1.1}
body.state-speaking{--speed:2;--glow:1.45}
body.state-listening .rings .arcs2{stroke:#fff1c8}
body.state-thinking .orb{animation:breathe .9s ease-in-out infinite}
body.state-speaking .orb{animation:speak .38s ease-in-out infinite alternate}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes speak{from{transform:scale(1);filter:brightness(1)}to{transform:scale(1.07);filter:brightness(1.25)}}
@keyframes flicker{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes halo{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}

/* chat */
.chat{align-self:center;height:min(560px,72vh);display:flex;flex-direction:column;border:1px solid var(--line2);border-radius:14px;
  background:linear-gradient(180deg,rgba(18,26,36,.78),rgba(8,12,18,.78));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 0 30px rgba(255,140,0,.08), inset 0 0 20px rgba(255,160,40,.05);overflow:hidden}
.chat-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);
  font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold)}
.chat-actions{display:flex;gap:6px}
.ghost{background:none;border:1px solid var(--line);color:var(--dim);font:inherit;font-size:11px;letter-spacing:.12em;padding:4px 9px;border-radius:6px;cursor:pointer}
.ghost:hover{color:var(--gold);border-color:var(--line2)}
.chat-log{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:#ff9a2a44 transparent}
.msg{max-width:88%;padding:8px 11px;border-radius:10px;font-size:14px;white-space:pre-wrap;word-wrap:break-word}
.msg.user{align-self:flex-end;background:rgba(255,160,40,.14);border:1px solid rgba(255,160,40,.3)}
.msg.bot{align-self:flex-start;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.msg.err{align-self:center;color:#ffb0a0;font-size:12px;background:rgba(255,60,40,.08);border:1px solid rgba(255,80,60,.25)}
.msg.typing{color:var(--dim);font-style:italic}
.chat-form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.chat-form input{flex:1;min-width:0;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:8px;color:var(--txt);padding:9px 11px;font:inherit;font-size:16px}
.chat-form input:focus{outline:none;border-color:var(--gold)}
.chat-form button{background:var(--gold);color:#1b0d00;border:0;border-radius:8px;width:42px;font-size:16px;cursor:pointer}

/* controls */
.controls{position:fixed;left:0;right:0;bottom:calc(22px + var(--safe-b));z-index:6;display:flex;justify-content:center;align-items:center;gap:12px;pointer-events:none}
.talk{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:15px 30px;border-radius:999px;cursor:pointer;
  border:1px solid var(--gold);color:#1b0d00;background:linear-gradient(180deg,#ffd27a,#ff9a1f);font:600 15px/1 inherit;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 0 22px rgba(255,150,30,.55),0 0 60px rgba(255,120,0,.25);transition:transform .15s}
.talk:active{transform:scale(.97)}
.talk-icon{width:12px;height:12px;border-radius:50%;background:#1b0d00}
body.in-call .talk{background:linear-gradient(180deg,#2a1406,#160a03);color:var(--gold2)}
body.in-call .talk-icon{border-radius:2px;background:#ff5a3c;box-shadow:0 0 10px #ff5a3c}
.chat-toggle{pointer-events:auto;width:52px;height:52px;border-radius:50%;border:1px solid var(--line2);background:rgba(10,16,24,.85);font-size:20px;cursor:pointer}
.only-mobile{display:none}

/* toast */
.toast{position:fixed;left:50%;top:76px;transform:translateX(-50%);z-index:9;background:#1a0f05;border:1px solid var(--gold);color:var(--gold2);
  padding:10px 16px;border-radius:10px;font-size:13px;max-width:90vw;text-align:center;box-shadow:0 0 20px rgba(255,140,0,.3)}

/* mobile */
@media (max-width:860px){
  .stage{grid-template-columns:1fr;padding:74px 14px calc(100px + var(--safe-b)) 14px}
  .core-wrap{width:min(82vw,56vh)}
  .hud-top{padding:12px 16px}
  .brand-sub,.clock{display:none}
  .brand-mark{font-size:15px;letter-spacing:.24em}
  .hud-meta{gap:10px;font-size:10px;letter-spacing:.08em}
  .logout{padding:4px 8px}
  .controls{left:0;right:0;padding:0 14px}
  .talk{flex:0 1 auto;white-space:nowrap}
  .only-mobile{display:inline-flex;align-items:center;justify-content:center}
  .chat{position:fixed;left:10px;right:10px;bottom:calc(92px + var(--safe-b));height:58vh;z-index:7;transform:translateY(120%);opacity:0;transition:transform .3s,opacity .3s}
  body.chat-open .chat{transform:none;opacity:1}
  .talk{padding:14px 22px;font-size:13px;letter-spacing:.1em}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:0s!important;animation-iteration-count:1!important}}

/* login */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100%;padding:20px}
.login-card{position:relative;z-index:2;width:min(360px,100%);display:flex;flex-direction:column;gap:14px;padding:30px 26px;border:1px solid var(--line2);border-radius:16px;
  background:linear-gradient(180deg,rgba(18,26,36,.85),rgba(8,12,18,.85));box-shadow:0 0 40px rgba(255,140,0,.12)}
.login-card h1{text-align:center;letter-spacing:.42em;color:var(--gold);font-size:22px;text-shadow:0 0 12px #ff9a2a88}
.login-sub{text-align:center;color:var(--dim);font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-top:-6px}
.login-card label{display:flex;flex-direction:column;gap:6px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.login-card input{background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:8px;color:var(--txt);padding:11px 12px;font:inherit;font-size:16px;text-transform:none;letter-spacing:0}
.login-card input:focus{outline:none;border-color:var(--gold)}
.login-card button{margin-top:6px;padding:13px;border:0;border-radius:10px;background:linear-gradient(180deg,#ffd27a,#ff9a1f);color:#1b0d00;font:600 14px/1 inherit;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;box-shadow:0 0 22px rgba(255,150,30,.45)}
.login-orb{width:84px;height:84px;margin:0 auto 4px;border-radius:50%;position:relative;
  background:radial-gradient(circle at 50% 45%, #fff8e1 0%, #ffb43c 35%, #ff8a00 60%, #5a1f00 100%);
  box-shadow:0 0 30px rgba(255,170,50,.8),0 0 80px rgba(255,120,0,.4);animation:breathe 4s ease-in-out infinite}
.login-orb span{position:absolute;inset:-12px;border-radius:50%;border:2px dashed rgba(255,180,60,.55);animation:spin 14s linear infinite}
.login-err{display:none;color:#ffb0a0;font-size:13px;text-align:center}
.err-1 .login-err.e1,.err-wait .login-err.ewait{display:block}

.know-panel{position:fixed;z-index:30;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 32px));max-height:min(72vh,640px);display:flex;flex-direction:column;
  background:rgba(5,8,13,.94);border:1px solid var(--line2);border-radius:14px;box-shadow:0 0 40px #ff8a0033;backdrop-filter:blur(8px)}
.know-panel[hidden]{display:none}
.know-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold)}
.know-body{overflow:auto;padding:6px 16px 16px}
.know-body h4{margin:14px 0 6px;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.know-body ul{list-style:none;margin:0;padding:0}
.know-body li{padding:7px 0;border-bottom:1px solid #ffffff10;color:var(--txt);font-size:13px;line-height:1.35}
.know-body li b{font-weight:600;display:block}
.know-body li small{display:block;color:var(--dim);font-size:11.5px;word-break:break-word}
.know-reset{margin-top:14px}

.halo{pointer-events:none}
.nodes-info{position:relative;z-index:6}

/* ===== HUD v2: Panels, Gauges, Wetter, Radar (Akzent: Cyan/Türkis/Grün) ===== */
:root{--cy:#3fe0ff;--cy2:#8ff3ff;--tq:#2fe6c0;--gr:#5dff9c;--cyline:rgba(63,224,255,.22);--cyline2:rgba(63,224,255,.45)}
.stage{grid-template-columns:270px 1fr 340px}
.right-col{display:flex;flex-direction:column;gap:14px;min-height:0;align-self:stretch;justify-content:center}
.right-col .chat{align-self:stretch;height:auto;flex:1;min-height:220px;max-height:560px}
.hud-left{display:flex;flex-direction:column;gap:14px;justify-content:center;min-width:0}
.panel{position:relative;padding:12px 14px;border:1px solid var(--cyline);border-radius:10px;
  background:linear-gradient(180deg,rgba(8,22,30,.72),rgba(6,12,18,.72));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 0 24px rgba(63,224,255,.06),inset 0 0 18px rgba(63,224,255,.04);overflow:hidden}
.panel::before,.panel::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--cy);opacity:.8;pointer-events:none}
.panel::before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-top-left-radius:10px}
.panel::after{bottom:-1px;right:-1px;border-left:0;border-top:0;border-bottom-right-radius:10px}
.panel h3{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--cy2);font-weight:600;margin-bottom:8px;display:flex;justify-content:space-between;align-items:baseline}
.panel h3 small{font-size:9px;letter-spacing:.12em;color:#5d8c99;font-weight:400}
.panel .scan{position:absolute;left:0;right:0;height:40px;top:-40px;background:linear-gradient(transparent,rgba(63,224,255,.07),transparent);animation:pscan 7s linear infinite;pointer-events:none}
@keyframes pscan{to{top:110%}}
.kv{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:#7fa6b2;padding:2px 0}
.kv b{color:#d9f6ff;font-weight:600;font-variant-numeric:tabular-nums}

/* Datum */
.p-date{display:flex;gap:12px;align-items:center}
.ring-date{position:relative;width:96px;height:96px;flex:none}
.ring-date svg{width:100%;height:100%;transform:rotate(-90deg)}
.rd-track{fill:none;stroke:rgba(63,224,255,.15);stroke-width:4}
.rd-prog{fill:none;stroke:var(--cy);stroke-width:4;stroke-linecap:round;filter:drop-shadow(0 0 4px var(--cy));transition:stroke-dashoffset 1s}
.rd-ticks{fill:none;stroke:rgba(63,224,255,.35);stroke-width:5;stroke-dasharray:1 5.03}
.rd-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05}
.rd-txt span{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cy2)}
.rd-txt b{font-size:32px;color:#eafcff;text-shadow:0 0 12px var(--cy);font-weight:600}
.p-date-side{flex:1;min-width:0}
.big-time{font-size:24px;font-weight:300;letter-spacing:.06em;color:var(--gold2);text-shadow:0 0 14px rgba(255,170,50,.6);font-variant-numeric:tabular-nums;margin-bottom:4px}

/* Gauges */
.gauges{display:flex;justify-content:space-between;gap:6px}
.gauge{position:relative;width:66px;height:66px}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.g-track{fill:none;stroke:rgba(63,224,255,.12);stroke-width:7}
.g-val{fill:none;stroke:var(--cy);stroke-width:7;stroke-linecap:round;stroke-dasharray:251.3;stroke-dashoffset:251.3;transition:stroke-dashoffset 1.2s ease,stroke .6s;filter:drop-shadow(0 0 3px currentColor)}
.gauge>div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.gauge b{font-size:14px;color:#eafcff;font-variant-numeric:tabular-nums}
.gauge span{font-size:8.5px;letter-spacing:.18em;color:#7fa6b2;text-transform:uppercase}
#gMem .g-val{stroke:var(--tq)} #gDisk .g-val{stroke:#7aa8ff}
.gauge.warn .g-val{stroke:var(--gold)} .gauge.crit .g-val{stroke:#ff5a3c}
.spark{width:100%;height:38px;margin:8px 0 4px;display:block}
.gauge-lg{width:92px;height:92px}
.gauge-lg b{font-size:17px}
#gCredit .g-val{stroke:var(--gr)}
.credit-row{display:flex;gap:12px;align-items:center}
.credit-side{flex:1;min-width:0}
.bars{display:flex;align-items:flex-end;gap:5px;height:34px;margin-top:10px}
.bars i{flex:1;background:linear-gradient(180deg,var(--gr),rgba(93,255,156,.15));border-radius:2px 2px 0 0;min-height:2px;position:relative;opacity:.85}
.bars i.today{background:linear-gradient(180deg,var(--gold),rgba(255,180,60,.2))}
.bars i::after{content:attr(data-d);position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);font-size:8px;color:#5d8c99;font-style:normal}
.p-credit{padding-bottom:22px}

/* Wetter + Radar */
.p-weather{flex:none}
.w-main{display:flex;gap:10px;align-items:center}
.w-now{flex:1;min-width:0}
.w-temp{display:flex;align-items:flex-start;gap:2px;line-height:1}
.w-temp b{font-size:40px;font-weight:300;color:#eafcff;text-shadow:0 0 14px var(--cy)}
.w-temp span{font-size:16px;color:var(--cy2);margin-top:4px}
.w-desc{font-size:12px;color:var(--gold2);margin:3px 0 4px;letter-spacing:.04em}
.w-kv{font-size:10.5px;color:#7fa6b2;line-height:1.5}
.radar{position:relative;width:132px;height:132px;flex:none;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle,rgba(20,60,70,.55),rgba(4,14,18,.95) 70%);border:1px solid var(--cyline2);box-shadow:0 0 18px rgba(63,224,255,.18),inset 0 0 20px rgba(0,0,0,.8)}
.radar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.95;filter:saturate(1.3) hue-rotate(-10deg)}
.radar-rings{position:absolute;inset:0;border-radius:50%;
  background:repeating-radial-gradient(circle,transparent 0 21px,rgba(63,224,255,.25) 22px 22.6px),
  linear-gradient(transparent 49.6%,rgba(63,224,255,.25) 50%,transparent 50.4%),linear-gradient(90deg,transparent 49.6%,rgba(63,224,255,.25) 50%,transparent 50.4%)}
.radar-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(63,224,255,.45),rgba(63,224,255,.12) 30deg,transparent 70deg);animation:spin 4s linear infinite;mix-blend-mode:screen}
.radar-dot{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)}
.radar-lbl{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:8px;letter-spacing:.25em;color:var(--cy2);text-transform:uppercase}
.w-days{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:10px;border-top:1px solid var(--cyline);padding-top:8px}
.w-day{text-align:center;font-size:10.5px;color:#7fa6b2;line-height:1.35}
.w-day b{display:block;color:var(--cy2);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.w-day .ic{font-size:17px;display:block;margin:2px 0;filter:drop-shadow(0 0 4px rgba(63,224,255,.4))}
.w-day em{font-style:normal;color:#eafcff}
.w-day .rain{color:#7aa8ff;font-size:9.5px}

/* Kern: Cyan-Akzente */
.rings .cy-ticks{stroke:var(--cy);stroke-width:2;stroke-dasharray:1 11;opacity:.55}
.rings .cy-arc{stroke:var(--cy);stroke-width:1.5;stroke-dasharray:40 300 18 400;opacity:.7;filter:drop-shadow(0 0 3px #3fe0ff)}
.r7{animation:spin calc(150s/var(--speed)) linear infinite}
.r8{animation:spin calc(18s/var(--speed)) linear infinite reverse}

/* Scanlines + Rahmen */
.scanlines{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:.05;
  background:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.chat{border-color:var(--line2)}
.hud-mobile{display:none}

@media (max-width:1199px){
  .stage{grid-template-columns:1fr 340px}
  .hud-left{display:none}
}
@media (max-width:860px){
  .stage{grid-template-columns:1fr}
  .right-col{display:contents}
  .p-weather{display:none}
  .right-col .chat{max-height:none}
  .hud-mobile{display:flex;position:fixed;top:52px;left:10px;right:10px;z-index:5;justify-content:space-between;gap:6px;font-size:10.5px;letter-spacing:.06em;color:#7fa6b2}
  .hud-mobile span{flex:1;text-align:center;padding:5px 4px;border:1px solid var(--cyline);border-radius:8px;background:rgba(6,14,20,.7);white-space:nowrap}
  .hud-mobile b{color:#eafcff}
}
@media (max-height:760px) and (min-width:1200px){
  .p-credit .bars{display:none} .p-credit{padding-bottom:12px} .spark{display:none}
}

/* ===== HUD v4: Iron-HUD-Look, Energiekern, Diagramme, Bots ===== */
:root{--or:#ff9a1f;--or2:#ffb84d;--bl:#2a7fff;--tx:#cfe9f2;--dim2:#6f93a3}
body{background:#010a10}
.bg-base{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 60% 70% at 50% 46%,#0b3444 0%,#062330 30%,#03141d 62%,#010a10 100%)}
.bg-hex{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 L56 16 L56 48 L28 64 L0 48 L0 16 Z M28 64 L28 97' fill='none' stroke='%233fe0ff' stroke-width='.7'/%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(ellipse 55% 60% at 50% 48%,#000 0%,rgba(0,0,0,.5) 50%,transparent 85%);mask-image:radial-gradient(ellipse 55% 60% at 50% 48%,#000 0%,rgba(0,0,0,.5) 50%,transparent 85%)}
.bg-rays{position:fixed;inset:0;z-index:0;pointer-events:none;filter:blur(2px);
  background:conic-gradient(from 200deg at 50% 46%,transparent 0deg,rgba(63,224,255,.06) 8deg,transparent 18deg,transparent 60deg,rgba(47,230,192,.05) 70deg,transparent 80deg,transparent 160deg,rgba(63,224,255,.05) 170deg,transparent 182deg,transparent 260deg,rgba(255,154,31,.05) 268deg,transparent 280deg)}
.bg-art{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.bg-art .ring-slow{transform-origin:800px 405px;animation:spin 240s linear infinite}
.bg-art .ring-slow.rev{animation-direction:reverse;animation-duration:180s}
.bg-art .pulse{animation:bgpulse 3.5s ease-in-out infinite}
@keyframes bgpulse{0%,100%{opacity:.25}50%{opacity:1}}
.bg-vign{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(0,0,0,.65) 100%)}
.grid-overlay{display:none}
.hud-top{background:none}
.head-line{position:fixed;top:64px;left:24%;right:24%;height:1px;z-index:5;pointer-events:none;opacity:.45;background:linear-gradient(90deg,transparent,var(--cy) 20%,var(--or) 50%,var(--cy) 80%,transparent)}
.status.ok #statusText{color:var(--gr)}
.logout{border-radius:0;border-color:var(--cyline)}

/* Layout */
.stage{grid-template-columns:290px 1fr 300px;gap:22px;padding:80px 24px 22px 24px}
.hud-left,.right-col{justify-content:flex-start;gap:12px;min-height:0;overflow:hidden}
.center-col{display:flex;flex-direction:column;min-width:0;min-height:0}
.center-col .core-area{flex:1;min-height:0}
.core-wrap{width:min(58vh,46vw,600px)}
.center-bottom{display:grid;grid-template-columns:minmax(0,300px) minmax(250px,1fr) minmax(0,300px);gap:16px;align-items:end;flex:none}
.controls{bottom:calc(64px + var(--safe-b))}

/* Panels: abgeschrägte Ecken, Cyan/Orange-Leisten */
.panel{border-radius:0;border:1px solid rgba(63,224,255,.18);background:linear-gradient(160deg,rgba(8,40,54,.72),rgba(3,18,26,.72));
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));box-shadow:inset 0 0 30px rgba(63,224,255,.05);flex:none}
.panel::before{width:40px;height:2px;border:0;border-radius:0;top:0;left:0;background:var(--cy);box-shadow:0 0 8px var(--cy);opacity:1}
.panel::after{width:40px;height:2px;border:0;border-radius:0;bottom:0;right:0;background:var(--or);box-shadow:0 0 8px var(--or);opacity:1}
.panel h3{color:var(--cy);letter-spacing:.28em}
.panel h3 small{color:var(--dim2);letter-spacing:.15em;text-transform:uppercase}
.panel h3.sub{margin:10px 0 4px}
.kv{color:var(--dim2)} .kv b{color:var(--tx)}
.c-gr{color:var(--gr)!important}.c-tq{color:var(--tq)!important}.c-or{color:var(--or2)!important}
.big-time{font-family:"JetBrains Mono",Consolas,monospace;font-size:26px;font-weight:400;color:var(--or2)}
.gauge{width:72px;height:72px}
#gDisk .g-val{stroke:var(--bl)}
.p-credit{padding-bottom:12px}
.chart{display:block;width:100%;height:56px;overflow:visible}
#chTemp{height:38px} #chStau{height:46px} #chAct{height:78px}
.legend{display:flex;gap:14px;font-size:9.5px;letter-spacing:.08em;color:var(--dim2);margin:3px 0 4px;text-transform:uppercase}
.legend b{color:var(--tx);font-weight:600;text-transform:none}
.legend i{display:inline-block;width:10px;height:2px;margin-right:5px;vertical-align:middle}
.lg-cy{background:var(--cy)}.lg-or{background:var(--or)}
.ch-lbl{display:flex;justify-content:space-around;font-size:8.5px;color:var(--dim2);margin-top:2px}

/* Systeme */
.lamps{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;font-size:11px;margin-bottom:8px;color:var(--tx)}
.lamp{display:flex;align-items:center;gap:6px;min-width:0}
.lamp i{width:7px;height:7px;border-radius:50%;background:var(--gr);box-shadow:0 0 7px var(--gr);flex:none;animation:lamp 3s ease-in-out infinite}
.lamp.bad i{background:#ff5a3c;box-shadow:0 0 9px #ff5a3c;animation:lampbad 1s steps(2) infinite}
.lamp.unk i{background:#6f93a3;box-shadow:none;animation:none}
.lamp em{margin-left:auto;color:var(--dim2);font-style:normal;font-size:9.5px}
@keyframes lamp{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes lampbad{50%{opacity:.25}}

/* Pendel + Aktivität */
.stau-now{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.stau-now b{font-family:"JetBrains Mono",Consolas,monospace;font-size:26px;font-weight:400;color:var(--tx)}
.stau-now span{font-size:11px;color:var(--dim2)}
.stau-now em{margin-left:auto;font-style:normal;font-size:11px;color:var(--or2)}
.stau-now em.ok{color:var(--gr)}

/* Bots */
.bot{display:flex;gap:10px;align-items:center;padding:7px 0;border-top:1px solid rgba(63,224,255,.1)}
.bot:first-of-type{border-top:0;padding-top:0}
.bot-av{width:56px;height:56px;flex:none;overflow:visible}
.av-spin{transform-origin:32px 32px;animation:spin 16s linear infinite}
.av-spin.rev{animation-direction:reverse;animation-duration:22s}
.av-glow-or{filter:drop-shadow(0 0 3px #ff9a1f)}.av-glow-tq{filter:drop-shadow(0 0 3px #2fe6c0)}
.av-visor{filter:drop-shadow(0 0 4px #3fe0ff);animation:visor 2.6s ease-in-out infinite}
@keyframes visor{0%,100%{opacity:.95}50%{opacity:.45}}
.av-alert{filter:drop-shadow(0 0 4px #ff9a1f);animation:lamp 1.6s ease-in-out infinite}
.bot-txt{min-width:0;flex:1}
.bot-nm{font-size:12px;font-weight:600;letter-spacing:.14em}
.bot-sub{font-size:10px;color:var(--dim2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bot-st{font-size:10px;color:var(--gr);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bot-st.off{color:#ff7a5c}
.bot-num{text-align:right;font-size:10px;color:var(--dim2)}
.bot-num b{display:block;font-size:16px;color:var(--tx)}

/* Wetter */
.radar{width:118px;height:118px}
.w-temp b{font-size:44px}
.right-col .chat{min-height:180px;border-radius:0;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));border-color:rgba(63,224,255,.18);
  background:linear-gradient(160deg,rgba(8,40,54,.72),rgba(3,18,26,.72))}
.chat-head{color:var(--cy);border-color:rgba(63,224,255,.12)}
.msg{border-radius:0;font-size:13px}
.msg.bot{background:rgba(63,224,255,.06);border-color:rgba(63,224,255,.15)}
.msg.user{background:rgba(255,154,31,.1);border-color:rgba(255,154,31,.3)}
.chat-form{border-color:rgba(63,224,255,.12)}
.chat-form input{border-radius:0;border-color:var(--cyline)}
.chat-form button{border-radius:0;background:var(--or)}

/* Energiekern */
.ecore{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ec-rim{fill:none;stroke:#3fe0ff;stroke-opacity:.45;stroke-width:.8}
.ec-thin{fill:none;stroke:#3fe0ff;stroke-width:.8;opacity:.6}
.ec-tq{fill:none;stroke:#2fe6c0;stroke-width:2;stroke-dasharray:40 13 7 13;opacity:.75;filter:drop-shadow(0 0 3px #2fe6c0);transform-origin:0 0;animation:spin calc(10s/var(--speed)) linear infinite reverse}
.ec-seg{transform-origin:0 0;animation:spin calc(40s/var(--speed)) linear infinite}
.ec-orbg{transform-origin:0 0;animation:breathe calc(4s/var(--speed)) ease-in-out infinite}
.ec-orb{filter:drop-shadow(0 0 calc(20px*var(--glow)) rgba(255,154,31,.95))}
.ec-geo{fill:none;stroke:#fff3d6;stroke-width:.5;opacity:.55}
.ec-geo-rot{transform-origin:0 0;animation:spin calc(30s/var(--speed)) linear infinite}
.ec-inner{fill:none;stroke:#ffd08a;stroke-width:.7;opacity:.7}
.ec-hot{fill:#fff;filter:drop-shadow(0 0 7px #fff);animation:flicker calc(2.2s/var(--speed)) ease-in-out infinite}
body.state-speaking .ec-orbg{animation:speak .38s ease-in-out infinite alternate}
body.state-thinking .ec-orbg{animation:breathe .9s ease-in-out infinite}
.halo{inset:-8%;background:radial-gradient(circle,rgba(255,160,40,calc(.22*var(--glow))) 0%,rgba(255,120,0,calc(.08*var(--glow))) 30%,transparent 55%)}

/* Kompaktere Höhen */
@media (max-height:860px) and (min-width:1200px){
  #chTok,#tokLbl,.p-credit h3.sub{display:none}
  .p-systems .kv:nth-of-type(n+2){display:none}
}
@media (max-height:760px) and (min-width:1200px){
  .p-systems,.p-bots .bot-sub{display:none}
  #chTemp,.p-weather h3.sub{display:none}
}
@media (max-width:1199px){
  .stage{grid-template-columns:1fr 300px}
  .center-bottom{grid-template-columns:1fr 250px 1fr}
}
@media (max-width:1000px) and (min-width:861px){ .p-act{visibility:hidden} }
@media (max-width:860px){
  .center-bottom,.p-bots,.head-line{display:none}
  .controls{bottom:calc(22px + var(--safe-b))}
  .stage{padding:74px 14px calc(100px + var(--safe-b)) 14px}
  .core-wrap{width:min(82vw,56vh)}
  .right-col .chat{clip-path:none}
}

.ecore{transform:scale(1.22)}
.p-weather h3{letter-spacing:.2em;white-space:nowrap}
.panel h3 small{margin-left:8px;white-space:nowrap}
/* Mittlere Leiste: Standard 2 Spalten, Knopf darüber; große Bildschirme: Knopf in der Lücke */
.center-bottom{grid-template-columns:1fr 1fr}
.cb-gap{display:none}
@media (min-width:1200px){
  .controls{bottom:calc(172px + var(--safe-b));left:290px;right:300px}
  .center-col .core-area{padding-bottom:100px}
}
@media (min-width:1450px) and (min-height:840px){
  .center-bottom{grid-template-columns:minmax(0,300px) minmax(250px,1fr) minmax(0,300px)}
  .cb-gap{display:block}
  .controls{bottom:calc(64px + var(--safe-b));left:0;right:0}
  .center-col .core-area{padding-bottom:0}
}
@media (max-width:1199px) and (min-width:861px){
  .controls{bottom:calc(172px + var(--safe-b));left:0;right:300px}
  .center-col .core-area{padding-bottom:100px}
  .p-act{visibility:visible}
}
@media (max-width:860px){
  .stage{grid-template-columns:1fr}
  .center-col .core-area{padding-bottom:0}
  .controls{left:0;right:0}
}