/* ═══════════════════════════════════════════════════════════════════════════
   XUI components — every visual element of the panel comes from THIS file
   (portal rule: no ad-hoc UI). Theme-agnostic: tokens only.
   Ported 1:1 where a source element exists (hub ov-*, portal components.css).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Top bar ─────────────────────────────────────────────────────────── */
.top-inner { max-width: var(--content-max); margin: 0 auto; padding: 10px 16px 0; }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.top-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.top-title h1 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-title-i { width: 22px; height: 22px; color: var(--text-strong); }
.top-actions { display: flex; align-items: center; gap: 6px; }

.top-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 8px 0 10px; scrollbar-width: none; }
.top-tabs::-webkit-scrollbar { display: none; }
.top-tab {
  border: none; background: none; cursor: pointer;
  padding: 7px 13px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
  color: var(--text-secondary);
  transition: color .15s, background .15s;
}
.top-tab:hover { color: var(--text-bright); background: var(--surface-hover); }
.top-tab.is-active { color: var(--clr-accent); background: var(--clr-accent-bg); }

/* ─── Bottom navigation — 1:1 hub #bottom-nav / portal .bottom-nav ─────── */
#bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--z-nav);
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-top: 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: rgba(10,10,11,.92);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,.05);
}
[data-theme="light"] #bottomnav { background: var(--surface-overlay); border-top: 1px solid var(--border-subtle); }
.bn-inner {
  display: grid; grid-template-columns: repeat(var(--bn-cols, 7), minmax(0, 1fr));
  max-width: 640px; height: 100%; margin: 0 auto;
}
.bn-item {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: 2px; gap: 3px;
  border: none; background: none; cursor: pointer;
  color: rgba(156,163,175,1);
  transition: color .15s;
}
.bn-item .lucide, .bn-i { width: 24px; height: 24px; }
.bn-l { font-size: 10px; font-weight: 500; line-height: 1; }
.bn-item.is-active { color: #fff; }
[data-theme="light"] .bn-item { color: var(--text-secondary); }
[data-theme="light"] .bn-item.is-active { color: var(--clr-accent); }

/* Central button — the ICONIC rainbow orb (values 1:1 from the hub webapp:
   63px ring, 2.5px conic rainbow, dark core, floats 28px above the bar). */
.bn-center { position: relative; display: flex; justify-content: center; align-items: flex-start; padding-top: 4px; }
.rainbow-border { background: conic-gradient(from 180deg, #f00, #f0f, #00f, #0ff, #0f0, #ff0, #f00); }
.bn-orb {
  border: none; background: none; padding: 0; cursor: pointer;
  transform: translateY(-28px);
  transition: transform .15s ease;
}
@media (hover: hover) { .bn-orb:hover { transform: translateY(-28px) scale(1.05); } }
.bn-orb:active { transform: translateY(-28px) scale(.95); }
.bn-orb-ring {
  display: block; width: 63px; height: 63px; border-radius: 50%;
  padding: 2.5px;
  box-shadow: 0 0 30px rgba(0,0,0,.5);
}
[data-theme="light"] .bn-orb-ring { box-shadow: 0 4px 18px rgba(16,24,40,.25); }
.bn-orb-inner {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--app-bg);
  border: 1px solid var(--border-medium);
}
.bn-orb-inner .brand-logo { width: 28px; height: 28px; color: var(--text-primary); }

/* ─── Cards & sections (hub ov-card / sec-label, verbatim values) ─────── */
.x-card {
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)), var(--setting-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 20px; padding: 18px;
}
[data-theme="light"] .x-card { box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.05); }
.x-card + .x-card, .x-card + .x-hero, .x-table-wrap + .x-card { margin-top: 14px; }
.x-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.x-card-h h3 { font-size: 15.5px; font-weight: 700; }

.x-seclabel {
  display: flex; align-items: center; gap: 14px;
  margin: 22px 2px 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted);
}
.x-seclabel::after { content: ''; flex: 1; height: 1px; background: var(--border-subtle); }

/* ─── Hero (1:1 portal .health-hero = hub .ov-hero) ───────────────────── */
.x-hero {
  position: relative;
  border-radius: 26px;
  padding: 24px 26px;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
  border: 1px solid var(--border-light);
  background:
    radial-gradient(135% 150% at -5% -20%, color-mix(in srgb, var(--accent, var(--clr-ok)) 20%, transparent) 0%, transparent 52%),
    radial-gradient(120% 170% at 105% -30%, rgba(129,140,248,.15) 0%, transparent 46%),
    linear-gradient(160deg, #1c1c20 0%, #161618 100%);
}
[data-theme="light"] .x-hero {
  background:
    radial-gradient(135% 150% at -5% -20%, color-mix(in srgb, var(--accent, var(--clr-ok)) 20%, transparent) 0%, transparent 55%),
    radial-gradient(120% 170% at 105% -30%, rgba(46,144,250,.12) 0%, transparent 48%),
    #ffffff;
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 22px rgba(16,24,40,.07);
}
.x-hero-ring { position: relative; width: 132px; height: 132px; flex-shrink: 0; }
.x-hero-ring svg { position: relative; z-index: 1; display: block; }
.x-ring-track { stroke: rgba(255,255,255,.07); }
[data-theme="light"] .x-ring-track { stroke: rgba(0,0,0,.08); }
.x-ring-fg { transition: stroke-dashoffset 1s cubic-bezier(.2,.7,.3,1); }
.x-ring-glow { position: absolute; inset: -22%; border-radius: 50%; filter: blur(13px); pointer-events: none; }
.x-ring-center { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.x-ring-num { font-size: 40px; font-weight: 800; line-height: .92; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.x-ring-sub { font-size: 11px; color: var(--text-muted); margin-top: 3px; max-width: 96px; text-align: center; line-height: 1.25; }
.x-hero-main { flex: 1; min-width: 220px; }
.x-hero-title { font-size: 26px; font-weight: 800; letter-spacing: -.025em; line-height: 1.05; }
.x-hero-problems { margin-top: 10px; }

/* ─── Status pill — 1:1 webapp .ov-status-pill (exactly ONE per context) ─ */
.x-pill {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px;
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 13.5px; font-weight: 700;
}
.x-pill .lucide { width: 15px; height: 15px; }
.x-pill--ok   { color: var(--clr-ok);        background: color-mix(in srgb, var(--clr-ok) 10%, transparent);    border: 1px solid color-mix(in srgb, var(--clr-ok) 25%, transparent); }
.x-pill--warn { color: var(--clr-warn-text); background: color-mix(in srgb, var(--clr-amber) 10%, transparent); border: 1px solid color-mix(in srgb, var(--clr-amber) 25%, transparent); }
.x-pill--crit { color: var(--clr-error-text); background: color-mix(in srgb, var(--clr-error) 10%, transparent); border: 1px solid color-mix(in srgb, var(--clr-error) 25%, transparent); }
.x-pill--info { color: var(--clr-info);       background: color-mix(in srgb, var(--clr-info) 10%, transparent);  border: 1px solid color-mix(in srgb, var(--clr-info) 25%, transparent); }
.x-pill--neutral { color: var(--text-strong); background: var(--surface-1); border: 1px solid var(--border-subtle); }

/* Inline chip (table cells — no top margin, smaller) */
.x-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }

/* ─── Status dots + quiet problem rows (portal card-row pattern) ──────── */
.x-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-disabled); flex-shrink: 0; display: inline-block; }
.x-dot--ok       { background: var(--clr-ok);    box-shadow: 0 0 6px color-mix(in srgb, var(--clr-ok) 55%, transparent); }
.x-dot--warn     { background: var(--clr-amber); box-shadow: 0 0 6px color-mix(in srgb, var(--clr-amber) 55%, transparent); }
.x-dot--critical { background: var(--clr-error); box-shadow: 0 0 6px color-mix(in srgb, var(--clr-error) 55%, transparent); }
.x-dot--info     { background: var(--clr-info); }

.x-problems { display: flex; flex-direction: column; }
.x-problem {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 9px 8px; margin: 0 -8px;
  border: none; background: none; border-radius: 10px;
  cursor: pointer; text-align: left; width: calc(100% + 16px);
  transition: background .15s;
}
.x-problem:hover { background: var(--surface-hover); }
.x-problem + .x-problem { border-top: 1px solid var(--border-subtle); }
.x-problem-t { font-size: 14.5px; font-weight: 600; }
.x-problem-v { flex: 1; text-align: right; color: var(--text-secondary); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-chev { color: var(--text-hint); width: 17px; height: 17px; }

/* ─── KPI row (hub ov-kpis, without icon boxes) ───────────────────────── */
.x-kpis { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.x-kpi {
  flex: 1 1 120px; min-width: 106px;
  padding: 13px 15px; border-radius: 16px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.05);
}
[data-theme="light"] .x-kpi { background: rgba(0,0,0,.035); border-color: rgba(0,0,0,.06); }
.x-kpi-v { font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.x-kpi-k { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── Table (desktop table → mobile cards) ────────────────────────────── */
.x-table-wrap { background: var(--setting-panel); border: 1px solid var(--border-subtle); border-radius: 20px; overflow: hidden; }
[data-theme="light"] .x-table-wrap { box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.05); }
.x-table { width: 100%; border-collapse: collapse; }
.x-table th {
  text-align: left; padding: 12px 16px;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
}
.x-table td { padding: 12px 16px; font-size: 14px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.x-table tbody tr:last-child td { border-bottom: none; }
.x-table tbody tr.is-click { cursor: pointer; transition: background .12s; }
.x-table tbody tr.is-click:hover { background: var(--surface-hover); }
@media (max-width: 680px) {
  .x-table thead { display: none; }
  .x-table, .x-table tbody, .x-table tr, .x-table td { display: block; width: 100%; }
  .x-table tr { padding: 8px 0; }
  .x-table tr + tr { border-top: 1px solid var(--border-subtle); }
  .x-table td { display: flex; justify-content: space-between; gap: 12px; padding: 5px 16px; border: none; }
  .x-table td::before { content: attr(data-th); color: var(--text-muted); font-size: 12px; }
}

/* ─── Buttons ─────────────────────────────────────────────────────────── */
.x-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--border-medium); border-radius: 12px;
  background: var(--surface-1); color: var(--text-bright);
  padding: 9px 15px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s, transform .1s;
}
.x-btn:hover { background: var(--surface-active); }
.x-btn:active { transform: scale(.97); }
.x-btn .lucide { width: 16px; height: 16px; }
.x-btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border-color: transparent; }
.x-btn--primary:hover { background: color-mix(in srgb, var(--btn-primary-bg) 88%, var(--app-bg)); }
.x-btn--ghost { background: none; border-color: transparent; color: var(--text-strong); }
.x-btn--ghost:hover { background: var(--surface-hover); }
.x-btn--danger { background: color-mix(in srgb, var(--clr-error) 12%, transparent); border-color: color-mix(in srgb, var(--clr-error) 30%, transparent); color: var(--clr-error-text); }
.x-btn--sm { padding: 5px 11px; font-size: 12.5px; border-radius: 9px; }

.x-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; position: relative;
  border: none; border-radius: 12px; background: none;
  color: var(--text-strong); cursor: pointer;
  transition: background .15s, color .15s;
}
.x-iconbtn:hover { background: var(--surface-hover); color: var(--text-bright); }

.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--clr-accent-bd);
  background: var(--clr-accent-bg); color: var(--clr-accent);
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.avatar--big { width: 44px; height: 44px; font-size: 18px; }

.bell-badge {
  position: absolute; top: 4px; right: 4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--clr-error-strong); color: var(--fg-on-solid);
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}

/* ─── Segmented + select + fields ─────────────────────────────────────── */
.x-seg { display: inline-flex; background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: 11px; padding: 2px; }
.x-seg-b {
  border: none; background: none; cursor: pointer;
  padding: 5px 12px; border-radius: 9px;
  font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
  display: inline-flex; align-items: center; gap: 6px;
}
.x-seg-b .lucide { width: 15px; height: 15px; }
.x-seg-b.is-active { background: var(--surface-elevated); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,.25); }

.x-select, .x-input {
  background: var(--surface-1); border: 1px solid var(--border-medium);
  border-radius: 11px; color: var(--text-primary);
  padding: 8px 12px; font-size: 14px;
}
.x-input::placeholder { color: var(--text-hint); }

/* ─── Layers: scrim + popovers + drawer + confirm ─────────────────────── */
#layers { position: fixed; inset: 0; z-index: var(--z-layer); pointer-events: none; }
.x-layer {
  position: fixed; inset: 0;
  background: var(--scrim);
  pointer-events: auto;
  display: flex; align-items: flex-start; justify-content: center;
  animation: layerIn .18s ease;
}
@keyframes layerIn { from { opacity: 0; } }

.pop {
  margin-top: 64px; width: min(440px, calc(100vw - 24px));
  max-height: min(70vh, 640px);
  background: var(--surface-overlay);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sheet);
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
  animation: popIn .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.pop-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 10px; }
.pop-h h3 { font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.pop-b { overflow-y: auto; }
.pop-pad { padding: 6px 18px 18px; display: flex; flex-direction: column; gap: 12px; }

.notif {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 52px; padding: 10px 18px;
  border: none; background: none; text-align: left; cursor: pointer;
}
.notif:hover { background: var(--surface-hover); }
.notif + .notif { border-top: 1px solid var(--border-subtle); }
.notif-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-t b { font-size: 14px; }
.notif-t small { color: var(--text-secondary); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif time { color: var(--text-hint); font-size: 11.5px; flex-shrink: 0; }

.search-in {
  margin: 14px 18px 8px; padding: 11px 14px;
  background: var(--surface-1); border: 1px solid var(--border-medium);
  border-radius: 13px; color: var(--text-primary); font-size: 15px;
}
.search-hit {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 11px 18px;
  border: none; background: none; text-align: left; cursor: pointer;
  font-size: 14px;
}
.search-hit:hover { background: var(--surface-hover); }
.search-kind {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); background: var(--surface-1);
  padding: 2px 7px; border-radius: 6px; flex-shrink: 0;
}

.av-head { display: flex; align-items: center; gap: 12px; padding-top: 6px; }
.av-head small { display: block; }
.av-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; min-height: 36px; }
.av-out { justify-content: flex-start; margin-top: 4px; }
.av-note { text-align: center; }

.rule-row { display: flex; align-items: center; gap: 10px; min-height: 38px; font-size: 13.5px; }
.rule-sev { width: 72px; font-weight: 600; }
.rule-ch { display: inline-flex; align-items: center; gap: 5px; color: var(--text-secondary); font-size: 12.5px; }

.x-confirm {
  margin: auto; width: min(360px, calc(100vw - 40px));
  background: var(--surface-overlay); border: 1px solid var(--border-medium);
  border-radius: 20px; padding: 20px;
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
}
.x-confirm p { font-size: 14.5px; margin-bottom: 16px; }
.x-confirm-a { display: flex; justify-content: flex-end; gap: 8px; }

/* Drawer: right panel on desktop, full-width sheet on mobile. */
.x-drawer {
  margin-left: auto; height: 100dvh; width: min(480px, 100vw);
  background: var(--surface-overlay);
  border-left: 1px solid var(--border-medium);
  display: flex; flex-direction: column;
  animation: drawerIn .25s cubic-bezier(.2,.7,.3,1);
}
@keyframes drawerIn { from { transform: translateX(40px); opacity: 0; } }
.x-drawer-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px 12px; }
.x-drawer-h h3 { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.x-drawer-b { flex: 1; overflow-y: auto; padding: 0 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.x-drawer-f { display: flex; gap: 8px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-subtle); }
.x-drawer-f .x-btn { flex: 1; }
@media (max-width: 680px) {
  .x-layer { align-items: flex-end; }
  .x-drawer { width: 100vw; height: 92dvh; border-left: none; border-top: 1px solid var(--border-medium); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; animation: sheetIn .28s cubic-bezier(.2,.7,.3,1); }
  @keyframes sheetIn { from { transform: translateY(48px); opacity: 0; } }
}

/* ─── Detail rows inside drawers/cards ────────────────────────────────── */
.x-def { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: 14px; border-bottom: 1px solid var(--border-subtle); }
.x-def:last-child { border-bottom: none; }
.x-def dt { color: var(--text-secondary); }
.x-def dd { margin: 0; font-weight: 600; text-align: right; }

/* ─── Meter (usage bars) ──────────────────────────────────────────────── */
.x-meter { height: 6px; border-radius: 999px; background: var(--surface-1); overflow: hidden; min-width: 80px; }
.x-meter-fill { height: 100%; border-radius: 999px; transition: width .6s cubic-bezier(.2,.7,.3,1); }
.x-meter--ok { background: var(--clr-ok); }
.x-meter--warn { background: var(--clr-amber); }
.x-meter--crit { background: var(--clr-error); }
.x-meter--accent { background: var(--clr-accent); }

/* ─── Empty state (quiet, explains what will appear) ──────────────────── */
.x-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 20px; color: var(--text-muted); text-align: center; }
.x-empty-i { width: 28px; height: 28px; color: var(--text-hint); }
.x-empty p { font-size: 13.5px; max-width: 320px; }

/* ─── Toast (top layer, never covered) ────────────────────────────────── */
#toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + 24px);
  transform: translate(-50%, 16px);
  z-index: var(--z-toast);
  background: var(--surface-overlay); border: 1px solid var(--border-medium);
  border-radius: 999px; padding: 10px 18px;
  font-size: 13.5px; font-weight: 600;
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ─── System map (Infrastruktur overview) ─────────────────────────────── */
/* System map — see the "Rebuilt system map" block at the end of this file. */

/* ─── Kanban (Development → Board) ────────────────────────────────────── */
.x-kan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 680px) { .x-kan { grid-template-columns: 1fr; } }
.x-kan-col { background: var(--panel-bg); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 10px; }
.x-kan-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--text-muted); padding: 4px 6px 10px; display: flex; justify-content: space-between; }
.x-kan-card {
  background: var(--surface-elevated); border: 1px solid var(--border-subtle);
  border-radius: 12px; padding: 10px 12px; margin-bottom: 8px;
  font-size: 13.5px; cursor: pointer; transition: border-color .15s;
}
.x-kan-card:hover { border-color: var(--border-strong); }
.x-kan-meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; color: var(--text-muted); }

/* ─── Onboarding checklist ────────────────────────────────────────────── */
.x-ob { display: flex; flex-direction: column; }
.x-ob-item { display: flex; align-items: center; gap: 12px; min-height: 44px; border: none; background: none; text-align: left; cursor: pointer; padding: 6px 0; font-size: 14.5px; }
.x-ob-item + .x-ob-item { border-top: 1px solid var(--border-subtle); }
.x-ob-check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: transparent; }
.x-ob-item.is-done .x-ob-check { background: var(--clr-ok); border-color: transparent; color: var(--fg-on-solid); }
.x-ob-item.is-done span { color: var(--text-muted); text-decoration: line-through; }
.x-ob-check .lucide { width: 13px; height: 13px; }

/* ─── Utility rows/grids used across views ────────────────────────────── */
.x-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 680px) { .x-grid2 { grid-template-columns: 1fr; } }
.x-toolrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 10px; flex-wrap: wrap; }
.x-toolrow .x-input { flex: 1; min-width: 160px; }

/* ─── Event / ticket cards (monitoring, support, training, fleet) ─────── */
.ev-card { padding: 14px 16px; }
.ev-card + .ev-card { margin-top: 10px; }
.ev-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ev-title { font-size: 14.5px; }
.ev-head time { margin-left: auto; }
.ev-detail { margin-top: 6px; font-size: 13.5px; color: var(--text-soft); }
.ev-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* ─── Firmware rollout / progress rows ────────────────────────────────── */
.fw-roll { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }

/* ─── Monospace block (backtraces, logs, wiki code) ───────────────────── */
.crash-bt {
  margin: 10px 0 0; padding: 12px 14px;
  background: var(--surface-sunken); border: 1px solid var(--border-subtle);
  border-radius: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; line-height: 1.6; color: var(--text-soft);
  overflow-x: auto; white-space: pre;
}

/* ─── Library catalog grid ────────────────────────────────────────────── */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.lib-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px; }
.lib-ph {
  aspect-ratio: 1 / 1; border-radius: 12px;
  background: var(--surface-sunken); border: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}
.lib-ph-i { width: 34px; height: 34px; color: var(--text-hint); }
.lib-name { font-size: 14px; }
.lib-chips { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }

/* ─── Coverage / usage meter rows (library, ai, servers) ──────────────── */
.lib-cov { display: flex; flex-direction: column; gap: 10px; }
.lib-cov-row { display: flex; align-items: center; gap: 12px; }
.lib-cov-l { width: 84px; font-size: 13px; color: var(--text-strong); flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; }
.lib-cov-l .lib-pico { flex-shrink: 0; }
.lib-cov-row .x-meter { flex: 1; }
.lib-cov-v { width: 48px; text-align: right; font-size: 12.5px; color: var(--text-secondary); flex-shrink: 0; }
/* Rows whose value carries a long note (e.g. AI token counts) must wrap the
   value onto its own line on narrow screens instead of overflowing. */
.lib-cov-row--note { flex-wrap: wrap; }
.lib-cov-row--note .x-meter { flex: 1 1 110px; }
.lib-cov-v--note { width: auto; min-width: max-content; text-align: right; margin-left: auto; }

/* ─── Home: area tiles + pinned post ──────────────────────────────────── */
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.home-tile { display: flex; align-items: center; gap: 16px; text-align: left; cursor: pointer; transition: border-color .15s, transform .12s; }
.home-tile:hover { border-color: var(--border-strong); }
.home-tile:active { transform: scale(.99); }
.home-tile-ring { transform: scale(.66); transform-origin: left center; width: 92px; height: 132px; flex-shrink: 0; display: flex; align-items: center; }
.home-tile-b { flex: 1; min-width: 0; }
.home-tile-t { display: flex; align-items: center; gap: 8px; font-size: 15.5px; }
.home-tile-t b { min-width: 0; overflow-wrap: break-word; }
.home-tile-t .lucide { width: 18px; height: 18px; color: var(--text-strong); flex-shrink: 0; }
/* Status pill must never exceed the tile: long labels ("Alles in Ordnung")
   wrap at word boundaries instead of clipping past the card edge. */
.home-tile .x-pill { margin-top: 8px; max-width: 100%; white-space: normal; overflow-wrap: break-word; }
.home-tile .x-pill .lucide { flex-shrink: 0; }
.home-post { display: flex; align-items: flex-start; gap: 12px; }
.home-post-i { color: var(--clr-accent); margin-top: 2px; }
.home-post div { flex: 1; min-width: 0; }
.post-body { font-size: 14.5px; color: var(--text-soft); line-height: 1.6; }

/* ─── Forms (flash tool, staff drawer) ────────────────────────────────── */
.flash-form { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.flash-l { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-secondary); flex: 1; min-width: 160px; }

/* ─── Small notes ─────────────────────────────────────────────────────── */
.ai-note, .lic-note, .infra-map-note { margin-top: 10px; }
.wiki-body h4 { margin: 8px 0 6px; font-size: 15px; }
.wiki-body p { font-size: 14px; color: var(--text-soft); line-height: 1.6; }

/* ─── Login (live mode) ───────────────────────────────────────────────── */
.login { min-height: 80dvh; display: flex; align-items: center; justify-content: center; }
.login-card { width: min(380px, calc(100vw - 32px)); padding: 28px 26px; }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 20px; }
.login-brand h1 { font-size: 22px; font-weight: 350; letter-spacing: .02em; }
.login-orb { width: 63px; height: 63px; border-radius: 50%; padding: 2.5px; display: block; }
.login-orb .bn-orb-inner { display: flex; }
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-btn { margin-top: 6px; }
.login-err:not([hidden]) { color: var(--clr-error-text); }
.login-note { text-align: center; margin-top: 16px; }

/* ─── Library: Katalog-Werkzeugleiste, Grid/Tabelle, Detail (Etappe 3a) ── */
.lib-tools { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.lib-tools-sp { flex: 1; }
.lib-filters { flex-wrap: wrap; }
.lib-filters .x-select { max-width: 200px; }

/* Segmented control (view toggle, grid size, protocol facets) */
.lib-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--surface-raised); border: 1px solid var(--border-subtle); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.lib-seg::-webkit-scrollbar { display: none; }
.lib-seg-b { flex: 0 0 auto; white-space: nowrap; }
.lib-seg-b { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: none; border-radius: 8px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.lib-seg-b:hover { color: var(--text-strong); }
.lib-seg-b.is-on { background: var(--surface-hover); color: var(--text-strong); }
.lib-seg-b svg { width: 15px; height: 15px; }
.lib-seg-b small { color: var(--text-hint); font-weight: 500; }
.lib-protos { display: inline-flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--surface-raised); border: 1px solid var(--border-subtle); flex-wrap: wrap; }

/* Protocol glyphs — one icon per protocol, tint from the central
   --clr-<proto> tokens (see protoIcon()/protoTint() in library/index.js). */
.lib-pdots { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lib-pico { display: inline-flex; align-items: center; color: currentColor; flex-shrink: 0; }
.lib-pico .lucide { width: 15px; height: 15px; }
.lib-pdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* Photo cells: checkerboard shows transparency honestly (cutout curation) */
.lib-checker { background-image: linear-gradient(45deg, var(--border-subtle) 25%, transparent 25%, transparent 75%, var(--border-subtle) 75%), linear-gradient(45deg, var(--border-subtle) 25%, transparent 25%, transparent 75%, var(--border-subtle) 75%); background-size: 12px 12px; background-position: 0 0, 6px 6px; }
.lib-thumb { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: var(--surface-raised); }
.lib-thumb img { width: 100%; height: 100%; object-fit: contain; }
.lib-ph img { width: 100%; height: 100%; object-fit: contain; }
.lib-ph--lg { width: 96px; height: 96px; border-radius: 12px; flex-shrink: 0; }

/* Grid sizes */
.lib-grid--s { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.lib-grid--m { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.lib-grid--l { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.lib-tile.is-click { cursor: pointer; transition: background .12s; }
.lib-tile.is-click:hover { background: var(--surface-hover); }
.lib-sentinel { height: 1px; }

/* Detail drawer */
.lib-detail { display: flex; flex-direction: column; gap: 14px; }
.lib-detail-head { display: flex; gap: 14px; align-items: center; }
.lib-detail-meta { display: flex; flex-direction: column; gap: 8px; }
.lib-prof { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; margin-bottom: 8px; }
.lib-raw { font-size: 11.5px; line-height: 1.5; background: var(--surface-raised); border-radius: 10px; padding: 12px; overflow-x: auto; max-height: 320px; }
.lib-ev { font-size: 12px; font-weight: 600; }
.lib-ev--verified { color: var(--clr-ok); }
.lib-ev--code { color: var(--clr-info); }
.lib-ev--derived { color: var(--text-hint); }

/* Stat cards (analytics + gap click-throughs) */
.lib-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 12px; }
.lib-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px; border: none; text-align: left; font: inherit; color: inherit; }
.lib-stat b { font-size: 20px; letter-spacing: -0.02em; }
.lib-stat.is-click { cursor: pointer; transition: background .12s; }
.lib-stat.is-click:hover { background: var(--surface-hover); }

/* ─── Library: Kuration (Etappe 3b) ─────────────────────────────────────── */
.lib-capgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.lib-phototools, .lib-tagedit { display: flex; flex-direction: column; gap: 8px; }
.lib-photobtns { flex-wrap: wrap; }
.lib-sel { width: 16px; height: 16px; accent-color: var(--clr-accent); flex-shrink: 0; margin-right: 8px; }
.lib-tile { position: relative; }
.lib-tile .lib-sel { position: absolute; top: 8px; left: 8px; z-index: 1; }

/* Tag chips: neutral by default, tag color only as a quiet dot-border accent */
.lib-tag { border: 1px solid var(--border-subtle); background: var(--surface-raised); color: var(--text-secondary); cursor: pointer; font: inherit; font-size: 12px; }
.lib-tag.is-on { border-color: var(--tag-c, var(--clr-accent)); color: var(--text-strong); box-shadow: inset 0 0 0 1px var(--tag-c, var(--clr-accent)); }

/* Tag manager rows */
.lib-tagrow { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); }
.lib-tagrow:last-child { border-bottom: none; }
.lib-tagname { max-width: 180px; }
.lib-tagcolors { display: inline-flex; gap: 4px; }
.lib-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border-strong); cursor: pointer; padding: 0; }

/* Crop overlay */
.lib-crop-host { position: relative; }
.lib-crop { position: absolute; border: 2px solid var(--clr-accent); border-radius: 4px; background: var(--clr-accent-bg); cursor: move; touch-action: none; }
.lib-crop-h { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--clr-accent); cursor: nwse-resize; }
.lib-crop-actions { position: absolute; top: -34px; right: 0; display: flex; gap: 4px; }

/* Bulk bar — floats above the bottom nav, never overlaps content permanently */
.lib-bulkbar { position: sticky; bottom: 84px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-radius: 14px; background: var(--surface-overlay); border: 1px solid var(--border-strong); box-shadow: 0 8px 30px rgb(0 0 0 / .35); z-index: var(--z-topbar); margin-top: 12px; }
.lib-bulkbar .x-select { max-width: 170px; }

/* Library: Sektions-Auswahl (Devices/Effekte/Paletten) als gestyltes Dropdown */
.lib-secwrap { position: relative; }
.lib-secsel { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface-raised); color: var(--text-strong); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.lib-secsel svg { width: 17px; height: 17px; }
.lib-secsel-ch { opacity: .5; }
.lib-secmenu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px; padding: 6px; border-radius: 14px; background: var(--surface-overlay); border: 1px solid var(--border-strong); box-shadow: 0 12px 40px rgb(0 0 0 / .4); z-index: var(--z-layer); display: flex; flex-direction: column; gap: 2px; }
.lib-secitem { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: none; border-radius: 10px; background: transparent; color: var(--text-strong); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: left; }
.lib-secitem svg { width: 16px; height: 16px; color: var(--text-secondary); }
.lib-secitem:hover { background: var(--surface-hover); }
.lib-secitem.is-on { color: var(--text-strong); }
.lib-secitem .lib-secitem-ck { margin-left: auto; color: var(--clr-ok); }

/* Library: Hersteller-Profileditor (Etappe 3c, Modul vendors.js) */
.lib-vlist { display: flex; flex-direction: column; gap: 6px; }
.lib-vrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 14px; border: 1px solid var(--border-subtle); border-radius: 10px; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.lib-vrow:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.lib-vrow-main { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.lib-vrow-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.lib-vhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lib-vmeta { display: flex; flex-wrap: wrap; gap: 12px; }
.lib-vchk { flex-direction: row; align-items: center; }
.lib-vprofs { display: flex; flex-direction: column; gap: 12px; }
.lib-vprof { display: flex; flex-direction: column; gap: 10px; }
.lib-vkeyin { max-width: 240px; }
.lib-vnum { max-width: 84px; }
.lib-vsm { max-width: 110px; }
.lib-vnew { align-items: center; }

/* Library: Community-Store (Etappe 3c, Modul storeview.js) */
.lib-st-visual { display: flex; align-items: center; justify-content: center; gap: 8px; height: 64px; border-radius: 10px; background: var(--surface-raised); overflow: hidden; }
.lib-st-visual--lg { height: 96px; }
.lib-st-strip { align-items: stretch; }
.lib-st-sw { flex: 1; min-width: 6px; display: inline-block; }
.lib-st-fx-i { width: 30px; height: 30px; color: var(--text-hint); }
.lib-st-kind { background: var(--surface-hover); color: var(--text-secondary); }
.lib-st-tile-f { align-items: center; }
.lib-st-tile-f .lib-st-vote { margin-left: auto; }
.lib-st-vote { display: inline-flex; align-items: center; gap: 4px; }
.lib-st-vb { display: inline-flex; align-items: center; border: none; background: none; padding: 2px; border-radius: 6px; color: var(--text-hint); cursor: pointer; }
.lib-st-vb svg { width: 15px; height: 15px; }
.lib-st-vb:hover:not(:disabled) { background: var(--surface-hover); color: var(--text-strong); }
.lib-st-vb:disabled { cursor: default; opacity: .45; }
.lib-st-vb.is-on { color: var(--clr-accent); }
.lib-st-vb--dn.is-on { color: var(--clr-error-text); }
.lib-st-score { font-size: 13px; min-width: 18px; text-align: center; }
.lib-st-crows { display: flex; flex-direction: column; gap: 6px; }
.lib-st-crow { align-items: center; margin: 0; flex-wrap: nowrap; }
.lib-st-crow .lib-st-hex { max-width: 110px; flex: none; }
.lib-st-sw--lg { width: 28px; height: 28px; border-radius: 8px; flex: none; border: 1px solid var(--border-subtle); }
.lib-st-flag { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; margin-top: 8px; }
.lib-st-flag p { margin: 0; }
.lib-st-modbtns { flex-wrap: wrap; justify-content: flex-start; }
.lib-st-more { display: flex; justify-content: center; margin: 14px 0; }

/* Infrastruktur: Sub-Zeile unter den Leistungs-Metern (Etappe 4) */
.infra-sub { margin: -4px 0 2px 76px; font-size: 11.5px; }

/* Infrastruktur: Docker-Übersicht — Container-Karten mit CPU/Mem-Metern */
.dk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.dk-grid > .x-card { margin: 0; }
.dk-head { align-items: flex-start; flex-wrap: wrap; }
.dk-title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.dk-title .x-mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-chips { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.dk-img { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; margin: -4px 0 12px; }
.dk-img > span:not(.dk-ver) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dk-ver { flex-shrink: 0; padding: 1px 7px; border-radius: 999px; background: var(--surface-raised); color: var(--text-strong); border: 1px solid var(--border-subtle); }
.dk-mi, .dk-metai, .dk-pi { width: 13px; height: 13px; flex-shrink: 0; color: var(--text-hint); }
.dk-cov .lib-cov-l { width: 58px; gap: 5px; }
.dk-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; margin-top: 12px; }
.dk-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.dk-ports { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dk-port { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; background: var(--surface-raised); color: var(--text-secondary); border: 1px solid var(--border-subtle); }
.dk-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dk-tools .x-select { min-width: 150px; }
@media (max-width: 680px) {
  .dk-grid { grid-template-columns: 1fr; }
  .dk-tools { width: 100%; }
  .dk-tools .x-select { flex: 1; min-width: 0; }
}

/* Produktion: Gerät-herstellen-Wizard (Stepper + Typenschild) */
.prod-step { display: flex; align-items: flex-start; gap: 12px; }
.prod-step-i { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-raised); color: var(--text-hint); flex-shrink: 0; }
.prod-step-i svg { width: 14px; height: 14px; }
.prod-step-i--ok { background: var(--clr-ok-bg, var(--surface-raised)); color: var(--clr-ok); }
.prod-step-i--failed { background: var(--clr-error-bg, var(--surface-raised)); color: var(--clr-error); }
.prod-step-i--running { color: var(--clr-info); }
.prod-step-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.prod-step-body { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 10px; }
.prod-label { display: flex; gap: 16px; align-items: center; padding: 14px; border: 1px dashed var(--border-strong); border-radius: 12px; background: #fff; color: #000; width: fit-content; }
.prod-label img { display: block; }
.prod-label-t { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.prod-label-brand { font-size: 18px; letter-spacing: .02em; font-weight: 400; }
.prod-label-brand span { font-weight: 800; }

/* Print: the label is CLONED to <body> before printing (a nested node cannot
   survive hiding its ancestors), everything else is suppressed. */
@media print {
  body.print-label > :not(.prod-label--print) { display: none; }
  body.print-label .prod-label--print { display: flex; margin: 10mm; border: none; }
}

/* ops: Ticket-Detail-Drawer (Etappe 7, shared.js) */
.ops-t-card { cursor: pointer; }
.ops-t-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ops-t-refs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ops-t-ctl { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 12px 0; }
.ops-t-thread { display: flex; flex-direction: column; gap: 10px; }
.ops-t-c { background: var(--surface-raised); border-radius: 10px; padding: 10px 12px; }
.ops-t-c.is-internal { border-left: 3px solid var(--border-strong); }
.ops-t-ch { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 4px; }
.ops-t-ch time { margin-left: auto; }
.ops-t-cb { margin: 0; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ops-t-comp { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.ops-t-comp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* AI-Studio (Etappe 7, Modul studio.js) */
.ai-st-body { margin-top: 4px; }
.ai-st-track { display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.ai-st-cov { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--surface-raised); }
.ai-st-cov img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ai-st-cov-ph { width: 32px; height: 32px; color: var(--text-hint); }
.ai-st-cov--l { width: 96px; height: 96px; flex-shrink: 0; }
.ai-st-tt, .ai-st-ta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-st-tt { font-size: 13.5px; } .ai-st-ta, .ai-st-tm { font-size: 12px; }
.ai-st-tm { display: flex; align-items: center; gap: 6px; }
.ai-st-like { width: 12px; height: 12px; color: var(--clr-amber); }
.ai-st-more { display: flex; justify-content: center; margin: 14px 0; }
.ai-st-head { display: flex; gap: 14px; align-items: flex-start; }
.ai-st-head-m { min-width: 0; } .ai-st-head-m h3 { margin: 0 0 2px; }
.ai-st-audio { width: 100%; margin-top: 12px; }
.ai-st-palbadge { display: flex; align-items: center; gap: 8px; margin-top: 8px; min-height: 18px; }
.ai-st-strip { display: inline-flex; height: 14px; border-radius: 4px; overflow: hidden; border: 1px solid var(--border-subtle); }
.ai-st-strip i { width: 18px; } .ai-st-strip--l { height: 22px; width: 100%; } .ai-st-strip--l i { flex: 1; }
.ai-st-lanes { display: flex; flex-direction: column; gap: 8px; }
.ai-st-lane { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: start; }
.ai-st-lane-l { display: flex; flex-direction: column; min-width: 0; }
.ai-st-lane-l b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-st-lane-l small { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-st-lane-t { position: relative; height: 28px; border-radius: 6px; overflow: hidden; background: var(--surface-raised); border: 1px solid var(--border-subtle); cursor: pointer; }
.ai-st-seg { position: absolute; top: 0; bottom: 0; }
.ai-st-cur { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--clr-accent); pointer-events: none; }
/* Per-lane LightSim LED preview. The dark stage (#04060c) is the simulation's
   own light output — a real fixture background, not UI chrome. */
.ai-st-lane-r { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ai-st-sim { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-subtle); background: #04060c; line-height: 0; }
.ai-st-sim-c { display: block; width: 100%; height: 60px; }
.ai-st-pal { display: flex; flex-direction: column; gap: 6px; }
.ai-st-pal-m { font-size: 12px; }
.ai-st-cb { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; margin-top: 10px; }
.ai-st-sw { display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 1; border-radius: 6px; border: 1px solid var(--border-subtle); }
.ai-st-sw small { font-size: 10px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7); padding-bottom: 2px; }
.ai-st-rfs { display: flex; flex-direction: column; gap: 14px; }
.ai-st-rf-h { display: flex; align-items: center; gap: 10px; } .ai-st-rf-h span:first-child { flex: 1; font-size: 13.5px; }
.ai-st-rf input[type=range] { width: 100%; accent-color: var(--clr-accent); }
.ai-st-rf--toggle { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; }
.ai-st-rf--toggle p { grid-column: 1 / -1; }
.ai-st-rf-d { margin: 2px 0 0; font-size: 12px; }
.ai-st-rf.is-dirty [data-val] { color: var(--clr-accent); }
.ai-st-tg b { font-size: 13px; } .ai-st-tg-rows { margin-top: 8px; }
@media (max-width: 640px) { .ai-st-lane { grid-template-columns: 1fr; gap: 2px; } .ai-st-lane-l { flex-direction: row; gap: 8px; align-items: baseline; } }

/* AI-Studio Stufe 2 (Retune/Blindtest/Momente) */
.ai-st2-blindrow { margin: 4px 0 8px; }
.ai-st2-vote { margin-top: 4px; padding: 3px 8px; font-size: 11.5px; align-self: flex-start; }
.ai-st2-blind .ai-st-lane-l small { visibility: hidden; }
.ai-st-lane.is-active .ai-st-lane-l b { color: var(--clr-accent); }
.ai-st-lane.ai-st2-winner .ai-st-lane-t { border-color: var(--clr-ok); box-shadow: 0 0 0 1px var(--clr-ok); }
.ai-st2-tunerow { margin-top: 12px; }
.ai-st2-tunerow .x-select { flex: 1; min-width: 140px; }
.ai-st2-mombar { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-st2-mombar .x-input { flex: 1; min-width: 180px; }
.ai-st2-momhint { margin: 8px 0 0; font-size: 12px; }
.ai-st2-moms { display: flex; flex-direction: column; }
.ai-st2-mom { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border-subtle); cursor: pointer; font-size: 13px; }
.ai-st2-mom:last-child { border-bottom: none; }
.ai-st2-mom-i { width: 14px; height: 14px; color: var(--clr-amber); flex-shrink: 0; }
.ai-st2-mom.is-bad .ai-st2-mom-i { color: var(--clr-error); }
.ai-st2-mom-n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-st2-mom-s { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }

/* Library-Katalog-Polish: Spalten-Chooser, Resize, Tri-State-Filter, cmdpop-Vorschau */
.lib-cc-table { table-layout: fixed; }
.lib-cc-table th { position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-cc-table td { overflow: hidden; text-overflow: ellipsis; }
.lib-ccmenu { left: auto; right: 0; }
.lib-cc-t { padding: 6px 10px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); }
.lib-cc-it { display: flex; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.lib-cc-it:hover { background: var(--surface-hover); }
.lib-cc-it:has(input:disabled) { opacity: .55; cursor: default; }
.lib-cc-ok { color: var(--clr-ok); width: 15px; height: 15px; }
.lib-rz { display: none; }
@media (pointer: fine) {
  .lib-rz { display: block; position: absolute; top: 0; right: -2px; width: 9px; height: 100%; cursor: col-resize; touch-action: none; }
  .lib-rz:hover, .lib-rz:active { background: var(--surface-hover); box-shadow: inset -2px 0 0 var(--border-strong); }
}
.lib-tri { position: relative; gap: 2px; }
.lib-tri.is-on { color: var(--text-bright); background: var(--surface-hover); }
.lib-tri-b { display: inline-flex; align-items: center; }
.lib-tri-i { width: 12px; height: 12px; }
.lib-cp { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; }
.lib-cp-h { display: flex; align-items: center; gap: 8px; }
.lib-cp-o { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.lib-cp-o--human { background: color-mix(in srgb, var(--clr-ok) 18%, transparent); color: var(--clr-ok); }
.lib-cp-o--ai { background: color-mix(in srgb, var(--clr-info) 18%, transparent); color: var(--clr-info); }
.lib-cp-o--auto { background: var(--surface-hover); color: var(--text-secondary); }
.lib-cp-sec { display: inline-flex; align-items: center; gap: 5px; }
.lib-cp-sec.is-off { opacity: .5; }
.lib-cp-sec small { color: var(--text-secondary); }
.lib-cp-i { width: 12px; height: 12px; color: var(--text-secondary); }
.lib-cp-raw { max-height: 260px; overflow: auto; }

/* ─── Feinschliff-Runde (Patrick 21.7.: Screenshots beider Viewports) ───── */

/* THE legitimate UA-override emergency (documented exception to the
   no-important rule): author display values (flex/grid) on popup classes beat
   the UA's [hidden] rule, so every dropdown stood permanently open. One guard
   restores the semantic: hidden MEANS gone. */
[hidden] { display: none !important; }

/* Ring numbers step down with digit count (compact "23,5k" comes from xui). */
.x-ring-num--m { font-size: 30px; }
.x-ring-num--s { font-size: 23px; }
.x-ring-sub { max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Status pills never wrap mid-badge. */
.x-pill, .x-chip { white-space: nowrap; }

/* Mobile topbar: all four action icons must fit beside the title. */
@media (max-width: 480px) {
  .top-title h1 { font-size: 18px; }
  .top-title { gap: 7px; }
  .top-actions { gap: 2px; }
  .top-actions .x-iconbtn { width: 34px; height: 34px; }
}

/* Onboarding rows may wrap instead of clipping mid-sentence. */
.x-ob-item span { white-space: normal; }

/* Dashboard announcement: the button keeps its size, the text wraps. */
.home-post { flex-wrap: wrap; }
.home-post .x-btn { flex-shrink: 0; margin-left: auto; white-space: nowrap; }

/* Catalog toolbar on small screens: selects in a tidy grid, facet chips
   scroll horizontally instead of exploding the row. */
@media (max-width: 640px) {
  .lib-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lib-filters .x-select { max-width: none; width: 100%; }
  .lib-filters .lib-protos { grid-column: 1 / -1; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .lib-filters .lib-tri { justify-self: start; }
}

/* Toolrow variant without the push-apart: forms read left-to-right. */
.x-toolrow--tight { justify-content: flex-start; }

/* Tri-State-Filter (Foto/Transparenz): echte Knopf-Anmutung statt nackter Icons */
.lib-tri { display: inline-flex; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border-subtle); background: var(--surface-raised); color: var(--text-secondary); cursor: pointer; }
.lib-tri:hover { color: var(--text-strong); }

/* ─── Design-Pass 2 (Screenshot-Audit Fortsetzung) ───────────────────────── */

/* Event-/Ticket-Kopfzeilen: umbrechen statt am Kartenrand zu clippen. */
.ev-head { flex-wrap: wrap; }
.ev-head .ev-title { min-width: 0; overflow-wrap: anywhere; }


/* Bottom-Nav: Spuren dürfen unter Label-Breite schrumpfen — sonst zwingt die
   Nav der GANZEN App eine Mindestbreite auf (Handy: 44px rechts abgeschnitten). */
.bn-item { min-width: 0; }
.bn-item .bn-l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Design-Pass 3 ──────────────────────────────────────────────────────── */

/* Zell-Inhalt mit führendem Status-Punkt bleibt EINE Gruppe (sonst reißt die
   mobile space-between-Zelle Punkt und Name auseinander). */
.x-cellname { display: inline-flex; align-items: center; gap: 8px; }

/* Formular-Zeilen (Wizard-Start u. ä.): Selects/Inputs stapeln auf dem Handy
   voll statt eng nebeneinander. */
@media (max-width: 560px) {
  .x-toolrow--tight { flex-direction: column; align-items: stretch; }
  .x-toolrow--tight > .x-select, .x-toolrow--tight > .x-input, .x-toolrow--tight > .flash-l { width: 100%; max-width: none; }
}

/* Glocken-Regeln: Push-Zeile */
.rule-push { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 4px 0 12px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 10px; }
.rule-push p { margin: 2px 0 0; }

/* AI-Studio: eigener Player-Transport (Pill-Fader statt nativem <audio>) */
.ai-st-audio-el { display: none; }
.ai-st-transport { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.ai-st-play { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; border: none; background: var(--btn-primary-bg); color: var(--btn-primary-fg, #0a0a0b); cursor: pointer; }
.ai-st-play svg { width: 18px; height: 18px; }
.ai-st-play:hover { opacity: .9; }
.ai-st-time { font-size: 12px; color: var(--text-secondary); min-width: 38px; text-align: center; flex-shrink: 0; }
.ai-st-scrub { position: relative; flex: 1; height: 6px; border-radius: 999px; background: var(--surface-raised); cursor: pointer; touch-action: none; }
.ai-st-scrub-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--clr-accent); width: 0; }
.ai-st-scrub-thumb { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); transform: translate(-50%, -50%); }

/* ─── Library-Katalog: aufgeräumte, responsive Werkzeugleiste ────────────── */
.lib-tbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.lib-tbar-q { flex: 1 1 240px; min-width: 0; }
.lib-tbar-count { flex-shrink: 0; font-size: 13px; white-space: nowrap; }
.lib-tbar-sp { flex: 1 1 0; }
.lib-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.lib-filters .x-select { flex: 0 1 auto; min-width: 130px; max-width: 220px; }
.lib-filters .x-iconbtn { flex-shrink: 0; }
@media (max-width: 640px) {
  .lib-tbar-sp { display: none; }
  .lib-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .lib-filters .x-select { min-width: 0; max-width: none; width: 100%; }
  .lib-filters .x-iconbtn { justify-self: start; }
}

/* Wizard-Start: klare Feld-Struktur, Revisions-Verwaltung ausgelagert */
.wiz-start { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.wiz-start .flash-l { flex: 1 1 200px; min-width: 0; }
.wiz-revrow { display: flex; align-items: center; gap: 6px; }
.wiz-revrow .x-select { flex: 1; min-width: 0; }
.wiz-startbtn { flex-shrink: 0; }
.wiz-revmgr { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 560px) {
  .wiz-start { align-items: stretch; }
  .wiz-start .flash-l { flex-basis: 100%; }
  .wiz-startbtn { width: 100%; }
}

/* Kunden: dezenter Ehrlichkeits-Hinweis (Billing/Support) */
.cus-note { margin-top: 10px; font-size: 12.5px; line-height: 1.5; }

/* AI-Studio: Track-Analyse-Vorschau (Deck: Struktur/Energie + Spektrogramme) */
.ai-an-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; }
.ai-an-stat { display: flex; flex-direction: column; gap: 1px; }
.ai-an-stat b { font-size: 20px; letter-spacing: -.02em; }
.ai-an-struct { position: relative; height: 74px; margin-top: 6px; border-radius: 8px; background: var(--surface-raised); overflow: hidden; cursor: pointer; }
.ai-an-seg { position: absolute; bottom: 0; border-radius: 4px 4px 0 0; opacity: .85; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; }
.ai-an-seg-l { font-size: 9.5px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); padding: 2px 3px; white-space: nowrap; }
.ai-an-cur { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.6); pointer-events: none; }
.ai-an-rms { width: 100%; height: 40px; margin-top: 4px; display: block; }
.ai-an-rms polyline { fill: none; stroke: var(--clr-accent); stroke-width: 1.5; }
.ai-an-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ai-an-thumb { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 1px solid var(--border-subtle); border-radius: 10px; overflow: hidden; background: var(--surface-raised); cursor: pointer; font: inherit; color: var(--text-secondary); }
.ai-an-thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #000; }
.ai-an-thumb span { font-size: 11px; padding: 4px 6px 6px; text-align: left; }
.ai-an-thumb:hover { border-color: var(--border-strong); color: var(--text-strong); }
.ai-an-lightbox { position: relative; max-width: min(92vw, 1100px); }
.ai-an-lightbox img { width: 100%; border-radius: 12px; background: #000; }
.ai-an-lbx { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.6); }

/* ── charts.js — SVG chart primitives. Token-based, dark + light. ── */
.chart-donut, .chart-gauge { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.chart-donut-ring { position: relative; width: 100%; max-width: min(100%, 220px); margin-inline: auto; }
.chart-donut-ring svg { display: block; width: 100%; height: auto; }
.chart-track { stroke: var(--surface-raised); }
.chart-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; pointer-events: none; }
.chart-center-big { font-size: clamp(20px, 6cqw, 32px); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.chart-center-sub { font-size: 12px; font-weight: 600; margin-top: 2px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; width: 100%; }
.chart-leg { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; }
.chart-legdot { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.chart-legico { display: inline-flex; align-items: center; flex: 0 0 auto; color: currentColor; }
.chart-legico .lucide { width: 15px; height: 15px; }
.chart-leg-lbl { color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-leg-val { color: var(--text-secondary); margin-left: auto; padding-left: 6px; font-variant-numeric: tabular-nums; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.chart-bars { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.chart-bar-row { display: grid; grid-template-columns: minmax(72px, 30%) 1fr auto; align-items: center; gap: 12px; }
.chart-bar-label { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.chart-bar-name { font-size: 13px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-bar-sub { font-size: 11px; color: var(--text-muted); }
.chart-bar-track { height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-raised); }
.chart-bar-fill { height: 100%; border-radius: 999px; min-width: 2px; transition: width .3s ease; }
.chart-bar-val { font-size: 13px; color: var(--text-secondary); text-align: right; font-variant-numeric: tabular-nums; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.chart-stack { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.chart-stack-bar { display: flex; width: 100%; border-radius: 999px; overflow: hidden; background: var(--surface-raised); }
.chart-stack-seg { height: 100%; min-width: 2px; }

/* Library stats dashboard (Devices → stats) */
.lib-st2-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 12px; }
.lib-st2-kpi { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.lib-st2-hd { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.lib-st2-hdi { width: 16px; height: 16px; flex-shrink: 0; }
.lib-st2-kpival { display: flex; align-items: center; justify-content: center; min-height: 96px; }
.lib-st2-big { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 34px; font-weight: 650; letter-spacing: -0.02em; color: var(--text-primary); }
.lib-st2-big span { font-size: 12px; font-weight: 400; color: var(--text-secondary); letter-spacing: 0; }
.lib-st2-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; }
.lib-st2-card { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.lib-st2-wide { grid-column: 1 / -1; }
.lib-st2-body { display: flex; justify-content: center; }
.lib-st2-trust { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.lib-st2-gaps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.lib-st2-gap { padding: 14px; display: flex; flex-direction: column; gap: 4px; border: none; text-align: left; font: inherit; color: inherit; border-left: 3px solid var(--border); }
.lib-st2-gap b { font-size: 22px; letter-spacing: -0.02em; }
.lib-st2-gapi { display: inline-flex; color: var(--text-secondary); }
.lib-st2-gapi svg { width: 16px; height: 16px; }
.lib-st2-gapl { font-size: 12.5px; color: var(--text-secondary); }
.lib-st2-gap.is-click { cursor: pointer; transition: background .12s; }
.lib-st2-gap.is-click:hover { background: var(--surface-hover); }
.lib-st2-gap.tone-warn  { border-left-color: var(--clr-warn); }
.lib-st2-gap.tone-error { border-left-color: var(--clr-error); }
.lib-st2-gap.tone-info  { border-left-color: var(--clr-info); }
.lib-st2-gap.tone-ok    { border-left-color: var(--clr-ok); }
.lib-st2-gap.tone-ok .lib-st2-gapi { color: var(--clr-ok); }
@media (max-width: 720px) { .lib-st2-grid { grid-template-columns: 1fr; } .lib-st2-wide { grid-column: auto; } }

/* ── Dev Hub: Board (kanban) + Wiki — cloud SSOT ── */
.dev-kan { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 680px) { .dev-kan { grid-template-columns: 1fr; } }
.dev-kan-empty { padding: 14px 6px; font-size: 12.5px; text-align: center; }
.x-kan-card { position: relative; }
.dev-cat-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px 0 0 3px; background: var(--dev-accent, var(--border-strong)); }
.dev-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dev-card-title { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.dev-src { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-muted); }
.dev-detail .flash-l, .dev-form .flash-l { width: 100%; }
.dev-form { display: flex; flex-direction: column; gap: 12px; }
.dev-notes { white-space: pre-wrap; font-size: 13.5px; color: var(--text-soft); line-height: 1.6; }
.dev-wiki-list { display: flex; flex-direction: column; gap: 10px; }
.dev-wiki-row { cursor: pointer; }
.dev-wiki-row:hover { border-color: var(--border-strong); }
.dev-wiki-ic .lucide { width: 15px; height: 15px; color: var(--text-muted); }
.dev-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.dev-md { font-size: 14px; color: var(--text-soft); line-height: 1.65; }
.dev-md h2 { font-size: 16px; margin: 14px 0 6px; color: var(--text-primary); }
.dev-md h3 { font-size: 14.5px; margin: 12px 0 5px; color: var(--text-primary); }
.dev-md h4, .dev-md h5 { font-size: 13.5px; margin: 10px 0 4px; color: var(--text-strong); }
.dev-md p { margin: 8px 0; }
.dev-md ul { margin: 8px 0; padding-left: 20px; }
.dev-md li { margin: 3px 0; }
.dev-md code { font-family: var(--font-mono, monospace); font-size: 12.5px; background: var(--surface-1); padding: 1px 5px; border-radius: 5px; }
.dev-md-edit { font-family: var(--font-mono, monospace); font-size: 12.5px; line-height: 1.55; }

/* ─── AI-Studio: full multi-lane stage (pixel fader, solo/sync, metrics, ─────
   fullscreen). Chrome is token-driven; only the LED backdrop (#04060c) stays a
   literal — it is the fixture's real dark output, not UI surface. ─────────── */
.ai-st-ctrls { align-items: center; gap: 12px; }

/* Pixel pill-fader — pointer-driven, no native range input. */
.ai-st-pxf { display: inline-flex; align-items: center; gap: 8px; min-width: 220px; }
.ai-st-pxf-i .lucide { width: 15px; height: 15px; color: var(--text-quiet); display: block; }
.ai-st-pxf-track { position: relative; flex: 1; min-width: 120px; height: 8px; border-radius: 999px; background: var(--surface-raised); border: 1px solid var(--border-subtle); cursor: pointer; touch-action: none; }
.ai-st-pxf-track:focus-visible { outline: 2px solid var(--clr-accent); outline-offset: 2px; }
.ai-st-pxf-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--clr-accent); width: 0; pointer-events: none; }
.ai-st-pxf-thumb { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); transform: translate(-50%, -50%); pointer-events: none; }
.ai-st-pxf-val { font-size: 12px; color: var(--text-quiet); min-width: 48px; text-align: right; }

/* Lane swatch + solo/dim states. */
.ai-st-lane-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.ai-st-lane-l { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-st-lane-l b { flex: 0 1 auto; }
.ai-st-solo { padding: 2px 8px; font-size: 11.5px; }
.ai-st-solo.is-on { background: var(--clr-accent-bg); border-color: var(--clr-accent-bd); color: var(--clr-accent); }
.ai-st-lane.ai-st-dim { opacity: .42; }
.ai-st-lane.is-solo .ai-st-lane-sw { box-shadow: 0 0 0 2px var(--clr-accent-bd); }

/* Metrics comparison table. */
.ai-st-metrics:empty { display: none; }
.ai-st-mtable { overflow-x: auto; margin-top: 10px; }
.ai-st-mtable table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ai-st-mtable th, .ai-st-mtable td { padding: 7px 10px; border-bottom: 1px solid var(--border-subtle); text-align: left; white-space: nowrap; }
.ai-st-mtable thead th { font-weight: 600; color: var(--text-quiet); position: sticky; top: 0; background: var(--surface-1); }
.ai-st-mtable td.num, .ai-st-mtable th.num { text-align: right; }
.ai-st-mtable tbody tr:last-child td { border-bottom: none; }
.ai-st-mcol { color: var(--text-strong); }
.ai-st-mcol .ai-st-lane-sw { margin-right: 6px; vertical-align: middle; }
.ai-st-mval { color: var(--text-strong); }
.ai-st-mval.is-off { color: var(--clr-warn-text); font-weight: 600; }
.ai-st-band { color: var(--text-quiet); }
.ai-st-band-rng { color: var(--text-disabled); font-size: 11px; }
.ai-st-celldim { color: var(--text-disabled); }
.ai-st-evmix { display: inline-flex; width: 84px; height: 12px; border-radius: 3px; overflow: hidden; vertical-align: middle; background: var(--surface-raised); }
.ai-st-evmix i { display: block; height: 100%; }
.ai-st-mhint { margin-top: 8px; font-size: 11.5px; }

/* Fullscreen stage overlay (mounted through the shared layer stack). */
.ai-st-fs { width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--surface-base); }
.ai-st-fs-head { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-1); flex: none; }
.ai-st-fs-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-strong); }
.ai-st-fs-title .lucide { width: 17px; height: 17px; }
.ai-st-fs-track { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-st-fs-hint { flex: none; }
.ai-st-fs-close { flex: none; margin-left: auto; }
.ai-st-fs-lanes { flex: 1 1 auto; display: grid; gap: 12px; padding: 16px; overflow: auto; align-content: start; }
.ai-st-fs-lane { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ai-st-fs-lane.ai-st-dim { opacity: .42; }
.ai-st-fs-lane-h { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-strong); min-width: 0; }
.ai-st-fs-lane-h span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-st-fs-stage { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-subtle); background: #04060c; line-height: 0; }
.ai-st-fs-c { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 360; }
@media (max-width: 640px) { .ai-st-fs-lanes { grid-template-columns: 1fr !important; } .ai-st-fs-hint { display: none; } }

/* ── AI-Studio Generator (gen-*) — folded from generator.js GEN_CSS ── */
.gen-flow { display: flex; flex-direction: column; gap: 16px; }
.gen-intro { color: var(--text-quiet); font-size: 13px; line-height: 1.5; max-width: 62ch; }
.gen-panel { padding: 16px; }
.gen-panel-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.gen-panel-h h3 { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-strong); }
.gen-panel-h h3 .lucide { width: 16px; height: 16px; }
.gen-panel-h .gen-sub { color: var(--text-quiet); font-size: 12px; }
.gen-help { color: var(--text-quiet); font-size: 12px; line-height: 1.5; margin-bottom: 10px; }
.gen-grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
/* selectable cards (models, scope, profiles) */
.gen-card { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 11px 13px; border-radius: 10px;
  border: 1px solid var(--border-subtle); background: var(--surface-1); color: var(--text); cursor: pointer; transition: border-color .12s, background .12s; }
.gen-card:hover { border-color: var(--border-strong); }
.gen-card.is-on { border-color: var(--clr-accent-bd); background: var(--clr-accent-bg); }
.gen-card b { font-size: 13px; color: var(--text-strong); }
.gen-card span { font-size: 12px; color: var(--text-quiet); }
.gen-card .gen-card-mono { font-size: 11px; color: var(--text-disabled); font-family: var(--font-mono, monospace); }
.gen-profv { display: inline-flex; gap: 6px; flex-wrap: wrap; margin: 2px 0; }
.gen-profv i { font-style: normal; font-size: 11px; color: var(--text-quiet); font-family: var(--font-mono, monospace);
  background: var(--surface-raised); border-radius: 5px; padding: 1px 5px; }
/* faders */
.gen-faders { display: flex; flex-direction: column; gap: 14px; }
.gen-faders.is-off { opacity: .4; pointer-events: none; }
.gen-fader-row { display: flex; flex-direction: column; gap: 5px; }
.gen-fader-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gen-fader-head label { font-size: 13px; color: var(--text-strong); }
.gen-fader-head .gen-reset { font-size: 11px; padding: 1px 7px; }
.gen-fader-desc { font-size: 11.5px; color: var(--text-quiet); line-height: 1.45; }
.gen-fader { display: inline-flex; align-items: center; gap: 10px; }
.gen-fader-track { position: relative; flex: 1; min-width: 120px; height: 8px; border-radius: 999px;
  background: var(--surface-raised); border: 1px solid var(--border-subtle); cursor: pointer; touch-action: none; }
.gen-fader-track:focus-visible { outline: 2px solid var(--clr-accent); outline-offset: 2px; }
.gen-fader-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--clr-accent); width: 0; pointer-events: none; }
.gen-fader-thumb { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.4); transform: translate(-50%, -50%); pointer-events: none; }
.gen-fader-val { font-size: 12px; color: var(--text-quiet); min-width: 52px; text-align: right; }
/* rule-factor switch (toggle) */
.gen-switch { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; padding: 0; color: var(--text); }
.gen-switch-track { position: relative; width: 38px; height: 20px; border-radius: 999px; background: var(--surface-raised);
  border: 1px solid var(--border-subtle); transition: background .12s; }
.gen-switch-knob { position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .12s; }
.gen-switch.is-on .gen-switch-track { background: var(--clr-accent); border-color: var(--clr-accent-bd); }
.gen-switch.is-on .gen-switch-knob { left: 19px; }
.gen-switch-lbl { font-size: 12px; color: var(--text-quiet); min-width: 26px; }
/* advanced rule-factor disclosure */
.gen-adv { border: 1px solid var(--border-subtle); border-radius: 10px; margin-top: 4px; overflow: hidden; }
.gen-adv-head { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px 14px;
  background: var(--surface-1); border: 0; cursor: pointer; color: var(--text); }
.gen-adv-head .gen-adv-caret { transition: transform .12s; color: var(--text-quiet); display: inline-flex; }
.gen-adv-head.is-open .gen-adv-caret { transform: rotate(90deg); }
.gen-adv-titles { display: flex; flex-direction: column; gap: 2px; }
.gen-adv-title { font-size: 13px; color: var(--text-strong); display: inline-flex; align-items: center; gap: 8px; }
.gen-adv-sub { font-size: 11.5px; color: var(--text-quiet); }
.gen-beta { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 5px;
  background: var(--clr-warn-bg); color: var(--clr-warn-text); }
.gen-adv-body { padding: 14px; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 16px; }
.gen-rf-group-t { font-size: 12px; font-weight: 600; color: var(--text-quiet); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.gen-rf-foot { display: flex; flex-direction: column; gap: 10px; }
.gen-rf-foot-note { font-size: 11.5px; color: var(--text-quiet); line-height: 1.5; }
.gen-rf-foot-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gen-rf-out { font-size: 12px; color: var(--text); background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 10px 12px; }
/* start + progress */
.gen-start { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gen-start .gen-run-hint { font-size: 12px; color: var(--text-quiet); }
.gen-gate { font-size: 12.5px; color: var(--clr-warn-text); background: var(--clr-warn-bg); border-radius: 8px; padding: 8px 12px; }
.gen-prog-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-quiet); margin-bottom: 8px; }
.gen-prog-mono { font-family: var(--font-mono, monospace); opacity: .6; }
.gen-done { margin-top: 8px; font-size: 12.5px; }
.gen-done a, .gen-rf-out a { color: var(--clr-accent); }
.gen-run-hint .lucide, .gen-btn-spin { width: 13px; height: 13px; }
/* track-picker popup */
.gen-picker { width: min(560px, 92vw); max-height: 82vh; display: flex; flex-direction: column; background: var(--surface-base);
  border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; }
.gen-picker-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); }
.gen-picker-h b { font-size: 14px; color: var(--text-strong); }
.gen-picker-h .gen-picker-x { margin-left: auto; }
.gen-picker-body { flex: 1 1 auto; overflow: auto; padding: 8px 12px; }
.gen-picker-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px; border: 0;
  background: none; cursor: pointer; color: var(--text); text-align: left; }
.gen-picker-row:hover { background: var(--surface-1); }
.gen-picker-row.is-sel { background: var(--clr-accent-bg); }
.gen-picker-cb { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--border-strong); flex: none; display: inline-flex; align-items: center; justify-content: center; }
.gen-picker-cb .lucide { width: 12px; height: 12px; color: var(--clr-accent); }
.gen-picker-row b { font-size: 13px; color: var(--text-strong); }
.gen-picker-row span { font-size: 12px; color: var(--text-quiet); }
.gen-picker-meta { display: flex; flex-direction: column; min-width: 0; }
.gen-picker-meta b, .gen-picker-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gen-picker-f { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--border-subtle); }
.gen-picker-f .gen-picker-count { font-size: 12px; color: var(--text-quiet); margin-right: auto; }

/* --- AI-Studio palette editor (colors view) ------------------------------- */
/* Editable palette cards: native colour pickers + role badges, name/tags/energy.
   Chrome uses panel tokens; the swatch colours are real palette DATA (literals
   set inline from the picker value). */
.ai-st-pe-lock { display: flex; align-items: center; gap: 6px; }
.ai-st-pe-lock .lucide { width: 15px; height: 15px; }
.ai-st-pe-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; }
.ai-st-pe-legend-h { flex: 1 1 100%; color: var(--text-quiet); font-size: 12px; }
.ai-st-pe-head-bar { margin: 12px 0 10px; }
.ai-st-pe-count { font-size: 12.5px; }
.ai-st-pe-tools { display: inline-flex; gap: 8px; }
.ai-st-pe-err { background: color-mix(in srgb, var(--clr-error) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--clr-error) 34%, transparent);
  color: var(--clr-error-text); border-radius: 11px; padding: 10px 14px; margin: 0 0 12px; font-size: 13px; }
.ai-st-pe-err ul { margin: 6px 0 0; padding-left: 18px; }

.ai-st-pe { display: flex; flex-direction: column; gap: 12px; }
.ai-st-pe-head { display: flex; align-items: center; gap: 10px; }
.ai-st-pe-name { flex: 1; min-width: 0; background: var(--surface-1);
  border: 1px solid var(--border-medium); border-radius: 9px; color: var(--text-strong);
  padding: 7px 10px; font-size: 14px; font-weight: 600; }
.ai-st-pe-name:disabled { opacity: .8; }
.ai-st-pe-actions { display: inline-flex; gap: 6px; flex: none; }

.ai-st-pe-sws { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.ai-st-pe-sw { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 58px; }
.ai-st-pe-color { width: 58px; height: 40px; padding: 0; border: 1px solid var(--border-medium);
  border-radius: 8px; background: none; cursor: pointer; }
.ai-st-pe-color:disabled { cursor: default; opacity: .85; }
.ai-st-pe-color::-webkit-color-swatch-wrapper { padding: 2px; }
.ai-st-pe-color::-webkit-color-swatch { border: none; border-radius: 6px; }
.ai-st-pe-color::-moz-color-swatch { border: none; border-radius: 6px; }
.ai-st-pe-x { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 6px;
  background: var(--surface-hover); color: var(--text-quiet); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.ai-st-pe-x:hover { background: color-mix(in srgb, var(--clr-error) 20%, var(--surface-hover));
  color: var(--clr-error-text); }
.ai-st-pe-x .lucide { width: 13px; height: 13px; }
.ai-st-pe-add { width: 58px; height: 40px; margin-top: 0; border: 1px dashed var(--border-strong);
  border-radius: 8px; background: none; color: var(--text-quiet); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.ai-st-pe-add:hover { border-color: var(--clr-accent); color: var(--clr-accent); }
.ai-st-pe-add .lucide { width: 16px; height: 16px; }

/* Role badge — clickable when a button, static when a span. Colour hints the
   role family; text stays the raw role token (data). */
.ai-st-pe-role { font-size: 10.5px; line-height: 1; font-weight: 600; letter-spacing: .02em;
  padding: 3px 6px; border-radius: 999px; border: 1px solid transparent; cursor: default; }
button.ai-st-pe-role { cursor: pointer; }
.ai-st-pe-role.role-base { background: color-mix(in srgb, var(--clr-info) 22%, transparent);
  color: var(--clr-info); border-color: color-mix(in srgb, var(--clr-info) 45%, transparent); }
.ai-st-pe-role.role-accent { background: color-mix(in srgb, var(--clr-accent) 22%, transparent);
  color: var(--clr-accent); border-color: color-mix(in srgb, var(--clr-accent) 45%, transparent); }
.ai-st-pe-role.role-blind { background: color-mix(in srgb, var(--clr-amber) 24%, transparent);
  color: var(--clr-amber); border-color: color-mix(in srgb, var(--clr-amber) 48%, transparent); }
.ai-st-pe-role.role-strobe { background: color-mix(in srgb, var(--text-strong) 16%, transparent);
  color: var(--text-strong); border-color: color-mix(in srgb, var(--text-strong) 34%, transparent); }

.ai-st-pe-meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.ai-st-pe-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-quiet); }
.ai-st-pe-tags { min-width: 200px; background: var(--surface-1); border: 1px solid var(--border-medium);
  border-radius: 9px; color: var(--text-primary); padding: 6px 10px; font-size: 13px; }
.ai-st-pe-energy { flex-direction: row; align-items: center; gap: 6px; }
.ai-st-pe-e { width: 58px; background: var(--surface-1); border: 1px solid var(--border-medium);
  border-radius: 9px; color: var(--text-primary); padding: 6px 8px; font-size: 13px; text-align: right; }
.ai-st-pe-pct, .ai-st-pe-to { color: var(--text-quiet); font-size: 12px; }
.ai-st-pe-apply { font-size: 12px; }
.ai-st-pe-del.is-arm { background: var(--clr-error); color: #fff; border-color: transparent; }

/* ─── Rebuilt system map (Infrastruktur → Übersicht) ─────────────────────
   Deterministic layered topology: nodes are laid out row-by-row and spread
   evenly across a fixed-width canvas, so labels never collide. The canvas
   keeps a min-width and the viewport scrolls horizontally on narrow screens
   (no body scroll). Edges are drawn behind the nodes and stay subtle. */
.x-map {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 18px;
  border: 1px solid var(--border-subtle);
  background:
    radial-gradient(120% 90% at 50% -20%, var(--clr-accent-bg), transparent 62%),
    var(--surface-1);
  -webkit-overflow-scrolling: touch;
}
.x-map-canvas {
  position: relative;
  width: 100%;
  min-width: 1140px;
  height: 470px;
}
.x-map-canvas > svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.x-map-edge { fill: none; stroke: var(--border-strong); stroke-width: 1.1; opacity: .45; }
.x-map-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 7px;
  max-width: 180px;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  font: 600 12px/1 inherit;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.16);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.x-map-node:hover,
.x-map-node:focus-visible {
  border-color: var(--clr-accent-bd);
  box-shadow: 0 5px 18px rgba(0,0,0,.24);
  transform: translate(-50%, -50%) scale(1.05);
  outline: none;
  z-index: 4;
}
.x-map-node-i { width: 15px; height: 15px; color: var(--text-medium); flex-shrink: 0; }
.x-map-node-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Status is carried on the node border + the leading dot. */
.x-map-node--up   { border-color: color-mix(in srgb, var(--clr-ok)    48%, var(--border-medium)); }
.x-map-node--warn { border-color: color-mix(in srgb, var(--clr-amber) 55%, var(--border-medium)); }
.x-map-node--crit { border-color: color-mix(in srgb, var(--clr-error) 62%, var(--border-medium)); }
/* Node-kind variants. */
.x-map-node--zone   { background: transparent; border-style: dashed; color: var(--text-muted); box-shadow: none; }
.x-map-node--zone .x-map-node-i { color: var(--text-muted); }
.x-map-node--db     { border-radius: 12px; }
.x-map-node--remote { border-style: dashed; }
/* Legend row under the map. */
.x-map-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 14px; }
.x-map-legend-i { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-medium); }
@media (max-width: 680px) {
  .x-map-canvas { height: 440px; }
}
.x-map-drawer-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
/* ============================================================================
   DEV area v2 — Board (full-width category masonry) + Wiki (tree + Markdown).
   All colours are tokens; category accents arrive as validated hex in --dev-*.
   ============================================================================ */

/* --- board: header meter + toolbar ------------------------------------- */
.dev-board-meter { display: flex; align-items: center; gap: 14px; margin: 4px 0 12px; }
.dev-meter-txt { font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.dev-meter-txt b { color: var(--text-primary); }
.dev-board-meter .x-meter { flex: 1; height: 8px; }
.dev-meter-pct { margin-left: 10px; font-weight: 700; color: var(--clr-accent); }
.dev-board-bar { align-items: center; }
.dev-board-search { flex: 1; min-width: 150px; }

/* filter chips (kind + quick) */
.dev-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.dev-fchip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text-secondary);
  background: var(--surface-1); border: 1px solid var(--border-subtle); transition: background .12s, border-color .12s, color .12s;
}
.dev-fchip .lucide { width: 13px; height: 13px; }
.dev-fchip:hover { border-color: var(--border-strong); color: var(--text-strong); }
.dev-fchip.is-on {
  color: var(--text-bright); border-color: color-mix(in srgb, var(--dev-tag, var(--clr-accent)) 55%, transparent);
  background: color-mix(in srgb, var(--dev-tag, var(--clr-accent)) 18%, transparent);
}
.dev-chip-sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--border-subtle); }

/* --- board: masonry of category cards ---------------------------------- */
.dev-board { column-width: 320px; column-gap: 16px; }
.dev-board .x-empty { break-inside: avoid; }
.dev-cat {
  break-inside: avoid; display: block; margin: 0 0 16px; background: var(--panel-bg);
  border: 1px solid var(--border-subtle); border-top: 3px solid var(--dev-accent, var(--border-strong));
  border-radius: 14px; overflow: hidden;
}
.dev-cat-h {
  display: flex; align-items: center; gap: 8px; padding: 11px 13px; cursor: pointer; user-select: none;
}
.dev-cat-h:hover { background: var(--surface-hover); }
.dev-caret { width: 15px; height: 15px; color: var(--text-muted); transition: transform .18s; flex-shrink: 0; }
.dev-cat.is-collapsed .dev-caret { transform: rotate(-90deg); }
.dev-cat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dev-accent, var(--text-muted)); flex-shrink: 0; }
.dev-cat-h h3 { font-size: 13.5px; font-weight: 700; color: var(--text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-cat-count { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.dev-cat-count b { color: var(--dev-accent, var(--text-strong)); font-weight: 700; }
.dev-cat.is-collapsed .dev-items { display: none; }
.dev-items { list-style: none; margin: 0; padding: 4px 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.dev-cat-empty { padding: 10px 6px; font-size: 12px; text-align: center; }

/* item row */
.dev-item { display: flex; gap: 9px; padding: 8px; border-radius: 9px; cursor: pointer; }
.dev-item:hover { background: var(--surface-hover); }
.dev-chk {
  flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px; border-radius: 6px; cursor: pointer;
  background: var(--surface-1); border: 1.5px solid var(--border-strong); color: transparent;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.dev-chk .lucide { width: 12px; height: 12px; }
.dev-chk.is-on { background: var(--clr-accent); border-color: var(--clr-accent); color: var(--btn-primary-fg, #fff); }
.dev-item-body { flex: 1; min-width: 0; }
.dev-item-head { display: flex; align-items: flex-start; gap: 7px; flex-wrap: wrap; }
.dev-item-title { font-size: 13px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; flex: 1; min-width: 0; }
.dev-item.is-done .dev-item-title { text-decoration: line-through; color: var(--text-muted); }
.dev-item-desc {
  margin-top: 3px; font-size: 12px; color: var(--text-soft); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dev-item.is-done .dev-item-desc { color: var(--text-muted); }
.dev-item-thumb { margin-top: 6px; }
.dev-item-thumb img { height: 58px; max-width: 100%; border-radius: 7px; border: 1px solid var(--border-subtle); object-fit: cover; }
.dev-bdgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.dev-bdg { display: inline-flex; align-items: center; gap: 3px; font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; color: var(--text-muted); }
.dev-bdg .lucide { width: 12px; height: 12px; }

/* kind tag */
.dev-tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 1.5px 7px; border-radius: 6px;
  font-family: ui-monospace, Menlo, monospace; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--dev-tag, var(--text-muted));
  border: 1px solid color-mix(in srgb, var(--dev-tag, var(--text-muted)) 45%, transparent);
  background: color-mix(in srgb, var(--dev-tag, var(--text-muted)) 10%, transparent);
}
.dev-tag .lucide { width: 11px; height: 11px; }

/* --- board detail drawer ----------------------------------------------- */
.dev-form-row { display: flex; gap: 12px; }
.dev-form-row .flash-l { flex: 1; min-width: 0; }
.dev-media-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dev-media img { width: 78px; height: 78px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-subtle); }
.dev-refbox { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.dev-refcard { min-width: 0; }
.dev-refcard h4 {
  display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted); margin-bottom: 7px;
}
.dev-refcard h4 .lucide { width: 13px; height: 13px; }
.dev-refchip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; margin: 0 5px 6px 0; border-radius: 8px;
  font-size: 12px; color: var(--text-soft); background: var(--surface-1); border: 1px solid var(--border-subtle);
}
.dev-refchip .lucide { width: 12px; height: 12px; color: var(--text-muted); }

/* ============================================================================
   WIKI — two-pane tree navigator + Markdown document
   ============================================================================ */
.dev-wiki-layout { display: grid; grid-template-columns: 264px 1fr; gap: 20px; align-items: start; }
.dev-wiki-nav {
  position: sticky; top: 8px; align-self: start; background: var(--panel-bg);
  border: 1px solid var(--border-subtle); border-radius: 14px; padding: 12px; max-height: calc(100vh - 110px);
  overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
}
.dev-wiki-navtop { display: flex; gap: 8px; align-items: center; }
.dev-wiki-search { position: relative; flex: 1; min-width: 0; }
.dev-search-i { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--text-muted); pointer-events: none; }
.dev-wiki-search .x-input { padding-left: 30px; width: 100%; }
.dev-wiki-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.x-select--sm { padding: 5px 8px; font-size: 12px; border-radius: 8px; flex: 1; min-width: 0; }
.dev-wiki-tree { display: flex; flex-direction: column; gap: 3px; }
.dev-tree-empty { padding: 12px 4px; font-size: 12.5px; text-align: center; }
.dev-tarea { margin-bottom: 6px; }
.dev-tarea-h {
  display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted); padding: 6px 4px 4px;
}
.dev-tarea-h .lucide { width: 13px; height: 13px; }
.dev-tarea-h span { margin-left: auto; font-weight: 600; }
.dev-tnode.is-closed > .dev-tkids { display: none; }
.dev-tnode.is-closed .dev-twist-i { transform: rotate(-90deg); }
.dev-trow {
  display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 8px; cursor: pointer;
  padding-left: calc(6px + var(--depth, 0) * 4px);
}
.dev-trow:hover { background: var(--surface-hover); }
.dev-trow.is-active { background: var(--surface-active); font-weight: 600; }
.dev-twist { padding: 0; width: 16px; height: 16px; border: none; background: none; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.dev-twist-i { width: 14px; height: 14px; transition: transform .16s; }
.dev-twist-sp { width: 16px; flex-shrink: 0; }
.dev-tdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; padding: 0; border: none; }
.dev-tdot.x-pill--ok { background: var(--clr-ok); }
.dev-tdot.x-pill--info { background: var(--clr-info); }
.dev-tdot.x-pill--warn { background: var(--clr-amber); }
.dev-tdot.x-pill--crit { background: var(--clr-error); }
.dev-tdot.x-pill--neutral { background: var(--text-muted); }
.dev-trow-lbl { font-size: 12.5px; color: var(--text-regular); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-trow.is-active .dev-trow-lbl { color: var(--text-primary); }
.dev-tkids { margin-left: 13px; border-left: 1px solid var(--border-subtle); padding-left: 3px; }

.dev-wiki-main { min-width: 0; }
.dev-nav-toggle { display: none; margin-bottom: 12px; }
.dev-wiki-content { min-width: 0; }
.dev-wiki-loading { padding: 24px; text-align: center; }
.dev-wiki-welcome { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.dev-welcome-i { width: 40px; height: 40px; margin-bottom: 12px; opacity: .5; }

/* wiki document */
.dev-wiki-doc { max-width: 900px; }
.dev-doc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.dev-doc-title { font-size: 25px; font-weight: 750; letter-spacing: -.01em; line-height: 1.2; }
.dev-doc-meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 6px; }
.dev-meta-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: 999px;
  font-size: 12px; color: var(--text-secondary); background: var(--surface-1); border: 1px solid var(--border-subtle);
}
.dev-meta-pill .lucide { width: 12px; height: 12px; color: var(--text-muted); }
.dev-meta-pill .dev-tdot { width: 7px; height: 7px; }
.dev-doc-refs { border-top: 1px solid var(--border-subtle); padding-top: 18px; margin-top: 30px; }

/* markdown block styling (extends the base .dev-md rules) */
.dev-md h2 { font-size: 20px; font-weight: 700; border-bottom: 1px solid var(--border-subtle); padding-bottom: 6px; margin: 22px 0 10px; }
.dev-md h3 { font-size: 16px; font-weight: 650; margin: 18px 0 6px; }
.dev-md h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 14px 0 4px; }
.dev-md a { color: var(--clr-info); text-decoration: none; }
.dev-md a:hover { text-decoration: underline; }
.dev-md a.dev-wl { color: var(--clr-accent); cursor: pointer; }
.dev-md strong { color: var(--text-primary); font-weight: 700; }
.dev-md em { font-style: italic; }
.dev-md del { color: var(--text-muted); }
.dev-md ol { margin: 8px 0; padding-left: 22px; }
.dev-md blockquote {
  margin: 10px 0; padding: 8px 14px; border-left: 3px solid var(--clr-accent);
  background: var(--surface-1); border-radius: 0 8px 8px 0; color: var(--text-soft);
}
.dev-md-hr { border: none; border-top: 1px solid var(--border-subtle); margin: 18px 0; }
.dev-md-pre {
  position: relative; background: var(--surface-sunken, var(--surface-2)); border: 1px solid var(--border-subtle);
  border-radius: 10px; padding: 13px 15px; overflow-x: auto; margin: 12px 0;
}
.dev-md-pre code { background: none; padding: 0; border-radius: 0; font-size: 12.5px; color: var(--text-regular); }
.dev-md-pre[data-lang]::before {
  content: attr(data-lang); position: absolute; top: 6px; right: 10px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted);
}
.dev-md-tablewrap { overflow-x: auto; margin: 12px 0; }
.dev-md-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.dev-md-table th, .dev-md-table td { border: 1px solid var(--border-subtle); padding: 7px 12px; text-align: left; }
.dev-md-table th { background: var(--surface-1); color: var(--text-primary); font-weight: 600; }

/* ============================================================================
   DEV — full-bleed surfaces, colour, filters, emoji, git cards (Sam DevArea-2)
   ============================================================================ */

/* Break board / wiki / git out of the 1120px content cap on wide viewports —
   these surfaces need the room. Centred on the parent (which is itself centred
   in the viewport) via symmetric negative margins, so the page never h-scrolls
   and no transform is created (keeps the wiki sticky nav intact). */
@media (min-width: 1180px) {
  .dev-fullbleed {
    width: min(calc(100vw - 48px), 1680px);
    margin-inline: calc((100% - min(calc(100vw - 48px), 1680px)) / 2);
  }
}

/* board: colour the category header + count with the category accent */
.dev-cat-h { background: color-mix(in srgb, var(--dev-accent, transparent) 7%, transparent); }
.dev-cat-h:hover { background: color-mix(in srgb, var(--dev-accent, var(--surface-hover)) 15%, var(--surface-hover)); }

/* board item: a thin kind-coloured accent + owner/date meta line */
.dev-item { border-left: 2px solid transparent; padding-left: 7px; transition: border-color .12s, background .12s; }
.dev-item:hover { border-left-color: color-mix(in srgb, var(--dev-tag, var(--clr-accent)) 65%, transparent); }
.dev-item.is-done { opacity: .72; }
.dev-item-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; font-size: 11px; color: var(--text-muted); }
.dev-owner, .dev-when { display: inline-flex; align-items: center; gap: 4px; }
.dev-owner .lucide, .dev-when .lucide { width: 12px; height: 12px; }
.dev-owner { color: var(--text-secondary); font-weight: 600; }
.dev-when[data-bucket="today"] { color: var(--clr-ok); }
.dev-when[data-bucket="week"] { color: var(--clr-info); }

/* board toolbar: owner select + date-range segment */
.dev-selwrap { position: relative; display: inline-flex; align-items: center; }
.dev-sel-i { position: absolute; left: 8px; width: 14px; height: 14px; color: var(--text-muted); pointer-events: none; }
.dev-owner-sel { padding-left: 28px; min-width: 150px; }
.dev-when-seg { flex: 0 0 auto; }

/* honest inline error surface (board + git) */
.dev-errbox {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 14px;
  background: color-mix(in srgb, var(--clr-error) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--clr-error) 30%, transparent);
}
.dev-err-i { width: 26px; height: 26px; color: var(--clr-error); flex-shrink: 0; }
.dev-err-body { flex: 1; min-width: 0; }
.dev-err-title { font-size: 13.5px; font-weight: 700; color: var(--clr-error-text); }
.dev-err-msg { font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; }

/* wiki: wider document, nav header fixed while only the tree scrolls */
.dev-wiki-doc { max-width: 1180px; }
.dev-wiki-nav { overflow: hidden; max-height: calc(100vh - 90px); }
.dev-wiki-navtop, .dev-wiki-filters { flex: 0 0 auto; }
.dev-wiki-tree { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 2px 6px; scrollbar-width: thin; }
.dev-temoji { width: 17px; flex-shrink: 0; text-align: center; font-size: 13px; line-height: 1; }
.dev-doc-emoji { margin-right: 10px; }
.dev-title-row { align-items: flex-end; }
.dev-emoji-l { flex: 0 0 92px; }
.dev-emoji-input { text-align: center; font-size: 18px; }

/* git: summary bar + card grid */
.dev-git-summary { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.dev-git-sum {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px;
  font-size: 12.5px; background: var(--surface-1); border: 1px solid var(--border-subtle); color: var(--text-secondary);
}
.dev-git-sum b { color: var(--text-primary); font-weight: 700; }
.dev-git-sum .lucide { width: 14px; height: 14px; }
.dev-git-sum.tone-ok { color: var(--clr-ok); }
.dev-git-sum.tone-warn { color: var(--clr-warn-text); }
.dev-git-sum.tone-info { color: var(--clr-info); }
.dev-git-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; align-items: start; }
.dev-git-grid > * { min-width: 0; }
.dev-git-card {
  min-width: 0; overflow: hidden;
  background: var(--panel-bg); border: 1px solid var(--border-subtle); border-radius: 14px;
  padding: 14px 15px; display: flex; flex-direction: column; gap: 12px;
}
.dev-git-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.dev-git-repoic { width: 17px; height: 17px; color: var(--clr-cloud); flex-shrink: 0; }
.dev-git-name { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.dev-git-branch {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-secondary);
  padding: 2px 9px; border-radius: 7px; background: var(--surface-1); border: 1px solid var(--border-subtle);
}
.dev-git-branch .lucide { width: 13px; height: 13px; color: var(--text-muted); }
.dev-git-gate { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 7px; }
.dev-git-gate .lucide { width: 13px; height: 13px; }
.dev-git-gate.is-ok { color: var(--clr-ok); background: color-mix(in srgb, var(--clr-ok) 12%, transparent); }
.dev-git-gate.is-bad { color: var(--clr-error-text); background: color-mix(in srgb, var(--clr-error) 12%, transparent); }
.dev-git-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.dev-git-stat {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-variant-numeric: tabular-nums;
  padding: 3px 10px; border-radius: 8px; background: var(--surface-1); border: 1px solid var(--border-subtle); color: var(--text-secondary);
}
.dev-git-stat .lucide { width: 13px; height: 13px; }
.dev-git-stat.tone-ok { color: var(--clr-ok); }
.dev-git-stat.tone-warn { color: var(--clr-warn-text); }
.dev-git-stat.tone-info { color: var(--clr-info); }
.dev-git-stat.tone-dim { color: var(--text-muted); }
.dev-git-block { border-top: 1px solid var(--border-subtle); padding-top: 10px; }
.dev-git-blk-h {
  display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted); margin-bottom: 7px;
}
.dev-git-blk-h .lucide { width: 12px; height: 12px; }
.dev-git-files { display: flex; flex-direction: column; gap: 3px; }
.dev-git-file { display: flex; align-items: center; gap: 8px; font-size: 12px; min-width: 0; }
.dev-git-fst { width: 16px; text-align: center; font-weight: 800; font-family: ui-monospace, Menlo, monospace; color: var(--fst); flex-shrink: 0; }
.dev-git-fp { min-width: 0; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-git-more { font-size: 11px; margin-top: 3px; }
.dev-git-wts { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; }
.dev-git-wt { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: 11.5px; padding: 3px 9px; border-radius: 7px; background: var(--surface-1); border: 1px solid var(--border-subtle); }
.dev-git-wt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dev-git-commits { display: flex; flex-direction: column; gap: 7px; }
.dev-git-commit { display: grid; grid-template-columns: auto 1fr; gap: 2px 9px; font-size: 12px; align-items: baseline; }
.dev-git-sha { color: var(--clr-amber); font-size: 11.5px; }
.dev-git-cmsg { color: var(--text-regular); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dev-git-cmeta { grid-column: 2; font-size: 10.5px; color: var(--text-muted); }

/* --- mobile: stack board columns & wiki panes -------------------------- */
@media (max-width: 860px) {
  .dev-wiki-layout { grid-template-columns: 1fr; }
  .dev-wiki-nav { display: none; position: static; max-height: 60vh; }
  .dev-wiki-layout.nav-open .dev-wiki-nav { display: flex; }
  .dev-nav-toggle { display: inline-flex; }
  .dev-refbox { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .dev-board { column-width: auto; columns: 1; }
  .dev-board-meter { flex-wrap: wrap; }
  .dev-form-row { flex-direction: column; gap: 12px; }
  .dev-title-row { flex-direction: row; }
  .dev-doc-title { font-size: 21px; }
  .dev-board-bar { flex-direction: column; align-items: stretch; }
  .dev-board-bar .x-seg { justify-content: center; }
  .dev-selwrap, .dev-owner-sel { width: 100%; }
  .dev-git-grid { grid-template-columns: 1fr; }
  .dev-git-summary { gap: 7px; }
  .dev-git-gate { margin-left: 0; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   AI-Studio — faithful port of the LightAI studio view (scripts/webui).
   Structure / geometry / sizes / spacing are IDENTICAL to the original
   styles.css; only the colour values are routed through the panel tokens
   (accent/ok/amber/error tints via color-mix, surfaces via --surface-*).
   Prefix scope: .deck-* (timeline deck), .st-* (studio stage), .pill-fader,
   plus the small utility classes the deck/stage markup emits.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- small utilities the ported markup emits ---- */
.st-mono, .cell-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.cell-dim { color: var(--text-muted); }
.st-hint, .hint { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }
.table-wrap { width: 100%; overflow-x: auto; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.table-wrap th, .table-wrap td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
.table-wrap th { color: var(--text-muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.table-wrap .num { text-align: right; }
.ai-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: 99px; padding: 3px 10px; font-size: 11.5px; }
.ai-chip .k { color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; font-size: 10px; font-weight: 700; }
.ai-chip .v { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.ev-mix { display: inline-flex; width: 92px; height: 9px; border-radius: 5px; overflow: hidden; border: 1px solid var(--border-subtle); vertical-align: middle; }
.ev-mix i { display: block; height: 100%; }
.sim-stage { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-strong); background: var(--app-bg); line-height: 0; }
.sim-stage .sim-canvas { display: block; width: 100%; height: 130px; }
.st-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border-strong); border-top-color: var(--clr-accent); border-radius: 50%; animation: st-spin .7s linear infinite; vertical-align: -2px; }
@keyframes st-spin { to { transform: rotate(360deg); } }
.st-loading-box { display: flex; align-items: center; gap: 10px; padding: 22px; color: var(--text-secondary); font-size: 13px; }
.st-inline-error { padding: 12px 14px; border-radius: var(--radius-card); background: color-mix(in srgb, var(--clr-error) 8%, transparent); border: 1px solid color-mix(in srgb, var(--clr-error) 35%, transparent); color: var(--clr-error); font-size: 13px; }

/* ---- pill fader (canonical; no native range control) ---- */
.pill-fader {
  position: relative; width: 100%; height: 40px; border-radius: 20px;
  background: var(--surface-sunken); cursor: pointer; touch-action: pan-y; overflow: hidden;
  box-shadow: 0 0 0 1px var(--border-subtle), inset 0 1px 0 rgba(255,255,255,.04), 0 4px 14px rgba(0,0,0,.35);
  user-select: none; -webkit-user-select: none;
}
.pill-fader-fill {
  position: absolute; top: 0; left: 0; bottom: 0; width: 0;
  background: linear-gradient(to right, color-mix(in srgb, var(--clr-accent) 32%, transparent), color-mix(in srgb, var(--clr-accent) 14%, transparent));
  pointer-events: none;
}
.pill-fader-knob {
  position: absolute; left: 7px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.35);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border); pointer-events: none; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-primary); font-size: 13px;
}
.pill-fader-knob .lucide { width: 15px; height: 15px; }
.pill-fader-label {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .12em; pointer-events: none; user-select: none; white-space: nowrap; z-index: 1;
}
.pill-fader-val {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 11.5px; font-weight: 700; color: var(--text-primary); background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 2px 9px; border-radius: 99px; pointer-events: none; z-index: 2;
  border: 1px solid var(--border); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- timeline deck ---- */
.deck { background: var(--panel-bg); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.deck-head { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.deck-play { width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer; background: var(--btn-primary-bg); color: var(--btn-primary-fg); font-size: 13px; font-weight: 700; flex: 0 0 auto; }
.deck-play:hover { transform: scale(1.05); }
.deck-time { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-secondary); }
.deck-time b { color: var(--text-primary); font-size: 14px; }
.deck-zoom { display: inline-flex; gap: 4px; margin-left: 8px; }
.deck-zoom button { background: var(--surface-1); border: 1px solid var(--border); color: var(--text-secondary); border-radius: 8px; min-width: 30px; height: 28px; cursor: pointer; font-family: inherit; font-size: 13px; }
.deck-zoom button:hover { color: var(--text-primary); border-color: var(--border-strong); }
.deck-hint { font-size: 10.5px; color: var(--text-muted); margin-left: auto; }
.deck-ana { background: var(--surface-1); border: 1px solid var(--border); color: var(--text-secondary); border-radius: 99px; padding: 5px 13px; font-size: 12px; cursor: pointer; font-family: inherit; }
.deck-ana[aria-pressed="true"] { background: var(--clr-accent-bg); border-color: var(--clr-accent); color: var(--text-primary); }
.deck-body { position: relative; }
.deck-canvas { display: block; width: 100%; background: var(--app-bg); cursor: crosshair; touch-action: none; }
.deck-tip { position: absolute; z-index: 4; background: var(--surface-overlay); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: 8px; padding: 4px 9px; font-size: 11.5px; pointer-events: none; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.deck-analysis { border-top: 1px solid var(--border); padding: 12px 14px; }
.deck-ana-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.deck-sec-table { max-height: 220px; overflow-y: auto; }
.deck-sec-row { cursor: pointer; }
.deck-sec-row:hover td { background: var(--surface-2); }
.deck-sec-chip { font-size: 10px; font-weight: 700; letter-spacing: .05em; padding: 2px 8px; border-radius: 99px; color: var(--fg-on-solid); text-transform: uppercase; }
.deck-energy { display: inline-block; width: 110px; height: 8px; border-radius: 4px; background: var(--surface-sunken); border: 1px solid var(--border); overflow: hidden; vertical-align: middle; }
.deck-energy i { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--clr-accent) 55%, transparent), color-mix(in srgb, var(--clr-error) 60%, transparent)); }
.deck-size { display: inline-flex; gap: 2px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
.deck-size button { background: transparent; border: none; color: var(--text-muted); border-radius: 6px; min-width: 26px; height: 22px; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 700; }
.deck-size button:hover { color: var(--text-primary); }
.deck-size button.on { background: var(--clr-accent-bg); color: var(--text-primary); }
.deck-max { background: var(--surface-1); border: 1px solid var(--border); color: var(--text-secondary); border-radius: 8px; width: 30px; height: 28px; cursor: pointer; font-size: 14px; }
.deck-max:hover { color: var(--text-primary); border-color: var(--clr-accent); }
.deck-resize { display: flex; align-items: center; justify-content: center; height: 12px; cursor: ns-resize; touch-action: none; border-top: 1px solid var(--border); }
.deck-resize span { width: 46px; height: 4px; border-radius: 2px; background: var(--border-strong); }
.deck-resize:hover span { background: var(--clr-accent); }
.deck-ana-colors { margin-top: 10px; }
.deck-ana-ctitle { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-weight: 800; margin-bottom: 7px; }
.deck-ana-ctitle .cell-dim { text-transform: none; letter-spacing: 0; font-weight: 500; }
.deck-ana-crow { display: flex; align-items: center; gap: 10px; padding: 3px 0; min-width: 0; }
.deck-ana-clabel { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-secondary); width: 220px; flex: 0 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-ana-clabel i { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.deck-ana-cchips { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.deck-ana-cchips i { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--border-strong); }
.deck-ana-cn { margin-left: auto; font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }
.deck-detail { position: absolute; right: 8px; top: 28px; z-index: 30; min-width: 240px; max-width: 340px; max-height: 60vh; overflow: auto; background: var(--surface-elevated); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.45); font-size: 12px; color: var(--text-primary); }
.deck-detail-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border-strong); }
.deck-detail-x { margin-left: auto; background: none; border: 0; color: inherit; font-size: 15px; cursor: pointer; opacity: .7; }
.deck-detail-x:hover { opacity: 1; }
.deck-detail table { border-collapse: collapse; width: 100%; }
.deck-detail td { padding: 4px 10px; vertical-align: top; }
.deck-detail td:first-child { opacity: .65; white-space: nowrap; }
.deck-detail i { opacity: .6; font-style: normal; font-size: 11px; }
.deck-sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; border: 1px solid var(--border-strong); }

/* ---- studio head ---- */
.st-head { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.st-cover { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; background: var(--surface-1); border: 1px solid var(--border); }
.st-cover.ph { display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 20px; }
.st-head-meta { min-width: 0; cursor: pointer; padding: 2px 6px; border-radius: 10px; }
.st-head-meta:hover { background: var(--surface-2); }
.st-head-title { font-size: 16.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-head-sub { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-like { color: var(--clr-error); font-size: 13px; margin-left: 4px; }
.st-switch { flex: 1; min-width: 140px; max-width: 420px; margin-left: auto; background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); border-radius: 99px; padding: 9px 16px; font-size: 13px; font-family: inherit; cursor: pointer; }
.st-switch:focus { outline: none; border-color: var(--clr-accent); }
.st-head-btn { flex: 0 0 auto; }
.st-deck { margin-bottom: 16px; }

/* ---- stage header + controls ---- */
.st-stage-wrap { margin-bottom: 18px; }
.st-stage-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.st-stage-title { font-size: 12px; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 800; color: var(--text-muted); }
.st-stage-count { font-size: 12px; color: var(--text-muted); }
.st-stage-right { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.st-pixels { width: 150px; display: inline-block; }
.st-blind { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-1); border: 1px solid var(--border); color: var(--text-secondary); border-radius: 99px; padding: 5px 14px 5px 6px; font-size: 12.5px; cursor: pointer; font-family: inherit; }
.st-blind-knob { width: 20px; height: 20px; border-radius: 50%; background: var(--text-muted); transition: background .15s, box-shadow .15s; }
.st-blind[aria-pressed="true"] { border-color: var(--clr-accent); color: var(--text-primary); background: var(--clr-accent-bg); }
.st-blind[aria-pressed="true"] .st-blind-knob { background: var(--clr-accent); box-shadow: 0 0 10px var(--clr-accent-sel); }

/* ---- stage grid + lane cards ---- */
.st-stage { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 14px; }
.st-lane { background: var(--panel-bg); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 11px 12px 12px; min-width: 0; transition: opacity .15s, border-color .15s; }
.st-lane.st-dim { opacity: .38; }
.st-lane.st-solo { border-color: var(--clr-accent); }
.st-lane.st-new { animation: stnew 1.4s ease-out; }
@keyframes stnew { 0% { border-color: var(--clr-accent); box-shadow: 0 0 0 3px var(--clr-accent-bd); } 100% { border-color: var(--border); box-shadow: none; } }
.st-lane.st-winner { border-color: var(--clr-ok); box-shadow: 0 0 0 1px color-mix(in srgb, var(--clr-ok) 50%, transparent); }
.st-lane-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; min-width: 0; }
.st-lane-swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; display: inline-block; vertical-align: middle; margin-right: 6px; }
.st-lane-head .st-lane-swatch { margin-right: 0; }
.st-lane-badge { font-size: 8.5px; font-weight: 800; letter-spacing: .09em; padding: 2.5px 7px; border-radius: 4px; flex: 0 0 auto; }
.st-lane-badge.human { background: var(--clr-accent-bg); color: var(--clr-accent); }
.st-lane-badge.ai { background: color-mix(in srgb, var(--clr-indigo) 16%, transparent); color: var(--clr-indigo); }
.st-lane-badge.tuned { background: color-mix(in srgb, var(--clr-amber) 15%, transparent); color: var(--clr-amber); }
.st-lane-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-lane-sub { font-size: 10px; opacity: .55; font-weight: 400; }
.st-x { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 3px 5px; border-radius: 6px; flex: 0 0 auto; }
.st-x:hover { color: var(--clr-error); background: color-mix(in srgb, var(--clr-error) 8%, transparent); }
.st-lane-sub-row { display: flex; align-items: center; gap: 11px; margin-top: 8px; font-size: 11.5px; color: var(--text-muted); flex-wrap: wrap; }
.st-lane-moments { margin-left: auto; display: inline-flex; gap: 5px; }
.st-mom { background: transparent; border: 1px solid var(--border); border-radius: 7px; cursor: pointer; font-size: 12px; padding: 2px 8px; font-family: inherit; }
.st-mom.good { color: var(--clr-amber); border-color: color-mix(in srgb, var(--clr-amber) 35%, transparent); }
.st-mom.good:hover { background: color-mix(in srgb, var(--clr-amber) 10%, transparent); }
.st-mom.bad { color: var(--clr-error); border-color: color-mix(in srgb, var(--clr-error) 35%, transparent); }
.st-mom.bad:hover { background: color-mix(in srgb, var(--clr-error) 10%, transparent); }
.st-lane-actions { display: flex; align-items: center; gap: 7px; margin-top: 10px; flex-wrap: wrap; }
.st-lane-actions .x-btn.on { border-color: var(--clr-accent); color: var(--text-primary); background: var(--clr-accent-bg); }
.st-vote { border-color: color-mix(in srgb, var(--clr-ok) 50%, transparent) !important; color: var(--clr-ok) !important; }
.st-vote:hover { background: color-mix(in srgb, var(--clr-ok) 10%, transparent) !important; }

/* blind-test masking */
.st-mask { display: none; font-weight: 800; letter-spacing: .06em; }
.st-stage.blind .st-ident { display: none; }
.st-stage.blind .st-mask { display: inline; }

/* tune panel */
.st-tune { margin-top: 11px; border-top: 1px dashed var(--border); padding-top: 11px; display: grid; gap: 9px; }
.st-tune[hidden] { display: none; }
.st-tune-row label { display: block; font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; font-weight: 600; }
.st-tune-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.st-tune-hint { font-size: 10.5px; color: var(--text-muted); }
.st-tune-foot .x-btn--primary { margin-left: auto; }
.st-prof-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.st-prof-lbl { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.st-prof-chip { background: var(--surface-1); border: 1px solid var(--border); color: var(--text-secondary); border-radius: 99px; padding: 3px 11px; font-size: 11.5px; cursor: pointer; font-family: inherit; }
.st-prof-chip:hover { border-color: var(--clr-accent); color: var(--text-primary); }
.st-profile-info { margin-top: 4px; font-size: 11.5px; color: var(--text-muted); }
.st-profile-info summary { cursor: pointer; font-weight: 600; color: var(--text-secondary); list-style-position: inside; }
.st-profile-info div { margin-top: 6px; line-height: 1.55; max-width: 720px; }

/* +lane picker popover */
.st-picker { position: absolute; right: 0; top: calc(100% + 8px); z-index: var(--z-layer); width: 320px; background: var(--surface-elevated); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.55); overflow: hidden; }
.st-pick-list { max-height: 380px; overflow-y: auto; padding: 6px; scrollbar-width: thin; }
.st-pick-item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: transparent; border: none; color: var(--text-primary); font-family: inherit; padding: 9px 11px; border-radius: 9px; cursor: pointer; }
.st-pick-item:hover { background: var(--surface-2); }
.st-pick-item:disabled { opacity: .4; cursor: default; }
.st-pick-title { font-size: 13px; font-weight: 600; }
.st-pick-sub { font-size: 11px; color: var(--text-muted); }
.st-pick-sep { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); padding: 9px 11px 4px; font-weight: 700; }
.st-pick-empty { padding: 14px; color: var(--text-muted); font-size: 12.5px; }

/* metrics + section titles */
.st-sec-title { font-size: 12px; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 800; color: var(--text-muted); margin: 18px 0 10px; }
.st-sec-title .count { text-transform: none; letter-spacing: 0; font-weight: 400; }
.st-metrics .st-lane-swatch { margin-right: 6px; }
.st-mcol { white-space: nowrap; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.st-band { font-variant-numeric: tabular-nums; color: var(--text-secondary); font-size: 12px; }
.st-band-rng { opacity: .6; }
.st-val { font-variant-numeric: tabular-nums; }
.st-val.st-off { color: var(--clr-amber); }
.st-val.st-off::after { content: ' ●'; font-size: 8px; vertical-align: 2px; }

/* moments */
.st-mom-bar { margin-bottom: 8px; }
.st-mom-note { width: 100%; max-width: 520px; background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; font-size: 12.5px; font-family: inherit; }
.st-mom-note:focus { outline: none; border-color: color-mix(in srgb, var(--clr-amber) 50%, transparent); }
.st-mom-list { display: flex; flex-direction: column; gap: 4px; }
.st-mom-item { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-bg); cursor: pointer; font-size: 12.5px; }
.st-mom-item:hover { border-color: color-mix(in srgb, var(--clr-amber) 40%, transparent); }
.st-mom-item.bad { background: color-mix(in srgb, var(--clr-error) 6%, transparent); border-color: color-mix(in srgb, var(--clr-error) 28%, transparent); }
.st-mom-star { color: var(--clr-amber); }
.st-mom-x { color: var(--clr-error); }
.st-mom-time { color: var(--text-secondary); flex: 0 0 auto; }
.st-mom-text { flex: 1; min-width: 0; }
.st-mom-run { color: var(--text-muted); font-size: 10.5px; }

/* palette badge */
.st-pal-badge { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 2px 9px 2px 5px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary); font-size: 11px; text-decoration: none; vertical-align: middle; }
.st-pal-badge:hover { color: var(--text-primary); border-color: var(--border-strong); }
.st-pal-dots { display: inline-flex; gap: 2px; }
.st-pal-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--border-strong); }

/* empty state */
.st-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 16px; color: var(--text-muted); text-align: center; }
.st-empty .ic { font-size: 30px; opacity: .6; }

/* profile-save dialog */
.st-dialog-root { position: fixed; inset: 0; z-index: var(--z-dialog); }
.st-dialog-backdrop { position: absolute; inset: 0; background: var(--scrim); backdrop-filter: blur(6px); }
.st-dialog { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); width: min(480px, calc(100vw - 32px)); background: var(--surface-elevated); border: 1px solid var(--border-strong); border-radius: 16px; padding: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.st-dialog-title { font-size: 15px; font-weight: 800; margin-bottom: 10px; }
.st-dialog-vals { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.st-dialog-lbl { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-secondary); margin: 10px 0 4px; }
.st-req { color: var(--clr-accent); }
.st-dialog-input { width: 100%; background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; font-size: 13px; font-family: inherit; }
.st-dialog-input:focus { outline: none; border-color: var(--clr-accent); }
.st-dialog-input.st-invalid { border-color: var(--clr-error); }
.st-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* fullscreen stage view */
.st-fs-root { position: fixed; inset: 0; z-index: var(--z-dialog); background: var(--app-bg); display: flex; flex-direction: column; }
.st-fs-head { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.st-fs-title { font-size: 12px; text-transform: uppercase; letter-spacing: 1.6px; font-weight: 800; color: var(--text-muted); }
.st-fs-track { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.st-fs-hint { margin-left: auto; font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.st-fs-close { background: var(--surface-1); border: 1px solid var(--border); color: var(--text-secondary); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 14px; flex: 0 0 auto; }
.st-fs-close:hover { color: var(--text-primary); border-color: var(--border-strong); }
.st-fs-lanes { flex: 1; min-height: 0; display: grid; gap: 12px; padding: 14px 16px; overflow-y: auto; align-content: stretch; }
.st-fs-lane { display: flex; flex-direction: column; min-height: 120px; min-width: 0; background: var(--panel-bg); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 9px 11px 11px; }
.st-fs-lane.st-dim { opacity: .35; }
.st-fs-lane-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; min-width: 0; }
.st-fs-lane-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-fs-stage { flex: 1; min-height: 80px; border-radius: 10px; overflow: hidden; background: var(--app-bg); border: 1px solid var(--border-strong); }
.st-fs-stage canvas { width: 100%; height: 100%; display: block; }
.st-fs-deck { flex: 0 0 auto; max-height: 46vh; overflow-y: auto; padding: 0 16px 14px; }
.st-fs-deck .deck { border-radius: var(--radius-card); }

/* mobile: use full width, wrap the deck head + stage controls, no body h-scroll */
@media (max-width: 640px) {
  .st-head { flex-wrap: wrap; }
  .st-switch { order: 3; margin-left: 0; max-width: none; width: 100%; }
  .st-stage { grid-template-columns: 1fr; }
  .st-stage-right { width: 100%; margin-left: 0; }
  .st-pixels { flex: 1; width: auto; }
  .deck-hint { display: none; }
  .st-fs-lanes { grid-template-columns: 1fr !important; }
}

/* ─── Custom dropdown (x-dropdown) — replaces every native <select> ─────────
   Trigger reuses the .x-select box (bg/border/radius/padding) so it lines up
   with .x-input siblings; this element rule only adds layout + chevron. The
   listbox popover lives in the shared layer stack (see ui/dropdown.js). */
x-dropdown {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none; position: relative;
  min-height: 38px; box-sizing: border-box;
}
x-dropdown > option { display: none; }            /* raw source, never shown */
x-dropdown[disabled] { cursor: default; opacity: .55; pointer-events: none; }
x-dropdown:focus { outline: none; }
x-dropdown:focus-visible {
  outline: 2px solid var(--clr-accent); outline-offset: 1px;
  border-color: var(--clr-accent);
}
.x-dd-cur { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px; }
.x-dd-ico { width: 16px; height: 16px; flex-shrink: 0; color: var(--clr-accent); }
.x-dd-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; }
.x-dd-lbl.is-ph { color: var(--text-hint); }
.x-dd-chev { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-secondary); transition: transform .18s ease; }
x-dropdown[aria-expanded="true"] .x-dd-chev { transform: rotate(180deg); }

/* Listbox popover — desktop: anchored floating card; positioned inline by JS. */
.x-dd-panel {
  position: fixed; pointer-events: auto;
  min-width: 180px; max-width: min(420px, calc(100vw - 16px));
  max-height: min(340px, 62vh); overflow-y: auto;
  padding: 6px; box-sizing: border-box;
  background: var(--surface-overlay);
  border: 1px solid var(--border-medium); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,.34);
  animation: ddIn .16s cubic-bezier(.2,.7,.3,1);
}
@keyframes ddIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.x-dd-panel.is-up { animation-name: ddInUp; }
@keyframes ddInUp { from { opacity: 0; transform: translateY(6px) scale(.98); } }

.x-dd-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 10px; cursor: pointer;
  font-size: 14px; color: var(--text-primary);
  scroll-margin: 6px;
}
.x-dd-opt:hover { background: var(--surface-hover); }
.x-dd-opt:focus { outline: none; background: var(--surface-active); }
.x-dd-opt.is-sel { background: var(--clr-accent-bg); color: var(--text-primary); }
.x-dd-opt.is-dis { opacity: .4; cursor: default; }
.x-dd-oico { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-secondary); }
.x-dd-opt.is-sel .x-dd-oico { color: var(--clr-accent); }
.x-dd-oico--sp { display: inline-block; }
.x-dd-otxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.x-dd-olbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-dd-osub { font-size: 11.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-dd-ochk { width: 16px; flex-shrink: 0; display: inline-flex; color: var(--clr-accent); }
.x-dd-ochk .lucide { width: 16px; height: 16px; }

/* Mobile: full-width bottom sheet, no horizontal body overflow. */
.x-dd-panel--sheet {
  left: 0; right: 0; bottom: 0; top: auto;
  min-width: 0; max-width: none; width: 100vw;
  max-height: 70vh;
  padding: 8px 8px calc(10px + env(safe-area-inset-bottom));
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  animation-name: ddSheetIn;
}
@keyframes ddSheetIn { from { opacity: 0; transform: translateY(40px); } }
.x-dd-panel--sheet .x-dd-opt { padding: 13px 12px; }

/* --- AI agents: roster chips, activity timeline, memory cards --- */
.ag-roster { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ag-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px 4px 4px; border-radius: 999px;
  border: 1px solid var(--border-light); background: var(--surface-2);
  font-size: 13px; color: var(--text-soft);
}
.ag-chip .avatar { width: 24px; height: 24px; font-size: 11px; cursor: default; }
.ag-chip.is-active { border-color: var(--clr-accent-bd); background: var(--clr-accent-bg); color: var(--text-bright); }

.ag-tl { margin-top: 10px; }
.ag-tl-item { display: grid; grid-template-columns: 18px 1fr; gap: 12px; }
.ag-tl-rail { position: relative; display: flex; justify-content: center; }
.ag-tl-rail::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; transform: translateX(-50%); background: var(--border-light);
}
.ag-tl-item:first-child .ag-tl-rail::before { top: 8px; }
.ag-tl-item:last-child .ag-tl-rail::before { bottom: calc(100% - 12px); }
.ag-tl-dot {
  position: relative; z-index: 1; margin-top: 5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--text-secondary); box-shadow: 0 0 0 3px var(--surface-elevated);
}
.ag-tl-dot--ok { background: var(--clr-ok); }
.ag-tl-dot--info { background: var(--clr-info); }
.ag-tl-dot--warn { background: var(--clr-amber); }
.ag-tl-dot--crit { background: var(--clr-error); }
.ag-tl-dot--accent { background: var(--clr-accent); }
.ag-tl-body { padding-bottom: 14px; min-width: 0; }
.ag-tl-body .ev-detail { overflow-wrap: anywhere; }

.ag-mem { display: flex; flex-direction: column; gap: 8px; }
.ag-mem .avatar { cursor: default; }
.ag-mem-text {
  margin: 0; padding: 12px; border-radius: var(--radius-card);
  background: var(--surface-sunken); border: 1px solid var(--border-subtle);
  font-size: 12.5px; line-height: 1.55; color: var(--text-soft);
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow: auto;
}