/* ─── Dashboard/Home: Projektliste, Kennzahlen, Charts, Updates, Modell-Übersichten ─── */

/* Project List */

.project-list {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  min-height: 0;
}

.list-section {
  padding: var(--space-1) 0;
}

.list-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-3) 0;
  border: none;
  border-bottom: 1px solid var(--border-light);
  background: none;
  color: var(--text-primary);
  font-family: var(--font);
  cursor: pointer;
  text-align: left;
  gap: 10px;
  transition: opacity var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.list-item:last-child {
  border-bottom: none;
}

.list-item:active {
  opacity: 0.5;
}

.list-item-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-muted);
}

.list-item-icon.sysmgmt-icon {
  background: rgba(217, 83, 79, 0.15);
  color: var(--error);
}

/* System console (sysmgmt) — gently set apart with a divider beneath it. */

.list-item.sysmgmt {
  border-bottom: 1px solid var(--border-strong);
  margin-bottom: var(--space-2);
  padding-bottom: 14px;
}

.list-item-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.list-item-name {
  font-size: var(--fs-base);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-item-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.list-item-meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.list-item-arrow {
  color: var(--text-muted);
  flex-shrink: 0;
  opacity: 0.5;
}

/* ─── Tablet: Project List / Dashboard ─── */

@media (min-width: 768px) {
  .dashboard-header {
    padding: var(--space-6) var(--space-8) var(--space-4);
  }
  .dashboard-header h1 {
    font-size: var(--fs-lg);
  }
  .list-section {
    padding: var(--space-2) 0;
  }
  .list-item {
    padding: var(--space-4) 0;
    gap: 14px;
  }
  .list-item-icon {
    width: 42px;
    height: 42px;
  }
  .list-item-icon svg {
    width: 20px;
    height: 20px;
  }
}

@media (min-width: 1024px) {
  .dashboard-header {
    padding: 28px 48px 20px;
  }
  .list-section {
    padding: var(--space-2) 0;
    width: 100%;
  }
}

/* Agentic loading animation (dashboard) */

.agent-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 260px;
  padding: 56px 20px;
}

.agent-loader-core {
  position: relative;
  width: 92px;
  height: 92px;
}

.agent-loader-orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--accent-muted);
  animation: agentOrbit 2.4s linear infinite;
}

.agent-loader-orbit::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px 1px var(--accent-muted);
}

.agent-loader-orbit.orbit-2 {
  inset: 19px;
  animation-duration: 1.6s;
  animation-direction: reverse;
  opacity: 0.7;
}

.agent-loader-orbit.orbit-2::before {
  width: 6px;
  height: 6px;
  margin-left: -3px;
  top: -3px;
}

.agent-loader-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: var(--accent);
  animation: agentPulse 1.7s ease-out infinite;
}

.agent-loader-caption {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  letter-spacing: 0.2px;
  min-height: 1.3em;
  transition: opacity 0.22s ease;
}

@keyframes agentOrbit {
  to { transform: rotate(360deg); }
}

@keyframes agentPulse {
  0%   { transform: scale(0.85); box-shadow: 0 0 0 0 var(--accent-muted); }
  70%  { transform: scale(1.08); box-shadow: 0 0 0 18px transparent; }
  100% { transform: scale(0.85); box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .agent-loader-orbit,
  .agent-loader-pulse { animation: none; }
}

/* Overview / Dashboard statistics */

.overview-view {
  background: var(--bg-surface);
}

.overview-body {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  min-height: 0;
  padding: var(--space-3) var(--space-4);
}

/* One unified panel with hairline dividers instead of six floating cards —
   keeps the same numbers but reads as a single calm summary strip. */

.overview-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 9px 12px;
  background: var(--bg-secondary);
  border: none;
  border-radius: 0;
}

.stat-card-value {
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.stat-card-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.stat-card-warn .stat-card-value {
  color: var(--error);
}

.overview-section-title {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 20px 2px 8px;
}

.overview-projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: var(--space-2);
}

.project-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 12px 13px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-normal),
              border-color var(--transition-fast), background var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.project-card:hover {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.project-card:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

@media (hover: none) {
  .project-card:active { opacity: 0.7; transform: none; }
}

/* Pinned quick-access card (sysmgmt) — tinted + accented. */

.project-card.sysmgmt {
  background: var(--error-muted);
  border-color: rgba(217, 83, 79, 0.35);
}

.project-card.sysmgmt:hover {
  background: rgba(217, 83, 79, 0.18);
  border-color: rgba(217, 83, 79, 0.45);
}

.project-card-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}

.project-card-name {
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-card-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  flex-shrink: 0;
}

.project-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.project-card-badges:empty {
  display: none;
}

.badge {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1.4;
}

.badge-stack {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.badge-warn {
  background: rgba(217, 83, 79, 0.15);
  color: var(--error);
}

.project-card-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.metric {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.metric-val {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.metric-lbl {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.project-card-usage {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}

/* ─── Friendly, non-technical project card ─────────────────── */

.project-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.project-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: linear-gradient(140deg, var(--dash-accent-soft), var(--dash-accent-softer));
  border: 1px solid var(--dash-accent-line);
  color: var(--dash-accent-ink);
  transition: transform var(--transition-normal);
}

.project-card-icon svg { width: 17px; height: 17px; }

.project-card:hover .project-card-icon {
  transform: scale(1.06) rotate(-2deg);
}

.project-card-icon.sysmgmt-icon {
  background: rgba(217, 83, 79, 0.16);
  border-color: rgba(217, 83, 79, 0.3);
  color: var(--error);
}

.project-card:hover .project-card-icon.sysmgmt-icon {
  transform: scale(1.06) rotate(-2deg);
}

.project-card-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  color: var(--dash-accent-ink);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.project-card:hover .project-card-cta {
  opacity: 1;
  transform: translateX(0);
}

@media (hover: none) {
  .project-card-cta { opacity: 0.5; transform: none; }
}

/* ─── Dashboard hero header ────────────────────────────────── */

.dashboard-view {
  --dash-accent: #7c83ff;
  --dash-accent-ink: #8b8fff;
  --dash-accent-soft: rgba(124, 131, 255, 0.16);
  --dash-accent-softer: rgba(124, 131, 255, 0.04);
  --dash-accent-line: rgba(124, 131, 255, 0.22);
}

[data-theme="light"] .dashboard-view {
  --dash-accent: #5b61e6;
  --dash-accent-ink: #5b61e6;
  --dash-accent-soft: rgba(91, 97, 230, 0.12);
  --dash-accent-softer: rgba(91, 97, 230, 0.03);
  --dash-accent-line: rgba(91, 97, 230, 0.2);
}

.overview-body > .dash-hero,
.overview-body > .dash-toolbar,
.overview-body > #dash-results {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

.dash-hero {
  position: relative;
  overflow: hidden;
  padding: 14px 16px;
  margin-bottom: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}

.dash-hero-glow { display: none; }

.dash-hero-head {
  position: relative;
}

.dash-hero-greeting {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--dash-accent-ink);
  margin: 0 0 1px;
}

.dash-hero-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
}

.dash-hero-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) 0;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.hero-stat {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding-left: 14px;
  border-left: 1px solid var(--border);
}

/* 2-col grid: the first column (odd items) carries no divider. */

.hero-stat:nth-child(odd) { border-left: none; padding-left: 0; }

@media (min-width: 640px) {
  .dash-hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* 4-col grid: only the very first item drops its divider. */
  .hero-stat,
  .hero-stat:nth-child(odd) { border-left: 1px solid var(--border); padding-left: 14px; }
  .hero-stat:first-child { border-left: none; padding-left: 0; }
}

.hero-stat-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.hero-stat-ico svg { width: 14px; height: 14px; }

.hero-stat-body {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.hero-stat-val {
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.hero-stat-lbl {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.project-card-headings {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.project-card-headings .project-card-name {
  font-size: var(--fs-md, var(--fs-base));
  display: block;
  max-width: 100%;
}

.project-card-headings .project-card-sub {
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-card-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.pc-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-secondary);
}

.pc-stat svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.pc-stat.pc-muted {
  color: var(--text-muted);
  font-weight: 400;
}

.project-card-tech {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}

.list-item-convos {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-secondary);
}

.list-item-convos svg {
  opacity: 0.6;
}

#refresh-btn.spinning svg {
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ─── Agentic Dashboard: title bar, toolbar, filters ───────── */

.dash-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.dash-titlebar h1 {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

.dash-actions {
  display: flex;
  gap: 2px;
  align-items: center;
}

.dash-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-3);
}

/* Always-visible row: view toggle, search and the filter toggle. */

.dash-toolbar-primary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Secondary controls (stack, sort, direction, updates) collapse by default to
   keep the dashboard calm; the filter button reveals them on demand. */

.dash-filters {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.dash-filters.open { display: flex; }

.dash-filter-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  padding: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.dash-filter-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }

.dash-filter-btn.active { background: var(--bg-tertiary); color: var(--text-primary); }

.dash-filter-dot {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--error);
}

.dash-filter-btn.has-filters .dash-filter-dot { display: block; }

.dash-toggle {
  display: inline-flex;
  padding: 2px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.dash-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.dash-toggle button.active {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.dash-search {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
}

.dash-search input {
  flex: 1;
  min-width: 0;
  padding: 7px 0;
  border: none;
  background: none;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: var(--fs-sm);
  outline: none;
}

.dash-search input::placeholder { color: var(--text-muted); }

.dash-select {
  padding: 7px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: var(--fs-sm);
  cursor: pointer;
  outline: none;
}

.dash-dir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.dash-dir:hover { background: var(--bg-tertiary); color: var(--text-primary); }

.dash-chip {
  padding: 7px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.dash-chip.active {
  background: rgba(217, 83, 79, 0.15);
  border-color: rgba(217, 83, 79, 0.4);
  color: var(--error);
}

.list-item-stats {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.list-item-stats .list-item-meta {
  color: var(--text-muted);
  min-width: 52px;
  text-align: right;
}

/* ─── Combined home (console + statistics) ─────────────── */

.home-view {
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-primary);
}

.home-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  min-height: var(--header-h);
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.home-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--fs-base);
  letter-spacing: -0.01em;
}

.home-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  color: var(--text-primary);
}

.home-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
  flex-wrap: wrap;
}

.home-projects-btn { padding: 8px 12px; gap: 6px; }

.home-split {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.home-console {
  flex: 0 0 56%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.home-console .chat-container { flex: 1; min-height: 0; }

.home-stats {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  background: var(--bg-surface);
}

.home-stats-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--space-8) var(--space-4);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.home-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--text-secondary);
  border-radius: 50%;
  animation: home-spin 0.8s linear infinite;
}

@keyframes home-spin { to { transform: rotate(360deg); } }

.home-stats-inner { padding: 14px; display: flex; flex-direction: column; gap: 14px; }

.home-stats-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.home-stat-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.home-stat-val { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em; }

.home-stat-lbl { font-size: var(--fs-xs, 11px); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }

.home-charts { display: grid; grid-template-columns: 1fr; gap: 12px; }

.home-chart-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.home-chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: 10px;
}

.home-chart-sub { color: var(--text-muted); font-weight: 500; font-size: var(--fs-xs, 11px); }

.home-svg { width: 100%; height: 90px; display: block; }

.home-chart-empty {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.home-bars { display: flex; flex-direction: column; gap: 7px; }

.home-bar-row { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }

.home-bar-label {
  flex: 0 0 34%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-secondary);
}

.home-bar-track {
  flex: 1;
  height: 8px;
  background: var(--bg-hover);
  border-radius: 999px;
  overflow: hidden;
}

.home-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6ea8fe, #4d8bff);
}

.home-bar-val { flex: 0 0 auto; color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; }

.home-recent {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px;
}

.home-recent-head { font-size: var(--fs-sm); font-weight: 600; padding: 6px 8px 8px; }

.home-recent-list { display: flex; flex-direction: column; }

.home-recent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 8px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-primary);
  font-family: var(--font);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background var(--transition-fast);
}

.home-recent-item:hover { background: var(--bg-hover); }

.home-recent-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }

.home-recent-meta { color: var(--text-muted); font-size: var(--fs-xs, 11px); flex-shrink: 0; }

.home-recent-item svg { color: var(--text-muted); flex-shrink: 0; }

.home-recent-empty { padding: 12px 8px; color: var(--text-muted); font-size: var(--fs-sm); }

/* Desktop: two-column charts, more breathing room. */

@media (min-width: 768px) {
  .home-stats-cards { grid-template-columns: repeat(6, 1fr); }
  .home-charts { grid-template-columns: 1fr 1fr; }
  .home-stats-inner { padding: 18px; gap: 16px; }
}

/* Mobile: console keeps a usable height, stats scroll below. */

@media (max-width: 600px) {
  .home-header { min-height: 48px; padding: 6px 10px; gap: 6px; }
  .home-projects-btn span { display: none; }
  .home-projects-btn { padding: 8px 10px; }
  .home-console { flex-basis: 58%; }
}

/* System-console shortcut in the dashboard header. */

.console-btn {
  padding: 8px 14px;
  gap: 6px;
}

.console-btn.hidden { display: none; }

@media (max-width: 600px) {
  .console-btn span { display: none; }
  .console-btn { padding: 8px 10px; }
}

/* ─── Manual update check ─────────────────────────── */

.dash-update-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dash-update-btn:hover {
  background: var(--accent-muted);
  color: var(--text-primary);
  border-color: var(--accent);
}

.dash-update-btn svg { flex-shrink: 0; }

@media (max-width: 600px) {
  .dash-update-btn-label { display: none; }
  .dash-update-btn { padding: 0 10px; }
}

/* Status badges on cards / list rows */

.upd-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
  padding: 2px 8px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}

.upd-badge.upd-warn {
  background: rgba(214, 158, 46, 0.16);
  color: #b7791f;
  border-color: rgba(214, 158, 46, 0.3);
}

.upd-badge.upd-error {
  background: var(--error-muted);
  color: var(--error);
}

.upd-badge.upd-ok {
  background: var(--success-muted);
  color: var(--success);
}

.upd-badge.upd-running {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}

.upd-spin {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: upd-spin-kf 0.7s linear infinite;
  opacity: 0.7;
}

.upd-spin-lg { width: 26px; height: 26px; border-width: 3px; opacity: 0.5; }

@keyframes upd-spin-kf { to { transform: rotate(360deg); } }

/* Detail modal */

.upd-card {
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.upd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.upd-head h2 {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upd-x {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.upd-x:hover { background: var(--bg-tertiary); color: var(--text-primary); }

.upd-body {
  padding: 16px 18px;
  overflow-y: auto;
}

.upd-modal-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: var(--space-6) var(--space-2);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

.upd-modal-error { color: var(--error); }

.upd-modal-errmsg {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  word-break: break-word;
}

.upd-summary {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-primary);
}

.upd-block { margin-bottom: 16px; }

.upd-block:last-child { margin-bottom: 0; }

.upd-block h4 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.upd-hints {
  margin: 0;
  padding-left: 18px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-secondary);
}

.upd-hints li { margin-bottom: 4px; }

.upd-empty { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }

.upd-todos { list-style: none; margin: 0; padding: 0; }

.upd-todo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}

.upd-todo:last-child { border-bottom: none; }

.upd-todo-main {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.upd-todo-main input { margin-top: 2px; flex-shrink: 0; }

.upd-todo-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.upd-todo-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }

.upd-todo-detail { font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.45; }

.upd-todo.done .upd-todo-title { text-decoration: line-through; color: var(--text-muted); font-weight: 500; }

.upd-todo.done .upd-todo-detail { color: var(--text-muted); }

.upd-prio {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: 999px;
  margin-top: 1px;
}

.upd-prio-hoch { background: var(--error-muted); color: var(--error); }

.upd-prio-normal { background: var(--bg-tertiary); color: var(--text-secondary); }

.upd-prio-niedrig { background: var(--accent-muted); color: var(--text-muted); }

.upd-checked {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.upd-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}

/* ─── Dashboard: KPI cards, chart cards, charts ──────────────── */

.dash-home-scroll {
  padding: var(--space-4) var(--space-4) var(--space-4);
}

.dash-home-scroll > section {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.dash-home-scroll > section + section {
  margin-top: var(--space-4);
}

.dash-home-scroll > .dash-hero {
  margin-bottom: 0;
}

.dash-projects-error {
  max-width: 1100px;
  margin: 0 auto 12px;
}

/* KPI grid */

.dash-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 640px) {
  .dash-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .dash-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .dash-kpis { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

.kpi-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}

.kpi-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.kpi-card.kpi-warn .kpi-ico {
  background: color-mix(in srgb, var(--warning, #e0a030) 15%, transparent);
  color: var(--warning, #e0a030);
}

.kpi-val {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.1;
}

.kpi-card.kpi-warn .kpi-val { color: var(--warning, #e0a030); }

.kpi-lbl {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Card shell for charts/sections */

.dash-card {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}

.dash-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: var(--space-3);
}

.dash-card-head h3 {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 600;
}

.dash-card-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.dash-card .dash-activity-list { margin-top: 0; }

/* Range + metric toggles in the activity card head */

.dash-chart-toggles {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* Segmented metric toggle */

.seg-toggle {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
}

.seg-btn {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.seg-btn:hover { color: var(--text-primary); }

.seg-btn.active {
  background: var(--bg-secondary);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.08));
}

/* Charts */

.dash-chart-host { width: 100%; }

.dash-chart-summary {
  margin: 0 0 6px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.dash-chart-summary strong { color: var(--text-primary); }

.chart-svg {
  display: block;
  width: 100%;
  height: 150px;
}

.chart-grid {
  stroke: var(--border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0.6;
}

.chart-max {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 2px;
}

.chart-xaxis {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-1);
  font-size: 11px;
  color: var(--text-muted);
}

.chart-empty {
  padding: var(--space-6) 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* Donut */

.donut-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.donut-graphic {
  position: relative;
  flex-shrink: 0;
}

.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.donut-center-val {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.donut-center-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.donut-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.donut-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
}

.donut-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.donut-legend-label {
  flex: 1;
  color: var(--text-secondary);
}

.donut-legend-val {
  font-weight: 600;
  color: var(--text-primary);
}

.donut-empty { color: var(--text-muted); }

/* Horizontal bar list */

.bar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bar-row {
  display: grid;
  grid-template-columns: minmax(70px, 30%) 1fr auto;
  align-items: center;
  gap: 10px;
}

.bar-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--bg-tertiary);
  overflow: hidden;
}

.bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width var(--transition-fast);
}

.bar-val {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  min-width: 28px;
  text-align: right;
}

/* Dashboard: Modell-Provider-Übersicht */

.dash-provider-list { display: flex; flex-direction: column; }

.dash-provider-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.dash-provider-row:last-child { border-bottom: none; }

.dash-provider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
  background: var(--text-muted);
}

.dash-provider-dot.provider-claude { background: var(--provider-claude); }

.dash-provider-dot.provider-cursor { background: var(--provider-cursor); }

.dash-provider-dot.provider-opencode { background: var(--provider-opencode); }

.dash-provider-dot.provider-pi { background: var(--provider-pi); }

.dash-provider-main { min-width: 0; flex: 1; }

.dash-provider-title { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }

.dash-provider-sub { color: var(--text-secondary); font-size: var(--fs-xs, 11px); margin-top: 2px; }

.dash-provider-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 7px;
  border-radius: 999px;
}

.dash-provider-badge.ok {
  color: var(--success, #16a34a);
  background: color-mix(in srgb, var(--success, #16a34a) 12%, transparent);
}

.dash-provider-badge.off {
  color: var(--text-muted);
  background: var(--bg-hover, rgba(0,0,0,0.06));
}

.dash-provider-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.dash-provider-chip {
  font-size: var(--fs-xs, 11px);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 9px;
}

.dash-provider-chip b { color: var(--text-primary); font-weight: 600; }

/* Dashboard: Modell-Performance (Ø Dauer je Lauf, Durchsatz, Kosten) */

.dash-perf-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.dash-perf-row:last-child { border-bottom: none; }

.dash-perf-row .dash-provider-dot { margin-top: 0; }

.dash-perf-main { min-width: 0; flex: 1; }

.dash-perf-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-perf-sub { color: var(--text-secondary); font-size: var(--fs-xs, 11px); margin-top: 2px; }

.dash-perf-vals {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.dash-perf-val {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.dash-perf-val-sub {
  color: var(--text-secondary);
  font-size: var(--fs-xs, 11px);
  font-variant-numeric: tabular-nums;
}

.dash-tps-rank { margin: 4px 0 12px; }

/* Dashboard: globaler Zeitraum-Umschalter + Hero-Warn-Chip */

.dash-home-header { justify-content: flex-start; gap: 10px; }

.dash-home-header h1 { margin-right: auto; }

.dash-hero-warn {
  color: var(--warning, #b45309);
  font-weight: 600;
}

@media (max-width: 600px) {
  .dash-home-header { flex-wrap: wrap; row-gap: 8px; }
  .dash-global-range { order: 3; width: 100%; margin-left: 0; }
  .dash-global-range .seg-btn { flex: 1; }
}

/* ─── Auftragsboard ───────────────────────────────────────────────────── */
.dash-board { margin-bottom: var(--space-6); }

/* ─── Dashboard: Handlungsbedarf zuerst, Auswertung zugeklappt ─────────── */
.dash-allgood { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--fs-sm); }
.dash-analysis { display: flex; flex-direction: column; gap: inherit; }
.dash-analysis > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: var(--space-3) var(--space-1); font-weight: 600; color: var(--text-secondary);
}
.dash-analysis > summary::-webkit-details-marker { display: none; }
.dash-analysis > summary::before { content: '▸'; display: inline-block; transition: transform .15s; color: var(--text-muted); }
.dash-analysis[open] > summary::before { transform: rotate(90deg); }
.dash-analysis[open] > * + * { margin-top: var(--space-3); }
@media (prefers-reduced-motion: reduce) { .dash-analysis > summary::before { transition: none; } }

/* ─── Systemzustand: interaktive Architektur-Grafik ─────────────────────── */
.dash-health { --st-ok: var(--success); --st-warn: var(--warning); --st-error: var(--danger, #dc2626); --st-off: var(--text-muted); --flow: #3b82f6; }
.dash-health-label { font-size: var(--fs-sm); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; color: var(--st-ok); }
.dash-health-label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
.dash-health-label[data-status="warn"] { color: var(--st-warn); }
.dash-health-label[data-status="error"] { color: var(--st-error); }

.sysmap { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--space-4); align-items: start; }
.sysmap-svg { width: 100%; height: auto; display: block; overflow: visible; }
.sysmap-loading { display: flex; justify-content: center; padding: var(--space-8); }
/* Zonen: ruhige Flächen mit Titel, wie in einem Architekturdiagramm */
.sysmap-zone-bg { fill: color-mix(in srgb, var(--text-primary) 3%, transparent); stroke: var(--border); stroke-width: 1; stroke-dasharray: 4 5; }
.sysmap-zone-label { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; fill: var(--text-muted); }
.sysmap-zone-sub { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; fill: var(--text-muted); opacity: .8; }
.sysmap-col { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; fill: var(--text-muted); text-anchor: middle; }

.sysmap-edge-base { fill: none; stroke: color-mix(in srgb, var(--text-muted) 45%, transparent); stroke-width: 1.4; }
.sysmap-edge-flow { fill: none; stroke: var(--flow); stroke-width: 1.6; stroke-dasharray: 3 9; opacity: .35; animation: sysmap-flow 3.2s linear infinite; }
.sysmap-edge.is-active .sysmap-edge-base { stroke: color-mix(in srgb, var(--flow) 45%, var(--border)); stroke-width: 2.2; }
.sysmap-edge.is-active .sysmap-edge-flow { opacity: .9; stroke-width: 2.2; animation-duration: 1.1s; }
.sysmap-edge.st-error .sysmap-edge-flow { stroke: var(--st-error); }
.sysmap-edge.st-off .sysmap-edge-flow { opacity: 0; animation: none; }
.sysmap-edge.st-off .sysmap-edge-base { stroke-dasharray: 2 4; opacity: .6; }
.sysmap-pulse { fill: #60a5fa; filter: drop-shadow(0 0 4px #3b82f6); }
.sysmap.has-focus .sysmap-edge:not(.is-lit) { opacity: .25; }
.sysmap-edge.is-lit .sysmap-edge-base { stroke: var(--flow); }
.sysmap-edge { transition: opacity .2s; }
@keyframes sysmap-flow { to { stroke-dashoffset: -48; } }

.sysmap-node { cursor: pointer; outline: none; transition: opacity .2s, transform .2s; transform-box: fill-box; transform-origin: center; }
.sysmap-node-bg { fill: var(--bg-elevated); stroke: var(--border); stroke-width: 1.2; transition: stroke .2s, fill .2s; }
.sysmap-node:hover .sysmap-node-bg, .sysmap-node:focus-visible .sysmap-node-bg, .sysmap-node.is-selected .sysmap-node-bg { stroke: var(--flow); stroke-width: 2; }
.sysmap-node:hover { transform: translateY(-1px); }
.sysmap.has-focus .sysmap-node:not(.is-lit):not(.is-selected) { opacity: .45; }
.sysmap-label { font-size: 13px; font-weight: 600; fill: var(--text-primary); }
.sysmap-node:not(.is-small) .sysmap-label { transform: translateY(-5px); }
.sysmap-sub { font-size: 10.5px; fill: var(--text-muted); }
.sysmap-node.is-small .sysmap-label { font-size: 11.5px; font-weight: 500; }
.sysmap-dot { fill: var(--st-ok); }
.sysmap-halo { fill: var(--st-ok); opacity: .18; transform-box: fill-box; transform-origin: center; }
.st-warn > .sysmap-dot, .sysmap-node.st-warn .sysmap-dot, .sysmap-node.st-warn .sysmap-halo { fill: var(--st-warn); }
.sysmap-node.st-error .sysmap-dot, .sysmap-node.st-error .sysmap-halo { fill: var(--st-error); }
.sysmap-node.st-off .sysmap-dot, .sysmap-node.st-off .sysmap-halo { fill: var(--st-off); }
.sysmap-node.st-off .sysmap-label { fill: var(--text-muted); }
.sysmap-node.st-error .sysmap-halo, .sysmap-node.st-warn .sysmap-halo, .sysmap-node.is-busy .sysmap-halo { animation: sysmap-halo 1.8s ease-out infinite; }
.sysmap-node.is-busy .sysmap-node-bg { stroke: color-mix(in srgb, var(--flow) 60%, var(--border)); }
@keyframes sysmap-halo { 0% { transform: scale(.6); opacity: .5; } 100% { transform: scale(1.9); opacity: 0; } }

.sysmap-detail { background: var(--bg-tertiary); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); min-height: 96px; font-size: var(--fs-sm); }
.sysmap-hint { margin: 0; color: var(--text-muted); }
.sysmap-detail-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.sysmap-detail-sum { margin: var(--space-2) 0 0; color: var(--text-primary); }
.sysmap-detail-more { margin: var(--space-2) 0 0; color: var(--text-muted); line-height: 1.45; }
.sysmap-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; color: #fff; background: var(--st-ok); }
.sysmap-badge.st-warn { background: var(--st-warn); } .sysmap-badge.st-error { background: var(--st-error); } .sysmap-badge.st-off { background: var(--st-off); }

/* Liste nur am Handy (Grafik zu klein zum Lesen) */
.sysmap-list { display: none; }
.sysmap-row { display: grid; grid-template-columns: 10px minmax(0, auto) 1fr; align-items: center; gap: 10px; width: 100%; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.sysmap-row-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--st-ok); }
.sysmap-row.st-warn .sysmap-row-dot { background: var(--st-warn); } .sysmap-row.st-error .sysmap-row-dot { background: var(--st-error); } .sysmap-row.st-off .sysmap-row-dot { background: var(--st-off); }
.sysmap-row-name { font-weight: 500; font-size: var(--fs-sm); }
.sysmap-row-sum { font-size: var(--fs-xs); color: var(--text-muted); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sysmap-row.is-selected { background: var(--bg-hover); }
@media (max-width: 1024px) { .sysmap { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .sysmap-svg { display: none; } .sysmap-list { display: block; } }
@media (prefers-reduced-motion: reduce) {
  .sysmap-edge-flow, .sysmap-halo { animation: none !important; }
  .sysmap-pulse { display: none; }
}

/* ─── Board im Leerlauf: eine Zeile + Reihe statt leerer Spalten ─────────── */

/* KPI-Reihe füllt die Breite, Symbole mit leiser Farbe (war trist) */
.dash-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.dash-kpis > :nth-child(4n+1) .kpi-ico { color: #3b82f6; background: color-mix(in srgb, #3b82f6 14%, transparent); }
.dash-kpis > :nth-child(4n+2) .kpi-ico { color: #8b5cf6; background: color-mix(in srgb, #8b5cf6 14%, transparent); }
.dash-kpis > :nth-child(4n+3) .kpi-ico { color: #10b981; background: color-mix(in srgb, #10b981 14%, transparent); }
.dash-kpis > :nth-child(4n+4) .kpi-ico { color: #f59e0b; background: color-mix(in srgb, #f59e0b 14%, transparent); }

/* ─── Begrüßung: persönlich, groß, Updates als dezente Blase ────────────── */
.dash-hero-hello { margin: 0; font-size: 1.5rem; font-weight: 650; letter-spacing: -.01em; color: var(--text-primary); padding-right: 120px; }
.dash-hero-sub { margin: 4px 0 0; color: var(--text-secondary); font-size: var(--fs-base); }
.dash-wave { display: inline-block; transform-origin: 70% 70%; animation: dash-wave 2.4s ease-in-out 0.4s 1; }
@keyframes dash-wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(10deg); } 50% { transform: rotate(-4deg); } }
.dash-update-bubble {
  position: absolute; top: 0; right: 0;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 500;
  color: var(--text-muted); background: var(--bg-tertiary); border: 1px solid var(--border);
  cursor: default;
}
@media (max-width: 600px) { .dash-hero-hello { font-size: 1.25rem; padding-right: 0; } .dash-update-bubble { position: static; margin-bottom: 6px; } }
@media (prefers-reduced-motion: reduce) { .dash-wave { animation: none; } }

/* ─── Eine Inhaltsbreite für das ganze Dashboard ────────────────────────────
   Vorher: obere Sektionen 1100px, die Auswertung (<details>, keine section)
   volle Breite. Jetzt alle direkten Kinder gleich breit, zentriert, mit
   einer Mitte zwischen „zu schmal" und „volle Breite". */
.dash-home-scroll { --dash-width: 1440px; }
.dash-home-scroll > section,
.dash-home-scroll > details,
.dash-home-scroll > .dash-projects-error {
  max-width: var(--dash-width);
  margin-left: auto;
  margin-right: auto;
}
.dash-home-scroll > details { margin-top: var(--space-4); }


/* ─── Live-Bereich: laufende Aufträge + Aktivitätsstrom (live-board.js) ──── */
.live {
  --live: var(--success);
  --pulse: #3b82f6; /* gleiches Blau wie die Lichtpunkte der Systemgrafik */
  padding: var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-surface);
}
.live-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.live-title { margin: 0; font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); }
.live-stamp { margin-left: auto; font-size: var(--fs-xs); color: var(--text-muted); }
.live-stamp.is-stale { color: var(--warning); }

.live-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-secondary); background: var(--bg-tertiary);
}
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.live-badge[data-state="active"] { color: var(--live); background: color-mix(in srgb, var(--live) 14%, transparent); }
.live-badge[data-state="active"] .live-dot { background: var(--live); }
.live-badge[data-state="attention"] { color: var(--warning); background: color-mix(in srgb, var(--warning) 16%, transparent); }
.live-badge[data-state="attention"] .live-dot { background: var(--warning); }
.live-badge:not([data-state="idle"]) .live-dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit;
  animation: live-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite;
}
.live-badge.is-stale { color: var(--text-muted); background: var(--bg-tertiary); }
.live-badge.is-stale .live-dot { background: var(--text-muted); }
.live-badge.is-stale .live-dot::after { animation: none; }
@keyframes live-ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }

.live-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: var(--space-4); align-items: start; }
@media (max-width: 900px) { .live-grid { grid-template-columns: 1fr; } }
.live-main { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-3); align-content: start; }
.live-main > .lcard:only-of-type { grid-column: 1 / -1; }
.live-skeleton { height: 120px; border-radius: var(--radius-md); background: var(--bg-tertiary); animation: live-breathe 1.4s ease-in-out infinite; }
@keyframes live-breathe { 50% { opacity: .5; } }

.live-idle {
  grid-column: 1 / -1; display: flex; gap: var(--space-3); align-items: center;
  padding: var(--space-4); border: 1px dashed var(--border); border-radius: var(--radius-md);
  color: var(--text-secondary); font-size: var(--fs-sm);
}
.live-idle b { display: block; color: var(--text-primary); font-weight: 600; }
.live-idle-ico { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; color: var(--success); background: var(--success-muted); }

/* Karte eines laufenden Auftrags */
.lcard {
  --phase: var(--pulse);
  position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 3px);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-elevated); cursor: pointer; overflow: hidden;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  animation: live-in .35s ease-out;
}
.lcard::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--phase); }
.lcard:hover, .lcard:focus-visible { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-sm); outline: none; }
.lcard.phase-thinking { --phase: #8b5cf6; }
.lcard.phase-writing  { --phase: var(--success); }
.lcard.phase-waiting, .lcard-wait { --phase: var(--warning); }
.lcard.phase-retry    { --phase: var(--warning); }
.lcard.is-stuck { --phase: var(--warning); }
.lcard-wait { background: color-mix(in srgb, var(--warning) 7%, var(--bg-elevated)); }

.lcard-head { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-xs); color: var(--text-muted); }
.lcard-ws { font-weight: 600; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcard-chips { display: flex; gap: 4px; min-width: 0; overflow: hidden; }
.lcard-elapsed { margin-left: auto; flex-shrink: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.lchip {
  display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; max-width: 190px;
  padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border);
  font-size: 11px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text-secondary);
}
.lchip.provider-claude { color: var(--provider-claude); }
.lchip.provider-opencode { color: var(--provider-opencode); }
.lchip.provider-pi { color: var(--provider-pi); }
.lchip.provider-cursor { color: var(--provider-cursor); }
.lcard-title { font-size: var(--fs-sm); font-weight: 500; line-height: 1.4; color: var(--text-primary); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.lphase { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.lcard.is-stuck .lphase-label { color: var(--warning); }
.lphase-age { font-weight: 400; font-size: var(--fs-xs); color: var(--text-muted); }
.lcard.is-stuck .lphase-age { color: var(--warning); font-weight: 600; }
.lphase-anim { display: inline-flex; gap: 3px; }
.lphase-anim i { width: 5px; height: 5px; border-radius: 50%; background: var(--phase); animation: live-bounce 1.2s ease-in-out infinite; }
.lphase-anim i:nth-child(2) { animation-delay: .15s; }
.lphase-anim i:nth-child(3) { animation-delay: .3s; }
.lcard.phase-waiting .lphase-anim i, .lcard.is-stuck .lphase-anim i { animation: none; opacity: .6; }
@keyframes live-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-4px); opacity: 1; } }
.lwait-ico { display: inline-flex; color: var(--warning); }

.lstep {
  display: block; padding: 5px 8px; border-radius: var(--radius-sm);
  background: var(--bg-tertiary); color: var(--text-secondary);
  font-family: var(--font-mono); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lpreview {
  margin: 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-secondary);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.lpreview-think { font-style: italic; color: var(--text-muted); }
.lquestion { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--text-primary); }
.lcard-cta { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: var(--fs-xs); font-weight: 600; color: var(--warning); }

.lplan { display: flex; flex-direction: column; gap: 4px; }
.lplan-bar { height: 4px; border-radius: 2px; background: var(--bg-tertiary); overflow: hidden; }
.lplan-bar span { display: block; width: var(--p, 0%); height: 100%; background: var(--phase); transition: width .6s ease; }
.lplan-txt { font-size: var(--fs-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lplan-txt b { color: var(--text-secondary); }

.lcard-foot { display: flex; flex-wrap: wrap; gap: 4px 10px; padding-top: 6px; border-top: 1px solid var(--border-subtle); font-size: var(--fs-xs); color: var(--text-muted); }
.lcount b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.lcount-queue { color: var(--accent); }

/* Puls: Schritte je Minute, letzte Stunde */
.lpulse { grid-column: 1 / -1; padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.lpulse-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: var(--fs-xs); color: var(--text-muted); }
.lpulse-head b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.lpulse-bars { display: flex; align-items: flex-end; gap: 2px; height: 44px; }
.lpulse-bar { flex: 1; height: var(--h, 3%); min-width: 2px; border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--pulse) 65%, transparent); transition: height .5s ease; }
.lpulse-bar.is-zero { background: var(--bg-tertiary); }
.lpulse-bar.is-now { background: var(--pulse); box-shadow: 0 0 8px color-mix(in srgb, var(--pulse) 60%, transparent); }
.lpulse-axis { display: flex; justify-content: space-between; margin-top: 4px; font-size: 10px; color: var(--text-muted); }

/* Aktivitätsstrom */
.live-feed { min-width: 0; }
.live-feed-title { display: flex; align-items: baseline; gap: 6px; margin: 0 0 var(--space-2); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.live-feed-sub { font-weight: 400; letter-spacing: 0; text-transform: none; }
.feed-list { position: relative; margin: 0; padding: 0; list-style: none; max-height: 420px; overflow-y: auto; overscroll-behavior: contain; }
.feed-list::before { content: ''; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 1px; background: var(--border); }
.feed-item { position: relative; display: flex; gap: 10px; padding: 6px 4px 8px 0; border-radius: var(--radius-sm); }
.feed-item[data-open-session] { cursor: pointer; }
.feed-item[data-open-session]:hover .feed-text { color: var(--text-primary); }
.feed-item.is-new { animation: live-in .5s ease-out; }
.feed-item.is-new .feed-ico { animation: live-flash 1.6s ease-out; }
.feed-ico {
  position: relative; z-index: 1; display: grid; place-items: center; flex-shrink: 0;
  width: 23px; height: 23px; border-radius: 50%;
  background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-muted);
}
.feed-item.kind-done .feed-ico { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.feed-item.kind-failed .feed-ico { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.feed-item.kind-ask .feed-ico { color: var(--warning); }
.feed-item.kind-queued .feed-ico, .feed-item.kind-steer .feed-ico { color: var(--accent); }
.feed-item.kind-changes .feed-ico { color: var(--provider-pi); }
.feed-body { min-width: 0; flex: 1; }
.feed-line { display: flex; gap: 8px; align-items: baseline; }
.feed-ws { font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-time { margin-left: auto; flex-shrink: 0; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.feed-text { font-size: var(--fs-sm); line-height: 1.4; color: var(--text-secondary); overflow-wrap: anywhere; }
.feed-text code { display: inline-block; max-width: 100%; vertical-align: bottom; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; color: var(--text-primary); }
.feed-sub { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-empty { padding: var(--space-3) 0 var(--space-3) 34px; font-size: var(--fs-sm); color: var(--text-muted); }
@keyframes live-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes live-flash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }

@media (max-width: 600px) {
  .live { padding: var(--space-3); }
  .live-main { grid-template-columns: 1fr; }
  .feed-list { max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  .live-badge .live-dot::after, .lphase-anim i, .lcard, .feed-item.is-new, .feed-item.is-new .feed-ico, .live-skeleton { animation: none !important; }
}

/* Begrüßung aus Sicht von dex */
.dex-hello { display: flex; align-items: center; gap: 12px; }
.dex-avatar { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; box-shadow: var(--shadow-sm); }
.dex-name { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; color: var(--accent); }
.dex-says { max-width: 62ch; margin-top: 10px; line-height: 1.55; }
.dex-says b { color: var(--text-primary); font-weight: 600; }
.dex-offers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dex-offer {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-primary);
  font: inherit; font-size: var(--fs-sm); cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast);
}
.dex-offer:hover { border-color: var(--accent); background: var(--bg-hover); }
.dex-offer-new { color: var(--accent); }

/* Aufgeräumt: Technik nur auf Wunsch (Knopf "Details" im Live-Bereich) */
.live-tech-toggle { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: none; color: var(--text-muted); font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.live-tech-toggle[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.live-stamp { margin-left: auto; }
.live:not(.show-tech) .lstep,
.live:not(.show-tech) .lpulse,
.live:not(.show-tech) .lchip,
.live:not(.show-tech) .lcard-foot,
.live:not(.show-tech) .feed-sub,
.live:not(.show-tech) .tech { display: none; }
.dex-name .dash-health-label { margin-left: 8px; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; }

@media (max-width: 600px) {
  .dash-home-scroll { padding: var(--space-3); }
  .dash-hero { padding: 14px; }
  .dash-hero-hello { font-size: 1.2rem; padding-right: 0; }
  .dex-avatar { width: 36px; height: 36px; border-radius: 10px; }
  .dash-update-bubble { display: none; }
  .dex-offers { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -14px; padding-right: 14px; }
  .dex-offer { flex-shrink: 0; }
  .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  .live-head { gap: 8px; }
  .live-title { font-size: var(--fs-sm); flex-basis: 100%; order: 3; }
  .lcard-title { -webkit-line-clamp: 3; }
  .feed-list { max-height: 360px; }
}
.dex-name .dash-health-label { --st-ok: var(--success); --st-warn: var(--warning); --st-error: var(--danger); --st-off: var(--text-muted); }
.dex-avatar { border-radius: 50%; }

/* Dex auf dem Dashboard: blinzelt, Antippen öffnet seinen Chat. */
.dex-avatar-btn { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; transition: transform var(--transition-fast); }
.dex-avatar-btn:hover { transform: scale(1.06); }
.dex-avatar-btn .dex-avatar { display: block; width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 4px 14px rgba(37, 99, 235, .35); }
.dex-avatar-btn .dex-eyes { transform-origin: 128px 126px; animation: dex-blink 5s infinite; }
@keyframes dex-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@media (prefers-reduced-motion: reduce) { .dex-avatar-btn .dex-eyes { animation: none; } }
.dex-offer-chat { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
@media (max-width: 600px) { .dex-avatar-btn .dex-avatar { width: 36px; height: 36px; } }

/* Ruhiger: Abstand statt Linien, Auswertung als leise Zeile. */
.dash-home-scroll > section + section, .dash-home-scroll > details { margin-top: var(--space-6); }
.dash-hero { border: 0; background: none; padding-left: 0; padding-right: 0; }
.dash-analysis-summary { color: var(--text-muted); font-size: var(--fs-sm); }
.live:not(.show-tech) .live-feed .feed-item:nth-child(n+7) { display: none; }
.live:not(.show-tech) .feed-list { max-height: none; overflow: visible; }

/* Breite Bildschirme (iPad, Desktop) wieder füllen: Kennzahlen + Workspace-Kacheln. */
.dash-kpis-compact .kpi-card { padding: var(--space-3); }
.dash-ws-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-2); }
.dash-ws-head h3 { margin: 0; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.dash-ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2); }
.dash-ws-grid .dash-activity-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-surface);
}
.dash-ws-grid .dash-activity-item:hover { border-color: var(--accent); }
.dash-ws-grid .dash-activity-name { font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) {
  .dash-ws-grid { grid-template-columns: 1fr; }
  .dash-ws-grid .dash-activity-item:nth-child(n+4) { display: none; }
}
@media (min-width: 900px) { .dash-ws-grid .dash-activity-item:nth-child(n+9) { display: none; } }

/* Audit 08.10.: Mindestgrößen am Handy */
.dash-provider-badge { font-size: 11px; }
.dash-ws-head .btn-sm { min-height: 36px; padding-left: 12px; padding-right: 12px; }
@media (max-width: 600px) {
  .dex-says { font-size: var(--fs-sm); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Aufgeräumt (Okt. 2026): Ruhe = eine leise Zeile, kurzer Verlauf, Knöpfe ohne Überlauf. */
.live-idle { padding: 0; border: 0; gap: var(--space-2); color: var(--text-muted); }
.live-idle-ico { width: 22px; height: 22px; }
.dex-offer { max-width: 100%; min-width: 0; }
.dex-offer-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-list > li:nth-child(n+7) { display: none; }
.live.show-tech .feed-list > li:nth-child(n+7) { display: revert; }
@media (max-width: 600px) {
  .dex-offers { flex-wrap: wrap; overflow: visible; margin-right: 0; padding-right: 0; }
  .dex-offer { flex-shrink: 1; }
  .feed-list > li:nth-child(n+5) { display: none; }
  .live-feed-sub { display: none; }
}