/* ks-theme.css — gemeinsame Darcula-Palette der KI Sandbox (Werkstatt, Portal, Teilen, Daten), 04.11.2026,
 * kutego-sandbox-darcula-plan.md. Nur Darcula, kein Hell-Modus. Quelle cluster-docs/scripts/code-agent-abnahme/werkstatt/ks-theme.css,
 * ausgeliefert als /ks-theme.css in allen Bereichen (statisch VM801). Klassen/IDs englisch (User 04.11.). */
:root {
  color-scheme: dark;
  --ks-bg: #2B2B2B;          /* Editor-/Arbeitsfläche */
  --ks-bg-deep: #1E1F22;     /* Terminal, tiefe Flächen */
  --ks-panel: #3C3F41;       /* Leisten, Kopf, Seitenpaneele */
  --ks-panel-alt: #313335;   /* Bühne hinter der Vorschau */
  --ks-card: #393B40;        /* Karten/Einträge im Chat */
  --ks-border: #2B2B2B;      /* Trennlinien zwischen Paneelen */
  --ks-line: #515151;        /* Rahmen von Feldern/Karten */
  --ks-text: #BBBBBB;
  --ks-text-dim: #ADB0B3;     /* 04.11. Review: Kontrast >= 4.5 auf Paneel */
  --ks-text-faint: #ADADAD;   /* 04.11. Review: Kontrast >= 4.5 auf Hintergrund */
  --ks-text-bright: #DDDDDD;
  --ks-accent: #4A88C7;
  --ks-accent-bg: #2F3E4E;
  --ks-active: #4E5254;
  --ks-hover: #4B4D4F;
  --ks-btn: #4C5052;
  --ks-btn-border: #5E6060;
  --ks-primary: #365880;
  --ks-primary-border: #4C708C;
  --ks-ok: #629755;      --ks-ok-bg: #344134;
  --ks-warn: #E8BF6A;    --ks-warn-bg: #4A4030;
  --ks-err: #FF8A87;     --ks-err-bg: #4A2C2C;
  --ks-link: #589DF6;
  --ks-sandbox: #B00020;
  --ks-input: #45494A;
  --ks-mono: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --ks-font: 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}
html.ks-darcula, html.ks-darcula body { background: var(--ks-bg); color: var(--ks-text); }
html.ks-darcula { scrollbar-color: #5A5D5F var(--ks-bg); }
html.ks-darcula * { scrollbar-color: #5A5D5F transparent; }
html.ks-darcula ::-webkit-scrollbar { width: 10px; height: 10px; }
html.ks-darcula ::-webkit-scrollbar-thumb { background: #5A5D5F; border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
html.ks-darcula ::-webkit-scrollbar-track { background: transparent; }
html.ks-darcula a { color: var(--ks-link); }
html.ks-darcula :focus-visible { outline: 2px solid var(--ks-accent); outline-offset: 1px; }
html.ks-darcula input, html.ks-darcula textarea, html.ks-darcula select {
  background: var(--ks-input); color: var(--ks-text); border: 1px solid #646464; border-radius: 4px; }
html.ks-darcula input::placeholder, html.ks-darcula textarea::placeholder { color: var(--ks-text-faint); }
html.ks-darcula code { color: #A9B7C6; }
/* 04.11. (User): Badges/Pillen/Chips eckig wie in PhpStorm statt rund — gilt in allen Bereichen. */
html.ks-darcula :is(.pille, .chip, .badge, .zahl, .marker, .schwere, .c-badge, #fortschritt span, #arbeitet, #reiter button .zahl) { border-radius: 3px; }

/* 04.11. (User): Dropdowns überall mit Hand-Zeiger */
select { cursor: pointer; }

/* ---------- Tutorial / geführte Touren (ks-tour.js, 05.11.2026) ---------- */
.ks-tour-layer { position: fixed; inset: 0; z-index: 2147482900; background: transparent; }
.ks-tour-spot { position: fixed; z-index: 2147482910; border-radius: 4px; pointer-events: none; outline: 2px solid var(--ks-accent, #4A88C7);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); transition: left .15s, top .15s, width .15s, height .15s; }
.ks-tour-bubble { position: fixed; z-index: 2147482920; width: 340px; max-width: calc(100vw - 24px); box-sizing: border-box; padding: 14px 16px 12px;
  background: var(--ks-panel, #3C3F41); color: var(--ks-text, #BBBBBB); border: 1px solid var(--ks-line, #515151); border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .5); font: var(--ks-font, 13px/1.45 system-ui, sans-serif); }
.ks-tour-bubble:focus { outline: none; }
.ks-tour-bubble.ks-tour-docked { left: 12px !important; right: 12px; bottom: 12px; top: auto !important; width: auto; margin: 0 auto; max-width: 520px; }
.ks-tour-title { margin: 0 22px 6px 0; font-size: 14px; font-weight: 600; color: var(--ks-text-bright, #DDDDDD); }
.ks-tour-text { margin: 0 0 12px; }
.ks-tour-foot { display: flex; align-items: center; gap: 8px; }
.ks-tour-gap { flex: 1; }
.ks-tour-count { color: var(--ks-text-dim, #ADB0B3); font-size: 12px; }
.ks-tour-close { position: absolute; top: 8px; right: 8px; background: none; border: 0; color: var(--ks-text-dim, #ADB0B3); cursor: pointer; padding: 4px 6px; font-size: 14px; }
.ks-tour-close:hover { color: var(--ks-text-bright, #DDDDDD); }
.ks-tour-bubble .knopf { padding: 4px 10px; cursor: pointer; border-radius: 3px; border: 1px solid var(--ks-btn-border, #5E6060); background: var(--ks-btn, #4C5052); color: var(--ks-text-bright, #DDDDDD); font: inherit; }
.ks-tour-bubble .knopf.prim { background: var(--ks-primary, #365880); border-color: var(--ks-primary-border, #4C708C); }
.ks-tour-menu { position: fixed; z-index: 2147482800; min-width: 240px; padding: 6px 0; background: var(--ks-panel, #3C3F41); border: 1px solid var(--ks-line, #515151);
  border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); font: var(--ks-font, 13px/1.45 system-ui, sans-serif); }
.ks-tour-menu-title { padding: 4px 12px 6px; color: var(--ks-text-dim, #ADB0B3); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.ks-tour-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 6px 12px; background: none; border: 0;
  color: var(--ks-text, #BBBBBB); text-align: left; cursor: pointer; font: inherit; text-decoration: none; }
.ks-tour-menu-item:hover, .ks-tour-menu-item:focus { background: var(--ks-hover, #4B4D4F); color: var(--ks-text-bright, #DDDDDD); outline: none; }
@media (prefers-reduced-motion: reduce) { .ks-tour-spot { transition: none; } }

/* 05.11. (User): Account-Feld (Suche + Liste) — gemeinsam für Portal (Neue Aufgabe) und Werkstatt (Kopf) */
.account-combo { position: relative; display: flex; }
.account-combo input { flex: 1; min-width: 0; }
.account-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; max-height: 300px; overflow: auto; margin: 2px 0 0; padding: 0; list-style: none;
                background: var(--ks-panel); border: 1px solid var(--ks-line); box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.account-list[hidden] { display: none; }
.account-option { padding: 4px 8px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ks-text); font-size: 13px; }
.account-option.selected { font-weight: 600; color: var(--ks-text-bright); }
.account-option.active, .account-option:hover { background: var(--ks-accent-bg); color: var(--ks-text-bright); }
.account-hint { padding: 4px 8px; color: var(--ks-text-dim); font-style: italic; font-size: 13px; }