/* ============================================================
   COBALT — Web Desktop. Stylesheet.
   Designsprache: Glas-Panels, Cyan-Akzent,
   Blur-Fenster, Boot-Screen) + 10% mehr Transparenz + metallischer.
   ============================================================ */

:root{
  /* Basis-Tokens */
  --bg-0:#05060c; --bg-1:#0a0c16; --bg-2:#10131f;
  --panel-rgb:16,19,31;            /* Panel-Grundfarbe */
  --ui-alpha:.76;                  /* +10% Transparenz */
  --panel:rgba(var(--panel-rgb),var(--ui-alpha));
  --panel-solid:#10131f;
  --line:#2a3252; --line-soft:#1a1f33;
  --text:#dfe5f4; --text-dim:#8b93ad; --text-faint:#5a6178;
  --accent:#35e7e4; --accent-2:#7aa2ff; --warn:#ff4d5e; --ok:#6ee787;
  --shadow:0 18px 50px rgba(0,0,0,.6);
  --blur:16px;
  /* Metallisch */
  --metal-sheen:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.018) 42%,rgba(0,0,0,.07));
  --metal-edge:rgba(255,255,255,.085);
  --metal-edge-lo:rgba(0,0,0,.45);
  --wall-a:#0b1430; --wall-b:#050811; --wall-glow:#163b6b;
}
html[data-theme="light"]{
  --bg-0:#eef1f8; --bg-1:#e6eaf4; --bg-2:#dfe4f1;
  --panel-rgb:255,255,255;
  --panel-solid:#ffffff;
  --line:#c7cee0; --line-soft:#d8deec;
  --text:#1a2238; --text-dim:#566080; --text-faint:#8089a3;
  --accent:#0d8f8c; --accent-2:#3a63c8; --warn:#cc2c3c; --ok:#1f9a4f;
  --shadow:0 14px 40px rgba(40,55,100,.18);
  --metal-sheen:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.35) 45%,rgba(0,0,0,.04));
  --metal-edge:rgba(255,255,255,.9);
  --metal-edge-lo:rgba(40,55,100,.12);
  --wall-a:#cdd7ef; --wall-b:#aab6d8; --wall-glow:#e8eefb;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:"Segoe UI",system-ui,-apple-system,sans-serif;background:var(--bg-0);color:var(--text);
  overflow:hidden;-webkit-font-smoothing:antialiased;transition:background .5s,color .35s}
.mono{font-family:ui-monospace,"Cascadia Mono","SFMono-Regular",Consolas,monospace}
button{font-family:inherit}
::selection{background:color-mix(in srgb,var(--accent) 35%,transparent)}

/* ---------- Desktop / Wallpaper (ersetzt die Three.js-Szene) ---------- */
#desktop{position:fixed;inset:0;overflow:hidden;
  background:
    radial-gradient(1200px 800px at 78% -10%, color-mix(in srgb,var(--wall-glow) 60%,transparent), transparent 60%),
    radial-gradient(900px 700px at 12% 120%, color-mix(in srgb,var(--wall-glow) 40%,transparent), transparent 55%),
    linear-gradient(160deg,var(--wall-a),var(--wall-b));}
#desktop::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb,var(--accent) 5%,transparent) 1px,transparent 1px),
                   linear-gradient(90deg,color-mix(in srgb,var(--accent) 5%,transparent) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(80% 80% at 50% 40%,#000,transparent)}
.aurora{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(80px);opacity:.5;mix-blend-mode:screen}
.aurora.a{background:radial-gradient(circle,var(--accent),transparent 60%);top:-22vmax;right:-12vmax;animation:drift1 28s ease-in-out infinite}
.aurora.b{background:radial-gradient(circle,var(--accent-2),transparent 60%);bottom:-24vmax;left:-14vmax;animation:drift2 34s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vmax,5vmax) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(7vmax,-4vmax) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.aurora{animation:none}}

/* ---------- Taskbar ---------- */
#taskbar{position:fixed;top:0;left:50%;transform:translateX(-50%);width:var(--tb-width,100%);height:var(--tb-h,46px);z-index:9000;display:flex;align-items:center;gap:6px;
  padding:0 12px;background:rgba(var(--tb-rgb,var(--panel-rgb)),var(--tb-alpha,var(--ui-alpha)));backdrop-filter:blur(var(--tb-blur,var(--blur)));-webkit-backdrop-filter:blur(var(--tb-blur,var(--blur)));
  border-bottom:1px solid var(--line);color:var(--tb-text,inherit);
  box-shadow:inset 0 1px 0 var(--metal-edge),0 6px 24px rgba(0,0,0,.35)}
:root[data-tb-pos="bottom"] #taskbar{top:auto;bottom:0;border-bottom:none;border-top:1px solid var(--line)}
:root[data-tb-pos="bottom"] #launcher{top:auto;bottom:calc(var(--tb-h,46px) + 8px)}
/* Taskleisten-Schriftfarbe (nur wenn gesetzt) auf alle Textelemente anwenden */
:root[style*="--tb-text"] #taskbar,
:root[style*="--tb-text"] #taskbar .tb-btn,
:root[style*="--tb-text"] #taskbar .tb-clock,
:root[style*="--tb-text"] #taskbar #brand .mark,
:root[style*="--tb-text"] #taskbar #brand{color:var(--tb-text)}
#taskbar::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--metal-sheen);opacity:.6}
#brand{display:flex;align-items:baseline;gap:8px;margin-right:8px;position:relative}
#brand .mark{font-weight:800;letter-spacing:.22em;font-size:14px;color:var(--accent);
  text-shadow:0 0 14px color-mix(in srgb,var(--accent) 60%,transparent)}
#brand .sub{font-size:10px;letter-spacing:.18em;color:var(--text-faint);text-transform:uppercase}
.tb-spacer{flex:1}
.tb-btn{height:30px;padding:0 11px;border-radius:7px;cursor:pointer;color:var(--text-dim);
  border:1px solid transparent;background:transparent;font-size:12px;letter-spacing:.03em;
  display:inline-flex;align-items:center;gap:7px;transition:.15s;white-space:nowrap;position:relative}
.tb-btn:hover{background:var(--bg-2);color:var(--text);border-color:var(--line-soft);
  box-shadow:inset 0 1px 0 var(--metal-edge)}
.tb-btn.active{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent);
  background:color-mix(in srgb,var(--accent) 8%,transparent)}
.tb-btn .dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.start-main{margin-right:6px;font-weight:700;color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 38%,transparent)!important;
  background:color-mix(in srgb,var(--accent) 12%,transparent)!important;letter-spacing:.02em}
.start-main:hover{background:color-mix(in srgb,var(--accent) 22%,transparent)!important;color:var(--accent)}
.start-main .start-ico{font-size:15px;line-height:1;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 80%,transparent))}
#tasklist{display:flex;gap:5px;align-items:center;overflow:hidden}
.task-pill{max-width:170px;overflow:hidden;text-overflow:ellipsis}
.tb-clock{font-size:11.5px;color:var(--text-dim);letter-spacing:.04em;min-width:118px;text-align:right}
.tb-user{font-size:11px;color:var(--text-faint);letter-spacing:.03em;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.toggle{position:relative;width:46px;height:24px;border-radius:20px;cursor:pointer;background:var(--bg-2);
  border:1px solid var(--line);transition:.2s;flex:0 0 auto;box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 10px var(--accent);transition:.25s}
html[data-theme="light"] .toggle::after{transform:translateX(22px)}

/* ---------- App-Launcher (Startmenü) ---------- */
#launcher{position:fixed;left:12px;top:54px;z-index:9500;width:300px;
  background:var(--panel);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow),inset 0 1px 0 var(--metal-edge);
  padding:14px;opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;
  transition:opacity .16s,transform .16s}
#launcher.open{opacity:1;transform:none;pointer-events:auto}
#launcher h3{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint);margin:0 0 10px;font-weight:700}
.app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.app-tile{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 6px;border-radius:10px;
  border:1px solid transparent;cursor:pointer;transition:.13s;background:transparent}
.app-tile:hover{background:var(--bg-2);border-color:var(--line-soft);box-shadow:inset 0 1px 0 var(--metal-edge)}
.app-tile .ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:19px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 22%,var(--bg-2)),var(--bg-1));
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
  box-shadow:inset 0 1px 0 var(--metal-edge),0 4px 10px rgba(0,0,0,.35);color:var(--accent)}
.app-tile .nm{font-size:11px;color:var(--text-dim);letter-spacing:.02em;text-align:center}

/* ---------- Fenster (metallisch verstärkt) ---------- */
.window{position:fixed;z-index:50;min-width:300px;min-height:150px;display:flex;flex-direction:column;
  background:var(--panel);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--line);border-radius:var(--win-radius,12px);
  box-shadow:var(--shadow),inset 0 1px 0 var(--metal-edge),inset 0 -1px 0 var(--metal-edge-lo);
  overflow:hidden;opacity:0;transform:scale(.97);pointer-events:none;transition:opacity .16s,transform .16s}
:root[data-win-style="flat"] .window{backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 8px 30px rgba(0,0,0,.35)}
:root[data-win-style="sharp"] .window{border-radius:0}
:root[data-win-style="flat"] #taskbar{backdrop-filter:none;-webkit-backdrop-filter:none}
.window.open{opacity:1;transform:scale(1);pointer-events:auto}
.window.max{border-radius:0}
.window.min{opacity:0;transform:scale(.9);pointer-events:none}
.titlebar{height:38px;flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:0 8px 0 13px;cursor:grab;
  user-select:none;position:relative;border-bottom:1px solid var(--line-soft);
  background:var(--metal-sheen),linear-gradient(180deg,var(--bg-2),transparent)}
.titlebar::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--metal-edge)}
.titlebar:active{cursor:grabbing}
.titlebar .t-ico{width:9px;height:9px;border-radius:2px;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.titlebar .t-name{font-size:12.5px;letter-spacing:.04em;font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wbtns{display:flex;gap:4px}
.wbtn{width:26px;height:24px;border:none;border-radius:6px;cursor:pointer;background:transparent;color:var(--text-dim);
  font-size:13px;line-height:1;display:grid;place-items:center;transition:.12s}
.wbtn:hover{background:var(--bg-2);color:var(--text);box-shadow:inset 0 1px 0 var(--metal-edge)}
.wbtn.close:hover{background:var(--warn);color:#fff}
.content{flex:1;overflow:auto;padding:14px}
.content.flush{padding:0}
.resize-h{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize}
.resize-h::after{content:"";position:absolute;right:3px;bottom:3px;width:7px;height:7px;
  border-right:2px solid var(--text-faint);border-bottom:2px solid var(--text-faint)}

/* ---------- Allgemeine UI-Bausteine ---------- */
h3.sec{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin:0 0 10px;font-weight:700}
.field{margin-bottom:10px}
.field label{display:block;font-size:11px;color:var(--text-dim);margin-bottom:4px;letter-spacing:.03em}
input,select,textarea{width:100%;background:var(--bg-1);color:var(--text);border:1px solid var(--line);border-radius:7px;
  padding:8px 10px;font-size:12.5px;font-family:inherit;transition:border-color .15s,box-shadow .15s;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
textarea{resize:vertical;min-height:74px;line-height:1.5}
.row{display:flex;gap:8px}.row>*{flex:1}
.btn{border:1px solid var(--line);color:var(--text);padding:8px 14px;border-radius:7px;cursor:pointer;
  font-size:12px;letter-spacing:.03em;transition:.15s;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg-2) 70%,#fff 0%),var(--bg-1));
  box-shadow:inset 0 1px 0 var(--metal-edge),0 1px 2px rgba(0,0,0,.3)}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn:active{box-shadow:inset 0 2px 4px rgba(0,0,0,.4)}
.btn.primary{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 28%,var(--bg-2)),
  color-mix(in srgb,var(--accent) 12%,var(--bg-1)));border-color:color-mix(in srgb,var(--accent) 50%,transparent);color:var(--text)}
.btn.primary:hover{color:#fff}
.btn.ghost{background:transparent;box-shadow:none}
.btn.danger:hover{border-color:var(--warn);color:var(--warn)}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}
.stats{font-size:10.5px;color:var(--text-faint);letter-spacing:.03em;margin:0 0 10px}
kbd{font-family:ui-monospace,monospace;font-size:10.5px;background:var(--bg-2);border:1px solid var(--line);
  border-bottom-width:2px;border-radius:5px;padding:1px 6px;color:var(--text)}
.content::-webkit-scrollbar{width:10px;height:10px}
.content::-webkit-scrollbar-track{background:transparent}
.content::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px;border:2px solid transparent;background-clip:padding-box}
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}

/* ---------- Toast ---------- */
#toasts{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--panel);backdrop-filter:blur(var(--blur));border:1px solid var(--line);border-radius:9px;
  padding:9px 16px;font-size:12px;color:var(--text);box-shadow:var(--shadow),inset 0 1px 0 var(--metal-edge);
  opacity:0;transform:translateY(8px);transition:.2s}
.toast.on{opacity:1;transform:none}

/* ---------- Terminal ---------- */
.term{display:flex;flex-direction:column;height:100%;background:rgba(3,5,12,.55);font-family:ui-monospace,"Cascadia Mono",Consolas,monospace}
html[data-theme="light"] .term{background:rgba(245,247,252,.6)}
.term-out{flex:1;overflow:auto;padding:12px 14px;font-size:12.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.term-out .ps{color:var(--accent)}
.term-out .ps2{color:var(--accent-2)}
.term-out .err{color:var(--warn)}
.term-out .ok{color:var(--ok)}
.term-out .dim{color:var(--text-faint)}
.term-line{display:flex;align-items:baseline;gap:8px;white-space:pre-wrap;word-break:break-word}
.term-line .prompt{color:var(--accent);white-space:nowrap}
.term-out .prompt{color:var(--accent)}
.term-in{flex:1;min-width:4ch;background:transparent;border:none;box-shadow:none;color:var(--text);font-family:inherit;font-size:12.5px;padding:0;caret-color:var(--accent)}
.term-in:focus{outline:none;box-shadow:none;border:none}

/* ---------- Datei-Explorer ---------- */
.fx-bar{display:flex;gap:8px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line-soft);background:var(--metal-sheen)}
.fx-path{flex:1;font-size:12px;color:var(--text-dim);font-family:ui-monospace,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-list{padding:8px;display:flex;flex-direction:column;gap:4px}
.fx-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;
  border:1px solid transparent;transition:.12s}
.fx-item:hover{background:var(--bg-1);border-color:var(--line-soft)}
.fx-item .fi{width:22px;text-align:center}
.fx-item .fn{flex:1;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-item .fm{font-size:10.5px;color:var(--text-faint)}

/* ---------- Editor ---------- */
.ed-wrap{display:flex;flex-direction:column;height:100%}
.ed-bar{display:flex;gap:8px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line-soft);background:var(--metal-sheen)}
.ed-name{flex:1;font-size:12px;color:var(--text-dim)}
.ed-area{flex:1;width:100%;border:none;border-radius:0;box-shadow:none;resize:none;background:transparent;
  font-family:ui-monospace,monospace;font-size:13px;line-height:1.55;padding:14px}
.ed-area:focus{outline:none;box-shadow:none;border:none}

/* ---------- Settings / About ---------- */
.kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.kv .k{color:var(--text-faint)}
.kv .v{color:var(--text);font-family:ui-monospace,monospace}
.rangerow{display:flex;align-items:center;gap:10px}
.rangerow .val{font-family:ui-monospace,monospace;font-size:12px;color:var(--accent);min-width:42px;text-align:right}
input[type=range]{-webkit-appearance:none;appearance:none;height:4px;background:var(--line);border-radius:4px;padding:0;box-shadow:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 12px var(--accent);cursor:pointer;border:none}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 12px var(--accent);cursor:pointer;border:none}
.ascii{font-family:ui-monospace,monospace;font-size:11px;line-height:1.2;color:var(--accent);
  text-shadow:0 0 10px color-mix(in srgb,var(--accent) 50%,transparent);white-space:pre;margin:0}

/* ---------- Login / Lock-Screen ---------- */
#auth{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;
  background:
    radial-gradient(1000px 700px at 70% -10%, color-mix(in srgb,var(--wall-glow) 70%,transparent), transparent 60%),
    linear-gradient(160deg,var(--wall-a),var(--wall-b));
  transition:opacity .5s}
#auth.gone{opacity:0;pointer-events:none}
.auth-card{width:340px;background:var(--panel);backdrop-filter:blur(calc(var(--blur) + 4px));-webkit-backdrop-filter:blur(calc(var(--blur) + 4px));
  border:1px solid var(--line);border-radius:16px;padding:30px 28px;
  box-shadow:var(--shadow),inset 0 1px 0 var(--metal-edge)}
.auth-card .mark{font-weight:800;letter-spacing:.3em;font-size:20px;color:var(--accent);text-align:center;
  text-shadow:0 0 22px color-mix(in srgb,var(--accent) 60%,transparent)}
.auth-card .sub{text-align:center;font-size:10px;letter-spacing:.2em;color:var(--text-faint);text-transform:uppercase;margin-top:8px;margin-bottom:24px}
.auth-card .field{margin-bottom:14px}
.auth-card .opt{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-dim);margin:4px 0 18px}
.auth-card .opt input{width:auto;box-shadow:none}
.auth-msg{font-size:11.5px;min-height:16px;margin-top:12px;text-align:center;color:var(--warn)}
.auth-hint{font-size:10.5px;color:var(--text-faint);text-align:center;margin-top:16px;line-height:1.5}

/* ---------- Boot ---------- */
#boot{position:fixed;inset:0;z-index:10001;display:grid;place-items:center;background:var(--bg-0);transition:opacity .6s}
#boot.gone{opacity:0;pointer-events:none}
#boot .b-mark{font-weight:800;letter-spacing:.3em;font-size:18px;color:var(--accent);text-shadow:0 0 24px var(--accent);text-align:center}
#boot .b-sub{margin-top:12px;font-size:11px;letter-spacing:.16em;color:var(--text-faint);text-transform:uppercase;text-align:center}
#boot .b-bar{width:200px;height:3px;border-radius:3px;background:var(--bg-2);margin:18px auto 0;overflow:hidden}
#boot .b-bar i{display:block;height:100%;width:0;background:var(--accent);box-shadow:0 0 10px var(--accent);transition:width .3s}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
#boot .b-sub{animation:pulse 1.4s infinite}

/* ---------- Kontextmenü ---------- */
.ctxmenu{position:fixed;z-index:9800;min-width:172px;padding:6px;
  background:var(--panel);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow),inset 0 1px 0 var(--metal-edge);
  opacity:0;transform:scale(.97);transform-origin:top left;transition:opacity .12s,transform .12s}
.ctxmenu.on{opacity:1;transform:none}
.ctx-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:7px;cursor:pointer;
  font-size:12.5px;color:var(--text);letter-spacing:.02em;transition:.1s}
.ctx-item .ci{width:16px;text-align:center;color:var(--text-dim)}
.ctx-item:hover{background:var(--bg-2);box-shadow:inset 0 1px 0 var(--metal-edge)}
.ctx-item.danger:hover{background:color-mix(in srgb,var(--warn) 22%,var(--bg-2));color:#fff}
.ctx-sep{height:1px;margin:5px 6px;background:var(--line-soft)}
.ctx-head{padding:4px 10px 7px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}

/* ---------- Benutzerverwaltung ---------- */
.usr-list{padding:12px;display:flex;flex-direction:column;gap:10px}
.empty-note{color:var(--text-faint);font-size:12px;padding:18px;text-align:center}
.usr-card{border:1px solid var(--line);border-radius:10px;background:var(--bg-1);padding:11px 12px;
  box-shadow:inset 0 1px 0 var(--metal-edge)}
.usr-head{display:flex;align-items:center;gap:8px}
.usr-name{flex:1;font-weight:600;font-size:13px}
.usr-you{color:var(--text-faint);font-weight:400;font-size:11px}
.usr-role{font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:2px 9px;border-radius:20px;
  border:1px solid var(--line-soft);color:var(--text-dim)}
.usr-role.admin{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  background:color-mix(in srgb,var(--accent) 10%,transparent)}
.usr-meta{font-size:10.5px;color:var(--text-faint);margin:5px 0 9px}
.usr-actions .btn{padding:5px 10px;font-size:11px}

/* ---------- The Mainframe (Dashboard) ---------- */
.mfd{padding:16px;overflow:auto;height:100%}
.mfd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.mfd-rank{font-weight:800;letter-spacing:.04em;font-size:16px;color:#3df0a0}
.mfd-sub{font-size:11px;color:var(--text-dim);margin-top:3px}
.mfd-res{display:flex;gap:14px}
.mfd-r{text-align:right;font-size:11px;color:var(--text-faint)}
.mfd-r b{display:block;font-size:16px;font-family:ui-monospace,monospace}
.mfd-r b.ok{color:var(--ok)} .mfd-r b.ps2{color:var(--accent-2)}
.mfd-open{width:100%;margin-top:14px}
.mfd-prog{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line-soft)}
.mfd-pn{flex:1;font-size:12.5px}
.mfd-pl{font-size:11px;color:var(--text-dim);font-family:ui-monospace,monospace;min-width:60px;text-align:right}
.mfd-prog .btn{padding:5px 10px;font-size:11px}
.mfd-log{max-height:130px;overflow:auto}
.mfd-le{font-size:11px;color:var(--text-dim);font-family:ui-monospace,monospace;padding:2px 0}
.mfd-lr{display:flex;gap:8px;align-items:center;font-size:12px;padding:4px 0;border-bottom:1px solid var(--line-soft)}
.mfd-lr .mfd-ln{flex:1;font-weight:600}
.mfd-lr b{font-family:ui-monospace,monospace;color:var(--accent)}
.mfd-lr .dim{color:var(--text-faint);font-size:11px}

/* ---------- netvisualizer (Graphen-Spiel) ---------- */
.nvx{display:flex;flex-direction:column;height:100%}
.nvx-bar{display:flex;align-items:center;gap:12px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--metal-sheen)}
.nvx-tabs{display:flex;gap:4px}
.nvx-tab{height:28px;padding:0 12px;border-radius:7px;border:1px solid transparent;background:transparent;
  color:var(--text-dim);font-size:12px;cursor:pointer;transition:.13s}
.nvx-tab:hover{background:var(--bg-2);color:var(--text)}
.nvx-tab.active{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent);
  background:color-mix(in srgb,var(--accent) 10%,transparent)}
.nvx-res{margin-left:auto;font-size:11.5px;color:var(--text-dim)}
.nvx-res .ok{color:var(--ok)} .nvx-res .ps2{color:var(--accent-2)}
.nvx-body{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:12px}
.nvx-empty{color:var(--text-faint);font-size:12.5px;text-align:center;padding:30px}
.nvx-svg{width:100%;height:auto;display:block;background:
  radial-gradient(600px 400px at 50% 35%, color-mix(in srgb,var(--accent) 7%,transparent), transparent 70%)}
.nvx-link{stroke:var(--line);stroke-width:2}
.nvx-link.cap{stroke:color-mix(in srgb,var(--ok) 55%,transparent)}
.nvx-link-hit{stroke:transparent;stroke-width:12;cursor:pointer}
.nvx-link-hit:hover + .nvx-link{stroke:var(--warn)}
.nvx-port{fill:var(--bg-0);stroke:var(--text-faint);stroke-width:1.5;cursor:pointer}
.nvx-port:hover{stroke:var(--accent-2);fill:color-mix(in srgb,var(--accent-2) 30%,var(--bg-0))}
.nvx-port.on{stroke:var(--accent-2);fill:var(--accent-2)}
.nvx-node{cursor:pointer}
.nvx-dot{fill:var(--bg-2);stroke:var(--line);stroke-width:2;transition:.12s}
.nvx-g{fill:var(--text);font-size:15px;font-family:ui-monospace,monospace;pointer-events:none}
.nvx-lbl{fill:var(--text-faint);font-size:9px;font-family:ui-monospace,monospace;pointer-events:none}
.nvx-node.t-core .nvx-dot{stroke:#f0b23d}
.nvx-node.t-bank .nvx-dot{stroke:var(--ok)}
.nvx-node.t-vault .nvx-dot{stroke:var(--accent-2)}
.nvx-node.t-ids .nvx-dot{stroke:#f0863d}
.nvx-node.t-firewall .nvx-dot{stroke:#5a8cff}
.nvx-node.t-router .nvx-dot{stroke:#8a7dff}
.nvx-node.t-switch .nvx-dot{stroke:#46b8c8}
.nvx-node.t-proxy .nvx-dot{stroke:#b06cff}
.nvx-node.t-honeypot .nvx-dot{stroke:#e0c23d}
.nvx-node.t-server .nvx-dot{stroke:#7fd6a0}
.nvx-node.t-ap .nvx-dot{stroke:#5ad0e0}
.nvx-node.t-gateway .nvx-dot{stroke:var(--text-faint)}
.nvx-node:hover .nvx-dot{stroke:var(--accent)}
.nvx-node{cursor:pointer;touch-action:none}
.nvx-node.cap .nvx-dot{fill:color-mix(in srgb,var(--ok) 28%,var(--bg-2));stroke:var(--ok)}
.nvx-node.reach .nvx-dot{stroke:var(--accent);stroke-width:3;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--accent) 70%,transparent))}
.nvx-node.lock{opacity:.45}
.nvx-node.sel .nvx-dot{stroke:var(--accent);stroke-width:4}
.nvx-node.wire .nvx-dot{stroke:var(--accent-2);stroke-width:4;stroke-dasharray:3 3}
.nvx-hpbg{fill:var(--bg-0);opacity:.7}
.nvx-hp{fill:var(--warn)}
/* Editor-Palette */
.nvx-pal{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.nvx-pal-h{font-size:11px;color:var(--text-faint);margin-right:2px}
.nvx-palbtn{height:26px;padding:0 9px;border-radius:7px;border:1px solid var(--line);background:var(--bg-1);
  color:var(--text-dim);font-size:11px;cursor:pointer;transition:.12s}
.nvx-palbtn:hover{border-color:var(--accent);color:var(--text)}
.nvx-palbtn.on{background:color-mix(in srgb,var(--accent-2) 16%,transparent);border-color:var(--accent-2);color:var(--accent-2)}
/* NetScript-Code-Panel */
.nvx-conn{margin-top:10px;border-top:1px solid var(--line-soft);padding-top:8px}
.nvx-conn-empty{font-size:11px;color:var(--text-faint);padding:2px 0}
.nvx-conn-row{display:flex;align-items:center;gap:6px;font-size:11.5px;padding:3px 0;border-bottom:1px solid var(--line-soft)}
.nvx-conn-row span{white-space:nowrap}
.nvx-conn-row .mono{font-family:ui-monospace,monospace}
.nvx-conn-row>span:nth-child(3){flex:1;overflow:hidden;text-overflow:ellipsis}
.nvx-x{margin-left:auto;width:22px;height:22px;border-radius:6px;border:1px solid var(--line);
  background:transparent;color:var(--text-dim);cursor:pointer;font-size:11px;line-height:1;flex:0 0 auto}
.nvx-x:hover{border-color:var(--warn);color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.nvx-cfg{margin-top:10px;border-top:1px solid var(--line-soft);padding-top:10px}
.nvx-code{width:100%;min-height:108px;resize:vertical;box-sizing:border-box;margin:6px 0 8px;
  background:var(--bg-0);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:9px 10px;
  font-size:12px;line-height:1.5;tab-size:2}
.nvx-code:focus{outline:none;border-color:var(--accent)}
.nvx-cfg-msg{font-size:11.5px;font-family:ui-monospace,monospace;margin-top:6px;line-height:1.5}
.nvx-cfg-msg.ok{color:var(--ok)} .nvx-cfg-msg.err{color:var(--warn)}
.nvx-panel{border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--bg-1);box-shadow:inset 0 1px 0 var(--metal-edge)}
.nvx-p-h{font-size:13px;font-weight:600;margin-bottom:8px}
.nvx-p-sub{font-size:11.5px;color:var(--text-dim);line-height:1.5;margin-bottom:8px}
.nvx-build{margin-top:10px;border-top:1px solid var(--line-soft);padding-top:10px}
.nvx-tlist{display:flex;flex-direction:column;gap:6px}
.nvx-titem{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--bg-1)}
.nvx-tdot{width:8px;height:8px;border-radius:50%;background:var(--text-faint)}
.nvx-tdot.on{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.nvx-tn{flex:1;font-size:13px;font-weight:600}
.nvx-tk{font-size:10.5px;color:var(--text-dim)}
.nvx-tt{font-size:10.5px;color:var(--accent-2);font-family:ui-monospace,monospace}
.nvx-titem .btn{padding:5px 12px;font-size:11px}
.nvx-atk-head{display:flex;justify-content:space-between;align-items:center}
.nvx-atk-t{font-size:13px;font-weight:600}
.nvx-atk-t .dim{color:var(--text-faint);font-weight:400}
.nvx-atk-loot{font-size:12px;color:var(--text-dim)}
.nvx-atk-loot .ok{color:var(--ok)} .nvx-atk-loot .ps2{color:var(--accent-2)}
.nvx-alarm{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--text-dim)}
.nvx-alarm-bar{flex:1;height:7px;border-radius:5px;background:var(--bg-2);overflow:hidden}
.nvx-alarm-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--ok),#f0b23d,var(--warn))}
.nvx-atk-ctrl{border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--bg-1);display:flex;flex-direction:column;gap:8px}
.nvx-atk-msg{font-size:12.5px;font-weight:600}
.nvx-atk-msg.ok{color:var(--ok)} .nvx-atk-msg.err{color:var(--warn)}

/* Fokus-Sichtbarkeit */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Dialoge (In-App prompt/confirm/form) ---------- */
#dialogs{position:fixed;inset:0;pointer-events:none;z-index:10050}
.dlg-ov{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--bg-0) 55%,transparent);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .16s ease;pointer-events:auto;padding:20px}
.dlg-ov.on{opacity:1}
.dlg{width:min(380px,92vw);background:var(--panel,rgba(16,19,31,.92));
  border:1px solid var(--line);border-radius:14px;padding:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 var(--metal-edge,rgba(255,255,255,.06));
  transform:translateY(8px) scale(.98);transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.dlg-ov.on .dlg{transform:none}
.dlg-h{font-size:15px;font-weight:700;letter-spacing:.01em;margin-bottom:6px;color:var(--text)}
.dlg-l{font-size:12px;color:var(--text-dim);margin:8px 0 4px;line-height:1.5}
.dlg-field{margin-top:8px}
.dlg-inp{width:100%;box-sizing:border-box;height:38px;padding:0 12px;margin-top:4px;
  background:var(--bg-0);color:var(--text);border:1px solid var(--line);border-radius:9px;
  font-size:13px;outline:none;transition:border-color .12s}
select.dlg-inp{height:38px;padding:0 8px}
.dlg-inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.dlg-row{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.dlg-row .btn{min-width:96px;justify-content:center}

/* ---------- Task-Manager ---------- */
.tm{padding:12px;overflow:auto;height:100%}
.tm-h{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin:14px 0 6px}
.tm-h:first-child{margin-top:0}
.tm-empty{font-size:12px;color:var(--text-faint);padding:6px 0}
.tm-row{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--line-soft)}
.tm-ico{width:22px;text-align:center}
.tm-nm{flex:1;font-size:13px}
.tm-row .btn{padding:5px 10px;font-size:11px}
.tm-tag{font-size:10px;padding:2px 7px;border-radius:6px;border:1px solid var(--line);color:var(--text-dim)}
.tm-tag.sys{color:var(--accent-2);border-color:color-mix(in srgb,var(--accent-2) 40%,transparent)}

/* ---------- Rechner (Beispiel-App) ---------- */
.calc{display:flex;flex-direction:column;height:100%;padding:12px;gap:10px;outline:none}
.calc-dispwrap{background:var(--bg-0);border:1px solid var(--line);border-radius:12px;padding:12px 16px;
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-height:64px;justify-content:center}
.calc-sub{font-family:ui-monospace,monospace;font-size:12px;color:var(--text-faint);min-height:14px}
.calc-disp{font-family:ui-monospace,monospace;font-size:30px;font-weight:600;color:var(--text);
  width:100%;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calc-grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:8px}
.calc-btn{border:1px solid var(--line);background:var(--bg-1);color:var(--text);border-radius:12px;
  font-size:18px;cursor:pointer;transition:.1s;display:flex;align-items:center;justify-content:center;user-select:none}
.calc-btn:hover{border-color:var(--accent);background:var(--bg-2)}
.calc-btn:active{transform:scale(.96)}
.calc-btn.op{color:var(--accent);font-weight:600}
.calc-btn.eq{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 36%,var(--bg-2)),color-mix(in srgb,var(--accent) 14%,var(--bg-2)));color:#fff;border-color:transparent}
.calc-btn.fn{color:var(--text-dim)}
.calc-btn.wide{grid-column:span 2}

/* ---------- netvisualizer (sozial) ---------- */
.sv{display:flex;flex-direction:column;height:100%;padding:12px;overflow:auto}
.sv-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.sv-title{font-weight:700;font-size:14px}
.sv-count{font-size:11px;color:var(--text-faint)}
.sv-sec{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin:14px 0 6px}
.sv-empty{font-size:12px;color:var(--text-faint);padding:6px 0}
.sv-row{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--line-soft)}
.sv-dot{width:9px;height:9px;border-radius:50%;background:var(--text-faint);flex:0 0 auto}
.sv-dot.on{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.sv-name{flex:1;font-size:13px;font-weight:600}
.sv-row .btn{padding:5px 10px;font-size:11px}
.sv-tag{font-size:10px;color:var(--text-dim);border:1px solid var(--line);border-radius:6px;padding:2px 7px}
/* Chat */
.sv-chatbar{display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:8px}
.sv-back{padding:3px 11px!important;font-size:16px!important;line-height:1}
.sv-chatname{font-weight:700;font-size:14px}
.sv-log{flex:1;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:4px 2px}
.sv-msg{max-width:78%;padding:8px 11px;border-radius:12px;font-size:13px;line-height:1.4;word-break:break-word}
.sv-msg.me{align-self:flex-end;background:color-mix(in srgb,var(--accent) 26%,var(--bg-2));color:#fff;border-bottom-right-radius:4px}
.sv-msg.them{align-self:flex-start;background:var(--bg-2);border:1px solid var(--line);border-bottom-left-radius:4px}
.sv-inrow{display:flex;gap:8px;margin-top:8px}
.sv-inp{flex:1;height:36px;padding:0 12px;background:var(--bg-0);color:var(--text);border:1px solid var(--line);border-radius:9px;font-size:13px;outline:none}
.sv-inp:focus{border-color:var(--accent)}

/* ---------- Taskbar-Icon-Buttons (Lock/Logout) ---------- */
.tb-ico{display:inline-flex;align-items:center;justify-content:center;padding:0 9px;color:var(--text-dim)}
.tb-ico:hover{color:var(--accent)}
.tb-ico svg{display:block}

/* Datei-Glyphen monochrom, on-design */
.fi{color:var(--accent);opacity:.9}

/* ---------- Editor-Verbesserungen ---------- */
.ed-wrap{display:flex;flex-direction:column;height:100%}
.ed-bar{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--metal-sheen)}
.ed-name{display:flex;align-items:center;gap:7px;min-width:0}
.ed-nametxt{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.ed-dot{width:7px;height:7px;border-radius:50%;background:transparent;border:1px solid var(--line);flex:0 0 auto}
.ed-dot.on{background:var(--warn);border-color:var(--warn);box-shadow:0 0 7px var(--warn)}
.ed-spacer{flex:1}
.ed-bar .btn{padding:5px 11px;font-size:11.5px}
.ed-area{flex:1;width:100%;box-sizing:border-box;resize:none;border:0;outline:none;
  background:var(--panel-solid);color:var(--text);padding:14px 16px;font-size:13px;line-height:1.6;tab-size:2}
.ed-foot{display:flex;justify-content:space-between;align-items:center;padding:5px 12px;
  border-top:1px solid var(--line);background:var(--bg-1);font-size:11px;color:var(--text-faint);font-family:ui-monospace,monospace}
.ed-ext{padding:1px 7px;border:1px solid var(--line);border-radius:5px;color:var(--text-dim)}

/* ---------- Gruppen (Benutzerverwaltung) ---------- */
.usr-grps{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 2px}
.usr-grp{font-size:10.5px;padding:2px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--accent-2) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--accent-2) 35%,transparent);color:var(--accent-2)}
.grp-checks{display:flex;flex-direction:column;gap:6px;margin:8px 0;max-height:240px;overflow:auto}
.grp-check{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;padding:4px 6px;border-radius:7px}
.grp-check:hover{background:var(--bg-2)}
.grp-list{display:flex;flex-direction:column;gap:4px;margin:8px 0;max-height:200px;overflow:auto}
.grp-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--line-soft)}
.grp-nm{flex:1;font-size:13px}

/* ---------- Settings: Akzent / Autostart / Gruppen-Konfig ---------- */
.set-color{width:46px;height:28px;border:1px solid var(--line);border-radius:7px;background:var(--bg-0);cursor:pointer;padding:2px}
.set-startup{width:100%;box-sizing:border-box;height:120px;resize:vertical;margin-top:6px;
  background:var(--bg-0);color:var(--text);border:1px solid var(--line);border-radius:9px;
  padding:10px 12px;font-size:12.5px;line-height:1.6;outline:none;tab-size:2}
.set-startup:focus{border-color:var(--accent)}
.gc-grid{display:flex;gap:14px;align-items:flex-end;margin-top:6px;flex-wrap:wrap}
.gc-field{display:flex;flex-direction:column;gap:4px}
.gc-field .dlg-inp{min-width:120px}
.gc-acc{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-dim)}
.gc-acc input[type=color]{width:40px;height:28px;border:1px solid var(--line);border-radius:6px;background:var(--bg-0);cursor:pointer;padding:2px}

/* Unsichtbar laufende Programme */
.win-hidden{display:none!important}

/* ---------- Benutzer-/Gruppenmanager (Windows-Stil) ---------- */
.um{display:flex;flex-direction:column;height:100%}
.um-tabs{display:flex;gap:2px;padding:8px 10px 0;border-bottom:1px solid var(--line);background:var(--metal-sheen)}
.um-tab{padding:7px 16px;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;
  background:transparent;color:var(--text-dim);font-size:12.5px;cursor:pointer}
.um-tab:hover{color:var(--text)}
.um-tab.on{background:var(--bg-1);border-color:var(--line);color:var(--text);font-weight:600}
.um-body{flex:1;display:flex;min-height:0}
.um-list{width:228px;flex:0 0 228px;border-right:1px solid var(--line);display:flex;flex-direction:column;background:var(--bg-1)}
.um-listbar{padding:8px;border-bottom:1px solid var(--line-soft)}
.um-listbar .btn{width:100%;justify-content:center}
.um-items{flex:1;overflow:auto;padding:6px}
.um-empty,.um-hint{color:var(--text-faint);font-size:12px;padding:14px}
.um-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:9px;cursor:pointer}
.um-item:hover{background:var(--bg-2)}
.um-item.sel{background:color-mix(in srgb,var(--accent) 18%,transparent);outline:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.um-ava{width:30px;height:30px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--accent),var(--accent-2));color:#04222b;font-weight:700;font-size:13px}
.um-ava.grp{background:linear-gradient(160deg,var(--bg-3,#2a3142),var(--bg-2));color:var(--accent)}
.um-ava.big{width:46px;height:46px;font-size:19px}
.um-itxt{display:flex;flex-direction:column;min-width:0}
.um-iname{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um-isub{font-size:11px;color:var(--text-faint)}
.um-you{color:var(--accent);font-weight:400}
.um-detail{flex:1;overflow:auto;padding:16px 18px;min-width:0}
.um-prophead{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.um-ptitle{font-size:17px;font-weight:700}
.um-kv{display:flex;justify-content:space-between;font-size:12px;color:var(--text-dim);padding:3px 0}
.um-sec{margin-top:16px}
.um-sech{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-bottom:8px;border-bottom:1px solid var(--line-soft);padding-bottom:5px}
.um-sec .btn{margin:0 8px 8px 0}
.um-checks{display:flex;flex-direction:column;gap:2px;max-height:200px;overflow:auto}
.um-check{display:flex;align-items:center;gap:9px;font-size:13px;padding:6px 8px;border-radius:7px;cursor:pointer}
.um-check:hover{background:var(--bg-2)}

/* ---------- Snake (Demo-Spiel) ---------- */
.snk{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px;height:100%;outline:none}
.snk-bar{display:flex;justify-content:space-between;width:100%;font-size:13px;font-weight:600}
.snk-best{color:var(--accent)}
.snk-cv{border:1px solid var(--line);border-radius:10px;background:var(--bg-0)}
.snk-hint{font-size:11px;color:var(--text-faint);text-align:center}

/* ---------- Hallo API (Demo-App) ---------- */
.hallo{display:flex;flex-direction:column;gap:12px;padding:18px;height:100%;justify-content:center;align-items:stretch}
.hallo-text{font-size:14px;text-align:center;color:var(--text);padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--bg-0);min-height:48px;display:flex;align-items:center;justify-content:center}
.hallo .btn{justify-content:center}

/* ---------- Freigaben (Shares) ---------- */
.shr{display:flex;flex-direction:column;height:100%;padding:12px;gap:8px}
.shr-head{display:flex;align-items:center;gap:10px}
.shr-title{font-weight:700;font-size:14px}
.shr-sel{height:30px;background:var(--bg-0);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:0 8px;font-size:12.5px}
.shr-badge{margin-left:auto;font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--text-dim)}
.shr-badge.adm{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.shr-bar{display:flex;gap:8px;min-height:0}
.shr-bar .btn{padding:5px 10px;font-size:11.5px}
.shr-hint{font-size:11px;color:var(--text-faint);align-self:center}
.shr-crumb{font-family:ui-monospace,monospace;font-size:11px;color:var(--text-faint)}
.shr-list{flex:1;overflow:auto;border:1px solid var(--line-soft);border-radius:10px}
.shr-empty{padding:16px;color:var(--text-faint);font-size:12px}
.shr-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid var(--line-soft);cursor:pointer}
.shr-item:hover{background:var(--bg-2)}
.shr-item .fi{color:var(--accent)}
.shr-item .fn{flex:1;font-size:13px}
.shr-item .fm{font-size:11px;color:var(--text-faint)}
.shr-x{background:none;border:none;color:var(--text-faint);cursor:pointer;font-size:12px;padding:2px 6px;border-radius:6px}
.shr-x:hover{color:var(--warn);background:var(--bg-3,#2a3142)}

/* ---------- Editor: Syntax-Overlay ---------- */
.ed-editor{position:relative;flex:1;overflow:hidden}
.ed-editor .ed-area,
.ed-editor .ed-hl{
  position:absolute;inset:0;margin:0;border:0;box-sizing:border-box;
  padding:14px 16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;line-height:1.6;tab-size:2;white-space:pre-wrap;word-break:break-word;overflow:auto;
}
.ed-editor .ed-hl{pointer-events:none;background:transparent;color:var(--text);z-index:0}
.ed-editor .ed-hl code{font:inherit;white-space:inherit;display:block}
.ed-editor .ed-area{background:transparent;color:var(--text);caret-color:var(--accent);resize:none;outline:none;z-index:1}
.ed-editor.hl-on .ed-area{background:transparent;color:transparent}
.ed-editor:not(.hl-on) .ed-hl{display:none}
.ed-bar .btn.on{border-color:var(--accent);color:var(--accent)}
.t-kw{color:#7aa2ff}
.t-str{color:#9ece6a}
.t-com{color:var(--text-faint);font-style:italic}
.t-num{color:#e0af68}
.t-const{color:#ff9e64}
.t-key{color:#7dcfff}
.t-fn{color:#bb9af7}

/* ---------- Anfaenger-SDK Layout ---------- */
.sdk-app{display:flex;flex-direction:column;gap:10px;padding:16px;height:100%}
.sdk-row{display:flex;gap:8px;align-items:center}
.sdk-col{display:flex;flex-direction:column;gap:8px}
.sdk-title{font-weight:700;font-size:15px}
.sdk-text{font-size:13px;color:var(--text)}

/* ---------- Angeheftete Apps (Taskleiste) ---------- */
#pinned{display:flex;align-items:center;gap:4px}
.pin-btn{padding:0 10px;min-width:34px;justify-content:center}
.pin-btn .pin-ico{font-size:15px;line-height:1}
.pin-btn.drag{opacity:.4}
.pin-btn.dragover{outline:2px solid var(--accent);outline-offset:-2px;border-radius:8px}

/* ---------- Huebsche Checkboxen (Mitgliedschaft etc.) ---------- */
input[type=checkbox]{accent-color:var(--accent)}
.um-check input[type=checkbox],
.grp-check input[type=checkbox]{
  appearance:none;-webkit-appearance:none;width:18px;height:18px;flex:0 0 auto;margin:0;
  border:1.5px solid var(--line);border-radius:5px;background:var(--bg-0);cursor:pointer;position:relative;transition:border-color .12s,background .12s;
}
.um-check input[type=checkbox]:hover,
.grp-check input[type=checkbox]:hover{border-color:var(--accent)}
.um-check input[type=checkbox]:checked,
.grp-check input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
.um-check input[type=checkbox]:checked::after,
.grp-check input[type=checkbox]:checked::after{
  content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;
  border:solid #04222b;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.um-check{justify-content:flex-start;gap:11px}

/* ---------- SDK-Komponenten (erweitert) ---------- */
.sdk-app{display:flex;flex-direction:column;gap:10px;padding:16px;height:100%;overflow:auto}
.sdk-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sdk-col{display:flex;flex-direction:column;gap:8px}
.sdk-grid{display:grid;gap:8px}
.sdk-scroll{flex:1;overflow:auto;min-height:0}
.sdk-card{background:var(--bg-1);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px}
.sdk-divider{height:1px;background:var(--line);margin:4px 0}
.sdk-spacer{flex:1}
.sdk-title{font-weight:700;font-size:16px}
.sdk-subtitle{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint)}
.sdk-text{font-size:13px;color:var(--text);line-height:1.5}
.sdk-label{font-size:12px;color:var(--text-dim)}
.sdk-code{background:var(--bg-0);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:12px;overflow:auto;white-space:pre-wrap}
.sdk-link{color:var(--accent);cursor:pointer;font-size:13px;text-decoration:none}
.sdk-link:hover{text-decoration:underline}
.sdk-badge{font-size:10.5px;padding:2px 9px;border-radius:999px;border:1px solid var(--line);color:var(--text-dim)}
.sdk-badge.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.sdk-badge.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.sdk-badge.accent{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.sdk-icon{display:inline-flex;align-items:center;justify-content:center}
.sdk-textarea{width:100%;box-sizing:border-box;min-height:90px;resize:vertical;background:var(--bg-0);color:var(--text);border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:13px;line-height:1.5;outline:none}
.sdk-textarea:focus{border-color:var(--accent)}
.sdk-check{display:flex;align-items:center;gap:9px;font-size:13px;cursor:pointer}
.sdk-check input[type=checkbox]{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:1.5px solid var(--line);border-radius:5px;background:var(--bg-0);cursor:pointer;position:relative;flex:0 0 auto}
.sdk-check input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
.sdk-check input[type=checkbox]:checked::after{content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;border:solid #04222b;border-width:0 2px 2px 0;transform:rotate(45deg)}
/* Toggle-Switch */
.sdk-toggle{display:inline-flex;align-items:center;gap:9px;font-size:13px;cursor:pointer}
.sdk-toggle input{position:absolute;opacity:0;width:0;height:0}
.sdk-track{width:38px;height:22px;border-radius:999px;background:var(--bg-3,#2a3142);border:1px solid var(--line);position:relative;transition:.16s;flex:0 0 auto}
.sdk-track::after{content:"";position:absolute;left:2px;top:1px;width:18px;height:18px;border-radius:50%;background:var(--text-dim);transition:.16s}
.sdk-toggle input:checked + .sdk-track{background:color-mix(in srgb,var(--accent) 55%,var(--bg-2));border-color:var(--accent)}
.sdk-toggle input:checked + .sdk-track::after{transform:translateX(16px);background:#fff}
/* Slider */
.sdk-slider{width:100%;accent-color:var(--accent)}
.sdk-color{width:46px;height:30px;border:1px solid var(--line);border-radius:8px;background:var(--bg-0);cursor:pointer;padding:2px}
/* Liste / Progress */
.sdk-list{display:flex;flex-direction:column;gap:6px}
.sdk-progress{height:10px;border-radius:999px;background:var(--bg-0);border:1px solid var(--line);overflow:hidden}
.sdk-pbar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .2s}

/* ---------- Arena FPS ---------- */
.fps{position:relative;width:100%;height:100%;background:#0a0d16;outline:none;overflow:hidden}
.fps-cv{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;display:block;cursor:crosshair}
.fps-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(6,9,16,.55);color:#fff;text-align:center;cursor:pointer}
.fps-msg{font-size:16px;font-weight:600;line-height:1.7}
.fps-msg small{font-weight:400;color:var(--accent);font-size:12px}

/* ---------- Arena FPS 2.0 (WebGL) ---------- */
.fps-cv{image-rendering:auto}
.fps-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fps-name{position:absolute;transform:translate(-50%,-100%);pointer-events:none;font:600 11px system-ui;color:#fff;text-shadow:0 1px 2px #000;white-space:nowrap;text-align:center}
.fps-name i{display:block;height:3px;margin-top:2px;background:var(--accent);border-radius:2px}
.fps-hud{position:absolute;inset:0;pointer-events:none;color:#fff;font:12px system-ui}
.fps-cross{position:absolute;left:50%;top:50%;width:14px;height:14px;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.85);border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.fps-flash{position:absolute;inset:0}
.fps-hp{position:absolute;left:14px;bottom:14px;width:170px;height:16px;background:rgba(0,0,0,.45);border-radius:8px;overflow:hidden;display:flex;align-items:center}
.fps-hp-bar{height:100%;width:100%;background:var(--accent)}
.fps-hp-txt{position:absolute;left:12px;font-weight:700;text-shadow:0 1px 2px #000}
.fps-board{position:absolute;right:12px;top:10px;min-width:150px;background:rgba(0,0,0,.42);border-radius:8px;padding:6px 10px;font-size:11px}
.fps-board b{display:block;color:#9fb;margin-bottom:3px}
.fps-board div{display:flex;justify-content:space-between;gap:14px;color:#dde}
.fps-board div.me{color:var(--accent);font-weight:700}
.fps-feed{position:absolute;left:12px;top:10px;font-size:11px;text-shadow:0 1px 2px #000;line-height:1.5}
.fps-gun{position:absolute;left:50%;bottom:-4px;width:130px;height:96px;transform:translateX(-8%);
  background:linear-gradient(180deg,#3a414f,#10131a);clip-path:polygon(34% 100%,66% 100%,60% 34%,53% 0,47% 0,40% 34%);opacity:.92;filter:drop-shadow(0 -2px 6px rgba(0,0,0,.5))}

/* ---------- Weitere Themes ---------- */
html[data-theme="midnight"]{
  --bg-0:#070512; --bg-1:#0d0a1f; --bg-2:#140f2b;
  --panel-rgb:20,15,43; --panel-solid:#140f2b;
  --line:#33285c; --line-soft:#221b40;
  --text:#e6e1f7; --text-dim:#9b91c4; --text-faint:#6a6196;
  --accent:#b388ff; --accent-2:#7c6cff; --warn:#ff5d8f; --ok:#76e0c2;
  --shadow:0 18px 50px rgba(0,0,0,.7);
  --wall-a:#1a1140; --wall-b:#0a0618; --wall-glow:#3a1f7b;
}
html[data-theme="nord"]{
  --bg-0:#2e3440; --bg-1:#343b48; --bg-2:#3b4252;
  --panel-rgb:59,66,82; --panel-solid:#3b4252;
  --line:#4c566a; --line-soft:#434c5e;
  --text:#eceff4; --text-dim:#abb6c8; --text-faint:#7b88a1;
  --accent:#88c0d0; --accent-2:#81a1c1; --warn:#bf616a; --ok:#a3be8c;
  --shadow:0 16px 44px rgba(0,0,0,.45);
  --wall-a:#3b4252; --wall-b:#2e3440; --wall-glow:#4c566a;
}
html[data-theme="solar"]{
  --bg-0:#fdf6e3; --bg-1:#f4edda; --bg-2:#eee8d5;
  --panel-rgb:255,252,242; --panel-solid:#fdf6e3;
  --line:#d8d0b8; --line-soft:#e6dfc8;
  --text:#073642; --text-dim:#586e75; --text-faint:#93a1a1;
  --accent:#268bd2; --accent-2:#2aa198; --warn:#dc322f; --ok:#859900;
  --shadow:0 14px 40px rgba(80,90,60,.18);
  --metal-sheen:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.35) 45%,rgba(0,0,0,.04));
  --metal-edge:rgba(255,255,255,.9); --metal-edge-lo:rgba(80,90,60,.12);
  --wall-a:#eee8d5; --wall-b:#d8d0b8; --wall-glow:#fdf6e3;
}

/* ---------- Responsive: Tablet / Phone ---------- */
@media (max-width:820px){
  #taskbar{ height:52px; gap:4px; padding:0 6px; overflow-x:auto; }
}
@media (max-width:640px){
  /* Auf kleinen Touchscreens laufen Fenster bildschirmfuellend (unter der Leiste). */
  .window{ left:0 !important; top:52px !important; width:100vw !important;
    height:calc(100dvh - 52px) !important; min-width:0; min-height:0; border-radius:0; }
  .window .titlebar{ touch-action:none; }
}

/* Bei eigenem Hintergrund (background-Einstellung) die Deko ausblenden,
   damit Farbe/Verlauf/Bild sauber wirkt. */
#desktop.has-bg::after{ display:none; }
#desktop.has-bg .aurora{ display:none; }

/* ---------- Fenster-Snapping ---------- */
#snap-preview{position:fixed;z-index:30;pointer-events:none;display:none;opacity:0;
  border:2px solid var(--accent);border-radius:10px;
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent), var(--shadow);
  transition:left .12s ease,top .12s ease,width .12s ease,height .12s ease,opacity .12s ease;}
#snap-preview.on{display:block;opacity:1}
.window.snap{border-radius:0}

/* ================= Datei-Explorer (Windows-vertraut) ================= */
.fx-root{display:flex;flex-direction:column;height:100%;min-height:0}
.fx-toolbar{display:flex;align-items:center;gap:4px;padding:6px 8px;border-bottom:1px solid var(--line-soft);flex:0 0 auto}
.fx-tbtn{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:28px;padding:0 8px;
  border:1px solid var(--line-soft);border-radius:7px;background:var(--panel-solid);color:var(--text);
  font-size:14px;cursor:pointer;transition:background .12s,border-color .12s}
.fx-tbtn:hover{background:color-mix(in srgb,var(--accent) 12%,var(--panel-solid));border-color:var(--line)}
.fx-tbtn:disabled{opacity:.35;cursor:default;background:var(--panel-solid)}
.fx-tsep{width:1px;height:20px;background:var(--line-soft);margin:0 4px}

.fx-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:2px;padding:6px 10px;
  border-bottom:1px solid var(--line-soft);font-size:12.5px;color:var(--text-dim);flex:0 0 auto;
  background:color-mix(in srgb,var(--bg-2) 50%,transparent)}
.fx-crumb{padding:2px 7px;border-radius:6px;cursor:pointer;color:var(--text)}
.fx-crumb:hover{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.fx-csep{color:var(--text-faint);padding:0 1px}

.fx-split{flex:1 1 auto;display:flex;min-height:0}
.fx-side{flex:0 0 190px;overflow:auto;border-right:1px solid var(--line-soft);padding:8px 6px;
  background:color-mix(in srgb,var(--bg-1) 40%,transparent)}
.fx-side-h{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);
  padding:10px 8px 4px}
.fx-place{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;cursor:pointer;
  color:var(--text);font-size:13px;white-space:nowrap;overflow:hidden}
.fx-place .lb{overflow:hidden;text-overflow:ellipsis}
.fx-place:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.fx-place.on{background:color-mix(in srgb,var(--accent) 22%,transparent);font-weight:600}

.fx-listwrap{flex:1 1 auto;overflow:auto;padding:10px;min-width:0}
.fx-empty{color:var(--text-faint);font-size:13px;text-align:center;padding:40px 10px}

/* Symbolansicht */
.fx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:6px}
.fx-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:9px;
  cursor:default;text-align:center;border:1px solid transparent;transition:background .1s,border-color .1s;user-select:none}
.fx-tile:hover{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.fx-tile.sel{background:color-mix(in srgb,var(--accent) 22%,transparent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.fx-tico{font-size:34px;line-height:1}
.fx-tname{font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;max-width:100%}

/* Detailansicht */
.fx-table{display:flex;flex-direction:column;min-width:0}
.fx-trow{display:grid;grid-template-columns:1fr 120px 90px;align-items:center;gap:8px;padding:6px 10px;
  border-radius:6px;cursor:default;font-size:13px;user-select:none}
.fx-trow:not(.fx-thead):hover{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.fx-trow.sel{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.fx-thead{position:sticky;top:-10px;background:var(--panel-solid);color:var(--text-dim);font-size:11px;
  text-transform:uppercase;letter-spacing:.05em;cursor:default;border-bottom:1px solid var(--line-soft);border-radius:0}
.fx-c-name{display:flex;align-items:center;gap:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fx-c-name .ic{flex:0 0 auto}
/* Hover-Marquee (langer Name scrollt beim Ueberfahren seitlich durch) */
.mq{display:inline-block;max-width:100%;overflow:hidden;white-space:nowrap;vertical-align:bottom}
.fx-c-name .mq{flex:1 1 auto;min-width:0}
.mq>.mq-tx{display:inline-block;will-change:transform}
.mq.run>.mq-tx{transition:transform var(--mq-dur,2s) linear}
.fx-c-type,.fx-c-size{color:var(--text-dim)}
.fx-c-size{text-align:right}

.fx-status{flex:0 0 auto;border-top:1px solid var(--line-soft);padding:5px 12px;font-size:12px;
  color:var(--text-dim);background:color-mix(in srgb,var(--bg-2) 40%,transparent)}

/* Schmale Fenster: Navigationsleiste schmaler */
@media (max-width:560px){ .fx-side{flex-basis:140px} .fx-trow{grid-template-columns:1fr 70px} .fx-c-type{display:none} }

/* Datei-Explorer: monochrome SVG-Icons, eingefaerbt mit Theme-Tokens */
.fx-tico{color:var(--text-dim);display:flex;align-items:center;justify-content:center}
.fx-tico svg{width:32px;height:32px;display:block}
.fx-c-name .ic,.fx-place .ic{display:inline-flex;align-items:center;color:var(--text-dim)}
.fx-c-name .ic svg{width:17px;height:17px;display:block}
.fx-place .ic svg{width:16px;height:16px;display:block}
.fx-tico.folder,.ic.folder{color:var(--accent-2)}
.fx-tico.code,.ic.code{color:var(--accent)}
.fx-tico.image,.ic.image{color:var(--ok)}
.fx-tico.archive,.ic.archive{color:var(--accent-2)}
.fx-tico.home,.ic.home{color:var(--accent)}
.fx-tico.share,.ic.share{color:var(--accent)}
.fx-tico.text,.ic.text,.fx-tico.file,.ic.file,.fx-tico.drive,.ic.drive{color:var(--text-dim)}

/* ================= Benutzerverwaltung (lusrmgr-Stil) ================= */
.um-root{display:flex;flex-direction:column;height:100%;min-height:0}
.um-toolbar{display:flex;align-items:center;gap:6px;padding:8px;border-bottom:1px solid var(--line-soft);flex:0 0 auto}
.um-split{flex:1 1 auto;display:flex;min-height:0}
.um-tree{flex:0 0 240px;overflow:auto;border-right:1px solid var(--line-soft);padding:6px 6px 12px;
  background:color-mix(in srgb,var(--bg-1) 40%,transparent)}
.um-detail{flex:1 1 auto;overflow:auto;padding:16px 18px;min-width:0}

.um-th{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);padding:12px 8px 4px}
.um-user,.um-group{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;cursor:pointer;font-size:13px;color:var(--text);user-select:none}
.um-user .ic,.um-group .ic{display:inline-flex;color:var(--text-dim)}
.um-user .ic svg,.um-group .ic svg{width:17px;height:17px;display:block}
.um-group .ic{color:var(--accent-2)}
.um-user .lb,.um-group .lb{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.um-user.nested{margin-left:16px}
.um-user:hover,.um-group:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.um-user.on,.um-group.on{background:color-mix(in srgb,var(--accent) 22%,transparent);font-weight:600}
.um-group.drop{background:color-mix(in srgb,var(--accent) 28%,transparent);outline:1px dashed var(--accent)}
.um-badge{font-size:10px;padding:1px 6px;border-radius:6px;background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent)}
.um-group .cnt{font-size:11px;color:var(--text-faint);min-width:18px;text-align:right}

.um-empty{color:var(--text-faint);font-size:13px;text-align:center;padding:48px 12px}
.um-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.um-head .ic.big{display:inline-flex;color:var(--accent)}
.um-head .ic.big svg{width:30px;height:30px;display:block}
.um-name{font-size:17px;font-weight:600;color:var(--text)}
.um-sub{font-size:12px;color:var(--text-dim)}

.um-sec{border-top:1px solid var(--line-soft);padding:12px 0}
.um-sec-h{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-bottom:8px}
.um-checks{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:10px}
.um-checks.off{opacity:.4;pointer-events:none}
.um-appbox,.um-cfg{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.um-cfg .sdk-textarea{width:100%}
.um-memlist{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.um-mem{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:6px;font-size:13px}
.um-mem .ic{display:inline-flex;color:var(--text-dim)} .um-mem .ic svg{width:16px;height:16px}
.um-mem .lb{flex:1}
.um-dim{color:var(--text-faint);font-size:12.5px;padding:4px 0}
.btn.sm{padding:3px 10px;font-size:12px}

/* Sandbox-Apps: isolierter iframe fuellt den Fensterkoerper */
.sandbox-frame{display:block;width:100%;height:100%;border:0;background:transparent}

/* Rechner: Tabs + Funktionspanel (passend zum klassischen Rechner-Look) */
.calc-tabs{display:flex;gap:8px}
.calc-tab{flex:1;padding:7px;border:1px solid var(--line);border-radius:10px;background:var(--bg-1);
  color:var(--text-dim);font-size:13px;cursor:pointer;text-align:center;user-select:none;transition:.1s}
.calc-tab:hover{border-color:var(--accent)}
.calc-tab.on{color:var(--text);border-color:var(--accent);background:var(--bg-2)}
.calc-body{flex:1;display:flex;flex-direction:column;gap:10px;min-height:0}
.calc-fn{flex:1;display:flex;flex-direction:column;gap:12px;overflow:auto}
.calc-fn .grp{display:flex;flex-direction:column;gap:8px;background:var(--bg-0);border:1px solid var(--line);border-radius:12px;padding:12px}
.calc-fn h4{margin:0;font-size:13px;color:var(--text)}
.calc-fn .eq{font-family:ui-monospace,monospace;font-size:12px;color:var(--text-faint)}
.calc-fn .ins{display:flex;gap:8px}
.calc-fn .ins input{flex:1;min-width:0;height:38px;padding:0 10px;background:var(--bg-1);border:1px solid var(--line);
  border-radius:9px;color:var(--text);font-size:14px;outline:none;text-align:center}
.calc-fn .ins input:focus{border-color:var(--accent)}
.calc-fn .res{font-family:ui-monospace,monospace;font-size:13px;color:var(--accent);min-height:18px;word-break:break-word}

/* ---------- Bildbetrachter / Medienplayer ---------- */
.mv-root{display:flex;flex-direction:column;height:100%;min-height:0}
.mv-bar{display:flex;align-items:center;gap:6px;padding:6px 10px;border-bottom:1px solid var(--line-soft);flex:0 0 auto}
.mv-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.mv-spacer{flex:1}
.mv-zlbl{font-size:12px;color:var(--text-dim);min-width:64px;text-align:center}
.mv-stage{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;background:var(--bg-0);min-height:0}
.mv-img{max-width:none;transform-origin:center center;transition:transform .08s ease}
.mv-img.fit{max-width:100%;max-height:100%;object-fit:contain}
.mv-video{max-width:100%;max-height:100%;background:#000}
.mv-empty{color:var(--text-faint);font-size:13px;padding:30px;text-align:center}
.mv-audio{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--bg-0)}
.mv-aud-ico{font-size:56px;color:var(--accent)}
.mv-audioel{width:90%;max-width:420px}

/* Settings: Theme-Auswahl + Hintergrund-Feld */
.set-select{background:var(--bg-1);color:var(--text);border:1px solid var(--line);border-radius:8px;
  padding:5px 9px;font-size:13px;outline:none;cursor:pointer}
.set-select:focus{border-color:var(--accent)}
.set-bg{width:100%;box-sizing:border-box;height:34px;padding:0 10px;background:var(--bg-0);color:var(--text);
  border:1px solid var(--line);border-radius:8px;font-size:12.5px;outline:none;font-family:ui-monospace,monospace}
.set-bg:focus{border-color:var(--accent)}

/* Terminal: strukturierte Hilfe */
.term-out .term-help-title{color:var(--accent);font-weight:700;margin:2px 0 4px}
.term-out .term-help-sec{color:var(--text-dim);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin:9px 0 3px}
.term-out .term-help-foot{color:var(--text-faint);margin-top:9px}


/* ===== Editor v2 (Tabs, Menue, Suchen) — Inhalt bewusst OPAK ===== */
/* Nur die WM-Fensterleiste uebernimmt die globale Transparenz; der Editor-
   Inhalt bleibt undurchsichtig, damit Text stets lesbar ist. */
.ed-wrap{background:transparent}
.ed-menubar{display:flex;align-items:center;gap:4px;padding:5px 8px;border-bottom:1px solid var(--line-soft);background:var(--metal-sheen)}
.ed-menu-btn{background:transparent;border:1px solid transparent;border-radius:6px;color:var(--text);font-size:12.5px;padding:4px 10px;cursor:pointer}
.ed-menu-btn:hover{background:var(--bg-1);border-color:var(--line)}
.ed-menubar .ed-spacer{flex:1}
.ed-menubar .btn{padding:4px 10px;font-size:11.5px}

.ed-tabs{display:flex;align-items:stretch;gap:2px;padding:4px 6px 0;border-bottom:1px solid var(--line);background:transparent;overflow-x:auto}
.ed-tab{display:flex;align-items:center;gap:7px;padding:6px 8px 6px 11px;border:1px solid var(--line);border-bottom:none;border-radius:8px 8px 0 0;background:var(--bg-1);color:var(--text-dim);cursor:pointer;max-width:200px;white-space:nowrap}
.ed-tab.active{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--text);border-color:var(--accent)}
.ed-tab-nm{overflow:hidden;text-overflow:ellipsis;font-size:12px}
.ed-tab-close{opacity:.6;font-size:11px;border-radius:4px;padding:0 3px;line-height:1}
.ed-tab-close:hover{opacity:1;background:var(--line);color:var(--warn)}
.ed-tab-new{display:flex;align-items:center;padding:4px 11px;color:var(--text-dim);cursor:pointer;font-size:15px;border-radius:6px}
.ed-tab-new:hover{background:var(--bg-1);color:var(--text)}

.ed-find{display:flex;align-items:center;gap:6px;padding:6px 8px;border-bottom:1px solid var(--line-soft);background:transparent;flex-wrap:wrap}
.ed-find-in{height:26px;padding:0 8px;background:var(--bg-1);color:var(--text);border:1px solid var(--line);border-radius:6px;font-size:12px;outline:none;min-width:150px}
.ed-find-in:focus{border-color:var(--accent)}
.ed-find .btn{padding:4px 9px;font-size:11px}
.ed-find-case{display:flex;align-items:center;gap:3px;color:var(--text-dim);font-size:11px;user-select:none;cursor:pointer}
.ed-find-info{color:var(--text-dim);font-size:11px;margin-left:auto}
.ed-find-x{cursor:pointer;color:var(--text-dim);padding:2px 6px;border-radius:5px}
.ed-find-x:hover{background:var(--bg-1);color:var(--text)}

/* ===== PDF-App ===== */
.pdf-wrap{display:flex;flex-direction:column;height:100%;background:var(--panel-solid)}
.pdf-tabs{display:flex;gap:2px;padding:6px 8px 0;border-bottom:1px solid var(--line);background:var(--panel-solid)}
.pdf-tab{padding:7px 13px;border:1px solid var(--line);border-bottom:none;border-radius:8px 8px 0 0;background:var(--bg-1);color:var(--text-dim);cursor:pointer;font-size:12px}
.pdf-tab.active{background:var(--panel-solid);color:var(--text);border-color:var(--accent)}
.pdf-panel{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.pdf-info{color:var(--text-dim);font-size:12px;line-height:1.5}
.pdf-list{border:1px solid var(--line);border-radius:8px;overflow:auto;max-height:230px}
.pdf-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line-soft);cursor:pointer}
.pdf-item:hover{background:var(--bg-1)}
.pdf-item-nm{font-size:12px;font-family:ui-monospace,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdf-empty{padding:14px;color:var(--text-dim);text-align:center;font-size:12px}
.pdf-row{display:flex;align-items:center;gap:8px}
.pdf-range{flex:1}
.pdf-qlbl{font-size:12px;color:var(--text-dim);white-space:nowrap}
.pdf-pathin{flex:1;height:30px;padding:0 9px;background:var(--bg-1);color:var(--text);border:1px solid var(--line);border-radius:7px;font-size:12px;outline:none}
.pdf-pathin:focus{border-color:var(--accent)}
.pdf-area{flex:1;min-height:220px;resize:none;padding:10px;background:var(--bg-1);color:var(--text);border:1px solid var(--line);border-radius:8px;font-size:12.5px;line-height:1.5;outline:none}
.pdf-area:focus{border-color:var(--accent)}
.pdf-select{height:32px;padding:0 9px;background:var(--bg-1);color:var(--text);border:1px solid var(--line);border-radius:7px;font-size:12px;outline:none}
.pdf-view{flex:1;min-height:280px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#525659}
.pdf-embed{width:100%;height:100%;min-height:280px;border:0}

/* Editor-Inhalt bewusst OPAK: nur die Titelleiste (WM) uebernimmt die
   globale Transparenz. Zielt direkt auf den Inhaltsbereich des Editor-Fensters. */


/* ===== Web-Frame ===== */
.wf-wrap{display:flex;flex-direction:column;height:100%;background:var(--panel-solid)}
.wf-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line);background:var(--metal-sheen)}
.wf-addr{flex:1;font-size:12px;font-family:ui-monospace,monospace;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-badge{font-size:10px;padding:1px 6px;border-radius:4px;background:var(--accent);color:#fff}
.wf-badge:empty{display:none}
.wf-bar .btn{padding:4px 9px;font-size:11px}
.wf-frame{flex:1;width:100%;border:0;background:#fff}
.wf-note{padding:4px 10px;font-size:11px;color:var(--text-faint);border-top:1px solid var(--line-soft)}

/* ===== (ehem. eingebettete App, entfernt) ===== */

/* ===== FilePicker ===== */
.fp-panel{width:440px;max-width:92vw}
.fp-pathrow{display:flex;align-items:center;gap:8px;margin:6px 0 8px}
.fp-up{width:30px;height:30px;border:1px solid var(--line);border-radius:7px;background:var(--bg-1);color:var(--text);cursor:pointer}
.fp-up:hover:not(:disabled){border-color:var(--accent)}
.fp-up:disabled{opacity:.4;cursor:default}
.fp-path{flex:1;min-width:0;font-size:12px;font-family:ui-monospace,monospace;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
.fp-list{height:260px;overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--panel-solid)}
.fp-item{padding:7px 11px;font-size:12.5px;cursor:pointer;border-bottom:1px solid var(--line-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-item.dir{color:var(--text)}
.fp-item.file{color:var(--text-dim)}
.fp-item:hover{background:var(--bg-1)}
.fp-item.sel{background:color-mix(in srgb, var(--accent) 22%, transparent);color:var(--text)}
.fp-empty{padding:16px;text-align:center;color:var(--text-faint);font-size:12px}
.fp-namerow{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.fp-namelbl{font-size:11px;color:var(--text-dim)}
.fp-name{height:32px;padding:0 10px;background:var(--bg-1);color:var(--text);border:1px solid var(--line);border-radius:7px;font-size:12.5px;outline:none}
.fp-name:focus{border-color:var(--accent)}

/* ===== Datei-Eigenschaften ===== */
.fx-props{display:flex;flex-direction:column;gap:6px;margin:6px 0 4px}
.fx-prop{display:flex;gap:10px;font-size:12.5px}
.fx-prop-k{flex:0 0 120px;color:var(--text-dim)}
.fx-prop-v{flex:1;color:var(--text);word-break:break-word}

/* Terminal: ls-Ausgabe als ausgerichteter Block (Umbrueche + Leerzeichen erhalten) */
.term-out .term-ls{white-space:pre;font-variant-numeric:tabular-nums}

/* kleiner Sekundaerbutton (z.B. "Auto" neben Farbwaehlern) */
.btn.mini{height:26px;padding:0 9px;font-size:11px;margin-left:6px}
.kv .v .set-color{vertical-align:middle}

/* Einstellungen: Reiter */
.set-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px;border-bottom:1px solid var(--line);padding-bottom:8px}
.set-tab-btn{padding:6px 12px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text-dim);cursor:pointer;font-size:12.5px}
.set-tab-btn:hover{background:var(--bg-1);color:var(--text)}
.set-tab-btn.active{background:var(--bg-1);color:var(--text);border-color:var(--accent)}
.set-pane[hidden]{display:none}

/* ===== Seed-Editor ===== */
.seed-wrap{display:flex;flex-direction:column;height:100%;background:var(--panel-solid)}
.seed-bar{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.seed-scope{height:32px;padding:0 10px;background:var(--bg-1);color:var(--text);border:1px solid var(--line);border-radius:7px;font-size:12.5px;outline:none}
.seed-own{display:flex;align-items:center;gap:5px;color:var(--text-dim);font-size:12px;cursor:pointer}
.seed-list{flex:1;overflow:auto;padding:6px 8px}
.seed-row{display:flex;align-items:center;gap:9px;padding:6px 8px;border-bottom:1px solid var(--line-soft)}
.seed-ico{flex:0 0 auto}
.seed-path{font-family:ui-monospace,monospace;font-size:12.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.seed-spacer{flex:1}
.seed-empty{padding:16px;text-align:center;color:var(--text-dim);font-size:12px;line-height:1.5}
.seed-foot{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}
.btn.mini.danger:hover{color:var(--warn)}
.seed-ta{width:100%;box-sizing:border-box;min-height:220px;margin-top:8px;padding:10px;background:var(--bg-1);color:var(--text);border:1px solid var(--line);border-radius:8px;font-size:12.5px;line-height:1.5;outline:none;resize:vertical}
.seed-ta:focus{border-color:var(--accent)}

/* Datei-Explorer: Drag & Drop */
.fx-dragging{opacity:.45}
.fx-drop-hi{outline:2px solid var(--accent);outline-offset:-2px;background:color-mix(in srgb,var(--accent) 16%,transparent)!important;border-radius:8px}
/* Ablage ins aktuell geoeffnete Verzeichnis (freier Bereich der Liste). */
.fx-drop-cwd{outline:2px dashed color-mix(in srgb,var(--accent) 60%,transparent);outline-offset:-6px;border-radius:8px}

/* FS-Metadaten: versteckt, Custom-Icons, Verknuepfungen */
.fx-hidden{opacity:.5}
.fx-ico-custom{font-size:1.15em;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.fx-tile .fx-ico-custom{font-size:2em}
.fx-linkmark{position:absolute;right:6px;bottom:6px;font-size:.9em;color:var(--accent);text-shadow:0 1px 2px rgba(0,0,0,.5)}
.fx-tico{position:relative}
.fx-btn.on,.tb-btn.on{color:var(--accent);border-color:var(--accent)}

/* Freigabe-Dialog (ACL) */
.share-list{max-height:300px;overflow:auto;margin:8px 0}
.share-row{display:flex;align-items:center;gap:10px;padding:5px 2px}
.share-name{flex:1;font-size:12.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.share-row .set-select{height:28px;font-size:12px}

/* Chat: Tipp-Anzeige, Nachrichten-Animation, Gruppenchats */
.sv-typing{height:0;overflow:hidden;opacity:0;transition:height .18s ease,opacity .18s ease;
  display:flex;align-items:center;gap:6px;padding:0 12px;font-size:11.5px;color:var(--muted)}
.sv-typing.on{height:22px;opacity:1}
.sv-dots{display:inline-flex;gap:3px}
.sv-dots i{width:4px;height:4px;border-radius:50%;background:var(--muted);display:block;
  animation:svblink 1.2s infinite ease-in-out}
.sv-dots i:nth-child(2){animation-delay:.18s}
.sv-dots i:nth-child(3){animation-delay:.36s}
@keyframes svblink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}
.sv-msg.sv-new{animation:svpop .28s cubic-bezier(.2,.9,.3,1.2)}
@keyframes svpop{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
.sv-msg-from{display:block;font-size:10.5px;color:var(--accent);margin-bottom:2px;font-weight:600}
.sv-secbtn{margin-left:auto;height:22px;padding:0 8px;font-size:11px}
.sv-sec{display:flex;align-items:center}


/* Container-Modus im Terminal: Rohausgabe (Zeilenumbrueche erhalten) */
.term-raw{white-space:pre-wrap;word-break:break-word;font-family:inherit;margin:0}

/* Seed-Editor: Hinweistext und Dateigroesse */
.seed-hint{width:100%;font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.45}
.seed-size{font-size:11px;color:var(--muted);margin-left:8px}

/* Benutzerverwaltung: deaktivierte Konten/Gruppen, Sitzungszaehler */
.um-off{opacity:.55}
.um-off .lb{text-decoration:line-through}
.um-badge.off{background:var(--danger,#e0504a);color:#fff}
.um-badge.on{background:var(--accent);color:#04222b}

/* ---------- Desktop-Symbole ---------- */
/* Der Layer liegt ueber dem Hintergrund, faengt aber nur dort Klicks, wo ein Symbol ist.
   So bleibt der Rechtsklick auf die freie Flaeche erhalten. */
.dsk-layer{position:absolute;inset:0;pointer-events:none;z-index:1}
/* Abwurfzone: nur bei Objekten von ausserhalb des Desktops, bewusst dezent
   (kein Rahmen um den ganzen Bildschirm). */
.dsk-layer.drop{background:color-mix(in srgb, var(--accent) 5%, transparent)}
/* Ordner-Symbol, in das hineingelegt wird */
.dsk-icon.dropinto{background:color-mix(in srgb, var(--accent) 28%, transparent);outline:1px solid var(--accent)}
.dsk-icon.dropinto .dsk-ic{transform:scale(1.12)}

.dsk-icon{
  position:absolute;width:80px;padding:6px 2px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  border-radius:10px;cursor:default;user-select:none;pointer-events:auto;
  transition:background .12s, transform .06s;
}
.dsk-icon:hover{background:color-mix(in srgb, var(--text) 8%, transparent)}
.dsk-icon.sel{background:color-mix(in srgb, var(--accent) 22%, transparent);outline:1px solid var(--accent)}
.dsk-icon.drag{opacity:.45}
.dsk-icon.drag.sel{outline:none;background:transparent}   /* beim Ziehen keinen Auswahlrahmen zeigen */

.dsk-ic{font-size:30px;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.dsk-ic.is-app{font-size:26px}
.dsk-lb{
  font-size:11.5px;text-align:center;line-height:1.25;color:var(--text);
  max-width:76px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  text-shadow:0 1px 3px rgba(0,0,0,.6);word-break:break-word;
}
.dsk-appsel{width:100%;padding:8px;border-radius:8px;background:var(--bg-1);color:var(--text);border:1px solid var(--line)}

/* Vorlagen-Editor: implizite Ordner, Anwenden-Dialog */
.seed-implicit{opacity:.6}
.seed-implicit .seed-path{font-style:italic}
.seed-applylist{max-height:240px;overflow:auto;margin:10px 0;border:1px solid var(--line);border-radius:8px;padding:6px}
.seed-applyrow{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:6px;font-size:12.5px}
.seed-applyrow:hover{background:var(--bg-1)}