/* Layout: schwebende Glas-Module über einem langsam driftenden Aurora-Feld. Rail · Projekte · Editor · Kontext-Reaktor */
:root{
  --bg:#05070c;
  --bg2:#0a0e17;
  --glass:rgba(150,170,220,.045);
  --glass2:rgba(150,170,220,.085);
  --line:rgba(170,190,255,.10);
  --line2:rgba(170,190,255,.2);
  --fg:#e9edf7;
  --muted:#8790a8;
  --dim:#5b637a;
  --c1:#78f0ff;   /* Eis-Cyan */
  --c2:#b49bff;   /* Lilac */
  --c3:#ffae8a;   /* Pfirsich */
  --ok:#5df0a6;
  --warn:#ffd166;
  --bad:#ff6f86;
  --holo:linear-gradient(110deg,var(--c1),var(--c2) 50%,var(--c3));
  --f-display:"Unbounded","Geist",system-ui,sans-serif;
  --f-body:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r:16px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:14px;line-height:1.5;overflow:hidden;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--c1);outline-offset:2px;border-radius:8px}
::selection{background:rgba(180,155,255,.35)}
.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mono{font-family:var(--f-mono)}
.num{font-variant-numeric:tabular-nums}

/* ---------- Atmosphäre ---------- */
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.38;animation:drift 28s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:52vw;height:52vw;left:-12vw;top:-18vw;background:radial-gradient(circle,#2f5bff 0,transparent 65%)}
.aurora i:nth-child(2){width:46vw;height:46vw;right:-14vw;top:10vh;background:radial-gradient(circle,#7a3cff 0,transparent 65%);animation-duration:34s}
.aurora i:nth-child(3){width:40vw;height:40vw;left:30vw;bottom:-22vw;background:radial-gradient(circle,#00c6d8 0,transparent 65%);opacity:.25;animation-duration:40s}
@keyframes drift{to{transform:translate(6vw,4vh) scale(1.15)}}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.gridlines{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(ellipse at 50% 0%,#000 0,transparent 70%)}

/* ---------- App-Shell ---------- */
.app{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:68px minmax(0,1fr);gap:14px;
  padding-block:14px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.glass{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%)}

/* eigene Ebene über den Fenstern rechts: .glass (backdrop-filter) stapelt sonst nach Reihenfolge, und die
   Tooltips (.tip) der Leiste lägen unter dem nächsten Fenster */
.rail{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 0;position:relative;z-index:20}
.orb{width:38px;height:38px;border-radius:50%;margin-bottom:14px;position:relative;
  background:conic-gradient(from 0deg,var(--c1),var(--c2),var(--c3),var(--c1));animation:spin 9s linear infinite;box-shadow:0 0 28px rgba(140,160,255,.45)}
.orb::after{content:"";position:absolute;inset:5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#1b2238,var(--bg) 70%)}
@keyframes spin{to{transform:rotate(360deg)}}
.rbtn{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--muted);position:relative;transition:.2s}
.rbtn:hover{color:var(--fg);background:var(--glass2)}
.rbtn.on{color:var(--fg);background:var(--glass2);box-shadow:inset 0 0 0 1px var(--line2)}
.rbtn.on::before{content:"";position:absolute;left:-14px;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--holo)}
.rbtn .tip{position:absolute;left:54px;white-space:nowrap;font-size:12px;padding:4px 8px;border-radius:8px;background:#151a28;border:1px solid var(--line);opacity:0;pointer-events:none;transition:.15s;z-index:50}
.rbtn:hover .tip{opacity:1}
.rail .sp{flex:1}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;background:linear-gradient(140deg,#24304f,#3a2a5e);border:1px solid var(--line2)}

.view{min-width:0;min-height:0;height:100%}
.view[hidden]{display:none!important}

/* ---------- Workspace ---------- */
.ws{display:grid;grid-template-columns:240px minmax(0,1.05fr) minmax(380px,.95fr);gap:14px;height:100%;min-height:0}
.col{min-height:0;display:flex;flex-direction:column}
.projects{padding:16px 12px;gap:12px}
.eyebrow{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.phead{display:flex;align-items:center;justify-content:space-between;padding:0 4px}
.iconbtn{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--muted);border:1px solid var(--line);transition:.2s}
.iconbtn:hover{color:var(--fg);border-color:var(--line2);background:var(--glass2)}
.search{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);color:var(--dim);font-size:13px}
.search input{background:none;border:0;outline:0;flex:1;min-width:0;color:var(--fg)}
.search kbd{font-family:var(--f-mono);font-size:10px;border:1px solid var(--line2);border-radius:5px;padding:1px 5px;color:var(--muted)}
.plist{display:flex;flex-direction:column;gap:4px;overflow:auto;flex:1;margin:0 -4px;padding:0 4px}
.pitem{display:flex;gap:10px;align-items:flex-start;text-align:left;padding:10px;border-radius:12px;border:1px solid transparent;transition:.2s;width:100%}
.pitem:hover{background:var(--glass)}
.pitem.on{background:var(--glass2);border-color:var(--line2)}
.pdot{width:9px;height:9px;border-radius:50%;margin-top:6px;flex:none;box-shadow:0 0 10px currentColor}
.pitem b{display:block;font-weight:500;font-size:13.5px}
.pitem small{color:var(--dim);font-size:11.5px}
.sys{border-top:1px solid var(--line);padding:12px 4px 0;display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--muted)}
.sys div{display:flex;align-items:center;gap:8px}
.led{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.led.w{background:var(--warn);box-shadow:0 0 8px var(--warn)}
.sys .mono{margin-left:auto;color:var(--dim);font-size:11px}

.center{padding:0;overflow:hidden}
.chead{padding:18px 22px 0;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between}
.chead h1{font-family:var(--f-display);font-weight:500;font-size:22px;letter-spacing:-.01em;margin:4px 0 0;text-wrap:balance}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:11px;padding:3px 9px;border-radius:99px;border:1px solid var(--line2);color:var(--muted)}
.tabs{display:flex;gap:2px;padding:14px 16px 0;overflow-x:auto;border-bottom:1px solid var(--line)}
.tab{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px 10px 0 0;color:var(--muted);white-space:nowrap;position:relative;font-size:13px}
.tab:hover{color:var(--fg)}
.tab.on{color:var(--fg);background:var(--glass2)}
.tab.on::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--holo);border-radius:2px}
.tab .x{opacity:0;width:16px;height:16px;display:grid;place-items:center;border-radius:4px}
.tab:hover .x{opacity:.6}
.tab.add{color:var(--dim)}
.cbody{flex:1;overflow:auto;min-height:0}
.toolbar{position:sticky;top:0;z-index:5;display:flex;gap:4px;flex-wrap:wrap;align-items:center;padding:10px 18px;background:linear-gradient(var(--bg2),rgba(10,14,23,.85));border-bottom:1px solid var(--line)}
.tb{min-width:32px;height:30px;padding:0 8px;border-radius:8px;color:var(--muted);font-size:13px;display:inline-flex;align-items:center;gap:6px}
.tb:hover{background:var(--glass2);color:var(--fg)}
.tsep{width:1px;height:18px;background:var(--line2);margin:0 4px}
.tb.ai{margin-left:auto;color:var(--fg);border:1px solid var(--line2);background:linear-gradient(110deg,rgba(120,240,255,.1),rgba(180,155,255,.12),rgba(255,174,138,.1))}
.editor{padding:26px 34px 30px;max-width:780px;outline:0;font-size:15px;line-height:1.7;color:#d9deeb;min-height:300px}
.editor h2{font-family:var(--f-display);font-weight:500;font-size:19px;letter-spacing:-.01em;margin:6px 0 10px;color:var(--fg)}
.editor h3{font-size:15px;font-weight:600;margin:18px 0 6px;color:var(--fg)}
.editor p{margin:0 0 12px}
.editor ul{margin:0 0 14px;padding-left:20px}
.editor li::marker{color:var(--c2)}
.editor blockquote{margin:0 0 14px;padding:10px 16px;border-left:2px solid var(--c1);background:rgba(120,240,255,.05);border-radius:0 10px 10px 0;color:var(--fg)}
.editor .ai-ins{background:linear-gradient(90deg,rgba(180,155,255,.13),transparent);border-radius:8px;padding:8px 12px;animation:glow 2.4s ease-out}
@keyframes glow{from{box-shadow:0 0 0 1px var(--c2),0 0 30px rgba(180,155,255,.4)}to{box-shadow:0 0 0 1px transparent}}

.files{padding:6px 22px 26px}
.files .fh{display:flex;justify-content:space-between;align-items:center;margin:8px 0 12px;gap:8px;flex-wrap:wrap}
.files .fh .btn.sm{padding:4px 10px;font-size:12px;gap:6px;min-height:0}
.files .fh .btn.sm svg{width:14px;height:14px}
.drop{border:1.5px dashed var(--line2);border-radius:14px;padding:18px;display:flex;align-items:center;gap:14px;color:var(--muted);transition:.2s;cursor:pointer;flex-wrap:wrap}
.drop:hover,.drop.over{border-color:var(--c1);background:rgba(120,240,255,.05);color:var(--fg)}
.drop .big{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--glass2);color:var(--c1)}
.drop b{color:var(--fg);font-weight:500}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:12px}
.fcard{display:flex;gap:11px;align-items:center;padding:11px;border-radius:12px;background:var(--glass);border:1px solid var(--line);position:relative;min-width:0;animation:pop .35s ease-out}
@keyframes pop{from{opacity:.4;transform:translateY(6px)}}
.fcard:hover{border-color:var(--line2)}
.ftype{width:38px;height:44px;border-radius:8px;display:grid;place-items:end center;padding-bottom:5px;font-family:var(--f-mono);font-size:9.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;flex:none;position:relative;border:1px solid currentColor;background:color-mix(in srgb,currentColor 9%,transparent)}
.ftype::before{content:"";position:absolute;top:-1px;right:-1px;width:11px;height:11px;background:var(--bg2);border-left:1px solid currentColor;border-bottom:1px solid currentColor;border-radius:0 7px 0 4px}
.fmeta{min-width:0;flex:1}
.fmeta b{display:block;font-weight:500;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fmeta small{color:var(--dim);font-size:11px}
.fdel{opacity:0;position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:var(--muted)}
.fcard:hover .fdel{opacity:1}
.fdel:hover{background:var(--glass2);color:var(--bad)}
.badge{font-family:var(--f-mono);font-size:9.5px;padding:1px 6px;border-radius:5px;letter-spacing:.04em;text-transform:uppercase}
.badge.dup{color:var(--warn);background:rgba(255,209,102,.1);border:1px solid rgba(255,209,102,.3)}
.badge.new{color:var(--c1);background:rgba(120,240,255,.08);border:1px solid rgba(120,240,255,.3)}
.badge.ok{color:var(--ok);background:rgba(93,240,166,.08);border:1px solid rgba(93,240,166,.3)}

/* ---------- Kontext-Reaktor ---------- */
.context{padding:18px;gap:16px;overflow:auto}
.reactor{position:relative;display:grid;place-items:center;padding:6px 0}
.reactor svg{width:190px;height:190px;max-width:100%}
.reactor .mid{position:absolute;text-align:center}
.reactor .mid b{font-family:var(--f-display);font-weight:500;font-size:28px;display:block;letter-spacing:-.02em}
.reactor .mid small{color:var(--muted);font-size:11px}
.ring-spin{transform-origin:100px 100px;animation:spin 30s linear infinite}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{padding:10px;border-radius:12px;border:1px solid var(--line);text-align:center}
.stat b{display:block;font-family:var(--f-display);font-weight:500;font-size:17px}
.stat small{color:var(--dim);font-size:10.5px;font-family:var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.target{display:flex;flex-direction:column;gap:6px}
.sel{appearance:none;width:100%;padding:10px 34px 10px 12px;border-radius:11px;border:1px solid var(--line2);background:var(--bg2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238790a8' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 12px center;color:var(--fg)}
.action{position:relative;width:100%;padding:16px;border-radius:14px;text-align:left;display:flex;gap:14px;align-items:center;overflow:hidden;transition:transform .2s}
.action:hover{transform:translateY(-1px)}
.action:active{transform:scale(.99)}
.action .ai{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none}
.action b{display:block;font-weight:600;font-size:14.5px}
.action small{color:var(--muted);font-size:12px}
.action.prime{background:linear-gradient(#0b0f19,#0b0f19) padding-box,var(--holo) border-box;border:1.5px solid transparent;box-shadow:0 10px 40px -12px rgba(150,140,255,.6)}
.action.prime .ai{background:var(--holo);color:#0a0d16}
.action.prime::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.08) 50%,transparent 70%);transform:translateX(-100%);animation:sheen 4.5s ease-in-out infinite}
@keyframes sheen{60%,100%{transform:translateX(100%)}}
.action.sec{border:1px solid var(--line2);background:var(--glass)}
.action.sec .ai{background:rgba(120,240,255,.1);color:var(--c1);border:1px solid rgba(120,240,255,.3)}
.history{display:flex;flex-direction:column;gap:8px}
.hrow{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--muted)}
.hrow .mono{margin-left:auto;font-size:11px;color:var(--dim)}

/* ---------- HAL-Auge: idle = schwarz mit weißem Schimmer, think = rot, exec = grün ---------- */
.hal{--s:40px;width:var(--s);height:var(--s);position:relative;display:inline-block;flex:none;border-radius:50%}
.hal .g{position:absolute;inset:-22%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 58%,rgba(255,255,255,.75) 74%,transparent 88%);filter:blur(calc(var(--s) * .08));opacity:.7;animation:spin 3.8s linear infinite}
.hal .e{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle closest-side,#26262b 0,#0d0d10 20%,#020203 45%,#020203 70%,#0b0b0d 74%,#9ea4ad 78%,#4b5058 85%,#e3e6ea 91%,#3a3e45 96%,#16181c 100%);
  box-shadow:0 3px 12px rgba(0,0,0,.75)}
.hal .e::after{content:"";position:absolute;inset:18%;border-radius:50%;opacity:0;transition:opacity .35s}
.hal .e::before{content:"";position:absolute;z-index:2;left:30%;top:22%;width:17%;height:9%;border-radius:50%;background:rgba(255,255,255,.6);transform:rotate(-35deg);filter:blur(.6px)}
.hal[data-s="think"] .e::after{opacity:1;background:radial-gradient(circle closest-side,#fff1c2 0 6%,#ff3b24 18%,#c80f0f 42%,rgba(110,0,0,.85) 68%,transparent 100%);animation:halpulse 1.15s ease-in-out infinite}
.hal[data-s="exec"] .e::after{opacity:1;background:radial-gradient(circle closest-side,#eefee0 0 6%,#41ff7e 18%,#0fae4f 42%,rgba(0,80,30,.85) 68%,transparent 100%);animation:halpulse .7s ease-in-out infinite}
.hal[data-s="think"] .g{background:radial-gradient(circle closest-side,rgba(255,45,30,.75),transparent);animation:halglow 1.15s ease-in-out infinite;opacity:1}
.hal[data-s="exec"] .g{background:radial-gradient(circle closest-side,rgba(60,255,120,.65),transparent);animation:halglow .7s ease-in-out infinite;opacity:1}
@keyframes halpulse{0%,100%{transform:scale(.8);filter:brightness(.7)}50%{transform:scale(1.08);filter:brightness(1.35)}}
@keyframes halglow{0%,100%{transform:scale(.85);opacity:.3}50%{transform:scale(1.2);opacity:1}}
#halText{transition:color .3s}
#halText[data-s="think"]{color:#ff6a5a}
#halText[data-s="exec"]{color:var(--ok)}

/* ---------- Chat ---------- */
.chat{padding:0;overflow:hidden}
.chhead{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.chhead .tt{min-width:0}
.chhead .tt b{display:block;font-family:var(--f-display);font-weight:500;font-size:15px}
.chhead .tt small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.chhead .sel{width:auto;max-width:190px;margin-left:auto;padding:7px 30px 7px 10px;font-size:12.5px}
.ctxbar{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.kv{font-size:12px;color:var(--muted);display:flex;flex-direction:column;line-height:1.3}
.kv b{color:var(--fg);font-weight:500;font-size:14px}
.kv small{color:var(--dim);font-size:11px}
.kv2{flex-direction:row;gap:12px;margin-left:auto;flex-wrap:wrap}
.kv2 .dupk b{color:var(--warn)}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line)}
.acts .action{padding:10px 12px;gap:10px;border-radius:12px}
.acts .action .ai{width:32px;height:32px;border-radius:9px}
.acts .action b{font-size:13px}
.acts .action small{font-size:11px;display:block}
.msgs{flex:1;overflow:auto;min-height:0;padding:18px 16px;display:flex;flex-direction:column;gap:16px}
.msg{display:flex;gap:10px;max-width:100%;animation:pop .3s ease-out}
.msg.u{justify-content:flex-end}
.msg.u .bub{max-width:85%;padding:10px 14px;border-radius:16px 16px 4px 16px;background:linear-gradient(135deg,rgba(120,240,255,.11),rgba(180,155,255,.15));border:1px solid var(--line2);font-size:14px}
.msg.s{justify-content:center}
.msg.s span{display:inline-flex;gap:6px;align-items:center;font-size:11.5px;color:var(--dim);padding:3px 10px;border:1px solid var(--line);border-radius:99px}
.msg.a .hal{margin-top:2px}
.msg.a .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.txt{font-size:14px;line-height:1.65;color:#d9deeb}
.txt p{margin:0 0 8px}.txt p:last-child{margin:0}
.txt ul,.txt ol{margin:0 0 8px;padding-left:20px}
.txt li{margin-bottom:4px}
.txt li::marker{color:var(--c2)}
.txt b{color:var(--fg);font-weight:600}
.think{border:1px solid rgba(255,80,60,.22);background:rgba(255,60,40,.04);border-radius:10px;font-size:12.5px;color:var(--muted)}
.think summary{cursor:pointer;padding:7px 10px;display:flex;gap:7px;align-items:center;list-style:none;color:#ff8a7c}
.think summary::-webkit-details-marker{display:none}
.think p{margin:0;padding:0 12px 10px;font-style:italic;line-height:1.55}
.tools{display:flex;flex-direction:column;gap:6px}
.tool{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-family:var(--f-mono);font-size:11.5px;padding:7px 10px;border-radius:9px;border:1px solid rgba(93,240,166,.22);background:rgba(93,240,166,.04);color:var(--muted)}
.tool .ts{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--ok);border-top-color:transparent;animation:spin .7s linear infinite;flex:none}
.tool.done .ts{border:0;animation:none;color:var(--ok);display:grid;place-items:center}
.tool .tn{color:var(--ok)}
.tool .ta{color:var(--fg);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:50%}
.tool .tr{margin-left:auto;color:var(--dim)}
.cite{font-family:var(--f-mono);font-size:10.5px;padding:1px 5px;border-radius:5px;background:rgba(120,240,255,.12);color:var(--c1);cursor:help;vertical-align:1px}
.cite.web{background:rgba(255,174,138,.12);color:var(--c3)}
.chat-empty{margin:auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;max-width:440px;padding:20px 0}
.chat-empty b{font-family:var(--f-display);font-weight:500;font-size:18px;margin-top:10px}
.chat-empty p{margin:0;color:var(--muted)}
.sugg{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:6px}
.sugg button{font-size:12.5px;padding:8px 12px;border-radius:10px;border:1px solid var(--line);color:var(--muted);transition:.15s}
.sugg button:hover{color:var(--fg);border-color:var(--line2);background:var(--glass2)}
.composer{padding:12px 14px 14px;border-top:1px solid var(--line)}
.cbox{position:relative;border:1px solid var(--line2);border-radius:14px;background:rgba(5,7,12,.55);padding:10px 12px;display:flex;flex-direction:column;gap:8px;transition:border-color .2s,box-shadow .2s}
.atpop{position:absolute;left:8px;bottom:calc(100% + 6px);z-index:40;width:min(340px,calc(100% - 16px));padding:4px;display:flex;flex-direction:column;gap:2px;background:rgba(10,14,23,.96)}
.atpop button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 10px;border-radius:10px;text-align:left;color:var(--fg)}
.atpop button.on,.atpop button:hover{background:var(--glass2)}
.atpop small{color:var(--muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.cbox:focus-within{border-color:var(--c2);box-shadow:0 0 0 4px rgba(180,155,255,.08)}
.cbox textarea{background:none;border:0;outline:0;resize:none;min-height:44px;max-height:220px;line-height:1.5;font-size:14px;width:100%}
.crow{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tog{font-size:11.5px;padding:4px 9px;border-radius:99px;border:1px solid var(--line);color:var(--dim);display:inline-flex;gap:5px;align-items:center;transition:.15s}
.tog .i{width:13px;height:13px}
.tog.on{color:var(--fg);border-color:var(--line2);background:var(--glass2)}
.sendb{margin-left:auto;width:36px;height:36px;border-radius:11px;background:var(--holo);color:#0a0d16;display:grid;place-items:center;transition:transform .15s}
.sendb:hover{transform:scale(1.05)}
.sendb.stop{background:var(--bad)}
.ws.wide{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
.ws.wide .projects{display:none}

/* ---------- Modelle ---------- */
.mv{height:100%;overflow:auto;padding:24px 26px 40px}
.mtop{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;justify-content:space-between;margin-bottom:20px}
.mtop h1{font-family:var(--f-display);font-weight:500;font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;margin:6px 0 4px;text-wrap:balance}
.mtop h1 span{background:var(--holo);-webkit-background-clip:text;background-clip:text;color:transparent}
.mtop p{color:var(--muted);margin:0;max-width:60ch}
.filters{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 18px;align-items:center;padding:18px;margin-bottom:22px}
.filters .lbl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:8px 14px;border-radius:10px;border:1px solid var(--line);color:var(--muted);font-size:13px;display:inline-flex;gap:8px;align-items:center;transition:.15s}
.chip:hover{color:var(--fg);border-color:var(--line2)}
.chip.on{color:#0a0d16;background:var(--fg);border-color:var(--fg);font-weight:500}
.chip.hw.on{background:var(--holo);border-color:transparent}
.vram{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;width:fit-content;max-width:100%}
.vram button{padding:9px 14px;font-family:var(--f-mono);font-size:12.5px;color:var(--muted);border-right:1px solid var(--line);position:relative}
.vram button:last-child{border-right:0}
.vram button:hover{color:var(--fg);background:var(--glass)}
.vram button.in{color:var(--fg);background:rgba(120,240,255,.06)}
.vram button.on{color:#0a0d16;background:var(--c1);font-weight:500}
.hint{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center}
.sec-title{display:flex;align-items:baseline;gap:12px;margin:6px 0 12px;flex-wrap:wrap}
.sec-title h2{font-family:var(--f-display);font-weight:500;font-size:17px;margin:0}
.sec-title small{color:var(--dim)}
.recs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-bottom:30px}
.rec{padding:14px;border-radius:14px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;min-width:0}
.rec::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--holo);opacity:.7}
.rec .k{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:12px}
.rec b{font-family:var(--f-display);font-weight:500;font-size:15px}
.rec p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.45}
.rec .meta{font-family:var(--f-mono);font-size:11px;color:var(--dim);margin-top:auto}
.rec.none b{color:var(--dim)}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.mcard{padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0;transition:border-color .2s,transform .2s}
.mcard:hover{border-color:var(--line2);transform:translateY(-2px)}
.mcard.active{border-color:rgba(93,240,166,.45);box-shadow:0 0 0 1px rgba(93,240,166,.2),0 12px 40px -18px rgba(93,240,166,.5)}
.mrow{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.mname{font-family:var(--f-display);font-weight:500;font-size:16px;line-height:1.25}
.mven{font-size:12px;color:var(--dim)}
.mtag{font-family:var(--f-mono);font-size:11px;color:var(--muted);background:var(--glass2);padding:3px 7px;border-radius:6px;white-space:nowrap}
.mdesc{color:var(--muted);font-size:12.8px;margin:0}
.bar{height:6px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden}
.bar i{display:block;height:100%;border-radius:6px;background:var(--holo)}
.vline{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:11px;color:var(--dim)}
.cats{display:flex;gap:5px;flex-wrap:wrap}
.cat{font-size:11px;padding:2px 8px;border-radius:99px;border:1px solid var(--line2);color:var(--muted)}
.hwrow{display:flex;gap:5px;flex-wrap:wrap}
.hw{font-family:var(--f-mono);font-size:10px;padding:2px 6px;border-radius:5px;border:1px solid var(--line);color:var(--dim);text-transform:uppercase;letter-spacing:.05em}
.hw.y{color:var(--ok);border-color:rgba(93,240,166,.3)}
.hw.e{color:var(--warn);border-color:rgba(255,209,102,.3)}
.mact{display:flex;gap:8px;margin-top:4px}
.btn{flex:1;padding:10px 12px;border-radius:11px;font-weight:500;font-size:13px;display:inline-flex;justify-content:center;align-items:center;gap:8px;border:1px solid var(--line2);transition:.15s}
.btn:hover{background:var(--glass2)}
.btn.pri{background:var(--fg);color:#0a0d16;border-color:var(--fg)}
.btn.pri:hover{background:#fff}
.btn.holo{background:var(--holo);color:#0a0d16;border-color:transparent}
.btn.okb{color:var(--ok);border-color:rgba(93,240,166,.4);background:rgba(93,240,166,.07)}
.btn[disabled]{opacity:.5;cursor:default}
.prog{flex:1;position:relative;height:38px;border-radius:11px;border:1px solid var(--line2);overflow:hidden;display:grid;place-items:center;font-family:var(--f-mono);font-size:12px}
.prog i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,rgba(120,240,255,.25),rgba(180,155,255,.3));transition:width .2s}
.prog span{position:relative}
.empty{padding:40px;text-align:center;color:var(--muted);grid-column:1/-1}

/* ---------- Stimme & Dialog ---------- */
.hal[data-s="speak"] .e::after{opacity:calc(.35 + var(--amp,.5) * .65);background:radial-gradient(circle closest-side,#fff 0 6%,#c9f6ff 18%,#8a96ff 42%,rgba(70,40,150,.75) 68%,transparent 100%);transform:scale(calc(.8 + var(--amp,.5) * .3));transition:transform .09s,opacity .09s}
.hal[data-s="speak"] .g{background:conic-gradient(from 0deg,#78f0ff,#b49bff,#ffae8a,#78f0ff);opacity:calc(.3 + var(--amp,.5) * .7);filter:blur(calc(var(--s) * .14));animation:spin 2.4s linear infinite}
#halText[data-s="speak"]{color:var(--c2)}
.crow-r{display:flex;gap:6px;align-items:center;margin-left:auto}
.dlgb{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;border:1px solid var(--line2);color:var(--fg);background:var(--glass);transition:.15s}
.dlgb:hover{border-color:var(--c1);color:var(--c1);box-shadow:0 0 0 4px rgba(120,240,255,.08)}
.mrow2{display:flex;gap:4px;margin-top:-2px}
.mbtn{font-size:11.5px;color:var(--dim);display:inline-flex;gap:5px;align-items:center;padding:3px 8px;border-radius:7px}
.mbtn .i{width:13px;height:13px}
.mbtn:hover{color:var(--fg);background:var(--glass2)}
.mbtn.on{color:var(--c2);background:rgba(180,155,255,.1)}
.msg.u .bub .i{width:13px;height:13px;vertical-align:-2px;color:var(--c1)}
.dlg{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;gap:12px;overflow:auto;
  padding:calc(16px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  background:radial-gradient(ellipse at 50% 38%,rgba(32,38,70,.6),rgba(3,5,10,.97) 70%);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);animation:fade .3s}
.dtop{width:min(1000px,100%);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dtop b{display:block;font-family:var(--f-display);font-weight:500;font-size:15px}
.dtop .sel{width:auto;margin-left:auto}
/* Die Kugel schrumpft bei wenig Höhe – nicht der Gesprächsverlauf darunter */
.dstage{position:relative;width:min(380px,82vw,max(96px,calc(100vh - 570px)));aspect-ratio:1;display:grid;place-items:center;flex:none}
.dstage canvas{position:absolute;inset:0;width:100%;height:100%}
.dstate{font-family:var(--f-display);font-weight:500;font-size:clamp(18px,2.4vw,24px);text-align:center;letter-spacing:-.01em}
.dstate small{display:block;font-family:var(--f-body);font-size:13px;color:var(--muted);font-weight:400;margin-top:4px;letter-spacing:0}
.dcap{width:min(760px,100%);min-height:60px;max-height:140px;overflow:auto;text-align:center;font-size:clamp(15px,1.8vw,19px);line-height:1.6;color:var(--fg);text-wrap:pretty}
.dcap .w{opacity:.3;transition:opacity .15s}
.dcap .w.on{opacity:1}
.dcap.user{color:var(--c1)}
/* mindestens 4 Zeilen (4 × 1,5em + Abstände + Rand oben), nie vom Flex-Layout zusammengedrückt */
.dlog{width:min(760px,100%);display:flex;flex-direction:column;gap:5px;font-size:12.5px;line-height:1.5;color:var(--dim);
  flex:none;min-height:calc(6em + 15px + 9px);max-height:max(calc(6em + 24px),30vh);overflow:auto;border-top:1px solid var(--line);padding-top:8px}
.dlog:empty{display:none}
.dlog div{display:flex;gap:10px}
.dlog b{font-weight:500;color:var(--muted);min-width:36px}
.dctl{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;width:min(760px,100%);margin-top:auto}
.dmic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);background:var(--glass2);color:var(--muted);transition:.2s;flex:none}
.dmic.on{color:#0a0d16;background:var(--c1);border-color:var(--c1);box-shadow:0 0 0 6px rgba(120,240,255,.12)}
.dmic .i{width:22px;height:22px}
.dtype{flex:1;min-width:200px;padding:12px 14px;border-radius:14px;background:rgba(5,7,12,.5)}
.dend{color:var(--bad);border-color:rgba(255,111,134,.4)}
.voices{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px}
.vcard{display:flex;gap:12px;align-items:center;padding:12px;border-radius:14px;border:1px solid var(--line);min-width:0}
.vcard.on{background:linear-gradient(var(--bg2),var(--bg2)) padding-box,var(--holo) border-box;border:1.5px solid transparent}
.vav{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,hsl(var(--h) 85% 74%),hsl(var(--h) 55% 30%))}
.vav svg{width:24px;height:24px;stroke:#0a0d16;stroke-width:2.2;stroke-linecap:round;fill:none}
.vmeta{flex:1;min-width:0}
.vmeta b{display:block;font-weight:500}
.vmeta small{display:block;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vtags{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap}
.vbtns{display:flex;gap:6px;align-items:center}
.vbtns .btn{padding:6px 10px;font-size:12px;flex:none}
.vhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.vhead p{margin:4px 0 0}
.checkrow{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted);cursor:pointer}
.checkrow input{accent-color:#b49bff;width:16px;height:16px;flex:none}
canvas.vwave{width:100%;height:64px;display:block;border-radius:10px;background:rgba(5,7,12,.5);border:1px solid var(--line)}

/* ---------- Aktionen von SAM ---------- */
.tbtn{margin-left:6px;padding:4px 10px;border-radius:8px;border:1px solid var(--line2);color:var(--c1);font-size:12px;flex:none}
.tbtn:hover{background:var(--glass2)}
.confirm{position:fixed;z-index:110;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 14px;border-radius:14px;max-width:calc(100% - 32px);width:max-content;
  background:linear-gradient(#121827,#121827) padding-box,var(--holo) border-box;border:1.5px solid transparent;box-shadow:0 24px 60px -12px rgba(0,0,0,.7);font-size:13.5px;animation:pop .25s}
.confirm>span:nth-child(2){flex:1;min-width:180px}
.msg.x{padding-left:38px}
.xcard{flex:1;min-width:0;padding:14px;border-radius:14px;border:1px solid var(--line2);background:linear-gradient(135deg,rgba(180,155,255,.09),rgba(120,240,255,.05));display:flex;flex-direction:column;gap:12px}
.xh{display:flex;gap:12px;align-items:center}
.xh b{display:block;font-weight:500;overflow-wrap:anywhere}
.xh small{color:var(--muted);font-size:12px}
.xb{display:flex;gap:8px;flex-wrap:wrap}
.xb .btn{flex:none;text-decoration:none;color:inherit;padding:8px 12px}
.xb .btn.pri{color:#0a0d16}
.xfile{cursor:pointer}
.anonb{grid-column:1/-1;display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:12px;border:1px solid var(--line);text-align:left;font-size:13px;color:var(--muted);transition:.2s;min-width:0}
.anonb:hover{border-color:var(--line2)}
.anonb .sw{width:34px;height:20px;border-radius:99px;background:rgba(255,255,255,.12);position:relative;flex:none;transition:.2s}
.anonb .sw::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--muted);transition:.2s}
.anonb b{font-weight:500}
.anonb small{margin-left:auto;color:var(--dim);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.anonb[aria-pressed="true"]{color:var(--fg);border-color:rgba(93,240,166,.45);background:rgba(93,240,166,.06)}
.anonb[aria-pressed="true"] .sw{background:var(--ok)}
.anonb[aria-pressed="true"] .sw::after{left:17px;background:#0a0d16}
.anonb[aria-pressed="true"] .i{color:var(--ok)}
.anon{background:rgba(93,240,166,.14);color:var(--ok);border-radius:4px;padding:0 3px}
.atable{display:flex;flex-direction:column;gap:5px;font-size:12.5px}
.atable div{display:grid;grid-template-columns:76px minmax(0,1fr) 16px minmax(0,auto);gap:8px;align-items:center}
.atable .orig{color:var(--muted);overflow-wrap:anywhere}
.badge .i{width:11px;height:11px;vertical-align:-1px}
.mcard.spot{border-color:var(--c1);box-shadow:0 0 0 2px var(--c1),0 0 48px -6px rgba(120,240,255,.6)}
.dlg.mini{inset:auto max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) auto;width:min(400px,calc(100% - 32px));max-height:calc(100% - 32px);padding:14px;gap:8px;align-items:stretch;border-radius:20px;
  background:linear-gradient(#0c101b,#0c101b) padding-box,var(--holo) border-box;border:1.5px solid transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 30px 80px -20px rgba(0,0,0,.85)}
.dlg.mini .dstage{width:96px;align-self:center}
.dlg.mini #dHal{--s:48px !important}
.dlg.mini .dlog,.dlg.mini>.note,.dlg.mini #dVoice,.dlg.mini #dMode,.dlg.mini #dVoices{display:none}
.dlg.mini .dtop{gap:6px}
.dlg.mini .dtop>div:first-child{margin-right:auto}
.dlg.mini .dtop .btn{padding:6px 10px;font-size:12px}
.dlg.mini .dstate{font-size:15px}
.dlg.mini .dcap{font-size:13px;min-height:0;max-height:64px}
.dlg.mini .dctl{margin-top:2px;gap:8px}
.dlg.mini .dmic{width:40px;height:40px}
.dlg.mini .dctl .btn{font-size:12px;padding:8px 10px}
.dlg.mini .dtype{flex-basis:100%;padding:9px 12px}

/* ---------- Marke ---------- */
.brand{font-family:var(--f-display);font-weight:700;font-size:11px;letter-spacing:.24em;padding-left:.24em;margin:2px 0 12px;background:var(--holo);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Training ---------- */
.myai{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-bottom:26px}
.aicard{padding:14px;display:flex;gap:12px;align-items:center;min-width:0;text-align:left;width:100%}
.aicard>div{min-width:0}
.aicard .ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--glass2);color:var(--c2);flex:none}
.aicard b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aicard small{color:var(--dim);font-size:11.5px}
.aicard .badge{margin-left:auto}
.newai{border-style:dashed;transition:border-color .2s}
.newai:hover{border-color:var(--c1)}
.newai .ico{color:var(--c1)}
.stepper{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.stp{flex:1;min-width:130px;display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;border:1px solid var(--line);color:var(--muted);text-align:left;background:var(--glass)}
.stp b{font-weight:500}
.stp .n{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line2);display:grid;place-items:center;font-family:var(--f-mono);font-size:11px;flex:none}
.stp.on{color:var(--fg);background:linear-gradient(var(--bg2),var(--bg2)) padding-box,var(--holo) border-box;border:1.5px solid transparent}
.stp.done .n{background:var(--ok);border-color:var(--ok);color:#0a0d16}
.tpanel{padding:22px;display:flex;flex-direction:column;gap:20px}
.tpanel h3{margin:0;font-family:var(--f-display);font-weight:500;font-size:17px}
.tsub{color:var(--muted);margin:-12px 0 0;font-size:13px}
.presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.pcard{padding:14px;border-radius:14px;border:1px solid var(--line);text-align:left;display:flex;flex-direction:column;gap:6px;transition:.15s}
.pcard:hover{border-color:var(--line2);background:var(--glass)}
.pcard.on{background:linear-gradient(#0d1220,#0d1220) padding-box,var(--holo) border-box;border:1.5px solid transparent}
.pcard .k{display:flex;gap:8px;align-items:center;font-weight:600}
.pcard small{color:var(--muted);font-size:12.5px;line-height:1.45}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.bases{display:flex;flex-direction:column;gap:8px}
.bcard{display:flex;gap:12px;align-items:center;padding:11px 12px;border-radius:12px;border:1px solid var(--line);text-align:left;width:100%}
.bcard:hover{border-color:var(--line2)}
.bcard.on{border-color:var(--c1);background:rgba(120,240,255,.05)}
.bcard .rad{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line2);flex:none}
.bcard.on .rad{border:5px solid var(--c1)}
.bcard b{font-weight:500}
.bcard small{color:var(--muted);display:block;font-size:12px}
.bcard .mono{margin-left:auto;font-size:11px;color:var(--dim);white-space:nowrap}
.flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.flow .node{padding:7px 11px;border-radius:10px;border:1px solid var(--line2);font-size:12px;background:var(--glass)}
.flow .arr{color:var(--dim)}
.hwbox{padding:14px;border-radius:12px;border:1px solid var(--line);display:flex;flex-direction:column;gap:9px;font-size:13px;min-width:0}
.hwbox .row{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.hwbox .row>span{color:var(--muted)}
.hwbox .row b{font-weight:500}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;align-items:start}
.tgrid .lay{box-shadow:0 8px 24px -10px rgba(0,0,0,.7)}
.checks{display:flex;flex-direction:column;gap:7px;font-size:13px}
.checks div{display:flex;gap:8px;align-items:center}
.checks .i{color:var(--ok)}
.checks .w,.checks .w .i{color:var(--warn)}
.pair{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px;align-items:start}
.pair .lay{max-width:200px}
.code{font-family:var(--f-mono);font-size:11.5px;line-height:1.6;padding:12px 14px;border-radius:12px;background:rgba(5,7,12,.6);border:1px solid var(--line);white-space:pre-wrap;word-break:break-word;color:#b8c1d8;overflow:auto;max-height:300px}
.params{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
canvas.loss{width:100%;height:220px;display:block}
.live{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.cmp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.cmp figure{margin:0;display:flex;flex-direction:column;gap:10px;align-items:center}
.cmp figcaption{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center;align-self:flex-start}
.cmp .lay.a4{max-width:340px}
.cmp .lay.sq{max-width:420px}
.navrow{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
/* Layout-Vorschau: zeigt Inhalte einer Beispiel-CI, daher eigene feste Farben */
.lay{position:relative;container-type:inline-size;background:#f5f2ea;border-radius:6px;overflow:hidden;width:100%}
.lb{position:absolute;display:flex}
.lb span{display:block}
.ci .h span{font-family:var(--f-display);font-weight:700;color:#12324f;font-size:7cqw;line-height:1.05;letter-spacing:-.02em}
.lay.wide.ci .h span{font-size:4.6cqw}
.ci .logo span{font-family:var(--f-display);font-weight:700;color:#12324f;font-size:2.6cqw;letter-spacing:.14em}
.lay.wide.ci .logo span{font-size:1.8cqw}
.ci .img{border-radius:1.2cqw}
.ci .txt{background:repeating-linear-gradient(to bottom,rgba(18,50,79,.3) 0 1cqw,transparent 1cqw 2.4cqw)}
.ci .cta{background:#e8a93a;border-radius:99px;align-items:center;justify-content:center}
.ci .cta span,.base .cta span{font-size:2.4cqw;font-weight:600;color:#12324f}
.lay.wide .cta span{font-size:1.6cqw}
.ci .band{background:#12324f}
.lay.base{background:#fff}
.base .h span{font-family:Georgia,"Times New Roman",serif;color:#c0392b;font-size:8cqw;text-align:center;width:100%;line-height:1}
.base .img{background:#5b8def}
.base .txt{background:repeating-linear-gradient(to bottom,rgba(0,0,0,.35) 0 1.4cqw,transparent 1.4cqw 2.2cqw)}
.base .cta{background:#9b59b6;align-items:center;justify-content:center}
.base .cta span{color:#fff}
.base .logo{border:1px dashed #999;align-items:center;justify-content:center}
.base .logo span{font-size:2.4cqw;color:#2c3e50}

/* ---------- Einstellungen ---------- */
.sv{height:100%;overflow:auto;padding:24px 26px 40px}
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;margin-top:20px}
.sbox{padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.sbox h3{margin:0;font-family:var(--f-display);font-weight:500;font-size:15px}
.sbox p{margin:0;color:var(--muted);font-size:13px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;color:var(--muted)}
.inp{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line2);background:var(--bg2);font-family:var(--f-mono);font-size:12.5px;outline:0}
.inp:focus{border-color:var(--c1)}
.mode{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mode button{text-align:left;padding:14px;border-radius:12px;border:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.mode button b{font-weight:600}
.mode button small{color:var(--muted);font-size:12px}
.mode button.on{border-color:transparent;background:linear-gradient(var(--bg2),var(--bg2)) padding-box,var(--holo) border-box;border:1.5px solid transparent}
.users{display:flex;flex-direction:column;gap:6px}
.urow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);font-size:13px}
.urow .mono{margin-left:auto;font-size:11px;color:var(--dim)}
.lock{opacity:.45;pointer-events:none}

/* ---------- Overlays ---------- */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(3,5,10,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px max(16px,env(safe-area-inset-right,0px)) 20px max(16px,env(safe-area-inset-left,0px));animation:fade .2s}
@keyframes fade{from{opacity:0}}
.modal{width:min(980px,100%);max-height:100%;display:flex;flex-direction:column;background:rgba(12,16,27,.92);border:1px solid var(--line2);border-radius:20px;overflow:hidden;box-shadow:0 40px 120px -20px rgba(0,0,0,.8),0 0 0 1px rgba(180,155,255,.08)}
.mhead{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid var(--line)}
.mhead h2{margin:0;font-family:var(--f-display);font-weight:500;font-size:17px}
.mhead small{color:var(--muted)}
.mhead .iconbtn{margin-left:auto}
.mbody{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:0;flex:1;overflow:hidden}
.steps{padding:18px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:4px;overflow:auto}
.step{display:flex;gap:12px;padding:10px;border-radius:12px;align-items:flex-start;color:var(--dim);transition:.3s}
.step .st{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line2);display:grid;place-items:center;flex:none;font-family:var(--f-mono);font-size:10px}
.step b{display:block;font-weight:500;font-size:13px}
.step small{font-size:11.5px}
.step.run{color:var(--fg);background:var(--glass2)}
.step.run .st{border-color:var(--c1);border-top-color:transparent;animation:spin .8s linear infinite}
.step.done{color:var(--fg)}
.step.done .st{background:var(--ok);border-color:var(--ok);color:#0a0d16}
.step.done small{color:var(--muted)}
.out{display:flex;flex-direction:column;min-height:0;min-width:0}
.otabs{display:flex;gap:4px;padding:12px 16px 0;border-bottom:1px solid var(--line)}
.otabs button{padding:8px 12px;border-radius:9px 9px 0 0;color:var(--muted);font-size:13px}
.otabs button.on{color:var(--fg);background:var(--glass2)}
.term{flex:1;overflow:auto;padding:16px 18px;font-family:var(--f-mono);font-size:12px;line-height:1.7;color:#b8c1d8;white-space:pre-wrap;word-break:break-word;min-height:260px}
.term .t-ok{color:var(--ok)} .term .t-w{color:var(--warn)} .term .t-c{color:var(--c1)} .term .t-p{color:var(--c2)} .term .t-d{color:var(--dim)}
.xml .tg{color:var(--c2)} .xml .at{color:var(--c1)} .xml .av{color:var(--c3)}
.report{padding:18px;overflow:auto;display:flex;flex-direction:column;gap:14px}
.rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.src{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:11px;border:1px solid var(--line);font-size:13px}
.src .mono{color:var(--c1);font-size:11px}
.mfoot{display:flex;gap:10px;align-items:center;padding:14px 22px;border-top:1px solid var(--line);flex-wrap:wrap}
.mfoot .btn{flex:none}
.mfoot .sp{flex:1}
.note{font-size:11.5px;color:var(--dim)}
canvas.space{width:100%;height:260px;display:block;border-radius:14px;background:radial-gradient(ellipse at center,rgba(120,240,255,.06),transparent 70%)}
.qa{display:flex;gap:8px}
.qa .inp{font-family:var(--f-body);font-size:13px}
.hit{padding:10px 12px;border-radius:11px;border:1px solid var(--line);font-size:12.5px;display:flex;flex-direction:column;gap:4px;animation:pop .3s}
.hit .mono{font-size:11px;color:var(--dim);display:flex;justify-content:space-between;gap:10px}

.palette{width:min(620px,100%);align-self:start;margin-top:10vh;background:rgba(12,16,27,.95);border:1px solid var(--line2);border-radius:18px;overflow:hidden;box-shadow:0 40px 120px -20px rgba(0,0,0,.8)}
.palette .search{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:16px 18px;font-size:15px}
.plist2{max-height:50vh;overflow:auto;padding:8px}
.pi{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;width:100%;text-align:left;color:var(--muted)}
.pi.on,.pi:hover{background:var(--glass2);color:var(--fg)}
.pi small{margin-left:auto;font-family:var(--f-mono);font-size:11px;color:var(--dim)}

.toast{position:fixed;z-index:100;bottom:calc(22px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);padding:11px 16px;border-radius:12px;background:#121827;border:1px solid var(--line2);display:flex;gap:10px;align-items:center;font-size:13px;box-shadow:0 20px 50px -10px rgba(0,0,0,.6);animation:pop .25s;max-width:calc(100% - 32px)}
.toast .i{color:var(--ok)}

/* ---------- Responsiv ---------- */
@media (max-width:1280px){
  .ws{grid-template-columns:200px minmax(0,1fr) minmax(340px,1fr)}
}
@media (max-width:1060px){
  .ws,.ws.wide{grid-template-columns:minmax(0,1fr);overflow:auto;height:100%;align-content:start}
  .ws.wide .projects{display:flex}
  .ws>.col{min-height:auto}
  .center{height:80vh}
  .chat{height:88vh}
  #chatWide{display:none}
  .projects .plist{flex-direction:row;overflow-x:auto}
  .pitem{min-width:200px}
  .sys{display:none}
}
@media (max-width:820px){
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .rail{grid-row:2;flex-direction:row;justify-content:space-around;padding:6px 10px}
  .rail .orb,.rail>.hal,.rail .brand,.rail .sp,.rbtn .tip{display:none}
  .acts,.two,.pair,.cmp{grid-template-columns:1fr}
  .tpanel{padding:16px}
  .chhead .sel{max-width:130px}
  .rbtn.on::before{left:12px;right:12px;top:auto;bottom:-6px;width:auto;height:3px}
  .ws{grid-template-columns:minmax(0,1fr)}
  .projects .plist{flex-direction:row;overflow-x:auto}
  .pitem{min-width:200px}
  .sys{display:none}
  .center{height:auto;min-height:70vh}
  .cbody{overflow:visible}
  .editor{padding:20px}
  .mbody{grid-template-columns:minmax(0,1fr);overflow:auto}
  .steps{border-right:0;border-bottom:1px solid var(--line)}
  .filters{grid-template-columns:minmax(0,1fr)}
  .mv,.sv{padding:18px 4px 30px}
  .mode{grid-template-columns:1fr}

}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}