/* ──────────────────────────────────────────────────────────────────────────
   PrivateAI Admin — Corporate Identity
   Farben: CI.md (blau, Inter)  ·  Dark-Theme: Docki-Referenz
   ────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* CI-Palette */
  --ci-primary:  #1565C0;
  --ci-navy:     #0D47A1;
  --ci-accent:   #42A5F5;
  --ci-light:    #90CAF9;
  --ci-surface:  #1E3A5F;

  /* Docki Dark-BG */
  --bg:          #0f1117;
  --bg-raised:   #131720;
  --card:        #1a1d27;
  --border:      #2d3148;
  --border-soft: rgba(45, 49, 72, 0.6);

  /* Text */
  --text:        #e2e8f0;
  --text-muted:  #94a3b8;
  --text-dim:    #64748b;

  /* Semantisch */
  --success:     #22c55e;
  --danger:      #ef4444;
  --warning:     #f59e0b;
  --info:        var(--ci-accent);

  /* Layout */
  --nav-width:   220px;
  --topbar-h:    54px;
  --radius:      10px;
  --radius-sm:   6px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* ── Top bar ────────────────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: var(--topbar-h);
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 200;
}

.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }

.topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.01em;
  color: var(--ci-accent);
}

/* Hamburger (nur Mobile sichtbar, siehe Media-Query) */
.mobile-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

/* Drawer-Backdrop (nur Mobile) */
.nav-backdrop {
  display: none;
  position: fixed;
  inset: var(--topbar-h) 0 0 0;
  background: rgba(0,0,0,0.5);
  z-index: 250;
}
.nav-backdrop.show { display: block; }

.topbar .user-info {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--text-muted);
}

.topbar .btn-logout {
  padding: 5px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  transition: border-color .15s, color .15s;
}
.topbar .btn-logout:hover { border-color: var(--danger); color: var(--danger); }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.layout {
  display: flex;
  flex: 1;
  min-height: calc(100vh - var(--topbar-h));
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--nav-width);
  background: var(--bg-raised);
  border-right: 1px solid var(--border);
  padding: 12px 0;
  flex-shrink: 0;
  transition: width .18s ease;
  position: relative;
}
.sidebar.collapsed { width: 56px; }

.nav-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 14px;
  padding: 4px 14px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.nav-collapse-btn:hover { color: var(--text); }
.sidebar.collapsed .nav-collapse-btn { justify-content: center; padding: 4px 0 10px; }
.nav-collapse-icon { font-weight: 600; line-height: 1; }

/* Eingeklappt: Label-Text via font-size:0 ausblenden, .nav-icon hat eigene Groesse. */
.sidebar.collapsed .nav-item {
  font-size: 0;
  padding: 10px 0;
  justify-content: center;
  gap: 0;
}
.sidebar.collapsed .nav-item .nav-icon {
  font-size: 18px;
  width: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--text-muted);
  transition: color .15s, background .15s;
  border-left: 3px solid transparent;
  letter-spacing: -.01em;
}
.nav-item:hover {
  color: var(--text);
  background: rgba(255,255,255,0.03);
}
.nav-item.active {
  color: var(--ci-accent);
  background: rgba(66, 165, 245, 0.08);
  border-left-color: var(--ci-primary);
  font-weight: 500;
}
.nav-item .nav-icon { font-size: 15px; width: 20px; text-align: center; }

/* ── Sidebar-Sections (gruppierte Nav-Items mit ein-/ausklappbarem Header) ─ */
.nav-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 6px;
  margin-top: 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  border-top: 1px solid var(--border);
  transition: color .15s;
}
.nav-section-header:hover { color: var(--text); }
.nav-section-chevron {
  font-size: 10px;
  opacity: .7;
  transition: transform .15s;
  line-height: 1;
}
.nav-section-header.collapsed .nav-section-chevron { transform: rotate(-90deg); }
.nav-section-items { overflow: hidden; }
.nav-section-items.collapsed { display: none; }
/* Wenn die ganze Sidebar eingeklappt ist: Section-Header verstecken,
   Items immer als Icons zeigen — sonst wäre Navigation unmöglich. */
.sidebar.collapsed .nav-section-header { display: none; }
.sidebar.collapsed .nav-section-items.collapsed { display: block; }

/* ── Main content ───────────────────────────────────────────────────────── */
.main-content { flex: 1; padding: 28px; overflow-y: auto; max-width: 1100px; }

.section-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: 22px;
  color: var(--text);
}

.page { display: none; }
.page.active { display: block; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px;
  border: 1px solid var(--border);
  margin-bottom: 20px;
}
.card-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 14px;
}

/* ── Dashboard tiles ────────────────────────────────────────────────────── */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.tile {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  border: 1px solid var(--border);
}
.tile-label { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.tile-value { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.tile-sub   { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.tile.ok    .tile-value { color: var(--success); }
.tile.warn  .tile-value { color: var(--warning); }
.tile.error .tile-value { color: var(--danger); }
.tile.info  .tile-value { color: var(--ci-accent); }

/* ── Status dot ─────────────────────────────────────────────────────────── */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.dot.green  { background: var(--success); box-shadow: 0 0 5px var(--success); }
.dot.red    { background: var(--danger);  box-shadow: 0 0 5px var(--danger); }
.dot.yellow { background: var(--warning); box-shadow: 0 0 5px var(--warning); }
.dot.gray   { background: var(--text-dim); }

/* ── Tables ─────────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left;
  padding: 10px 12px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-bottom: 1px solid var(--border);
}
td { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255,255,255,0.02); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  border: none;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  text-decoration: none;
  letter-spacing: -.01em;
}
.btn:hover  { opacity: .88; transform: translateY(-1px); }
.btn:active { opacity: 1;   transform: translateY(0); }
.btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }

.btn-primary {
  background: linear-gradient(135deg, var(--ci-primary) 0%, var(--ci-accent) 100%);
  color: #fff;
}
.btn-secondary {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: rgba(255,255,255,0.10); }
.btn-danger {
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
}
.btn-sm { padding: 5px 12px; font-size: 12px; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}
.form-group input[type=text],
.form-group input[type=password],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--ci-primary); }
.form-row { display: flex; gap: 16px; }
.form-row .form-group { flex: 1; }

/* ── MCP-Werkzeug-Konfiguration (admin-mcp.js) ──────────────────────────── */
.mcp-cfg-box {
  margin-top: 10px;
  padding: 14px;
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.mcp-cfg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 16px;
}
.mcp-cfg-grid .form-group { margin-bottom: 12px; }
.mcp-cfg-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── Progress bar ───────────────────────────────────────────────────────── */
.progress-bar-outer { background: var(--bg); border-radius: 4px; height: 6px; overflow: hidden; margin: 8px 0; }
.progress-bar-inner {
  height: 100%;
  background: linear-gradient(90deg, var(--ci-primary), var(--ci-accent));
  border-radius: 4px;
  transition: width .3s;
}

.log-progress       { margin: 6px 0 10px; }
.log-progress-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }

/* ── Log output ─────────────────────────────────────────────────────────── */
.log-output {
  background: #070a10;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: 12px;
  line-height: 1.6;
  height: 420px;
  overflow-y: auto;
  color: #d1d5db;
  white-space: pre-wrap;
  word-break: break-all;
}
.log-line        { display: block; }
.log-err         { color: #f87171; }
.log-warn        { color: #fbbf24; }
.log-info        { color: #67e8f9; }
.log-debug       { color: #64748b; }
.log-output mark { background: rgba(251,191,36,.25); color: inherit; border-radius: 2px; padding: 0 1px; }
.log-ctrl {
  background: var(--bg-raised);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 5px 9px;
  border-radius: 4px;
  font-size: 12px;
}
/* Native <select>-Dropdown-Popups dunkel statt Browser-Default-Weiß:
   <option>-Elemente erben das Theme nicht, daher explizit setzen. */
select option {
  background: var(--bg-raised);
  color: var(--text);
}

/* ── Spinner ────────────────────────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.12);
  border-top-color: var(--ci-accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse-opacity { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.alert { padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px; }
.alert-danger  { background: rgba(239,68,68,.10); border: 1px solid rgba(239,68,68,.3); color: #fca5a5; }
.alert-success { background: rgba(34,197,94,.10); border: 1px solid rgba(34,197,94,.3); color: #86efac; }
.alert-info    { background: rgba(66,165,245,.10); border: 1px solid rgba(66,165,245,.3); color: var(--ci-accent); }
.alert-warning { background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.3); color: var(--warning); }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge { padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; letter-spacing: .03em; }
.badge-success { background: rgba(34,197,94,.15);  color: #86efac; }
.badge-danger  { background: rgba(239,68,68,.15);  color: #fca5a5; }
.badge-warning { background: rgba(245,158,11,.15); color: var(--warning); }
.badge-info    { background: rgba(66,165,245,.15); color: var(--ci-accent); }

/* ── Model tile ─────────────────────────────────────────────────────────── */
.model-tile {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 16px;
  border: 1px solid var(--ci-surface);
  margin-bottom: 16px;
}
.model-tile-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.model-name { font-size: 15px; font-weight: 700; color: var(--ci-accent); letter-spacing: -.01em; }
.model-meta { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); }

/* ── Quick actions ──────────────────────────────────────────────────────── */
.quick-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* ── WiFi list ──────────────────────────────────────────────────────────── */
.wifi-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.wifi-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  transition: border-color .15s, background .15s;
}
.wifi-list li:hover { border-color: var(--ci-primary); background: rgba(21,101,192,.06); }
.wifi-list li.selected { border-color: var(--ci-primary); background: rgba(21,101,192,.12); }

/* ── Startseite / Docki-Home ────────────────────────────────────────────── */
.docki-home-card {
  text-align: center;
  max-width: 460px;
}
.docki-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.2rem;
}
.docki-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.03em;
  margin-bottom: .35rem;
}
.docki-subtitle {
  color: var(--text-muted);
  font-size: .875rem;
  font-weight: 300;
  letter-spacing: .02em;
  margin-bottom: 1.2rem;
}
.docki-version {
  display: inline-block;
  background: rgba(66,165,245,.12);
  color: var(--ci-light);
  font-size: .75rem;
  font-weight: 600;
  padding: .2rem .75rem;
  border-radius: 99px;
  margin-bottom: 1.4rem;
  letter-spacing: .05em;
  border: 1px solid rgba(66,165,245,.25);
}
.docki-btn {
  width: 100%;
  margin-bottom: .75rem;
}
.docki-meta {
  font-size: .78rem;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.8;
  margin-top: .5rem;
}
.docki-sha {
  font-family: 'Cascadia Code', 'Fira Code', monospace;
  font-size: .67rem;
  word-break: break-all;
  color: var(--text-dim);
  margin-top: .6rem;
}

/* Docki-Download als schmaler, langgezogener Banner (Übersicht-Headline) */
.docki-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
}
.docki-banner-text { flex: 1; min-width: 0; }
.docki-banner-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.docki-banner-title .docki-version { margin: 0; }
.docki-banner-sub { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.docki-banner-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.docki-banner-actions .docki-dl {
  background: linear-gradient(135deg, var(--ci-primary) 0%, var(--ci-accent) 100%);
  color: #fff;
}

/* Menü-Trenner (vor Assistent + Hilfe) */
.nav-sep {
  height: 1px;
  background: var(--border);
  margin: 14px 14px;
}

/* Karten-Schließen („×" → nicht mehr anzeigen) als dezente Zeile darunter */
.card-dismiss-link {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.card-dismiss-link:hover { color: var(--text-muted); background: rgba(255,255,255,0.05); }

/* Popup / Modal (Platzhalter-Liste) */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}
.modal-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 520px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.modal-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover { color: var(--text); }
.modal-body { padding: 8px 18px 16px; overflow-y: auto; }
.ph-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-soft);
}
.ph-code { font-family: 'Cascadia Code','Fira Code',monospace; font-size: 12px; color: var(--ci-light); }
.ph-desc { font-size: 12px; color: var(--text-muted); }
.ph-val  { font-size: 11px; color: var(--text-dim); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mobile-nav-toggle { display: flex; }

  /* Topbar kompakter: kein Brand-Umbruch, redundantes User-Label aus */
  .topbar { padding: 0 12px; }
  .topbar .brand { white-space: nowrap; font-size: 14px; }
  .topbar .user-info #topbar-user { display: none; }

  /* Sidebar wird zum Off-Canvas-Drawer */
  .sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    bottom: 0;
    width: 82vw;
    max-width: 300px;
    z-index: 300;
    transform: translateX(-100%);
    transition: transform .22s ease;
    overflow-y: auto;
    box-shadow: 2px 0 16px rgba(0,0,0,0.45);
    display: block;
  }
  .sidebar.mobile-open { transform: translateX(0); }
  /* Desktop-Collapse-Zustand auf Mobile neutralisieren */
  .sidebar.collapsed { width: 82vw; }
  .sidebar.collapsed .nav-item { font-size: 14px; padding: 13px 20px; justify-content: flex-start; gap: 10px; }
  .sidebar.collapsed .nav-item .nav-icon { font-size: 15px; width: 20px; }
  .nav-collapse-btn { display: none; }

  /* Größere Touch-Targets in der Nav */
  .nav-item { padding: 13px 20px; font-size: 14.5px; }

  .main-content { padding: 16px; }
  .tile-grid { grid-template-columns: 1fr 1fr; }

  /* Datentabellen horizontal scrollbar statt abgeschnitten */
  .card table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card table th, .card table td { white-space: nowrap; }

  /* 2-spaltige Formularzeilen → einspaltig */
  .form-row { flex-direction: column; grid-template-columns: 1fr; gap: 0; }
  .form-row > .form-group { width: 100%; }

  /* Buttons komfortabler */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 34px; }
}

/* ── Skill-Editor (docs/22_anruf_konfigurator.md §10) ─────────────────── */
:root {
  /* Knoten-Akzente lehnen sich an die Mockup-Palette an (§3.4) */
  --se-bg:        #0b1320;
  --se-grid:      rgba(108,165,215,0.06);
  --se-edge:      rgba(108,165,215,0.55);
  --se-node-bg:   #111e2e;
  --se-node-bord: rgba(108,165,215,0.22);
  --se-cyan:      #22d3ee;
  --se-cyan-bg:   rgba(34,211,238,0.10);
  --se-purple:    #a78bfa;
  --se-yellow:    #fbbf24;
  --se-green:     #34d399;
  --se-red:       #f87171;
  --se-gray:      #4b5c75;
}

#page-skill-editor {
  /* Vollbild — wird unter dem Topbar gerendert */
  padding: 0;
}

/* Main-Content hat im Default max-width: 1100px + 28px Padding. Beides bricht
   den Editor visuell ab. Wenn der Skill-Editor aktiv ist: full bleed +
   keine externe Scrollbar (die .se-shell hat ihre eigene Hoehe). */
/* Skill-Editor: voll bleed, keine externe Scrollbar (se-shell hat eigene Hoehe) */
body:has(#page-skill-editor.active) .main-content {
  max-width: none;
  padding: 0;
  overflow: hidden;
}

/* Routing-Page: voll bleed, aber natuerlicher Flow + Browser-Scrollbar.
   Kein internes Scroll-Widget, das Grid darf so hoch werden wie es will. */
body:has(#page-routing.active) .main-content {
  max-width: none;
}
#page-routing { padding: 12px 16px; }

.se-shell {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--topbar-h, 54px));
  min-height: 540px;
  background: var(--se-bg);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}

.se-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.se-topbar-left  { display: flex; align-items: center; gap: 10px; }
.se-topbar-right { display: flex; align-items: center; gap: 8px; }
.se-label { font-size: 11px; color: var(--text-dim); letter-spacing: 0.14em; text-transform: uppercase; }
.se-meta  { font-size: 12px; color: var(--text-muted); font-family: 'Cascadia Code','Fira Code',monospace; }
#se-skill-picker {
  background: var(--bg-raised); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 4px 8px; font-size: 13px; min-width: 200px;
}

.se-body {
  display: grid;
  grid-template-columns: 220px 1fr 0;
  flex: 1; min-height: 0;
  transition: grid-template-columns .18s ease;
}
.se-body.se-body--inspector-open { grid-template-columns: 220px 1fr 320px; }

.se-palette {
  background: var(--card);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.se-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
}
.se-tab {
  flex: 1; padding: 8px 6px;
  background: transparent; border: none; cursor: pointer;
  font-size: 12px; color: var(--text-muted);
  border-bottom: 2px solid transparent;
}
.se-tab--active { color: var(--se-cyan); border-bottom-color: var(--se-cyan); }
.se-tab-count {
  display: inline-block; min-width: 16px; padding: 0 5px;
  background: rgba(108,165,215,0.14); color: var(--text-muted);
  border-radius: 8px; font-size: 10px; margin-left: 3px;
}
.se-tab-body { padding: 8px 10px; }

.se-pal-group       { margin-bottom: 12px; }
.se-pal-group-title {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim); margin: 6px 0 4px; padding: 0 4px;
}
.se-pal-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; margin-bottom: 4px;
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--text-dim);
  border-radius: var(--radius-sm);
  font-size: 12px; color: var(--text);
  cursor: grab; user-select: none;
}
.se-pal-item--cyan          { border-left-color: var(--se-cyan); }
.se-pal-item--purple        { border-left-color: var(--se-purple); }
.se-pal-item--purple-dashed { border-left: 3px dashed var(--se-purple); }
.se-pal-item--yellow        { border-left-color: var(--se-yellow); }
.se-pal-item--green         { border-left-color: var(--se-green); }
.se-pal-item--gray          { border-left-color: var(--se-gray); }
.se-pal-icon { font-size: 14px; opacity: .85; }
.se-pal-hint {
  font-size: 11px; color: var(--text-dim);
  padding: 4px 6px; margin-top: 8px; font-style: italic;
}

.se-var-list { display: flex; flex-direction: column; gap: 4px; }
.se-var-item {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 8px;
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.se-var-name { color: var(--text); font-family: 'Cascadia Code','Fira Code',monospace; }
.se-var-type { color: var(--text-dim); font-size: 10px; }

.se-canvas-wrap {
  position: relative;
  background: var(--se-bg);
  overflow: hidden;
}
.se-canvas-svg, .se-canvas-nodes {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.se-canvas-svg { pointer-events: none; }   /* Edges only — Nodes fangen Events */
.se-canvas-nodes {
  pointer-events: none;
  /* Pflicht: SVG-<g>-Transform geht von (0,0) aus — CSS-Default ist
     50% 50%, das fuehrt sonst zu Edge-Knoten-Drift bei zoom != 1. */
  transform-origin: 0 0;
}
.se-canvas-nodes > .se-node { pointer-events: auto; }

.se-node {
  position: absolute;
  min-width: 180px;
  background: var(--se-node-bg);
  border: 1px solid var(--se-node-bord);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 12px; color: var(--text);
  box-shadow: 0 4px 14px rgba(0,0,0,0.30);
  cursor: pointer;
  user-select: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.se-node:hover                  { border-color: rgba(108,165,215,0.45); }
.se-node.se-node--selected      { border-color: var(--se-cyan); box-shadow: 0 0 0 1px var(--se-cyan), 0 4px 14px rgba(34,211,238,0.20); }
.se-node--message               { border-left: 3px solid var(--se-cyan); }
.se-node--capture               { border-left: 3px solid var(--se-cyan); }
.se-node--branch                { border-left: 3px solid var(--se-purple); }
.se-node--action                { border-left: 3px solid var(--se-yellow); }
.se-node--handoff               { border-left: 3px solid var(--se-green); }
.se-node--end                   { border-left: 3px solid var(--se-gray); }
.se-node--component             { border: 1px dashed var(--se-purple); }
/* Phase 19: Skill-Knoten im UseCase-Workflow */
.se-node--skill                 { border-left: 3px solid var(--se-purple); background: rgba(167,139,250,0.05); }
.se-node-skillref {
  margin-top: 4px;
  font-size: 11px;
  font-family: 'Cascadia Code','Fira Code',monospace;
  color: var(--se-purple);
  background: rgba(167,139,250,0.10);
  border-radius: 4px;
  padding: 2px 6px;
  display: inline-block;
}
.se-pal-item--skill {
  display: flex; align-items: center;
  border-left: 3px solid var(--se-purple);
  background: rgba(167,139,250,0.08);
}
.se-pal-item--skill .se-pal-version {
  font-size: 9px;
  color: var(--text-dim);
  margin-left: auto;
  font-family: 'Cascadia Code','Fira Code',monospace;
}

.se-node-header {
  display: flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 4px;
}
.se-node-title {
  font-size: 13px; color: var(--text); font-weight: 500;
  text-transform: none; letter-spacing: 0;
  word-break: break-word;
}
.se-node-prompt {
  font-size: 11px; color: var(--text-muted);
  line-height: 1.4;
  margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.se-node-captures, .se-node-outputs, .se-node-cases {
  margin-top: 6px;
  border-top: 1px dashed var(--border-soft);
  padding-top: 4px;
}
.se-node-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px;
  font-family: 'Cascadia Code','Fira Code',monospace;
  padding: 2px 0;
}
.se-node-row .se-req-star { color: var(--se-red); margin-left: 2px; }
.se-node-row-type { color: var(--text-dim); font-size: 10px; }
.se-node-outputs { background: rgba(251,191,36,0.06); border-radius: 4px; padding: 4px 6px; }
.se-node-outputs-label { font-size: 10px; color: var(--se-yellow); margin-bottom: 2px; }

.se-case-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px;
}
.se-case-dot--ok       { background: var(--se-green); }
.se-case-dot--warn     { background: var(--se-yellow); }
.se-case-dot--danger   { background: var(--se-red); }
.se-case-dot--default  { background: var(--se-gray); }

.se-canvas-controls {
  position: absolute; left: 12px; bottom: 12px;
  display: flex; gap: 4px; align-items: center;
  background: rgba(11,19,32,0.85);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
}
.se-zoom-label { font-size: 11px; color: var(--text-muted); padding: 0 4px; min-width: 48px; text-align: center; }

.se-minimap {
  position: absolute; right: 12px; bottom: 12px;
  width: 200px; height: 140px;
  background: rgba(11,19,32,0.85);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.se-minimap-node { fill: rgba(108,165,215,0.45); }
.se-minimap-viewport {
  fill: rgba(34,211,238,0.08);
  stroke: var(--se-cyan); stroke-width: 1; vector-effect: non-scaling-stroke;
}

.se-inspector {
  background: var(--card);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.se-body:not(.se-body--inspector-open) .se-inspector { display: none; }
.se-inspector-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
  font-size: 13px; color: var(--text);
}
.se-insp-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--bg);
  border-left: 3px solid var(--text-dim);
  color: var(--text-muted);
  margin-right: 6px;
}
.se-insp-type-badge.se-node--message   { border-left-color: var(--se-cyan);   color: var(--se-cyan); }
.se-insp-type-badge.se-node--capture   { border-left-color: var(--se-cyan);   color: var(--se-cyan); }
.se-insp-type-badge.se-node--branch    { border-left-color: var(--se-purple); color: var(--se-purple); }
.se-insp-type-badge.se-node--action    { border-left-color: var(--se-yellow); color: var(--se-yellow); }
.se-insp-type-badge.se-node--handoff   { border-left-color: var(--se-green);  color: var(--se-green); }
.se-insp-type-badge.se-node--end       { border-left-color: var(--se-gray);   color: var(--text-muted); }
.se-insp-type-badge.se-node--component { border-left: 3px dashed var(--se-purple); color: var(--se-purple); }
.se-insp-node-id {
  font-family: 'Cascadia Code','Fira Code',monospace;
  font-size: 12px;
  color: var(--text);
}
.se-inspector-body { padding: 12px; overflow-y: auto; font-size: 12px; }
.se-insp-section   { margin-bottom: 14px; }
.se-insp-h         {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 6px;
}
.se-insp-row       {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 3px 0; font-size: 12px;
}
.se-insp-key       { color: var(--text-muted); }
.se-insp-val       { color: var(--text); font-family: 'Cascadia Code','Fira Code',monospace; text-align: right; word-break: break-word; }

.se-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000;
}
.se-modal-card {
  background: var(--card); color: var(--text);
  border-radius: var(--radius);
  width: min(720px, 92vw); height: min(560px, 80vh);
  display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.se-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.se-yaml-pre {
  flex: 1; margin: 0; padding: 14px;
  background: var(--bg-raised);
  font-family: 'Cascadia Code','Fira Code',monospace;
  font-size: 12px; color: var(--text);
  overflow: auto; white-space: pre-wrap; word-break: break-word;
}
.se-yaml-edit {
  flex: 1; margin: 0; padding: 14px;
  background: var(--bg-raised);
  border: 0;
  font-family: 'Cascadia Code','Fira Code',monospace;
  font-size: 12px;
  color: var(--text);
  resize: none;
  outline: none;
  tab-size: 2;
  white-space: pre;
}
.se-yaml-footer {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-raised);
}
.se-yaml-msg            { font-size: 11px; color: var(--text-muted); }
.se-yaml-msg--ok        { color: var(--se-green); }
.se-yaml-msg--err       { color: var(--se-red);   white-space: pre-wrap; }

/* ── Phase 3: Ports + Editor-Inputs ─────────────────────────────────── */
.se-port {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--se-edge);
  top: 30px;
  cursor: crosshair;
  z-index: 2;
  transition: transform .12s, border-color .12s, background .12s;
}

/* Smart-Edge-Dots: kleine SVG-Kreise am echten Andockpunkt der Edge
   (im Gegensatz zu den fixen HTML-Ports). Visualisieren oben/unten/links/
   rechts-Anschluesse ohne extra Drag-Targets. */
.se-edge-dot {
  pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.4));
}
.se-port:hover { transform: scale(1.25); border-color: var(--se-cyan); }
.se-port--in   { left: -7px; }
.se-port--out  { right: -7px; background: var(--se-edge); }
.se-node--selected .se-port--out { background: var(--se-cyan); border-color: var(--se-cyan); }

.se-pal-item { transition: background .12s, border-color .12s; }
.se-pal-item:hover { background: var(--bg); }
.se-pal-item.se-pal-item--dragging { opacity: .55; cursor: grabbing; }

.se-insp-edit-row {
  display: flex; flex-direction: column; gap: 3px;
  margin-bottom: 8px;
}
.se-insp-edit-row > label {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim);
}
.se-insp-edit-row input,
.se-insp-edit-row textarea,
.se-insp-edit-row select {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit; font-size: 12px;
  padding: 5px 7px;
}
.se-insp-edit-row textarea { font-family: inherit; resize: vertical; min-height: 50px; }

.se-insp-subsection { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border-soft); }

.se-cap-edit {
  display: flex; gap: 4px; align-items: center;
  margin-bottom: 4px;
}
/* Branch-Case: 2-zeilig — Bedingungs-Input voll breit, Ziel/Farbe darunter */
.se-case-edit {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 10px;
  padding: 6px 8px;
  background: rgba(108,165,215,0.04);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.se-cap-edit input,
.se-case-edit input,
.se-cap-edit select,
.se-case-edit select {
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12px;
  padding: 5px 7px;
}
.se-cap-edit .se-cap-name  { width: 80px; }
.se-cap-edit .se-cap-type  { width: 78px; }
.se-cap-edit .se-cap-req   { display: flex; align-items: center; font-size: 10px; color: var(--text-muted); }
.se-cap-edit .se-cap-req input { margin-right: 2px; }

.se-case-edit .se-case-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.se-case-edit .se-case-when {
  width: 100%;
  font-family: 'Cascadia Code','Fira Code',monospace;
}
.se-case-edit .se-case-row2,
.se-case-edit .se-case-row3 {
  display: flex; align-items: center; gap: 6px;
}
.se-case-edit .se-case-row2 .se-case-target { flex: 1; min-width: 0; }
.se-case-edit .se-case-row3 .se-case-color  { flex: 1; min-width: 0; }

.se-case-edit .se-case-when--invalid {
  border-color: var(--se-red, #f87171);
  background: rgba(248, 113, 113, 0.08);
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.45) inset;
}
.se-case-edit .se-case-err {
  font-size: 11px;
  color: var(--se-red, #f87171);
  background: rgba(248, 113, 113, 0.08);
  border-left: 2px solid var(--se-red, #f87171);
  padding: 3px 6px;
  border-radius: 2px;
  line-height: 1.35;
}

/* ── Workflow-Check ────────────────────────────────────────────────── */
.se-check-badge {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  border-radius: 9px;
  font-size: 10px; font-weight: 700;
  margin-left: 4px;
  padding: 0 5px;
  color: #fff;
}
.se-check-badge--err  { background: var(--se-red,    #f87171); }
.se-check-badge--warn { background: var(--se-yellow, #fbbf24); color: #1a1a1a; }

.se-check-body {
  padding: 10px 14px;
  overflow-y: auto;
  max-height: 60vh;
  display: flex; flex-direction: column; gap: 6px;
}
.se-check-ok {
  color: var(--se-green, #34d399);
  background: rgba(52, 211, 153, 0.10);
  border: 1px solid rgba(52, 211, 153, 0.30);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
}
.se-check-item {
  display: flex; gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--border-soft);
  background: var(--bg-raised);
  font-size: 12px; line-height: 1.45;
}
.se-check-item--error { border-left-color: var(--se-red,    #f87171); }
.se-check-item--warn  { border-left-color: var(--se-yellow, #fbbf24); }
.se-check-item--info  { border-left-color: var(--se-cyan,   #22d3ee); }
.se-check-item .se-check-ic {
  flex-shrink: 0;
  font-weight: 700;
  width: 16px; text-align: center;
}
.se-check-item--error .se-check-ic { color: var(--se-red,    #f87171); }
.se-check-item--warn  .se-check-ic { color: var(--se-yellow, #fbbf24); }
.se-check-item .se-check-msg { flex: 1; }
.se-check-item .se-check-jump {
  display: inline-block; margin-left: 8px;
  background: transparent; border: 1px solid var(--border-soft);
  color: var(--se-cyan); border-radius: 3px;
  padding: 1px 6px; font-size: 11px; cursor: pointer;
}
.se-check-item .se-check-jump:hover { border-color: var(--se-cyan); }

/* ── Workflow-Simulator (Phase 19g) ───────────────────────────────── */
.se-node--sim-trace {
  box-shadow: 0 0 0 2px var(--se-cyan, #22d3ee), 0 4px 14px rgba(34,211,238,0.30);
}

.se-sim-body {
  display: flex; gap: 12px;
  padding: 12px 14px;
  max-height: 78vh; overflow: hidden;
}
.se-sim-left  { flex: 1; min-width: 320px; overflow-y: auto; max-height: 76vh; padding-right: 6px; }
.se-sim-right { flex: 1.2; min-width: 320px; display: flex; flex-direction: column; overflow: hidden; }
.se-sim-hint {
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(108,165,215,0.06);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  margin-bottom: 10px;
  line-height: 1.45;
}
.se-sim-node {
  margin-bottom: 12px;
  padding: 8px 10px;
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.se-sim-node-h     { font-size: 11px; color: var(--se-cyan); margin-bottom: 4px; font-weight: 600; }
.se-sim-node-prompt{ font-size: 11px; color: var(--text-dim); margin-bottom: 6px; line-height: 1.35; }
.se-sim-section    { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
                     color: var(--text-dim); margin: 12px 0 6px; }
.se-sim-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.se-sim-row label { width: 90px; font-size: 11px; color: var(--text-muted); }
.se-sim-row input,
.se-sim-row select {
  flex: 1; min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12px;
  padding: 4px 6px;
}
.se-sim-actions { display: flex; gap: 6px; margin-top: 10px; }

.se-sim-trace-h,
.se-sim-scope-h {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-dim); margin: 0 0 4px;
}
.se-sim-trace {
  flex: 1; min-height: 200px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 8px;
  margin-bottom: 10px;
}
.se-sim-empty { color: var(--text-dim); font-size: 11px; padding: 8px; }
.se-sim-summary {
  font-size: 12px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.se-sim-summary--ok  { color: var(--se-green); background: rgba(52,211,153,0.10); }
.se-sim-summary--err { color: var(--se-red);   background: rgba(248,113,113,0.10); }
.se-sim-step {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border-soft);
}
.se-sim-step:last-child { border-bottom: 0; }
.se-sim-step-n {
  flex-shrink: 0; width: 20px; text-align: right;
  font-size: 10px; color: var(--text-dim); padding-top: 2px;
}
.se-sim-step-ic { flex-shrink: 0; width: 18px; text-align: center; }
.se-sim-step-body { flex: 1; font-size: 11px; line-height: 1.4; }
.se-sim-step-id { font-weight: 600; color: var(--text); }
.se-sim-step-type {
  font-size: 9px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-left: 4px;
}
.se-sim-step-info { color: var(--text-muted); font-size: 11px; }
.se-sim-step-caps code {
  font-size: 10px;
  background: rgba(108,165,215,0.10);
  color: var(--se-cyan);
  padding: 1px 4px; border-radius: 3px;
  margin-right: 4px;
}

/* Phase 27: Dry-Run-Chat-Anzeige (docs/27_voice_dry_run.md) */
.se-dryrun-turn {
  margin-bottom: 8px;
}
.se-dryrun-turn label {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 2px;
}
.se-dryrun-resp {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12px;
  padding: 6px 8px;
  resize: vertical;
}
.se-dryrun-msg {
  display: flex; flex-direction: column;
  margin-bottom: 8px; padding: 6px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
}
.se-dryrun-msg--bot {
  background: rgba(108,165,215,0.08);
}
.se-dryrun-msg--caller {
  background: rgba(52,211,153,0.06);
  align-self: flex-end;
}
.se-dryrun-who {
  font-size: 10px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.se-dryrun-body { font-size: 12px; line-height: 1.45; color: var(--text); }
.se-dryrun-meta {
  font-size: 10px; color: var(--text-muted);
  margin-top: 3px;
}
.se-dryrun-meta code {
  font-size: 10px;
  background: rgba(108,165,215,0.10);
  color: var(--se-cyan);
  padding: 0 4px; border-radius: 3px;
}
.se-dryrun-kind {
  font-size: 9px; padding: 1px 4px;
  border-radius: 3px; text-transform: uppercase; letter-spacing: 0.06em;
}
.se-dryrun-kind--done    { background: rgba(52,211,153,0.18); color: var(--se-green); }
.se-dryrun-kind--error   { background: rgba(248,113,113,0.18); color: var(--se-red); }
.se-dryrun-kind--handoff { background: rgba(251,191,36,0.18); color: var(--se-yellow); }
.se-dryrun-caps {
  margin-top: 4px;
}
.se-dryrun-caps code {
  font-size: 10px;
  background: rgba(108,165,215,0.10);
  color: var(--se-cyan);
  padding: 1px 4px; border-radius: 3px;
  margin-right: 4px;
}

/* Phase 27.1: PASS/FAIL-Score */
.se-dryrun-expect-details {
  margin-top: 8px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
}
.se-dryrun-expect-details summary {
  cursor: pointer;
  font-size: 11px;
  color: var(--text-dim);
}
.se-dryrun-expect-body {
  margin-top: 6px;
}
.se-dryrun-expect-body label {
  display: block;
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 4px;
  margin-bottom: 2px;
}
.se-dryrun-expect-body textarea,
.se-dryrun-expect-body input,
.se-dryrun-expect-body select {
  width: 100%;
  font-size: 11px;
  padding: 4px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  color: var(--text);
  border-radius: var(--radius-sm);
}
.se-dryrun-expect-row {
  margin-top: 4px;
}
.se-dryrun-score {
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.se-dryrun-score--ok  { background: rgba(52,211,153,0.10); border: 1px solid rgba(52,211,153,0.35); }
.se-dryrun-score--err { background: rgba(248,113,113,0.10); border: 1px solid rgba(248,113,113,0.35); }
.se-dryrun-score-head {
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 4px;
}
.se-dryrun-score--ok  .se-dryrun-score-head { color: var(--se-green); }
.se-dryrun-score--err .se-dryrun-score-head { color: var(--se-red); }
.se-dryrun-score-row {
  font-size: 11px;
  padding: 2px 0;
  color: var(--text-muted);
}
.se-dryrun-score-ic { display: inline-block; width: 14px; }
.se-dryrun-score-ok  { color: var(--se-green); }
.se-dryrun-score-err { color: var(--se-red); }
.se-dryrun-score-row code {
  font-size: 10px;
  background: rgba(108,165,215,0.10);
  color: var(--se-cyan);
  padding: 0 4px; border-radius: 3px;
}

/* 27.11: Live-Call-Spectator */
.live-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--se-red);
  animation: live-pulse 1.4s infinite ease-in-out;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.15); }
}
.live-call {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-bottom: 6px;
  background: var(--bg);
}
.live-call-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  margin-bottom: 4px;
}
.live-call-caller { font-weight: 600; }
.live-call-done    { color: var(--se-green); font-size: 11px; }
.live-call-running { color: var(--se-yellow); font-size: 11px; }
.live-chip {
  font-size: 10px;
  background: rgba(108,165,215,0.10);
  color: var(--se-cyan);
  padding: 1px 4px; border-radius: 3px;
  margin-right: 4px;
}
.live-call-trans summary {
  font-size: 10px; color: var(--text-dim); cursor: pointer;
}
.live-call-trans pre {
  margin: 4px 0 0 0;
  font-size: 10px;
  background: rgba(0,0,0,0.18);
  padding: 4px 6px;
  border-radius: 3px;
  white-space: pre-wrap;
}

/* 27.10: Voice-Analytics Bars */
.va-bar-row {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 0;
  font-size: 12px;
}
.va-bar-label {
  min-width: 160px;
  color: var(--text);
}
.va-bar-wrap {
  flex: 1;
  background: rgba(108,165,215,0.10);
  border-radius: 3px;
  overflow: hidden;
  height: 14px;
}
.va-bar {
  background: var(--se-cyan);
  height: 100%;
}
.va-bar-cnt { width: 40px; text-align: right; color: var(--text-dim); }

/* 27.9: Workflow-Diff */
.se-diff-head {
  font-weight: 600;
  font-size: 11px;
  color: var(--text-dim);
  margin: 8px 0 4px 0;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.se-diff-line {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  padding: 1px 6px;
  white-space: pre;
  word-break: break-all;
}
.se-diff-removed { background: rgba(248,113,113,0.10); color: var(--se-red); }
.se-diff-added   { background: rgba(52,211,153,0.10); color: var(--se-green); }

/* 27.9 v2: semantischer Diff */
.se-diff-change {
  margin: 6px 0;
  padding: 4px 0;
  border-top: 1px dashed var(--border-soft);
}
.se-diff-change:first-of-type { border-top: 0; }
.se-diff-change-path {
  font-size: 11px;
  color: var(--se-cyan);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  margin-bottom: 2px;
}
.se-diff-line small {
  font-size: 10px;
  color: var(--text-dim);
  margin-left: 4px;
}

/* 27.16: KI-Suggest Chips */
.se-ai-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-size: 11px;
  cursor: pointer;
}
.se-ai-chip input { margin: 0; }
.se-ai-chip:hover { background: rgba(108,165,215,0.10); }
.se-ai-chip input:checked + span { color: var(--se-cyan); font-weight: 600; }

/* 27.13: History-Modal */
.se-history-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
}
.se-history-row:last-child { border-bottom: 0; }
.se-history-info { flex: 1; }
.se-history-meta { font-size: 10px; color: var(--text-dim); }

/* 27.15: Mic-Button */
.se-dryrun-mic {
  border: 1px solid var(--border-soft);
  background: var(--bg);
  color: var(--text);
  border-radius: 999px;
  padding: 0 6px;
  font-size: 10px;
  margin-left: 6px;
  cursor: pointer;
}
.se-dryrun-mic:hover { background: rgba(108,165,215,0.15); }
.se-dryrun-mic-rec {
  background: rgba(248,113,113,0.20);
  color: var(--se-red);
  animation: live-pulse 1s infinite ease-in-out;
}

/* 27.4: Test-Suite-Liste */
.se-dryrun-suite { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--border-soft); }
.se-dryrun-suite-h {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--text-dim);
  margin-bottom: 4px;
}
.se-dryrun-suite-row {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 4px;
  font-size: 11px;
}
.se-dryrun-suite-row:hover { background: rgba(108,165,215,0.07); }
.se-dryrun-suite-name { flex: 1; color: var(--text); }
.se-dryrun-suite-cnt { color: var(--text-dim); font-size: 10px; }
.se-dryrun-suite-btn {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  color: var(--text);
  font-size: 10px;
  padding: 0 5px;
  border-radius: 3px;
  cursor: pointer;
}
.se-dryrun-suite-btn:hover { background: rgba(108,165,215,0.15); }
.se-dryrun-bulk-row {
  padding: 4px 6px;
  font-size: 11px;
}
.se-dryrun-bulk-meta {
  margin-left: 8px;
  color: var(--text-muted);
  font-size: 10px;
}

/* 27.3: Play-Button fuer TTS-Vorschau */
.se-dryrun-play {
  border: 1px solid var(--border-soft);
  background: var(--bg);
  color: var(--text);
  border-radius: 999px;
  padding: 0 6px;
  font-size: 10px;
  line-height: 1.5;
  margin-left: 4px;
  cursor: pointer;
}
.se-dryrun-play:hover { background: rgba(108,165,215,0.15); }
.se-dryrun-play:disabled { opacity: 0.5; cursor: wait; }

/* 27.2: LLM-Inspector */
.se-dryrun-inspector {
  margin-top: 5px;
  font-size: 10px;
  color: var(--text-dim);
}
.se-dryrun-inspector summary {
  cursor: pointer;
}
.se-dryrun-llm-call {
  margin: 4px 0 4px 12px;
  padding: 4px 6px;
  background: var(--bg);
  border-left: 2px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.se-dryrun-llm-h {
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--text);
}
.se-dryrun-llm-call details { margin: 2px 0; }
.se-dryrun-llm-call summary {
  font-size: 10px;
  color: var(--text-muted);
  cursor: pointer;
}
.se-dryrun-llm-call pre {
  margin: 4px 0 0 0;
  font-size: 10px;
  line-height: 1.35;
  background: rgba(0,0,0,0.20);
  padding: 4px 6px;
  border-radius: 3px;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.se-sim-scope {
  margin: 0;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: 10px; line-height: 1.4;
  max-height: 120px; overflow-y: auto;
  color: var(--text-muted);
}
.se-sim-err {
  color: var(--se-red); font-size: 11px; padding: 8px;
}

/* Phase 11h Option D — Enum-Werte + Classify-Examples-Editor */
.se-insp-enum {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-soft);
}
.se-insp-h--sub {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.se-enum-row {
  display: flex; gap: 4px; align-items: center;
  margin-bottom: 4px;
}
.se-enum-row .se-enum-val {
  width: 90px;
  font-family: 'Cascadia Code','Fira Code',monospace;
  font-size: 11px;
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 4px 6px;
}
.se-enum-row .se-enum-ex {
  flex: 1; min-width: 0;
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 11px;
  padding: 4px 6px;
}

/* Branch-Cases: Hilfezeile + Spaltenkopf */
.se-case-help {
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(108,165,215,0.06);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  margin-bottom: 6px;
  line-height: 1.45;
}
.se-case-help code {
  background: rgba(108,165,215,0.14);
  color: var(--se-cyan);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: 'Cascadia Code','Fira Code',monospace;
  font-size: 10px;
}
.se-case-vars {
  margin-top: 4px;
  font-size: 10px;
  color: var(--text-dim);
}
.se-case-head {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ── Phase 8: UseCase-Editor-Modal ──────────────────────────────────── */
.se-uc-card {
  width: min(640px, 92vw);
  height: auto;
  max-height: 85vh;
}
.se-uc-body {
  padding: 14px;
  overflow-y: auto;
  flex: 1;
}
.se-uc-row {
  display: flex; flex-direction: column;
  gap: 4px; margin-bottom: 12px;
}
.se-uc-row > label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.se-uc-row input,
.se-uc-row textarea,
.se-uc-row select {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  padding: 6px 8px;
}
.se-uc-row input[readonly] { color: var(--text-muted); }
.se-uc-row textarea { resize: vertical; min-height: 50px; }
.se-uc-hint {
  text-transform: none;
  color: var(--text-dim);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0;
  margin-left: 8px;
}

.se-uc-section {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-soft);
}
.se-uc-section-h {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--se-cyan);
  margin-bottom: 8px;
}
.se-uc-skill-list {
  display: flex; flex-direction: column;
  gap: 4px; margin-bottom: 8px;
}
.se-uc-skill-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.se-uc-skill-pos {
  width: 22px; height: 22px;
  flex-shrink: 0;
  background: var(--se-cyan-bg);
  color: var(--se-cyan);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
}
.se-uc-skill-name {
  flex: 1; min-width: 0;
  color: var(--text);
  font-family: 'Cascadia Code','Fira Code',monospace;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.se-uc-skill-actions {
  display: flex; gap: 4px; flex-shrink: 0;
}
.se-uc-skill-actions button { padding: 2px 8px; font-size: 11px; }
.se-uc-empty {
  font-style: italic;
  color: var(--text-dim);
  font-size: 12px;
  padding: 8px;
  text-align: center;
  background: var(--bg-raised);
  border-radius: var(--radius-sm);
}
.se-uc-skill-add {
  display: flex; gap: 6px;
}
.se-uc-skill-add select {
  flex: 1;
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12px;
  padding: 5px 7px;
}

.se-uc-footer {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-raised);
}

#se-uc-edit-btn { padding: 3px 8px; font-size: 14px; }

/* ── Phase 17: Eingangs-Routing ─────────────────────────────────────── */
.rt-status {
  background: var(--bg-raised);
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.rt-status-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
}
.rt-status-did    { font-family: 'Cascadia Code','Fira Code',monospace; color: var(--text); min-width: 160px; }
.rt-status-source { color: var(--text-muted); font-size: 12px; flex: 1; }

.rt-tabs { display: flex; gap: 4px; margin-bottom: 14px; }
.rt-tab {
  background: var(--bg-raised); border: 1px solid var(--border);
  color: var(--text-muted); padding: 6px 14px;
  border-radius: var(--radius-sm); font-size: 13px; cursor: pointer;
}
.rt-tab--active { background: rgba(34,211,238,0.10); color: var(--ci-accent); border-color: var(--ci-accent); }

.rt-legend {
  display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0;
  font-size: 11px;
}
.rt-mode {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Cascadia Code','Fira Code',monospace;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}
.rt-mode--secretary_only  { background: #2563eb; }
.rt-mode--secretary_first { background: #3b82f6; }
.rt-mode--ai_only         { background: #10b981; }
.rt-mode--closed          { background: #6b7280; }

/* Outlook-Style Block-Layout: variable Block-Höhen pro Zeitfenster.
   Container wird vom Parent (#page-routing .rt-tab-body) gescrollt, hier kein
   eigener Scrollbar mehr. */
.rt-grid-wrap { overflow: visible; }
.rt-grid {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 11px;
  user-select: none;
}
.rt-grid-head {
  display: grid;
  grid-template-columns: 56px repeat(7, 1fr);
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 5;
}
.rt-grid-axis-h { background: var(--card); }
.rt-grid-day {
  padding: 6px 0; text-align: center; font-weight: 600; color: var(--text-muted);
  font-size: 12px;
  border-left: 1px solid var(--border-soft);
}
.rt-grid-body {
  display: grid;
  grid-template-columns: 56px repeat(7, 1fr);
  position: relative;
}
.rt-grid-axis {
  position: relative;
  border-right: 1px solid var(--border-soft);
}
.rt-axis-mark {
  position: absolute; left: 0; right: 0;
  font-family: 'Cascadia Code','Fira Code',monospace;
  font-size: 10px;
  color: var(--text-dim);
  padding: 0 6px;
  border-top: 1px solid var(--border-soft);
  line-height: 14px;
}
.rt-day-col {
  position: relative;
  border-left: 1px solid var(--border-soft);
  cursor: copy;
}
.rt-day-col:hover { background: rgba(108,165,215,0.03); }
.rt-hour-line {
  position: absolute; left: 0; right: 0;
  height: 1px;
  background: rgba(108,165,215,0.05);
}
.rt-hour-line--major { background: rgba(108,165,215,0.13); }

.rt-block {
  position: absolute;
  left: 3px; right: 3px;
  border-radius: 4px;
  padding: 3px 6px;
  display: flex; flex-direction: column; gap: 1px;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  overflow: hidden;
  border-left: 3px solid rgba(0,0,0,0.25);
  z-index: 2;
  transition: transform 0.08s, box-shadow 0.08s;
}
.rt-block:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.45);
  z-index: 3;
}
.rt-block-time {
  font-family: 'Cascadia Code','Fira Code',monospace;
  font-size: 10px;
  opacity: 0.85;
  font-weight: 500;
}
.rt-block-mode {
  font-weight: 700;
  font-family: 'Cascadia Code','Fira Code',monospace;
  font-size: 11px;
}
.rt-block-note {
  font-size: 10px;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rt-block-uc {
  align-self: flex-start;
  font-size: 9px;
  font-family: 'Cascadia Code','Fira Code',monospace;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.20);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  opacity: 0.85;
}
/* Block-spezifischer UseCase (override) wird hervorgehoben mit Stern + voller Opacity */
.rt-block-uc--override::before { content: '★ '; }
.rt-block-uc--override         { opacity: 1; font-weight: 600; }
.rt-block--compact {
  padding: 1px 6px;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.rt-block--compact .rt-block-time   { font-size: 9px; }
.rt-block--compact .rt-block-mode   { font-size: 10px; }
.rt-block--compact .rt-block-note   { display: none; }

/* Skills-Toolbar (Phase 6 erweitert) */
.se-skills-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.se-skills-show-all {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.rt-empty {
  padding: 20px; text-align: center; color: var(--text-muted);
  font-style: italic;
}

.rt-abs-card, .rt-did-card {
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 13px;
}
.rt-abs-card > div { margin-bottom: 4px; }
.rt-abs-time { font-family: 'Cascadia Code',monospace; color: var(--text); }
.rt-abs-reason { margin-left: 8px; color: var(--text); }
.rt-abs-meta   { font-size: 11px; color: var(--text-dim); }
.rt-abs-actions { display: flex; justify-content: flex-end; }
.rt-abs-tag {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  font-size: 10px; margin-left: 6px;
}
.rt-abs-tag--holiday { background: rgba(167,139,250,0.18); color: #a78bfa; }
.rt-abs-tag--quick   { background: rgba(251,191,36,0.18); color: #fbbf24; }

.rt-did-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
}
.rt-did-num   { font-family: 'Cascadia Code',monospace; color: var(--text); }
.rt-did-label { color: var(--ci-accent); font-weight: 600; }
.rt-did-meta  { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

.se-uc-info {
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(108,165,215,0.06);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin: 10px 0 6px;
  line-height: 1.5;
}
.se-uc-section-h code {
  background: rgba(108,165,215,0.14);
  color: var(--se-cyan);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: 'Cascadia Code','Fira Code',monospace;
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Phase 4: Sofort-Test im Inspector ──────────────────────────────── */
.se-livetest {
  margin-top: 14px;
  padding: 10px;
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.se-lt-help {
  font-size: 11px; color: var(--text-dim); margin-bottom: 6px; line-height: 1.4;
}
.se-lt-input {
  width: 100%; min-height: 42px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit; font-size: 12px;
  padding: 5px 7px;
  resize: vertical;
}
.se-lt-row {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
}
.se-lt-hint { font-size: 10px; color: var(--text-dim); }

.se-lt-result {
  margin-top: 10px; padding: 8px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.se-lt-err {
  color: var(--se-red); font-size: 12px; font-style: italic;
}
.se-lt-pill {
  display: inline-block;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 6px;
}
.se-lt-pill--emergency { background: rgba(248,113,113,0.18); color: var(--se-red); border: 1px solid var(--se-red); }
.se-lt-pill--pre       { background: rgba(248,113,113,0.12); color: var(--se-red); border: 1px solid rgba(248,113,113,0.4); }
.se-lt-pill--post      { background: rgba(251,191,36,0.14); color: var(--se-yellow); border: 1px solid rgba(251,191,36,0.4); }

.se-lt-reply {
  display: flex; gap: 6px; font-size: 12px; color: var(--text);
  margin-bottom: 6px;
  line-height: 1.4;
}
.se-lt-actor {
  flex-shrink: 0;
  font-size: 9px; padding: 1px 6px; border-radius: 3px;
  background: var(--se-cyan-bg); color: var(--se-cyan);
  letter-spacing: 0.06em; text-transform: uppercase;
  height: 16px; align-self: flex-start;
}

.se-lt-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
  background: rgba(52,211,153,0.08);
  border: 1px solid rgba(52,211,153,0.30);
  border-radius: var(--radius-sm);
  padding: 5px 7px;
  margin-top: 6px;
}
.se-lt-chips-label {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--se-green); align-self: center; margin-right: 4px;
}
.se-lt-chip {
  background: rgba(52,211,153,0.18);
  color: var(--se-green);
  font-family: 'Cascadia Code','Fira Code',monospace;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
}
.se-lt-chips-empty {
  font-size: 11px; color: var(--text-dim); font-style: italic; margin-top: 4px;
}
.se-lt-latency {
  font-size: 10px; color: var(--text-dim); text-align: right; margin-top: 6px;
  font-family: 'Cascadia Code','Fira Code',monospace;
}

/* Phase 5: Komponenten-Indikatoren */
.se-pal-version {
  margin-left: auto;
  font-size: 9px; color: var(--text-dim);
  font-family: 'Cascadia Code','Fira Code',monospace;
}
.se-pal-item--purple-dashed { display: flex; align-items: center; }
.se-node-compref {
  margin-top: 4px;
  font-size: 10px;
  font-family: 'Cascadia Code','Fira Code',monospace;
  color: var(--se-purple);
  background: rgba(167,139,250,0.10);
  border-radius: 4px;
  padding: 2px 6px;
  display: inline-block;
}

/* ── Phase 6: Mode-Toggle + Skills-Karten-Grid ───────────────────────── */
.se-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-right: 8px;
}
.se-mode {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
}
.se-mode:hover { color: var(--text); background: var(--bg-raised); }
.se-mode--active { background: var(--se-cyan-bg); color: var(--se-cyan); }
.se-topbar-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }

.se-skills-grid {
  flex: 1; overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  padding: 14px;
  background: var(--se-bg);
}
.se-skills-empty {
  grid-column: 1/-1;
  text-align: center; color: var(--text-muted);
  padding: 32px;
  font-size: 13px;
}
.se-card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 12px;
  display: flex; flex-direction: column;
  gap: 8px;
  transition: border-color .12s, transform .12s;
}
.se-card:hover {
  border-color: rgba(108,165,215,0.45);
  transform: translateY(-1px);
}
.se-card--disabled { opacity: .55; }
.se-card-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.se-card-title { font-size: 14px; font-weight: 600; color: var(--text); }
.se-card-badge {
  font-size: 9px; padding: 2px 6px; border-radius: 999px;
  letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600;
}
.se-card-badge--builtin { background: var(--se-cyan-bg); color: var(--se-cyan); }
.se-card-badge--custom  { background: rgba(167,139,250,0.15); color: var(--se-purple); }
.se-card-sub {
  font-size: 12px; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 32px;
}
.se-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  border-top: 1px dashed var(--border-soft);
  padding-top: 8px;
  font-size: 11px;
}
.se-card-stats > div { display: flex; justify-content: space-between; }
.se-stat-label { color: var(--text-dim); letter-spacing: 0.08em; text-transform: uppercase; font-size: 9px; }
.se-stat-val   { color: var(--text); font-family: 'Cascadia Code','Fira Code',monospace; font-size: 11px; }
.se-card-actions { display: flex; justify-content: flex-end; }
.se-card-actions button { padding: 3px 10px; font-size: 12px; }

#se-uc-picker {
  background: var(--bg-raised); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 4px 8px; font-size: 12px; min-width: 160px;
}

/* Variablen-Hint neben Label (Firmen-Daten) */
.var-hint {
  font-family: 'Cascadia Code', 'Fira Code', monospace;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-dim);
  background: rgba(108,165,215,0.08);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
}