/* ==========================================================================
   BADROCK AI COMMAND CENTER V3 — CANONICAL DESIGN SYSTEM
   Theme: Luxury Dark Fintech / Real-time Spatial Orchestration
   Target Resolution: 1920x1080 Primary Desktop
   ========================================================================== */

:root {
  /* Palette */
  --bg-deep: #030712;
  --bg-surface: #070d1b;
  --bg-card: #0c1426;
  --bg-card-subtle: #111a30;
  --bg-card-hover: #15223d;
  --bg-glass: rgba(12, 20, 38, 0.75);
  
  --border-subtle: #18253e;
  --border-bright: #23375b;
  --border-focus: #00d2c4;
  
  --accent-teal: #00d2c4;
  --accent-teal-glow: rgba(0, 210, 196, 0.25);
  --accent-emerald: #00e599;
  --accent-emerald-glow: rgba(0, 229, 153, 0.2);
  --accent-blue: #38bdf8;
  --accent-amber: #f59e0b;
  --accent-amber-glow: rgba(245, 158, 11, 0.2);
  --accent-rose: #f43f5e;
  --accent-purple: #a855f7;
  
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  
  --header-height: 64px;
  --dock-width: 380px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
}

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

html, body {
  width: 100%;
  height: 100%;
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

/* ==========================================================================
   TOP HEADER
   ========================================================================== */
.top-header {
  height: var(--header-height);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  gap: 16px;
  z-index: 50;
  position: relative;
}

.brand-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.brand-logo {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: rgba(0, 210, 196, 0.08);
  border: 1px solid rgba(0, 210, 196, 0.25);
  border-radius: var(--radius-md);
  box-shadow: 0 0 16px var(--accent-teal-glow);
}

.brand-svg {
  width: 26px;
  height: 26px;
}

.pulse-core {
  animation: corePulse 2.5s infinite ease-in-out;
}
@keyframes corePulse {
  0%, 100% { opacity: 0.6; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}

.brand-text-col {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #fff;
}

.accent-title {
  color: var(--accent-teal);
  font-weight: 700;
}

.brand-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
}

.status-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-emerald);
  box-shadow: 0 0 8px var(--accent-emerald);
  animation: blink 2s infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.env-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-teal);
  background: rgba(0, 210, 196, 0.1);
  padding: 1px 6px;
  border-radius: 4px;
}

.version-tag {
  font-size: 9px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Header Search */
.header-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(12, 20, 38, 0.7);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 6px 12px;
  width: 240px;
  transition: all 0.2s;
}
.header-search-bar:focus-within {
  border-color: var(--accent-teal);
  box-shadow: 0 0 12px var(--accent-teal-glow);
  width: 280px;
}
.search-icon {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}
.header-search-bar input {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 12px;
  outline: none;
  width: 100%;
}
.search-kbd {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  background: #1e293b;
  padding: 2px 4px;
  border-radius: 3px;
}

/* Nav Menu */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.nav-icon {
  width: 15px;
  height: 15px;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.nav-item:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.02);
}
.nav-item:hover .nav-icon {
  opacity: 1;
}

.nav-item.active {
  color: var(--accent-teal);
  border-bottom-color: var(--accent-teal);
  background: rgba(0, 210, 196, 0.04);
}
.nav-item.active .nav-icon {
  opacity: 1;
  color: var(--accent-teal);
}

.nav-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  background: #1e293b;
  color: #94a3b8;
}
.nav-badge.count-16 {
  background: rgba(0, 210, 196, 0.15);
  color: var(--accent-teal);
}
.nav-badge.alert-badge {
  background: rgba(245, 158, 11, 0.18);
  color: var(--accent-amber);
}

/* Header Right Controls */
.header-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

.autopilot-controller {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(12, 20, 38, 0.85);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 4px 10px;
}

.autopilot-meta {
  display: flex;
  flex-direction: column;
}
.auto-title {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.auto-sub {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-emerald);
}

.mode-switch-bar {
  display: flex;
  background: #090f1d;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
}

.mode-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.mode-btn:hover {
  color: var(--text-primary);
}
.mode-btn.active {
  background: var(--accent-emerald);
  color: #030712;
  font-weight: 800;
  box-shadow: 0 0 8px var(--accent-emerald-glow);
}
.mode-btn[data-mode="OFF"].active {
  background: var(--accent-rose);
  color: #fff;
}
.mode-btn[data-mode="FULL_AUTO"].active {
  background: var(--accent-teal);
  color: #030712;
}

.bell-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: rgba(12, 20, 38, 0.6);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
}
.bell-btn svg {
  width: 16px;
  height: 16px;
}
.bell-btn:hover {
  border-color: var(--border-bright);
  color: var(--text-primary);
}
.bell-indicator {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  background: var(--accent-amber);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--accent-amber);
}

.owner-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px 3px 4px;
  border-radius: 20px;
  background: rgba(12, 20, 38, 0.8);
  border: 1px solid var(--border-subtle);
}
.owner-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #00d2c4);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.owner-info {
  display: flex;
  flex-direction: column;
}
.owner-name {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.owner-role {
  font-size: 9px;
  color: var(--text-muted);
}

/* ==========================================================================
   APP CONTAINER WORKSPACE
   ========================================================================== */
.app-container {
  display: flex;
  height: calc(100vh - var(--header-height));
  width: 100vw;
  overflow: hidden;
  background: var(--bg-deep);
}

.view-content {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  padding: 20px 24px;
}

/* ==========================================================================
   RIGHT COMMAND DOCK
   ========================================================================== */
.command-dock {
  width: var(--dock-width);
  flex: none;
  height: 100%;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  z-index: 40;
}

.dock-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(7, 13, 27, 0.95);
}

.dock-agent-badge {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rock-avatar-small {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0f2b3c, #00d2c4);
  border: 1px solid rgba(0, 210, 196, 0.4);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: 0 0 10px var(--accent-teal-glow);
}

.dock-pulse-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 7px;
  height: 7px;
  background: var(--accent-emerald);
  border-radius: 50%;
  border: 1px solid #030712;
  box-shadow: 0 0 6px var(--accent-emerald);
}

.dock-title-group {
  display: flex;
  flex-direction: column;
}

.dock-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
}

.dock-subtitle {
  font-size: 10px;
  color: var(--accent-teal);
  font-weight: 600;
}

.dock-expand-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.dock-expand-btn:hover {
  background: rgba(0, 210, 196, 0.1);
  border-color: var(--accent-teal);
  color: var(--accent-teal);
}
.dock-expand-btn svg {
  width: 14px;
  height: 14px;
}

/* Decision Inbox in Dock */
.dock-decision-box {
  background: rgba(245, 158, 11, 0.08);
  border-bottom: 1px solid rgba(245, 158, 11, 0.3);
  padding: 10px 14px;
}

.decision-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.decision-box-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  color: var(--accent-amber);
  letter-spacing: 0.06em;
}
.decision-box-title svg {
  width: 13px;
  height: 13px;
}

.decision-pulse {
  width: 6px;
  height: 6px;
  background: var(--accent-amber);
  border-radius: 50%;
  animation: blink 1.5s infinite;
}

.decision-items-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.decision-card-mini {
  background: rgba(12, 20, 38, 0.9);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--radius-sm);
  padding: 8px;
  font-size: 11px;
}
.decision-card-mini b {
  color: #fff;
  display: block;
  margin-bottom: 2px;
}
.decision-card-mini p {
  color: var(--text-secondary);
  font-size: 10px;
  margin-bottom: 6px;
}
.decision-actions {
  display: flex;
  gap: 6px;
}
.btn-approve-mini {
  background: var(--accent-emerald);
  border: none;
  color: #030712;
  font-size: 9px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.btn-reject-mini {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
}

/* Chat Tabs */
.dock-chat-tabs {
  display: flex;
  background: #050a14;
  border-bottom: 1px solid var(--border-subtle);
  padding: 3px 6px;
  gap: 2px;
}

.chat-tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  padding: 5px 2px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.chat-tab-btn:hover {
  color: var(--text-secondary);
}
.chat-tab-btn.active {
  background: rgba(255, 255, 255, 0.05);
  color: var(--accent-teal);
}

/* Messages Scroll */
.dock-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.msg-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 94%;
}
.msg-row.owner-msg {
  align-self: flex-end;
}
.msg-row.agent-msg {
  align-self: flex-start;
}

.msg-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: var(--text-muted);
  padding: 0 4px;
}
.msg-author {
  font-weight: 700;
  color: var(--accent-teal);
}
.owner-msg .msg-author {
  color: var(--accent-blue);
}

.msg-bubble {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  color: var(--text-primary);
  font-size: 11.5px;
  line-height: 1.45;
}
.owner-msg .msg-bubble {
  background: rgba(37, 99, 235, 0.15);
  border-color: rgba(37, 99, 235, 0.4);
  border-top-right-radius: 2px;
}
.agent-msg .msg-bubble {
  border-top-left-radius: 2px;
}
.msg-bubble.dispatched {
  border-left: 3px solid var(--accent-emerald);
}
.msg-bubble.idle {
  border-left: 3px solid var(--accent-amber);
}

/* Quick Chips */
.dock-quick-chips {
  padding: 8px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  border-top: 1px solid var(--border-subtle);
  background: rgba(7, 13, 27, 0.5);
}

.chip-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.chip-item:hover {
  background: rgba(0, 210, 196, 0.1);
  border-color: var(--accent-teal);
  color: var(--text-primary);
}

/* Input Form */
.dock-input-wrapper {
  padding: 10px 12px;
  background: #050a14;
  border-top: 1px solid var(--border-subtle);
}

.chat-input-form {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 4px 6px;
  transition: all 0.15s;
}
.chat-input-form:focus-within {
  border-color: var(--accent-teal);
  box-shadow: 0 0 10px var(--accent-teal-glow);
}

.chat-input-text {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 12px;
  padding: 6px 8px;
  outline: none;
}
.chat-send-btn {
  background: var(--accent-teal);
  border: none;
  border-radius: var(--radius-sm);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #030712;
  cursor: pointer;
  transition: all 0.15s;
}
.chat-send-btn:hover {
  background: var(--accent-emerald);
}
.chat-send-btn svg {
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   VIEW COMPONENTS (CARDS, GRIDS, HEADERS)
   ========================================================================== */

/* Page Section Header */
.view-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
}

.view-headline h1 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.view-sub {
  color: var(--text-secondary);
  font-size: 12px;
  margin-top: 4px;
}

/* Active Wave Banner */
.active-wave-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, rgba(0, 210, 196, 0.08), rgba(56, 189, 248, 0.03));
  border: 1px solid rgba(0, 210, 196, 0.25);
  border-radius: var(--radius-md);
  padding: 10px 16px;
}
.wave-badge-left {
  display: flex;
  flex-direction: column;
}
.wave-title {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent-teal);
}
.wave-name {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
.wave-progress-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}
.wave-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}
.progress-bar-bg {
  width: 100%;
  height: 6px;
  background: #1e293b;
  border-radius: 4px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-teal), var(--accent-emerald));
  border-radius: 4px;
  transition: width 0.4s ease;
}

/* 6 Top Metric Cards Grid */
.kpi-metrics-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.2s ease;
}
.kpi-card:hover {
  border-color: var(--border-bright);
  transform: translateY(-1px);
}
.kpi-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.kpi-value-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.kpi-value {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 800;
  color: #fff;
}
.kpi-sub {
  font-size: 10px;
  color: var(--text-secondary);
}
.kpi-card.accent-card {
  border-color: rgba(0, 210, 196, 0.3);
  background: linear-gradient(180deg, rgba(0, 210, 196, 0.05), var(--bg-card));
}
.kpi-card.warning-card {
  border-color: rgba(245, 158, 11, 0.3);
}

/* DOMINANT MISSION CARD */
.dominant-mission-card {
  background: linear-gradient(180deg, #0e172e, var(--bg-card));
  border: 1px solid rgba(0, 210, 196, 0.35);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 20px var(--accent-teal-glow);
  position: relative;
  overflow: hidden;
}
.dominant-mission-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-teal), var(--accent-emerald), transparent);
}

.dominant-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 16px;
}
.dominant-tag-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.badge-dominant {
  background: rgba(0, 210, 196, 0.15);
  color: var(--accent-teal);
  border: 1px solid rgba(0, 210, 196, 0.4);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 4px;
}
.badge-project {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #94a3b8;
  background: #1e293b;
  padding: 2px 6px;
  border-radius: 4px;
}
.badge-priority {
  font-size: 9px;
  font-weight: 800;
  color: var(--accent-rose);
  background: rgba(244, 63, 94, 0.15);
  border: 1px solid rgba(244, 63, 94, 0.3);
  padding: 2px 6px;
  border-radius: 4px;
}
.badge-status {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
}
.badge-status.RUNNING {
  background: rgba(0, 229, 153, 0.15);
  color: var(--accent-emerald);
  border: 1px solid rgba(0, 229, 153, 0.4);
}
.badge-status.DRAFT, .badge-status.WAITING {
  background: rgba(245, 158, 11, 0.15);
  color: var(--accent-amber);
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.dominant-title {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}
.dominant-goal {
  color: var(--text-secondary);
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.5;
}

/* 6-Stage Visual Pipeline */
.pipeline-container {
  margin: 16px 0;
  padding: 14px;
  background: rgba(7, 13, 27, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.pipeline-header-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.pipeline-track {
  display: flex;
  align-items: center;
  position: relative;
}
.pipe-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
}
.stage-bubble {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #111a30;
  border: 2px solid #23375b;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  transition: all 0.2s;
}
.stage-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  margin-top: 6px;
}
.stage-actor {
  font-size: 9px;
  color: var(--accent-teal);
  margin-top: 1px;
}
.pipe-stage.completed .stage-bubble {
  background: rgba(0, 229, 153, 0.15);
  border-color: var(--accent-emerald);
  color: var(--accent-emerald);
}
.pipe-stage.completed .stage-name {
  color: #fff;
}
.pipe-stage.active .stage-bubble {
  background: var(--accent-teal);
  border-color: #fff;
  color: #030712;
  box-shadow: 0 0 12px var(--accent-teal-glow);
  transform: scale(1.15);
}
.pipe-stage.active .stage-name {
  color: var(--accent-teal);
  font-weight: 800;
}
.stage-connector {
  flex: 1;
  height: 2px;
  background: #1e293b;
  margin: 0 -10px;
  margin-bottom: 30px;
  z-index: 1;
}
.stage-connector.done {
  background: var(--accent-emerald);
}

/* Next Action Banner */
.next-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 210, 196, 0.08);
  border: 1px solid rgba(0, 210, 196, 0.25);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-top: 12px;
}
.next-action-text {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #fff;
}
.next-action-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: var(--accent-teal);
  color: #030712;
  padding: 2px 6px;
  border-radius: 4px;
}
.btn-action-primary {
  background: var(--accent-teal);
  border: none;
  color: #030712;
  font-weight: 800;
  font-size: 11px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
}
.btn-action-primary:hover {
  background: var(--accent-emerald);
  transform: translateY(-1px);
}

/* WHY IDLE DIAGNOSTICS CARD */
.why-idle-card {
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-top: 12px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.why-idle-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.15);
  display: grid;
  place-items: center;
  color: var(--accent-amber);
  flex: none;
}
.why-idle-content {
  flex: 1;
}
.why-idle-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent-amber);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.why-idle-text {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.45;
}
.why-idle-candidates {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.why-candidate-item {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #cbd5e1;
  background: rgba(12, 20, 38, 0.6);
  padding: 4px 8px;
  border-radius: 4px;
  border-left: 2px solid var(--accent-amber);
}

/* Lower 2-Column Grid (Activity + Evidence) */
.lower-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.panel-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}
.panel-title {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}

.activity-feed-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
}
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 11px;
}
.activity-avatar {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #1e293b;
  color: var(--accent-teal);
  font-size: 9px;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex: none;
}
.activity-body {
  flex: 1;
}
.activity-title {
  color: #fff;
  font-weight: 600;
}
.activity-meta {
  color: var(--text-muted);
  font-size: 10px;
  margin-top: 2px;
}

.evidence-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
}
.evidence-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: rgba(0, 229, 153, 0.02);
  border: 1px solid rgba(0, 229, 153, 0.2);
  border-radius: var(--radius-sm);
  font-size: 11px;
}
.evidence-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.evidence-name {
  color: #fff;
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: 11px;
}
.evidence-hash {
  color: var(--accent-emerald);
  font-family: var(--font-mono);
  font-size: 9px;
}
.evidence-status {
  font-size: 9px;
  font-weight: 800;
  color: var(--accent-emerald);
  background: rgba(0, 229, 153, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ==========================================================================
   VIEW 2: WORK (KANBAN COMMAND SURFACE)
   ========================================================================== */
.work-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}

.work-filter-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 3px;
}

.work-tab-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
}
.work-tab-btn:hover {
  color: #fff;
}
.work-tab-btn.active {
  background: var(--accent-teal);
  color: #030712;
  font-weight: 800;
}

.work-test-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.work-test-toggle input {
  accent-color: var(--accent-teal);
}

.kanban-board-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  height: calc(100vh - 200px);
  overflow-x: auto;
}

.kanban-col {
  background: rgba(12, 20, 38, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.kanban-col-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(7, 13, 27, 0.8);
}
.kanban-col-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
}
.kanban-col-count {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  background: #1e293b;
  color: #94a3b8;
  padding: 1px 6px;
  border-radius: 10px;
}

.kanban-cards-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mission-kanban-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mission-kanban-card:hover {
  border-color: var(--accent-teal);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}
.mcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mcard-id {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-teal);
}
.mcard-prio {
  font-size: 8px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
}
.mcard-prio.P0 {
  background: rgba(244, 63, 94, 0.2);
  color: var(--accent-rose);
}
.mcard-prio.P1 {
  background: rgba(245, 158, 11, 0.2);
  color: var(--accent-amber);
}
.mcard-title {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
}
.mcard-project {
  font-size: 9px;
  color: var(--text-muted);
}
.mcard-progress-bar {
  width: 100%;
  height: 4px;
  background: #1e293b;
  border-radius: 2px;
  overflow: hidden;
  margin: 2px 0;
}
.mcard-progress-fill {
  height: 100%;
  background: var(--accent-teal);
  border-radius: 2px;
}
.mcard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 9px;
  color: var(--text-muted);
}
.mcard-agent {
  font-weight: 700;
  color: var(--accent-teal);
}

/* ==========================================================================
   VIEW 3: TEAM (SPATIAL COLLABORATION NEXUS)
   ========================================================================== */
.team-subnav-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}
.team-sub-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s;
}
.team-sub-btn.active {
  background: var(--accent-teal);
  color: #030712;
  border-color: var(--accent-teal);
}

.spatial-nexus-container {
  height: calc(100vh - 220px);
  background: radial-gradient(circle at center, rgba(0, 210, 196, 0.05) 0%, rgba(7, 13, 27, 0.95) 70%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nexus-svg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.nexus-core-node {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, #0f2b3c, #030712);
  border: 2px solid var(--accent-teal);
  box-shadow: 0 0 35px var(--accent-teal-glow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  cursor: pointer;
}
.core-pulse-ring {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 210, 196, 0.4);
  animation: rotateRing 30s linear infinite;
}
@keyframes rotateRing {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.nexus-core-node b {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.1em;
}
.nexus-core-node span {
  font-size: 8px;
  font-weight: 700;
  color: var(--accent-teal);
  text-transform: uppercase;
}

/* 16 Persona Nodes Layout */
.persona-node-card {
  position: absolute;
  width: 145px;
  background: rgba(12, 20, 38, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 5;
  transform: translate(-50%, -50%);
}
.persona-node-card:hover {
  border-color: var(--accent-teal);
  box-shadow: 0 0 16px var(--accent-teal-glow);
  transform: translate(-50%, -50%) scale(1.06);
  z-index: 15;
}
.pnode-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pnode-avatar {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #1e293b;
  color: var(--accent-teal);
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 210, 196, 0.3);
}
.pnode-info {
  display: flex;
  flex-direction: column;
}
.pnode-name {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}
.pnode-role {
  font-size: 9px;
  color: var(--text-muted);
}
.pnode-load-bar {
  width: 100%;
  height: 3px;
  background: #1e293b;
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.pnode-load-fill {
  height: 100%;
  background: var(--accent-emerald);
  border-radius: 2px;
}
.pnode-status-row {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* ==========================================================================
   VIEW 4: INTELLIGENCE (GATEWAYS & ROUTING)
   ========================================================================== */
.intel-free-pool-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(0, 229, 153, 0.08), rgba(0, 210, 196, 0.04));
  border: 1px solid rgba(0, 229, 153, 0.3);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  margin-bottom: 20px;
}
.free-pool-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.free-pool-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: var(--accent-emerald);
  color: #030712;
  padding: 4px 10px;
  border-radius: 6px;
}
.free-pool-desc {
  font-size: 12px;
  color: #fff;
}

.intel-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
}

.table-surface {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.table-surface th {
  text-align: left;
  padding: 10px 12px;
  background: rgba(7, 13, 27, 0.6);
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-subtle);
}
.table-surface td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(24, 37, 62, 0.5);
  color: var(--text-primary);
}
.table-surface tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

/* ==========================================================================
   VIEW 5: ECOSYSTEM (LIVE TOPOLOGY)
   ========================================================================== */
.eco-topology-container {
  height: calc(100vh - 240px);
  background: radial-gradient(circle at center, rgba(56, 189, 248, 0.04) 0%, rgba(7, 13, 27, 0.95) 70%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
}

.eco-node-card {
  position: absolute;
  width: 135px;
  background: rgba(12, 20, 38, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  transform: translate(-50%, -50%);
  z-index: 5;
}
.eco-node-card:hover {
  border-color: var(--accent-blue);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.3);
  transform: translate(-50%, -50%) scale(1.05);
  z-index: 10;
}
.eco-node-title {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}
.eco-node-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
}
.eco-node-status {
  display: inline-block;
  font-size: 8px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  margin-top: 4px;
}
.eco-node-status.ONLINE {
  background: rgba(0, 229, 153, 0.15);
  color: var(--accent-emerald);
}
.eco-node-status.WARNING {
  background: rgba(245, 158, 11, 0.15);
  color: var(--accent-amber);
}

/* ==========================================================================
   VIEW 6: CONTROL (15 CANONICAL VECTORS)
   ========================================================================== */
.control-verdict-banner {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.08), rgba(12, 20, 38, 0.9));
  border: 1px solid rgba(244, 63, 94, 0.3);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.verdict-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.verdict-badge {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.08em;
  background: var(--accent-rose);
  color: #fff;
  padding: 6px 14px;
  border-radius: 6px;
  box-shadow: 0 0 16px rgba(244, 63, 94, 0.3);
}
.verdict-info h3 {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}
.verdict-info p {
  font-size: 11px;
  color: var(--text-secondary);
}

.vectors-matrix-section {
  margin-bottom: 20px;
}
.vectors-section-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.vectors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.vector-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.15s;
}
.vector-card:hover {
  border-color: var(--border-bright);
}
.vector-card.PASS {
  border-left: 3px solid var(--accent-emerald);
}
.vector-card.PARTIAL {
  border-left: 3px solid var(--accent-amber);
}
.vector-card.BLOCKED {
  border-left: 3px solid var(--accent-rose);
}
.vector-card.NOT_TESTED {
  border-left: 3px solid #64748b;
}

.vector-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vector-num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted);
}
.vector-pill {
  font-size: 9px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
}
.vector-pill.PASS {
  background: rgba(0, 229, 153, 0.15);
  color: var(--accent-emerald);
}
.vector-pill.PARTIAL {
  background: rgba(245, 158, 11, 0.15);
  color: var(--accent-amber);
}
.vector-pill.BLOCKED {
  background: rgba(244, 63, 94, 0.15);
  color: var(--accent-rose);
}
.vector-pill.NOT_TESTED {
  background: rgba(100, 116, 139, 0.15);
  color: #94a3b8;
}

.vector-title {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.vector-evidence {
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.vector-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 9px;
  color: var(--text-muted);
}

/* ==========================================================================
   VIEW 7: SYSTEM (TECHNICAL CONTROL PLANE)
   ========================================================================== */
.system-status-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

.services-mesh-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.service-cell {
  background: rgba(12, 20, 38, 0.7);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.service-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.service-name {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.service-port {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--accent-teal);
}
.service-status-pill {
  font-size: 9px;
  font-weight: 800;
  color: var(--accent-emerald);
}

.log-stream-box {
  background: #030712;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #94a3b8;
  height: 240px;
  overflow-y: auto;
  line-height: 1.5;
}
.log-line {
  margin-bottom: 2px;
}
.log-time {
  color: #64748b;
}
.log-agent {
  color: var(--accent-teal);
}

/* ==========================================================================
   SLIDEOVER DRAWERS & MODALS
   ========================================================================== */
.slideover-drawer-overlay,
.expanded-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 7, 18, 0.75);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  justify-content: flex-end;
}

.slideover-drawer {
  width: 480px;
  height: 100%;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-bright);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  animation: slideIn 0.25s ease-out;
}
@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.drawer-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.drawer-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent-teal);
}
.drawer-header h2 {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-top: 2px;
}
.drawer-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
}
.drawer-close-btn:hover {
  color: #fff;
}
.drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* Expanded Modal Specifics */
.expanded-modal-overlay {
  justify-content: center;
  align-items: center;
  padding: 30px;
}
.expanded-modal-card {
  width: 1200px;
  max-width: 95vw;
  height: 780px;
  max-height: 90vh;
  background: var(--bg-surface);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: scaleIn 0.2s ease-out;
}
@keyframes scaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.expanded-head {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(7, 13, 27, 0.95);
}
.expanded-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rock-avatar-large {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0f2b3c, #00d2c4);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow: 0 0 16px var(--accent-teal-glow);
}
.expanded-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}
.expanded-subtitle {
  font-size: 11px;
  color: var(--text-secondary);
}
.expanded-head-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.search-mini input {
  background: rgba(12, 20, 38, 0.7);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  color: #fff;
  font-size: 11px;
  outline: none;
  width: 220px;
}
.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
}
.modal-close-btn:hover {
  color: #fff;
}

.expanded-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.expanded-sidebar {
  width: 280px;
  border-right: 1px solid var(--border-subtle);
  padding: 18px;
  background: rgba(7, 13, 27, 0.5);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sidebar-section-title {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.exp-cat-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-size: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
}
.exp-cat-btn:hover {
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
}
.exp-cat-btn.active {
  background: rgba(0, 210, 196, 0.1);
  border-color: rgba(0, 210, 196, 0.3);
  color: var(--accent-teal);
  font-weight: 700;
}

.exp-action-btn {
  background: rgba(12, 20, 38, 0.6);
  border: 1px solid var(--border-subtle);
  color: #fff;
  font-size: 11px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
}
.exp-action-btn:hover {
  border-color: var(--accent-teal);
  color: var(--accent-teal);
}

.expanded-chat-flow {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-deep);
}
.expanded-messages-list {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.expanded-input-bar {
  padding: 16px 20px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
}
.exp-input-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.exp-input-form textarea {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 12px;
  outline: none;
  resize: none;
}
.exp-input-form textarea:focus {
  border-color: var(--accent-teal);
  box-shadow: 0 0 12px var(--accent-teal-glow);
}
.exp-send-btn {
  align-self: flex-end;
  background: var(--accent-teal);
  border: none;
  color: #030712;
  font-weight: 800;
  font-size: 11px;
  padding: 8px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
}
.exp-send-btn:hover {
  background: var(--accent-emerald);
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   V3 FINAL POLISH: 3-STATE DOCK (COMPACT, DOCKED, EXPANDED)
   ========================================================================== */
.dock-controls-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dock-ctrl-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dock-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-subtle);
  color: #fff;
}

/* COMPACT STATE */
.app-container.dock-state-compact .command-dock {
  width: 54px !important;
  min-width: 54px !important;
  cursor: pointer;
  background: rgba(7, 13, 27, 0.98);
}

.app-container.dock-state-compact .dock-header,
.app-container.dock-state-compact .dock-decision-box,
.app-container.dock-state-compact .dock-chat-tabs,
.app-container.dock-state-compact .dock-messages,
.app-container.dock-state-compact .dock-quick-chips,
.app-container.dock-state-compact .dock-input-wrapper {
  display: none !important;
}

.dock-compact-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 6px;
  gap: 16px;
  height: 100%;
}

.compact-gate-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f59e0b;
  color: #030712;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 11px;
  display: grid;
  place-items: center;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
  animation: pulse-gentle 2s infinite;
}

.compact-dock-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: var(--text-muted);
  margin-top: 10px;
  text-transform: uppercase;
}

.compact-unfold-btn {
  margin-top: auto;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--accent-teal);
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.compact-unfold-btn:hover {
  background: var(--accent-teal);
  color: #000;
  box-shadow: 0 0 10px var(--accent-teal-glow);
}

/* ==========================================================================
   V3 FINAL POLISH: RUSSIAN EXECUTIVE DECISION CARDS
   ========================================================================== */
.executive-gate-card {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  transition: border-color 0.2s ease;
}

.executive-gate-card:hover {
  border-color: rgba(245, 158, 11, 0.7);
}

.eg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.eg-badge {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.eg-id {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}

.eg-title {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px 0;
  line-height: 1.35;
}

.eg-field {
  margin-bottom: 7px;
}

.eg-label {
  font-size: 9px;
  font-weight: 800;
  color: var(--accent-teal);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  display: block;
  margin-bottom: 2px;
}

.eg-val {
  font-size: 11px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.35;
}

.eg-val.eg-risk {
  color: #fca5a5;
  font-weight: 600;
}

.eg-val.eg-rec {
  color: var(--accent-emerald);
  font-weight: 600;
}

.eg-tech-details {
  margin-top: 9px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  padding-top: 7px;
}

.eg-tech-details summary {
  font-size: 10px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

.eg-tech-details summary:hover {
  color: var(--accent-teal);
}

.eg-tech-pre {
  font-family: var(--font-mono);
  font-size: 9px;
  color: #94a3b8;
  background: #030712;
  padding: 8px;
  border-radius: 4px;
  overflow-x: auto;
  max-height: 140px;
  margin-top: 6px;
  white-space: pre-wrap;
  word-break: break-all;
  border: 1px solid var(--border-subtle);
}

.eg-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* ==========================================================================
   V3 FINAL POLISH: ACTIONABLE WHY IDLE
   ========================================================================== */
.why-idle-actionable-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin: 16px 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.why-idle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.why-idle-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #f59e0b;
}

.why-idle-mode-pill {
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent-emerald);
  border: 1px solid rgba(16, 185, 129, 0.3);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.why-idle-sub {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.actionable-idle-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.actionable-idle-table th {
  text-align: left;
  padding: 8px 10px;
  color: var(--text-muted);
  font-size: 9.5px;
  font-weight: 800;
  border-bottom: 1px solid var(--border-subtle);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.actionable-idle-table td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: top;
}

.idle-mission-id {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent-teal);
  font-size: 10px;
}

.idle-mission-title {
  font-size: 11px;
  color: #fff;
  font-weight: 600;
  margin-top: 2px;
}

.idle-reason-cell {
  color: var(--text-secondary);
  max-width: 280px;
  line-height: 1.3;
}

.idle-owner-cell {
  color: #f59e0b;
}

.idle-action-cell {
  color: var(--accent-teal);
}

.idle-eta-cell {
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-size: 10px;
}

.auto-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 800;
  white-space: nowrap;
}

.auto-badge.can-fix {
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent-emerald);
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.auto-badge.requires-owner {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

/* ==========================================================================
   V3 FINAL POLISH: CONTROL NO-GO BLOCKERS PANEL
   ========================================================================== */
.control-nogo-blockers-card {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 20px;
}

.nogo-title {
  font-size: 12px;
  font-weight: 800;
  color: #fca5a5;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.nogo-item {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 5px;
  line-height: 1.4;
  display: flex;
  gap: 8px;
}

.nogo-bullet {
  color: var(--accent-ruby);
  font-weight: 800;
}

/* ==========================================================================
   V3 FINAL POLISH: TEAM LIVING GRAPH DEPTH & HALOS
   ========================================================================== */
.nexus-core-node {
  width: 130px !important;
  height: 130px !important;
  background: radial-gradient(circle at 35% 35%, #0f354a, #071221 80%) !important;
  box-shadow: 0 0 40px rgba(0, 210, 196, 0.35), inset 0 0 20px rgba(0, 210, 196, 0.2) !important;
  border: 2px solid var(--accent-teal) !important;
}

.persona-node-card.active-halo {
  box-shadow: 0 0 20px rgba(0, 210, 196, 0.5) !important;
  border-color: var(--accent-teal) !important;
}

.persona-node-card:hover {
  transform: translate(-50%, -50%) scale(1.05);
  border-color: var(--accent-teal);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  z-index: 10;
}

/* High-impact 4-metric main row */
.kpi-main-priority-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

.kpi-priority-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}

.kpi-priority-card.hero-active {
  border-color: rgba(0, 210, 196, 0.4);
  background: linear-gradient(135deg, rgba(0, 210, 196, 0.04), transparent);
}

.kpi-priority-card.hero-warning {
  border-color: rgba(245, 158, 11, 0.4);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), transparent);
}

.kpi-priority-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.kpi-priority-val {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  margin-bottom: 4px;
}

.kpi-priority-sub {
  font-size: 10.5px;
  color: var(--text-secondary);
}

.kpi-secondary-row {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}

.kpi-secondary-pill {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 11px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.kpi-secondary-pill strong {
  font-family: var(--font-mono);
  color: #fff;
}

/* ==========================================================================
   MODEL MARKET VIEW
   ========================================================================== */
.filters {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.filter {
  padding: 6px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
}
.filter:hover { border-color: var(--accent-teal); color: var(--accent-teal); }
.filter.active { background: var(--accent-teal); border-color: var(--accent-teal); color: var(--bg-deep); }

.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.model-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  transition: all 0.2s;
}
.model-card:hover {
  border-color: var(--accent-teal);
  box-shadow: 0 4px 16px rgba(0, 210, 196, 0.15);
  transform: translateY(-2px);
}

.model-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.model-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
}

.model-provider {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
}

.status {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}
.status.HEALTHY, .status.CONNECTED, .status.ONLINE { background: rgba(34, 197, 94, 0.2); color: var(--accent-emerald); }
.status.DEGRADED, .status.WAITING { background: rgba(234, 179, 8, 0.2); color: var(--accent-amber); }
.status.OFFLINE, .status.OFFLINE, .status.AUTH_REQUIRED, .status.OFFLINE { background: rgba(239, 68, 68, 0.2); color: var(--accent-ruby); }

.metric-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12px;
}
.metric-row:last-child { border-bottom: none; }
.metric-row span:first-child { color: var(--text-muted); }
.metric-row b { color: var(--text-primary); font-family: var(--font-mono); font-size: 11px; }

.model-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.model-name { font-weight: 700; font-size: 14px; }
.model-provider { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }

.role-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.tag { padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; background: var(--bg-card); border: 1px solid var(--border-subtle); color: var(--text-secondary); }

/* ==========================================================================
   QA / EVIDENCE VIEW
   ========================================================================== */
.qa-pipeline { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.qa-stage { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 16px; }
.qa-stage-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.qa-stage-name { font-weight: 700; font-size: 14px; color: var(--accent-teal); }
.qa-stage-status { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: var(--accent-teal); color: var(--bg-deep); text-transform: uppercase; }
.qa-stage-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.qa-stage-missions { font-size: 12px; color: var(--text-secondary); }
.qa-stage-missions strong { color: var(--accent-teal); }

.qa-pipeline { display: flex; flex-direction: column; gap: 12px; }
.qa-stage { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 16px; }
.qa-stage-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.qa-stage-name { font-weight: 700; font-size: 14px; color: var(--accent-teal); }
.qa-stage-status { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: var(--accent-teal); color: var(--bg-deep); text-transform: uppercase; }
.qa-stage-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.qa-stage-missions { font-size: 12px; color: var(--text-secondary); }
.qa-stage-missions strong { color: var(--accent-teal); }

.evidence-table-wrapper { overflow-x: auto; }
.evidence-table-body tr:hover { background: rgba(255,255,255,0.02); }
.evidence-table-body td code { font-family: var(--font-mono); font-size: 11px; background: rgba(255,255,255,0.05); padding: 2px 6px; border-radius: 4px; }

/* QA Pipeline Styles */
.qa-pipeline { display: flex; flex-direction: column; gap: 12px; }
.qa-stage { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 16px; }
.qa-stage-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.qa-stage-name { font-weight: 700; font-size: 14px; color: var(--accent-teal); }
.qa-stage-status { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: var(--accent-teal); color: var(--bg-deep); text-transform: uppercase; }
.qa-stage-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.qa-stage-missions { font-size: 12px; color: var(--text-secondary); }
.qa-stage-missions strong { color: var(--accent-teal); }

/* Evidence Registry */
.evidence-table-wrapper { overflow-x: auto; }
.evidence-table-body tr:hover { background: rgba(255,255,255,0.02); }
.evidence-table-body td code { font-family: var(--font-mono); font-size: 11px; background: rgba(255,255,255,0.05); padding: 2px 6px; border-radius: 4px; }

/* Model Market */
.model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.model-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 16px; transition: all 0.2s; }
.model-card:hover { border-color: var(--accent-teal); box-shadow: 0 4px 16px rgba(0, 210, 196, 0.15); transform: translateY(-2px); }
.model-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.model-name { font-weight: 700; font-size: 14px; color: var(--text-primary); }
.model-provider { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }
.status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
.status.HEALTHY, .status.CONNECTED, .status.ONLINE { background: rgba(34, 197, 94, 0.2); color: var(--accent-emerald); }
.status.DEGRADED, .status.WAITING { background: rgba(234, 179, 8, 0.2); color: var(--accent-amber); }
.status.OFFLINE, .status.AUTH_REQUIRED { background: rgba(239, 68, 68, 0.2); color: var(--accent-ruby); }
.metric-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); font-size: 12px; }
.metric-row:last-child { border-bottom: none; }
.metric-row span:first-child { color: var(--text-muted); }
.metric-row b { color: var(--text-primary); font-family: var(--font-mono); font-size: 11px; }
.model-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.model-name { font-weight: 700; font-size: 14px; }
.model-provider { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }
.status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
.status.HEALTHY, .status.CONNECTED, .status.ONLINE { background: rgba(34, 197, 94, 0.2); color: var(--accent-emerald); }
.status.DEGRADED, .status.WAITING { background: rgba(234, 179, 8, 0.2); color: var(--accent-amber); }
.status.OFFLINE, .status.AUTH_REQUIRED { background: rgba(239, 68, 68, 0.2); color: var(--accent-ruby); }
.metric-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); font-size: 12px; }
.metric-row:last-child { border-bottom: none; }
.metric-row span:first-child { color: var(--text-muted); }
.metric-row b { color: var(--text-primary); font-family: var(--font-mono); font-size: 11px; }
.model-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.model-name { font-weight: 700; font-size: 14px; }
.model-provider { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }
.status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
.status.HEALTHY, .status.CONNECTED, .status.ONLINE { background: rgba(34, 197, 94, 0.2); color: var(--accent-emerald); }
.status.DEGRADED, .status.WAITING { background: rgba(234, 179, 8, 0.2); color: var(--accent-amber); }
.status.OFFLINE, .status.AUTH_REQUIRED { background: rgba(239, 68, 68, 0.2); color: var(--accent-ruby); }
.metric-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); font-size: 12px; }
.metric-row:last-child { border-bottom: none; }
.metric-row span:first-child { color: var(--text-muted); }
.metric-row b { color: var(--text-primary); font-family: var(--font-mono); font-size: 11px; }
.model-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.model-name { font-weight: 700; font-size: 14px; }
.model-provider { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }
.status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
.status.HEALTHY, .status.CONNECTED, .status.ONLINE { background: rgba(34, 197, 94, 0.2); color: var(--accent-emerald); }
.status.DEGRADED, .status.WAITING { background: rgba(234, 179, 8, 0.2); color: var(--accent-amber); }
.status.OFFLINE, .status.AUTH_REQUIRED { background: rgba(239, 68, 68, 0.2); color: var(--accent-ruby); }
.metric-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); font-size: 12px; }
.metric-row:last-child { border-bottom: none; }
.metric-row span:first-child { color: var(--text-muted); }
.metric-row b { color: var(--text-primary); font-family: var(--font-mono); font-size: 11px; }
.model-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.model-name { font-weight: 700; font-size: 14px; }
.model-provider { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }
.status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
.status.HEALTHY, .status.CONNECTED, .status.ONLINE { background: rgba(34, 197, 94, 0.2); color: var(--accent-emerald); }
.status.DEGRADED, .status.WAITING { background: rgba(234, 179, 8, 0.2); color: var(--accent-amber); }
.status.OFFLINE, .status.AUTH_REQUIRED { background: rgba(239, 68, 68, 0.2); color: var(--accent-ruby); }
.metric-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); font-size: 12px; }
.metric-row:last-child { border-bottom: none; }
.metric-row span:first-child { color: var(--text-muted); }
.metric-row b { color: var(--text-primary); font-family: var(--font-mono); font-size: 11px; }
.model-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.model-name { font-weight: 700; font-size: 14px; }
.model-provider { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }
.status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
.status.HEALTHY, .status.CONNECTED, .status.ONLINE { background: rgba(34, 197, 94, 0.2); color: var(--accent-emerald); }
.status.DEGRADED, .status.WAITING { background: rgba(234, 179, 8, 0.2); color: var(--accent-amber); }
.status.OFFLINE, .status.AUTH_REQUIRED { background: rgba(239, 68, 68, 0.2); color: var(--accent-ruby); }
.metric-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); font-size: 12px; }
.metric-row:last-child { border-bottom: none; }
.metric-row span:first-child { color: var(--text-muted); }
.metric-row b { color: var(--text-primary); font-family: var(--font-mono); font-size: 11px; }
.model-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.model-name { font-weight: 700; font-size: 14px; }
.model-provider { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }
.status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
.status.HEALTHY, .status.CONNECTED, .status.ONLINE { background: rgba(34, 197, 94, 0.2); color: var(--accent-emerald); }
.status.DEGRADED, .status.WAITING { background: rgba(234, 179, 8, 0.2); color: var(--accent-amber); }
.status.OFFLINE, .status.AUTH_REQUIRED { background: rgba(239, 68, 68, 0.2); color: var(--accent-ruby); }
.metric-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); font-size: 12px; }
.metric-row:last-child { border-bottom: none; }
.metric-row span:first-child { color: var(--text-muted); }
.metric-row b { color: var(--text-primary); font-family: var(--font-mono); font-size: 11px; }
.model-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.model-name { font-weight: 700; font-size: 14px; }
.model-provider { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }
.status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
.status.HEALTHY, .status.CONNECTED, .status.ONLINE { background: rgba(34, 197, 94, 0.2); color: var(--accent-emerald); }
.status.DEGRADED, .status.WAITING { background: rgba(234, 179, 8, 0.2); color: var(--accent-amber); }
.status.OFFLINE, .status.AUTH_REQUIRED { background: rgba(239, 68, 68, 0.2); color: var(--accent-ruby); }
.metric-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); font-size: 12px; }
.metric-row:last-child { border-bottom: none; }
.metric-row span:first-child { color: var(--text-muted); }
.metric-row b { color: var(--text-primary); font-family: var(--font-mono); font-size: 11px; }
.model-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.model-name { font-weight: 700; font-size: 14px; }
.model-provider { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }
.status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
.status.HEALTHY, .status.CONNECTED, .status.ONLINE { background: rgba(34, 197, 94, 0.2); color: var(--accent-emerald); }
.status.DEGRADED, .status.WAITING { background: rgba(234, 179, 8, 0.2); color: var(--accent-amber); }
.status.OFFLINE, .status.AUTH_REQUIRED { background: rgba(239, 68, 68, 0.2); color: var(--accent-ruby); }
.metric-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); font-size: 12px; }
.metric-row:last-child { border-bottom: none; }
.metric-row span:first-child { color: var(--text-muted); }
.metric-row b { color: var(--text-primary); font-family: var(--font-mono); font-size: 11px; }
.model-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.model-name { font-weight: 700; font-size: 14px; }
.model-provider { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }
.status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
.status.HEALTHY, .status.CONNECTED, .status.ONLINE { background: rgba(34, 197, 94, 0.2); color: var(--accent-emerald); }
.status.DEGRADED, .status.WAITING { background: rgba(234, 179, 8, 0.2); color: var(--accent-amber); }
.status.OFFLINE, .status.AUTH_REQUIRED { background: rgba(239, 68, 68, 0.2); color: var(--accent-ruby); }
.metric-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); font-size: 12px; }
.metric-row:last-child { border-bottom: none; }
.metric-row span:first-child { color: var(--text-muted); }
.metric-row b { color: var(--text-primary); font-family: var(--font-mono); font-size: 11px; }
.model-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.model-name { font-weight: 700; font-size: 14px; }
.model-provider { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }
.status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
.status.HEALTHY, .status.CONNECTED, .status.ONLINE { background: rgba(34, 197, 94, 0.2); color: var(--accent-emerald); }
.status.DEGRADED, .status.WAITING { background: rgba(234, 179, 8, 0.2); color: var(--accent-amber); }
.status.OFFLINE, .status.AUTH_REQUIRED { background: rgba(239, 68, 68, 0.2); color: var(--accent-ruby); }
.metric-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); font-size: 12px; }
.metric-row:last-child { border-bottom: none; }
.metric-row span:first-child { color: var(--text-muted); }
.metric-row b { color: var(--text-primary); font-family: var(--font-mono); font-size: 11px; }
.model-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.model-name { font-weight: 700; font-size: 14px; }
.model-provider { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }
.status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
.status.HEALTHY, .status.CONNECTED, .status.ONLINE { background: rgba(34, 197, 94, 0.2); color: var(--accent-emerald); }
.status.DEGRADED, .status.WAITING { background: rgba(234, 179, 8, 0.2); color: var(--accent-amber); }
.status.OFFLINE, .status.AUTH_REQUIRED { background: rgba(239, 68, 68, 0.2); color: var(--accent-ruby); }
.metric-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); font-size: 12px; }
.metric-row:last-child { border-bottom: none; }
.metric-row span:first-child { color: var(--text-muted); }
.metric-row b { color: var(--text-primary); font-family: var(--font-mono); font-size: 11px; }
.model-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.model-name { font-weight: 700; font-size: 14px; }
.model-provider { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }
.status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
.status.HEALTHY, .status.CONNECTED, .status.ONLINE { background: rgba(34, 197, 94, 0.2); color: var(--accent-emerald); }
.status.DEGRADED, .status.WAITING { background: rgba(234, 179, 8, 0.2); color: var(--accent-amber); }
.status.OFFLINE, .status.AUTH_REQUIRED { background: rgba(239, 68, 68, 0.2); color: var(--accent-ruby); }
.metric-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); font-size: 12px; }
.metric-row:last-child { border-bottom: none; }
.metric-row span:first-child { color: var(--text-muted); }
.metric-row b { color: var(--text-primary); font-family: var(--font-mono); font-size: 11px; }
.model-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.model-name { font-weight: 700; font-size: 14px; }
.model-provider { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }
.status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
.status.HEALTHY, .status.CONNECTED, .status.ONLINE { background: rgba(34, 197, 94, 0.2); color: var(--accent-emerald); }
.status.DEGRADED, .status.WAITING { background: rgba(234, 179, 8, 0.2); color: var(--accent-amber); }
.status.OFFLINE, .status.AUTH_REQUIRED { background: rgba(239, 68, 68, 0.2); color: var(--accent-ruby); }
.metric-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); font-size: 12px; }
.metric-row:last-child { border-bottom: none; }
.metric-row span:first-child { color: var(--text-muted); }
.metric-row b { color: var(--text-primary); font-family: var(--font-mono); font-size: 11px; }

/* Filters */
.filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.filter { padding: 6px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--text-secondary); font-size: 11px; cursor: pointer; transition: all 0.15s; }
.filter:hover { border-color: var(--accent-teal); color: var(--accent-teal); }
.filter.active { background: var(--accent-teal); border-color: var(--accent-teal); color: var(--bg-deep); }

/* Model Grid */
.model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }

/* QA Pipeline Styles */
.qa-pipeline { display: flex; flex-direction: column; gap: 12px; }
.qa-stage { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 16px; }
.qa-stage-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.qa-stage-name { font-weight: 700; font-size: 14px; color: var(--accent-teal); }
.qa-stage-status { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: var(--accent-teal); color: var(--bg-deep); text-transform: uppercase; }
.qa-stage-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.qa-stage-missions { font-size: 12px; color: var(--text-secondary); }
.qa-stage-missions strong { color: var(--accent-teal); }

/* Evidence Registry */
.evidence-table-wrapper { overflow-x: auto; }
.evidence-table-body tr:hover { background: rgba(255,255,255,0.02); }
.evidence-table-body td code { font-family: var(--font-mono); font-size: 11px; background: rgba(255,255,255,0.05); padding: 2px 6px; border-radius: 4px; }

/* QA Pipeline Styles (duplicate removed) */

/* Evidence Registry (duplicate removed) */

/* Model Market (duplicate removed) */

/* QA Pipeline Styles (duplicate removed) */

/* Evidence Registry (duplicate removed) */

/* Model Market (duplicate removed) */


/* ==========================================================================
   LUXURY CYBER / OBSIDIAN GLASSMORPHISM DESIGN SYSTEM ENHANCEMENTS
   ========================================================================== */

:root {
  --font-display: 'Outfit', var(--font-sans);
  --font-body: 'Inter', var(--font-sans);
  --font-code: 'JetBrains Mono', var(--font-mono);
  
  --grad-cyan-glow: linear-gradient(135deg, #00d2c4 0%, #00e599 100%);
  --grad-core-pulse: radial-gradient(circle, rgba(0, 210, 196, 0.35) 0%, rgba(0, 229, 153, 0.1) 60%, transparent 80%);
  --grad-card-glass: linear-gradient(145deg, rgba(16, 25, 45, 0.85) 0%, rgba(9, 15, 29, 0.92) 100%);
  --grad-card-hover: linear-gradient(145deg, rgba(22, 35, 62, 0.92) 0%, rgba(13, 21, 40, 0.96) 100%);
  --shadow-neon-cyan: 0 0 25px rgba(0, 210, 196, 0.25), 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-neon-p0: 0 0 15px rgba(244, 63, 94, 0.4);
}

/* Base Typographic Elevation */
body {
  font-family: var(--font-body);
  background-color: #050811;
  background-image: 
    radial-gradient(circle at 15% 15%, rgba(0, 210, 196, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 85% 25%, rgba(168, 85, 247, 0.04) 0%, transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(0, 229, 153, 0.03) 0%, transparent 50%),
    radial-gradient(rgba(0, 210, 196, 0.06) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 28px 28px;
}

h1, h2, h3, .brand-title, .panel-title, .kpi-number, .pnode-name, .kanban-col-title {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* Header Elevation */
.top-header {
  background: rgba(7, 13, 26, 0.88);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 210, 196, 0.15);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.brand-title {
  font-weight: 800;
  font-size: 14px;
}

.accent-title {
  background: var(--grad-cyan-glow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px rgba(0, 210, 196, 0.3);
}

.nav-item {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 8px;
  position: relative;
}

.nav-item:hover {
  background: rgba(0, 210, 196, 0.08);
  color: #fff;
  border-color: rgba(0, 210, 196, 0.3);
}

.nav-item.active {
  background: rgba(0, 210, 196, 0.12);
  color: #00d2c4;
  border-color: rgba(0, 210, 196, 0.4);
  box-shadow: inset 0 0 12px rgba(0, 210, 196, 0.15), 0 0 15px rgba(0, 210, 196, 0.1);
}

/* Release Readiness Pill */
.nav-badge.go-badge {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.5) !important;
}

/* ==========================================================================
   KANBAN BOARD / WORK VIEW REDESIGN (Linear / Raycast Grade)
   ========================================================================== */

.work-controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: rgba(12, 20, 38, 0.7);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  margin-bottom: 20px;
}

.work-filter-tabs {
  display: flex;
  gap: 8px;
}

.work-tab-btn {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.work-tab-btn:hover {
  background: rgba(0, 210, 196, 0.08);
  border-color: rgba(0, 210, 196, 0.3);
  color: #fff;
}

.work-tab-btn.active {
  background: var(--grad-cyan-glow);
  color: #030712;
  border-color: transparent;
  font-weight: 800;
  box-shadow: 0 0 14px rgba(0, 210, 196, 0.4);
}

.kanban-board-container {
  display: grid;
  grid-template-columns: repeat(5, minmax(280px, 1fr));
  gap: 16px;
  height: calc(100vh - 180px);
  overflow-x: auto;
  padding-bottom: 10px;
}

.kanban-col {
  background: rgba(10, 16, 31, 0.65);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.kanban-col-head {
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.015);
}

.kanban-col-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #f1f5f9;
}

.kanban-col-count {
  font-family: var(--font-code);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

.kanban-cards-scroll {
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

/* Mission Kanban Card */
.mission-kanban-card {
  background: var(--grad-card-glass);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.mission-kanban-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--accent-teal);
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.mission-kanban-card:hover {
  background: var(--grad-card-hover);
  border-color: rgba(0, 210, 196, 0.4);
  transform: translateY(-3px) scale(1.01);
  box-shadow: var(--shadow-neon-cyan);
}

.mission-kanban-card:hover::before {
  opacity: 1;
  box-shadow: 0 0 10px var(--accent-teal);
}

.mcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mcard-id {
  font-family: var(--font-code);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-teal);
  letter-spacing: 0.02em;
}

.mcard-prio {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
}

.mcard-prio.P0 {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
  box-shadow: var(--shadow-neon-p0);
}

.mcard-prio.P1 {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #000;
}

.mcard-prio.P2 {
  background: rgba(0, 210, 196, 0.15);
  color: var(--accent-teal);
  border: 1px solid rgba(0, 210, 196, 0.3);
}

.mcard-title {
  font-size: 12.5px;
  font-weight: 600;
  color: #f8fafc;
  line-height: 1.35;
}

.mcard-project {
  font-family: var(--font-code);
  font-size: 10px;
  color: var(--text-muted);
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  width: fit-content;
}

.mcard-progress-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
}

.mcard-progress-fill {
  height: 100%;
  background: var(--grad-cyan-glow);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(0, 210, 196, 0.4);
}

.mcard-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  color: var(--text-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 8px;
}

.mcard-agent {
  font-family: var(--font-code);
  font-weight: 700;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 5px;
}

.mcard-agent::before {
  content: '●';
  color: var(--accent-emerald);
  font-size: 8px;
}

/* ==========================================================================
   SPATIAL NEXUS / TEAM TOPOLOGY GRAPH ENHANCEMENTS
   ========================================================================== */

.spatial-nexus-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 160px);
  min-height: 720px;
  background: radial-gradient(circle at center, rgba(14, 25, 48, 0.6) 0%, rgba(6, 10, 20, 0.95) 70%);
  border: 1px solid rgba(0, 210, 196, 0.12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.6), 0 8px 32px rgba(0, 0, 0, 0.5);
}

.nexus-svg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

@keyframes nexusPulseAnim {
  0% { stroke-dashoffset: 48; }
  100% { stroke-dashoffset: 0; }
}

.nexus-line-glow {
  stroke: rgba(0, 210, 196, 0.35);
  stroke-width: 1.5px;
  filter: drop-shadow(0 0 3px rgba(0, 210, 196, 0.4));
}

.nexus-pulse-line {
  stroke: #00e599;
  stroke-width: 2px;
  stroke-dasharray: 6 18;
  animation: nexusPulseAnim 2.5s linear infinite;
  filter: drop-shadow(0 0 5px #00e599);
}

/* Central ROCK Node Reactor */
.nexus-core-node {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #0d2838 0%, #06121e 100%);
  border: 2px solid #00d2c4;
  box-shadow: 0 0 35px rgba(0, 210, 196, 0.45), inset 0 0 25px rgba(0, 210, 196, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 20;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nexus-core-node:hover {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 0 55px rgba(0, 210, 196, 0.7), inset 0 0 35px rgba(0, 229, 153, 0.5);
  border-color: #00e599;
}

.nexus-core-node b {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.05em;
  text-shadow: 0 0 15px rgba(0, 210, 196, 0.8);
}

.nexus-core-node span {
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 800;
  color: var(--accent-teal);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.core-pulse-ring {
  position: absolute;
  top: -12px;
  left: -12px;
  right: -12px;
  bottom: -12px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 210, 196, 0.4);
  animation: coreSpin 20s linear infinite;
  pointer-events: none;
}

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

/* Persona Node Card */
.persona-node-card {
  position: absolute;
  width: 175px;
  background: var(--grad-card-glass);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 210, 196, 0.25);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
  transform: translate(-50%, -50%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.persona-node-card:hover {
  border-color: var(--accent-teal);
  box-shadow: var(--shadow-neon-cyan);
  transform: translate(-50%, -50%) scale(1.08);
  z-index: 30;
}

.pnode-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pnode-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(0, 210, 196, 0.15);
  border: 1px solid rgba(0, 210, 196, 0.3);
  color: var(--accent-teal);
  font-size: 12px;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.pnode-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.03em;
}

.pnode-role {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}

.pnode-model-pill {
  font-family: var(--font-code);
  font-size: 9px;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(0, 210, 196, 0.08);
  border: 1px solid rgba(0, 210, 196, 0.2);
  color: var(--accent-teal);
  margin: 6px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pnode-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  color: var(--text-muted);
}

.pnode-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-emerald);
  box-shadow: 0 0 6px var(--accent-emerald);
  display: inline-block;
  margin-right: 4px;
}

/* ==========================================================================
   INTELLIGENCE (ИНТЕЛЛЕКТ) & MODELS MARKETPLACE ENHANCEMENTS
   ========================================================================== */

.model-market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.model-candidate-card {
  background: var(--grad-card-glass);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.model-candidate-card:hover {
  border-color: rgba(0, 210, 196, 0.4);
  transform: translateY(-2px);
  box-shadow: var(--shadow-neon-cyan);
}

.model-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.model-name-title {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
}

.model-provider-badge {
  font-family: var(--font-code);
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: #c084fc;
}

.model-metrics-row {
  display: flex;
  gap: 12px;
  font-size: 10.5px;
  color: var(--text-secondary);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 8px;
}

.model-metric-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.model-metric-label {
  font-size: 8.5px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.model-metric-val {
  font-family: var(--font-code);
  font-weight: 700;
  color: #f1f5f9;
}

.model-metric-val.latency {
  color: var(--accent-emerald);
}

/* ==========================================================================
   SLIDEOVER DRAWERS (PERSISTENT & ULTRA-SLEEK)
   ========================================================================== */

.slideover-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(3, 7, 18, 0.7);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  justify-content: flex-end;
}

.slideover-drawer {
  width: 520px;
  max-width: 90vw;
  height: 100%;
  background: rgba(9, 15, 29, 0.96);
  backdrop-filter: blur(24px);
  border-left: 1px solid rgba(0, 210, 196, 0.25);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  animation: drawerSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes drawerSlide {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.drawer-header {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.015);
}

.drawer-tag {
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--accent-teal);
  text-transform: uppercase;
}

.drawer-header h2 {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin-top: 4px;
}

.drawer-content {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}


/* ==========================================================================
   JARVIS VOICE & ADVANCED TEAM VIEWS & TELEGRAM STYLES
   ========================================================================== */

/* Voice Mic Button */
.chat-voice-btn {
  background: rgba(0, 210, 196, 0.08);
  border: 1px solid rgba(0, 210, 196, 0.3);
  color: var(--accent-teal);
  border-radius: var(--radius-sm);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  flex-shrink: 0;
}

.chat-voice-btn:hover {
  background: rgba(0, 210, 196, 0.2);
  border-color: var(--accent-teal);
  box-shadow: 0 0 12px var(--accent-teal-glow);
  transform: scale(1.05);
}

.chat-voice-btn.voice-active {
  background: #ff3366 !important;
  border-color: #ff3366 !important;
  color: #fff !important;
  box-shadow: 0 0 20px rgba(255, 51, 102, 0.8) !important;
  animation: pulse-mic 1.2s infinite ease-in-out;
}

@keyframes pulse-mic {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 51, 102, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(255, 51, 102, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 51, 102, 0); }
}

.voice-tts-btn {
  transition: all 0.2s ease;
}

.voice-tts-btn.active {
  color: var(--accent-teal) !important;
  border-color: rgba(0, 210, 196, 0.4) !important;
  background: rgba(0, 210, 196, 0.1) !important;
}

.btn-msg-listen {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 11px;
  padding: 2px 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
  margin-top: 4px;
}

.btn-msg-listen:hover {
  background: rgba(0, 210, 196, 0.15);
  color: var(--accent-teal);
  border-color: var(--accent-teal);
}

/* Subnav tabs */
.team-subnav-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 12px;
}

.team-sub-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.team-sub-btn:hover {
  background: var(--bg-hover);
  color: #fff;
  border-color: var(--border-active);
}

.team-sub-btn.active {
  background: rgba(0, 210, 196, 0.12);
  color: var(--accent-teal);
  border-color: var(--accent-teal);
  box-shadow: 0 0 14px var(--accent-teal-glow);
}

/* Skill Matrix Grid */
.team-matrix-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: fadeIn 0.3s ease;
}

.matrix-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.matrix-filter-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.matrix-filter-btn.active, .matrix-filter-btn:hover {
  background: rgba(0, 210, 196, 0.15);
  color: var(--accent-teal);
  border-color: var(--accent-teal);
}

.matrix-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
}

.matrix-agent-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.matrix-agent-card:hover {
  border-color: var(--accent-teal);
  box-shadow: 0 4px 24px rgba(0, 210, 196, 0.12);
  transform: translateY(-2px);
}

.matrix-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.matrix-agent-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.matrix-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(0, 210, 196, 0.1);
  border: 1px solid rgba(0, 210, 196, 0.3);
  display: grid;
  place-items: center;
  font-size: 18px;
}

.matrix-agent-name {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}

.matrix-agent-role {
  font-size: 10px;
  color: var(--accent-teal);
  font-weight: 700;
  text-transform: uppercase;
}

.matrix-grade-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 215, 0, 0.12);
  color: #ffd700;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.matrix-skill-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.matrix-skill-label {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--text-secondary);
}

.matrix-skill-bar-wrap {
  height: 5px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  overflow: hidden;
}

.matrix-skill-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #00d2c4, #00e599);
  transition: width 0.4s ease;
}

.matrix-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 12px;
}

.matrix-tech-tag {
  font-size: 9.5px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.04);
  color: #cbd5e1;
  border: 1px solid var(--border-subtle);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Certifications View */
.team-cert-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: fadeIn 0.3s ease;
}

.cert-hero-banners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.cert-banner-card {
  background: linear-gradient(135deg, rgba(0, 229, 153, 0.06), rgba(0, 210, 196, 0.02));
  border: 1px solid rgba(0, 229, 153, 0.25);
  border-radius: var(--radius-md);
  padding: 14px;
}

.cert-banner-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.cert-banner-title {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}

.cert-status-pass {
  font-size: 9.5px;
  font-weight: 800;
  background: rgba(0, 229, 153, 0.2);
  color: var(--accent-emerald);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--accent-emerald);
}

.cert-grid-agents {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.cert-agent-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cert-agent-card:hover {
  border-color: var(--accent-emerald);
}

.btn-recertify {
  background: rgba(0, 229, 153, 0.1);
  border: 1px solid rgba(0, 229, 153, 0.3);
  color: var(--accent-emerald);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
}

.btn-recertify:hover {
  background: rgba(0, 229, 153, 0.25);
  box-shadow: 0 0 12px rgba(0, 229, 153, 0.3);
}

/* Reliability View */
.team-reliability-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: fadeIn 0.3s ease;
}

.rel-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.rel-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
}

.rel-kpi-val {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 800;
  color: var(--accent-teal);
  margin-bottom: 4px;
}

.rel-kpi-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}

.rel-table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Telegram Gateway Card */
.telegram-gateway-card {
  background: linear-gradient(135deg, rgba(0, 136, 204, 0.08), rgba(0, 210, 196, 0.04));
  border: 1px solid rgba(0, 136, 204, 0.3);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 16px;
}

.tg-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.tg-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}

.tg-actions-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.btn-tg {
  background: rgba(0, 136, 204, 0.15);
  border: 1px solid rgba(0, 136, 204, 0.4);
  color: #00bfff;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-tg:hover {
  background: rgba(0, 136, 204, 0.3);
  box-shadow: 0 0 12px rgba(0, 136, 204, 0.4);
  color: #fff;
}

.tg-console-log {
  background: #090d16;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #7dd3fc;
  max-height: 120px;
  overflow-y: auto;
  white-space: pre-wrap;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}


/* Learning Radar & Git Projects Styles */
.radar-section {
  margin-top: 24px;
  background: var(--bg-card);
  border: 1px solid rgba(0, 210, 196, 0.25);
  border-radius: var(--radius-md);
  padding: 20px;
}

.radar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.radar-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.radar-grid-projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
}

.radar-project-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.2s ease;
}

.radar-project-card:hover {
  border-color: var(--accent-teal);
  background: rgba(0, 210, 196, 0.03);
}

.radar-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.radar-repo-link {
  color: var(--accent-teal);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.radar-repo-link:hover {
  text-decoration: underline;
}

.radar-roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.radar-role-card {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.05), rgba(0, 210, 196, 0.02));
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-accept-role {
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid #ffd700;
  color: #ffd700;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-accept-role:hover {
  background: rgba(255, 215, 0, 0.3);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
}

.btn-global-train {
  background: linear-gradient(135deg, #00d2c4, #00e599);
  color: #051016;
  font-weight: 800;
  font-size: 12px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-global-train:hover {
  box-shadow: 0 0 16px rgba(0, 229, 153, 0.5);
  transform: translateY(-1px);
}