/* ==========================================================================
ctOS :: Central Operating System — Kern-Stylesheet
--------------------------------------------------------------------------
01 Schriften (selbst gehostet, WOFF2)
02 Token
03 Reset & Basis
04 Bewegungs-Vokabular
05 Ambiente-Ebenen (Grid, Scanlines, Grain, Sweep, Rahmen)
06 Boot-Sequenz
07 App-Layout
08 Kopf-Statusleiste
09 Linke Schiene (Navigation)
10 Fuss-Telemetrie (Ticker)
11 Panel = ctOS-Rahmen
========================================================================== */
/* == 01 Schriften ======================================================== */
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:500;font-display:swap;
src:url(/static/vendor/fonts/rajdhani-500-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:500;font-display:swap;
src:url(/static/vendor/fonts/rajdhani-500-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:600;font-display:swap;
src:url(/static/vendor/fonts/rajdhani-600-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:600;font-display:swap;
src:url(/static/vendor/fonts/rajdhani-600-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:700;font-display:swap;
src:url(/static/vendor/fonts/rajdhani-700-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:700;font-display:swap;
src:url(/static/vendor/fonts/rajdhani-700-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
src:url(/static/vendor/fonts/jetbrains-mono-400-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
src:url(/static/vendor/fonts/jetbrains-mono-400-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
src:url(/static/vendor/fonts/jetbrains-mono-500-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
src:url(/static/vendor/fonts/jetbrains-mono-500-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;
src:url(/static/vendor/fonts/jetbrains-mono-700-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;
src:url(/static/vendor/fonts/jetbrains-mono-700-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
src:url(/static/vendor/fonts/inter-400-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
src:url(/static/vendor/fonts/inter-400-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
src:url(/static/vendor/fonts/inter-500-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
src:url(/static/vendor/fonts/inter-500-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
src:url(/static/vendor/fonts/inter-600-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
src:url(/static/vendor/fonts/inter-600-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* == 02 Token ============================================================ */
/* Spezifitaet 0,2,0 — die Altsheets setzen ihre Token unter
:root[data-theme="dark"]; gleichziehen, damit die Reihenfolge entscheidet.
(Nach dem Teardown in P7 haette auch :root gereicht.) */
:root,
:root[data-theme="dark"]{
/* Struktur */
--bg:#04070c;
--bg-rail:#060a11;
--surface:#0a1119;
--surface-2:#101a25;
--surface-inset:#02050a;
--border:#16303f;
/* Vorgabe war #1f4d63; das erreicht nur 2,2:1 gegen --bg. Fuer die
Barrierefreiheits-Zusage (>= 3:1 an UI-Kanten) auf 3,4:1 angehoben.
--border bleibt die dekorative Haarlinie, --border-strong ist die
bedeutungstragende Kante (aktiver Rahmen, Eingabefelder, Knoepfe). */
--border-strong:#2a6a86;
/* Typografie */
--text:#e8fbff;
--text-default:#a8ccd9;
--text-muted:#8fb4c4;
--text-dim:#6d95a7;
/* Systemstimme */
--accent:#00e5ff;
--accent-strong:#00b8d4;
--accent-contrast:#02121a;
--accent-bg:rgba(0,229,255,.10);
--accent-line:rgba(0,229,255,.42);
/* Semantik */
--ok:#2bff88; --ok-bg:rgba(43,255,136,.10);
--warn:#ffb300; --warn-bg:rgba(255,179,0,.12);
--danger:#ff5a72; --danger-bg:rgba(255,46,77,.12);
/* ctOS-Extras */
--ctos-hack:#ff9d2e;
--ctos-trace:#c07bff;
--ctos-glow:0 0 12px rgba(0,229,255,.35);
--ctos-glow-s:0 0 4px rgba(0,229,255,.5);
--grid:rgba(0,229,255,.045);
--row-hover:rgba(0,229,255,.055);
--shadow:0 0 0 1px rgba(0,229,255,.06),0 18px 50px -24px #000;
--shadow-sm:0 0 0 1px rgba(0,229,255,.05);
/* Geometrie — ctOS hat keine weichen Ecken */
--radius:0px;
--radius-sm:0px;
/* Dichte (Runde 71) — die Oberflaeche war zu eng gesetzt: 14 px Panel-
Innenabstand, 30 px hohe Knoepfe und 4-px-Abstaende haben alles
zusammengequetscht. Alle Abstaende haengen jetzt an diesen vier Werten,
damit sich die Dichte an EINER Stelle nachziehen laesst. */
--pad-panel:18px; /* Innenabstand in Panels */
--gap-stack:20px; /* Abstand zwischen Panels/Abschnitten */
--gap-row:10px; /* Abstand innerhalb einer Zeile */
--ctl-h:34px; /* Mindesthoehe von Knoepfen und Eingabefeldern */
--rail-w:250px;
--rail-w-collapsed:60px;
/* Aktuell gueltige Schienenbreite — body.ctos-rail-collapsed schaltet um. */
--rail-now:var(--rail-w);
--strip-top:28px;
--strip-bottom:22px;
--font-sans:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
--font-display:'Rajdhani','Inter',system-ui,sans-serif;
/* Von den Altmodulen erwartete Aliasse */
--text-default:#a8ccd9;
--panel:var(--surface);
--panel-2:var(--surface-2);
--line:var(--border);
--muted:var(--text-muted);
--ok-strong:#19d96e;
--gold:var(--warn);
}
/* ctOS DAYLIGHT — dieselbe Geometrie, invertierte Werte. */
:root[data-theme="light"]{
--bg:#eef4f7;
--bg-rail:#e3edf1;
--surface:#f7fbfc;
--surface-2:#e7f0f4;
--surface-inset:#ffffff;
--border:#b3cbd6;
--border-strong:#4a8298; /* 3,8:1 gegen --bg */
--text:#062028;
--text-default:#0d2733;
--text-muted:#3f6b7c;
--text-dim:#4f7788; /* 4,7:1 — war #5d8496 mit nur 3,9:1 */
/* Vorgabe war #0090b0; das erreicht auf --surface nur 3,6:1 und traegt
als Systemstimme auch 10-11-px-Text. Eine Stufe dunkler bringt 4,4:1
und Weiss darauf 4,5:1. */
--accent:#00819e;
--accent-strong:#00667d;
--accent-contrast:#ffffff;
--accent-bg:rgba(0,129,158,.12);
--accent-line:rgba(0,129,158,.5);
--ok:#0b7a41; --ok-bg:rgba(11,122,65,.12);
--warn:#8a5a00; --warn-bg:rgba(179,125,0,.16);
--danger:#bc0b28; --danger-bg:rgba(188,11,40,.12);
--ctos-hack:#a24d00;
--ctos-trace:#6a2ba8;
--ctos-glow:0 0 12px rgba(0,129,158,.22);
--ctos-glow-s:0 0 4px rgba(0,129,158,.3);
--grid:rgba(0,90,120,.06);
--row-hover:rgba(0,129,158,.07);
--shadow:0 0 0 1px rgba(0,90,120,.10),0 14px 34px -22px rgba(6,32,40,.5);
--shadow-sm:0 0 0 1px rgba(0,90,120,.08);
}
/* == 03 Reset & Basis ==================================================== */
*,*::before,*::after{box-sizing:border-box}
html{
background:var(--bg);
color-scheme:dark;
-webkit-text-size-adjust:100%;
}
:root[data-theme="light"]{color-scheme:light}
body{
margin:0;
min-height:100vh;
background:var(--bg);
color:var(--text-default);
font-family:var(--font-sans);
font-size:14px;
line-height:1.55;
letter-spacing:0;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6,
.eyebrow,.side-title,.nav-name,
.ctos-label,.ctos-head-title{
font-family:var(--font-display);
text-transform:uppercase;
letter-spacing:.12em;
font-weight:600;
color:var(--text);
margin:0;
}
h1{font-size:18px}
h2{font-size:18px}
h3{font-size:14px}
h4,h5,h6{font-size:12px}
code,kbd,samp,pre,.mono,
input[type="number"],
.ctos-num,.ctos-id{
font-family:var(--font-mono);
font-variant-numeric:tabular-nums;
}
/* Nutzer-Inhalte bleiben lesbar: kein Uppercase, keine Sperrung. */
.chat-msg-text,.chat-msg-user,.file-name,.chat-conv-name,
.ai-msg,.nx-rail-msgs,.details-body,.preview-title{
font-family:var(--font-sans);
text-transform:none;
letter-spacing:0;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--accent);color:var(--accent-contrast)}
/* Grundierung fuer Knoepfe. Ueber :where() mit Spezifitaet 0 — jede
Komponentenregel schlaegt sie, aber Klassen, die nur Farbe und Schrift
setzen, fallen nicht mehr auf das graue ButtonFace des Browsers zurueck
(das traf .pet-admin-badge, .ac-fav, .fm-rube und .ctos-more).
Die Innenabstaende des Browsers bleiben stehen, damit Knoepfe ohne eigene
Angabe nicht zur Linie zusammenfallen. */
:where(button){
font-family:inherit;font-size:inherit;line-height:inherit;
color:inherit;
background:transparent;
border:0;
cursor:pointer;
}
:where(button):disabled{cursor:default}
/* Bracket-Fokusring statt outline:none */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
outline:1px solid var(--accent);
outline-offset:2px;
box-shadow:var(--ctos-glow-s);
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--surface-inset)}
::-webkit-scrollbar-thumb{background:var(--border);border:2px solid var(--surface-inset)}
::-webkit-scrollbar-thumb:hover{background:var(--border-strong)}
*{scrollbar-color:var(--border) var(--surface-inset);scrollbar-width:thin}
/* == 04 Bewegungs-Vokabular ============================================== */
@keyframes ctos-bracket-snap{
from{transform:scale(0);opacity:0}
to{transform:scale(1);opacity:1}
}
@keyframes ctos-scan-wipe{
from{transform:translateY(-2px);opacity:1}
to{transform:translateY(var(--wipe-h,100%));opacity:0}
}
@keyframes ctos-clip-in{
from{clip-path:inset(0 0 100% 0)}
to{clip-path:inset(0 0 0 0)}
}
@keyframes ctos-pulse-lock{
0%{box-shadow:0 0 0 1px var(--ok),0 0 18px var(--ok-bg)}
100%{box-shadow:0 0 0 1px transparent,0 0 0 transparent}
}
@keyframes ctos-breach{
0%{transform:translateX(0);border-color:var(--danger)}
20%{transform:translateX(-2px)}
40%{transform:translateX(2px)}
60%{transform:translateX(-1px)}
100%{transform:translateX(0);border-color:var(--border)}
}
@keyframes ctos-blink{50%{opacity:0}}
@keyframes ctos-grid-drift{to{background-position:0 44px,44px 0}}
@keyframes ctos-sweep{
0%{transform:translateY(-4vh);opacity:0}
8%{opacity:.5}
92%{opacity:.5}
100%{transform:translateY(104vh);opacity:0}
}
@keyframes ctos-grain{
0%,12.5%{transform:translate(0,0)}
12.6%,25%{transform:translate(-2%,-3%)}
25.1%,37.5%{transform:translate(-4%,2%)}
37.6%,50%{transform:translate(3%,-4%)}
50.1%,62.5%{transform:translate(-3%,3%)}
62.6%,75%{transform:translate(4%,1%)}
75.1%,87.5%{transform:translate(-1%,-2%)}
87.6%,100%{transform:translate(2%,4%)}
}
@keyframes ctos-signal{
0%,100%{opacity:.35}
50%{opacity:1}
}
@keyframes ctos-node-pulse{
0%{r:3;opacity:.9}
70%{r:11;opacity:0}
100%{r:3;opacity:0}
}
.ctos-fx-lock{animation:ctos-pulse-lock 180ms ease-out}
.ctos-fx-breach{animation:ctos-breach 240ms steps(6,end)}
/* bracket-snap: die Eckklammern fahren entlang ihrer Arme auf, 140 ms,
pro Ecke 20 ms versetzt. Nur beim Eintreten eines Panels. */
.ctos-fx-snap::before{animation:ctos-bracket-snap 140ms cubic-bezier(.2,.8,.2,1) both}
.ctos-fx-snap::after{animation:ctos-bracket-snap 140ms cubic-bezier(.2,.8,.2,1) 40ms both}
.ctos-fx-snap > .ctos-corner-tr{animation:ctos-bracket-snap 140ms cubic-bezier(.2,.8,.2,1) 20ms both}
.ctos-fx-snap > .ctos-corner-bl{animation:ctos-bracket-snap 140ms cubic-bezier(.2,.8,.2,1) 60ms both}
.ctos-fx-snap::before{transform-origin:top left}
.ctos-fx-snap::after{transform-origin:bottom right}
/* idle-tick: die letzte Stelle eines lebenden Werts flackert dezent, 2 s. */
.ctos-tick{position:relative}
.ctos-tick::after{
content:"";position:absolute;right:-1px;bottom:2px;
width:1px;height:.62em;
background:currentColor;opacity:0;
animation:ctos-idle-tick 2s steps(1,end) infinite;
}
@keyframes ctos-idle-tick{0%,92%{opacity:0}94%,98%{opacity:.55}100%{opacity:0}}
.ctos-fx-wipe{position:relative;animation:ctos-clip-in 220ms cubic-bezier(.2,.8,.2,1)}
.ctos-fx-wipe::after{
content:"";position:absolute;left:0;right:0;top:0;height:1px;
background:linear-gradient(90deg,transparent,var(--accent),transparent);
box-shadow:var(--ctos-glow);pointer-events:none;
animation:ctos-scan-wipe 220ms linear forwards;
}
/* == 05 Ambiente-Ebenen ================================================== */
.ctos-ambient{
position:fixed;inset:0;
pointer-events:none;
z-index:0;
}
.ctos-ambient > *{position:absolute;inset:0;pointer-events:none}
.ctos-grid{
background-image:
repeating-linear-gradient(0deg,var(--grid) 0 1px,transparent 1px 44px),
repeating-linear-gradient(90deg,var(--grid) 0 1px,transparent 1px 44px);
background-position:0 0,0 0;
-webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.35) 22%,#000 65%);
mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.35) 22%,#000 65%);
animation:ctos-grid-drift 20s linear infinite;
will-change:background-position;
}
body[data-grid="off"] .ctos-grid{display:none}
.ctos-scanlines{
background-image:repeating-linear-gradient(
to bottom,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);
opacity:.7;
}
.ctos-scanlines::after{
content:"";position:absolute;inset:0;
background:radial-gradient(120% 90% at 50% 45%,transparent 40%,rgba(0,0,0,.55) 100%);
}
:root[data-theme="light"] .ctos-scanlines{
background-image:repeating-linear-gradient(
to bottom,rgba(6,32,40,.035) 0 1px,transparent 1px 3px);
}
:root[data-theme="light"] .ctos-scanlines::after{
background:radial-gradient(120% 90% at 50% 45%,transparent 45%,rgba(6,32,40,.14) 100%);
}
.ctos-grain{
opacity:.03;
background-repeat:repeat;
background-size:180px 180px;
background-image:url("data:image/svg+xml;utf8,");
animation:ctos-grain 666ms steps(1,end) infinite;
will-change:transform;
}
.ctos-sweep{
inset:auto 0 auto 0;
height:2px;
background:linear-gradient(90deg,transparent,var(--accent-line) 20%,var(--accent) 50%,var(--accent-line) 80%,transparent);
mix-blend-mode:screen;
opacity:0;
animation:ctos-sweep 12s linear infinite;
will-change:transform;
}
:root[data-theme="light"] .ctos-sweep{mix-blend-mode:multiply}
/* Viewport-Eckklammern */
.ctos-frame span{
position:absolute;width:24px;height:24px;
border:0 solid var(--accent-line);
}
.ctos-frame span:nth-child(1){top:var(--strip-top);left:0;border-top-width:1px;border-left-width:1px}
.ctos-frame span:nth-child(2){top:var(--strip-top);right:0;border-top-width:1px;border-right-width:1px}
.ctos-frame span:nth-child(3){bottom:var(--strip-bottom);left:0;border-bottom-width:1px;border-left-width:1px}
.ctos-frame span:nth-child(4){bottom:var(--strip-bottom);right:0;border-bottom-width:1px;border-right-width:1px}
/* Effekt-Stufen.
theme-init.js setzt data-effects auf (vor dem ersten Paint),
app.js spaeter zusaetzlich auf — beide Traeger beruecksichtigen.
"reduced": Ambiente wird ruhig, Interaktions-Transitionen bleiben.
"off": alles steht still. */
:root[data-effects="reduced"] .ctos-grain,
body[data-effects="reduced"] .ctos-grain,
:root[data-effects="reduced"] .ctos-sweep,
body[data-effects="reduced"] .ctos-sweep{display:none}
:root[data-effects="reduced"] .ctos-grid,
body[data-effects="reduced"] .ctos-grid{animation:none}
:root[data-effects="reduced"] .ctos-ticker-track,
body[data-effects="reduced"] .ctos-ticker-track{transform:none !important}
:root[data-effects="off"] .ctos-grain,
body[data-effects="off"] .ctos-grain,
:root[data-effects="off"] .ctos-sweep,
body[data-effects="off"] .ctos-sweep,
:root[data-effects="off"] .ctos-scanlines,
body[data-effects="off"] .ctos-scanlines{display:none}
:root[data-effects="off"] .ctos-grid,
body[data-effects="off"] .ctos-grid{animation:none}
:root[data-effects="off"] .ctos-ticker-track,
body[data-effects="off"] .ctos-ticker-track{transform:none !important}
body[data-effects="off"] *,
body[data-effects="off"] *::before,
body[data-effects="off"] *::after,
:root[data-effects="off"] *,
:root[data-effects="off"] *::before,
:root[data-effects="off"] *::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
}
:root[data-effects="reduced"] .ctos-tick::after,
body[data-effects="reduced"] .ctos-tick::after,
:root[data-effects="off"] .ctos-tick::after,
body[data-effects="off"] .ctos-tick::after{display:none}
@media (prefers-reduced-motion:reduce){
.ctos-grain,.ctos-sweep{display:none}
.ctos-grid{animation:none}
.ctos-tick::after{display:none}
.ctos-fx-snap::before,.ctos-fx-snap::after,
.ctos-fx-snap > .ctos-corner-tr,.ctos-fx-snap > .ctos-corner-bl{animation:none}
*,*::before,*::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
scroll-behavior:auto !important;
}
}
/* == 06 Boot-Sequenz ===================================================== */
.app-splash{
position:fixed;inset:0;z-index:9999;
display:none;
place-items:center;
background:var(--bg);
font-family:var(--font-mono);
font-size:13px;
color:var(--text-default);
cursor:pointer;
}
html.show-splash .app-splash{display:grid}
.app-splash::before{
content:"";position:absolute;inset:0;
background-image:
repeating-linear-gradient(0deg,var(--grid) 0 1px,transparent 1px 44px),
repeating-linear-gradient(90deg,var(--grid) 0 1px,transparent 1px 44px);
-webkit-mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent);
mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent);
}
.app-splash::after{
content:"";position:absolute;inset:0;
background-image:repeating-linear-gradient(to bottom,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);
}
.ctos-boot{
position:relative;z-index:1;
width:min(560px,92vw);
padding:22px 24px 20px;
background:rgba(4,7,12,.72);
border:1px solid var(--border);
box-shadow:var(--shadow);
}
:root[data-theme="light"] .ctos-boot{background:rgba(247,251,252,.86)}
.ctos-boot::before,.ctos-boot::after{
content:"";position:absolute;width:16px;height:16px;border:0 solid var(--accent);
}
.ctos-boot::before{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.ctos-boot::after{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}
.ctos-boot-head{
font-family:var(--font-display);
text-transform:uppercase;letter-spacing:.24em;
font-size:12px;color:var(--accent);
margin-bottom:14px;
text-shadow:var(--ctos-glow-s);
}
/* Platz fuer alle neun Startzeilen plus ZUGRIFF GEWAEHRT — sonst waechst der
Kasten waehrend des Tippens und die Sequenz springt. */
.ctos-boot-lines{min-height:246px}
.ctos-boot-line{white-space:pre;color:var(--text-muted);line-height:1.9;font-size:12.5px}
.ctos-boot-line b{color:var(--ok);font-weight:400}
.ctos-boot-line i{color:var(--warn);font-style:normal}
.ctos-boot-line.grant{color:var(--accent);font-size:14px;letter-spacing:.1em}
.ctos-boot-caret{
display:inline-block;width:7px;height:14px;
background:var(--accent);vertical-align:-2px;
animation:ctos-blink 1s steps(1,end) infinite;
}
.ctos-boot-skip{
margin-top:16px;font-size:10px;letter-spacing:.18em;
text-transform:uppercase;color:var(--text-dim);
}
/* Alt-Markup der Splash-Version, falls noch im DOM */
.app-splash-mark,.app-splash-title,.app-splash-bar{display:none}
/* == 07 App-Layout ======================================================= */
/* Die Schienenbreite laeuft ueber --rail-now, nicht ueber konkurrierende
Regeln auf .app-grid. Vorher haben sich :root[data-sidebar="rail"],
body.ctos-rail-collapsed und die 1400-px-Abfrage gegenseitig per
Spezifitaet ausgehebelt — die Intercept-Spalte fiel dabei unter die Seite
und der Einklapp-Knopf blieb wirkungslos. */
.app-grid{
position:relative;z-index:1;
display:grid;
grid-template-columns:var(--rail-now) minmax(0,1fr);
min-height:100vh;
padding-top:var(--strip-top);
padding-bottom:var(--strip-bottom);
}
.main{
display:flex;flex-direction:column;
min-width:0;
border-left:1px solid var(--border);
}
.content{
flex:1;
min-width:0;
padding:22px 24px 34px;
display:flex;flex-direction:column;gap:var(--gap-stack);
}
.tab-panel{display:none;flex-direction:column;gap:var(--gap-stack)}
.tab-panel.active{display:flex;animation:ctos-clip-in 220ms cubic-bezier(.2,.8,.2,1)}
/* Der alte Hintergrund-Layer wird von .ctos-ambient ersetzt. */
.bg-grid{display:none}
/* == 08 Kopf-Statusleiste ================================================ */
.ctos-strip{
position:fixed;left:0;right:0;z-index:80;
display:flex;align-items:center;
font-family:var(--font-mono);
font-size:10.5px;
letter-spacing:.08em;
background:var(--bg-rail);
color:var(--text-muted);
}
.ctos-strip-top{
top:0;height:var(--strip-top);
gap:14px;padding:0 12px 0 14px;
border-bottom:1px solid var(--border);
}
.ctos-strip-top .ctos-sys{
font-family:var(--font-display);
text-transform:uppercase;letter-spacing:.2em;
font-size:11px;color:var(--accent);
text-shadow:var(--ctos-glow-s);
white-space:nowrap;
}
.ctos-strip-clock{
margin-left:auto;margin-right:auto;
display:flex;gap:10px;align-items:baseline;
white-space:nowrap;
}
.ctos-strip-clock b{color:var(--text);font-weight:500;font-size:12px}
.ctos-strip-right{
display:flex;align-items:center;gap:14px;
margin-left:auto;white-space:nowrap;
}
.ctos-uplink{display:inline-flex;align-items:center;gap:6px;color:var(--ok)}
.ctos-uplink::before{
content:"";width:6px;height:6px;background:currentColor;
box-shadow:0 0 6px currentColor;
animation:ctos-signal 2.4s ease-in-out infinite;
}
.ctos-uplink[data-state="down"]{color:var(--danger)}
.ctos-uplink[data-state="wait"]{color:var(--warn)}
.ctos-strip-right .ctos-kv{color:var(--text-dim)}
.ctos-strip-right .ctos-kv b{color:var(--text);font-weight:500}
.ctos-strip-right .ctos-coins b{color:var(--warn)}
/* == 09 Linke Schiene ==================================================== */
/* Die Schiene ist eine eigene Scrollflaeche in Fensterhoehe. Vorher fehlte
die Hoehenbegrenzung: sie wuchs auf Seitenhoehe mit (gemessen 2272 px),
ihr overflow-y:auto lief nie an, und .ctos-storage mit margin-top:auto
parkte den Speicherbalken am Seitenende statt am Fuss der Schiene. */
.sidebar{
position:sticky;
top:var(--strip-top);
align-self:start;
height:calc(100dvh - var(--strip-top) - var(--strip-bottom));
display:flex;flex-direction:column;
gap:14px;
min-height:0;
padding:14px 12px 16px;
background:var(--bg-rail);
overflow-y:auto;
overflow-x:hidden;
}
/* Feste Hoehe statt inset:0 — in einer Scrollflaeche wuerde inset:0 sich
ueber die gesamte Scrolllaenge spannen statt ueber den sichtbaren Kopf. */
.sidebar::after{
content:"";position:absolute;top:0;left:0;right:0;height:200px;
pointer-events:none;
background:linear-gradient(180deg,var(--accent-bg),transparent);
opacity:.6;
}
.sidebar > *{position:relative;z-index:1}
.brand{display:flex;align-items:center;gap:10px;padding:2px 4px 10px;border-bottom:1px solid var(--border)}
.brand-mark{
display:grid;place-items:center;
width:34px;height:34px;flex:none;
border:1px solid var(--accent-line);
color:var(--accent);
font-family:var(--font-display);font-weight:700;font-size:16px;
letter-spacing:.04em;
box-shadow:inset 0 0 14px rgba(0,229,255,.12);
position:relative;
}
.brand-mark::before,.brand-mark::after{
content:"";position:absolute;width:6px;height:6px;border:0 solid var(--accent);
}
.brand-mark::before{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.brand-mark::after{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}
.brand-text{min-width:0}
.brand-text h1{
font-size:14px;letter-spacing:.16em;color:var(--text);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brand-sep{color:var(--accent)}
.brand-text p{
margin:1px 0 0;font-family:var(--font-mono);font-size:9.5px;
letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);
}
.nav{display:flex;flex-direction:column;gap:1px}
/* Gruppenueberschriften in der Schiene (Runde 71): vierzehn gleich
aussehende Knoten waren nicht mehr zu ueberblicken — Arbeiten, Spielen,
Gemeinschaft, System teilen sie in lesbare Bloecke. */
.nav-group{
padding:14px 8px 5px;
font-family:var(--font-mono);font-size:9px;letter-spacing:.24em;
text-transform:uppercase;color:var(--text-dim);
border-bottom:1px solid var(--border);
margin-bottom:3px;
}
.nav-group:first-child{padding-top:2px}
/* Eingeklappte Schiene: nur eine Trennlinie statt Text. */
body.ctos-rail-collapsed .nav-group{
padding:8px 0 0;margin:0 0 6px;font-size:0;letter-spacing:0;border-bottom:1px solid var(--border);
}
:root[data-sidebar="fixed"] body.ctos-rail-collapsed .nav-group{
padding:14px 8px 5px;margin-bottom:3px;font-size:9px;letter-spacing:.24em;
}
.nav-btn{
position:relative;
display:grid;
grid-template-columns:22px 1fr auto;
align-items:center;
gap:9px;
width:100%;
padding:7px 8px 7px 6px;
background:transparent;
border:0;
border-left:2px solid transparent;
color:var(--text-muted);
text-align:left;
cursor:pointer;
font-family:var(--font-display);
transition:background .12s linear,color .12s linear,border-color .12s linear;
}
.nav-btn::before{
content:attr(data-node);
position:absolute;left:8px;top:50%;transform:translateY(-50%);
font-family:var(--font-mono);font-size:9px;color:var(--text-dim);
letter-spacing:0;
}
.nav-btn .nav-ico{
grid-column:1;
width:16px;height:16px;
margin-left:14px;
fill:none;stroke:currentColor;stroke-width:1.6;
stroke-linecap:square;stroke-linejoin:miter;
opacity:.85;
}
.nav-btn:hover{background:var(--row-hover);color:var(--text-default)}
.nav-btn.active{
background:var(--accent-bg);
border-left-color:var(--accent);
color:var(--text);
}
.nav-btn.active::before{color:var(--accent)}
.nav-btn.active .nav-ico{opacity:1;color:var(--accent);filter:drop-shadow(var(--ctos-glow-s))}
.nav-text{display:flex;flex-direction:column;min-width:0}
.nav-name{
font-size:12px;letter-spacing:.1em;font-weight:600;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
color:inherit;
}
.nav-sub{
font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;
color:var(--text-dim);text-transform:uppercase;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nav-btn.active .nav-sub{color:var(--accent-strong)}
.nav-badge{
grid-column:3;
min-width:18px;padding:1px 5px;
font-family:var(--font-mono);font-size:9.5px;
text-align:center;
background:var(--danger);color:#fff;
box-shadow:0 0 8px var(--danger-bg);
}
.nav-metric{
grid-column:3;
font-family:var(--font-mono);font-size:9.5px;
color:var(--text-dim);letter-spacing:.04em;
}
.nav-btn.active .nav-metric{color:var(--accent)}
/* Eingeklappte Schiene — nur die Variable umlegen, damit die 1400-px-Abfrage
ihre dritte Spalte behaelt. */
body.ctos-rail-collapsed{--rail-now:var(--rail-w-collapsed)}
/* Kein align-items:center — sonst schrumpfen .nav und .brand auf ihre
Inhaltsbreite (gemessen 72 px) und ragen aus der 60 px schmalen Schiene.
Die Knoepfe zentrieren ihren Inhalt stattdessen selbst. */
body.ctos-rail-collapsed .sidebar{padding-left:6px;padding-right:6px}
/* Marke und Einklapp-Knopf stapeln sich, sonst passen sie nicht nebeneinander. */
body.ctos-rail-collapsed .brand{flex-direction:column;align-items:center;gap:6px;padding:2px 0 10px}
body.ctos-rail-collapsed .nav-text,
body.ctos-rail-collapsed .brand-text,
body.ctos-rail-collapsed .sidebar-section,
body.ctos-rail-collapsed .nav-btn::before{display:none}
body.ctos-rail-collapsed .nav-btn{grid-template-columns:1fr;justify-items:center;padding:9px 0}
body.ctos-rail-collapsed .nav-btn .nav-ico{margin-left:0}
/* Einstellung „Seitenleiste: Fixiert (immer offen)" — bis jetzt gab es dazu
ueberhaupt keine Regel, die Auswahl war folgenlos. Fixiert heisst: kein
Einklapp-Knopf, und ein gespeicherter Einklapp-Zustand wird ignoriert. */
:root[data-sidebar="fixed"] .ctos-rail-toggle{display:none}
:root[data-sidebar="fixed"] body.ctos-rail-collapsed{--rail-now:var(--rail-w)}
:root[data-sidebar="fixed"] body.ctos-rail-collapsed .sidebar{padding-left:12px;padding-right:12px;align-items:stretch}
:root[data-sidebar="fixed"] body.ctos-rail-collapsed .nav-text{display:flex}
:root[data-sidebar="fixed"] body.ctos-rail-collapsed .brand-text{display:block}
:root[data-sidebar="fixed"] body.ctos-rail-collapsed .sidebar-section{display:flex}
:root[data-sidebar="fixed"] body.ctos-rail-collapsed .sidebar-section.hidden{display:none}
:root[data-sidebar="fixed"] body.ctos-rail-collapsed .nav-btn{grid-template-columns:22px 1fr auto;justify-items:stretch;padding:7px 8px 7px 6px}
:root[data-sidebar="fixed"] body.ctos-rail-collapsed .nav-btn::before{display:block}
:root[data-sidebar="fixed"] body.ctos-rail-collapsed .nav-btn .nav-ico{margin-left:14px}
.sidebar-section{display:flex;flex-direction:column;gap:6px}
.side-title{
font-size:9.5px;letter-spacing:.2em;color:var(--text-dim);
padding-bottom:4px;border-bottom:1px solid var(--border);
}
/* == 10 Fuss-Telemetrie ================================================== */
.ctos-strip-bottom{
bottom:0;height:var(--strip-bottom);
border-top:1px solid var(--border);
padding:0 12px;
overflow:hidden;
}
.ctos-ticker{
position:relative;flex:1;height:100%;overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
}
.ctos-ticker-track{
position:absolute;top:0;left:0;
display:flex;align-items:center;gap:36px;
height:100%;white-space:nowrap;
will-change:transform;
}
.ctos-ticker-track span{color:var(--text-dim)}
.ctos-ticker-track span b{color:var(--accent);font-weight:400}
.ctos-ticker-track span.warn b{color:var(--warn)}
.ctos-ticker-track span.ok b{color:var(--ok)}
.ctos-strip-bottom .ctos-tick-label{
color:var(--accent);letter-spacing:.2em;margin-right:12px;flex:none;
font-family:var(--font-display);text-transform:uppercase;font-size:10px;
}
/* == 11 Panel = ctOS-Rahmen ============================================== */
.panel{
position:relative;
background:var(--surface);
border:1px solid var(--border);
border-radius:0;
padding:0;
box-shadow:var(--shadow-sm);
min-width:0;
}
/* Eckklammern */
.panel::before,.panel::after{
content:"";position:absolute;width:12px;height:12px;
border:0 solid var(--accent-line);pointer-events:none;
transition:width .12s linear,height .12s linear;
}
.panel::before{top:-1px;left:-1px;border-top-width:1px;border-left-width:1px}
.panel::after{bottom:-1px;right:-1px;border-bottom-width:1px;border-right-width:1px}
.panel:hover::before,.panel:hover::after{width:16px;height:16px}
.panel > *{padding-left:var(--pad-panel);padding-right:var(--pad-panel)}
/* Der Kopf bekommt denselben Innenabstand wie der Rumpf darunter. Vorher
stand hier 0 — die Ueberschriften klebten am Rahmen, waehrend ihr Inhalt
eingerueckt war. */
.panel > .section-head{padding-left:var(--pad-panel);padding-right:var(--pad-panel)}
/* Unten Luft lassen: bisher schloss der letzte Inhalt buendig mit dem
Rahmen ab und wirkte abgeschnitten. */
.panel > *:last-child{padding-bottom:var(--pad-panel)}
.panel > .section-head:last-child{padding-bottom:0}
.section-head{
display:flex;align-items:center;justify-content:space-between;
gap:var(--gap-row);
min-height:42px;
padding:9px 14px;
margin-bottom:4px;
margin:0;
background:linear-gradient(180deg,var(--surface-2),transparent);
border-bottom:1px solid var(--border);
}
.section-head > div:first-child{min-width:0}
/* --- Einklappbare Panels (Runde 71) ------------------------------------
Gegen „zu viel auf einer Seite": Panels mit data-collapsible bekommen im
Kopf einen Pfeil. Zugeklappt bleibt nur die Ueberschrift stehen, der
Inhalt verschwindet. ctos.js merkt sich den Zustand je Panel. */
.panel[data-collapsible] > .section-head{cursor:pointer;user-select:none}
.panel[data-collapsible] > .section-head:hover{background:linear-gradient(180deg,var(--accent-bg),transparent)}
.ctos-fold{
flex:none;display:grid;place-items:center;
width:22px;height:22px;margin-left:2px;
border:1px solid var(--border);background:var(--surface-inset);
color:var(--text-dim);font-size:10px;line-height:1;
transition:transform .14s ease,color .12s linear,border-color .12s linear;
}
.panel[data-collapsible] > .section-head:hover .ctos-fold{color:var(--accent);border-color:var(--accent)}
.panel.is-collapsed > .ctos-fold-hint{display:block}
.panel.is-collapsed > *:not(.section-head):not(.ctos-fold-hint){display:none !important}
.panel.is-collapsed .ctos-fold{transform:rotate(-90deg)}
.panel > .ctos-fold-hint{
display:none;
padding-top:8px;padding-bottom:12px;
font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;
color:var(--text-dim);
}
.section-head h3{
font-size:12px;letter-spacing:.16em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 9 px auf 0,22em Sperrung war an der Lesbarkeitsgrenze — eine Stufe
groesser, etwas weniger gesperrt. */
.eyebrow{
font-size:10px;letter-spacing:.17em;color:var(--text-dim);
font-weight:500;
}
.section-head::after{
content:attr(data-id);
font-family:var(--font-mono);font-size:9.5px;color:var(--text-dim);
letter-spacing:.06em;flex:none;
}
.panel:focus-within{border-color:var(--border-strong);box-shadow:var(--ctos-glow)}
.panel:focus-within::before,.panel:focus-within::after{border-color:var(--accent)}
/* Statuspunkt im Kopf */
.ctos-dot{
display:inline-block;width:6px;height:6px;flex:none;
background:var(--ok);box-shadow:0 0 6px var(--ok);
}
.ctos-dot[data-state="load"]{background:var(--warn);box-shadow:0 0 6px var(--warn);animation:ctos-signal 1.2s ease-in-out infinite}
.ctos-dot[data-state="err"]{background:var(--danger);box-shadow:0 0 6px var(--danger)}
/* Panels ohne eigenen Kopf bekommen trotzdem Innenabstand */
.panel > .section-head + *{padding-top:12px}
.panel > *:last-child{padding-bottom:12px}
/* == 12 Topbar =========================================================== */
.topbar{
/* Unter dem festen Statusstreifen einrasten, nicht dahinter. Mit top:0
verschwanden beim Scrollen die oberen 28 px — Titel, Suchfeld und
Abzeichen — hinter dem deckenden Streifen (z-index 80). */
position:sticky;top:var(--strip-top);z-index:40;
display:flex;align-items:center;gap:10px;
min-height:52px;
padding:8px 16px;
background:var(--bg-rail);
border-bottom:1px solid var(--border);
}
.topbar-left{min-width:0;display:flex;align-items:baseline;gap:8px}
.topbar-left h2{
font-size:15px;letter-spacing:.16em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar-left h2::before{content:"// ";color:var(--accent);opacity:.7}
.ctos-burger{
display:none;
width:34px;height:34px;flex:none;
background:transparent;border:1px solid var(--border);
color:var(--text-default);cursor:pointer;
}
.ctos-burger svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.ctos-burger:hover{border-color:var(--accent-line);color:var(--accent)}
/* „Mehr" gehoert ausschliesslich in die untere Knotenleiste (ctos-mobile.css).
Ohne diese Basisregel stand der Knopf auf dem Desktop ungestylt in der
Schiene — grauer Kasten mit 210 px grossem Icon — und warf beim Klick den
Menue-Vorhang ueber die ganze Seite. */
.ctos-more{display:none}
/* Suchfeld als Terminal-Prompt */
.ctos-search{
display:flex;align-items:center;gap:8px;
flex:1;min-width:0;max-width:460px;
height:32px;padding:0 10px;
background:var(--surface-inset);
border:1px solid var(--border);
color:var(--text-muted);
font-family:var(--font-mono);font-size:11.5px;
cursor:pointer;text-align:left;
}
.ctos-search:hover{border-color:var(--accent-line);color:var(--text-default)}
.ctos-search-hint{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctos-search kbd{
font-family:var(--font-mono);font-size:9.5px;
padding:2px 5px;border:1px solid var(--border);
color:var(--text-dim);flex:none;
}
.ctos-prompt{color:var(--accent);font-family:var(--font-mono);font-weight:700;flex:none}
.ctos-sep{color:var(--accent);opacity:.8}
.top-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
/* Operator-Chip */
.ctos-operator{
display:flex;align-items:center;gap:8px;
height:34px;padding:0 10px 0 4px;
background:var(--surface);
border:1px solid var(--border);
color:var(--text-default);cursor:pointer;
}
.ctos-operator:hover{border-color:var(--accent-line)}
.ctos-avatar{
display:grid;place-items:center;
width:26px;height:26px;flex:none;overflow:hidden;
background:var(--accent-bg);border:1px solid var(--accent-line);
color:var(--accent);
font-family:var(--font-display);font-weight:700;font-size:13px;
}
.ctos-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.ctos-operator-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.ctos-operator-text strong{
font-family:var(--font-display);font-size:11.5px;letter-spacing:.08em;
color:var(--text);max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ctos-operator-text small{
font-family:var(--font-mono);font-size:8.5px;letter-spacing:.1em;
color:var(--text-dim);text-transform:uppercase;
display:flex;align-items:center;gap:4px;
}
.ctos-op-dot{
width:5px;height:5px;flex:none;background:var(--ok);
box-shadow:0 0 5px var(--ok);
}
.ctos-online-pill{
display:inline-flex;align-items:center;gap:5px;
font-size:10px;color:var(--text-muted);
}
/* Schienen-Klappknopf */
.ctos-rail-toggle{
margin-left:auto;flex:none;
width:22px;height:22px;
background:transparent;border:1px solid transparent;
color:var(--text-dim);cursor:pointer;
}
.ctos-rail-toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
.ctos-rail-toggle:hover{color:var(--accent);border-color:var(--border)}
body.ctos-rail-collapsed .ctos-rail-toggle svg{transform:scaleX(-1)}
/* == 13 Ankuendigung, Status, Ladehinweis ================================ */
.announce-bar{
display:flex;align-items:center;gap:10px;
padding:7px 12px;
background:var(--warn-bg);
border:1px solid var(--warn);
border-left-width:2px;
color:var(--text);
font-size:12.5px;
}
.announce-bar.hidden{display:none}
.announce-ico{color:var(--warn);flex:none}
.announce-x{
margin-left:auto;background:transparent;border:0;
color:var(--text-muted);cursor:pointer;font-size:16px;line-height:1;
}
.announce-x:hover{color:var(--danger)}
.status-line{
font-family:var(--font-mono);font-size:10.5px;
letter-spacing:.08em;color:var(--text-dim);
text-transform:uppercase;
}
.status-line::before{content:"> ";color:var(--accent)}
.status-line.error{color:var(--danger)}
.status-line.error::before{content:"! ";color:var(--danger)}
.status-line.ok{color:var(--ok)}
.ctos-loading{
padding:34px 20px;text-align:center;
font-size:11px;letter-spacing:.16em;color:var(--text-dim);
}
.ctos-loading::after{
content:"";display:inline-block;width:6px;height:11px;
margin-left:6px;background:var(--accent);vertical-align:-1px;
animation:ctos-blink 1s steps(1,end) infinite;
}
.ctos-ok{color:var(--ok);font-family:var(--font-mono);font-size:11px}
/* == 14 Uebersicht: Begruessung, Ziele, Warnband ========================= */
.ctos-hello{
display:flex;align-items:flex-end;justify-content:space-between;
gap:16px;flex-wrap:wrap;
padding:2px 0 8px;
border-bottom:1px solid var(--border);
}
.ctos-hello-main{min-width:0;flex:1}
.ctos-hello h2{font-size:22px;letter-spacing:.1em;margin-top:2px}
.ctos-hello-name{color:var(--accent);text-shadow:var(--ctos-glow-s)}
.ctos-hello p{margin:4px 0 0}
.ctos-recent{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ctos-recent.hidden{display:none}
.ctos-recent-label{
font-family:var(--font-display);font-size:9px;letter-spacing:.2em;
text-transform:uppercase;color:var(--text-dim);
}
.ctos-target{
position:relative;
padding:5px 10px;
background:transparent;
border:1px solid var(--border);
color:var(--text-default);
font-family:var(--font-display);font-size:11px;
letter-spacing:.1em;text-transform:uppercase;
cursor:pointer;
transition:color .12s,border-color .12s,background .12s;
}
.ctos-target:hover{
color:var(--ctos-hack);border-color:var(--ctos-hack);
background:rgba(255,157,46,.08);
}
.ctos-target::before{content:"[ "}
.ctos-target::after{content:" ]"}
.ctos-alert-band{display:flex;flex-direction:column;gap:1px}
.ctos-alert-band.hidden{display:none}
.ctos-alert{
display:flex;align-items:center;gap:10px;
width:100%;padding:7px 12px;
background:var(--warn-bg);
border:1px solid var(--border);
border-left:2px solid var(--warn);
color:var(--text);
font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
cursor:pointer;text-align:left;
}
.ctos-alert:hover{background:rgba(255,179,0,.18)}
.ctos-alert-ico{color:var(--warn);flex:none}
.ctos-alert-tag{
font-family:var(--font-display);font-size:9.5px;letter-spacing:.18em;
color:var(--warn);flex:none;
}
.ctos-alert-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* == 15 Stat-Module ====================================================== */
.ctos-stats{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
gap:1px;
background:var(--border);
border:1px solid var(--border);
}
.ctos-stats .panel{border:0;box-shadow:none}
.ctos-stats .panel::before,.ctos-stats .panel::after{display:none}
.ctos-stat .section-head{min-height:28px;padding:3px 12px}
.ctos-stat .section-head h3{font-size:11px}
.ctos-stat-body{
display:flex;flex-direction:column;gap:6px;
padding:10px 12px 12px;
}
.ctos-readout{
font-family:var(--font-mono);
font-variant-numeric:tabular-nums;
font-size:34px;line-height:1;font-weight:500;
color:var(--text);
letter-spacing:-.01em;
}
.ctos-readout.small{font-size:22px}
.ctos-delta{font-size:9.5px;letter-spacing:.1em;color:var(--text-dim);text-transform:uppercase}
.ctos-delta.up{color:var(--ok)}
.ctos-delta.down{color:var(--danger)}
.ctos-spark{width:100%;height:26px;display:block}
.ctos-spark path{fill:none;stroke:var(--accent);stroke-width:1.2;vector-effect:non-scaling-stroke}
.ctos-spark path.fill{fill:var(--accent-bg);stroke:none}
/* Balkenanzeige (Speicher) */
.ctos-meter{
height:4px;background:var(--surface-inset);
border:1px solid var(--border);overflow:hidden;
}
.ctos-meter > div{
height:100%;background:var(--accent);
box-shadow:0 0 8px var(--accent-line);
transition:width .4s cubic-bezier(.2,.8,.2,1);
}
.ctos-meter > div[data-level="warn"]{background:var(--warn);box-shadow:0 0 8px var(--warn-bg)}
.ctos-meter > div[data-level="crit"]{background:var(--danger);box-shadow:0 0 8px var(--danger-bg)}
.ctos-meter-head{
display:flex;justify-content:space-between;align-items:baseline;
font-family:var(--font-display);
font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);
}
.ctos-meter-head strong{color:var(--text);font-size:12px}
.ctos-meter-foot{font-size:9.5px;color:var(--text-dim);letter-spacing:.06em}
.ctos-storage{margin-top:auto}
/* == 16 City-Grid ======================================================== */
.ctos-ovr-grid{
display:grid;
grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
gap:14px;
}
.ctos-citygrid-wrap{position:relative;padding:0 !important}
.ctos-citygrid{
display:block;width:100%;height:auto;
background:var(--surface-inset);
}
.ctos-citygrid .ctos-roads line{
stroke:var(--accent);stroke-width:.5;opacity:.16;
vector-effect:non-scaling-stroke;
}
/* --- Stadtplan im Untergrund (Runde 72) --- */
.ctos-citygrid .ctos-city-blocks rect{
fill:var(--surface-2);
stroke:var(--border);stroke-width:.4;
vector-effect:non-scaling-stroke;
opacity:.72;
}
.ctos-citygrid .ctos-city-blocks rect.tall{
fill:var(--accent-bg);
stroke:var(--accent-line);
opacity:.9;
}
.ctos-citygrid .ctos-city-river{
fill:var(--accent);opacity:.07;
}
.ctos-citygrid .ctos-city-riverline{
fill:none;stroke:var(--accent);stroke-width:.6;opacity:.3;
vector-effect:non-scaling-stroke;
}
.ctos-citygrid .ctos-city-park{
fill:var(--ok);opacity:.08;
stroke:var(--ok);stroke-width:.5;stroke-dasharray:3 3;
vector-effect:non-scaling-stroke;
}
.ctos-citygrid .ctos-city-main line{
stroke:var(--accent);stroke-width:1;opacity:.3;
vector-effect:non-scaling-stroke;
}
.ctos-citygrid .ctos-city-hwy line{
stroke:var(--ctos-hack);stroke-width:1.4;opacity:.4;
vector-effect:non-scaling-stroke;
}
.ctos-citygrid .ctos-city-bridge line{
stroke:var(--warn);stroke-width:2;opacity:.5;
vector-effect:non-scaling-stroke;
}
.ctos-citygrid .ctos-city-labels text{
font-family:var(--font-display);font-size:8px;letter-spacing:.28em;
fill:var(--text-dim);opacity:.5;
pointer-events:none;
}
/* --- Anklickbare Knoten --- */
.ctos-citygrid .ctos-node{cursor:pointer}
.ctos-citygrid .ctos-node-hit{fill:transparent}
.ctos-citygrid .ctos-node:focus{outline:0}
.ctos-citygrid .ctos-node:focus-visible .ctos-node-ring{
opacity:1;stroke-width:1.6;
}
.ctos-citygrid .ctos-node.self .ctos-node-core{
stroke:var(--text);stroke-width:.8;
}
.ctos-citygrid .ctos-node-core{filter:drop-shadow(0 0 4px currentColor)}
.ctos-citygrid .ctos-node-ring{opacity:.55}
.ctos-citygrid .ctos-node-tagbg{fill:var(--bg);stroke:var(--border);stroke-width:.5;opacity:0}
.ctos-citygrid .ctos-node-tag{
font-family:var(--font-mono);font-size:9px;
fill:var(--text-muted);
}
.ctos-citygrid .ctos-node:hover .ctos-node-tagbg{opacity:.92}
.ctos-citygrid .ctos-node:hover .ctos-node-tag{fill:var(--text)}
.ctos-citygrid .ctos-node:hover .ctos-node-ring{
opacity:1;animation:ctos-node-pulse 1.2s ease-out infinite;
}
.ctos-citygrid .ctos-grid-empty{
font-family:var(--font-display);font-size:13px;letter-spacing:.24em;
fill:var(--text-dim);
}
.ctos-citygrid-legend{
display:flex;gap:14px;
padding:6px 12px;
font-size:9px;letter-spacing:.14em;color:var(--text-dim);
border-top:1px solid var(--border);
}
.ctos-citygrid-legend span{display:inline-flex;align-items:center;gap:5px}
.ctos-citygrid-legend i{width:6px;height:6px;display:inline-block}
.ctos-citygrid-legend i.on{background:var(--accent);box-shadow:0 0 5px var(--accent)}
.ctos-citygrid-legend i.away{background:var(--warn)}
.ctos-citygrid-legend i.busy{background:var(--danger)}
/* == 17 Ereignis-Strom =================================================== */
.ctos-eventpanel{display:flex;flex-direction:column;min-height:0}
.ctos-eventlog{
flex:1;
max-height:288px;min-height:180px;
overflow-y:auto;overflow-x:hidden;
padding:8px 12px 12px !important;
background:var(--surface-inset);
font-size:10.5px;line-height:1.75;
}
.ctos-ev{display:flex;gap:8px;white-space:nowrap}
.ctos-ev-t{color:var(--text-dim);flex:none}
.ctos-ev-x{color:var(--text-muted);min-width:0;overflow:hidden;text-overflow:ellipsis}
.ctos-ev-x b{color:var(--accent);font-weight:400}
.ctos-ev.ok .ctos-ev-x{color:var(--text-default)}
.ctos-ev.ok .ctos-ev-x b{color:var(--ok)}
.ctos-ev.warn .ctos-ev-x b{color:var(--warn)}
.ctos-ev.err .ctos-ev-x,.ctos-ev.err .ctos-ev-x b{color:var(--danger)}
/* == 18 Intercept (globaler Chat rechts) ================================= */
.ctos-intercept{
display:none;
flex-direction:column;gap:14px;
width:336px;flex:none;
padding:18px 16px 26px 0;
min-height:0;
}
@media (min-width:1400px){
.app-grid{grid-template-columns:var(--rail-now) minmax(0,1fr) auto}
.ctos-intercept{display:flex}
/* Im Chat-Knoten waere die Spalte doppelt — dort ausblenden. */
body:has(.tab-panel[data-panel="chat"].active) .ctos-intercept{display:none}
}
.ctos-intercept .panel{display:flex;flex-direction:column;min-height:0}
.ctos-intercept-msgs{
flex:1;min-height:180px;max-height:46vh;
overflow-y:auto;
padding:8px 12px !important;
background:var(--surface-inset);
display:flex;flex-direction:column;gap:8px;
}
.ctos-intercept-empty{
font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;
color:var(--text-dim);text-align:center;padding:20px 0;
}
.ctos-imsg{display:flex;flex-direction:column;gap:1px}
.ctos-imsg-head{display:flex;align-items:baseline;gap:8px}
.ctos-imsg-user{
font-family:var(--font-mono);font-size:10px;
color:var(--accent);letter-spacing:.04em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ctos-imsg-time{font-family:var(--font-mono);font-size:9px;color:var(--text-dim);flex:none;margin-left:auto}
/* Nutzerinhalt: normale Schrift, keine Sperrung, kein Uppercase. */
.ctos-imsg-text{
font-family:var(--font-sans);font-size:12.5px;line-height:1.5;
color:var(--text-default);text-transform:none;letter-spacing:0;
word-break:break-word;
}
.ctos-imsg-text i{color:var(--text-dim);font-style:normal}
.ctos-intercept-form{
display:flex;align-items:center;gap:8px;
padding:8px 12px !important;
border-top:1px solid var(--border);
}
.ctos-intercept-form input{
flex:1;min-width:0;height:28px;
background:var(--surface-inset);
border:1px solid var(--border);
color:var(--text);
font-family:var(--font-sans);font-size:12.5px;
padding:0 8px;
}
.ctos-intercept-form input:focus{outline:0;border-color:var(--accent-line);box-shadow:var(--ctos-glow-s)}
.ctos-intercept-form button{
width:28px;height:28px;flex:none;
background:var(--accent-bg);border:1px solid var(--accent-line);
color:var(--accent);cursor:pointer;
}
.ctos-intercept-form button svg{width:14px;height:14px;fill:currentColor;stroke:none}
.ctos-intercept-form button:hover{background:var(--accent);color:var(--accent-contrast)}
.ctos-intercept-users{
display:flex;flex-direction:column;gap:1px;
max-height:30vh;overflow-y:auto;
padding:8px 12px 12px !important;
}
.ctos-unode{
display:flex;align-items:center;gap:8px;
padding:3px 0;
font-family:var(--font-mono);font-size:11px;
}
.ctos-unode-name{
color:var(--text-default);min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-family:var(--font-sans);text-transform:none;
}
/* Signalstaerke-Balken */
.ctos-signal{display:inline-flex;align-items:flex-end;gap:1px;height:10px;flex:none}
.ctos-signal i{width:2px;background:var(--border);display:block}
.ctos-signal i:nth-child(1){height:4px}
.ctos-signal i:nth-child(2){height:7px}
.ctos-signal i:nth-child(3){height:10px}
.ctos-signal i.on{background:var(--accent);box-shadow:0 0 3px var(--accent-line)}
.ctos-unode[data-status="away"] .ctos-signal i.on{background:var(--warn);box-shadow:none}
.ctos-unode[data-status="busy"] .ctos-signal i.on{background:var(--danger);box-shadow:none}
.ctos-backdrop{
position:fixed;inset:0;z-index:60;
background:rgba(2,5,10,.72);
display:none;
}
/* Der Vorhang gehoert zur ausgeklappten Knotenleiste und damit nur ans
schmale Fenster — sonst legt ein verirrtes ctos-nav-open die ganze
Desktop-Oberflaeche dunkel. */
@media (max-width:860px){
body.ctos-nav-open .ctos-backdrop{display:block}
}
/* == 19 Befehlskonsole (cmdk) ============================================ */
.cmdk{
position:fixed;inset:0;z-index:200;
display:grid;place-items:start center;
padding-top:12vh;
background:rgba(2,5,10,.7);
}
.cmdk.hidden{display:none}
.cmdk-box{
position:relative;
width:min(680px,94vw);
background:var(--surface);
border:1px solid var(--border-strong);
box-shadow:var(--shadow),var(--ctos-glow);
animation:ctos-clip-in 180ms cubic-bezier(.2,.8,.2,1);
}
.cmdk-box::before,.cmdk-box::after{
content:"";position:absolute;width:14px;height:14px;border:0 solid var(--accent);
}
.cmdk-box::before{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.cmdk-box::after{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}
.cmdk-head{
padding:6px 12px;
font-family:var(--font-display);
font-size:9.5px;letter-spacing:.22em;color:var(--accent);
border-bottom:1px solid var(--border);
background:var(--surface-2);
}
.cmdk-input-row{
display:flex;align-items:center;gap:8px;
padding:10px 12px;
border-bottom:1px solid var(--border);
background:var(--surface-inset);
}
.cmdk-input{
flex:1;min-width:0;
background:transparent;border:0;
color:var(--text);
font-family:var(--font-mono);font-size:14px;
caret-color:var(--accent);
}
.cmdk-input:focus{outline:0}
.cmdk-list{max-height:52vh;overflow-y:auto}
.cmdk-foot{
padding:6px 12px;
border-top:1px solid var(--border);
font-family:var(--font-mono);
font-size:9.5px;letter-spacing:.08em;color:var(--text-dim);
background:var(--surface-2);
}
.cmdk-foot .mono{color:var(--text-muted)}
.hotkey-box{width:min(460px,94vw)}
.hotkey-title{
padding:8px 12px;
font-family:var(--font-display);font-size:11px;letter-spacing:.2em;
text-transform:uppercase;color:var(--accent);
border-bottom:1px solid var(--border);background:var(--surface-2);
}
.hotkey-list{padding:6px 0}
.hotkey-row{
display:flex;align-items:center;gap:12px;
padding:5px 12px;font-size:12px;color:var(--text-default);
}
.hotkey-row:hover{background:var(--row-hover)}
.hotkey-row .mono{
min-width:130px;flex:none;font-size:10.5px;
color:var(--accent);
}
/* == 20 Anmeldeterminal ================================================== */
body.login-shell{
display:grid;place-items:center;
min-height:100vh;
padding:calc(var(--strip-top) + 20px) 16px calc(var(--strip-bottom) + 20px);
}
.login-wrap{
position:relative;z-index:1;
width:min(430px,94vw);
padding:22px;
background:rgba(10,17,25,.9);
border:1px solid var(--border-strong);
box-shadow:var(--shadow),var(--ctos-glow);
}
:root[data-theme="light"] .login-wrap{background:rgba(247,251,252,.94)}
.login-wrap > *{padding-left:0;padding-right:0}
/* Kraeftigere Eckklammern als bei normalen Panels */
.login-wrap::before,.login-wrap::after{width:20px;height:20px;border-color:var(--accent)}
.login-wrap::before{border-top-width:2px;border-left-width:2px}
.login-wrap::after{border-bottom-width:2px;border-right-width:2px}
.login-brand{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.login-brand .brand-text h1{font-size:16px;letter-spacing:.16em}
.login-headline{
display:flex;align-items:center;gap:7px;
font-family:var(--font-mono);font-size:12px;
letter-spacing:.12em;color:var(--accent);
}
body.login-denied .login-headline{color:var(--danger)}
body.login-denied .login-headline .ctos-boot-caret{background:var(--danger)}
body.login-granted .login-headline{color:var(--ok)}
body.login-granted .login-headline .ctos-boot-caret{background:var(--ok)}
.login-wrap .muted.small{margin:4px 0 14px}
.login-form{display:flex;flex-direction:column;gap:11px}
.login-btn{width:100%;justify-content:center;margin-top:3px}
/* Scan-Balken beim Absenden */
.login-scan{
height:2px;margin:12px 0 2px;
background:var(--surface-inset);
border:1px solid var(--border);
overflow:hidden;opacity:0;
transition:opacity .15s linear;
}
.login-scan span{
display:block;width:34%;height:100%;
background:linear-gradient(90deg,transparent,var(--accent),transparent);
transform:translateX(-100%);
}
body.login-scanning .login-scan{opacity:1}
body.login-scanning .login-scan span{animation:ctos-login-scan 900ms linear infinite}
@keyframes ctos-login-scan{to{transform:translateX(400%)}}
.login-code{margin-top:14px;border-top:1px solid var(--border);padding-top:10px}
.login-code summary{
cursor:pointer;list-style:none;
font-family:var(--font-display);font-size:10.5px;
letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);
}
.login-code summary::-webkit-details-marker{display:none}
.login-code summary::before{content:"+ ";color:var(--accent)}
.login-code[open] summary::before{content:"- "}
.login-code summary:hover{color:var(--accent)}
.login-code .login-form{margin-top:10px}
.login-code-input{text-transform:uppercase}
.login-code-hint{font-size:10.5px;margin:8px 0 0;color:var(--text-dim)}
/* login.js setzt .shake bei Fehlschlag und .login-ok bei Erfolg */
.login-wrap.shake{animation:ctos-breach 240ms steps(6,end)}
.login-wrap.login-ok{animation:ctos-pulse-lock 320ms ease-out}
.login-shell .ctos-strip-bottom .ctos-ticker-track{animation:none;transform:none}
/* ==========================================================================
21 Hilfsklassen
========================================================================== */
.hidden{display:none !important}
.muted{color:var(--text-muted)}
.small{font-size:11.5px}
.num,.txt{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.clickable{cursor:pointer}
.danger,.danger-text{color:var(--danger)}
.compact{gap:4px}
.emoji{font-family:var(--font-sans);font-style:normal}
.yes{color:var(--ok)}
.no{color:var(--danger)}
.me{color:var(--accent)}
.dir,.is-dir{color:var(--accent)}
.online{color:var(--ok)}
.expired,.user-disabled{color:var(--text-dim);opacity:.65}
.settings-note{margin-top:10px;font-size:10.5px;color:var(--text-dim)}
.wrap-mobile{flex-wrap:wrap}
.detail{color:var(--text-muted);font-size:11.5px}
/* Zustands-Modifikatoren, die die Module frei kombinieren */
.show{display:block}
.done{color:var(--ok)}
.pinned{box-shadow:inset 2px 0 0 var(--warn)}
.collapsed{display:none}
.tree-node.collapsed > .tree-children,
.chat-mod-body.collapsed{display:none}
.rec{color:var(--danger)}
.rec::before{
content:"";display:inline-block;width:6px;height:6px;margin-right:5px;
background:var(--danger);box-shadow:0 0 5px var(--danger);
animation:ctos-signal 1.4s ease-in-out infinite;
}
.tr-up{color:var(--ok)}
.tr-up::before{content:"\25B2 "}
.tr-down{color:var(--danger)}
.tr-down::before{content:"\25BC "}
/* Alte Barrierefreiheits-Modi aus round5: bleiben funktionsfaehig */
body.high-contrast{--border:#5fa8c4;--border-strong:#8fd4ec;--text-default:#f2feff}
body.colorblind{--ok:#3ea6ff;--danger:#ffb300;--warn:#c07bff}
body.zen .sidebar,body.zen .topbar .top-actions,body.zen .ctos-strip-bottom{display:none}
.zen-btn{position:fixed;right:14px;bottom:calc(var(--strip-bottom) + 12px);z-index:70}
/* ==========================================================================
22 Knoepfe
========================================================================== */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:7px;
min-height:var(--ctl-h);padding:7px 14px;
background:var(--surface-2);
border:1px solid var(--border-strong);
border-radius:0;
color:var(--text-default);
font-family:var(--font-display);
font-size:11.5px;font-weight:600;
letter-spacing:.1em;text-transform:uppercase;
cursor:pointer;
white-space:nowrap;
transition:background .12s linear,color .12s linear,border-color .12s linear;
}
.btn:hover{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}
.btn:active{background:var(--accent);color:var(--accent-contrast)}
.btn:disabled,.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn:disabled:hover{background:var(--surface-2);border-color:var(--border-strong);color:var(--text-default)}
.btn-primary{
background:var(--accent);border-color:var(--accent);
color:var(--accent-contrast);
}
.btn-primary:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--accent-contrast);box-shadow:var(--ctos-glow)}
.btn-danger{background:var(--danger-bg);border-color:var(--danger);color:var(--danger)}
.btn-danger:hover{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-ghost{background:transparent;border-color:var(--border)}
.btn-ghost:hover{border-color:var(--accent-line)}
.btn-icon{
width:30px;min-width:30px;padding:0;flex:none;
}
.btn-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter}
.action-mini{min-height:24px;padding:2px 8px;font-size:10px;letter-spacing:.08em}
.btn.action-mini.btn-icon{width:24px;min-width:24px}
.toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.inline-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
.action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px}
/* ==========================================================================
23 Formularfelder
========================================================================== */
.field{
width:100%;
min-height:var(--ctl-h);padding:7px 11px;
background:var(--surface-inset);
border:1px solid var(--border-strong);
border-radius:0;
color:var(--text);
font-family:var(--font-sans);font-size:13px;
caret-color:var(--accent);
}
.field::placeholder{color:var(--text-dim)}
.field:focus{outline:0;border-color:var(--accent);box-shadow:var(--ctos-glow-s)}
.field:disabled{opacity:.5;cursor:not-allowed}
select.field{
appearance:none;
padding-right:26px;
background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%);
background-position:calc(100% - 14px) 13px,calc(100% - 9px) 13px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
font-family:var(--font-display);
letter-spacing:.06em;text-transform:uppercase;font-size:11.5px;
}
select.field option{background:var(--surface);color:var(--text);text-transform:none;letter-spacing:0}
textarea.field{min-height:64px;resize:vertical;line-height:1.5}
.slim-select{min-height:26px;padding-top:2px;padding-bottom:2px;font-size:10.5px}
.field-search{min-width:160px}
.field-num{max-width:100px}
input[type="number"].field{font-family:var(--font-mono)}
.field-wrap{display:flex;flex-direction:column;gap:4px;min-width:0}
.field-wrap > span{
font-family:var(--font-display);
font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
color:var(--text-muted);
}
.field-wrap > span b{color:var(--accent);font-weight:600}
.form-grid{display:flex;flex-direction:column;gap:11px}
/* Bereichsregler */
input[type="range"].field{
-webkit-appearance:none;appearance:none;
height:20px;padding:0;background:transparent;border:0;
}
input[type="range"].field:focus{box-shadow:none}
input[type="range"].field::-webkit-slider-runnable-track{
height:3px;background:var(--surface-inset);border:1px solid var(--border-strong);
}
input[type="range"].field::-webkit-slider-thumb{
-webkit-appearance:none;appearance:none;
width:10px;height:16px;margin-top:-8px;
background:var(--accent);border:0;
box-shadow:var(--ctos-glow-s);cursor:pointer;
}
input[type="range"].field::-moz-range-track{height:3px;background:var(--surface-inset);border:1px solid var(--border-strong)}
input[type="range"].field::-moz-range-thumb{width:10px;height:16px;border-radius:0;background:var(--accent);border:0;cursor:pointer}
/* Farbwahl */
.color-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.color-input{
width:38px;height:26px;padding:0;flex:none;
background:var(--surface-inset);
border:1px solid var(--border-strong);cursor:pointer;
}
.color-input::-webkit-color-swatch-wrapper{padding:2px}
.color-input::-webkit-color-swatch{border:0}
.accent-row{display:flex;gap:5px;flex-wrap:wrap}
.accent-swatch{width:20px;height:20px;border:1px solid var(--border-strong);cursor:pointer;padding:0}
.accent-swatch.active{border-color:var(--accent);box-shadow:var(--ctos-glow-s)}
.name-preview{font-family:var(--font-sans);font-size:13px;font-weight:600}
/* Kontrollkaestchen als ctOS-Marker */
.check-cell{display:inline-flex;align-items:center;flex:none;cursor:pointer}
.check-cell input{position:absolute;opacity:0;width:0;height:0}
.check-cell input + span{
display:block;width:15px;height:15px;
background:var(--surface-inset);
border:1px solid var(--border-strong);
position:relative;
}
.check-cell input:checked + span{border-color:var(--accent);background:var(--accent-bg)}
.check-cell input:checked + span::after{
content:"";position:absolute;inset:3px;
background:var(--accent);box-shadow:var(--ctos-glow-s);
}
.check-cell input:focus-visible + span{outline:1px solid var(--accent);outline-offset:2px}
.check-placeholder{display:inline-block;width:15px;height:15px}
/* Avatar-Wahl */
.avatar-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.avatar-preview{
display:grid;place-items:center;
width:34px;height:34px;flex:none;overflow:hidden;
background:var(--accent-bg);border:1px solid var(--accent-line);
color:var(--accent);font-family:var(--font-display);font-weight:700;
}
.avatar-preview-img,.avatar-preview img{width:100%;height:100%;object-fit:cover;display:block}
/* ==========================================================================
24 Abzeichen, Chips, Marken
========================================================================== */
.badge{
display:inline-flex;align-items:center;gap:5px;
padding:3px 8px;
background:var(--surface-2);
border:1px solid var(--border);
color:var(--text-muted);
font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;
white-space:nowrap;
}
.badge strong{color:var(--text);font-weight:500}
.badge-ok{border-color:var(--ok);color:var(--ok);background:var(--ok-bg)}
.badge-warn{border-color:var(--warn);color:var(--warn);background:var(--warn-bg)}
.badge-danger{border-color:var(--danger);color:var(--danger);background:var(--danger-bg)}
.badge-dot{width:6px;height:6px;flex:none;background:currentColor;box-shadow:0 0 5px currentColor}
.chart-badge{gap:6px}
.chart-badge span{color:var(--text-dim);text-transform:uppercase;letter-spacing:.12em;font-size:9px}
.meta-badges,.gallery-badges{display:flex;gap:4px;flex-wrap:wrap}
.meta-badge,.meta-fav,.meta-note,.meta-tag,.type-tag,.sk-tag{
display:inline-block;padding:1px 5px;
font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;
border:1px solid var(--border);color:var(--text-muted);
}
.meta-fav{border-color:var(--warn);color:var(--warn)}
.meta-tag{border-color:var(--accent-line);color:var(--accent)}
.type-tag{text-transform:uppercase}
.danger-chip{border-color:var(--danger);color:var(--danger);padding:1px 5px;font-size:9px;font-family:var(--font-mono)}
.ep-badge{border:1px solid var(--ctos-trace);color:var(--ctos-trace);padding:1px 4px;font-size:9px;font-family:var(--font-mono)}
.filter-chips{display:flex;gap:1px;flex-wrap:wrap}
.chip{
padding:4px 10px;
background:var(--surface-inset);
border:1px solid var(--border);
color:var(--text-muted);
font-family:var(--font-display);
font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
cursor:pointer;
}
.chip:hover{color:var(--text);border-color:var(--accent-line)}
.chip.active{
background:var(--accent-bg);border-color:var(--accent);color:var(--accent);
}
.chip.active::before{content:"[ "}
.chip.active::after{content:" ]"}
/* ==========================================================================
25 Layout-Raster
========================================================================== */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:14px}
.dashboard-grid,.dual-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1px;background:var(--border)}
.kpi-card{
display:flex;flex-direction:column;gap:2px;
padding:9px 11px;background:var(--surface);
}
.kpi-card span{
font-family:var(--font-display);font-size:9px;letter-spacing:.18em;
text-transform:uppercase;color:var(--text-dim);
}
.kpi-card strong{
font-family:var(--font-mono);font-variant-numeric:tabular-nums;
font-size:18px;color:var(--text);font-weight:500;
}
.stack-list{display:flex;flex-direction:column;gap:1px}
.info-row{
display:flex;align-items:center;justify-content:space-between;gap:var(--gap-row);
padding:9px 12px;
background:var(--surface-2);
border-left:2px solid transparent;
font-size:12.5px;
}
.info-row:hover{border-left-color:var(--accent-line);background:var(--row-hover)}
.info-row > span:first-child{color:var(--text-muted);min-width:0}
.info-row strong{
font-family:var(--font-mono);font-size:11.5px;color:var(--text);
text-align:right;font-weight:500;
}
label.info-row{cursor:pointer}
.token-list{display:flex;flex-direction:column;gap:1px}
.token{
display:flex;align-items:baseline;justify-content:space-between;gap:8px;
padding:3px 0;
font-family:var(--font-mono);font-size:10.5px;
}
.token span{color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;font-size:9px}
.token strong{
color:var(--text-default);font-weight:400;
max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fav-list{display:flex;flex-direction:column;gap:1px}
.fav-item{
display:flex;align-items:center;gap:6px;
padding:4px 6px;
background:transparent;border:0;border-left:2px solid transparent;
color:var(--text-default);
font-size:12px;cursor:pointer;text-align:left;width:100%;
}
.fav-item:hover{background:var(--row-hover);border-left-color:var(--accent)}
.fav-ico{color:var(--warn);flex:none}
.fav-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fav-x{margin-left:auto;background:transparent;border:0;color:var(--text-dim);cursor:pointer;flex:none}
.fav-x:hover{color:var(--danger)}
.sidebar-foot{margin-top:auto;font-family:var(--font-mono);font-size:9px;color:var(--text-dim)}
.empty{
padding:26px 16px;text-align:center;
color:var(--text-dim);
font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
}
.empty p{margin:0 0 10px}
.pager{
display:flex;align-items:center;justify-content:center;gap:12px;
padding-top:10px;
}
.pager .muted{font-size:10.5px;letter-spacing:.08em}
/* ==========================================================================
26 Tabellen
========================================================================== */
/* Eigene Scrollflaeche, damit die Kopfzeile ueberhaupt einrasten kann:
overflow-x:auto zieht die Y-Achse mit, .table-shell war also schon vorher
der Scroll-Container fuer thead[position:sticky] — nur ohne Hoehen-
begrenzung. Die Kopfzeile ist deshalb mit der Seite weggescrollt. */
.table-shell{
overflow:auto;
max-height:calc(100dvh - var(--strip-top) - var(--strip-bottom) - 200px);
border:1px solid var(--border);
background:var(--surface-inset);
}
.data-table{width:100%;border-collapse:collapse;font-size:12.5px}
.data-table thead th{
position:sticky;top:0;z-index:1;
padding:9px 12px;
background:var(--surface-2);
border-bottom:1px solid var(--border-strong);
font-family:var(--font-display);
font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
color:var(--text-muted);
text-align:left;white-space:nowrap;
}
.data-table thead th.sortable{cursor:pointer;user-select:none}
.data-table thead th.sortable:hover{color:var(--accent)}
.sort-ind{display:inline-block;width:9px;color:var(--accent);font-family:var(--font-mono)}
.col-check{width:30px}
.data-table tbody td{
padding:8px 12px;
border-bottom:1px solid var(--border);
color:var(--text-default);
vertical-align:middle;
}
/* Zahlen, Groessen und Datumsangaben tabellarisch und rechts */
.data-table tbody td:nth-child(4),
.data-table tbody td:nth-child(5){
font-family:var(--font-mono);font-variant-numeric:tabular-nums;
text-align:right;white-space:nowrap;color:var(--text-muted);
}
.data-table tbody tr{position:relative}
.data-table tbody tr:hover{background:var(--row-hover)}
/* 1-px-Scanlinie beim Ueberfahren */
.data-table tbody tr:hover td:first-child::before{
content:"";position:absolute;left:0;right:0;top:0;height:1px;
background:var(--accent-line);
}
.data-table tbody tr.sel,.data-table tbody tr.row-focus{
background:var(--accent-bg);
box-shadow:inset 2px 0 0 var(--accent);
}
.data-table tbody tr.drop-target{box-shadow:inset 0 0 0 1px var(--accent)}
.data-table tbody tr.drag{opacity:.45}
.file-name{
font-family:var(--font-sans);text-transform:none;
color:var(--text);word-break:break-word;
}
.file-ico,.folder-emoji,.gallery-ico{flex:none;color:var(--accent)}
.row-actions{display:flex;gap:4px;justify-content:flex-end;flex-wrap:wrap}
.rows-more{padding:8px;text-align:center}
.inline-rename{width:100%}
.row-trash-out{animation:ctos-row-out 220ms ease-in forwards}
@keyframes ctos-row-out{to{opacity:0;transform:translateX(-14px)}}
/* Ladeplatzhalter */
.skeleton-row td{padding:6px 9px}
.sk,.sk-name,.sk-num,.sk-tag,.sk-check{
display:block;height:10px;
background:linear-gradient(90deg,var(--surface-2),var(--surface-inset),var(--surface-2));
background-size:200% 100%;
animation:ctos-sk 1.4s linear infinite;
}
.sk-name{width:60%}
.sk-num{width:40%;margin-left:auto}
.sk-tag{width:30%}
.sk-check{width:14px;height:14px}
@keyframes ctos-sk{to{background-position:-200% 0}}
/* ==========================================================================
27 Brotkrumen
========================================================================== */
.breadcrumbs{
display:flex;align-items:center;gap:4px;flex-wrap:wrap;
font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;
color:var(--text-dim);
}
.breadcrumbs::before{content:"PFAD";color:var(--accent);margin-right:6px;letter-spacing:.16em}
.crumb{
background:transparent;border:0;padding:1px 3px;
color:var(--text-muted);cursor:pointer;
font-family:inherit;font-size:inherit;
}
.crumb:hover{color:var(--accent)}
.crumb:last-child{color:var(--text)}
.crumb + .crumb::before{content:"/";color:var(--text-dim);margin-right:5px}
.bulk-bar{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:6px 10px;flex-wrap:wrap;
background:var(--accent-bg);
border:1px solid var(--accent-line);
border-left-width:2px;
}
.bulk-count{font-family:var(--font-mono);font-size:11px;color:var(--text)}
.bulk-count strong{color:var(--accent)}
.bulk-actions{display:flex;gap:4px;flex-wrap:wrap}
.global-results{border-top:1px solid var(--border);padding-top:10px;margin-top:10px}
.global-hit{
display:flex;align-items:center;gap:8px;
padding:4px 6px;background:transparent;border:0;border-left:2px solid transparent;
color:var(--text-default);cursor:pointer;width:100%;text-align:left;font-size:12px;
}
.global-hit:hover{background:var(--row-hover);border-left-color:var(--accent)}
.global-hit-name{font-family:var(--font-sans)}
.file-drop-overlay{
position:absolute;inset:0;z-index:5;
display:grid;place-items:center;
background:rgba(0,229,255,.06);
border:2px dashed var(--accent);
font-family:var(--font-display);
font-size:13px;letter-spacing:.16em;text-transform:uppercase;
color:var(--accent);
pointer-events:none;
}
/* ==========================================================================
28 Upload
========================================================================== */
.drop-zone{
position:relative;
border:1px dashed var(--border-strong);
background:var(--surface-inset);
padding:22px 16px !important;
text-align:center;
}
.drop-zone.drop-target{border-color:var(--accent);background:var(--accent-bg)}
.drop-core{display:flex;flex-direction:column;align-items:center;gap:7px}
.drop-ico{width:28px;height:28px;fill:none;stroke:var(--accent);stroke-width:1.4}
.drop-title{
font-family:var(--font-display);font-size:13px;
letter-spacing:.16em;text-transform:uppercase;color:var(--text);
}
.drop-core p{margin:0;max-width:44ch;font-size:11.5px;color:var(--text-muted)}
.upload-actions-stack{display:flex;flex-direction:column;gap:10px;padding-top:12px}
.upload-meta{margin-bottom:10px}
.progress-wrap{display:flex;flex-direction:column;gap:5px;padding-top:10px}
.progress-bar{
height:5px;
background:var(--surface-inset);
border:1px solid var(--border-strong);
overflow:hidden;
}
.progress-bar > div{
height:100%;width:0;
background:var(--accent);
box-shadow:0 0 8px var(--accent-line);
transition:width .2s linear;
}
/* SCAN-Balken: laufende Schraffur waehrend der Uebertragung */
.ctos-scanbar > div{
background-image:repeating-linear-gradient(
90deg,var(--accent) 0 6px,var(--accent-strong) 6px 12px);
background-size:12px 100%;
animation:ctos-scanbar 600ms linear infinite;
}
@keyframes ctos-scanbar{to{background-position:12px 0}}
.queue-list{display:flex;flex-direction:column;gap:1px}
.queue-item{
display:flex;align-items:center;gap:8px;
padding:5px 8px;
background:var(--surface-2);
border-left:2px solid var(--border);
font-size:12px;
}
.queue-item.queue-in{animation:ctos-clip-in 180ms ease-out}
.queue-item.queue-done{border-left-color:var(--ok)}
.queue-item.queue-err{border-left-color:var(--danger)}
.queue-item.queue-skip{border-left-color:var(--warn);opacity:.7}
.queue-main{min-width:0;flex:1;display:flex;flex-direction:column}
.queue-name{
font-family:var(--font-sans);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);
}
.queue-state{
font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
text-transform:uppercase;color:var(--text-dim);
}
.queue-check{flex:none}
.queue-ring{
width:14px;height:14px;flex:none;
border:1px solid var(--accent);
border-top-color:transparent;
animation:ctos-spin 700ms linear infinite;
}
@keyframes ctos-spin{to{transform:rotate(360deg)}}
/* ==========================================================================
29 Diagramme & Systemmonitor
========================================================================== */
.chart-frame{
position:relative;
background:var(--surface-inset);
border:1px solid var(--border);
overflow:hidden;
}
.chart{display:block;width:100%;height:190px}
.chart-small{height:130px}
.chart-meta{display:flex;gap:6px;flex-wrap:wrap}
.chart-grid-line{stroke:var(--accent);stroke-width:.5;opacity:.12;vector-effect:non-scaling-stroke}
.chart-line,.spark-line{fill:none;stroke:var(--accent);stroke-width:1.4;vector-effect:non-scaling-stroke}
.chart-area{fill:var(--accent-bg);stroke:none}
.chart-node{fill:var(--accent);stroke:var(--bg);stroke-width:1}
.chart-tick{font-family:var(--font-mono);font-size:8px;fill:var(--text-dim)}
.chart-line-in{animation:ctos-draw 700ms ease-out}
@keyframes ctos-draw{from{opacity:0}to{opacity:1}}
.health-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--border)}
.health-tile{
display:flex;align-items:center;gap:8px;
padding:7px 10px;background:var(--surface);
font-family:var(--font-mono);font-size:11px;
}
.health-tile.ok{color:var(--ok)}
.health-tile.warn{color:var(--warn)}
.health-tile.danger{color:var(--danger)}
.issue-card{
padding:7px 10px;
background:var(--warn-bg);
border-left:2px solid var(--warn);
font-size:12px;
}
.sys-monitor{display:flex;flex-direction:column;gap:6px;padding-top:10px}
.sys-row{display:grid;grid-template-columns:36px minmax(0,1fr) 46px;align-items:center;gap:8px}
.sys-row .eyebrow{font-size:9px;letter-spacing:.14em}
.sys-spark{width:100%;height:22px;display:block}
.sys-spark path{fill:none;stroke:var(--accent);stroke-width:1.2;vector-effect:non-scaling-stroke}
.sys-disk-bar{height:5px;background:var(--surface-inset);border:1px solid var(--border-strong);overflow:hidden}
.sys-disk-bar > div{height:100%;background:var(--accent);box-shadow:0 0 6px var(--accent-line)}
.sys-row strong{text-align:right;font-size:11px;color:var(--text)}
/* Ordner-Statistik-Balken */
.fs-bars{display:flex;flex-direction:column;gap:5px}
.fs-bar-row{display:grid;grid-template-columns:minmax(0,1fr) 70px;align-items:center;gap:8px}
.fs-bar-label{font-size:11.5px;color:var(--text-default);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Auch die Rinne ist ein : in .fs-bar-row macht das Grid sie zum
Block, in features.js und round5-client.js steht sie aber frei — dort
bleibt sie ohne display:block ein Inline-Element ohne Hoehe. */
.fs-bar-track{display:block;grid-column:1/-1;height:4px;background:var(--surface-inset);border:1px solid var(--border)}
/* Die Fuellung ist ein — ohne display:block traegt sie weder Hoehe
noch Breite und der Balken bleibt leer. */
.fs-bar-fill{display:block;height:100%;background:var(--accent)}
.fs-bar-val{font-family:var(--font-mono);font-size:10.5px;text-align:right;color:var(--text-muted)}
/* Treemap */
.treemap{position:relative;background:var(--surface-inset);border:1px solid var(--border);min-height:260px}
.tm-tile{
position:absolute;overflow:hidden;
background:var(--accent-bg);
border:1px solid var(--accent-line);
padding:3px 5px;
font-family:var(--font-mono);font-size:9.5px;color:var(--text);
}
.tm-tile:hover{background:var(--accent);color:var(--accent-contrast)}
.tm-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-size{display:block;color:var(--text-dim)}
.tm-tile:hover .tm-size{color:var(--accent-contrast)}
/* Ordnerbaum */
.tree-box{display:flex;flex-direction:column;gap:1px;font-family:var(--font-mono);font-size:11.5px}
.tree-node{display:flex;align-items:center;gap:5px}
.tree-toggle{
width:14px;height:14px;flex:none;padding:0;
background:transparent;border:0;color:var(--accent);cursor:pointer;
font-family:var(--font-mono);font-size:10px;
}
.tree-btn{
background:transparent;border:0;border-left:2px solid transparent;
padding:2px 5px;color:var(--text-default);cursor:pointer;
font-family:inherit;font-size:inherit;text-align:left;flex:1;min-width:0;
}
.tree-btn:hover{background:var(--row-hover);border-left-color:var(--accent)}
.tree-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree-children{padding-left:14px;border-left:1px solid var(--border)}
/* Neueste Dateien */
.recent-list{max-height:280px;overflow-y:auto}
.recent-item{
display:flex;align-items:center;gap:8px;
padding:5px 8px;background:var(--surface-2);
border-left:2px solid transparent;
cursor:pointer;font-size:12px;width:100%;text-align:left;border-top:0;border-right:0;border-bottom:0;
}
.recent-item:hover{background:var(--row-hover);border-left-color:var(--accent)}
.recent-name{
font-family:var(--font-sans);min-width:0;flex:1;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);
}
.recent-item .detail{font-family:var(--font-mono);font-size:10px;flex:none}
/* Galerie */
.file-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px}
.gallery-month{
grid-column:1/-1;
font-family:var(--font-display);font-size:10px;letter-spacing:.2em;
text-transform:uppercase;color:var(--text-dim);
padding-top:6px;border-bottom:1px solid var(--border);
}
.gallery-tile{
position:relative;
background:var(--surface-inset);
border:1px solid var(--border);
padding:0;cursor:pointer;overflow:hidden;
aspect-ratio:4/3;
display:flex;flex-direction:column;
}
/* Zielkreuz beim Ueberfahren */
.gallery-tile::before,.gallery-tile::after{
content:"";position:absolute;width:12px;height:12px;
border:0 solid var(--accent);opacity:0;transition:opacity .12s linear;
pointer-events:none;z-index:2;
}
.gallery-tile::before{top:2px;left:2px;border-top-width:1px;border-left-width:1px}
.gallery-tile::after{bottom:2px;right:2px;border-bottom-width:1px;border-right-width:1px}
.gallery-tile:hover{border-color:var(--accent)}
.gallery-tile:hover::before,.gallery-tile:hover::after{opacity:1}
.gallery-img{width:100%;height:100%;object-fit:cover;display:block;flex:1}
.gallery-tile.has-img .gallery-ico{display:none}
.gallery-meta{
padding:3px 6px;background:var(--surface);
border-top:1px solid var(--border);
}
.gallery-name{
display:block;font-family:var(--font-sans);font-size:10.5px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-default);
}
.gallery-play{
position:absolute;inset:0;display:grid;place-items:center;
color:var(--accent);font-size:22px;z-index:1;
}
/* ==========================================================================
30 Chat — Abhoerkonsole
--------------------------------------------------------------------------
Das Chrome ist ctOS; der Nachrichtentext bleibt Inter, Satzschreibung,
ohne Sperrung. Nutzerinhalte werden NIE grossgeschrieben.
========================================================================== */
.chat-layout{
display:grid;
grid-template-columns:236px minmax(0,1fr);
min-height:0;height:calc(100vh - var(--strip-top) - var(--strip-bottom) - 132px);
overflow:hidden;
}
.chat-layout > *{padding:0 !important}
.chat-rail{
display:flex;flex-direction:column;gap:10px;
min-height:0;overflow-y:auto;
padding:10px !important;
background:var(--bg-rail);
border-right:1px solid var(--border);
}
.chat-rail-head{display:flex;align-items:center;justify-content:space-between;gap:6px}
.chat-rail-section{display:flex;flex-direction:column;gap:5px}
.chat-conv-list{display:flex;flex-direction:column;gap:1px}
.chat-conv{
display:flex;align-items:center;gap:7px;
width:100%;padding:5px 7px;
background:transparent;border:0;border-left:2px solid transparent;
color:var(--text-default);cursor:pointer;text-align:left;
font-size:12.5px;
}
.chat-conv:hover{background:var(--row-hover)}
.chat-conv.active{background:var(--accent-bg);border-left-color:var(--accent)}
.chat-conv-ico{flex:none;color:var(--accent)}
.chat-conv-text{min-width:0;flex:1;display:flex;flex-direction:column}
.chat-conv-name{
font-family:var(--font-sans);text-transform:none;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);
}
.chat-conv-sub{
font-family:var(--font-mono);font-size:9.5px;color:var(--text-dim);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.chat-conv-typing{color:var(--accent)}
.chat-conv-mute{color:var(--text-dim);flex:none}
.conv-pin-ico{color:var(--warn);flex:none}
.conv-draft{color:var(--warn)}
.chat-unread{
margin-left:auto;flex:none;min-width:17px;padding:1px 4px;
background:var(--danger);color:#fff;
font-family:var(--font-mono);font-size:9px;text-align:center;
}
.chat-archived-toggle{
background:transparent;border:0;color:var(--text-dim);cursor:pointer;
font-family:var(--font-display);font-size:9.5px;letter-spacing:.14em;
text-transform:uppercase;text-align:left;padding:3px 0;
}
.chat-archived-toggle:hover{color:var(--accent)}
.chat-online{display:flex;flex-direction:column;gap:1px}
.chat-online-user{
display:flex;align-items:center;gap:6px;
padding:3px 5px;font-size:12px;
border-left:2px solid transparent;
}
.chat-online-user:hover{background:var(--row-hover);border-left-color:var(--accent-line)}
.chat-dot{width:6px;height:6px;flex:none;background:var(--text-dim)}
.chat-dot.online{background:var(--ok);box-shadow:0 0 5px var(--ok)}
.chat-dot.away{background:var(--warn)}
.chat-dot.busy{background:var(--danger)}
.chat-dot.just-on{animation:ctos-signal .9s ease-in-out 2}
/* Moderationswerkzeuge unten in der Chat-Schiene. chat.js:1552 baut hier
einen Aufklapp-Kopf (.chat-mod-toggle) und einen Rumpf (.chat-mod-body)
und setzt .collapsed — beim ctOS-Umbau fehlten die Regeln dazu, deshalb
blieben die Knoepfe beim Zuklappen sichtbar. */
.chat-admin-tools{display:flex;flex-direction:column;gap:6px;padding-top:10px;border-top:1px solid var(--border)}
.chat-mod-toggle{
display:flex;align-items:center;justify-content:space-between;gap:8px;
width:100%;min-height:30px;padding:4px 2px;
background:none;border:0;color:var(--text-muted);cursor:pointer;text-align:left;
}
.chat-mod-toggle:hover{color:var(--accent)}
.chat-mod-toggle .side-title{margin:0}
.chat-mod-caret{font-size:11px;line-height:1;color:var(--text-dim)}
.chat-mod-body{display:flex;flex-direction:column;gap:5px}
.chat-mod-body .btn{width:100%;justify-content:center}
.chat-admin-tools.collapsed .chat-mod-body{display:none}
.chat-main{display:flex;flex-direction:column;min-height:0;min-width:0}
.chat-thread-head{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:8px 12px;
background:linear-gradient(180deg,var(--surface-2),transparent);
border-bottom:1px solid var(--border);
}
.chat-thread-head h3{font-size:12.5px;letter-spacing:.14em}
/* Die Aktionsknoepfe ueber dem Verlauf standen mit 4 px Abstand und
2-px-Polsterung buchstaeblich aufeinander. Mehr Luft, groessere
Trefferflaeche, und auf schmalen Koepfen scrollen sie waagerecht statt
sich in drei Reihen zu stapeln. */
.chat-thread-actions{
display:flex;gap:8px;flex-wrap:wrap;align-items:center;
max-width:100%;
}
.chat-thread-actions .btn{
min-height:30px;padding:5px 12px;font-size:11px;letter-spacing:.06em;
white-space:nowrap;
}
@media (max-width:860px){
.chat-thread-actions{
flex-wrap:nowrap;overflow-x:auto;padding-bottom:3px;
scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.chat-thread-actions::-webkit-scrollbar{display:none}
.chat-thread-actions .btn{flex:none;min-height:34px}
}
.chat-thread-btn{
min-height:22px;padding:2px 7px;
background:transparent;border:1px solid var(--border);
color:var(--text-muted);cursor:pointer;
font-family:var(--font-display);font-size:9.5px;
letter-spacing:.1em;text-transform:uppercase;
}
.chat-thread-btn:hover{color:var(--accent);border-color:var(--accent-line)}
.chat-messages-wrap{position:relative;flex:1;min-height:0;display:flex}
.chat-messages{
flex:1;min-height:0;overflow-y:auto;
padding:12px;
background:var(--surface-inset);
display:flex;flex-direction:column;gap:9px;
}
body[data-chat-density="compact"] .chat-messages{gap:4px}
.chat-empty{
margin:auto;text-align:center;
font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
color:var(--text-dim);
}
.chat-loadmore{align-self:center}
.chat-msg{display:flex;gap:9px;position:relative;padding:1px 2px}
.chat-msg.grouped{margin-top:-6px}
.chat-msg.grouped .chat-msg-head,.chat-msg.grouped .chat-msg-avatar{visibility:hidden;height:0;overflow:hidden}
.chat-msg:hover{background:var(--row-hover)}
.chat-msg-avatar{
display:grid;place-items:center;
width:28px;height:28px;flex:none;overflow:hidden;
background:var(--accent-bg);border:1px solid var(--accent-line);
color:var(--accent);font-family:var(--font-display);font-weight:700;font-size:13px;
}
.chat-msg-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.chat-avatar,.chat-avatar-fallback{
display:grid;place-items:center;
width:28px;height:28px;flex:none;overflow:hidden;
background:var(--accent-bg);border:1px solid var(--accent-line);
color:var(--accent);font-family:var(--font-display);font-weight:700;
}
.chat-msg-main{min-width:0;flex:1}
.chat-msg-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
/* Absender als [ NAME ] in der Systemfarbe */
.chat-msg-user{
font-family:var(--font-mono);font-size:11px;
color:var(--accent);font-weight:500;
text-transform:none;letter-spacing:.02em;
}
.chat-msg-user::before{content:"[ ";color:var(--text-dim)}
.chat-msg-user::after{content:" ]";color:var(--text-dim)}
.chat-msg-real{font-family:var(--font-mono);font-size:9.5px;color:var(--text-dim)}
.chat-msg-time{font-family:var(--font-mono);font-size:9.5px;color:var(--text-dim)}
.chat-msg-text{
font-family:var(--font-sans);font-size:13.5px;line-height:1.55;
color:var(--text-default);
text-transform:none;letter-spacing:0;
word-break:break-word;white-space:pre-wrap;
}
.chat-msg-text a{color:var(--accent);text-decoration:underline}
.chat-edited{font-family:var(--font-mono);font-size:9px;color:var(--text-dim);margin-left:5px}
.chat-deleted{color:var(--text-dim);font-style:italic}
.chat-system{
align-self:center;
font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
color:var(--text-dim);text-transform:uppercase;
}
.chat-msg-selected{background:var(--accent-bg);box-shadow:inset 2px 0 0 var(--accent)}
.chat-msg.flash{animation:ctos-flash 900ms ease-out}
@keyframes ctos-flash{0%{background:var(--accent-bg)}100%{background:transparent}}
.chat-new-divider{
display:flex;align-items:center;gap:8px;
font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;
color:var(--danger);text-transform:uppercase;
}
.chat-new-divider::before,.chat-new-divider::after{content:"";flex:1;height:1px;background:var(--danger);opacity:.5}
/* Erwaehnungen: orange Zielmarkierung */
.chat-mention{
background:rgba(255,157,46,.14);
color:var(--ctos-hack);
padding:0 3px;font-weight:600;
}
.chat-msg.mine .chat-msg-text{color:var(--text)}
.chat-msg.mentions-all,.chat-msg.everyone-ping{
box-shadow:inset 2px 0 0 var(--ctos-hack);
background:rgba(255,157,46,.06);
}
/* Die Knoepfe tragen Woerter ("Reagieren", "Weiterleiten", …), keine Symbole.
Die feste Breite von 22 px hat sie alle uebereinandergeschoben — die
Beschriftungen lagen als Buchstabensalat auf einem Fleck. Sie richten sich
jetzt nach ihrem Text und stehen in einer Zeile nebeneinander. */
.chat-msg-actions{
position:absolute;top:-11px;right:6px;
display:none;gap:2px;padding:2px;
max-width:calc(100% - 12px);
background:var(--surface);border:1px solid var(--border-strong);
z-index:3;
}
.chat-msg:hover .chat-msg-actions,
.chat-msg:focus-within .chat-msg-actions{display:flex}
.chat-msg-act{
flex:none;width:auto;min-height:20px;padding:2px 7px;
white-space:nowrap;
background:transparent;border:0;
color:var(--text-muted);cursor:pointer;font-size:11px;line-height:1.3;
}
.chat-msg-act:hover{background:var(--accent-bg);color:var(--accent)}
.chat-msg-act.danger:hover{background:var(--danger-bg);color:var(--danger)}
/* Reaktionen */
.chat-reactions{display:flex;gap:3px;flex-wrap:wrap;margin-top:4px}
.chat-react-chip{
display:inline-flex;align-items:center;gap:3px;
padding:1px 5px;
background:var(--surface-2);border:1px solid var(--border);
color:var(--text-muted);cursor:pointer;
font-family:var(--font-mono);font-size:10px;
}
.chat-react-chip:hover{border-color:var(--accent-line)}
.chat-react-chip.mine{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.chat-react-count{font-variant-numeric:tabular-nums}
.chat-react-pop,.chat-react-quick{
display:flex;gap:1px;flex-wrap:wrap;
padding:3px;
background:var(--surface);border:1px solid var(--border-strong);
box-shadow:var(--shadow);
}
.chat-react-q,.chat-react-more{
width:24px;height:24px;padding:0;
background:transparent;border:0;cursor:pointer;font-size:13px;
color:var(--text-default);
}
.chat-react-q:hover,.chat-react-more:hover{background:var(--accent-bg)}
.chat-react-full{max-width:260px;max-height:180px;overflow-y:auto}
/* Antworten */
.chat-reply-bar,.chat-vote-bar,.chat-pin-bar{
display:flex;align-items:center;gap:8px;
padding:5px 12px;
background:var(--surface-2);
border-bottom:1px solid var(--border);
border-left:2px solid var(--accent);
font-size:11.5px;
}
.chat-pin-bar{border-left-color:var(--warn)}
.chat-vote-bar{border-left-color:var(--ctos-trace);flex-wrap:wrap}
.chat-reply-label,.chat-receipts-label{
font-family:var(--font-display);font-size:9px;letter-spacing:.16em;
text-transform:uppercase;color:var(--text-dim);flex:none;
}
.chat-reply-name{color:var(--accent);font-family:var(--font-mono);font-size:10.5px}
.chat-reply-snip,.chat-vote-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted)}
.chat-reply-cancel,.chat-profile-close,.chat-pending-x{
margin-left:auto;flex:none;
background:transparent;border:0;color:var(--text-dim);cursor:pointer;font-size:14px;
}
.chat-reply-cancel:hover,.chat-profile-close:hover,.chat-pending-x:hover{color:var(--danger)}
.chat-reply-ref{
display:block;
padding:2px 7px;margin-bottom:3px;
border-left:2px solid var(--accent-line);
background:var(--surface-2);
font-size:11.5px;color:var(--text-muted);cursor:pointer;
text-align:left;width:100%;border-top:0;border-right:0;border-bottom:0;
}
.chat-reply-ref:hover{border-left-color:var(--accent)}
.chat-fwd-preview,.chat-fwd-label{
font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
color:var(--text-dim);text-transform:uppercase;
}
.chat-pin-bar-items{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.chat-pin-bar-ico{color:var(--warn);flex:none}
.chat-pin-item{
background:transparent;border:1px solid var(--border);
padding:1px 6px;color:var(--text-muted);cursor:pointer;
font-size:11px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.chat-pin-item:hover{border-color:var(--warn);color:var(--warn)}
.chat-pin-flag{color:var(--warn);font-family:var(--font-mono);font-size:9px}
.chat-vote,.chat-vote-actions{display:flex;gap:4px;flex-wrap:wrap}
/* Anhaenge */
.chat-atts{display:flex;flex-direction:column;gap:5px;margin-top:5px}
.chat-att{
display:flex;align-items:center;gap:8px;
padding:5px 7px;
background:var(--surface-2);
border:1px solid var(--border);
border-left:2px solid var(--accent-line);
max-width:420px;
}
.chat-att-ico{flex:none;color:var(--accent)}
.chat-att-info{min-width:0;flex:1;display:flex;flex-direction:column}
.chat-att-name{
font-family:var(--font-sans);font-size:12px;color:var(--text);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.chat-att-size{font-family:var(--font-mono);font-size:9.5px;color:var(--text-dim)}
.chat-att-img{
display:block;max-width:min(340px,100%);max-height:260px;
border:1px solid var(--border);cursor:zoom-in;
background:var(--surface-inset);
}
.chat-att-img:hover{border-color:var(--accent)}
.chat-att-video{max-width:min(360px,100%);border:1px solid var(--border);display:block}
.chat-att-audio{width:min(320px,100%)}
.chat-att-file{text-decoration:none}
.chat-att-zoom{cursor:zoom-in}
.chat-attach-preview{
display:flex;gap:6px;flex-wrap:wrap;
padding:6px 12px;
border-top:1px solid var(--border);
background:var(--surface-2);
}
.chat-pending{
position:relative;
width:52px;height:52px;
border:1px solid var(--border-strong);
background:var(--surface-inset);
overflow:hidden;
}
.chat-pending img{width:100%;height:100%;object-fit:cover}
.chat-pending-x{position:absolute;top:0;right:2px;margin:0}
/* Lightbox */
.chat-lightbox,.viewer-stage{
position:fixed;inset:0;z-index:300;
display:grid;place-items:center;
background:rgba(2,5,10,.92);
}
.chat-lightbox img,.viewer-img{
max-width:92vw;max-height:82vh;display:block;
border:1px solid var(--accent-line);
}
.chat-lightbox-bar,.viewer-bar{
position:fixed;left:0;right:0;top:var(--strip-top);
display:flex;align-items:center;gap:10px;
padding:8px 14px;
background:var(--bg-rail);border-bottom:1px solid var(--border);
}
.chat-lightbox-name{
font-family:var(--font-sans);font-size:12.5px;color:var(--text);
min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Tipp-Anzeige */
.chat-typing{
min-height:16px;padding:2px 12px;
font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
color:var(--accent);
}
.chat-typing:not(:empty)::before{content:">>> "}
/* Verfasser-Zeile */
.chat-composer-wrap{position:relative;border-top:1px solid var(--border);background:var(--surface)}
.chat-composer{display:flex;align-items:flex-end;gap:6px;padding:8px 12px}
.chat-input{
flex:1;min-width:0;
min-height:32px;max-height:180px;
resize:none;line-height:1.5;
font-family:var(--font-sans);font-size:13.5px;
}
.chat-emoji-wrap,.chat-ephemeral-wrap{position:relative;flex:none}
.chat-emoji-panel,.chat-ephemeral-panel,.chat-autocomplete,.chat-status-pop,.chat-ctx-menu{
position:absolute;z-index:120;
background:var(--surface);
border:1px solid var(--border-strong);
box-shadow:var(--shadow);
}
.chat-emoji-panel{bottom:36px;left:0;width:290px;max-height:260px;overflow-y:auto;padding:6px}
.chat-ephemeral-panel{bottom:36px;right:0;min-width:150px;padding:4px}
.chat-eph-opt{
display:block;width:100%;padding:4px 8px;text-align:left;
background:transparent;border:0;color:var(--text-default);cursor:pointer;
font-family:var(--font-mono);font-size:11px;
}
.chat-eph-opt:hover{background:var(--accent-bg);color:var(--accent)}
.chat-eph-flag{color:var(--ctos-trace);font-family:var(--font-mono);font-size:9px}
.chat-autocomplete{bottom:100%;left:12px;right:12px;max-height:200px;overflow-y:auto}
.chat-ac-item{
display:flex;align-items:center;gap:7px;
padding:4px 9px;cursor:pointer;font-size:12.5px;
color:var(--text-default);
}
.chat-ac-item:hover,.chat-ac-item.active{background:var(--accent-bg);color:var(--accent)}
.chat-picker-tabs{display:flex;gap:1px;border-bottom:1px solid var(--border);margin-bottom:6px}
.chat-picker-tab{
padding:3px 8px;background:transparent;border:0;
color:var(--text-muted);cursor:pointer;
font-family:var(--font-display);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
}
.chat-picker-tab.active{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.chat-picker-body{max-height:200px;overflow-y:auto;overflow-x:hidden}
.chat-picker-emoji,.chat-picker-kaomoji{
display:grid;grid-template-columns:repeat(auto-fill,minmax(30px,1fr));gap:1px;
}
.chat-picker-kaomoji{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}
.chat-picker-emoji button,.chat-kaomoji,.chat-sticker-cell{
padding:3px;background:transparent;border:0;cursor:pointer;
font-size:16px;color:var(--text-default);
}
.chat-kaomoji{font-family:var(--font-mono);font-size:10.5px}
.chat-picker-emoji button:hover,.chat-kaomoji:hover,.chat-sticker-cell:hover{background:var(--accent-bg)}
.chat-emoji-img,.chat-sticker{max-width:110px;max-height:110px;display:block}
.chat-emoji-img{width:19px;height:19px;display:inline-block;vertical-align:-4px}
/* Sticker-Vorschau: eigenes Raster mit fester Kachelhoehe. Vorher erbte sie
die 30-px-Spalten der Emoji-Tafel, waehrend die Bilder in Originalgroesse
liefen — die Kacheln schoben sich uebereinander und die Tafel bekam eine
waagerechte Bildlaufleiste. Jetzt begrenzt die Kachel das Bild, nicht
umgekehrt. */
.chat-picker-stickers{
display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
gap:6px;padding:6px;align-items:start;max-height:236px;
}
.chat-sticker-cell{
position:relative;display:block;padding:0;width:100%;
border:1px solid var(--border);background:var(--surface-inset);
}
.chat-sticker-btn{
display:block;width:100%;background:transparent;border:0;cursor:pointer;padding:3px;
}
.chat-sticker-btn img{
display:block;width:100%;height:64px;object-fit:contain;
}
.chat-sticker-add,.chat-sticker-x{
background:transparent;border:1px dashed var(--border-strong);
color:var(--text-dim);cursor:pointer;font-size:11px;
}
.chat-sticker-add{grid-column:1/-1;padding:5px;background:var(--surface-inset)}
.chat-sticker-x{
position:absolute;top:2px;right:2px;
width:18px;height:18px;line-height:1;padding:0;
border-style:solid;background:var(--surface);
}
.chat-sticker-x:hover{color:var(--danger);border-color:var(--danger)}
.chat-picker-stickers .status-line,.chat-picker-stickers .muted{grid-column:1/-1}
.chat-my-status{display:flex;flex-direction:column;gap:4px}
.chat-status-btn{
display:flex;align-items:center;gap:6px;width:100%;
padding:4px 6px;
background:var(--surface-inset);border:1px solid var(--border);
color:var(--text-default);cursor:pointer;font-size:11.5px;text-align:left;
}
.chat-status-btn:hover{border-color:var(--accent-line)}
.chat-status-label{
font-family:var(--font-display);font-size:9px;letter-spacing:.14em;
text-transform:uppercase;color:var(--text-dim);
}
.chat-status-text{
font-family:var(--font-sans);min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.chat-status-pop{left:0;right:0;top:100%;padding:4px}
.chat-status-opt{
display:flex;align-items:center;gap:6px;width:100%;
padding:4px 7px;background:transparent;border:0;
color:var(--text-default);cursor:pointer;font-size:12px;text-align:left;
}
.chat-status-opt:hover{background:var(--accent-bg);color:var(--accent)}
/* Kontextmenue im Chat */
.chat-ctx-menu{min-width:180px;padding:3px 0}
.chat-ctx-item{
display:flex;align-items:center;gap:8px;width:100%;
padding:5px 10px;background:transparent;border:0;
color:var(--text-default);cursor:pointer;font-size:12px;text-align:left;
}
.chat-ctx-item:hover{background:var(--accent-bg);color:var(--accent)}
.chat-ctx-ico{flex:none;width:14px;color:var(--accent)}
.chat-ctx-sep{height:1px;background:var(--border);margin:3px 0}
/* Profil-Sprechblase */
.chat-profile-pop{
position:fixed;z-index:250;
width:250px;
background:var(--surface);
border:1px solid var(--border-strong);
box-shadow:var(--shadow),var(--ctos-glow);
padding:12px;
}
.chat-profile-head{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.chat-profile-avatar{
display:grid;place-items:center;
width:38px;height:38px;flex:none;overflow:hidden;
background:var(--accent-bg);border:1px solid var(--accent-line);
color:var(--accent);font-family:var(--font-display);font-weight:700;font-size:17px;
}
.chat-profile-avatar img{width:100%;height:100%;object-fit:cover}
.chat-profile-name{font-family:var(--font-sans);font-size:14px;font-weight:600;color:var(--text)}
.chat-profile-id{font-family:var(--font-mono);font-size:9.5px;color:var(--text-dim)}
.chat-profile-presence{font-family:var(--font-mono);font-size:10px;color:var(--ok)}
.chat-profile-roles,.chat-prof-roles{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px}
.chat-role-chip,.chat-bl-chip{
padding:1px 6px;border:1px solid currentColor;
font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;
}
.chat-profile-admin{margin-top:9px;padding-top:9px;border-top:1px solid var(--border);display:flex;gap:4px;flex-wrap:wrap}
.chat-prof-rolecheck{display:flex;align-items:center;gap:5px;font-size:11.5px}
.chat-bl-list{display:flex;gap:4px;flex-wrap:wrap}
.chat-member-list{display:flex;flex-direction:column;gap:1px;max-height:220px;overflow-y:auto}
.chat-member{display:flex;align-items:center;gap:7px;padding:4px 6px;font-size:12px}
.chat-member:hover{background:var(--row-hover)}
/* Umfragen */
.chat-poll{
margin-top:6px;padding:9px;
background:var(--surface-2);
border:1px solid var(--border);
border-left:2px solid var(--ctos-trace);
}
.chat-poll-q{font-family:var(--font-sans);font-weight:600;color:var(--text);margin-bottom:7px}
.chat-poll-opt{
display:block;width:100%;position:relative;
padding:4px 8px;margin-bottom:3px;
background:var(--surface-inset);border:1px solid var(--border);
color:var(--text-default);cursor:pointer;text-align:left;font-size:12px;
}
.chat-poll-opt:hover{border-color:var(--ctos-trace)}
.chat-poll-bar{
position:absolute;left:0;top:0;bottom:0;
background:rgba(192,123,255,.16);pointer-events:none;
}
.chat-poll-text,.chat-poll-count{position:relative;z-index:1}
.chat-poll-count{float:right;font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted)}
.chat-poll-foot{font-family:var(--font-mono);font-size:9.5px;color:var(--text-dim);margin-top:5px}
.chat-poll-slot{display:block}
.chat-checklist-item{display:flex;align-items:center;gap:6px;font-size:12.5px;padding:2px 0}
/* Lesebestaetigungen, Spoiler, Code */
.chat-receipts{display:flex;align-items:center;gap:5px;margin-top:3px;font-family:var(--font-mono);font-size:9px;color:var(--text-dim)}
.chat-receipts-more{color:var(--accent)}
.chat-spoiler{
background:var(--surface-2);color:transparent;
cursor:pointer;border-radius:0;padding:0 3px;
}
.chat-spoiler.revealed{color:var(--text-default);background:var(--surface-inset)}
.chat-code,.md-code{
display:block;padding:8px 10px;margin:5px 0;
background:var(--surface-inset);
border:1px solid var(--border);
border-left:2px solid var(--accent-line);
font-family:var(--font-mono);font-size:11.5px;
overflow-x:auto;white-space:pre;
}
.chat-inline-code{
padding:1px 4px;
background:var(--surface-2);border:1px solid var(--border);
font-family:var(--font-mono);font-size:11.5px;color:var(--accent);
}
.chat-md p{margin:0 0 6px}
.chat-md ul,.chat-md ol{margin:4px 0;padding-left:20px}
.chat-md blockquote{
margin:5px 0;padding-left:9px;
border-left:2px solid var(--accent-line);color:var(--text-muted);
}
.hl-kw{color:var(--ctos-trace)}
.hl-str{color:var(--ok)}
.hl-num{color:var(--warn)}
.hl-com{color:var(--text-dim);font-style:italic}
/* Linkvorschau */
.chat-linkcard{
display:flex;flex-direction:column;
margin-top:5px;max-width:390px;
background:var(--surface-2);
border:1px solid var(--border);
border-left:2px solid var(--accent-line);
padding:7px 9px;text-decoration:none;
}
.chat-linkcard:hover{border-left-color:var(--accent);text-decoration:none}
.lc-site{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}
.lc-title{font-family:var(--font-sans);font-size:12.5px;font-weight:600;color:var(--text)}
.lc-desc{font-size:11.5px;color:var(--text-muted)}
/* Suche, Meldungen, Auswahl */
.chat-search-body{display:flex;flex-direction:column;gap:8px}
.chat-search-results{display:flex;flex-direction:column;gap:1px;max-height:340px;overflow-y:auto}
.chat-search-hit{
padding:5px 8px;background:var(--surface-2);
border:0;border-left:2px solid transparent;
color:var(--text-default);cursor:pointer;text-align:left;font-size:12px;
}
.chat-search-hit:hover{background:var(--row-hover);border-left-color:var(--accent)}
.chat-report-item,.chat-bm-item{
display:flex;align-items:center;gap:8px;
padding:6px 8px;background:var(--surface-2);
border-left:2px solid var(--warn);font-size:12px;
}
.chat-report-snap{font-family:var(--font-sans);color:var(--text-muted);min-width:0;flex:1}
.chat-bm-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.chat-msel-bar{
display:flex;align-items:center;gap:8px;
padding:5px 12px;
background:var(--accent-bg);border-bottom:1px solid var(--accent-line);
}
.chat-viewonce{color:var(--ctos-trace);font-family:var(--font-mono);font-size:9.5px}
.chat-mod-toggle{
display:flex;align-items:center;gap:5px;width:100%;
background:transparent;border:0;color:var(--text-muted);cursor:pointer;
font-family:var(--font-display);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
padding:3px 0;
}
.chat-mod-toggle:hover{color:var(--accent)}
.chat-mod-caret{color:var(--accent);transition:transform .12s linear}
.chat-mod-toggle[aria-expanded="true"] .chat-mod-caret{transform:rotate(90deg)}
.chat-mod-body{display:flex;flex-direction:column;gap:4px;padding-top:4px}
/* Springen-Knopf */
.chat-scroll-down{
position:absolute;right:14px;bottom:14px;z-index:4;
width:32px;height:32px;
background:var(--surface);
border:1px solid var(--border-strong);
color:var(--accent);cursor:pointer;
}
.chat-scroll-down svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.chat-scroll-down:hover{border-color:var(--accent);box-shadow:var(--ctos-glow)}
.chat-scroll-badge{
position:absolute;top:-6px;right:-6px;
min-width:16px;padding:0 4px;
background:var(--danger);color:#fff;
font-family:var(--font-mono);font-size:9px;
}
/* Anruf-Panel */
.call-panel{
position:fixed;right:14px;bottom:calc(var(--strip-bottom) + 60px);z-index:150;
width:230px;padding:12px;
background:var(--surface);border:1px solid var(--border-strong);
box-shadow:var(--shadow),var(--ctos-glow);
}
.call-actions{display:flex;gap:5px;margin-top:9px}
.call-remote-audio{display:none}
/* ==========================================================================
31 Dialoge
========================================================================== */
.dialog{
padding:0;border:0;background:transparent;
max-width:min(480px,94vw);
}
.dialog-wide{max-width:min(880px,96vw)}
.dialog::backdrop{background:rgba(2,5,10,.78)}
.dialog-form{
display:flex;flex-direction:column;gap:11px;
padding:0 0 14px;
background:var(--surface);
border:1px solid var(--border-strong);
box-shadow:var(--shadow),var(--ctos-glow);
animation:ctos-clip-in 180ms cubic-bezier(.2,.8,.2,1);
}
.dialog-form > *:not(.section-head){padding-left:14px;padding-right:14px}
.dialog-actions{display:flex;justify-content:flex-end;gap:6px}
/* ==========================================================================
32 Overlays: Vorschau, Editor, Commander, Details
========================================================================== */
.preview-overlay{
position:fixed;inset:0;z-index:280;
display:grid;place-items:center;
padding:calc(var(--strip-top) + 16px) 16px calc(var(--strip-bottom) + 16px);
background:rgba(2,5,10,.86);
}
.preview-box{
display:flex;flex-direction:column;
width:min(1000px,96vw);max-height:100%;
background:var(--surface);
border:1px solid var(--border-strong);
box-shadow:var(--shadow),var(--ctos-glow);
min-height:0;
}
.preview-head{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:7px 12px;
background:var(--surface-2);
border-bottom:1px solid var(--border);
}
.preview-title{
font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--text);
min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.preview-head-actions{display:flex;gap:5px;flex-wrap:wrap;flex:none}
.preview-body{
flex:1;min-height:0;overflow:auto;
padding:12px;background:var(--surface-inset);
display:flex;align-items:center;justify-content:center;
}
.preview-img,.preview-media{max-width:100%;max-height:70vh;display:block;border:1px solid var(--border)}
.preview-frame{width:100%;height:70vh;border:1px solid var(--border);background:#fff}
.preview-text-wrap{width:100%;align-self:stretch}
.preview-text{
margin:0;font-family:var(--font-mono);font-size:12px;line-height:1.6;
white-space:pre-wrap;word-break:break-word;color:var(--text-default);
}
.preview-none{
font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
color:var(--text-dim);text-transform:uppercase;
}
.editor-box{width:min(1100px,96vw)}
.editor-body{flex:1;min-height:0;display:flex;background:var(--surface-inset)}
.editor-body.editor-split .editor-textarea{width:50%}
.editor-body.editor-split .editor-preview{display:block;width:50%}
.editor-textarea{
flex:1;min-height:52vh;
padding:12px;
background:var(--surface-inset);
border:0;resize:none;
color:var(--text);
font-family:var(--font-mono);font-size:12.5px;line-height:1.6;
caret-color:var(--accent);
}
.editor-textarea:focus{outline:0}
.editor-preview{
flex:1;min-height:0;overflow-y:auto;
padding:12px;border-left:1px solid var(--border);
font-family:var(--font-sans);font-size:13px;color:var(--text-default);
}
.editor-foot{
padding:5px 12px;border-top:1px solid var(--border);
background:var(--surface-2);
font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;
}
.editor-search-bar{display:flex;gap:5px;padding:6px 12px;border-bottom:1px solid var(--border)}
.commander-box{width:min(1100px,96vw)}
.commander-panes{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border)}
.commander-pane{display:flex;flex-direction:column;min-height:0;background:var(--surface-inset)}
.commander-path{
padding:5px 9px;
background:var(--surface-2);border-bottom:1px solid var(--border);
font-size:10.5px;letter-spacing:.06em;color:var(--accent);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.commander-list{flex:1;min-height:40vh;max-height:62vh;overflow-y:auto;display:flex;flex-direction:column;gap:1px}
.cmd-row{
display:flex;align-items:center;gap:7px;
padding:3px 9px;
background:transparent;border:0;border-left:2px solid transparent;
color:var(--text-default);cursor:pointer;text-align:left;
font-family:var(--font-mono);font-size:11.5px;
}
.cmd-row:hover{background:var(--row-hover);border-left-color:var(--accent)}
.cmd-row.sel{background:var(--accent-bg);border-left-color:var(--accent);color:var(--accent)}
.cmd-up{color:var(--accent)}
.details-panel{
position:fixed;right:0;top:var(--strip-top);bottom:var(--strip-bottom);z-index:150;
width:min(340px,92vw);
display:flex;flex-direction:column;
background:var(--surface);
border-left:1px solid var(--border-strong);
box-shadow:-18px 0 40px -30px #000;
}
.details-head{
display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:8px 12px;
background:var(--surface-2);border-bottom:1px solid var(--border);
}
.details-title{
font-family:var(--font-sans);font-size:13px;color:var(--text);
min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.details-body{flex:1;min-height:0;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.det-tags{display:flex;gap:4px;flex-wrap:wrap}
.det-note{
padding:7px 9px;background:var(--surface-inset);
border-left:2px solid var(--accent-line);
font-size:12px;color:var(--text-default);
}
.det-history{display:flex;flex-direction:column;gap:1px}
.det-hist-row{
display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:4px 7px;background:var(--surface-2);
font-family:var(--font-mono);font-size:10.5px;
}
/* Unterschiede */
.diff-box{
background:var(--surface-inset);border:1px solid var(--border);
font-family:var(--font-mono);font-size:11.5px;overflow-x:auto;
}
.diff-line{display:flex;gap:8px;padding:0 8px;white-space:pre}
.diff-sign{width:12px;flex:none;color:var(--text-dim)}
.diff-add{background:var(--ok-bg);color:var(--ok)}
.diff-del{background:var(--danger-bg);color:var(--danger)}
.diff-ctx{color:var(--text-muted)}
.diff-skip{color:var(--text-dim);font-style:italic;padding:2px 8px}
.diff-add-chip{border:1px solid var(--ok);color:var(--ok);padding:0 4px;font-size:9px}
.diff-del-chip{border:1px solid var(--danger);color:var(--danger);padding:0 4px;font-size:9px}
/* Kontextmenue (Dateien) */
.ctx-menu{
position:fixed;z-index:260;min-width:190px;
padding:3px 0;
background:var(--surface);
border:1px solid var(--border-strong);
box-shadow:var(--shadow);
}
.ctx-item{
display:flex;align-items:center;gap:8px;width:100%;
padding:5px 11px;
background:transparent;border:0;
color:var(--text-default);cursor:pointer;text-align:left;
font-size:12.5px;
}
.ctx-item:hover{background:var(--accent-bg);color:var(--accent)}
.ctx-item.danger:hover{background:var(--danger-bg);color:var(--danger)}
.ctx-sep{height:1px;background:var(--border);margin:3px 0}
/* ==========================================================================
33 Toasts & Benachrichtigungen
========================================================================== */
.toast-host{
position:fixed;right:14px;bottom:calc(var(--strip-bottom) + 12px);z-index:320;
display:flex;flex-direction:column;gap:6px;
max-width:min(360px,92vw);
pointer-events:none;
}
.toast{
position:relative;overflow:hidden;
display:flex;align-items:center;gap:9px;
padding:8px 11px;
background:var(--surface);
border:1px solid var(--border-strong);
border-left-width:2px;
box-shadow:var(--shadow);
color:var(--text-default);
font-size:12.5px;
opacity:0;transform:translateX(14px);
transition:opacity .18s linear,transform .18s cubic-bezier(.2,.8,.2,1);
pointer-events:auto;
}
.toast.in{opacity:1;transform:none}
.toast.out{opacity:0;transform:translateX(14px)}
.toast-ico{flex:none;display:grid;place-items:center;width:16px;height:16px}
.toast-ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.toast-text{min-width:0;flex:1;font-family:var(--font-sans)}
.toast-ok{border-left-color:var(--ok)}
.toast-ok .toast-ico{color:var(--ok)}
.toast-error{border-left-color:var(--danger)}
.toast-error .toast-ico{color:var(--danger)}
.toast-info{border-left-color:var(--accent)}
.toast-info .toast-ico{color:var(--accent)}
.toast-action{
flex:none;padding:2px 7px;
background:transparent;border:1px solid var(--accent-line);
color:var(--accent);cursor:pointer;
font-family:var(--font-display);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
}
.toast-action:hover{background:var(--accent);color:var(--accent-contrast)}
.toast-x{
flex:none;background:transparent;border:0;
color:var(--text-dim);cursor:pointer;font-size:15px;line-height:1;
}
.toast-x:hover{color:var(--danger)}
.toast-timer{
position:absolute;left:0;bottom:0;height:1px;width:100%;
background:var(--accent);transform-origin:left;
}
.toast-timer.run{animation:ctos-toast-timer linear forwards}
@keyframes ctos-toast-timer{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.conn-banner{
position:fixed;left:50%;top:calc(var(--strip-top) + 10px);
transform:translateX(-50%);z-index:330;
padding:6px 14px;
background:var(--danger-bg);
border:1px solid var(--danger);
color:var(--danger);
font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
}
.conn-banner.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.notif-panel{
position:fixed;right:14px;top:calc(var(--strip-top) + 54px);z-index:240;
width:min(320px,92vw);max-height:60vh;
display:flex;flex-direction:column;
background:var(--surface);
border:1px solid var(--border-strong);
box-shadow:var(--shadow),var(--ctos-glow);
}
.notif-head{
display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:8px 11px;
background:var(--surface-2);border-bottom:1px solid var(--border);
}
.notif-head strong{
font-family:var(--font-display);font-size:11px;
letter-spacing:.16em;text-transform:uppercase;color:var(--text);
}
.notif-enable{
display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:7px 11px;background:var(--warn-bg);border-bottom:1px solid var(--border);
}
.notif-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:1px}
.notif-item{
display:flex;gap:8px;
padding:7px 11px;background:var(--surface-2);
border-left:2px solid transparent;
}
.notif-item:hover{background:var(--row-hover)}
.notif-item.notif-ok{border-left-color:var(--ok)}
.notif-item.notif-error{border-left-color:var(--danger)}
.notif-item-dot{width:6px;height:6px;flex:none;margin-top:5px;background:var(--accent)}
.notif-item-body{min-width:0;flex:1}
.notif-item-title{
display:block;font-family:var(--font-display);font-size:10.5px;
letter-spacing:.1em;text-transform:uppercase;color:var(--text);
}
.notif-item-text{display:block;font-family:var(--font-sans);font-size:12px;color:var(--text-muted);word-break:break-word}
.notif-item-time{display:block;font-family:var(--font-mono);font-size:9px;color:var(--text-dim)}
.notif-empty{padding:20px;text-align:center;font-family:var(--font-mono);font-size:10.5px;color:var(--text-dim)}
.notif-dot{
position:absolute;top:3px;right:3px;
width:6px;height:6px;background:var(--danger);
box-shadow:0 0 5px var(--danger);
}
.notif-dot.pulse{animation:ctos-signal 1s ease-in-out 3}
#notifBtn{position:relative}
/* ==========================================================================
34 Befehlskonsole: Ergebniszeilen
========================================================================== */
.cmdk-item{
display:flex;align-items:center;gap:10px;width:100%;
padding:6px 12px;
background:transparent;border:0;border-left:2px solid transparent;
color:var(--text-default);cursor:pointer;text-align:left;
font-family:var(--font-mono);font-size:12px;
}
/* Ergebnis als [NODE] NAME ......... AKTION */
.cmdk-item-title{
min-width:0;flex:1;position:relative;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cmdk-item-hint{
flex:none;
font-family:var(--font-display);font-size:9px;
letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);
}
.cmdk-item-hint::before{content:"["}
.cmdk-item-hint::after{content:"]"}
.cmdk-item:hover,.cmdk-item.active{
background:var(--accent-bg);border-left-color:var(--accent);color:var(--accent);
}
.cmdk-item.active .cmdk-item-hint{color:var(--accent)}
.cmdk-empty{padding:18px 12px;text-align:center;font-family:var(--font-mono);letter-spacing:.1em}
/* ==========================================================================
35 Audit — Überwachungsprotokoll
========================================================================== */
.audit-cards{
display:flex;flex-direction:column;gap:0;
background:var(--surface-inset);
border:1px solid var(--border);
font-family:var(--font-mono);font-size:11.5px;
overflow-x:auto;
}
.audit-card{
display:grid;
grid-template-columns:78px 120px 150px minmax(0,1fr);
align-items:baseline;gap:10px;
padding:4px 9px;
border-bottom:1px solid var(--border);
border-left:2px solid transparent;
}
.audit-card:hover{background:var(--row-hover);border-left-color:var(--accent)}
.audit-time{color:var(--text-dim);white-space:nowrap}
.audit-action{
color:var(--accent);text-transform:uppercase;letter-spacing:.06em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.audit-main{min-width:0;color:var(--text-default);overflow:hidden;text-overflow:ellipsis}
.audit-meta{color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.audit-detail{grid-column:1/-1;color:var(--text-dim);word-break:break-all}
.audit-line{display:flex;gap:8px}
.audit-dot{width:5px;height:5px;flex:none;background:var(--accent);margin-top:5px}
.audit-empty{padding:20px;text-align:center;color:var(--text-dim);letter-spacing:.12em}
/* ==========================================================================
36 Rollen & Berechtigungen
========================================================================== */
.roles-list{display:flex;flex-direction:column;gap:1px}
.role-row{
display:flex;align-items:center;gap:9px;
padding:6px 9px;background:var(--surface-2);
border-left:2px solid transparent;
}
.role-row:hover{background:var(--row-hover);border-left-color:var(--accent-line)}
.role-row-main{display:flex;align-items:center;gap:7px;min-width:0;flex:1}
.role-row-actions{display:flex;gap:4px;flex:none}
.role-dot{width:9px;height:9px;flex:none;border:1px solid var(--border-strong)}
.role-name{
font-family:var(--font-display);font-size:12px;
letter-spacing:.08em;text-transform:uppercase;color:var(--text);
}
.role-editor{
margin-top:12px;padding:12px;
background:var(--surface-inset);
border:1px solid var(--border-strong);
}
.role-assign-title{margin-top:16px}
.perm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:4px}
.perm-item{
display:flex;align-items:center;gap:6px;
padding:3px 6px;background:var(--surface-2);
font-size:11.5px;cursor:pointer;
}
.perm-item:hover{background:var(--row-hover)}
.perm-matrix{overflow-x:auto}
.admin-user-row{
display:flex;align-items:center;gap:9px;flex-wrap:wrap;
padding:7px 9px;background:var(--surface-2);
border-left:2px solid transparent;
}
.admin-user-row:hover{border-left-color:var(--accent-line)}
.user-title{font-family:var(--font-display);letter-spacing:.08em}
/* ==========================================================================
37 Round-5-Blöcke
========================================================================== */
.r5-admin-grid,.r5-report-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.r5-list{display:flex;flex-direction:column;gap:1px}
.r5-table{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:11.5px}
.r5-table th,.r5-table td{padding:4px 8px;border-bottom:1px solid var(--border);text-align:left}
.r5-table th{
background:var(--surface-2);color:var(--text-muted);
font-family:var(--font-display);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
}
.r5-log-box{
background:var(--surface-inset);border:1px solid var(--border);
padding:9px;max-height:340px;overflow:auto;
font-family:var(--font-mono);font-size:11px;white-space:pre-wrap;
color:var(--text-muted);
}
.qr-box{background:#fff;padding:9px;display:inline-block;border:1px solid var(--border-strong)}
.task-center{display:flex;flex-direction:column;gap:1px}
.task-row{display:flex;align-items:center;gap:8px;padding:5px 8px;background:var(--surface-2);font-size:12px}
.task-spin{
width:12px;height:12px;flex:none;
border:1px solid var(--accent);border-top-color:transparent;
animation:ctos-spin 700ms linear infinite;
}
.widget-order-row{display:flex;align-items:center;gap:8px;padding:4px 7px;background:var(--surface-2);font-size:12px}
.trash-left{font-family:var(--font-mono);font-size:10.5px;color:var(--warn)}
.hover-peek{
position:fixed;z-index:270;
padding:6px;background:var(--surface);
border:1px solid var(--border-strong);box-shadow:var(--shadow);
pointer-events:none;
}
.hover-peek img,.peek-img{max-width:230px;max-height:180px;display:block}
.peek-name{font-family:var(--font-mono);font-size:9.5px;color:var(--text-dim);margin-top:3px}
/* Rundgang */
.tour-pop{
position:fixed;z-index:340;
width:min(300px,92vw);padding:12px;
background:var(--surface);
border:1px solid var(--accent);
box-shadow:var(--shadow),var(--ctos-glow);
}
.tour-highlight{
position:relative;z-index:335;
box-shadow:0 0 0 2px var(--accent),var(--ctos-glow);
}
/* == Serverweite Umfragen (Runde 73) ====================================== */
.poll-overlay{
position:fixed;inset:0;z-index:300;
display:grid;place-items:center;
padding:20px;
background:rgba(2,5,10,.72);
}
.poll-overlay.hidden{display:none}
.poll-card{
width:min(520px,100%);
max-height:min(80vh,720px);
display:flex;flex-direction:column;
box-shadow:var(--shadow),var(--ctos-glow);
}
.poll-card > .section-head{flex:none}
.poll-body{
flex:1;min-height:0;overflow-y:auto;
display:flex;flex-direction:column;gap:9px;
padding:12px 14px !important;
}
.poll-meta{font-size:10px;letter-spacing:.06em;color:var(--text-dim)}
.poll-opts{display:flex;flex-direction:column;gap:5px}
.poll-opt{
display:flex;align-items:center;gap:9px;
width:100%;padding:9px 11px;
background:var(--surface-2);
border:1px solid var(--border-strong);
color:var(--text-default);
font-family:var(--font-sans);font-size:12.5px;text-align:left;
cursor:pointer;
transition:background .12s linear,border-color .12s linear;
}
.poll-opt:hover:not(.result){background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}
.poll-opt:disabled{opacity:.5;cursor:default}
.poll-opt.result{cursor:default;background:var(--surface)}
.poll-opt.result.mine{border-color:var(--accent);background:var(--accent-bg)}
.poll-opt-t{flex:none;min-width:26%;max-width:46%;overflow:hidden;text-overflow:ellipsis}
.poll-bar{
flex:1;height:8px;min-width:40px;
background:var(--surface-inset);border:1px solid var(--border);
}
.poll-bar > span{display:block;height:100%;background:var(--accent);box-shadow:0 0 6px var(--accent-line)}
.poll-pct,.poll-n{font-size:10.5px;color:var(--text-dim);flex:none}
.poll-n{min-width:26px;text-align:right}
.poll-total{font-size:10.5px;color:var(--text-dim)}
.poll-voters{display:flex;flex-wrap:wrap;gap:4px}
.poll-voter{
padding:2px 7px;background:var(--surface-2);border:1px solid var(--border);
font-family:var(--font-mono);font-size:10px;color:var(--text-muted);
}
.poll-foot{
flex:none;
display:flex;align-items:center;gap:8px;
padding:10px 14px;
border-top:1px solid var(--border);
}
.poll-list{display:flex;flex-direction:column;gap:6px}
.poll-row{
display:flex;flex-direction:column;gap:3px;
padding:9px 11px;
background:var(--surface);border:1px solid var(--border);
border-left:2px solid var(--accent-line);
}
.poll-row.closed{border-left-color:var(--border);opacity:.72}
.poll-row-q{font-size:12.5px;color:var(--text-default)}
.poll-row-m{font-size:10px;color:var(--text-dim)}
.poll-row-a{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px}
/* Abzeichen in der Kopfzeile */
#pollsBtn{position:relative}
.polls-ico{font-size:14px;line-height:1}
.polls-dot{
position:absolute;top:1px;right:1px;
min-width:14px;height:14px;padding:0 3px;
background:var(--danger);color:#fff;
font-family:var(--font-mono);font-size:9px;line-height:14px;text-align:center;
}
.polls-dot.hidden{display:none}
/* Konfetti (Erfolge) */
.confetti-bit{
position:fixed;width:5px;height:5px;z-index:350;
pointer-events:none;background:var(--accent);
}
/* Titel-Animationen (Prestige) — bewusst dezent, nie schneller als 3 Hz */
.title-anim-glitch,.title-anim-neon,.title-anim-pulse,.title-anim-shimmer,
.title-anim-rainbow,.title-anim-gold,.title-anim-ice,.title-anim-fire,
.title-anim-toxic,.title-anim-galaxy,.title-anim-heartbeat,
.title-anim-wave,.title-anim-wobble{
font-family:var(--font-display);letter-spacing:.08em;
}
.title-anim-neon{color:var(--accent);text-shadow:var(--ctos-glow)}
.title-anim-gold{color:var(--warn);text-shadow:0 0 8px var(--warn-bg)}
.title-anim-ice{color:#8fe8ff;text-shadow:0 0 8px rgba(143,232,255,.4)}
.title-anim-fire{color:var(--ctos-hack);text-shadow:0 0 8px rgba(255,157,46,.4)}
.title-anim-toxic{color:var(--ok);text-shadow:0 0 8px var(--ok-bg)}
.title-anim-galaxy{color:var(--ctos-trace);text-shadow:0 0 8px rgba(192,123,255,.4)}
.title-anim-rainbow{color:var(--accent)}
.title-anim-glitch{color:var(--text);text-shadow:1px 0 var(--danger),-1px 0 var(--accent)}
.title-anim-pulse,.title-anim-heartbeat{animation:ctos-title-pulse 2s ease-in-out infinite}
.title-anim-shimmer,.title-anim-wave{animation:ctos-title-pulse 2.6s ease-in-out infinite}
.title-anim-wobble{animation:ctos-title-pulse 3s ease-in-out infinite}
@keyframes ctos-title-pulse{0%,100%{opacity:1}50%{opacity:.62}}
/* ==========================================================================
38 Audio-Leiste
========================================================================== */
.audio-bar{
position:fixed;left:50%;bottom:calc(var(--strip-bottom) + 12px);
transform:translateX(-50%);z-index:160;
display:flex;align-items:center;gap:8px;
width:min(430px,94vw);padding:7px 10px;
background:var(--surface);
border:1px solid var(--border-strong);
box-shadow:var(--shadow),var(--ctos-glow);
}
.audio-info{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px}
.audio-title{
font-family:var(--font-sans);font-size:11.5px;color:var(--text);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.audio-progress{height:3px;background:var(--surface-inset);border:1px solid var(--border)}
.audio-progress > div{height:100%;background:var(--accent);box-shadow:0 0 5px var(--accent-line)}
.audio-speed-btn{
flex:none;padding:1px 5px;
background:transparent;border:1px solid var(--border);
color:var(--text-muted);cursor:pointer;
font-family:var(--font-mono);font-size:9.5px;
}
.audio-speed-btn:hover{border-color:var(--accent-line);color:var(--accent)}
/* ==========================================================================
39 Reduzierte Bewegung: Restbestände
========================================================================== */
@media (prefers-reduced-motion:reduce){
.toast{transition:none}
.sk,.sk-name,.sk-num,.sk-tag,.sk-check,
.queue-ring,.task-spin,
.title-anim-pulse,.title-anim-heartbeat,.title-anim-shimmer,
.title-anim-wave,.title-anim-wobble,
.ctos-scanbar > div{animation:none}
}
body[data-effects="off"] .sk,
body[data-effects="off"] .queue-ring,
body[data-effects="off"] .task-spin{animation:none}