/* Nori Portal – Dark Theme v6 (cleaned) */

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

:root {
  --bg:             #0c0f15;
  --surface:        #131820;
  --surface-2:      #1a1f2a;
  --border:         #222938;
  --border-strong:  #333d50;
  --primary:        #6aa6ff;
  --primary-dim:    rgba(106,166,255,.08);
  --primary-hover:  #5a96ef;
  --text:           #dfe5ef;
  --text-muted:     #8290a4;
  --text-subtle:    #525d6e;
  --hover:          #1c2338;
  --radius:         10px;
  --radius-sm:      6px;
  --shadow-sm:      0 1px 4px rgba(0,0,0,.3);
  --shadow:         0 2px 10px rgba(0,0,0,.4);
  --shadow-lg:      0 8px 24px rgba(0,0,0,.5);
  --header-height:  44px;

  /* Status */
  --ok:            rgba(74,222,128,.1);  --ok-text:      #4ade80; --ok-border:     rgba(74,222,128,.25);
  --warn:          rgba(251,191,36,.1);  --warn-text:    #fbbf24; --warn-border:   rgba(251,191,36,.25);
  --err:           rgba(248,113,113,.1); --err-text:     #f87171; --err-border:    rgba(248,113,113,.25);
  --idle:          rgba(154,160,166,.08);--idle-text:    #9aa0a6; --idle-border:   rgba(154,160,166,.2);
  --partial:       rgba(251,146,60,.1);  --partial-text: #fb923c; --partial-border:rgba(251,146,60,.25);
  --conflict:      rgba(244,63,94,.1);   --conflict-text:#f43f5e; --conflict-border:rgba(244,63,94,.25);
}

body {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  overflow: hidden;
  display: flex;
  -webkit-font-smoothing: antialiased;
}

/* ── App Shell ── */
#app-shell {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* ── Sidebar ── */
#sidebar {
  width: 200px;
  flex-shrink: 0;
  background: #090c12;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-brand {
  padding: 18px 18px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.logo-icon {
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(106,166,255,.35));
}
.logo {
  font-size: 17px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -.4px;
}

.env-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  background: var(--primary-dim);
  color: var(--primary);
  padding: 2px 7px;
  border-radius: 99px;
  border: 1px solid rgba(106,166,255,.3);
}

.sidebar-nav {
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.sidebar-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--text-subtle);
  padding: 10px 10px 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  width: 100%;
  text-align: left;
  transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--hover); color: var(--text); }
.nav-item-active {
  background: var(--primary-dim);
  color: var(--primary);
  font-weight: 600;
}
.nav-item svg { flex-shrink: 0; opacity: .7; }
.nav-item-active svg { opacity: 1; }

.nav-update-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--err-text);
  box-shadow: 0 0 5px rgba(248,113,113,.55);
  flex-shrink: 0;
  margin-left: auto;
}

.sidebar-spacer { flex: 1; }

.tab-panel-hidden { display: none; }

/* ── Content area ── */
#content {
  flex: 1;
  height: 100vh;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Topbar ── */
#topbar {
  height: var(--header-height);
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 16px;
}

#topbar-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.1px;
}

#system-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 18px 0 24px;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  color: #c8d1dc;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.status-chip .label {
  font-weight: 600;
  color: #eef3f8;
  letter-spacing: 0.03em;
}

.status-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
  box-shadow: 0 0 8px rgba(0,0,0,0.25);
}

.status-chip .dot.ok {
  background: #22c55e;
  box-shadow: 0 0 10px rgba(34,197,94,0.45);
}

.status-chip .dot.bad {
  background: #ef4444;
  box-shadow: 0 0 10px rgba(239,68,68,0.35);
}

/* AI-WF-015: 4-state semantic dots */
.status-chip .dot-ok      { background: #22c55e; box-shadow: 0 0 10px rgba(34,197,94,0.50); }
.status-chip .dot-active  { background: #f59e0b; box-shadow: 0 0 10px rgba(245,158,11,0.55); }
.status-chip .dot-error   { background: #ef4444; box-shadow: 0 0 10px rgba(239,68,68,0.55); }
.status-chip .dot-unknown { background: #94a3b8; box-shadow: 0 0 6px rgba(148,163,184,0.35); }
.status-chip-active { animation: status-chip-pulse 1.6s ease-in-out infinite; }
@keyframes status-chip-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
  50%     { box-shadow: 0 0 0 3px rgba(245,158,11,0.18); }
}

.status-chip .metric {
  color: #9fb0c3;
}

.status-chip .metric strong {
  color: #f3f7fb;
  font-weight: 600;
}

/* ── Main layout ── */
main {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;   /* CSS spec: overflow-y:auto implicitly sets overflow-x:auto;
                           override explicitly to prevent outer horizontal scrollbar */
  padding: 28px;
  display: grid;
  gap: 24px;
  scrollbar-width: thin;
  scrollbar-color: #2c3649 #07090e;
}
main::-webkit-scrollbar              { width: 6px; }
main::-webkit-scrollbar-track        { background: #07090e; }
main::-webkit-scrollbar-thumb        { background: #2c3649; border-radius: 3px; }
main::-webkit-scrollbar-thumb:hover  { background: #3d4f68; }

/* Grid items in main — default min-width:auto can inflate the grid column.
   min-width:0 allows grid items to shrink to column width without leaking. */
.tab-panel {
  min-width: 0;
}

/* ── Card ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.card:hover {
  border-color: var(--border-strong);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.card-title {
  font-weight: 600;
  font-size: 18px;
  color: var(--text);
  letter-spacing: -.2px;
}

.card-body {
  padding: 20px;
}

.card-body-flush {
  padding: 0;
  overflow: hidden;
  border-radius: 0 0 var(--radius) var(--radius);
}

/* ── Status badge ── */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: .3px;
  border: 1px solid transparent;
}
.badge-ok      { background: var(--ok);      color: var(--ok-text);      border-color: var(--ok-border); }
.badge-warn    { background: var(--warn);    color: var(--warn-text);    border-color: var(--warn-border); }
.badge-err     { background: var(--err);     color: var(--err-text);     border-color: var(--err-border); }
.badge-idle    { background: var(--idle);    color: var(--idle-text);    border-color: var(--idle-border); }
.badge-partial { background: var(--partial); color: var(--partial-text); border-color: var(--partial-border); }
.badge-conflict{ background: var(--conflict);color: var(--conflict-text);border-color: var(--conflict-border); }
.badge-deploying{ background: var(--primary-dim); color: var(--primary); border-color: rgba(106,166,255,.3); }

/* ── Placeholder ── */
.placeholder {
  text-align: center;
  color: var(--text-subtle);
  padding: 40px 0;
  font-size: 14px;
  font-weight: 500;
}

/* ── Buttons ── */
.btn-secondary {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.btn-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-dim);
}

/* Keep btn-refresh as alias for download links (VPN) */
.btn-refresh {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.btn-refresh:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-dim);
}

.btn-action {
  background: var(--primary);
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
  font-family: inherit;
  box-shadow: 0 1px 4px rgba(106,166,255,.25);
}
.btn-action:hover {
  background: var(--primary-hover);
  box-shadow: 0 4px 12px rgba(106,166,255,.3);
}
.btn-action:disabled {
  background: var(--border-strong);
  box-shadow: none;
  cursor: not-allowed;
  opacity: .5;
}

/* keep btn-deploy as alias */
.btn-deploy {
  background: var(--primary);
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
  font-family: inherit;
  box-shadow: 0 1px 4px rgba(106,166,255,.25);
}
.btn-deploy:hover {
  background: var(--primary-hover);
  box-shadow: 0 4px 12px rgba(106,166,255,.3);
}
.btn-deploy:disabled {
  background: var(--border-strong);
  box-shadow: none;
  cursor: not-allowed;
  opacity: .5;
}

/* ── Releases Workflow Hint ── (NORI-PORTAL-RELEASES-CLEANUP-GIT-DEPLOY-001) */
.releases-workflow-hint {
  margin: 10px 12px 4px;
  padding: 10px 13px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
}
.releases-workflow-hint__title {
  font-weight: 600;
  color: var(--text);
  letter-spacing: .02em;
}
.releases-workflow-hint__body {
  flex: 1 1 220px;
  min-width: 0;
}
.releases-workflow-hint__body strong {
  color: var(--text);
  font-weight: 600;
}
.releases-workflow-hint__cmd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: var(--text-subtle);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  white-space: nowrap;
}

/* ── Deploy Banner ── */
.deploy-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--warn);
  color: var(--warn-text);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-sm);
  padding: 9px 13px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 16px;
}

.release-running {
  font-size: 12px;
  color: var(--warn-text);
  font-weight: 500;
  margin-top: 2px;
}

.btn-remove {
  margin-top: 8px;
  background: none;
  border: 1px solid var(--conflict-border);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--conflict-text);
  cursor: pointer;
  transition: background .15s;
  font-family: inherit;
}
.btn-remove:hover { background: var(--conflict); }

/* ── Agent Stats Row ── */
.agent-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.agent-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-sm);
}

.agent-stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-subtle);
}

.agent-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.5px;
  line-height: 1;
}

.agent-stat-ok  { color: var(--ok-text); }
.agent-stat-err { color: var(--err-text); }

/* ── Agent Table ── */
.agent-table-header {
  display: grid;
  grid-template-columns: 1fr 120px 130px 100px 80px 75px 48px 48px 32px 32px 90px;
  padding: 9px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: .6px;
  background: rgba(0,0,0,.12);
}

.agent-row {
  display: grid;
  grid-template-columns: 1fr 120px 130px 100px 80px 75px 48px 48px 32px 32px 90px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
  position: relative;
}
.agent-row::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: transparent;
  transition: background .12s;
}
.agent-row:last-child { border-bottom: none; }
.agent-row:hover { background: var(--hover); }
.agent-row:hover::before { background: var(--border-strong); }
.agent-row-selected { background: var(--primary-dim) !important; }
.agent-row-selected::before { background: var(--primary) !important; }
.agent-row-conflict { background: rgba(244,63,94,.06); }
.agent-row-conflict::before { background: var(--conflict-border); }

.agent-row-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
  overflow: hidden;
  padding-right: 12px;
  line-height: 1.35;
}
.agent-row-subid {
  font-weight: 400;
  font-size: 11px;
  color: var(--text-muted);
}

.agent-row-version {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11.5px;
  color: var(--text-muted);
}

.agent-row-status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
}

.agent-row-lastseen {
  font-size: 11.5px;
  color: var(--text-muted);
}

.agent-row-deploy {
  font-size: 11.5px;
}

.agent-row-metric {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  color: var(--text-muted);
}

.agent-row .dot.ok,
.detail-value .dot.ok {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,0.4);
}
.agent-row .dot.bad,
.detail-value .dot.bad {
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239,68,68,0.3);
}
.agent-row .dot:not(.ok):not(.bad),
.detail-value .dot:not(.ok):not(.bad) {
  background: var(--text-subtle, #666);
}

.agent-row-ip {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-row-pending {
  cursor: default;
}
.agent-row-pending:hover {
  background: var(--hover);
}
.agent-row-pending::before {
  background: var(--warn-border);
}

.badge-unassigned {
  background: var(--idle);
  color: var(--idle-text);
  border: 1px solid var(--idle-border);
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 2px 7px;
  white-space: nowrap;
}

.badge-assigned {
  background: var(--ok);
  color: var(--ok-text);
  border: 1px solid var(--ok-border);
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 2px 7px;
  white-space: nowrap;
}

.btn-assign {
  background: none;
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-sm);
  color: var(--warn-text);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s;
}
.btn-assign:hover { background: var(--warn); }
.btn-assign:disabled { opacity: .5; cursor: default; }

.pending-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--warn-text);
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 0 0 8px 0;
}

.btn-ping {
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  font-family: inherit;
}
.btn-ping:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-dim); }
.btn-ping:disabled { opacity: .5; cursor: default; }

.ping-result { font-size: 12px; }

/* ── Agent Detail View (in split panel) ── */

/* ── Agent Sequencer Zones ── */
.agent-zones {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
}
.agent-zone-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 10px;
  background: var(--warn);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-sm);
}
.agent-zone-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--warn-text);
  font-family: 'SF Mono', 'Fira Code', monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}

/* ── Status Dots ── */
.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot-ok      { background: var(--ok-text);      box-shadow: 0 0 0 3px rgba(74,222,128,.15); }
.status-dot-warn    { background: var(--warn-text);    box-shadow: 0 0 0 3px rgba(251,191,36,.15); }
.status-dot-err     { background: var(--err-text);     box-shadow: 0 0 0 3px rgba(248,113,113,.15); }
.status-dot-primary { background: var(--primary);      box-shadow: 0 0 0 3px var(--primary-dim); }
.status-dot-muted   { background: var(--text-subtle); }
.status-dot-conflict{ background: var(--conflict-text);box-shadow: 0 0 0 3px rgba(244,63,94,.15); }

/* ── Split Layout ── */
.split-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

.split-layout.split-active {
  grid-template-columns: 1fr 400px;
}

.split-main { min-width: 0; }

.split-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: calc(var(--header-height) + 36px);
  max-height: calc(100vh - var(--header-height) - 72px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2c3649 #07090e;
}
.split-panel::-webkit-scrollbar              { width: 6px; }
.split-panel::-webkit-scrollbar-track        { background: #07090e; }
.split-panel::-webkit-scrollbar-thumb        { background: #2c3649; border-radius: 3px; }
.split-panel::-webkit-scrollbar-thumb:hover  { background: #3d4f68; }

.panel-close-bar {
  display: flex;
  justify-content: flex-end;
}

.btn-panel-close {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .12s, color .12s;
  font-family: inherit;
}
.btn-panel-close:hover { background: var(--hover); color: var(--text); }

/* ── Detail Actions (in panel) ── */
.detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}

@media (max-width: 800px) {
  .split-layout.split-active {
    grid-template-columns: 1fr;
  }
  .split-panel {
    position: static;
    max-height: none;
  }
}

/* ── Releases ── */
.release-table-header {
  display: grid;
  grid-template-columns: 1fr 130px 110px 90px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.release-row {
  display: grid;
  grid-template-columns: 1fr 130px 110px 90px;
  align-items: center;
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
}
.release-row:last-child { border-bottom: none; }
.release-row:hover { background: var(--hover); }
.release-row-selected { background: var(--primary-dim) !important; }

.release-row-project {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  overflow: hidden;
  padding-right: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.release-row-title {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.release-detail-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 14px;
}

.release-notes {
  white-space: pre-wrap;
  line-height: 1.6;
  color: var(--text-muted);
}
.release-row-published {
  font-size: 12px;
  color: var(--text-muted);
}
.release-row-status { font-size: 12px; }

.release-tag {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  background: var(--primary-dim);
  color: var(--primary);
  padding: 1px 7px;
  border-radius: 99px;
  border: 1px solid rgba(106,166,255,.3);
}

/* ── Log entries ── */
.log-list {
  font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.7;
  background: #16171a;
  color: #e2e8f0;
  border: none;
  border-radius: var(--radius);
  padding: 14px 16px;
  max-height: 340px;
  overflow-y: auto;
}
.log-list-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  background: var(--surface-2);
  color: var(--text-muted);
}
.log-entry { display: flex; gap: 12px; align-items: baseline; }
.log-ts    { color: #4b5563; white-space: nowrap; }
.log-level { width: 40px; font-weight: 700; }
.log-level.INFO  { color: #60a5fa; }
.log-level.WARN  { color: #fbbf24; }
.log-level.ERROR { color: #f87171; }

/* ── VPN Clients ── */
.vpn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.vpn-row:last-child { border-bottom: none; }
.vpn-name {
  font-weight: 600;
  font-size: 14px;
  min-width: 140px;
  color: var(--text);
}
.btn-revoke {
  background: none;
  border: 1px solid var(--conflict-border);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--conflict-text);
  cursor: pointer;
  transition: background .15s;
  font-family: inherit;
}
.btn-revoke:hover { background: var(--conflict); }

/* ── Sequences ── */
/* ── Sequence Editor – DAW / Timeline Layout ── */

.seq-editor-shell {
  display: flex;
  height: 100%;
  overflow: hidden;
}

/* ── Library sidebar — fixed width, not resizable ── */
.seq-library {
  flex: 0 0 280px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0a0d14;
}
.seq-library-header {
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
}
.seq-library-title {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: .7px;
}
.seq-library-new-btn {
  font-size: 11px;
  font-family: inherit;
  line-height: normal;
  color: var(--primary);
  text-decoration: none;
  background: none;
  cursor: pointer;
  padding: 3px 8px;
  border: 1px solid rgba(106,166,255,.25);
  border-radius: var(--radius-sm);
  transition: background .12s;
}
.seq-library-new-btn:hover { background: var(--primary-dim); }

/* Search bar — reusable pattern for any library list panel */
.seq-library-search {
  padding: 6px 10px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.list-search-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,.045);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 11px;
  padding: 4px 8px;
  outline: none;
  transition: border-color .15s, background .15s;
}
.list-search-input::placeholder { color: var(--text-subtle); }
.list-search-input:focus {
  border-color: var(--primary);
  background: rgba(255,255,255,.07);
}
/* hide native × button in webkit — we rely on oninput for clearing */
.list-search-input::-webkit-search-cancel-button { display: none; }

#sequences-body { overflow-y: auto; flex: 1; }
#scenes-body    { overflow-y: auto; flex: 1; }

/* ── Scene editor ────────────────────────────────────────────────────── */
.scene-editor-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #090c12;
  overflow: hidden;
}
.scene-editor-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-subtle);
  font-size: 13px;
}
.scene-editor-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
/* Header row: name + zone inputs + save/delete buttons */
.scene-editor-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: #0a0d14;
  flex-shrink: 0;
}
.scene-editor-btns { display: flex; gap: 8px; }
/* Name/Zone field row for Scene editor */
.scene-fields-row {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: #0a0d14;
  flex-shrink: 0;
}
.scene-field-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.scene-field-item:last-child { flex: 0 0 160px; }
.scene-field-label {
  font-size: 11px;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Actions panel below the header */
.scene-actions-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.scene-actions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.scene-actions-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-subtle);
}
.scene-actions-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
/* One action row: num · device · action · value · remove */
.scene-action-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
}
.scene-action-num {
  font-size: 10px;
  color: var(--text-subtle);
  width: 16px;
  flex-shrink: 0;
  text-align: right;
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.scene-action-input {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12px;
  padding: 4px 8px;
  outline: none;
  font-family: 'SF Mono', 'Fira Code', monospace;
  transition: border-color .15s;
}
.scene-action-input:focus { border-color: var(--primary); }
/* Select-specific overrides */
select.scene-action-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  padding-right: 22px;
  cursor: pointer;
}
select.scene-action-input:focus { border-color: var(--primary); }
select.scene-action-input option { background: #111420; color: var(--text); }
/* Column widths */
.scene-action-device { width: 150px; flex-shrink: 0; }
.scene-action-act    { width: 140px; flex-shrink: 0; }
.scene-action-value  { flex: 1; min-width: 60px; }
.scene-action-remove {
  background: none;
  border: none;
  color: var(--text-subtle);
  cursor: pointer;
  padding: 2px 5px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
}
.scene-action-remove:hover { color: var(--err-text); background: var(--err); }
/* Small add button for scenes */
.btn-sm {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 11px;
  padding: 3px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, color .15s;
}
.btn-sm:hover { border-color: var(--primary); color: var(--primary); }

/* Library row — flex row: [indicator::before] [body flex:1] [actions flex-shrink:0] */
.seq-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
  position: relative;
  min-width: 0;
}
.seq-row::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: transparent;
  transition: background .12s;
}
.seq-row:last-child { border-bottom: none; }
.seq-row:hover { background: var(--hover); }
.seq-row:hover::before { background: var(--border-strong); }
.seq-row-selected { background: rgba(106,166,255,.08) !important; }
.seq-row-selected::before { background: var(--primary) !important; }
/* Name + meta stacked, takes remaining space, enables ellipsis */
.seq-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.seq-row-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seq-row-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-subtle);
  overflow: hidden;
  white-space: nowrap;
}
/* Action buttons pinned to the right, never wrap */
.seq-row-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  flex-wrap: nowrap;
  margin-left: 8px;
}

/* ── Editor area ── */
.seq-editor-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.seq-editor-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-subtle);
  font-size: 13px;
}
.seq-editor-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* ── Toolbar ── */
.seq-toolbar {
  height: 44px;
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border-bottom: none;    /* toolbar floats freely above the frame */
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
  background: transparent;  /* blends into the page bg, makes it feel detached */
  overflow: hidden;
}
.seq-toolbar-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.seq-toolbar-sep {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,.07);
  flex-shrink: 0;
}
/* Sequence name + inline action buttons */
.seq-toolbar-left {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}
.seq-name-actions {
  display: flex;
  gap: 1px;
  flex-shrink: 0;
}
/* Legacy icon-only button — kept for compatibility, replaced by seq-ctrl-btn */
.seq-name-btn {
  height: 26px;
  padding: 0 8px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-subtle);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background .12s, color .12s, border-color .12s;
  flex-shrink: 0;
  white-space: nowrap;
}
.seq-name-btn:hover { background: var(--hover); color: var(--text); border-color: var(--border-strong); }
.seq-name-btn.danger { color: var(--text-subtle); }
.seq-name-btn.danger:hover { background: rgba(239,68,68,.12); color: #ef4444; border-color: rgba(239,68,68,.35); }

/* ── Unified sequencer control button ── */
.seq-ctrl-btn {
  height: 26px;
  padding: 0 10px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-subtle);
  font-size: 11.5px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background .12s, color .12s, border-color .12s;
  flex-shrink: 0;
  white-space: nowrap;
  letter-spacing: .1px;
}
.seq-ctrl-btn:hover { background: var(--hover); color: var(--text); }
.seq-ctrl-btn:active { background: rgba(255,255,255,.08); }

/* Delete button */
.seq-ctrl-danger { color: var(--text-subtle); }
.seq-ctrl-danger:hover { background: rgba(239,68,68,.12) !important; color: #ef4444 !important; border-color: rgba(239,68,68,.35) !important; }

/* Loop toggle states */
.seq-ctrl-loop { min-width: 62px; justify-content: center; }
/* OFF — neutral gray (default .seq-ctrl-btn style) */
/* ×1 — green accent */
.seq-ctrl-loop.seq-loop-once {
  border-color: rgba(74,222,128,.4);
  color: #4ade80;
  background: rgba(74,222,128,.08);
}
.seq-ctrl-loop.seq-loop-once:hover { background: rgba(74,222,128,.14); }
/* ∞ — brighter green */
.seq-ctrl-loop.seq-loop-forever {
  border-color: rgba(74,222,128,.55);
  color: #22c55e;
  background: rgba(74,222,128,.12);
}
.seq-ctrl-loop.seq-loop-forever:hover { background: rgba(74,222,128,.2); }

/* ── Compact loop icon toggle (library row) ── */
.seq-loop-icon-btn {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-subtle);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .12s, color .12s, border-color .12s;
}
.seq-loop-icon-btn:hover {
  background: var(--hover);
  color: var(--text);
}
/* Loop ON = FOREVER — green */
.seq-loop-icon-btn.seq-loop-icon-on {
  color: #4ade80;
  border-color: rgba(74,222,128,.5);
  background: rgba(74,222,128,.08);
}
.seq-loop-icon-btn.seq-loop-icon-on:hover {
  background: rgba(74,222,128,.16);
}

/* Inline loop button in toolbar row (legacy alias) */
.seq-loop-btn-inline {
  height: 26px;
  padding: 0 10px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 11.5px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.seq-loop-btn-inline:hover { background: var(--hover); color: var(--text); }
.seq-loop-btn-inline.seq-loop-active {
  background: rgba(74,222,128,.1);
  border-color: rgba(74,222,128,.4);
  color: #4ade80;
}
.seq-toolbar-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}
.seq-toolbar-meta b { color: var(--text); font-weight: 600; }
.seq-toolbar-spacer { flex: 1; }
.seq-toolbar-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

/* Zoom controls */
.seq-zoom-ctrl {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.seq-zoom-btn {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s;
}
.seq-zoom-btn:hover { background: var(--hover); color: var(--text); }
.seq-zoom-level {
  font-size: 10.5px;
  color: var(--text-subtle);
  min-width: 34px;
  text-align: center;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

/* ── Main timeline row: gutter + viewport + inspector (flat layout) ──
   Replaces old seq-workspace + seq-tl-area nesting.
   This is the ONLY container that needs to grow vertically.
   seq-tl-viewport (inside) is the ONLY element that scrolls horizontally. */
.seq-main-row {
  flex: 1 1 0%;
  display: flex;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  margin: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px 8px 0 0;  /* flat bottom — runtime panel tiles below */
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.seq-tl-gutter {
  width: 160px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #0d1117;
  border-right: 1px solid var(--border);
}
.seq-tl-gutter-ruler {
  height: 28px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px 0 14px;
  gap: 4px;
}
.seq-tl-gutter-label {
  height: 120px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 11px;
  color: var(--text-subtle);
  font-family: 'SF Mono', 'Fira Code', monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(10,13,20,.6);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.seq-tl-viewport {
  flex: 1 1 0%;   /* flex-basis:0 so canvas width never inflates the parent */
  min-width: 0;
  overflow-x: scroll;   /* always reserve scrollbar space — prevents layout shift on zoom */
  overflow-y: hidden;
  background: #090c12;
  position: relative;
}

/* ── Timeline scrollbar — dark, integrated style ── */
#seq-timeline-outer {
  scrollbar-width: thin;                    /* Firefox */
  scrollbar-color: #2c3649 #07090e;         /* Firefox: thumb track */
}
#seq-timeline-outer::-webkit-scrollbar       { height: 6px; }
#seq-timeline-outer::-webkit-scrollbar-track { background: #07090e; border-top: 1px solid var(--border); }
#seq-timeline-outer::-webkit-scrollbar-thumb { background: #2c3649; border-radius: 3px; }
#seq-timeline-outer::-webkit-scrollbar-thumb:hover { background: #3d4f68; }


/* Timeline canvas — JS sets an explicit inline width (canvas.style.width) equal to
   the wrapper width so the scroll container always measures the true content width.
   min-width:100% is a CSS floor so a short sequence still fills the visible area.
   height:100% ensures no dead space below when content is shorter than the outer. */
.seq-timeline-canvas {
  min-width: 100%;
  height: 100%;
}

/* Ruler row — click to set insert position */
.seq-tl-ruler {
  display: flex;
  height: 28px;
  border-bottom: 1px solid var(--border);
  background: #0d1117;
  flex-shrink: 0;
  cursor: crosshair;   /* indicates: click here to place an insert marker */
}
.seq-tl-ruler-gutter {
  width: 160px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px 0 14px;
  gap: 4px;
}
.seq-tl-zone-lbl {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: .5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.seq-tl-zoom-ctrl {
  display: flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}
.seq-tl-zoom-btn {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s;
}
.seq-tl-zoom-btn:hover { background: var(--hover); color: var(--text); }
.seq-tl-zoom-pct {
  font-size: 10px;
  color: var(--text-subtle);
  min-width: 28px;
  text-align: center;
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.seq-tl-ruler-ticks {
  position: relative;
  flex: 1;
}
.seq-tl-tick {
  position: absolute;
  bottom: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  color: var(--text-subtle);
  font-size: 10px;
  pointer-events: none;
}
.seq-tl-tick::before {
  content: '';
  width: 1.5px;
  height: 8px;
  background: var(--border-strong);
  margin-bottom: 2px;
}

/* Track row — last row fills remaining height to avoid dead space */
.seq-tl-row {
  display: flex;
  min-height: 56px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.seq-tl-row:last-child { border-bottom: none; flex: 1; }

.seq-tl-row-label {
  width: 160px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 11px;
  color: var(--text-subtle);
  font-family: 'SF Mono', 'Fira Code', monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(10,13,20,.6);
}

/* Scrollable container for all lanes — ruler stays fixed above this.
   overflow-y:auto enables vertical scroll once multiple lanes are stacked. */
.seq-lanes-container {
  flex: 1;
  min-height: 0;    /* required so flex:1 works inside a flex column */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2c3649 #07090e;
}

/* Fixed-height lane row — each sequence gets exactly this vertical space.
   Stacking multiple .seq-tl-lane divs inside .seq-lanes-container gives
   the multi-lane layout. */
.seq-tl-lane {
  height: 120px;
  flex-shrink: 0;   /* never compress below 120px when container is short */
  position: relative;
  overflow: hidden;   /* hard-clip clips that would extend beyond lane width */
}

/* ── Timeline overlay — preview / hover layer ───────────────────────────
   Positioned absolute inside seq-tl-wrapper (position:relative), covering
   the full wrapper area. Shares the same left-coordinate space as the lane
   (_msToX values are identical). NOT clipped by seq-tl-lane's overflow:hidden.
   overflow is left at default (visible) so preview elements can reach past
   laneWidth when a clip is dragged beyond the frozen canvas edge.            */
.seq-tl-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 110;
}

/* Grid lines */
.seq-tl-gridline {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(255,255,255,.035);
  pointer-events: none;
}

/* Minor ruler ticks (0.5 s) — medium height */
.seq-tl-minor-tick {
  position: absolute;
  bottom: 4px;
  width: 1px;
  height: 6px;
  background: var(--border-strong);
  transform: translateX(-50%);
  pointer-events: none;
}

/* Micro ruler ticks (0.1 s) — shortest */
.seq-tl-micro-tick {
  position: absolute;
  bottom: 4px;
  width: 1px;
  height: 3px;
  background: var(--border);
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0.8;
}

/* Minor grid line (0.5 s) */
.seq-tl-gridline-minor {
  background: rgba(255,255,255,.018);
}

/* Micro grid line (0.1 s) — very subtle, only at high zoom */
.seq-tl-gridline-micro {
  background: rgba(255,255,255,.009);
}

/* Playhead */
.seq-playhead {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: rgba(255, 80, 80, 0.85);
  box-shadow: 0 0 6px rgba(255, 80, 80, 0.5);
  z-index: 20;
  pointer-events: none;
  transition: left .15s linear;
}
.seq-playhead::before {
  content: '';
  position: absolute;
  top: 0;
  left: -4px;
  border-style: solid;
  border-width: 6px 5px 0 5px;
  border-color: rgba(255,80,80,.85) transparent transparent transparent;
}

/* ── Clips ── */
.seq-clip {
  position: absolute;
  top: 7px; bottom: 7px;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
  user-select: none;
  transition: filter .1s;
  box-sizing: border-box;
}
.seq-clip:hover { filter: brightness(1.2); }

/* Draggable center body */
.seq-clip-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 6px;
  cursor: grab;
  overflow: hidden;
  min-width: 0;
}
.seq-clip-body:active { cursor: grabbing; }

/* Resize edge handles — double as start/end boundary markers */
.seq-clip-edge {
  width: 8px;
  flex-shrink: 0;
  cursor: ew-resize;
  background: transparent;
  transition: background .1s, border-color .1s;
  position: relative;
}
.seq-clip-edge-l { border-left: 2px solid rgba(255,255,255,.22); }
.seq-clip-edge-r { border-right: 2px solid rgba(255,255,255,.22); }
.seq-clip:hover .seq-clip-edge-l  { border-left-color: rgba(255,255,255,.5); }
.seq-clip:hover .seq-clip-edge-r  { border-right-color: rgba(255,255,255,.5); }
.seq-clip-selected .seq-clip-edge-l { border-left-color: var(--primary); }
.seq-clip-selected .seq-clip-edge-r { border-right-color: var(--primary); }
.seq-clip-edge:hover { background: rgba(255,255,255,.1); }
.seq-clip-selected {
  box-shadow: inset 0 0 0 2px var(--primary), 0 0 8px rgba(106,166,255,.2);
  filter: brightness(1.1);
}
.seq-clip.seq-clip-dragging {
  opacity: 0.35;
  z-index: 100;
  cursor: grabbing !important;
  pointer-events: none;
}

/* ── Ruler markers for selected clip ─────────────────────────────────── */
.seq-ruler-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  pointer-events: none;
  z-index: 10;
}
.seq-ruler-marker::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: var(--primary);
  transform: translateX(-50%);
  opacity: 0.85;
}
.seq-ruler-marker-lbl {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 9px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: var(--primary);
  white-space: nowrap;
  line-height: 1;
  pointer-events: none;
}

/* ── Insert marker — set by ruler click ──────────────────────────────── */
/* Lives inside .seq-tl-overlay (position:absolute relative to seq-tl-wrapper).
   Spans from top:0 (ruler row included) to bottom:0 so the line is visible
   both in the ruler and in the lane area. */
.seq-hover-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;           /* zero-width anchor — line and label rendered via children */
  pointer-events: none;
  z-index: 10;        /* within overlay stacking context — above grid lines (z:auto) */
}
/* Vertical insert line */
.seq-hover-marker::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;         /* center the 2px line on the marker position */
  width: 2px;
  background: rgba(255, 185, 50, 0.92);
  box-shadow: 0 0 8px rgba(255, 185, 50, 0.55);
}
/* Small downward triangle at the ruler bottom edge — marks insertion point */
.seq-hover-marker::after {
  content: '';
  position: absolute;
  top: 20px;          /* just below ruler text, within the ruler area */
  left: -5px;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: rgba(255, 185, 50, 0.92) transparent transparent transparent;
}
/* Time label — anchored in ruler area with dark backing */
.seq-hover-marker-lbl {
  position: absolute;
  top: 3px;
  left: 5px;
  font-size: 11px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: #ffd060;
  white-space: nowrap;
  line-height: 1;
  pointer-events: none;
  background: rgba(8, 10, 18, 0.92);
  border: 1px solid rgba(255, 185, 50, 0.3);
  padding: 2px 6px;
  border-radius: 4px;
}
/* Tracking mode: brighter line + label border */
.seq-hover-marker-active::before {
  background: rgba(255, 185, 50, 1);
  box-shadow: 0 0 10px rgba(255, 185, 50, 0.7);
}
.seq-hover-marker-active .seq-hover-marker-lbl {
  color: #ffe090;
  border-color: rgba(255, 185, 50, 0.6);
}

/* ── Insert / docking preview ────────────────────────────────────────── */
/* Lives inside .seq-tl-overlay.
   top  = ruler(28px) + clip-top-margin(7px) = 35px
   height = lane(120px) - clip-margins(7+7) = 106px
   Fixed height prevents the preview from stretching when the overlay is
   taller than the lane (wrapper has min-height:100%). */
.seq-insert-preview {
  position: absolute;
  top: 35px;
  height: 106px;
  border-radius: 4px;
  background: rgba(99,102,241,.18);
  border: 1px solid rgba(99,102,241,.5);
  pointer-events: none;
  z-index: 90;
  box-shadow: 0 0 10px rgba(99,102,241,.25);
}

/* ── Snap indicator ───────────────────────────────────────────────────── */
/* Thin amber line shown at the neighbour edge when a step snaps to it.
   Positioned over the lane area only (not the ruler). */
.seq-snap-line {
  position: absolute;
  top: 28px;         /* start at lane top (below ruler) */
  height: 120px;     /* exact lane height */
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255, 185, 50, 0.9);
  box-shadow: 0 0 8px rgba(255, 185, 50, 0.6);
  pointer-events: none;
  z-index: 95;
}
.seq-clip.seq-clip-will-shift {
  outline: 1px dashed rgba(255,180,60,.55);
  filter: brightness(0.75);
  transition: filter .1s;
}

/* Runtime step states — override clip variant backgrounds */
.seq-clip.seq-running {
  background: linear-gradient(135deg, #0d2a4a 0%, #1040a0 100%) !important;
  border-color: rgba(80,160,255,.7) !important;
  box-shadow: 0 0 0 2px rgba(80,160,255,.25), 0 0 12px rgba(80,160,255,.3) !important;
  animation: seq-running-pulse 1.4s ease-in-out infinite;
}
@keyframes seq-running-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(80,160,255,.25), 0 0 10px rgba(80,160,255,.25); }
  50%       { box-shadow: 0 0 0 3px rgba(80,160,255,.45), 0 0 20px rgba(80,160,255,.45); }
}
.seq-clip.seq-done {
  background: linear-gradient(135deg, #0d2a1a 0%, #154a20 100%) !important;
  border-color: rgba(74,222,128,.45) !important;
  opacity: .82;
}

/* Clip variants */
.seq-clip-default {
  background: linear-gradient(135deg, #1a2640 0%, #1e2d4a 100%);
  border: 1px solid rgba(106,166,255,.18);
}
.seq-clip-wait {
  background: linear-gradient(135deg, #0f2235 0%, #133050 100%);
  border: 1px solid rgba(56,140,200,.2);
  border-style: dashed;
}
.seq-clip-action {
  background: linear-gradient(135deg, #1e1535 0%, #271945 100%);
  border: 1px solid rgba(150,100,255,.22);
}

.seq-clip-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.seq-clip-sub {
  font-size: 10px;
  color: var(--text-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.seq-clip-pills {
  display: flex;
  gap: 3px;
  margin-top: 2px;
  overflow: hidden;
}
.seq-clip-pill {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255,255,255,.07);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Inspector panel ── always visible, fixed width, never collapses */
.seq-inspector {
  width: 256px;
  min-width: 200px;
  max-width: 400px;
  flex-shrink: 0;
  border-left: 1px solid rgba(255,255,255,.06);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.seq-inspector-header {
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: .6px;
  background: rgba(0,0,0,.2);
  position: sticky;
  top: 0;
}
.seq-inspector-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-subtle);
  font-size: 12px;
}
.seq-inspector-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.seq-inspector-field { display: flex; flex-direction: column; gap: 4px; }
.seq-inspector-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.seq-inspector-value {
  font-size: 12.5px;
  color: var(--text);
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.seq-insp-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  padding: 4px 8px;
  box-sizing: border-box;
  outline: none;
  transition: border-color .12s;
}
.seq-insp-input:focus { border-color: var(--primary); }
.seq-insp-input[type=number] { -moz-appearance: textfield; }
.seq-insp-input[type=number]::-webkit-inner-spin-button { opacity: 0.5; }
.seq-inspector-action {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 3px;
  font-size: 11.5px;
}
.seq-action-num {
  color: var(--text-subtle);
  font-size: 11px;
  min-width: 16px;
  flex-shrink: 0;
}
.seq-action-lbl {
  color: var(--text);
  font-family: 'SF Mono', 'Fira Code', monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.seq-action-params {
  color: var(--text-subtle);
  font-size: 10.5px;
  flex-shrink: 0;
}
.seq-action-ord {
  display: flex;
  gap: 1px;
  flex-shrink: 0;
  align-items: center;
}
.seq-action-ord-btn {
  background: none;
  border: none;
  color: var(--text-subtle);
  font-size: 9px;
  padding: 1px 2px;
  cursor: pointer;
  border-radius: 3px;
  line-height: 1;
}
.seq-action-ord-btn:hover { background: var(--hover); color: var(--text); }
.seq-action-ord-ph {
  display: inline-block;
  width: 16px;
}
.seq-insp-param {
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.seq-insp-kv {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 4px;
  font-size: 11.5px;
}
.seq-insp-k { color: var(--text-subtle); }
.seq-insp-v { color: var(--text); font-family: 'SF Mono', 'Fira Code', monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Runtime log panel ── */
.seq-runtime-panel {
  height: 138px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #07090e;
  margin: 0 10px 10px;          /* inset to match workspace frame */
  border: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  border-top: none;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.seq-runtime-header {
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.seq-runtime-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: .7px;
}
.seq-runtime-log {
  flex: 1;
  overflow-y: auto;
  padding: 3px 0;
}
.seq-log-row {
  display: grid;
  grid-template-columns: 130px 42px 1fr;
  gap: 6px;
  padding: 1px 12px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10.5px;
  line-height: 1.6;
}
.seq-log-ts    { color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seq-log-level { font-weight: 700; }
.seq-log-msg   { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seq-log-level-INFO  { color: var(--text-subtle); }
.seq-log-level-WARN  { color: var(--warn-text); }
.seq-log-level-ERROR { color: var(--err-text); }

/* ── File Drop Zone ── */
.file-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  margin-top: 6px;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  padding: 12px 16px;
  text-align: center;
}
.file-drop:hover, .file-drop-over {
  border-color: var(--primary);
  background: var(--primary-dim);
  color: var(--primary);
}

.publish-hash {
  margin-top: 8px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  color: var(--text-muted);
  word-break: break-all;
}

/* ── Node Editor Workspace ── */
.ne-workspace {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-height) - 56px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.ne-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  height: 46px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.ne-toolbar-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.ne-toolbar-sep {
  width: 1px;
  height: 16px;
  background: var(--border);
}

.ne-toolbar-sub {
  font-size: 12px;
  color: var(--text-muted);
}

.ne-toolbar-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.ne-main {
  display: grid;
  grid-template-columns: 1fr 260px;
  flex: 1;
  min-height: 0;
}

.ne-canvas {
  position: relative;
  overflow: hidden;
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 28px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ne-canvas-hint {
  color: var(--text-subtle);
  font-size: 13px;
  font-weight: 500;
  user-select: none;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ne-canvas-hint svg { opacity: .25; }

.ne-inspector {
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
}

.ne-inspector-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-subtle);
  background: var(--surface-2);
  flex-shrink: 0;
}

.ne-inspector-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ne-inspector-empty {
  color: var(--text-subtle);
  font-size: 12px;
  text-align: center;
  padding: 20px 0;
}

.ne-inspector-prop {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ne-inspector-prop-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-subtle);
}

.ne-inspector-prop-value {
  font-size: 12px;
  color: var(--text-muted);
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.ne-bottombar {
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  height: 160px;
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
}

.ne-bottombar-tabs {
  display: flex;
  align-items: flex-end;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 4px;
}

.ne-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 7px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  margin-bottom: -1px;
  transition: color .12s, border-color .12s;
}

.ne-tab:hover { color: var(--text); }
.ne-tab-active { color: var(--primary); border-bottom-color: var(--primary); }

.ne-bottombar-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px;
  font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.65;
}

.ne-log-empty {
  color: var(--text-subtle);
  font-style: italic;
  padding: 6px 0;
}

/* ── Node Editor Placeholder (legacy, kept for nodes.html link) ── */
.node-editor-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 500;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.node-editor-chip .chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

/* ── Dashboard Placeholder ── */
.dashboard-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* ── Settings Placeholder ── */
.settings-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* ── Modal ── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 400px;
  max-width: calc(100vw - 32px);
  /* NORI-PORTAL-DEPLOY-JOB-MODAL-COMPACT-SCROLL-001: flex column so a long
     body scrolls inside the card while header + footer stay anchored. */
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
  overflow: hidden;
  border: 1px solid var(--border);
}
.modal-header,
.modal-footer { flex: 0 0 auto; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.modal-title {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.1px;
  color: var(--text);
}

.modal-close {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background .12s, color .12s;
}
.modal-close:hover { background: var(--hover); color: var(--text); }

.modal-body    {
  padding: 24px;
  /* NORI-PORTAL-DEPLOY-JOB-MODAL-COMPACT-SCROLL-001 */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.modal-footer  {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  background: var(--surface-2);
}

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  letter-spacing: .1px;
}

.form-input {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(106,166,255,.15);
}

/* ── Log agent grouping ── */
.log-agent-block {
  margin-bottom: 16px;
}
.log-agent-block:last-child {
  margin-bottom: 0;
}
.log-agent-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.log-agent-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  font-family: 'SF Mono', 'Fira Code', monospace;
  flex: 1;
}
.log-agent-block .log-list {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* ── Footer ── */
footer {
  text-align: center;
  color: var(--text-subtle);
  font-size: 13px;
  padding: 32px 0 44px;
  font-weight: 500;
}

/* ── Agent Detail View ── */

.detail-back-bar {
  margin-bottom: 22px;
}

.btn-back {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.btn-back:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-dim);
}

#agent-detail-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.detail-meta {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.detail-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.detail-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  min-width: 88px;
  flex-shrink: 0;
}

.detail-value {
  font-size: 14px;
  color: var(--text);
}

/* ── NORI-PORTAL-AGENT-UI-PERMISSIONS-PER-AGENT-001 ─────────────────────
   Per-agent UI Visibility card. Mirrors the muted/structured look of
   the surrounding agent detail cards. */
.ui-vis-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.ui-vis-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.ui-vis-row:hover { background: var(--hover); }
.ui-vis-row input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--primary);
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}
.ui-vis-row input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .55; }
.ui-vis-row-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.ui-vis-row-label { font-size: 13px; color: var(--text); font-weight: 500; }
.ui-vis-row-hint  { font-size: 11.5px; color: var(--text-muted); }

.ui-vis-landing {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 14px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.ui-vis-landing-label { font-size: 12px; color: var(--text-muted); }
.ui-vis-landing select {
  font-size: 12.5px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
}
.ui-vis-landing select:disabled { opacity: .55; cursor: not-allowed; }

.ui-vis-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ui-vis-result      { font-size: 12px; color: var(--text-muted); }
.ui-vis-result.ui-vis-ok    { color: var(--ok-text); }
.ui-vis-result.ui-vis-err   { color: var(--err-text); }
.ui-vis-result.ui-vis-dirty { color: var(--warn-text); }
.ui-vis-devnote {
  font-size: 11.5px;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 9px;
  margin-bottom: 10px;
}

.detail-zones-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.detail-subsection-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 8px;
}

.detail-job-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.detail-job-row:last-child { border-bottom: none; }

.detail-job-type {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  min-width: 72px;
  letter-spacing: .3px;
}

.detail-job-project {
  font-size: 13px;
  color: var(--text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-job-time {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.detail-issue {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.detail-issue-icon {
  font-size: 20px;
  color: var(--warn-text);
  line-height: 1.1;
  flex-shrink: 0;
}

.detail-issue-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--warn-text);
  margin-bottom: 5px;
}

.detail-issue-msg {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.detail-issue-detail {
  font-size: 12px;
  color: var(--text-subtle);
  margin-top: 5px;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.card-issue .card-header {
  background: rgba(251,191,36,.07);
}
.card-issue .card-title {
  color: var(--warn-text);
}

/* ── Release Detail View ── */

#release-detail-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}


.deploy-state-header {
  display: grid;
  grid-template-columns: 1fr 160px 100px;
  padding: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--border);
}

.deploy-state-row {
  display: grid;
  grid-template-columns: 1fr 160px 100px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.deploy-state-row:last-child { border-bottom: none; }

.deploy-state-agent {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 12px;
}

.deploy-state-version {
  font-size: 13px;
  color: var(--text-muted);
}

/* ── Job Detail Modal ── */

.modal-lg {
  width: 640px;
  /* NORI-PORTAL-DEPLOY-JOB-MODAL-COMPACT-SCROLL-001: explicit ceiling so
     the deploy-job modal can never grow past 85% of the viewport even
     with many child agents. */
  max-height: 85vh;
}

.job-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.job-meta-item {
  font-size: 12px;
  color: var(--text-muted);
}

.job-meta-item strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

/* NORI-PORTAL-DEPLOY-JOB-MODAL-COMPACT-SCROLL-001: child sections are now
   <details> accordions. The summary row stays compact; the rest of the
   child content (phase strip, result, logs, log toolbar) only renders
   when the user opens the section or it was opened by default for a
   non-success status. Status colour-band on the left helps the eye
   scan SUCCESS / RUNNING / FAILED at a glance. */
.job-child-section {
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  margin-top: 8px;
  background: var(--surface);
}
.job-child-section:first-of-type { margin-top: 0; }

.job-child-section[data-state="ok"]       { border-left-color: rgba(34,197,94,0.55); }
.job-child-section[data-state="running"]  { border-left-color: rgba(56,189,248,0.55); }
.job-child-section[data-state="warn"]     { border-left-color: rgba(251,191,36,0.65); }
.job-child-section[data-state="fail"]     { border-left-color: rgba(248,113,113,0.65); }
.job-child-section[data-state="rollback"] { border-left-color: rgba(167,139,250,0.65); }

.job-child-section > summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12.5px;
}
.job-child-section > summary::-webkit-details-marker { display: none; }
.job-child-section > summary:hover { background: var(--hover); }

.job-child-summary-chevron {
  display: inline-block;
  width: 12px;
  color: var(--text-muted);
  transition: transform .12s ease;
  flex-shrink: 0;
}
.job-child-section[open] > summary > .job-child-summary-chevron { transform: rotate(90deg); }

.job-child-summary-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
}
.job-child-summary-meta code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: var(--text);
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 3px;
}

.job-child-body {
  padding: 0 12px 12px;
  border-top: 1px solid var(--border);
}

.job-child-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.job-log-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 6px;
  font-size: 11px;
  color: var(--text-muted);
}
.job-log-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
}
.job-log-toolbar input[type="checkbox"] {
  width: 12px; height: 12px;
  accent-color: var(--primary);
  cursor: pointer;
}
.job-log-stats { font-family: 'SF Mono', 'Fira Code', monospace; }

/* NORI-PORTAL-DEPLOY-JOB-MODAL-COMPACT-SCROLL-001: collapsed parent meta */
.job-meta-collapsed {
  margin-bottom: 12px;
}
.job-meta-collapsed > summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
}
.job-meta-collapsed > summary::-webkit-details-marker { display: none; }
.job-meta-collapsed[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.job-meta-collapsed > .job-meta-grid {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-top: 0;
  border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}
.job-meta-summary-id { font-family: 'SF Mono', 'Fira Code', monospace; color: var(--text); }
.job-meta-summary-sep { color: var(--text-subtle); }

.job-child-agent {
  font-size: 13px;
  font-weight: 600;
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: var(--text);
}

.job-child-result {
  font-size: 12px;
  color: var(--text-muted);
}

.job-log-panel {
  background: #13141a;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  /* NORI-PORTAL-DEPLOY-JOB-MODAL-COMPACT-SCROLL-001: tighter cap so a
     long deploy log never crowds out the rest of the modal. The panel
     keeps its own scroll. */
  max-height: 220px;
  overflow-y: auto;
  font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.65;
  color: #a8b3c4;
  white-space: pre-wrap;
  word-break: break-all;
}

.job-log-empty {
  font-size: 12px;
  color: var(--text-subtle);
  font-style: italic;
}

/* ── Job Timeline ── */
.job-timeline {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.job-timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-subtle);
  min-width: 52px;
}
.job-timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-strong);
}
.step-done   { color: var(--ok-text); }
.step-done   .job-timeline-dot { background: var(--ok-text); }
.step-active { color: var(--primary); }
.step-active .job-timeline-dot { background: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }
.step-failed { color: var(--err-text); }
.step-failed .job-timeline-dot { background: var(--err-text); }
.step-warn   { color: var(--warn-text); }
.step-warn   .job-timeline-dot { background: var(--warn-text); }
.job-timeline-connector {
  flex: 1;
  height: 2px;
  background: var(--border);
  min-width: 20px;
}
.conn-done { background: var(--ok-text); opacity: .4; }

/* ── Sequence clip context menu ── */
.seq-ctx-menu {
  position: fixed;
  z-index: 9999;
  min-width: 168px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);
  padding: 4px;
  animation: seq-ctx-in .1s ease;
}
@keyframes seq-ctx-in {
  from { opacity: 0; transform: scale(.95) translateY(-4px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}
.seq-ctx-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  border-radius: 5px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  transition: background .1s;
}
.seq-ctx-item:hover { background: var(--primary-dim); color: var(--primary); }
.seq-ctx-item.seq-ctx-danger:hover { background: rgba(239,68,68,.12); color: #ef4444; }
.seq-ctx-icon { font-size: 14px; width: 16px; text-align: center; flex-shrink: 0; }
.seq-ctx-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ── Clip hover tooltip ── */
.seq-clip-tip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: #111827;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  box-shadow: 0 8px 24px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
  padding: 9px 12px;
  min-width: 160px;
  max-width: 260px;
  font-size: 11.5px;
  line-height: 1.5;
  backdrop-filter: blur(6px);
}
.seq-tip-row {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.seq-tip-k {
  color: #6b7280;
  white-space: nowrap;
  flex-shrink: 0;
}
.seq-tip-v {
  color: #e5e7eb;
  font-family: 'SF Mono', 'Fira Code', monospace;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seq-tip-sep {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 5px 0;
}

/* ── Sequence toolbar extras ── */
.seq-loop-btn {
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-subtle);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
}
.seq-loop-btn:hover { background: var(--hover); color: var(--text); }
.seq-loop-btn-active {
  border-color: rgba(106,166,255,.5);
  color: var(--primary);
  background: var(--primary-dim);
}

/* Linear mode toggle */
.seq-linear-btn {
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
  letter-spacing: .2px;
}
.seq-linear-btn:hover { background: var(--hover); color: var(--text); }
.seq-linear-btn.seq-linear-active {
  border-color: rgba(106,166,255,.5);
  color: var(--primary);
  background: rgba(99,102,241,.08);
}
.seq-save-btn-dirty {
  border-color: rgba(250,200,60,.5) !important;
  color: #f5c842 !important;
}

/* ── Job Result Message (failure reason) ── */
.job-result-msg {
  font-size: 12px;
  color: var(--err-text);
  background: var(--err);
  border: 1px solid var(--err-border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  margin: 4px 0 10px;
  line-height: 1.5;
}

/* ── Deploy Phase Strip ── */
.deploy-phase-strip {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 10px 0 12px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.deploy-phase-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-subtle);
  min-width: 48px;
  flex-shrink: 0;
}
.deploy-phase-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
}
.deploy-phase-conn {
  flex: 1;
  height: 2px;
  background: var(--border);
  min-width: 14px;
}
.deploy-phase-conn.conn-done { background: var(--ok-text); opacity: .4; }

.phase-done    { color: var(--ok-text); }
.phase-done    .deploy-phase-dot { background: var(--ok-text); }
.phase-active  { color: var(--primary); }
.phase-active  .deploy-phase-dot { background: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); animation: phase-pulse 1.4s ease-in-out infinite; }
.phase-failed  { color: var(--err-text); }
.phase-failed  .deploy-phase-dot { background: var(--err-text); }
.phase-future  { color: var(--text-subtle); opacity: .45; }
.phase-future  .deploy-phase-dot { background: var(--border); }
.phase-restored { color: var(--warn-text); }
.phase-restored .deploy-phase-dot { background: var(--warn-text); }

@keyframes phase-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--primary-dim); }
  50%       { box-shadow: 0 0 0 5px var(--primary-dim); }
}

/* ── Deploy Result Summary ── */
.deploy-result-summary {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.deploy-meta-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  line-height: 1.5;
}
.deploy-meta-key {
  color: var(--text-muted);
  min-width: 80px;
  flex-shrink: 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.deploy-meta-val {
  color: var(--text);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.deploy-meta-val code {
  font-family: inherit;
  background: none;
  color: inherit;
}
.vfy-checks { display: flex; flex-wrap: wrap; gap: 4px; }
.vfy-check {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
}
.vfy-ok   { color: var(--ok-text);  background: var(--ok);  }
.vfy-fail { color: var(--err-text); background: var(--err); }

/* ── Panel Splitters ── */
/* Inspector splitter — the only interactive resizable divider */
.seq-splitter-insp {
  flex-shrink: 0;
  width: 5px;
  background: transparent;
  cursor: col-resize;
  position: relative;
  transition: background .15s;
  z-index: 2;
}
.seq-splitter-insp::after {
  content: '';
  position: absolute;
  inset: 0;
  left: 2px;
  width: 1px;
  background: rgba(255,255,255,.06);
  transition: background .15s;
}
.seq-splitter-insp:hover::after,
.seq-splitter-insp:active::after {
  background: rgba(255,255,255,.18);
}

/* ── Save Indicator ── */
.seq-save-indicator {
  font-size: 11.5px;
  color: var(--text-subtle);
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
  margin-right: 4px;
  transition: color .2s;
}

/* ── Device editor ─────────────────────────────────────────────────────────── */
.dev-editor-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.dev-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dev-field-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-subtle);
}
.dev-field-hint {
  font-size: 11px;
  color: var(--text-subtle);
}
.dev-id-input {
  width: 280px;
  opacity: .65;
  cursor: default;
}
/* Capability checkbox group */
.dev-cap-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dev-cap-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.03);
  user-select: none;
  transition: border-color .12s, background .12s;
}
.dev-cap-check:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-dim);
  color: var(--primary);
}
.dev-cap-check input[type=checkbox] {
  accent-color: var(--primary);
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
/* Capability badge in list rows */
.dev-cap-badge {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(106,166,255,.12);
  color: var(--primary);
  border: 1px solid rgba(106,166,255,.2);
  white-space: nowrap;
}

/* ── Scene editor v2 — Sequence-family layout ──────────────────────────────── */
/* .scene-editor-area, .scene-editor-empty, .scene-editor-content unchanged    */

/* Main row: canvas + splitter + inspector — mirrors .seq-main-row */
.scene-main-row {
  flex: 1 1 0%;
  display: flex;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  margin: 0 10px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}

/* Scrollable action canvas */
.scene-canvas-wrap {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  background: var(--bg);
}
.scene-canvas {
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 6px;
}
.scene-canvas-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-subtle);
  font-size: 13px;
}

/* Action cards */
.scene-act-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  user-select: none;
  transition: border-color .12s, background .12s;
  min-width: 0;
}
.scene-act-card:hover { background: var(--hover); border-color: var(--border-strong); }
.scene-act-card.scene-act-selected {
  border-color: var(--primary);
  background: var(--primary-dim);
  box-shadow: inset 0 0 0 1px var(--primary), 0 0 8px rgba(106,166,255,.15);
}
.scene-act-num {
  font-size: 10px;
  color: var(--text-subtle);
  font-family: 'SF Mono', 'Fira Code', monospace;
  width: 16px;
  flex-shrink: 0;
  text-align: right;
}
.scene-act-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.scene-act-device {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scene-act-action {
  font-size: 11px;
  color: var(--text-subtle);
  font-family: 'SF Mono', 'Fira Code', monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scene-act-value {
  font-size: 11px;
  color: var(--primary);
  font-family: 'SF Mono', 'Fira Code', monospace;
  flex-shrink: 0;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* Scene inspector panel — reuses .seq-inspector structure, specific sizing */
#scene-inspector {
  width: 256px;
  min-width: 180px;
  max-width: 400px;
}

/* Toolbar inline inputs (name + zone) — transparent, reveal border on hover/focus */
.scene-toolbar-name {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  padding: 2px 6px;
  outline: none;
  font-family: inherit;
  max-width: 220px;
  transition: border-color .15s, background .15s;
}
.scene-toolbar-name:hover { border-color: var(--border); background: rgba(255,255,255,.04); }
.scene-toolbar-name:focus { border-color: var(--primary); background: rgba(255,255,255,.04); }
.scene-toolbar-zone {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-subtle);
  font-size: 12px;
  padding: 2px 6px;
  outline: none;
  font-family: inherit;
  width: 110px;
  transition: border-color .15s, background .15s, color .15s;
}
.scene-toolbar-zone:hover { border-color: var(--border); background: rgba(255,255,255,.04); }
.scene-toolbar-zone:focus { border-color: var(--primary); background: rgba(255,255,255,.04); color: var(--text); }

/* Device config grid */
.dev-config-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dev-config-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dev-config-label {
  font-size: 12px;
  color: var(--text-subtle);
  width: 110px;
  flex-shrink: 0;
}
.dev-config-input {
  flex: 1;
  min-width: 0;
}



/* Drag-and-drop reorder */
.scene-act-card { cursor: grab; }
.scene-act-card:active { cursor: grabbing; }
.scene-act-num { cursor: grab; }
.scene-act-dragging { opacity: .35; }
.scene-act-drag-over {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(106,166,255,.2) !important;
}

/* Run feedback in toolbar (transient) */
.scene-run-feedback { font-size: 12px; padding: 2px 8px; border-radius: var(--radius-sm); white-space: nowrap; }
.scene-run-fb-running { color: var(--text-subtle); }
.scene-run-fb-success { color: #4ade80; background: rgba(74,222,128,.1); }
.scene-run-fb-error   { color: #f87171; background: rgba(248,113,113,.1); }
.scene-run-fb-timeout { color: var(--text-subtle); }
/* Run history indicator (persistent per editor session) */
.scene-run-status      { font-size: 11px; padding: 2px 7px; border-radius: var(--radius-sm); white-space: nowrap; opacity: .75; }
.scene-run-st-ok   { color: #4ade80; }
.scene-run-st-fail { color: #f87171; }

/* Missing/broken device state */
.scene-act-broken { border-color: rgba(245,158,11,.35) !important; }
.scene-act-broken .scene-act-num { color: #f59e0b; }
.scene-act-missing { color: #f59e0b; font-size: 12px; }
.scene-act-empty   { color: var(--text-subtle); }
.scene-insp-missing {
  font-size: 11px;
  color: #f59e0b;
  margin-top: 4px;
}

/* RGB value row in inspector */
.scene-rgb-row {
  display: flex;
  gap: 6px;
}
.scene-rgb-input {
  width: 0;
  flex: 1;
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
}

/* OpenHAB indicator dot in agent list */
.oh-dot {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -.5px;
  white-space: nowrap;
}
.oh-dot-online  { color: var(--ok-text); }
.oh-dot-offline { color: var(--err-text); }
.oh-dot-unknown { color: var(--text-subtle); }
.oh-dot-unconfigured { color: var(--text-subtle); }

/* Release Mode toggle */
.release-mode-option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-primary);
}

/* ── Docs Viewer ────────────────────────────────────────────────────────── */

.docs-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  min-height: calc(100vh - var(--header-height, 60px) - 80px);
}

.docs-sidebar {
  min-width: 0;
}

.docs-viewer {
  min-width: 0;
}

.docs-item {
  padding: 10px 16px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle, var(--border));
  transition: background .12s;
  word-break: break-all;
}
.docs-item:hover {
  background: var(--hover-bg, rgba(255,255,255,.04));
}
.docs-item-selected {
  background: var(--primary-dim, rgba(59,130,246,.12)) !important;
  color: var(--primary, #3b82f6);
  font-weight: 600;
}

.docs-content {
  overflow-y: auto;
  max-height: calc(100vh - var(--header-height, 60px) - 140px);
}

.docs-rendered {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}
.docs-rendered h1 { font-size: 22px; font-weight: 700; margin: 20px 0 10px; }
.docs-rendered h2 { font-size: 18px; font-weight: 700; margin: 18px 0 8px; border-bottom: 1px solid var(--border-subtle, var(--border)); padding-bottom: 6px; }
.docs-rendered h3 { font-size: 15px; font-weight: 700; margin: 14px 0 6px; }
.docs-rendered h4, .docs-rendered h5, .docs-rendered h6 { font-size: 14px; font-weight: 600; margin: 12px 0 4px; }
.docs-rendered p { margin: 8px 0; }
.docs-rendered ul { padding-left: 20px; margin: 8px 0; }
.docs-rendered li { margin: 4px 0; }
.docs-rendered hr { border: none; border-top: 1px solid var(--border-subtle, var(--border)); margin: 16px 0; }
.docs-rendered strong { font-weight: 700; }
.docs-rendered em { font-style: italic; }

.docs-code {
  display: block;
  background: var(--bg-alt, #1a1a2e);
  border: 1px solid var(--border-subtle, var(--border));
  border-radius: 6px;
  padding: 12px 14px;
  overflow-x: auto;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 12.5px;
  line-height: 1.5;
  margin: 10px 0;
}

.docs-inline-code {
  background: var(--bg-alt, #1a1a2e);
  border-radius: 3px;
  padding: 2px 5px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 12.5px;
}

/* ── Nori System Status Table ──────────────────────────────────────────── */

.nori-status-table {
  display: grid;
  grid-template-columns: 1fr;
  font-size: 13px;
}
.nori-status-row {
  display: grid;
  grid-template-columns: 140px 48px 1fr;
  gap: 0 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-subtle, var(--border));
  align-items: center;
}
.nori-status-row:last-child { border-bottom: none; }
.nori-status-header {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding-bottom: 6px;
}
.nori-status-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nori-status-cell:nth-child(2) { text-align: center; }
.nori-status-cell:nth-child(3) { color: var(--text-muted); white-space: normal; }
.nori-st-ok { color: #4ade80; }
.nori-st-build { color: #fbbf24; }
.nori-st-planned { color: #9ca3af; }

/* ── Development TODO Grid ─────────────────────────────────────────────── */
/* ── Section-level 3-col grid ── */
.dev-sections-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.dev-section-card {
  margin-bottom: 0 !important;
}
@media (max-width: 1000px) {
  .dev-sections-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .dev-sections-grid { grid-template-columns: 1fr; }
}

/* ── Task list inside each section card ── */
.dev-task-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dev-todo-card {
  background: var(--surface-2, var(--card));
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 11px;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dev-todo-card .dev-todo-icon {
  flex-shrink: 0;
  font-size: 10px;
}
.dev-todo-card.dev-done span:last-child {
  text-decoration: line-through;
  opacity: .55;
}
.dev-todo-card.dev-clickable {
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dev-todo-card.dev-clickable:hover {
  border-color: var(--primary);
  background: var(--surface-2, var(--card));
}
/* ── AI Todo Table ── */
.ai-todo-header, .ai-todo-row {
  display: grid;
  grid-template-columns: 32px 1fr 90px 68px 90px 100px 70px;
  align-items: center;
  padding: 6px 8px;
  gap: 6px;
  font-size: 12px;
}
.ai-todo-header {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.08);
}
.ai-todo-row {
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.ai-todo-row:last-child { border-bottom: none; }
.ai-todo-row:hover { background: var(--hover); }
.ai-todo-title {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── AI Task Table ── */
.ai-task-header, .ai-task-row {
  display: grid;
  grid-template-columns: 1fr 55px 90px 110px 100px 130px 1fr;
  align-items: center;
  padding: 6px 8px;
  gap: 6px;
  font-size: 12px;
}
.ai-task-header {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.08);
}
.ai-task-row {
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.ai-task-row:last-child { border-bottom: none; }
.ai-task-row:hover { background: var(--hover); }
.ai-task-title {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── AI Task Detail ── */
.ai-task-detail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  margin-top: 12px;
}
.ai-task-steps {
  display: flex;
  flex-direction: column;
}
.ai-task-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  border-bottom: 1px solid var(--border);
}
.ai-task-step:last-child { border-bottom: none; }
.ai-task-step-current {
  background: rgba(99,102,241,.06);
  border-left: 2px solid var(--primary);
  padding-left: 6px;
}
.ai-task-timeline {
  display: flex;
  flex-direction: column;
}
.ai-task-event {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.ai-task-event:last-child { border-bottom: none; }

/* ── AI Approval Table ── */
.ai-approval-header, .ai-approval-row {
  display: grid;
  grid-template-columns: 80px 1fr 75px 75px 80px 90px 120px;
  align-items: center;
  padding: 6px 8px;
  gap: 6px;
  font-size: 12px;
}
.ai-approval-header {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.08);
}
.ai-approval-row {
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.ai-approval-row:last-child { border-bottom: none; }
.ai-approval-row:hover { background: var(--hover); }
.btn-approve {
  background: var(--ok);
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}
.btn-approve:hover { filter: brightness(1.1); }
.btn-reject {
  background: var(--err);
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}
.btn-reject:hover { filter: brightness(1.1); }

/* ── AI Monitor ── */
.ai-monitor-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ai-monitor-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
  padding: 6px 10px;
  background: rgba(0,0,0,.06);
  border-radius: 4px;
}
.ai-monitor-stat-val {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
.ai-monitor-stat-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.ai-monitor-approval-header, .ai-monitor-approval-row {
  display: grid;
  grid-template-columns: 80px 1fr 80px 100px;
  align-items: center;
  padding: 5px 8px;
  gap: 6px;
  font-size: 12px;
}
.ai-monitor-approval-header {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.08);
}
.ai-monitor-approval-row {
  border-bottom: 1px solid var(--border);
}
.ai-monitor-approval-row:last-child { border-bottom: none; }

/* ── AI Pending Actions ── */
.ai-pending-counters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ai-pending-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
  padding: 8px 12px;
  background: rgba(0,0,0,.05);
  border-radius: 4px;
  border: 1px solid transparent;
}
.ai-pending-counter.ai-pending-active {
  background: rgba(245,158,11,.06);
  border-color: rgba(245,158,11,.2);
}
.ai-pending-val {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-muted);
}
.ai-pending-label {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 2px;
}
.ai-pending-highlight {
  border-color: rgba(245,158,11,.3) !important;
}

.cloud-info-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  counter-reset: step;
}
.cloud-info-steps li {
  counter-increment: step;
  padding: 6px 0 6px 32px;
  position: relative;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.cloud-info-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ── AI Assistant ───────────────────────────────────────────────────────── */
.ai-dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0;
}
.ai-dot-on  { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.ai-dot-off { background: var(--err, #f87171); box-shadow: 0 0 6px var(--err, #f87171); }

.ai-chat-window {
  height: 300px; overflow-y: auto; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.ai-chat-window::-webkit-scrollbar { width: 5px; }
.ai-chat-window::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.ai-msg {
  font-size: 13px; line-height: 1.5; max-width: 85%;
  padding: 6px 10px; border-radius: 6px; white-space: pre-wrap; word-wrap: break-word;
}
.ai-msg-system { color: var(--text-muted); font-style: italic; max-width: 100%; padding: 0; }
.ai-msg-user   { align-self: flex-end; background: var(--primary); color: #fff; }
.ai-msg-ai     { align-self: flex-start; background: var(--border); color: var(--text); }
.ai-msg-error  { align-self: flex-start; background: rgba(248,113,113,.12); color: var(--err, #f87171); }

.ai-chat-input {
  display: flex; gap: 8px; padding: 10px 14px;
}

.cloud-info-note {
  background: var(--surface-2, var(--card));
  border: 1px solid var(--warn-text, #f59e0b);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--warn-text, #f59e0b);
  line-height: 1.5;
}

/* ── Settings / Ollama Config ── */

.ollama-cfg-grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px 12px;
  align-items: center;
}

.ollama-cfg-badge {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--text-muted);
  background: var(--border);
}
.ollama-badge-ok  { background: var(--ok, #34d399); color: #fff; }
.ollama-badge-err { background: var(--err, #f87171); color: #fff; }

.ollama-status-grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 4px 12px;
  font-size: 12px;
  padding: 10px 0 0;
  border-top: 1px solid var(--border);
}
.ollama-status-label { color: var(--text-muted); font-weight: 600; }
.ollama-status-val   { font-family: monospace; word-break: break-all; }

.ollama-test-ok      { font-size: 12px; padding: 8px 10px; border-radius: 6px; background: rgba(52,211,153,.1); color: var(--ok, #34d399); }
.ollama-test-err     { font-size: 12px; padding: 8px 10px; border-radius: 6px; background: rgba(248,113,113,.1); color: var(--err, #f87171); }
.ollama-test-pending { font-size: 12px; padding: 8px 10px; border-radius: 6px; background: var(--surface-2, var(--card)); color: var(--text-muted); }

/* Toggle switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border);
  border-radius: 20px;
  transition: background .2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  height: 14px; width: 14px;
  left: 3px; bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--ok, #34d399); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); }

/* ── AI Control Dashboard ────────────────────────────────────────────────── */

.ai-dash { margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }

/* Control bar */
.aid-control { overflow: visible; }
.aid-control-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2);
  border-radius: var(--radius) var(--radius) 0 0;
}

/* ── System Health panel ── */
.sh-panel { padding: 0; border: none; background: transparent; }
.sh-row {
  display: flex; align-items: center; gap: 14px; padding: 6px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  flex-wrap: wrap;
}
.sh-item { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-muted); }
.sh-label { font-weight: 600; font-size: 9px; text-transform: uppercase; letter-spacing: .3px; color: var(--text-subtle); }
.sh-val { font-weight: 700; font-size: 12px; color: var(--text); }

/* ── Backend/model tags ── */
.ai-be-tag {
  display: inline-block; font-size: 9px; font-weight: 600; padding: 0 5px;
  border-radius: 4px; vertical-align: middle; line-height: 16px;
}
.ai-be-claude { background: rgba(139,92,246,.15); color: #a78bfa; }
.ai-be-ollama { background: rgba(106,166,255,.12); color: var(--primary); }

/* ── AI Memory Inspector ── */
.ai-mem-row {
  display: grid; grid-template-columns: 90px 1fr 80px 40px 70px 44px;
  align-items: center; gap: 4px; padding: 3px 10px;
  font-size: 10px; border-bottom: 1px solid var(--border);
}
.ai-mem-row:last-child { border-bottom: none; }
.ai-mem-row:hover { background: var(--hover); }
.ai-mem-exec { font-weight: 600; color: var(--primary); font-size: 9px; text-transform: uppercase; }
.ai-mem-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.ai-mem-step { font-size: 9px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-mem-score { font-weight: 700; font-size: 10px; text-align: center; }
.ai-mem-ts { font-size: 9px; color: var(--text-subtle); text-align: right; }
.ai-mem-vote { display: flex; gap: 2px; }
.ai-mem-btn {
  background: none; border: 1px solid var(--border); border-radius: 3px;
  color: var(--text-muted); font-size: 8px; padding: 1px 4px; cursor: pointer;
  line-height: 1;
}
.ai-mem-btn:hover { background: var(--surface-2); color: var(--text); }

/* ── Task History Inspector ── */
.ai-hist-filters {
  display: flex; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--border);
  background: var(--surface-2); align-items: center;
}
.ai-hist-row {
  display: grid; grid-template-columns: 52px 1fr 48px 100px 72px 36px;
  align-items: center; gap: 4px; padding: 3px 10px;
  font-size: 10px; border-bottom: 1px solid var(--border);
}
.ai-hist-row:last-child { border-bottom: none; }
.ai-hist-row:hover { background: var(--hover); }
.ai-hist-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.ai-hist-tgt { font-size: 9px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); }
.ai-hist-wkr { font-size: 9px; color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-hist-ts { font-size: 9px; color: var(--text-subtle); text-align: right; }
.ai-hist-steps { font-size: 9px; color: var(--text-muted); text-align: right; }
.ai-hist-det {
  padding: 8px 10px; border-top: 1px solid var(--border); background: var(--surface-2);
}
.ai-hist-det-hdr { font-size: 12px; margin-bottom: 4px; }
.ai-hist-det-meta {
  display: flex; gap: 12px; flex-wrap: wrap; font-size: 9px; color: var(--text-muted); margin-bottom: 6px;
}
.ai-hist-det-steps { display: flex; flex-direction: column; gap: 3px; }
.ai-hist-step {
  display: flex; align-items: center; gap: 6px; font-size: 10px;
}
.ai-hist-step-name { font-weight: 600; color: var(--text); }
.ai-hist-step-exec { font-size: 9px; color: var(--text-subtle); }
.ai-hist-step-sum {
  font-size: 9px; color: var(--text-muted); margin-left: 28px; margin-top: 1px;
  max-width: 500px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Run Progress bar ── */
.ai-run-progress { padding: 0; }
.ai-rp-bar {
  height: 3px; background: var(--border); border-radius: 2px;
  overflow: hidden; margin: 0 10px;
}
.ai-rp-fill { height: 100%; border-radius: 2px; transition: width .4s ease; }
.ai-rp-text {
  padding: 2px 10px 4px; font-size: 10px; color: var(--text-muted);
  display: flex; flex-wrap: wrap; gap: 0; align-items: baseline;
}

/* ── Task Popup ── */
.wk-popup {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 9000; width: 320px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.wk-popup-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.wk-popup-title { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-popup-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; padding: 2px; }
.wk-popup-close:hover { color: var(--text); }
.wk-popup-body { padding: 10px 14px; }
.wk-popup-row { display: flex; align-items: center; justify-content: space-between; padding: 3px 0; font-size: 11px; }
.wk-popup-label { color: var(--text-muted); }
.wk-popup-actions { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); justify-content: flex-end; }

/* ── Context Menu ── */
.ctx-menu {
  position: fixed; z-index: 9999; min-width: 160px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 4px 0; box-shadow: var(--shadow-lg);
}
.ctx-item {
  padding: 6px 14px; font-size: 12px; color: var(--text); cursor: pointer;
}
.ctx-item:hover { background: var(--hover); }
.ctx-item-danger { color: var(--err-text); }
.ctx-item-danger:hover { background: rgba(248,113,113,.1); }
.ctx-sep { height: 1px; background: var(--border); margin: 3px 8px; }

/* ── Work Canvas Workspace ── */
.wk-canvas {
  display: flex; flex-direction: column; overflow: hidden;
}
/* Full-page Work view gets viewport height */
[data-panel="dev-status"] .wk-canvas { height: calc(100vh - 80px); }
/* Dashboard embed gets a compact max height */
#dash-work-board .wk-canvas { max-height: 480px; }
#dash-work-board .wk-grid { max-height: 420px; }
.wk-header {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.wk-project { font-size: 14px; font-weight: 700; color: var(--text); margin-right: 8px; }
.wk-tab {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 12px; font-size: 11px; color: var(--text-muted); cursor: pointer;
}
.wk-tab:hover { border-color: var(--primary); color: var(--text); }
.wk-tab-active { background: var(--primary-dim); border-color: var(--primary); color: var(--primary); font-weight: 600; }
.wk-tab-count { font-size: 9px; opacity: .6; }

/* ── Kanban Board ── */
.kb-filters {
  display: flex; gap: 4px; padding: 4px 8px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.kb-filter {
  background: none; border: 1px solid var(--border); border-radius: 4px;
  padding: 2px 8px; font-size: 10px; color: var(--text-muted); cursor: pointer;
}
.kb-filter:hover { border-color: var(--primary); color: var(--text); }
.kb-filter-active { background: var(--primary-dim); border-color: var(--primary); color: var(--primary); font-weight: 600; }
.kb-filter-count { font-size: 8px; opacity: .7; }

/* AI-UI-023: kb-split is now a single full-width container (the
   inspector lives in a body-level drawer, not as a split column). */
.kb-split {
  display: flex; flex: 1; overflow: hidden;
  width: 100%;
}
/* ── Objective creation dialog (AI-WF-011) ── */
.obj-dlg-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
}
.obj-dlg {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; min-width: 460px; max-width: 580px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  overflow: hidden;
}
.obj-dlg-hdr {
  padding: 12px 16px; font-weight: 700; font-size: 13px;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  text-transform: uppercase; letter-spacing: .5px;
}
.obj-dlg-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.obj-dlg-lbl {
  font-size: 10px; font-weight: 600; color: var(--text-subtle);
  text-transform: uppercase; letter-spacing: .4px; margin-top: 6px;
}
.obj-dlg-input {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 5px;
  padding: 6px 9px; font-size: 12px; font-family: inherit;
  margin-bottom: 4px;
}
.obj-dlg-input:focus { outline: none; border-color: var(--primary); }
textarea.obj-dlg-input { resize: vertical; min-height: 40px; }
.obj-dlg-actions {
  padding: 10px 16px; display: flex; justify-content: flex-end; gap: 8px;
  background: var(--surface-2); border-top: 1px solid var(--border);
}
.obj-dlg-actions button { font-size: 11px; padding: 5px 14px; }
.obj-dlg-actions button:disabled { opacity: .6; cursor: not-allowed; }

/* AI-WF-040: inline status line inside the create-Aufgabe dialog
   so the operator always sees what the planner is doing — replaces
   the dead reference to the (removed) #ai-comp-status element. */
.obj-dlg-status {
  margin-top: 10px;
  padding: 6px 10px;
  font-size: 11px;
  border-radius: 3px;
  background: var(--surface, rgba(0,0,0,.2));
  border: 1px solid var(--border);
  color: var(--text-muted);
  min-height: 16px;
}
.obj-dlg-status-info { color: var(--primary); border-color: rgba(106,166,255,.3); background: var(--primary-dim); }
.obj-dlg-status-ok   { color: var(--ok-text);  border-color: var(--ok-border);  background: var(--ok); }
.obj-dlg-status-err  { color: var(--err-text); border-color: var(--err-border); background: var(--err); }

/* ── Recovery actions / error context (AI-WF-008) ── */
.btn-recover {
  background: rgba(239,68,68,.06) !important;
  border-color: rgba(239,68,68,.4) !important;
  color: var(--err-text) !important;
}
.btn-recover:hover { background: rgba(239,68,68,.15) !important; }
.btn-recover.btn-approve {
  background: rgba(34,197,94,.07) !important;
  border-color: rgba(34,197,94,.4) !important;
  color: var(--ok-text) !important;
}
.btn-recover.btn-approve:hover { background: rgba(34,197,94,.18) !important; }

.kb-det-error {
  margin-top: 8px; padding: 8px 10px;
  background: rgba(239,68,68,.05);
  border: 1px solid rgba(239,68,68,.25);
  border-radius: 4px;
  font-size: 11px;
}
.kb-det-error-hdr {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: var(--err-text); margin-bottom: 4px;
}
.kb-det-error-row {
  display: flex; gap: 8px; padding: 2px 0;
}
.kb-det-error-row span:first-child {
  color: var(--text-subtle); min-width: 60px; flex-shrink: 0;
}
.kb-det-error-row span:last-child {
  color: var(--text-muted); word-break: break-word;
}

/* ── System Monitor (AI-WF-007) ── */
.sys-monitor-host { padding: 6px 14px 0; }
.sm-strip {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px 10px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 8px; margin-bottom: 4px;
}
.sm-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; padding: 3px 9px; border-radius: 12px;
  background: var(--surface); color: var(--text-muted);
  border: 1px solid var(--border); white-space: nowrap;
  font-family: var(--font-mono, monospace);
}
.sm-chip strong { color: var(--text); font-weight: 700; }
.sm-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-subtle); flex-shrink: 0;
}
.sm-on      { background: #22c55e; box-shadow: 0 0 4px rgba(34,197,94,.6); }
.sm-off     { background: #ef4444; box-shadow: 0 0 4px rgba(239,68,68,.5); }
.sm-unknown { background: #94a3b8; }
.sm-queue   { background: rgba(106,166,255,.08); border-color: rgba(106,166,255,.3); color: var(--primary); }
.sm-slots   { background: rgba(20,184,166,.08); border-color: rgba(20,184,166,.3); color: #14b8a6; }
.sm-active  { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.3); color: var(--ok-text); max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
.sm-git     { background: rgba(167,139,250,.08); border-color: rgba(167,139,250,.3); color: #a78bfa; }
.sm-git-dirty { background: rgba(234,179,8,.12); border-color: rgba(234,179,8,.4); color: #eab308; }
.sm-model   { background: rgba(20,184,166,.08); border-color: rgba(20,184,166,.3); color: #14b8a6; }
.sm-error   { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.4); color: var(--err-text); }
.sm-mini    { font-size: 8px; opacity: .8; }
.sm-btn {
  font-size: 10px; padding: 3px 10px; border-radius: 4px;
  background: var(--surface); color: var(--text-muted); border: 1px solid var(--border);
  cursor: pointer; font-family: inherit;
}
.sm-btn:hover { border-color: var(--primary); color: var(--primary); }
.sm-btn-danger:hover { border-color: var(--err-text); color: var(--err-text); }

.sm-workers {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 8px;
  border-bottom: 1px solid var(--border); margin-bottom: 8px;
}
.sm-worker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; padding: 3px 9px; border-radius: 4px;
  background: rgba(255,255,255,.02); border: 1px solid var(--border);
  font-family: var(--font-mono, monospace); color: var(--text-muted);
}
.sm-w-id   { color: var(--text); font-weight: 600; }
.sm-w-role { font-size: 9px; opacity: .7; }
.sm-w-host { font-size: 9px; opacity: .6; }
.sm-w-age  { font-size: 9px; opacity: .55; }
.sm-w-task { color: var(--primary); font-size: 9px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }

/* ── Phase color tokens (AI-WF-005) ── */
:root {
  --kb-task:     #94a3b8;   /* gray  */
  --kb-analysis: #3b82f6;   /* blue  */
  --kb-report:   #a78bfa;   /* violet */
  --kb-decision: #f97316;   /* orange */
  --kb-code:     #14b8a6;   /* turquoise */
  --kb-test:     #eab308;   /* yellow */
  --kb-done:     #22c55e;   /* green */
}

.kb-board {
  display: flex; gap: 12px; padding: 14px; overflow-x: auto; flex: 1;
  align-items: stretch;
}
.kb-col {
  min-width: 140px; flex: 1 1 0%;
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: 10px; border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color .15s;
}
.kb-col-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text); background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.kb-col-count {
  font-size: 10px; background: var(--border); color: var(--text); padding: 1px 7px;
  border-radius: 10px; min-width: 18px; text-align: center; font-weight: 600;
}
.kb-col-body {
  display: flex; flex-direction: column; gap: 8px; padding: 10px;
  min-height: 60px; max-height: calc(100vh - 280px);
  overflow-y: auto;   /* per-column scroll */
}
.kb-empty { min-height: 30px; }

/* Stage header strips – top border in phase color */
.stage-task     .kb-col-hdr { border-top: 3px solid var(--kb-task); }
.stage-analysis .kb-col-hdr { border-top: 3px solid var(--kb-analysis); }
.stage-report   .kb-col-hdr { border-top: 3px solid var(--kb-report); }
.stage-decision .kb-col-hdr { border-top: 3px solid var(--kb-decision); }
.stage-code     .kb-col-hdr { border-top: 3px solid var(--kb-code); }
.stage-test     .kb-col-hdr { border-top: 3px solid var(--kb-test); }
.stage-done     .kb-col-hdr { border-top: 3px solid var(--kb-done); }

/* Objective groups inside columns */
.kb-obj-group {
  margin-bottom: 0; background: rgba(255,255,255,.02); border-radius: var(--radius-sm);
  padding: 4px; border: 1px solid rgba(255,255,255,.04);
}
.kb-obj-group + .kb-obj-group { margin-top: 6px; }
.kb-obj-label {
  font-size: 10px; font-weight: 700; color: var(--primary); text-transform: uppercase;
  letter-spacing: .4px; padding: 5px 8px 4px;
  border-bottom: 1px solid rgba(106,166,255,.15); margin-bottom: 6px;
}

/* ── Task cards (AI-WF-005) ── */
.kb-card {
  background: var(--surface-3, #1f2937);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 6px;
  padding: 9px 11px;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
  display: flex; flex-direction: column; gap: 5px;
  margin-bottom: 8px;
}
.kb-card:last-child { margin-bottom: 0; }
.kb-card:hover { border-color: var(--primary); transform: translateY(-1px); }
/* AI-WF-013: brief highlight whenever a card jumps to a new column */
.kb-card-moved {
  animation: kb-card-pulse 900ms ease-out;
}
@keyframes kb-card-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(106,166,255,0); transform: translateY(-3px); }
  20%  { box-shadow: 0 0 0 4px rgba(106,166,255,.45); transform: translateY(0); }
  100% { box-shadow: 0 0 0 0 rgba(106,166,255,0); transform: translateY(0); }
}
.kb-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.kb-card-title {
  font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.35;
  flex: 1; word-break: break-word;
}
.kb-card-meta-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.kb-meta-chip {
  font-size: 9px; padding: 1px 6px; border-radius: 3px;
  background: rgba(255,255,255,.05); color: var(--text-muted);
  border: 1px solid var(--border);
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
}
.kb-scope { color: #a78bfa; border-color: rgba(167,139,250,.3); }
.kb-files { color: #14b8a6; border-color: rgba(20,184,166,.3); max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.kb-debug-step { color: #fbbf24; border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.06); max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.kb-state-primary { color: var(--primary); border-color: rgba(106,166,255,.3); }
.kb-state-ok      { color: var(--ok-text); border-color: rgba(34,197,94,.3); }
.kb-state-err     { color: var(--err-text); border-color: rgba(239,68,68,.3); }
.kb-state-idle    { color: var(--text-subtle); }
.kb-card-branch {
  font-size: 10px; color: var(--text-muted); font-family: var(--font-mono, monospace);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-top: 2px; border-top: 1px dashed var(--border);
}

/* Phase badges (top-right of each card) */
.kb-phase-badge {
  font-size: 8px; font-weight: 700; text-transform: uppercase;
  padding: 2px 6px; border-radius: 10px; color: #fff;
  letter-spacing: .3px; white-space: nowrap; flex-shrink: 0;
}
.kb-phase-task     { background: var(--kb-task); }
.kb-phase-analysis { background: var(--kb-analysis); }
.kb-phase-report   { background: var(--kb-report); }
.kb-phase-decision { background: var(--kb-decision); }
.kb-phase-code     { background: var(--kb-code); }
.kb-phase-test     { background: var(--kb-test); color: #1f2937; }
.kb-phase-done     { background: var(--kb-done); }

/* Card stage tinting – matches the column it's in */
.kb-card[data-stage="TASK"]     { border-left-color: var(--kb-task); }
.kb-card[data-stage="ANALYSIS"] { border-left-color: var(--kb-analysis); }
.kb-card[data-stage="REPORT"]   { border-left-color: var(--kb-report); }
.kb-card[data-stage="DECISION"] { border-left-color: var(--kb-decision); }
.kb-card[data-stage="CODE"]     { border-left-color: var(--kb-code); }
.kb-card[data-stage="TEST"]     { border-left-color: var(--kb-test); }
.kb-card[data-stage="DONE"]     { border-left-color: var(--kb-done); }

/* State variants */
.kb-card-done    .kb-card-title { color: var(--ok-text); }
.kb-card-failed  { border-left-color: var(--err-text) !important; background: rgba(239,68,68,.05); }
.kb-card-running { background: rgba(106,166,255,.07); }
.kb-card-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(106,166,255,.35);
  background: var(--primary-dim);
}
.kb-det-r-wrap { align-items: flex-start; }

/* ── Dashboard reduced layout (AI-WF-015 / refined) ── */
.dash-status-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 18px;
  margin: 14px 18px 12px;
}
.dash-status-banner-left {
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
.dash-status-banner-right {
  display: flex; gap: 8px; flex-shrink: 0;
}
.dash-status-banner-right .btn-action,
.dash-status-banner-right .btn-secondary {
  font-size: 11px; padding: 5px 14px;
}
.dash-clear-btn {
  color: var(--err-text); border-color: var(--err-text);
}

.dash-status-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--text-subtle); flex-shrink: 0;
  box-shadow: 0 0 8px rgba(0,0,0,0.25);
}
.dash-status-line {
  font-size: 16px; font-weight: 600; letter-spacing: .3px;
  color: var(--text); white-space: nowrap;
}
.dash-status-sub {
  font-size: 11px; color: var(--text-muted);
  font-family: var(--font-mono, monospace);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-status-ok      { color: #22c55e; }
.dash-status-active  { color: #f59e0b; }
.dash-status-error   { color: #ef4444; }
.dash-status-unknown { color: #94a3b8; }

.dash-three-col {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(440px, 2fr) minmax(260px, 1.2fr);
  gap: 14px;
  margin: 0 18px 18px;
  align-items: stretch;
}
.dash-col {
  padding: 0; display: flex; flex-direction: column;
  height: calc(100vh - 170px);
  min-height: 360px;
}
.dash-col .aid-rt-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; border-bottom: 1px solid var(--border);
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-muted);
  background: var(--surface-2);
}
.dash-col .aid-rt-hdr .ai-ta-btn {
  font-size: 9px; color: var(--text-subtle);
  background: none; border: none; cursor: pointer;
}
.dash-col .aid-rt-hdr .ai-ta-btn:hover { color: var(--err-text); }
.dash-col-body {
  flex: 1; overflow: auto; padding: 10px;
}
/* AI-UI-028: Larger nodes, full state styling, pulse animation */
.dash-col-flow .dash-col-body {
  padding: 12px;
  display: block;
}

.wf-view {
  display: flex; align-items: flex-start; gap: 12px;
  min-height: 0;
}

/* Pipeline column: Planner → Queue, horizontal */
.wf-pipeline-left {
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 auto; min-width: 0;
}
.wf-pipeline-left .wf-node {
  flex: 1 1 0; min-width: 160px; max-width: 260px;
}

/* Bridge arrow between pipeline and workers */
.wf-bridge {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; padding: 0 6px; align-self: center;
}

/* Workers column: NUC / PC / Core / Agent vertical stack */
.wf-workers-right {
  display: flex; flex-direction: column; gap: 8px;
  flex: 0 0 220px; min-width: 200px; max-width: 260px;
}
.wf-workers-right .wf-node {
  width: 100%;
}

.wf-arrow {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; min-width: 16px;
  color: var(--text-subtle); font-size: 16px;
  opacity: .6;
}

/* ── Generic flow node ── */
.wf-node {
  flex: 1 1 0; min-width: 0;
  min-height: 96px;
  padding: 12px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-top-width: 3px;
  display: flex; flex-direction: column; gap: 4px;
  overflow: hidden;
  transition: border-color .15s, background .15s, box-shadow .25s;
}
.wf-node-hdr {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 2px;
}
.wf-node-label {
  font-size: 14px; font-weight: 700;
  letter-spacing: .3px; color: var(--text);
}
.wf-node-load {
  font-size: 11px; color: var(--text);
  font-family: var(--font-mono, monospace); font-weight: 700;
  background: rgba(255,255,255,.08);
  padding: 2px 8px; border-radius: 10px;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.06);
}
.wf-node-status {
  font-size: 12px; color: var(--text); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3;
}
.wf-node-sub {
  font-size: 12px; color: var(--text-muted);
  font-family: var(--font-mono, monospace);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3;
}

/* Progress bar */
.wf-bar {
  margin-top: auto;
  height: 5px; border-radius: 3px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.wf-bar-fill {
  height: 100%; background: var(--text-subtle);
  transition: width .25s ease, background .15s;
}

/* ── 5-state variants (AI-UI-028) ── */
.wf-node-running {
  border-top-color: #f59e0b;
  background: rgba(245,158,11,.08);
}
.wf-node-running .wf-node-label  { color: #f59e0b; }
.wf-node-running .wf-node-status { color: #f59e0b; font-weight: 600; }
.wf-node-running .wf-bar-fill    { background: #f59e0b; }
.wf-node-running .wf-node-load   { background: rgba(245,158,11,.18); border-color: rgba(245,158,11,.4); color: #f59e0b; }

.wf-node-waiting {
  border-top-color: #eab308;
  background: rgba(234,179,8,.06);
}
.wf-node-waiting .wf-node-label  { color: #eab308; }
.wf-node-waiting .wf-node-status { color: #eab308; }
.wf-node-waiting .wf-bar-fill    { background: #eab308; }
.wf-node-waiting .wf-node-load   { background: rgba(234,179,8,.15); border-color: rgba(234,179,8,.4); color: #eab308; }

.wf-node-idle {
  border-top-color: #22c55e;
}
.wf-node-idle .wf-node-label  { color: #22c55e; }
.wf-node-idle .wf-bar-fill    { background: #22c55e; }
.wf-node-idle .wf-node-load   { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.35); color: #22c55e; }

.wf-node-offline {
  border-top-color: #6b7280;
  opacity: .55;
}
.wf-node-offline .wf-node-label { color: #6b7280; }
.wf-node-offline .wf-node-load  { background: rgba(107,114,128,.15); color: #6b7280; }

.wf-node-blocked {
  border-top-color: #ef4444;
  background: rgba(239,68,68,.06);
}
.wf-node-blocked .wf-node-label  { color: #ef4444; }
.wf-node-blocked .wf-node-status { color: #ef4444; font-weight: 600; }
.wf-node-blocked .wf-bar-fill    { background: #ef4444; }
.wf-node-blocked .wf-node-load   { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.4); color: #ef4444; }

/* ── Pulse animation on RUNNING nodes ── */
@keyframes wf-node-pulse {
  0%   { box-shadow: 0 0 0 rgba(245,158,11,0.2); }
  50%  { box-shadow: 0 0 14px rgba(245,158,11,0.4); }
  100% { box-shadow: 0 0 0 rgba(245,158,11,0.2); }
}
.wf-node-running {
  animation: wf-node-pulse 2s ease-in-out infinite;
}

@media (max-width: 760px) {
  .wf-view { flex-direction: column; }
  .wf-bridge { display: none; }
  .wf-pipeline-left { width: 100%; }
  .wf-workers-right { flex: 1 1 auto; width: 100%; max-width: none; flex-direction: row; flex-wrap: wrap; }
  .wf-workers-right .wf-node { flex: 1 1 45%; }
}

@media (max-width: 1280px) {
  .dash-three-col {
    grid-template-columns: 1fr 1fr;
  }
  .dash-col-flow { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  .dash-three-col { grid-template-columns: 1fr; }
  .dash-col-flow { grid-column: auto; }
  .dash-col { height: auto; min-height: 280px; }
  .dash-status-banner { flex-direction: column; align-items: flex-start; }
  .dash-status-banner-right { width: 100%; justify-content: flex-end; }
}

/* ── Objective-centric Work Board (AI-WF-014) ── */
.objective-card {
  /* inherits .kb-card layout */
  cursor: pointer;
}
.objective-progress-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; color: var(--text-muted); margin-top: 2px;
}
.objective-progress-text { font-weight: 600; color: var(--text); }
.objective-worker {
  font-family: var(--font-mono, monospace); font-size: 9px;
  color: var(--text-muted); white-space: nowrap; max-width: 110px;
  overflow: hidden; text-overflow: ellipsis;
}
.progress-bar {
  height: 4px; background: rgba(255,255,255,.06); border-radius: 2px;
  overflow: hidden; margin-top: 4px;
}
.progress-bar-fill {
  height: 100%; background: var(--primary);
  transition: width .25s ease;
}
.objective-card[data-stage="DONE"] .progress-bar-fill { background: var(--kb-done); }
.objective-card[data-stage="DECISION"] .progress-bar-fill { background: var(--kb-decision); }
.objective-card[data-stage="REPORT"] .progress-bar-fill { background: var(--kb-report); }
.objective-card[data-stage="ANALYSIS"] .progress-bar-fill { background: var(--kb-analysis); }

/* AI-WF-019: explicit not-started hint in TASK column */
.objective-not-started {
  font-size: 10px; color: var(--text-subtle);
  font-style: italic; margin-top: 4px;
  letter-spacing: .2px;
}

.objective-actions {
  display: flex; gap: 6px; margin-top: 6px;
}
.btn-start-obj {
  background: rgba(34,197,94,.1); color: var(--ok-text);
  border: 1px solid rgba(34,197,94,.4); border-radius: 4px;
  font-size: 10px; font-weight: 600; padding: 4px 10px;
  cursor: pointer; font-family: inherit;
}
.btn-start-obj:hover { background: rgba(34,197,94,.2); }
.btn-start-obj:disabled { opacity: .55; cursor: wait; }

/* AI-UI-024: feedback toast */
.obj-toast {
  position: fixed; bottom: 24px; right: 24px;
  z-index: 9500; min-width: 200px; max-width: 360px;
  padding: 10px 14px; border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 3px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  font-size: 12px; color: var(--text);
  opacity: 0; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}
.obj-toast.obj-toast-show { opacity: 1; transform: translateY(0); }
.obj-toast-ok  { border-left-color: #22c55e; }
.obj-toast-err { border-left-color: #ef4444; color: var(--err-text); }

.objective-tasks {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed var(--border);
  display: flex; flex-direction: column; gap: 5px;
}
/* AI-UI-028: task-block — small bordered card per task, status icon
   on the left, title centered, optional step hint right. */
.task-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 8px; border-radius: 5px;
  font-size: 11px; color: var(--text-muted);
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-left-color: var(--text-subtle);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.task-row:hover {
  background: rgba(255,255,255,.05);
  color: var(--text);
}
.task-row-icon {
  display: inline-block; min-width: 14px; text-align: center;
  font-family: var(--font-mono, monospace); font-weight: 700;
  color: var(--text-subtle);
  font-size: 12px;
}
.task-row-title {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500; color: var(--text);
}
.task-row-step {
  font-size: 9px; color: var(--text-subtle); font-style: italic;
  max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.task-row-done {
  border-left-color: #22c55e;
  background: rgba(34,197,94,.05);
}
.task-row-done    .task-row-icon  { color: #22c55e; }
.task-row-done    .task-row-title { text-decoration: line-through; opacity: .7; }

.task-row-running {
  border-left-color: #f59e0b;
  background: rgba(245,158,11,.07);
}
.task-row-running .task-row-icon  { color: #f59e0b; }
.task-row-running .task-row-title { color: var(--text); font-weight: 600; }

.task-row-failed {
  border-left-color: #ef4444;
  background: rgba(239,68,68,.06);
}
.task-row-failed  .task-row-icon  { color: #ef4444; }

.task-row-waiting {
  border-left-color: #eab308;
  background: rgba(234,179,8,.05);
}
.task-row-waiting .task-row-icon  { color: #eab308; }

/* AI-UI-027: inline action buttons on the task row */
.task-row-actions {
  display: inline-flex; gap: 3px; margin-left: 4px; flex-shrink: 0;
}
.task-row-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  font-size: 11px; font-weight: 700; line-height: 1;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.task-row-act:hover { background: rgba(255,255,255,.08); }
.task-row-act.act-approve {
  color: var(--ok-text); border-color: rgba(34,197,94,.4);
}
.task-row-act.act-approve:hover { background: rgba(34,197,94,.15); }
.task-row-act.act-retry {
  color: #f59e0b; border-color: rgba(245,158,11,.45);
}
.task-row-act.act-retry:hover { background: rgba(245,158,11,.15); }
.task-row-act.act-delete {
  color: var(--err-text); border-color: rgba(239,68,68,.4);
}
.task-row-act.act-delete:hover { background: rgba(239,68,68,.15); }

/* AI-WF-015: planner decision badge */
.decision-badge {
  font-size: 8px; font-weight: 700; text-transform: uppercase;
  padding: 1px 6px; border-radius: 8px; letter-spacing: .3px;
  border: 1px solid transparent; flex-shrink: 0;
  font-family: var(--font-mono, monospace);
}
.decision-auto_approve {
  background: rgba(34,197,94,.12); color: #22c55e;
  border-color: rgba(34,197,94,.35);
}
.decision-needs_fix {
  background: rgba(245,158,11,.12); color: #f59e0b;
  border-color: rgba(245,158,11,.40);
}
.decision-needs_user {
  background: rgba(239,68,68,.10); color: #ef4444;
  border-color: rgba(239,68,68,.40);
}

/* AI-WF-016: fix-loop badge + sublabel */
.fix-badge-active {
  background: rgba(167,139,250,.12); color: #a78bfa;
  border-color: rgba(167,139,250,.40);
}
.fix-badge-limit {
  background: rgba(239,68,68,.14); color: #ef4444;
  border-color: rgba(239,68,68,.50);
  font-weight: 800;
}

/* AI-WF-017: hard-gate badge */
.gate-run {
  background: rgba(34,197,94,.14); color: #22c55e;
  border-color: rgba(34,197,94,.45);
}
.gate-hold {
  background: rgba(239,68,68,.10); color: #ef4444;
  border-color: rgba(239,68,68,.40);
}
.task-row-main {
  display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1;
}
.task-row-sublabel {
  font-size: 9px; color: var(--text-subtle); padding-left: 22px;
  margin-top: 1px; font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* AI-WF-037: Task Inspector drawer removed entirely.
   The Work board now uses the full available width. The
   .kb-board-full helper stays as a no-op convenience class so any
   leftover HTML referencing it still picks up sensible defaults. */
.kb-board-full { width: 100%; }

/* Legacy class kept for the inner detail markup styling */
.kb-detail-empty, .kb-detail-loading { font-size: 11px; color: var(--text-subtle); padding: 20px 0; text-align: center; }
.kb-det-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.kb-det-stages { display: flex; gap: 3px; margin-bottom: 10px; }
.kb-det-stg { font-size: 8px; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.kb-stg-done { background: var(--ok); color: var(--ok-text); }
.kb-stg-cur { background: var(--primary); color: #fff; }
.kb-stg-fut { background: var(--surface-2); color: var(--text-subtle); border: 1px solid var(--border); }
.kb-det-fields { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.kb-det-r { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); }
.kb-det-r span:first-child { color: var(--text-subtle); }
.kb-det-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.kb-det-report { font-size: 11px; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 8px; }
.kb-det-report p { margin: 4px 0; }
.wk-chip {
  font-size: 9px; padding: 2px 6px; border-radius: 4px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-muted);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: default;
}
.wk-chip-planned { opacity: .5; }
.wk-chip-ready { border-color: var(--primary); color: var(--primary); }
.wk-chip-stage-done { border-color: rgba(106,166,255,.3); color: var(--text-muted); }
.wk-chip-stage { font-size: 7px; font-weight: 700; background: var(--primary-dim); color: var(--primary); padding: 0 3px; border-radius: 2px; margin-right: 3px; }

/* Pipeline stage bar in popup */
.wk-popup-stages { display: flex; gap: 2px; padding: 6px 14px; border-bottom: 1px solid var(--border); }
.wk-stage { font-size: 9px; font-weight: 700; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; }
.wk-stage-done { background: var(--ok); color: var(--ok-text); }
.wk-stage-active { background: var(--primary); color: #fff; }
.wk-stage-future { background: var(--surface); color: var(--text-subtle); border: 1px solid var(--border); }
.wk-chip-done { color: var(--ok-text); border-color: rgba(74,222,128,.3); text-decoration: line-through; opacity: .6; }
.wk-chip-failed { color: var(--err-text); border-color: rgba(248,113,113,.3); }
.wk-chip-running { color: var(--primary); border-color: rgba(106,166,255,.4); background: var(--primary-dim); }

/* Legacy (kept for compat) */
.work-empty { font-size: 11px; color: var(--text-subtle); padding: 8px 4px; }
.work-add {
  font-size: 11px; color: var(--primary); cursor: pointer; padding: 6px 10px;
  border: 1px dashed var(--border); border-radius: 6px; text-align: center;
}
.work-add:hover { border-color: var(--primary); background: var(--primary-dim); }

/* ── 3-column main layout ── */
.ai-main {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 0;
}
.ai-col-left  { overflow: hidden; display: flex; flex-direction: column; }
.ai-col-center { display: flex; flex-direction: column; overflow: hidden; }
.ai-col-right { overflow: hidden; display: flex; flex-direction: column; }

/* ── Flow nodes (130×70) ── */
.fn-flow {
  display: flex; align-items: center; justify-content: center;
  gap: 0; width: 100%;
}
/* Orchestration: pipeline left + runtime right */
.fn-layout {
  display: flex; align-items: center; gap: 0; width: 100%;
  flex-wrap: wrap; justify-content: center;
}
.fn-pipeline {
  display: flex; align-items: center; gap: 0; flex-shrink: 0;
}
.fn-bridge {
  display: flex; align-items: center; padding: 0 2px;
}
.fn-runtime {
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  flex-shrink: 0; padding: 2px 0;
}
.fn-dev-pool {
  display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.fn {
  width: 130px; min-height: 70px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 8px 6px; border-radius: 8px;
  background: var(--surface-2); border: 1.5px solid var(--border);
  text-align: center; cursor: default;
  transition: border-color .2s, box-shadow .2s;
  flex-shrink: 0;
}
.fn[data-color="green"]  { background: var(--ok);         color: var(--ok-text);   border-color: rgba(74,222,128,.35); }
.fn[data-color="blue"]   { background: var(--primary-dim); color: var(--primary);  border-color: rgba(106,166,255,.4); }
.fn[data-color="yellow"] { background: var(--warn);       color: var(--warn-text); border-color: rgba(251,191,36,.35); }
.fn[data-color="red"]    { background: var(--err);        color: var(--err-text);  border-color: rgba(248,113,113,.35); }
.fn[data-color="gray"]   { background: var(--idle);       color: var(--idle-text); border-color: var(--text-subtle); }
.fn.fn-hi { box-shadow: 0 0 10px rgba(106,166,255,.4); }
.fn[data-color="green"].fn-hi  { box-shadow: 0 0 10px rgba(74,222,128,.35); }
.fn[data-color="yellow"].fn-hi { box-shadow: 0 0 10px rgba(251,191,36,.35); }
.fn.fn-active { border-color: var(--ok-text, #4ade80); box-shadow: 0 0 12px rgba(74,222,128,.45); }
.fn-load {
  font-size: 9px; font-weight: 700; color: var(--primary);
  background: var(--primary-dim); padding: 0 4px; border-radius: 3px;
  margin-left: 4px;
}

/* 5-row node content: r1=title r2=metrics r3=status r4=info r5=progress */
.fn-r1 { font-size: 13px; font-weight: 700; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 4px; }
.fn-r2 { font-size: 8px; color: inherit; opacity: .55; display: flex; gap: 6px; justify-content: center; min-height: 12px; }
.fn-r3 { font-size: 10px; font-weight: 600; opacity: .85; white-space: nowrap; text-align: center; min-height: 14px; }
.fn-r4 { font-size: 9px; opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; min-height: 12px; max-width: 120px; margin: 0 auto; }
.fn-r5 { min-height: 6px; width: 100%; margin-top: 2px; }

.fn-bar { width: 100%; height: 3px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.fn-bar-fill { height: 100%; background: currentColor; opacity: .6; border-radius: 2px; transition: width .5s ease; }

.fn-badge {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  font-size: 9px; font-weight: 700; background: rgba(255,255,255,.18);
  display: inline-flex; align-items: center; justify-content: center;
}

/* Backend indicator badges */
.fn-be {
  display: inline-block; font-size: 7px; font-weight: 700; padding: 1px 5px;
  border-radius: 3px; text-transform: uppercase; letter-spacing: .3px;
  margin-left: 3px; vertical-align: middle;
}
.fn-be-claude   { background: rgba(147,112,219,.25); color: #b39ddb; }
.fn-be-ollama   { background: rgba(251,146,60,.2);   color: #fb923c; }
.fn-be-fallback { background: rgba(251,191,36,.2);   color: #fbbf24; }
.fn-arrow {
  font-size: 18px; color: var(--border-strong); margin: 0 3px; flex-shrink: 0;
  transition: color .3s;
}
.fn-arrow-on { color: var(--primary); text-shadow: 0 0 6px rgba(106,166,255,.4); }
.fn-arrow-pulse { animation: fn-pulse-arrow 1s ease-in-out infinite; }

/* Transient node states */
.fn-pulse { animation: fn-pulse-node 1s ease-in-out infinite; }
.fn-done  { animation: fn-flash-done .8s ease-out; }
.fn-fail  { animation: fn-flash-fail .8s ease-out; }

@keyframes fn-pulse-node {
  0%, 100% { box-shadow: 0 0 4px rgba(106,166,255,.2); }
  50%      { box-shadow: 0 0 14px rgba(106,166,255,.5); }
}
@keyframes fn-pulse-arrow {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; text-shadow: 0 0 8px rgba(106,166,255,.6); }
}
@keyframes fn-flash-done {
  0%   { box-shadow: 0 0 16px rgba(74,222,128,.6); }
  100% { box-shadow: none; }
}
@keyframes fn-flash-fail {
  0%   { box-shadow: 0 0 16px rgba(248,113,113,.6); }
  100% { box-shadow: none; }
}

/* Summary (inline in control bar) */
.ai-summary-row { display: flex; gap: 10px; font-size: 11px; color: var(--text-muted); padding: 0; align-items: center; }
.ai-summary-item { display: flex; align-items: center; gap: 3px; }
.ai-summary-num { font-weight: 700; font-size: 12px; color: var(--text); }

/* Blockers */
.ai-blockers { padding: 4px 14px; }
.ai-blocker-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 6px; font-size: 11px; margin-bottom: 3px;
}
.ai-blocker-row:last-child { margin-bottom: 0; }
.ai-blocker-err  { background: var(--err);  color: var(--err-text);  border: 1px solid rgba(248,113,113,.25); }
.ai-blocker-warn { background: var(--warn); color: var(--warn-text); border: 1px solid rgba(251,191,36,.25); }
.ai-blocker-primary { background: var(--primary-dim); color: var(--primary); border: 1px solid rgba(106,166,255,.2); }
.ai-blocker-icon { flex-shrink: 0; font-size: 11px; }
.ai-blocker-msg  { flex: 1; min-width: 0; font-weight: 500; }
.ai-blocker-code { flex-shrink: 0; font-size: 9px; font-family: 'SF Mono','Fira Code',monospace; opacity: .5; }

/* Composer */
.ai-composer { padding: 8px 14px; }
.ai-composer-row { margin-bottom: 6px; }
.ai-composer-row:last-child { margin-bottom: 0; }
.ai-comp-textarea { resize: vertical; min-height: 32px; max-height: 80px; font-size: 12px; line-height: 1.4; }
.ai-comp-result { margin-top: 6px; padding: 5px 8px; border-radius: 5px; font-size: 11px; line-height: 1.3; }
.ai-comp-ok  { background: var(--ok);  color: var(--ok-text);  border: 1px solid rgba(74,222,128,.25); }
.ai-comp-err { background: var(--err); color: var(--err-text); border: 1px solid rgba(248,113,113,.25); }

/* Column headers */
.aid-rt-hdr {
  padding: 7px 12px; font-size: 10px; font-weight: 600; color: var(--text-subtle);
  text-transform: uppercase; letter-spacing: .4px; background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

/* Activity Feed */
.ai-activity-feed { padding: 4px 8px; max-height: 340px; overflow-y: auto; flex: 1; }
.ai-activity-row { display: flex; align-items: baseline; gap: 5px; padding: 2px 0; font-size: 10px; border-bottom: 1px solid var(--border); }
.ai-activity-row:last-child { border-bottom: none; }
.ai-activity-ts  { flex-shrink: 0; width: 32px; color: var(--text-subtle); font-family: 'SF Mono','Fira Code',monospace; font-size: 9px; }
.ai-activity-src { flex-shrink: 0; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--primary); font-weight: 600; font-size: 9px; }
.ai-activity-msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }

/* Task Table */
.ai-task-table { max-height: 340px; overflow-y: auto; flex: 1; }
.ai-task-hdr, .ai-task-row { display: flex; align-items: center; gap: 5px; padding: 3px 8px; font-size: 10px; }
.ai-task-hdr {
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  color: var(--text-subtle); font-weight: 600; font-size: 9px;
  text-transform: uppercase; letter-spacing: .3px; position: sticky; top: 0; z-index: 1;
}
.ai-task-row { border-bottom: 1px solid var(--border); color: var(--text); }
.ai-task-row:last-child { border-bottom: none; }
.ai-task-row.ai-task-child { padding-left: 16px; background: var(--surface-2); font-size: 9px; }
.ai-job-hdr {
  display: flex; align-items: center; gap: 6px; padding: 4px 8px;
  font-size: 11px; font-weight: 600; color: var(--text);
  border-bottom: 1px solid var(--border); background: var(--surface);
}
.ai-job-hdr:hover { background: var(--hover); }
.ai-job-chevron { font-size: 8px; color: var(--text-subtle); width: 12px; }
.ai-job-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-job-progress { font-size: 9px; font-weight: 400; color: var(--text-muted); }
.ai-task-row:hover { background: var(--hover); }
.ai-task-id { font-family: 'SF Mono','Fira Code',monospace; font-size: 9px; color: var(--text-subtle); }
.ai-task-step, .ai-task-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-task-step  { color: var(--text-muted); }
.ai-task-title { color: var(--text); }

/* Task action buttons */
.ai-ta-btn {
  border: none; background: transparent; cursor: pointer; padding: 1px 4px;
  font-size: 11px; border-radius: 3px; line-height: 1; transition: background .15s;
  color: var(--text-muted);
}
.ai-ta-btn:hover { background: var(--surface-2); }
.ai-ta-retry { color: var(--primary); }
.ai-ta-retry:hover { background: var(--primary-dim); }
.ai-ta-approve { color: var(--ok-text); }
.ai-ta-approve:hover { background: var(--ok); }
.ai-ta-block { color: var(--err-text); }
.ai-ta-block:hover { background: var(--err); }
.ai-ta-reset { color: var(--warn-text); }
.ai-ta-reset:hover { background: var(--warn); }

/* Selected task row */
.ai-task-row-sel { background: var(--primary-dim) !important; border-left: 2px solid var(--primary); }

/* ── Task Detail Panel ── */
.ai-detail {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  margin-top: 8px; overflow: hidden;
}

.ai-det-hdr {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.ai-det-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.ai-det-meta  { display: flex; align-items: center; gap: 4px; }

.ai-det-body { padding: 10px 14px; }

.ai-det-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; margin-bottom: 8px;
}
.ai-det-row { display: flex; justify-content: space-between; font-size: 10px; padding: 1px 0; }
.ai-det-label { color: var(--text-muted); }
.ai-det-val   { color: var(--text); font-weight: 500; }

.ai-det-section {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
  color: var(--text-subtle); margin: 8px 0 4px; padding-top: 6px; border-top: 1px solid var(--border);
}

.ai-det-steps { display: flex; flex-direction: column; gap: 3px; }
.ai-det-step  { display: flex; align-items: center; gap: 6px; font-size: 10px; }

.ai-det-timeline { display: flex; flex-direction: column; gap: 2px; max-height: 100px; overflow-y: auto; }
.ai-det-event    { display: flex; align-items: baseline; gap: 6px; }

.ai-det-actions {
  display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
}

/* ─── AI-WF-026: derived_state badges ─────────────────────────────────── */
/* One single badge per task driven by observability.derived_state.       */
.ds-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.5;
  border: 1px solid transparent;
  white-space: nowrap;
}
.ds-running-ok      { background: var(--ok);   color: var(--ok-text);   border-color: var(--ok-border);   animation: dsPulse 1.6s ease-in-out infinite; }
.ds-waiting-manual  { background: var(--warn); color: var(--warn-text); border-color: var(--warn-border); }
.ds-blocked-dependency { background: rgba(251,146,60,.12); color: #fb923c; border-color: rgba(251,146,60,.35); }
.ds-failed-step     { background: var(--err);  color: var(--err-text);  border-color: var(--err-border); }
.ds-stale-lock      { background: var(--err);  color: var(--err-text);  border-color: var(--err-border); animation: dsBlink 0.9s steps(2) infinite; }
.ds-idle-ready      { background: rgba(148,163,184,.12); color: #94a3b8; border-color: rgba(148,163,184,.35); }
.ds-planned         { background: var(--primary-dim); color: var(--primary); border-color: rgba(106,166,255,.3); }
.ds-done            { background: var(--ok);   color: var(--ok-text);   border-color: var(--ok-border); }
.ds-blocked-other   { background: var(--err);  color: var(--err-text);  border-color: var(--err-border); }

@keyframes dsPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,.55); }
  50%      { box-shadow: 0 0 0 4px rgba(74,222,128,0); }
}
@keyframes dsBlink {
  0%, 100% { background: var(--err);  color: var(--err-text); }
  50%      { background: var(--err-text); color: #1a0a0a; }
}

/* Compact metadata strip under task title (work-board card / list rows) */
.ds-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 3px;
  font-size: 10px;
  color: var(--text-muted);
  font-family: inherit;
}
.ds-meta-item { display: inline-flex; gap: 3px; align-items: center; }
.ds-meta-item strong { color: var(--text-subtle); font-weight: 600; }
.ds-meta-item code   { font-family: monospace; font-size: 9px; color: var(--text-subtle); }

/* STALE_LOCK loud banner with force-release action */
.ds-stale-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0;
  padding: 10px 14px;
  background: var(--err);
  border: 2px solid var(--err-text);
  border-radius: 4px;
  animation: dsBlink 1s steps(2) infinite;
}
.ds-stale-banner-msg { font-size: 13px; font-weight: 700; color: var(--err-text); }
.ds-stale-banner-msg small { display: block; font-size: 10px; font-weight: 400; opacity: .8; }
.ds-stale-banner-btn {
  background: var(--err-text);
  color: #1a0a0a;
  border: none;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 11px;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.ds-stale-banner-btn:hover { opacity: .85; }

/* NUC worker panel inside dashboard AI workflow card */
.nuc-worker-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--surface2, rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 11px;
}
.nuc-worker-panel .nwp-hdr {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-subtle);
  font-weight: 700;
  margin-bottom: 2px;
}
.nuc-worker-panel .nwp-row { display: flex; justify-content: space-between; gap: 6px; }
.nuc-worker-panel .nwp-row span:first-child { color: var(--text-muted); }
.nuc-worker-panel .nwp-row span:last-child  { color: var(--text); font-family: monospace; font-size: 10px; text-align: right; }
.nuc-worker-panel .nwp-empty { color: var(--text-muted); font-style: italic; }

/* ─── AI-WF-027: compact runtime worker cards ──────────────────────── */
.wkr-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.wkr-card {
  background: var(--surface2, rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 11px;
}
.wkr-card-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.wkr-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.wkr-dot-on  { background: var(--ok-text);  box-shadow: 0 0 4px var(--ok-text); }
.wkr-dot-off { background: var(--text-muted); }
.wkr-name   { font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkr-host   { font-family: monospace; font-size: 10px; color: var(--text-subtle); }
.wkr-status { font-size: 10px; color: var(--text-muted); }

.wkr-gauges { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.wkr-gauge {}
.wkr-gauge-row { display: flex; justify-content: space-between; font-size: 10px; margin-bottom: 1px; }
.wkr-gauge-row span { color: var(--text-muted); }
.wkr-gauge-bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.wkr-gauge-fill { height: 100%; transition: width .3s, background .3s; }

.wkr-meta { display: flex; flex-direction: column; gap: 2px; }
.wkr-meta-row { display: flex; justify-content: space-between; font-size: 10px; gap: 6px; }
.wkr-meta-row span { color: var(--text-muted); }
.wkr-meta-row strong { color: var(--text); font-weight: 600; font-family: monospace; font-size: 10px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── AI-WF-028: AI Flow panel ────────────────────────────────────── */
.ai-flow-card { margin-bottom: 14px; }
.ai-flow-body { padding: 10px 12px; min-height: 80px; }

.ai-flow-idle {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 6px; font-size: 13px; color: var(--text-muted);
}
.ai-flow-idle-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ok-text); box-shadow: 0 0 6px var(--ok-text);
}
.ai-flow-idle strong { color: var(--ok-text); font-weight: 700; }
.ai-flow-idle-sub  { font-size: 11px; }

/* AI-WF-033B: pipeline grid is now strictly horizontal.
   - Without PC: Planner → Queue → NUC → Status  (4 nodes + 3 arrows)
   - With PC:    Planner → Queue → NUC → PC → Status  (5 nodes + 4 arrows)
   Heights of the OUTER container (.ai-flow-card / .ai-flow-body) are
   intentionally unchanged — only the inner alignment is fixed via
   align-items: center so the nodes sit vertically centered in the
   pre-existing card height. */
.ai-flow-grid {
  display: grid;
  gap: 14px;
  align-items: center;
  overflow-x: auto;
}
.ai-flow-grid-nopc {
  /* Planner | → | Queue | → | NUC | → | Status */
  grid-template-columns: 220px auto 220px auto 220px auto 1fr;
}
.ai-flow-grid-pc {
  /* Planner | → | Queue | → | NUC | → | PC | → | Status */
  grid-template-columns: 220px auto 220px auto 220px auto 220px auto 1fr;
}
.ai-flow-col {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.ai-flow-col-status {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
  max-height: 100%;
  overflow-y: auto;
}
.ai-flow-arrow {
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--text-subtle); padding: 0 2px;
  font-weight: 700;
}

/* Generic flow node */
.afn {
  background: var(--surface2, rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-subtle);
  border-radius: 3px;
  padding: 6px 8px;
  font-size: 11px;
  display: flex; flex-direction: column; gap: 2px;
}
.afn-hdr {
  font-size: 9px; text-transform: uppercase; letter-spacing: .5px;
  font-weight: 700; color: var(--text-subtle);
  display: flex; align-items: center; gap: 4px;
}
.afn-line { font-size: 11px; color: var(--text); font-weight: 600; }
.afn-line.afn-big { font-size: 22px; line-height: 1; padding: 2px 0; color: var(--primary); font-weight: 800; }
.afn-line.afn-bold { font-weight: 700; }
.afn-line.afn-mono { font-family: monospace; font-size: 10px; }
.afn-sub  { font-size: 10px; color: var(--text-muted); }
.afn-sub code { font-family: monospace; }
.afn-sub strong { color: var(--text); font-weight: 600; }
.afn-empty { font-style: italic; color: var(--text-muted); border-left-color: transparent; }

.afn-grid2 {
  display: grid; grid-template-columns: auto 1fr;
  gap: 1px 6px; font-size: 10px; align-items: baseline;
}
.afn-grid2 span    { color: var(--text-muted); }
.afn-grid2 strong  { font-weight: 700; }

/* State-tinted borders */
.afn-planner       { border-left-color: var(--primary); }
.afn-queue         { border-left-color: var(--text-subtle); }
.afn-queue.afn-active { border-left-color: var(--primary); }
.afn-worker        { border-left-color: var(--text-subtle); }
.afn-worker.afn-running { border-left-color: var(--ok-text);  animation: dsPulse 1.6s ease-in-out infinite; }
.afn-worker.afn-idle    { border-left-color: var(--text-muted); }
.afn-worker.afn-offline { border-left-color: var(--err-text); opacity: .6; }
.afn-task.afn-running   { border-left-color: var(--ok-text);  animation: dsPulse 1.6s ease-in-out infinite; }
.afn-state-manual  { border-left-color: var(--warn-text); background: rgba(251,191,36,.04); }
.afn-state-blocked { border-left-color: #fb923c;        background: rgba(251,146,60,.04); }
.afn-state-failed  { border-left-color: var(--err-text); background: rgba(248,113,113,.04); }
.afn-state-ok      { border-left-color: var(--ok-text); background: rgba(74,222,128,.04); }

.afn-count {
  margin-left: auto; padding: 0 5px; border-radius: 8px;
  background: var(--surface, rgba(0,0,0,.2)); font-size: 9px;
  color: var(--text-subtle);
}

/* Tiny task pill inside state bucket nodes */
.afn-tiny {
  display: flex; justify-content: space-between; gap: 4px;
  padding: 2px 4px; margin-top: 3px;
  background: var(--surface, rgba(0,0,0,.15));
  border-radius: 2px; font-size: 10px;
}
.afn-tiny-title { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.afn-tiny-meta  { color: var(--text-muted); font-family: monospace; font-size: 9px; }

/* ─── AI-WF-031: node-type tag + inline approval UX ─────────────── */
.afn-nt {
  display: inline-block;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 2px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .4px;
  border: 1px solid transparent;
}
.afn-nt-auto     { color: var(--text-subtle); border-color: var(--border); }
.afn-nt-approval { color: var(--warn-text);  border-color: var(--warn-border); background: var(--warn); }
.afn-nt-review   { color: var(--primary);    border-color: rgba(106,166,255,.3); background: var(--primary-dim); }
.afn-nt-decision { color: var(--primary);    border-color: rgba(106,166,255,.3); background: var(--primary-dim); }
.afn-nt-agent    { color: #94a3b8;           border-color: rgba(148,163,184,.3); }

/* Full approval node — orange, blinking */
.afn-approval {
  border-left-color: var(--warn-text);
  background: rgba(251,191,36,.06);
  animation: dsBlink 1.4s steps(2) infinite;
}
.afn-sub-warn { color: var(--warn-text); font-weight: 600; }
.afn-approval-actions {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.afn-btn {
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  background: var(--surface, rgba(0,0,0,.2));
  color: var(--text);
}
.afn-btn-accept { background: var(--ok-text);   color: #0a1a0a; border-color: var(--ok-border); }
.afn-btn-reject { background: var(--err-text);  color: #1a0a0a; border-color: var(--err-border); }
.afn-btn-open   { background: transparent;      color: var(--text-subtle); }
.afn-btn:hover  { opacity: .85; }

/* ─── AI-WF-033B: waiting-user row + prominent APPROVE CTA ─────── */
.ai-task-row.waiting-user-row {
  border-left: 3px solid var(--warn-text);
  background: rgba(251,191,36,.06);
  animation: dsPulse 1.4s ease-in-out infinite;
}
.waiting-user-label {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 6px;
  background: var(--warn);
  color: var(--warn-text);
  border: 1px solid var(--warn-border);
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
}
.waiting-user-btn {
  min-width: 110px;
  height: 30px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .5px;
  border-radius: 6px;
  border: 1px solid var(--warn-border);
  background: var(--warn-text);
  color: #1a0a00;
  cursor: pointer;
  animation: dsBlink 1s steps(2) infinite;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(251,191,36,.6);
}
.waiting-user-btn:hover { filter: brightness(1.1); }
.ai-ta-reject {
  border-color: var(--err-border) !important;
  color: var(--err-text) !important;
}

/* AI-WF-034B: inline "Aufgabe löschen" button on every Aufgabe card */
.kb-card-del {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
  margin-left: 4px;
  flex-shrink: 0;
  line-height: 1;
}
.kb-card-del:hover {
  border-color: var(--err-border);
  color: var(--err-text);
  background: var(--err);
}

/* AI-WF-039: DONE Aufgaben sind unveränderlich (kein Delete-Button)
   und tragen einen "COPY PROMPT" Button. Der Titel ist
   durchgestrichen + leicht ausgeblendet, damit der Operator sofort
   erkennt: das ist History, keine offene Arbeit. */
.kb-card.kb-card-done .kb-card-title {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: 0.65;
}
.kb-card-copy {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .4px;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  margin-left: 4px;
  flex-shrink: 0;
  line-height: 1.5;
  white-space: nowrap;
}
.kb-card-copy:hover {
  border-color: var(--ok-border);
  color: var(--ok-text);
  background: var(--ok);
}
.kb-card-copy.kb-card-copy-ok {
  border-color: var(--ok-border);
  color: var(--ok-text);
  background: var(--ok);
}

/* AI-WF-042: prominent inline action buttons on task rows.
   Same visual weight as the AI-WF-033B APPROVE button so the
   operator can never miss what to click on a stuck task.
   Used for ✓ APPROVE (WAITING_MANUAL) and ↻ RETRY (FAILED). */
.task-row-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: 26px;
  padding: 0 12px;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  border-radius: 5px;
  border: 1px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1;
}
.task-row-cta-approve {
  background: var(--warn-text);
  color: #1a0a00;
  border-color: var(--warn-border);
  animation: dsBlink 1s steps(2) infinite;
}
.task-row-cta-retry {
  background: var(--err-text);
  color: #1a0000;
  border-color: var(--err-border);
  animation: dsBlink 1.1s steps(2) infinite;
}
.task-row-cta-recovering {
  background: var(--primary-dim);
  color: var(--primary);
  border-color: rgba(106,166,255,.35);
  cursor: default;
  animation: dsPulse 1.4s ease-in-out infinite;
}
.task-row-cta:hover { filter: brightness(1.1); }

/* Mark the whole row when it's waiting on the operator so the eye
   immediately catches it. */
.task-row.task-row-failed,
.task-row.task-row-waiting {
  border-left-width: 3px;
}
.task-row.task-row-failed {
  border-left-color: var(--err-text);
  background: rgba(248,113,113,.04);
}

/* ─── AI-WF-035: Work page sections ─────────────────────────────── */
.wk-section {
  margin: 14px 0;
  padding: 0;
}
.wk-section-hdr {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text-subtle);
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}

/* AI-WF-035 (revised): "+ Neue Aufgabe" CTA in the work header,
   visually separated from the project / domain tabs. */
.wk-header-cta {
  margin-left: 14px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 4px;
}

/* AI-WF-035 (revised): board section uses the full remaining
   vertical space so the inline planer no longer eats it. */
.wk-section-board {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.wk-section-board .kb-board {
  flex: 1 1 auto;
  min-height: 0;
}

/* AI-WF-035: monitor body INSIDE the Work page — same render
   helper as the Dashboard would have used. Height is intentionally
   driven by content, no fixed value. */
.wk-monitor-body {
  padding: 10px 12px;
  min-height: 80px;
}

/* AI-WF-035: inline Aufgaben Planer */
.wk-section-planer { background: var(--surface2, rgba(255,255,255,.02)); border-radius: 4px; }
.wk-planer-body {
  padding: 10px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 720px;
}
.wk-planer-lbl {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-subtle);
  margin-top: 4px;
}
.wk-planer-input {
  background: var(--surface, rgba(0,0,0,.2));
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 3px;
  font-family: inherit;
  outline: none;
}
.wk-planer-input:focus { border-color: var(--primary); }
.wk-planer-prompt { resize: vertical; min-height: 70px; }
.wk-planer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.wk-planer-submit {
  padding: 6px 18px;
  font-weight: 700;
  font-size: 12px;
}
.wk-planer-status {
  font-size: 11px;
  color: var(--text-muted);
}
.wk-planer-status-ok { color: var(--ok-text); }
.wk-planer-status-err { color: var(--err-text); }

/* ─── AI-WF-035: USER + CORE nodes for the Workflow Monitor ───── */
.afn-user {
  border-left-color: var(--primary);
  background: rgba(106,166,255,.05);
}
.afn-core         { border-left-color: var(--text-subtle); }
.afn-core-idle    { border-left-color: var(--text-muted); }
.afn-core-ready   { border-left-color: var(--primary); }
.afn-core-planning {
  border-left-color: var(--primary);
  animation: dsPulse 1.6s ease-in-out infinite;
}

/* ── AI-WF-044: simplified Work board ───────────────────────────────── */
.wf044-board {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0;
}
.wf044-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px 12px;
  border-bottom: 1px solid var(--border);
}
.wf044-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.wf044-count {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-elev);
  padding: 2px 8px;
  border-radius: 10px;
}
.wf044-reset-btn {
  font-size: 12px;
  padding: 4px 10px;
}
.wf044-create-cta {
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
}
.wf044-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wf044-card {
  background: var(--bg-card, var(--bg-elev));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wf044-card-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wf044-card-head .wf044-prompt {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wf044-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: .2px;
}
.wf044-status-prompt     { background: rgba(100,116,139,.16); color: #64748b; }
.wf044-status-running    { background: rgba(59,130,246,.16);  color: #3b82f6; }
.wf044-status-recovering { background: rgba(245,158,11,.16);  color: #d97706; }
.wf044-status-done       { background: rgba(34,197,94,.16);   color: #16a34a; }
.wf044-status-failed     { background: rgba(239,68,68,.16);   color: #dc2626; }
.wf044-badge-waiting     {
  background: rgba(245,158,11,.10);
  color: var(--warn-text, #d97706);
  text-transform: none;
  font-weight: 500;
}
.wf044-badge-retry       {
  background: rgba(245,158,11,.16);
  color: #d97706;
  text-transform: none;
}
.wf044-card-meta {
  font-size: 11px;
  color: var(--text-muted);
}
.wf044-meta-label { color: var(--text-muted); opacity: .7; }
.wf044-meta-sep   { color: var(--text-muted); opacity: .5; padding: 0 2px; }
.wf044-executor   { font-family: monospace; color: var(--text); }
.wf044-card-report {
  flex-direction: column;
  align-items: stretch;
  background: var(--bg, transparent);
  border-radius: 6px;
  padding: 6px 10px;
  border: 1px dashed var(--border);
}
.wf044-report-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 2px;
}
.wf044-report-text {
  font-size: 12px;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.wf044-muted { color: var(--text-muted); font-style: italic; }
.wf044-card-actions {
  justify-content: flex-end;
  gap: 6px;
}
.wf044-card-actions button {
  font-size: 11px;
  padding: 3px 10px;
}
.wf044-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  gap: 8px;
  color: var(--text-muted);
  text-align: center;
}
.wf044-empty-icon  { font-size: 32px; }
.wf044-empty-title { font-size: 16px; font-weight: 600; color: var(--text); }
.wf044-empty-sub   { font-size: 13px; max-width: 360px; }
.wf044-empty-cta   { margin-top: 12px; }


/* ── Workboard (read-only status board) ──────────────────────────────── */

.wb-empty-state {
  color: var(--text-muted); padding: 48px; text-align: center; font-size: 14px;
}

/* Filters */
.wb-filters {
  display: flex; gap: 4px; margin-bottom: 10px; padding: 2px 0;
}
.wb-filter {
  font-size: 11px; padding: 3px 10px; border-radius: 4px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-muted);
}
.wb-filter:hover { border-color: var(--fc, var(--text)); color: var(--fc, var(--text)); }
.wb-filter-active {
  background: var(--surface-2); border-color: var(--fc, var(--primary));
  color: var(--fc, var(--primary)); font-weight: 600;
}

/* Kanban board */
.wb-kanban {
  display: flex; gap: 8px; height: calc(100vh - 220px); overflow-x: auto;
}
.wb-col {
  flex: 1 1 0%; min-width: 140px; display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border);
}
.wb-col-final { opacity: 0.7; }
.wb-col-final.wb-col-collapsed .wb-col-body { display: none; }
.wb-col-toggle {
  cursor: pointer; font-size: 10px; color: var(--text-muted); margin-left: 6px;
  background: none; border: none; padding: 0 4px;
}
.wb-col-toggle:hover { color: var(--text); }
.wb-col-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; background: var(--surface-2);
}
.wb-col-count {
  font-size: 10px; background: var(--border); color: var(--text); padding: 1px 7px;
  border-radius: 10px; min-width: 18px; text-align: center; font-weight: 600;
}
.wb-col-body {
  flex: 1; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 6px;
}
.wb-col-empty { min-height: 30px; }

/* Task card */
.wb-task {
  padding: 10px 12px; background: var(--surface-2); border-radius: 8px;
  border: 1px solid var(--border); font-size: 12px;
}
.wb-task:hover { border-color: var(--border-strong); }
.wb-task-final { opacity: 0.6; }
.wb-task-header { display: flex; gap: 5px; margin-bottom: 6px; }
.wb-task-title { font-weight: 600; font-size: 13px; line-height: 1.4; color: var(--text); }
.wb-task-obj {
  font-size: 11px; color: var(--text-muted); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Badges */
.wb-badge {
  font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.3px;
}

/* Fields (prompt/report) */
.wb-task-field {
  display: flex; align-items: start; gap: 6px; margin-top: 6px; font-size: 11px;
  padding: 6px 8px; background: var(--bg); border-radius: 5px; border: 1px solid var(--border);
}
.wb-field-tag {
  font-size: 9px; font-weight: 700; padding: 2px 5px; border-radius: 3px; flex-shrink: 0;
  margin-top: 1px;
}
.wb-field-prompt { background: rgba(106,166,255,.15); color: #60a5fa; }
.wb-field-report { background: rgba(74,222,128,.15); color: #4ade80; }
.wb-field-preview {
  flex: 1; color: var(--text-muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.wb-copy {
  font-size: 9px; padding: 0 5px; border-radius: 3px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-muted);
  flex-shrink: 0;
}
.wb-copy:hover { background: var(--primary-dim); color: var(--primary); border-color: var(--primary); }

/* Files changed */
.wb-task-files { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.wb-file {
  font-size: 9px; padding: 1px 4px; border-radius: 2px;
  background: var(--surface); color: var(--text-muted); border: 1px solid var(--border);
}

/* Objectives summary */
.wb-obj-summary {
  margin-top: 16px; padding: 12px; background: var(--surface); border-radius: var(--radius);
  border: 1px solid var(--border);
}
.wb-obj-summary-title {
  font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 8px;
}
.wb-obj-row {
  display: flex; align-items: center; gap: 8px; padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.wb-obj-row:last-child { border-bottom: none; }
.wb-obj-row-title { flex: 1; font-size: 12px; color: var(--text); }
.wb-obj-progress {
  width: 60px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden;
}
.wb-obj-progress-fill { height: 100%; background: var(--ok-text); border-radius: 2px; }
.wb-obj-row-count { font-size: 10px; color: var(--text-muted); min-width: 30px; text-align: right; }

/* ── Development Module ──────────────────────────────────────────────────── */

.dev-subnav {
  display: flex; gap: 4px; margin-bottom: 16px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.dev-subnav-btn {
  padding: 6px 16px; font-size: 12px; font-weight: 600; border-radius: 6px;
  background: transparent; border: 1px solid var(--border); color: var(--text-muted);
  cursor: pointer; transition: all .15s;
}
.dev-subnav-btn:hover { background: var(--surface-2); color: var(--text); }
.dev-subnav-btn.active { background: var(--primary-dim, rgba(96,165,250,.15)); color: var(--primary, #60a5fa); border-color: var(--primary, #60a5fa); }

/* System Map grid */
.dev-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }

.dev-theme-card {
  padding: 16px; background: var(--surface); border-radius: 10px;
  border: 1px solid var(--border); cursor: pointer; transition: all .15s;
  border-left: 3px solid var(--tc, var(--border));
}
.dev-theme-card:hover { border-color: var(--tc); background: var(--surface-2); }
.dev-theme-hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.dev-theme-icon { font-size: 18px; color: var(--tc); }
.dev-theme-letter {
  font-size: 11px; font-weight: 800; color: var(--tc, var(--text-muted));
  width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px; background: var(--tc, var(--border)); color: #fff; flex-shrink: 0;
  font-family: monospace;
}
.dev-theme-label { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: 0.5px; }

.dev-progress-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dev-progress-bar { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.dev-progress-fill { height: 100%; border-radius: 3px; transition: width .3s; }
.dev-progress-pct { font-size: 12px; font-weight: 700; color: var(--text); min-width: 32px; text-align: right; }

.dev-theme-stats { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--text-muted); }
.dev-stat-done { color: #4ade80; }
.dev-stat-active { color: #60a5fa; }
.dev-stat-todo { color: #9aa0a6; }
.dev-stat-planned { color: #6b7280; }

/* Theme detail / Objective list */
.dev-detail { max-width: 800px; }
.dev-back {
  font-size: 12px; color: var(--text-muted); background: none; border: none; cursor: pointer;
  padding: 4px 0; margin-bottom: 8px;
}
.dev-back:hover { color: var(--text); }
.dev-detail-hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.dev-empty { font-size: 13px; color: var(--text-muted); padding: 24px 0; }

.dev-obj-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--surface); border-radius: 8px; border: 1px solid var(--border);
  margin-bottom: 6px; cursor: pointer; transition: all .15s;
}
.dev-obj-row:hover { border-color: var(--border-strong, var(--border)); background: var(--surface-2); }
.dev-obj-id { font-size: 10px; font-weight: 700; color: var(--text-muted); font-family: monospace; min-width: 60px; }
.dev-obj-title { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); }
.dev-obj-progress { font-size: 11px; color: var(--text-muted); }

.dev-obj-badge {
  font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.dev-badge-done { background: rgba(74,222,128,.15); color: #4ade80; }
.dev-badge-active { background: rgba(96,165,250,.15); color: #60a5fa; }
.dev-badge-todo { background: rgba(154,160,166,.15); color: #9aa0a6; }
.dev-badge-planned { background: rgba(154,160,166,.1); color: #6b7280; border: 1px dashed rgba(154,160,166,.3); }
.dev-badge-failed { background: rgba(248,113,113,.15); color: #f87171; }

.dev-obj-done { opacity: 0.55; }
.dev-obj-planned { opacity: 0.5; border-style: dashed; }
.dev-obj-active { border-left: 3px solid #60a5fa; }

.dev-obj-slug {
  font-size: 9px; font-weight: 600; color: var(--text-muted); font-family: monospace;
  min-width: 80px; letter-spacing: 0.3px;
}
.dev-obj-group-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); margin: 16px 0 6px 0; padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

/* Objective detail */
.dev-obj-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.dev-obj-title-lg { font-size: 16px; font-weight: 700; color: var(--text); }

.dev-pipeline {
  display: flex; align-items: center; gap: 4px; margin-bottom: 20px;
  padding: 12px; background: var(--surface); border-radius: 8px; border: 1px solid var(--border);
  overflow-x: auto;
}
.dev-pipe-stage {
  text-align: center; padding: 6px 12px; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--border); min-width: 70px;
}
.dev-pipe-label { font-size: 10px; font-weight: 700; color: var(--sc); text-transform: uppercase; }
.dev-pipe-count { font-size: 16px; font-weight: 700; color: var(--text); }
.dev-pipe-arrow { font-size: 14px; color: var(--text-muted); }

.dev-stage-group { margin-bottom: 16px; }
.dev-stage-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }

.dev-task-card {
  padding: 10px 12px; background: var(--surface); border-radius: 6px;
  border: 1px solid var(--border); margin-bottom: 4px; font-size: 12px;
}
.dev-task-card:hover { border-color: var(--border-strong, var(--border)); }
.dev-task-failed { border-left: 3px solid #f87171; }
.dev-task-title { font-weight: 600; color: var(--text); }
.dev-task-claim { font-size: 10px; color: var(--text-muted); margin-left: 8px; }
.dev-task-report { font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }
.dev-task-files { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.dev-file-tag {
  font-size: 9px; padding: 1px 5px; border-radius: 3px;
  background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border);
  font-family: monospace;
}

/* Archive */
.dev-archive-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.dev-archive-card {
  padding: 14px 16px; background: var(--surface); border-radius: 8px;
  border: 1px solid var(--border); border-left: 3px solid var(--tc, var(--border));
  margin-bottom: 8px;
}
.dev-archive-hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dev-archive-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); }
.dev-archive-date { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.dev-archive-summary { font-size: 11px; color: var(--text-muted); margin: 6px 0; padding-left: 16px; line-height: 1.6; }
.dev-archive-files { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; }

/* Dashboard cards */
.dev-dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.dev-dash-card { min-height: 0; }
.dev-dash-big { font-size: 28px; font-weight: 700; color: var(--text); }
.dev-dash-row {
  display: flex; align-items: center; gap: 6px; padding: 5px 0;
  border-bottom: 1px solid var(--border); font-size: 12px;
}
.dev-dash-row:last-child { border-bottom: none; }
.dev-dash-row-title { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-dash-row-count { font-size: 10px; color: var(--text-muted); }

/* ── NORI-PORTAL-AGENTS-PROJECTS-READABILITY-PASS-001 ── */

/* Agent group sections (DEV / LAB / CUSTOMER) on the Agents page.
   Each group renders as a card with its own header + agent table, so
   the boundary between categories is unambiguous at a glance. */
.cat-section {
  margin: 0 0 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
/* NORI-PORTAL-UX-CSS-DENSITY-PASS-001: stronger left accent (3 → 6 px) plus
   a subtle category-tinted background on the whole section so the four
   buckets read as visually distinct surfaces, not just colored borders. */
.cat-section-dev {
  border-left: 6px solid #94a3b8;
  background:
    linear-gradient(rgba(148,163,184,0.10), rgba(148,163,184,0.07)),
    var(--surface);
  box-shadow: inset 0 1px 0 rgba(148,163,184,0.08);
}
.cat-section-lab {
  border-left: 6px solid #38bdf8;
  background:
    linear-gradient(rgba(56,189,248,0.11), rgba(56,189,248,0.07)),
    var(--surface);
  box-shadow: inset 0 1px 0 rgba(56,189,248,0.10);
}
.cat-section-customer {
  border-left: 6px solid #22c55e;
  background:
    linear-gradient(rgba(34,197,94,0.10), rgba(34,197,94,0.06)),
    var(--surface);
  box-shadow: inset 0 1px 0 rgba(34,197,94,0.10);
}
.cat-section-pending {
  border-left: 6px solid #fbbf24;
  background:
    linear-gradient(rgba(251,191,36,0.12), rgba(251,191,36,0.07)),
    var(--surface);
  box-shadow: inset 0 1px 0 rgba(251,191,36,0.12);
}

.cat-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent);
}
.cat-section-titlewrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.cat-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.3px;
}
.cat-section-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}
.cat-section-count {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: var(--surface-2, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.cat-section-count .num { color: var(--text); font-weight: 700; }

/* Cleaner agent row layout for the categorized list. We keep the existing
   .agent-row class for hover/highlight/border states and only override the
   grid template here so each visible cell aligns with its header above. */
.cat-agent-row {
  grid-template-columns:
    minmax(220px, 1.2fr)  /* name + id      */
    100px                 /* category badge */
    minmax(140px, 1.1fr)  /* project line   */
    115px                 /* VPN IP         */
    115px                 /* LAN IP         */
    80px                  /* version        */
    100px                 /* status pill    */
    115px                 /* deploy pill    */
    !important;
  padding: 14px 18px !important;
  align-items: center !important;
}
.cat-agent-header {
  grid-template-columns:
    minmax(220px, 1.2fr) 100px minmax(140px, 1.1fr)
    115px 115px 80px 100px 115px !important;
  padding: 8px 18px !important;
}

.cat-agent-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  line-height: 1.3;
  min-width: 0;
  letter-spacing: 0.1px;
}
.cat-agent-id {
  display: block;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.8;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cat-agent-proj {
  font-size: 12px;
  color: var(--text);
  line-height: 1.35;
  min-width: 0;
}
.cat-agent-proj .sub {
  display: block;
  font-size: 10.5px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cat-agent-mono {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11.5px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Category pill (DEV / LAB / CUSTOMER) — used on agent rows. Distinct from
   release-state badges so the eye doesn't conflate them. */
.cat-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}
.cat-badge.dev      { background: rgba(148,163,184,0.14); color: #cbd5e1; border-color: rgba(148,163,184,0.45); }
.cat-badge.lab      { background: rgba(56,189,248,0.12);  color: #7dd3fc; border-color: rgba(56,189,248,0.5); }
.cat-badge.customer { background: rgba(34,197,94,0.12);   color: #86efac; border-color: rgba(34,197,94,0.5); }
.cat-badge.pending  { background: rgba(251,191,36,0.12);  color: #fcd34d; border-color: rgba(251,191,36,0.5); }

/* ONLINE / OFFLINE pill. Slightly bolder than the existing dot-only marker
   so the operator can read status without parsing color. */
.online-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
}
.online-pill.on  { background: rgba(34,197,94,0.13);  color: #4ade80; border: 1px solid rgba(34,197,94,0.45); }
.online-pill.off { background: rgba(148,163,184,0.10); color: #94a3b8; border: 1px solid rgba(148,163,184,0.4); }
.online-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 6px currentColor;
}

/* Deploy badge (DEPLOY OK / NO DEPLOY / DEV SOURCE). Three states only;
   stays in sync with deploy_allowed and dev_source flags from /agents. */
.deploy-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.deploy-badge.ok  { background: rgba(34,197,94,0.14);  color: #4ade80; border: 1px solid rgba(34,197,94,0.45); }
.deploy-badge.no  { background: rgba(148,163,184,0.10); color: #94a3b8; border: 1px solid rgba(148,163,184,0.45); }
.deploy-badge.dev { background: rgba(56,189,248,0.12); color: #7dd3fc; border: 1px solid rgba(56,189,248,0.45); }

/* ── Project list row (split-tone live vs. stale) ── */
.proj-list-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 130px 90px 100px;
  gap: 14px;
  align-items: start;
  padding: 14px 18px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
  position: relative;
}
.proj-list-row:hover { background: var(--hover); }
.proj-list-row::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: transparent;
  transition: background .12s;
}
.proj-list-row:hover::before { background: var(--border-strong); }
.proj-list-row.agent-row-selected { background: var(--primary-dim) !important; }
.proj-list-row.agent-row-selected::before { background: var(--primary) !important; }

.proj-list-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.35;
  min-width: 0;
}
.proj-list-id {
  display: block;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.proj-list-loc {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.proj-list-customer {
  font-size: 12px;
  color: var(--text);
  align-self: center;
}
.proj-list-customer.empty { color: var(--text-muted); }
.proj-list-kind  { align-self: center; }
.proj-list-count { font-size: 12px; color: var(--text); align-self: center; }
.proj-list-count .stale { color: var(--text-muted); font-size: 11px; margin-left: 4px; }

/* "Live agents" pill row (always visible, prominent) */
.proj-live-line {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 10px;
}
.proj-live-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(34,197,94,0.10);
  color: var(--text);
  font-size: 11.5px;
  border: 1px solid rgba(34,197,94,0.4);
}
.proj-live-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 5px rgba(34,197,94,0.5);
}
.proj-live-pill.off  { background: rgba(148,163,184,0.06); border-color: rgba(148,163,184,0.35); }
.proj-live-pill.off .dot { background: #94a3b8; box-shadow: none; }
.proj-live-empty {
  color: var(--text-muted);
  font-size: 11px;
  font-style: italic;
}

/* "Stale references" line — quieter than live pills, but still readable.
   Operator should immediately see this is metadata cleanup, not active. */
.proj-stale-line {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dotted var(--border);
  font-size: 10.5px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}
.proj-stale-line .label {
  text-transform: uppercase;
  font-weight: 600;
  margin-right: 6px;
  color: #fbbf24;
  letter-spacing: 0.4px;
}
.proj-stale-line .ids {
  font-family: 'SF Mono', 'Fira Code', monospace;
  text-decoration: line-through;
  color: var(--text-muted);
  opacity: 0.75;
}
.proj-stale-line .ids .sep { text-decoration: none; opacity: 0.6; }

/* Project detail "Stale references" subsection (under Agents card). */
.proj-detail-stale {
  padding: 8px 16px 12px;
  border-top: 1px dotted var(--border);
  font-size: 11px;
  color: var(--text-muted);
}
.proj-detail-stale .label {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-radius: 3px;
  background: rgba(251,191,36,0.10);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,0.35);
}
.proj-detail-stale .id {
  display: inline-block;
  margin: 0 4px 4px 0;
  padding: 1px 6px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: line-through;
  opacity: 0.85;
}

/* ── NORI-PORTAL-UX-CSS-DENSITY-PASS-001 (appendix) ─────────────────────
   New selectors for the agents-page readability pass. Kept in one block
   at the end of the file so they win the cascade and are easy to revert. */

/* Tinted section-header strip per category — gives the title row a clearer
   "this is the Dev / Lab / Customer / Pending bucket" cue before the eye
   reaches the agent cards. */
.cat-section-dev      .cat-section-header { background: linear-gradient(180deg, rgba(148,163,184,0.07), transparent); }
.cat-section-lab      .cat-section-header { background: linear-gradient(180deg, rgba(56,189,248,0.08),  transparent); }
.cat-section-customer .cat-section-header { background: linear-gradient(180deg, rgba(34,197,94,0.08),   transparent); }
.cat-section-pending  .cat-section-header { background: linear-gradient(180deg, rgba(251,191,36,0.10),  transparent); }

/* Pending Agents (#pending-section .card) is a stand-alone top-card outside
   the .cat-section family. Apply matching amber accent so it reads as part
   of the same group system. Only when the section is actually visible
   (#pending-section is display:none when there are zero pending agents,
   so the styling is implicitly compact-only-when-needed). */
#pending-section > .card {
  border-left: 6px solid #fbbf24;
  background:
    linear-gradient(rgba(251,191,36,0.05), rgba(251,191,36,0.05)),
    var(--surface);
}
#pending-section > .card > .card-header {
  background: linear-gradient(180deg, rgba(251,191,36,0.10), transparent);
}

/* Mono cells (VPN IP / LAN IP / Version) recede a bit so the eye lands on
   Name / Project / Status / Deploy first. Hover restores full readability
   for power-users scanning the row. */
.cat-agent-row .cat-agent-mono { font-size: 11px; }
.cat-agent-row [data-field="lan-ip"]  { opacity: 0.55; }
.cat-agent-row [data-field="version"] { opacity: 0.75; }
.cat-agent-row:hover [data-field="lan-ip"],
.cat-agent-row:hover [data-field="version"] { opacity: 1; }


/* ── NORI-PORTAL-UX-COLOR-SURFACE-PASS-002 (appendix) ───────────────────
   Push category color further onto each section's body and rows.
   Pastel translucent tints layered on var(--surface); never neon. */

/* Stronger top-down header glow per category — replaces the lighter
   gradient introduced in pass 001 by virtue of cascade order. */
.cat-section-dev      .cat-section-header { background: linear-gradient(180deg, rgba(148,163,184,0.16), rgba(148,163,184,0.04) 65%, transparent); }
.cat-section-lab      .cat-section-header { background: linear-gradient(180deg, rgba(56,189,248,0.18),  rgba(56,189,248,0.05) 65%, transparent); }
.cat-section-customer .cat-section-header { background: linear-gradient(180deg, rgba(34,197,94,0.16),   rgba(34,197,94,0.04) 65%, transparent); }
.cat-section-pending  .cat-section-header { background: linear-gradient(180deg, rgba(251,191,36,0.20),  rgba(251,191,36,0.06) 65%, transparent); }

/* Section count badge — keep contrast inside the now-tinted header. */
.cat-section-dev      .cat-section-count { border-color: rgba(148,163,184,0.45); }
.cat-section-lab      .cat-section-count { border-color: rgba(56,189,248,0.50);  }
.cat-section-customer .cat-section-count { border-color: rgba(34,197,94,0.50);   }
.cat-section-pending  .cat-section-count { border-color: rgba(251,191,36,0.55);  }

/* Per-row category tint — every agent card inside the section picks up a
   very subtle matching wash, plus a left-edge sliver that keeps the row's
   bucket identity visible even after scrolling past the header. */
.cat-section-dev      .cat-agent-row { background-color: rgba(148,163,184,0.04); border-bottom-color: rgba(148,163,184,0.12); }
.cat-section-lab      .cat-agent-row { background-color: rgba(56,189,248,0.045);  border-bottom-color: rgba(56,189,248,0.14);  }
.cat-section-customer .cat-agent-row { background-color: rgba(34,197,94,0.04);    border-bottom-color: rgba(34,197,94,0.13);   }
.cat-section-pending  .cat-agent-row { background-color: rgba(251,191,36,0.05);   border-bottom-color: rgba(251,191,36,0.16);  }

/* Per-row left sliver (uses .agent-row::before defined globally; we just
   re-color it per parent section). Stays slate by default; color the slot
   so a Lab row keeps reading "Lab" as the eye scrolls. */
.cat-section-dev      .cat-agent-row::before { background: rgba(148,163,184,0.55); }
.cat-section-lab      .cat-agent-row::before { background: rgba(56,189,248,0.55);  }
.cat-section-customer .cat-agent-row::before { background: rgba(34,197,94,0.55);   }
.cat-section-pending  .cat-agent-row::before { background: rgba(251,191,36,0.65);  }

/* Hover: strengthen the tint without overshooting. Two-class selector beats
   the global `.agent-row:hover { background: var(--hover) }` rule on
   specificity, so this override is durable. */
.cat-section-dev      .cat-agent-row:hover { background-color: rgba(148,163,184,0.10); }
.cat-section-lab      .cat-agent-row:hover { background-color: rgba(56,189,248,0.12);  }
.cat-section-customer .cat-agent-row:hover { background-color: rgba(34,197,94,0.10);   }
.cat-section-pending  .cat-agent-row:hover { background-color: rgba(251,191,36,0.13);  }

/* Selected and conflict rows keep their global look — protect the existing
   semantics so the selected-row highlight and IP-conflict warning still
   read correctly even inside a tinted section. */
.cat-section-dev      .cat-agent-row.agent-row-selected,
.cat-section-lab      .cat-agent-row.agent-row-selected,
.cat-section-customer .cat-agent-row.agent-row-selected,
.cat-section-pending  .cat-agent-row.agent-row-selected { background: var(--primary-dim) !important; }
.cat-section-dev      .cat-agent-row.agent-row-conflict,
.cat-section-lab      .cat-agent-row.agent-row-conflict,
.cat-section-customer .cat-agent-row.agent-row-conflict,
.cat-section-pending  .cat-agent-row.agent-row-conflict { background-color: rgba(244,63,94,.10); }

/* Pending standalone card (#pending-section > .card) carries amber tint
   on its own rows too — same pattern as .cat-section-pending. */
#pending-section > .card .agent-row-pending { background-color: rgba(251,191,36,0.05); }
#pending-section > .card .agent-row-pending:hover { background-color: rgba(251,191,36,0.13); }
#pending-section > .card .agent-row-pending::before { background: rgba(251,191,36,0.65); }

/* ── Provision Pending (Neu im Netzwerk) ── */
.provision-row { grid-template-columns: 1fr 140px 100px 220px; }
.provision-ip-link { color: var(--accent); text-decoration: none; font-family: monospace; font-size: 13px; }
.provision-ip-link:hover { text-decoration: underline; }
.btn-open-agent {
  display: inline-block; padding: 4px 10px; border-radius: 6px;
  background: var(--ok-bg, #16a34a22); color: var(--ok-text, #4ade80);
  border: 1px solid var(--ok-text, #4ade80); font-size: 12px;
  text-decoration: none; cursor: pointer;
}
.btn-open-agent:hover { background: var(--ok-text, #4ade80); color: #111; }
.btn-provision-code {
  padding: 4px 10px; border-radius: 6px; font-size: 12px; cursor: pointer;
  background: var(--accent, #3b82f6); color: #fff; border: 1px solid var(--accent, #3b82f6);
}
.btn-provision-code:hover { filter: brightness(1.12); }


/* ── NORI-PORTAL-PROJECTS-CARD-LAYOUT-001 (appendix) ────────────────────
   Project panel: section frame + grouped card grid. Mirrors the Agents
   section palette so the two pages read as one design family. */

.proj-section {
  margin: 0 0 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.proj-section-dev {
  border-left: 6px solid #94a3b8;
  background:
    linear-gradient(rgba(148,163,184,0.10), rgba(148,163,184,0.05)),
    var(--surface);
  box-shadow: inset 0 1px 0 rgba(148,163,184,0.08);
}
.proj-section-lab {
  border-left: 6px solid #38bdf8;
  background:
    linear-gradient(rgba(56,189,248,0.11), rgba(56,189,248,0.05)),
    var(--surface);
  box-shadow: inset 0 1px 0 rgba(56,189,248,0.10);
}
.proj-section-customer {
  border-left: 6px solid #22c55e;
  background:
    linear-gradient(rgba(34,197,94,0.10), rgba(34,197,94,0.05)),
    var(--surface);
  box-shadow: inset 0 1px 0 rgba(34,197,94,0.10);
}

.proj-section-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border);
}
.proj-section-dev      .proj-section-header { background: linear-gradient(180deg, rgba(148,163,184,0.16), rgba(148,163,184,0.04) 65%, transparent); }
.proj-section-lab      .proj-section-header { background: linear-gradient(180deg, rgba(56,189,248,0.18),  rgba(56,189,248,0.05) 65%, transparent); }
.proj-section-customer .proj-section-header { background: linear-gradient(180deg, rgba(34,197,94,0.16),   rgba(34,197,94,0.04) 65%, transparent); }

.proj-section-titlewrap {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.proj-section-title {
  font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: 0.3px;
}
.proj-section-desc {
  font-size: 11px; color: var(--text-muted); line-height: 1.4;
}
.proj-section-count {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  background: var(--surface-2, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px; font-weight: 600; color: var(--text-muted);
}
.proj-section-count .num { color: var(--text); font-weight: 700; }
.proj-section-dev      .proj-section-count { border-color: rgba(148,163,184,0.45); }
.proj-section-lab      .proj-section-count { border-color: rgba(56,189,248,0.50);  }
.proj-section-customer .proj-section-count { border-color: rgba(34,197,94,0.50);   }

/* Card grid inside each section. auto-fill with 320 px minimum reads as
   one column on narrow split-pane states and two-up on wide screens. */
.proj-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  padding: 14px 16px;
}

.proj-card {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  min-width: 0;
}
.proj-card::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: transparent;
  transition: background .12s;
}
.proj-card:hover { background: var(--hover); }
.proj-card:hover::before { background: var(--border-strong); }
.proj-card.agent-row-selected { background: var(--primary-dim) !important; }
.proj-card.agent-row-selected::before { background: var(--primary) !important; }

/* Per-section card tinting + colored ::before sliver. */
.proj-section-dev      .proj-card { background-color: rgba(148,163,184,0.04); border-color: rgba(148,163,184,0.18); }
.proj-section-lab      .proj-card { background-color: rgba(56,189,248,0.045); border-color: rgba(56,189,248,0.20);  }
.proj-section-customer .proj-card { background-color: rgba(34,197,94,0.04);   border-color: rgba(34,197,94,0.18);   }
.proj-section-dev      .proj-card::before { background: rgba(148,163,184,0.55); }
.proj-section-lab      .proj-card::before { background: rgba(56,189,248,0.55);  }
.proj-section-customer .proj-card::before { background: rgba(34,197,94,0.55);   }
.proj-section-dev      .proj-card:hover { background-color: rgba(148,163,184,0.10); }
.proj-section-lab      .proj-card:hover { background-color: rgba(56,189,248,0.12);  }
.proj-section-customer .proj-card:hover { background-color: rgba(34,197,94,0.10);   }

/* Card internals: titles, meta, agent chips. */
.proj-card-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; min-width: 0;
}
.proj-card-titles { min-width: 0; flex: 1 1 auto; }
.proj-card-title  {
  font-size: 14px; font-weight: 700; color: var(--text);
  letter-spacing: 0.1px; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.proj-card-id {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10px; color: var(--text-muted); opacity: 0.85;
  margin-top: 3px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.proj-card-loc { color: var(--text-muted); }
.proj-card-kind { flex-shrink: 0; padding-top: 2px; }

.proj-card-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 11.5px;
}
.proj-card-owner {
  color: var(--text); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 60%;
}
.proj-card-owner.internal {
  color: var(--text-muted); font-weight: 500; font-style: italic;
}

.proj-card-stat {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 2px 8px; border-radius: 4px;
  background: rgba(255,255,255,0.05);
  font-size: 11px; color: var(--text-muted);
}
.proj-card-stat .num { color: var(--text); font-weight: 700; font-size: 12px; }
.proj-card-stat .lbl { color: var(--text-muted); }

.proj-card-stale {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 4px;
  background: rgba(251,191,36,0.10); color: #fcd34d;
  border: 1px solid rgba(251,191,36,0.45);
  font-size: 10.5px; font-weight: 600;
  white-space: nowrap;
}

.proj-card-agents {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.proj-card-agents-empty {
  font-size: 11px; color: var(--text-muted); font-style: italic; opacity: 0.8;
}


/* ── NORI-PORTAL-VPN-CARD-GROUP-LAYOUT-001 (appendix) ───────────────────
   VPN panel: live-agent overview wrapped in a neutral section card +
   four cert-card sections (Agent / User / Legacy / Revoked) with the
   same dark-translucent palette family as Agents and Projects. */

.vpn-section {
  margin: 0 0 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

/* Live agent overview: neutral / no category accent — it's status, not a
   bucket the user is choosing between. */
.vpn-section-overview {
  border-left: 6px solid var(--border-strong, #2c3649);
}
.vpn-section-overview .vpn-section-header {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
}

/* Cert-section accents — match Agents/Projects palette family. */
.vpn-section-agent {
  border-left: 6px solid #22c55e;
  background: linear-gradient(rgba(34,197,94,0.10), rgba(34,197,94,0.05)), var(--surface);
  box-shadow: inset 0 1px 0 rgba(34,197,94,0.10);
}
.vpn-section-user {
  border-left: 6px solid #94a3b8;
  background: linear-gradient(rgba(148,163,184,0.10), rgba(148,163,184,0.05)), var(--surface);
  box-shadow: inset 0 1px 0 rgba(148,163,184,0.08);
}
.vpn-section-legacy {
  border-left: 6px solid #fbbf24;
  background: linear-gradient(rgba(251,191,36,0.10), rgba(251,191,36,0.05)), var(--surface);
  box-shadow: inset 0 1px 0 rgba(251,191,36,0.10);
}
.vpn-section-revoked {
  border-left: 6px solid #ef4444;
  background: linear-gradient(rgba(239,68,68,0.06), rgba(239,68,68,0.03)), var(--surface);
  opacity: 0.85;
}

.vpn-section-agent   .vpn-section-header { background: linear-gradient(180deg, rgba(34,197,94,0.16),  rgba(34,197,94,0.04) 65%, transparent); }
.vpn-section-user    .vpn-section-header { background: linear-gradient(180deg, rgba(148,163,184,0.16),rgba(148,163,184,0.04) 65%, transparent); }
.vpn-section-legacy  .vpn-section-header { background: linear-gradient(180deg, rgba(251,191,36,0.18), rgba(251,191,36,0.05) 65%, transparent); }
.vpn-section-revoked .vpn-section-header { background: linear-gradient(180deg, rgba(239,68,68,0.10),  rgba(239,68,68,0.03) 65%, transparent); }

.vpn-section-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border);
}
.vpn-section-titlewrap { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vpn-section-title    { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: 0.3px; }
.vpn-section-desc     { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
.vpn-section-count {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  background: var(--surface-2, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px; font-weight: 600; color: var(--text-muted);
}
.vpn-section-count .num { color: var(--text); font-weight: 700; }
.vpn-section-agent   .vpn-section-count { border-color: rgba(34,197,94,0.50);  }
.vpn-section-user    .vpn-section-count { border-color: rgba(148,163,184,0.45); }
.vpn-section-legacy  .vpn-section-count { border-color: rgba(251,191,36,0.55); }
.vpn-section-revoked .vpn-section-count { border-color: rgba(239,68,68,0.45);   }

.vpn-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  padding: 14px 16px;
}

/* Cert card */
.vpn-card {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  min-width: 0;
  transition: background .12s, border-color .12s;
}
.vpn-card::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: transparent;
}

/* Per-group card tinting */
.vpn-section-agent   .vpn-card { background-color: rgba(34,197,94,0.04);   border-color: rgba(34,197,94,0.18);   }
.vpn-section-user    .vpn-card { background-color: rgba(148,163,184,0.04); border-color: rgba(148,163,184,0.18); }
.vpn-section-legacy  .vpn-card { background-color: rgba(251,191,36,0.05);  border-color: rgba(251,191,36,0.20);  }
.vpn-section-revoked .vpn-card { background-color: rgba(239,68,68,0.04);   border-color: rgba(239,68,68,0.16);   opacity: 0.92; }
.vpn-section-agent   .vpn-card::before { background: rgba(34,197,94,0.55);   }
.vpn-section-user    .vpn-card::before { background: rgba(148,163,184,0.55); }
.vpn-section-legacy  .vpn-card::before { background: rgba(251,191,36,0.65);  }
.vpn-section-revoked .vpn-card::before { background: rgba(239,68,68,0.55);   }

/* Card internals */
.vpn-card-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; min-width: 0;
}
.vpn-card-titles { min-width: 0; flex: 1 1 auto; }
.vpn-card-name {
  font-size: 14px; font-weight: 700; color: var(--text);
  letter-spacing: 0.1px; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.vpn-card-status { flex-shrink: 0; padding-top: 2px; }

/* Linked agent line */
.vpn-card-link {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 11.5px; color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.35;
}
.vpn-card-link .vpn-link-agent { color: var(--text); font-weight: 600; }
.vpn-card-link .vpn-link-id    { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 10.5px; opacity: 0.8; }
.vpn-card-link .vpn-link-proj  { color: var(--text-muted); font-size: 11px; }
.vpn-link-dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0;
}
.vpn-link-dot.on  { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,0.7); }
.vpn-link-dot.off { background: #94a3b8; }

.vpn-card-link-empty {
  color: var(--text-muted); font-style: italic; opacity: 0.85;
}

/* Meta row: last-download + actions */
.vpn-card-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  font-size: 11px;
}
.vpn-card-dl { color: var(--text-muted); }
.vpn-card-actions { display: flex; align-items: center; gap: 6px; }

/* Compact, secondary-weight buttons. The intent is NOT to dominate the card. */
.vpn-card-action {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  text-decoration: none;
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border: 1px solid var(--border);
  transition: background .12s, border-color .12s, color .12s;
}
.vpn-card-action:hover {
  background: rgba(255,255,255,0.07);
  border-color: var(--border-strong);
}
.vpn-card-revoke {
  background: transparent;
  color: var(--text-muted);
  border-color: rgba(239,68,68,0.30);
}
.vpn-card-revoke:hover {
  background: rgba(239,68,68,0.10);
  color: #fca5a5;
  border-color: rgba(239,68,68,0.55);
}


/* ── NORI-PORTAL-CUSTOMERS-OVERVIEW-PHASE-5A-001 (appendix) ─────────────
   Customers overview panel — read-only customer → projects → agents →
   VPN cards. Palette mirrors Agents/Projects/VPN: INTERNAL=slate (dev),
   CUSTOMER=green. Pastel translucent surfaces, no neon. */

.cust-section {
  margin: 0 0 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.cust-section-internal {
  border-left: 6px solid #94a3b8;
  background:
    linear-gradient(rgba(148,163,184,0.10), rgba(148,163,184,0.05)),
    var(--surface);
  box-shadow: inset 0 1px 0 rgba(148,163,184,0.08);
}
.cust-section-customer {
  border-left: 6px solid #22c55e;
  background:
    linear-gradient(rgba(34,197,94,0.10), rgba(34,197,94,0.05)),
    var(--surface);
  box-shadow: inset 0 1px 0 rgba(34,197,94,0.10);
}

.cust-section-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border);
}
.cust-section-internal .cust-section-header { background: linear-gradient(180deg, rgba(148,163,184,0.16), rgba(148,163,184,0.04) 65%, transparent); }
.cust-section-customer .cust-section-header { background: linear-gradient(180deg, rgba(34,197,94,0.16),   rgba(34,197,94,0.04)  65%, transparent); }
.cust-section-titlewrap { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cust-section-title { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: 0.3px; }
.cust-section-desc  { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
.cust-section-count {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  background: var(--surface-2, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px; font-weight: 600; color: var(--text-muted);
}
.cust-section-count .num { color: var(--text); font-weight: 700; }
.cust-section-internal .cust-section-count { border-color: rgba(148,163,184,0.45); }
.cust-section-customer .cust-section-count { border-color: rgba(34,197,94,0.50);  }

.cust-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 12px;
  padding: 14px 16px;
}

.cust-card {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  min-width: 0;
}
.cust-card::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: transparent;
}
.cust-card-internal { background-color: rgba(148,163,184,0.04); border-color: rgba(148,163,184,0.18); }
.cust-card-customer { background-color: rgba(34,197,94,0.04);   border-color: rgba(34,197,94,0.18);   }
.cust-card-internal::before { background: rgba(148,163,184,0.55); }
.cust-card-customer::before { background: rgba(34,197,94,0.55);   }

.cust-card-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; min-width: 0;
}
.cust-card-titles { min-width: 0; flex: 1 1 auto; }
.cust-card-title {
  font-size: 14px; font-weight: 700; color: var(--text);
  letter-spacing: 0.1px; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cust-card-id {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10px; color: var(--text-muted); opacity: 0.85;
  margin-top: 3px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cust-card-kind { flex-shrink: 0; padding-top: 2px; }

.cust-card-stats {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 11px;
  padding-top: 2px;
}
.cust-card-stat {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 2px 8px; border-radius: 4px;
  background: rgba(255,255,255,0.05);
  color: var(--text-muted);
}
.cust-card-stat .num { color: var(--text); font-weight: 700; font-size: 12px; }

.cust-card-block {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.cust-card-block-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}
.cust-card-chips {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.cust-card-empty {
  font-size: 11px; color: var(--text-muted); font-style: italic; opacity: 0.8;
}

.cust-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--text);
  white-space: nowrap;
  max-width: 100%;
}
.cust-chip-main { font-weight: 600; }
.cust-chip-sub  { color: var(--text-muted); font-size: 10px; opacity: 0.85; }

.cust-chip-on  { border-color: rgba(34,197,94,0.45); }
.cust-chip-off { border-color: rgba(148,163,184,0.4); opacity: 0.85; }
.cust-chip-on  .cust-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 5px rgba(74,222,128,0.7); }
.cust-chip-off .cust-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; }

.cust-chip-vpn { border-color: rgba(56,189,248,0.45); }
.cust-chip-vpn.cust-chip-agent  { background: rgba(34,197,94,0.10);   border-color: rgba(34,197,94,0.50); }
.cust-chip-vpn.cust-chip-user   { background: rgba(148,163,184,0.10); border-color: rgba(148,163,184,0.45); }
.cust-chip-vpn.cust-chip-admin  { background: rgba(56,189,248,0.10);  border-color: rgba(56,189,248,0.50); }
.cust-chip-vpn.cust-chip-legacy { background: rgba(251,191,36,0.10);  border-color: rgba(251,191,36,0.50); }
.cust-chip-vpn.cust-chip-unbound{ background: transparent;            border-color: var(--border); }


/* ── NORI-PORTAL-CUSTOMERS-HIERARCHY-VIEW-001 (appendix) ────────────────
   Nested tree inside each customer card:
       Project (level 0)
         Agent (level 1, indented + left-rule)
           VPN  (level 2, indented further + smaller chip)
   Visual indent guides via left-borders, no JS expansion in this phase. */

.cust-tree {
  display: flex; flex-direction: column;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

.cust-node {
  display: flex; flex-direction: column;
  min-width: 0;
}
.cust-node-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.3;
  min-width: 0;
}
.cust-node-name { color: var(--text); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cust-node-id   { color: var(--text-muted); font-family: 'SF Mono', 'Fira Code', monospace; font-size: 10.5px; opacity: 0.85; }
.cust-node-meta { color: var(--text-muted); font-size: 11px; }
.cust-node-meta .num { color: var(--text); font-weight: 700; }
.cust-node-empty {
  font-size: 11px; color: var(--text-muted); font-style: italic; opacity: 0.8;
  padding: 4px 10px;
}

/* Online dot for agent nodes */
.cust-node-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.cust-node-dot.on  { background: #4ade80; box-shadow: 0 0 5px rgba(74,222,128,0.7); }
.cust-node-dot.off { background: #94a3b8; }

/* Compact deploy badge inside the agent row (mirrors .deploy-badge but
   smaller — the tree is the secondary view, so we don't dominate it). */
.cust-deploy {
  display: inline-flex; align-items: center;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.4px; text-transform: uppercase;
  white-space: nowrap;
}
.cust-deploy.ok  { background: rgba(34,197,94,0.14);  color: #4ade80; border: 1px solid rgba(34,197,94,0.45); }
.cust-deploy.no  { background: rgba(148,163,184,0.10); color: #94a3b8; border: 1px solid rgba(148,163,184,0.45); }
.cust-deploy.dev { background: rgba(56,189,248,0.12); color: #7dd3fc; border: 1px solid rgba(56,189,248,0.45); }

/* Children container — provides the indent guide for nested levels. */
.cust-node-children {
  display: flex; flex-direction: column;
  gap: 4px;
  margin-left: 14px;
  padding-left: 10px;
  border-left: 1px dashed var(--border);
}

/* Level 0 — Project nodes have no own indent, child container indents. */
.cust-node-project > .cust-node-row {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  padding: 7px 10px;
}
.cust-node-project > .cust-node-children {
  margin-left: 16px;
  padding-left: 10px;
  margin-top: 2px;
  border-left-color: rgba(255,255,255,0.10);
}

/* Level 1 — Agent rows. Slight tint and a more visible left-rule. */
.cust-node-agent > .cust-node-row {
  background: rgba(255,255,255,0.015);
  padding: 5px 10px;
}
.cust-node-agent > .cust-node-row:hover { background: rgba(255,255,255,0.05); }
.cust-node-agent > .cust-node-children {
  margin-left: 16px;
  padding-left: 8px;
  border-left-style: dotted;
}

/* Level 2 — VPN leaf. Just the chip + indentation. */
.cust-node-vpn {
  padding: 1px 0 1px 0;
}
.cust-node-vpn .cust-chip { font-size: 10.5px; padding: 1px 7px; }


/* ── NORI-PORTAL-CUSTOMERS-HIERARCHY-READABILITY-PASS-002 (appendix) ────
   Quieten the customer hierarchy:
   - customer cards span the full panel width (single column)
   - each project becomes a real sub-card with its own kind tint
   - agents sit as compact horizontal rows inside the project sub-card
   - VPN chips appear inline at the right of their agent (no extra rows)
   - "no live agents" stays at project level only; the per-agent
     "no VPN linked" placeholder is removed (empty space is the message).
*/

/* Customer card grid: full width, single column. The tree inside each
   customer card now gets the horizontal real-estate it needs. */
#customers-body .cust-card-grid {
  grid-template-columns: 1fr;
  gap: 14px;
}

/* The tree wrapper is now just a vertical stack of project sub-cards;
   no left-rule indent guides. */
.cust-card .cust-tree {
  gap: 10px;
  padding: 6px 0 2px;
  border-top: 1px solid var(--border);
}

/* ── Project sub-card (level 0) ──────────────────────────────────────── */
.cust-project-card {
  position: relative;
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 10px 12px 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  min-width: 0;
}
.cust-project-card::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: transparent;
}

/* Per-kind tints: DEV slate, LAB sky/cyan, CUSTOMER green. Same palette
   as Agents/Projects/VPN sections. */
.cust-project-card.cust-project-dev      { background-color: rgba(148,163,184,0.05); border-color: rgba(148,163,184,0.22); }
.cust-project-card.cust-project-lab      { background-color: rgba(56,189,248,0.05);  border-color: rgba(56,189,248,0.25);  }
.cust-project-card.cust-project-customer { background-color: rgba(34,197,94,0.05);   border-color: rgba(34,197,94,0.22);    }
.cust-project-card.cust-project-pending  { background-color: rgba(251,191,36,0.05);  border-color: rgba(251,191,36,0.25);   }
.cust-project-card.cust-project-dev::before      { background: rgba(148,163,184,0.55); }
.cust-project-card.cust-project-lab::before      { background: rgba(56,189,248,0.55);  }
.cust-project-card.cust-project-customer::before { background: rgba(34,197,94,0.55);   }
.cust-project-card.cust-project-pending::before  { background: rgba(251,191,36,0.65);  }

.cust-project-header {
  display: flex; align-items: center;
  gap: 12px; flex-wrap: wrap;
  min-width: 0;
}
.cust-project-titles {
  display: flex; align-items: baseline; gap: 8px;
  min-width: 0; flex: 1 1 auto;
}
.cust-project-name {
  font-size: 13.5px; font-weight: 700; color: var(--text);
  letter-spacing: 0.1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cust-project-id {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10.5px; color: var(--text-muted); opacity: 0.85;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cust-project-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11px; color: var(--text-muted);
}
.cust-project-stat .num { color: var(--text); font-weight: 700; }

/* Body holds compact agent rows or a single muted "No live agents" line. */
.cust-project-body {
  display: flex; flex-direction: column;
  gap: 3px;
  padding-top: 4px;
  border-top: 1px dashed rgba(255,255,255,0.06);
}
.cust-project-empty {
  font-size: 11px; color: var(--text-muted); font-style: italic; opacity: 0.8;
  padding: 4px 4px 2px;
}

/* ── Agent compact row (level 1) ─────────────────────────────────────── */
/* NORI-PORTAL-CUSTOMER-PROJECT-AGENT-TREE-UI-PASS-001: row is a <button>
   so it can drill into the agent detail with keyboard support. Reset the
   browser button defaults so the visual matches the previous <div>. */
.cust-agent-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 11.5px;
  line-height: 1.3;
  min-width: 0;
  /* button reset */
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.cust-agent-row:hover  { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); }
.cust-agent-row:focus-visible {
  outline: 1px solid rgba(106,166,255,0.55);
  outline-offset: 1px;
}

.cust-agent-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.cust-agent-dot.on  { background: #4ade80; box-shadow: 0 0 5px rgba(74,222,128,0.7); }
.cust-agent-dot.off { background: #94a3b8; }

.cust-agent-name {
  font-weight: 600; color: var(--text);
  min-width: 0; max-width: 180px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cust-agent-id {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10.5px; color: var(--text-muted); opacity: 0.85;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cust-agent-version {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10.5px; color: var(--text-muted);
}

/* VPN chips on the right side of the agent row. margin-left:auto pushes
   them to the right when the row has horizontal slack. */
.cust-agent-vpns {
  display: inline-flex; align-items: center; flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
}

/* ── VPN small inline chip (level 2) ─────────────────────────────────── */
.cust-vpn-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  font-size: 10px;
  color: var(--text);
  white-space: nowrap;
  max-width: 220px;
}
.cust-vpn-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.cust-vpn-sub  { color: var(--text-muted); font-size: 9px; opacity: 0.85; }

.cust-vpn-agent   { background: rgba(34,197,94,0.10);   border-color: rgba(34,197,94,0.50);  color: #d1fae5; }
.cust-vpn-user    { background: rgba(148,163,184,0.10); border-color: rgba(148,163,184,0.45); color: #e2e8f0; }
.cust-vpn-admin   { background: rgba(56,189,248,0.10);  border-color: rgba(56,189,248,0.50);  color: #e0f2fe; }
.cust-vpn-legacy  { background: rgba(251,191,36,0.10);  border-color: rgba(251,191,36,0.50);  color: #fef3c7; }
.cust-vpn-unbound { background: transparent;            border-color: var(--border); }


/* ── NORI-PORTAL-PROJECT-CUSTOMER-DROPDOWN-PHASE-5D-001 (appendix) ─────
   Tiny CSS for the new project-create modal's customer dropdown: a hint
   line under the select + a select-specific tweak so dropdowns render
   like the existing .form-input controls without a bright OS chrome. */

.form-hint {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  font-style: italic;
}

select.form-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}
select.form-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}


/* ── NORI-PORTAL-CUSTOMER-CONTEXT-PROJECT-CREATE-001 (appendix) ─────────
   "+ Project" action button on each Customer card + the readonly customer
   line shown in the project-create modal when opened from a customer. */

.cust-card-actions {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
}
.cust-card-action {
  appearance: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.cust-card-action:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--border-strong);
  color: var(--text);
}
.cust-card-customer .cust-card-action:hover { border-color: rgba(34,197,94,0.55);   }
.cust-card-internal .cust-card-action:hover { border-color: rgba(148,163,184,0.55); }

/* Readonly customer line inside the project-create modal when opened in
   customer-context mode. Acts as a compact label, not an input. */
.cust-context-lock {
  font-size: 12px;
  color: var(--text-muted);
  padding: 4px 8px;
  border-left: 3px solid rgba(34,197,94,0.55);
  background: rgba(34,197,94,0.06);
  border-radius: 0 4px 4px 0;
}
.cust-context-lock strong { color: var(--text); margin-right: 6px; }
.cust-context-lock .cust-context-id {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10.5px; opacity: 0.85; color: var(--text-muted);
  margin-left: 6px;
}


/* ── NORI-PORTAL-CUSTOMER-TREE-ASSIGN-AGENT-001 (appendix) ──────────────
   "+ Assign Agent" action on each project node header + the picker modal
   that opens from it. Reuses the existing modal-backdrop / modal scaffold. */

.cust-project-action {
  appearance: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  margin-left: auto;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.cust-project-action:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(34,197,94,0.55);
  color: var(--text);
}

/* Compact two-line target block at the top of the assign modal. */
.assign-target-block {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 4px;
}
.assign-target-row {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px; color: var(--text);
}
.assign-target-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); width: 60px;
}
.assign-target-id {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10.5px; color: var(--text-muted); opacity: 0.85;
  margin-left: auto;
}

/* Scrollable list of radio rows. */
.assign-agent-list {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 280px; overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px;
  background: rgba(0,0,0,0.18);
}
.assign-empty {
  font-size: 12px; color: var(--text-muted); font-style: italic;
  padding: 12px; text-align: center;
}

.assign-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  transition: background .1s;
}
.assign-row:hover { background: rgba(255,255,255,0.05); }
.assign-row input[type="radio"] {
  margin: 0; cursor: pointer; accent-color: rgba(34,197,94,0.85);
}
.assign-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(148,163,184,0.5); flex-shrink: 0;
}
.assign-dot.on  { background: rgba(34,197,94,0.85); }
.assign-dot.off { background: rgba(148,163,184,0.4); }
.assign-name { color: var(--text); font-weight: 600; }
.assign-id   {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10.5px; color: var(--text-muted); opacity: 0.85;
}
.assign-badge {
  margin-left: auto;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
  padding: 1px 6px; border-radius: 3px;
  text-transform: uppercase;
  white-space: nowrap;
}
.assign-badge.pending { background: rgba(148,163,184,0.18); color: var(--text-muted); }
.assign-badge.lab     { background: rgba(56,189,248,0.15);  color: rgba(56,189,248,0.95); }
.assign-badge.move    { background: rgba(245,158,11,0.16);  color: rgba(245,158,11,0.95); }


/* ── NORI-PORTAL-CUSTOMER-TREE-ASSIGN-VPN-001 (appendix) ────────────────
   "+ VPN" action on each Agent row inside the Customer tree + the picker
   modal that opens from it. Reuses .assign-target-block / .assign-row
   scaffolding from the assign-agent picker. */

.cust-agent-action {
  appearance: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 4px;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.cust-agent-action:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(56,189,248,0.55);
  color: var(--text);
}

/* Scrollable list shared shape with assign-agent-list. */
.assign-vpn-list {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 280px; overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px;
  background: rgba(0,0,0,0.18);
}

/* Disabled candidate row (ALREADY LINKED) — dimmed and non-clickable. */
.assign-row.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.assign-row.disabled input[type="radio"] { cursor: not-allowed; }

/* Tiny purpose chip after the cert name in the candidate row. */
.assign-vpn-purpose {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 9.5px; font-weight: 600;
  color: var(--text-muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 5px;
  letter-spacing: 0.04em;
}

/* Candidate-kind badges: SAME CUSTOMER + ALREADY LINKED. UNASSIGNED reuses
   .assign-badge.pending; MOVE reuses .assign-badge.move from the agent picker. */
.assign-badge.same   { background: rgba(34,197,94,0.14);   color: rgba(167,243,208,0.95); }
.assign-badge.linked { background: rgba(148,163,184,0.10); color: var(--text-muted); }


/* ── NORI-PORTAL-CUSTOMER-TREE-UNASSIGN-VPN-001 (appendix) ──────────────
   Tiny secondary "×" action on each VPN chip inside the Customer tree.
   Visually distinct from the VPN-page "✕ Revoke" button — slate, not red,
   so operators don't confuse "unassign FK" with "revoke certificate". */

.cust-vpn-chip {
  /* allow the tiny × button to sit visually inside the chip */
  position: relative;
}
.cust-vpn-unassign {
  appearance: none;
  background: transparent;
  border: 0;
  margin-left: 4px;
  padding: 0 2px;
  font-size: 11px;
  line-height: 1;
  color: var(--text-muted);
  opacity: 0.55;
  cursor: pointer;
  border-radius: 3px;
  transition: opacity .12s, color .12s, background .12s;
}
.cust-vpn-unassign:hover {
  opacity: 1;
  color: var(--text);
  background: rgba(148,163,184,0.18);
}
.cust-vpn-unassign:focus-visible {
  outline: 1px solid rgba(148,163,184,0.55);
  outline-offset: 1px;
}


/* ── NORI-PORTAL-CUSTOMER-PROJECT-AGENT-TREE-UI-PASS-001 ───────────────────
   Tree expand/collapse + Agent Detail card layout. The customer and project
   cards are now <details> elements; the chevron rotates with [open]. The
   Advanced section in the agent detail uses the same chevron pattern. */

/* Hide the native disclosure marker on every <details> we style. */
details.cust-card > summary,
details.cust-project-card > summary,
details.adv-card > summary {
  list-style: none;
  cursor: pointer;
}
details.cust-card > summary::-webkit-details-marker,
details.cust-project-card > summary::-webkit-details-marker,
details.adv-card > summary::-webkit-details-marker { display: none; }

.cust-card-summary {
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
  padding: 0;
  margin: 0;
}
.cust-card-summary > .cust-card-row,
.cust-card-summary > .cust-card-stats { padding-left: 18px; }

.cust-tree-chevron {
  position: absolute;
  left: 0; top: 4px;
  display: inline-block;
  width: 14px;
  font-size: 11px;
  color: var(--text-muted);
  transition: transform .12s ease;
  user-select: none;
}
details[open] > summary > .cust-tree-chevron { transform: rotate(90deg); }
details.cust-project-card > summary .cust-tree-chevron {
  position: static; margin-right: 2px;
}
details.adv-card > summary .cust-tree-chevron {
  position: static; margin-right: 4px;
}

/* Project sub-card inside a customer becomes a <details>; keep header
   inline + clickable, body indented below it. */
details.cust-project-card > summary {
  display: flex; align-items: center;
  gap: 12px; flex-wrap: wrap;
}
details.cust-project-card > .cust-project-body { padding-top: 6px; }

/* ── Agent detail: Status chips row ─────────────────────────────────── */
.agent-chip-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 10px;
}
.agent-chip {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  white-space: nowrap;
}
.agent-chip-ok   { color: #4ade80; border-color: rgba(34,197,94,0.45);  background: rgba(34,197,94,0.10); }
.agent-chip-no   { color: #94a3b8; border-color: rgba(148,163,184,0.45); background: rgba(148,163,184,0.08); }
.agent-chip-dev  { color: #7dd3fc; border-color: rgba(56,189,248,0.45); background: rgba(56,189,248,0.10); }
.agent-chip-mode { color: #fbbf24; border-color: rgba(251,191,36,0.45); background: rgba(251,191,36,0.10); }
.agent-chip-cust { color: #c4b5fd; border-color: rgba(167,139,250,0.45); background: rgba(167,139,250,0.10); }
.agent-chip-proj { color: var(--text-muted); }

/* ── Agent detail: VPN card rows ────────────────────────────────────── */
.vpn-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px;
  padding: 5px 0;
  font-size: 12.5px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.vpn-row:last-child { border-bottom: 0; }
.vpn-name    { font-weight: 600; color: var(--text); }
.vpn-purpose {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-muted);
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.04);
}
.vpn-ip {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px; color: var(--text-muted);
}
.vpn-status {
  margin-left: auto;
  font-size: 10.5px; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.05em;
}
.vpn-status.vpn-status-ok {
  color: #4ade80;
}

/* ── Agent detail: Advanced / SSH collapsed section ─────────────────── */
details.adv-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
}
.adv-card-header {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 13px;
  font-size: 13px;
  border-bottom: 1px solid transparent;
}
details.adv-card[open] > .adv-card-header { border-bottom-color: var(--border); }
.adv-card-hint {
  font-size: 11px; color: var(--text-muted); margin-left: auto;
}
.adv-section {
  padding: 10px 13px;
  border-bottom: 1px dashed rgba(255,255,255,0.05);
}
.adv-section:last-child { border-bottom: 0; }
.adv-section-title {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.adv-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}


/* ── NORI-PORTAL-UI-REDESIGN-SHELL-001 ─────────────────────────────────────
   3-column workspace shell: tree (left) | workspace (center) | inspector (right).
   Each column owns its own scroll; outer body/main never overflow horizontally.
   Introduced for the Customers panel as the first user; other panels remain
   on their existing layouts. Header bar (#topbar) is unaffected.
*/
.portal-workspace-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 360px;
  gap: 16px;
  /* main has padding:28px top/bottom; subtract topbar + paddings to lock height. */
  height: calc(100vh - var(--header-height) - 56px);
  min-height: 480px;
  align-items: stretch;
  min-width: 0;
}

.portal-tree-panel,
.portal-main-workspace,
.portal-inspector-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.portal-tree-header,
.portal-inspector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  flex-shrink: 0;
}

.portal-tree-title,
.portal-inspector-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.portal-tree-body,
.portal-main-body,
.portal-inspector-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2c3649 #07090e;
  padding: 10px 12px;
}

.portal-tree-body::-webkit-scrollbar,
.portal-main-body::-webkit-scrollbar,
.portal-inspector-body::-webkit-scrollbar              { width: 6px; }
.portal-tree-body::-webkit-scrollbar-track,
.portal-main-body::-webkit-scrollbar-track,
.portal-inspector-body::-webkit-scrollbar-track        { background: #07090e; }
.portal-tree-body::-webkit-scrollbar-thumb,
.portal-main-body::-webkit-scrollbar-thumb,
.portal-inspector-body::-webkit-scrollbar-thumb        { background: #2c3649; border-radius: 3px; }
.portal-tree-body::-webkit-scrollbar-thumb:hover,
.portal-main-body::-webkit-scrollbar-thumb:hover,
.portal-inspector-body::-webkit-scrollbar-thumb:hover  { background: #3d4f68; }

/* Tree row: read-only listing for Phase 1 (no click handlers wired yet). */
.portal-tree-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
  cursor: default;
  user-select: none;
}
.portal-tree-row + .portal-tree-row { margin-top: 2px; }
.portal-tree-row:hover { background: var(--surface-2); }
.portal-tree-row.is-internal { color: var(--text); }
.portal-tree-row.is-customer { color: var(--text); }
.portal-tree-row .portal-tree-kind {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 1px 6px;
  border-radius: 99px;
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  flex-shrink: 0;
}
.portal-tree-row.is-internal .portal-tree-kind {
  background: rgba(106,166,255,0.10);
  color: #8fb6ee;
}
.portal-tree-row.is-customer .portal-tree-kind {
  background: rgba(180,140,255,0.10);
  color: #b89cf0;
}
.portal-tree-row .portal-tree-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.portal-tree-row .portal-tree-count {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.portal-tree-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-subtle);
  padding: 10px 10px 4px;
}

/* Inspector empty state */
.portal-inspector-empty {
  padding: 18px 14px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Center workspace: when it hosts an existing card-body-flush container,
   keep its interior scrolling at workspace level so the column still owns
   one scroll region. */
.portal-main-workspace > #customers-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2c3649 #07090e;
}
.portal-main-workspace > #customers-body::-webkit-scrollbar              { width: 6px; }
.portal-main-workspace > #customers-body::-webkit-scrollbar-track        { background: #07090e; }
.portal-main-workspace > #customers-body::-webkit-scrollbar-thumb        { background: #2c3649; border-radius: 3px; }
.portal-main-workspace > #customers-body::-webkit-scrollbar-thumb:hover  { background: #3d4f68; }

/* The customers panel uses the new shell as its outermost layout; it should
   not inherit the grid gap from main and should not collapse to grid auto-rows. */
.tab-panel[data-panel="customers"] {
  display: block;
}
.tab-panel[data-panel="customers"].tab-panel-hidden {
  display: none;
}

/* Narrow viewport: collapse inspector under workspace, keep tree on the side. */
@media (max-width: 1280px) {
  .portal-workspace-shell {
    grid-template-columns: 240px minmax(0, 1fr) 300px;
  }
}
@media (max-width: 1080px) {
  .portal-workspace-shell {
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
  }
  .portal-inspector-panel {
    grid-column: 1 / -1;
    max-height: 280px;
  }
}

/* ── NORI-PORTAL-UI-REDESIGN-TREE-SELECTION-INSPECTOR-002 ──────────────────
   Tree selection (click → highlight), expandable customer subtree,
   flat workspace sections, and inspector layout. Builds on Phase 1 shell
   classes. No existing rules touched.
*/

/* Tree row: clickable */
.portal-tree-row {
  cursor: pointer;
  transition: background-color 60ms ease;
}
.portal-tree-row.is-selected {
  background: rgba(106,166,255,0.14);
  outline: 1px solid rgba(106,166,255,0.35);
}
.portal-tree-row.is-selected .portal-tree-name { color: #d8e8ff; }

/* Subtree (project + agent rows under a customer/project) */
.portal-tree-children {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 6px 8px;
  border-left: 1px dashed var(--border);
  padding-left: 6px;
}
.portal-tree-row.is-project,
.portal-tree-row.is-agent {
  padding: 5px 8px;
  font-size: 12px;
}
.portal-tree-row.is-project .portal-tree-kind { background: rgba(180,180,180,0.06); color: var(--text-muted); }
.portal-tree-row.is-agent   .portal-tree-kind { background: rgba(72,200,140,0.10); color: #7fd5a8; }
.portal-tree-row.is-agent.is-offline .portal-tree-kind { background: rgba(244,63,94,0.10); color: #f4a4ae; }
.portal-tree-empty-row {
  font-size: 11px;
  color: var(--text-subtle);
  padding: 4px 8px;
  font-style: italic;
}

/* Workspace flat sections — strict no card-in-card */
.portal-workspace-empty {
  padding: 28px 22px;
  color: var(--text-muted);
}
.portal-workspace-empty .portal-workspace-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.portal-workspace-empty .portal-workspace-empty-text {
  font-size: 12px;
  line-height: 1.6;
}

.portal-workspace-header {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.portal-workspace-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.portal-workspace-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.2px;
}
.portal-workspace-id {
  font-family: monospace;
  font-size: 11.5px;
  color: var(--text-muted);
}
.portal-workspace-sub {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.portal-workspace-sub-item .num { color: var(--text); font-weight: 600; margin-right: 4px; }

.portal-flat-section {
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
}
.portal-flat-section:last-child { border-bottom: 0; }
.portal-flat-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.portal-flat-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.portal-flat-section-count {
  font-size: 11px;
  color: var(--text-subtle);
}
.portal-flat-section-collapsible {
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
}
.portal-flat-section-collapsible:last-child { border-bottom: 0; }
.portal-flat-section-collapsible > summary {
  list-style: none;
  cursor: pointer;
  margin-bottom: 0;
  user-select: none;
}
.portal-flat-section-collapsible > summary::-webkit-details-marker { display: none; }
.portal-flat-section-collapsible[open] > summary { margin-bottom: 10px; }
.portal-flat-section-collapsible > summary .portal-flat-section-title::before {
  content: '▸ ';
  font-size: 9px;
}
.portal-flat-section-collapsible[open] > summary .portal-flat-section-title::before {
  content: '▾ ';
}

.portal-flat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
}
.portal-flat-row + .portal-flat-row { margin-top: 6px; }
.portal-flat-row .portal-flat-name {
  font-weight: 500;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.portal-flat-row .portal-flat-id {
  font-family: monospace;
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.portal-flat-row .portal-flat-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.portal-flat-row.is-clickable { cursor: pointer; }
.portal-flat-row.is-clickable:hover { border-color: var(--border-strong); }
.portal-flat-action-btn {
  margin-left: auto;
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.portal-flat-action-btn:hover { border-color: var(--accent,#6aa6ff); color: var(--accent,#6aa6ff); }
.portal-flat-row.is-selected {
  border-color: rgba(106,166,255,0.55);
  background: rgba(106,166,255,0.08);
}
.portal-flat-empty {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-subtle);
  font-style: italic;
}

.portal-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  flex-shrink: 0;
}
.portal-status-pill.is-online  { background: rgba(72,200,140,0.12); color: #7fd5a8; }
.portal-status-pill.is-offline { background: rgba(244,63,94,0.12); color: #f4a4ae; }
.portal-status-pill.is-dev     { background: rgba(106,166,255,0.12); color: #8fb6ee; }
.portal-status-pill.is-warn    { background: rgba(245,158,11,0.12); color: #f4c374; }
.portal-status-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

.portal-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.portal-action-row .portal-action-btn {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.portal-action-row .portal-action-btn:hover {
  background: var(--surface-2);
  border-color: var(--primary);
}
.portal-action-row .portal-action-btn.is-primary {
  background: var(--primary-dim);
  color: var(--primary);
  border-color: var(--primary);
}
.portal-action-row .portal-action-btn.is-primary:hover {
  background: var(--primary);
  color: #fff;
}

/* Inspector layout */
.portal-inspector-section {
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--border);
}
.portal-inspector-section:last-child { border-bottom: 0; }
.portal-inspector-section-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.portal-inspector-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  font-size: 12.5px;
}
.portal-inspector-row .portal-inspector-label {
  color: var(--text-muted);
  flex-shrink: 0;
}
.portal-inspector-row .portal-inspector-value {
  color: var(--text);
  text-align: right;
  word-break: break-all;
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
}
.portal-inspector-row .portal-inspector-value.is-text {
  font-family: inherit;
  font-size: 12.5px;
}
.portal-inspector-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.portal-inspector-action {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 12px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.portal-inspector-action:hover {
  background: var(--surface-2);
  border-color: var(--primary);
}
.portal-inspector-action.is-primary {
  background: var(--primary-dim);
  color: var(--primary);
  border-color: var(--primary);
}
.portal-inspector-action.is-primary:hover {
  background: var(--primary);
  color: #fff;
}
.portal-inspector-action[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

/* ── NORI-PORTAL-UI-REDESIGN-INSPECTOR-ACTION-FEEDBACK-005 ─────────────── */
.portal-inspector-action-status {
  display: none;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
}
.portal-inspector-action-status.is-info  { background: rgba(106,166,255,0.10); color: #8fb6ee; }
.portal-inspector-action-status.is-ok    { background: rgba(72,200,140,0.10); color: #7fd5a8; }
.portal-inspector-action-status.is-warn  { background: rgba(245,158,11,0.10); color: #f4c374; }
.portal-inspector-action-status.is-error { background: rgba(244,63,94,0.10);  color: #f4a4ae; }

.portal-inspector-action-group + .portal-inspector-action-group { margin-top: 10px; }
.portal-inspector-action-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 4px;
}

.portal-inspector-pending-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.portal-inspector-pending-row select {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  font-size: 12px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.portal-inspector-action.is-compact {
  width: auto;
  padding: 5px 10px;
  font-size: 11px;
  flex-shrink: 0;
}
.portal-inspector-maint-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 6px;
}
.portal-inspector-eligibility {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}
.portal-inspector-eligibility.is-blocked { color: #f4c374; }

/* ── NORI-PORTAL-UI-REDESIGN-FINAL-CLEANUP-006 ──────────────────────────────
   Light UX polish: tighter tree rows, calmer section spacing, consistent
   empty-state styling. No structural changes.
*/
.portal-tree-body { padding: 8px 10px; }
.portal-tree-row { padding: 6px 9px; font-size: 12.5px; }
.portal-tree-row + .portal-tree-row { margin-top: 1px; }
.portal-tree-row.is-project,
.portal-tree-row.is-agent { padding: 4px 8px; font-size: 11.5px; }
.portal-tree-section-label { padding: 12px 10px 4px; }
.portal-tree-section-label + .portal-tree-row { margin-top: 0; }
.portal-tree-children { margin: 1px 0 4px 6px; padding-left: 6px; }
.portal-tree-empty-row { padding: 3px 6px; }

.portal-inspector-section { padding: 12px 14px 10px; }
.portal-inspector-section-title { margin-bottom: 6px; }
.portal-inspector-row { padding: 3px 0; }
.portal-inspector-actions { gap: 5px; }
.portal-inspector-action { padding: 6px 10px; }

.portal-flat-section { padding: 12px 22px; }
.portal-flat-section + .portal-flat-section { padding-top: 12px; }
.portal-flat-row { padding: 8px 10px; }
.portal-flat-row + .portal-flat-row { margin-top: 4px; }
.portal-workspace-header { padding: 16px 22px 12px; }

.portal-flat-empty { padding: 6px 10px; }
.portal-workspace-empty { padding: 22px 22px 14px; }
.portal-workspace-empty .portal-workspace-empty-text { color: var(--text-subtle); }

/* DEV vs Internal vs Customer: keep tints from Phase 1, just calm the saturation. */
.portal-tree-row.is-internal:not(.is-selected) { border-left: 2px solid rgba(106,166,255,0.20); }
.portal-tree-row.is-customer:not(.is-selected) { border-left: 2px solid rgba(180,140,255,0.20); }

/* ── NORI-PORTAL-UI-REDESIGN-AGENTS-TAB-001 ─────────────────────────────────
   The Agents tab uses the same 3-column shell. Two layout modes:
     1) shell (default): #agents-shell visible, #agents-layout hidden.
     2) detail overlay: when openAgentDetail() is called, #agents-shell is
        hidden via JS and #agents-layout is unhidden + made grid so the
        existing detail content fills the panel.
*/
.tab-panel[data-panel="agents"] {
  display: block;
}
.tab-panel[data-panel="agents"].tab-panel-hidden {
  display: none;
}
.tab-panel[data-panel="agents"] #agents-shell {
  height: calc(100vh - var(--header-height) - 56px);
  min-height: 480px;
}
.portal-main-workspace > #agents-flat-workspace {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2c3649 #07090e;
}
.portal-main-workspace > #agents-flat-workspace::-webkit-scrollbar              { width: 6px; }
.portal-main-workspace > #agents-flat-workspace::-webkit-scrollbar-track        { background: #07090e; }
.portal-main-workspace > #agents-flat-workspace::-webkit-scrollbar-thumb        { background: #2c3649; border-radius: 3px; }
.portal-main-workspace > #agents-flat-workspace::-webkit-scrollbar-thumb:hover  { background: #3d4f68; }

/* Group rows in the agents tree */
.portal-tree-row.is-group {
  padding: 7px 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.portal-tree-row.is-group .portal-tree-kind {
  background: rgba(255,255,255,0.06);
  color: var(--text);
}
.portal-tree-row.is-group.is-dev      .portal-tree-kind { background: rgba(106,166,255,0.12); color: #8fb6ee; }
.portal-tree-row.is-group.is-lab      .portal-tree-kind { background: rgba(72,200,140,0.10); color: #7fd5a8; }
.portal-tree-row.is-group.is-customer .portal-tree-kind { background: rgba(180,140,255,0.12); color: #b89cf0; }
.portal-tree-row.is-group.is-pending  .portal-tree-kind { background: rgba(245,158,11,0.12); color: #f4c374; }
.portal-tree-row.is-group.is-stale    .portal-tree-kind { background: rgba(244,63,94,0.10); color: #f4a4ae; }

/* ── NORI-PORTAL-UI-REDESIGN-VPN-TAB-001 ────────────────────────────────────
   The VPN tab uses the same 3-column shell. No new structural classes are
   needed; the panel just defers its height to the shared workspace-shell.
*/
.tab-panel[data-panel="vpn"] {
  display: block;
}
.tab-panel[data-panel="vpn"].tab-panel-hidden {
  display: none;
}
.tab-panel[data-panel="vpn"] #vpn-shell {
  height: calc(100vh - var(--header-height) - 56px);
  min-height: 480px;
}
.portal-main-workspace > #vpn-flat-workspace {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2c3649 #07090e;
}
.portal-main-workspace > #vpn-flat-workspace::-webkit-scrollbar              { width: 6px; }
.portal-main-workspace > #vpn-flat-workspace::-webkit-scrollbar-track        { background: #07090e; }
.portal-main-workspace > #vpn-flat-workspace::-webkit-scrollbar-thumb        { background: #2c3649; border-radius: 3px; }
.portal-main-workspace > #vpn-flat-workspace::-webkit-scrollbar-thumb:hover  { background: #3d4f68; }

/* VPN-specific group tints (separate from agent groups). */
.portal-tree-row.is-group.is-vpn-all       .portal-tree-kind { background: rgba(255,255,255,0.06); color: var(--text); }
.portal-tree-row.is-group.is-vpn-linked    .portal-tree-kind { background: rgba(72,200,140,0.10); color: #7fd5a8; }
.portal-tree-row.is-group.is-vpn-unlinked  .portal-tree-kind { background: rgba(245,158,11,0.12); color: #f4c374; }
.portal-tree-row.is-group.is-vpn-revoked   .portal-tree-kind { background: rgba(244,63,94,0.10); color: #f4a4ae; }
.portal-tree-row.is-vpn { padding: 4px 8px; font-size: 11.5px; }
.portal-tree-row.is-vpn.is-revoked { opacity: 0.7; }

/* ── NORI-PORTAL-UI-REDESIGN-RELEASES-TAB-001 ───────────────────────────── */
.tab-panel[data-panel="releases"] {
  display: block;
}
.tab-panel[data-panel="releases"].tab-panel-hidden {
  display: none;
}
.tab-panel[data-panel="releases"] #releases-shell {
  height: calc(100vh - var(--header-height) - 56px);
  min-height: 480px;
}
.portal-main-workspace > #releases-flat-workspace {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2c3649 #07090e;
}
.portal-main-workspace > #releases-flat-workspace::-webkit-scrollbar              { width: 6px; }
.portal-main-workspace > #releases-flat-workspace::-webkit-scrollbar-track        { background: #07090e; }
.portal-main-workspace > #releases-flat-workspace::-webkit-scrollbar-thumb        { background: #2c3649; border-radius: 3px; }
.portal-main-workspace > #releases-flat-workspace::-webkit-scrollbar-thumb:hover  { background: #3d4f68; }

.portal-tree-row.is-group.is-rel-latest  .portal-tree-kind { background: rgba(72,200,140,0.14); color: #7fd5a8; }
.portal-tree-row.is-group.is-rel-runtime .portal-tree-kind { background: rgba(106,166,255,0.12); color: #8fb6ee; }
.portal-tree-row.is-group.is-rel-older   .portal-tree-kind { background: rgba(255,255,255,0.06); color: var(--text-muted); }
.portal-tree-row.is-group.is-rel-legacy  .portal-tree-kind { background: rgba(245,158,11,0.10); color: #f4c374; }
.portal-tree-row.is-group.is-rel-hidden  .portal-tree-kind { background: rgba(180,140,255,0.10); color: #b89cf0; }

.portal-tree-row.is-release { padding: 4px 8px; font-size: 11.5px; }
.portal-tree-row.is-release.is-latest .portal-tree-kind {
  background: rgba(72,200,140,0.16);
  color: #7fd5a8;
}

/* ── NORI-PORTAL-UI-TREE-CONTEXT-MENU-001 ─────────────────────────────────
   Custom right-click context menu for portal trees. Replaces the native
   browser context menu only on Nori tree rows.
*/
.portal-context-menu {
  position: fixed;
  z-index: 9500;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  padding: 4px 0;
  font-size: 12.5px;
  user-select: none;
}
.portal-context-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 12px;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.portal-context-menu-item:hover { background: var(--surface-2); }
.portal-context-menu-item.is-danger { color: #f4a4ae; }
.portal-context-menu-item.is-danger:hover { background: rgba(244,63,94,0.10); }
.portal-context-menu-item.is-disabled {
  color: var(--text-subtle);
  cursor: not-allowed;
  opacity: 0.65;
}
.portal-context-menu-item.is-disabled:hover { background: transparent; }
.portal-context-menu-hint {
  font-size: 10.5px;
  color: var(--text-subtle);
  font-style: italic;
}
.portal-context-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ── NORI-PORTAL-TREE-VISUAL-PASTEL-CLEANUP-001 ─────────────────────────────
   Soft pastel pass over all 4 portal trees (Customers / Agents / VPN /
   Releases). Append-only — overrides earlier hard tints with calmer
   variants and unifies row geometry. No DOM, no JS, no behavior change.
*/

:root {
  /* Pastel palette for the tree. Reused by selection / status / kind pills. */
  --pastel-blue:    rgba(140, 175, 230, 0.14);
  --pastel-blue-fg: #a9c2e8;
  --pastel-green:   rgba(140, 200, 165, 0.14);
  --pastel-green-fg: #a8d4b6;
  --pastel-yellow:  rgba(220, 195, 140, 0.14);
  --pastel-yellow-fg: #d2c099;
  --pastel-red:     rgba(220, 160, 165, 0.14);
  --pastel-red-fg:  #d8b0b5;
  --pastel-violet:  rgba(190, 170, 220, 0.14);
  --pastel-violet-fg: #c1addb;
  --pastel-neutral: rgba(255, 255, 255, 0.045);
  --pastel-neutral-fg: #aab1bd;
}

/* ── Unified row geometry across all trees ──────────────────────────── */
.portal-tree-body            { padding: 8px 8px; }
.portal-tree-row             {
  padding: 6px 10px;
  font-size: 12.5px;
  border-radius: 6px;
  border-left: 0;                                    /* drop earlier accent border */
  transition: background-color 70ms ease;
}
.portal-tree-row + .portal-tree-row { margin-top: 1px; }
.portal-tree-row.is-project,
.portal-tree-row.is-agent,
.portal-tree-row.is-vpn,
.portal-tree-row.is-release  { padding: 5px 10px; font-size: 11.75px; }
.portal-tree-row.is-group    { padding: 6px 10px; font-size: 12.5px; }
.portal-tree-section-label   {
  padding: 14px 10px 4px;
  font-size: 9.5px;
  letter-spacing: 0.10em;
  color: var(--text-subtle);
  font-weight: 600;
}
.portal-tree-children        {
  margin: 1px 0 4px 14px;
  padding-left: 8px;
  border-left: 1px dashed rgba(255,255,255,0.06);
}
.portal-tree-empty-row       { padding: 4px 8px; font-size: 11px; color: var(--text-subtle); font-style: italic; }

/* ── Counts: right-aligned, identical across trees ─────────────────── */
.portal-tree-row .portal-tree-count {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-left: 8px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* ── Hover: a single soft tone everywhere ──────────────────────────── */
.portal-tree-row:hover {
  background: rgba(255, 255, 255, 0.035);
}

/* ── Unified selection: soft pastel-blue, no extra hard color ──────── */
.portal-tree-row.is-selected,
.portal-tree-row.is-selected:hover {
  background: var(--pastel-blue) !important;
  outline: 1px solid rgba(140, 175, 230, 0.30);
  outline-offset: -1px;
}
.portal-tree-row.is-selected .portal-tree-name {
  color: #d6e1f1;
}
.portal-tree-row.is-internal:not(.is-selected),
.portal-tree-row.is-customer:not(.is-selected) {
  border-left: 0;                                    /* remove earlier left accent */
}

/* ── Kind pills: smaller, neutral defaults; per-type pastel tint ───── */
.portal-tree-row .portal-tree-kind {
  font-size: 9px;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 99px;
  background: var(--pastel-neutral);
  color: var(--pastel-neutral-fg);
  flex-shrink: 0;
  font-weight: 600;
}

/* Customers tree: parent kinds pastelized */
.portal-tree-row.is-internal .portal-tree-kind { background: var(--pastel-blue);   color: var(--pastel-blue-fg); }
.portal-tree-row.is-customer .portal-tree-kind { background: var(--pastel-violet); color: var(--pastel-violet-fg); }
.portal-tree-row.is-project  .portal-tree-kind { background: var(--pastel-neutral); color: var(--pastel-neutral-fg); }
.portal-tree-row.is-agent    .portal-tree-kind { background: var(--pastel-green);  color: var(--pastel-green-fg); }
.portal-tree-row.is-agent.is-offline .portal-tree-kind { background: var(--pastel-red); color: var(--pastel-red-fg); }

/* Agents tab groups: pastel tints */
.portal-tree-row.is-group.is-dev      .portal-tree-kind { background: var(--pastel-blue);   color: var(--pastel-blue-fg); }
.portal-tree-row.is-group.is-lab      .portal-tree-kind { background: var(--pastel-green);  color: var(--pastel-green-fg); }
.portal-tree-row.is-group.is-customer .portal-tree-kind { background: var(--pastel-violet); color: var(--pastel-violet-fg); }
.portal-tree-row.is-group.is-pending  .portal-tree-kind { background: var(--pastel-yellow); color: var(--pastel-yellow-fg); }
.portal-tree-row.is-group.is-stale    .portal-tree-kind { background: var(--pastel-red);    color: var(--pastel-red-fg); }

/* VPN tab groups: pastel tints */
.portal-tree-row.is-group.is-vpn-all       .portal-tree-kind { background: var(--pastel-neutral); color: var(--pastel-neutral-fg); }
.portal-tree-row.is-group.is-vpn-linked    .portal-tree-kind { background: var(--pastel-green);   color: var(--pastel-green-fg); }
.portal-tree-row.is-group.is-vpn-unlinked  .portal-tree-kind { background: var(--pastel-yellow);  color: var(--pastel-yellow-fg); }
.portal-tree-row.is-group.is-vpn-revoked   .portal-tree-kind { background: var(--pastel-red);     color: var(--pastel-red-fg); }
.portal-tree-row.is-vpn .portal-tree-kind  { background: var(--pastel-neutral); color: var(--pastel-neutral-fg); }
.portal-tree-row.is-vpn.is-revoked         { opacity: 0.6; }

/* Releases tab groups: pastel tints */
.portal-tree-row.is-group.is-rel-latest  .portal-tree-kind { background: var(--pastel-green);   color: var(--pastel-green-fg); }
.portal-tree-row.is-group.is-rel-runtime .portal-tree-kind { background: var(--pastel-blue);    color: var(--pastel-blue-fg); }
.portal-tree-row.is-group.is-rel-older   .portal-tree-kind { background: var(--pastel-neutral); color: var(--pastel-neutral-fg); }
.portal-tree-row.is-group.is-rel-legacy  .portal-tree-kind { background: var(--pastel-yellow);  color: var(--pastel-yellow-fg); }
.portal-tree-row.is-group.is-rel-hidden  .portal-tree-kind { background: var(--pastel-violet);  color: var(--pastel-violet-fg); }
.portal-tree-row.is-release .portal-tree-kind        { background: var(--pastel-neutral); color: var(--pastel-neutral-fg); }
.portal-tree-row.is-release.is-latest .portal-tree-kind { background: var(--pastel-green); color: var(--pastel-green-fg); }

/* ── Chevron-style expand marker ────────────────────────────────────── */
.portal-tree-row.is-group::before,
.portal-tree-row.is-internal::before,
.portal-tree-row.is-customer::before,
.portal-tree-row.is-project::before {
  content: '▸';
  display: inline-block;
  width: 10px;
  margin-right: 2px;
  color: var(--text-subtle);
  font-size: 9px;
  transform: rotate(0deg);
  transition: transform 80ms ease;
}
.portal-tree-row.is-expanded::before { transform: rotate(90deg); }
/* Agent / VPN / Release leaf rows: no chevron, indent space instead */
.portal-tree-row.is-agent::before,
.portal-tree-row.is-vpn::before,
.portal-tree-row.is-release::before {
  content: '';
  width: 10px;
  margin-right: 2px;
}

/* ── Tree header / button polish ────────────────────────────────────── */
.portal-tree-header {
  padding: 10px 12px;
  background: rgba(255,255,255,0.025);
  border-bottom: 1px solid var(--border);
}
.portal-tree-header .btn-action,
.portal-tree-header .btn-secondary {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 500;
}
.portal-tree-header .btn-action {
  background: var(--pastel-blue);
  color: var(--pastel-blue-fg);
  border: 1px solid rgba(140,175,230,0.30);
}
.portal-tree-header .btn-action:hover {
  background: rgba(140,175,230,0.20);
  color: #d6e1f1;
}
.portal-tree-header .btn-secondary {
  background: var(--pastel-neutral);
  color: var(--pastel-neutral-fg);
  border: 1px solid rgba(255,255,255,0.10);
}
.portal-tree-header .btn-secondary:hover {
  background: rgba(255,255,255,0.07);
  color: var(--text);
}

/* ── Status pill calm-down (only inside trees / inspector). Workspaces
       and other tabs keep their existing status-pill styling. ─────── */
.portal-tree-row .portal-status-pill,
.portal-tree-children .portal-status-pill {
  font-size: 9.5px;
  padding: 1px 6px;
  font-weight: 500;
}

/* NORI-PORTAL-RELEASES-HUMAN-CHANGELOG-VIEW-001 */
.portal-workspace-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: -.1px;
}
.portal-release-notes {
  margin: 0;
  padding-left: 18px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
}
.portal-release-notes li { margin: 2px 0; }
.portal-release-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.portal-release-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(106,166,255,0.10);
  color: #8fb6ee;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1px;
}
.portal-inspector-tech-details {
  cursor: default;
}
.portal-inspector-tech-details > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.portal-inspector-tech-details > summary::-webkit-details-marker { display: none; }
.portal-inspector-tech-details > summary::before {
  content: "▸";
  display: inline-block;
  width: 14px;
  color: var(--text-muted);
  transition: transform .12s ease;
}
.portal-inspector-tech-details[open] > summary::before {
  transform: rotate(90deg);
}

/* ── NORI-CORE-WORKSTATION-MASTERPLAN-PORTAL-READONLY-001 ──────────────────
   Read-only Workstation Masterplan view inside the Development tab.
   Reuses the existing .dev-badge-* badges; only adds layout for the
   phase list, the BLOCKED/OPEN colors, and the toggle row. */
.dev-mp { max-width: 900px; }
.dev-mp-hdr { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.dev-mp-title { font-size: 15px; font-weight: 700; color: var(--text); }
.dev-mp-sub { font-size: 11px; color: var(--text-muted); }
.dev-mp-stats {
  display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px;
  color: var(--text-muted); margin: 6px 0 14px 0;
}
.dev-stat-blocked { color: #fbbf24; }
.dev-stat-open    { color: #6b7280; }
.dev-badge-blocked {
  background: rgba(251,191,36,.15); color: #fbbf24;
}
.dev-badge-open {
  background: rgba(154,160,166,.1); color: #6b7280;
  border: 1px dashed rgba(154,160,166,.3);
}

.dev-mp-list { display: flex; flex-direction: column; gap: 8px; }
.dev-mp-phase {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; transition: border-color .15s;
}
.dev-mp-active  { border-left: 3px solid #60a5fa; }
.dev-mp-blocked { border-left: 3px solid #fbbf24; }
.dev-mp-done    { opacity: 0.6; }
.dev-mp-open    { opacity: 0.85; }

.dev-mp-row {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none;
}
.dev-mp-caret { font-size: 11px; color: var(--text-muted); width: 12px; text-align: center; }
.dev-mp-num {
  font-size: 10px; font-weight: 700; color: var(--text-muted);
  font-family: monospace; min-width: 64px;
}
.dev-mp-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); }
.dev-mp-progress { font-size: 11px; color: var(--text-muted); font-family: monospace; }

.dev-mp-goal {
  font-size: 12px; color: var(--text-muted); margin: 6px 0 0 22px;
  line-height: 1.4;
}
.dev-mp-tasks {
  list-style: disc; margin: 8px 0 2px 38px; padding: 0;
  font-size: 12px; color: var(--text);
}
.dev-mp-tasks li { padding: 2px 0; line-height: 1.4; }

/* NORI-NUCDEV-PORTAL-MASTERPLAN-WEEK-PRIORITY-UPDATE-001
   Weekly top-priority block — appears above the phase list. */
.dev-mp-week {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid #60a5fa; border-radius: 8px;
  padding: 12px 14px; margin: 0 0 14px 0;
}
.dev-mp-week-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: #60a5fa; margin-bottom: 8px;
}
.dev-mp-week-list {
  list-style: decimal; margin: 0 0 8px 22px; padding: 0;
  font-size: 13px; color: var(--text);
}
.dev-mp-week-list li {
  padding: 3px 0; line-height: 1.45;
  display: flex; align-items: baseline; gap: 10px;
}
.dev-mp-week-label { font-weight: 600; }
.dev-mp-week-ref {
  font-size: 10px; color: var(--text-muted); font-family: monospace;
}
.dev-mp-week-hint {
  font-size: 11px; color: var(--text-muted); line-height: 1.5;
  border-top: 1px solid var(--border); padding-top: 6px; margin-top: 4px;
}

/* ── Brain Knowledge View ────────────────────────────────────────────────── */
.brain-overall {
  display:flex;align-items:center;gap:12px;
  background:var(--surface,#1c1f23);border:1px solid var(--border,#2e333a);
  border-radius:6px;padding:14px 18px;margin-bottom:16px;
}
.brain-overall-label{font-size:12px;color:var(--text-muted,#6b737e);white-space:nowrap}
.brain-overall-bar-wrap{flex:1;height:10px;background:rgba(255,255,255,.07);border-radius:5px;overflow:hidden}
.brain-overall-bar{height:100%;border-radius:5px;transition:width .4s}
.brain-overall-pct{font-size:18px;font-weight:700;white-space:nowrap;min-width:52px;text-align:right}
.brain-legend{font-size:11px;color:var(--text-muted,#6b737e);margin-bottom:14px;display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.brain-legend-dot{display:inline-block;width:9px;height:9px;border-radius:50%}
.brain-dot-green{background:#4ade80}.brain-dot-yellow{background:#e8a020}.brain-dot-red{background:#f87171}
.brain-gaps-banner{background:rgba(248,113,113,.09);border:1px solid rgba(248,113,113,.25);border-radius:6px;padding:12px 16px;margin-bottom:16px}
.brain-gaps-title{font-weight:600;color:#f87171;margin-bottom:8px;font-size:12px}
.brain-gaps-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.brain-gaps-list li{font-size:12px}
.brain-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px}
.brain-card{background:var(--surface,#1c1f23);border:1px solid var(--border,#2e333a);border-radius:6px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.brain-card-header{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.brain-card-label{font-size:13px;font-weight:600}
.brain-card-pct{font-size:15px;font-weight:700;white-space:nowrap}
.brain-bar-wrap{height:6px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden}
.brain-bar{height:100%;border-radius:3px;transition:width .4s}
.brain-card-knows{font-size:11px;color:#4ade80;line-height:1.4}
.brain-card-gap{font-size:11px;color:#e8a020;line-height:1.4}
.brain-graph-section{margin-top:20px;border:1px solid var(--border,#2e333a);border-radius:6px;background:var(--surface,#1c1f23)}
.brain-graph-summary{padding:10px 14px;font-size:13px;font-weight:600;cursor:pointer;color:var(--text-muted,#8b949e);user-select:none}
.brain-graph-summary:hover{color:var(--text,#e6edf3)}
.brain-graph-nodes{display:flex;flex-wrap:wrap;gap:16px;padding:12px 14px 0}
.brain-graph-group{min-width:160px}
.brain-graph-type{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
.brain-graph-node{display:flex;align-items:center;gap:5px;font-size:12px;line-height:1.6}
.brain-graph-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.brain-graph-label{color:var(--text,#e6edf3)}
.brain-graph-meta{color:var(--text-muted,#8b949e);font-size:11px}
.brain-graph-edges{padding:4px 14px 12px;max-height:240px;overflow-y:auto}
.brain-graph-edge{font-size:11px;line-height:1.7;color:var(--text-muted,#8b949e)}
.brain-graph-from,.brain-graph-to{color:var(--text,#e6edf3)}
.brain-graph-rel{color:#3b82f6}
.brain-graph-note{font-style:italic}
.brain-patterns-wrap{padding:10px 14px 12px}
.brain-patterns-stats{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.brain-stat{font-size:12px;padding:3px 8px;background:rgba(255,255,255,.06);border-radius:4px;color:var(--text,#e6edf3)}
.brain-patterns-section{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted,#8b949e);margin:10px 0 4px}
.brain-pattern-row{display:flex;align-items:center;gap:6px;font-size:12px;line-height:1.7}
.brain-pattern-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.brain-pattern-label{flex:1;color:var(--text,#e6edf3)}
.brain-pattern-count{font-weight:700;color:#f87171;font-size:11px}
.brain-pattern-date{font-size:10px;color:var(--text-muted,#8b949e)}
.brain-pattern-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.brain-pattern-tag{font-size:11px;padding:2px 7px;background:rgba(59,130,246,.15);border:1px solid rgba(59,130,246,.3);border-radius:4px;color:#93c5fd}
.brain-pattern-tag em{color:#64748b;font-style:normal}

/* Brain-Puls Panel */
.brain-pulse-panel{margin:0 0 12px;background:rgba(52,211,153,.06);border:1px solid rgba(52,211,153,.2);border-radius:8px;padding:10px 14px 8px}
.brain-pulse-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.brain-pulse-dot{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 6px #34d399;flex-shrink:0;animation:pulse-glow 2s ease-in-out infinite}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 4px #34d399}50%{box-shadow:0 0 10px #34d399,0 0 20px rgba(52,211,153,.4)}}
.brain-pulse-title{font-size:12px;font-weight:700;color:#34d399;flex:1}
.brain-pulse-last{font-size:10px;color:var(--text-muted,#8b949e)}
.brain-pulse-counters{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.brain-pulse-counter{display:flex;flex-direction:column;align-items:center;background:rgba(255,255,255,.05);border-radius:6px;padding:4px 10px;min-width:52px}
.brain-pulse-counter span{font-size:18px;font-weight:700;color:#e6edf3;line-height:1.2}
.brain-pulse-counter label{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:#8b949e}
.brain-pulse-feed{font-size:11px;line-height:1.8;color:var(--text-muted,#8b949e)}
.brain-pulse-event{display:flex;align-items:center;gap:6px}
.brain-pulse-event-icon{color:#34d399;font-size:12px}

/* cust-tree-del / cust-flat-del — small ✕ delete/revoke buttons in customers tree+workspace */
.cust-tree-del,.cust-flat-del{margin-left:auto;flex-shrink:0;background:transparent;border:1px solid transparent;border-radius:4px;color:var(--text-muted,#8b949e);font-size:11px;cursor:pointer;padding:1px 5px;line-height:1;transition:color .15s,background .15s,border-color .15s}
.cust-tree-del:hover,.cust-flat-del:hover{color:#f87171;background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.3)}

/* ── Dashboard Command Center ───────────────────────────────────────────────── */
.cmd-signal{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:8px;margin-bottom:16px}
.cmd-sig{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;background:rgba(255,255,255,.06)}
.cmd-sig-ok{color:#34d399}
.cmd-sig-err{color:#f87171;background:rgba(248,113,113,.1)}
.cmd-sig-warn{color:#fbbf24;background:rgba(251,191,36,.1)}
.cmd-sig-mute{color:#94a3b8}
.cmd-dot{display:inline-block;width:7px;height:7px;border-radius:50%;flex-shrink:0}
.cmd-dot-ok{background:#34d399;box-shadow:0 0 5px #34d399}
.cmd-dot-err{background:#f87171;box-shadow:0 0 5px #f87171}
.cmd-dot-warn{background:#fbbf24;box-shadow:0 0 5px #fbbf24}
.cmd-dot-mute{background:#64748b}
.cmd-refresh-btn{background:transparent;border:none;color:#64748b;font-size:16px;cursor:pointer;padding:0 4px;margin-left:auto;transition:color .15s}
.cmd-refresh-btn:hover{color:#e6edf3}

.cmd-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:700px){.cmd-grid{grid-template-columns:1fr}}
.cmd-col{display:flex;flex-direction:column;gap:14px}
.cmd-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:14px 16px}
.cmd-card:hover{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.06);transition:all .2s}
.cmd-ch{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#64748b;margin-bottom:10px}
.cmd-link{background:transparent;border:none;color:#3b82f6;font-size:11px;cursor:pointer;padding:0;font-weight:600}
.cmd-link:hover{color:#60a5fa;text-decoration:underline}

/* Agents */
.cmd-agent-list{display:flex;flex-direction:column;gap:5px}
.cmd-agent-row{display:grid;grid-template-columns:10px 1fr auto auto;align-items:center;gap:8px;font-size:12px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.cmd-agent-row:last-child{border-bottom:none}
.cmd-agent-name{color:#e6edf3;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmd-agent-ver{color:#64748b;font-size:10px;font-family:monospace}
.cmd-agent-st{font-size:10px;font-weight:700;text-align:right}
.text-ok{color:#34d399}.text-err{color:#f87171}.text-warn{color:#fbbf24}

/* Releases */
.cmd-rel-ver{font-size:18px;font-weight:700;color:#e6edf3;margin-bottom:4px;font-family:monospace}
.cmd-rel-meta{font-size:11px;color:#64748b}

/* ISO */
.cmd-iso-ver{font-size:13px;font-weight:600;color:#e6edf3;margin-bottom:3px}
.cmd-iso-meta{font-size:11px;color:#64748b;margin-bottom:8px}
.cmd-iso-btn{display:inline-block;font-size:12px;font-weight:600;color:#3b82f6;text-decoration:none;padding:5px 12px;border:1px solid rgba(59,130,246,.4);border-radius:6px;transition:all .15s}
.cmd-iso-btn:hover{background:rgba(59,130,246,.15);border-color:#3b82f6}

/* Brain */
.cmd-brain-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.cmd-brain-num{display:flex;flex-direction:column;align-items:center;background:rgba(255,255,255,.05);border-radius:8px;padding:8px 4px}
.cmd-brain-num span{font-size:22px;font-weight:700;color:#e6edf3;line-height:1}
.cmd-brain-num label{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:#64748b;margin-top:3px}
.cmd-brain-num-err span{color:#f87171}
.cmd-brain-digest{font-size:11px;color:#64748b;margin-bottom:8px}

/* Faults */
.cmd-fault-list{display:flex;flex-direction:column;gap:5px}
.cmd-fault-row{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:8px;font-size:12px;color:#e6edf3;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.cmd-fault-row:last-child{border-bottom:none}
.cmd-fault-st{font-size:10px;color:#64748b;text-align:right}

/* Workboard */
.cmd-wb-list{display:flex;flex-direction:column;gap:6px}
.cmd-wb-item{position:relative;padding:6px 10px;border-radius:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);overflow:hidden;display:flex;align-items:center;gap:8px}
.cmd-wb-fill{position:absolute;left:0;top:0;bottom:0;background:rgba(59,130,246,.15);pointer-events:none;transition:width .4s}
.cmd-wb-title{position:relative;font-size:12px;color:#e6edf3;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmd-wb-pct{position:relative;font-size:11px;font-weight:700;color:#3b82f6}
.cmd-empty-hint{font-size:12px;color:#64748b;padding:4px 0}

/* ═══════════════════════════════════════════════════
   CUSTOMER CANVAS (cc_*)
   ═══════════════════════════════════════════════════ */

/* Full-screen overlay */
/* Split-View: Kunden-Liste links, Canvas rechts — inline im Customers-Tab */
.cc-customers-split {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.cc-customers-list {
  width: 220px;
  min-width: 180px;
  max-width: 280px;
  overflow-y: auto;
  border-right: 1px solid var(--border, #2a2a2e);
  flex-shrink: 0;
  padding: 6px 8px;
  background: var(--sidebar-bg, #0c1118);
}
/* Slim customer rows — same visual language as Agent device list */
.cc-cust-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  cursor: pointer;
  background: var(--surface-2, #18181b);
  border: 1px solid var(--border, #2a2a2e);
  border-radius: 8px;
  margin-bottom: 4px;
  width: 100%;
  text-align: left;
  color: var(--text, #e4e4e7);
  transition: background 0.12s, border-color 0.12s;
  box-sizing: border-box;
}
.cc-cust-row:hover { background: var(--surface-3, #1e1e24); border-color: var(--border-strong, #3f3f46); }
.cc-cust-row.is-active {
  background: var(--primary-a08, rgba(96,165,250,.08));
  border-color: var(--primary-a35, rgba(96,165,250,.35));
  box-shadow: 0 0 0 1px var(--primary-a25, rgba(96,165,250,.25));
}
.cc-cust-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cc-cust-dot.is-online  { background: #22c55e; }
.cc-cust-dot.is-offline { background: #52525b; }
.cc-cust-dot.is-none    { background: #3f3f46; border: 1px solid #52525b; }
.cc-cust-name {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
#cc-overlay {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg, #18181b);
}
#cc-overlay-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, #2a2a2e);
  flex-shrink: 0;
}
#cc-overlay-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #e4e4e7);
  flex: 1;
}
#cc-overlay-toolbar {
  display: flex;
  gap: 4px;
  align-items: center;
}
#cc-overlay-toolbar button {
  background: none;
  border: 1px solid var(--border, #2a2a2e);
  color: var(--text-muted, #71717a);
  font-size: 13px;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
}
#cc-overlay-toolbar button:hover { border-color: var(--accent, #6aa6ff); color: var(--accent, #6aa6ff); }
#cc-back-btn {
  background: none;
  border: 1px solid var(--border, #2a2a2e);
  color: var(--text-muted, #71717a);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 5px;
  flex-shrink: 0;
}
#cc-back-btn:hover { border-color: var(--accent, #6aa6ff); color: var(--accent, #6aa6ff); }
#cc-close-btn { display: none; }

/* Main body row: canvas + sidebar */
#cc-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Canvas wrap — fills available space, clips the infinite canvas */
#cc-canvas-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  background-color: var(--bg, #18181b);
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 16px 16px, 16px 16px, 64px 64px, 64px 64px;
  background-attachment: local;
  cursor: default;
}

/* Infinite canvas element (transform: scale + translate) */
#cc-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 4000px;
  height: 4000px;
  transform-origin: 0 0;
}

/* SVG connection layer */
#cc-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
#cc-svg path.cc-conn-hit {
  stroke: transparent;
  stroke-width: 12px;
  fill: none;
  pointer-events: stroke;
  cursor: pointer;
}
#cc-svg path.cc-conn {
  stroke: var(--border-strong, #3f3f46);
  stroke-width: 2px;
  fill: none;
  pointer-events: none;
}
#cc-svg path.cc-conn-selected { stroke: var(--accent, #6aa6ff); }
#cc-svg path.cc-conn-preview  { stroke: rgba(106,166,255,.5); stroke-dasharray: 6 4; }

/* ── CC Canvas nodes — identische Struktur wie Flow-Editor-Nodes ─── */
.cc-node {
  position: absolute;
  cursor: grab;
  user-select: none;
}
.cc-node-dragging { cursor: grabbing; opacity: .85; z-index: 10; }

/* fn-body — gleiches Layout wie agent/ui/styles.css */
.cc-node .fn-body {
  position: relative;
  background: var(--fn-bg, var(--surface-2, #1a1f2a));
  border: 1px solid var(--fn-border, var(--border-strong, #333d50));
  border-radius: 8px;
  padding: 10px 12px;
  width: 160px; min-width: 160px; max-width: 160px;
  min-height: 60px;
  display: flex; flex-direction: column; justify-content: center;
  box-sizing: border-box;
}
.cc-node-selected .fn-body { box-shadow: 0 0 0 2px var(--fn-accent, #6aa6ff); }
.cc-node-dragging .fn-body { cursor: grabbing; }

/* fn-text / fn-type / fn-name / fn-info — gleich wie Agent */
.cc-node .fn-text {
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; min-height: 0; overflow: hidden;
}
.cc-node .fn-type {
  font-size: 9px; font-weight: 600; letter-spacing: .06em;
  color: var(--text-muted, #8290a4); text-transform: uppercase; margin-bottom: 2px;
}
.cc-node .fn-name {
  font-size: 12px; color: var(--text, #dfe5ef);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center; width: 100%;
}
.cc-node .fn-info {
  margin-top: 4px; display: flex; align-items: center; justify-content: center;
  gap: 4px; width: 100%; min-height: 16px; height: 16px; overflow: hidden;
}
.cc-node .fn-info-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; font-weight: 600; letter-spacing: .02em;
  padding: 1px 6px; border-radius: 8px; line-height: 14px; white-space: nowrap;
}
.cc-node .fn-info-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.cc-node .fn-info-chip.is-ok   { background: rgba(34,197,94,.15);  color: #4ade80; }
.cc-node .fn-info-chip.is-ok   .fn-info-dot { background: #4ade80; }
.cc-node .fn-info-chip.is-idle { background: rgba(148,163,184,.12); color: var(--text-muted, #8290a4); }
.cc-node .fn-info-chip.is-idle .fn-info-dot { background: var(--text-muted, #8290a4); }

/* fn-port — identisch zu Flow-Editor-Ports */
.cc-node .fn-port {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--fn-accent, var(--text-muted, #8290a4));
  border: 2px solid var(--bg, #0c0f15);
  position: absolute; top: var(--port-y, 30px);
  margin-top: -6px; z-index: 3;
  cursor: crosshair;
  transition: background .15s, transform .1s;
}
.cc-node .fn-port-in  { left:  -6px; }
.cc-node .fn-port-out { right: -6px; }
.cc-node .fn-port-out:hover  { background: #fff; transform: scale(1.3); }
.cc-node .cc-port-in-hover   { background: #fff !important; transform: scale(1.3) !important; }

/* fn-port-label-out — Beschriftung rechts innen vom Port */
.cc-node .fn-port-label-out {
  position: absolute; right: 10px;
  top: var(--port-y, 30px); transform: translateY(-50%);
  font-size: 9px; font-weight: 700;
  pointer-events: none; letter-spacing: .06em; line-height: 1;
  color: var(--text-muted, #8290a4);
}
/* fn-port-label-in — Beschriftung links innen vom Port (wie SAVE/Auslöser) */
.cc-node .fn-port-label-in {
  position: absolute; left: 10px;
  top: var(--port-y, 30px); transform: translateY(-50%);
  font-size: 9px; font-weight: 700;
  pointer-events: none; letter-spacing: .06em; line-height: 1;
  color: var(--text-muted, #8290a4);
}

/* Farbsystem — gleiche Variablen wie Flow-Editor */
.cc-node-project { --fn-accent: #6aa6ff; --fn-bg: rgba(106,166,255,.10); --fn-border: rgba(106,166,255,.30); }
.cc-node-user    { --fn-accent: #4ade80; --fn-bg: rgba(74,222,128,.09);  --fn-border: rgba(74,222,128,.28);  }
.cc-node-vpn     { --fn-accent: #fb923c; --fn-bg: rgba(251,146,60,.09);  --fn-border: rgba(251,146,60,.28);  }
.cc-node-agent   { --fn-accent: #c084fc; --fn-bg: rgba(192,132,252,.09); --fn-border: rgba(192,132,252,.28); }

/* Projekt-Node — Hub: links User/VPN rein, rechts Agent raus */
.cc-node-project .fn-body { min-height: 82px; justify-content: flex-start; }

/* Loading state */
.cc-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-muted, #71717a);
}
.cc-load-error { color: #f87171; }

/* Right-click context menu */
#cc-ctx-menu {
  display: none;
  position: fixed;
  z-index: 1000;
  background: var(--card, #1c1c1f);
  border: 1px solid var(--border-strong, #3f3f46);
  border-radius: 6px;
  padding: 4px;
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.cc-ctx-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text, #e4e4e7);
  font-size: 12.5px;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.cc-ctx-item:hover { background: var(--hover, rgba(255,255,255,.06)); }
.cc-ctx-danger { color: #f87171; }
.cc-ctx-sep { height: 1px; background: var(--border, #2a2a2e); margin: 3px 0; }

/* Flache Kunden-Liste (linke Spalte im Canvas-Tab) */
.cc-cust-list-header {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted, #71717a);
  padding: 6px 12px 4px;
}
.cc-cust-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border, #2a2a2e);
  border-radius: 8px;
  margin-bottom: 4px;
  background: var(--surface-2, #18181b);
  color: var(--text, #e4e4e7);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.cc-cust-item:hover { background: var(--surface-3, #1e1e24); border-color: var(--border-strong, #3f3f46); }
.cc-cust-item.is-active {
  background: var(--primary-a08, rgba(96,165,250,.08));
  border-color: var(--primary-a35, rgba(96,165,250,.35));
  box-shadow: 0 0 0 1px var(--primary-a25, rgba(96,165,250,.25));
}
.cc-cust-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #3f3f46;
  border: 1px solid #52525b;
}
.cc-cust-dot.is-internal { background: #6aa6ff; border-color: #6aa6ff; }
.cc-cust-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

/* Canvas-Platzhalter wenn noch kein Kunde gewählt */
.cc-canvas-placeholder {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: var(--text-muted, #71717a);
  font-size: 13px;
}
.cc-canvas-placeholder-icon { font-size: 32px; opacity: .3; }

/* Detail-Modal (ersetzt die frühere rechte Sidebar) */
.cc-detail-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45);
}
.cc-detail-card {
  width: 320px;
  max-width: 90vw;
  background: var(--card, #1c1c1f);
  border: 1px solid var(--border-strong, #3f3f46);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  overflow: hidden;
}
.cc-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border, #2a2a2e);
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #e4e4e7);
}
.cc-detail-x {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted, #71717a); font-size: 15px; line-height: 1;
}
.cc-detail-x:hover { color: var(--text, #e4e4e7); }
.cc-detail-body { padding: 12px 14px; }
.cc-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border, #2a2a2e);
  font-size: 12px;
}
.cc-detail-row:last-child { border-bottom: 0; }
.cc-detail-key { color: var(--text-muted, #71717a); }
.cc-detail-val { color: var(--text, #e4e4e7); text-align: right; word-break: break-all; }

/* Kunden-Kacheln (Overview-Liste) — alle gleich groß */
.portal-cust-name-row {
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
/* Ausgewählter Kunde: grün hervorheben (Overview + Baum) */
.portal-flat-row.is-selected {
  border-color: rgba(74,222,128,0.55);
  background: rgba(74,222,128,0.10);
}
.portal-flat-row.is-selected .portal-flat-name { color: #bbf7d0; }
.portal-tree-row.is-selected {
  border-color: rgba(74,222,128,0.55) !important;
  background: rgba(74,222,128,0.10) !important;
}
.portal-tree-row.is-selected .portal-tree-name { color: #bbf7d0 !important; }

/* ── NORI-PORTAL-V2-PHASE3-CUSTOMER-HOME-001 — Kunden-Dashboard ───────────── */
.chome-head{padding:8px 2px 20px}
.chome-title{font-size:22px;font-weight:650;color:var(--text)}
.chome-subtitle{font-size:13px;color:var(--text-muted);margin-top:2px}
.chome-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:24px}
.chome-tile{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 18px 16px;
  cursor:pointer;font:inherit;transition:border-color .15s,transform .15s}
.chome-tile:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.chome-tile-value{font-size:30px;font-weight:700;line-height:1.1}
.chome-tile-label{font-size:14px;color:var(--text);font-weight:550;margin-top:8px}
.chome-tile-sub{font-size:12px;color:var(--text-muted)}
.chome-tile-err{border-color:var(--err-border)}
.chome-tile-warn{border-color:var(--warn-border)}
.chome-attn{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 18px}
.chome-attn-head{font-size:14px;font-weight:600;color:var(--text);margin-bottom:10px}
.chome-attn-list{display:flex;flex-direction:column;gap:8px}
.chome-attn-item{display:flex;align-items:center;gap:10px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:8px;padding:10px 12px;cursor:pointer;
  color:var(--text);font:inherit;font-size:13px;text-align:left;transition:border-color .15s}
.chome-attn-item:hover{border-color:var(--border-strong)}
.chome-attn-dot{width:8px;height:8px;border-radius:50%;flex:none}
.chome-dot-err{background:var(--err-text)}
.chome-dot-warn{background:var(--warn-text)}
.chome-dot-info{background:var(--primary)}
.chome-dot-ok{background:var(--ok-text)}
.chome-attn-empty{font-size:13px;color:var(--text-muted);padding:6px 2px}

/* ── NORI-PORTAL-V2-FLOW-001 — Kunden-Flow-Ansicht (echte Agenten-Nodes) ──── */
.cf-head{padding:2px 2px 14px}
.cf-head-main{display:flex;align-items:center;gap:12px}
.cf-head-title{font-size:20px;font-weight:650;color:var(--text)}
.cf-head-sub{font-size:12px;color:var(--text-muted);margin-top:3px}
.cf-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:3px 10px;border-radius:999px;border:1px solid var(--border)}
.cf-status-dot{width:8px;height:8px;border-radius:50%}
.cf-status-ok{color:var(--ok-text);background:var(--ok);border-color:var(--ok-border)}
.cf-status-ok .cf-status-dot{background:var(--ok-text);box-shadow:0 0 8px var(--ok-text)}
.cf-status-err{color:var(--err-text);background:var(--err);border-color:var(--err-border)}
.cf-status-err .cf-status-dot{background:var(--err-text)}
.cf-wrap{position:relative;height:calc(100vh - 210px);min-height:420px;overflow:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  background-image:radial-gradient(var(--border) 1px,transparent 1px);background-size:22px 22px}
.cf-canvas{position:relative}
.cf-svg{position:absolute;top:0;left:0;pointer-events:none;overflow:visible}
.cf-link{fill:none;stroke:var(--border-strong);stroke-width:2.5;opacity:.8}
.cf-node{position:absolute;z-index:2}
.cf-body{position:relative;display:flex;align-items:center;gap:10px;
  background:var(--surface-2);border:1px solid var(--border-strong);border-left-width:4px;
  border-radius:12px;padding:12px 14px;box-shadow:0 3px 12px rgba(0,0,0,.35);
  transition:box-shadow .2s,border-color .2s,transform .2s}
.cf-node:hover .cf-body{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.45)}
.cf-type{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);font-weight:600}
.cf-name{font-size:14px;color:var(--text);font-weight:600;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.cf-live-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--text-subtle);transition:background .2s,box-shadow .2s}
/* category tones (left accent + type color) — mirror the agent editor buckets */
.cf-tone-trigger .cf-body{border-left-color:var(--ok-text)}   .cf-tone-trigger .cf-type{color:var(--ok-text)}
.cf-tone-device  .cf-body{border-left-color:var(--primary)}   .cf-tone-device  .cf-type{color:var(--primary)}
.cf-tone-action  .cf-body{border-left-color:var(--partial-text)} .cf-tone-action .cf-type{color:var(--partial-text)}
.cf-tone-scope   .cf-body{border-left-color:#c084fc}          .cf-tone-scope   .cf-type{color:#c084fc}
.cf-tone-media   .cf-body{border-left-color:#f472b6}          .cf-tone-media   .cf-type{color:#f472b6}
.cf-tone-logic   .cf-body{border-left-color:var(--warn-text)} .cf-tone-logic   .cf-type{color:var(--warn-text)}
.cf-tone-seq     .cf-body{border-left-color:#22d3ee}          .cf-tone-seq     .cf-type{color:#22d3ee}
.cf-tone-flow    .cf-body{border-left-color:#94a3b8}          .cf-tone-flow    .cf-type{color:#94a3b8}
.cf-tone-route   .cf-body{border-left-color:#a3e635}          .cf-tone-route   .cf-type{color:#a3e635}
.cf-tone-value   .cf-body{border-left-color:#38bdf8}          .cf-tone-value   .cf-type{color:#38bdf8}
/* live states */
.cf-node.cf-active .cf-body{border-color:var(--ok-text);box-shadow:0 0 0 1px var(--ok-text),0 0 18px rgba(74,222,128,.35)}
.cf-node.cf-active .cf-live-dot{background:var(--ok-text);box-shadow:0 0 10px var(--ok-text)}
@keyframes cf-pulse{0%{box-shadow:0 0 0 0 rgba(106,166,255,.55)}70%{box-shadow:0 0 0 14px rgba(106,166,255,0)}100%{box-shadow:0 0 0 0 rgba(106,166,255,0)}}
.cf-node.cf-pulse .cf-body{animation:cf-pulse .9s ease-out}
.cf-empty{padding:48px 24px;text-align:center}
.cf-empty-title{font-size:16px;font-weight:600;color:var(--text)}
.cf-empty-sub{font-size:13px;color:var(--text-muted);margin-top:6px}